#musicWrapper > .rsWrapper > div:first-child {
  position: relative;
  padding: 20px 0;
  align-items: flex-start;
}

/* #musicWrapper .filter {
  background: #f3f3f3;
  padding: 20px 0;
} */

#musicWrapper .filter#filter .listBox {
  display: flex;
}

#musicWrapper .filter .listBox {
  display: none;
}

/* #musicWrapper .filter .rsWrapper .title {
  width: 152px;
  margin-top: 0;
}

#musicWrapper .filter .rsWrapper .title h2 {
  font-size: 16px;
  font-weight: 600;
  color: #0e0e1f;
  margin: 0 0 0 20px;
} */

#musicWrapper .filter .rsWrapper .reset #whiteBtn {
  width: 89px;
  height: 34px;
  border-radius: 24px;
  font-size: 14px;
  margin: 8px 0 0;
}

#musicWrapper .filter .rsWrapper .reset #whiteBtn img {
  width: 18px;
}

#musicWrapper .filter .rsWrapper .reset #greyBtn2 {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  font-size: 14px;
  color: #e94cf7;
}

#musicWrapper .filter .rsWrapper .reset #greyBtn4 {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  font-size: 14px;
}

/* #musicWrapper .filter .rsWrapper .listBox {
  margin: 0 0 8px;
  min-height: 36px;
} */

/* #musicWrapper .filter .rsWrapper .listBox :where(.css-dev-only-do-not-override-14i19y2).ant-radio-group {
  font-weight: 400;
  font-size: 14px;
} */

#musicWrapper .rsWrapper > div .content {
}

#musicWrapper .rsWrapper > div .content > .titleBox {
  margin: 0 0 12px;
}

#musicWrapper .rsWrapper > div .content .titleBox > h1 {
  font-size: 32px;
  font-weight: bold;
  color: #0e0e1f;
  gap: 12px;
  display: flex;
}

#musicWrapper .rsWrapper > div .content .titleBox > h1 br {
  display: none;
}

#musicWrapper .rsWrapper > div .content > .titleBox > img {
  display: none;
}
/*리스트 상단 검색영역*/
.rsWrapper > div .content .titleBox .flexSearchBox {
  display: flex;
  flex-direction: row;
  gap: 12px;
}
.rsWrapper > div .content .titleBox .flexSearchBox button {
  border-radius: 4px;
}
#otherWrapper .rsWrapper > div .content .titleBox .search,
#musicWrapper .rsWrapper > div .content .titleBox .search {
  width: 400px;
  height: 42px;
  background: #f4f5f7;
  padding: 8px 12px;
  gap: 12px;
}

#musicWrapper .rsWrapper > div .content .titleBox .search img {
  width: 18px;
  margin: 0 13px 0 0;
  height: auto;
}

#musicWrapper .rsWrapper > div .content .titleBox .search input {
  border: none;
  background: none;
  width: calc(100% - 16px);
  box-shadow: none;
  font-size: 15px;
  line-height: 1;
  color: #000;
  font-weight: 400;
}

#musicWrapper .rsWrapper > div .content .titleBox .search input::placeholder {
  font-size: 13px;
  color: #a3a1a7;
}

#musicWrapper .rsWrapper > div .content .searchBox div {
  width: auto;
}

.rsWrapper > div .content .filterGroup #pinkBtn2,
.rsWrapper > div .content .searchBox div #pinkBtn2 {
  min-width: 80px;
  height: 33px;
  font-size: 14px;
  border-radius: 24px;
  margin: 0 4px 0 0;
}
.rsWrapper > div .content .titleBox .searchBox .btn-reset {
  border-radius: 4px;
}
.filterGroup {
  width: 100%;
  overflow-x: auto;
  white-space: nowrap;
  padding: 0 0 12px;
  /* gap: 8px; */
  scrollbar-width: none;
}

.filterGroup > div {
}
#musicWrapper .rsWrapper > div .content .filterGroup div #pinkBtn2.active,
#musicWrapper .rsWrapper > div .content .searchBox div #pinkBtn2.active {
  color: #ffffff;
  background: linear-gradient(to right, #ca79fc 0%, #ff5eb6 100%);
  border: none;
}

#musicWrapper .rsWrapper > div .content .searchBox div div {
  margin: 0 0 0 8px;
}

#musicWrapper .rsWrapper > div .content .searchBox div #pinkBtn.myStore {
  background: linear-gradient(90deg, #b041f3 0%, #ec15ff 100%);
}

/* #musicWrapper .rsWrapper > div .content .searchBox div #pinkBtn p:first-child {
  margin: 0 13px 0 0;
} */
#musicWrapper .rsWrapper > div .content .searchBox div #purpleBtn {
  box-shadow: none;
}
#musicWrapper .rsWrapper > div .content .searchBox div #purpleBtn p,
#musicWrapper .rsWrapper > div .content .searchBox div #pinkBtn p,
#musicWrapper .rsWrapper > div .content .searchBox div #whiteBtn p {
  font-size: 14px;
}
#musicWrapper .rsWrapper > div .content .searchBox div button:disabled {
  background-image: inherit !important;
}
#musicWrapper .rsWrapper > div .content .searchBox div #whiteBtn {
  width: auto;
  height: 40px;
  padding: 0 12px;
  border-radius: 4px;
}

#musicWrapper .rsWrapper > div .content .searchBox div #whiteBtn div img {
  width: 14px;
}

#musicWrapper .rsWrapper > div .content .searchBox {
  margin: 8px 0;
  height: 48px;
}

#musicWrapper .rsWrapper > div .content .listBox {
  padding: 0;
  border-top: solid 2px #464548;
}

#musicWrapper .rsWrapper > div .content .listBox .list#active {
  background-color: #fdf2ff;
}

#musicWrapper .rsWrapper > div .content .listBox .list {
  padding: 12px 0 11px;
  flex-wrap: wrap;
  /* border-radius: 8px; */
  /* margin: 0 0 4px; */
  gap: 5px;
  border-bottom: 1px solid #e2dfe4;
  background: #fff;
  /* display: flex
;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    width: 100%; */
}
#musicWrapper .rsWrapper > div .content .listBox .list:hover {
  border-bottom: 1px solid #e2dfe4;
  background: #f4f5f7;
}
#musicWrapper .rsWrapper > div .content .listBox .list:hover .btn img.activeIcon {
  background: #f4f5f7;
}
#musicWrapper .rsWrapper > div .content .listBox .list > div {
  font-size: 14px;
  font-weight: 600;
}
#musicWrapper .rsWrapper > div .content .listBox .list .HeaderTitle {
  /* width: 75%; */
  width: 100%;
  text-align: center;
}

#musicWrapper .rsWrapper > div .content .listBox .list .video {
  cursor: pointer;
  width: 88px;
  align-items: flex-start;
  padding-left: 12px;
}

#musicWrapper .rsWrapper > div .content .listBox .list .check {
  width: 20px;
  margin: 0 10px;
}

#musicWrapper .rsWrapper > div .content .listBox .list .rankBox {
  width: 80px;
  text-align: center;
}

#musicWrapper .rsWrapper > div .content .listBox .list .rankBox h1 {
  font-size: 14px;
}

#musicWrapper .rsWrapper > div .content .listBox .list .rankBox div {
  width: auto;
}

#musicWrapper .rsWrapper > div .content .listBox .list .rankBox div img {
  width: 10px;
}

#musicWrapper .rsWrapper > div .content .listBox .list .rankBox div p {
  font-size: 12px;
  color: #c4c3c7;
}

#musicWrapper .rsWrapper > div .content .listBox .list .rankBox div p#up {
  color: #f34144;
}

#musicWrapper .rsWrapper > div .content .listBox .list .rankBox div p#down {
  color: #0d88d4;
}

/* 60, 20, 20, 20 */
#musicWrapper .rsWrapper > div .content .listBox .list .thumb {
  min-width: 64px;
  width: 64px;
  min-height: 64px;
  height: 64px;
  border-radius: 8px;
  margin: 0 10px;
  object-fit: cover;
}

#musicWrapper .rsWrapper > div .content .listBox .list .titleBox {
  /* width: calc((100% - 40px - 60px - 80px - 50px - 88px - 200px - 48px - 48px - 48px - 48px)); */
  flex: 1 1;
}

#musicWrapper .rsWrapper > div .content .listBox .list .titleBox .title {
  width: 60%;
  margin-top: 0;
  padding: 4px 12px;
  gap: 8px 4px;
}
#musicWrapper .rsWrapper > div .content .listBox .list .titleBox span {
  color: #a3a1a7;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.28px;
}
/* #musicWrapper .rsWrapper > div .content .listBox .list .titleBox .title div {
  margin: 0 0 8px;
} */

#musicWrapper .rsWrapper > div .content .listBox .list .titleBox .title div img {
  width: 20px;
  height: 20px;
  border-radius: 100%;
  margin: 0 3px 0 0;
}

#musicWrapper .rsWrapper > div .content .listBox .list .titleBox .title h1 {
  display: -webkit-box;
  font-size: 16px;
  color: #0e0e1f;
  font-weight: 600;
  cursor: pointer;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all; 
}

#musicWrapper .rsWrapper > div .content .listBox .list .titleBox .title div p {
  font-size: 12px;
  color: #323146;
  font-weight: 400;
}

#musicWrapper .rsWrapper > div .content .listBox .list .titleBox .userBox {
  width: 40%;
}

#musicWrapper .rsWrapper > div .content .listBox .list .titleBox .userBox img {
  width: 24px;
  height: 24px;
  border-radius: 100%;
  /* margin: 0 8px 0 0; */
}

#musicWrapper .rsWrapper > div .content .listBox .list .titleBox .userBox p {
  font-size: 14px;
  color: #0e0e1f;
  font-weight: 400;
  font-weight: 500;
  cursor: pointer;
  letter-spacing: -0.28px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 1.2;
}

#musicWrapper .rsWrapper > div .content .listBox .list .heart {
  width: 50px;
  padding: 0 12px;
  position: relative;
  cursor: pointer;
}

#musicWrapper .rsWrapper > div .content .listBox .list .heart img {
  width: 100%;
}

#musicWrapper .rsWrapper > div .content .listBox .list .heart img.activeIcon {
  position: absolute;
  width: calc(100% - 24px);
  height: auto;
  left: 12px;
  opacity: 0;
  transition: all 0.2s ease-in-out;
}

#musicWrapper .rsWrapper > div .content .listBox .list .heart:hover img.activeIcon {
  opacity: 1;
}

#musicWrapper .rsWrapper > div .content .listBox .list .views {
  width: 88px;
}

#musicWrapper .rsWrapper > div .content .listBox .list .views p {
  font-size: 14px;
  gap: 8px;
  display: flex;
  align-items: center;
}

#musicWrapper .rsWrapper > div .content .listBox .list .views .icon {
  font-size: 24px;
  color: #cccccc;
}

#musicWrapper .rsWrapper > div .content .listBox .list .star {
  width: 200px;
}

#musicWrapper .rsWrapper > div .content .listBox .list .star p {
  font-size: 16px;
  color: #cccccc;
  margin: 0 0 0 3px;
}

#musicWrapper .rsWrapper > div .content .listBox .list .star p#active {
  color: #ffa514;
}

#musicWrapper .rsWrapper > div .content .listBox .list .btn {
  width: 44px;
  padding: 0 12px;
  position: relative;
  cursor: pointer;
  background-color: transparent;
  background-color: initial;
  border-radius: 0;
  border-radius: initial;
}

#musicWrapper .rsWrapper > div .content .listBox .list .btn img {
  width: 100%;
}

#musicWrapper .rsWrapper > div .content .listBox .list .btn img.activeIcon {
  opacity: 0;
  position: absolute;
  left: 12px;
  width: calc(100% - 22px);
  transition: all 0.2s ease-in-out;
  background: #fff;
}
#musicWrapper .rsWrapper > div .content .listBox .list#active .btn img.activeIcon {
  background-color: #f3f3f3;
}

#musicWrapper .rsWrapper > div .content .listBox .list .btn:hover img.activeIcon,
#musicWrapper .rsWrapper > div .content .listBox .list .btn#active img.activeIcon {
  opacity: 1;
}
/*design.css 이전*/
#musicWrapper .rsWrapper > div .content .listBox .list .titleBox .title {
  width: 100%;
}
#musicWrapper .rsWrapper > div .content .listBox .list .titleBox .title div {
  padding: 0 0 4px;
}
#musicWrapper .rsWrapper > div .content .listBox .list .titleBox .title div img {
  display: none;
}
#musicWrapper .rsWrapper > div .content .listBox .list .titleBox .title div p,
#musicWrapper .rsWrapper > div .content .listBox .list .titleBox .title div h1 {
  border-radius: 12px;
  border: 1px solid #c4c3c7;
  background: #fff;
  width: auto;
  color: #6d6c75;
  font-size: 11px;
  padding: 4px;
  font-weight: 700;
  text-wrap-mode: nowrap;
}
#musicWrapper .rsWrapper > div .content .listBox .list .titleBox .title .ant-input-outlined:focus,
#musicWrapper .rsWrapper > div .content .listBox .list .titleBox .title .ant-input-outlined:focus-within {
  border: 0;
  box-shadow: none;
}
#musicWrapper .rsWrapper > div .content .listBox .list .titleBox .userBox {
  min-width: 100px;
  width: 25%;
  gap: 8px;
}
#musicWrapper .rsWrapper > div .content .listBox .list .titleBox .gerneBox .absolBox div .title div img {
  background: #fff;
  border-radius: 100%;
}
#musicWrapper .rsWrapper > div .content .listBox .list .rankBox {
  gap: 4px;
}
#musicWrapper .rsWrapper > div .content .listBox .list .rankBox h1 {
  min-width: 24px;
}
#musicWrapper .rsWrapper > div .content .listBox .list .rankBox div {
  padding-left: 4px;
  font-weight: 600;
}
#musicWrapper .rsWrapper > div .content .listBox .list .rankBox div img {
  width: 16px;
}
#musicWrapper .rsWrapper > div .content .listBox .list .views .i-playHit {
  background: url(../../static/media/i-play.405efc4051266ee74660.svg) no-repeat left center;
  padding-left: 24px;
}
#musicWrapper .rsWrapper > div .content .listBox .list .video .i-playCnt {
  background: url(../../static/media/i-videoB.26b80e2b2a1e1926ed73.svg) no-repeat left center;
  padding-left: 28px;
  height: 20px;
  line-height: 20px;
}
#musicWrapper .rsWrapper > div .content .listBox .list .video .i-playCntnot {
  background: url(../../static/media/i-videoB2.b3a8e4f291652ff9f180.svg) no-repeat left center;
  padding-left: 28px;
  height: 20px;
  line-height: 20px;
  cursor: not-allowed !important;
}

#musicWrapper .rsWrapper > div .content .listBox .list .video .ant-dropdown {
  z-index: 1;
}
#musicWrapper .rsWrapper > div .content .listBox .list .play img {
  width: calc(100% - 4px);
}
#musicWrapper .rsWrapper > div .content .listBox .list p {
  font-size: 14px;
  font-weight: 500;
}
/* #musicWrapper .rsWrapper > div .content .listBox .list .video p::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  vertical-align: middle;
  background: url(/src/assets/images/common/i-videoB.svg) no-repeat left center;
  background-size: contain;
} */
#musicWrapper .rsWrapper > div .content .listBox .list .video.active p::before {
  background: url(../../static/media/i-videoG.524645cfe8d1191d16e8.svg) no-repeat left center;
  background-size: contain;
}
#musicWrapper .rsWrapper > div .content .listBox .list .fixedW {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
}
@media (max-width: 900px) {
  #musicWrapper .rsWrapper > div .content .listBox .list .fixedW {
    display: none;
  }
}
#musicWrapper .rsWrapper > div .content .titleBox .search img {
  margin: 0;
}

.reWrapper .titleBox .search {
  gap: 16px;
}
.reWrapper .titleBox .search img {
  margin: 0;
}
.reWrapper .titleBox .search .ant-input-affix-wrapper {
  padding: 0;
  background: transparent;
  border-width: 0;
}

#musicInfo .rsWrapper .thumbBox .absolBox > div > img {
  width: 48px;
}

#musicBox .affixBox .tabBox,
#musicBox .affixBox .top {
  background: rgba(255, 255, 255, 0.3);
}

#musicBox .listBox.playlist .list .titleBox .user {
  margin: 0;
  gap: 4px;
}
#musicBox .listBox.playlist .list .titleBox .user img {
  display: none;
}

#musicBox .listBox.playlist .list .titleBox .user p {
  border-radius: 12px;
  border: 1px solid #c4c3c7;
  background: #fff;
  color: #6d6c75;
  font-size: 11px;
  font-weight: 700;
  padding: 2.2px 4px 1px;
  width: auto;
  line-height: 1;
}
#musicBox .listBox.playlist .list .titleBox .user h1 {
  /* border-radius: 12px;
  border: 1px solid #c4c3c7;
  background: #fff;
  color: #6d6c75;
  font-size: 11px;
  font-weight: 700;
  padding: 2.2px 4px 1px;
  width: auto;
  line-height: 1; */
}
#musicBox .listBox.playlist .list .titleBox .user h1 {
  color: #0e0e1f;
  font-size: 14px;
  font-weight: 600;
  border: 0;
  background: transparent;
}
#musicBox .listBox.playlist .list p {
  font-size: 24px;
  width: 16px;
}
#musicBox .listBox.playlist .list p .anticon-more svg {
  display: none;
}
/* 모바일필터 */
#musicMobileFilter > div:first-child > p {
  font-size: 30px;
  margin: 0 0 38px;
}

#musicMobileFilter .content h1 {
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 5px;
  color: #323146;
}

#musicMobileFilter .content h2 {
  font-size: 20px;
  color: #323146;
  margin: 0 0 30px;
}

#musicMobileFilter .content .searchBox {
  height: 41px;
  border-bottom: 1px solid #87858b;
  padding: 12px 10px;
  margin: 0 0 20px;
}

#musicMobileFilter .content .searchBox input {
  width: calc(100% - 13px);
  border: none;
  padding: 0;
  box-shadow: none;
}

#musicMobileFilter .content .searchBox img {
  width: 13px;
}

#musicMobileFilter .content .listBox {
  border-bottom: 1px solid #dbdbe0;
}

#musicMobileFilter .content .listBox h3 {
  font-size: 18px;
  color: #323146;
  margin: 20px 0 10px;
}

#musicMobileFilter .content .listBox div {
  margin: 0 0 20px;
  flex-wrap: wrap;
}

#musicMobileFilter .content .listBox div .list {
  width: auto;
  padding: 8px;
  border-radius: 16px;
  margin: 0 8px 6px 0;
  border: 1px solid #d6d6d6;
}

#musicMobileFilter .content .listBox div .list#active {
  border: solid 1px #e94cf7;
}

#musicMobileFilter .content .listBox div .list#active p {
  color: #e94cf7;
}

#musicMobileFilter .content .listBox div .list#active .round {
  background: #e94cf7;
}

#musicMobileFilter .content .listBox div .list#active .round img {
  width: 6px;
  display: flex;
}

#musicMobileFilter .content .listBox div .list .round img {
  display: none;
}

#musicMobileFilter .content .listBox div .list .round {
  width: 12px;
  height: 12px;
  border-radius: 100%;
  background: #d6d6d6;
  margin: 0 6px 0 0;
}

#musicMobileFilter .content .listBox div .list p {
  font-size: 12px;
  color: #222;
}

#musicMobileFilter .btnBox {
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 30px 20px;
  background: #ffffff;
}

#musicMobileFilter .btnBox #logoutBtn,
#musicMobileFilter .btnBox #pinkBtn {
  width: 49%;
  height: 37px;
  border-radius: 3px;
}

#musicMobileFilter .btnBox #logoutBtn img {
  width: 20px;
  margin: 0 10px 0 0;
}

#musicMobileFilter .btnBox #pinkBtn p {
  font-size: 14px;
  color: #0e0e1f;
}

#mobileFixedBox {
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: calc(100% - 40px);
  padding: 10px 15px;
  box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.25);
  border: solid 1px #f4f5f7;
  background-color: #ffffff;
  z-index: 100;
  border-radius: 30px;
  display: none;
}

#mobileFixedBox .select {
  width: auto;
  padding: 11px 14px;
  background-color: #f4f5f7;
  border-radius: 40px;
}

#mobileFixedBox .select p {
  font-size: 14px;
}

#mobileFixedBox .select span {
  color: #e94cf7;
  font-weight: 700;
}

#mobileFixedBox > div {
  width: auto;
}

#mobileFixedBox > div img {
  width: 14px;
  margin: 0 0 0 30px;
}

#mobileFixedBox > div img:first-child {
  margin: 0;
}

#musicBox {
  /* position: fixed; */
  top: 70px;
  left: 20px;
  z-index: 10;
  /* width: 375px; */
  background: linear-gradient(180deg, #bbecee 0%, #f1c3f5 800px);
  border-radius: 4px;
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.15);
}

#detail #musicBox {
  width: 100%;
  background: none;
  border-radius: 0;
  border-radius: initial;
  box-shadow: none;
}

#musicBox > div:first-child > p {
  font-size: 16px;
  padding: 12px 12px 0;
}

#musicBox .album {
  position: relative;
  margin-bottom: -40px;
  margin-top: 24px;
}

#musicBox .album .absoluteBox {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

#musicBox .album .absoluteBox div {
  width: 240px;
  height: 240px;
  border-radius: 100%;
  /* background: #3e3d53; */
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
}

#musicBox .album .absoluteBox div .borderBox {
  width: 68px;
  height: 68px;
  border-radius: 100%;
  background: linear-gradient(90deg, #0faab2 0%, #c12dca 100%);
  padding: 4px;
}

#musicBox .album .absoluteBox div .borderBox img {
  width: 100%;
  height: 100%;
  border-radius: 100%;
}

#musicBox .album > img {
  width: 240px;
  height: 240px;
  border-radius: 100%;
}

#musicBox .affixBox {
  width: 100%;
}

#musicBox .affixBox .ant-affix {
  background: linear-gradient(to bottom, #bbecee, #f1c3f5);
}

#musicBox .playBox {
  background-color: rgba(255, 255, 255, 0.4);
  padding: 10px 0 8px;
  z-index: 2;
  border-bottom: solid 1px rgba(0, 0, 0, 0.25);
  position: relative;
}

#musicBox .playBox > p {
  font-size: 14px;
  color: #ffffff;
  margin: 0 0 24px;
  text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5);
}

#musicBox .playBox .title {
  padding: 0 16px;
  margin: 0;
  gap: 12px;
  letter-spacing: -0.4px;
  text-align: center;
  line-height: 1.1;
  justify-content: center;
}
.flexColStart.controls,
.controls {
  display: flex;
  flex-direction: row;
  padding: 0 16px;
}

#musicBox .playBox .controls .flexRow {
  position: relative;
  display: flex;
  padding-top: 44px;
}

#musicBox .playBox .controls .flexRow img {
  width: 20px;
  cursor: pointer;
}

#musicBox .playBox .controls .flexRow img.activeIcon {
  position: absolute;
  opacity: 0;
  transition: all 0.2s ease-in-out;
}

#musicBox .playBox .controls .flexRow:hover img.activeIcon,
#musicBox .playBox .controls .flexRow#active img.activeIcon {
  opacity: 1;
}

#musicBox .playBox .title h1 {
  font-size: 20px;
  font-weight: 600;
  font-family: 'pretendard';
  color: #0e0e1f;
}
#musicBox:has([aria-hidden='true']) .affixBox .ant-affix .playBox > p {
  background: #0e0e1f;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 11px;
  line-height: 1;
  margin: 0 0 8px;
}

#musicBox .playBox .gradient {
  width: 60%;
  height: 2px;
  background: linear-gradient(to right, #13d5df 0%, #f138fc 100%);
}

#musicBox .playBox .time {
  margin: 8px 0 10px;
  padding: 0 8px;
}

#musicBox .playBox .time p {
  color: #656262;
  font-size: 12px;
}

#musicBox .playBox .time span {
  color: #0e0e1f;
}

#musicBox .playBox .play {
  margin: 0 0 18px;
}

#musicBox .playBox .play img {
  width: 22px;
  margin: 0 10px;
  cursor: pointer;
}

#musicBox .tabBox .tab {
  width: 50%;
  background: rgba(185, 138, 204, 0.2);
  height: 41px;
  padding: 12px 0;
  color: #86748f;
  font-size: 14px;
  font-weight: 700;
  font-family: 'pretendard';
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  border-left: 1px solid rgba(134, 116, 143, 0.2);
}
#musicBox .tabBox .tab:first-child {
  border: 0;
}
#musicBox .tabBox .tab:hover {
  background: rgba(185, 138, 204, 0.1);
  color: #c718e2;
}

#musicBox .tabBox .tab#active {
  background: transparent;
  color: #c718e2;
}

#musicBox .top {
  padding: 4px 8px;
}

#musicBox .top div {
  width: auto;
}

#musicBox .top div .check {
  width: 20px;
  margin: 0 8px;
}

#musicBox .top div .arrowDown {
  font-size: 14px;
  color: #0e0e1f;
  margin: 0 14px 0 6px;
}

#musicBox .top div .arrowUp {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  background: #e94cf7;
  color: #ffffff;
  font-size: 14px;
  margin: 0 11px 0 0;
}

#musicBox .top > div > p {
  font-size: 12px;
  color: #6d6c75;
}

#musicBox .top > div > p .t-result {
  color: #c718e2;
}

p .bar {
  color: #c5bbc6;
  padding: 0 4px;
}

#musicBox .top .antSelect {
  width: 120px;
  height: 32px;
}

#musicBox .top .antSelect .ant-select {
  width: 100%;
}
#musicBox .top .antSelect .ant-select.ant-select-outlined:not(.ant-select-customize-input) .ant-select-selector {
  height: 32px;
}

#musicBox .listBox {
  padding: 8px;
  justify-content: flex-start;
  height: 250px;
  overflow: auto;
  flex-wrap: wrap;
}

#musicBox .listBox .list {
  padding: 8px;
  position: relative;
  margin: 0 0 4px;
  border-radius: 4px;
  gap: 8px;
}

#musicBox .listBox .list#active {
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1);
}

#musicBox .listBox .list .check {
  width: 20px;
  margin: 0 8px 0 0;
}

#musicBox .listBox .list .thumbnail {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  margin: 0;
}

#musicBox .listBox .list .titleBox {
  width: calc(100% - 48px - 8px - 8px - 20px - 12px - 10px - 20px - 8px);
  gap: 4px;
}

#musicBox .listBox .list .titleBox div img {
  min-width: 20px;
  min-height: 20px;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  margin: 0 5px 0 0;
}

#musicBox .listBox .list .titleBox div h1 {
  font-size: 14px;
  color: #0e0e1f;
  font-weight: 600;
}

#musicBox .listBox .list .titleBox div p {
  font-size: 12px;
  color: #87858b;
  width: 100%;
}

#musicBox .listBox .list .playIcon {
  width: 14px;
  position: relative;
  cursor: pointer;
  /* align-items: flex-start; */
}

#musicBox .listBox.playlist .list .playIcon {
  width: 14px;
}
#musicBox .listBox.playlist .list .playIcon .activeIcon {
  width: 22px;
}
#musicBox .listBox.playlist .list .playIcon#active img {
  width: 22px;
}

#musicBox .listBox .list .playIcon#active img.activeIcon,
#musicBox .listBox .list .playIcon:hover img.activeIcon {
  opacity: 1;
}

#musicBox .listBox .list .playIcon#active img,
#musicBox .listBox .list .playIcon:hover img {
  /* opacity: 0; */
}

#musicBox .listBox .list .playIcon img {
  width: 100%;
  height: auto;
}

#musicBox .listBox .list .playIcon img.activeIcon {
  position: absolute;
  right: 0;
  opacity: 0;
  transition: all 0.2s ease-in-out;
}

#musicBox .listBox .list > p {
  color: #87858b;
  font-size: 20px;
  cursor: pointer;
}

#musicBox .listBox .absoluteBox {
  position: absolute;
  top: 30px;
  right: 20px;
  width: 100px;
  border: 1px solid #c718e2;
  border-radius: 4px;
  padding: 8px;
  background: #ffffff;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
  z-index: 10;
}

#musicBox .listBox .absoluteBox .tab {
  padding: 8px 0;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

#musicBox .listBox .absoluteBox .tab:hover {
  background: #f4f5f7;
}

#musicBox .bottom {
  border: solid 1px rgba(236, 21, 255, 0.2);
  /* background-color: rgba(255, 255, 255, 0.6); */
  background: #fbeffc;
  padding: 15px 42px;
  border-radius: 0 0 4px 4px;
  justify-content: space-around;
}

#musicBox .bottom > div {
  width: 16px;
  position: relative;
}

#musicBox .bottom > div img {
  width: 100%;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

#musicBox .bottom > div:hover img.activeIcon {
  opacity: 1;
}

#musicBox .bottom > div img.activeIcon {
  position: absolute;
  opacity: 0;
}

#musicBox .ant-result .ant-result-title {
  font-size: 16px;
}

/* react-h5-audio-player */
#musicBox .rhap_container {
  padding: 0 16px;
  background-color: transparent;
  background-color: initial;
  box-shadow: none;
  box-shadow: initial;
}
#musicBox .rhap_progress-section {
  display: block;
  position: relative;
}

#musicBox .rhap_progress-section .rhap_time {
  font-size: 10px;
}

#musicBox .rhap_progress-section .rhap_current-time {
  position: absolute;
  right: 40px;
}

#musicBox .rhap_progress-section .separator {
  position: absolute;
  right: 33px;
  font-size: 11px;
}

#musicBox .rhap_progress-section .rhap_total-time {
  position: absolute;
  right: 0;
  color: #656262;
}

#musicBox .rhap_progress-section .rhap_progress-container {
  margin: 0 0 8px;
}

#musicBox .rhap_progress-section .rhap_progress-container .rhap_progress-filled {
  background: linear-gradient(to right, #13d5df 0%, #f138fc 100%);
}

#musicBox .rhap_progress-section .rhap_progress-container .rhap_progress-indicator {
  width: 16px;
  height: 16px;
  margin-left: -5px;
  top: -6px;
  background: #e94cf7;
  border-radius: 16px;
}

#musicBox .rhap_controls-section {
  margin-top: 12px;
  justify-content: center;
  height: 32px;
}

#musicBox .rhap_controls-section .rhap_shuffle-controls .rhap_button-shuffle {
  /* position: relative;
  width: 40px;
  height: 40px;
  padding: 0; */
  padding-top: 8px;
}

#musicBox .rhap_controls-section .rhap_shuffle-controls .rhap_button-shuffle img {
  /* position: absolute;
  top: 12px;
  left: -4px; */
  width: 14px;
}

#musicBox .rhap_controls-section .rhap_main-controls .rhap_button-clear:hover:after,
#musicBox .rhap_controls-section .rhap_main-controls .rhap_button-clear:focus:after {
  display: none;
}

#musicBox .rhap_controls-section .rhap_main-controls .rhap_button-clear {
  margin: 0 2px;
  width: 40px;
  height: 40px;
}

#musicBox .rhap_controls-section .rhap_main-controls .rhap_button-clear img {
  width: 16px;
}

#detail #musicBox .rhap_controls-section .rhap_main-controls .rhap_button-clear img {
  width: 20px;
}

#musicBox .rhap_controls-section .rhap_main-controls .rhap_button-clear.rhap_play-pause-button img {
  padding-bottom: 2px;
}

/* #musicBox .rhap_controls-section .rhap_additional-controls {
  max-width: 40px;
} */

#detail #musicBox .rhap_controls-section .rhap_additional-controls {
  max-width: none;
  max-width: initial;
}

#musicBox .rhap_controls-section .rhap_additional-controls .rhap_button-clear:hover:after,
#musicBox .rhap_controls-section .rhap_additional-controls .rhap_button-clear:focus:after {
  display: none;
}

#musicBox .rhap_controls-section .rhap_additional-controls .rhap_button-clear img {
  /* position: absolute;
  right: -4px;
  top: 10px; */
  width: 22px;
}
/* react-h5-audio-player */
.rhap_progress-container {
  display: flex !important;
  align-items: flex-end !important;
  height: 18px !important;
}
.rhap_volume-indicator {
  background: #000 !important;
  /* width: 4px !important; */
}
#musicBox .rhap_volume-container .rhap_volume-bar-area {
  height: 2px;
}
.rhap_repeat-button {
  font-size: 20px !important;
  width: 20px !important;
  height: 20px;
  color: #868686;
  margin-right: 20px !important;
}
.rhap_volume-button {
  flex: 0 0 20px;
  font-size: 20px !important;
  width: 20px !important;
  height: 20px !important;
  color: #000 !important;
  margin-right: 4px !important;
}
.rhap_progress-bar {
  height: 2px !important;
  margin-bottom: 3px;
}
.rhap_progress-bar:hover {
  height: 5px !important;
  transition: all 0.2s ease-in-out;
  background: rgba(0, 0, 0, 0.1);
  margin-bottom: 3px;
}
.rhap_progress-bar:hover .rhap_progress-indicator {
  top: -1px;
}
.rhap_main {
  gap: 4px;
}
.rhap_volume-button[aria-label='unMute'] {
  background: url(../../static/media/i-noSound.8a9ea0ddfd79c894e61f.svg) no-repeat center;
  border: none;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  fill: #a29fab;
  margin-right: 4px !important;
}
/* 뮤직 플레이어 */
.ant-dropdown.spread-button {
  border: 1px solid rgb(199, 24, 226);
  border-radius: 8px;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 10px;
  width: 100px;
}
.ant-dropdown.spread-button li.ant-dropdown-menu-item {
  font-size: 13px;
  font-family: Pretendard;
  font-weight: 500;
}
#musicBox .listBox .list-nothing {
  margin: 10px;
}
#musicBox .listBox.playlist .list .titleBox .user h1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
#musicBox .listBox .list {
  gap: 6px;
}
#musicBox .affixBox .ant-affix {
  height: auto !important;
  background: linear-gradient(to bottom, #bbecee, #f1c3f5);
}
@media (max-width: 1280px) {
  #musicWrapper .rsWrapper > div .filter {
    width: 100%;
    position: relative;
    top: 0;
    left: 0;
    flex-direction: row;
    flex-wrap: wrap;
  }

  #musicWrapper .rsWrapper > div:first-child {
    flex-direction: column;
  }

  #musicWrapper .rsWrapper > div .content {
    width: 100%;
  }

  #musicWrapper .rsWrapper > div .filter .listBox {
    width: calc(100% / 4);
    border-bottom: none;
    border-right: 1px solid #dfdce4;
    padding: 0 20px;
    height: 210px;
    justify-content: flex-start;
  }
}

@media (max-width: 900px) {
  #musicWrapper > .rsWrapper > div:first-child {
    position: relative;
    padding: 30px 0;
  }
  #musicWrapper .rsWrapper > div .content .titleBox > h1 {
    font-size: 20px; /**작은 title 20px*/
    line-height: 1.2;
    flex-direction: column;
    gap: 4px 8px;
    flex-wrap: wrap;
  }
  #musicWrapper .rsWrapper > div .content .titleBox > h1:has(.fillterSelect) {
    flex-direction: column;
    gap: 0;
  }
  #musicWrapper .rsWrapper > div .content .titleBox > h1 br {
    display: inline;
    display: initial;
  }

  #musicWrapper .rsWrapper > div .content .titleBox > h1 span {
    display: block;
    font-size: 26px;
    font-weight: 800;
  }
  #musicWrapper .rsWrapper > div .content .titleBox > h1 span.fillterSelect {
    display: block;
    font-weight: 700;
  }
  /* 50 88  200*/
  #musicWrapper .rsWrapper > div .content .listBox .list .heart,
  #musicWrapper .rsWrapper > div .content .listBox .list .views,
  #musicWrapper .rsWrapper > div .content .listBox .list .star {
    display: none;
  }

  #musicWrapper .rsWrapper > div .content .listBox .list .titleBox {
    width: calc((100% - 40px - 60px - 200px - 48px - 48px - 48px - 48px));
  }
  #musicWrapper .filter,
  #musicWrapper .rsWrapper > div .content .titleBox > div:has(.search),
  #musicWrapper .rsWrapper > div .content .searchBox > div:nth-child(2):not(.buttonGroup),
  #musicWrapper .rsWrapper > div .content .listBox .list .check,
  #musicWrapper .rsWrapper > div .content .listBox .list .btn,
  #musicWrapper .rsWrapper > div .content .listBox .list .titleBox .title div p {
    display: none;
  }

  #musicWrapper .rsWrapper > div .content .listBox .list .btn.mobile {
    display: flex;
  }

  #musicWrapper .rsWrapper > div .content > .titleBox {
    /* margin: 0 0 12px; */
    margin: 0 0 30px;
    align-items: flex-start;
  }
  #musicWrapper .rsWrapper > div .content .searchBox {
    margin: 0 0 12px;
    height: auto;
  }
  #musicWrapper .rsWrapper > div .content .searchBox + #artistAlbum {
    padding: 0;
  }
  #musicWrapper .rsWrapper > div .content > .titleBox > img {
    display: inline;
    display: initial;
    width: 20px;
  }

  #musicWrapper .rsWrapper > div .content .searchBox > div {
    width: 100%;
    justify-content: space-between;
  }

  #musicWrapper .rsWrapper > div .content .listBox .list .rankBox {
    width: 40px;
    padding: 0 0 0 5px;
    flex-direction: column;
    text-align: left;
  }

  #musicWrapper .rsWrapper > div .content .listBox .list .thumb {
    min-width: 50px;
    width: 50px;
    min-height: 50px;
    height: 50px;
    margin: 0 10px 0 5px;
  }

  #musicWrapper .rsWrapper > div .content .listBox .list .titleBox {
    width: calc(100% - 30px - 20px - 50px - 48px);
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  #musicWrapper .rsWrapper > div .content .listBox .list .titleBox .title div {
    margin: 0;
  }

  #musicWrapper .rsWrapper > div .content .listBox .list .titleBox .title {
    flex-direction: row;
    width: 100%;
    justify-content: flex-start;
    margin: 0 0 10px;
  }

  #musicWrapper .rsWrapper > div .content .listBox .list .titleBox .userBox {
    width: 100%;
    justify-content: flex-start;
    gap: 12px;
  }

  #musicWrapper .rsWrapper > div .content .listBox .list .titleBox .title div {
    width: auto;
  }
  #musicWrapper .rsWrapper > div .content .listBox .list .titleBox .title div {
    padding: 0;
  }
  #musicWrapper .rsWrapper > div .content .listBox .list .titleBox .title h1 {
    font-size: 14px;
  }
  #musicWrapper .rsWrapper > div .content .listBox .list .titleBox .userBox img {
    width: 16px;
    height: 16px;
    border-radius: 100%;
    /* margin: 0 8px 0 0; */
  }
  #musicWrapper .rsWrapper > div .content .listBox .list .titleBox .userBox p {
    font-size: 13px;
  }
  #musicWrapper .rsWrapper > div .content .listBox .list .titleBox .userBox.artistbox p {
    font-size: 11px;
    min-width: 48px;
  }
  #musicWrapper .rsWrapper > div .content .listBox .list .titleBox .userBox.artistbox p[class^='i-'] {
    height: 12px;
    background-size: 12px;
    line-height: 1.3;
  }

  .artistMvListInList {
    width: 60vw;
    border-radius: 8px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    border: solid 1px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    padding: 16px;
  }

  .contentsSlide #popularSlider .list > div .absoluteBox .user [class^='promptRank']::before {
    width: 40px;
  }
  #mobileFixedBox {
    display: flex;
  }

  #musicBox {
    width: 100% !important;
    height: auto;
    top: 0 !important;
    left: -100% !important;
    /* z-index: 1000 !important; */
    justify-content: flex-start;
  }
  #musicBox .listBox {
    height: auto;
    min-height: 300px;
  }
  #detail #musicBox .rhap_controls-section {
    gap: 5%;
    margin-top: 20px;
  }
  #detail #musicBox .rhap_controls-section > div {
    flex: 1 1 !important;
  }
  #detail #musicBox .rhap_additional-controls {
    justify-content: end !important;
  }
  #detail #musicBox .rhap_additional-controls button {
    margin-right: 0;
  }
  #detail #musicBox .rhap_volume-controls {
    justify-content: start !important;
  }
  #detail #musicBox {
    margin: 0 0 30px;
  }
  #musicWrapper .rsWrapper > div .content .searchBox div #purpleBtn p,
  #musicWrapper .rsWrapper > div .content .searchBox div #pinkBtn p,
  #musicWrapper .rsWrapper > div .content .searchBox div #whiteBtn p {
    font-size: 12px;
  }
  #musicWrapper .rsWrapper > div .content .listBox .list {
    gap: 0;
  }
  #musicWrapper .rsWrapper > div .content .listBox .list .video .i-playCnt {
    height: 16px;
    line-height: 1;
  }
  #musicWrapper .rsWrapper > div .content .listBox .list .titleBox .title div p,
  #musicWrapper .rsWrapper > div .content .listBox .list .titleBox .title div h1 {
    padding: 2px 4px;
  }
  #musicWrapper .rsWrapper > div .content .listBox {
    padding: 2px 0 0;
    /* border-top: none; */
    gap: 2px;
  }
}

#populerPromptSlider {
  display: block;
  /* width: calc(100% - 80px); */
}

#populerPromptSlider .list {
  padding: 0 4px;
}

#populerPromptSlider .list > div {
  padding: 4px;
  border-radius: 16px;
  position: relative;
}

#populerPromptSlider .list > div > img {
  width: 100%;
  height: 185px;
  border-radius: 16px;
}

#populerPromptSlider .list > div .absoluteBox {
  position: absolute;
  top: 4px;
  height: 4px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  border-radius: 16px;
  background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
}

#populerPromptSlider .list > div .absoluteBox .user {
  padding: 8px;
}

#populerPromptSlider .list > div .absoluteBox .user div {
  width: auto;
}

#populerPromptSlider .list > div .absoluteBox .user div img {
  width: 20px;
  height: 20px;
  margin: 0 8px 0 0;
}

#populerPromptSlider .list > div .absoluteBox .user div p {
  font-size: 13px;
  color: #ffffff;
}

#populerPromptSlider .list > div .absoluteBox .title > p {
  font-size: 24px;
  font-weight: 600;
  color: #ffffff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  margin: 0 0 4px;
  padding: 0 10px;
}

#populerPromptSlider .list > div .absoluteBox .title .greyBox {
  background: #e2e2e2;
  padding: 8px 12px;
  border-radius: 0 0 16px 16px;
  gap: 12px;
}
.profileList .greyBox > img,
#populerPromptSlider .list > div .absoluteBox .title .greyBox > img {
  width: 24px;
  height: 24px;
  border-radius: 100%;
  margin: 0;
}

#populerPromptSlider .list > div .absoluteBox .title .greyBox > div {
  width: 100%;
}

#populerPromptSlider .list > div .absoluteBox .title .greyBox div > p {
  font-size: 14px;
  font-weight: 600;
  color: #0e0e1f;
}

#populerPromptSlider .list > div .absoluteBox .title .greyBox div div .imgBox {
  width: auto;
}

#populerPromptSlider .list > div .absoluteBox .title .greyBox div div .imgBox img:first-child {
  width: 20px;
  height: 20px;
  margin: 0 8px 0 0;
}

#populerPromptSlider .list > div .absoluteBox .title .greyBox div div .imgBox img {
  width: 16px;
  height: 16px;
  margin: 0 4px 0 0;
}

#populerPromptSlider .list > div .absoluteBox .title .greyBox div div p {
  font-size: 13px;
  font-weight: 600;
}

#populerPromptSlider .arrowLeft,
#populerPromptSlider .arrowRight {
  position: absolute;
  width: 36px;
  margin: 0 4px 0 0;
  height: 36px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 100%;
  font-size: 12px;
  color: #000000;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  z-index: 900;
}

#populerPromptSlider .arrowLeft:hover,
#populerPromptSlider .arrowRight:hover {
  background: linear-gradient(to right, #b041f3, #ec15ff);
  color: #ffffff;
}

#populerPromptSlider .arrowLeft,
#populerPromptSlider .arrowRight {
  top: 43%;
  margin: -18px 0 0;
}

#populerPromptSlider .arrowLeft {
  left: -32px;
}

#populerPromptSlider .arrowRight {
  right: -32px;
}

#populerPromptSlider .arrowLeft.isDisabled,
#populerPromptSlider .arrowRight.isDisabled,
#populerPromptSlider .arrowLeft.isDisabled p,
#populerPromptSlider .arrowRight.isDisabled p {
  display: none;
}

#populerPromptSlider .slick-dots {
  display: none !important;
}
.profileSection #populerPromptSlider .slick-slider .slick-list,
.mypageSection #populerPromptSlider .slick-slider .slick-list {
  padding: 0;
  width: calc(100% + 9px);
}
.profileSection #listWrapper #otherWrapper .slick-list .staffBox,
.mypageSection #listWrapper #otherWrapper .slick-list .staffBox {
  border: 10px solid transparent;
}
.mypageSection .artistMvListInDetail #populerPromptSlider .slick-slider .slick-list {
  width: calc(100% + 4px);
  margin-left: -4px;
}
@media (max-width: 1518px) {
  #populerPromptSlider .arrowLeft,
  #populerPromptSlider .arrowRight {
    background-color: rgba(255, 255, 255, 0.4);
  }
  #populerPromptSlider .arrowLeft {
    left: 0;
  }
  /* .profileSection #populerPromptSlider .arrowLeft {
    left: 0px;
  } */
  #populerPromptSlider .arrowRight {
    right: 0;
  }
}
@media (max-width: 900px) {
  /* .profileSection #populerPromptSlider .arrowLeft {
    left: 0px;
  } */
  .mypageSection #populerPromptSlider .slick-list {
    padding: 0 !important;
    width: 100%;
    /* min-height: 486px; */
    margin-bottom: 12px;
  }
  #detail #listWrapper #otherWrapper .slider-container2#populerPromptSlider > div {
    padding-bottom: 56px !important;
  }
  #detail #populerPromptSlider.slider-container2 .arrowLeft {
    left: calc(50% - 50px);
    bottom: 20px;
    top: auto;
  }
  #detail #populerPromptSlider.slider-container2 .arrowRight {
    right: calc(50% - 50px);
    bottom: 20px;
    top: auto;
  }
}
@media (max-width: 700px) {
  #populerPromptSlider .list > div .absoluteBox .title > p {
    display: none;
  }

  #populerPromptSlider .list > div .absoluteBox .title .greyBox > img {
    width: 24px;
    height: 24px;
    margin: 0 4px 0 0;
  }

  #populerPromptSlider .list > div .absoluteBox .title .greyBox > div {
    width: calc(100% - 24px - 4px);
  }

  #populerPromptSlider .list > div .absoluteBox .title .greyBox div div .imgBox img:first-child {
    display: none;
  }

  #populerPromptSlider .list > div .absoluteBox .user > img {
    display: none;
  }

  #populerPromptSlider .list > div .absoluteBox .user {
    padding: 8px;
  }

  #populerPromptSlider .list > div .absoluteBox .title .greyBox div > p {
    font-size: 12px;
  }

  #populerPromptSlider .arrowLeft {
    left: -10px;
  }

  #populerPromptSlider .arrowRight {
    right: -10px;
  }
  #populerPromptSlider .arrowLeft,
  #populerPromptSlider .arrowRight {
    background: rgba(255, 255, 255, 0.7);
  }

  #populerPromptSlider .slick-list {
    padding: 0 !important;
    width: calc(100% + 8px);
  }
  .mypageSection #populerPromptSlider .slick-list {
    padding: 0 !important;
    width: 100%;
    /* min-height: 486px; */
  }
  .mypageSection #populerPromptSlider .slick-list > div > div {
    height: 100%;
  }
  #populerPromptSlider .no-prompts-message {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px;
    font-size: 80px;
    color: #555;
    text-align: center;
  }

  .profileSection #populerPromptSlider .slick-list {
    padding: 0 !important;
    width: calc(100% + 8px);
  }
}

@charset "UTF-8";
/* ----------------------------------------------
Reset
----------------------------------------------*/
/*@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css');
@import url('//fonts.googleapis.com/earlyaccess/nanumgothic.css');*/
html {
  /* -webkit-text-size-adjust: 100%; */
  line-height: 1.15;
}

body {
  margin: 0;
}

main {
  display: block;
}

h1 {
  margin: 0;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

a {
  background-color: transparent;
  cursor: pointer;
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1;
  margin: 0;
}

button,
optgroup,
select {
  cursor: pointer;
}

button {
  border: 0;
  background: none;
  overflow: visible;
  gap: 8px;
}

input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner,
button::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

fieldset {
  padding: 0;
  margin: 0;
  border: 0;
  text-align: center;
}
fieldset figure {
  margin: 0;
}
fieldset figcaption {
  display: none;
}

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
  font-size: 16px;
}

[type='checkbox'],
[type='radio'] {
  box-sizing: border-box;
  padding: 0;
  cursor: pointer;
  width: 20px;
  height: 20px;
}

[type='number']::-webkit-inner-spin-button,
[type='number']::-webkit-outer-spin-button {
  height: auto;
}

[type='search']::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

details {
  display: block;
}

summary {
  display: list-item;
}

[hidden],
template {
  display: none;
}

ul,
dl,
p {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

li,
dt,
dd {
  list-style-type: none;
  margin: 0;
}

* {
  box-sizing: border-box;
  --transition: all 0.2s ease;
}
*:before,
*:after {
  box-sizing: border-box;
  --transition: all 0.2s ease;
}

[aria-label] {
  position: relative;
}
[aria-label]:after {
  content: attr(aria-label);
  display: none;
  position: absolute;
  top: -40%;
  left: 100%;
  z-index: 5000;
  pointer-events: none;
  padding: 0.5rem;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  text-indent: 0;
  overflow: visible;
  font-family: 'noto sans';
  font-size: 1.1rem;
  font-weight: 400;
  color: #fff;
  background: #2c3033;
  border-radius: 0.4rem;
  box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.3);
  z-index: 999;
  letter-spacing: 0;
}
[aria-label]:hover:after,
[aria-label]:focus:after {
  /* display: block; */
}

::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}

::-webkit-scrollbar-thumb {
  outline: none;
  border-radius: 10px;
  border: 4px solid transparent;
  box-shadow: inset 6px 6px 0 rgba(34, 34, 34, 0.1);
}
::-webkit-scrollbar-thumb:hover {
  border: 4px solid transparent;
  box-shadow: inset 6px 6px 0 rgba(34, 34, 34, 0.5);
  cursor: pointer;
}

::-webkit-scrollbar-track {
  box-shadow: none;
  background-color: transparent;
}

::selection {
  background: #3bbccd;
  color: #fff;
}

::placeholder,
::-webkit-input-placeholder {
  color: #a3a1a7 !important;
  font-weight: 300 !important;
}

:-ms-input-placeholder {
  color: #aaa !important;
  font-weight: 400 !important;
}

/* ----------------------------------------------
Common
----------------------------------------------*/
:root {
  --animate-duration: 0.1s;
  --animate-delay: 0.1s;
  --animate-repeat: 0.1;
}

html {
  font-size: 62.5%;
  padding: 0;
  margin: 0;
  background-color: #ffffff;
}

body {
  overflow-x: hidden;
  font-size: 1.3rem;
  padding: 0;
  margin: 0;
  font-family:
    'Pretendard Variable',
    Pretendard,
    -apple-system,
    BlinkMacSystemFont,
    system-ui,
    Roboto,
    'Helvetica Neue',
    'Segoe UI',
    'Apple SD Gothic Neo',
    'Noto Sans KR',
    'Malgun Gothic',
    'Apple Color Emoji',
    'Segoe UI Emoji',
    'Segoe UI Symbol',
    sans-serif;
  /* background: #f1f5f8; */
  background: #ffffff;
  color: #2c3033;
  box-sizing: border-box;
  letter-spacing: -0.05px;
  /* overflow: hidden; */
  font-weight: 500;
  color: #2c3033;
}

a {
  color: #1e9fe8;
  text-decoration: none;
}
a:hover {
  color: #0d47a1;
  text-decoration: underline;
}

.white {
  /* background-color: #fff !important;
  border: 0.1rem solid #b7c1c6 !important;
  color: #2c3033;
  font-weight: 600; */
}
.bar {
  color: #ccc;
  padding: 0 4px;
}
.down {
  background-image: url(../../static/media/i_down.35557a221bdd459254ba.svg) !important;
  background-repeat: no-repeat;
  background-position: 1.6rem center;
}

.fileDown {
  background-image: url(../../static/media/btn_fileDown.bf3b38fcc900602489cc.svg) !important;
  background-repeat: no-repeat;
  background-position: center;
  width: 2.2rem;
  height: 2.3rem;
}

.ant-tooltip {
  max-width: 480px;
  /* width: calc(100% - 20px); */
}

.ant-tooltip-placement-right > .ant-tooltip-arrow {
  top: 50%;
  transform: translateY(-50%) translateX(-100%) rotate(-90deg);
}
.ant-tooltip .ant-tooltip-arrow {
  position: absolute;
  z-index: 1;
  display: block;
  pointer-events: none;
  width: 16px;
  height: 16px;
  overflow: hidden;
}
.ant-tooltip .ant-tooltip-inner {
  min-width: 1em;
  min-height: 32px;
  padding: 8px 16px;
  color: #fff;
  text-align: start;
  text-decoration: none;
  word-wrap: break-word;
  background-color: rgba(0, 0, 0, 0.85);
  border-radius: 6px;
  font-weight: 400;
  font-size: 12px;
}

.ant-tooltip .ant-tooltip-inner div {
  font-weight: 300;
}
.ant-tooltip .ant-tooltip-inner button {
  border: 1px solid rgba(255, 255, 255.05);
  background: transparent;
  color: #fff;
  border-radius: 4px;
  margin: 12px 0;
}
.ant-tooltip .ant-tooltip-inner button:hover {
  cursor: pointer;
  background: rgba(255, 255, 255.015);
}
.sun-editor .se-wrapper .se-placeholder {
  white-space: inherit !important;
  text-overflow: initial !important;
}

/* ----------------------------------------------
Layout
----------------------------------------------*/
.l-warp {
  display: flex;
  width: 100%;
  min-height: 100vh;
  min-width: 144rem;
  align-items: flex-start;
  align-content: flex-start;
  flex-wrap: wrap;
  background: #f1f5f8;
  flex: auto;
  overflow: auto;
}

.l-sidebar,
.l-sidebar2 {
  display: flex;
  height: 100vh;
  width: 24rem;
  padding: 0px 1rem 1rem;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  flex-shrink: 0;
  background: #2d3041;
  border-right: 0.1rem solid #cbd5e1;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 999;
}

.l-sidebar .__copy,
.l-sidebar2 .__copy {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: center;
  gap: 10px;
  padding: 0 0 5px;
  color: #9b9c9b;
  font-size: 1.1rem;
}

.l-sidebar .__copy__logo,
.l-sidebar2 .__copy__logo {
  background: url(../../static/media/mslkGray.754f8c1c28e45a6e6d76.svg) no-repeat left center;
  width: 12rem;
  height: 2.5rem;
  padding: 0.5rem;
}

.l-header {
  display: flex;
  height: 6rem;
  align-self: stretch;
  justify-content: space-between;
  background-color: #fff;
  border-bottom: 0.1rem solid #ddd;
  width: 100%;
}
.l-header .btn-area {
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 1rem;
  padding: 15px 20px;
}
.l-header .btn-area__btn {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
.l-header .btn-area__btn i {
  font-size: 2.8rem;
  color: transparent;
}

.login-area {
  display: flex;
  align-items: center;
  padding: 1.2rem 1.6rem;
  z-index: 999;
}

.login-area__group {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.login-area__group li {
  display: flex;
  align-items: center;
  padding: 1.2rem 0;
  gap: 1rem;
}
.login-area__group .search-area {
  width: 20rem;
  height: 2.8rem;
  border-radius: 1.5rem;
  border: 1px solid #d3d3d3;
  background: #f8f8f8;
  margin: 2rem;
  padding: 0 1rem;
  box-shadow: none;
}
.login-area__group .search-area:focus {
  background: #fff;
}
.login-area__group .search-area:focus input {
  background: #fff;
}
.login-area__group .search-area:focus-visible {
  background: #fff;
}
.login-area__group .search-area:focus-within {
  background: #fff;
  border: 2px solid #000;
}
.login-area__group .search-area__input {
  background: transparent;
  border: 0;
  width: 100%;
  padding: 0;
  height: 3rem;
}
.login-area__group .search-area__input:focus {
  border: 0;
  outline: 0;
}
.login-area__group .search-area i {
  font-size: 1.6rem;
  color: #6d7378;
}
.login-area__group .search-area i:hover {
  filter: invert(60%) sepia(10%) saturate(178%) hue-rotate(155deg) brightness(60%) contrast(81%);
}

.login-area .alert-area {
  display: flex;
  flex-direction: row;
  gap: 2rem;
  padding: 0 1rem;
}
.login-area .alert-area i {
  font-size: 2.2rem;
  color: #878d90;
}

.login-area .alert-area i:hover {
  filter: invert(60%) sepia(10%) saturate(178%) hue-rotate(155deg) brightness(60%) contrast(81%);
  z-index: 1;
}
.login-area .alert-area span {
  border-radius: 5rem;
  background: #fe5139;
  font-size: 1rem;
  padding: 0.3rem 0.4rem;
  color: #fff;
  margin-left: -1rem;
  vertical-align: top;
  min-width: 1.8rem;
  min-height: 1.8rem;
  line-height: 1;
  z-index: 99;
}
.login-area .alert-area__btn {
  display: inline-block;
  padding: 0;
}
.login-area .info-area__imgbox {
  display: flex;
  align-items: center;
  border: #ddd 0.1rem solid;
  border-radius: 10rem;
  width: 3.5rem;
  height: 3.5rem;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}
.login-area .info-area__imgbox:hover {
  background-image: linear-gradient(rgba(0, 0, 0, 0.05) 0 0);
}
.login-area .info-area__imgbox i {
  font-size: 1.8rem;
  color: #2d2d2d;
}
.login-area .info-area__affiliate {
  letter-spacing: -0.02rem;
}
.login-area .info-area__name {
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
}
.login-area .info-area__group {
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  color: #888;
  margin-top: 0.5rem;
}
.login-area .info-area .btn-drop__check {
  display: none;
}
.login-area .info-area .btn-drop__btn {
  display: flex;
  align-items: center;
  width: 2.4rem;
  height: 2.4rem;
  font-size: 1.8rem;
  color: #aaa;
  cursor: pointer;
  justify-content: center;
  flex-shrink: 0;
}
.login-area .info-area .btn-drop__btn:hover {
  color: #1e9fe8;
  cursor: pointer;
}
.login-area .info-area .btn-drop__btn:hover i {
  color: #1ec3e8;
}
.login-area .info-area .btn-drop__layer {
  display: none;
  position: absolute;
  right: 0;
  top: 5.9rem;
  background: #fff;
  width: 16rem;
  box-shadow: -2px 2px 4px 0px rgba(0, 0, 0, 0.1);
  display: none;
  border: 0.1rem solid #eee;
}
.login-area .info-area .btn-drop__group {
  display: flex;
  align-items: center;
  flex-direction: column;
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1;
}
.login-area .info-area .btn-drop__list {
  padding: 1rem;
  gap: 2.4rem;
  width: 100%;
  cursor: pointer;
}
.login-area .info-area .btn-drop__list i {
  color: #8d9db0;
  font-size: 1.6rem;
  padding: 0.3rem;
}
.login-area .info-area .btn-drop__list:hover {
  color: #1e9fe8;
}
.login-area .info-area .btn-drop #logDrop:checked ~ .btn-drop__btn i,
.login-area .info-area .btn-drop #logDropS:checked ~ .btn-drop__btn i {
  transform: rotate(180deg);
  color: #1e9fe8;
}
.login-area .info-area .btn-drop #logDrop:checked ~ .btn-drop__layer,
.login-area .info-area .btn-drop #logDropS:checked ~ .btn-drop__layer {
  display: block;
}

.l-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  gap: 0;
  padding-left: 24rem;
  padding-right: 0;
  width: calc(100% - 24rem);
  min-width: 120rem;
  transition:
    width 0.25s ease,
    margin 0.25s ease;
  overflow: hidden;
  background-color: #f1f5f8;
}

.s-head {
  display: flex;
  justify-content: space-between;
  padding-bottom: 0.8rem;
}

.s-head__title {
  font-size: 2.4rem;
  display: flex;
  gap: 1.5rem;
}

.s-head__title--view {
  padding-left: 3rem;
  font-size: 2.4rem;
  display: inline-block;
  background: url(../../static/media/angle-left-solid-w.86c4d3c7160886555929.svg) no-repeat left center;
  background-size: 2rem;
}

.s-head__title--btnPre {
  width: 1.4857rem;
  height: 2.6rem;
}

.s-head__pass {
  display: flex;
  align-items: center;
  gap: 1rem;
  align-self: center;
  flex-direction: row;
  font-size: 1.2rem;
  font-weight: 300;
}
.s-head__pass.nolink {
  gap: 0.5rem;
}
.s-head__pass.nolink i {
  margin-left: 0.7rem;
}
.s-head__pass.nolink button {
  padding-left: 1.5rem;
  padding-right: 0;
  color: #2d2d2d;
}

.s-head__home {
  width: 1.5rem;
  height: 1.5rem;
  background: url("../../static/media/house-solid(v6.4.0_f015).280c584b718b0d189a41.svg") no-repeat left 0.1rem;
  padding: 0;
  font-size: 0;
}

.s-head__depth {
  display: inline-block;
  background: url("../../static/media/angle-right-solid(v6.4_f105)%202.39db8b939e1fd34a8c56.svg") no-repeat left center;
  padding-left: 1rem;
  display: flex;
  align-items: center;
}
.s-head__depth.custom-select {
  height: auto;
  /*point the arrow upwards when the select box is open (active):*/
}
.s-head__depth.custom-select .select-selected {
  border: 0;
  background: #f1f5f8;
}
.s-head__depth.custom-select select {
  display: flex;
  border: 0;
  background: inherit;
  padding-right: 1.5rem;
}
.s-head__depth.custom-select .select-selected.select-arrow-active {
  outline: 0;
  outline-offset: 0;
  height: auto;
  width: 100%;
  padding: 0.81rem 1rem;
  border: 0;
}
.s-head__depth.custom-select .select-selected.select-arrow-active:after {
  position: absolute;
  content: '';
  top: 0;
  right: 0.1rem;
  width: 3.2rem;
  height: 2.8rem;
  background: url(../../static/media/arr_down.23829ee36b8036038ff1.svg) no-repeat top -0.3rem right 0.1rem;
  border-radius: 0.8rem;
  transform: rotate(180deg);
  right: 1rem;
  top: 0rem;
  background-color: #fff;
}
.s-head__depth.custom-select .select-selected:after {
  position: absolute;
  content: '';
  top: 0;
  right: 0.1rem;
  width: 3.2rem;
  height: 2.8rem;
  background: url(../../static/media/arr_down.23829ee36b8036038ff1.svg) no-repeat top -0.3rem right 0.1rem;
  border-radius: 0.8rem;
  background: url("../../static/media/caret-down-f0d7%202.3738da92c997c6a34108.svg") no-repeat top left;
  width: 0.9rem;
  top: 33%;
  margin-right: 0.5rem;
}
.s-head__depth.custom-select .select-selected.select-arrow-active:after {
  position: absolute;
  content: '';
  top: 0;
  right: 0.1rem;
  width: 3.2rem;
  height: 2.8rem;
  background: url(../../static/media/arr_down.23829ee36b8036038ff1.svg) no-repeat top -0.3rem right 0.1rem;
  border-radius: 0.8rem;
  background: url("../../static/media/caret-down-f0d7%202.3738da92c997c6a34108.svg") no-repeat top left;
  transform: rotate(180deg);
  width: 0.9rem;
  top: -1rem;
}
.s-head__depth.custom-select i {
  margin-left: 0.5rem;
  font-size: 1.4rem;
}
.s-head__depth.custom-select .select-items {
  right: -1rem;
  left: auto;
}

.s-container {
  display: flex;
  padding: 2rem 2rem 0;
  gap: 1rem;
  flex-direction: column;
  justify-content: flex-start;
  align-self: stretch;
  overflow: auto;
  height: calc(100vh - 9rem);
}

.s-footer {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: center;
  gap: 10px;
  padding: 5px 0 5px;
  color: #9b9c9b;
  font-size: 1.1rem;
  width: 100%;
  box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.1);
}

.s-footer__logo {
  background: url(../../static/media/mslkBlue.682bf17095d7b31faf3b.svg) left center no-repeat;
  width: 5.1rem;
  height: 1.9rem;
  padding: 0.5rem;
}

.s-contents {
  display: flex;
  gap: 1rem;
  flex-direction: column;
}

.search-area {
  display: flex;
  align-items: center;
  align-self: stretch;
  padding: 15px 20px;
  flex-direction: row;
  border-radius: 1.6rem;
  background: #fff;
  box-shadow:
    rgba(0, 0, 0, 0.1) 0px 2px 2px -1px,
    rgba(0, 0, 0, 0.05) 0px 2px 2px -1px;
}

.search-area__wrap {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  width: 100%;
}
.search-area__wrap.between {
  border-radius: 0.5rem;
}

.search-area__form {
  display: flex;
  align-items: center;
  gap: 10px;
}

.search-area__btn {
  display: flex;
  margin-left: 0;
  flex-direction: row;
  gap: 1rem;
  overflow: hidden;
}

.board-area {
  display: flex;
  align-items: stretch;
  align-self: stretch;
  padding: 10px 20px;
  flex-direction: column;
  background: #fff;
  border-radius: 16px;
  box-shadow:
    rgba(0, 0, 0, 0.1) 0px 2px 2px -1px,
    rgba(0, 0, 0, 0.05) 0px 2px 2px -1px;
}

.board-area__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.8rem;
  margin: 0;
}

.board-area__result {
  font-size: 1.3rem;
  display: inline-block;
}
.board-area__result span {
  font-size: 1.2rem;
  padding-left: 2.5rem;
  background: url("../../static/media/angle-right-solid(v6.4_f105)%202.39db8b939e1fd34a8c56.svg") 0.5rem center no-repeat;
  letter-spacing: -0.01rem;
}

.board-area__btnarea {
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 1rem;
  font-size: 1.2rem;
}

.view-area {
  display: flex;
  align-self: stretch;
  padding: 15px 20px;
  flex-direction: column;
  border-radius: 1.6rem;
  background: #fff;
  gap: 1.6rem;
  box-shadow:
    rgba(0, 0, 0, 0.1) 0px 2px 2px -1px,
    rgba(0, 0, 0, 0.05) 0px 2px 2px -1px;
}

.btn__open {
  padding: 0.5rem 1rem;
  background: #759587;
  border: 0;
  color: #fff;
  cursor: pointer;
}

#mask {
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background: #000;
  -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=20)';
  filter: alpha(opacity=20);
  zoom: 1;
  opacity: 0.2;
  z-index: 9998;
}

.popup {
  display: flex;
  align-items: flex-start;
  position: fixed;
  top: 50%;
  left: 50%;
  background: #fff;
  z-index: 9999;
  border-radius: 2rem;
  gap: 2rem;
  padding: 1rem 3rem;
  display: none;
}

.popup__box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.popup__title {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 1.2rem 0;
  margin: 0;
}

.popup__cont {
  padding: 2rem;
  justify-content: center;
  width: 100%;
}
.popup__cont ul {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  width: 100%;
  gap: 1.4rem;
}
.popup__cont ul li {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0.8rem;
}
.popup__cont ul li label {
  font-size: 1.4rem;
  font-weight: 600;
  color: #2c3033;
}
.popup__cont ul li input {
  display: flex;
  padding: 1.3rem 1.8rem;
  align-items: flex-start;
  gap: 10px;
  flex-shrink: 0;
  border-radius: 8px;
  border: 1px solid #ddd;
  background: #fcfcfc;
}

.popup__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 2rem 1rem;
  gap: 2.4rem;
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 600;
  border-top: 0.1rem solid #ddd;
}
.popup__btn button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 3.6rem;
  border-radius: 0.5rem;
  color: #fff;
  cursor: pointer;
}
.popup__btn button:hover {
  box-shadow: 0 -300px 0 0 rgba(0, 0, 0, 0.3) inset !important;
  border: 0.1rem solid rgba(0, 0, 0, 0.3) !important;
  transition-duration: 0.5s all;
}

.popup__btn--close {
  background: #555;
  border: 0.1rem solid #555;
}

.popup__btn--confirm {
  border: 0.1rem solid #ff6530;
  background: #ff6530;
}

.popup .btn_close {
  background: url(../../static/media/btn_close.b36a2a0e5e1db500c52a.svg) no-repeat center;
  background-size: 2.2rem;
  position: absolute;
  top: 1.4rem;
  right: 1.4rem;
  font-size: 0;
  width: 2.2rem;
  height: 2.2rem;
  display: inline-block;
}
.popup .btn_close:hover {
  box-shadow: 0 -300px 0 0 rgba(75, 125, 201, 0.02) inset;
  transition: ease 0.5s all;
  border-radius: 5rem;
}

/* ----------------------------------------------
Navigation
----------------------------------------------*/
.l-sidebar ~ .l-main,
.l-sidebar2 ~ .l-main {
  position: absolute;
  top: 0;
  left: 24rem;
  min-height: 100vh;
  z-index: 6;
  transition: var(--transition);
  padding-left: 0;
  right: 0;
}

.fold.l-sidebar,
.fold.l-sidebar2 {
  width: 6.9rem;
  transition: var(--transition);
}
.fold.l-sidebar .btn-area__btn i,
.fold.l-sidebar2 .btn-area__btn i {
  color: #1ec3e8;
}
.fold.l-sidebar ~ .l-main,
.fold.l-sidebar2 ~ .l-main {
  top: 0;
  left: 6.9rem;
  width: calc(100% - 6.9rem);
}

.l-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 0;
  gap: 1rem;
  align-self: stretch;
  z-index: 11;
  width: 100%;
  overflow-y: auto;
  transition:
    width 0.25s ease,
    background 0.25s ease;
  -webkit-transition:
    width 0.25s ease,
    background 0.25s ease;
  -moz-transition:
    width 0.25s ease,
    background 0.25s ease;
  -ms-transition:
    width 0.25s ease,
    background 0.25s ease;
}

.l-nav__logo {
  display: flex;
  align-items: center;
  width: 22rem;
  height: 6rem;
  padding: 0.6rem 0;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  background: url(../../static/media/ico_promptBankAdmin.987d1eb07bbf9f09a22f.svg) no-repeat center center;
  cursor: pointer;
}

.l-nav .login-area {
  display: flex;
  align-items: center;
  min-width: 46px;
  padding: 20px 0px 10px 0px;
  flex-direction: column;
  align-self: stretch;
}
.l-nav .login-area__group {
  flex-direction: column;
  width: 100%;
}
.l-nav .login-area__group li {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
}
.l-nav .login-area__group .info-area .btn-drop__layer {
  position: absolute;
  left: 1rem;
  top: 14rem;
  background: #fff;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  display: none;
  border-radius: 1rem;
  justify-content: flex-start;
  width: 22rem;
  border: 1px solid #ddd;
}
.l-nav .login-area__group .info-area .btn-drop__list {
  display: flex;
  align-items: center;
  padding: 10px;
  gap: 24px;
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1;
}
.l-nav .login-area .alert-area {
  gap: 2.4rem;
  background: #f3f3f3;
  padding: 0.7rem 0;
  border-radius: 1rem;
}
.l-nav .login-area .alert-area i {
  font-size: 1.8rem;
}
.l-nav .menu-area {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow-y: auto;
}
.l-nav .menu-area__group {
  display: flex;
  align-items: center;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  gap: 0;
  flex-shrink: 0;
  color: #bbb2c3;
  width: 100%;
}

input:checked .l-nav .menu-area__group:focus-within {
  display: flex;
  align-items: flex-start;
  width: 100%;
  height: 5rem;
  flex-direction: column;
  background: #1d1d29;
}

.l-nav .menu-area__group input:checked + label,
.l-nav .menu-area__group.on input + label {
  display: flex;
  align-items: center;
  width: 100%;
  height: 50px;
  flex-direction: row;
  gap: 0;
  flex-shrink: 0;
  border-radius: 1rem;
  text-decoration: none;
  background: #1d1d29;
}
.l-nav .menu-area__group input:checked + label .menu-area__text,
.l-nav .menu-area__group.on input + label .menu-area__text {
  color: #fff;
}
.l-nav .menu-area__group input:checked + label .fa-angle-down:before,
.l-nav .menu-area__group.on input + label .fa-angle-down:before {
  color: #fff;
  transform: rotate(0deg) !important;
}
.l-nav .menu-area__group input + label:hover {
  display: flex;
  align-items: center;
  width: 100%;
  height: 50px;
  flex-direction: row;
  gap: 0;
  flex-shrink: 0;
  border-radius: 1rem;
  text-decoration: none;
}
.l-nav .menu-area__group input + label:hover .menu-area__text {
  color: #fff;
}
.l-nav .menu-area__group input + label:hover .fa-angle-down:before {
  color: #fff;
  transform: rotate(180deg);
}
.l-nav .menu-area__check {
  display: none;
}
.l-nav .menu-area__menu {
  display: flex;
  align-items: center;
  width: 220px;
  height: 50px;
  flex-direction: row;
  justify-content: space-between;
  cursor: pointer;
  padding: 1.2rem 1.5rem;
}
.l-nav .menu-area__menu i {
  display: flex;
  align-items: center;
  width: 2.4rem;
  height: 2.4rem;
  justify-content: center;
  flex-shrink: 0;
  transform: rotate(-180deg);
}
.l-nav .menu-area__menu .fa-angle-down:before {
  color: #bbb2c3;
  font-size: 1.6rem;
  transform: rotate(-180deg);
}
.l-nav .menu-area__text {
  display: flex;
  align-items: center;
  width: 125px;
  gap: 10px;
  flex-shrink: 0;
  padding-left: 3rem;
  color: #bbb2c3;
  font-size: 14px;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
  letter-spacing: -0.28px;
}
.l-nav .menu-area__content {
  display: flex;
  width: 220px;
  padding: 4px 0px 12px;
  flex-direction: column;
  align-items: flex-start;
  max-height: 300px;
  opacity: 1;
  z-index: 10;
  overflow-y: auto;
  display: none;
}
.l-nav .menu-area__smenu {
  display: flex;
  width: 220px;
  padding: 0 1rem 0 2.2rem;
  flex-direction: column;
  align-items: flex-start;
}
.l-nav .menu-area__smenu a {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 1.4rem 2rem;
  background: none;
  border-left: 0.1rem dashed #899193;
  font-family: Pretendard;
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
  /* 114.286% */
  letter-spacing: -0.28px;
  text-decoration: none;
  color: #c0b4d1;
}
.l-nav .menu-area__smenu.active a {
  border-left: 0.2rem solid #1ec3e8;
  color: #fff;
}
.l-nav .menu-area__smenu.active a a {
  color: #fff;
  font-weight: 300;
  width: 100%;
  background: none;
  outline: 0;
  color: #fff;
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 300;
  line-height: 16px;
  letter-spacing: -0.28px;
}
.l-nav .menu-area__smenu:hover a {
  color: #fff;
  font-weight: 300;
  width: 100%;
  background: none;
  outline: 0;
  color: #fff;
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 300;
  line-height: 16px;
  letter-spacing: -0.28px;
}

.menu-area__group {
  width: 22rem;
  /* &:nth-child(6) label:before {
    background: url($imgCommon + 'd06.svg') no-repeat 1.5rem center;
  } */
  /* &:nth-child(6):hover > input + label:before {
    background: url($imgCommon + 'd06_hover.svg') no-repeat 1.5rem center;
  } */
  /* &:nth-child(6).on input + label:before,
  &:nth-child(6) input:checked + label:before {
    background: url($imgCommon + 'd06_active.svg') no-repeat 1.5rem center;
  } */
}
.menu-area__group input[type='radio']:checked ~ .menu-area__content {
  z-index: 10;
  display: block;
}
.menu-area__group:has(input:checked) {
  background: #1d1d29;
  border-radius: 1rem;
}
.menu-area__group.on {
  background: #1d1d29;
  border-radius: 1rem;
}
.menu-area__group.on .menu-area__content {
  z-index: 10;
  display: block;
}

/*기본 메뉴 depth1*/
.menu-area__group:nth-child(1) label:before {
  background-image: url(../../static/media/a-m01.a9c765bea54353ece6d8.svg);
}
.menu-area__group:nth-child(2) label:before {
  background-image: url(../../static/media/a-m02.69ba716b6078f61e76f0.svg);
}
.menu-area__group:nth-child(3) label:before {
  background-image: url(../../static/media/a-m03.870342d3a72a93a35d65.svg);
}
.menu-area__group:nth-child(4) label:before {
  background-image: url(../../static/media/a-m04.f58939573600b4a0d02d.svg);
}
.menu-area__group:nth-child(5) label:before {
  background-image: url(../../static/media/a-m05.b881a149f16eea35e8e1.svg);
}
.menu-area__group:nth-child(6) label:before {
  background-image: url(../../static/media/a-m06.3a2e4a19f802b272d23a.svg);
}
.menu-area__group:nth-child(7) label:before {
  background-image: url(../../static/media/a-m07.5da41b98707005f8ded3.svg);
}
.menu-area__group:nth-child(8) label:before {
  background-image: url(../../static/media/a-m08.c2f798d066f7c3a6602e.svg);
}

.menu-area__group:nth-child(2):hover > input + label:before {
  background-image: url(../../static/media/a-m02.69ba716b6078f61e76f0.svg);
}
.menu-area__group:nth-child(3):hover > input + label:before {
  background-image: url(../../static/media/a-m03.870342d3a72a93a35d65.svg);
}
.menu-area__group:nth-child(4):hover > input + label:before {
  background-image: url(../../static/media/a-m04.f58939573600b4a0d02d.svg);
}
.menu-area__group:nth-child(5):hover > input + label:before {
  background-image: url(../../static/media/a-m05.b881a149f16eea35e8e1.svg);
}
.menu-area__group:nth-child(6):hover > input + label:before {
  background-image: url(../../static/media/a-m06.3a2e4a19f802b272d23a.svg);
}
.menu-area__group:nth-child(7):hover > input + label:before {
  background-image: url(../../static/media/a-m07.5da41b98707005f8ded3.svg);
}
.menu-area__group:nth-child(8):hover > input + label:before {
  background-image: url(../../static/media/a-m08.c2f798d066f7c3a6602e.svg);
}

/*기본 아이콘 칼라 적용*/
.menu-area__group label:before,
.menu-area__group > input + label:before {
  background-repeat: no-repeat;
  background-position: left 1.5rem center;
  filter: invert(36%) sepia(1%) saturate(2092%) hue-rotate(229deg) brightness(100%) contrast(94%);
}
/* 아이콘 호버 칼라 적용*/
.menu-area__group:hover > input + label:before {
  filter: invert(0%) sepia(0%) saturate(7452%) hue-rotate(123deg) brightness(99%) contrast(107%);
}
/* 아이콘 호버 칼라 적용*/
.menu-area__group.on input + label:before,
.menu-area__group input:checked + label:before {
  filter: invert(36%) sepia(28%) saturate(303%) hue-rotate(162deg) brightness(85%) contrast(368%);
}

.menu-area__menu {
  position: relative;
  cursor: pointer;
  padding: 1.2rem 1.5rem;
  display: table;
  width: 100%;
  border-top-left-radius: 1.5rem;
  border-top-right-radius: 1.5rem;
  transition: background 0.3s ease-in-out;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.menu-area__menu:before {
  content: ' ';
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
}

.menu-area__text {
  display: table-cell;
  vertical-align: middle;
}

.menu-area__content {
  max-height: 0;
  transition: all 0.4s ease;
  opacity: 0;
  position: relative;
  overflow-y: hidden;
  padding: 0;
}

.l-sidebar .btn-area {
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 1rem;
  padding: 15px 20px;
  position: absolute;
  left: 240px;
  z-index: 99;
}
.l-sidebar .btn-area__btn {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
.l-sidebar .btn-area__btn i {
  font-size: 2.8rem;
}
.l-sidebar .btn-area__btn i:hover {
  color: #1ec3e8;
}
.l-sidebar .s-footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  align-self: stretch;
  padding: 0px 1rem;
  gap: 1rem;
  flex-shrink: 0;
  font-size: 1.1rem;
}
.l-sidebar .s-footer span * {
  color: #cbd5e1;
  padding-left: 0.5rem;
}
.l-sidebar .s-footer__info {
  display: flex;
  padding-top: 1rem;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  align-self: stretch;
  font-weight: 100;
  letter-spacing: 0.05rem;
  color: #cbd5e1;
}
.l-sidebar .s-footer__info strong {
  color: #cbd5e1;
  line-height: 1.4;
  margin-bottom: 0.2rem;
}
.l-sidebar .s-footer__info strong button i {
  color: #cbd5e1;
  vertical-align: middle;
  font-size: 1.2rem;
}
.l-sidebar .s-footer__info strong button i:hover {
  color: #ffca3a;
  font-size: 1.2rem;
}
.l-sidebar .s-footer__manual {
  width: 100%;
}
.l-sidebar .s-footer__manual button {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  color: #bbb2c3;
  width: 100%;
  height: 3rem;
  padding: 0.7rem;
  flex-direction: column;
  border: 0.1rem solid #bbb2c3;
}
.l-sidebar .s-footer__manual button span {
  background: url(../../static/media/book-open-reader-solid.a1dda08424eea7f7d976.svg) no-repeat left center;
  padding-left: 2.5rem;
  line-height: 1.6;
  min-width: 1.6rem;
  line-height: 1.6rem;
}
.l-sidebar .s-footer__manual button:hover {
  box-shadow: 0 -300px 0 0 rgba(75, 125, 201, 0.02) inset;
  transition: ease 0.5s all;
}
.l-sidebar.fold {
  width: 6.9rem;
  transition: var(--transition);
}
.l-sidebar.fold .btn-area {
  left: 5.6em;
  transition: var(--transition);
}
.l-sidebar.fold .l-nav__logo {
  background: url(../../static/media/ico_logoFold.2c321f092e3dee909b24.svg) no-repeat center center;
  width: 100%;
  cursor: pointer;
  padding-top: 2.1rem;
}
.l-sidebar.fold .l-nav .login-area .info-area__affiliate {
  display: none;
}
.l-sidebar.fold .l-nav .login-area .info-area .btn-drop {
  position: absolute;
  z-index: 2;
}
.l-sidebar.fold .l-nav .login-area .info-area .btn-drop__btn i {
  display: none;
}
.l-sidebar.fold .l-nav .login-area .info-area .btn-drop__layer {
  left: -1.2rem;
  top: 4.2rem;
}
.l-sidebar.fold .l-nav .login-area .info-area .btn-drop__list {
  justify-content: flex-start;
}
.l-sidebar.fold .l-nav .login-area .alert-area__btn {
  display: none;
}
.l-sidebar.fold .l-nav .login-area .alert-area__btn:nth-child(3) {
  display: block;
}
.l-sidebar.fold .l-nav .menu-area {
  width: 100%;
}
.l-sidebar.fold .l-nav .menu-area__group {
  width: 100%;
  position: relative;
  --transition: 0;
}
.l-sidebar.fold .l-nav .menu-area__menu {
  width: 100%;
}
.l-sidebar.fold .l-nav .menu-area__menu .fa-angle-down:before {
  content: '';
}
.l-sidebar.fold .l-nav .menu-area__text {
  display: none;
}
.l-sidebar.fold .l-nav .menu-area__content {
  position: absolute;
  left: 4.5rem;
  top: 1rem;
  filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.1));
  --transition: 0;
  height: auto;
  width: 22rem;
}
.l-sidebar.fold .l-nav .menu-area__content::before {
  content: '';
  position: absolute;
  right: calc(100% - 1rem);
  top: 3rem;
  width: 0;
  height: 0;
  border: 1rem solid transparent;
  border-right-color: #1d1d29;
  border-left: 0;
  margin-top: -2rem;
  filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.1));
}
.l-sidebar.fold .l-nav .menu-area__smenu {
  background: #1d1d29;
  width: calc(100% - 1rem);
  margin-left: 1rem;
  --transition: 0;
}
.l-sidebar.fold .l-nav .menu-area__smenu:first-child {
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  padding-top: 5px;
}
.l-sidebar.fold .l-nav .menu-area__smenu:last-child {
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  padding-bottom: 5px;
}

.l-sidebar.fold .s-footer__info strong,
.l-sidebar.fold .s-footer__info span {
  font-size: 0;
}
.l-sidebar.fold .s-footer__manual > button > span {
  font-size: 0;
  padding-left: 0;
  background-position: center;
}

.form-half-element {
  display: inline-block;
  width: calc(50% - 12px);
}

.form-half-element-left {
  margin-right: 5%;
}

.gridHeaderButton {
  margin-top: 40%;
}

.form-half-element-label {
  margin-bottom: 0;
}

.plan-container {
  padding: 20px;
  background-color: #f9f9f9;
}

.plan-header {
  margin-bottom: 20px;
}

.plan-use-header {
  margin-bottom: 20px;
  padding-left: 15%;
}

.info-box-row {
  display: flex;
  align-items: stretch;
}

.info-box-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.info-box {
  background-color: #ffffff;
  padding: 15px;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  text-align: left;
  height: 100%;
}

.info-label {
  font-size: 14px;
  font-weight: bold;
}

.info-note {
  font-size: 12px;
  color: #aaaaaa;
}
.info-note.blue-text {
  color: #0073e6;
  /* 푸른색으로 변경 */
}

.toggle-section {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.span-highlight {
  color: #e94cf7;
}

.plan-section {
  margin-top: 30px;
}

.plan-card-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.plan-card {
  background-color: #ffffff;
  border-radius: 60px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
.plan-card.active {
  border: 2px solid #e94cf7;
  box-shadow: 0 4px 8px rgba(146, 84, 222, 0.2);
}

.plan-price {
  color: #e94cf7;
  text-align: center;
  margin-bottom: 10px;
}

.plan-title {
  display: block;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 20px;
}

.plan-features {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  font-size: 14px;
  color: #555555;
}
.plan-features li {
  margin-bottom: 8px;
  padding-left: 16px;
  position: relative;
}
.plan-features li:before {
  content: '✔';
  position: absolute;
  left: 0;
  color: #e94cf7;
  font-size: 12px;
}

.ant-btn-default {
  background-color: #e94cf7;
  border-color: #e94cf7;
}
.ant-btn-primary {
  box-shadow: none !important;
}
.ant-btn-primary:hover {
  color: #0e0e1f;
  border-color: #e2dfe4;
  background: #ffffff !;
}

.ant-btn-default {
  background-color: #ffffff;
  border-color: #d9d9d9;
}
.ant-btn-default:hover {
  box-shadow: inset 0 0 0 80px #0000001a;
}
.ant-btn:not(:disabled):focus-visible {
  outline: none !important;
}
.plan-features > p {
  padding: 5px 0px 10px 0px;
  font-weight: bold;
}

.ant-down-btn {
  color: gray;
  background-color: hsl(0, 0%, 90%);
}

.ant-used-btn {
  color: #000;
  background-color: hsl(0, 0%, 90%);
  border-color: hsl(0, 0%, 90%);
}
.ant-used-btn:hover {
  border-color: hsl(0, 0%, 90%);
}

.info-box-left {
  width: 75%;
}

.info-box-right {
  top: 50%;
  position: relative;
}

/*================================
Button Component
 ================================*/
.btn-gray {
  border: #525162;
  background-color: #525162;
  color: #fff;
}
.btn-gray:hover {
  border: #444 !important;
  background-color: #444 !important;
  color: #fff !important;
}

.btn-pink {
  border: #d954fb;
  background-color: #d954fb;
  color: #fff;
}
.btn-pink:hover {
  box-shadow: inset 0 0 0 80px rgba(0, 0, 0, 0.1);
}

.btn-red {
  border: #ff595e !important;
  background-color: #ff595e !important;
  color: #fff !important;
}
.btn-red:hover {
  border: #df4e52 !important;
  background-color: #df4e52 !important;
  color: #fff !important;
}
.btn-orange {
  background: linear-gradient(90deg, #ffa514 0%, #ff8a14 100%);
}
.btn-orange:hover {
  background: linear-gradient(90deg, #e89612 0%, #dd7711 100%);
}

.btn-oran2 {
  background-color: #ff6d38;
}
.btn-oran2:hover {
  background-color: #cf582e;
}

.btn-excel {
  border: #11b892;
  padding-left: 35px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAA2CAYAAACMRWrdAAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAATCSURBVHgB7VldTFNnGP76BwNhrW6jmBEo7CeBxDlF40zYgCxzcVk2N+KyLF7sisybLdmYWbJsspntZmYYIvFCBcE7Lky8MFITtQkJAtEIQYkUavkJf1F+Sinlp+3xOU1f89mclranRwo5T/Lm9Jz3+3u+93u/9/2+MqZChQoVKlQkB7W1tdrOzs535ubmvl9aWvq1ubn5NbbZ0NTU9Mrg4OBBj8dzHHJ2cXHxns/nWxY4rK6u/s8Uhp7JgNVqzSkuLt6zw2TaozMYSjQazYG0tLQiPKO2azAYTExhxERMXEpVVVV7CwsLdwUCgXf1en05CLyl0+negFrDUhARiQ0MDHxmNps/z8zMLIcFLCCTyTYRIs42XCHAlLPGFUgdkwmbzfaosrLyqZQuGjGBpT6cWE1FUorNToyBmCQHWbuiDNyGXGKJ40vI19EKbBSxYUx0C0sQWEwWtg4xLdui2ChiRzDrDhK/329HqnWClPhWgOykg/T43b+8vPwLSwYEeQjMz8+fxmBOI6D7Y6kAcvepb7fbfTRcv7a21sON7U/6Hmn8ifiYgMH2wke2QwqkCmD2T5pMplPib8y2GSnUsbAiM5DnA0Uu6R8aGjpL71lZWTdArjE7OzvY/gowPj6enPwy0sx6vd6g0yMzeR2DfhiuX1hYuM5CYaShoSELk+CQaKaRyUAsFotWWRIgU09lxKMIZnuCdCDxGDOfQ3qQbIzQTOoRE31mdHT0Cyo3NTX1MfzDBYIr3d3d+zlSPwuRIVqxkQR1z2P5HqS64tFnZmbmFK/H8z1FiYmAI7unp6d3U1n4wzf8ruZwOPZhMKtCHIAbPaL6aOuraHrFiIXITQAFEvXyQWpsneoBXmDxNTxrqY2urq5CtOEM0//xUoiJgL89GBkZ2U51Kioq9Dgxd8dQVXEfkxWgcdDMzs/PN9I7jhE+hIBZlgJImJi4RPr7+06AyDD/vbW19QiWzt11qheg/jES+M93dXV1L1wXYJl/SHoE+6PV1dXJOeiut5YQz/6lsui4CEvwJxaKX2NjYzvgg/1CHED5W1x7h/DJH9bfdW5syvjYott9g0gglpkRAoZEC87Ozv5A9Z1Op4WPcTFM1G2qi9/lsPoLuyqsek1RYuhwGNhJ5RBvLnI6HwL0YdKJIQGW8Eg0cxPyEQm29zI8jXz/drv9fdKjjw94vSLEVrzev6kMiPweroeVXLDcLiqDnfOyRDOK74pxJ8GG9PTDbW1t5/Ly8vaj3ZPheuyUryJ5tfb09HySm5ur0Wo0FSyVICgLMfD6SeCjPiy3M1zfFvjUBK9HivYPp1c2jsmAJtR3UBAydEajsYyUk5OTe3Ehu5PX437zEIsDG3Xn4YDY6AUbjB+bxUV67+vrs+I892NGRsZuTn+BJQOCskjtlCqVsVEXps6QJAoLJHgDHOnCVL0JTjLmIPNMJnALdofFCxjssaAcZG0esSCixdrb2w+UlpbuQ9pUgmyiTKvVliC2vI3n1ttwampqtuEP8nLkgsexDP5DFm5DbuhJRYslBR0dN9/EbdW3SIP+crlcV5H4PtkSxKTQ0tKyDdd0n+IA+pvH42mChe1Y1sHDI96r2VZCfX19em9vbw5ToUKFChUvGc8AWTDxS4hrnBwAAAAASUVORK5CYII=) no-repeat 10px center #11b892;
  background-size: 23px;
  color: #fff;
}
.btn-excel:hover {
  border: #0fa683 !important;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAA2CAYAAACMRWrdAAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAATCSURBVHgB7VldTFNnGP76BwNhrW6jmBEo7CeBxDlF40zYgCxzcVk2N+KyLF7sisybLdmYWbJsspntZmYYIvFCBcE7Lky8MFITtQkJAtEIQYkUavkJf1F+Sinlp+3xOU1f89mclranRwo5T/Lm9Jz3+3u+93u/9/2+MqZChQoVKlQkB7W1tdrOzs535ubmvl9aWvq1ubn5NbbZ0NTU9Mrg4OBBj8dzHHJ2cXHxns/nWxY4rK6u/s8Uhp7JgNVqzSkuLt6zw2TaozMYSjQazYG0tLQiPKO2azAYTExhxERMXEpVVVV7CwsLdwUCgXf1en05CLyl0+negFrDUhARiQ0MDHxmNps/z8zMLIcFLCCTyTYRIs42XCHAlLPGFUgdkwmbzfaosrLyqZQuGjGBpT6cWE1FUorNToyBmCQHWbuiDNyGXGKJ40vI19EKbBSxYUx0C0sQWEwWtg4xLdui2ChiRzDrDhK/329HqnWClPhWgOykg/T43b+8vPwLSwYEeQjMz8+fxmBOI6D7Y6kAcvepb7fbfTRcv7a21sON7U/6Hmn8ifiYgMH2wke2QwqkCmD2T5pMplPib8y2GSnUsbAiM5DnA0Uu6R8aGjpL71lZWTdArjE7OzvY/gowPj6enPwy0sx6vd6g0yMzeR2DfhiuX1hYuM5CYaShoSELk+CQaKaRyUAsFotWWRIgU09lxKMIZnuCdCDxGDOfQ3qQbIzQTOoRE31mdHT0Cyo3NTX1MfzDBYIr3d3d+zlSPwuRIVqxkQR1z2P5HqS64tFnZmbmFK/H8z1FiYmAI7unp6d3U1n4wzf8ruZwOPZhMKtCHIAbPaL6aOuraHrFiIXITQAFEvXyQWpsneoBXmDxNTxrqY2urq5CtOEM0//xUoiJgL89GBkZ2U51Kioq9Dgxd8dQVXEfkxWgcdDMzs/PN9I7jhE+hIBZlgJImJi4RPr7+06AyDD/vbW19QiWzt11qheg/jES+M93dXV1L1wXYJl/SHoE+6PV1dXJOeiut5YQz/6lsui4CEvwJxaKX2NjYzvgg/1CHED5W1x7h/DJH9bfdW5syvjYott9g0gglpkRAoZEC87Ozv5A9Z1Op4WPcTFM1G2qi9/lsPoLuyqsek1RYuhwGNhJ5RBvLnI6HwL0YdKJIQGW8Eg0cxPyEQm29zI8jXz/drv9fdKjjw94vSLEVrzev6kMiPweroeVXLDcLiqDnfOyRDOK74pxJ8GG9PTDbW1t5/Ly8vaj3ZPheuyUryJ5tfb09HySm5ur0Wo0FSyVICgLMfD6SeCjPiy3M1zfFvjUBK9HivYPp1c2jsmAJtR3UBAydEajsYyUk5OTe3Ehu5PX437zEIsDG3Xn4YDY6AUbjB+bxUV67+vrs+I892NGRsZuTn+BJQOCskjtlCqVsVEXps6QJAoLJHgDHOnCVL0JTjLmIPNMJnALdofFCxjssaAcZG0esSCixdrb2w+UlpbuQ9pUgmyiTKvVliC2vI3n1ttwampqtuEP8nLkgsexDP5DFm5DbuhJRYslBR0dN9/EbdW3SIP+crlcV5H4PtkSxKTQ0tKyDdd0n+IA+pvH42mChe1Y1sHDI96r2VZCfX19em9vbw5ToUKFChUvGc8AWTDxS4hrnBwAAAAASUVORK5CYII=) no-repeat 10px center #0fa683 !important;
  background-size: 23px !important;
  color: #fff !important;
}

.btn-add {
  border: #1ec3e8;
  padding-left: 32px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAA2CAYAAACMRWrdAAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADsSURBVHgB7dmBCcIwEAXQX3GAjpANxA26iW5mnUCcoHEDR+gI3SBeaFHBNoFiSi78B0chDZRPE7gQgIiIiKgYzjkj1bmPix+DdhLi5n51SKxCYj7F3HglkNAOhWIwbRhMGwbThsG0YTBt9rEJ0urV8jhLHfBHvsvHOg8pK61mH5pURT5u5OE7cYO89FJHCTcsTYgtxQb5hfIMxlW0KBasRr6G0MtYsBbjb89NL2VDE6KHvWmfNVOtcVoYv2Kdp1Qb2l8eT9DaMJg2DKYNg2nDYNowmDZbBLMzY3doN138tV93Y7aIiz8iIiKitxeGcWe4r+y0CwAAAABJRU5ErkJggg==) no-repeat 10px center #1ec3e8;
  background-size: 18px;
  color: #fff;
}
.btn-add:hover {
  border: #1bb5d8 !important;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAA2CAYAAACMRWrdAAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADsSURBVHgB7dmBCcIwEAXQX3GAjpANxA26iW5mnUCcoHEDR+gI3SBeaFHBNoFiSi78B0chDZRPE7gQgIiIiKgYzjkj1bmPix+DdhLi5n51SKxCYj7F3HglkNAOhWIwbRhMGwbThsG0YTBt9rEJ0urV8jhLHfBHvsvHOg8pK61mH5pURT5u5OE7cYO89FJHCTcsTYgtxQb5hfIMxlW0KBasRr6G0MtYsBbjb89NL2VDE6KHvWmfNVOtcVoYv2Kdp1Qb2l8eT9DaMJg2DKYNg2nDYNowmDZbBLMzY3doN138tV93Y7aIiz8iIiKitxeGcWe4r+y0CwAAAABJRU5ErkJggg==) no-repeat 10px center #1bb5d8 !important;
  background-size: 18px !important;
  color: #fff !important;
}

.btn-searchIcon {
  width: 30px;
  height: 30px;
  border: #d954fb;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAIySURBVHgB7ZiNbcIwEIUvnSAjeAPYoOkEZYNmg9IJYIOyAYxQJiBMAJ0g2QA6wfWuMSpCd3bsxAiqftIp0hk/Pxz/JoMAEDGnx4TikWJMYShyW3ykaGysKaosyxq4JmSwoNhgOBuKElJDjRiMM3jJjrUgBST8QnHAYZnBkLAgpiPKbCaZpMfcU29LsbfR2BxPKp5gBbSTzcWCJtobxEImS09vLCmKDjo8tlcerSnEYMW1MVl3Maho1g6zBYTi6IEae8xYqptjO+slNqFiRQqTHc2WIUKrwV6N3oY2tLr1qhWQWMLAkOY8ukNQn+kGBgbbISD16txX9wHade+SfYoDBWnywWUvFPnW3R+jIyG/hXSshdzYV4mNGiFfQToqIcdDIndVYqPSD46QDk3ba/QuYKPSPzSQDqPknW+RjX4Jee/g7oERcke7Iqiw0UrIjyAdhZD7BA9sVFrXCt8sjMFqPgtF+06VlZ3pHQaGNKfRW6gV2CgCg41V1M+mdYiI65g3yBBwdEYZouMS2vU1i+0VRuwICIVfM+rUGHGaQv93gRJiQH2wn5h1MYztBOXfur4LcFnnOSBdlxf0ePXU+4DfK3Njc6frMh/ZJuDZuy28yD/RYu9fniRQP4mnIKhn796s717elRrbJXCM+rjtZ9YaLjHOcI3tm8nPtNKaPWuEG66Uxg62bIGObfEqZi8a5GXI2AjaFK5utg//ZlPxl8zu4JZwmYVbQzFbwS1izdYnkxTmG2LFkWqBIuMdAAAAAElFTkSuQmCC) no-repeat center center #d954fb;
  background-size: 18px;
  font-size: 0;
  color: transparent;
}
.btn-searchIcon:hover,
.btn-searchIcon:hover span {
  border: #c54ce4 !important;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAIySURBVHgB7ZiNbcIwEIUvnSAjeAPYoOkEZYNmg9IJYIOyAYxQJiBMAJ0g2QA6wfWuMSpCd3bsxAiqftIp0hk/Pxz/JoMAEDGnx4TikWJMYShyW3ykaGysKaosyxq4JmSwoNhgOBuKElJDjRiMM3jJjrUgBST8QnHAYZnBkLAgpiPKbCaZpMfcU29LsbfR2BxPKp5gBbSTzcWCJtobxEImS09vLCmKDjo8tlcerSnEYMW1MVl3Maho1g6zBYTi6IEae8xYqptjO+slNqFiRQqTHc2WIUKrwV6N3oY2tLr1qhWQWMLAkOY8ukNQn+kGBgbbISD16txX9wHade+SfYoDBWnywWUvFPnW3R+jIyG/hXSshdzYV4mNGiFfQToqIcdDIndVYqPSD46QDk3ba/QuYKPSPzSQDqPknW+RjX4Jee/g7oERcke7Iqiw0UrIjyAdhZD7BA9sVFrXCt8sjMFqPgtF+06VlZ3pHQaGNKfRW6gV2CgCg41V1M+mdYiI65g3yBBwdEYZouMS2vU1i+0VRuwICIVfM+rUGHGaQv93gRJiQH2wn5h1MYztBOXfur4LcFnnOSBdlxf0ePXU+4DfK3Njc6frMh/ZJuDZuy28yD/RYu9fniRQP4mnIKhn796s717elRrbJXCM+rjtZ9YaLjHOcI3tm8nPtNKaPWuEG66Uxg62bIGObfEqZi8a5GXI2AjaFK5utg//ZlPxl8zu4JZwmYVbQzFbwS1izdYnkxTmG2LFkWqBIuMdAAAAAElFTkSuQmCC) no-repeat center center #c54ce4 !important;
  background-size: 18px !important;
  color: transparent;
  font-size: 0;
}

.btn-addIcon {
  width: 24px;
  height: 24px;
  border: #555;
  border-radius: 5px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAA2CAYAAACMRWrdAAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADsSURBVHgB7dmBCcIwEAXQX3GAjpANxA26iW5mnUCcoHEDR+gI3SBeaFHBNoFiSi78B0chDZRPE7gQgIiIiKgYzjkj1bmPix+DdhLi5n51SKxCYj7F3HglkNAOhWIwbRhMGwbThsG0YTBt9rEJ0urV8jhLHfBHvsvHOg8pK61mH5pURT5u5OE7cYO89FJHCTcsTYgtxQb5hfIMxlW0KBasRr6G0MtYsBbjb89NL2VDE6KHvWmfNVOtcVoYv2Kdp1Qb2l8eT9DaMJg2DKYNg2nDYNowmDZbBLMzY3doN138tV93Y7aIiz8iIiKitxeGcWe4r+y0CwAAAABJRU5ErkJggg==) no-repeat center center #555;
  background-size: 50%;
  font-size: 0;
  color: transparent;
}
.btn-addIcon:hover {
  border: #444 !important;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAA2CAYAAACMRWrdAAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADsSURBVHgB7dmBCcIwEAXQX3GAjpANxA26iW5mnUCcoHEDR+gI3SBeaFHBNoFiSi78B0chDZRPE7gQgIiIiKgYzjkj1bmPix+DdhLi5n51SKxCYj7F3HglkNAOhWIwbRhMGwbThsG0YTBt9rEJ0urV8jhLHfBHvsvHOg8pK61mH5pURT5u5OE7cYO89FJHCTcsTYgtxQb5hfIMxlW0KBasRr6G0MtYsBbjb89NL2VDE6KHvWmfNVOtcVoYv2Kdp1Qb2l8eT9DaMJg2DKYNg2nDYNowmDZbBLMzY3doN138tV93Y7aIiz8iIiKitxeGcWe4r+y0CwAAAABJRU5ErkJggg==) no-repeat center center #444 !important;
  background-size: 50% !important;
}
/* 유저페이지 */
.btn-white {
  height: 40px;
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid #e2dfe4;
  background-color: #fff;
  color: #000;
}
.btn-white:hover {
  background-color: #f6f6f6;
}
.btn-grad {
  height: 40px;
  padding: 8px 24px;
  border-radius: 4px;
  background: linear-gradient(90deg, #b041f3 0%, #ec15ff 100%);
  color: #fff;
}
.btn-grad:hover {
  background: linear-gradient(90deg, #a33ce3 0%, #d613e7 100%);
}
.btn-grad:disabled,
.btn-grad:disabled:hover {
  background: #dfdce4;
  color: #a29fab;
  cursor: not-allowed;
}
.btn-follow {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px;
  border-radius: 30px;
  border: 1px solid #e94cf7;
  font-size: 12px;
  color: #e94cf7;
  transition: 0.3s;
  font-weight: 600;
}
.btn-follow:hover,
.btn-follow.ing {
  background-color: #e94cf7;
  color: #fff;
}
.btn-web {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAuCAYAAAC8jpA0AAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAbGSURBVHgB1VlNcts2GAVIyaNpHFvetzGzyy7yCSKfIMoJopzA9q5dWTlBkhPEOUHkXbuyfIIou+5Cp+269N+MYotk3yNBEoBEinScRd8MbQkEPjwAH74/CfE/hBT3hE7H89rtsIePXSmlp70KoiiaxnEcXF//MxX3gDuT7na9LsgM41g+k1L02VRjWBDHYiJEdHx7605mM98Xd0Bj0uvrP/cdxxli6HNRj2gpsPtHt7fO66bka5NWO/sWQ16Ke0ZT8k6dThsb3n4UxV9WEebkjiO3Li7OZPbwO958qBqHOzBcW4tPHj78ZShqwF3VYX390Rvo7AgfO+ZE4lR9zFXEdaODIPj6p95vNgtm7fZWgP5DrdnHQjBePtHaeIEH7fZm9+bm/A9RgVL1oDqEYfxRXTKDLISP8HGK3f9XexVgZ7fKZKUnVSwwPQHB9hP896whU7zfDQI/WCbPqZjkxCYMygfn52d9CJuEYWi9i09FCTg5rIZh7jB+gHYfC30Mua+tIT3OTx6iLmns8HsO1Jr8MJQ7Fxf+25w+jtIaNhEVQP9j63suH3JHlC8StSmIh2H0RtQhvb7uHWKHdUL+zY3cvb72LccgnxqCHGciKuA49qISk5mD8qkSOnFeUNypQ1uWodM4Dk/pXoYAhHdsU6TUp5Y+69jY2OYYQ69tvVUcPun9oijcvbr6e5KP0weoS5ED3u5gme1sos9V/cLQvjOJ/vuY95Xe5jiuoSY5aWUjvVw8bO7lpX8klgDH1reaJqIWTBWSMuov64V5x2DwTmvqbWw82s+lFAIcXXcCeihRAuyEpc9RrUAoikwLYssxZToj8ihaZM6vxT/2LgNdeKhP7fb2hMENozQ9QsNF7ZlTtGqRbrVo2zUalhxGimtr0QDm8SlUlcZAN3ld8BxcXv41linp7SU2eQE+ba2UiSfTdWyKS7gjamJzc5tytouW+DV3vE6kyAjx8vJsVy6xBE0RqNgCZGI+AZ8wbCdH22rNPdyBLMb2lKnzxB1Bi9OiJYA+a83xMSfgEdWUg92Re/yAcTzyBK4bq9crw5tSQNYZNmCiB2q0OC3bElxcfE0cC+0lO/CG03s1WMR3k3QcEnXHmQ2Hfc9jd/JpKX3KBuV2lPYS/47UkyxCpDEB9dkT9wd6QlqqSVmAJFIvmV1aDzutex7DGxpQi/BxafcwxsvaYe5epWMl2/hQf3OZ1PNsYuwgPrvIGeOP2XvIOofssahE/Bk9FWn5tKWtIDkesQL6IonZrFmup06soBOLzRrDfF1ErcxFB0gbMcYdklNbBZrmmc1JL0goiXnLUKG3tUHSjYTgOA2bPps12ylbPZrOTzi8CCInJFeaNZD+3p0yFqnPXwHd3U9h8mLEDXJbCRjAJn5JDXp87LrughmCGz/Tw/BOZ+5ht31RE/M5dFJTSnpPu0+an4bwFywESSMG4SJpPXxrDN3uEK+HME007FPGwVwIF4HgyZgEaZInGqDVChHkG1fJVyT7qaOTzzBvz/TSxiKTnZ6g817FPD3aSPbhIvDZ2nnZEw0Ae271ly8hd6+M5CJpZ3IfARPBhfipvse+0tOgiOYYMCWOh09TE2eAAVNJaCoPsCd9HtX3TnJHsLjzGYZhgk3YE3ncIU5Zwmgpkkht4n4xJupqgVMfgXvvBy8iSPNHB8GSmLKuwkYmJ1AbLcyQRwnbrMHKlAMcw+NljgCLQD0iflMjaagDBksvVFxjz+NZ1SdV2DGycaPK053Po8Nls2ACZi+fzdb4gItk3SJ9olfFk7Tt8H2qdsa402WECVipkTAS7YKfUffAbrPe0Cs6Ri+Yk9kCmavh2D5qkx9n6lQFZNRjvUgDIi/SzHtBPtXivdaU7zJh1T3MneBAJpu2UNprsyXR9Row+7nuYumBaoF5jToHK1z6d4P01RUvgKkmrBvbxKnrVhjbpa6LCqj3+iWellSXTsx+8UKxfcGisxhoFcE9En/wwCQFp2QcK3SwLyoAC9S3xk/175Rvl31h58dQu5Eta6kbQqFkH/90oR4S1U96MRBZiF14eS4qYS/Kyauo/KWB8oWZxk1d1yyPZagsqquV28eeVFE7Hf7UZhYhy8xkSmyx+DifzxEeuIclhftBmaxS0sVkj95mJQIdPDpVIfKyNru6mQHlY/wiZhQ36fL95bY+fgeV2BcVWFmU+Pbt/Pe1ta0zRVAPEZ+IBe8oxU8/bZ3yd5asJc1sol+LxDRt1pNjBeyq/A2mbSRWoMlPcl5q8H/MT3Ku6xzUTcVqk85wj+RZPhuD7Ics1qiLxqQzaBWoQYNASg+Mju6a5P4HKlByl1OASFUAAAAASUVORK5CYII=) no-repeat center;
  background-size: contain;
}
.btn-web:hover {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAuCAYAAAC8jpA0AAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAe6SURBVHgB1VldUhtHEO6eWYh+SCJeAlRSFXEC4xNYvCVGLssnMD4B+ASGE2CfwPgElsvYzhvrE1g+AXKVKxjyYJEISWDtdLpXWu3M6m8F5CFfFUKzO9PzzW5Pz9ctgP8hEG4Ix5V20VyYNYVUAIXFwQREDUKqBQYbv7xdqMEN4Mqkj0pUyObPNwHVHQVQIsDCtDEI1DAAPhnzCoz2V/7I1uEKmJn0cfmfEpDa1Ij30xCdCIJ9E8DurORTk5Ynm8m3nipUD+GmMSN5labTl3ut7fxC+2gaYUTYb3mZxaWDLEZ/0gYwL2DiQNhUGg6P7zY34SZIn97r7CHhXtIVCOg9f9TtawF1X6xWsWFfk7YBtQ8uyToh+7V7raiUfn660dqDKRjrHuFGW+i85A4lSJDlBexkvEztstv5at1pLB3kFkfZ+lqhwregfUQUL7zVzCxmCp2CCuCQjRadAYS11vl366u++wAiqHGEc/mLwyHCRI+XD3KllYOsf9ltJe+9hzFYlKfPROxrmdx5ZaWarS+9zq5yc9cZgLQm8wsPSEs6t9B+LgNjI1BHL7i9/Cb3NLpkCCr2GAPowwQYJMcdENTAPvv+jtiXeWzi+XxnLxXpv8oXT3hExSZsNKz/VHUPBo36lkOKjA8T0A085z5yyLTbYl/msYkTb9CTcvtJ0pbj08e/tYvKg6PYMDUCjbflNdr9xEfT+rON03utr0m/TvqtnKw6oA92PwPd9ZWD7/2o7TxpCTt2OwB8nCQsmMWfbRgDTr/cgmtHIPOxvUcOL5pz3GRAOoyRGO9iibkrr7P7MAIcPUoOmSn+bM3m9CPj2omwdJCv8pH/bHCB/fvPjdZ2bCb6gtryHXGLxI525kbHnxGDVEKIEhGEJ701ru+cx5uT3TNqa4QBP08+kk+ZaRR0lz58KbdCcRMA1ByFJpGF4u3QaaZTb/3YHpsBK0JBz5/xW1BBpW9967Yr7oGGhZPf/64svfuhGs58Wm4fUiImD4HkFKMav9P3iNryMarxJrwNKfFlo1XnyPFr1DZgdpHfXBqlyBz95YPsOg5HglnBrmTghUJTZ81cV9o0RDvred17td1u0QSqoBUVDamiqEP3rc4GiTheLxLEQYTIvOInUQQY728u2JUUbLHXgaelrUCJuW5035OoFELPKIQ5inxiv/bZ5kCoScTxJBLYtpbf5MODRfyLY15JkSkxsbX0i7g6hCQJSUN+Zz5fjcQXx/f7UdyWiONJJKD+IANxvO3H5/3+X7gI1TW8AdXedV7vMFOOKBjstrycn1SIcR9Vh2jTIhU9CJ2/R1shHo2z3V9EnTftFvcuRteNCR71B8u1Isf3AlinGavCev9rnZ9gXSkhpl4OxqM5W+G4DBMQQPBR9bUKa5Zb7B5x2GH98AmmIl5kiHnO9arp06XeG4vb7P4/phhWj6enQqrMxQYvzNEYsxAWZCDjugDNmmfi7KSTGKd5x2FxnN/OAGUflekGKCemS/YBMyCMSjZmnD/kwMrrbDA+VVijaz2p4FI7i+Q6yNm0MZyjWsc91UR7iG4Ij1UmXTnZaEsE8busOS7bHIYSejcA80nZipZPPAA3wZ0ErYKCS2j4IYTlCk7HlNZ3+L6jQWSRnpPi9JgX+XPT02rTW+jAyUanFrDe4MDvyyIQ2u4kBoswC0xQHByRAsK6kJzPtkp8Epc0V6wAO2tywkqQokTujQZqHistn79ujZ2EFR3rBTkRt2QRbKJBzhrVGswASvTnI/9hbqGzFUsJmjgeFfk3IJh6NTriU4uP4AYfLvUgoDM23uBNG7odv6UCslhCNMXrltJEMI2Upjz5Y/4s8RF/h+ia9borQCIaZ/sfeY/5/H0r4iAyY4VLGGESQGA4tVGlaJA8GT5ae8Kp3GZfk1Pzv1tESDLUPehLdrPyOueHc3NywlWngtVxP/wXtd1MmRqtZnZ1VIXntNJcg67em5o0pAETNHP0YNSpGlYGJNGOxBm7Xb+wE8currdZOSEW8vnheoMgrE8AfbSvBVx5Mh6scjhaD/9YRA3+uC2FGLnfczuLM0elsTJAmx1bTRqrCuXEk9Ny54MtoLqBefDzu2EFdlI+r9hKTRKHSIdPAqdaVbdIYx4sjVB4fbd4DjHLwVMWONojAPdJeBqfy2tKGp33ej43sIl4B1KAw5vTr9V07YSEeT6tlFPnCCtPth27IYVFcIqBrKikbpwgLqJHsgy73+e7zYnx+vPdyzV3E1NtqLrU92P3BDS7SRcaUnlSDOScJi6CS92YDQ2RQnBeK8fkEkyAp7vOfX47Nbt9yvadjRfapCpHsZ2krZHSdH4ut80xsmYTn1P6g10M5HpIzSXtFhSHYJJl47ioLr80ENtP1F5qTZ19NMrU2Pw4LIR3Lw4pUVCR+gf/PrKeyWQaySLkuDApGFV8zCw01xC8J6MK920vWxmXM05N6k/Lrac0Qpuw4WooGZ2w5FY3I8gBxa/00JqVi4xc8x4R68nQs+W3uW2YgKmZy08HuW2D8CipBkXGJrNyRd7DZCYTtslsOkb554okYTkVw18aphDuzZ0S/RLCjl04uSlIhfZcZx6vpkzFZv/x84bI99I8rAYEL/qhNv1YuCKiChSCqaQVUrYwauvs/uoVk9x/AT241LG3IX2FAAAAAElFTkSuQmCC) no-repeat center;
  background-size: contain;
}
.btn-x {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAVYSURBVHgB1VoxmNM2FH6SCclB7ppsDC2YrWPYbky2sl22br1u3cptbBe2bpSRiTK1TIWtTMltMPW6tVN9LQOjk8BHkrvYvGc7OUmWYskOA//3QZwXyX7P0vv16+kAPnOwZtPvch4PoRyCyeTsNnwi7O5+dXB+7p3OZkFgauMtFmFQr3/Rxlj2wR0t7Mvm8/EItozr1/0O52zoeXDAWPvFxUUY6tqxxIuW34qi+E+89KEEFgt2e9NbcgX646M/Q8GfYLlk/ffvg1O1Laf/wjAIo4h9DyVRq8VPYEvQOA+w4cXy1cW7d8EIIH6q/B7iMLZxnjPxHwbbExsxBt29vZv3YAtA53/PO8yOdG8fxACSL5yTE+Jca11cRMdqpyzYR8pDjhsN34cKaDZvPsSPjmyNH0wmwc+mPlIANJXQkQdSA87uNZtfdnMdOR/gRyCYWlWmErLhMT1LtsaPJpP/Bpv6MZ1xd/fWkKaFYArw5nfSAKWH5ig4jqP+dPr/c3DA3p6PjscPJccYnIzHZ92ivlxn9LwkoUVnfdNUimN4Lj+YPyFWA0ukoys7jwgYYwc2/T2dcTYLw3q9PcfLby4dY/tXrrRfnJ+Hb8W21661X2IQP+BlIzM1lsu4sViMX0IBiHHwzkOhb+I80nIPX85bsIBn+mE+D19dvdrq4lD6sA4CvkbHJKbCYGe6YGu13ZPFYhLABuczurwhmEPk+7sfPgR/gyX4ph+RLo/E7ya6JJbAURhJN+aecSplC2eOLuPYTJcmbAwgvZkdXeryJooi7dqwXEZaupxOg1/AEbywgSVdIkMFKgVTsKRpRAvRJU6xQ7ldMV2a4BU1oDleq7X/wulzuHYL8wJF3BhF3CuxLeVNvd4i9rghtF3nDdElY/FPYh+iS3T+WyiJwgAIesXK9nd22o8pQLEtMtVrzhNWWjmYBItJ3cA3/6tya1pfeuo9XMBsG2aJ9y9drmy0BkynZ321LSY6Lv3sR8G0yg0xqRO6rKpiC3Ng7QGuwsgSkmLFt3tgKzNAdp7osr8NCW49AitUkRkr4ItAuRE4yQ0TrEdgBReZkadgQkKXW3Ge4ByAji4LFKs0Mpg3t2CLcA6AYFh5VUFmyBt2qAu2LEoFQMimkogOss9AbUfTxUVmOPsBJZEpViKB7qWVdbCC8EytIKBiPcEgDuFSdbZsFWsRSo9A0pkDbfUCwWQtM0x544rSI0BwlRl5ec472O4xVEClESCkdAlK0UmvWFV5Doa8cUGlESBQJQGZpauYGzi9fJzjz0Qj7eZs88YWlUZAX0nI3EKZQbXN3AMt88YWpUdAJ41V0NYSFetTUW265I0NSgWQFl6TLaEIql/28A2Ttt9Ily7yvAjOU4g2456Xd56kcboFLV8Yw2Cdp5KTGjUUXnGPy+6Im/EqijWKllhSeTMCSziNgG3h1XaDryuMucoM6xzI6FJhFSq8nuUSOZMZOyDTZddQGHtdRWZYBZDSJdyXrUkl4b6pD668o00b/BVMVcCiwph1AMg432HSquXtU3S+X9QX6fKfCjKjq1KwcwBEl+j8b5CvXd61WTlNdGmrWOM4nhedvxmTWKBLaTPuWklwLIw5H5poA8hKKDm6RCp0riTozt+IYnUyA3d6A/yQGK1IZmgDyBYUX7ayI3RmBCWgO38znSPYFpRXyAWQ1i5BQ5fmcyobfKrzN2klTukyHog2U/WtDHRHSep+OXGKJXnXUduhH71cW/GLrQSoAs0zrKE7f5OmUBrhevgSgbZN5wkamWENXd7k1gHk3T9o14TOH23zzwdW0K28DsidvznXRreF9ICvHNI1I8VHNS0wQ8OT8QAAAAAASUVORK5CYII=) no-repeat center;
  background-size: contain;
}
.btn-x:hover {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAATRSURBVHgB1VldUhtHEO6eXStaiVTJDwFUTlXQDfANxFt+REqcIOEEhhMgTgCcwMkJUBWykzfICcwNoockcikPoSogYZvd8fTaMruzM7s9u+LBXxUUtGa10zPdX3/TA/CZAye9eVcAnEMZSBivvQg68ED4+7ubvpDisv17MLaNEe1RcIEgT6AMEDYmvZsBPACm319v+p44FR6cT76db4B1Cgr/9WXrbXj7Sq3oBpRAdAedvFVyBU2YJk4LFBvUTr+T4c7XL1cu9bGCfj0e4lUkYRdKAn14DktCZvLxC2CjVjOPF4s/KJTUWv6a/lheza7rj9dGASZ/IoCt5Ci1jd1/fpjtwRIgPDxNTZ5mIeX+6jC7+ikHCDW/sYcor+4t2Go25wf6Q6a88RAO8mKVg+n27RGg3EzaIogO1180jm3PpByIQwnEYdImEfcmvf+7+oOP/GCgVmp8b8FWlVD6t/fmQK10ahdlJE/ao+Yg7zk0Gae9+blUYXH/TTCe3dSfdi7wKjnORMF3YbTz5LfmEBzwenu2hxKPkjYJ8o/1UaNb9KwwGUMfdlOhpGLSFkpqy1OT9T18/mdXtoAJ2l198rSzcz/oc543OtAeBmNTKP2luFkfW/OCXU7emEA544F3CtrkIw+2OsP0boOLA4T1s/qxiq+LpM0X3pE+ziVvQJs80aVUDi9stBDohTu0gMCEyP3UD/eT/9ro0uSskL41lMhuossQ0EqXNuQ6QF/GpUtT3tRXzLWh2TTTZfss+AUcIYoGcOnSlDcCxIGeNzFdIvyctHHo0oZCB0wyIz+UMBUCybwhulQrPUh+HtPly0bpKo7cgdPe7Fgl3LPEq5XMCDp6bZj2rzflnfcqaQuVFEAMLwX459rbxzNP1Rcm45hQuAMLUCjpdNlYmWdCyZY3VenSBrYDFEqq1GuKFftcmVGVLm1gO0BYGzWHHLoskufvpLfrSpc2ODlAcJEZppMe0eWT0RdOWikPzg7YZIYtlNJ5QzsmvoElwtkBgrnyPjLKjEzeqBpQJDNcUMoBAoVSyqAqq+mAz82bsijtwEcG0SovPuPKDK5iLUJpBwg1v35cVmZwFCsHlRxwlxnFeeOKSg4QYrrUmMZ6wNfkuS1vXFDZAeokSIlaQmJL+DKzuh+LFytvuKjkgKmTcA/sU29Tt3LzhovSDpiksQ5fiCOOzKjSGCvlADVeTZ0E9MOnZWUG5U2Z2uDsAMWrRLM0phiv0hgzyfMisA80BGPjlb5ErXxSXVZpjEVwt9UefXkBTDjtALfxyj3gmxpjrjKD7YBL45Uqr6LWk/SLsgf8+Ds83K8iM1gOlGm8qjb8IO+Av0BVmVHowPTHtz9l6RIvOZ2EEOSDNMZS4/I+JLpU90fpECHG8eUOMOByj+DSGEvC6sCCLvXDONGly2HcpTFmypsimWF04EPvMkuXoUTnToKt8ppkhilvimSG0YG4oBjo8sM9mjtM92+2ewRu3iyQcYAYh4RY0lZ0T8XBQ92/oT55nXGEKjRfnTVYSVuE19u36ipJaldJafaJJ0XyXKs5NG59FGxlxib/yUiAJfQudWTe4QDT/VsqhFaVh5+2b0m9Sx0ZunSAKW8yObA6igvUoStdcmGqvHxk88ZJjS4Tk375Y2RyYd8DigDiA6GVMRsAAAAASUVORK5CYII=) no-repeat center;
  background-size: contain;
}
.btn-youtube {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAANeSURBVHgB7ZlPctowFMafZEKYCRBn3TZxTlCW2ZWcoOkNyAmanCDkBElPEHqCprt2FXqD9ASItN0bSGYgA1Y/mT9TLLW4xgrODL8Zxka2ZX3We0/SE9GaNUvB4txUKHheLjf0GGNe+BBjLg4upYsvpfSnx+EwJ/p9IRY9ZBRQLL6scs6PcPkN/lZotdxCEH7Bx/v7n83oxTkBpdKrI8b4BU49yiYCQs57vR+NaYEzPSkWdy/w1S8pfdNIExfme7Sxse0+Pna+qoJQwLjx7ISeCRBxMBXBJmbzafFD1MZh6mTCcIs/+cXBFATcSXBQeFLS3qJKgmB0mCPi78nc4G9SsmvOqen74pZWgOt6ldGIKozJMzL4JWPOGSuX96T+qDzvdu/qlCHK5V34J9M+tkmA6Hbb+5Qx0BtuEMgWRUyPR2+EfTcpg8CM4V/yc7RcEwDb/06ZhWu+qAngPEjssGrKQRaRciSiZZxSJJ+XNwjLNbKE4zgiWqYJ6PdzgpKDCR+/QmBoWeoNbZxJtQf+wENvtEql3SvbZmVLQAhG1poyK0xVzsgSmoBCIfZ0IC4e5ll1ZVYp+MdiExrHWyuE/rGMWZnaZtWETEzMqqXMKg3/eHIBsxfDrNIIuysTMGFmVpSQVQvA2oId93p3x5SQFQpg5zCj/V5PNGgJcvTEqIXSYMBqcVImcdB6QM27yQ4CX/yw02lXkzbe1DatB/r9cMGQ5liAutiHblfUaXkWC0gTLI4ajsNPLQ6OdgQoO8eAVff9dpMsownAXMiFGSVFhcVTmEuDLDAcqnnVfJkmAGkMD4dEqzIVFm2ai/Gd0QLGAo8SYrvx+PpaotmQlaDXlFmCxQJU8tTiWLAkYbp/DtNUwh0OA2srqKQUi545vVgq7d0g7FUNz4S5+CAIbh8efq0kN7q19aKCTEQVke2tqY1huIYy7MbImxj1QRCJybnKkvmRyjr0H9lp1LWtFzNMr2eZa29BHfDX4F24Q/O3xGm2kZie3J2EGxyDQefL5ub2DkQc0LNg3Hh1NttiUiLy+Z02ulCFqqxuM4nxAqh9OS0w7lIijFbhvDWE1MqqxwWVbFYZc+zfXWOgbGrX41QCQR6NnQo9M0Ke3sExSLmXuM/5aBIEwhyoQIMFrVmz5p/8BkhtOqsM+H5JAAAAAElFTkSuQmCC) no-repeat center;
  background-size: contain;
}
.btn-youtube:hover {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAOLSURBVHgB7ZlhbhJBFMffm92aQjWuX7AkJtITyA2k37TSSG9AT9D2BNATtD1B8QRiwH4t3qA9QddEQ4ofXGMrqOw830Ch6c4a1mW3bA2/BAJvZ5f5M++9mXkDMGfOVGCQRu1SNwf9fg4k5gY3IViEaEGEIJFDBI4kdIQhHTBNO1tP2RPv8zO2i98LJI2SgeI5PzkPs4TwhN9OJPbfZJsPWt7LNwR8fnlZMoXYY2sOkgiBLcndzR7dr41MYwGd9d4eEW3DHYDdbT/zPr0z+Kze7lLnR4xE4HnxsgQg3k66gQV+5OB1CNSLbO2BgMruQAC4rcVtbyQBlRjY34c2ghwiPp30HAn9VRNBbJHPRf6BD/xLdc4IrUz9/gnMgE7pIu+6Rl4AVJQo73UEs8Ij0NX6L0HuZptLVUgQneKPfQLc8tqF1hLBTlrnFQtmqoqou6gmgKO6BQnkUR0dl+id164J6Es6hYTCga3Foj4C6IYO2PYLXnLECKdO22sTECHCgOP22kUZYuK3XLC9Nl0AL6IgLLwEEcI4PH/VPYtjNIx77uQgjgQlxIQzFnIYt1vFI2AEQlm5Fc81FYgJTUDPWQy0HAjMcGVbHbjVlPGxCIuTXWilhdEKGHEdH6HdSs0FXlu8LuSHcisVH+xWUcTH7Qu4phpF2p2lgLFbdda7hxCSmQpQizOJsJlppDYhJLMUsHtppFayjVQNpsCEW0ZtlMjEcpCSSRC0ETgrUKT1njG8z5AAq8vNdCFs57+W9L5pI7Bo9VSjyOYC5edEePC4karClPSgZ3n/8VhdiDfqNfbznZV6TJMjxCRg4OeAVQ7QFsSMJsD95YaOAeUuLuBOtpGuQRz09cqEJmBBoGoUalem0mKc7uKHloVcwhyEJO7Oo0+hWRNgCHwGCYVkAAFcQyzFNhdMiQAu92s2DbSWluLbQYXlS/Fnxa/sj51i95hriwXtjqtavMsB/eRoNrXRT2sXeS7eFgCN1+jTR8npGtvFboGH4Xji01gQ8XLg6ovDRaYbAeu69A1FsOo0SbQMAx9qdlWVHlSo2YUDHLL0XbkxPB/4S+E0yXBAHywfpbevT2jukIhR59XncRBnmulttbmAsZskEO5bH8TGqPNDkw/DuJBlvsx5d9bzAp1ykmmxd9SzTX1t9Q/nxLx/BWlJSRYawuIjp2jPiTkpkCuHSUAYNi9y7Kg2PXPm/M/8AS1xboOICK1xAAAAAElFTkSuQmCC) no-repeat center;
  background-size: contain;
}
.btn-insta {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAASTSURBVHgBzVpNUhpBFH7dI2qqUHCf4HgCzS674AmSnCC4y1J3yUo8AeYE4irLwC5ZBW9ATpDWyj6IWKVQTOd7zGAB0zMDPYB8C2X6Z3ivf7739WsEJSCfd/Oe55W0Fm+FoAMUubRYNLUmReTVez2n8fCgVFxjEVUBw91+X1dg9Ht6Rmitq72ePItyxDEVbm+7x+j4LRjxZ4UQ4sBx6DiTyVG3e3s1WR9yYGurcAHDP+PjJq0Q4EgRTuThxM/R8jEHstlCRUrxiVYUcOLN+nrOhRP1p7Lhh2zWPZVSl6M70zWWVQ1tmrRAeJ7AshXvKJYs9Em7fXM+sIv/8Ib1PP0norXCrBy1WqpBS8TWllsSQp+S2ZFWtyte88aW/ASaLEe8p4mGh8s2nnF3p6oYuEO2wVCdz2R0hT+ImNFXbHwSDy8agX2/yDATcHBH9vv9oqkjAtfZMo3PZl8WmQG3twvnm5uuOyzH7CvsiyNTHw6wAh1qwaYZhWq3r/doSTCtAs/rH3Y6fxvD51xuVyFC74731HXsAbEbfqWu0xKBkTyeLBNCfhx9ZgYM9xT7vIlD0RaNF0qVBuQnC0Dbt6PPEfTtrtG8LYH4w756zxIAU54bGsODEiXOPE+CcfTYiHe78nya75ubA4H4u8BaLmL6B2ViRCrCIVpf15TJFELirNNRDfTfC5ZSXkpZnZZA5uIAiz8YXhEiuS0cKcGR0tpaodzp3JwNy5lt8O+YZoSklGAJgl1TmbEbc3gZ2uuUUiKVA0n6KfHL4QRofOZRH3sHWYLXfILxLZ+OB5SsopuJymjgmhXWe8DXT8ZFbxR/ceIMuubi4YEOyQJWM8CjD+M/GqpUlPgbEWdqsg6bv8j0SxawcsBWP8XpGo4dZAErBzhIGYoVj3JC1wHn02B/TPXORNhuYsN06980NXTocD6M2rMidRx4btg60AoXibc0NcR+qGRCvE0LKwcilGGeDyUJXUGnr0pkoFKtpZUCtpwBp2Z8mXQu4oIS0y+EnlE+9HrUIAtYOQA6bGHTNQxVLoTar2CUx8CzE3W25fSh7fHVOhI7jjiKSAbwKONsu3sKJwfLggMVGZnLB8trsoQ1C/nyV5zENHE5MRwkh2OirE6VPEhFo+22wqlJWI8eG48MW5lSIHUcgBNlOyfESVrjGXMJZOwEhBrSMPoyqS2W1BUE354/e+kxtzNxcCQsgSrL/T7hXOyxthmu/ZYfO5waMxjNEXPPSgSOVGlJkJw2nyy0VYaLhJ92D6EpzUmsUKpxBWCySV9jE8uGobU7ja5ZFmL0U03416j6n6HfyqfXmc2kzwrGZC7rmu9pMgZpERj/nWL00yAOIJXHuRkTvR1EibNFY0T8GQllqJ+e8iKcHkzIsCmeqUVnrn0GTLzke5IgY4kdZMmqEemSFYL+CuOfsnlj98SPj7e1jY3cDpx4QysJfQnjx+6xQzf1cOLHxsYOz0yRVgfYn+ILrr0+T1YYfyvx+NhqvHixc4n1zrPxzFFZ13HZ8eH+Xv0w1SZm9P2Li4E441sXF6esfVoggl8ENDnASknVJPH3H+ARJMFUZs8OAAAAAElFTkSuQmCC) no-repeat center;
  background-size: contain;
}
.btn-insta:hover {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAATZSURBVHgBzVpdchpHEO6exY6QKhX5RT95sXQCkxMYv6UCqnADoxMEnUDoBCInED6BoSSl/CZ8gignMHkJkvNgpWIBSbHT7h5ABmYW0Cx/XxU/Oz9L90xP99e9IEzAhzRtJjfu84DqJRKmAGEP5gnCa0JdJ62roIPa7rtkfdxwjOpo/NjaU0/olG+Yg2WCoKxDOIlSRLkabw6ahSBBvy9deAFCXiXgw222dezuHsHHTOuMeBKsIJCotHW5fjTUNnjx8aB9SkQFWGEgm9TWZfLw4br/5e/sf8cadDFqIiv2J4+u8OG6hjkClUoh4s9s+3tRY0Kio+8v10tmvLyZA8t25r4j1DXB4e5FsgYLROOglecDeuxWhO50B3+Qg909xEHUyuO1DuDVooUX7J4ny/LbyDLYvbiJCfaQ8i1y9WXlRfjKeD88bzRyLF8IV66daH5ee5YAFaZ5C6yJGtj3LlD4RvbftMLE6zCkf1Bjqe/3RYZGtnXIpnI1OuebjVYebzLNijk0g+DV3z5P7sOC4LICDR023W9r/WuWs85yPh8cQ6SrSqF6PnpDCqkKCwTbs+W6ZTeGB0HFmgfqhSKg1GgHwXxdpf17tGm1sSkNXbvcN/OyBMwYQv7W1u9zBCoVBPidtBm7lkWJJGeqzG9DK05PsQRTYGYKiB1jAs4Q2ukHp0Ddj0BJuAkM87rNtCxyJm6avc0+dqjQ3Q1VntaBzEQBIX8c4k+nGtwlZ3kmZ8Xti+RJv7kn8KNpjIKYEArCecJ0wg+jGMUwH4NYCkziT1Og+FemGYs8eisgNj9OeES648yqKi+JK1HjAsRTuRd4wv8MGP7k0L9P/s7Xa4PN48iZHH7+eAUe8NoBEzlRvbY6+vzJQf765My1G+yj0uJ+wQN+JmT4k41J/En6ZHdcfRI7wEcU8IAkHXYj1GWVJ82V3ZHzYU933HMKeCngDP1a/wFTQmt4P9qGvaj9WMSOA8uGnwkB2iaA+BKmBM9/Mdo2St6mhZ8JORN73JSkZNLcxk+f867qHgXoxYC9FFh7ulFx3owSZ+OCUtf9Bm76EEANPOClwLMK3rHvrlkdvLIqgCuzyiMwKSP3uVYfEcq+6at3JA4TcKg6zmKArPIZ0+ZjQjJmwauUJjaxqEpsGMAJeMLbC8mKEeJR5ABWhA9rTl5G+Agwn4pVPIjlRnfO1yRr8l49I/zFRhFiIHYc4KSkCB5KcKnyKK7wgpkEMlFCJ4DLMPrNpLEcxd/L2J1ebTMuZpYT9+w4z7ltEUJIcyk81accEvgkdrTZ/e5X7CAYBzOvSvQUKcOCoEzZfAS+zHCecDJgoGs5A1YIt0qNKwAuHFgyyeIrPsY1ezTsTcNrFoVI/qRUBT/laPP/TvuTNYs4PQw5PXy35PK68KcICiLeTAmv4ZBvF3MNr8G3cSoGcdEVHt+O408mDjCVLbjSPDa8VBQ5mze+kj9yOpQ+f3qgVzcHbS4PUnSFjU2KH65Vcc6Va1MUFicy5h8BgxRkiB/eZu7L4CqXrBBI0687v60/VPPsB93ZZonZ4y+wiiD9ZvtyIz/YZHGhrQujnTfDnAdMmZLJ36jwpi9qknk62DHlw6WalDwHoyeqEJUz4KQbiCKGnIHOcTTcA0dFYZYw1EZJJoe1VpAsTyJ/XwAY6x6Hv/Rh7wAAAABJRU5ErkJggg==) no-repeat center;
  background-size: contain;
}
.btn-edit,
.btn-back {
  padding: 8px 12px;
  border-radius: 24px;
  border: 1px solid #a3a1a7;
  font-size: 14px;
  font-weight: 500;
  color: #3e3d53;
  transition: 0.3s;
}
.btn-edit.round {
  width: 32px;
  height: 32px;
  padding: 8px;
  background-color: #fff;
  border: 1px solid #a3a1a7;
}
.btn-edit.round::before {
  filter: brightness(0);
}
.btn-edit::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url(../../static/media/i-editW.389569181fe9f250089e.svg) no-repeat center;
  background-size: contain;
  vertical-align: text-bottom;
}
.icon-share.round {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid #a3a1a7;
  border-radius: 50%;
  background-size: 14px;
  background-position-x: 45%;
  transition: 0.3s;
}


.btn-back::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAGgSURBVHgB7ZY9bsJAEIXHtkA0COgs8ZM9AukonRs4J8gRknTpQk6QpKPkCKRLF3MD5wRYgCWXlktbtvPG8kqrIFGtRYG/gp3dWenZY/btELVcGIN/JpOJY5rmQ1mW28PhsFY3jMfjuWVZj6QZaH1Ba2PYti263e5OJoqieDsej0uOhRBDzDk3pAZIkmRkdjodR11EJW5knGWZaEqc6ff7jonybhAHcpFLI+MwDH0MPjVDAG2/+g+g1ALDnBfBiSDSbp7nWivBLw6tmFparp7qGE6n03fDMJ4Q+mma3kdRFMgNs9nsFQPntB5D+M0HrPjZwhl3MF/V6zYexIBFflcT2HRtVD3SDGQWcMKteW5Tr6dd9wQrjuNgMBiMEC/wVFu88QvWKofiETn+TA5pBpfcJy69FbW0XD2VEw4BTMFFC+apLqjkHNLrhDG0fNaSTekPFgVncD7vcD49uRNWvJM5zQRw3FtuSueqALfnMq5tWlAzCK46N6X/e8BfJeZcY30btD15G7qwYRdhsN/vl+ombljxWZakGVR6jabUo5ZL8wfWsJmf5UpmhAAAAABJRU5ErkJggg==) no-repeat center;
  background-size: contain;
  vertical-align: text-bottom;
}
.btn-edit:hover,
.btn-back:hover,
.icon-share.round:hover {
  background-color: rgb(226, 223, 228);
}
.btn-reset {
  width: 40px;
  height: 40px;
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid #000;
}
.btn-reset::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url(../../static/media/icon_reset.02aaeb34badebac3c26d.svg) no-repeat center;
  background-size: contain;
}
.btn-reset:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
.btn-block {
  border: 1px solid #6d6c75;
}
.btn-block::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url(../../static/media/icon_block.0a267724212e25bd8565.svg) no-repeat center;
  background-size: contain;
}
.btn-block:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
.btn-unblock {
  border-radius: 4px;
  background: #525162;
  color: #fff;
}
.btn-unblock::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url(../../static/media/icon_unlock.bf0e0699d0374b5bd535.svg) no-repeat center;
  background-size: contain;
}
.btn-unblock:hover {
  background: #474654;
}
.btn-seller {
  height: 40px;
  padding: 8px 18px;
  border-radius: 4px;
  background-color: #525162;
  font-size: 14px;
  color: #fff;
}
.btn-label {
  display: flex;
  align-items: center;
  width: 200px;
  gap: 4px;
  padding: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, #ca79fc 0%, #ff5eb6 100%);
}
.btn-label label {
  flex: 1 1;
  height: 32px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  line-height: 32px !important;
  color: #fff;
  cursor: pointer;
}
.btn-label label input {
  display: none;
}
.btn-label label:has(input:checked) {
  background-color: #fff;
  color: #464548;
}
.btn-more {
  padding: 8px 24px;
  border-radius: 24px;
  border: 1px solid #fff;
  font-size: 12px;
  color: #fff;
}
.btn-more:hover {
  background-color: rgb(255, 255, 255, 0.2);
}
.t_more {
  align-self: start;
  position: static;
  font-size: 12px;
  color: #999;
  cursor: pointer;
  text-decoration: underline;
}
@media (max-width: 700px) {
  .btn-more {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 32px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAA2CAYAAACMRWrdAAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADsSURBVHgB7dmBCcIwEAXQX3GAjpANxA26iW5mnUCcoHEDR+gI3SBeaFHBNoFiSi78B0chDZRPE7gQgIiIiKgYzjkj1bmPix+DdhLi5n51SKxCYj7F3HglkNAOhWIwbRhMGwbThsG0YTBt9rEJ0urV8jhLHfBHvsvHOg8pK61mH5pURT5u5OE7cYO89FJHCTcsTYgtxQb5hfIMxlW0KBasRr6G0MtYsBbjb89NL2VDE6KHvWmfNVOtcVoYv2Kdp1Qb2l8eT9DaMJg2DKYNg2nDYNowmDZbBLMzY3doN138tV93Y7aIiz8iIiKitxeGcWe4r+y0CwAAAABJRU5ErkJggg==) no-repeat center;
    background-size: 70%;
    font-size: 0;
    color: transparent;
  }
}
.btn-more-text {
  display: inline-block;
}
.btn-more-text::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  background: url(../../static/media/btn-downB.aaa6da97ce5db46ccad4.svg) no-repeat center;
}
.btn-more-text::after {
  content: '더보기';
}
.btn-more-text.fold::before {
  rotate: 180deg;
}
.btn-more-text.fold::after {
  content: '접기';
}
.btn-download {
  min-width: 26px;
  width: 26px;
  height: 26px;
  border-radius: 26px;
  border: 1px solid #ccc;
  background: url(../../static/media/i-downB.b536f7167a905df923cd.svg) no-repeat center;
  background-size: 18px;
}
.btn-download:hover {
  background: url(../../static/media/i-downB.b536f7167a905df923cd.svg) no-repeat center #efefef;
}
button:disabled.btn-download {
  border-color: transparent;
  background: url(../../static/media/i-downG.f8789f35a4f9e133d29e.svg) no-repeat center #dfdce4;
}
.btn-view {
  width: 120px;
  height: 40px;
  border-radius: 4px;
  border: 1px solid #6d6c75;
  transition: 0.2s;
}
.btn-view:hover {
  background-color: rgba(62, 61, 83, 0.2);
}
.btn-addMusic,
.btn-add-gray {
  height: 40px;
  padding: 0 12px;
  border-radius: 4px;
  font-size: 14px;
  background-color: #525162;
  color: #fff;
  transition: 0.2s;
}
.btn-add-gray::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  background: url(../../static/media/plus-solid.c7ba44b46bed5d87a8eb.svg) no-repeat center;
  background-size: contain;
}
.btn-addMusic:hover,
.btn-add-gray:hover {
  background-color: #424250;
}
.btn-addMusic::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  background: url(../../static/media/i-musicW.aa07d2dfb54317eb8dad.svg) no-repeat center;
  background-size: contain;
}
.btn-regiMusic {
  height: 40px;
  padding: 0 12px;
  border-radius: 4px;
  font-size: 14px;
  background-color: #e94cf7;
  color: #fff;
  transition: 0.2s;
}
.btn-regiMusic:hover {
  background-color: #ba3dc6;
}
.btn-regiMusic::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  background: url(../../static/media/i-waveW.c70e27be7a1005d86de3.svg) no-repeat center;
  background-size: contain;
}
.btn-del {
  height: 40px;
  padding: 0 12px;
  border-radius: 4px;
  border: 1px solid #6d6c75;
  background-color: #fff;
  font-size: 14px;
  transition: 0.2s;
}
.btn-del::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url(../../static/media/i-trashLineB.518226bf83ddf249209b.svg) no-repeat center;
  background-size: contain;
}
.btn-del:hover,
.btn-del-round:hover {
  background-color: rgba(62, 61, 83, 0.2);
}
.btn-del-round {
  width: 32px;
  height: 32px;
  border-radius: 32px;
  border: 1px solid #a3a1a7;
  background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwBAMAAAClLOS0AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAASUExURUdwTAAAAAAAAAAAAAAAAAAAAFZgiOcAAAAFdFJOUwBgX5/ffhjBrwAAAKtJREFUOMt1lMkVgCAMBUMR3C1CK/DZgEr/rQiIyPLHW8IfDNlsXUx87rJwqgN/mw8CcVHuFJLVAnnFAinaCfmkE1KVA/ILB6TRdUgr65BO1Rj9vY01RFLNMfZqT68tjjk/xSMyml2qBtknqxadsmgJkUBCdGNERAN8QFfhzylcfCClBJNIacdCUWmxGah9sOGoRbGpaQxwcGjUcDhpnHEB4Mo49JIJtum1tD/T6DbbeF1PlgAAAABJRU5ErkJggg==) no-repeat center;
  background-size: 38%;
  transition: 0.2s;
}
.btn-keep {
  min-width: 24px;
  width: 24px;
  height: 24px;
  background: url(../../static/media/i-keep.dfa83e12b24fcfe827c7.svg) no-repeat center;
  background-size: contain;
}
.btn-keep:hover,
.btn-keep.active {
  background: url(../../static/media/i-keepA.5a47f6306580d79e2925.svg) no-repeat center;
  background-size: contain;
}
.btn-album {
  height: 41px;
  padding: 0 12px;
  border-radius: 4px;
  background: linear-gradient(90deg, #b041f3 0%, #ec15ff 100%);
  font-size: 14px;
  color: #fff;
  transition: 0.2s;
}
.btn-album::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  background: url(../../static/media/i-discW.b9bbc9cbcf17e264f10a.svg) no-repeat center;
  background-size: contain;
}
.btn-album:hover {
  background: linear-gradient(90deg, #a626f5 0%, #d50fe8 100%);
}
.btn-minus {
  width: 40px;
  height: 40px;
  border-radius: 40px;
  border: 1px solid #a3a1a7;
  background: #fff url(../../static/media/i-minus.8c855f0cfefbc252f366.svg) no-repeat center;
}
.btn-minus:hover {
  background-color: #e2dfe9;
}
.btn-plus {
  width: 40px;
  height: 40px;
  border-radius: 40px;
  border: 1px solid #a3a1a7;
  background: #fff url(../../static/media/i-plus.fcc0b74ae2f01505c9f7.svg) no-repeat center;
}
.btn-plus:hover {
  background-color: #e2dfe9;
}
.btn-like {
  width: 18px;
  height: 18px;
  background: url(../../static/media/i-thumb.9d2b76ee6c3131c2fbde.svg) no-repeat center;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.btn-like:hover,
.btn-like.active {
  background: url(../../static/media/i-thumb_active.aee36aef9caf097f38d6.svg) no-repeat center;
}

/* 모바일에서 background 강제 적용 */
@media (max-width: 768px) {
  .btn-like.active {
    background: url(../../static/media/i-thumb_active.aee36aef9caf097f38d6.svg) no-repeat center !important;
    transform: translateZ(0); /* 강제 리렌더링 */
  }
  .btn-like:not(.active) {
    background: url(../../static/media/i-thumb.9d2b76ee6c3131c2fbde.svg) no-repeat center !important;
    transform: translateZ(0); /* 강제 리렌더링 */
  }
}
.btn-round {
  padding: 8px 12px;
  border: 1px solid #3e3d53;
  border-radius: 24px;
  background-color: #fff;
  font-weight: 500;
  color: #3e3d53;
  transition: 0.2s;
}
.btn-round.active,
.btn-round.active:hover {
  background-color: #3e3d53;
  color: #fff;
}
.btn-round:hover {
  background-color: rgba(62, 61, 83, 0.2);
}
.btn-round.upload::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  background: url(../../static/media/i-rankMusic.0f18c7751f4596b48980.svg) no-repeat center;
  background-size: contain;
}
.btn-round.active.upload::before {
  background: url(../../static/media/i-rankMusicW.dba5ca627887d4aaea92.svg) no-repeat center;
  background-size: contain;
}
button.btn-round.upload:disabled:before {
  filter: invert(170%) sepia(162%) saturate(39%) hue-rotate(0deg) brightness(146%) contrast(48%) !important;
}
.btn-round.download::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  background: url(../../static/media/i-downB.b536f7167a905df923cd.svg) no-repeat center;
  background-size: contain;
}
.btn-round.active.download::before {
  background: url(../../static/media/i-downW.c5eecad66604d7cb36e4.svg) no-repeat center;
  background-size: contain;
}
.btn-round.mv::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  background: url(../../static/media/i-mv.aa51d24877a06814a5da.svg) no-repeat center;
  background-size: contain;
}
.btn-round.active.mv::before {
  background: url(../../static/media/i-mvW.7c8706eca3b5c4e721ca.svg) no-repeat center;
  background-size: contain;
}
.btn-round.lyrics::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  background: url(../../static/media/i-lyrics.f42d178a685a84ee39a5.svg) no-repeat center;
  background-size: contain;
}
.btn-round.active.lyrics::before {
  background: url(../../static/media/i-lyricsW.7d7315eb4ecc5b651efd.svg) no-repeat center;
  background-size: contain;
}
/* 아이콘형버튼 */
.btn-icon {
  width: 18px;
  height: 18px;
}
.bu-icon {
  padding: 2px 2px;
  border: 1px solid #3e3d53;
  border-radius: 24px;
  background-color: #fff;
  font-weight: 500;
  color: #3e3d53;
  transition: 0.2s;
}
.bu-del {
  font-size: 0;
  border: 1px solid #3e3d53;
  border-radius: 24px;
  background-color: #fff;
  min-width: 18px;
  min-height: 18px;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.bu-del::before {
  background: url(../../static/media/i_del.26a61671edd1b8c92d8d.svg) no-repeat center;
  background-size: contain;
  content: '';
  min-width: 12px;
  min-height: 12px;
}
/* 삭제할 영역 */
button {
  white-space: nowrap;
}
/* 프로필 홈 팔로잉 중일 때 */
.profile .followBtn button.following {
  background-color: rgba(230, 26, 254, 0.7);
}

.cursor_link {
  cursor: pointer;
}
.ant-form {
  min-width: 90% !important;
}
.ant-layout {
  background-color: transparent;
}
/*================================
Badge UI
================================*/

.badge-single {
  width: fit-content;
  padding: 4px 8px;
  border-radius: 20px;
  border: 1px solid #0d88d4 !important;
  background: #fff !important;
  font-size: 12px;
  font-weight: 600;
  color: #0d88d4 !important;
  line-height: 1;
}
.badge-mini {
  width: fit-content;
  padding: 4px 8px;
  border-radius: 20px;
  border: 1px solid #e94cf7 !important;
  background: #fff !important;
  font-size: 12px;
  font-weight: 600;
  color: #c718e2 !important;
  line-height: 1;
}
.badge-regular {
  width: fit-content;
  padding: 4px 8px;
  border-radius: 20px;
  border: 1px solid transparent;
  background: linear-gradient(90deg, #ca79fc 0%, #ff5eb6 100%) !important;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  line-height: 1;
}
.badge-amature {
  width: fit-content;
  padding: 3px 8px;
  border-radius: 20px;
  background: #9a9fb5;
  font-size: 10px;
  font-weight: 700;
  text-wrap: nowrap;
  color: #fff;
  height: 20px;
  align-items: center;
  display: inline-flex;
}
.badge-pro {
  width: fit-content;
  /* padding: 3px 8px; */
  border-radius: 20px;
  background: #c12cca;
  font-size: 10px;
  font-weight: 700;
  text-wrap: nowrap;
  color: #fff;
  height: 20px;
  align-items: center;
  display: inline-flex;
  gap: 2px;
  padding: 1px 6px 1px 4px;
}
.badge-pro::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 2px;
  vertical-align: middle;
  background: url(../../static/media/i-micW.01291093a0e0402125ef.svg) no-repeat center;
  background-size: contain;
}
.badge-white,
.badge-AI {
  width: fit-content;
  padding: 2px 3px;
  border-radius: 20px;
  border: 1px solid #c4c3c7;
  background: #fff;
  font-size: 11px;
  font-weight: 700;
  text-wrap: nowrap;
  color: #6d6c75;
  line-height: 1;
}
.badge-origin {
  width: fit-content;
  padding: 4px;
  border-radius: 12px;
  background-color: #8790a3;
  font-size: 11px;
  font-weight: 600;
  text-wrap: nowrap;
  color: #fff;
}
.badge-originM {
  padding: 4px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: #0e2a46;
  font-size: 14px;
  color: #2687e9;
  line-height: 1;
}
.badge-stat {
  width: 100px;
  height: 34px;
  border-radius: 24px;
  font-size: 12px;
  text-align: center;
  line-height: 34px;
}
.badge-stat.unregist {
  background-color: #dfdce4;
  color: #a29fab;
}
.badge-stat.complete {
  background-color: #e94cf7;
  color: #fff;
}
.badge-stat.private {
  background: #525162;
  color: #fff;
}
.badge-stat.wait {
  background: #fd8632;
  color: #fff;
}
@media (max-width: 700px) {
  .badge-stat {
    min-width: 64px;
    width: fit-content;
    height: 26px;
    padding: 0 8px;
    line-height: 26px;
  }
}
.badge-title {
  padding: 4px;
  border-radius: 20px;
  background-color: #13d5df;
  font-size: 11px;
  text-wrap: nowrap;
  color: #fff;
  line-height: 1;
}
.badge-titleS {
  padding: 3px 4px 2px;
  border-radius: 20px;
  background-color: #13d5df;
  font-size: 11px;
  text-wrap: nowrap;
  color: #fff;
  line-height: 1;
}
.badge-genre {
  padding: 4px 8px;
  border-radius: 20px;
  background-color: #848ff5;
  font-size: 12px;
  text-wrap: nowrap;
  color: #fff;
}
.badge-cate {
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid;
  font-size: 13px;
  font-weight: 600;
}
.badge-cate.gray {
  border-color: #525162;
  color: #525162;
}
.badge-cate.pink {
  border-color: #c718e2;
  color: #c718e2;
}
.badge-cate.orange {
  border-color: #fd8632;
  color: #fd8632;
}
.badge-cate.blue {
  border-color: #0d88d4;
  color: #0d88d4;
}
.adminState {
  min-width: 40px;
  padding: 4px;
  border-radius: 12px;
  background: #525162;
  font-size: 10px;
  font-weight: 600;
  color: #fff;
}
.adminState::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 4px;
  background: url(../../static/media/i-crown.900e07c01b5908c10b15.svg) no-repeat center;
  background-size: contain;
}
.vanState {
  min-width: 40px;
  padding: 4px;
  border-radius: 12px;
  background: #f34144;
  font-size: 10px;
  font-weight: 600;
  text-align: center;
  color: #fff;
}
.d_noti {
  width: 34px;
  padding: 4px 8px;
  border-radius: 10px;
  background-color: #c718e2;
  font-size: 11px;
  color: #fff;
}
/*================================
etc UI
================================*/
/* 메달 */
.i-rank {
  position: relative;
  display: block;
  width: 30px;
  height: 41px;
  background: url(../../static/media/i-rank04.7a4f410b0549b5fe37be.svg) no-repeat center;
  background-size: contain;
  font-style: normal;
}
.i-rank span {
  position: absolute;
  font-size: 16px;
  left: 50%;
  top: 15px;
  transform: translateX(-50%);
}
.i-rank.gold {
  background: url(../../static/media/i-rank01.01262d83e6d777191536.svg) no-repeat center;
  background-size: contain;
}
.i-rank.silver {
  background: url(../../static/media/i-rank02.907222d626694c822491.svg) no-repeat center;
  background-size: contain;
}
.i-rank.bronze {
  background: url(../../static/media/i-rank03.9ca32349dc6c039b4e19.svg) no-repeat center;
  background-size: contain;
}
/* ai모델 */
.aiModel {
  width: fit-content;
  padding: 4px;
  border-radius: 8px;
  background: #141424;
  font-size: 11px;
  font-style: normal;
  font-weight: 400;
  color: #fff;
}
/* 카운팅UI */
.countNum {
  display: flex;
  align-items: center;
  height: 34px;
  padding: 8px 12px;
  border-radius: 24px;
  border: 1px solid #3e3d53;
  font-size: 0;
}
.countNum span {
  font-size: 12px;
  color: #3e3d53;
}
.countNum.view::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 21px;
  margin-right: 4px;
  background: url(../../static/media/i-count.7aba6db4f80a502ab17a.svg) no-repeat center;
  background-size: contain;
}
.countNum.play::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  /* margin-right: 5px; */
  background: url(../../static/media/i-playLine.adced53f07e54e36e5da.svg) no-repeat center;
  background-size: contain;
}
/* 고도화 타이틀 */
.blueGrad {
  display: flex;
  padding: 10px 20px;
  border-radius: 24px;
  background: linear-gradient(90deg, #8a55ff 0%, #5be2ec 100%);
  font-size: 20px;
  color: #fff;
}
.blueGrad::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 12px;
  background: url(../../static/media/icon_star.dd2ff28a44381aad93a0.svg) center;
}
/* 장르 선택 UI */
.artistModal .tabBox {
  display: flex;
  align-items: center;
  gap: 8px;
}

#artistAlbum .tabBox {
  display: flex;
  align-items: center;
  gap: 8px;
}
.artistModal .tabBox .genreTab,
#artistAlbum .tabBox .genreTab {
  min-width: 70px;
  padding: 5px 12px;
  border: 1px solid #cccccc;
  border-radius: 30px;
  color: #0e0e1f;
  display: flex;
  gap: 8px;
  align-items: center;
}
.artistModal .tabBox .genreTab span,
#artistAlbum .tabBox .genreTab span {
  font-size: 13px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.artistModal .tabBox .genreTab span svg,
#artistAlbum .tabBox .genreTab span svg {
  width: 12px;
}
/* 텍스트 */
#groupExplain {
  color: #2687e9;
  font-size: 11px;
}
label #groupExplain,
label + #groupExplain {
  margin-left: 8px;
}
/* 페이지네이션 */
.pagenation {
  display: flex;
  width: 100%;
  height: 45px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 0;
  background-color: #f8f9fa;
  font-size: 13px;
  color: #666;
}
.pagenation > button {
  width: 25px;
  height: 25px;
  border: 1px solid #ddd;
  border-radius: 50%;
  cursor: pointer;
}
.pagenation > button::after {
  display: inline-block;
  content: '';
  width: 18px;
  height: 18px;
}
.pagenation > button:disabled {
  cursor: not-allowed;
  opacity: 0.8;
}
.pagenation > button:disabled::after {
  opacity: 0.5;
}
.pagenation > button.first-btn::after {
  background: url(../../static/media/i_first.003e5b7cf77e07b4cbdd.svg) no-repeat center;
  background-size: contain;
}
.pagenation > button.prev-btn::after {
  background: url(../../static/media/i_pre.ba6251bc7515dd6a9b08.svg) no-repeat center;
  background-size: 70%;
}
.pagenation > button.next-btn::after {
  background: url(../../static/media/i_next.40270b181969123a8c03.svg) no-repeat center;
  background-size: 65%;
}
.pagenation > button.last-btn::after {
  background: url(../../static/media/i_last.66b09771994b6893d1bb.svg) no-repeat center;
  background-size: contain;
}
.pagenation .page-info {
  min-width: 100px;
  text-align: center;
}

/* 플러스 아이콘 */
.artistModal .plus {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 36px;
  background-color: #f0dbf4;
  margin: 0 0 8px;
}

.icon-album {
  display: inline-block;
  width: 34px;
  height: 28px;
  background: url(../../static/media/i-record.ba1458b744adcb5ad4c9.svg) no-repeat center;
  background-size: contain;
  filter: brightness(0);
}
.icon-albumW {
  display: inline-block;
  width: 34px;
  height: 28px;
  background: url(../../static/media/i-record.ba1458b744adcb5ad4c9.svg) no-repeat center;
  background-size: contain;
}

.icon-video {
  display: inline-block;
  width: 34px;
  height: 28px;
  background: url(../../static/media/i-video.f1eb5fc6f99bd2537ecd.svg) no-repeat center;
  background-size: contain;
}
.icon-videoW {
  display: inline-block;
  background: url(../../static/media/i-videoW.9011b36e7c41d5f062c4.svg) no-repeat center;
  background-size: contain;
  vertical-align: middle;
}
.icon-videoB {
  display: inline-block;
  background: url(../../static/media/i-videoB.26b80e2b2a1e1926ed73.svg) no-repeat center;
  background-size: contain;
  vertical-align: middle;
}
.icon-mic {
  display: inline-block;
  background: url(../../static/media/i-mic.aefca9207865b58b4d17.svg) no-repeat center;
  background-size: contain;
}
.icon-micW {
  display: inline-block;
  width: 18px;
  height: 18px;
  vertical-align: middle;
  background: url(../../static/media/i-micW.01291093a0e0402125ef.svg) no-repeat center;
  background-size: contain;
}
.icon-time {
  display: inline-block;
  background: url(../../static/media/i-timeline.7392a12f8bfcaf011fa5.svg) no-repeat center;
  background-size: contain;
}
.icon-fanG {
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  background: url(../../static/media/i-fan.80c00af8935350644cf2.svg) no-repeat center;
  background-size: contain;
}
.icon-fanGnot {
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  background: url(../../static/media/i-fanG.e87a2a992d032301d167.svg) no-repeat center;
  background-size: contain;
}

.icon-disc {
  display: inline-block;
  background: url(../../static/media/i-disc.da774a6ba60fc285e3ae.svg) no-repeat center;
  background-size: contain;
}
.icon-discW {
  display: inline-block;
  background: url(../../static/media/i-discW.b9bbc9cbcf17e264f10a.svg) no-repeat center;
  background-size: contain;
}
.icon-discG {
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  background: url(../../static/media/i-disc.da774a6ba60fc285e3ae.svg) no-repeat center;
  background-size: contain;
  cursor: pointer;
}
.icon-discGnot {
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  background: url(../../static/media/i-discG.490962c201b9d669ee1b.svg) no-repeat center;
  background-size: contain;
  cursor: not-allowed !important;
}

.icon-genre {
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  background: url(../../static/media/i-genre.f02a53f7bd1fd3839581.svg) no-repeat center;
  background-size: contain;
}
.i-playCnt {
  background: url(../../static/media/i-videoB.26b80e2b2a1e1926ed73.svg) no-repeat left center;
  padding-left: 28px;
  height: 20px;
  line-height: 20px;
  cursor: pointer;
}
.i-playCntnot {
  background: url(../../static/media/i-videoB2.b3a8e4f291652ff9f180.svg) no-repeat left center;
  padding-left: 28px;
  height: 20px;
  line-height: 20px;
  cursor: not-allowed !important;
}
.icon-heart {
  display: inline-block;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEEAAABBBAMAAAB82dR2AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAeUExURUdwTNra2tra2tzc3N/f39vb29ra2tvb29vb29jY2AVqVy4AAAAKdFJOUwCyoloSQ3CKLCHZd2JIAAABIUlEQVRIx+2VvQ7CIBSFidS/EYjW0SZ1r5NrUwcd1SeoiQ9gE+Osb+Aj+8cthXLK4uiZbsiXC9x7OTD2l0/bVSKvu3Zca52Il+TJjWv1P4svZYxxHUsry1EDIs6jimLVAAaiVlqYuDTE0qzKxMQmyUgA3YjoIWJOxB4REyIqRMQaiARUrsuFCV00jomsVS9X5e+I8DnCdxlhghqTIEB6mm9rSsQdETMihog4ByfIzHIVOAZjhZ9IDcFDmzTeC9gEbJM2ichTVplbD/feMeiwv649tHqjXIfhYHhwEtW2KR5K4SRRPq/joRRWEuU3zD6uBelAwAK57ph88gGNufA01da3xU5TbW3exKXL/9+GHOedX8TAcmJ/2VTon+HZ/6/t1hNL10801fUBrwAAAABJRU5ErkJggg==) no-repeat center;
  background-size: contain;
  vertical-align: middle;
}
.icon-heartL {
  background: url(../../static/media/i-heartLineB.8d5f935f2c0b00825c18.svg) no-repeat center;
  background-size: contain;
}
.icon-heartL.active,
.icon-heart.active {
  background: url(../../static/media/active_heart_icon.93cff5f2c5117f2fd317.svg) no-repeat center;
  background-size: contain;
}
.icon-mv {
  background: url(../../static/media/i-mv.aa51d24877a06814a5da.svg) no-repeat center;
  background-size: contain;
}
.icon-mv.gray {
  background: url(../../static/media/i-mvG.cc8ceaafe43277d187a3.svg) no-repeat center;
  background-size: contain;
}
.icon-keep {
  width: 18px;
  height: 18px;
  background: url(../../static/media/i-keep.dfa83e12b24fcfe827c7.svg) no-repeat center;
  background-size: contain;
}
.icon-keep.active {
  background: url(../../static/media/i-keepA.5a47f6306580d79e2925.svg) no-repeat center;
  background-size: contain;
}
.icon-play {
  background: url(../../static/media/i-playLine.adced53f07e54e36e5da.svg) no-repeat center;
  background-size: contain;
}
.icon-download {
  background: url(../../static/media/i-download.a9a6e5b7d130d7695860.svg) no-repeat center;
  background-size: contain;
}
button:disabled .icon-download {
  background: url(../../static/media/i-downG.f8789f35a4f9e133d29e.svg) no-repeat center;
  background-size: contain;
}
.icon-lyrics {
  background: url(../../static/media/i-lyrics.f42d178a685a84ee39a5.svg) no-repeat center;
  background-size: contain;
}
.icon-siren {
  background: url(../../static/media/i-siren.892f1dfff42a3f3b351e.svg) no-repeat center;
  background-size: contain;
}
.icon-reason {
  background: url(../../static/media/i-reason.1192be73c6de91f263d6.svg) no-repeat center;
  background-size: contain;
}
.icon-link {
  background: url(../../static/media/i-go.a8cd2a3fc849764f81b1.svg) no-repeat left;
  background-size: 22px 22px;
}
.icon-block {
  width: 20px;
  height: 20px;
  background: url(../../static/media/i-block.b28b2fa5f96d8b0f2b74.svg) no-repeat center;
  background-size: contain;
}
.icon-unblock {
  width: 20px;
  height: 20px;
  background: url(../../static/media/i-unblock.f22903a1f6c1b61e4f87.svg) no-repeat center;
  background-size: contain;
}
.icon-down {
  background: url(../../static/media/i-downB.b536f7167a905df923cd.svg) no-repeat center;
  background-size: contain;
}
.icon-board {
  background: url(../../static/media/i-board.8b11b4635294daf1739b.svg) no-repeat center;
  background-size: contain;
}
.icon-music {
  background: url(../../static/media/i-musicW.aa07d2dfb54317eb8dad.svg) no-repeat center;
  background-size: contain;
}
.icon-arrowCircle {
  background: url(../../static/media/i-arrowCircleW.6649e16e1f8186e3658f.svg) no-repeat center;
  background-size: contain;
}
.icon-pt {
  background: url(../../static/media/i-pt.dc945cb74e147f94ff13.svg) no-repeat center;
  background-size: contain;
}
.icon-heartB {
  background: url(../../static/media/i-heartLineB.8d5f935f2c0b00825c18.svg) no-repeat center;
  background-size: contain;
}
.icon-share {
  background: url(../../static/media/i-shareB.12a4a6d28f64d5ad2ece.svg) no-repeat center;
  background-size: contain;
}
.icon-shareW {
  background: url(../../static/media/i-share.db4c7d4ab45831f1d64e.svg) no-repeat center;
  background-size: contain;
}
.icon-coin {
  background: url(../../static/media/i-coin.02585c38894a386860d0.svg) no-repeat center;
  background-size: contain;
}
.icon-markB {
  display: inline-block;
  background: url(../../static/media/i-mark-blue.681d1a48031af38bd532.svg) no-repeat center;
  background-size: contain;
  vertical-align: middle;
}
.icon-comment {
  background: url(../../static/media/i-comment.12ba90fe5885cd471eab.svg) no-repeat center;
  background-size: contain;
}

/* i[class^='icon-']:hover {
  filter: invert(43%) sepia(86%) saturate(2571%) hue-rotate(265deg) brightness(97%) contrast(99%);
} */

/*================================
Color 
================================*/
.bg-sky {
  background-color: #8ed4f5;
}
.bg-lightGreen {
  background-color: #1de9b6;
}
.bg-yell {
  background-color: #feca28;
}
.bg-orange {
  background-color: #f67c01;
}
.bg-red {
  background-color: #e62118;
}
.bg-grad {
  background: linear-gradient(90deg, #13d5df 0%, #f138fc 100%);
}
.c-red {
  color: #f34144;
}
.c-blue {
  color: #0d88d4;
}
.c-dark {
  color: #0e0e1f;
}
/*================================
Ant Custom
================================*/
/* select 및 datepicker */
.ant-upload-wrapper .ant-upload-drag {
  border-color: #e21dfd;
  background-color: #fcf7fd;
}
.ant-upload-wrapper .ant-upload-drag:not(.ant-upload-disabled):hover,
.ant-select-outlined:not(.ant-select-disabled):not(.ant-select-customize-input):not(.ant-pagination-size-changer):hover .ant-select-selector,
.ant-input-outlined:hover,
.ant-input-outlined:focus,
.ant-input-outlined:focus-within,
.ant-picker-outlined:focus,
.ant-picker-outlined:hover {
  border-color: #e21dfd;
}

.ant-input-disabled.ant-input-outlined:hover,
.ant-input-disabled.ant-input-outlined:focus,
.ant-input-disabled.ant-input-outlined:focus-within,
.ant-input-disabled.ant-picker-outlined:focus,
.ant-input-disabled.ant-picker-outlined:hover {
  border-color: #dfdce4;
}

.ant-select-open .ant-select-selector,
.ant-picker-focused {
  border-color: #e21dfd !important;
}
.ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-today .ant-picker-cell-inner::before {
  border: 1px solid #f138fc;
}
.ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-selected:not(.ant-picker-cell-disabled) .ant-picker-cell-inner,
.ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-range-start:not(.ant-picker-cell-disabled) .ant-picker-cell-inner,
.ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-range-end:not(.ant-picker-cell-disabled) .ant-picker-cell-inner {
  color: #fff;
  background: #f138fc;
}
.ant-picker-now a {
  color: #f138fc;
}
.ant-picker-active-bar {
  display: none;
}
.ant-form-item-explain-error {
  font-size: 12px;
}
/* 기본 별표 마크 */
.ant-form-item .ant-form-item-label > label.ant-form-item-required:not(.ant-form-item-required-mark-optional)::before {
  display: none;
}
/* divider 텍스트 */
.ant-divider .ant-divider-inner-text {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 24px;
  font-weight: 600;
  color: #3e3d53;
}
@media (max-width: 700px) {
  .ant-divider .ant-divider-inner-text {
    font-size: 20px;
  }

  .blueGrad {
    font-size: 16px;
    font-weight: 500;
    padding: 8px 12px;
  }
  .blueGrad::before {
    width: 16px;
    height: 16px;
    background-size: cover;
    margin-right: 8px;
  }
}
/* 업로드 */
.ant-upload-wrapper .ant-upload-drag .ant-upload {
  padding: 0;
}
.ant-upload-wrapper .ant-upload-drag .ant-upload-drag-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
/* 신고사유 */
#requestBad_contents {
  height: 150px;
  min-height: 150px;
}

/*================================
Modal Component
================================*/
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}
.modal .modalWrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  border-radius: 8px;
  padding: 20px 24px;
  background-color: #fff;
}
.modal .modalHeader,
.modal .modalHeader h2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  font-size: 24px;
  font-weight: 700;
}
@media (max-width: 700px) {
  .modal {
    height: 100vh;
  }
  .modal .modalWrapper {
    width: 100%;
    height: 100%;
    border-radius: 0;
    padding: 0 16px 30px 16px;
  }
  .modal .modalHeader {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding: 18px 0;
    font-size: 26px;
  }
  .modal .modalHeader * {
    order: 2;
  }
  .modal .modalHeader button {
    order: 1;
    align-self: flex-end;
  }
  .ant-tooltip {
    max-width: auto;
  }
  label + #groupExplain {
    margin-left: 0;
    width: 100%;
  }
  div:has(> #groupExplain),
  label:has(> #groupExplain) {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    display: flex;
  }
  label #groupExplain,
  label + #groupExplain {
    margin-left: 0;
  }
}
/* 약관* */
.termsModal {
  width: 56% !important;
  top: 20%;
}
.termsModal .wrap {
  height: 50vh;
  overflow: auto;
  margin-top: 12px;
  font-size: 13px;
}
.termsModal > div .ant-modal-content .ant-modal-body h2 {
  padding: 0 0 8px;
}
@media (max-width: 700px) {
  .termsModal {
    width: 100% !important;
    top: 0;
  }

  .termsModal .wrap {
    height: calc(100vh - 96px);
  }
}
/* 판매자정보등록 - AntD form Custom*/
.sellerModal {
  width: 830px !important;
  top: 10%;
}
.sellerModal ul {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 16px 0 24px 0;
}
.sellerModal ul li {
  display: flex;
  column-gap: 10px;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.2);
}
/* 판매자 정보등록 li 내부 꽉 채워야 할 것 */
.sellerModal ul li .flex1 {
  flex: 1 1;
}
/* 판매자 정보등록 공통 */
.sellerModal ul li .ant-form-item {
  margin-bottom: 0;
}
.sellerModal ul li .ant-form-item > div {
  flex: 100% 1;
  flex-direction: column;
  margin-bottom: 0;
}
.sellerModal ul li .ant-form-item .ant-form-item-label {
  text-align: left;
}
.sellerModal ul li .ant-form-item .ant-form-item-control {
  flex: initial;
}
/* 판매자 정보등록 첫번째 리스트 */
.sellerModal ul li:nth-of-type(1) .ant-form-item-control-input-content {
  flex: 1 1;
  display: flex;
  gap: 12px;
}
.sellerModal ul li:nth-of-type(1) .ant-form-item-control-input-content input {
  flex: 1 1;
}
/* 판매자 정보등록 두번째 리스트 */
.sellerModal ul li.divided {
  flex-direction: column;
}
.sellerModal ul li.divided > div {
  display: flex;
  column-gap: 10px;
}
.sellerModal ul li.divided > div .ant-form-item-control-input-content {
  display: flex;
  gap: 12px;
}
.sellerModal ul li.divided > div:nth-of-type(2) {
  flex-direction: column;
  row-gap: 16px;
}
.sellerModal ul li.divided > div:nth-of-type(2) > div > div:nth-of-type(1) {
  flex: 1 1;
}
.sellerModal ul li.divided > div:nth-of-type(2) > div > div:nth-of-type(2) {
  flex: 2 1;
}
.sellerModal ul li.divided > div > div {
  flex: 1 1;
  display: flex;
  column-gap: 10px;
}
/* 판매자 정보등록 세번째 리스트 */
.sellerModal ul li.manager {
  flex-wrap: wrap;
  row-gap: 16px;
}
.sellerModal ul li.manager > div {
  flex: 1 1;
}
.sellerModal ul li.manager > div:last-child {
  flex: 100% 1;
}
/* 판매자 정보등록 네번째 리스트 */
.sellerModal ul li.bank {
  flex-wrap: wrap;
  row-gap: 16px;
}
.sellerModal ul li.bank > div {
  flex: 1 1;
}
.sellerModal ul li.bank > div > div:first-child > div {
  flex: 1 1;
}
.sellerModal ul li.bank > div:last-child {
  flex: 100% 1;
}
.sellerModal ul li.bank > div:last-child .ant-form-item-control-input-content {
  display: flex;
  column-gap: 12px;
}
.sellerModal ul li.bank > div:last-child .ant-form-item-control-input-content input {
  width: 218px;
}
/* 판매자 정보등록 새로 생긴 리스트 사업자 등록증 업로드 */
.sellerModal ul li.pdf-upload-section {
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  font-weight: normal;
}
.sellerModal ul li.pdf-upload-section > p {
  font-weight: 500;
  color: #464548;
}
.sellerModal ul li.pdf-upload-section > div {
  width: 100%;
}
.sellerModal ul li.pdf-upload-section .ant-upload-list-item {
  margin-top: 0;
}
.sellerModal ul li.pdf-upload-section .ant-upload-list-item:hover {
  background-color: inherit;
}
.sellerModal ul li.pdf-upload-section .ant-upload-list-item-name {
  flex: none !important;
  max-width: calc(100% - 30px);
}
.sellerModal ul li.pdf-upload-section .ant-upload-list-item-action {
  opacity: 1 !important;
}
/* 판매자 정보등록 버튼 */
.sellerModal-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
@media (max-width: 700px) {
  .sellerModal {
    width: 100% !important;
    max-width: none !important;
    height: 100vh !important;
    top: 0;
    margin: 0 !important;
  }
  .sellerModal .ant-modal-content {
    border-radius: 0;
    height: 100%;
  }
  .sellerModal .ant-modal-body {
    height: calc(100vh - 54px - 80px);
    padding: 0 16px !important;
    overflow: scroll;
  }
  .sellerModal ul li {
    flex-direction: column;
    column-gap: 10px;
    row-gap: 10px;
    padding: 15px;
  }
  .sellerModal ul li.divided > div {
    width: 100%;
    flex-direction: column;
    row-gap: 10px;
  }
  .sellerModal ul li.divided > div > div {
    width: 100%;
    flex-direction: column;
    row-gap: 10px;
  }
  .sellerModal ul li:nth-of-type(1) .ant-form-item-control-input-content:has(.timerText) {
    flex-wrap: wrap;
  }
  .sellerModal ul li:nth-of-type(1) .ant-form-item-control-input-content:has(.timerText) > div {
    flex: 3 1;
  }
  .sellerModal ul li:nth-of-type(1) .ant-form-item-control-input-content:has(.timerText) > button {
    flex: 1 1;
  }
  .sellerModal ul li:nth-of-type(1) .ant-form-item-control-input .timerText {
    width: 100%;
  }
  .sellerModal ul li:nth-of-type(1) .ant-form-item-control-input .timerText br {
    display: none;
  }
  .sellerModal ul li.bank > div:last-child .ant-form-item-control-input-content input {
    width: auto;
    flex: 1 1;
  }
  .sellerModal ul li.pdf-upload-section {
    gap: 5px;
  }
  .sellerModal ul li.pdf-upload-section > span {
    margin: -2px 0;
    width: 100%;
  }
}

/* 판매자 상세정보 모달 */
.sellerDetailModal .ant-modal-body {
  padding-top: 0 !important;
}
.sellerDetailModal .sellerType {
  padding: 1px 10px;
  border-radius: 5px;
  background: linear-gradient(90deg, #ca79fc 0%, #ff5eb6 100%);
  font-size: 11px;
  color: rgb(255, 255, 255);
}
.sellerDetailModal ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sellerDetailModal ul li {
  display: flex;
  align-items: center;
  column-gap: 10px;
  padding: 13px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  font-size: 12px;
  line-height: 1.5;
  color: #515151;
}
.sellerDetailModal ul li > div.flexRowBetween {
  gap: 0;
}
.sellerDetailModal ul li > div.flexRowBetween > div {
  flex: 1 1;
  padding: 2px 8px;
}
.sellerDetailModal ul li > div.flexRowBetween > div:nth-of-type(2) {
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
}
.sellerDetailModal ul li > div.divided {
  width: 100%;
  padding-top: 10px;
  margin-top: 10px;
  border-top: 1px solid #ccc;
}
.sellerDetailModal ul li.manager {
  align-items: start;
}
.sellerDetailModal ul li > div.divided > div,
.sellerDetailModal ul li.manager > div {
  display: flex;
  align-items: center;
  gap: 6px;
}
.sellerDetailModal ul li label {
  font-size: 15px;
  font-weight: 600;
  color: #0E0E1F;
}
@media (max-width: 700px) {
  .sellerDetailModal .sellerType {
    padding: 1px 7px;
    font-size: 10px;
  }
  .sellerDetailModal .ant-modal-body {
    padding: 5px 15px 15px 15px !important;
  }
  .sellerDetailModal ul li {
    padding: 12px;
    font-size: 10px;
  }
  .sellerDetailModal ul li label {
    font-size: 11px;
  }
}

/* 신고사유 AntD Modal Custom */
@media (max-width: 700px) {
  .ant-modal-content:has(#requestBad) .ant-modal-title {
    padding: 10px 20px;
  }
  .ant-modal-content:has(#requestBad) .ant-modal-body {
    padding: 0 20px 20px 20px;
  }
}

/* 아티스트 등록 - AntD form Custom*/
.artistModal {
}
.artistModal .ant-modal-body {
  padding: 0 20px 24px 20px !important;
}
.artistModal .ant-form-item {
  margin: 0;
}
.artistModal .form1 {
  padding: 16px;
  border-radius: 16px;
  border: 1px solid #c2b8cb;
  gap: 16px;
  display: flex;
  flex-direction: column;
}

.artistModal .form1 .gerneSel label,
.artistModal .form1 .mainOpt-right label,
.artistGroup label,
.artistGroup span {
  line-height: 1;
  font-size: 12px;
  padding-bottom: 8px;
  letter-spacing: -0.8px;
}

.artistGroup span.ant-select-arrow {
  padding-bottom: 0;
}

#artistProfile {
  gap: 0;
  /* margin-top: 8px; */
}
.artistModal .form1 .mainOpt {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.artistModal .form1 .mainOpt .mainOpt-left {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1 1;
}
.artistModal .form1 .mainOpt .mainOpt-left .group {
  gap: 16px;
  display: flex;
  flex-direction: row;
}

.artistModal .form1 .mainOpt .mainOpt-left .ant-form-item-label {
  text-align: left;
  padding-bottom: 6px;
  gap: 16px;
}

.artistModal .form1 .mainOpt .mainOpt-left .group + div {
  text-align: left;
  gap: 16px;
}

.artistModal .form1 .mainOpt .mainOpt-right {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.artistModal .form1 .artistGroup {
  /* margin: 16px 0; */
}
.artistModal .form1 .artistGroup .artistGroup-input {
  display: flex;
  align-items: center;
  gap: 12px;
}
.artistModal .form1 .artistGroup .artistGroup-input .ant-select {
  width: 190px;
}
.artistModal .form1 .artistGroup .artistGroup-input > div:last-child {
  display: flex;
  flex: 1 1;
}
.artistModal .form1 .artistGroup button {
  min-width: 80px;
  height: 40px;
  border-radius: 4px;
}
.artistModal .form1 .member {
}
.artistModal .form1 .member .memberList {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.8%;
  margin-top: 8px;
}
.artistModal .form1 .member .memberList > div {
  display: flex;
  flex-direction: column;
  width: 16%;
  gap: 8px;
}
.artistModal .form1 .member .memberList > div .ant-upload-wrapper,
.artistModal .form1 .member .memberList > div .ant-upload-wrapper {
  width: 100%;
  height: 110px;
  border-radius: 8px;
  border: 1px dashed #e21dfd;
  background-color: #fcf7fd;
  color: #c49bcc;
  overflow: hidden;
}
.artistModal .form1 .member .memberList > div .ant-upload-wrapper:has(.imageContainer) {
  border-color: transparent;
}
.artistModal .form1 .member .memberList > div .ant-upload-wrapper .imageContainer img:not(.iconStyle) {
  width: 100%;
  height: 110px;
  object-fit: cover;
  transition: 0.3s;
}
.artistModal .form1 .member .memberList > div .ant-upload-wrapper .imageContainer:hover img:not(.iconStyle) {
  filter: brightness(0.7);
}
.artistModal .form1 .member .memberList > div .iconStyle {
  position: absolute;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 1;
  opacity: 0;
  transition: 0.3s;
  cursor: pointer;
}
.artistModal .form1 .member .memberList > div .iconStyle.iconExpand {
  left: 20px !important;
}
.artistModal .form1 .member .memberList > div .iconStyle.iconChange {
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}
.artistModal .form1 .member .memberList > div .iconStyle.iconTrash {
  right: 20px !important;
}
.artistModal .form1 .member .memberList > div .memberName {
  display: flex;
  width: 100%;
  padding: 8px;
  border-radius: 30px;
  border: 1px solid #ccc;
}
.artistModal .form1 .member .memberList > div .memberName:hover,
.artistModal .form1 .member .memberList > div .memberName:hover * {
  background-color: #f4f5f7;
}
.artistModal .form1 .member .memberList > div .memberName input {
  width: 100%;
  outline: none;
  border: none;
  font-size: 13px;
  font-weight: 600;
}
.artistModal .form2 {
  margin-top: 20px;
  gap: 16px;
  display: flex;
  flex-direction: column;
}

.artistModal .form2 button {
  width: min-content;
}

.artistModal .form2 .ant-form-item:not(.ant-form-item-horizontal) .ant-form-item-label {
  padding-bottom: 8px;
  line-height: 1;
  font-size: 12px;
  /* margin: 0 !important;*/
}
.artistModal .form2 > div:last-child {
  /* margin-top: 16px; */
}
.artistModal .form1 .member .memberList > div:first-child .memberName {
  border-radius: 50px;
}
/*신고팝업*/
/* #requestBad .ant-form-item-label {
  margin-bottom: 8px !important;
} */
/*차단 팝업 제어 하다가 전체 제어 함*/

.ant-form-item-label > label {
  padding-bottom: 0 !important;
  margin-bottom: 8px !important;
}
.ant-form-item-label:has(> label) {
  padding-bottom: 0 !important;
  margin-bottom: 0px !important;
}

/* 추가 요청대로 첫번째 리더는 삭제 기능 막고 왕관 아이콘으로 변경 */
.artistModal .form1 .member .memberList > div:first-child .memberName input + span {
  display: inline-block;
  width: 18px;
  height: 18px;
  font-size: 0;
  background: url(../../static/media/i-leader.6f38f876a1936c2dbeea.svg) no-repeat center;
  color: transparent;
  pointer-events: none;
}
.artistModal .ant-modal-footer button {
  width: 100px;
  height: 32px;
  border-radius: 4px;
}
.iconT.artist:before {
  background-position: left -5px center;
  background-size: 124%;
}
/* 아티스트 등록 신규 추가 부분 */
.artistModal .form2 .newArea {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
}
.artistModal .form2 .newArea > div {
  display: flex;
  flex-direction: column;
}
.artistModal .form2 .newArea > div label {
  font-size: 12px;
}
.artistModal .form2 .newArea > div .planInfo {
  display: flex;
  align-items: center;
  gap: 12px;
}
.artistModal .form2 .newArea > div .planInfo button {
  width: 133px;
  padding: 8px 24px;
  border-radius: 24px;
  background: linear-gradient(to right, #ca79fc 0%, #ff5eb6 100%);
  font-size: 13px;
  font-weight: bold;
  color: #fff;
}
.artistModal .form2 .newArea > div .planInfo button::after {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url(../../static/media/i-arrowCircleW.6649e16e1f8186e3658f.svg) no-repeat center;
}
.artistModal .form2 .newArea .btn-dark {
  width: 157px;
  height: 40px;
}

.artistModal .ant-modal-body .btnArea {
  margin-top: 24px;
}
@media (max-width: 700px) {
  .artistModal {
    width: 100% !important;
    max-width: none !important;
    height: 100vh !important;
    top: 0;
    margin: 0 !important;
    padding: 0 !important;
  }
  .artistModal .ant-modal-content {
    border-radius: 0;
  }
  .artistModal .ant-modal-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 54px;
  }
  .artistModal .ant-modal-close {
    position: fixed;
    z-index: 2;
  }
  .artistModal .ant-modal-body {
    padding: 0 16px 30px 16px !important;
    margin-top: 54px;
    /* height: calc(100vh - 54px); */
    overflow: scroll;
  }
  .artistModal .form1 .mainOpt {
    flex-direction: column;
    justify-content: start;
  }
  .artistModal .form1 .mainOpt .mainOpt-left .group + div,
  .artistModal .form1 .mainOpt .mainOpt-left .group {
    flex-direction: column;
    gap: 16px;
    display: flex;
  }

  .artistModal .form1 .mainOpt .mainOpt-left .gerneSel {
    gap: 0;
  }
  .artistModal .form1 .mainOpt .mainOpt-left .gerneSel > div {
    flex-wrap: wrap;
  }

  .artistModal .form1 .mainOpt .mainOpt-left .gerneSel > div {
    flex-wrap: wrap;
  }
  .artistModal .form1 .mainOpt .mainOpt-left .gerneSel > div .ant-select,
  .artistModal .form1 .mainOpt .mainOpt-left .gerneSel > div .ant-form-item {
    width: 100% !important;
  }
  .artistModal .form1 .mainOpt .mainOpt-left .gerneSel > div .tabBox {
    width: 100%;
    margin-top: 10px;
  }
  .artistModal .form1 .mainOpt .mainOpt-right#artistProfile .plusBox {
    width: 100%;
    height: 100%;
    aspect-ratio: auto 1 / 1;
  }
  .artistModal .form1 .artistGroup > div:first-child {
    flex-wrap: wrap;
  }
  .artistModal .form1 .artistGroup .artistGroup-input {
    gap: 8px;
    flex-direction: column;
  }
  .artistModal .form1 .artistGroup .artistGroup-input > div {
    width: 100%;
  }
  .artistModal .form1 .artistGroup .artistGroup-input .ant-select {
    width: 100%;
  }
  .artistModal .form1 .artistGroup .artistGroup-input > div:last-child {
    width: 100%;
  }
  .artistModal .form1 .artistGroup .artistGroup-input > div div {
    width: 100%;
  }
  .artistModal .form1 .member .memberList {
    flex-wrap: wrap;
    justify-content: space-between;
    gap: initial;
    row-gap: 5vw;
  }
  .artistModal .form1 .member .memberList > div {
    width: 40vw;
  }
  .artistModal .form1 .member .memberList > div .ant-upload-wrapper {
    height: 40vw;
    border-radius: 8px;
  }
  .artistModal .form1 .member .memberList > div .ant-upload-wrapper .imageContainer img:not(.iconStyle) {
    height: 40vw;
  }
  .artistModal .form2 .btn-dark {
    width: 100%;
  }
  /* 아티스트 등록 신규 추가 부분 */
  .artistModal .form2 .newArea {
    flex-direction: column;
    align-items: start;
  }
  .artistModal .form2 .newArea > div {
    width: 100%;
  }
  .artistModal .form2 .newArea > div .planInfo {
    width: 100%;
    justify-content: space-between;
  }
  .artistModal .form2 .newArea .btn-dark {
    width: 100%;
    margin-top: 35px;
  }
  .artistModal .ant-modal-body .btnArea {
    margin-top: 20px;
  }
}
/* 차단된 유저 */
.rankingArea .modal {
}
.rankingArea .modal .aui-grid-paging-panel {
  display: none !important;
}
.rankingArea .modal .aui-grid-renderer-base {
  text-align: left !important;
}
/* .rankingArea .modal .aui-grid-default-header,
.rankingArea .aui-grid .aui-grid-default-header:hover, */
.rankingArea .aui-grid .aui-grid-info-layer:has(.aui-grid-nodata-msg-layer) {
  background-color: #fff;
}

/* Width/Height 입력 필드 숨기기 */
.se-dialog.sun-editor-common > div.se-dialog-inner > div.se-dialog-content.se-dialog-image > form > div._se_tab_content._se_tab_content_image > div > div:nth-child(3) {
  display: none !important;
}
/* 대체 문자열 숨김 */
.sun-editor-common > div.se-dialog-inner > div.se-dialog-content.se-dialog-image > form > div._se_tab_content._se_tab_content_image > div > div:nth-child(2) {
  display: none !important;
}
/* Insert description 입력 필드 숨기기 */
.sun-editor-common > div.se-dialog-inner > div.se-dialog-content.se-dialog-image > form > div._se_tab_content._se_tab_content_image > div > div.se-dialog-form.se-dialog-form-footer {
  display: none !important;
}
/* 이미지, 링크 선택 tab 필드 숨기기 */
.sun-editor-common > div.se-dialog-inner > div.se-dialog-content.se-dialog-image > div.se-dialog-tabs {
  display: none !important;
}
/*
.sun-editor-common > div.se-dialog-inner > div.se-dialog-content.se-dialog-image > div.se-dialog-tabs > button._se_tab_link {
    display: none !important;
}

.sun-editor-common > div.se-dialog-inner > div.se-dialog-content.se-dialog-image > div.se-dialog-tabs > button._se_tab_link.active {
    display: none !important;
}
*/
/* 이미지 주소 입력 필드 숨기기 */
.sun-editor-common > div.se-dialog-inner > div.se-dialog-content.se-dialog-image > form > div._se_tab_content._se_tab_content_image > div > div:nth-child(1) > div:nth-child(2) {
  display: none !important;
}
.sun-editor-editable p {
  margin: 0px !important;
}
.toastui-editor-popup-add-link .toastui-editor-popup-body,
.toastui-editor-popup-add-image .toastui-editor-popup-body:has(.toastui-editor-tabs) {
  padding: 20px;
}
.toastui-editor-contents del {
  color: #222;
}
.edit .toastui-editor .toastui-editor-contents h1,
.edit .toastui-editor .ProseMirror h1,
.edit .toastui-editor .toastui-editor-contents h2,
.edit .toastui-editor .ProseMirror h2 {
  border: 0 !important;
}
.toastui-editor-defaultUI-toolbar {
  background-color: #f7f7f8;
  padding: 0 0px;
}
.toastui-editor-toolbar-divider {
  margin: 14px 4px;
}
.toastui-editor-defaultUI .ProseMirror {
  padding: 8px 12px;
}
.edit .toastui-editor-contents strong,
.edit .toastui-editor-md-container .toastui-editor-md-preview strong,
.edit .ProseMirror strong,
.edit .toast-ui-viewer strong,
.edit .toast-ui-content strong,
.edit .toast-ui-content b {
  font-weight: 700 !important;
  font-family: inherit;
  letter-spacing: 0.3px;
  text-shadow: inherit;
}
.toastui-editor-popup-add-image .toastui-editor-tabs .tab-item.active {
  color: #0e0e1f;
  border-bottom: 2px solid #b041f3;
}
.toastui-editor-popup-add-image .toastui-editor-tabs .tab-item:hover {
  border-bottom: 2px solid transparent;
  color: #0e0e1f;
  background: #eee;
  border-radius: 4px;
}
.toastui-editor-popup-add-image .toastui-editor-tabs {
  display: flex;
  padding: 0;
  margin: 0;
  align-items: flex-start;
  gap: 10px;
  align-self: stretch;
}
.toastui-editor-popup-add-image .toastui-editor-tabs .tab-item {
  width: min-content;
  font-size: 18px;
  text-wrap-mode: nowrap;
  display: flex;
  padding: 8px 12px;
  justify-content: center;
  align-items: center;
  gap: 16px;
  line-height: 1;
  height: auto;
  color: #ccc;
  border-color: transparent;
}
.toastui-editor-popup-body .toastui-editor-button-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  flex-direction: row-reverse;
  gap: 8px;
}
.toastui-editor-defaultUI .toastui-editor-ok-button {
  min-width: 63px;
  height: 32px;
  background-color: transparent;
  color: #fff;
  outline-color: transparent;
  border-radius: 4px;
  background: linear-gradient(90deg, #b041f3 0%, #ec15ff 100%);
}
.toastui-editor-popup-body input[type='text'] {
  display: flex;
  height: 40px;
  padding: 8px 12px;
  align-items: center;
  gap: 10px;
  flex: 1 0;
  width: 100%;
}
.toastui-editor-popup-body input[type='text']:focus {
  outline-color: #ec15ff;
}
.toastui-editor-popup-add-image .toastui-editor-popup-body > div > div:has(> .toastui-editor-file-select-button) {
  display: flex !important
;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.toastui-editor-popup-add-image .toastui-editor-popup-body > div > div:has(> .toastui-editor-file-select-button) label {
  width: 100%;
}
.toastui-editor-popup-add-image .toastui-editor-popup-body > div > div:has(> .toastui-editor-file-select-button) .toastui-editor-file-name {
  width: calc(100% - 86px) !important;
  height: 40px;
  padding: 4px 12px;
  font-size: 16px;
}
.toastui-editor-popup-add-image .toastui-editor-popup-body > div > div:has(> .toastui-editor-file-select-button) button {
  width: 74px;
  height: 40px;
  margin: 0;
  border-radius: 4px;
  background: #525162;
  color: #fff;
  border: 1px solid transparent;
}
.toastui-editor-toolbar-icons {
  background: url(../../static/media/editorBu.91120b909efed6752661.png) no-repeat;
  background-size: 466px 150px;
}
.toastui-editor-toolbar-icons.color {
  background: url(../../static/media/ediorColor.539e9039531b465d7506.svg) no-repeat;
  background-size: 23px 112px;
  background-position: 3px 3px;
}
.toastui-editor-toolbar-icons.color:not(:disabled).active {
  background-position-y: -22px;
}
.toastui-editor-toolbar-icons:not(:disabled).active {
  background-position-y: -26px;
}
.toastui-editor-popup-add-heading ul li:hover {
  background-color: #fcf7fd;
}
.toastui-editor-defaultUI-toolbar button:not(:disabled):hover {
  border: 1px solid #e4e7ee;
  background-color: #fff !important;
}
.toastui-editor-ww-container .toastui-editor-contents p {
  margin: 4px 0;
  line-height: 1.3;
}
.write .toastui-editor-contents h2,
.write .toastui-editor-md-container .toastui-editor-md-preview h2,
.write .ProseMirror h2,
.write .toast-ui-viewer h2,
.write .toast-ui-content h2 {
  border-bottom-color: transparent !important;
}
.toastui-editor-contents h1,
.toastui-editor-contents h2,
.toastui-editor-contents h3,
.toastui-editor-contents h4,
.toastui-editor-contents h5,
.toastui-editor-contents h6,
.toastui-editor-md-container .toastui-editor-md-preview h1,
.toastui-editor-md-container .toastui-editor-md-preview h2,
.toastui-editor-md-container .toastui-editor-md-preview h3,
.toastui-editor-md-container .toastui-editor-md-preview h4,
.toastui-editor-md-container .toastui-editor-md-preview h5,
.toastui-editor-md-container .toastui-editor-md-preview h6,
.ProseMirror h1,
.ProseMirror h2,
.ProseMirror h3,
.ProseMirror h4,
.ProseMirror h5,
.ProseMirror h6,
.toast-ui-viewer h1,
.toast-ui-viewer h2,
.toast-ui-viewer h3,
.toast-ui-viewer h4,
.toast-ui-viewer h5,
.toast-ui-viewer h6,
.toast-ui-content h1,
.toast-ui-content h2,
.toast-ui-content h3,
.toast-ui-content h4,
.toast-ui-content h5,
.toast-ui-content h6 {
  margin: 16px 0 8px;
}




section:nth-child(1) > div > div > div.ant-comment.css-dev-only-do-not-override-14i19y2 > div {
  margin-left: 0px !important;
  margin-bottom: -40px !important;
}
/*
section > div > div > div.ant-list.ant-list-split.box.css-dev-only-do-not-override-14i19y2 > div > div > ul > div > div > div.ant-comment-nested > div > div > div *,
section > div > div > div.ant-list.ant-list-split.box.css-dev-only-do-not-override-14i19y2 > div > div > ul > div > div > div.ant-comment-nested div {
    *background-color: transparent !important;
}
*/

div.ant-list.ant-list-split.box.css-dev-only-do-not-override-14i19y2 > div > div > ul > div:nth-child(n) > div > div.ant-comment-inner {
  margin-left: 0px !important;
}

.ant-avatar {
  margin-left: 20px;
}

.comment-name {
  width: auto;
  height: 19px;
  flex-grow: 0;
  font-family: Pretendard;
  font-size: 16px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: -0.32px;
  text-align: left;
  margin-right: 10px;
  color: #0e0e1f;
}
.comment-date {
  text-align: left;
  margin-left: 10px;
  color: #6d6c75;
  font-size: 11px;
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
  letter-spacing: -0.05px;
}
.ant-comment-inner {
  /* margin-left: 20px; */
}
.reply {
  width: auto;
  height: 30px;
  flex-grow: 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 24px;
  border: solid 1px #3e3d53;
  cursor: pointer;
}
.comment-input {
  height: 48px;
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 4px;
  border: solid 1px #e2dfe4;
  background-color: #f7f7f8;
}

.more-select {
  position: absolute;
  top: 55%;
  right: 32px;
  min-width: 80px;
  height: 73px;
  flex-grow: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 4px;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
  border: solid 1px #c718e2;
  background-color: #fff;
  z-index: 10;
}
.more-select > ul {
  width: 100%;
}
.more-select > ul > li {
  cursor: pointer;
  height: 32px;
  align-self: stretch;
  flex-grow: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 4px;
  background-color: #fff;
  width: 100%;
}
.more-select > ul > li:hover {
  background-color: #f5f5f5;
  border-radius: 4px;
}
.more-select > ul > li > span {
  width: 23px;
  height: 16px;
  flex-grow: 0;
  font-family: Pretendard;
  font-size: 13px;
  font-weight: 400;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  color: #000;
}

#root
  > section
  > section:nth-child(n)
  > div
  > div
  > div.ant-list.ant-list-split.box.css-dev-only-do-not-override-14i19y2
  > div
  > div
  > ul
  > div:nth-child(n)
  > div
  > div.ant-comment-nested
  > div
  > div:nth-child(n)
  > div
  > div.ant-comment-inner {
  margin-top: 5px;
  height: auto;
  align-self: stretch;
  flex-grow: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  gap: 12px;
  border-bottom-left-radius: 75px !important;
  background-color: rgba(255, 255, 255, 0.7);
}

#root > section > section:nth-child(n) > div > div > div.ant-list.ant-list-split.box.css-dev-only-do-not-override-14i19y2 > div > div > ul > div:nth-child(n) > div > div.ant-comment-nested > div {
  margin-top: 5px;
  margin-left: -25px;
  height: auto;
  align-self: stretch;
  flex-grow: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  gap: 12px;
  border-bottom-left-radius: 75px !important;
  background-color: white;
}

.comment-input {
  width: 90%;
  height: auto;
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 4px;
  border: solid 1px #e2dfe4;
  background-color: #f7f7f8;
}
.comment-btn {
  width: 73px;
  height: 48px;
  margin-left: 12px;
  align-self: stretch;
  flex-grow: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 12px;
  padding: 0;
  background-color: #a3a1a7;
  color: #fff;
}

#boardDetail {
  padding: 40px 16px;
  margin: auto;
  max-width: 992px;
}

#boardDetail.edit {
  max-width: 1518px;
}

#boardDetail form {
  margin-bottom: 20px;
}
.content-container.view p {
  font-size: 16px;
  font-weight: 400;
}
#boardDetail .ant-form-item {
  margin: 0;
}

#boardDetail .ant-form-item.btnArea {
  border-top: 1px solid #ddd;
  padding-top: 24px;
}
#boardDetail .ant-form-item .ant-form-item-label label {
  margin-bottom: 8px;
}

/* 타이틀 */
#boardDetail .titleBox {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 0;
}
#boardDetail .titleBox .cate {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.75px;
  color: #939ca7;
}
#boardDetail .titleBox .titleArea {
  display: flex;
  justify-content: space-between;
  min-height: 48px;
}
#boardDetail .titleBox .titleArea h2 {
  font-size: 40px;
  font-weight: bold;
  line-height: 1.2;
  letter-spacing: -2px;
  color: #0e0e1f;
}
#boardDetail .titleBox .titleArea .name {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  width: 100%;
  gap: 20px;
  padding: 0;
  font-weight: 400;
  font-size: 14px;
  color: #0e0e1f;
}
#boardDetail .titleBox .titleArea .name .view b {
  font-weight: 500;
  padding-left: 4px;
}
#boardDetail .titleBox .titleArea .name .like-button-container {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 8px;
  padding: 0;
}
#boardDetail .titleBox .titleArea .name .like-button-container button {
  width: auto;
}
#boardDetail .titleBox .infoArea {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 14px;
  color: #0e0e1f;
}
#boardDetail .titleBox .infoArea .like-button-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  line-height: 1;
}
#boardDetail .titleBox .infoArea .like-button-container button {
  width: fit-content;
}
#boardDetail .titleBox .infoArea .like-button-container .ant-btn-icon span {
  width: 13px;
}
#boardDetail .titleBox .infoArea * {
  height: auto;
  padding: 0;
}
#boardDetail .titleBox .infoArea .view b {
  font-weight: 400 !important;
  margin-left: 4px;
}
/* 프로필 */
#boardDetail .userBox {
  display: flex;
  flex-wrap: wrap;
  column-gap: 24px;
  row-gap: 12px;
  width: 100%;
  padding: 20px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
#boardDetail .userBox .userIcon .ant-avatar {
  margin: 0;
  width: 48px;
  height: 48px;
}
#boardDetail .userBox .userInfo {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
#boardDetail .userBox .userInfo .name {
  display: flex;
  align-items: center;
  gap: 8px;
}
#boardDetail .userBox .userInfo .name p {
  font-size: 16px;
  line-height: 1;
}
#boardDetail .userBox .userInfo .info-container {
  display: flex;
}
#boardDetail .userBox .userInfo .ranking_s {
  /* min-width: 0; */
  /* margin-right: 10px; */
}
#boardDetail .userBox .userInfo .dropdown-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  position: relative;
  width: auto;
  align-items: center;
}
#boardDetail .userBox .userInfo .dropdown-button {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0 2px;
  border-radius: 8px;
  background-color: white;
  cursor: pointer;
  height: 70%;
  gap: 4px;
}
#boardDetail .userBox .userInfo .dropdown-content {
  position: absolute;
  top: 120%;
  left: -12px;
  width: 100%;
  background-color: white;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  padding: 2px;
  z-index: 10;
  border: 1px solid #c718e2;
}

#boardDetail .userBox .userInfo .dropdown-content > div.ranking_s::before {
  padding-left: 18px;
}

#boardDetail .userBox .userInfo .dropdown-content > div {
  padding: 8px 12px;
  height: 32px;
  min-width: 0;
  min-width: initial;
}
#boardDetail .userBox .userInfo .dropdown-content > div:hover {
  background-color: #f5f5f5;
  border-radius: 4px;
}
#boardDetail .userBox .userInfo .dropdown-content > div.ranking_s::after {
  display: none;
}
#boardDetail .userBox .userInfo .dropdown-item {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  cursor: pointer;
  padding: 0;
}
#boardDetail .userBox .userInfo .name .star-rating {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  width: auto;
}
#boardDetail .userBox .userInfo .name .star-rating .anticon-star {
  font-size: 16px;
  color: #ccc;
}
#boardDetail .userBox .aiArea {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  font-weight: 600;
  color: #8790a3;
}
#boardDetail .userBox .aiArea .majorModel {
  padding: 0;
  width: auto;
}
#boardDetail .button-group {
  display: flex;
  gap: 16px;
  justify-content: center;
}
#boardDetail .document-container.view {
  height: auto;
  min-height: 450px;
  /* max-height: 800px; */
  /* overflow-y: auto; */
  padding: 40px 0;
  /* border-radius: 2px;*/
  font-size: 16px;
  color: #4a4b50;
  line-height: 1.6;
}
#boardDetail .file-attachment {
  display: flex;
  flex-direction: column;
  justify-content: start;
  gap: 12px;
  padding: 12px 0 16px;
  border-top: solid 1px rgba(0, 0, 0, 0.1);
  border-bottom: solid 1px rgba(0, 0, 0, 0.1);
}
#boardDetail .file-attachment .file-title {
  font-size: 12px;
  font-weight: bold;
  color: #464548;
}
#boardDetail .file-attachment .file-list {
  display: flex;
  flex-direction: column;
  justify-content: start;
  list-style: none;
  width: 100%;
  gap: 12px;
}
#boardDetail .file-attachment .file-list .file-list {
  display: flex;
  flex-direction: column;
  justify-content: start;
}
#boardDetail .file-attachment .file-list .file-item {
  overflow: hidden;
  text-overflow: ellipsis;
}
#boardDetail .file-attachment .file-list .file-item button {
  width: 100%;
}
#boardDetail .file-attachment .file-list .file-item span {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-break: break-all;
}
#boardDetail .file-attachment .file-item button {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  padding: 0;
  border: 0;
  box-shadow: none;
  height: 24px;
  gap: 12px;
}
#boardDetail .file-attachment .file-item button::before {
  content: '';
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  width: 24px;
  height: 24px;
  background: #fff url(../../static/media/btn-down.9ac546731f6a587c7618.svg) no-repeat center;
  border-radius: 100%;
  border: 1px solid #a3a1a7;
}
#boardDetail .file-attachment .content-container {
  height: auto;
  min-height: 450px;
  max-height: 800px;
  overflow-y: auto;
  padding: 8px;
  border-radius: 2px;
}

#boardDetail .ant-form-item .ant-form-item-label > label {
  color: #464548;
  font-size: 12px;
}
#boardDetail .ant-upload-wrapper .ant-upload-drag .ant-upload-btn {
  border-radius: 4px;
  border: 1px dashed #e21dfd;
  background: #fcf7fd;
}

/* 다시 체크할 영역 - 드롭박스 등 노출되지 않는 부분 끝  */

/* 게시글 */
#boardDetail .contentBox {
  padding: 40px 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
#boardDetail .contentBox .content {
  min-height: 250px;
  padding: 0;
}
#boardDetail .contentBox .content p img {
}
#boardDetail .contentBox .content .sun-editor-editable {
}
#boardDetail .contentBox .content-btn {
  display: flex;
  justify-content: center;
}

/* 에디터 */
#boardDetail .l-form {
  padding: 30px 0;
}
#boardDetail .l-form .l-form__title {
  max-height: 18px;
}

/* 버튼 */
#boardDetail .buttonBox {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 0;
}
#boardDetail .buttonBox button {
  min-width: 100px;
}
#boardDetail .buttonBox button span {
  /* padding-top: 2px; */
}
/* 반응형 */
@media (max-width: 700px) {
  #boardDetail {
    padding: 20px 16px;
  }
  #boardDetail .titleBox {
    gap: 10px;
  }
  #boardDetail .titleBox .cate {
    font-size: 14px;
  }
  #boardDetail .titleBox .titleArea h2 {
    font-size: 23px;
    line-height: 1.5;
  }
  #boardDetail .userBox {
    gap: 10px;
    padding: 10px 0;
  }
  #boardDetail .userBox .userIcon .ant-avatar {
    width: 38px;
    height: 38px;
  }
  #boardDetail .userBox .userInfo .name {
    gap: 5px;
  }
  #boardDetail .userBox .userInfo .name p {
    font-size: 14px;
  }
  #boardDetail .ant-btn-default.btn-dark {
    min-width: 100px;
    height: 40px;
  }
  #boardDetail .userBox .userInfo .dropdown-content {
    /* height: 32px; */
  }
  #boardDetail .titleBox .titleArea {
    min-height: 35px;
  }
}

/* 댓글 */
#boardDetail .comment-system {
  display: flex;
  flex-direction: column;
  justify-content: start;
  gap: 16px;
}
#boardDetail .comment-system .write {
  display: flex;
  flex-direction: column;
  justify-content: start;
  gap: 12px;
  padding: 16px 0 24px;
}
#boardDetail .comment-system .write .ant-comment .ant-comment-content {
  margin: 0;
}
#boardDetail .comment-system h2 {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  color: #0e0e1f;
  font-size: 32px;
  font-weight: 700;
  line-height: 100%; /* 32px */
  padding: 12px 0 16px;
}
#boardDetail .comment-system h3 {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  color: #0e0e1f;
  letter-spacing: 0.3px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.4px;
}
#boardDetail .ant-comment .ant-comment-inner {
  display: flex;
  padding-block: 0;
  padding: 16px 0 0;
}

#boardDetail .comment-system .ant-comment .repleWriteArea {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  gap: 12px;
  max-height: 48px;
}
.userPage #boardDetail .comment-system .ant-comment .ant-btn-default.btn-gray2,
.ant-comment-nested .repleWriteArea button {
  min-width: 72px;
}
#boardDetail .comment-system .ant-comment .repleWriteArea * {
  height: 48px;
}
#boardDetail .comment-system .ant-comment .repleWriteArea span {
  display: flex;
  justify-content: center;
  align-items: center;
}
#boardDetail .comment-system .ant-comment .repleWriteArea textarea {
  padding-top: 12px;
}
#boardDetail .comment-system .ant-comment-nested {
  margin-inline-start: 0;
  display: flex;
  flex-direction: column;
  justify-content: start;
  /* gap: 12px; */
}
#boardDetail .comment-system .ant-comment-nested .repleBox {
  border: 0;
  padding: 12px 0 0;
}
#boardDetail .comment-system .ant-comment-nested .repleBox + .repleBox {
  padding: 0;
  border-top: 1px dashed rgba(0, 0, 0, 0.1);
}
#boardDetail .comment-system .ant-comment-nested .repleWrite {
  height: auto;
  align-self: stretch;
  flex-grow: 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  padding: 12px 8px 8px;
  border-radius: 8px;
  background: #f9f9f9;
  gap: 8px;
}
#boardDetail .comment-system .ant-comment-nested .repleWrite .ant-input {
  background: #fff;
}
#boardDetail .comment-system .ant-comment-nested .repleBox .ant-comment {
  display: flex;
  flex-direction: column;
  justify-content: start;
  padding: 8px 0 0;
  background-color: #f3f3f3;
  /* border-radius: 70px 16px 16px 72px; */
  margin: 0;
  /* gap: 12px; */
  width: 100%;
}
#boardDetail .comment-system .ant-comment-nested .repleBox:has(.repleBox .ant-comment) {
  padding: 8px 0 0;
}
#boardDetail .comment-system .ant-comment-nested .repleBox .ant-comment .ant-comment-inner {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  align-items: flex-start;
  gap: 36px;
  width: 100%;
  padding: 0 8px;
}
#boardDetail .comment-system .ant-comment-nested .repleBox > .ant-comment .ant-comment-nested .repleBox {
  /* border-top: 1px solid #ececee; */
  border-top: 1px dashed rgba(0, 0, 0, 0.1);
  border-bottom: none;
}
/*  #boardDetail .comment-system .ant-comment-nested .repleBox .ant-comment .ant-comment-inner .ant-comment-nested:has(div) {
  border-top: 1px solid #ececee;
} */
#boardDetail .comment-system .ant-comment-nested .repleBox .ant-comment .ant-comment-inner .ant-comment-content {
  display: flex;
  flex-direction: column;
  justify-content: start;
  width: 100%;
  /* padding-left: 72px; */
  padding-bottom: 8px;
}
#boardDetail .comment-system .ant-comment-nested .repleBox .ant-comment .ant-comment-inner .ant-comment-content-author,
#boardDetail .comment-system .ant-comment-nested .repleBox .ant-comment .ant-comment-inner .ant-comment-content-author-name {
  width: 100%;
}
#boardDetail .comment-system .ant-comment-nested .repleBox .ant-comment .ant-comment-inner .ant-comment-content-author .box,
#boardDetail .comment-system .ant-comment-nested .repleBox .ant-comment .ant-comment-inner .ant-comment-content-author-name .box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
#boardDetail .comment-system .ant-comment-nested .repleBox .ant-comment .ant-comment-inner .ant-comment-content-author .box .btnArea,
#boardDetail .comment-system .ant-comment-nested .repleBox .ant-comment .ant-comment-inner .ant-comment-content-author-name .box .btnArea {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  /* padding-right: 16px; */
}
#boardDetail .comment-system .ant-comment-nested .repleBox .ant-comment .ant-comment-inner .ant-comment-content-author .box .btn-lineR,
#boardDetail .comment-system .ant-comment-nested .repleBox .ant-comment .ant-comment-inner .ant-comment-content-author-name .box .btn-lineR {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  font-size: 14px;
  height: 40px;
  min-width: 100px;
  font-weight: 500;
  line-height: 1;
  border-radius: 4px;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  border: 1px solid #3e3d53;
  color: #3e3d53;
  border-radius: 24px;
  background: inherit;
  height: 32px;
  padding: 8px 12px;
  min-width: 44px;
  cursor: pointer;
}
#boardDetail .comment-system .ant-comment-nested .repleBox .ant-comment .ant-comment-inner .ant-comment-content-author .box .btn-lineR:hover,
#boardDetail .comment-system .ant-comment-nested .repleBox .ant-comment .ant-comment-inner .ant-comment-content-author-name .box .btn-lineR:hover {
  box-shadow: inset 0 0 0 200px rgba(0, 0, 0, 0.2);
  border-color: transparent;
  outline: rgba(255, 94, 182, 0.7);
  border: 1px solid transparent;
}

#boardDetail .comment-system .ant-comment-content-detail {
  padding: 8px 0;
}
#boardDetail .comment-system .ant-comment-content-detail .rereWrite {
  display: flex;
  gap: 12px;
}
#boardDetail .comment-system .ant-comment-content-detail p {
  line-height: 1.3;
  font-size: 13px;
}
#boardDetail .comment-system .ant-comment-nested .repleBox .ant-comment .ant-comment-inner .ant-comment-content .rereWrite,
#boardDetail .comment-system .ant-comment-nested .repleBox .ant-comment .ant-comment-inner .ant-comment-content .rereWrite {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  align-items: stretch;
}
#boardDetail .comment-system .repleBox {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding: 12px 0;
  flex-direction: column;
  align-items: flex-start;
  /* gap: 12px; */
  align-self: stretch;
}
#boardDetail .comment-system .repleBox:only-child {
  border: 0;
}
#boardDetail .comment-system .ant-spin-container .ant-list-items > .repleBox > .ant-comment > .ant-comment-inner > .ant-comment-content > .ant-comment-content-author {
  padding-right: 8px;
}
#boardDetail .comment-system .ant-spin-container .ant-list-items > .repleBox > .ant-comment > .ant-comment-nested > .repleWrite {
  background: #fff;
  padding: 12px 0 8px;
}
#boardDetail .comment-system .ant-spin-container .ant-list-items > .repleBox > .ant-comment > .ant-comment-nested > .repleWrite > .ant-input {
  background: #f7f7f8;
}
#boardDetail .comment-system .repleBox .ant-comment {
  display: flex;
  flex-direction: column;
  justify-content: start;
  /* padding: 0 0 8px; */
  /* background-color: #ececee; */
  /* border-radius: 72px 72px 16px 72px; */
  margin: 0;
  gap: 0;
}
#boardDetail .comment-system .repleBox .ant-comment .ant-comment-inner {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
}
#boardDetail .comment-system .repleBox .ant-comment .ant-comment-inner .ant-comment-content {
  display: flex;
  flex-direction: column;
  justify-content: start;
  width: 100%;
  gap: 8px;
}
#boardDetail .comment-system .repleBox .ant-comment .ant-comment-inner .ant-comment-content .ant-comment-content-author,
#boardDetail .comment-system .repleBox .ant-comment .ant-comment-inner .ant-comment-content .ant-comment-content-author-name {
  width: 100%;
}
#boardDetail .comment-system .repleBox .ant-comment .ant-comment-inner .ant-comment-content .ant-comment-content-author .box,
#boardDetail .comment-system .repleBox .ant-comment .ant-comment-inner .ant-comment-content .ant-comment-content-author-name .box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
#boardDetail .comment-system .repleBox .ant-comment .ant-comment-inner .ant-comment-content .ant-comment-content-author .box .info,
#boardDetail .comment-system .repleBox .ant-comment .ant-comment-inner .ant-comment-content .ant-comment-content-author-name .box .info {
  display: flex;
  flex-direction: column;
  justify-content: start;
  gap: 4px;
}
#boardDetail .comment-system .repleBox .ant-comment .ant-comment-inner .ant-comment-content .ant-comment-content-author .box .info .comment-name,
#boardDetail .comment-system .repleBox .ant-comment .ant-comment-inner .ant-comment-content .ant-comment-content-author-name .box .info .comment-name {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  justify-content: start;
  /* height: 32px; */
  padding: 0;
  /* text-decoration: underline; */
}
#boardDetail .comment-system .repleBox .ant-comment .ant-comment-inner .ant-comment-content .ant-comment-content-author .box .info .comment-date,
#boardDetail .comment-system .repleBox .ant-comment .ant-comment-inner .ant-comment-content .ant-comment-content-author-name .box .info .comment-date {
  margin-left: 0;
}
#boardDetail .comment-system .repleBox .ant-comment .ant-comment-inner .ant-comment-content .ant-comment-content-author .box .btnArea,
#boardDetail .comment-system .repleBox .ant-comment .ant-comment-inner .ant-comment-content .ant-comment-content-author-name .box .btnArea {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 4px;
  position: absolute;
  right: 0;
}
#boardDetail .comment-system .repleBox .ant-comment-content .btn-lineR,
#boardDetail .comment-system .repleBox .ant-comment .ant-comment-inner .ant-comment-content .ant-comment-content-author-name .box .btn-lineR {
  line-height: 1;
  border-radius: 4px;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  border: 1px solid #c4c3c7;

  background: inherit;
  height: 32px;
  padding: 8px;
  min-width: 44px;
  cursor: pointer;
  font-size: 13px;
  gap: 4px;
  display: flex;
  flex-direction: row;
}
#boardDetail .comment-system .repleBox .ant-comment .ant-comment-inner .ant-comment-content .ant-comment-content-author-name .box .btn-lineR,
#boardDetail .comment-system .repleBox .ant-comment-content .btn-lineR {
  color: #0e0e1f;
}
#boardDetail .comment-system .repleBox .ant-comment .ant-comment-inner .ant-comment-content .ant-comment-content-author-name .box .btn-lineR.btn-dark,
#boardDetail .comment-system .repleBox .ant-comment-content .btn-lineR.btn-dark {
  color: #fff;
}
#boardDetail .comment-system .repleBox .ant-comment-content .btn-lineR:before {
  height: 14px;
}
#boardDetail .comment-system .repleBox .ant-comment .ant-comment-inner .ant-comment-content .ant-comment-content-author .box .btn-lineR:hover,
#boardDetail .comment-system .repleBox .ant-comment .ant-comment-inner .ant-comment-content .ant-comment-content-author-name .box .btn-lineR:hover {
  box-shadow: inset 0 0 0 200px rgba(0, 0, 0, 0.2);
  border-color: transparent;
  outline: rgba(255, 94, 182, 0.7);
}
#boardDetail .comment-system .repleBox .ant-list .ant-list * {
  outline: none;
  font-size: 12px;
}
#boardDetail .ant-comment-inner .ant-comment-content .ant-comment-content-author .box .btnArea .info,
#boardDetail #boardDetail .comment-system .repleBox .ant-comment .ant-comment-inner .ant-comment-content .ant-comment-content-author-name .box .info {
  gap: 0;
}
#boardDetail .ant-comment-inner .ant-comment-content .ant-comment-content-author .box .btnArea .btnArea,
#boardDetail #boardDetail .comment-system .repleBox .ant-comment .ant-comment-inner .ant-comment-content .ant-comment-content-author-name .box .btnArea {
  padding-right: 0 !important;
}
#boardDetail .ant-comment .ant-comment-content-author > a,
#boardDetail .ant-comment .ant-comment-content-author > span {
  padding-inline-end: 0;
}
#boardDetail .repleBox .ant-comment-inner {
  display: flex;
  padding-block: 0;
}
#boardDetail .repleBox .ant-comment-avatar .ant-avatar {
  margin-left: 0;
  width: 32px;
  height: 32px;
}
#boardDetail .repleBox .ant-comment-avatar .ant-avatar img {
  width: 32px;
  height: 32px;
}
#boardDetail .repleBox .ant-comment-avatar + .ant-comment-content {
  gap: 12px;
}
#boardDetail .ant-avatar {
  background: #e4e4e7;
}
#boardDetail .ant-comment .ant-comment-avatar {
  margin-inline-end: 0px;
  margin-top: 4px;
}
#boardDetail .ant-comment .ant-comment-content {
  gap: 12px;
}
#boardDetail textarea.ant-input:focus {
  background: #fff;
}
#boardDetail textarea.ant-input:focus + button {
  background: linear-gradient(90deg, #b041f3 0%, #ec15ff 100%);
}
#boardDetail .ant-form-item-control-input-content .write {
  justify-content: flex-start;
}
.mypageSection .ant-form {
  width: 100%;
}
.ant-select-single.ant-select-show-arrow .ant-select-selection-item,
.ant-select-single.ant-select-show-arrow .ant-select-selection-search,
.ant-select-single.ant-select-show-arrow .ant-select-selection-placeholder {
  padding-inline-end: 20px;
  color: #000;
}
.ant-btn-text:not(:disabled):not(.ant-btn-disabled):hover {
  background: none !important;
  background-color: none !important;
}

/* 댓글 반응형 */
@media (max-width: 700px) {
  #boardDetail .view *,
  #boardDetail .ant-form-item.ant-form-item-has-success .ant-form-item-control-input-content {
    font-size: 14px;
  }
  .button-group {
    display: flex;
    flex-direction: row;
    gap: 12px;
    justify-content: center;
  }
  .button-group button {
    height: 40px;
  }
  #boardDetail .comment-system .repleBox .ant-comment .ant-comment-inner .ant-comment-content .ant-comment-content-author .box .btnArea,
  #boardDetail .comment-system .repleBox .ant-comment .ant-comment-inner .ant-comment-content .ant-comment-content-author-name .box .btnArea {
    padding-right: 0;
  }
  #boardDetail .repleBox .ant-comment-nested div {
    gap: 0;
  }
  #boardDetail .comment-system .repleBox .ant-comment .ant-comment-inner {
    position: relative;
    gap: 8px;
  }
  #boardDetail .repleBox .ant-comment-avatar .ant-avatar {
    width: 30px;
    height: 30px;
  }
  #boardDetail .comment-system .repleBox .ant-comment .ant-comment-inner .ant-comment-content {
    width: 100%;
  }
  #boardDetail .comment-system .write {
    padding: 16px 0 30px;
  }
  /* #boardDetail .comment-system .repleBox .ant-comment .ant-comment-inner .ant-comment-content .ant-comment-content-author-name .box .info {
    position: relative;
    flex: 1;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
  }
  #boardDetail .repleBox .ant-comment .comment-date {
    flex-direction: column;
    gap: 0;
    align-items: end;
  }
  #boardDetail .repleBox .ant-comment .comment-date .fromTo {
    order: 1;
  }
  #boardDetail .ant-comment .ant-comment-avatar {
    position: absolute;
  }
  #boardDetail .comment-name {
    margin-right: 0;
  }
  #boardDetail .comment-system .repleBox .ant-comment .ant-comment-inner:has(.ant-comment-avatar) .ant-comment-content .ant-comment-content-author-name .box {
    padding-left: 10px;
    margin-left: 30px;
  }
  #boardDetail .comment-system .ant-comment-nested .repleBox .ant-comment .ant-comment-inner .ant-comment-content {
    gap: 12px;
    padding-left: 0;
  }
  #boardDetail .answer.btn-lineR {
    position: absolute;
    bottom: 0;
    right: 0;
    min-width: 0;
    width: 30px;
    padding: 0;
    white-space: nowrap;
  }
  #boardDetail .ant-comment-content-detail {
    min-height: 30px;
  }
  #boardDetail .comment-system .ant-comment-nested .repleWrite {
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    border-radius: 30px 0 0 0;
  }
  #boardDetail .comment-system .ant-comment-nested .repleBox .ant-comment .ant-comment-inner + .ant-comment-nested .repleWrite {
    flex-direction: column;
    gap: 10px;
    padding: 0;
  }
  #boardDetail .ant-btn-default.btn-gray2 {
    margin-left: auto;
  } 
  .more-select {
    right: 0;
  }
  */
  #boardDetail .comment-system .repleBox .ant-comment-content .btn-lineR,
  #boardDetail .comment-system .repleBox .ant-comment .ant-comment-inner .ant-comment-content .ant-comment-content-author-name .box .btn-lineR {
    height: 22px;
    padding: 4px;
    font-size: 12px;
  }
  #boardDetail .comment-system .repleBox .ant-comment .ant-comment-inner .ant-comment-content .ant-comment-content-author-name .box .btn-lineR.btn-edit,
  #boardDetail .comment-system .repleBox .ant-comment .ant-comment-inner .ant-comment-content .ant-comment-content-author-name .box .btn-lineR.btn-del {
    min-width: 0;
    min-width: initial;
    gap: initial;
    font-size: 0;
  }
  #boardDetail .comment-system .repleBox .ant-comment .ant-comment-inner .ant-comment-content .ant-comment-content-author-name .box .btn-lineR.btn-edit::before,
  #boardDetail .comment-system .repleBox .ant-comment .ant-comment-inner .ant-comment-content .ant-comment-content-author-name .box .btn-lineR.btn-del::before {
    width: 14px;
    height: 14px;
  }
}

.profileBackArea {
  height: 320px;
  flex-grow: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 10px;
  padding: 0 150px;
  background-color: #fff;
  color: white;

  background-image: var(--background-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.profileArea {
  width: 400px;
  height: 260px;
  display: flex;
  margin-top: 30px;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  border-radius: 16px;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  position: relative;
  font-family: 'Pretendard, sans-serif';
}

.profileImage {
  position: absolute;
  top: 15px;
  left: 15px;
  width: 110px;
  height: 110px;
  border-radius: 20%;
  object-fit: cover;
  margin-bottom: 8px;
  background-color: white;
}

.proBadge {
  position: absolute;
  top: 15px;
  left: 145px;
  display: inline-block;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: bold;
  color: white;
  background-color: #ff69b4;
  border-radius: 12px;
}

.socialIcons {
  position: absolute;
  top: 15px;
  right: 15px;
  display: flex;
  gap: 10px;
}

.socialIcons .icon {
  font-size: 18px;
}

.nickName {
  position: absolute;
  left: 145px;
  margin-top: 28px;
  font-size: 28px;
  font-weight: bold;
}

.joinDate {
  position: absolute;
  left: 145px;
  font-size: 12px;
  margin-top: 60px;
  margin-bottom: 15px;
}

.profileInfoContainer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-top: 120px;
}

.statsColumn {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background-color: white;
  padding: 10px;
  border-radius: 8px;
  width: 50%;
  font-size: 16px;
  box-sizing: border-box;
  color: black;
}

.statItem {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
}

.statIcon {
  font-size: 22px;
}

.scoreSummary {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  width: 50%;
  font-size: 14px;
  padding: 10px;
  box-sizing: border-box;
  color: white;
}

.followerCount {
  margin-bottom: 10px;
}

.scoreContainer {
  display: flex;
  align-items: center;
  gap: 5px;
}

.scoreText {
  font-size: 12px;
  color: gray;
}

.filterBox {
  height: 76px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 16px;
  padding: 20px 190px;
  border-top: solid 2px #000;
  background-image: linear-gradient(to top, #f3f3f3, #eee), linear-gradient(to bottom, #f3f3f3, #f3f3f3);
}

/* span {
    width: 28px;
    height: 19px;
    flex-grow: 0;
    font-family: Pretendard;
    font-size: 16px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: -0.32px;
    text-align: left;
    color: #0e0e1f;
} */
.filterVector {
  width: 9px;
  height: 10px;
}

.type {
  height: 36px;
  align-self: stretch;
  flex-grow: 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 40px;
  padding: 0;
}

.filterBox .type ul {
  display: flex;
  flex-wrap: nowrap;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 10px;
}

.filterBox .type ul li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  margin-right: 35px;
  height: 17px;
  flex-grow: 0;
  font-family: Pretendard;
  font-size: 14px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: justify;
  color: #000;
}

.filterBox .type ul li input {
  width: 20px;
  height: 20px;
  flex-grow: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
  padding: 0;
  border-radius: 50px;
  border-style: solid;
  border-width: 6px;
  border-image-source: linear-gradient(to right, #b041f3 0%, #ec15ff 100%);
  border-image-slice: 1;
  background-image: linear-gradient(to bottom, #fff, #fff), linear-gradient(to right, #b041f3 0%, #ec15ff 100%);
  background-origin: border-box;
  background-clip: content-box, border-box;
}

.thumBox_Best {
  height: auto;
  align-self: stretch;
  flex-grow: 0;
  align-items: center;
  gap: 28px;
  padding: 0 48px;
}

.password-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2px;
}

.password-dots .dot {
  width: 8px;
  height: 8px;
  background-color: black;
  border-radius: 50%;
}

#myHome #pinkBtn:first-child {
  width: 32px;
  height: 32px;
  border-radius: 100%;
}

#myHome #pinkBtn:last-child {
  width: 81px;
  height: 28px;
  border-radius: 24px;
  font-size: 14px;
  font-weight: 700;
}
#myHome #pinkBtn:first-child img {
  width: 18px;
}


#myHome #whiteBtn {
  width: 85px;
  height: 28px;
  border-radius: 50px;
  border: 1px solid #3e3d53;
  color: #3e3d53;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

#myHome #whiteBtn div {
  width: auto;
  position: relative;
}

#myHome #whiteBtn div img.activeImg {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 2;
  transition: all 0.2s ease-in-out;
}

#whiteBtn:hover img.activeImg {
  opacity: 1;
}

#whiteBtn:hover {
  background: #3e3d53;
  color: #ffffff;
}

/* Ai등록모달 등록영역 */
.modal .modalAi {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 80vh;
  border-radius: 8px;
  padding: 20px 24px;
  background-color: #fff;
  gap: 8px;
  display: flex;
  flex-direction: column;
}
.modalAi .modalAi__headerArea {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 24px;
  font-weight: 700;
}
.modalAi .modalAi__wrap {
  height: 100%;
  overflow: scroll;
  gap: 12px;
  display: flex;
  flex-direction: column;
}
.modalAi .modalAi__addArea {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 12px;
  border-radius: 16px;
  background-color: rgba(0, 0, 0, 0.05);
}
.modalAi .modalAi__addArea p {
  font-size: 16px;
  color: #464548;
}
.modalAi .modalAi__addArea button {
  width: 120px;
  border-radius: 24px;
  padding: 12px;
}
.modalAi .modalAi__addArea button.btn-reset {
  border: 1px solid #aaa;
  background: #fff;
}
.modalAi .modalAi__addArea .optBox {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid #c2b8cb;
  background-color: #fff;
  box-shadow: 0px 4px 0px 0px rgba(0, 0, 0, 0.05);
}
/* Ai등록모달 정보 */
.modalAi .modalAi__addArea .optBox .optBox_model {
  display: flex;
  align-items: center;
}
.modalAi .modalAi__addArea .optBox .optBox_model p {
  min-width: 100px;
}
.modalAi .modalAi__addArea .optBox .optBox_model .ant-select {
 max-width: 70%;
}
.modalAi .modalAi__addArea .optBox .optBox_info > * {
  display: block;
}
.modalAi .modalAi__addArea .optBox .optBox_info > .screenshot {
  width: 100%;
  height: 155px;
  border-radius: 10px;
  background: url(../../static/media/example01_PC.f7cd09b33e6fece3774b.jpg) no-repeat center;
  background-size: cover;
}
/* Ai등록모달 등록영역 스크린샷 이미지첨부 */
.modalAi .modalAi__addArea .optBox .add form div {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  width: 100%;
  height: 124px;
  border-radius: 4px;
  background-color: #f3f3f3;
}
.modalAi .modalAi__addArea .optBox .add form div span {
  border: 0 !important;
}
/* Ai등록모달 등록영역 멤버십 기간 및 프로필 링크 */
.modalAi .modalAi__addArea .optBox ul {
  display: flex;
  justify-content: space-between;
}
.modalAi .modalAi__addArea .optBox ul li {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.modalAi .modalAi__addArea .optBox ul li:nth-of-type(2) .c-red {
  padding-right: 30px;
}
.modalAi .modalAi__addArea .optBox ul li .datepicker {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.modalAi .modalAi__addArea .optBox ul li .datepicker .ant-picker {
  flex: 1 1;
}
.modalAi .modalAi__addArea .optBox ul li .screenshot {
  width: 100%;
  height: 155px;
  border-radius: 10px;
  background: url(../../static/media/example02_PC.ac570b7e5e7f7ef2f8bd.jpg) no-repeat center;
  background-size: cover;
}
.modalAi .modalAi__addArea .btnBox {
  display: flex;
  justify-content: center;
  gap: 24px;
  width: 100%;
  padding: 0;
}
/* Ai등록모달 그리드영역  */
.modalAi .modalAi__girdArea .searchBox {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
}
.modalAi .modalAi__girdArea .searchBox button {
  width: 40px;
  height: 40px;
  border-radius: 4px;
}
.modalAi .modalAi__girdArea .searchBox .select {
  margin-left: auto;
}
.modalAi .modalAi__girdArea .searchBox .select > div {
  width: 120px;
}
/* 반응형 */
@media (max-width: 700px) {
  .modal .modalAi {
    width: 100%;
    height: 100%;
    border-radius: 0;
    padding: 0 16px 30px 16px;
  }
  .modalAi .modalAi__headerArea {
    position: fixed;
    top: 0;
    left: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    width: 100%;
    height: 116px;
    padding: 18px 16px;
    font-size: 26px;
  }
  .modalAi .modalAi__wrap {
    margin-top: 116px;
    overflow-x: hidden;
    overflow-y: scroll;
  }
  .modalAi .modalAi__headerArea p {
    order: 2;
  }
  .modalAi .modalAi__headerArea button {
    order: 1;
    align-self: flex-end;
    padding: 0;
  }
   .modalAi .modalAi__addArea p {
    font-size: 14px;
   }
  .modalAi .modalAi__addArea b, 
  .modalAi .modalAi__addArea span {
    font-size: 12px;
  } 
  .modalAi .modalAi__addArea .optBox .optBox_model {
    flex-direction: column;
    align-items: start;
    gap: 5px;
  }
  .modalAi .modalAi__addArea .optBox .optBox_model p {
    min-width: 0;
  }
  .modalAi .modalAi__addArea .optBox .optBox_model .ant-select {
    max-width: 100%;
  }
  .modalAi .modalAi__addArea .optBox .optBox_info {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
  .modalAi .modalAi__addArea .optBox .optBox_info > b span {
    display: none;
  }
  .modalAi .modalAi__addArea .optBox .optBox_info > .screenshot {
    height: 230px;
    background: url(../../static/media/example01_M.2274e81136eb3a5a36a0.jpg) no-repeat center;
    background-size: cover;
  }
  .modalAi .modalAi__addArea .optBox ul {
    flex-direction: column;
    gap: 10px;
  }
  .modalAi .modalAi__addArea .optBox ul li {
    gap: 2px;
  }
  .modalAi .modalAi__addArea .optBox ul li:nth-of-type(2) .c-red {
    padding-right: 0;
  }
  .modalAi .modalAi__addArea .optBox ul li .datepicker {
    flex-direction: row;
  }
   .modalAi .modalAi__addArea .optBox ul li .c-red span {
    display: none;
   }
   .modalAi .modalAi__addArea .optBox ul li .screenshot {
    height: 420px;
    background: url(../../static/media/example02_M.196ace9afae91f7560e9.jpg) no-repeat center;
    background-size: cover;
   }
   .modalAi .modalAi__addArea .btnBox {
    padding-bottom: 0 !important;
   }
  .modalAi__girdArea {
    margin-top: 20px;
  }
  .modalAi .modalAi__girdArea .searchBox {
    justify-content: start;
    flex-wrap: wrap;
    column-gap: 5px;
    row-gap: 12px;
    padding: 0;
    margin-bottom: 20px;
  }
  .modalAi .modalAi__girdArea .searchBox .ant-picker {
    width: calc(51% - 40px);
  }
  .modalAi .modalAi__girdArea .searchBox .select {
    width: 100%;
    margin-left: 0;
  }
  .modalAi .modalAi__girdArea .searchBox .select > div {
    width: 100%;
  }
  body:has(.modalAi) .ant-tooltip .ant-tooltip-inner {
    min-height: auto;
    padding: 4px;
    font-size: 10px;
    max-width: 345px !important;
  }
  /* design.css 영향 받는 부분 */
  #myPage .ant-select-outlined:not(.ant-select-customize-input) .ant-select-selector,
  #myPage .ant-select-single {
    height: auto;
  }
  /* 그리드 영역 */
  .modalAi .aui-grid-default-header .aui-grid-renderer-base {
    font-size: 13px;
  }
  .modalAi .aui-grid-default-column .aui-grid-renderer-base {
    font-size: 11px;
  }
  .modalAi .aui-grid-default-column .certStat {
    width: auto;
    font-size: 10px;
  }
}

/* 팔로우 리스트 모달, followBox를 부모로 삼음 */
.modalFol {
  position: absolute;
  top: 100%;
  /* left: 0; */
  z-index: 1;
}
.modalFol .modal-content {
  display: flex;
  flex-direction: column;
  width: 400px;
  padding: 16px 24px 12px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  background-color: #fff;
}
.modalFol .modal-content .title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.modalFol .modal-content .title h2 {
  font-size: 20px;
  font-weight: 700;
}

/* .modalFol .modal-content .aui-grid-header-panel {
  display: none;
} */
.followBox .modal-content .data {
  max-height: 320px;
  overflow-y: auto;
  border-top: 2px solid #000;
}
.followBox .modal-content .data .aui-grid-body-panel {
  top: 0 !important;
}
.followBox .modal-content .data .aui-grid-default-column {
  text-align: left;
}
.followBox .modal-content .data .aui-grid-default-column > div > div {
  width: 100%;
  cursor: pointer;
}
.certStat {
  display: flex;
  padding: 4px 8px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 50px;
  background-color: #ccc;
  width: 76px;
  color: #fff;
}
.state01 {
  background-color: #525162;
}
.state02 {
  background-color: #0fc9f3;
}
.state91 {
  background-color: #f8c930;
}
.state99 {
  background-color: #fe393c;
}

/* 반응형 */
@media (max-width: 700px) {
  /* 팔로워 확인 모달 */
  .modalFol {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100vw !important;
    height: 100vh;
  }
  #myHome .top .rsWrapper:has(.modalFol) {
    z-index: 1000;
  }
  .modalFol .modal-content {
    width: 100%;
    height: 100%;
    border-radius: 0;
    box-shadow: none;
    box-shadow: initial;
  }
  .modalFol .modal-content .title {
    flex-direction: column;
    align-items: start;
    gap: 10px;
    padding: 0 !important;
    margin-bottom: 12px;
  }
  .modalFol .modal-content .title h2 {
    order: 2;
    font-size: 26px;
  }
  .modalFol .modal-content .title img {
    order: 1;
    align-self: end;
  }
  .modalFol .modal-content .data {
    max-height: calc(100dvh - 100px);
  }
}

/*================================
문의 게시글
================================*/
#inquiryDetail {
  width: 100%;
  padding: 15px 20px;
  border-radius: 16px;
  background-color: #fff;
}
/* 타이틀 */
#inquiryDetail .titleBox {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 0;
}
#inquiryDetail .titleBox .cate {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.75px;
  color: #939ca7;
}
#inquiryDetail .titleBox .title {
  font-size: 40px;
  font-weight: bold;
  line-height: 1.2;
  letter-spacing: -2px;
  color: #0e0e1f;
}
#inquiryDetail .titleBox .date {
  flex-grow: 0;
  font-size: 14px;
  color: #0e0e1f;
}

/* 프로필 */
#inquiryDetail .userBox {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 24px;
  row-gap: 8px;
  padding: 20px 0;
}
#inquiryDetail .userBox .userIcon {
  align-self: flex-start;
  overflow: hidden;
  width: 48px;
  height: 48px;
  border-radius: 50%;
}
#inquiryDetail .userBox .userIcon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#inquiryDetail .userBox .userIcon p {
  font-size: 40px;
  color: #ffffff;
}
#inquiryDetail .userBox .userInfo {
  flex: 1 1;
}
#inquiryDetail .userBox .userInfo {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#inquiryDetail .userBox .userInfo .userInfo-top {
  display: flex;
  align-items: center;
  gap: 8px;
}
#inquiryDetail .userBox .userInfo .userInfo-top .badge {
  max-width: 50px;
  max-height: 22px;
  font-size: 11px;
}
#inquiryDetail .userBox .userInfo .userInfo-top .name {
  font-size: 16px;
  font-weight: 600;
  color: #0e0e1f;
}
#inquiryDetail .userBox .userInfo .userInfo-center {
  display: flex;
  justify-content: space-between;
}
#inquiryDetail .userBox .userInfo .userInfo-center .aiArea {
  flex: 1 1;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  color: #8790a3;
}
#inquiryDetail .userBox .userInfo .userInfo-center .aiArea .majorModel {
  padding: 0;
}
#inquiryDetail .userBox .userInfo .userInfo-bottom {
  position: relative;
  display: flex;
}

#inquiryDetail .userBox .userInfo .userInfo-bottom .ranking {
  display: flex;
}
#inquiryDetail .userBox .userInfo .userInfo-bottom .ranking > img {
  width: 14px;
}
#inquiryDetail .userBox .userInfo .userInfo-bottom .ranking p {
  font-size: 13px;
}
#inquiryDetail .userBox .userInfo .userInfo-bottom .ranking::after {
  width: 16px;
  height: 16px;
  background-size: 11px;
}
#inquiryDetail .userBox .userInfo .userInfo-bottom .profileStar {
  display: flex;
}
#inquiryDetail .userBox .userInfo .userInfo-bottom .profileStar img {
  width: 16px;
  vertical-align: middle;
  object-fit: contain;
}
#inquiryDetail .userBox .userInfo .userInfo-bottom .profileStar .emptyStar {
  filter: grayscale(1);
}
#inquiryDetail .userBox .userInfo .userInfo-bottom .profileToggle {
  position: absolute;
  top: 100%;
  z-index: 10;
  width: 100px;
  padding: 2px;
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid #c718e2;
  background: #ffffff;
}
#inquiryDetail .userBox .userInfo .userInfo-bottom .profileToggle li {
  gap: 5px;
  padding: 5px 8px;
}
#inquiryDetail .userBox .aiArea {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  color: #8790a3;
  font-size: 12px;
}
#inquiryDetail .userBox .aiArea .majorModel {
  width: auto;
  padding: 0;
}
#inquiryDetail .userBox .aiArea .majorModel span {
  font-size: 12px;
  padding: 3px 5px;
  margin-right: 2px;
}
/* 첨부파일 */
#inquiryDetail .fileBox {
  padding: 12px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
#inquiryDetail .fileBox p {
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 12px;
}
#inquiryDetail .fileBox ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#inquiryDetail .fileBox li {
  font-size: 14px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  width: 100%;
}
#inquiryDetail .fileBox li span.anticon-arrow-down {
  display: flex;
  width: 24px;
  height: 24px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  border-radius: 24px;
  border: 1px solid #a3a1a7;
  background: #fff;
}

/* 댓글 */
.answerBox {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 16px;
  border-radius: 10px;
  background-color: rgba(62, 61, 83, 0.1);
  color: #0e0e1f;
}
.answerBox .info .name {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.32px;
  text-decoration: underline;
}
.answerBox .info .date {
  padding: 12px 0;
  font-size: 12px;
  color: #6d6c75;
  text-decoration: none;
}
.answerBox .cont {
  font-size: 14px;
}

/* 버튼 */
#inquiryDetail .buttonBox {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.mypageSection .btnArea button {
  display: flex;
}
#inquiryDetail .buttonBox .btn-edit::before {
  background: url(../../static/media/i-edit2.a905e3331189d34ef775.svg) no-repeat center;
}
/* 수정 예정 영역 */
#inquiryDetail .answerCreate .create p {
  font-size: 16px;
  font-weight: 600;
  color: #0e0e1f;
  margin: 0 0 12px;
}
.answerCreate .create div #greyBtn {
  width: 73px;
  height: 120px;
  font-size: 14px;
  border-radius: 4px;
}
.answerCreate .create div .input::placeholder {
  color: #a3a1a7;
}
.answerCreate .create div .input {
  width: calc(100% - 73px - 12px);
  height: 120px;
  border-radius: 4px;
  background: #f4f5f7;
  padding: 16px 12px;
  background: #f4f5f7;
  resize: none;
  border: none;
  box-shadow: none;
}
.answerCreate .create div .input:focus {
  border: 1px solid #b041f3;
  background: #ffffff;
}

/* 반응형*/
@media (max-width: 700px) {
  #inquiryDetail .titleBox {
    gap: 10px;
  }
  #inquiryDetail .titleBox .cate {
    font-size: 14px;
  }
  #inquiryDetail .titleBox .title {
    font-size: 23px;
    line-height: 1.5;
  }
  #inquiryDetail .titleBox .date {
    font-size: 12px;
  }
  /* 프로필 */
  #inquiryDetail .userBox {
    padding-top: 10px;
    column-gap: 10px;
    row-gap: 4px;
  }
  #inquiryDetail .userBox .userIcon {
    width: 40px;
    height: 40px;
  }
  #inquiryDetail .userBox .userInfo {
    gap: 0;
  }
  #inquiryDetail .userBox .userInfo .userInfo-top .badge {
    margin-right: 5px;
    font-size: 10px;
  }
  #inquiryDetail .userBox .userInfo .userInfo-top .name {
    font-size: 14px;
  }
  #inquiryDetail .userBox .userInfo .userInfo-center p {
    color: #8790a3;
  }
  #inquiryDetail .userBox .userInfo .userInfo-bottom .ranking {
    font-size: 12px;
  }
  /* 댓글 */
  .answerBox {
    gap: 10px;
  }
  .answerBox .info {
    display: flex;
    justify-content: space-between;
  }
  .answerBox .info .date {
    padding: 0;
  }
}

/*================================
문의작성 탭
================================*/
/* 레이아웃 */
.l-form {
  display: flex;
  gap: 24px;
}
.l-form__title {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 180px;
  font-size: 16px;
  font-weight: 700;
  color: #3e3d53;
  text-wrap-mode: nowrap;
}
.l-form__title img {
  vertical-align: text-top;
  height: 18px;
  margin-top: -2px;
}
.l-form__list .ant-form-item .ant-form-item-label {
  line-height: 1;
}
.l-form__list {
  flex: 1 1;
  gap: 30px;
  display: flex;
  flex-direction: column;
}
.l-form__list li label {
  font-size: 12px !important;
  color: #464548 !important;
}
.l-form__list li .ant-select {
  max-width: 380px;
}
.l-form__list .ant-upload-drag-container {
  min-height: 100px;
}
.l-form__list .ant-form-item .ant-form-item-label > label.ant-form-item-required:not(.ant-form-item-required-mark-optional)::before {
  display: none;
}
/* 개인정보 수집 관련 */
.privacy {
  display: flex;
  align-items: center;
  justify-content: center;
  /* gap: 10px; */
  width: 100%;
  margin: 30px 0;
}
.privacy h3,
.privacy a {
  font-size: 24px;
  font-weight: 500;
  color: #3e3d53;
}
.privacy a {
  /* padding-left: 5px; */
}
.privacy a span {
  text-decoration: underline;
}
.privacy ~ div button:disabled {
  background: #dfdce4;
  color: #a29fab;
}
.mypageSection .l-form .plusBannerBox {
  display: flex;
  width: 100%;
  height: 120px;
}
.privacy h3,
.privacy a {
  font-size: 16px;
}
.mypageSection .ant-form-item {
  margin-bottom: 0;
  width: 100%;
}
.mypageSection .btnArea {
  margin-bottom: 20px;
}
.mypageSection .l-form .plusBannerBox {
  min-height: 0;
}
/* design.css 영향받는 부분 안보이게 처리 */
.mypageSection .ant-divider-horizontal.ant-divider-with-text::before {
  display: none;
}
/* 반응형 */
@media (max-width: 700px) {
  .mypageSection .ant-form:has(.l-form) {
    margin: 0;
  }
  .l-form {
    flex-direction: column;
    width: 100%;
  }
  .l-form__title {
    gap: 8px;
    /* padding-bottom: 30px; */
  }
  .l-form__title img {
    vertical-align: middle;
  }
  .l-form__list li .ant-select {
    max-width: 100%;
  }
  .l-form__list .ant-upload-drag-container p {
    display: none;
  }

  .privacy {
    margin: 30px 0;
  }
  .privacy h3,
  .privacy a {
    font-size: 16px;
  }
  /* .ant-divider-horizontal {
    margin: 0;
  } */
  .btnArea button {
    display: flex;
    width: 100%;
    gap: 12px;
  }
}
/*================================
문의내역 탭
================================*/
.answer-none {
  display: inline-block;
  padding: 4px 9px;
  border: 1px solid #525162;
  border-radius: 50px;
  color: #525162;
  font-size: 11px;
  font-weight: 600;
}
.answer-done {
  display: inline-block;
  padding: 4px 9px;
  border: 1px solid #0fc9f3;
  border-radius: 50px;
  color: #0d88d4;
  font-size: 11px;
  font-weight: 600;
}
/* AuiGrid  */
.mypageSection .aui-grid .aui-grid-header-renderer {
  font-weight: 500;
  color: #323146;
}
.mypageSection .aui-grid-link-renderer {
  text-align: left;
}
.mypageSection .aui-grid-link-renderer > a {
  text-decoration: none;
  font-size: 16px;
  color: #464548;
}
.mypageSection .aui-grid-default-column .date {
  font-size: 13px;
}
.mypageSection .aui-grid-default-column:has(.title) {
  text-align: left;
}
.mypageSection .aui-grid-default-column:has(.title) span {
  font-size: 16px;
}
/* 반응형 */
@media (max-width: 700px) {
  .answer-none,
  .answer-done {
    height: 21px;
    font-size: 11px;
  }
  /* Ant Custom */
  .mypageSection .ant-layout-header {
    flex-wrap: wrap;
    gap: 8px;
  }
  .mypageSection .flexGap .ant-select {
    width: 80px !important;
    font-size: 12px;
  }
  .mypageSection .flexGap .ant-select .ant-select-selector {
    padding: 4px 4px 4px 7px;
  }
  .mypageSection .flexGap .ant-select .ant-select-arrow {
    margin-top: -12px;
    width: 20px;
    height: 20px;
  }
  .mypageSection .ant-layout-header > div:nth-of-type(1) {
    order: 2;
    width: 100%;
  }
  .mypageSection .ant-layout-header > div:nth-of-type(1) .ant-picker {
    flex: 1 1;
  }
  .mypageSection .ant-layout-header > div:nth-of-type(2) {
    order: 1;
    width: 100%;
    margin-left: 0 !important;
  }
  .mypageSection .ant-picker-input > input,
  .mypageSection .ant-select-selector,
  body:has(.mypageSection) .ant-select-dropdown .ant-select-item {
    font-size: 12px;
  }
  body:has(.mypageSection) .ant-picker-dropdown {
    font-size: 12px;
  }
  body:has(.mypageSection) .ant-picker-dropdown .ant-picker-cell {
    padding: 3px 0;
  }
  body:has(.mypageSection) .ant-picker-dropdown .ant-picker-content th {
    height: 20px;
  }
  body:has(.mypageSection) .ant-picker-dropdown .ant-picker-panel-container .ant-picker-panels {
    display: flex;
    flex-direction: column;
  }
  body:has(.mypageSection) .ant-picker-dropdown .ant-picker-date-panel {
    width: 270px;
  }
  body:has(.mypageSection) .ant-picker-dropdown .ant-picker-date-panel .ant-picker-body {
    padding: 10px;
  }

  /* AuiGrid */
  .mypageSection .aui-grid .aui-grid-header-renderer {
    font-size: 13px;
  }
  .mypageSection .aui-grid-link-renderer > a {
    font-size: 14px;
  }
  .mypageSection .aui-grid-default-column .date {
    font-size: 10px;
  }
  .mypageSection .aui-grid-default-column:has(.title) span {
    font-size: 14px;
  }
}

input {font-size:16px !important;}

#admin .selected {
  background: #fdf2ff;
}
#admin .dragging {
  background: #f4f5f7;
}

#admin .dropHover {
  background: #86748f !important;
}

#admin div .searchBox {
  padding: 16px 0;
  margin: 4px 0 0;
  border-bottom: 1px solid #dfdce4;
}

#admin div .searchBox .leftBox,
#admin div .searchBox .rightBox {
  width: auto;
  gap: 8px;
}

#admin div .searchBox .rightBox .select,
#admin div .searchBox .leftBox .select {
  width: 120px;
  height: 40px;
  margin: 0 8px 0 0;
}

#admin div .searchBox .rightBox .select .ant-select-selector,
#admin div .searchBox .leftBox .select .ant-select-selector {
  width: 120px;
  height: 40px;
  background: #f4f5f7;
  border: 1px solid #dfdce4;
}

#admin div .searchBox .leftBox .search {
  width: 400px;
  height: 40px;
  border-radius: 4px;
  border: 1px solid #efecf1;
  background: #f4f5f7;
  padding: 8px 12px;
}

#admin div .searchBox .leftBox .search img {
  width: 20px;
  margin: 0 8px 0 0;
  cursor: pointer;
}

#admin div .searchBox .leftBox .search .input {
  box-shadow: none;
  background: transparent;
  border: none;
}

#admin div .searchBox .rightBox #logoutBtn {
  width: auto;
  height: 40px;
  padding: 4px 12px;
  border-radius: 4px;

  /* margin: 0 8px 0 0; */
}
#admin div .searchBox .rightBox #logoutBtn:hover {
  border: 1px solid transparent;
}
#admin div .searchBox .rightBox #logoutBtn div img {
  width: 18px;
}

#admin div .searchBox .rightBox #logoutBtn .text {
  font-size: 14px;
  margin: 0;
}

#admin div .searchBox .rightBox .listBtn {
  width: 84px;
  /* border: 1px solid #f3f3f3; */
  border-radius: 3px;
  background: #f3f3f3;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  border: 1px solid #dfdce4;
}

/* #admin div .searchBox .rightBox .listBtn:hover {
  background: #ffffff;
} */

#admin div .searchBox .rightBox .listBtn .btn#active {
  background: #ffffff;
}

#admin div .searchBox .rightBox .listBtn .btn {
  width: 40px;
  height: 40px;
}

#admin div .searchBox .rightBox .listBtn .btn:first-child {
  border-right: 1px solid #f3f3f3;
}

#admin div .searchBox .rightBox .listBtn .btn p {
  font-size: 18px;
}

#admin div .searchBox .rightBox .listBtn .btn img {
  width: 18px;
}

#admin div .searchBox .rightBox .listBtn .btn:nth-child(2):hover img,
#admin div .searchBox .rightBox .listBtn .btn:nth-child(2)#active img {
  content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACkAAAApCAYAAACoYAD2AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAIESURBVHgB7VjbTQJBFJ1dCF8E1z8SAm4HQgeUQAdiBWgFYgVgBWIHWIFQgWsHE+CDP1fCJw/PGDS7w5nFyJKsyZyEjDn33pmT4L1nGCEsLLIFh5GVSqWey+U6Or/ZbD5Wq1V/Pp/LKO8BxWKx67rumV6z3W6fp9PpUOdrtdoNlktyRjCbzR6iXF4Q5PP5HjZv6jxEiEKhoIRcR/lSqdTG0mF7OY7TwhIT6QMQ02P56gyEx1LK4IcT6cD7Y4wC31asJi2RJ4UVmRb+hUja3WpsoCvPsXospnPoyIGaBvj4ZLu+TqBzJUbQE/5s6jGcK5fLZSAsLDIM6t07L66zGHx1xHjl9/in32s0uIfUvV6hXC77sF//N/lUZLVaHeDAKxaD595DaFfLbyP/UXAEk8mkESXgzR72eTfkq2nROOjdSLpI2GAvBoG+MIN9I4l+br37VLAi0wIVCQ8eJ9S87W3iuqOEfObDIT7SkB9iNMVijiHx64rPeHU5MOSrjvSOzVciURIKC4sMgzYObs13WLqGmlt4cey2jSaow4tfBGkETIoBHgeuyRmvglumXCwWjRD4JugIghc3hRns1aElDH6Mvdo6t5sc9JalwvoNzDpOWrAi0wIVqZ74TAWGWJKNSXEk6AhS3bder5sshnfLIfNWlLRQ45H8IPpT4FA+ELL3TAuLLOETSLHNIyWVKHYAAAAASUVORK5CYII=);
}

#admin div div .list {
  min-height: 50vh;
  justify-content: start;
}
#admin div div .list > div {
  padding: 12px 8px;
  border-bottom: 1px solid #f2f2f2;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

#admin div div .list > div:hover {
  background: #f4f5f7;
}

#admin div div .list .checkbox {
  width: 20px;
  margin: 0 38px 0 0;
}

#admin div div .list .thumbnail {
  width: 64px;
  height: 36px;
  border-radius: 8px;
  background: #f2f2f2;
  overflow: hidden;
  margin: 0 16px 0 0;
}

#admin div div .list .thumbnail img {
  max-width: 100%;
  height: 100%;
}

#admin div div .list .thumbnail img.icon {
  width: 24px;
  height: auto;
}

#admin div div .list .title {
  /* width: calc(100% - 20px - 38px - 64px - 16px - 300px - 73px - 20px - 40px - 190px - 48px); */
  flex: 1 1;
  max-width: 818px;
  margin-right: auto;
  color: #000;
  color: initial;
  font-weight: normal;
  font-weight: initial;
  font-size: medium;
  font-size: initial;
}

#admin div div .list .title h1 {
  width: 100%;
  margin: 0 0 7px;
  font-size: 14px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#admin div div .list .title div img {
  width: 14px;
  height: 14px;
  border-radius: 100%;
  margin: 0 8px 0 0;
}

#admin div div .list .title div h2 {
  font-size: 12px;
  color: #323146;
  margin: 0 8px 0 0;
}

#admin .list .prptStatCol {
  width: 100px;
  text-align: center;
}

#admin .stateInfoBox {
  display: flex;
  flex-direction: row;
  gap: 12px;
  align-items: center;
}

#admin .majorModelW {
  width: auto;
}

#admin div div .list .title div p {
  font-size: 12px;
  color: #6d6c75;
  font-weight: 500;
}

#admin div div .list .channel {
  min-width: 150px;
  text-align: center;
}

#admin div div .list .channel p {
  font-size: 13px;
  color: #3e3d53;
}

#admin div div .list .mark {
  width: 73px;
  margin: 0 10px;
  border-radius: 50px;
  font-size: 13px;
  background: #fe393c;
  color: #ffffff;
  padding: 4px 0;
}

#admin div div .list .star {
  width: 40px;
  margin: 0 18px 0 0;
  position: relative;
  cursor: pointer;
}

#admin div div .list .star:hover img.activeImg {
  opacity: 1;
}

#admin div div .list .star img {
  width: 15px;
}

#admin div div .list .star img.activeImg {
  transition: all 0.2s ease-in-out;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
}

#admin div div .list .date {
  width: 190px;
  padding: 0 8px;
  font-size: 14px;
  color: #87858b;
}

#admin div div .more {
  width: 48px;
  padding: 0 12px;
  position: relative;
  font-size: 14px;
  color: #87858b;
}

#admin div div .more .anticon-more svg {
  display: none !important;
}

#admin div div .more .anticon-more {
  width: 12px;
  height: 32px;
  overflow: hidden;
  padding-left: 50px;
}

#admin .contextMenu {
  position: absolute;
  right: 30px;
  width: 100px;
  padding: 1px;
  border: 1px solid #c718e2;
  border-radius: 4px;
  background: #ffffff;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  z-index: 10;
}

#admin .contextMenu .menu {
  height: 40px;
  background: #ffffff;
  cursor: pointer;
  justify-content: center;
}

#admin .contextMenu .menu:hover {
  background: #fdf2ff;
}

#admin .contextMenu .menu > p {
  font-size: 13px;
  color: #000000;
}

#admin div div .list2 {
  flex-wrap: wrap;
  min-height: 50vh;
  justify-content: start;
  align-content: flex-start;
}

#admin div div .list2 > div {
  width: calc(100% / 6 - 20px);
  margin: 0 23px 64px 0;
  border-radius: 10px 100px 10px 10px;
  position: relative;
  background: linear-gradient(to right, #b041f3 0%, #ec15ff 100%);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

#admin div div .list2 > div:hover {
  padding: 5px;
}

#admin div div .list2 > div:hover .thumbnail {
  height: 118px;
}

#admin div div .list2 div:nth-child(6n) {
  margin: 0 0 64px;
}

#admin div div .list2 div .thumbnail {
  position: relative;
  background: linear-gradient(225deg, #ffeed2, #ffd8c0);
  height: 128px;
  border-radius: 10px 100px 0 0;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

#admin div div .list2 div .thumbnail > h1 {
  font-size: 16px;
  color: #3e3d53;
  font-weight: 600;
  display: flex;
}

#admin div div .list2 div#img .thumbnail > img {
  width: 100%;
  height: 100%;
  display: flex;
  object-fit: cover;
}

#admin div div .list2 div#img .thumbnail .absoluteBox {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
}

#admin div div .list2 div .thumbnail .absoluteBox div .checkbox {
  width: 20px;
  margin: 0 12px 0 0;
}

#admin div div .list2 div#img .thumbnail .absoluteBox div img {
  width: 20px;
  height: 20px;
  margin: 0 8px 0 0;
  border-radius: 100%;
  opacity: 1;
}

#admin div div .list2 div#img .thumbnail .absoluteBox div h2 {
  font-size: 13px;
  color: #ffffff;
  opacity: 1;
}

#admin div div .list2 div#img .thumbnail .absoluteBox h1 {
  font-size: 16px;
  color: #ffffff;
  font-weight: 700;
  opacity: 1;
  bottom: 0;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 4px;
  overflow: hidden;
  position: absolute;
  text-overflow: ellipsis;
  text-shadow: 0 0 8px #00000080;
  white-space: nowrap;
  width: 100%;
  padding: 0 8px;
  display: flex;
  align-items: center;
  flex-direction: row;
}
#admin .folder .user p,
#admin .trash .user p {
  display: none;
}
#admin .trash .thumbnail h1::before {
  background: url(../../static/media/i-trashLineB.518226bf83ddf249209b.svg) no-repeat center;
  content: '';
  width: 24px;
  height: 24px;
}

#admin div div .list2 div .thumbnail .absoluteBox div img,
#admin div div .list2 div .thumbnail .absoluteBox div h2,
#admin div div .list2 div .thumbnail .absoluteBox h1 {
  opacity: 0;
}

#admin div div .list2 div#img .thumbnail > h1,
#admin div div .list2 div .thumbnail > img {
  display: none;
}

#admin div div .list2 .folder#img {
  background: none;
}

#admin div div .list2 .folder.trash#img .thumbnail {
  background: linear-gradient(225deg, #e9e9e9, #c6c6c6);
}

#admin div div .list2 .folder#img .thumbnail {
  border-radius: 8px 70px 0 0;
}

#admin div div .list2 .folder#img .thumbnail .absoluteBox {
  background: none;
}

#admin div div .list2 .folder#img .thumbnail .absoluteBox .user {
  background: none;
}

#admin div div .list2 .folder#img .thumbnail .absoluteBox div img,
#admin div div .list2 .folder#img .thumbnail .absoluteBox div h2,
#admin div div .list2 .folder#img .thumbnail .absoluteBox h1 {
  display: none;
}

#admin div div .list2 .folder#img .thumbnail > h1,
#admin div div .list2 .folder#img .thumbnail > img {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  font-weight: 700;
}

#admin div div .list2 div#img {
  border-radius: 20px;
}

#admin div div .list2 div#img .thumbnail {
  border-radius: 16px 16px 0 0;
}

#admin div div .list2 div .bottom {
  padding: 8px 12px;
  background: #f1f1f1;
  border-radius: 0 0 16px 16px;
  height: 32px;
}

#admin div div .list2 div .bottom p {
  font-size: 13px;
  color: #0e0e1f;
}
#admin div div .list2 div .bottom .more {
  padding: 0 4px;
}

#admin div div .list2 div .bottom > div {
  width: auto;
}

#admin div div .list2 div .bottom > div img {
  width: 15px;
}

#admin div div .list2 div .bottom > div .more {
  width: auto;
  position: relative;
  padding: 0;
}

#admin div div .list2 div .bottom > div .more p {
  font-size: 16px;
}

#admin div div .list2 div .bottom > div .more .i-more {
  width: 20px;
  height: 20px;
  margin: 0;
  background-size: contain;
}

#admin div .mobile,
#admin div div .list .title > p {
  display: none;
}

@media (max-width: 1100px) {
  #admin div div .list .title > p {
    font-size: 10px;
    color: #fe393c;
    margin: 0 0 5px;
    display: flex;
  }

  #admin div div .list .mark {
    display: none;
  }

  /* #admin div div .list .title {
    width: calc(100% - 20px - 38px - 64px - 16px - 300px - 40px - 190px - 48px);
  } */

  #admin div div .list .title h1 {
    margin: 0 0 5px;
  }

  #admin div .searchBox .leftBox .search {
    width: 300px;
  }

  #admin div div .list2 > div {
    width: calc(100% / 4 - 20px);
    margin: 0 23px 64px 0;
  }

  #admin div div .list2 > div:nth-child(6n) {
    margin: 0 23px 64px 0;
  }

  #admin div div .list2 > div:nth-child(4n) {
    margin: 0 0 64px;
  }
}

@media (max-width: 1000px) {
  #admin div div .list .thumbnail {
    width: 40px;
    height: 40px;
  }

  /* #admin div div .list .title {
    width: calc(100% - 20px - 38px - 40px - 16px - 300px - 40px - 100px - 48px);
  } */

  #admin div div .list .date {
    width: 100px;
  }
}

@media (max-width: 900px) {
  #admin div div .list .thumbnail {
    margin-right: 8px;
  }
  #admin div .searchBox .leftBox > img {
    width: 18px;
    margin: 0 10px 0 0;
  }

  /* #admin div .searchBox {
    padding: 0 0 16px;
  } */

  #admin div .searchBox .rightBox > img {
    display: none;
    width: 18px;
    margin: 0 5px;
  }

  #admin div div .list .checkbox {
    margin: 0 8px 0 0;
  }

  #admin div div .list .checkbox .ant-checkbox-inner {
    width: 15px;
    height: 15px;
  }

  #admin div div .list .checkbox .ant-checkbox-inner::after {
    width: 5px;
    height: 9px;
  }

  #admin .list .prptStatCol {
    width: 45px;
    font-size: 10px;
  }

  #admin .list .prptStatCol .approval {
    min-width: 0;
    height: auto;
    padding: 2px 4px;
    font-size: 10px;
    white-space: nowrap;
  }

  #admin div div .list .channel {
    display: none;
  }

  #admin div div .list .star {
    width: 30px;
    margin: 0;
  }

  #admin div div .list .date {
    width: 70px;
    padding: 0;
    font-size: 10px;
  }

  #admin .stateInfoBox {
    flex-wrap: wrap;
    gap: 0;
    row-gap: 5px;
  }

  #admin div div .list .title {
    /* width: calc(100% - 20px - 8px - 40px - 8px - 14px - 8px - 65px - 30px); */
    min-width: 90px;
    max-width: 270px;
  }

  #admin div div .list .title div img {
    display: none;
  }

  #admin div div .list .title div h2 {
    font-size: 10px;
    margin: 0;
    margin-right: 5px;
  }

  #admin div div .list .title div h2 span {
    padding: 2px 4px;
    font-size: 8px;
  }

  #admin div div .list .title h1 {
    font-size: 13px;
  }

  #admin div div .list .title div p {
    font-size: 10px;
  }

  #admin div div .more {
    width: 30px;
    padding: 0;
  }

  #admin > div .searchBox {
    flex-wrap: wrap;
    padding: 16px 0;
    gap: 8px;
  }

  #admin div .mobile .select {
    min-width: 91px;
    height: 32px;
    margin: 0px;
  }

  #admin div .mobile .select .ant-select-selector {
    width: 100%;
    height: 32px;
    background: #f4f5f7;
    border: 1px solid #dfdce4;
  }
  #admin div .mobile .select .ant-select-selector .ant-select-selection-search {
    padding-inline-end: unset;
  }

  #admin div .mobile .search {
    height: 32px;
    border-radius: 4px;
    border: 1px solid #efecf1;
    background: #f4f5f7;
    padding: 8px;
  }

  #admin div .mobile .search img {
    width: 20px;
    margin: 0 8px 0 0;
  }

  #admin div .mobile .search .input {
    box-shadow: none;
    background: transparent;
    border: none;
    font-size: 12px;
  }

  #admin div div .list2 > div {
    width: calc(100% / 2 - 6.5px);
    margin: 0 13px 10px 0;
  }

  #admin div div .list2 > div:nth-child(6n),
  #admin div div .list2 > div:nth-child(4n) {
    margin: 0 13px 10px 0;
  }

  #admin div div .list2 > div:nth-child(2n) {
    margin: 0 0 10px;
  }

  #admin div div .list2 div#img .thumbnail .absoluteBox div img {
    display: none;
  }

  #admin div div .list2 div .bottom {
    height: auto;
  }

  #admin div div .list2 div .bottom > div img {
    margin: 0;
  }
}

@media (max-width: 700px) {
  #admin div .mobile {
    margin: 10px 0 0;
    display: flex;
    gap: 10px;
  }
}

.form .ant-form {
  width: 100%;
  gap: 40px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.myMarketplacesSection .form .ant-form {
  width: 100%;
  gap: 12px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.form .ant-form-item {
  margin: 0px;
  width: 100%;
}

.form .btnBox {
  padding: 40px 0;
}

.myMarketplacesSection .form .btnBox {
  padding: 20px 0;
}

.myMarketplacesSection .form .btnBox #logoutBtn,
.myMarketplacesSection .form .btnBox #darkGrey,
.myMarketplacesSection .form .btnBox #purpleBtn {
  margin: 0 8px;
}

.form .ant-form-item .ant-radio-group {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 0;
}

.form .blueSpan {
  color: #0d88d4;
}

.form .redSpan {
  color: #f34144;
}

.form .rsWrapper .titleBox .title {
  width: fit-content;
  padding: 12px;
}

.form .rsWrapper .titleBox .title img {
  width: 20px;
  /* margin: 0 12px 0 0; */
  margin: 0;
}

.form .rsWrapper .titleBox .title h1 {
  font-size: 20px;
  font-weight: 600;
  color: #3e3d53;
  white-space: nowrap;
}

.form .rsWrapper .titleBox .line {
  width: calc(100% / 2);
  border: 1px dashed #e6e6e6;
}

.form .info-area {
  align-items: flex-start;
  padding: 0px 0 24px;
  gap: 24px;
}
.myMarketplacesSection .form .info-area {
  border-bottom: 1px solid #dbdbe0;
  padding: 20px 0 24px;
}

.myMarketplacesSection .form .info-area:has(+ .secession.approve) {
  border: 0;
}

.form .info-area:last-of-type {
  border-bottom: none;
}

.form .ai,
.form .aiInfo {
  border-bottom: 1px solid #dbdbe0;
  padding: 30px 0;
}

.form .aiInfo {
  align-items: flex-start;
}

.form .info-area .title {
  width: 180px;
  flex-wrap: wrap;
}
.form .info-area .title .titleGroup {
  display: flex;
  flex-direction: row;
}
.form .info-area .title .titleGroup h1 {
  gap: 2px;
}
.form .info-area .title .addBox {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 40px;
  padding-left: 32px;
}

.form .info-area .title .addBox div {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}
.form .info-area .title img {
  width: 20px;
  margin: 0 12px 0 0;
}

.form .info-area .title h1 {
  font-size: 16px;
  font-weight: 700;
  color: #3e3d53;
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 8px;
}

.form .info-area .title h1.basicEssential {
  gap: 0;
  display: flex;
  flex-direction: row;
}

.form .info-area .title #darkGrey {
  width: 132px;
  height: 40px;
  border-radius: 4px;
  font-size: 14px;
  margin: 12.5px 0 0;
  gap: 10px;
}

.form .info-area .content {
  width: calc(100% - 180px);
  flex-wrap: wrap;
  gap: 24px;
}

.form .info-area .content .box {
  margin: 0;
  align-items: flex-start;
  gap: 0 8px;
}

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

.content:has(.flexColStart.box) .box.resultBox {
  gap: 8px !important;
}
.content:has(.flexColStart.box) .box.resultBox .info {
  gap: 12px !important;
}
.content:has(.flexColStart.box) .box.resultBox .info:has(.music) {
  align-items: flex-end;
}
.content:has(.flexColStart.box) .box .info.music {
  gap: 12px !important;
  align-items: flex-start;
}
.content:has(.flexColStart.box) .box .info.music + .thum {
  width: 160px;
}
.content:has(.flexColStart.box) .box.resultBox > .info:last-child {
  flex-wrap: wrap;
  margin-top: 16px;
}
.form :where(.css-dev-only-do-not-override-1x0dypw).ant-upload-wrapper .ant-upload-drag .ant-upload {
  padding: 0;
}
.form .info-area .content .box.third {
  width: calc(100% / 3 - 27px);
}
.form .info-area .content .box.fourth {
  width: calc(100% / 4 - 27px);
}

.form .info-area .content .box .half > div {
  width: calc(50% - 6px);
}
.form .info-area .content .box .half > div.w-100 {
  width: 25%;
}

.form .info-area .content .box .info:has(.thum) {
  gap: 40px !important;
}

.form .info-area .content .box.resultBox .info .thum {
  gap: 12px;
}
.form .info-area .content .box .thum,
.form .info-area .content .box .info {
  gap: 8px;
}
.form .info-area .content .box .thum {
  width: auto;
}

.form .info-area .content .box .info.tagBox {
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: flex-start;
  gap: 24px;
}
.form .info-area .content .box .info.tagBox + .blueSpan {
  margin-top: 8px;
}
.form .info-area .content .box .info.tagInput {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
}
.form .info-area .content .box .info.tagBox .tagList {
  display: flex;
  flex-direction: row;
  gap: 12px;
  flex-wrap: wrap;
}
/* .content:has(.flexColStart.box) .box.resultBox > .info:last-child {
  margin-top: 30px;
  align-items: start;

} */
.content:has(.flexColStart.box) .box.resultBox .textUpload {
  margin: 0 !important;
}
.content:has(.flexColStart.box) .box.resultBox > p + .info {
  margin-top: 0 !important;
}
.form .info-area .content .box .info h1 {
  font-size: 12px;
  font-weight: 600;
  color: #464548;
  line-height: 1;
  margin-top: 16px;
  display: flex;
  flex-direction: row;
}
.form .info-area .content .box .info h1:first-child {
  margin-top: 0px;
}

.form .info-area .content .box .info > div {
  min-height: 40px;
  align-items: flex-start;
}
.form .info-area .content .box .info .list_fileBox {
  align-items: center;
  min-height: 0;
  min-height: initial;
}

.form .info-area .content .box .info input {
  width: 100%;
  height: 40px;
  background: #f7f7f8;
  border: 1px solid #e2dfe4;
  border-radius: 4px;
  outline: none;
  padding: 0 10px;
  box-sizing: border-box;
  resize: none;
}

.form .info-area .content .box .info .ant-picker-input input {
  background: transparent;
  border: transparent;
}
.form .info-area .content .box .info input.ant-input-number-input {
  text-align: right;
}

.form .info-area .content .box .info textarea {
  background: #f7f7f8;
  border: 1px solid #e2dfe4;
  padding: 10px;
  font-weight: 500;
}

/* 이미지 썸네일 */
.form .info-area .content .box .info > .plusBox {
  width: 252px;
  height: 141.75px;
  border: 1px dashed #e21dfd;
  border-radius: 4px;
  overflow: hidden;
}

/* 이미지 업로드시 보더 삭제 */
.form .info-area .content .box .info .plusBox:has(.uploadthum),
.form .info-area .content .box .info .music + .thum .plusBox:has(.uploadthum) {
  border: none;
}

/* 음원파일 썸네일 */
.form .info-area .content .box .info .music + .thum .plusBox {
  width: 160px;
  height: 160px;
  border: 1px dashed #e21dfd;
  border-radius: 4px;
  overflow: hidden;
}

.form .info-area .content .box .info .music + .thum .plusBox span {
  padding: 0;
  margin: 0;
}

.form .info-area .content .box .info.music .plusBox {
  width: 100%;
}
.form .info-area .content .box .info .plusBox > div {
  height: 145.125px;
  background: #fcf7fd;
  cursor: pointer;
}
.form .info-area .content .box .info .music .ant-upload-drag,
.form .info-area .content .box .info .music + .thum .plusBox > div {
  height: 160px;
}
.form .info-area .content .box .info.music .plusBox {
  width: 100%;
  height: 160px;
}

.form .info-area .content .box .info .plusBox.wide {
  width: 100%;
  /* height: 180px; */
}
.form .info-area .content .box .info .plusBox .plus,
#boardDetail .plus {
  background: #f0dbf4;
  border-radius: 100%;
  width: 40px;
  height: 40px;
  color: #c49bcc;
  margin: 0 0 8px;
}

.form .info-area .content .box .info .plusBox p,
#boardDetail .plusBox p {
  color: #c49bcc;
  text-align: center;
  line-height: 1.2;
  font-size: 16px;
}

.form .info-area .content .box .info input::placeholder,
.form .myInfo .content .box .infoBox .box2 .info input::placeholder,
.form .sellerInfo .content .info input::placeholder,
.form .payInfo .content .info input::placeholder,
.form .myInfo .content .info input::placeholder,
.form .myInfo .content .info textarea::placeholder {
  color: #a3a1a7;
}

.form .info-area .content .box .info input:disabled,
.form .myInfo .content .box .infoBox .box2 .info input:disabled,
.form .sellerInfo .content .info input:disabled,
.form .myInfo .content .info input:disabled,
.form .payInfo .content .info input:disabled,
.form .myInfo .content .info textarea:disabled {
  background: #e9ecf1;
  border: 1px solid #e2dfe4;
  color: #524f56;
  outline: none;
}
.form .info-area .content .box .info textarea:focus,
.form .info-area .content .box .info input:focus,
.form .myInfo .content .box .infoBox .box2 .info input:focus,
.form .sellerInfo .content .info input:focus,
.form .myInfo .content .info input:focus,
.form .payInfo .content .info input:focus,
.form .myInfo .content .info textarea:focus {
  border: 1px solid #b041f3;
  background: #ffffff;
}

.form .info-area .content .box .info #darkGrey {
  width: 105px;
  height: 33px;
  border-radius: 4px;
  font-size: 14px;
}

.form .info-area .content .box .info > .rowBox {
  position: relative;
}

.form .info-area .content .box .info > .rowBox .absoluteBox {
  position: absolute;
  top: 40px;
  right: 0;
  width: 400px;
  padding: 24px;
  background: #ffffff;
  border-radius: 4px;
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.25);
}

.form .info-area .content .box .info > .rowBox .absoluteBox .absolueTitle {
  margin: 0 0 31px;
}

.form .info-area .content .box .info > .rowBox .absoluteBox .absolueTitle h1 {
  font-size: 16px;
  font-weight: 700;
  color: #0e0e1f;
  margin: 0;
}

.form .info-area .content .box .info > .rowBox .absoluteBox .absolueTitle p {
  font-size: 24px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.form .info-area .content .box .info > .rowBox .absoluteBox .absolueTitle p:hover {
  color: #e21dfd;
}

.form .info-area .content .box .info > .rowBox .absoluteBox .box p {
  font-size: 12px;
  color: #464548;
  margin: 0 0 9px;
}

.form .info-area .content .box .info > .rowBox .absoluteBox div #darkGrey {
  margin: 0 16px 0 0;
}

.form .info-area .content .box .info > .rowBox .absoluteBox div #darkGrey,
.form .info-area .content .box .info > .rowBox .absoluteBox div #purpleBtn {
  width: 120px;
  height: 40px;
  border-radius: 4px;
  font-size: 14px;
}

.form .info-area .content .box .info > .rowBox > input {
  width: calc(100% - 104px - 12px);
}

.form .info-area .content .box .info > .rowBox #darkGrey {
  width: 104px;
  height: 40px;
  border-radius: 4px;
  font-size: 14px;
}

.form .info-area .content .box .info > .rowBox .ant-select {
  width: calc(50% - 6px);
  height: 40px;
}

.form .info-area .content .box .tabBox .tab {
  width: auto;
  padding: 8px 12px;
  border: 1px solid #cccccc;
  font-size: 13px;
  color: #0e0e1f;
  font-weight: 600;
  border-radius: 20px;
  margin: 0 12px 0 0;
}

.form .info-area .content .box .tagBox .tag {
  width: auto;
  padding: 8px 12px;
  border: 1px solid #cccccc;
  border-radius: 50px;
  margin: 0;
  position: relative;
}
.form .info-area .content .box .tagBox .tag > p {
  font-size: 13px;
  color: #0e0e1f;
  font-weight: 600;
  margin: 0 8px 0 0;
  letter-spacing: 1px;
}

.form .info-area .content .box .tagBox .tag > img {
  width: 8px;
  cursor: pointer;
}

.form .info-area .content .box .tagBox .tag .click-overlay {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  cursor: pointer;
}
.form .ai .content > .tabBox {
  width: auto;
}

.form .ai .content .tabBox .aiTab {
  width: auto;
  height: auto;
  padding: 9px 12px;
  border: 1px solid #cccccc;
  border-radius: 30px;
  margin: 0 12px 0 0;
}

.form .ai .content .tabBox .aiTab h1 {
  font-size: 13px;
  color: #0e0e1f;
  margin: 0 10px 0 0;
}

.form .ai .content .tabBox .aiTab p {
  font-size: 13px;
  color: #0e0e1f;
}

.form .aiInfo .content .ant-checkbox,
.form .aiInfo .content .ant-checkbox .ant-checkbox-inner {
  width: 20px;
  height: 20px;
}

.form .aiInfo .content .ant-checkbox + span img {
  width: 21px;
  margin: 0 0 -6px;
}

.form .aiInfo .content > p {
  font-size: 12px;
  color: #464548;
  margin: 0 0 10px;
}

.form .aiInfo .content p span {
  color: #0d88d4;
}

.form .aiInfo .content .tabBox .tab {
  width: auto;
  padding: 8px 12px;
  border: 1px solid #cccccc;
  font-size: 13px;
  color: #0e0e1f;
  font-weight: 600;
  border-radius: 20px;
  margin: 0 12px 0 0;
}

.form .btnBox #logoutBtn,
.form .btnBox #darkGrey,
.form .btnBox #purpleBtn {
  width: 120px;
  height: 40px;
  border-radius: 4px;
  font-size: 14px;
  margin: 14px 8px 0;
}

.form .secession {
  margin: 0;
  font-weight: 700;
}
.form .secession.coBox {
  justify-content: center;
  flex-direction: column;
}

.form .secession .title #logoutBtn {
  width: 125px;
  height: 34px;
  border-radius: 24px;
}

.form .secession .title #logoutBtn img {
  width: 18px;
  margin: 0 10px 0 0;
}

/* ///////////// */
/* ///////////// */
/* SELLER MODAL */
/* ///////////// */
/* ///////////// */
.sellerModal .title {
  margin: 0 0 37px;
}

.sellerModal .title h1 {
  font-size: 24px;
  font-weight: 700;
  color: #0e0e1f;
}

.sellerModal .title p {
  font-size: 24px;
}

.sellerModal .check {
  margin: 0 0 17px;
}

.sellerModal .check p {
  font-size: 13px;
  color: #000000;
  margin: 0 0 -3px 20px;
  border-bottom: 1px solid #000000;
  line-height: 1;
}

.sellerModal .scroll {
  max-height: 600px;
  overflow-y: auto;
  justify-content: flex-start;
}

.sellerModal .scroll .boxWrapper1,
.sellerModal .scroll .boxWrapper2,
.sellerModal .scroll .boxWrapper3,
.sellerModal .scroll .boxWrapper4 {
  padding: 20px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  margin: 0 0 24px;
}

.sellerModal .scroll .boxWrapper1 .box p,
.sellerModal .scroll .boxWrapper2 .box p,
.sellerModal .scroll .boxWrapper3 .box p,
.sellerModal .scroll .boxWrapper4 .box p {
  font-size: 12px;
  color: #0e0e1f;
  margin: 0 0 9px;
}

.sellerModal .scroll .boxWrapper1 .box:first-child {
  width: 200px;
}

.sellerModal .scroll .boxWrapper1 .box:last-child {
  width: calc(100% - 200px - 40px);
}

.sellerModal .scroll .boxWrapper1 .box:first-child .tab {
  background: linear-gradient(to right, #ca79fc 0%, #ff5eb6 100%);
  border-radius: 4px;
  padding: 4px;
  height: 40px;
}

.sellerModal .scroll .boxWrapper1 .box:first-child .tab div {
  width: calc(50% - 2px);
  font-size: 14px;
  color: #ffffff;
  border-radius: 4px;
  height: 100%;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.sellerModal .scroll .boxWrapper1 .box:first-child .tab div:hover {
  background: #ffffff;
  color: #464548;
}

.sellerModal .scroll .boxWrapper1 .box:first-child .tab div#active {
  background: #ffffff;
  color: #464548;
}

.sellerModal .scroll .boxWrapper1 .box:last-child #darkGrey {
  width: 88px;
  height: 40px;
  font-size: 14px;
  border-radius: 4px;
}

.sellerModal .scroll .boxWrapper1 .box:last-child input {
  width: calc(100% - 88px - 12px);
}

.sellerModal .scroll .boxWrapper1 .box input,
.sellerModal .scroll .boxWrapper2 .box input,
.sellerModal .scroll .boxWrapper3 .box input,
.sellerModal .scroll .boxWrapper4 .box input {
  height: 40px;
  outline: none;
  border: 1px solid #e2dfe4;
  background: #f7f7f8;
  border-radius: 4px;
  padding: 0 12px;
  font-size: 13px;
}

.sellerModal .scroll .boxWrapper1 .box input::placeholder,
.sellerModal .scroll .boxWrapper2 .box input::placeholder,
.sellerModal .scroll .boxWrapper3 .box input::placeholder,
.sellerModal .scroll .boxWrapper4 .box input::placeholder {
  color: #a3a1a7;
}

.sellerModal .scroll .boxWrapper1 .box input:disabled,
.sellerModal .scroll .boxWrapper2 .box input:disabled,
.sellerModal .scroll .boxWrapper3 .box input:disabled,
.sellerModal .scroll .boxWrapper4 .box input:disabled {
  border: 1px solid #e2dfe4;
  background: #e9ecf1;
  color: #524f56;
}

.sellerModal .scroll .boxWrapper2 > div:first-child {
  padding: 0 0 16px;
  border-bottom: solid 1px rgba(0, 0, 0, 0.1);
  margin: 0 0 16px;
}

.sellerModal .scroll .boxWrapper2 div:first-child .box {
  width: 200px;
}

.sellerModal .scroll .boxWrapper2 div:first-child .box input {
  width: 100%;
}

.sellerModal .scroll .boxWrapper2 div:first-child .box:last-child {
  width: 224px;
}

.sellerModal .scroll .boxWrapper2 div:first-child .box:last-child input {
  width: calc(100% - 88px - 12px);
}

.sellerModal .scroll .boxWrapper2 div:first-child .box:last-child #darkGrey {
  width: 88px;
  height: 40px;
  font-size: 14px;
  border-radius: 4px;
}

.sellerModal .scroll .boxWrapper2 div:nth-child(2) .box:first-child {
  width: 200px;
}

.sellerModal .scroll .boxWrapper2 div:nth-child(2) .box:last-child {
  width: calc(100% - 200px - 40px);
}

.sellerModal .scroll .boxWrapper2 > div:not(:last-child) {
  margin: 0 0 17px;
}

.sellerModal .scroll .boxWrapper2 div .box input {
  width: 100%;
}

.sellerModal .scroll .boxWrapper2 div:nth-child(3) .box,
.sellerModal .scroll .boxWrapper2 div:nth-child(4) .box {
  width: calc(100% / 2 - 20px);
}

.sellerModal .scroll .boxWrapper3 > div:first-child,
.sellerModal .scroll .boxWrapper4 > div:first-child {
  margin: 0 0 17px;
}

.sellerModal .scroll .boxWrapper3 div:first-child .box,
.sellerModal .scroll .boxWrapper4 div:first-child .box {
  width: 200px;
}

.sellerModal .scroll .boxWrapper3 div .box input,
.sellerModal .scroll .boxWrapper4 div .box input {
  width: 100%;
}

.sellerModal .scroll .boxWrapper4 div:first-child .ant-select {
  width: 200px;
  height: 40px;
}

.sellerModal .scroll .boxWrapper4 div:last-child input {
  width: 212px;
}

.sellerModal .scroll .boxWrapper4 div:last-child .box .content > p {
  font-size: 13px;
  margin: 0 16px;
}

.sellerModal .scroll .boxWrapper4 div:last-child .box .content .inputRound {
  width: 40px;
  border-radius: 100%;
  margin: 0 16px 0 0;
}

.sellerModal .scroll .boxWrapper4 div:last-child .box .content .round {
  width: 16px;
  height: 16px;
  border-radius: 100%;
  background: #000000;
  margin: 0 16px 0 0;
}

.sellerModal .scroll .boxWrapper4 div:last-child .box .content .round:last-child {
  margin: 0 44px 0 0;
}

.sellerModal .scroll .boxWrapper4 div:last-child .box .content #darkGrey {
  width: 88px;
  height: 40px;
  border-radius: 4px;
  font-size: 14px;
}

.sellerModal .scroll .btnBox #purpleBtn,
.sellerModal .scroll .btnBox #logoutBtn {
  width: 100px;
  height: 40px;
  margin: 0 5px;
  font-size: 14px;
  border-radius: 4px;
}

/* //////// */
/* //////// */
/* AIMODAL */
/* //////// */
/* //////// */

.aiModal .title {
  margin: 0 0 37px;
}

.aiModal .title h1 {
  font-size: 24px;
  font-weight: 700;
  color: #0e0e1f;
}

.aiModal .title p {
  font-size: 24px;
}

.aiModal .top {
  padding: 12px;
  border-radius: 16px;
  border-bottom: solid 1px rgba(0, 0, 0, 0.1);
  background-color: rgba(0, 0, 0, 0.05);
  align-items: flex-end;
  margin: 0 0 28px;
}

.aiModal .top .box {
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
  border: solid 1px #c2b8cb;
  height: 188px;
  width: calc(100% - 120px - 24px);
  background: #ffffff;
}

.aiModal .top .box .thumb {
  width: 123px;
}

.aiModal .top .box .thumb p {
  font-size: 12px;
  font-weight: 700;
  color: #464548;
  margin: 0 0 13px;
}

.aiModal .top .box .thumb .plusBox {
  width: 100%;
  height: 123px;
  border-radius: 4px;
  background: #f3f3f3;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.aiModal .top .box .thumb .plusBox .plus {
  width: 40px;
  height: 40px;
  border-radius: 100%;
  background: rgba(0, 0, 0, 0.1);
  font-size: 20px;
  color: #ffffff;
}

.aiModal .top .box .thumb .plusBox:hover {
  background: #f0dbf4;
}

.aiModal .top .box > div {
  width: calc(100% - 123px - 20px);
}

.aiModal .top .box > div .infoBox:not(:last-child) {
  width: 100%;
  margin: 0 0 12px;
}

.aiModal .top .box > div .infoBox p {
  font-size: 12px;
  font-weight: 700;
  color: #464548;
}

.aiModal .top .box > div .infoBox .ant-select {
  width: 300px;
  height: 40px;
}

.aiModal .top .box > div .infoBox input {
  height: 40px;
  width: 300px;
  border: 1px solid #e2dfe4;
  background: #f7f7f8;
  outline: none;
  padding: 0 12px;
  border-radius: 4px;
  font-size: 13px;
}

.aiModal .top .box > div .infoBox input::placeholder {
  font-size: 13px;
  color: #a3a1a7;
}

.aiModal .top #purpleBtn {
  width: 120px;
  height: 40px;
  font-size: 14px;
  border-radius: 24px;
}

.aiModal .filter {
  margin: 0 0 16px;
}

.aiModal .filter .ant-select {
  border-radius: 4px;
  width: 120px;
  height: 40px;
}

.aiModal .filter > div {
  width: auto;
}

.aiModal .filter > div input {
  width: 140px;
  height: 40px;
  border: 1px solid #e2dfe4;
  background: #f7f7f8;
  border-radius: 4px;
  padding: 8px 12px;
  outline: none;
  font-size: 13px;
}

.aiModal .filter > div p {
  font-size: 13px;
  margin: 0 12px;
}

.aiModal .filter > div #purpleBtn {
  width: 40px;
  height: 40px;
  margin: 0 0 0 12px;
  font-size: 20px;
  border-radius: 4px;
}

.aiModal .contentTop {
  border-top: 2px solid #000000;
  background: #f3f2fa;
  height: 48px;
}

.aiModal .contentTop div {
  font-size: 14px;
  color: #323146;
  font-weight: 500;
}

.aiModal .scroll {
  max-height: 350px;
  justify-content: flex-start;
  overflow: auto;
}

.aiModal .contentTop div:nth-child(1),
.aiModal .scroll .content div:nth-child(1) {
  width: 180px;
}

.aiModal .contentTop div:nth-child(2),
.aiModal .contentTop div:nth-child(4),
.aiModal .scroll .content div:nth-child(2),
.aiModal .scroll .content div:nth-child(4) {
  width: 120px;
}

.aiModal .scroll .content div:nth-child(4) .tab {
  padding: 4px 8px;
  font-size: 13px;
  color: #ffffff;
  width: auto;
  border-radius: 50px;
}

.aiModal .scroll .content div:nth-child(4) .tab.success {
  background: #525162;
}

.aiModal .scroll .content div:nth-child(4) .tab.accept {
  background: #0fc9f3;
}

.aiModal .scroll .content div:nth-child(4) .tab.ing {
  background: #f8c930;
}

.aiModal .scroll .content div:nth-child(4) .tab.fail {
  background: #fe393c;
}

.aiModal .contentTop div:nth-child(3),
.aiModal .scroll .content div:nth-child(3) {
  width: 140px;
}

.aiModal .scroll .content div:nth-child(3) img {
  width: 80%;
}

.aiModal .contentTop div:nth-child(6),
.aiModal .scroll .content div:nth-child(6) {
  width: 80px;
}

.aiModal .scroll .content div:nth-child(6) img {
  width: 20px;
}

.aiModal .contentTop div:nth-child(5),
.aiModal .scroll .content div:nth-child(5) {
  width: calc(100% - 180px - 120px - 120px - 140px - 80px);
}

.aiModal .scroll .content {
  border-bottom: 1px solid #e2dfe4;
  padding: 8px 0;
}

.aiModal .scroll .content div:nth-child(5) {
  font-size: 16px;
  color: #464548;
}

.aiModal .scroll .content div {
  font-size: 13px;
  color: #000000;
  font-weight: 600;
}

/* 프롬프트 판매 */
#promptSales .essentialBox {
  /* height: 100px; */
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
  padding: 20px 40px 20px;
}
#promptSales .essentialBox label .ant-checkbox-inner {
  min-width: 20px;
  flex-grow: 1;
}
#promptSales .essentialBox label,
#promptSales .essentialBox label a,
#promptSales .essentialBox label span {
  height: 20px;
  flex-grow: 0;
  font-size: 18px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: justify;
  color: #000;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  line-height: 1;
  gap: 4px;
}
#promptSales .essentialBox label span button {
  gap: 0;
}
#promptSales .essentialBox label span button span {
  text-decoration: underline;
}
#promptSales .info-area .content .box .info.tagBox input {
  width: 200px;
  /* margin: 0 12px 0 0; */
}

#promptSales .ant-radio-wrapper {
  margin-inline-end: 4px;
  align-items: center;
}
.ant-form-item .ant-form-item-control-input {
  min-height: auto;
}
@media (max-width: 800px) {
  .myMarketplacesSection .form .info-area {
    padding: 30px 0;
  }
  .myMarketplacesSection .form .ant-form {
    gap: 0;
  }
  .form .info-area {
    flex-direction: column;
    margin: 0;
    padding: 0 0 30px;
    gap: 0;
    border-bottom: 1px solid #dbdbe0;
    border-bottom: 1px solid var(--c-menuLine, #dbdbe0);
  }
  .form .info-area:has(+ .tag) {
    /* padding: 0; */
    /* border-bottom: none; */
  }
  .form .info-are.tag .title h1 {
    font-size: 12px;
    font-weight: 500;
  }
  .form .sellerInfo,
  .form .ai,
  .form .aiInfo {
    padding: 0 0 30px;
    width: 100%;
    flex-direction: column;
    margin: 0 0 30px;
  }
  .form .info-area .title .addBox {
    width: calc(100% - 156px);
    padding-left: 0;
    justify-content: start;
  }
  .form .info-area.tag {
    gap: 8px;
  }
  .form .info-area.tag .title {
    margin: 0;
  }
  .form .info-area .title,
  .form .myInfo .title,
  .form .ai .title,
  .form .aiInfo .title,
  .form .sellerInfo .title,
  .form .payInfo .title,
  .form .secession title {
    width: 100%;
    margin: 0 0 30px;
  }
  .form .info-area .title.flexRowStart:has(.addBox) {
    flex-direction: column;
    align-items: flex-start;
  }

  .form .info-area .content,
  .form .myInfo .content,
  .form .ai .content,
  .form .aiInfo .content,
  .form .sellerInfo .content,
  .form .payInfo .content {
    width: 100%;
    flex-wrap: wrap;
  }

  .form .info-area .content .box,
  .form .myInfo .content .box,
  .form .myInfo .content .box .infoBox .box2,
  .form .myInfo .content .box .infoBoxUpdate .box2,
  .form .sellerInfo .content .info,
  .form .payInfo .content .info {
    flex-direction: column;
    margin: 0;
  }

  .form .info-area .content .box.third {
    width: 100%;
  }

  .form .info-area .content .box:nth-child(3) {
    flex-direction: row;
  }

  .form .info-area .content .box #logoutBtn {
    width: 80px;
    height: 30px;
    border-radius: 4px;
    font-size: 12px;
  }

  .form .info-area .content .box .info,
  .form .myInfo .content .box .infoBox .box2 .info,
  .form .myInfo .content .box .infoBoxUpdate .box2:not(:last-child) .info,
  .form .myInfo .content .box .infoBoxUpdate {
    width: 100%;
    margin: 0 0 30px;
    padding: 0;
    gap: 12px 0;
  }
  .form .info-area .content .box .info .info {
    margin: 0;
  }
  .form .info-area .content .box .info.tagBox {
    flex-direction: column;
    gap: 16px;
  }
  .form .info-area .content .box .tagInput {
    width: 100%;
  }

  .form .myInfo .content .box .thumb {
    width: 100%;
    margin: 0 0 30px;
  }

  .form .myInfo .content .box .thumb img {
    width: 140px;
    height: 140px;
  }

  .form .info-area .content .box .info > .plusBox {
    flex: 1 1;
  }

  .form .myInfo .content .box .infoBox {
    padding: 0;
    width: 100%;
  }

  .form .myInfo .content .box .infoBox .box2:first-child {
    margin: 0;
  }

  .form .myInfo .content .box .infoBox .box2:last-child,
  .form .myInfo .content .box .infoBoxUpdate .box2:last-child {
    flex-direction: row;
  }

  .form .info-area .content .box .info input,
  .form .myInfo .content .box .infoBoxUpdate .box2 .info input,
  .form .sellerInfo .content .info input,
  .form .payInfo .content .info input,
  .form .myInfo .content .info input,
  .form .myInfo .content .info textarea {
    font-size: 13px;
  }
  #promptSales .info-area .content .box .info.tagBox input {
    width: 100%;
    margin: 0;
  }
  .form .info-area .content .box .info > .rowBox {
    flex-wrap: wrap;
  }

  .form .info-area .content .box .info:first-child > .rowBox .ant-select {
    width: 86px;
  }

  .form .info-area .content .box .info:first-child > .rowBox > .mobileInput {
    width: calc(100% - 86px - 10px);
  }

  .form .info-area .content .box .info > .rowBox #darkGrey.mobileBtn {
    margin: 7px 0 0;
    width: 100%;
  }

  .form .info-area .content .box:nth-child(3)#update {
    flex-direction: column;
  }

  .form .ai .content .box p span,
  .form .myInfo .content .info p,
  .form .myInfo .content .info h1 span,
  .form .info-area .content .box .info h1 span {
    font-size: 10px;
  }

  .form .myInfo .content .box .thumbUpdate {
    width: auto;
    margin: 0 0 30px;
  }

  .form .myInfo .content .box .thumbUpdate img {
    margin: 0 10px 0 0;
  }

  .form .myInfo .content .box .infoBoxUpdate .box2 .info {
    width: calc(50% - 5px);
  }

  .form .myInfo .content .info:nth-child(3) input {
    margin: 0 0 5px;
  }

  .form .myInfo .content .info textarea {
    height: 40px;
  }

  .form .ai .content > .tabBox {
    width: 100%;
    flex-wrap: wrap;
    margin: 10px 0 0;
  }

  .form .aiInfo #darkGrey {
    width: 100%;
    height: 40px;
    font-size: 14px;
    border-radius: 4px;
    margin: 30px 0 0;
  }

  .form .secession {
    margin: 8px 0;
  }

  .form .secession.coBox .title {
    justify-content: flex-start;
    padding: 30px 0;
  }
  .form .btnBox {
    justify-content: space-between;
    padding: 30px 0;
  }
  .form .info-area .content .box .info:has(.thum) {
    gap: 30px;
  }
  .form .btnBox #logoutBtn,
  .form .btnBox #darkGrey,
  .form .btnBox #purpleBtn {
    margin: 0;
    /* width: calc(100% / 3 - 10px); */
    width: 100%;
  }

  .form .btnBox#update {
    justify-content: space-between;
  }

  .form .btnBox#update #logoutBtn,
  .form .btnBox#update #purpleBtn {
    width: calc(50% - 8px);
  }

  .mobilePwModal .title {
    margin: 0 0 30px;
  }

  .mobilePwModal .title h1 {
    color: #0e0e1f;
    font-size: 20px;
    font-weight: 700;
  }

  .mobilePwModal .title p {
    font-size: 24px;
  }

  .mobilePwModal .box p {
    color: #464548;
    font-size: 12px;
    margin: 0 0 5px;
  }

  .mobilePwModal .box input {
    border: 1px solid #e2dfe4;
    background: #f7f7f8;
    height: 38px;
    width: 100%;
    margin: 0 0 20px;
    padding: 0 10px;
    border-radius: 4px;
  }

  .mobilePwModal .box input::placeholder {
    color: #a3a1a7;
  }

  .mobilePwModal div #darkGrey,
  .mobilePwModal div #purpleBtn {
    width: calc(50% - 10px);
    height: 40px;
    border-radius: 4px;
  }

  .sellerModal .scroll {
    max-height: none;
  }

  .sellerModal .check {
    justify-content: space-between;
  }

  .sellerModal .scroll .boxWrapper2 > div,
  .sellerModal .scroll .boxWrapper2 > div:first-child,
  .sellerModal .scroll .boxWrapper1,
  .sellerModal .scroll .boxWrapper2,
  .sellerModal .scroll .boxWrapper3,
  .sellerModal .scroll .boxWrapper4 {
    flex-direction: column;
    align-items: flex-start;
  }

  .sellerModal .scroll .boxWrapper3 > div:first-child,
  .sellerModal .scroll .boxWrapper4 > div:first-child {
    flex-direction: column;
    align-items: flex-start;
    margin: 0;
  }

  .sellerModal .scroll .boxWrapper4 > div:first-child input,
  .sellerModal .scroll .boxWrapper4 div:first-child .ant-select,
  .sellerModal .scroll .boxWrapper2 div:nth-child(2) .box:last-child,
  .sellerModal .scroll .boxWrapper2 div:nth-child(2) .box:first-child,
  .sellerModal .scroll .boxWrapper2 div:nth-child(3) .box,
  .sellerModal .scroll .boxWrapper2 div:nth-child(4) .box,
  .sellerModal .scroll .boxWrapper1 .box:last-child,
  .sellerModal .scroll .boxWrapper2 div:first-child .box:last-child {
    width: 100%;
  }

  .sellerModal .scroll .boxWrapper2 div:nth-child(2) .box:last-child,
  .sellerModal .scroll .boxWrapper2 div:nth-child(2) .box:first-child,
  .sellerModal .scroll .boxWrapper2 div:nth-child(3) .box,
  .sellerModal .scroll .boxWrapper2 div:nth-child(4) .box,
  .sellerModal .scroll .boxWrapper1 .box {
    margin: 0 0 11px;
  }

  .sellerModal .scroll .boxWrapper2 > div:not(:last-child),
  .sellerModal .scroll .boxWrapper1 .box:last-child {
    margin: 0 0 10px;
  }

  .sellerModal .scroll .boxWrapper3 div:first-child .box,
  .sellerModal .scroll .boxWrapper4 div:first-child .box,
  .sellerModal .scroll .boxWrapper2 div:first-child .box {
    width: 100%;
    margin: 0 0 10px;
  }

  .sellerModal .scroll .boxWrapper2 div:first-child .box:last-child input {
    width: calc(100% - 88px - 12px);
  }

  .sellerModal .scroll .boxWrapper4 > div:last-child > div > div {
    flex-wrap: wrap;
  }

  .sellerModal .scroll .boxWrapper4 div:last-child .box .content .inputRound {
    margin: 0 5px 0 0;
  }

  .sellerModal .scroll .boxWrapper4 div:last-child .box .content .round {
    width: 10px;
    height: 10px;
    margin: 0 5px 0 0;
  }

  .sellerModal .scroll .boxWrapper4 > div:last-child > div > div input {
    width: 40%;
  }

  .sellerModal .scroll .boxWrapper4 div:last-child .box .content #darkGrey {
    width: 100%;
    margin: 20px 0 0;
  }

  .sellerModal .scroll .btnBox {
    justify-content: space-between;
  }

  .sellerModal .scroll .btnBox #purpleBtn,
  .sellerModal .scroll .btnBox #logoutBtn {
    width: calc(50% - 8px);
  }
  #promptSales .ant-radio-wrapper {
    /* margin-inline-end: 12px; */
  }
  .form .redSpan {
    font-size: 11px;
  }
  .form .info-area .content .box .info.tagBox + .blueSpan {
    font-size: 11px;
  }
  .form .info-area .content .box .ant-radio-group .ant-radio-wrapper {
    min-width: 81px;
  }
  .content:has(.flexColStart.box) .box.resultBox > .info:last-child {
    flex-wrap: wrap;
  }
}
@media (max-width: 700px) {
  #promptSales .essentialBox label span {
    font-size: 13px;
  }
  #promptSales .essentialBox label .ant-checkbox-inner {
    min-width: 16px;
    width: 16px;
    height: 16px;
  }
  #promptSales .essentialBox {
    padding: 0;
    gap: 16px;
    /* height: 76px; */
    align-items: start;
  }
  .form .info-area .content {
    gap: 30px;
  }
  .form .info-area .content .box .info {
    margin: 0;
    flex-direction: column;
  }
  .form .info-area .content .box .info > div {
    min-height: auto;
  }
  .form .info-area .content .box .info .plusBox {
    width: 100%;
    height: 100%;
  }
  .form .info-area .content .box .info.music .plusBox {
    height: auto;
  }
  .form .info-area .content .box .thum {
    width: 100%;
  }
  .form .info-area .content .box.resultBox .info .plusBox > div {
    height: 160px;
    padding: 8px 0px;
  }
  .form .ant-form {
    gap: 30px;
  }
  .form .rsWrapper .titleBox {
    width: 100% !important;
  }
  .form .rsWrapper .titleBox .title h1 {
    font-size: 20px;
  }
  .content:has(.flexColStart.box) .box.resultBox .info:has(.music) {
    align-items: flex-start;
  }

  .form .info-area .content .box .info .list_fileBox + .ant-upload-wrapper {
    display: none;
  }
  .form .info-area .title.AI {
    margin-bottom: 15px;
  }
 .ant-col-6:has(.contW) {
    min-width: 50%;
  }
}

.close-icon {
  cursor: pointer;
  width: 20px;
  height: 20px;
}

.dictionary-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 0;
  border-bottom: 2px solid #000;
}

.search-select {
  width: 120px;
}

.search-input {
  flex: 1 1;
}

.dictionary-content {
  position: relative;
  width: 100%;
  height: 100%;
  max-height: calc(100vh - 150px);
  min-height: 100px;
  flex: 1 1;
  overflow: hidden;
}

.table-container,
.detail-container {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease-in-out;
}

.table-wrapper {
  display: none;
}

.table-wrapper.visible {
  display: block;
}

.noSearch {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  font-size: 160%;
  z-index: 10;
}

.table-container.slide-out {
  transform: translateX(-100%);
}

.table-container.slide-in {
  transform: translateX(0);
}

.detail-container {
  transform: translateX(100%);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.detail-container.slide-in {
  transform: translateX(0);
}

.detail-container.slide-out {
  transform: translateX(100%);
}

.detail-section {
  margin-bottom: 20px;
  padding: 20px;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.5s ease forwards;
}

.detail-header {
  display: flex;
  align-items: center;
  padding: 40px 0;
}

.back-button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  transition: background-color 0.3s;
  border-radius: 4px;
  scale: 0.8;
}

.content-container {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  font-size: 16px;
}

/* .content-container.view + .ant-form-vertical .ant-form-item:not(.ant-form-item-horizontal) .ant-form-item-control {
  max-width: 320px;
} */

.content-container.view + .uploadThum .ant-form-item-control {
  width: 320px;
  height: 100%;
}
.content-container.view + .uploadThum .ant-form-item-control-input-content > div,
.content-container.view + .uploadThum .ant-form-item-control-input-content {
  height: 180px;
}
.content-container.view + .uploadThum .ant-form-item-control-input-content .plusBox {
  height: 100%;
}
.content-container p {
  font-size: 16px;
}
.view figure {
  padding: 24px 0;
}
.view figure img {
  width: 100%;
}

.detailRoot {
  flex: 1 1;
  text-align: center;
}

.detailRoot h2 {
  margin-bottom: 10px;
  font-size: 40px;
  font-weight: 700;
}

.detailRoot p {
  font-size: 24px;
  font-weight: 600;
}

.back-button:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.detail-table {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.detail-table-header {
  display: flex;
  background-color: #f9f9f9;
  border-bottom: 1px solid #e0e0e0;
}

.detail-table-row {
  display: flex;
}

.detail-cell {
  flex: 1 1;
  padding: 12px;
  text-align: center;
  border: 1px solid #e0e0e0;
  transition: background-color 0.3s;
}

.detail-cell.header {
  font-weight: 600;
  background-color: #f9f9f9;
}

.detail-description {
  margin-top: 24px;
  line-height: 1.6;
  opacity: 0;
  animation: fadeIn 0.5s ease forwards 0.3s;
}

.detail-image-container {
  margin-top: 24px;
  text-align: center;
  opacity: 0;
  animation: fadeIn 0.5s ease forwards 0.5s;
}

.detail-image {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.detail-image:hover {
  transform: scale(1.02);
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.noDetail {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  padding: 20px;
  font-size: 16px;
}

.dictionary-popup > #aui-grid-wrap-0 > div {
  width: 800px;
  height: 800px;
}

/* 게시판 수정 부분과 겹쳐서 .dictionary 로 분리함 */
.dictionary-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}
.dictionary {
  position: fixed;
  background-color: white;
  padding: 20px;
  width: 100%;
  height: 100%;
}
.dictionary .dictionary-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3%;
}
.dictionary .dictionary-header h2 {
  font-size: 24px;
}
.dictionary .back-button {
  width: 32px;
  height: 32px;
  background: url(../../static/media/icon_arrow.587e2ab25c846bbb9eeb.svg) no-repeat center;
  background-size: contain;
}
.dictionary .dictionary-search .search-button {
  width: 40px;
  height: 40px;
  border-radius: 4px;
}
.dictionary .dictionary-content {
  overflow-y: scroll;
}
.dictionary .dictionary-content .table-container {
  padding: 0 1px;
}
@media (max-width: 700px) {
  .dictionary .dictionary-search .ant-select-outlined:not(.ant-select-customize-input) .ant-select-selector {
    height: 40px;
  }
  .content-container.view + .uploadThum .ant-form-item-control {
    width: 100%;
    height: 100%;
  }
  .l-form__list .uploadThum .ant-upload-drag-container p {
    display: block;
  }
}

@charset "UTF-8";
.flexColCenter {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}
.flexColCenter img.uploadthum {
  position: absolute;
  /* top: 0; */
  left: 0;
  width: 100%;

  /* height: 100%;  비율 상관없이 가려지게*/
}
.flexColCenter img.uploadimg {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  /* height: 100%; */
}

.flexColStart {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
}

.flexColEnd {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
}

.flexColAround {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  width: 100%;
}

.flexColBetween {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.flexRowCenter {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.flexRowStart {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
}

.flexRowEnd {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
}

.flexRowAround {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  width: 100%;
}

.flexRowBetween {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.flexWrap {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.flexWrapCenter {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  justify-content: center;
}

.rsWrapper {
  width: 1518px;
}

.s-container.admin .rsWrapper {
  width: inherit;
}

.userTabWrap {
  display: flex;
  overflow: hidden;
  width: 100%;
}
.userTabWrap:has(.artist.active) + .userInfo,
.userTabWrap:has(.artist.active) + .userInfo * {
  justify-content: center;
  text-align: center;
  width: 100%;
  border-radius: 8px;
  font-size: 16px;
  /* height: 80px; */
  align-items: center;
}
.userTabWrap:has(.artist.active) + .userInfo:has(.userThumb) > div * {
  justify-content: start;
  display: flex;
}
.userTabWrap:has(.artist.active) + .userInfo button {
  height: 48px;
}
.userTabWrap:has(.artist.active) + .userInfo button span {
  width: auto;
  font-size: 14px;
}

#header .rsWrapper .userWrapper .userInfo > div:has(button) {
  width: 100%;
}
.userTabWrap div {
  flex: 1 1;
  text-align: center;
  padding: 10px 4px 10px 4px;
  background-color: #f0e6ff;
  font-weight: 600;
  font-size: 14px;
  border: none;
  cursor: pointer;
  color: #86748f;
}
.userTabWrap div.active {
  background-color: #fff;

  background: linear-gradient(90deg, #b041f3 0%, #ec15ff 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media (max-width: 1518px) {
  .rsWrapper {
    /* width: 1280px; */
    width: calc(100% - 32px);
  }
}
@media (max-width: 1280px) {
  .rsWrapper {
    width: 1100px;
    width: calc(100% - 32px);
  }
  #aiWrapper {
    margin: 28px 0 0;
  }
}
@media (max-width: 1100px) {
  .rsWrapper {
    width: 100%;
    padding: 0 16px;
  }
  .rsWrapper:has(.title.tabArea) {
    /* padding: 0; */
    width: 100vw;
  }
}
/* btn */
#pinkBtn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background: #e94cf7;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  color: #ffffff;
  border: 1px solid #e94cf7;
  border-radius: 4px;
}

.btnDisable {
  background: grey !important;
  border: 1px solid #e94cf7 !important;
  cursor: auto !important;
}

#pinkBtn:hover {
  box-shadow: inset 0 0 0 200px rgba(0, 0, 0, 0.2);
}
#pinkBtn div {
  width: auto;
  position: relative;
}
#pinkBtn div img.activeImg {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 2;
  transition: all 0.2s ease-in-out;
}
#pinkBtn:hover img.activeImg {
  opacity: 1;
}

#purpleBtn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background: linear-gradient(to right, #b041f3, #ec15ff);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  color: #ffffff;
  border: 1px solid transparent;
  gap: 8px;
  font-size: 16px;
}
#purpleBtn:hover {
  box-shadow: inset 0 0 0 200px rgba(0, 0, 0, 0.2);
}
#purpleBtn div {
  width: auto;
  position: relative;
}
#purpleBtn div img.activeImg {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 2;
  transition: all 0.2s ease-in-out;
}
#purpleBtn:hover img.activeImg {
  opacity: 1;
}

#whiteBorderBtn {
  color: #ffffff;
  border: 1px solid #ffffff;
  border-radius: 4px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
#whiteBorderBtn:hover {
  box-shadow: inset 0 0 0 200px rgba(0, 0, 0, 0.2);
}

.active#whiteBorderBtn {
  background: rgba(255, 255, 255, 0.5);
}

#whiteBorderBtn div {
  width: auto;
  position: relative;
}
#whiteBorderBtn div img.activeImg {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 2;
  transition: all 0.2s ease-in-out;
}
#whiteBorderBtn:hover img.activeImg {
  opacity: 1;
}

#whiteBtn {
  width: 80px;
  height: 36px;
  border-radius: 50px;
  border: 1px solid #6d6c75;
  color: #000;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-weight: 500;
}
#whiteBtn div {
  width: auto;
  position: relative;
}
#whiteBtn div img.activeImg {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 2;
  transition: all 0.2s ease-in-out;
}
#whiteBtn:hover {
  box-shadow: inset 0 0 0 200px rgba(0, 0, 0, 0.2);
}

#whiteBtn2 {
  width: 80px;
  height: 36px;
  border-radius: 50px;
  border: 1px solid #ffffff;
  color: #000000;
  background: #ffffff;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
#whiteBtn2 div {
  width: auto;
  position: relative;
}
#whiteBtn2 div img.activeImg {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 2;
  transition: all 0.2s ease-in-out;
}
#whiteBtn2:hover {
  box-shadow: inset 0 0 0 200px rgba(0, 0, 0, 0.2);
}

#loginBtn {
  background: linear-gradient(to right, #13d5df 0%, #f138fc 100%);
  cursor: pointer;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
#loginBtn:hover {
  box-shadow: 0 0 4px 2px rgba(255, 255, 255, 0.5);
}
#loginBtn div {
  width: auto;
  position: relative;
}
#loginBtn div img.activeImg {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 2;
  transition: all 0.2s ease-in-out;
}
#loginBtn:hover img.activeImg {
  opacity: 1;
}

#logoutBtn {
  background: #ffffff;
  border: solid 1px #efecf1;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  outline: 0;
}
#logoutBtn:hover {
  border: 0;
  box-shadow: inset 0 0 0 200px rgba(0, 0, 0, 0.2);
}
#logoutBtn div {
  width: auto;
  position: relative;
}
#logoutBtn div img.activeImg {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 2;
  transition: all 0.2s ease-in-out;
}
#logoutBtn:hover img.activeImg {
  opacity: 1;
}

#pinkBtn2 {
  border: solid 1px #d7d4db;
  background: #ffffff;
  color: #3e3d53;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
#pinkBtn2.active,
#pinkBtn2:hover {
  background: linear-gradient(to right, #ca79fc 0%, #ff5eb6 100%);
  color: #ffffff;
  border: 1px solid transparent;
  font-weight: 500;
}
#pinkBtn2 div {
  width: auto;
  position: relative;
}
#pinkBtn2 div img.activeImg {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 2;
  transition: all 0.2s ease-in-out;
}
#pinkBtn2:hover img.activeImg {
  opacity: 1;
}
@media (hover: none) and (pointer: coarse) {
  #pinkBtn2:not(.active):hover {
    background: none !important;
    color: inherit !important;
    border: 1px solid #ccc !important;
  }
}
#darkGrey {
  border: solid 1px #525162;
  background: #525162;
  color: #ffffff;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  gap: 8px;
}
#darkGrey:hover {
  /* border: 0; */
  box-shadow: inset 0 0 0 200px rgba(0, 0, 0, 0.2);
}
#darkGrey div {
  width: auto;
  position: relative;
}
#darkGrey div img.activeImg {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 2;
  transition: all 0.2s ease-in-out;
}
#darkGrey:hover img.activeImg {
  opacity: 1;
}

#darkGrey2 {
  border: solid 1px #ccc;
  background: #ffffff;
  color: #000000;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
#darkGrey2:hover {
  border: 0;
  box-shadow: inset 0 0 0 200px rgba(0, 0, 0, 0.2);
}
#darkGrey2 div {
  width: auto;
  position: relative;
}
#darkGrey2 div img.activeImg {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 2;
  transition: all 0.2s ease-in-out;
}
#darkGrey2:hover img.activeImg {
  opacity: 1;
}

#darkGrey3 {
  background: #525162;
  color: #ffffff;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  border: none;
}
#darkGrey3:hover {
  border: 0;
  box-shadow: inset 0 0 0 200px rgba(0, 0, 0, 0.2);
}
#darkGrey3 div {
  width: auto;
  position: relative;
}
#darkGrey3 div img.activeImg {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 2;
  transition: all 0.2s ease-in-out;
}
#darkGrey3:hover img.activeImg {
  opacity: 1;
}

#darkGreyBorder {
  border: 1px solid #3e3d53;
  background: transparent;
  color: #3e3d53;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
#darkGreyBorder:hover {
  border: 0;
  box-shadow: inset 0 0 0 200px rgba(0, 0, 0, 0.2);
}
#darkGreyBorder div {
  width: auto;
  position: relative;
}
#darkGreyBorder div img.activeImg {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 2;
  transition: all 0.2s ease-in-out;
}
#darkGreyBorder:hover img.activeImg {
  opacity: 1;
}

#blueBtn {
  background: #eaf2f8;
  color: #939ca7;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  border: solid 1px rgba(0, 0, 0, 0.05);
}
#blueBtn:hover {
  border: 0;
  box-shadow: inset 0 0 0 200px rgba(0, 0, 0, 0.2);
}
#blueBtn div {
  width: auto;
  position: relative;
}
#blueBtn div img.activeImg {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 2;
  transition: all 0.2s ease-in-out;
}
#blueBtn:hover img.activeImg {
  opacity: 1;
}

#greyBtn {
  border: solid 1px #a3a1a7;
  background: #a3a1a7;
  color: #ffffff;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
#greyBtn:hover {
  border: 0;
  box-shadow: inset 0 0 0 200px rgba(0, 0, 0, 0.2);
}
#greyBtn div {
  width: auto;
  position: relative;
}
#greyBtn div img.activeImg {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 2;
  transition: all 0.2s ease-in-out;
}
#greyBtn:hover img.activeImg {
  opacity: 1;
}

#greyBtn2 {
  border: solid 1px #ffffff;
  background: #ffffff;
  color: #000000;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
#greyBtn2:hover {
  border: 0;
  box-shadow: inset 0 0 0 200px rgba(0, 0, 0, 0.2);
}
#greyBtn2 div {
  width: auto;
  position: relative;
}
#greyBtn2 div img.activeImg {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 2;
  transition: all 0.2s ease-in-out;
}
#greyBtn2:hover img.activeImg {
  opacity: 1;
}

#greyBtn3 {
  border: solid 1px #f4f5f7;
  background: #f4f5f7;
  color: #000000;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
#greyBtn3:hover {
  border: 0;
  box-shadow: inset 0 0 0 200px rgba(0, 0, 0, 0.2);
}
#greyBtn3 div {
  width: auto;
  position: relative;
}
#greyBtn3 div img.activeImg {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 2;
  transition: all 0.2s ease-in-out;
}
#greyBtn3:hover img.activeImg {
  opacity: 1;
}

#greyBtn4 {
  border: solid 1px #f3f3f3;
  background: #f3f3f3;
  color: #000000;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
#greyBtn4:hover {
  border: 0;
  box-shadow: inset 0 0 0 200px rgba(0, 0, 0, 0.2);
}
#greyBtn4 div {
  width: auto;
  position: relative;
}
#greyBtn4 div img.activeImg {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 2;
  transition: all 0.2s ease-in-out;
}
#greyBtn4:hover img.activeImg {
  opacity: 1;
}

#greyBtn5 {
  border: solid 1px #e2dfe4;
  background: transparent;
  color: #000000;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
#greyBtn5:hover {
  background: #e2dfe4;
}

#kakao {
  border: solid 1px #fee500;
  background: #fee500;
  color: #191919;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  font-weight: 600;
}
#kakao:hover {
  border: 0;
  box-shadow: inset 0 0 0 200px rgba(0, 0, 0, 0.2);
}
#kakao div {
  width: auto;
  position: relative;
}
#kakao div img.activeImg {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 2;
  transition: all 0.2s ease-in-out;
}
#kakao:hover img.activeImg {
  opacity: 1;
}

#naver {
  border: solid 1px #03cf5d;
  background: #03cf5d;
  color: #ffffff;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  font-weight: 600;
}
#naver:hover {
  border: 0;
  box-shadow: inset 0 0 0 200px rgba(0, 0, 0, 0.2);
}
#naver div {
  width: auto;
  position: relative;
}
#naver div img.activeImg {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 2;
  transition: all 0.2s ease-in-out;
}
#naver:hover img.activeImg {
  opacity: 1;
}

#facebook {
  border: solid 1px #3d5a98;
  background: #3d5a98;
  color: #ffffff;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  font-weight: 600;
}
#facebook:hover {
  border: 0;
  box-shadow: inset 0 0 0 200px rgba(0, 0, 0, 0.2);
}
#facebook div {
  width: auto;
  position: relative;
}
#facebook div img.activeImg {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 2;
  transition: all 0.2s ease-in-out;
}
#facebook:hover img.activeImg {
  opacity: 1;
}

#google {
  border: solid 1px #d7d7d7;
  background: #ffffff;
  color: #0e0e1f;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  font-weight: 600;
}
#google:hover {
  border: 0;
  box-shadow: inset 0 0 0 200px rgba(0, 0, 0, 0.2);
}
#google div {
  width: auto;
  position: relative;
}
#google div img.activeImg {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 2;
  transition: all 0.2s ease-in-out;
}
#google:hover img.activeImg {
  opacity: 1;
}

/* 스크롤바 */
::-webkit-scrollbar {
  display: none;
}

.scroll::-webkit-scrollbar {
  width: 6px;
  background-color: transparent;
  display: inline;
  display: initial;
  height: 6px;
}
.scroll::-webkit-scrollbar-thumb {
  background-color: #8c8c8c;
  border-radius: 4px;
}

/* checkbox */
.ant-checkbox-checked .ant-checkbox-inner,
.ant-checkbox-wrapper:not(.ant-checkbox-wrapper-disabled):hover .ant-checkbox-checked:not(.ant-checkbox-disabled) .ant-checkbox-inner,
.ant-checkbox-checked .ant-checkbox-inner {
  background: linear-gradient(to right, #b041f3 0%, #ec15ff 100%);
  border-color: #ec15ff;
}

/* select */
.ant-select-focused.ant-select-outlined:not(.ant-select-disabled):not(.ant-select-customize-input):not(.ant-pagination-size-changer) .ant-select-selector {
  border-color: #ec15ff !important;
}

.ant-select-selector:hover {
  border-color: #ec15ff !important;
}

/* radio */
.ant-radio-wrapper-checked .ant-radio-checked .ant-radio-inner,
:where(.css-dev-only-do-not-override-5wsri9).ant-radio-wrapper .ant-radio-checked .ant-radio-inner {
  border-color: #ec15ff;
  background-color: #ec15ff;
}

.ant-checkbox:not(.ant-checkbox-disabled):hover .ant-checkbox-inner,
.ant-radio-wrapper:hover .ant-radio-inner {
  border-color: #ec15ff !important;
}

/* RATE */
.ant-rate {
  color: #ffa514;
}
.ant-rate .ant-rate-star:not(:last-child) {
  margin: 0 2px;
}
.ant-checkbox .ant-checkbox-inner {
  width: 20px;
  height: 20px;
}

/* checkbox */
.ant-rate .ant-rate-star:not(:last-child) {
  margin: 0 2px;
}

.ant-rate .ant-rate-star:not(:last-child) {
  margin: 0 2px;
}
.ant-rate.not-empty.index-0 li.ant-rate-star:nth-child(n + 2),
.ant-rate.not-empty.index-0.width-0 li.ant-rate-star:nth-child(1) {
  display: none;
}
.ant-rate.not-empty.index-1 li.ant-rate-star:nth-child(n + 3),
.ant-rate.not-empty.index-1.width-0 li.ant-rate-star:nth-child(2) {
  display: none;
}
.ant-rate.not-empty.index-2 li.ant-rate-star:nth-child(n + 4),
.ant-rate.not-empty.index-2.width-0 li.ant-rate-star:nth-child(3) {
  display: none;
}
.ant-rate.not-empty.index-3 li.ant-rate-star:nth-child(n + 5),
.ant-rate.not-empty.index-3.width-0 li.ant-rate-star:nth-child(4) {
  display: none;
}
.ant-rate.not-empty.index-4.width-0 li.ant-rate-star:nth-child(5) {
  display: none;
}
.ant-rate.index-0.width-1 li.ant-rate-star:nth-child(1) .ant-rate-star-first,
.ant-rate.index-1.width-1 li.ant-rate-star:nth-child(2) .ant-rate-star-first,
.ant-rate.index-2.width-1 li.ant-rate-star:nth-child(3) .ant-rate-star-first,
.ant-rate.index-3.width-1 li.ant-rate-star:nth-child(4) .ant-rate-star-first,
.ant-rate.index-4.width-1 li.ant-rate-star:nth-child(5) .ant-rate-star-first {
  width: 10% !important;
  color: inherit;
  z-index: 1;
  opacity: 1;
}
.ant-rate.index-0.width-2 li.ant-rate-star:nth-child(1) .ant-rate-star-first,
.ant-rate.index-1.width-2 li.ant-rate-star:nth-child(2) .ant-rate-star-first,
.ant-rate.index-2.width-2 li.ant-rate-star:nth-child(3) .ant-rate-star-first,
.ant-rate.index-3.width-2 li.ant-rate-star:nth-child(4) .ant-rate-star-first,
.ant-rate.index-4.width-2 li.ant-rate-star:nth-child(5) .ant-rate-star-first {
  width: 20% !important;
  color: inherit;
  z-index: 1;
  opacity: 1;
}
.ant-rate.index-0.width-3 li.ant-rate-star:nth-child(1) .ant-rate-star-first,
.ant-rate.index-1.width-3 li.ant-rate-star:nth-child(2) .ant-rate-star-first,
.ant-rate.index-2.width-3 li.ant-rate-star:nth-child(3) .ant-rate-star-first,
.ant-rate.index-3.width-3 li.ant-rate-star:nth-child(4) .ant-rate-star-first,
.ant-rate.index-4.width-3 li.ant-rate-star:nth-child(5) .ant-rate-star-first {
  width: 30% !important;
  color: inherit;
  z-index: 1;
  opacity: 1;
}
.ant-rate.index-0.width-4 li.ant-rate-star:nth-child(1) .ant-rate-star-first,
.ant-rate.index-1.width-4 li.ant-rate-star:nth-child(2) .ant-rate-star-first,
.ant-rate.index-2.width-4 li.ant-rate-star:nth-child(3) .ant-rate-star-first,
.ant-rate.index-3.width-4 li.ant-rate-star:nth-child(4) .ant-rate-star-first,
.ant-rate.index-4.width-4 li.ant-rate-star:nth-child(5) .ant-rate-star-first {
  width: 40% !important;
  color: inherit;
  z-index: 1;
  opacity: 1;
}
.ant-rate.index-0.width-5 li.ant-rate-star:nth-child(1) .ant-rate-star-first,
.ant-rate.index-1.width-5 li.ant-rate-star:nth-child(2) .ant-rate-star-first,
.ant-rate.index-2.width-5 li.ant-rate-star:nth-child(3) .ant-rate-star-first,
.ant-rate.index-3.width-5 li.ant-rate-star:nth-child(4) .ant-rate-star-first,
.ant-rate.index-4.width-5 li.ant-rate-star:nth-child(5) .ant-rate-star-first {
  width: 50% !important;
  color: inherit;
  z-index: 1;
  opacity: 1;
}
.ant-rate.index-0.width-6 li.ant-rate-star:nth-child(1) .ant-rate-star-first,
.ant-rate.index-1.width-6 li.ant-rate-star:nth-child(2) .ant-rate-star-first,
.ant-rate.index-2.width-6 li.ant-rate-star:nth-child(3) .ant-rate-star-first,
.ant-rate.index-3.width-6 li.ant-rate-star:nth-child(4) .ant-rate-star-first,
.ant-rate.index-4.width-6 li.ant-rate-star:nth-child(5) .ant-rate-star-first {
  width: 60% !important;
  color: inherit;
  z-index: 1;
  opacity: 1;
}
.ant-rate.index-0.width-7 li.ant-rate-star:nth-child(1) .ant-rate-star-first,
.ant-rate.index-1.width-7 li.ant-rate-star:nth-child(2) .ant-rate-star-first,
.ant-rate.index-2.width-7 li.ant-rate-star:nth-child(3) .ant-rate-star-first,
.ant-rate.index-3.width-7 li.ant-rate-star:nth-child(4) .ant-rate-star-first,
.ant-rate.index-4.width-7 li.ant-rate-star:nth-child(5) .ant-rate-star-first {
  width: 70% !important;
  color: inherit;
  z-index: 1;
  opacity: 1;
}
.ant-rate.index-0.width-8 li.ant-rate-star:nth-child(1) .ant-rate-star-first,
.ant-rate.index-1.width-8 li.ant-rate-star:nth-child(2) .ant-rate-star-first,
.ant-rate.index-2.width-8 li.ant-rate-star:nth-child(3) .ant-rate-star-first,
.ant-rate.index-3.width-8 li.ant-rate-star:nth-child(4) .ant-rate-star-first,
.ant-rate.index-4.width-8 li.ant-rate-star:nth-child(5) .ant-rate-star-first {
  width: 80% !important;
  color: inherit;
  z-index: 1;
  opacity: 1;
}
.ant-rate.index-0.width-9 li.ant-rate-star:nth-child(1) .ant-rate-star-first,
.ant-rate.index-1.width-9 li.ant-rate-star:nth-child(2) .ant-rate-star-first,
.ant-rate.index-2.width-9 li.ant-rate-star:nth-child(3) .ant-rate-star-first,
.ant-rate.index-3.width-9 li.ant-rate-star:nth-child(4) .ant-rate-star-first,
.ant-rate.index-4.width-9 li.ant-rate-star:nth-child(5) .ant-rate-star-first {
  width: 90% !important;
  color: inherit;
  z-index: 1;
  opacity: 1;
}

/* .ant-rate.not-empty .ant-rate-star-zero {
  display: none;
} */
.popover-btn {
  border: 1px solid #9254de;
  border-radius: 10px;
  padding: 10px;
  background-color: #9254de;
  color: #ffffff;
}

.prompt-detail-prev.ant-tooltip .ant-tooltip-inner {
  padding: 0;
  background-color: transparent;
  background-color: initial;
  box-shadow: none;
  box-shadow: initial;
}
.prompt-detail-prev.ant-tooltip .ant-tooltip-inner #engineWrapper {
  padding: 0;
}
.prompt-detail-prev.ant-tooltip .ant-tooltip-inner .flexColCenter {
  display: block;
}
.prompt-detail-prev.ant-tooltip .ant-tooltip-inner #engineWrapper .rsWrapper .listBox .gerneBox {
  margin: 0;
}
.prompt-detail-prev.ant-tooltip .ant-tooltip-inner .flexColBetween .play {
  display: flex;
}

#purpleBtn.stroke {
  padding: 0 12px;
  border-radius: 4px;
  background-color: #525162;
  /* line-height: 30px; */
}

/* #darkGrey.fill {
  padding: 0 12px;
  border-radius: 4px;
  background-color: #525162;
  line-height: 30px;
  margin: 0 10px;
} */

/* button p {
  color: #0e0e1f;
} */

@charset "UTF-8";
#header {
  /* width: 100vw; */
  /* padding: 13.5px; */
  background: #ffffff;
  height: 52px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  right: 0;
}
#header .rsWrapper {
  position: relative;
  height: 100%;
  max-width: 1552px;
  width: 100%;
  margin: 0 auto;
  padding: 0 16px;
}
#header .rsWrapper .logo {
  height: 25px;
}
#header .rsWrapper .menuWrapper {
  width: auto;
  height: 100%;
}
#header .rsWrapper .menuWrapper .menu {
  width: auto;
  padding: 0 20px;
  margin: 0 5px;
  cursor: pointer;
  position: relative;
  height: 100%;
}
#header .rsWrapper .menuWrapper .menu:before {
  content: '';
  position: absolute;
  bottom: 0px;
  left: 0;
  height: 4px;
  transition: all 0.2s ease-in-out;
  width: 0;
  background: linear-gradient(to right, #13d5df, #f138fc);
  z-index: 10;
}
#header .rsWrapper .menuWrapper .menu:hover::before,
#header .rsWrapper .menuWrapper .menu.selected::before {
  width: 100%;
}
#header .rsWrapper .menuWrapper .menu:hover .hoverIcon,
#header .rsWrapper .menuWrapper .menu.selected .hoverIcon {
  opacity: 1;
}
#header .rsWrapper .menuWrapper .menu:hover img,
#header .rsWrapper .menuWrapper .menu.selected img {
  opacity: 0;
}
#header .rsWrapper .menuWrapper .menu .hoverIcon {
  position: absolute;
  left: 20px;
  opacity: 0;
}
#header .rsWrapper .menuWrapper .menu img {
  height: 20px;
  margin: 0 15px 0 0;
  transition: all 0.2s ease-in-out;
}
#header .rsWrapper .menuWrapper .menu p {
  font-size: 16px;
  color: #0e0e1f;
  text-wrap-mode: nowrap;
}
#header .rsWrapper .iconBox {
  width: auto;
}
#header .rsWrapper .iconBox .pre img {
  margin: 0;
  width: 16px;
  height: 16px;
}
#header .rsWrapper .iconBox div {
  position: relative;
  width: auto;

  display: flex;
  align-items: center;
  justify-content: flex-start;
}
#header .rsWrapper .iconBox div img {
  width: 20px;
  height: 20px;
  cursor: pointer;
}
#header .rsWrapper .iconBox .profile {
  width: 24px;
  height: 24px;
  border-radius: 100%;
  border: 1px solid rgba(16, 16, 16, 0.2);
}
#header .rsWrapper .iconBox div .round {
  width: 8px;
  height: 8px;
  border-radius: 100%;
  background: #fe5139;
  position: absolute;
  right: -2px;
  top: 2px;
  width: 8px;
  padding: 0;
}
#header .rsWrapper .cartWrapper {
  position: absolute;
  top: 52px;
  right: 0;
  background: #ffffff;
  width: 375px;
  border-radius: 0 0 10px 10px;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
  gap: 8px;
  display: flex;
  flex-direction: column;
}
#header .rsWrapper .cartWrapper .titleBox {
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  height: 76px;
}
#header .rsWrapper .cartWrapper .titleInfo {
  display: flex;
  justify-content: start;
  flex-direction: row;
  align-items: center;
  gap: 16px;
}
#header .rsWrapper .cartWrapper .titleInfo img {
  width: 20px;
}

#header .rsWrapper .cartWrapper .titleBox > img {
  width: 20px;
  height: 20px;
  margin-top: 8px;
  cursor: pointer;
}
#header .rsWrapper .cartWrapper .titleBox h1 {
  /* margin: 0 16px; */
  font-size: 20px;
  font-weight: 700;
}
#header .rsWrapper .cartWrapper .titleBox .round {
  width: auto;
  padding: 4px;
  background: #f34144;
  font-size: 12px;
  color: #ffffff;
  min-width: 20px;
  text-align: center;
  border-radius: 100px;
}
#header .cartWrapper .checkarea {
  padding: 0 20px 8px;
  width: 100%;
}
#header .rsWrapper .cartWrapper > img {
  width: 20px;
  cursor: pointer;
}
#header .rsWrapper .cartWrapper .cartBox {
  padding: 4px 20px 0;
  flex-wrap: wrap;
}
#header .rsWrapper .cartWrapper .cartBox .cart {
  width: calc(50% - 7.5px);
  margin: 0 15px 20px 0;
  border-radius: 20px;
  border: 4px solid #fff;
  cursor: pointer;
}
#header .rsWrapper .cartWrapper .cartBox .cart:nth-child(2n) {
  margin: 0 0 20px;
}
#header .rsWrapper .cartWrapper .cartBox .cart .thumbnailBox {
  position: relative;
  width: 100%;
  height: 90px;
  border-radius: 16px 16px 0 0;
  overflow: hidden;
}
#header .rsWrapper .cartWrapper .cartBox .cart .thumbnailBox .thumb {
  width: 100%;
  height: 100%;
  position: relative;
}
#header .rsWrapper .cartWrapper .cartBox .cart .thumbnailBox .thumb .absoluteBox {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
}
#header .rsWrapper .cartWrapper .cartBox .cart .thumbnailBox > img {
  width: 100%;
  height: 100%;
}
#header .rsWrapper .cartWrapper .cartBox .cart .thumbnailBox > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 4px 4px 8px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, rgba(102, 102, 102, 0) 100%);
}
#header .rsWrapper .cartWrapper .cartBox .cart .thumbnailBox > div .top div {
  width: auto;
}
#header .rsWrapper .cartWrapper .cartBox .cart .thumbnailBox > div .top div > img {
  width: 16px;
}
#header .rsWrapper .cartWrapper .cartBox .cart .thumbnailBox > div .top div > h1 {
  padding: 4px;
  border-radius: 8px;
  background: #141424;
  font-size: 11px !important;
  font-style: normal;
  font-weight: 400 !important;
  line-height: 100%;
  width: fit-content;
}
#header .rsWrapper .cartWrapper .cartBox .cart .thumbnailBox > div .top .close {
  width: 24px;
  height: 24px;
  border: 1px solid #a3a1a7;
  background: #ffffff;
  padding: 4px;
  border-radius: 100%;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
#header .rsWrapper .cartWrapper .cartBox .cart .thumbnailBox > div .top .close:hover {
  background: #a3a1a7;
}
#header .rsWrapper .cartWrapper .cartBox .cart .thumbnailBox > div .top .close img {
  width: 100%;
}
#header .rsWrapper .cartWrapper .cartBox .cart .thumbnailBox > div h1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  color: #fff;
  text-shadow: 0px 0px 2px #000;
  font-size: 12px;
  font-weight: 500;
}
#header .rsWrapper .cartWrapper .cartBox .cart .bottom {
  /* padding: 4px 8px; */
  background: #e6e6e6;
  align-items: center !important;
  gap: 4px;
  overflow: hidden;
  border-radius: 0 0 16px 16px;
  padding: 8px 8px;
}
#header .rsWrapper .cartWrapper .cartBox .cart .bottom img {
  width: 24px;
  margin: 0 4px 0 0;
  border-radius: 100%;
}
/* #header .rsWrapper .cartWrapper .cartBox .cart .bottom > div {
  width: calc(100% - 24px - 4px);
} */
#header .rsWrapper .cartWrapper .cartBox .cart .bottom div h1 {
  font-size: 12px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  margin: auto 0;
  max-width: 100px;
  padding: 0;
}
#header .rsWrapper .cartWrapper .cartBox .cart .bottom div .priceBox div {
  width: auto;
}
#header .rsWrapper .cartWrapper .cartBox .cart .bottom div .priceBox div img {
  width: 16px;
  margin: 0 4px 0 0;
}
#header .rsWrapper .cartWrapper .cartBox .cart .bottom div .priceBox p {
  font-size: 13px;
  color: #0e0e1f;
  font-weight: 700;
  white-space: nowrap;
}
#header .rsWrapper .cartWrapper > .priceBox {
  padding: 0 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
#header .rsWrapper .cartWrapper > .priceBox .price {
  background: #fdf2ff;
  border-radius: 4px;
  /* margin: 0 0 16px; */
  padding: 11px 16px;
}
#header .rsWrapper .cartWrapper > .priceBox .price h1 {
  color: #525162;
  font-size: 14px;
  font-weight: 600;
  width: 100%;
}
.bottom .greyBox {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  gap: 2px;
  width: 100%;
}
.bottom .greyBox .imgBox {
  display: flex;
  flex-direction: row;
  gap: 0;
  width: 100%;
  min-width: 0;
  flex: 1 1;
}
.bottom .greyBox .imgBox {
  display: flex;
  flex-direction: row;
  gap: 0;
  width: 100%;
  min-width: 0;
  flex: 1 1;
}
.bottom .greyBox p {
  color: #0e0e1f;
  white-space: nowrap;
  margin: auto 0;
}
#header .rsWrapper .cartWrapper > .priceBox .price p {
  background: linear-gradient(to right, #13d5df 0%, #f138fc 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  font-size: 14px;
  font-weight: 600;
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 12px;
  text-align: right;
  justify-content: flex-end;
}

#header .rsWrapper .cartWrapper > .priceBox button {
  width: 100%;
  height: 40px;
  border-radius: 4px;
  font-size: 14px;
}
#header .rsWrapper .cartWrapper > .priceBox button span {
  font-weight: 400;
}
#header .rsWrapper .cartWrapper > .priceBox button:first-child::before {
  background: url(../../static/media/i-buying.d1166eb3e4f19a3d11ca.svg) no-repeat left center;
}
#header .rsWrapper .cartWrapper > .priceBox button:last-child::before {
  background: url(../../static/media/i-trashLine.3a7c900ff5f1019cfe55.svg) no-repeat left center;
  filter: brightness(0.8);
}
#header .rsWrapper .cartWrapper > .priceBox button:first-child:disabled::before,
#header .rsWrapper .cartWrapper > .priceBox button:last-child:disabled::before {
  filter: brightness(0.8);
}

#header .rsWrapper .cartWrapper > .priceBox .cart {
  width: 100%;
  height: 40px;
  border-radius: 4px;
  font-size: 14px;
  display: flex;
  flex-direction: row;
  gap: 12px;
}

#header .rsWrapper .userWrapper {
  position: absolute;
  top: 52px;
  right: 0;
  background: #ffffff;
  width: auto;
  border-radius: 0 0 10px 10px;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
  padding: 8px;
  width: 260px;
}
#header .rsWrapper .userWrapper .userInfo {
  padding: 16px 8px;
}
#header .rsWrapper .userWrapper .userInfo .userThumb {
  width: 48px;
  height: 48px;
  border-radius: 100%;
  margin: 0 15px 0 0;
  position: relative;
  /* box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); */
  overflow: hidden;
}
#header .rsWrapper .userWrapper .userInfo .userThumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#header .rsWrapper .userWrapper .userInfo .userThumb .plusBox {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 16px;
  height: 16px;
  background: #6f767b;
  border-radius: 100%;
  border: 1px solid #6f767b;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
#header .rsWrapper .userWrapper .userInfo .userThumb .plusBox p {
  color: #ffffff;
  font-size: 10px;
}
#header .rsWrapper .userWrapper .userInfo .userThumb .plusBox:hover {
  background: #ffffff;
}
#header .rsWrapper .userWrapper .userInfo .userThumb .plusBox:hover p {
  color: #6f767b;
}
#header .rsWrapper .userWrapper .tabBox {
  padding: 4px;
  background: #f5f5f5;
  border-radius: 8px;
  margin: 0 0 12px;
}
#header .rsWrapper .userWrapper .tabBox > div:first-child {
  width: 65%;
}
#header .rsWrapper .userWrapper .tabBox .tab {
  width: 49%;
  border-radius: 30px 5px 5px 5px;
  color: #3e3d53;
  font-size: 14px;
  font-weight: 600;
  padding: 8px;
}
#header .rsWrapper .userWrapper .tabBox .tab.active {
  background: linear-gradient(to right, #b041f3, #ec15ff);
  color: #ffffff;
  cursor: pointer;
}
#header .rsWrapper .userWrapper .userInfo > div {
  width: calc(100% - 48px - 15px);
}
#header .rsWrapper .userWrapper .userInfo > div h1 {
  font-size: 20px;
  color: #0e0e1f;
  margin: 0 0 4px;
}
#header .rsWrapper .userWrapper .userInfo > div p {
  font-size: 13px;
  color: #6d6c75;
}
#header .rsWrapper .userWrapper .menuBox {
  margin: 16px 0 0;
  padding: 8px 0 0;
  border-top: 1px solid #f0f0f0;
}
#header .rsWrapper .userWrapper .menuBox .menu p {
  height: 36px;
  padding: 0 16px;
  position: relative;
  cursor: pointer;
  gap: 16px;
  display: flex;
  flex-direction: row;
  font-size: 14px;
  color: #6d6c75;
  line-height: 1.2;
  align-items: center;
}
#header .rsWrapper .userWrapper .menuBox .menu p::before {
  width: 16px;
  height: 16px;
  content: '';
}
#header .rsWrapper .userWrapper .menuBox .menu:nth-child(1) p::before {
  background: url(../../static/media/m-my.20724400b8ba8d3c97ac.svg) no-repeat left center;
}
#header .rsWrapper .userWrapper .menuBox .menu:nth-child(2) p::before {
  background: url(../../static/media/m-builder2.ac7f0e83d2811bae63fc.svg) no-repeat left center;
}
#header .rsWrapper .userWrapper .menuBox .menu:nth-child(3) p::before {
  background: url(../../static/media/m-market.cdb67825f3823b787bd9.svg) no-repeat left center;
}
#header .rsWrapper .userWrapper .menuBox .menu:nth-child(4) p::before {
  background: url(../../static/media/m-chat.bdb07ac86dd33346cb0f.svg) no-repeat left center;
}

#header .rsWrapper .userWrapper:has(.artist.active) .menuBox .menu:nth-child(1) p::before {
  background: url(../../static/media/m-home.01eb393a927c4abef439.svg) no-repeat left center;
}
#header .rsWrapper .userWrapper:has(.artist.active) .menuBox .menu:nth-child(2) p::before {
  background: url(../../static/media/m-record.0b3c5e5ae85b3936a376.svg) no-repeat left center;
}
#header .rsWrapper .userWrapper:has(.artist.active) .menuBox .menu:nth-child(3) p::before {
  background: url(../../static/media/m-news.c67e6ad0bc22f1ff22fe.svg) no-repeat left center;
}

#header .rsWrapper .userWrapper .menuBox .menu:nth-child(1):hover p::before {
  background: url(../../static/media/m-myOn.01d177ba870eedc37c4f.svg) no-repeat left center;
}
#header .rsWrapper .userWrapper .menuBox .menu:nth-child(2):hover p::before {
  background: url(../../static/media/m-builder2On.94ec8ed678d3b7f66d58.svg) no-repeat left center;
}
#header .rsWrapper .userWrapper .menuBox .menu:nth-child(3):hover p::before {
  background: url(../../static/media/m-marketOn.7b6758930bd16c7cf416.svg) no-repeat left center;
}
#header .rsWrapper .userWrapper .menuBox .menu:nth-child(4):hover p::before {
  background: url(../../static/media/m-chatOn.29d585f886f40cbeb077.svg) no-repeat left center;
}

#header .rsWrapper .userWrapper:has(.artist.active) .menuBox .menu:nth-child(1):hover p::before {
  background-image: url(../../static/media/m-homeOn.0a505ee86cc6fa3db62d.svg);
}
#header .rsWrapper .userWrapper:has(.artist.active) .menuBox .menu:nth-child(2):hover p::before {
  background-image: url(../../static/media/m-recordOn.fd47ad09a6a901ca8e1a.svg);
}
#header .rsWrapper .userWrapper:has(.artist.active) .menuBox .menu:nth-child(3):hover p::before {
  background-image: url(../../static/media/m-newsOn.d81f8c20572118c9b562.svg);
}

#header .rsWrapper .userWrapper .menuBox .menu:hover img {
  opacity: 0;
}
#header .rsWrapper .userWrapper .menuBox .menu:hover img:first-child {
  opacity: 1 !important;
  z-index: 10;
}
#header .rsWrapper .userWrapper .menuBox .menu svg {
  margin: 0;
  transition: all 0.2s ease-in-out;
}
/* #header .rsWrapper .userWrapper .menuBox .menu p {
  font-size: 14px;
  color: #6d6c75;
  line-height: 1.2;
} */
#header .rsWrapper .userWrapper .menuBox .menu.fill:hover svg path,
#header .rsWrapper .userWrapper .menuBox .menu.fill.active svg path {
  fill: #00a8e4;
}
#header .rsWrapper .userWrapper .menuBox .menu:not(.fill):hover svg path,
#header .rsWrapper .userWrapper .menuBox .menu.active:not(.fill) svg path {
  fill: #00a8e4;
  stroke: #00a8e4;
}
#header .rsWrapper .userWrapper .menuBox .menu:hover p,
#header .rsWrapper .userWrapper .menuBox .menu.active p {
  color: #0e0e1f;
}
#header .rsWrapper .userWrapper #logoutBtn.pre {
  width: 100%;
  margin: 12px 0 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border: 1px solid #e2dfe4;
  padding: 8px 12px;
  border-radius: 8px;
  height: 48px;
  margin-left: 4px;
  font-weight: 600;
  text-wrap-mode: nowrap;
  cursor: pointer;
}

#logoutBtn.pre.member {
  border-color: #c718e2 !important;
  color: #c718e2;
}

#logoutBtn.pre.member:active {
  box-shadow: inset 0 0 0 200px rgba(0, 0, 0, 0.2);
  border-color: transparent;
  outline: rgba(255, 94, 182, 0.7);
}

#header .rsWrapper .userWrapper #logoutBtn {
  margin: 0;
  display: flex;
  padding: 8px 12px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex: 1 0;
  align-self: stretch;
  border-radius: 24px;
  border: 1px solid #dfdce4;
  border: 1px solid var(--b-input, #dfdce4);
  background: #fff;
  height: 34px;
}

#header .rsWrapper .userWrapper #logoutBtn img {
  height: 18px;
  /* margin: 0 8px 0 0; */
}
#header .rsWrapper .userWrapper #logoutBtn p {
  font-size: 14px;
  text-wrap-mode: nowrap;
}
#header .rsWrapper .menuIcon {
  display: none;
}
#header .mobileMenuWrapper,
#header .mobileCart {
  display: none;
}
/*design.css*/
header {
  box-shadow: inset 0 -1px 0px 0px rgb(230, 230, 230);
}

#header .rsWrapper .userWrapper .btnArea {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
}

#header .rsWrapper .iconBox {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: auto;
  gap: 20px;
}
#header .rsWrapper .iconBox:has(.pre) {
  gap: 8px;
}
#header .rsWrapper .iconBox .pre {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border: 1px solid #e2dfe4;
  padding: 8px 12px;
  border-radius: 8px;
  height: 36px;
  margin-left: 4px;
  font-weight: 600;
  text-wrap-mode: nowrap;
  cursor: pointer;
}
#header .rsWrapper .iconBox .pre img {
  margin: 0;
  width: 16px;
  height: 16px;
}
#header .rsWrapper .iconBox .pre:hover {
  box-shadow: inset 0 0 0 200px rgba(0, 0, 0, 0.2);
  border-color: transparent;
  outline: rgba(255, 94, 182, 0.7);
}
#header .rsWrapper .iconBox .pre.member {
  border-color: #c718e2;
  color: #c718e2;
}

.rsWrapper .cartWrapper .cartBox .cart .thumbnailBox > div .top .flexRowCenter {
  width: auto;
}
.rsWrapper .cartWrapper .cartBox .cart .thumbnailBox > div .top .flexRowCenter img {
  display: none;
}
.rsWrapper .cartWrapper .cartBox .cart .thumbnailBox > div .top .close {
  display: flex;
  justify-content: center;
  align-items: center;
}
.rsWrapper .cartWrapper .cartBox .cart .thumbnailBox > div .top .close img {
  width: 72%;
  height: 72%;
}

/* yjlee.css */
/* 마이 메뉴: header top right */
#header .rsWrapper .userWrapper .menuBox {
  margin: 16px 0 0;
  padding: 8px 0;
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
}
#header .rsWrapper .userWrapper {
  min-width: 200px;
}
#header .mobileMyMenuHeader {
  display: none;
}
#header .rsWrapper .userWrapper .followingBox h1 {
  margin: 0 0 4px;
}
#header .rsWrapper .userWrapper .asidedataBar {
  height: 66px;
  align-self: stretch;
  flex-grow: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  gap: 4px;
  padding: 16px 8px;
}
#header .rsWrapper .userWrapper .asidedataBar .text {
  height: 22px;
  align-self: stretch;
  flex-grow: 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-end;
  gap: 4px;
  padding: 4px 0;
}
#header .rsWrapper .userWrapper .asidedataBar .text span:first-child {
  height: 17px;
  flex-grow: 1;
  font-family: Pretendard;
  font-size: 14px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: -0.28px;
  text-align: left;
  color: #00a8e4;
}
#header .rsWrapper .userWrapper .asidedataBar .text span:last-child {
  height: 14px;
  flex-grow: 1;
  font-family: Pretendard;
  font-size: 12px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: -0.24px;
  text-align: right;
  color: #656262;
}
#header .rsWrapper .userWrapper .asidedataBar .data {
  height: 8px;
  align-self: stretch;
  flex-grow: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 10px;
  padding: 0;
  border-radius: 50px;
  background-color: #e9e9e9;
}
#header .rsWrapper .userWrapper .asidedataBar .data .uses {
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  gap: 10px;
  padding: 0;
  border-radius: 50px;
  background-image: linear-gradient(to right, #13d5df 0%, #f138fc 100%);
}
/* 장바구니 */
/* 유저 */
@media (max-width: 1280px) {
  #header .rsWrapper .menuWrapper .menu {
    margin: 0;
    padding: 0 3%;
  }
  #header .rsWrapper .menuWrapper .menu .hoverIcon {
    left: 16px;
  }
  #header .rsWrapper .menuWrapper .menu img {
    margin: 0 10px 0 0;
  }
}
@media (max-width: 1100px) {
  #header .rsWrapper .menuWrapper,
  #header .rsWrapper .iconBox div:not(:last-child),
  #header .rsWrapper .iconBox div.member {
    display: none;
  }
  #header .rsWrapper .menuIcon {
    display: flex;
    width: 32px;
  }
  #header .mobileMenuBg {
    background: rgba(0, 0, 0, 0.5);
    /* width: 100vw; */
    /* height: 100vh; */
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    -webkit-backdrop-filter: blur(1px);
            backdrop-filter: blur(1px);
    transition: all 0.2s ease-in-out;
    bottom: 0;
    right: 0;
  }
  #header .mobileMenuWrapper {
    width: 280px;
    position: fixed;
    top: 0;
    left: -280px;
    background: #ffffff;
    padding: 40px 18px;
    z-index: -1;
    min-height: 100vh;
    /* height: 100vh; */
    justify-content: flex-start;
    overflow-y: auto;
    transition: all 0.2s ease-in-out;
    display: flex;
    bottom: 0;
  }
  #header .mobileMenuWrapper > div {
    width: 100%;
    justify-content: flex-start;
  }
  #header .mobileMenuWrapper .scroll > div:first-child {
    padding: 0 0 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    margin: 0 0 16px;
  }

  #header .mobileMenuWrapper .scroll > div:first-child .logo {
    height: 24px;
  }
  #header .mobileMenuWrapper div .mobileIconBox {
    width: auto;
  }
  #header .mobileMenuWrapper div .mobileIconBox div {
    position: relative;
  }

  #header .mobileMenuWrapper div .mobileIconBox div img {
    width: 20px;
    margin: 0 20px 0 0;
  }
  #header .mobileMenuWrapper div .mobileIconBox div .round {
    width: 8px;
    height: 8px;
    border-radius: 100%;
    position: absolute;
    top: 0;
    right: 16px;
    background: #fe5139;
  }
  #header .mobileMenuWrapper div .mobileIconBox div:last-child .round {
    right: -4px;
  }
  #header .mobileMenuWrapper div .mobileIconBox div:last-child img {
    width: 15px;
    margin: 0;
  }
  #header .mobileMenuWrapper div #purpleBtn {
    width: 80px;
    height: 32px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
  }
  #header .mobileMenuWrapper div > img {
    width: 20px;
  }
  #header .mobileMenuWrapper .mobileMenu {
    margin: 0 0 10px;
    height: 52px;
    padding: 0 16px;
    border: none;
  }
  #header .mobileMenuWrapper .mobileMenu > img {
    width: 24px;
    margin: 0 12px 0 0;
  }
  #header .mobileMenuWrapper .mobileMenu p {
    font-size: 16px;
  }
  #header .mobileMenuWrapper .loginUser {
    margin: 0 0 12px;
  }
  #header .mobileMenuWrapper .loginUser > img {
    width: 48px;
    height: 48px;
    border-radius: 100%;
    margin: 0 15px 0 0;
  }
  #header .mobileMenuWrapper .loginUser div {
    width: calc(100% - 48px - 15px);
  }
  #header .mobileMenuWrapper .loginUser div h1 {
    font-size: 20px;
    margin: 0 0 5px;
    color: #000000;
  }
  #header .mobileMenuWrapper .loginUser div p {
    font-size: 13px;
    color: #6d6c75;
  }
  #header .mobileMenuWrapper .pointBox {
    margin: 0 0 16px;
  }
  #header .mobileMenuWrapper .pointBox div {
    width: auto;
  }
  #header .mobileMenuWrapper .pointBox div:first-child img {
    width: 20px;
    margin: 0 8px 0 0;
  }
  #header .mobileMenuWrapper .pointBox div:first-child p {
    font-size: 18px;
  }
  #header .mobileMenuWrapper .pointBox div:last-child img {
    width: 13px;
    margin: 0 0 0 4px;
  }
  #header .mobileMenuWrapper .tabBox {
    padding: 4px;
    background: #f5f5f5;
    border-radius: 8px;
    margin: 0 0 10px;
  }
  #header .mobileMenuWrapper .tabBox .tab {
    width: 49%;
    border-radius: 30px 5px 5px 5px;
    color: #3e3d53;
    font-size: 14px;
    font-weight: 600;
    padding: 8px;
  }
  #header .mobileMenuWrapper .tabBox .tab.active {
    background: linear-gradient(to right, #b041f3, #ec15ff);
    color: #ffffff;
  }
  #header .mobileMenuWrapper .followingBox {
    margin: 0 0 22px;
  }
  #header .mobileMenuWrapper .followingBox div {
    width: 50%;
  }
  #header .mobileMenuWrapper .followingBox div h1 {
    font-size: 20px;
    color: #0e0e1f;
    margin: 0 0 5px;
  }
  #header .mobileMenuWrapper .followingBox div p {
    font-size: 14px;
    color: #0e0e1f;
    font-size: 600;
  }
  #header .mobileMenuWrapper .loginMenuBox {
    border-top: 1px solid #e9e9e9;
  }
  #header .mobileMenuWrapper .loginMenuBox .home {
    height: 40px;
    background: #e9e9e9;
    padding: 10px 15px;
    border-radius: 5px;
  }
  #header .mobileMenuWrapper .loginMenuBox .home img {
    width: 20px;
    margin: 0 15px 0 0;
  }
  #header .mobileMenuWrapper .loginMenuBox .home p {
    font-size: 16px;
    color: #3e3d53;
  }
  #header .mobileMenuWrapper .loginMenuBox .home img.activeIcon {
    display: none;
  }
  #header .mobileMenuWrapper .loginMenuBox .home.active p {
    color: #0e0e1f;
  }
  #header .mobileMenuWrapper .loginMenuBox .home.active img {
    display: none;
  }
  #header .mobileMenuWrapper .loginMenuBox .home.active img.activeIcon {
    display: flex;
  }
  #header .mobileMenuWrapper .loginMenuBox .loginMenu {
    padding: 10px 15px;
    height: 48px;
  }
  #header .mobileMenuWrapper .loginMenuBox .loginMenu p {
    font-size: 16px;
  }
  #header .mobileMenuWrapper .loginMenuBox .loginMenu img {
    width: 12px;
  }
  #header .mobileMenuWrapper .loginMenuBox .logSubMenuWrapper {
    border-bottom: 1px solid #dbdbe0;
  }
  #header .mobileMenuWrapper .loginMenuBox .logSubMenuWrapper .loginSubMenu {
    height: 44px;
    padding: 0 20px;
    position: relative;
  }
  #header .mobileMenuWrapper .loginMenuBox .logSubMenuWrapper .loginSubMenu img {
    width: 16px;
    margin: 0 15px 0 0;
  }
  #header .mobileMenuWrapper .loginMenuBox .logSubMenuWrapper .loginSubMenu img.activeIcon {
    display: none;
  }
  #header .mobileMenuWrapper .loginMenuBox .logSubMenuWrapper .loginSubMenu p {
    font-size: 16px;
    color: #6d6c75;
  }
  #header .mobileMenuWrapper .loginMenuBox .logSubMenuWrapper .loginSubMenu.active p {
    color: #0e0e1f;
  }
  #header .mobileMenuWrapper .loginMenuBox .logSubMenuWrapper .loginSubMenu.active img {
    display: none;
  }
  #header .mobileMenuWrapper .loginMenuBox .logSubMenuWrapper .loginSubMenu.active img.activeIcon {
    display: flex;
  }

  #header .cartWrapper {
    display: none;
  }
  #header .mobileCart#mobileCartActive .cartWrapper {
    left: 0;
    gap: 8px;
  }
  #header .mobileCart .cartWrapper {
    display: flex;
    justify-content: flex-start;
    position: fixed;
    top: 0;
    left: -100%;
    background: #ffffff;
    width: 375px;
    height: 100vh;
    z-index: 10000;
    transition: all 0.2s ease-in-out;
  }
  header .mobileCart .cartWrapper .titleBox {
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    height: 76px;
  }
  #header .mobileCart .cartWrapper .titleInfo {
    display: flex;
    justify-content: start;
    flex-direction: row;
    align-items: center;
    gap: 16px;
  }
  #header .mobileCart .cartWrapper .titleInfo img {
    width: 20px;
  }

  #header .mobileCart .cartWrapper .titleBox > img {
    width: 20px;
    height: 20px;
    margin-top: 8px;
  }
  #header .mobileCart .cartWrapper .titleBox h1 {
    /* margin: 0 16px; */
    font-size: 20px;
    font-weight: 700;
  }
  #header .mobileCart .cartWrapper .titleBox .round {
    width: auto;
    padding: 4px;
    background: #f34144;
    font-size: 12px;
    color: #ffffff;
    min-width: 20px;
    text-align: center;
    border-radius: 100px;
  }
  #header .cartWrapper .checkarea {
    padding: 0 20px 4px;
    width: 100%;
  }

  #header .mobileCart .cartWrapper .titleBox {
    padding: 20px 24px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
  }
  #header .mobileCart .cartWrapper div .titleBox {
    width: auto;
  }

  #header .mobileCart .cartWrapper .titleInfo {
    display: flex;
    flex-direction: row;
    justify-content: start;
    width: 100%;
  }
  #header .mobileCart .cartWrapper div .titleBox img {
    width: 20px;
  }
  #header .mobileCart .cartWrapper div .titleBox h1 {
    margin: 0 16px;
    font-size: 20px;
    font-weight: 700;
  }
  #header .mobileCart .cartWrapper div .titleBox div {
    width: auto;
    padding: 4px;
    background: #f34144;
    font-size: 12px;
    color: #ffffff;
    border-radius: 10px;
  }
  #header .mobileCart .cartWrapper div > img {
    width: 24px;
    cursor: pointer;
  }
  #header .mobileCart .cartWrapper .cartBox {
    padding: 8px 20px;
    flex-wrap: wrap;
    /* overflow-y: auto;
    max-height: calc(100% - 110px - 64px); */
    align-items: flex-start;
    gap: 20px 8px;
  }
  #header .mobileCart .cartWrapper .cartBox .cart {
    width: calc(50% - 7.5px);
    margin: 0;
    border-radius: 20px;
    overflow: hidden;
  }
  /* #header .mobileCart .cartWrapper .cartBox .cart:nth-child(2n) {
    margin: 0 0 20px;
  } */
  #header .mobileCart .cartWrapper .cartBox .cart .thumbnailBox {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: calc(198 / 352 * 100%);
    overflow: hidden;
  }
  #header .mobileCart .cartWrapper .cartBox .cart .thumbnailBox > img {
    width: 100%;
    padding-bottom: calc(198 / 352 * 100%);
    overflow: hidden;
  }
  #header .mobileCart .cartWrapper .cartBox .cart .thumbnailBox > div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 4px 8px 8px;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, rgba(102, 102, 102, 0) 100%);
  }
  #header .mobileCart .cartWrapper .cartBox .cart .thumbnailBox > div .top div {
    width: auto;
  }
  #header .mobileCart .cartWrapper .cartBox .cart .thumbnailBox > div .top div > img {
    width: 16px;
    display: none;
  }
  #header .mobileCart .cartWrapper .cartBox .cart .thumbnailBox > div .top div > h1 {
    padding: 4px;
    border-radius: 8px;
    background: #141424;
    font-size: 11px !important;
    font-style: normal;
    font-weight: 400 !important;
    line-height: 100%;
    width: fit-content;
  }
  #header .mobileCart .cartWrapper .cartBox .cart .thumbnailBox > div .top .close {
    width: 24px;
    height: 24px;
    border: 1px solid #a3a1a7;
    background: #ffffff;
    padding: 4px;
    border-radius: 100%;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
  }
  #header .mobileCart .cartWrapper .cartBox .cart .thumbnailBox > div .top .close:hover {
    background: #a3a1a7;
  }
  #header .mobileCart .cartWrapper .cartBox .cart .thumbnailBox > div .top .close img {
    width: 100%;
  }
  #header .mobileCart .cartWrapper .cartBox .cart .thumbnailBox > div h1 {
    font-size: 12px;
    font-weight: 700;
    color: #ffffff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
  }
  #header .mobileCart .cartWrapper .cartBox .cart .bottom {
    padding: 4px 8px;
    background: #e6e6e6;
    border-radius: 0 0 16px 16px;
    gap: 4px;
  }
  #header .mobileCart .cartWrapper .cartBox .cart .bottom .imgBox {
    align-items: center;
  }
  #header .mobileCart .cartWrapper .cartBox .cart .bottom img {
    width: 24px;
    margin: 0 4px 0 0;
    border-radius: 50%;
  }
  /*  #header .mobileCart .cartWrapper .cartBox .cart .bottom > div {
    width: calc(100% - 24px - 4px);
  } */
  #header .mobileCart .cartWrapper .cartBox .cart .bottom div h1 {
    font-size: 12px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
  }
  #header .mobileCart .cartWrapper .cartBox .cart .bottom div .priceBox div {
    width: auto;
  }
  #header .mobileCart .cartWrapper .cartBox .cart .bottom div .priceBox div img {
    width: 16px;
    margin: 0 4px 0 0;
  }
  #header .mobileCart .cartWrapper .cartBox .cart .bottom div .priceBox p {
    font-size: 13px;
    color: #0e0e1f;
    font-weight: 700;
  }
  #header .mobileCart .cartWrapper > .priceBox {
    padding: 20px 24px;
    position: absolute;
    bottom: 0;
  }
  #header .mobileCart .cartWrapper > .priceBox .price {
    background: #fdf2ff;
    padding: 10px;
    border-radius: 4px;
    margin: 0 0 16px;
  }
  #header .mobileCart .cartWrapper > .priceBox .cart {
    gap: 16px;
  }
  #header .mobileCart .cartWrapper > .priceBox .price h1 {
    color: #525162;
    font-size: 14px;
    font-weight: 600;
  }
  #header .mobileCart .cartWrapper > .priceBox .price p {
    background: linear-gradient(to right, #13d5df 0%, #f138fc 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    font-size: 14px;
    font-weight: 600;
  }
  #header .mobileCart .cartWrapper > .priceBox #pinkBtn {
    width: 100%;
    height: 40px;
    border-radius: 4px;
    font-size: 14px;
  }

  #header .mobileCart .cartWrapper > .priceBox #pinkBtn.trash::before {
    filter: brightness(1);
  }
  /* 모바일장바구니 */
  /* 기능 */
  #menuBgVisible {
    display: flex !important;
  }
  #menuVisible {
    opacity: 1 !important;
    left: 0 !important;
    z-index: 10000 !important;
  }
  /* 우측 하단 고정 버튼 */
  #section {
    bottom: 56px;
    right: 20px;
    z-index: 1000;
  }
  #header .mobileCart {
    display: flex;
  }
}
@media (max-width: 900px) {
  #header .rsWrapper .logo {
    height: 18px;
  }
  /*yjlee.css*/

  #header .userWrapper .pointBox {
    margin: 0 0 16px;
  }
  #header .userWrapper .pointBox div {
    width: auto;
  }
  #header .userWrapper .pointBox div:first-child img {
    width: 20px;
    margin: 0 8px 0 0;
  }
  #header .userWrapper .pointBox div:first-child p {
    font-size: 18px;
  }
  #header .userWrapper .followingBox {
    margin: 0 0 16px;
  }
  #header .userWrapper .followingBox div {
    width: 50%;
  }
  #header .userWrapper .followingBox div h1 {
    font-size: 20px;
    color: #0e0e1f;
    margin: 0 0 5px;
  }
  #header .userWrapper .followingBox div p {
    font-size: 12px;
    color: #0e0e1f;
  }

  /* 전체 메뉴: header top left */
  #header .mobileMenuWrapper .flexRowBetween button {
    width: auto;
  }
  #header .mobileMenuWrapper .flexRowBetween button .logo {
    width: 170px;
  }
}
@media (max-width: 700px) {
  #header .mobileCart .cartWrapper {
    display: flex;
    justify-content: flex-start;
    position: fixed;
    top: 0;
    left: -100%;
    background: #ffffff;
    width: 100%;
    height: 100vh;
    z-index: 10000;
    transition: all 0.2s ease-in-out;
  }
  #header .mobileCart .cartWrapper .titleBox {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    height: 76px;
    background: #fff;
  }
  #header .mobileCart .cartWrapper .wrap {
    width: 100%;
    height: 100dvh;
    padding-top: 76px;
    padding-bottom: 130px;
    overflow-y: auto;
  }
  #header .mobileCart .cartWrapper .priceBox {
    position: fixed;
    bottom: 0;
    z-index: 1;
    left: 0;
    height: 130px;
  }
}

#footer {
  margin-top: 30px;
}
#footer article {
  border-top: solid 1px rgba(0, 0, 0, 0.1);
  width: 100%;
  padding: 28px 20px 16px;
  gap: 24px;
}
#footMenu p {
  color: #0e0e1f;
}
#footer article li {
  padding: 0 8px;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
  margin-bottom: 8px;
  font-size: 11px;
  color: #403748;
  font-weight: 400;
}
/* #footer article li:first-child {
  font-weight: 600;
} */
#footer article li:last-child,
#footer article ul:not(.footMenu) li:nth-last-child(2) {
  border: 0;
}
#footer article li button {
  line-height: 1.1;
  color: #403748;
  font-weight: 500;
  /* font-size: 11px; */
}
#footer article li button:hover {
  color: #2687e9;
}
#footer article .logo {
  font-weight: 600;
}
#footer article .footMenu li button p {
  font-size: 14px;
  color: #0e0e1f;
}
#footer article .footMenu button {
  color: #0e0e1f;
}
#footer article .copy {
  color: #87858b;
  width: 100%;
  text-align: center;
  font-weight: 400;
  letter-spacing: -0.3px;
}
.loginSection {
  min-height: 680px;
}
.chatSection {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
@media (max-width: 1100px) {
  #footer {
    padding: 0 0;
    margin: 0;
    margin-top: 30px;
  }
}

@media (max-width: 950px) {
  body:has(.RankingSection) #footer,
  body:has(.chatSection) #footer,
  body:has(.boardsSection) #footer,
  body:has(.gridWrap) #footer {
    display: none;
  }
}
@media (max-width: 700px) {
  #footer {
    padding: 0;
    margin: 0;
    margin-top: 20px;
  }
  #footer article {
    padding: 12px 4px 12px;
  }
  #footer article img {
    margin: 0 0 8px;
  }
  #footer article .footMenu li {
    margin-bottom: 0;
    padding: 0;
    font-size: 13px;
  }

  #footer article .footMenu li button p {
    margin-bottom: 0;
    padding: 0;
    font-size: 13px;
  }
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  /* font-size: 100%;
    font: inherit;
  vertical-align: baseline; */
  box-sizing: border-box;
  /* font-family: 'pretendard'; */
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
  box-sizing: border-box;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

#builder .ant-select-single .ant-select-selector,
#builder .select .ant-input {
  font-size: 12px !important;
}

#builder > div .tab {
  padding: 0 0 16px;
  border-bottom: solid 2px #000;
}

#builder > div .tab:has(+ .content .builderGuide) {
  border-bottom: none;
}
#builder > div .tab #pinkBtn2 {
  width: 150px;
  height: 41px;
  border-radius: 24px;
  font-size: 14px;
  margin: 0 2px;
  line-height: 1;
}

#builder > div .tab #pinkBtn2.active {
  background: linear-gradient(to right, #ca79fc 0%, #ff5eb6 100%);
  color: #ffffff;
  border: 1px solid transparent;
}

#builder div .content {
  padding: 0;
  align-items: flex-start;
  min-height: 620px;
}

#builder div .content .layout {
  width: 60%;
}

#builder div .content .layout .selectWrapper {
  margin: 0 0 16px;
  display: flex;
  gap: 8px;
}

#builder div .content .layout .selectWrapper .ant-select {
  width: 120px;
  height: 32px;
  margin: 0;
}

#builder div .content .layout .ant-layout {
  width: 100%;
}

#builder div .content .layout .ant-layout .menuBox {
  min-width: 900px;
  overflow-x: auto;
}

#builder div .content .layout .ant-layout .headerMenu.ant-menu-horizontal > .ant-menu-item {
  min-width: 110px;
  padding: 0 2px;
  height: 48px;
}
#builder div .content .layout .ant-layout .headerMenu.ant-menu-horizontal > .ant-menu-item.ant-menu-item-selected + li span {
  border-bottom-left-radius: 16px;
}

#builder div .content .layout .ant-layout .headerMenu.ant-menu-horizontal > .ant-menu-item:has(+ .ant-menu-item-selected) span {
  border-bottom-right-radius: 16px;
}
/* #builder div .content .layout .ant-layout .headerMenu.ant-menu-horizontal > .ant-menu-item + li span {
  border-bottom-left-radius: 16px;
} */

#builder div .content .layout .ant-layout .ant-menu.headerMenu .ant-menu-title-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: #525162;
  border-radius: 16px 16px 0 0;
  font-size: 14px;
  height: 48px;
  transition: all 0.2s ease-in-out;
  border-top: 4px solid #525162;
  border-bottom: 4px solid #525162;
  font-weight: 400;
}

.ant-menu-light.ant-menu-horizontal > .ant-menu-item::after {
  border-bottom: none;
  border-bottom-color: transparent;
}
#builder div .content .layout .ant-layout .ant-menu.headerMenu .ant-menu-title-content:hover,
#builder div .content .layout .ant-layout .headerMenu.ant-menu-horizontal > .ant-menu-item.ant-menu-item-selected .ant-menu-title-content {
  background: #ffffff;
  color: #323146;
  height: 48px;
  font-weight: 600;
  border-top-color: #b041f3;
  border-bottom-color: #fff;
  box-shadow: 0px 0 2px rgba(0, 0, 0, 0.1);
}

.ant-breadcrumb li:last-child,
.ant-breadcrumb li:last-child {
  color: #ffffff;
}

#builder div .content .layout .ant-layout .inputBox {
  padding: 0 0 16px;
  /* border-bottom: solid 1px rgba(0, 0, 0, 0.1); */
}

#builder div .content .layout .ant-layout .inputBox:nth-child(3) {
  border-bottom: none;
}

#builder div .content .layout .ant-layout div h1 {
  font-size: 16px;
  font-weight: 600;
  color: #0e0e1f;
  margin: 0 0 6.5px;
}

#builder div .content .layout .ant-layout div div .input {
  width: calc(100% - 77px - 16px);
  height: 40px;
  background: #efecf1;
  box-shadow: none;
  border-radius: 4px;
}

#builder div .content .layout .ant-layout div div .input::placeholder {
  color: #a3a1a7;
}

#builder div .content .layout .ant-layout div div .input:hover {
  border: 1px solid #b041f3;
}

#builder div .content .layout .ant-layout div div .input:focus {
  border: 1px solid #b041f3;
  background: #ffffff;
}

#builder div .content .layout .ant-layout div div #darkGrey2 {
  width: 77px;
  height: 40px;
  border-radius: 4px;
  font-size: 14px;
}

/* 메뉴 디자인 */
.ant-menu-submenu-title {
  background: #f3f3f3;
  border: 1px solid #dbdbe0;
}

/* 메뉴호버시 */
.ant-menu .ant-menu-submenu-inline:hover .ant-menu-submenu-title {
  background: linear-gradient(to right, #ca79fc 0%, #ff5eb6 100%);
}

.ant-menu .ant-menu-submenu-inline:hover .ant-menu-submenu-title > .ant-menu-title-content {
  color: #ffffff;
}

.ant-menu-light .ant-menu-submenu-selected > .ant-menu-submenu-title {
  background: linear-gradient(to right, #ca79fc 0%, #ff5eb6 100%);
  color: #ffffff;
  border: none;
}

/* 서브메뉴 배경색 */
.ant-menu-light.ant-menu-inline .ant-menu-sub.ant-menu-inline {
  background: #ffffff;
}

/* 서브메뉴 선택시 디자인 */
.ant-menu-light .ant-menu-item-selected {
  color: #c718e2;
}

.ant-menu-light .ant-menu-item-selected {
  background: #fdf2ff;
}

/* 서브메뉴 화살표 */
.ant-menu-submenu-arrow {
  display: none;
}

/* 서브메뉴 호버했을때 */
.ant-menu-light:not(.ant-menu-horizontal) .ant-menu-item:not(.ant-menu-item-selected):hover {
  background: #fdf2ff;
  color: #c718e2;
}

#builder div .content .layout .ant-layout .stepTitle {
  margin: 0 0 8px;
}

#builder div .content .layout .ant-layout .stepTitle > p {
  font-size: 16px;
  margin: 0 10px 0 0;
  color: #c718e2;
}

#builder div .content .layout .ant-layout .stepTitle > h2 {
  font-size: 16px;
  font-weight: bold;
  color: #323146;
}

#builder div .content .layout .ant-layout .top {
  margin: 0 0 8px;
}

#builder div .content .layout .ant-layout .top p {
  width: 80px;
  font-size: 14px;
  color: #0e0e1f;
  margin: 0 17px 0 0;
}

#builder div .content .layout .ant-layout .top .line {
  background: #0e0e1f;
  height: 1px;
  width: calc(100% - 50px - 17px);
}

#builder div .content .layout .ant-layout .listBox {
  /* min-height: 130px; */
  overflow: auto;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 20px 0.4%;
}
#builder div .content .layout .ant-layout .listBox:has(p) {
  justify-content: center;
}
#builder div .content .layout .ant-layout .listBox p {
  min-height: 500px;
}
#builder div .content .layout .ant-layout .listBox .builderUse {
  margin-right: 2px;
  width: 100%;
  max-width: 672px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
}
#builder div .content .layout .ant-layout .listBox .builderUse img {
  max-width: 436px;
  width: 100%;
}

#builder div .content .layout .ant-layout .listBox .list#active,
#builder div .content .layout .ant-layout .listBox .list:hover {
  border: 4px solid #ec15ff;
  border-radius: 14px;
}
#builder div .content .layout .ant-layout .listBox .list#active .thumBorder,
#builder div .content .layout .ant-layout .listBox .list:hover .thumBorder {
  display: block !important;
}
#builder div .content .layout .ant-layout .listBox .list#active .absoluteBox,
#builder div .content .layout .ant-layout .listBox .list:hover .absoluteBox {
  background: linear-gradient(to right, #b041f3 0%, #ec15ff 100%);
  color: #ffffff;
}
#builder div .content .layout .ant-layout .listBox .list .imgThum {
  background-color: #f7f7f8;
  height: 0;
  width: 100%;
  padding-bottom: calc(198 / 352 * 100%);
}

#builder div .content .layout .ant-layout .listBox .list#active .imgThum,
#builder div .content .layout .ant-layout .listBox .list:hover .imgThum {
  border-radius: 10px 10px 0 0;
  /* height: 86px; */
  /* left: 50%; */
  /* position: absolute; */
  /* top: 0; */
  /* transform: translateX(-50%); */
  width: 100%;
  z-index: 1;
}

#builder div .content .layout .ant-layout .listBox .list {
  width: calc(100% / 4 - 2px);
  /* margin: 0 10px 20px 0; */
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  /* background: linear-gradient(to right, #b041f3 0%, #ec15ff 100%); */
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  /* height: 130px; */
  position: relative;
  border: 4px solid transparent;
  min-width: 133px;
}

/* #builder div .content .layout .ant-layout .listBox .list:nth-child(4n) {
  margin: 4px 0px 24px 4px;
} */

#builder div .content .layout .ant-layout .listBox .list img {
  width: 20px;
  height: 20px;
  object-fit: cover;
}

#builder div .content .layout .ant-layout .listBox .list .absoluteBox {
  /* position: absolute;
  bottom: 0;
  left: 0; */
  padding: 8px;
  background: #e6e6e6;
  /*font-size: 13px;
  font-weight: 600;
  color: #0e0e1f;
  max-height: 25px;
  white-space: nowrap; */

  display: flex;
  height: 40px;
  padding: 8px;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  font-size: 12px;
}
#builder div .content .layout .ant-layout .listBox .list:has(.btn-guide) .absoluteBox span {
  overflow: hidden;
  text-wrap: nowrap;
  text-overflow: ellipsis;
  /* height: 28px; */
  padding-right: 16px;
  /* padding-top: 7px; */
}
#builder .ant-select-outlined:not(.ant-select-customize-input) .ant-select-selector {
  width: 140px;
}
#builder div .content .layout .ant-layout div div .input {
  width: calc(100% - 77px - 16px);
  height: 40px;
  background: #efecf1;
  box-shadow: none;
  border-radius: 4px;
}

#builder div .content .layout .ant-layout .textAreaBox .input {
  width: 100%;
}
#builder div .content .layout .ant-layout .promptInputBox {
  margin: 24px 0 0;
}

#builder .ant-select-outlined:not(.ant-select-customize-input).w200 .ant-select-selector {
  width: 100%;
}

#builder div .content .layout .ant-layout .promptInputBox .input::placeholder {
  color: #a3a1a7;
}

#builder div .content .layout .ant-layout .promptInputBox .input:hover {
  border: 1px solid #b041f3;
}

#builder div .content .layout .ant-layout .promptInputBox .input:focus {
  border: 1px solid #b041f3;
  background: #ffffff;
}

#builder div .content .layout .ant-layout .promptInputBox #darkGrey2 {
  width: 77px;
  height: 40px;
  border-radius: 4px;
  font-size: 14px;
}

.ant-menu-title-content,
.ant-menu-title-content span {
  width: 100%;
}

#builder div .content .layout .ant-layout .proMembership {
  height: 500px;
  border-radius: 8px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), linear-gradient(to bottom, #848ff5, #b369ba);
  margin-top: 20px;
  padding: 0px 0 24px !important;
}

#builder div .content .layout .ant-layout .proMembership h1 {
  text-align: center;
  background: linear-gradient(to bottom, #848ff5, #b369ba);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  font-size: 32px;
  font-weight: 500;
  margin: 0 0 100px;
  line-height: 1.2;
}

#builder div .content .layout .ant-layout .proMembership h1 span {
  font-weight: 700;
}

#builder div .content .layout .ant-layout .proMembership .btnBox {
  width: 271px;
  height: 92px;
  border-radius: 50px;
  padding: 8px;
  background: linear-gradient(to right, #b041f3 0%, #ec15ff 100%);
}

#builder div .content .layout .ant-layout .proMembership .btnBox div div {
  width: auto;
  padding: 0 24px;
}

#builder div .content .layout .ant-layout .proMembership .btnBox div .lock {
  width: 76px;
  height: 76px;
  border-radius: 100%;
  background: #ffffff;
}

#builder div .content .layout .ant-layout .proMembership .btnBox div .lock img {
  width: 25px;
}

#builder div .content .layout .ant-layout .proMembership .btnBox div div img {
  width: 25px;
}

#builder div .content .layout .ant-layout .proMembership .btnBox div div p {
  line-height: 1.2;
  font-size: 20px;
  color: #ffffff;
  font-weight: bold;
  margin: 0 0 0 10px;
}

#noSub .ant-menu-light.ant-menu-inline .ant-menu-sub.ant-menu-inline {
  height: 0;
}

#builder div .content .layout .ant-layout .tabBox {
  margin: 0;
  flex-wrap: wrap;
  display: flex;
  gap: 8px;
}

#builder div .content .layout .ant-layout .tabBox #blueBtn {
  width: auto;
  padding: 8px 12px;
  font-size: 14px;
  border-radius: 50px;
  /* margin: 0 8px 12px 0; */
}
#builder div .content .layout .ant-layout .tabBox #blueBtn:hover {
  background: #525162;
  color: #fff;
  border: 1px solid transparent;
}
#builder div .content .layout .ant-layout .inputBox > div {
  margin: 0 0 8px;
}

#builder div .content .layout .ant-layout .inputBox > div h1 {
  font-size: 18px;
  color: #0e0e1f;
  margin: 0 8px 0 0;
}

#builder div .content .layout .ant-layout .inputBox > div #whiteBtn {
  width: auto;
  padding: 6px 12px;
  border-radius: 50px;
  height: 32px;
  font-size: 13px;
}
#builder div .content .layout .ant-layout .inputBox .selectList {
  flex-wrap: wrap;
  display: flex;
  gap: 4px 8px;
}

#builder div .content .layout .ant-layout .inputBox .selectList button {
  height: 32px;
  margin: 0 0 4px;
}

#builder div .content .layout .ant-layout .inputBox .textAreaBox {
  background: #f1f1f1;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid #ddd;
}
#builder div .content .layout .ant-layout .inputBox .textAreaBox:has(textArea:focus),
#builder div .content .layout .ant-layout .inputBox .textAreaBox:has(input:focus) {
  border: 1px solid #b041f3;
  border: 1px solid var(--gra-badge, #b041f3);
  background: #fff;
}

#builder div .content .layout .ant-layout .inputBox .textAreaBox .ant-input-outlined,
#builder div .content .layout .ant-layout .inputBox .textAreaBox .textArea {
  height: 44px;
  color: #3e3d53;
  margin: 0 0 5px;
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
}

/* #builder div .content .layout .ant-layout .inputBox .textAreaBox .ant-input-outlined {
  height: auto;
} */
.ant-popover .ant-popover-inner {
  background: #ffffff;
  background-clip: padding-box;
  border-radius: 8px;
  box-shadow:
    0 6px 16px 0 rgba(0, 0, 0, 0.08),
    0 3px 6px -4px rgba(0, 0, 0, 0.12),
    0 9px 28px 8px rgba(0, 0, 0, 0.05);
  padding: 12px;
  border-radius: 4px;
  border: 1px solid #b041f3;
  border: 1px solid var(--gra-badge, #b041f3);
  background: #fff;
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
}
.ant-popover .ant-popover-inner input:hover {
  background: #ffffff;

  border-color: #dfdce4;
  background: #fff;
}
.ant-popover .ant-popover-inner input + button {
  width: 45px;
  height: 39px;
  border-radius: 100%;
  padding: 8px;
}
.ant-popover .ant-popover-inner input + button:hover {
  box-shadow: none !important;
  border-color: #e8e2e9 !important;
  background: #fdf2ff !important;
}

.ant-popover .ant-popover-inner input + button span {
  background: url(../../static/media/i-checkPink.ee390744214be1709ced.svg) no-repeat center;
  font-size: 0;
  width: 18px;
  height: 18px;
}
.ant-popover .ant-popover-arrow::after {
  z-index: 0;
  background: transparent;
  border-radius: 4px;

  background: #b041f3;
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
  border-top-width: 0;
}
/* #builder .ant-btn-default:hover {
  border-color: #dfdce4;
  background-color: #ffffff;
} */
.userPage .parameterBox .ant-btn-default {
  border-radius: 24px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  background: #eaf2f8;
  color: #939ca7;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  height: 32px;
}
.userPage .parameterBox .ant-btn-default:hover {
  background: #525162;
  color: #fff !important;
  font-weight: 400;
}

.builderGuideImg {
  background: rgb(255, 255, 255);
  width: 100%;
  height: 200px;
  overflow: hidden;
}

/* 오른쪽 */
#builder div .right {
  width: 38%;
  /* max-height: 900px; */
  overflow: auto;
  justify-content: flex-start;
  gap: 12px;
  padding-top: 10px;
}

#builder div .right > img {
  width: 24px;
  margin: 0 11px 0 0;
}

#builder div .right .title {
  font-size: 20px;
  color: #0e0e1f;
  margin: 0;
  padding: 0 0 4px;
  gap: 8px;
}

#builder div .right .title img {
  width: 24px;
  margin: 0;
}

#builder div .right .switchBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

#builder .inputBox .textBox:has(.ant-input-outlined:focus),
#builder .inputBox .textBox:has(.textArea:focus) {
  background: #fff;
  border: 1px solid #e94cf7;
}
/*#builder div .content .layout .textBox .textArea:not([readonly]) + .btnArea #darkGrey3 {
  background-image: linear-gradient(90deg, #b041f3 0%, #ec15ff 100%) !important;
  color: #fff;
}*/

#builder div .content .layout .textBox .textArea:has([readonly]) > .textBox textarea.ant-input-outlined:focus + .btnArea button#darkGrey3 {
  background: #525162 !important;
  color: #fff;
}
#builder .textBox:has(> .textArea:not([readonly])) .btnArea #darkGrey3 {
  background-image: linear-gradient(90deg, #b041f3 0%, #ec15ff 100%) !important;
  color: #fff;
}
#builder div .content .layout .ant-layout .inputBox .textAreaBox #darkGrey3 {
  width: 49px;
  height: 40px;
  border-radius: 4px;
  font-size: 14px;
}
#builder .textBox:has(textarea) {
  border: 1px solid #c718e2;
  background-color: #ffffff;
  padding: 8px;
  border-radius: 8px;
  margin: 0;
  gap: 20px;
}
/* #builder div .textBox textarea[readonly],
#builder div .textBox:has(textarea[readonly]:focus),
#builder div .textBox:has(> textarea[readonly]:hover),
#builder div .textBox:has(> textarea[readonly]:focus),
#builder div .textBox:has(> textarea[readonly])  */

#builder .textBox:has(textarea[readonly]) {
  background: #f1f1f1 !important;
  border-color: transparent;
}

#builder div .right .textBox .textArea {
  height: 100px;
  background: transparent;
  border: none;
  box-shadow: none;
  color: #3e3d53;
  font-weight: 500;
  line-height: 1.4;
}

#builder div .right .textBox div > div {
  width: auto;
  gap: 8px;
}

#builder div .right h2 {
  font-size: 16px;
  font-weight: 600;
  color: #0e0e1f;
}

#builder div .right .selectBox {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 12px;
  padding: 8px 8px 2px;
  margin: 0 0 12px;
  min-height: 72px;
}

#builder div .right .selectBox .select > div {
  padding: 8px;
  background: #ffffff;
  margin: 0 0 6px;
}

#builder div .right .selectBox .select > div div {
  width: auto;
  border-radius: 8px;
}

#builder div .right .selectBox .select > div > div img {
  width: 64px;
  height: 36px;
  border-radius: 4px;
  margin: 0 16px 0 0;
}

#builder div .right .selectBox .select > div > div h1 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12px;
}

#builder div .right .selectBox .select > div > div #greyBtn3,
#builder div .right .selectBox .select > div > div #whiteBtn2 {
  width: auto;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 16px;
  margin: 0 0 0 10px;
}

#builder div .right .save {
  padding: 20px 0;
  /* border-top: solid 1px rgba(0, 0, 0, 0.1); */
  gap: 12px;
}

#builder div .right .save > div {
  justify-content: start;
  width: auto;
}
#builder div .right .save > div:last-child {
  justify-content: end;
  width: calc(100% / 2.5);
}

#builder div .right .save > div > p {
  font-size: 14px;
  color: #3e3d53;
  margin: 0 16px 0 0;
  font-weight: 600;
  line-height: 1.2;
  text-wrap-mode: nowrap;
}

#builder div .right .save > div #logoutBtn {
  display: flex;
  padding: 8px 12px;
  justify-content: center;
  align-items: center;
  border-radius: 24px;
  border: 1px solid #e2dfe4;
  height: 34px;
}

#builder div .right .save > div #logoutBtn p {
  font-size: 14px;
  display: flex;
  flex-direction: row;
  gap: 8px;
  text-wrap-mode: nowrap;
}
/* #builder div .right .save > div #logoutBtn p::after {
   background: url(/src/assets/images/common/i-arrCirR.svg) no-repeat center; 
  width: 16px;
  height: 16px;
  content: '';
  display: flex;
}*/
/* #builder div .right .save > div #logoutBtn div {
  display: none;
}
#builder div .right .save > div #logoutBtn img {
  width: 18px;
  margin: 0 0 0 8px;
} */
#builder div .right .save > div #purpleBtn {
  /* width: 200px; */
  height: 51px;
  border-radius: 24px;
}
#builder div .right .save > div #purpleBtn svg {
  font-size: 20px;
}

#saveModal {
  padding: 0 24px;
}

#saveModal > div {
  margin: 0 0 24px;
}

#saveModal div > h1 {
  font-size: 24px;
  color: #0e0e1f;
  font-weight: bold;
}

#saveModal div p {
  font-size: 20px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

#saveModal div p:hover {
  color: #c718e2;
}

#saveModal div h2 {
  font-size: 12px;
  color: #0e0e1f;
  margin: 60px 0 10px;
}

#saveModal div .input {
  width: 100%;
  height: 40px;
  background: #f4f5f7;
  border: 1px solid #efecf1;
  box-shadow: none;
  margin: 0 0 60px;
}

#saveModal div .input:hover {
  border: 1px solid #c718e2;
}

#saveModal div .input:focus {
  border: 1px solid #c718e2;
  background: #ffffff;
}

#saveModal div div #greyBtn,
#saveModal div div #purpleBtn {
  width: 100px;
  height: 40px;
  border-radius: 4px;
  font-size: 14px;
  margin: 0 5px;
}

#congratsModal {
  padding: 0 24px;
}

#congratsModal div > h1 {
  font-size: 24px;
  color: #0e0e1f;
  font-weight: bold;
}

#congratsModal div p {
  font-size: 20px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

#congratsModal div p:hover {
  color: #c718e2;
}

#congratsModal div img {
  width: 40px;
  margin: 40px 0;
}

#congratsModal div h2 {
  font-size: 20px;
  color: #000000;
  text-align: center;
  line-height: 1.2;
  margin: 0 0 40px;
}

#congratsModal div #purpleBtn {
  width: 100%;
  height: 58px;
  border-radius: 5px;
  font-size: 18px;
}

#builderWrapper .bgImg .builderBox > div {
  flex-wrap: wrap;
}

#builder div .content {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
}
#builder div .content:has(.builderGuide) {
  display: flex;
  flex-direction: column;
  justify-content: start;
}
#builder div .content .layout .ant-layout {
  width: 100%;
  margin: 0;
}
#builder div .content .layout .ant-layout header {
  margin: 0;
  padding: 0;
  box-shadow: none;
  overflow: auto;
  /* border-right: 2px solid var(--bg-gray, #f3f3f3); */
}
#builder div .content .layout .ant-layout main.builderGuidImg {
  display: flex;
  flex-direction: column;
  gap: 24px;
  justify-content: flex-start;
  margin-top: 2px;
  align-items: flex-start;
}
#builder div .content .layout .ant-layout main {
  margin-top: 2px;
}

.promptSection #builder div .content .layout aside + .ant-layout main {
  margin-top: 0px;
}

#builder div .content .layout .ant-layout main .imgThum {
  background-color: rgba(0, 0, 0, 0.1);
  /* border-radius: 10px 10px 0 0 !important; 이미지 썸네일 라운드 위에만 생기게*/

  border-radius: 10px 10px 0 0 !important;
}
#builder div .content .layout .ant-layout main .builderGuideImg {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  color: #ffffff;
  border-radius: 10px 10px 0 0 !important;
  width: 100%;
  height: 200px;
}
/* #builder div .content .layout .ant-layout main .tabBox {
  margin-top: -24px;
} */
#builder div .content .layout .ant-layout aside .btnArea {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
#builder div .content .layout .ant-layout aside .btnArea button.ant-btn {
  height: 32px;
  padding: 0 8px;
}
#builder div .content .layout .ant-layout .ant-layout-has-sider {
  padding: 24px 16px !important;
  border: 2px solid #f3f3f3;
  border: 2px solid var(--bg-gray, #f3f3f3);
  border-top: 0;
  border-bottom: 0;
  background: #fff;
  gap: 24px;
  min-height: calc(100vh - 638px);
  height: 100%;
}
#builder .ant-switch {
  min-width: 73px;
  height: 29px;
}
#builder .ant-switch-checked {
  background: linear-gradient(90deg, #b041f3 0%, #ec15ff 100%);
}
#builder .ant-switcher_close::before {
  top: 6px;
}
#builder .ant-switch span {
  height: 22px;
  line-height: 1.7;
}
#builder .ant-switch .ant-layout-sider {
  background: #fff;
}
#builder .ant-switch .ant-layout-sider .ant-layout-sider-children {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 8px;
}
#builder div .content .layout .ant-layout .ant-layout-has-sider .ant-switch .ant-layout-sider .ant-tree {
  margin-top: 12px;
}
#builder .ant-switch-handle {
  top: 4px;
  /* left: 4px; */
  height: 22px;
  width: 22px;
  border-radius: 100px;
  inset-inline-start: 5px;
}
#builder .ant-switch.ant-switch-checked .ant-switch-handle {
  inset-inline-start: calc(100% - 26px);
}
#builder div .content .layout .ant-layout .ant-layout-has-sider .ant-switch .ant-switch-handle ::before {
  border-radius: 100px;
}
#builder div .content .layout .ant-layout .ant-layout-has-sider .ant-switch .ant-switch-inner {
  height: 24px;
}
#builder div .content .layout .ant-layout .top {
  display: none;
}
#builder div .content .builderGuide {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}
#builder div .content .builderGuide h1 {
  font-size: 48px;
  font-weight: 700;
  background: linear-gradient(to right, #13d5df, #f138fc);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  text-align: center;
  margin: 48px 0 80px;
  line-height: 1.2;
}
#builder div .content .builderGuide h2 {
  color: #0e0e1f;
  color: var(--t-dark, #0e0e1f);
  text-align: center;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.4;
  padding-bottom: 32px;
}
#builder div .content .builderGuide h2 b {
  color: #c718e2;
  color: var(--t-pink, #c718e2);
  font-weight: 500;
  padding-bottom: 24px;
}
#builder div .content .builderGuide .tab {
  border: 0;
  justify-content: center;
}
#builder div .content .listBox .list {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#builder div .content .listBox .list:has(.thumBorder[style='disply: block']) > .absoluteBox {
  background: linear-gradient(to right, #b041f3 0%, #ec15ff 100%);
}
#builder div .content .listBox .list .absoluteBox {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
#builder div .content .listBox .list .thumBorder {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* border: 4px solid transparent; */
  background-origin: border-box;
  background-clip: content-box, border-box;
  /* border-image: linear-gradient(to right, #b041f3 0%, #ec15ff 100%); */
  border-image-slice: 1;
}
#builder div .content .listBox .list .thumBorder :hover {
  /* border: 4px solid transparent; */
  background-origin: border-box;
  background-clip: content-box, border-box;
  border-image: linear-gradient(to right, #b041f3 0%, #ec15ff 100%);
  border-image-slice: 1;
}
#builder div .content .listBox .list .btn-guide {
  width: 20px;
  height: 20px;
  position: absolute;
  right: 4px;
  bottom: 8px;
  z-index: 999;
}
/* #builder div .content .ant-switch .ant-switch-inner {
  padding-inline-start: 32px;
  padding-inline-end: 8px;
} */
#builder div .headerMenu.ant-menu-horizontal > .ant-menu-item + li span {
  border-bottom-left-radius: 16px;
}
#builder div .selectWrapper {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 8px;
  padding: 16px 0;
}
#builder div .selectWrapper button {
  border-radius: 4px;
  font-size: 14px;
  height: 40px;
  min-width: 100px;
  font-weight: 500;
  line-height: 1;
  border-radius: 4px;
  align-items: center;
  justify-content: center;
  background-color: #525162 !important;
  border-color: #525162;
  color: #fff;
}
/* #builder div .right > h2 {
  position: relative;
}
#builder div .right > h2 button {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  position: absolute;
  right: 0;
  top: 12px;
  width: 24px;
  height: 24px;
  background: url(/src/assets/images/common/btn-downB.svg) no-repeat right 5px center;
  content: '';
}
#builder div .right > h2 button.btn-fold {
  transform: rotate(180deg);
  background-image: url(/src/assets/images/common/btn-downB.svg);
} */
#builder div .right .selectBox > div .ant-btn-default {
  min-width: auto;
}
#builder div #whiteBtn {
  min-width: 90px;
  height: 40px;
  border-radius: 4px;
  background: #fff;
  border-color: #ddd;
}
#builder div #whiteBtn img {
  width: 18px;
}
#builder div #whiteBtn p {
  font-size: 14px;
}
#builder div #darkGrey3 {
  min-width: 77px;
  height: 40px;
  border-radius: 4px;
  padding: 0 12px;
  /* margin: 0 0 0 5px; */
}
#builder div #darkGrey3 svg {
  filter: brightness(1);
  opacity: 1;
}
#builder div #darkGrey3 div {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
#builder div #darkGrey3 div img {
  width: 18px;
  margin: 0 8px 0 0;
}
#builder div #darkGrey3 div img.delete {
  width: 16px;
  padding: 2px;
}
#builder div #darkGrey3 p {
  font-size: 14px;
}
#builder div .save #purpleBtn {
  border-radius: 24px;
  width: 100%;
  padding: 20px;
  height: 52px;
}
#builder div .parameterBox {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 12px;
  padding: 28px 0;
  flex-wrap: wrap;
}

.soundEffectModal .top {
  margin: 0 0 20px;
}
.soundEffectModal .top h1 {
  font-size: 24px;
  color: #0e0e1f;
  font-weight: 700;
}
.soundEffectModal .top .svg {
  cursor: pointer;
}
.soundEffectModal .top .svg svg path {
  transition: all 0.2s ease-in-out;
}
.soundEffectModal .top .svg:hover svg path {
  fille: #ff5eb6;
}
.soundEffectModal .scrollBox {
  padding: 4px 0 4px 4px;
  border-radius: 8px;
  border: solid 1px rgba(0, 0, 0, 0.2);
  flex-wrap: wrap;
  overflow: auto;
  height: 420px;
  align-items: flex-start;
  justify-content: flex-start;
}
.soundEffectModal .scrollBox div {
  min-width: 300px;
  width: 100%;
}
.soundEffectModal .btnBox {
  margin: 20px 0 0;
  justify-content: center;
}
.soundEffectModal .btnBox #purpleBtn,
.soundEffectModal .btnBox #logoutBtn {
  width: 100px;
  height: 40px;
  border-radius: 4px;
  font-size: 14px;
  margin: 0 5px;
}
.soundEffectModal .btnBox #purpleBtn.btn-default,
.soundEffectModal .btnBox #logoutBtn.btn-default {
  border: 1px solid #525162;
}

/* 트리 */
.ant-tree-treenode {
  height: 32px;
  align-items: center;
  border-radius: 5px;
  width: 100%;
}

.ant-tree .ant-tree-switcher:before:hover,
.ant-tree .ant-tree-switcher:before:hover {
  background: transparent;
}

.ant-tree-treenode:hover {
  background: #f4f5f7;
}

.ant-tree .ant-tree-treenode.ant-tree-treenode-selected,
.ant-tree .ant-tree-treenode.ant-tree-treenode-selected {
  width: 100%;
  background: linear-gradient(to right, #ca79fc 0%, #ff5eb6 100%);
  color: #ffffff;
  align-items: center;
  padding: 0 0 0 4px;
}

.ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected,
.ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected {
  background: transparent;
}

/* .ant-select-outlined:not(.ant-select-customize-input) .ant-select-selector {
  width: 108px;
  height: 32px;
} */
.ant-tree-treenode-selected::before {
  background: linear-gradient(to right, #ca79fc 0%, #ff5eb6 100%) !important;
  width: 95%;
  border-radius: 5px;
}

.create-prompt-menu {
  flex: 1 1;
  min-width: 0;
  overflow: auto;
  white-space: nowrap;
  scrollbar-width: thin;
  padding: 1px;
  border-bottom: 0;
}

.ant-form-item-required {
  pointer-events: none; /* 마우스 이벤트 비활성화 */
}

.builderGuide {
  h1 {
    font-size: 48px;
    font-weight: 700;
    background: linear-gradient(to right, #13d5df, #f138fc);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    text-align: center;
    margin: 48px 0 40px;
  }
}
@media (max-width: 1240px) {
  #builder div .content .layout .ant-layout .listBox .list .absoluteBox span {
    font-size: 12px;
  }
  #builder div .right .save {
    padding: 20px 0;
    /* border-top: solid 1px rgba(0, 0, 0, 0.1); */
    gap: 12px;
    flex-direction: column;
  }
  #builder div .right .save > div:first-child {
    justify-content: space-between;
    width: 100%;
  }
  #builder div .right .save > div:last-child {
    width: 100%;
  }
}
@media (max-width: 900px) {
  #builder div .right .selectBox .select > div > div img {
    display: none;
  }

  #builder div .content {
    flex-wrap: wrap;
  }

  #builder div .content .layout {
    width: 100%;
  }

  #builder div .content .layout header + main:has(img) {
    margin-top: -70px;
  }

  #builder div .right {
    width: 100%;
    max-height: 100%;
    padding: 20px 0;
    gap: 8px;
  }
  #builder div .right .save > div:first-child {
    justify-content: space-between;
  }

  .selectWrapper .ant-select .ant-select-selector {
    background: #f4f5f7;
  }

  .selectWrapper {
    flex-wrap: wrap;
    margin: 0 0 20px;
    justify-content: space-between;
  }

  .selectWrapper .ant-select {
    width: calc(100% / 3 - 6px);
  }
  .selectWrapper button,
  .selectWrapper .ant-select:nth-child(4),
  .selectWrapper .ant-select:nth-child(5) {
    width: calc(100% / 2 - 6px);
    /* margin: 10px 0 0; */
  }

  #builder div .content .mobileTab {
    padding: 8px 12px;
    height: 40px;
    border-radius: 8px;
    border: 1px solid #dbdbe0;
    background: linear-gradient(to bottom, #fff, rgba(239, 236, 241, 0.5) 88%, #efecf1);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
  }

  #builder div .content .mobileTab p {
    color: #0e0e1f;
    font-size: 14px;
    font-weight: 600;
  }

  #builder div .content .mobileTab#active {
    border-radius: 8px 8px 0 0;
    border-top: 1px solid #e94cf7;
    border-right: 1px solid #e94cf7;
    border-left: 1px solid #e94cf7;
    border-bottom: none;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 9%, rgba(255, 255, 255, 0) 15%, #fff), linear-gradient(to bottom, #fcedfd, #fcedfd);
    box-shadow: none;
  }

  #builder div .content .mobileTab#active p {
    color: #c718e2;
  }

  #builder > div .title {
    padding: 20px 0;
  }
  #builder .ant-select-outlined:not(.ant-select-customize-input) .ant-select-selector {
    width: 100%;
  }
  .ant-layout.ant-layout-has-sider,
  .ant-layout.ant-layout-has-sider {
    flex-direction: column;
  }

  #builder div .content .layout .ant-layout .top {
    margin: 20px 0;
  }

  #builder div .content .layout .ant-layout .top p {
    font-size: 16px;
    width: 60px;
  }

  #builder div .content .layout .ant-layout .top .line {
    width: calc(100% - 60px - 17px);
  }

  #builder div .content .layout .ant-layout .listBox .list {
    width: calc(100% / 2 - 10px);
    /* margin: 0 20px 20px 0; */
  }

  #builder div .content .layout .ant-layout .listBox .list:nth-child(4n) {
    /* margin: 0 20px 20px 0; */
  }

  #builder div .content .layout .ant-layout .listBox .list:nth-child(2n) {
    /* margin: 0 0 20px; */
  }

  #builder div .content .layout .ant-layout .listBox {
    max-height: 100%;
    overflow: visible;
    overflow: initial;
    gap: 20px 2%;
  }

  #builder div .content .layout .ant-layout .menuBox {
    margin: 16px 0;
  }

  #builder div .right .save {
    border-top: none;
  }
  #builder div .right .save > div:last-child,
  #builder div .right .save > div {
    width: 100%;
  }

  #builder div .right .save > div #purpleBtn {
    width: 100%;
    height: 45px;
    margin: 36px 0 20px;
    font-size: 16px;
  }

  #builder div .content .layout .ant-layout .inputBox > div {
    justify-content: space-between;
  }

  #builder div .content .layout .ant-layout .inputBox {
    border-bottom: none;
  }
  #builder div .content .layout .ant-layout .listBox .list {
    width: calc(100% / 4 - 16px);
    /* margin: 0 20px 20px 0; */
  }
}
@media (max-width: 800px) {
  #builder div .selectWrapper {
    padding: 10px 0;
    /* gap: 20px 8px; */
  }
  #builder > div .tab {
    padding: 0 0 2px;
    border-bottom: none;
  }
  .selectWrapper {
    flex-wrap: wrap;
    margin: 0;
  }
  #builder div .content .layout .ant-layout .ant-layout-has-sider {
    flex-direction: column;
  }
  #builder div .content .layout .ant-layout header {
    overflow: hidden;
  }
  #builder div .content .layout .ant-layout .headerMenu.ant-menu-horizontal > .ant-menu-item.ant-menu-item-selected .ant-menu-title-content,
  #builder div .content .layout .ant-layout .ant-menu.headerMenu .ant-menu-title-content,
  #builder div .content .layout .ant-layout .headerMenu.ant-menu-horizontal > .ant-menu-item,
  #builder div .content .layout .ant-layout .headerMenu.ant-menu-horizontal > .ant-menu-item {
    height: 40px;
    line-height: 1;
    font-size: 12px;
  }
  #builder div .content .layout .ant-layout .headerMenu.ant-menu-horizontal > .ant-menu-item {
    min-width: 90px;
  }
  #builder div .content .layout .ant-layout main .builderGuideImg {
    height: 130px;
  }
  #builder div .content .layout .ant-layout .builderGuideImg,
  #builder div .content .layout .ant-layout main > .imgThum {
    height: 130px !important;
    border-radius: 8px;
  }
}
@media (max-width: 700px) {
  #builder .ant-select-outlined:not(.ant-select-customize-input) .ant-select-selector {
    width: 100%;
  }
  #builder div .selectWrapper button,
  #builder div .content .layout .selectWrapper .ant-select,
  .ant-select-single {
    height: 32px;
  }
  #builder div .selectWrapper button {
    /* margin-top: -10px; */
  }
  #builder div .content .layout .ant-layout aside .btnArea button[role='switch'] {
    width: 72px;
  }
  #builder div .content .builderGuide h2 {
    padding-bottom: 20px;
  }
  #builder div .right h2 {
    padding: 16px 0 4px;
  }
  #builder div .right .selectBox .select > div {
    padding: 4px 8px;
  }
  #builder div .content .layout .ant-layout .listBox .list {
    width: calc(100% / 3 - 10px);
    /* margin: 0 20px 20px 0; */
  }
}

@media (max-width: 500px) {
  #builder div .content .layout .ant-layout .listBox {
    max-height: 100%;
    overflow: visible;
    overflow: initial;
    gap: 20px 5.6%;
  }
  #builder div .content .layout .ant-layout .listBox .list {
    width: calc(100% / 2 - 12px);
  }
}

#bannerSlider {
  width: 100vw;
  display: block;
  margin-top: 20px;
}

#bannerSlider .bannerBox {
  width: 100%;
  position: relative;
  /*cursor:pointer;*/
}

#bannerSlider .bannerBox > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background: linear-gradient(to right, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1)); */
}

#bannerSlider .bannerBox div h1 {
  font-size: 36px;
  color: #ffffff;
  font-weight: 700;
}

#bannerSlider .bannerBox img {
  width: 100%;
}

.slick-dots {
  bottom: 20px;
}

.slick-dots li {
  margin: 0;
}

.slick-dots li.slick-active button:before {
  color: #ffffff;
  opacity: 1;
}

.slick-dots li button:before {
  color: #ffffff;
}

@media (max-width: 700px) {
  #bannerSlider .bannerBox img {
    width: 100%;
  }
  #bannerSlider .bannerBox div h1 {
    font-size: 20px;
  }
}

#mainSlider.none,
#bannerSlider.none,
#subBanner2.none,
#subBannerWrapper.none,
#subBannerWrapper .rsWrapper .subBanner.none {
  display: none;
}

#imageSlider {
    display: block;
    width: 100%;
}

#imageSlider .list div {
    width: 100vw;
    height: 100vh;
}



#imageSlider .arrowLeft,
#imageSlider .arrowRight {
    position: absolute;
    width: 76px;
    margin: 0 4px 0 0;
    height: 160px;
    font-size: 12px;
    color: #ffffff;
    cursor: pointer;
    transition: all .2s ease-in-out;
    z-index: 1000;
    border-radius: 4px;
}

#imageSlider .arrowLeft:hover,
#imageSlider .arrowRight:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

#imageSlider .arrowLeft {
    top: 50%;
    left: 0;
    margin: -18px 0 0;
}

#imageSlider .arrowRight {
    top: 50%;
    right: 0;
    margin: -18px 0 0;
}

@media (max-width :700px) {
    #imageSlider .list div {
        width: 100%;
    }

    #imageSlider .list {
        padding: 0 16px;
    }

    #imageSlider .list img {
        max-width: 100%;
    }

    #imageSlider .arrowRight,
    #imageSlider .arrowLeft {
        width: 30px;
        height: 60px;
    }

}
#mainSlider,
#bannerSlider {
  width: 100%;
  height: auto;
  max-height: 380px;
  overflow: hidden;
}
#mainSlider .slick-slider,
#bannerSlider .slick-slider {
  max-height: 380px;
}

#mainSlider .bannerBox,
#bannerSlider .bannerBox {
  width: 100%;
  position: relative;

  /* left: 50%;
    margin: 0;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%); */
}
#mainSlider .bannerBoxWithCursor,
#bannerSlider .bannerBoxWithCursor {
  width: 100%;
  height: 400px;
  position: relative;
  cursor: pointer;
}
#mainSlider .bannerBox > div,
#bannerSlider .bannerBox > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  justify-content: flex-start;
}
#mainSlider .bannerBox > p,
#bannerSlider .bannerBox > p {
  display: flex;
  align-items: center;
  justify-content: center;
}
#mainSlider .bannerBox .introText,
#bannerSlider .bannerBox .introText {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 5.7%;
  padding: 0 24px;
}
#mainSlider .bannerBox div h1,
#bannerSlider .bannerBox div h1 {
  font-size: 48px;
  color: #ffffff;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: -0.48px;
  text-shadow: 0 0px 8px rgba(0, 0, 0, 0.5);
}

#mainSlider .bannerBox div h2,
#bannerSlider .bannerBox div h2 {
  color: rgba(255, 255, 255, 0.8);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.2px;
  text-shadow: 0 0px 8px rgba(0, 0, 0, 0.5);
}

#mainSlider .bannerBox div #whiteBorderBtn,
#bannerSlider .bannerBox div #whiteBorderBtn {
  width: 180px;
  height: 40px;
}

#mainSlider .bannerBox div #whiteBorderBtn p,
#bannerSlider .bannerBox div #whiteBorderBtn p {
  font-size: 14px;
  margin: 0 10px 0 0;
}

#mainSlider .bannerBox div #whiteBorderBtn img,
#bannerSlider .bannerBox div #whiteBorderBtn img {
  width: 24px;
  height: auto;
}

#mainSlider .bannerBox img,
#bannerSlider .bannerBox img {
  width: 100%;
}

.slick-dots {
  bottom: 20px;
}

.slick-dots li.slick-active button:before {
  color: #ffffff;
  opacity: 1;
}

.slick-dots li button:before {
  color: #ffffff;
}

.slider-container + .slider-container {
  margin-top: -2px;
}

@media (max-width: 1100px) {
  #mainSlider .bannerBox .introText,
  #bannerSlider .bannerBox .introText {
    margin-top: 5%;
  }
  #mainSlider .bannerBox div h1,
  #bannerSlider .bannerBox div h1 {
    font-size: 32px;
  }

  #mainSlider .bannerBox div h2,
  #bannerSlider .bannerBox div h2 {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    line-height: 1.6;
  }
}

@media (max-width: 700px) {
  #mainSlider,
  #mainSlider .bannerBox,
  #bannerSlider,
  #bannerSlider .bannerBox {
    min-height: 160px;
    width: auto;
    min-width: 360px;
    width: 100vw;
    overflow: hidden;
  }
  #mainSlider .bannerBox .introText,
  #bannerSlider .bannerBox .introText {
    margin-top: 9%;
  }
  #mainSlider .bannerBox div h1,
  #bannerSlider .bannerBox div h1 {
    font-size: 24px;
  }

  #mainSlider .bannerBox div h2,
  #bannerSlider .bannerBox div h2 {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    line-height: 1.6;
  }
  #mainSlider .bannerBox img,
  #bannerSlider .bannerBox img {
    height: 160px;
    /* width: auto; */
    object-fit: cover;
  }
  #mainSlider .bannerBox div #whiteBorderBtn,
  #bannerSlider .bannerBox div #whiteBorderBtn {
    width: 130px;
    height: 32px;
  }

  #mainSlider .bannerBox div #whiteBorderBtn p,
  #bannerSlider .bannerBox div #whiteBorderBtn p {
    font-size: 14px;
    margin: 0 10px 0 0;
  }

  #mainSlider .bannerBox div #whiteBorderBtn img,
  #bannerSlider .bannerBox div #whiteBorderBtn img {
    width: 15px;
  }
  /* #mainSlider .bannerBox {
    width: 100%;
    position: relative;

    left: 50%;
    margin: 0;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  #mainSlider .bannerBox,
  #mainSlider .bannerBox img {
    width: unset;
    min-width: 320px;
    height: 174px;
  } */
}

#newPromptSlider {
    display: block;
    width: 100%;
}

#newPromptSlider .list {
    padding: 0 4px;
}


#newPromptSlider .list>div {
    padding: 4px;
    border-radius: 16px;
    position: relative;
}

#newPromptSlider .list>div>img {
    width: 100%;
    height: 185px;
    border-radius: 16px;
}

#newPromptSlider .list>div .absoluteBox {
    position: absolute;
    top: 4px;
    height: 4px;
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    border-radius: 16px;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
}

#newPromptSlider .list>div .absoluteBox .user {
    padding: 8px;
}

#newPromptSlider .list>div .absoluteBox .user div {
    width: auto;
}

#newPromptSlider .list>div .absoluteBox .user div img {
    width: 20px;
    height: 20px;
    margin: 0 8px 0 0;
}

#newPromptSlider .list>div .absoluteBox .user div p {
    font-size: 13px;
    color: #ffffff;
}

#newPromptSlider .list>div .absoluteBox .title>p {
    font-size: 24px;
    font-weight: 600;
    color: #ffffff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    margin: 0 0 4px;
    padding: 0 10px;
}

#newPromptSlider .list>div .absoluteBox .title .greyBox {
    background: #E2E2E2;
    padding: 8px 12px;
    border-radius: 0 0 16px 16px;
}

#newPromptSlider .list>div .absoluteBox .title .greyBox>img {
    width: 32px;
    height: 32px;
    border-radius: 100%;
    margin: 0 8px 0 0;
}

#newPromptSlider .list>div .absoluteBox .title .greyBox>div {
    width: calc(100% - 32px - 8px);
}

#newPromptSlider .list>div .absoluteBox .title .greyBox div>p {
    font-size: 14px;
    font-weight: 600;
    color: #0E0E1F;
}

#newPromptSlider .list>div .absoluteBox .title .greyBox div div .imgBox {
    width: auto;
}

#newPromptSlider .list>div .absoluteBox .title .greyBox div div .imgBox img:first-child {
    width: 20px;
    height: 20px;
    margin: 0 8px 0 0;
}

#newPromptSlider .list>div .absoluteBox .title .greyBox div div .imgBox img {
    width: 16px;
    height: 16px;
    margin: 0 4px 0 0;
}

#newPromptSlider .list>div .absoluteBox .title .greyBox div div p {
    font-size: 13px;
    font-weight: 600;
}


#newPromptSlider .arrowLeft,
#newPromptSlider .arrowRight {
    position: absolute;
    width: 36px;
    margin: 0 4px 0 0;
    height: 36px;
    background: #ffffff;
    border-radius: 100%;
    font-size: 12px;
    color: #000000;
    cursor: pointer;
    transition: all .2s ease-in-out;
    z-index: 1000;
}

#newPromptSlider .arrowLeft:hover,
#newPromptSlider .arrowRight:hover {
    background: linear-gradient(to right, #B041F3, #EC15FF);
    color: #ffffff;
}

#newPromptSlider .arrowLeft {
    top: 50%;
    left: -40px;
    margin: -18px 0 0;
}

#newPromptSlider .arrowRight {
    top: 50%;
    right: -40px;
    margin: -18px 0 0;
}

#newPromptSlider .slick-dots {
    display: none !important;
}


@media (max-width : 700px) {
    #newPromptSlider .list>div>img {
        height: 136px;
    }

    #newPromptSlider .list>div .absoluteBox .title>p {
        display: none;
    }

    #newPromptSlider .list>div .absoluteBox .title .greyBox>img {
        width: 24px;
        height: 24px;
        margin: 0 4px 0 0;
    }

    #newPromptSlider .list>div .absoluteBox .title .greyBox>div {
        width: calc(100% - 24px - 4px);
    }

    #newPromptSlider .list>div .absoluteBox .title .greyBox div div .imgBox img:first-child {
        display: none;
    }

    #newPromptSlider .list>div .absoluteBox .user>img {
        display: none;
    }

    #newPromptSlider .list>div .absoluteBox .user {
        padding: 8px;
    }

    #newPromptSlider .list>div .absoluteBox .title .greyBox div>p {
        font-size: 12px;
    }

    #newPromptSlider .arrowLeft {
        left: -10px;
        background: rgba(255, 255, 255, 0.2);
    }

    #newPromptSlider .arrowRight {
        right: -10px;
        background: rgba(255, 255, 255, 0.2);

    }




    #newPromptSlider .slick-list {
        padding: 0 !important;
    }


}
#newSlider {
  display: block;
  width: 100%;
  height: auto;
  padding: 0 42px;
}
#newSlider .musicBox {
  border-radius: 100%;
  position: relative;
  /* padding: 0 18px; */
  margin: 12px;
}
#newSlider .slick-slide .slick-active.slick-center.slick-current .musicBox {
  margin: 0px;
}
#newSlider .musicBox > img {
  width: 100%;
  height: auto;
  border-radius: 100%;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.4);
  outline: 1px solid rgba(255, 255, 255, 0.15);
  cursor: pointer;
}
#newSlider .musicBox:hover div:first-child {
  opacity: 1;
  cursor: pointer;
}
#newSlider .slick-current .musicBox:hover div:first-child {
  opacity: 0;
}
#newSlider .slick-current .opa05 {
  opacity: 0;
}
#newSlider .musicBox div:first-child {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 18px;
  width: calc(100% - 12px);
  border-radius: 100%;
  height: 100%;
  /* background-image: linear-gradient(to right, rgba(19, 213, 223, 0.6) 0%, rgba(241, 56, 252, 0.6) 107%); */
  background: linear-gradient(90deg, rgba(21, 133, 141, 0.6) 0%, rgba(150, 41, 158, 0.6) 100%);
  transition: all 0.2s ease-in-out;
  z-index: 2;
  gap: 8px;
}
.opa05 {
  opacity: 1;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  background: rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease-in-out;
  z-index: 1;
}
#newSlider .musicBox div:first-child img {
  width: 20px;
  height: 20px;
  border-radius: 100%;
  margin: 0 0 8px;
}
#newSlider .musicBox div:first-child h1 {
  max-width: 100%;
  margin: 8px;
  font-size: 13px;
  font-weight: 500;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #ffffff;
  line-height: 1.2;
}
#newSlider .musicBox div:first-child p {
  font-size: 11px;
  color: #ffffff;
  transform: scale(0.8);
}
#newSlider .musicBox #active {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#newSlider .musicBox #active:hover {
  z-index: 9999;
}
/* #newSlider .musicBox #active img {
  max-width: 44px;
  max-height: 44px;
  margin: 17px 0;
  width: 50px;
  height: 50px;
} */
#newSlider .musicBox #active div {
  width: auto;
}
#newSlider .musicBox #active div h1 {
  font-size: 14px;
  color: #ffffff;
  font-weight: 700;
  margin: 0 0 12px;
}
#newSlider .musicBox #active div p {
  font-size: 12px;
  color: #ffffff;
}
#newSlider .slick-current {
  transform: scale(1.1);
  z-index: 100;
  position: relative;
  padding: 0 10px;
  transition: all 0.2s ease-in-out;
}
#newSlider .slick-current .musicBox #active {
  opacity: 1;
}

#top10 #newSlider .slick-current {
  transform: scale(1.6);
  padding: 4px 10px 0;
}

#top10 #newSlider .slick-slide {
  transition: all 0.2s ease-in-out;
  margin: 8px 0 8px;
}

#newSlider.newest .slick-slide {
  transition: all 0.2s ease-in-out;
  margin: 16px 0 24px;
}
#top10 #newSlider .slick-list {
  /* height: 264px; */
  padding: 4% 0 !important;
}

#newSlider.newest .slick-list {
  height: auto;
  padding: 20px;
}
#newWrapper #newSlider.newest .musicBox #active img {
  width: 40%;
  height: 40%;
  z-index: 2;
}
.slick-next:before,
.slick-prev:before {
  font-size: 36px;
  color: rgba(0, 0, 0, 0.2);
  opacity: 1;
}
#newSlider.topAlbum .musicBox .aiModelNm {
  margin: 0;
  transform: scale(0.8);
}

#newSlider.topAlbum .musicBox div:first-child h1 {
  display: -webkit-box;
  margin: 0;
  transform: scale(0.8);
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 4px;
  text-align: center;
}
#newSlider .musicBox div:first-child h1 #newSlider .musicBox #active .mobileImg {
  display: flex;
  align-items: start;
  margin-top: 40px;
  /* transform: scale(0.5); */
}

#newSlider.topAlbum .musicBox #active .mobileImg {
  margin: 0;
  transform: scale(0.5);
  display: none;
}
#newSlider.newest .musicBox #active > img,
#newSlider.topAlbum .musicBox #active > img {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#aiWrapper #newSlider .slick-slider {
  padding: 0;
}

#newSlider .arrowLeft,
#newSlider .arrowRight {
  position: absolute;
  width: 36px;
  margin: 0 4px 0 0;
  height: 36px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 100%;
  font-size: 12px;
  color: #000000;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  z-index: 10;
}
#newSlider .arrowLeft:hover,
#newSlider .arrowRight:hover {
  background: linear-gradient(to right, #b041f3, #ec15ff);
  color: #ffffff;
}

#aiWrapper #newSlider .arrowLeft {
  left: -42px;
}

#newSlider .arrowLeft {
  top: 50%;
  left: -82px;
  margin: -18px 0 0;
}

#aiWrapper #newSlider .arrowRight {
  right: -42px;
}

#newSlider .arrowRight {
  top: 50%;
  right: -82px;
  margin: -18px 0 0;
}

/* #newWrapper #newSlider .musicBox #active img {
  width: 72px;
  height: 72px;
  margin: 17px 0;
  margin: 48px 0 0;
} */
#newWrapper #newSlider .musicBox #active div {
  width: 100%;
  padding: 10px 40px;
}
#newWrapper #newSlider .musicBox #active div h1 {
  font-size: 14px;
  color: #ffffff;
  font-weight: 700;
  margin: 0 0 12px;
  text-overflow: ellipsis; /* t-shadow */
  text-shadow: 0px 0px 4px rgba(0, 0, 0, 1);
}
#newWrapper #newSlider .musicBox #active div p {
  font-size: 12px;
  color: #ffffff;
  font-weight: 400; /* t-shadow */
  text-shadow: 0px 0px 4px rgba(0, 0, 0, 1);
}

/* #newSlider .musicBox {
  padding: 10px;
  margin: 8px;
} */
#newSlider .musicBox div:first-child {
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}
/* 슬라이드 */
#newWrapper #newSlider .slick-slide.slick-current {
  transform: none;
  padding: 0 !important;
  opacity: 1;
  /* transform: scale(1.25); */
}
#newWrapper #newSlider .slick-slide {
  opacity: 1;
}
#listWrapper #populerPromptSlider {
  width: 100%;
}

/* slider */

/* #top10 #newSlider .slick-list {
  top: 20px;
} */
/* #top10 #newSlider .slick-list .slick-track {
  top: 70px;
} */
/* padding: 70px 0 0 !important; */

/* #top10 #newSlider .slick-list {
  height: 290px;
} */
/* #top10 #newSlider .slick-center {
  width: 280px;
} */
/* #top10 #newSlider .slick-current, */
#top10 #newSlider .slick-current.slick-active:hover {
  transform: scale(1.62); /*1:1*/
}
#top10 #newSlider .slick-active:hover {
  transform: scale(1.05);
}
#top10 #newSlider #active {
  cursor: pointer;
  justify-content: flex-start;
  padding-top: 12px;
  gap: 8px;
}
#top10 #newSlider #active img {
  content: url(../../static/media/play_icon_top.089c7823c4b1053510a8.png);
  width: 40%;
  height: 40%;
  z-index: 2;
}

@media (max-width: 1350px) {
  /* #newSlider.newest .musicBox #active img {
    width: 80px;
    height: 80px;
  } */
  #newSlider .musicBox #active div h1 {
    font-size: 12px;
    margin: 0 0 5px;
  }
  .mainIcon {
    margin: -80px 11px 9px 0;
    width: 94px;
  }
}
@media (max-width: 1280px) {
  #top10 #newSlider #active {
    padding-top: 4px;
    gap: 0px;
  }
  /* #newSlider .musicBox #active img {
    width: 40px;
    height: 40px;
  } */
  #newSlider .musicBox #active div h1,
  #newSlider .musicBox #active div p {
    font-size: 10px;
  }
  .mainIcon {
    margin: -78px 9px 16px 0;
    width: 85px;
  }
  #newSlider.newest .slick-list {
    /* height: 272px; */
  }
  /* #top10 #newSlider .slick-list .slick-track {
    top: 30%;
  } */
  /* #newSlider.newest .slick-list .slick-track {
    top: 15% !important;
  } */
}
@media (max-width: 1100px) {
  #newWrapper {
    padding: 0 16px;
  }
  /* #newSlider .musicBox {
    padding: 16px 20px;
  } */
  /* #newSlider .musicBox div:first-child {
    left: 20px;
    width: calc(100% - 40px);
    height: calc(100% - 0px);
    top: 0;
  } */
  /* #newSlider .slick-list {
    height: 300px;
  } */
  #top10 #newSlider .slick-current,
  #top10 #newSlider .slick-current.slick-active:hover {
    transform: scale(1.3);
  }

  #newSlider.topAlbum .musicBox .aiModelNm {
    transform: scale(0.88);
  }
  #newSlider.topAlbum .musicBox #active .mobileImg {
    transform: scale(0.65);
  }

  /* #top10 #newSlider .slick-list .slick-track {
    top: 45px;
  }
  #newSlider.newest .slick-list .slick-track {
    top: 6% !important;
  } */
}
@media (max-width: 900px) {
  /* #newSlider .slick-list {
    height: 240px;
  } */
  /* 메인 페이지 */

  #musicInfo .rsWrapper .info div .userBox {
    width: 100%;
  }

  /* #newWrapper #newSlider .musicBox #active img {
    width: 24px;
    height: 24px;
    margin: 4px 0;
  } */
  /* #newWrapper #newSlider.newest .musicBox #active img {
    width: 40px;
    height: 40px;
    margin: 4px 0;
  } */
  #top10 #newSlider .slick-current,
  #top10 #newSlider .slick-current.slick-active:hover {
    transform: scale(1.2);
  }
  #newWrapper #newSlider .musicBox #active div {
    padding: 0;
    gap: 2px;
  }
  #aiWrapper + .mainIcon {
    margin: -86px 11px -6px 0;
    width: 98px;
  }
  /* #top10 #newSlider .slick-list .slick-track {
    top: 50px;
  } */
  #newWrapper #newSlider .musicBox #active div h1 {
    font-size: 12px;
    margin: 0 0 4px;
    padding: 0 10px;
  }

  #newWrapper #newSlider .musicBox #active div p {
    font-size: 10px;
    margin: 0;
  }
  #newSlider .musicBox #active .mobileImg {
    width: auto;
    height: auto;
    border-radius: 8px;
    display: flex;
  }
  #top10 #newSlider .musicBox #active .mobileImg {
    display: none;
  }
  #top10 .musicBox .aiModelNm,
  #newWrapper .musicBox .aiModelNm {
    font-size: 8px !important;
  }
  #newSlider .musicBox #active {
    padding: 10px;
    justify-content: center;
  }
  /* #aiWrapper > h1 span {
    font-size: 16px;
  } */
  /* #newSlider .musicBox {
    padding: 20px;
  } */
  /* #newSlider.newest .slick-list {
    height: 228px;
    padding: 40px 0 !important;
  } */

  #newWrapper #newSlider.newest .slick-slide.slick-current {
    /* transform: scale(1);
    padding: 0;
    opacity: 1; */
    transform: scale(1.2);
    padding: 4px 0;
    opacity: 1;
    margin: 14px 0 14px;
  }
  #newSlider.newest .slick-list .slick-track {
    /* top: 56px !important; */
  }
  .mainIcon {
    width: 83px;
    margin: -60px 0 0;
  }
  #newWrapper #newSlider .slick-slide {
    padding: 8px;
  }
}
@media (max-width: 700px) {
  #newSlider {
    padding: 0;
  }
  #newWrapper #newSlider.newest .musicBox #active img {
    width: 30%;
    height: 30%;
  }
  /* #newSlider .musicBox {
    padding: 0 10px;
  } */
  #top10 #newSlider .slick-current,
  #top10 #newSlider .slick-current.slick-active:hover {
    transform: scale(1.5);
  }
  #top10 #newSlider .slick-slide {
    margin: 4px 0 20px;
  }
  /* #newSlider .slick-current .musicBox {
    padding: 8px;
  } */
  /* #top10 #newSlider .slick-list .slick-track {
    top: 20px;
  } */
  #newSlider .musicBox #active {
    width: 100%;
    height: 100%;
    left: 0;
    padding: 10px;
    justify-content: space-around;
    gap: 40px;
  }
  #newSlider .musicBox #active .mobileImg {
    /* width: 16px; */
    height: 16px;
    border-radius: 8px;
    display: flex;
    transform: scale(0.8);
  }
  /* #newSlider .musicBox #active img {
    width: 48px;
    height: 48px;
    margin: 5px 0;
  } */
  #newSlider .musicBox #active div {
    align-items: center;
  }
  #newSlider .musicBox #active div h1 {
    margin: 0;
    text-align: center;
    font-size: 8px;
    margin: 0 0 3px;
  }
  #newSlider .musicBox #active div p {
    font-size: 6px;
  }

  /* #newSlider .musicBox div:first-child {
    width: 100%;
    left: 0;
    padding: 0 10px;
    background: none;
  } */
  #newSlider .musicBox div:first-child h1 {
    text-align: center;
    margin: 0;
  }
  #newSlider .musicBox:hover div:first-child {
    opacity: 1;
  }
  #aiWrapper #newSlider .arrowLeft,
  #newSlider .arrowLeft {
    left: -10px;
    /* color: #ffffff; */
  }
  #aiWrapper #newSlider .arrowRight,
  #newSlider .arrowRight {
    right: -10px;
    /* color: #ffffff; */
  }
  #top10 #newSlider #active {
    /* padding-top: 28px; */
  }
  #newSlider .arrowLeft:hover,
  #newSlider .arrowRight:hover {
    background: rgba(0, 0, 0, 0.1);
    color: #000;
  }
  #newSlider.topAlbum .musicBox .aiModelNm {
    transform: scale(1.4);
    margin-bottom: 4px;
  }
  #newSlider .slick-slide {
  }
  #aiWrapper + .mainIcon {
    margin: -78px 11px -6px 0;
    width: 92px;
  }

  #newWrapper #newSlider .slick-slide.slick-current {
    transform: scale(1.2);
    padding: 8px;
    opacity: 1;
  }
  #newSlider.newest .slick-list {
    /* height: 200px; */
    /* padding: 40px 0 !important; */
  }
  /* #newWrapper #newSlider.newest .slick-slide.slick-current {
    transform: scale(1.2);
    padding: 0;
    opacity: 1;
  } */
  #newSlider.newest .slick-list .slick-track {
    top: 4% !important;
  }
  #newWrapper #newSlider .slick-slide {
    margin: 16px 0 8px;
  }
}
@media (max-width: 500px) {
  /* #top10 #newSlider .slick-list .slick-track {
    top: 20px;
  } */
  #newSlider.topAlbum .musicBox .aiModelNm {
    transform: scale(1.1);
    margin-bottom: 4px;
  }
  #aiWrapper + .mainIcon {
    margin: -58px 11px 2px 0;
    width: 68px;
  }
  #newSlider .musicBox {
    margin: 8px 4px 4px;
  }
}
@media (max-width: 400px) {
  #top10 #newSlider .slick-current,
  #top10 #newSlider .slick-current.slick-active:hover {
    transform: scale(1.6);
  }
  /* #newSlider .musicBox #active img {
    width: 30px;
    height: 30px;
    margin: 5px 0;
  } */
}

#popularSlider {
  display: block;
  width: 100%;
}

#popularSlider .list {
  padding: 6px 4px;
}

#popularSlider .list:hover > div {
  background: linear-gradient(to right, #13d5df, #f138fc);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  object-fit: cover;
}

#popularSlider .slick-current .list > div {
  background: linear-gradient(to right, #13d5df, #f138fc);
  box-shadow: 0 0 6px 4px rgba(241, 56, 252, 0.2);
}
.bestAlbum #popularSlider .slick-current .list > div {
  background: #f138fc;
}
.mainTop #popularSlider .list > div {
  /* .mainTop #popularSlider .slick-current .list > div { */
  background-color: #fff;
  background-image: none;
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
  padding: 0;
  transition: all 0.2s ease-in-out;
}

#popularSlider .list > div {
  padding: 4px;
  border-radius: 16px;
  position: relative;
}

#popularSlider .list > div > img {
  width: 100%;
  height: 260px;
  border-radius: 16px;
}

#popularSlider .list > div .absoluteBox {
  position: absolute;
  top: 4px;
  height: 4px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  border-radius: 16px;
  background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
}

.contentsSlide #popularSlider .list > div .absoluteBox .user [class^='promptRank']::before {
  width: 40px;
}

#popularSlider .list > div .absoluteBox .user {
  padding: 0 8px 0 8px;
}

#popularSlider .list > div .absoluteBox .user div {
  width: auto;
}

#popularSlider .list > div .absoluteBox .user div img {
  width: 20px;
  height: 20px;
  margin: 0 8px 0 0;
}

#popularSlider .list > div .absoluteBox .user div p {
  font-size: 13px;
  color: #ffffff;
}

#popularSlider .list > div .absoluteBox .user > img {
  width: 38px;
  height: auto;
  margin-top: 13px;
  display: inline-block;
}

#popularSlider .list > div .absoluteBox .title > p {
  font-size: 24px;
  font-weight: 600;
  color: #ffffff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  margin: 0 0 4px;
  padding: 0 28px;
  line-height: 140%;
  text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
}

#popularSlider .list > div .absoluteBox .title .greyBox {
  background: #e2e2e2;
  padding: 8px 8px;
  border-radius: 0 0 12px 12px;
  gap: 4px;
}

#popularSlider .list > div .absoluteBox .title .greyBox > img {
  width: 32px;
  height: 32px;
  border-radius: 100%;
  margin: 0 8px 0 0;
}

#popularSlider .list > div .absoluteBox .title .greyBox > div {
  width: calc(100% - 32px - 8px);
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
#popularSlider .list > div .absoluteBox .title .greyBox p {
  /* height: 24px; */
}

#popularSlider .list > div .absoluteBox .title .greyBox > div .flexRowBetween {
  width: auto;
  height: 24px;
}

#popularSlider .list > div .absoluteBox .title .greyBox div > p {
  font-size: 14px;
  font-weight: 600;
  color: #0e0e1f;
  line-height: 1;
  margin: auto 0;
}

#popularSlider .list > div .absoluteBox .title .greyBox div div .imgBox {
  width: auto;
  display: none;
}

#popularSlider .list > div .absoluteBox .title .greyBox div div .imgBox img:first-child {
  width: 20px;
  height: 20px;
  margin: 0 8px 0 0;
}

#popularSlider .list > div .absoluteBox .title .greyBox div div .imgBox img {
  width: 16px;
  height: 16px;
  margin: 0 4px 0 0;
}

#popularSlider .list > div .absoluteBox .title .greyBox div div p {
  font-size: 13px;
  font-weight: 600;
  margin: 0;
  line-height: 1;
}

#popularSlider .arrowLeft,
#popularSlider .arrowRight {
  position: absolute;
  width: 36px;
  margin: 0 4px 0 0;
  height: 36px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 100%;
  font-size: 12px;
  color: #000000;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  z-index: 10;
}
.bestAlbum #popularSlider .arrowLeft:hover,
.bestAlbum #popularSlider .arrowRight:hover,
#popularSlider .arrowLeft:hover,
#popularSlider .arrowRight:hover {
  background: linear-gradient(to right, #b041f3, #ec15ff);
  color: #ffffff;
}

#popularSlider .arrowLeft {
  top: 50%;
  left: 0;
  margin: -18px 0 0;
}

#popularSlider .arrowRight {
  top: 50%;
  right: 0;
  margin: -18px 0 0;
}

#popularSlider .slick-dots {
  display: none !important;
}

@media (max-width: 700px) {
  #popularSlider .list > div > img {
    height: 136px;
  }
  #popularSlider .list {
    padding: 0px 8px;
  }
  #popularSlider .list > div .absoluteBox .title > p {
    display: none;
  }

  #popularSlider .list > div .absoluteBox .title .greyBox > img {
    width: 20px;
    height: 20px;
    margin: 0 4px 0 0;
  }

  /* #popularSlider .list > div .absoluteBox .title .greyBox > div {
    width: calc(100% - 24px - 4px);
    justify-content: end;
  } */
  #popularSlider .list > div .absoluteBox .title .greyBox > div > img {
    display: none;
  }
  #popularSlider .list > div .absoluteBox .title .greyBox div div .imgBox img:first-child {
    display: none;
  }

  #popularSlider .list > div .absoluteBox .user > img {
    display: none;
  }

  #popularSlider .list > div .absoluteBox .user {
    padding: 8px;
  }

  /*   #popularSlider .list > div .absoluteBox .title .greyBox div > p {
    font-size: 12px;
  } */

  .Section #popularSlider .arrowLeft {
    left: -12px;
  }

  .Section #popularSlider .arrowRight {
    right: -12px;
  }
  #popularSlider .slick-dots {
    display: inline !important;
    display: initial !important;
    bottom: -30px;
  }

  #popularSlider .slick-dots li.slick-active button:before,
  #popularSlider .slick-dots li button:before {
    color: #000000;
  }

  #popularSlider .slick-dots li {
    margin: 0;
  }
}

/* new 250106 */

#populerSlider .slick-current .list {
  padding: 4px;
  background: linear-gradient(to right, #13d5df, #f138fc);
}

#populerSlider .list {
  padding: 0 4px;
  border-radius: 16px;
}

#populerSlider .list > div {
  border-radius: 16px 16px 0 0;
  position: relative;
}

#populerSlider .list > div > img {
  width: 100%;
  height: 220px;
  border-radius: 16px 16px 0 0;
}

#populerSlider .list > div .absoluteBox {
  position: absolute;
  top: 4px;
  height: 4px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  border-radius: 16px 16px 0 0;
  background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
}

#populerSlider .list > div .absoluteBox .user {
  padding: 0 20px 0 8px;
}

#populerSlider .list > div .absoluteBox .user div {
  width: auto;
}

#populerSlider .list > div .absoluteBox .user div img {
  width: 20px;
  height: 20px;
  margin: 0 8px 0 0;
}

#populerSlider .list > div .absoluteBox .user div p {
  font-size: 13px;
  color: #ffffff;
}

#populerSlider .list > div .absoluteBox .user > img {
  width: 38px;
  height: auto;
}

#populerSlider .list > div .absoluteBox .title > p {
  font-size: 24px;
  font-weight: 600;
  color: #ffffff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  margin: 0 0 4px;
  padding: 0 28px;
}

#populerSlider .list .greyBox {
  background: #e2e2e2;
  padding: 8px 12px;
  border-radius: 0 0 16px 16px;
}

#populerSlider .list .greyBox > img {
  width: 32px;
  height: 32px;
  border-radius: 100%;
  margin: 0 8px 0 0;
}

#populerSlider .list .greyBox > div {
  width: calc(100% - 32px - 8px);
}

#populerSlider .list .greyBox div > p {
  font-size: 14px;
  font-weight: 600;
  color: #0e0e1f;
}

#populerSlider .list .greyBox div div .imgBox {
  width: auto;
}

#populerSlider .list .greyBox div div .imgBox img:first-child {
  width: 20px;
  height: 20px;
  margin: 0 8px 0 0;
}

#populerSlider .list .greyBox div div .imgBox img {
  width: 16px;
  height: 16px;
  margin: 0 4px 0 0;
}

#populerSlider .list .greyBox div div p {
  font-size: 13px;
  font-weight: 600;
}

#populerSlider .arrowLeft,
#populerSlider .arrowRight {
  position: absolute;
  width: 36px;
  margin: 0 4px 0 0;
  height: 36px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 100%;
  font-size: 12px;
  color: #000000;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  z-index: 1000;
}

#populerSlider .arrowLeft:hover,
#populerSlider .arrowRight:hover {
  background: linear-gradient(to right, #b041f3, #ec15ff);
  color: #ffffff;
}

#populerSlider .arrowLeft {
  top: 50%;
  left: 0;
  margin: -18px 0 0;
}

#populerSlider .arrowRight {
  top: 50%;
  right: 0;
  margin: -18px 0 0;
}

#populerSlider .slick-dots {
  display: none !important;
}

@media (max-width: 700px) {
  #populerSlider .list > div > img {
    height: 136px;
  }

  #populerSlider .list > div .absoluteBox .title > p {
    display: none;
  }

  #populerSlider .list .greyBox {
    padding: 4px 8px;
  }

  #populerSlider .list .greyBox > img {
    width: 24px;
    height: 24px;
    margin: 0 4px 0 0;
  }

  #populerSlider .list .greyBox > div {
    width: calc(100% - 24px - 4px);
  }

  #populerSlider .list .greyBox div div .imgBox img:first-child {
    display: none;
  }

  #populerSlider .list > div .absoluteBox .user > img {
    display: none;
  }

  #populerSlider .list > div .absoluteBox .user {
    padding: 8px;
  }

  #populerSlider .list .greyBox div > p {
    font-size: 12px;
  }

  #populerSlider .arrowLeft,
  #populerSlider .arrowRight {
    display: none;
  }

  #populerSlider .slick-dots {
    display: inline !important;
    display: initial !important;
    bottom: -30px;
  }

  #populerSlider .slick-dots li.slick-active button:before,
  #populerSlider .slick-dots li button:before {
    color: #000000;
  }

  #populerSlider .slick-dots li {
    margin: 0;
  }
}

#section {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 999;
  width: auto !important;
}

#section .up {
  width: auto;
  margin: 0 0 -24px;
}

#section .up div {
  width: 64px;
  height: 64px;
  cursor: pointer;
}

.Section #section .up div {
  width: 72px;
  height: 72px;
  background: #00000007;
  border-radius: 100% 100% 0 0;
}

#section .up.active {
  margin: 0 0 20px;
}

#section .up.active div {
  border-radius: 100%;
  background: linear-gradient(to right, #ca79fc 0%, #ff5eb6 100%);
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.25);
}

#section .up > div > img {
  width: 32px;
}

#section .relativeMenu {
  visibility: hidden;
  height: 0px;
  transition: all 0.3s ease-in-out;
  overflow: hidden;
  opacity: 0;
}

#section .relativeMenu#active {
  visibility: visible;
  height: auto;
  opacity: 1;
}

#section .relativeMenu .menu {
  margin: 0 0 16px;
  width: auto;
}

#section .relativeMenu .menu p {
  font-size: 16px;
  color: #0e0e1f;
  margin: 0 10px 0 0;
  text-shadow: 0px 6px 8px rgb(0, 0, 0, 0.25);
}

#section .relativeMenu .menu div {
  width: 64px;
  height: 64px;
  background: #3e3d53;
  border-radius: 100%;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}

#section .relativeMenu .menu div img {
  width: 32px;
}

#section .closeBox .menuBox {
  width: 72px;
  height: 72px;
  border-radius: 100%;
  background: #13d5df;
  cursor: pointer;
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.25);
}

#section .closeBox.active .menuBox {
  background: #12b8c2;
}

#section .closeBox .menuBox .activeIcon {
  display: none;
}

#section .closeBox .menuBox .activeIcon#activeIcon {
  display: flex;
}

#section .closeBox .menuBox img#noneVisible {
  display: none;
}

#section .closeBox .menuBox img {
  width: 38px;
}

@media (max-width: 700px) {
  .musicSection #section,
  .imageSection #section,
  .textSection #section {
    bottom: 70px;
  }
  #section .up {
    margin: 0 0 -15px;
  }

  .Section #section .up div {
    width: 48px;
    height: 48px;
  }

  #section .closeBox .menuBox {
    width: 48px;
    height: 48px;
  }

  #section .closeBox .menuBox img {
    width: 26px;
  }

  #section .up div img,
  #section .relativeMenu .menu div img {
    width: 20px;
  }
  #section .up div,
  #section .relativeMenu .menu div {
    width: 48px;
    height: 48px;
  }
}

@charset "UTF-8";
input {
  font-size: 16px !important;
}

#aiWrapper {
  margin: 32px 0 0;
}
#aiWrapper > h1 {
  font-size: 38px;
  font-weight: 700;
  background: linear-gradient(to right, #13d5df, #f138fc);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  text-align: center;
  margin: 0 0 28px;
}
.mainTop #aiWrapper > h1 {
  background: linear-gradient(to right, #f138fc, #13d5df);
  -webkit-background-clip: text;
          background-clip: text;
}
#aiWrapper > h1 span {
  font-size: 38px;
}
#aiWrapper .titleBox {
  margin: 0 0 10px;
}
#aiWrapper .titleBox::after {
  content: '';
  width: 48px;
}
#aiWrapper .titleBox:has(#whiteBtn)::after {
  display: none;
}
#aiWrapper .titleBox .title {
  width: auto;
  margin-top: 0;
}
#aiWrapper .titleBox .title img {
  width: 24px;
  margin: 0 12px 0 0;
}
#aiWrapper .titleBox .title p {
  font-size: 24px;
  color: #323146;
  font-weight: 700;
}
#aiWrapper .titleBox > div:nth-child(2) {
  width: auto;
}
#aiWrapper .titleBox > div:nth-child(2)#whiteBtn {
  width: 80px;
}
#aiWrapper .titleBox .tabBox {
  width: auto;
  padding: 6px;
  background: linear-gradient(to right, #b041f3 0%, #ec15ff 100%);
  border-radius: 50px;
}
#aiWrapper .titleBox .tabBox .tab {
  padding: 6px 20px;
  width: auto;
  cursor: pointer;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  transition: all 0.2s ease-in-out;
  border-radius: 50px;
  margin: 0 2px;
}
#aiWrapper .titleBox .tabBox .tab#active {
  background: #ffffff;
  color: #464548;
}
#aiWrapper .slide {
  flex-wrap: wrap;
  margin: 0 0 20px;
  padding: 0 40px;
  position: relative;
}
#aiWrapper .slide .arrowLeft,
#aiWrapper .slide .arrowRight {
  position: absolute;
  width: 36px;
  margin: 0 4px 0 0;
  height: 36px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 100%;
  font-size: 12px;
  color: #000000;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  z-index: 100;
}
#aiWrapper .slide .arrowLeft {
  top: 50%;
  left: 0;
  margin: -18px 0 0;
}
#aiWrapper .slide .arrowRight {
  top: 50%;
  right: 0;
  margin: -18px 0 0;
}
#aiWrapper .slide .arrowLeft:hover,
#aiWrapper .slide .arrowRight:hover {
  background: linear-gradient(to right, #b041f3, #ec15ff);
  color: #ffffff;
}
#aiWrapper .slide .imageWrapper {
  width: 156px;
  height: 156px;
  border-radius: 100%;
  margin: 0 -26px;
  overflow: hidden;
  position: relative;
}
#aiWrapper .slide .imageWrapper img {
  width: 100%;
  height: 100%;
}
#aiWrapper .slide .imageWrapper .info {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #13d5df, #f138fc);
  opacity: 0;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
#aiWrapper .slide .imageWrapper .activeIcon {
  opacity: 0;
}
#aiWrapper .slide .imageWrapper#active .activeIcon {
  opacity: 1;
}
#aiWrapper .slide .imageWrapper .activeIcon {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  z-index: 20;
  transition: all 0.2s ease-in-out;
}
#aiWrapper .slide .imageWrapper .activeIcon .round {
  width: 92px;
  height: 92px;
  background: #1e1e1e;
  border-radius: 100%;
}
#aiWrapper .slide .imageWrapper .activeIcon img {
  width: 33px;
  height: auto;
}
#aiWrapper .slide .imageWrapper:not(#active):hover .info {
  opacity: 0.6;
}

#aiWrapper .slide .imageWrapper .info img {
  width: 20px;
  height: 20px;
  margin: 0 0 10px;
  border-radius: 100%;
}
#aiWrapper .slide .imageWrapper .info h1 {
  font-size: 14px;
  color: #ffffff;
  margin: 0 0 8px;
  text-align: center;
}
#aiWrapper .slide .imageWrapper .info p {
  font-size: 12px;
  color: #ffffff;
}
#aiWrapper .slide .imageWrapper#active {
  z-index: 10;
  width: 240px;
  height: 240px;
  box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.5);
}
#aiWrapper .slide .imageWrapper:nth-child(7) {
  z-index: 9;
}
#aiWrapper .slide .imageWrapper:nth-child(8) {
  z-index: 8;
}
#aiWrapper .slide .imageWrapper:nth-child(9) {
  z-index: 7;
}
#aiWrapper .slide .imageWrapper:nth-child(10) {
  z-index: 6;
}
#aiWrapper .slide .imageWrapper:nth-child(11) {
  z-index: 5;
}
#aiWrapper .slide .imageWrapper:nth-child(12) {
  z-index: 4;
}
#aiWrapper .slide .imageWrapper:nth-child(13) {
  z-index: 3;
}

.mainIcon {
  margin: -90px 11px 4px 0;
  width: 110px;
  z-index: 10;
  position: relative;
  /* animation: recodePin 1s linear;
  transform-origin: bottom left;
  transform: rotate(0deg); */
}

@keyframes recodePin {
  0% {
    transform-prigin: 0;
    bottom: 0;
  }
  50% {
    transform: rotate(10deg);
    bottom: 0;
  }
  100% {
    transform-prigin: 0;
    bottom: 0;
  }
}
.bestAlbum #musicInfo .mobileTop {
  position: relative;
  padding-top: 32px;
}
.bestAlbum #musicInfo {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), linear-gradient(to right, #f138fc 0%, #13d5df 100%);
  /* padding-top: 32px; */
}

#musicInfo {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), linear-gradient(to right, #13d5df 0%, #f138fc 100%);
  height: 320px;
  width: 100%;
  margin: -60px 0 0;
}
#musicInfo .rsWrapper {
  align-items: flex-end;
}
#musicInfo .rsWrapper .thumbBox {
  width: 320px;
  height: 100%;
  position: relative;
  box-shadow: 7px 0 2px 0 rgba(0, 0, 0, 0.2);
}
#musicInfo .rsWrapper .thumbBox .absolBox {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
}
#musicInfo .rsWrapper .thumbBox .absolBox > div {
  padding: 0 12px;
}

#musicInfo .rsWrapper .thumbBox .absolBox .btnPlay {
  background: none;
  cursor: pointer;
}
#musicInfo .rsWrapper .thumbBox .absolBox .btnPlay > img {
  width: 72px;
}
#musicInfo .rsWrapper .thumbBox .absolBox > div > div {
  width: auto;
}
#musicInfo .rsWrapper .thumbBox .absolBox > div > div > img {
  width: 20px;
  height: 20px;
  border-radius: 100%;
  margin: 0 8px 0 0;
}
#musicInfo .rsWrapper .thumbBox .absolBox > div div p {
  font-size: 13px;
  color: #ffffff;
}
#musicInfo .rsWrapper .thumbBox .absolBox > div > img {
  width: 36px;
  width: 48px;
}
#musicInfo .rsWrapper .thumbBox .absolBox .name {
  padding: 0 12px 15px;
  color: #ffffff;
  font-size: 14px;
  min-height: 48px;
  justify-content: flex-end;
}
#musicInfo .rsWrapper .thumbBox .thumb {
  width: 100%;
  height: 100%;
}
#musicInfo .rsWrapper .info {
  width: calc(100% - 320px - 40px);
  padding: 0 0 12px;
  height: auto;
}
#musicInfo .rsWrapper .info > h1 {
  font-size: 32px;
  color: #ffffff;
  font-weight: 600;
  margin: 0 0 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  cursor: pointer;
}
#musicInfo .rsWrapper .info > div {
  /* height: 200px; */
}
#musicInfo .rsWrapper .info div .userBox {
  height: 100%;
  justify-content: space-between;
  display: flex;
  flex-direction: column;
  justify-content: start;
  width: 400px;
  /* padding-top: 16px; */
}
#musicInfo .rsWrapper .info div .userBox .userInfo {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: flex-start;
  gap: 16px;
}
#musicInfo .rsWrapper .info div .userBox .userInfo figure {
  width: 80px;
  height: 80px;
  background: #3e3d53;
  border-radius: 16px;
  overflow: hidden;
}
#musicInfo .rsWrapper .info div .userBox .userInfo figure img {
  width: 80px;
  height: 80px;
  margin: 0;
  cursor: pointer;
  background: #fff;
}
#musicInfo .rsWrapper .info div .userBox .userInfo > img {
  width: 80px;
  height: 80px;
  margin: 0 15px 0 0;
  cursor: pointer;
  background: #fff;
  border-radius: 16px;
}
#musicInfo .rsWrapper .info div .userBox .userInfo .nameBox {
  width: calc(100% - 80px - 15px);
  display: flex;
  flex-direction: column;
  justify-content: start;
  gap: 8px;
}
#musicInfo .rsWrapper .info div .userBox .userInfo .nameBox > div {
  margin: 0 0 12px;
  margin: 0;
}
#musicInfo .rsWrapper .info div .userBox .userInfo .nameBox .userArea {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
}
#musicInfo .rsWrapper .info div .userBox .userInfo .nameBox .userArea .badge {
  width: auto;
}
#musicInfo .rsWrapper .info div .userBox .userInfo .nameBox .userArea p {
  width: 100%;
  font-size: 24px;
}
#musicInfo .rsWrapper .info div .userBox .userInfo .nameBox div .badge {
  min-width: 0;
  min-width: initial;
  width: auto;
  height: 24px !important;
  /* background-image: linear-gradient(to right, #b041f3 0%, #ec15ff 100%), linear-gradient(to right, #13d5df 0%, #f138fc 100%); */
  background-origin: padding-box;
  background-clip: padding-box;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  border-radius: 20px;
  margin: 0 4px 0 0;
  padding: 2px 8px;
}

#musicInfo .rsWrapper .info div .userBox .userInfo .nameBox div > p {
  font-size: 24px;
  color: #ffffff;
  cursor: pointer;
}
#musicInfo .rsWrapper .info div .userBox .userInfo .nameBox div .follow {
  width: auto;
}
#musicInfo .rsWrapper .info div .userBox .userInfo .nameBox div .follow img {
  width: 20px;
  height: 20px;
  border-radius: 100%;
  margin: 0 10px 0 0;
}
#musicInfo .rsWrapper .info div .userBox .userInfo .nameBox div .follow p {
  font-size: 16px;
  color: #ffffff;
}
#musicInfo .rsWrapper .info div .userBox .userInfo .nameBox div .star {
  width: auto;
}
#musicInfo .rsWrapper .info div .userBox .userInfo .nameBox div .star :where(.css-dev-only-do-not-override-1x0dypw).ant-rate .ant-rate-star:not(:last-child) {
  margin-inline-end: 2px;
}
#musicInfo .rsWrapper .info div .userBox .userInfo .nameBox div .star img {
  width: 24px;
  margin: 0 0 0 4px;
}

/* #musicInfo .rsWrapper .info div .userBox .userInfo .nameBox .appraisal {
  display: flex;
  flex-direction: row;
  height: 32px;
  gap: 4px;
}
#musicInfo .rsWrapper .info div .userBox .userInfo .nameBox .appraisal {
  gap: 4px;
}

#musicInfo .rsWrapper .info div .userBox .userInfo .nameBox .appraisal img {
  width: 14px;
  margin: 0;
}
#musicInfo .rsWrapper .info div .userBox .userInfo .nameBox .ant-dropdown-hidden p {
  color: #000;
} */

#musicInfo .rsWrapper .info div .userBox .userInfo .nameBox .appraisal {
  display: flex;
  flex-direction: row;
  height: 32px;
  /* gap: 4px; */
}
#musicInfo .rsWrapper .info div .userBox .userInfo .nameBox .appraisal {
  /* gap: 4px; */
}

#musicInfo .rsWrapper .info div .userBox .userInfo .nameBox .appraisal img {
  width: 14px;
  margin: 0;
}
#musicInfo .rsWrapper .info div .userBox .userInfo .nameBox .ant-dropdown-hidden p {
  color: #000;
}

#musicInfo .rsWrapper .info div .userBox .btnBox {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
}
#musicInfo .rsWrapper .info div .userBox .btnBox #whiteBorderBtn {
  width: 130px;
  height: 40px;
  border-radius: 8px;
}
/* #musicInfo .rsWrapper .info div .userBox .btnBox #whiteBorderBtn.active {
  border: transparent;
  background: rgba(0, 0, 0, 0.1);
} */
#musicInfo .rsWrapper .info div .userBox .btnBox #whiteBorderBtn p {
  font-size: 14px;
}
#musicInfo .rsWrapper .info div .userBox .btnBox #whiteBorderBtn img {
  width: 16px;
  margin: 0 10px 0 0;
}
#musicInfo .rsWrapper .info div .contentsBox {
  height: 200px;
  padding: 17px 28px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  width: 50%;
  width: calc(100% - 452px);
  justify-content: space-between;
}
#musicInfo .rsWrapper .info div .contentsBox > div:first-child {
  margin: 0 0 20px;
  cursor: pointer;
  width: auto;
}
#musicInfo .rsWrapper .info div .contentsBox > div h1 {
  font-size: 16px;
  color: #ffffff;
  margin: 0 23px 0 0;
  font-weight: 600;
  text-wrap-mode: nowrap;
}
#musicInfo .rsWrapper .info div .contentsBox > div h1 span {
  font-weight: 500;
}
#musicInfo .rsWrapper .info div .contentsBox > div p {
  font-size: 12px;
  color: #ffffff;
}
#musicInfo .rsWrapper .info div .contentsBox .musicBox {
  width: 100%;
  display: flex;
  gap: 17.7px;
  overflow: auto;
}

#musicInfo .rsWrapper .info div .contentsBox .musicBox .music {
  width: 100px;
  margin: 0;
  position: relative;
  cursor: pointer;
}

#musicInfo .rsWrapper .info div .contentsBox .musicBox .music .user {
  background: linear-gradient(181deg, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0) 24%);
  border-radius: 16px 16px 0 0;
}

#musicInfo .rsWrapper .info div .contentsBox .musicBox .music > img {
  overflow: hidden;
  width: 100%;
  height: 100px;
  margin: 0 0 8px;
  border-radius: 16px;
  border: 0;
  transition: 0.1s;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
  object-fit: cover;
}
#musicInfo .rsWrapper .info div .contentsBox .musicBox .music > img:hover {
  border: 4px solid #ec15ff;
  box-shadow: 0 0 3px #ec15ff;
}
#musicInfo .rsWrapper .info div .contentsBox .musicBox .music .user {
  /* z-index: -1; */
}
#musicInfo .rsWrapper .info div .contentsBox .musicBox .music p {
  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 400;
  text-align: center;
  color: #ffffff;
}
#musicInfo .rsWrapper .info div .contentsBox .musicBox .music > div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /*padding: 4px;  46 가장자리에 마우스 호버해도 반응 필요*/
  z-index: 2;
  height: 100%;
  align-items: flex-start;
}
#musicInfo .rsWrapper .info div .contentsBox .musicBox .music > div img {
  width: 16px;
  height: 16px;
  border-radius: 100%;
  margin: 0 5px 0 0;
}
#musicInfo .rsWrapper .info div .contentsBox .musicBox .music > div p {
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
  width: auto;
}
#musicInfo .mobileContentsBox,
#musicInfo .mobileTop {
  display: none;
}
.bestAlbum #musicInfo .mobileTop div.promptRankIcon {
  position: absolute;
  top: 0;
  right: 16px;
}
#musicInfo .mobileContentsBox .music > img {
}
#musicWrapper .rsWrapper > div .content .searchBox div {
  gap: 8px;
}
#musicWrapper .rsWrapper > div .content .searchBox div #pinkBtn {
  width: auto;
}
#musicWrapper .rsWrapper > div .content .searchBox div #pinkBtn p:first-child {
  margin: 0;
}
#musicWrapper .rsWrapper > div .content .searchBox div button {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  height: 40px;
  border-radius: 4px;
}
#musicWrapper .rsWrapper > div .content :where(.css-dev-only-do-not-override-1x0dypw).ant-rate {
  font-size: 20px;
  gap: 4px;
}
#musicWrapper .rsWrapper > div .content :where(.css-dev-only-do-not-override-1x0dypw).ant-rate li {
  margin: 0;
}
#musicWrapper .rsWrapper > div > .titleBox {
  margin-bottom: 48px;
}

/* 최신곡 */
#newWrapper {
  padding: 24px 40px 16px;
  background: #d0f7f9;
  /* background-image: linear-gradient(to top, rgba(236, 21, 255, 0.1), rgba(236, 21, 255, 0) 85%), linear-gradient(to bottom, rgba(19, 213, 223, 0.2), rgba(19, 213, 223, 0.7), rgba(19, 213, 223, 0.2)); */
}
#newWrapper .rsWrapper {
  position: relative;
}
#newWrapper .rsWrapper .bgImg {
  position: absolute;
  width: calc(100% + 80px);
  top: 0;
  left: 50%;
  right: 50%;
  transform: translate(-50%, 18%);
}
#newWrapper .rsWrapper > div:first-child {
  margin: 0;
}
#newWrapper .rsWrapper div .titleBox {
  width: auto;
}
#newWrapper .rsWrapper div .titleBox img {
  width: 24px;
  margin: 0 13px 0 0;
}
#newWrapper .rsWrapper div .titleBox h1 {
  font-size: 24px;
  color: #323146;
  font-weight: 700;
}
#aiWrapper .slider {
  padding: 0 1px;
}
#newWrapper .rsWrapper .slider {
  padding: 0 40px;
}

/* 장르 */
#gerneWrapper {
  padding: 32px 0 0;
}

#gerneWrapper .rsWrapper .titleBox {
  margin: 0 0 28px;
}
#gerneWrapper .rsWrapper .titleBox .title {
  width: auto;
  margin-top: 0;
}
#gerneWrapper .rsWrapper .titleBox .title img {
  width: 24px;
  margin: 0 12px 0 0;
}
#gerneWrapper .rsWrapper .titleBox .title p {
  font-size: 24px;
  color: #323146;
  font-weight: 700;
  text-wrap-mode: nowrap;
}
#gerneWrapper .rsWrapper .titleBox > div:nth-child(2) {
  width: auto;
}
#gerneWrapper .rsWrapper .titleBox .tabBox {
  width: auto;
  padding: 6px;
  background: linear-gradient(to right, #b041f3 0%, #ec15ff 100%);
  border-radius: 50px;
}
#gerneWrapper .rsWrapper .titleBox .tabBox .tab {
  padding: 8px 24px;
  width: auto;
  cursor: pointer;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  transition: all 0.2s ease-in-out;
  border-radius: 50px;
  margin: 0 2px;
  text-wrap-mode: nowrap;
}
#gerneWrapper .rsWrapper .titleBox .tabBox .tab#active {
  background: #ffffff;
  color: #464548;
}
#gerneWrapper .rsWrapper .listBox {
  flex-wrap: wrap;
}
#gerneWrapper .rsWrapper .listBox .gerneBox {
  width: calc(14.2857142857% - 25px);
  margin: 0 29px 40px 0;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25);
}
#gerneWrapper .rsWrapper .listBox .gerneBox:nth-child(7n) {
  margin: 0 0 40px;
}
#gerneWrapper .rsWrapper .listBox .gerneBox:before {
  content: '';
  display: block;
  padding-bottom: 100%;
}
#gerneWrapper .rsWrapper .listBox .gerneBox > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  object-fit: cover;
}
#gerneWrapper .rsWrapper .listBox .gerneBox:hover .absolBox {
  background: rgba(0, 0, 0, 0.4);
}
#gerneWrapper .rsWrapper .listBox .gerneBox:hover .absolBox div .play {
  opacity: 1;
}
#gerneWrapper .rsWrapper .listBox .gerneBox .absolBox {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0px;
  height: 100%;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  z-index: 2;
}
#gerneWrapper .rsWrapper .listBox .gerneBox .absolBox .title {
  /* margin-top: 0; */
  /* margin-bottom: 0; */
  padding: 8px;
}
#gerneWrapper .rsWrapper .listBox .gerneBox .absolBox .flexColStart .flexRowStart {
  z-index: 10;
  padding-top: 4px;
}
#gerneWrapper .rsWrapper .listBox .gerneBox .absolBox > div {
  height: 100%;
  position: relative;
}
#gerneWrapper .rsWrapper .listBox .gerneBox .absolBox > div .play {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  opacity: 0;
  transition: all 0.2s ease-in-out;
}
#gerneWrapper .rsWrapper .listBox .gerneBox .absolBox div .play img {
  width: 72px;
  height: 72px;
}
#gerneWrapper .rsWrapper .listBox .gerneBox .absolBox div .user img {
  width: 20px;
  height: 20px;
  border-radius: 100%;
  margin: 0 8px 0 0;
}
#gerneWrapper .rsWrapper .listBox .gerneBox .absolBox div .user p {
  font-size: 13px;
  color: #ffffff;
}
#gerneWrapper .rsWrapper .listBox .gerneBox .absolBox div .title h1 {
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 4px;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#gerneWrapper .rsWrapper .listBox .gerneBox .absolBox div .title div img {
  width: 24px;
  height: 24px;
  border-radius: 100%;
  margin: 0 8px 0 0;
}
#gerneWrapper .rsWrapper .listBox .gerneBox .absolBox div .title div p {
  font-size: 14px;
  font-weight: 400;
  color: #ffffff;
}
#gerneWrapper .rsWrapper .listBox .gerneBox .abosolBox div .play .musicIcon {
  display: none;
}
#gerneWrapper .rsWrapper .listBox .gerneBox#active .play {
  opacity: 1;
}
#gerneWrapper .rsWrapper .listBox .gerneBox#active .play img {
  display: none;
}
#gerneWrapper .rsWrapper .listBox .gerneBox#active .play .musicIcon {
  display: flex;
  width: 72px;
  height: 72px;
  background: #1e1e1e;
  border-radius: 100%;
}
#gerneWrapper .rsWrapper .listBox .gerneBox#active .play .musicIcon img {
  width: 34px;
  height: auto;
  display: inline;
  display: initial;
}
#gerneWrapper .rsWrapper .listBox .gerneBox#active .absolBox {
  background: rgba(0, 0, 0, 0.4);
}
#gerneWrapper .rsWrapper .listBox .gerneBox .absolBox > div .play .musicIcon {
  display: none;
}

/* 인기엔지니어 */
/* #engineWrapper {
  padding: 32px 0 0;
} */
#engineWrapper .rsWrapper .titleBox {
  margin: 0 0 28px;
}
#engineWrapper .rsWrapper .titleBox .title {
  width: auto;
}
#engineWrapper .rsWrapper .titleBox .title img {
  width: 24px;
  margin: 0 12px 0 0;
}
#engineWrapper .rsWrapper .titleBox .title p {
  font-size: 24px;
  color: #323146;
  font-weight: 700;
}
#engineWrapper .rsWrapper .listBox {
  flex-wrap: wrap;
}
#engineWrapper .rsWrapper .listBox .gerneBox {
  width: calc(14.2857142857% - 25px);
  margin: 0 29px 40px 0;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25);
}
#engineWrapper .rsWrapper .listBox .gerneBox:nth-child(7n) {
  margin: 0 0 40px;
}
#engineWrapper .rsWrapper .listBox .gerneBox:before {
  content: '';
  display: block;
  padding-bottom: 100%;
}
#engineWrapper .rsWrapper .listBox .gerneBox > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  object-fit: cover;
}

.staffBox#playerBg:hover .absoluteBox,
#engineWrapper .rsWrapper .listBox .gerneBox:hover .absolBox {
  background: rgba(0, 0, 0, 0.4);
}

.staffBox#playerBg:hover .absoluteBox .play img {
  opacity: 1;
}

#engineWrapper .rsWrapper .listBox .gerneBox:hover .absolBox div .play {
  opacity: 1;
}
#engineWrapper .rsWrapper .listBox .gerneBox .absolBox {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0px;
  height: 100%;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  z-index: 2;
}
#engineWrapper .rsWrapper .listBox .gerneBox .absolBox .flexColStart .flexRowStart {
  z-index: 10;
  padding-top: 4px;
}
#engineWrapper .rsWrapper .listBox .gerneBox .absolBox > div {
  height: 100%;
  position: relative;
}

.staffBox#playerBg .absoluteBox .play img {
  height: 100%;
  opacity: 0;
  transition: all 0.2s ease-in-out;
}

#engineWrapper .rsWrapper .listBox .gerneBox .absolBox > div .play {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  opacity: 0;
  transition: all 0.2s ease-in-out;
}

.staffBox#playerBg .absoluteBox .play img {
  width: 72px;
  height: 72px;
}

#engineWrapper .rsWrapper .listBox .gerneBox .absolBox div .play img {
  width: 72px;
  height: 72px;
}
#engineWrapper .rsWrapper .listBox .gerneBox .absolBox div .user img {
  width: 20px;
  height: 20px;
  border-radius: 100%;
  margin: 0 8px 0 0;
}
#engineWrapper .rsWrapper .listBox .gerneBox .absolBox div .user p {
  font-size: 13px;
  color: #ffffff;
}
#engineWrapper .rsWrapper .listBox .gerneBox .absolBox div .title h1 {
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 4px;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#engineWrapper .rsWrapper .listBox .gerneBox .absolBox div .title div img {
  width: 24px;
  height: 24px;
  border-radius: 100%;
  margin: 0 8px 0 0;
}
#engineWrapper .rsWrapper .listBox .gerneBox .absolBox div .title div p {
  font-size: 14px;
  font-weight: 400;
  color: #ffffff;
}
#engineWrapper .rsWrapper .listBox .gerneBox .abosolBox div .play .musicIcon {
  display: none;
}
#engineWrapper .rsWrapper .listBox .gerneBox#active .play {
  opacity: 1;
}
#engineWrapper .rsWrapper .listBox .gerneBox#active .play img {
  display: none;
}
#engineWrapper .rsWrapper .listBox .gerneBox#active .play .musicIcon {
  display: flex;
  width: 72px;
  height: 72px;
  background: #1e1e1e;
  border-radius: 100%;
}
#engineWrapper .rsWrapper .listBox .gerneBox#active .play .musicIcon img {
  width: 34px;
  height: auto;
  display: inline;
  display: initial;
}
#engineWrapper .rsWrapper .listBox .gerneBox#active .absolBox {
  background: rgba(0, 0, 0, 0.4);
}
#engineWrapper .rsWrapper .listBox .gerneBox .absolBox > div .play .musicIcon {
  display: none;
}

/* 배너 */
#subBannerWrapper {
  background: #1c1c2c;
  padding: 40px 0;
}
#subBannerWrapper .rsWrapper .subBanner {
  width: 49%;
  padding: 2px 2px 1px;
  background: linear-gradient(to right, #13d5df 0%, #f138fc 100%);
  border-radius: 20px;
  overflow: hidden;
  /* height: 284px; */
  position: relative;
  /*cursor: pointer;*/
}

.withCursor {
  cursor: pointer;
}

/* #subBannerWrapper .rsWrapper .subBanner div {
  height: 100%;
} */

#subBannerWrapper .rsWrapper .subBanner img {
  width: 100%;
  /* min-width: 740px;
  min-height: 274px; */
  border-radius: 20px;
  position: relative;
}
#subBannerWrapper .rsWrapper .subBanner .absoluteBox {
  position: absolute;
  top: 3px;
  left: 3px;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  background: rgba(0, 0, 0, 0.2);
}
#subBannerWrapper .rsWrapper .subBanner .absoluteBox h1 {
  font-size: 36px;
  font-weight: 300;
  margin: 0 0 10px;
  color: #ffffff;
}
#subBannerWrapper .rsWrapper .subBanner .absoluteBox h1 span {
  font-weight: 700;
}
#subBannerWrapper .rsWrapper .subBanner .absoluteBox p {
  font-size: 11px;
  font-weight: 600;
  color: #ffffff;
}
#subBannerWrapper .rsWrapper .subBanner .introText,
#subBanner2 .introText  {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
  text-align: center;
  color: #fff;
  text-shadow: 0 0px 8px rgba(0, 0, 0, 0.5);
}
#subBannerWrapper .rsWrapper .subBanner .introText h1 {
  font-size: 38px;
}
#subBanner2 .introText h1 {
  font-size: 48px;
}
#subBannerWrapper .rsWrapper .subBanner .introText h2,
#subBanner2 .introText h2 {
  font-size: 20px;
  color: rgba(255, 255, 255, 0.8);
}
/*아티스트 영상 top 10*/

#popularWrapper.mainTop {
  padding: 24px 0 0;
}
#popularWrapper #aiWrapper {
  margin: 16px 0 0;
  width: 100%;
}
#popularWrapper.bestAlbum #aiWrapper.rsWrapper {
  width: 100%;
  padding: 0;
}
#popularWrapper.mainTop #aiWrapper.rsWrapper .titleBox,
#popularWrapper.bestAlbum #aiWrapper.rsWrapper .titleBox {
  width: 100%;
  padding: 0 16px;
  max-width: 1560px;
}
#popularWrapper.mainTop #popularSlider .list > div {
  border-radius: 8px;
  overflow: hidden;
  padding: 0;
}
#popularWrapper.mainTop #popularSlider .list > div .absoluteBox .thumbnail {
  /* border-radius: 8px;
  overflow: hidden; */
}
#popularWrapper.mainTop #popularSlider .list {
  padding: 10px 8px;
}

#popularWrapper.mainTop #popularSlider .list:hover {
  /* padding: 10px 8px; */
}

#popularWrapper.mainTop #popularSlider .list > div .absoluteBox .titleArea .greyBox {
  background: #fff;
  padding: 8px 10px 10px;
  flex-direction: column;
  gap: 0;
  justify-content: flex-start;
  border-radius: 0 0 6px 6px;
}
#popularWrapper.mainTop #popularSlider .list > div .absoluteBox .titleArea .greyBox .title {
  color: #0e0e1f;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.3px;
  text-shadow: none;
  padding: 0;
  margin: 4px 0;
  position: static;
  position: initial;
}
#popularWrapper.mainTop #popularSlider .list > div .absoluteBox .titleArea .greyBox > div {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
#popularWrapper.mainTop #popularSlider .list > div .absoluteBox .titleArea .greyBox > div img {
  min-width: 24px;
  height: 24px;
  border-radius: 100%;
}
#popularWrapper.mainTop #popularSlider .list > div .absoluteBox .titleArea .greyBox > div p {
  color: #0e0e1f;

  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.26px;
  position: static;
  position: initial;
  text-shadow: none;
  padding: 0;
  margin: auto;
}
/* 인기 */
#popularWrapper.bestAlbum {
  padding: 0px 0 0;
}
#popularWrapper.bestAlbum #popularSlider .list > div .absoluteBox .thumbnail .titleArea {
  position: absolute;
  bottom: 0;
  display: flex;
  /* height: 48px; */
  height: auto;
  padding: 8px;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 4px;
  align-self: stretch;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(51, 51, 51, 0.3) 60%, rgba(102, 102, 102, 0) 100%);
  border-radius: 16px;
  left: 0;
  right: 0;
}
#popularWrapper.bestAlbum #popularSlider .list > div .absoluteBox .thumbnail {
  position: relative;
  height: 0;
  padding-bottom: calc(192 / 192 * 100%);
}
#popularWrapper.bestAlbum #popularSlider .list > div .absoluteBox .thumbnail p {
  position: static;
  position: initial;
  padding: 0;
  margin: 0;
}
#popularWrapper.bestAlbum #popularSlider .list > div .absoluteBox .thumbnail .user > div {
  justify-content: flex-start;
}
#popularWrapper.bestAlbum #popularSlider .list > div .absoluteBox .thumbnail .user p[class^='badge-'] {
  padding: 4px;
  background: transparent;
  text-shadow: none;
  font-weight: 600 !important;
}

#popularWrapper.bestAlbum #popularSlider .list > div .absoluteBox .thumbnail .titleArea p {
  font-size: 14px;
}

/* #popularWrapper.bestAlbum #popularSlider .list > div {
  padding: 0;
  background: none;
  margin: 4px;
} */
/* #popularWrapper.bestAlbum #popularSlider .slick-current .list > div,
#popularWrapper.bestAlbum #popularSlider .list:hover > div {
  border: 4px solid #c718e2;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
  width: calc(100% - 10px);
  border-radius: 20px;
  margin: 0;
}

#popularWrapper.bestAlbum #popularSlider .list > div .absoluteBox {
  box-shadow: none;
  width: calc(100% - 16px);
} */

#popularWrapper .rsWrapper {
  /* padding: 0 8px; */
}
#popularWrapper > h1 {
  font-size: 38px;
  font-weight: 700;
  background: linear-gradient(to right, #13d5df, #f138fc);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  text-align: center;
  margin: 32px 0 28px;
}

#popularWrapper .rsWrapper .titleBox {
  margin: 0 0 8px;
}
#popularWrapper .rsWrapper .titleBox .btnArea button {
  height: 36px;
  padding: 0 12px;
  width: fit-content;
}
#popularWrapper .rsWrapper .titleBox .title {
  width: auto;
  margin-top: 0;
}
#popularWrapper .rsWrapper .titleBox .title img {
  width: 24px;
  margin: 0 12px 0 0;
}
#popularWrapper .rsWrapper .titleBox .title p {
  font-size: 24px;
  color: #323146;
  font-weight: 700;
}

#popularWrapper .contentsSlide {
  position: relative;
  margin: 0 0 12px;
  height: auto;
  /* padding: 16px 0 0; */
  width: calc(100% - 32px);
}
#popularWrapper .contentsSlide .whiteBox {
  position: absolute;
  top: 0;
  /* left: 0; */
  height: 100%;
  max-width: 1520px;
}

.Section #popularWrapper .contentsSlide {
  width: 100%;
}

#popularWrapper .contentsSlide .whiteBox .white {
  width: calc((100% - 1274px) / 2);
  z-index: 10;
  height: 100%;
  background: linear-gradient(to left, rgb(255, 255, 255) 15%, rgba(255, 255, 255, 0));
}
#popularWrapper .contentsSlide .whiteBox .white:first-child {
  background: linear-gradient(to right, rgb(255, 255, 255) 15%, rgba(255, 255, 255, 0));
}
#popularWrapper .rankBox {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), linear-gradient(to right, #13d5df 0%, #f138fc 100%);
}
#popularWrapper .rankBox .rsWrapper .thumbnail {
  width: 50%;
  height: 415px;
  position: relative;
}
#popularWrapper .rankBox .rsWrapper .thumbnail > img {
  width: 100%;
  height: 100%;
}
#popularWrapper .rankBox .rsWrapper .thumbnail .absoluteBox {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0 15px 8px;
  height: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
}
#popularWrapper .rankBox .rsWrapper .thumbnail .absoluteBox div:first-child > img {
  width: 40px;
  height: auto;
}
#popularWrapper .rankBox .rsWrapper .thumbnail .absoluteBox div:first-child div {
  width: auto;
}
#musicInfo .promptRankIcon::before,
.rankBox .promptRankIcon::before {
  /* width: 64px; */
  background-size: auto;
  height: 62px;
}
#musicInfo .promptRankIcon span,
.rankBox .promptRankIcon span {
  font-size: 22px;
  line-height: 1;
}
#popularWrapper .rankBox .rsWrapper .thumbnail .absoluteBox div:first-child div img {
  width: 20px;
  height: 20px;
  border-radius: 100%;
  margin: 0 8px 0 0;
}
#popularWrapper .rankBox .rsWrapper .thumbnail .absoluteBox div:first-child div p {
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
}
#popularWrapper .rankBox .rsWrapper .thumbnail .absoluteBox h1 {
  font-size: 36px;
  font-weight: 600;
  color: #ffffff;
  cursor: pointer;
}
#popularWrapper .rankBox .rsWrapper .thumbnail .absoluteBox .priceBox p {
  font-size: 24px;
  color: #ffffff;
  font-weight: 700;
}
#popularWrapper .rankBox .rsWrapper .infoBox {
  width: 50%;
  padding: 30px 0 30px 40px;
  height: 415px;
  gap: 32px;
  justify-content: start !important;
}
#popularWrapper .rankBox .rsWrapper .infoBox .userBox > div:first-child {
  margin: 0 0 20px;
  align-items: start;
}
#popularWrapper .rankBox .rsWrapper .infoBox .userBox .profileImg {
  width: 80px;
  height: 80px;
  border-radius: 16px;
  margin: 0 15px 0 0;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.1);
}
#popularWrapper .rankBox .rsWrapper .infoBox .userBox .infoProfile {
  display: flex;
  padding: 8px 0px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 4px;
  flex: 1 0;
}
#popularWrapper .rankBox .rsWrapper .infoBox .userBox .infoProfile h1 {
  font-size: 24px;
  margin: 0 0 12px;
  color: #ffffff;
  cursor: pointer;
  font-weight: 500;
}
#popularWrapper .rankBox .rsWrapper .infoBox .userBox .infoProfile .follow {
  padding: 8px 0;
}
#popularWrapper .rankBox .rsWrapper .infoBox .userBox .infoProfile .follow img:first-child {
  width: 20px;
  height: 20px;
  /* border-radius: 100%; */
}
#popularWrapper .rankBox .rsWrapper .infoBox .userBox .infoProfile .follow p {
  font-size: 16px;
  color: #ffffff;
  margin: 0 10px;
}
#popularWrapper .rankBox .rsWrapper .infoBox .userBox .infoProfile .follow img {
  width: 24px;
  height: auto;
}
#popularWrapper .rankBox .rsWrapper .infoBox .userBox .btnBox #whiteBorderBtn {
  width: 130px;
  height: 40px;
  border-radius: 10px;
}
#popularWrapper .rankBox .rsWrapper .infoBox .userBox .btnBox #whiteBorderBtn img {
  width: 16px;
  height: auto;
  margin: 0 10px 0 0;
}
#popularWrapper .rankBox .rsWrapper .infoBox .userBox .classRank {
  gap: 0 4px;
}
#popularWrapper .rankBox .rsWrapper .infoBox .userBox .classRank img:last-child {
  width: 14px;
}

#popularWrapper .rankBox .rsWrapper .infoBox .contentsBox {
}
.classRank .ant-dropdown {
  min-width: 100px !important;
  z-index: 11;
}
.classRank .ant-dropdown ul {
  min-width: 100px !important;
  width: fit-content;
}

.classRank .ant-dropdown ul li {
  display: flex;
  padding: 8px 12px;
  align-items: center;
  gap: 8px;
  align-self: stretch;
}
#popularWrapper .rankBox .rsWrapper .infoBox .userBox {
  height: 185px;
  justify-content: flex-start;
}
#popularWrapper .rankBox .rsWrapper .infoBox .contentsBox .anticon {
  margin-left: 28px;
}
#popularWrapper .rankBox .rsWrapper .infoBox .contentsBox p {
  font-size: 16px;
  color: #ffffff;
  margin: 0 0 20px;
  cursor: pointer;
}
#popularWrapper .rankBox .rsWrapper .infoBox .contentsBox .contentsList .contents {
  width: calc(25% - 7.5px);
  /* margin: 0 10px 0 0; */
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
  cursor: pointer;
}
#popularWrapper.mainImage .rankBox .rsWrapper .infoBox .contentsBox .contentsList .contents {
  aspect-ratio: 16 / 9;
}

#popularWrapper .rankBox .rsWrapper .infoBox .contentsBox .contentsList .contents:nth-child(4) {
  margin: 0;
}
#popularWrapper .rankBox .rsWrapper .infoBox .contentsBox .contentsList .contents:nth-child(n) {
  border: 4px solid transparent;
}
#popularWrapper .rankBox .rsWrapper .infoBox .contentsBox .contentsList .contents > img {
  width: 100%;
  /* height: 100%; */
}
.musicBox .music img:hover,
#popularWrapper .rankBox .rsWrapper .infoBox .contentsBox .contentsList .contents:hover {
  border: 4px solid #ec15ff;
  box-shadow: 0 0 3px #ec15ff;
}

#popularWrapper .rankBox .rsWrapper .infoBox .contentsBox .contentsList .contents .absoluteBox {
  position: absolute;
  top: 0;
  left: 0;
  padding: 4px 8px;
  height: 100%;
}
#popularWrapper .rankBox .rsWrapper .infoBox .contentsBox .contentsList .contents .absoluteBox div img {
  width: 16px;
  height: 16px;
  margin: 0 8px 0 0;
}
#popularWrapper .rankBox .rsWrapper .infoBox .contentsBox .contentsList .contents .absoluteBox div h1 {
  font-size: 12px;
  font-weight: 600;
  color: #ffffff;
}
#popularWrapper .rankBox .rsWrapper .infoBox .contentsBox .contentsList .contents .absoluteBox .price {
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
}

/* 메인 페이지에서 이미지/비디오/텍스트 영역 */
#popularWrapper .rsWrapper .userBox .appraisal {
  display: flex;
  flex-direction: row;
  gap: 10px;
  width: 100% !important;
  height: 32px;
}
#popularWrapper .rsWrapper .userBox .appraisal .classRank,
#popularWrapper .rsWrapper .userBox .appraisal .star {
  width: auto !important;
}
#popularWrapper .rsWrapper .userBox .appraisal .classRank img {
  margin: 0 5px 0 0 !important;
  cursor: pointer;
  width: 14px;
}
#popularWrapper .rsWrapper .userBox .appraisal .classRank p {
  margin: 0 5px 0 0 !important;
  cursor: pointer;
  color: #fff;
  line-height: 1;
  font-size: 16px;
  font-weight: 500;
}
#popularWrapper .rankBox .rsWrapper .infoBox .userBox div:first-child div {
  width: inherit;
  gap: 4px;
}
#popularWrapper .rsWrapper .userBox .appraisal .classBadge,
#popularWrapper .rsWrapper .userBox .appraisal .majorModel {
  width: auto !important;
}
#popularWrapper .rsWrapper .userBox .appraisal .classBadge .major img {
  width: 24px !important;
  height: 24px !important;
  margin: 0 !important;
  cursor: default !important;
}
#popularSlider .list > div .absoluteBox .user div.promptRankIcon {
  padding: 0;
  width: auto;
}

#popularWrapper .rankBox .rsWrapper .thumbnail {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #3e3d53;
}

#popularSlider .list > div .absoluteBox p {
  position: absolute;
  bottom: 0;
  font-size: 24px;
  font-weight: 600;
  color: #ffffff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  margin: 0 0 4px;
  padding: 0 10px;
  line-height: 140%;
  text-shadow: 0px 0px 2px #000;
}
.listPopul #popularSlider .list .thumbnail p,
.mainImage #popularSlider .list .thumbnail p {
  /* text-align: center;*/
  padding-bottom: 4px;
}
#popularSlider .list > div .absoluteBox .thumbnail {
  position: relative;
  width: 100%;
  height: 0;
  border-radius: 16px 16px 0px 0px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #3e3d53;
  padding-bottom: calc(198 / 352 * 100%);
}
#popularSlider .list > div .absoluteBox .thumbnail .icon-video {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 40px;
  height: 32px;
}
#popularSlider .list > div .absoluteBox {
  position: static;
  position: initial;
  width: 100%;
  height: auto;
  border-radius: 12px;
  background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
  border-radius: 16px;
}

.bestAlbum #popularSlider .list > div .absoluteBox {
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

#popularSlider .list > div .absoluteBox .title .greyBox div > p {
  position: static;
  position: initial;
  text-shadow: inherit;
  width: auto;
  padding: 0;
}
#popularSlider .list > div .absoluteBox .user .aiBox p {
  position: static;
  position: initial;
}
#popularWrapper .rankBox .rsWrapper .infoBox .userBox > div:first-child {
  margin: 0;
  align-items: center;
}
#popularWrapper .majorModel {
  padding: 12px 0 32px;
}
#popularWrapper .rankBox .rsWrapper .infoBox .userBox .infoProfile {
  gap: 4px;
  padding: 0;
}
#popularWrapper .rankBox .rsWrapper .infoBox .userBox .infoProfile h1 {
  margin: 0;
}
#popularWrapper .rankBox .rsWrapper .infoBox .userBox .infoProfile .follow {
  padding: 0;
}
#aiWrapper .contentsSlide {
  position: relative;
  margin: 0;
  height: auto;
  padding: 0;
  max-width: 1518px;
  /* width: calc(100% - 32px); */
  width: 100%;
}
#aiWrapper .contentsSlide .whiteBox {
  position: absolute;
  top: 0;
  left: 0;
  height: 87%;
}
#aiWrapper .contentsSlide .whiteBox .white:first-child {
  background: linear-gradient(to right, rgb(255, 255, 255) 70%, rgba(255, 255, 255, 0));
}
#aiWrapper .contentsSlide .whiteBox .white {
  width: calc(10% / 2);
  z-index: 10;
  height: 100%;
  background: linear-gradient(to left, rgb(255, 255, 255) 70%, rgba(255, 255, 255, 0));
}

/* 스태프픽+최신컨텐츠 */
#listWrapper .rsWrapper {
  align-items: flex-start;
  padding: 32px 0 0;
  gap: 80px;
}

.Section #listWrapper .rsWrapper {
  padding-bottom: 20px;
}

#listWrapper .rsWrapper .staff,
#listWrapper .rsWrapper .newContents {
  width: 100%;
}
#listWrapper .rsWrapper .staff .titleBox,
#listWrapper .rsWrapper .newContents .titleBox {
  margin: 0 0 20px;
}
#listWrapper .rsWrapper .staff .titleBox .title,
#listWrapper .rsWrapper .newContents .titleBox .title {
  width: auto;
  margin-top: 0;
}
#listWrapper .rsWrapper .staff .titleBox .title img,
#listWrapper .rsWrapper .newContents .titleBox .title img {
  width: 24px;
  margin: 0 12px 0 0;
}
#listWrapper .rsWrapper .staff .titleBox .title p,
#listWrapper .rsWrapper .newContents .titleBox .title p {
  font-size: 24px;
  color: #323146;
  font-weight: 700;
}
#listWrapper .rsWrapper .staff .staffList,
#listWrapper .rsWrapper .newContents .staffList {
  display: flex;
  gap: 20px 0.63%;
  flex-wrap: wrap;
}

#listWrapper .rsWrapper .staff .staffList .staffBox,
#listWrapper .rsWrapper .newContents .staffList .staffBox {
  width: calc(33.3333333333% - 10px);
  /* margin: 0 20px 28px 0; */
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  border: 4px solid transparent;
  transition: 0.2s;
}
#listWrapper .rsWrapper .newContents .staffList .staffBox:hover {
  border: 4px solid transparent;
  background-image: linear-gradient(transparent, transparent), linear-gradient(#b041f3, #ec15ff);
  background-origin: border-box;
  background-clip: content-box, border-box;
  box-shadow: 0 2px 13px #b041f3;
}
#listWrapper .rsWrapper .staff .staffList .staffBox:nth-child(3n),
#listWrapper .rsWrapper .newContents .staffList .staffBox:nth-child(3n) {
  /* margin: 0 0 28px; */
}
#listWrapper .rsWrapper .staff .staffList .staffBox > img,
#listWrapper .rsWrapper .newContents .staffList .staffBox > img {
  width: 100%;
  height: 185px;
}
#listWrapper .rsWrapper .staff .staffList .staffBox .absoluteBox,
#listWrapper .rsWrapper .newContents .staffList .staffBox .absoluteBox {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
#listWrapper .rsWrapper .staff .staffList .staffBox .absoluteBox > div:first-child,
#listWrapper .rsWrapper .newContents .staffList .staffBox .absoluteBox > div:first-child {
  padding: 8px;
}
#listWrapper .rsWrapper .staff .staffList .staffBox .absoluteBox div:first-child > img,
#listWrapper .rsWrapper .newContents .staffList .staffBox .absoluteBox div:first-child > img {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  border-radius: 100%;
  margin: 0 8px 0 0;
}
#listWrapper .rsWrapper .staff .staffList .staffBox .absoluteBox div:first-child p,
#listWrapper .rsWrapper .newContents .staffList .staffBox .absoluteBox div:first-child p {
  font-size: 12px;
  color: #ffffff;
  font-weight: 600;
}
#listWrapper .rsWrapper .newContents .staffList .staffBox .absoluteBox .title .greyBox > div {
  display: flex;
  flex-direction: row;
  gap: 2px;
  width: 100%;
}
/* 판매 현황 */
.infoCount p {
  font-size: 12px;
}
.infoCount p.infoArtistWh {
  line-height: 22px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.infoCount p.infoArtistWh img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
}
.infoCount p.infoArtistWh,
#listWrapper .rsWrapper .newContents .staffList .staffBox .absoluteBox .title .greyBox .imgBox {
  display: flex;
  flex-direction: row;
  gap: 0;
  width: 100%;
  min-width: 0;
  flex: 1 1;
}

#listWrapper .rsWrapper .staff .staffList .staffBox .absoluteBox div > h1,
#listWrapper .rsWrapper .newContents .staffList .staffBox .absoluteBox div > h1 {
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  padding: 0 8px;
  margin: 0 0 4px;
}
#listWrapper .rsWrapper .staff .staffList .title,
#listWrapper .rsWrapper .newContents .staffList .title {
  padding: 8px;
  background: #e2e2e2;
}
#listWrapper .rsWrapper .staff .staffList .staffBox .absoluteBox div .greyBox {
  /* padding: 12px 8px; */
  justify-content: space-between;
}
#listWrapper .rsWrapper .staff .staffList .staffBox .absoluteBox div .greyBox p,
#listWrapper .rsWrapper .newContents .staffList .staffBox .absoluteBox div .greyBox p {
  color: #0e0e1f;
  white-space: nowrap;
  flex: none;
}
#listWrapper .rsWrapper .staff .staffList .staffBox .absoluteBox div .greyBox > img,
#listWrapper .rsWrapper .newContents .staffList .staffBox .absoluteBox div .greyBox > img {
  width: 24px;
  height: 24px;
  border-radius: 100%;
  margin: 0 8px 0 0;
}
#listWrapper .rsWrapper .staff .staffList .staffBox .absoluteBox div .greyBox > div {
  width: calc(100% - 32px - 8px);
}
/*내 마켓플레이스 현황 정보 한줄 보기 적용*/
.myMarketplacesSection #listWrapper .rsWrapper .newContents .staffBox .absoluteBox .title .greyBox .imgBox {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  color: #000000;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* max-width: 100px; */
  padding: 0;
  display: flex;
}
.absoluteBox .title .infoCount h1,
#listWrapper .rsWrapper .staff .staffList .staffBox .absoluteBox div .greyBox div > h1,
#listWrapper .rsWrapper .newContents .staffList .staffBox .absoluteBox div .greyBox div > h1 {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  color: #000000;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* max-width: 100px; */
  padding: 0;
  text-shadow: none;
}
#listWrapper .rsWrapper .staff .staffList .staffBox .absoluteBox div .greyBox div > p,
#listWrapper .rsWrapper .newContents .staffList .staffBox .absoluteBox div .greyBox div > p {
  font-size: 13px;
  font-weight: 600;
  text-wrap-mode: nowrap;
  line-height: 1;
  color: #0e0e1f;
  min-width: 50px;
  text-align: right;
}
#listWrapper .rsWrapper .staff .staffList .staffBox .absoluteBox div .greyBox div .imgBox,
#listWrapper .rsWrapper .newContents .staffList .staffBox .absoluteBox div .greyBox div .imgBox {
  /* width: auto; */
  justify-content: flex-start;
  text-overflow: ellipsis;
  overflow: hidden;
}
#listWrapper .rsWrapper .staff .staffList .staffBox .absoluteBox div .greyBox div .imgBox > img:first-child,
#listWrapper .rsWrapper .newContents .staffList .staffBox .absoluteBox div .greyBox div .imgBox > img:first-child {
  width: 20px;
  height: 20px;
}
#listWrapper .rsWrapper .staff .staffList .staffBox .absoluteBox div .greyBox div .imgBox > img,
#listWrapper .rsWrapper .newContents .staffList .staffBox .absoluteBox div .greyBox div .imgBox > img {
  width: 16px;
  height: auto;
  margin: 0 4px 0 0;
}

/* 배너2 */
#subBanner2 {
  padding: 64px 0;
  background: #070712;
}
#subBanner2 .rsWrapper > div {
  padding: 2px;
  background: linear-gradient(to right, #13d5df, #f138fc);
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}
#subBanner2 .rsWrapper div img {
  width: 100%;
  height: 300px;
  border-radius: 16px;
  object-fit: cover;
  object-position: top;
}
#subBanner2 .rsWrapper div .absoluteBox {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}
#subBanner2 .rsWrapper div .absoluteBox h1 {
  font-size: 36px;
  font-weight: 300;
  color: #ffffff;
  margin: 0 0 11px;
}
#subBanner2 .rsWrapper div .absoluteBox h1 span {
  font-weight: 700;
}
#subBanner2 .rsWrapper div .absoluteBox p {
  font-size: 11px;
  color: #ffffff;
}

/* 빌더 */
#builderWrapper .titleBox {
  width: 100%;
  background: linear-gradient(to top, rgba(236, 21, 255, 0), rgba(236, 21, 255, 0.1));
  display: flex;
  justify-content: center;
}
#builderWrapper > .titleBox h1 {
  font-size: 38px;
  font-weight: 700;
  background: linear-gradient(to right, #13d5df, #f138fc);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  text-align: center;
  margin: 32px 0;
  width: fit-content;
}
#builderWrapper > .titleBox h1 br {
  display: none;
}
#builderWrapper .bgImg {
  height: 576px;
  position: relative;
  overflow: hidden;
}
#builderWrapper .bgImg .imgBox {
  /* position: absolute;
  top: 0;
  left: 0;
  height: 130%; */
  width: 100%;
  height: 0;
  padding-bottom: calc(760 / 1360 * 100%);
  background-size: cover;
  background-image: url(../../static/media/bgImg.0b88fa813b6fa6127940.webp);
  background-repeat: no-repeat;
  background-position: center;
}
#builderWrapper .bgImg .imgBox img {
  width: 100%;
  height: 100%;
}
#builderWrapper .bgImg .builder {
  position: absolute;
  top: 0;
  left: 19.8%;
  width: 10%;
  height: 33%;
}
#builderWrapper .bgImg .imagination {
  position: absolute;
  bottom: 0;
  left: 29.8%;
  width: 10%;
  height: 33%;
}
#builderWrapper .bgImg .contents {
  background: rgba(0, 0, 0, 0.8);
  position: absolute;
  bottom: 0;
  right: 10%;
  width: 10%;
  height: 33%;
}
#builderWrapper .bgImg .builderBox {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
#builderWrapper .bgImg .builderBox > div {
  width: 100%;
  height: 33.3333333333%;
}
#builderWrapper .bgImg .builderBox div .box img {
  width: 48px;
  height: auto;
  margin: 0 0 13px;
}
#builderWrapper .bgImg .builderBox div .box p {
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.3;
}
#builderWrapper .bgImg .builderBox .box {
  width: 10%;
  z-index: 10;
  height: 100%;
  align-self: initial;
  flex-grow: initial;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  box-shadow: initial;
}
#builderWrapper .bgImg .builderBox .box:hover {
  border-width: 2px !important;
  background-color: rgba(236, 21, 255, 0.2) !important;
  /* transition: all 0.5s cubic-bezier(0.91, 0, 0, 1.09); */
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 0.5s;
}
#builderWrapper .bgImg .builder img,
#builderWrapper .bgImg .imagination img,
#builderWrapper .bgImg .contents img {
  width: 48px;
  height: auto;
  margin: 0 0 13px;
}
#builderWrapper .bgImg .builder p,
#builderWrapper .bgImg .imagination p,
#builderWrapper .bgImg .contents p {
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  color: #ffffff;
}
#builderWrapper .bgImg .login p {
  text-align: center;
  font-size: 28px;
  color: #ffffff;
  margin: 0 0 32px;
  font-weight: 600;
}
#builderWrapper .bgImg .login p span {
  display: block;
  font-size: 14px;
}
#builderWrapper .bgImg .login #loginBtn {
  width: 80%;
  height: 48px;
  border-radius: 30px;
}
#builderWrapper .bgImg .imgBox img.mobile {
  display: none;
}

/* 소식 */

#infoWrapper .rsWrapper {
  gap: 40px;
  /*padding-bottom: 40px;*/
}
#infoWrapper > h1 {
  font-size: 38px;
  font-weight: 700;
  background: linear-gradient(to right, #13d5df, #f138fc);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  text-align: center;
  margin: 32px 0 28px;
}
#infoWrapper > h1 br {
  display: none;
}
#infoWrapper .rsWrapper .titleBox {
  margin: 0 0 20px;
  width: 100%;
  height: 51px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
#infoWrapper .rsWrapper .titleBox .title {
  width: 100%;
  justify-content: start;
}
#infoWrapper .rsWrapper .titleBox .title img {
  width: 24px;
  margin: 0 12px 0 0;
}
#infoWrapper .rsWrapper .titleBox .title p {
  font-size: 24px;
  color: #323146;
  font-weight: 700;
}
#infoWrapper .listBox .list .absoluteBox {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  cursor: pointer;
}
#infoWrapper .listBox .list .absoluteBox img {
  width: 58px;
  margin: 0 0 16px;
}
#infoWrapper .listBox .list .absoluteBox p {
  font-size: 36px;
  font-weight: 600;
  color: #ffffff;
}

#infoWrapper .rsWrapper .box {
  width: 100%;
}
#infoWrapper .listBox .title {
  width: 100%;
  justify-content: start;
  height: 52px;
}
#infoWrapper .listBox .imgThum .title {
  width: 100%;
  height: 100%;
  justify-content: center;
}
#infoWrapper .listBox {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 2.6%;
  row-gap: 3.15vh;
  width: 100%;
}
/* antd List 컴포넌트 컨트롤 */
#infoWrapper .listBox .ant-list {
  width: 100%;
  overflow-x: hidden;
}
#infoWrapper .listBox .list {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  border-radius: 16px;
  width: 23%;
  height: 198px;
  overflow: hidden;
  cursor: pointer;
}
#infoWrapper .listBox .list .image-wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 1;
}
#infoWrapper .listBox .image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  z-index: 1;
}
#infoWrapper .listBox .searchBox form {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
#infoWrapper .listBox .searchBox form span {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
}
#infoWrapper .listBox .searchBox form span div {
  width: auto;
}
#infoWrapper .listBox .list .card {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 2;
}
#infoWrapper .listBox .list .card p {
  line-height: 1;
  z-index: 2;
}

#infoWrapper .listBox .list:hover {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
  background: linear-gradient(90deg, rgba(176, 65, 243, 0.8) 0%, rgba(236, 21, 255, 0.8) 100%);
  z-index: 1;
  transition: all 0.2s ease;
}
#infoWrapper .listBox .list:hover .image-wrapper {
  background: linear-gradient(90deg, rgba(176, 65, 243, 0.8) 0%, rgba(236, 21, 255, 0.8) 100%);
  opacity: 0.3;
}
#infoWrapper .listBox .list:nth-child(4n) {
  margin-right: 0;
}

#infoWrapper .aiListBox {
  flex-wrap: wrap;
}
#infoWrapper .aiListBox .aiList {
  width: calc(50% - 20px);
  border-radius: 16px;
  overflow: hidden;
  margin: 0 0 40px;
}
#infoWrapper .aiListBox .aiList > img {
  width: 260px;
  height: 193px;
}
#infoWrapper .aiListBox .aiList .infoBox {
  width: calc(100% - 260px);
  height: 193px;
  padding: 0 32px;
  background: rgba(62, 61, 83, 0.1);
}
#infoWrapper .aiListBox .aiList .infoBox h1 {
  font-size: 28px;
  font-weight: 600;
  margin: 0 0 10px;
}
#infoWrapper .aiListBox .aiList .infoBox p {
  font-size: 16px;
  color: #0e0e1f;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  width: 100%;
  margin: 0 0 12px;
  max-height: 30px;
}
#infoWrapper .aiListBox .aiList .infoBox p:last-child {
  font-size: 14px;
  margin: 0;
}

.boardsSection {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.boardsSection .title {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  max-width: 1520px;
  display: flex;
  padding-bottom: 8px;
  margin: auto;
  padding: 24px 0;
  border-bottom: 2px solid #000;
  margin: 0 16px;
  width: calc(100% - 32px);
}
.boardsSection .title .titleBox {
  color: #0e0e1f;
  color: var(--t-dark, #0e0e1f);
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  justify-content: start;
  align-items: center;
  gap: 12px;
  flex: 1 0;
  align-self: stretch;
  text-wrap-mode: nowrap;
}
.boardsSection .title .titleBox::before {
  background: url(../../static/media/i-community.21fe29b179fc3c8df0cd.svg) no-repeat left center;
  content: '';
  width: 24px;
  height: 24px;
}
.boardsSection .title .searchBox {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  align-items: center;
  gap: 8px;
}
.boardsSection .title .searchBox div {
  margin-bottom: 0;
}
.boardsSection .title .searchBox button[type='submit'].ant-btn-primary {
  padding: 8px;
  background: #e94cf7 url(../../static/media/search-solid.e8d06b2b80634e0176a0.svg) no-repeat center;
  font-size: 0px;
  min-width: 40px;
  height: 40px;
}
.boardsSection .searchBox form {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  min-width: 100% !important;
  gap: 8px;
}
.boardsSection .searchBox form .ant-form-item {
  margin: 0;
}
.boardsSection .searchBox form .btn {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 8px;
}
.boardsSection .searchBox form .btn .searchCount {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
}
.boardsSection .searchBox form .btn .searchCount span {
  margin-left: 16px;
}
.boardsSection .searchBox form .select {
  width: 120px;
}
.boardsSection .searchBox form .inputText {
  width: 400px;
}
.boardsSection .searchBox form .inputText .ant-row div:first-child {
  flex: 0 0 400px;
}
.boardsSection .searchBox form button[type='submit'].ant-btn-primary {
  padding: 8px;
  background: #e94cf7 url(../../static/media/search-solid.e8d06b2b80634e0176a0.svg) no-repeat center;
  font-size: 0px;
  min-width: 40px;
  height: 40px;
}
.boardsSection .boardWrapper .ant-layout .searchBox {
  padding: 16px 0;
  position: relative;
}
.boardsSection .boardWrapper .ant-layout .cardArea {
  height: calc(-300px + 100vh);
  overflow-y: auto;
}
.boardsSection .boardWrapper .ant-layout .searchBox .result {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  height: 40px;
}
.boardsSection .boardWrapper .ant-layout .searchBox .result .searchCount {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  font-size: 16px;
  font-weight: 700;
  gap: 12px;
}
.boardsSection .boardWrapper .ant-layout .searchBox .result .searchCount span {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
}
.boardsSection .boardWrapper .ant-layout .searchBox .btn {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
}
.boardsSection .boardWrapper .ant-layout .searchBox .btn .search {
  display: none;
}
.boardsSection .boardWrapper .ant-layout .ant-layout-content .ant-list-item {
  margin-block-end: 0;
}
.boardsSection .boardWrapper .ant-layout .ant-layout-content .ant-list-item .ant-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: calc(100% - 16px);
  padding-bottom: 40px;
  overflow: hidden;
}
.boardsSection .boardWrapper .ant-layout .ant-layout-content .ant-list-item .ant-card-cover {
  position: relative;
  width: 100%;
  height: 182px;
  margin-top: 0;
  margin-inline: 0;
  border-radius: 16px 16px 0 0;
  overflow: hidden;
  cursor: pointer;
  text-align: center;
}
.boardsSection .boardWrapper .ant-layout .ant-layout-content .ant-list-item .ant-card-cover > * {
  border-radius: 16px 16px 0 0;
}
.boardsSection .boardWrapper .ant-layout .ant-layout-content .ant-list-item .ant-card-cover .imgThum {
  color: rgb(153, 153, 153);
  font-size: 14px;
  width: 100%;
  height: 182px;
  object-fit: cover;
}

.boardsSection .boardWrapper .ant-layout .ant-layout-content .ant-list-item .ant-card-cover .imgThum .title {
  height: 100%;
}

.boardsSection .boardWrapper .ant-layout .ant-layout-content .ant-list-item .ant-card-cover p {
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: start;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
  border: 0;
  background: rgba(0, 0, 0, 0.3);
  margin: 0;
  padding: 10px 15px;
  width: 100%;
}
.boardsSection .boardWrapper .ant-layout .ant-layout-content .ant-list-item .ant-card-body {
  width: 100%;
  height: 38px;
  padding: 8px;
  border-radius: 0 0 16px 16px;
  border-radius: 0px 0px 10px 10px;
  background: rgba(0, 0, 0, 0.1);
}
.boardsSection .boardWrapper .ant-layout .ant-layout-content .ant-list-item .ant-card-body::before,
.boardsSection .boardWrapper .ant-layout .ant-layout-content .ant-list-item .ant-card-body::after {
  display: none;
}
.boardsSection .boardWrapper .ant-layout .ant-layout-content .ant-list-item .ant-card-body .ThumInfo {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.boardsSection .boardWrapper .ant-layout .ant-layout-content .ant-list-item .ant-card-body .ThumInfo p {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  color: #464548;
  font-size: 12px;
  font-weight: 500;
  gap: 8px;
}
.boardsSection .boardWrapper .ant-layout .ant-layout-content .ant-list-item .ant-card-body .ThumInfo p::before {
  width: 18px;
  height: 18px;
  content: '';
}
.boardsSection .boardWrapper .ant-layout .ant-layout-content .ant-list-item .ant-card-body .ThumInfo p.goodCount {
  background: url(../../static/media/i-good.f8e643ecdaf4fa8a9a71.svg) no-repeat left center/18px;
}
.boardsSection .boardWrapper .ant-layout .ant-layout-content .ant-list-item .ant-card-body .ThumInfo p.viewCount {
  background: url(../../static/media/i-count.7aba6db4f80a502ab17a.svg) no-repeat left center/18px;
}
.boardsSection .boardWrapper .ant-layout .ant-layout-content .ant-list-item .ant-card-body .ThumInfo p.repleCount {
  background: url(../../static/media/i-reple.ec5e1ed38c09afc61dd5.svg) no-repeat left center/18px;
}
.aui-grid-header-panel .aui-grid-table,
.aui-grid-header-panel .aui-grid-table tr {
  /* height: 40px !important; */
  border-radius: 8px;
  overflow: hidden;
}
.boardsSection .title {
  margin: 0 16px;
  padding: 40px 0 28px;
  width: calc(100% - 32px);
}
.boardsSection .title .titleBox::before {
  width: 24px;
  height: 24px;
  background-size: 24px;
  content: '';
}
.boardsSection .title .searchBox.none::before {
  width: 24px;
  height: 24px;
  background-size: 18px;
  content: '';
  background: url(../../static/media/search-solid.e8d06b2b80634e0176a0.svg) no-repeat center;
  fill: #525162;
  display: none;
}

.boardsSection .boardWrapper .searchBox .result .searchCount span {
  /* font-size: 13px; */
}
.boardsSection .boardWrapper .searchBox .btn {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 12px;
}
.boardsSection .boardWrapper .searchBox .btn-search {
  width: 32px;
  height: 32px;
  content: '';
  background: url(../../static/media/i-search.32412c02ca18f3d62907.svg) no-repeat center/18px;
  fill: #525162;
  border-radius: 4px;
  display: none;
}
.boardsSection .boardWrapper .searchBox .btn-search::hover {
  box-shadow: inset 0 0 0 200px rgba(0, 0, 0, 0.2);
  border-color: transparent;
  outline: rgba(255, 94, 182, 0.7);
}
.boardsSection .boardWrapper .searchBox .btn .search {
  display: flex;
  position: absolute;
  left: -14px;
  right: -14px;
  background: #fff;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
  padding: 8px;
  top: 8px;
  z-index: 2;
}
.boardsSection .boardWrapper .searchBox form .inputText {
  width: calc(100% - 120px - 40px - 24px);
}
.boardsSection .boardWrapper .searchBox form .inputText .ant-row div:first-child {
  width: 100%;
}

/* 메인 페이지에서 뮤직 영역 */
#musicInfo .majorModel {
  padding: 8px 0 12px;
}
#musicInfo .rsWrapper .info div .userBox .userInfo .nameBox .userArea .major img {
  width: 32px;
  height: 32px;
}
#musicInfo .mobileContentsBox .musicBox .user p,
#musicInfo .aiModelNm {
  width: auto;
  padding: 3px 4px;
  border-radius: 8px;
  background: #141424;
  font-size: 11px !important;
  font-style: normal;
  font-weight: 400 !important;
  line-height: 1;
  width: fit-content;
  color: #ffffff;
}
#newWrapper #newSlider #active {
  cursor: pointer;
  justify-content: space-between;
  padding: 16% 2% 16px;
}

#newWrapper #newSlider #active p,
#newWrapper #newSlider #active div {
  /* display: none; */
}
#top10 .musicBox .aiModelNm {
  width: auto;
  padding: 3px 4px;
  border-radius: 8px;
  background: #141424;
  font-size: 11px !important;
  font-style: normal;
  font-weight: 400 !important;
  line-height: 1;
  width: fit-content;
  color: #ffffff;
}

#newWrapper .musicBox .aiModelNm {
  width: auto;
  padding: 3px 4px;
  border-radius: 8px;
  background: #141424;
  font-size: 11px !important;
  font-style: normal;
  font-weight: 400 !important;
  line-height: 1;
  width: fit-content;
  color: #ffffff;
}
.thumbBox .absolBox .flexRowBetween.force {
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
#newSlider .musicBox img {
  aspect-ratio: 1;
  object-fit: cover;
}
.majorModel span.me {
  cursor: pointer;
}
#musicInfo .rsWrapper .thumbBox {
  aspect-ratio: 1;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
#musicInfo .rsWrapper .info div .contentsBox .musicBox .music .user {
  z-index: 11;
}
#musicInfo .rsWrapper .info div .contentsBox .musicBox .music .user p {
  margin: 4.5px 8px;
  width: fit-content;
}
#musicInfo .rsWrapper .info div .userBox .userInfo .nameBox {
  /* gap: 8px;  아티스트 정보 영역 위에서 정의 됨*/
}
#musicInfo .rsWrapper .info div .userBox .userInfo .nameBox .appraisal .major img {
  width: 24px;
  height: 24px;
}

#listWrapper .rsWrapper .newContents .staffList .staffBox .absoluteBox .thumbnail {
  display: block;
  position: relative;
  width: 100%;
  height: 131px;
  /* border-radius: 16px 16px 0px 0px; */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  padding: 0;
  background-color: #3e3d53;
  height: 0;
  padding-bottom: calc(198 / 352 * 100%);
}
#listWrapper .rsWrapper .staff .staffList .staffBox .absoluteBox,
#listWrapper .rsWrapper .newContents .staffList .staffBox .absoluteBox {
  position: static;
  position: initial;
}
#listWrapper .rsWrapper .staff .staffList .staffBox .absoluteBox .thumbnail > h2,
#listWrapper .rsWrapper .newContents .staffList .staffBox .absoluteBox .thumbnail > h2 {
  position: absolute;
  bottom: 0;
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  /* margin: 0 0 4px; */
  line-height: 1.4;
  text-shadow: 0 0 8px #00000080;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 4px 8px;
}
#listWrapper .rsWrapper .newContents .staffList .staffBox .absoluteBox .thumbnail .user {
  padding: 8px;
  /* background: unset; */
  width: 100%;
  /* min-height: unset; */
}
#listWrapper .rsWrapper .newContents .staffList .staffBox .absoluteBox .thumbnail .user .ant-checkbox-wrapper {
  margin: 0 8px 0 0;
}
#listWrapper .rsWrapper .staff .staffList .staffBox .absoluteBox .play,
#listWrapper .rsWrapper .newContents .staffList .staffBox .absoluteBox .play {
  /* position: absolute;
  top: 27px; */
  width: 50px;
  height: 50px;
  position: absolute;
  top: calc(50% - 20px);
  left: 50%;
  transform: translate(-50%, -50%);
}
#listWrapper .rsWrapper .staff .staffList .staffBox .absoluteBox .play > img,
#listWrapper .rsWrapper .newContents .staffList .staffBox .absoluteBox .play > img {
  width: 48px;
  height: 48px;
}
/* #listWrapper .rsWrapper .staff .staffList .staffBox:hover .absoluteBox .hover-bg,
#listWrapper .rsWrapper .newContents .staffList .staffBox:hover .absoluteBox .hover-bg {
  width: 100%;
  height: 131px;
  background: #0006;
  position: absolute;
} */
#listWrapper .rsWrapper .staff .staffList .staffBox .absoluteBox > div:first-child,
#listWrapper .rsWrapper .newContents .staffList .staffBox .absoluteBox > div:first-child {
  padding: 0;
}
#newWrapper #newSlider .musicBox #active div {
  text-align: center;
}
#newWrapper #newSlider .musicBox #active div h1 {
  padding: 0 auto 12px;
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
}
#newWrapper #newSlider .musicBox #active div p {
  margin: auto;
}

.badgeArea {
  display: flex;
  padding: 0px;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
}

.badgeArea span {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 3px;
  color: #fff;
  color: var(--c-ff, #fff);
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  border-radius: 16px;
  padding: 2.6px 6px 2px 26px;
  width: auto;
  height: 20px;
  background-clip: padding-box;
}

.badgeArea .enginner {
  background: #41b8f3 url(../../static/media/white_builder_icon.e3cf0613634dcb2128ba.svg) no-repeat left 6px center;
}
.badgeArea .enginner::after {
  content: '프롬프트 엔지니어';
}

.badgeArea .artist {
  background: #f138fc url(../../static/media/white_artist_icon.270cb422fb393ff25b1f.svg) no-repeat left 2px center;
  content: '아티스트';
}
.badgeArea .artist::after {
  content: '아티스트';
}
.badgeArea .artist::before {
  display: none;
}

.Section .badgeArea span {
  /* padding: 1px 6px 1px 26px; */
  height: auto;
}

.originArea {
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 12px;
  font-weight: 200;
  letter-spacing: -0.24px;
  padding: 8px 0;
  margin-top: 8px;
}
.originArea .link a {
  color: #13d5df;
  font-size: 13px;
  font-weight: 500;
  padding: 0 8px;
}

.originArea a.link:hover {
  text-decoration: underline;
}
/* 
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
  color: #fff;
  outline: none;
  border-radius: 50px;
  background: linear-gradient(90deg, rgba(176, 65, 243, 0.6) 0%, rgba(236, 21, 255, 0.6) 100%);
} */

/* .slick-prev:hover::before,
.slick-prev:focus::before,
.slick-next:hover::before,
.slick-next:focus::before {
  color: #fff;
  outline: none;
} */
.slick-next.slick-disabled:before,
.slick-prev.slick-disabled:before {
  opacity: 0.1;
}

/* 고도화 관련 영역 컨트롤 id="new" */
#musicInfo:has(#new) {
  height: auto;
  margin: 12px 0 0;
}
#musicInfo .rsWrapper#new {
  align-items: flex-start;
  padding: 0 16px;
}
#musicInfo .rsWrapper#new .majorModel {
  padding: 0;
  gap: 6px;
}
#musicInfo .rsWrapper#new .thumbBox {
  width: 320px;
}
#musicInfo .rsWrapper#new .info {
  width: calc(100% - 320px - 40px);
  padding: 0 0 20px;
}
#musicInfo .rsWrapper#new .info > h1 {
  margin: 32px 0 24px;
}
#musicInfo .rsWrapper#new .info div .userBox {
  gap: 16px;
  padding-top: 0;
}
#musicInfo .rsWrapper#new .info div .contentsBox {
  width: calc(100% - 400px);
}
#musicInfo .rsWrapper#new .info div .contentsBox .musicBox {
  gap: 5%;
}

/* 유저네임 */
.staffBox .greyBox {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  gap: 2px;
}
.staffBox .title .greyBox .imgBox {
  display: flex;
  flex-direction: row;
  gap: 0;
  width: 100%;
  min-width: 0;
  flex: 1 1;
  align-items: center;
}

.staffBox .greyBox .imgBox img {
  width: 20px;
  height: 20px;
  border-radius: 100%;
  margin: 0 8px 0 0;
}

/* 가격 */
.staffBox .greyBox p {
  margin: auto 0;
}

@media (max-width: 1600px) {
  #popularWrapper .contentsSlide .whiteBox .white {
    width: calc((100% - 1100px) / 2);
  }
  #builderWrapper .bgImg .builderBox div .box.login p {
    font-size: 22px;
  }
}
@media (max-width: 1518px) {
  #aiWrapper .slide .imageWrapper {
    margin: 0 -36px;
  }
  .mainTop .rsWrapper,
  .bestAlbum .rsWrapper {
    width: 100%;
    padding: 0;
  }

  #builderWrapper .bgImg .login p {
    font-size: 22px;
  }
  #builderWrapper .bgImg .builderBox div .box p {
    font-size: 20px;
  }
  #infoWrapper > h1 {
    font-size: 38px;
  }
  .rankBox .anticon-right {
    margin-left: 28px;
  }
  #newWrapper {
    padding: 24px 0 16px;
  }
}
@media (max-width: 1280px) {
  #aiWrapper .slide .imageWrapper {
    width: 130px;
    height: 130px;
  }
  #aiWrapper .slide .imageWrapper:nth-child(1),
  #aiWrapper .slide .imageWrapper:nth-child(2),
  #aiWrapper .slide .imageWrapper:nth-child(13),
  #aiWrapper .slide .imageWrapper:nth-child(12) {
    display: none;
  }
  /* top10 엔지니어정보보 */
  #musicInfo .rsWrapper .info > div {
    gap: 20px;
  }
  #musicInfo .rsWrapper .info div .contentsBox,
  #musicInfo .rsWrapper .info div .userBox {
    width: 50%;
  }
  /* 장르 */
  #gerneWrapper .rsWrapper .listBox .gerneBox,
  #engineWrapper .rsWrapper .listBox .gerneBox {
    width: calc(20% - 25px);
    margin: 0 29px 40px 0;
  }
  #gerneWrapper .rsWrapper .listBox .gerneBox:nth-child(7n),
  #engineWrapper .rsWrapper .listBox .gerneBox:nth-child(7n) {
    margin: 0 29px 40px 0;
  }
  #gerneWrapper .rsWrapper .listBox .gerneBox:nth-child(5n),
  #engineWrapper .rsWrapper .listBox .gerneBox:nth-child(5n) {
    margin: 0 0 40px;
  }
  /* 인기엔지니어 */
  #popularWrapper > h1 {
    font-size: 38px;
  }
  #myHome #listWrapper .rsWrapper .staff .staffList .staffBox,
  #myHome #listWrapper .rsWrapper .newContents .staffList .staffBox {
    width: calc(50% - 10px);
    /* margin: 0 8px 16px 0; */
    gap: 8px 16px;
  }
  /* #listWrapper .rsWrapper .staff .staffList .staffBox:nth-child(3n),
  #listWrapper .rsWrapper .newContents .staffList .staffBox:nth-child(3n) {
    margin: 0 8px 16px 0;
  }
  #listWrapper .rsWrapper .staff .staffList .staffBox:nth-child(2n),
  #listWrapper .rsWrapper .newContents .staffList .staffBox:nth-child(2n) {
    margin: 0 0 16px;
  }
  .Section #listWrapper .rsWrapper .staff .staffList .staffBox,
  #listWrapper .rsWrapper .newContents .staffList .staffBox {
    margin: 0 8px 16px 0;
  }

  .Section #listWrapper .rsWrapper .staff .staffList .staffBox:nth-child(3n),
  #listWrapper .rsWrapper .newContents .staffList .staffBox:nth-child(3n) {
    margin: 0 0 16px;
  } */

  #myHome #otherWrapper .rsWrapper .staff .staffList .staffBox,
  #myHome #otherWrapper .rsWrapper .newContents .staffList .staffBox {
    width: 16.1% !important;
  }
  #builderWrapper > .titleBox h1 {
    font-size: 38px;
  }
  #builderWrapper .bgImg {
    height: 450px;
  }
  #builderWrapper .bgImg .builderBox .box {
    width: 14.2857142857%;
  }
  #builderWrapper .bgImg .login p {
    font-size: 16px;
  }
  #builderWrapper .bgImg .builderBox div .box.login p {
    margin: 0 0 10px;
  }
  #builderWrapper .bgImg .builderBox div .box p {
    font-size: 20px;
  }
  #builderWrapper .bgImg .builderBox div .box img {
    width: 35px;
  }
  /* 소식 */
  #infoWrapper .aiListBox .aiList > img {
    width: 200px;
  }
  #infoWrapper .aiListBox .aiList .infoBox {
    width: calc(100% - 200px);
    padding: 0 20px;
  }
  #popularWrapper .contentsSlide .whiteBox .white {
    width: calc((100% - 1000px) / 2);
  }
  #newWrapper {
    padding: 16px 0;
  }
  #aiWrapper {
    margin: 28px 0 0;
  }
  .mainIcon {
    margin: -80px 11px 16px 0;
    width: 82px;
  }
}

@media (max-width: 1100px) {
  #aiWrapper > h1 span {
    font-size: 38px;
  }
  #musicInfo .rsWrapper .thumbBox {
    width: 28%;
    display: none;
  }
  #musicInfo .rsWrapper .info {
    width: 100%;
    padding-bottom: 16px;
    overflow: hidden;
  }
  #musicInfo .rsWrapper#new .info {
    width: 100%;
    padding: 0 0 20px;
  }
  #musicInfo .rsWrapper .info div .userBox {
    width: 100%;
    min-width: 280px;
  }
  /* #musicInfo .rsWrapper .info div .contentsBox {
    width: auto;
  } */
  #popularWrapper .rankBox {
    /* display: none; */
  }
  #infoWrapper .titleBox h1 {
    font-size: 30px;
  }
  #popularWrapper .contentsSlide .whiteBox .white {
    width: calc((100% - 800px) / 2);
  }
  #musicInfo .mobileTop {
    display: flex;
    padding: 0 16px;
  }
  .mainTop #musicInfo .mobileTop,
  .bestAlbum #musicInfo .mobileTop {
    position: relative;
  }

  .bestAlbum #musicInfo .mobileTop {
    padding-top: 0;
  }
  #musicInfo .mobileTop > div:first-child {
    display: flex;
    flex-direction: row;
    justify-content: start;
  }

  #myHome .rsWrapper {
    width: 100%;
    padding: 0 16px !important;
  }
  #newWrapper .rsWrapper .bgImg {
    transform: translate(-50%, 48%);
  }
}
@media (max-width: 900px) {
  #popularWrapper {
    padding: 20px 0 0;
  }
  #infoWrapper > h1,
  #builderWrapper > .titleBox h1,
  #aiWrapper > h1 span {
    font-size: 32px;
  }
  #popularWrapper .rankBox .rsWrapper .infoBox {
    width: 100%;
  }

  #popularWrapper .rankBox .rsWrapper .infoBox {
    width: 100%;
    padding: 30px 0 24px;
    height: min-content;
  }

  #myHome .filter + .searchBox > .rsWrapper {
    justify-content: space-between;
    flex-direction: row;
  }
  /*스테프픽*/
  .slick-slider .slick-list {
    z-index: 1;
    width: 100%;
  }
  .profileSection .slick-slider .slick-list,
  .mypageSection .slick-slider .slick-list {
    z-index: 1;
    width: calc(100% + 14px);
  }
  .Section #listWrapper .rsWrapper .newContents:first-child {
    margin-top: 40px;
  }
  /* .Section .slick-slider .slick-list {
    z-index: 1;
    width: 100%;
  } */

  .slick-next,
  .slick-prev {
    font-size: 0;
    line-height: 0;
    top: 50%;
    width: 36px;
    height: 36px;
    transform: translate(0, -70%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: 0;
    background: 0 0;
    z-index: 2;
  }
  .slick-prev {
    left: -16px;
  }
  [dir='rtl'] .slick-prev {
    right: -16px;
    left: auto;
  }

  .slick-next {
    right: -16px;
  }
  [dir='rtl'] .slick-next {
    right: auto;
    left: -16px;
  }
  /* 장르 */
  #gerneWrapper .rsWrapper .listBox .gerneBox {
    width: calc(33.3333333333% - 25px);
    margin: 0 29px 40px 0;
  }
  #gerneWrapper .rsWrapper .listBox .gerneBox:nth-child(7n),
  #gerneWrapper .rsWrapper .listBox .gerneBox:nth-child(5n) {
    margin: 0 29px 40px 0;
  }
  #gerneWrapper .rsWrapper .listBox .gerneBox:nth-child(3n) {
    margin: 0 0 40px;
  }
  /* 인기엔지니어 */
  #popularWrapper .rankBox .rsWrapper .thumbnail {
    display: none;
  }
  #engineWrapper .rsWrapper .listBox .gerneBox {
    width: calc(33.3333333333% - 25px);
    margin: 0 29px 40px 0;
  }
  #engineWrapper .rsWrapper .listBox .gerneBox:nth-child(7n),
  #engineWrapper .rsWrapper .listBox .gerneBox:nth-child(5n) {
    margin: 0 29px 40px 0;
  }
  #engineWrapper .rsWrapper .listBox .gerneBox:nth-child(3n) {
    margin: 0 0 40px;
  }
  .boardsSection .boardWrapper .ant-layout .ant-layout-content .ant-list-item .ant-card-cover {
    min-height: 90px;
    height: auto;
  }
  .boardsSection .boardWrapper .ant-layout .ant-layout-content .ant-list-item .ant-card-cover p {
    font-size: 18px;
  }
  /* 배너 */
  #subBannerWrapper {
    padding: 0;
  }
  #subBannerWrapper .rsWrapper {
    flex-direction: column;
    padding: 0;
  }
  #subBannerWrapper .rsWrapper .subBanner {
    width: 100%;
    border-radius: 0;
  }
  #subBannerWrapper .rsWrapper .subBanner:first-child {
    padding: 3px 3px 0;
  }
  #subBannerWrapper .rsWrapper .subBanner img {
    border-radius: 0;
  }
  #popularWrapper > h1 {
    font-size: 30px;
  }
  /* 빌더 */
  #builderWrapper .bgImg {
    height: 441px;
  }
  #builderWrapper .bgImg .imgBox img:first-child {
    /* display: none; */
  }
  #builderWrapper .bgImg .imgBox {
    /* position: absolute;
    top: 0;
    left: 0;
    height: 130%; */
    width: 100%;
    height: 0;
    padding-bottom: calc(760 / 1360 * 150%);
    background-size: cover;
    background-image: url(../../static/media/bgImg.0b88fa813b6fa6127940.webp);
    background-repeat: no-repeat;
    background-position: center;
  }
  #builderWrapper .bgImg .builder {
    right: 0;
    left: auto;
    left: initial;
    width: 33%;
  }
  #builderWrapper .bgImg .builderBox .box {
    width: 20%;
  }
  #builderWrapper .bgImg .builderBox div .box img {
    width: 50px;
  }
  .boardsSection #infoWrapper .rsWrapper {
    padding: 0 16px 40px;
    overflow-x: hidden;
  }
  #builderWrapper .bgImg .builderBox div .box p {
    font-size: 20px;
  }
  #builderWrapper > h1 {
    font-size: 34px;
  }
  /* #builderWrapper .bgImg .imgBox img.mobile {
      display: initial;
      width: 100%;
  } */
  /* 소식 */
  .Section #listWrapper .rsWrapper {
    flex-direction: column;
    padding: 0 16px 16px;
    gap: 28px;
  }
  .Section #infoWrapper .rsWrapper {
    flex-direction: column;
    padding: 0 16px 40px;
  }
  #infoWrapper .rsWrapper {
    padding: 0 0 40px;
    gap: 40px;
  }
  #boardWrapper #infoWrapper .listBox {
    flex-wrap: wrap;
  }

  #infoWrapper .listBox .list {
    width: 48%;
  }
  #infoWrapper .aiListBox .aiList {
    width: 100%;
  }
  #infoWrapper .listBox .searchBox form {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  #infoWrapper .listBox .searchBox form span {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
  }
  #infoWrapper .listBox .searchBox form span div {
    width: auto;
  }
  #infoWrapper .rsWrapper .titleBox {
    height: 32px;
    margin-bottom: 8px;
  }
  #infoWrapper .listBox .list .card {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.3);
    max-width: none;
    z-index: 2;
  }
  #infoWrapper .listBox .list .card p {
    line-height: 1;
    z-index: 2;
  }
  #infoWrapper .listBox .list:hover {
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
    background: linear-gradient(90deg, rgba(176, 65, 243, 0.8) 0%, rgba(236, 21, 255, 0.8) 100%);
    z-index: 1;
    transition: all 0.2s ease;
  }
  #infoWrapper .listBox .list:hover .image-wrapper {
    background: linear-gradient(90deg, rgba(176, 65, 243, 0.8) 0%, rgba(236, 21, 255, 0.8) 100%);
    opacity: 0.3;
  }
  #infoWrapper .listBox .list:nth-child(4n) {
    margin-right: 0;
  }

  .staffBox#playerBg .absoluteBox .play img {
    width: 48px;
    height: 48px;
  }
  #myHome #otherWrapper .rsWrapper .staff .staffList .staffBox,
  #myHome #otherWrapper .rsWrapper .newContents .staffList .staffBox {
    width: 49% !important;
  }
  .mainTop #aiWrapper .contentsSlide .whiteBox,
  .bestAlbum #aiWrapper .contentsSlide .whiteBox {
    display: none;
  }
  /* .mainTop #aiWrapper .contentsSlide #popularSlider .anticon svg,
  .bestAlbum #aiWrapper .contentsSlide #popularSlider .anticon svg {
    fill: #fff;
    stroke: 1px #fff;
  } */

  .mainTop #popularSlider .arrowLeft,
  .mainTop #popularSlider .arrowRight,
  .bestAlbum #aiWrapper .contentsSlide #popularSlider .arrowRight,
  .bestAlbum #aiWrapper .contentsSlide #popularSlider .arrowLeft {
    background: rgba(255, 255, 255, 0.4);
    color: #000;
  }
  .bestAlbum #popularSlider .arrowLeft:hover,
  .bestAlbum #popularSlider .arrowRight:hover,
  #popularSlider .arrowLeft:hover,
  #popularSlider .arrowRight:hover {
    background: linear-gradient(to right, #b041f3, #ec15ff);
    color: #ffffff;
    fill: #fff;
  }
  .mainTop #popularSlider .arrowLeft,
  .mainTop #aiWrapper .contentsSlide #popularSlider .arrowLeft,
  .bestAlbum #aiWrapper .contentsSlide #popularSlider .arrowLeft {
    left: 8px;
  }
  .mainTop #popularSlider .arrowRight,
  .mainTop #aiWrapper .contentsSlide #popularSlider .arrowRight,
  .bestAlbum #aiWrapper .contentsSlide #popularSlider .arrowRight {
    right: 8px;
  }

  #popularWrapper .contentsSlide .slick-dots {
    display: none !important;
  }
  #popularWrapper .rankBox .rsWrapper .infoBox .contentsBox .contentsList .contents .absoluteBox .price {
    padding: 4px 8px;
  }
  #popularWrapper .majorModel {
    padding: 12px 0;
  }
  #popularWrapper .rankBox .rsWrapper .infoBox .userBox {
    height: auto;
  }
  #popularWrapper .rankBox .rsWrapper .infoBox {
    gap: 28px;
  }
}
@media (max-width: 700px) {
  #popularWrapper .rsWrapper .titleBox {
    margin: 0 0 28px;
  }
  #popularWrapper .contentsSlide {
    position: relative;
    margin: 0 0 20px;
  }
  .boardsSection .ant-layout {
    margin: 0;
  }
  .communitySection #infoWrapper .rsWrapper .titleBox {
    height: auto;
    /* margin-bottom: 8px; */
    padding-top: 20px;
  }

  .communitySection #infoWrapper .listBox {
    justify-content: space-between;
  }
  .communitySection #infoWrapper .listBox .list {
    width: 48.5%;
    height: 40vw;
    height: 0;
    padding-bottom: calc(198 / 716 * 100%);
  }
  .Section #infoWrapper .listBox {
    column-gap: 3vw;
  }
  .Section #infoWrapper .listBox .list {
    width: 48%;
    /* height: 41vw; */
    min-height: 90px;
    height: 0;
    padding-bottom: calc(198 / 716 * 100%);
  }
  .boardsSection #infoWrapper .listBox .ant-spin-container .ant-row {
    gap: 10px 2vw;
    justify-content: space-between;
    margin: 0 !important;
  }
  .boardsSection #infoWrapper .listBox .ant-spin-container .ant-row > div {
    width: 48% !important;
    max-width: 48% !important;
  }

  .boardsSection #infoWrapper .listBox .ant-spin-container .ant-row > div > div.ant-col {
    padding: 0 !important;
  }
  .boardsSection #infoWrapper .listBox .ant-spin-container .ant-row .cardThum {
    width: 100%;
    padding-bottom: 0;
  }
  .boardsSection .title {
    margin: 0 16px;
    padding: 20px 0;
    width: calc(100% - 32px);
  }
  .boardsSection .title .titleBox {
    font-size: 18px;
  }
  .boardsSection .title .titleBox::before {
    width: 20px;
    height: 20px;
    background-size: 20px;
    content: '';
  }
  .boardsSection .boardWrapper .ant-layout .searchBox .result {
    height: auto;
  }
  .boardsSection .title .searchBox.none::before {
    width: 24px;
    height: 24px;
    background-size: 18px;
    content: '';
    background: url(../../static/media/search-solid.e8d06b2b80634e0176a0.svg) no-repeat center;
    fill: #525162;
  }
  .boardsSection .boardWrapper .ant-layout .searchBox .result .searchCount {
    gap: 12px;
    font-size: 14px;
  }
  .boardsSection .boardWrapper .searchBox .btn {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    gap: 12px;
  }
  .l-artist .btn-search,
  .boardsSection .boardWrapper .searchBox .btn-search {
    width: 32px;
    height: 32px;
    content: '';
    background: url(../../static/media/i-search.32412c02ca18f3d62907.svg) no-repeat center/18px;
    fill: #525162;
    border-radius: 4px;
    display: flex !important;
  }
  .boardsSection .boardWrapper .searchBox .btn-search::hover {
    box-shadow: inset 0 0 0 200px rgba(0, 0, 0, 0.2);
    border-color: transparent;
    outline: rgba(255, 94, 182, 0.7);
  }
  .boardsSection .boardWrapper .searchBox .btn .search {
    display: flex;
    position: absolute;
    left: -14px;
    right: -14px;
    background: #fff;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
    padding: 8px;
    top: 4px;
    z-index: 2;
  }

  .boardsSection .boardWrapper .searchBox form .inputText {
    width: calc(100% - 120px - 80px - 20px);
  }
  .boardsSection .boardWrapper .searchBox form .inputText .ant-row div:first-child {
    width: 100%;
  }
  .boardsSection .boardWrapper .ant-layout .cardArea {
    height: calc(-200px + 100vh);
    overflow-y: auto;
  }
  .boardsSection .boardWrapper .aui-grid-header-renderer {
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
  }
  .aui-grid-header-panel .aui-grid-table,
  .aui-grid-header-panel .aui-grid-table tr {
    /* height: 40px !important; */
  }

  .boardsSection .boardWrapper .aui-grid-body-panel .aui-grid-table tr td .aui-grid-renderer-base .group {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    gap: 4px;
    font-weight: 500;
    font-size: 14px;
  }
  .boardsSection .boardWrapper .aui-grid-body-panel .aui-grid-table tr td .comment {
    padding: 0;
    background: transparent;
    height: auto;
    gap: 4px;
  }
  .boardsSection .boardWrapper .aui-grid-body-panel .aui-grid-table tr td .comment span,
  .boardsSection .boardWrapper .aui-grid-body-panel .aui-grid-table tr td .comment svg {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #525162;
    line-height: 1;
    font-weight: 500;
    font-size: 11px;
    fill: #525162;
    height: 16px;
  }
  .boardsSection .boardWrapper .aui-grid-body-panel .aui-grid-table tr td .comment .icon-comment {
    width: 11px;
    height: 11px;
    background: url(../../static/media/i-commentB.b625cf7e2d65f0279438.svg) no-repeat center;
  }
  .boardsSection .boardWrapper .ant-layout .ant-layout-content .ant-list-item .ant-card-cover p {
    font-size: 16px;
  }
  .boardsSection #board-detail {
    min-height: auto;
    width: 100%;
    padding: 0 16px;
  }

  .boardsSection #board-detail .board-detail-wrapper {
    width: 100%;
    padding: 0;
  }
  .boardsSection #board-detail .board-detail-wrapper .title-container {
    gap: 5px;
    padding-top: 30px;
  }
  .boardsSection #board-detail .board-detail-wrapper .title-container .info-container {
    gap: 16px;
    font-size: 12px;
    line-height: 1;
    height: auto;
  }
  .boardsSection #board-detail .board-detail-wrapper .title-container .info-container .date-info,
  .boardsSection #board-detail .board-detail-wrapper .title-container .info-container svg {
    font-size: 12px;
  }
  .boardsSection #board-detail .board-detail-wrapper .title-container .info-container .ant-btn {
    height: auto;
  }
  .boardsSection #board-detail .board-detail-wrapper .title-box {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 23px;
    margin-top: 5px;
  }
  .boardsSection #board-detail .board-detail-wrapper .title-content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 23px;
  }
  .boardsSection #board-detail .board-detail-wrapper .profile-container {
    padding: 16px 0px;
    gap: 10px;
    margin-block-end: 20px;
  }
  .boardsSection #board-detail .board-detail-wrapper .profile-container .user-icon .ant-avatar {
    width: 38px;
    height: 38px;
  }
  .boardsSection #board-detail .board-detail-wrapper .profile-container .user-info {
    gap: 4px;
  }
  .boardsSection #board-detail .board-detail-wrapper .profile-container .user-info .info-container {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    gap: 8px;
  }
  .boardsSection #board-detail .board-detail-wrapper .profile-container .user-info .info-container .dropdown-item {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    cursor: pointer;
    padding: 0;
  }
  .boardsSection #board-detail .board-detail-wrapper .profile-container .user-info .info-container .star-rating {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    width: auto;
  }
  .boardsSection #board-detail .board-detail-wrapper .profile-container .user-info .info-container .star-rating .anticon-star {
    font-size: 13px;
  }
  .boardsSection #board-detail .board-detail-wrapper .profile-container .user-info .userArea {
    gap: 4px;
  }
  .boardsSection #board-detail .board-detail-wrapper .profile-container .user-info .userArea p {
    font-size: 14px;
  }
  .boardsSection #board-detail .board-detail-wrapper .file-attachment {
    padding: 16px 0;
  }
  .boardsSection #board-detail .board-detail-wrapper .file-list {
    gap: 8px;
    font-size: 12px;
  }
  .boardsSection #board-detail .board-detail-wrapper .back-button-container {
    padding: 30px 0;
  }

  #aiWrapper {
    margin: 16px 0 0;
  }
  #aiWrapper > h1 {
    font-size: 16px;
    margin: 0 0 16px;
  }
  #aiWrapper > h1 span {
    /* font-size: 16px; */
  }
  #aiWrapper .titleBox {
    margin: 0 0 8px;
  }
  #aiWrapper .titleBox::after {
    display: none;
  }
  #infoWrapper .rsWrapper .titleBox .title p,
  #listWrapper .rsWrapper .newContents .titleBox .title p,
  #popularWrapper .rsWrapper .titleBox .title p,
  #newWrapper .rsWrapper div .titleBox h1,
  #aiWrapper .titleBox .title p {
    font-size: 20px;
  }
  #aiWrapper .titleBox .tabBox {
    padding: 4px 2px;
    /* margin: 0 10px 0 0; 메인 오흔쪽 더보기 버튼 없을 시, 빈공간 생김*/
  }
  #aiWrapper .titleBox .tabBox .tab {
    font-size: 14px;
    padding: 6px 8px;
  }
  #aiWrapper .slide {
    padding: 0;
  }
  #aiWrapper .slide .imageWrapper {
    width: 70px;
    height: 70px;
    margin: 0 -8px 0 0;
  }
  #aiWrapper .slide .imageWrapper#active {
    width: 110px;
    height: 110px;
    margin: 0;
  }
  #aiWrapper .slide .imageWrapper .activeIcon .round {
    width: 46px;
    height: 46px;
  }
  #aiWrapper .slide .imageWrapper .activeIcon img {
    width: 18px;
  }
  #aiWrapper .slide .imageWrapper:nth-child(3),
  #aiWrapper .slide .imageWrapper:nth-child(4),
  #aiWrapper .slide .imageWrapper:nth-child(5),
  #aiWrapper .slide .imageWrapper:nth-child(10),
  #aiWrapper .slide .imageWrapper:nth-child(11) {
    display: none;
  }

  #popularWrapper.mainTop #popularSlider .list > div .absoluteBox .thumbnail {
    /* height: 158px; */
  }
  .mainIcon {
    width: 83px;
    margin: -60px 0 0;
  }
  #musicInfo {
    margin: -40px 0 0;
    justify-content: space-between;
    height: auto;
  }
  #musicInfo .rsWrapper .thumbBox {
    display: none;
  }
  #musicInfo .rsWrapper .info {
    width: 100%;
  }
  #musicInfo .rsWrapper .info > h1 {
    font-size: 24px;
    margin: 0 0 20px;
  }
  #musicInfo .rsWrapper#new .info > h1 {
    margin: 20px 0 20px;
  }
  #musicInfo .rsWrapper .info div .userBox {
    width: 100%;
  }
  #musicInfo .rsWrapper#new .info div .userBox {
    gap: 8px;
  }
  #musicInfo .rsWrapper .info div .contentsBox {
    display: none;
  }
  #musicInfo .rsWrapper .info div .userBox .userInfo {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: start;
    gap: 16px;
    margin: 0;
  }
  #musicInfo .rsWrapper .info > div {
    flex-direction: column;
    height: auto;
  }
  #musicInfo .mobileContentsBox {
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.3);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
  #musicInfo .rsWrapper .info div .userBox .userInfo .nameBox div .badge {
    margin-right: 4px;
  }
  #musicInfo .rsWrapper .info div .userBox .userInfo .nameBox .userArea p {
    font-size: 20px;
  }
  #musicInfo .rsWrapper .info div .userBox .userInfo .nameBox .appraisal .classRank p {
    font-size: 16px;
  }
  #musicInfo .mobileContentsBox .musicBox {
    gap: 48px;
    /* justify-content: space-between; */
  }
  #musicInfo .mobileContentsBox .music {
    width: calc(20% - 8px);
    position: relative;
  }
  #musicInfo .mobileContentsBox > div:first-child {
    margin: 0 0 20px;
  }
  #musicInfo .mobileContentsBox > div h1 {
    font-size: 16px;
    color: #ffffff;
    margin: 0 23px 0 0;
    font-weight: 500;
  }
  #musicInfo .mobileContentsBox > div h1 span {
    font-weight: 400;
  }
  #musicInfo .mobileContentsBox > div p {
    font-size: 12px;
    color: #ffffff;
  }
  #musicInfo .mobileContentsBox .musicBox .music {
    width: 80px;
    position: relative;
  }
  #musicInfo .mobileContentsBox .music > img {
    width: 100%;
    height: 80px;
    border-radius: 16px;
    overflow: hidden;
    margin: 0 0 8px;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
    object-fit: cover;
  }
  #musicInfo .mobileContentsBox .music p {
    color: #ffffff;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    text-align: center;
  }
  #musicInfo .mobileContentsBox .music > div {
    position: absolute;
    top: 0;
    left: 0;
    padding: 4px;
    z-index: 11;
    height: 36px;
    align-items: flex-start;
    right: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0) 100%);
    border-radius: 16px 16px 0 0;
    letter-spacing: -0.26px;
  }
  #musicInfo .mobileContentsBox .music > div img {
    width: 16px;
    height: 16px;
    border-radius: 100%;
    margin: 0 5px 0 0;
  }
  #musicInfo .mobileContentsBox .music > div p {
    font-size: 12px;
    font-weight: 700;
    color: #ffffff;
  }

  #musicInfo .mobileTop div {
    width: auto;
  }
  .mainTop #musicInfo .rsWrapper#new .info,
  .bestAlbum #musicInfo .rsWrapper#new .info {
    /* padding-top: 20px; */
  }

  #musicInfo .mobileTop div img {
    width: 20px;
    height: 20px;
    border-radius: 100%;
    margin: 0 8px 0 0;
  }
  #musicInfo .mobileTop div p {
    font-size: 13px;
    color: #ffffff;
  }
  #musicInfo .mobileTop img {
    width: 34px;
  }
  /* 최신곡 */
  #newWrapper {
    padding: 8px 0;
    overflow: hidden;
  }
  #newWrapper .rsWrapper .slider {
    padding: 0;
  }
  /* 장르 */
  #gerneWrapper {
    padding: 16px 0;
  }
  #gerneWrapper .rsWrapper .listBox .gerneBox {
    width: calc(50% - 11.5px);
    margin: 0 23px 20px 0;
  }
  #gerneWrapper .rsWrapper .listBox .gerneBox:nth-child(7n),
  #gerneWrapper .rsWrapper .listBox .gerneBox:nth-child(5n),
  #gerneWrapper .rsWrapper .listBox .gerneBox:nth-child(3n) {
    margin: 0 23px 20px 0;
  }
  #gerneWrapper .rsWrapper .listBox .gerneBox:nth-child(2n) {
    margin: 0 0 20px;
  }
  #gerneWrapper .rsWrapper .titleBox {
    margin: 0px 16px 16px 16px;
  }
  #gerneWrapper .rsWrapper .titleBox .title p {
    font-size: 20px;
  }
  #gerneWrapper .rsWrapper .titleBox .tabBox {
    padding: 4px 2px;
    /* margin: 0 10px 0 0;  오른쪽 빈공간 생김 gap으로 처리*/
  }
  #gerneWrapper .rsWrapper .titleBox .tabBox .tab {
    display: none;
    font-size: 14px;
    padding: 5px 8px;
  }
  #gerneWrapper .rsWrapper .titleBox .tabBox .tab:nth-of-type(1),
  #gerneWrapper .rsWrapper .titleBox .tabBox .tab:nth-of-type(2),
  #gerneWrapper .rsWrapper .titleBox .tabBox .tab:nth-of-type(3),
  #gerneWrapper .rsWrapper .titleBox .tabBox .tab:nth-of-type(4) {
    display: flex;
  }
  /* 인기엔지니어 */
  #engineWrapper {
    padding: 0;
  }
  #engineWrapper .rsWrapper .listBox .gerneBox {
    width: calc(50% - 11.5px);
    margin: 0 23px 20px 0;
  }
  #engineWrapper .rsWrapper .listBox .gerneBox:nth-child(7n),
  #engineWrapper .rsWrapper .listBox .gerneBox:nth-child(5n),
  #engineWrapper .rsWrapper .listBox .gerneBox:nth-child(3n) {
    margin: 0 23px 20px 0;
  }
  #engineWrapper .rsWrapper .listBox .gerneBox:nth-child(2n) {
    margin: 0 0 20px;
  }
  #engineWrapper .rsWrapper .titleBox {
    margin: 0 0 16px 0;
  }
  #engineWrapper .rsWrapper .titleBox .title p {
    font-size: 20px;
  }
  #engineWrapper .rsWrapper .titleBox .tabBox {
    padding: 4px;
    margin: 0 10px 0 0;
  }
  #engineWrapper .rsWrapper .titleBox .tabBox .tab {
    font-size: 14px;
    padding: 4px 8px;
  }
  .infoBox .contentsBox .contentsList {
    gap: 2%;
  }
  #popularWrapper .rankBox .rsWrapper .infoBox .contentsBox .contentsList .contents {
    width: 33%;
  }
  /* 배너 */
  #subBannerWrapper .rsWrapper .subBanner {
    /* height: 142px; */
  }
  #subBannerWrapper .rsWrapper .subBanner .absoluteBox h1 {
    font-size: 28px;
  }
  #subBannerWrapper .rsWrapper .subBanner .absoluteBox p {
    font-size: 16px;
  }
  #subBannerWrapper .rsWrapper .subBanner .introText h1 {
    font-size: 28px;
  }
  #subBanner2 .introText h1 {
    font-size: 28px;
  }
  #subBannerWrapper .rsWrapper .subBanner .introText h2,
  #subBanner2 .introText h2 {
    font-size: 13px;
  }
  /* 인기 */
  #popularWrapper {
    padding: 12px 0 0;
    /* margin: 0 0 30px; */
  }
  #popularWrapper > h1 {
    font-size: 20px;
    margin: 0 0 12px;
    line-height: 1.4;
  }
  /* 스태프 + 최신컨텐츠 */

  .Section #listWrapper .rsWrapper .newContents:first-child {
    margin-top: 40px;
  }
  #listWrapper #otherWrapper .rsWrapper {
    padding: 0 !important;
  }
  #listWrapper .rsWrapper .staff,
  #listWrapper .rsWrapper .newContents {
    width: 100%;
  }
  #popularWrapperr .rsWrapper .titleBox .title p,
  #listWrapper .rsWrapper .titleBox .title p {
    font-size: 20px;
  }
  #listWrapper .rsWrapper .staff .staffList .staffBox .absoluteBox div > h1,
  #listWrapper .rsWrapper .newContents .staffList .staffBox .absoluteBox div > h1 {
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
  }
  #listWrapper .rsWrapper .staff .staffList .staffBox .absoluteBox div .greyBox > img,
  #listWrapper .rsWrapper .newContents .staffList .staffBox .absoluteBox div .greyBox > img {
    width: 20px;
    height: 20px;
  }
  #listWrapper .rsWrapper .staff .staffList .staffBox .absoluteBox div .greyBox > div {
    width: calc(100% - 24px - 8px);
  }

  #listWrapper .rsWrapper .staff .staffList .staffBox .absoluteBox div .greyBox div > h1 {
    font-size: 12px;
    width: 80px;
  }
  #listWrapper .rsWrapper .staff .staffList .staffBox .absoluteBox div .greyBox div .imgBox > img:first-child {
    display: none;
  }
  #listWrapper .rsWrapper .newContents {
    /* margin: 20px 0 0; */
  }

  .Section #listWrapper .rsWrapper .staff .staffList,
  .Section #listWrapper .rsWrapper .newContents .staffList {
    display: flex;
    gap: 20px 3%;
    flex-wrap: wrap;
  }

  #listWrapper .rsWrapper .newContents .staffList .staffBox .absoluteBox div .greyBox div .imgBox > img:first-child {
    display: none;
  }
  /* 배너2 */
  #subBanner2 {
    background: none;
    padding: 0;
  }
  #subBanner2 .rsWrapper {
    padding: 0;
  }
  #subBanner2 .rsWrapper > div {
    background: none;
    padding: 0;
    border-radius: 0;
  }
  #subBanner2 .rsWrapper div img {
    border-radius: 0;
    height: 160px;
  }
  #subBanner2 .rsWrapper div .absoluteBox h1 {
    font-size: 24px;
  }
  #subBanner2 .rsWrapper div .absoluteBox h1 span {
    font-size: 30px;
  }
  #subBanner2 .rsWrapper div .absoluteBox p {
    font-size: 16px;
  }
  /* 빌더 */
  #builderWrapper .bgImg .imgBox {
    /* position: absolute;
    top: 0;
    left: 0;
    height: 130%; */
    width: 100%;
    height: 0;
    padding-bottom: calc(760 / 1360 * 200%);
    background-size: cover;
    background-image: url(../../static/media/bgImg.0b88fa813b6fa6127940.webp);
    background-repeat: no-repeat;
    background-position: center;
  }
  #builderWrapper .bgImg {
    height: 375px;
  }
  #builderWrapper .bgImg .builderBox .box {
    width: 33.3333333333%;
  }
  #builderWrapper .bgImg .builderBox div .box p {
    font-size: 16px;
    font-weight: 400;
  }
  #builderWrapper .bgImg .builderBox div .box img {
    width: 34px;
  }
  #builderWrapper .bgImg .builderBox div .box.login p {
    font-size: 18px;
  }
  #builderWrapper .bgImg .builderBox div .box #loginBtn {
    height: 30px;
    font-size: 13px;
  }
  #builderWrapper > .titleBox h1 {
    font-size: 24px;
    padding: 4px 0 12px;
    line-height: 1.2;
    margin: 0;
  }
  #builderWrapper > .titleBox h1 span {
    font-size: 14px;
  }
  #builderWrapper > .titleBox h1 br {
    display: inline;
    display: initial;
  }
  /* 소식 */
  .communitySection #infoWrapper .rsWrapper {
    padding: 0 0 16px !important;
    gap: 40px;
  }
  .communitySection #infoWrapper .rsWrapper .titleBox .title {
    gap: 8px;
  }
  .communitySection #infoWrapper .rsWrapper .titleBox .title p {
    font-size: 18px;
  }
  .communitySection #infoWrapper .rsWrapper .titleBox .title img {
    margin: 0;
    width: 20px;
  }
  #infoWrapper .rsWrapper {
    padding: 0 16px 16px !important;
    gap: 20px;
  }
  #infoWrapper > h1 {
    font-size: 20px;
    padding: 20px 0;
    /* height: 44px; */
    margin: 0;
  }
  #infoWrapper h1 span {
    font-size: 20px;
  }
  #infoWrapper h1 br {
    display: inline;
    display: initial;
  }
  #infoWrapper .listBox .list .absoluteBox img {
    width: 32px;
    height: 32px;
    margin: 0;
  }
  #infoWrapper .listBox .list .absoluteBox p {
    font-size: 18px;
  }
  #infoWrapper .aiListBox .aiList {
    margin: 0 0 16px;
  }
  #infoWrapper .aiListBox .aiList > img {
    width: 100px;
    height: 111px;
  }
  #infoWrapper .aiListBox .aiList .infoBox {
    width: calc(100% - 100px);
    height: 111px;
    padding: 8px 16px;
  }
  #infoWrapper .aiListBox .aiList .infoBox h1 {
    font-size: 18px;
  }
  #infoWrapper .aiListBox .aiList .infoBox p {
    font-size: 13px;
    max-height: 26px;
  }
  #infoWrapper .aiListBox .aiList .infoBox p:last-child {
    font-size: 11px;
  }

  #infoWrapper .listBox .searchBox form {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  #infoWrapper .listBox .searchBox form span {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
  }
  #infoWrapper .listBox .searchBox form span div {
    width: auto;
  }
  #listWrapper .rsWrapper .staff .staffList .staffBox .absoluteBox div .greyBox div .imgBox {
    display: none;
  }
  #listWrapper .rsWrapper .staff .staffList .staffBox .absoluteBox div .greyBox > div {
    /* width: calc(100% - 32px - 8px); */
    width: auto;
  }
  #newWrapper .rsWrapper .bgImg {
    position: absolute;
    width: auto;
    height: 72%;
    top: 0;
    left: 50%;
    right: 50%;
    transform: translate(-50%, 30%);
  }
  #popularSlider .list > div .absoluteBox .title .greyBox,
  #listWrapper .rsWrapper .staff .staffList .title,
  #listWrapper .rsWrapper .newContents .staffList .title {
    padding: 8px 8px;
  }
  .mainTop .contentsSlide > .rsWrapper,
  .bestAlbum .contentsSlide > .rsWrapper {
    padding: 0;
  }

  .mainTop #popularSlider .arrowLeft,
  .bestAlbum #popularSlider .arrowLeft,
  #popularSlider .arrowRight {
    display: flex;
  }
  #musicWrapper .rsWrapper > div .content .searchBox div button {
    height: 32px;
  }
  .mainTop #popularSlider .arrowLeft:hover,
  .mainTop #popularSlider .arrowRight:hover,
  .bestAlbum #aiWrapper .contentsSlide #popularSlider .arrowRight:hover,
  .bestAlbum #aiWrapper .contentsSlide #popularSlider .arrowLeft:hover {
    background: rgba(255, 255, 255, 0.4);
    color: #000;
  }
  #popularSlider .arrowRight:hover,
  #popularSlider .arrowLeft:hover {
    background: rgba(0, 0, 0, 0.15);
    color: #000;
  }
  #builderWrapper .bgImg {
    height: 375px;
  }
}
@media (max-width: 500px) {
  .communitySection #infoWrapper .listBox .list .absoluteBox p {
    font-size: 16px;
    font-weight: 600;
  }
  .Section #listWrapper .rsWrapper .staff .staffList,
  .Section #listWrapper .rsWrapper .newContents .staffList {
    display: flex;
    gap: 20px 3.5%;
    justify-content: space-between;
  }
  #listWrapper .rsWrapper .staff .staffList,
  #listWrapper .rsWrapper .newContents .staffList {
    display: flex;
    gap: 12px 2%;
    justify-content: space-between;
  }
  .infoCount p.infoArtistWh {
    font-size: 12px;
  }
  #infoWrapper .listBox {
    row-gap: 12px;
  }
}

/* 메인에 쓰이는 더보기버튼 */
.userPage #whiteBtn {
  width: 80px;
  height: 36px;
  font-size: 12px;
}
.userPage #whiteBtn:hover {
  /* border: transparent 1px solid; */
  box-shadow: inset 0 0 0 200px rgba(0, 0, 0, 0.1);
}
@media (max-width: 700px) {
  #popularWrapper.mainTop {
    padding: 0px 0 0;
  }
  #aiWrapper > h1 span,
  .mainTop #aiWrapper > h1 span {
    font-size: 20px;
    letter-spacing: -1px;
  }
  .userPage #whiteBtn,
  #aiWrapper .titleBox > div:nth-child(2)#whiteBtn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    height: 32px;
    max-width: 32px;
    max-height: 32px;
    background: url(../../static/media/icon_plus.2e5cb6fd64d8e7ec614b.svg) no-repeat center center;
    background-size: 14px;
    font-size: 0;
  }
  .userPage #whiteBtn:hover {
    background: url(../../static/media/icon_plus.2e5cb6fd64d8e7ec614b.svg) no-repeat center center rgba(241, 245, 248, 0.5);
  }
  #popularWrapper .rsWrapper .titleBox .title img {
    width: auto;
    height: 24px;
    margin: 0 12px 0 0;
  }
  /* 메인 프롬프트 정보 변화 */

  .Section .greyBox {
    /* align-items: start; */
  }
  /* 배치상태 */
  .Section .greyBox > div,
  #popularSlider .list > div .absoluteBox .title .greyBox > div {
    /* flex-direction: column; */
    /* align-items: start; */
    width: 100%;
    overflow: hidden;
  }
  /* 유저네임 */
  .Section .greyBox > div > div,
  #popularSlider .list > div .absoluteBox .title .greyBox > p {
    /* height: 24px;
    line-height: 24px; */
  }
  /* 가격 */
  .Section .greyBox > div > p,
  #popularSlider .list > div .absoluteBox .title .greyBox > div > div {
    align-self: end;
    line-height: 1.4;
  }
  /* 다른 css 영향받는 레이아웃 속성 제어 */
  #popularSlider .list > div .absoluteBox .title .greyBox div > p,
  #listWrapper .rsWrapper .newContents .staffList .staffBox .absoluteBox div .greyBox div .imgBox {
    justify-content: start;
    width: 100% !important;
    font-size: 12px;
  }
  #musicInfo .promptRankIcon::before,
  .rankBox .promptRankIcon::before {
    width: 32px;
    background-size: 36px 56px;
    height: 56px;
  }
  #musicInfo .promptRankIcon span,
  .rankBox .promptRankIcon span {
    font-size: 20px;
  }
  .badgeArea span {
    padding: 2px 6px 2px 22px;
    line-height: 1;
    height: auto;
  }
  #musicInfo .rsWrapper .info div .userBox .userInfo .nameBox {
    /* gap: 4px; */
  }
  #musicInfo .rsWrapper .info div .userBox .userInfo .nameBox .appraisal {
    height: 32px;
  }

  #listWrapper .rsWrapper .staff .staffList .staffBox .absoluteBox div .greyBox div > h1,
  #listWrapper .rsWrapper .newContents .staffList .staffBox .absoluteBox div .greyBox div > h1,
  #engineWrapper .rsWrapper .listBox .gerneBox .absolBox div .title h1,
  #gerneWrapper .rsWrapper .listBox .gerneBox .absolBox div .title h1 {
    font-size: 12px;
    line-height: 1;
    margin: 0;
  }

  #engineWrapper .rsWrapper .listBox .gerneBox .absolBox div .title div img,
  #gerneWrapper .rsWrapper .listBox .gerneBox .absolBox div .title div img {
    width: 20px;
    height: 20px;
  }
  #popularSlider .list > div .absoluteBox .title .greyBox > div .flexRowBetween {
    width: auto;
    height: 20px;
    flex: 1 1;
    justify-content: flex-end;
  }
  #listWrapper .rsWrapper .staff .titleBox,
  #listWrapper .rsWrapper .newContents .titleBox {
    margin: 0 0 6px;
  }
  #listWrapper .rsWrapper .staff .staffList .staffBox,
  #listWrapper .rsWrapper .newContents .staffList .staffBox {
    /* margin: 0 20px 12px 0; */
  }
  #listWrapper .rsWrapper .staff .staffList .staffBox,
  #listWrapper .rsWrapper .newContents .staffList .staffBox {
    width: calc(50% - 10px);
    /* margin: 0 20px 12px 0; */
  }
  #listWrapper .rsWrapper .staff .staffList .staffBox:nth-child(3n),
  #listWrapper .rsWrapper .newContents .staffList .staffBox:nth-child(3n) {
    /* margin: 0 20px 12px 0; */
  }
  #listWrapper .rsWrapper .staff .staffList .staffBox:nth-child(2n),
  #listWrapper .rsWrapper .newContents .staffList .staffBox:nth-child(2n) {
    /* margin: 0 0 12px; */
  }
  /* #popularWrapper .rankBox .rsWrapper .infoBox {
    height: fit-content;
  } */
  #popularWrapper.mainImage .rankBox .rsWrapper .infoBox .contentsList {
    gap: 4px;
  }
}

@media (max-width: 700px) {
  #musicInfo:has(#new) {
    height: auto;
    margin: 20px 0 0;
  }
  #musicInfo .rsWrapper#new .info {
    width: 100%;
    padding-bottom: 16px;
  }

  #popularWrapper.mainImage .rankBox .rsWrapper .infoBox .contentsBox .contentsList .contents {
    width: 33.3%;
  }
  #popularWrapper.mainImage .rankBox .rsWrapper .infoBox .contents:nth-child(4) {
    display: none;
  }
  #aiWrapper .titleBox .tabBox .tab,
  #musicWrapper .content .searchBox .tabBox .tab,
  #otherWrapper .content .searchBox .tabBox .tab,
  #artistHome .tabBox .tab,
  #gerneWrapper .rsWrapper .titleBox .tabBox .tab {
    transition: none !important;
  }
}

@media (max-width: 346px) {
  #aiWrapper > h1 span,
  .mainTop #aiWrapper > h1 span {
    font-size: 18px;
    letter-spacing: -1px;
  }
  #musicInfo .mobileContentsBox .musicBox {
    gap: 12%;
  }
  #builderWrapper .bgImg {
    max-height: 359px;
  }
  #newWrapper #newSlider .musicBox #active div h1 {
    font-size: 9px;
    margin: -8px 0 4px;
  }
}

article > .top {
  padding: 12px 0 20px;
  background: linear-gradient(180deg, rgba(131, 223, 227, 0.2) 0%, rgba(225, 182, 228, 0.2) 100%);
}
article > .top + .rsWrapper {
  gap: 12px;
}
article .top .rsWrapper {
  align-items: flex-start;
  max-width: 1518px;
  /* padding: 0 40px; */
  gap: 48px;
}
#myHome .top .rsWrapper {
  align-items: center;
  z-index: 99;
}
article .top .rsWrapper .left .imgBox > div {
  border-radius: 16px;
  overflow: hidden;
}
article .top .rsWrapper .left {
  min-width: 480px;
  width: auto;
}
article .top .rsWrapper .right {
  width: 100%;
}
/*고도화 적용*/
article .top .rsWrapper .right {
  gap: 8px; /*고도화 적용*/
}

article .top .rsWrapper .left .user {
  padding: 8px;
}

article .top .rsWrapper .left .user div {
  width: auto;
}

article .top .rsWrapper .left .user .flexColEnd img {
  margin: 0;
}

article .top .rsWrapper .left .user div p {
  font-size: 16px;
  font-weight: 600;
  color: #0e0e1f;
}

article .top .rsWrapper .left .user div p {
  padding: 4px;
  border-radius: 8px;
  background: #141424;
  line-height: 100%;
  text-align: center;
  color: #fff;
  width: auto;
  font-size: 11px;
}
article .top .rsWrapper .left .user > img {
  display: none;
}
article .top .rsWrapper .left .user > div {
  gap: 12px;
}
article .top .rsWrapper .left .user > div button {
  padding: 0 4px;
}
article .top .rsWrapper .left .user > div button img {
  height: 16px;
}
article .top .rsWrapper .left .user > div button.goList:hover img {
  stroke: #b041f3;
}
.ant-image-preview-close {
  background: transparent;
}
@media (max-width: 700px) {
  .ant-image-preview-close {
    right: 10px !important;
  }
}
.ant-image-preview-close > .anticon {
  font-size: 25px;
}
.ant-image-preview-root .ant-image-preview-mask {
  position: fixed;
  inset: 0;
  z-index: 1000;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);

  pointer-events: none;
}
#detail .thumbnail .ant-image .ant-image-mask:hover {
  opacity: 0;
}
article .top .rsWrapper .left .box16 {
  display: flex;
  width: 100%;
  border-radius: 16px;
}
article .top .rsWrapper .left .imgScroll {
  height: 588px;
  overflow: auto;
  justify-content: flex-start;
  align-items: start;
}
.rhap_progress-bar-show-download {
  background: rgba(40, 127, 131, 0.2) !important;
}
article .top .rsWrapper .left .imgScroll > div {
  width: 100%;
  gap: 12px;
}

article .top .rsWrapper .left .imgScroll div .activeSiren,
article .top .rsWrapper .left .imgBox div .activeSiren {
  /* margin: 0 0 12px; */
  background: rgba(0, 0, 0, 0.05);
  gap: 2px;
}

article .top .rsWrapper .left .imgScroll div .activeSiren div,
article .top .rsWrapper .left .imgBox div .activeSiren div {
  width: calc(100% / 5);
  position: relative;
}

article .top .rsWrapper .left .imgScroll div .activeSiren div:before,
article .top .rsWrapper .left .imgBox div .activeSiren div:before {
  content: '';
  padding: 0 0 100%;
}

article .top .rsWrapper .left .imgScroll div .activeSiren div img,
article .top .rsWrapper .left .imgBox div .activeSiren div img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

article .top .rsWrapper .left .imgScroll div .thumbnail,
article .top .rsWrapper .left .imgBox div .thumbnail {
  position: relative;
  /* overflow: hidden; */
  /* border-radius: 20px; */
  /* margin: 0 0 13px; */
  background: rgba(0, 0, 0, 0.05);
}

article .top .rsWrapper .left .imgScroll div .thumbnail::after,
article .top .rsWrapper .left .imgBox div .thumbnail::after {
  content: '';
  padding: 0 0 100%;
}

article .top .rsWrapper .left .imgScroll div .thumbnail > img,
article .top .rsWrapper .left .imgBox div .thumbnail > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

article .top .rsWrapper .left .imgScroll div .thumbnail .absoluteBox,
article .top .rsWrapper .left .imgBox div .thumbnail .absoluteBox {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 20px;
  z-index: 10;
  align-items: flex-end;
}

article .top .rsWrapper .left .imgScroll div .thumbnail .absoluteBox div,
article .top .rsWrapper .left .imgBox div .thumbnail .absoluteBox div {
  width: auto;
  cursor: pointer;
}

article .top .rsWrapper .left .imgScroll div .thumbnail .absoluteBox div > img {
  width: 26px;
}

article .top .rsWrapper .left .imgScroll div .thumbnail .absoluteBox div .icon,
article .top .rsWrapper .left .imgBox div .thumbnail .absoluteBox div .icon {
  position: relative;
  width: 26px;
}

article .top .rsWrapper .left .imgScroll div .thumbnail .absoluteBox div .icon:hover img.activeIcon,
article .top .rsWrapper .left .imgScroll div .thumbnail .absoluteBox div .icon#active img.activeIcon,
article .top .rsWrapper .left .imgBox div .thumbnail .absoluteBox div .icon:hover img.activeIcon,
article .top .rsWrapper .left .imgBox div .thumbnail .absoluteBox div .icon#active img.activeIcon {
  opacity: 1;
}

article .top .rsWrapper .left .imgScroll div .thumbnail .absoluteBox div .icon img,
article .top .rsWrapper .left .imgBox div .thumbnail .absoluteBox div .icon img {
  width: 100%;
  height: auto;
}

article .top .rsWrapper .left .imgScroll div .thumbnail .absoluteBox div .icon img.activeIcon,
article .top .rsWrapper .left .imgBox div .thumbnail .absoluteBox div .icon img.activeIcon {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: all 0.2s ease-in-out;
  z-index: 2;
}

article .top .rsWrapper .left .imgScroll div .thumbnail .absoluteBox div .icon:first-child,
article .top .rsWrapper .left .imgBox div .thumbnail .absoluteBox div .icon:first-child {
  margin: 0 0 20px;
}

article .top .rsWrapper .left .barBox {
  margin: 0 0 16px;
}

article .top .rsWrapper .left .barBox .bar {
  position: relative;
  margin: 0 0 5px;
}

article .top .rsWrapper .left .barBox .bar .activeBar {
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(to right, #13d5df 0%, #f138fc 100%);
}

article .top .rsWrapper .left .barBox p {
  font-size: 11px;
  color: #656262;
}

article .top .rsWrapper .left .barBox span {
  color: #0e0e1f;
}

article .top .rsWrapper .left .play {
  margin: 0 0 35px;
}

article .top .rsWrapper .left .play img {
  width: 30px;
  margin: 0 50px 0 0;
}

article .top .rsWrapper .left .play img:nth-child(5) {
  margin: 0;
}

article .top .rsWrapper .left #purpleBtn {
  width: 200px;
  height: 34px;
  border-radius: 4px;
}

article .top .rsWrapper .left #purpleBtn img {
  width: 20px;
  margin: 0 10px 0 0;
}
.orderFirst {
  padding: 8px;
  height: 32px;
}
article .top .rsWrapper .left #purpleBtn {
  font-size: 14px;
}

article .siren {
  width: 20px;
  cursor: pointer;
}

article .siren img {
  width: 100%;
}

article .siren img:hover {
  content: url(../../static/media/i-sirenOn.1671ebde687100359f06.svg);
}

article .top .rsWrapper .right > h1 {
  font-size: 28px;
  font-weight: 600;
  color: #0e0e1f;
  margin: -8px 0 12px;
  width: 100%;
  line-height: 1.2;
  letter-spacing: -1.8px;
}

article .top .rsWrapper .right .user .userIcon {
  width: 80px;
  height: 80px;
  border-radius: 100%;
  padding: 0;
  background: linear-gradient(to bottom, #13d5df 0%, #f138fc 100%);
}

article .top .rsWrapper .right .user .userIcon > img {
  width: 100%;
  height: 100%;
  border-radius: 100%;
}

article .top .rsWrapper .right .user .userIcon p {
  font-size: 40px;
  color: #ffffff;
}

article .top .rsWrapper .right .user > div {
  width: calc(100% - 80px - 15px);
  gap: 4px;
}

article .top .rsWrapper .right .user > div .flexRowStart {
}

article .top .rsWrapper .right .user div .grade div {
  width: auto;
  padding: 8px 4px;
  border-radius: 20px;
  background: #f8ab30;
  font-size: 12px;
  font-weight: 600;
  color: #ffffff;
  margin: 0 8px 0 0;
}

article .top .rsWrapper .right .user div h2 {
  font-size: 24px;
  font-weight: 500;
  color: #0e0e1f;
}

article .top .rsWrapper .right .user div .grade {
  margin: 0 0 4px;
  gap: 8px;
  height: auto !important;
}

article .top .rsWrapper .right .user div p {
  font-size: 13px;
  font-weight: 500;
  color: #0e0e1f;
}

article .top .rsWrapper .right .user {
  /* margin: 0 0 15px; */
  align-items: flex-start;
  align-items: start;
  gap: 16px;
}
article .top .rsWrapper .right .userInfo {
  height: 34px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}

.right .userInfo .countNum {
  height: 22px;
  padding: 4px 8px;
  justify-content: center;
  align-items: center;
  gap: 4px;
}
.right .userInfo .countNum.view::before {
  margin: 0;
}

article .top .rsWrapper .right .content {
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.05);
  justify-content: space-between;
  /* margin: 0 0 24px; */
}

article .top .rsWrapper .right .content .typeBox {
  flex-wrap: wrap;
}

article .top .rsWrapper .right .content .typeBox .type {
  width: auto;
  padding: 8px 12px;
  border-radius: 24px;
  background: #ffffff;
  color: #3e3d53;
  margin: 0 12px 16px 0;
  height: 32px;
  font-weight: 500;
}

article .top .rsWrapper .right .content .text {
  /* margin: 0 0 16px; */
}

article .top .rsWrapper .right .content .stirenText {
  justify-content: flex-start;
  height: 180px;
  overflow: hidden;
}

article .top .rsWrapper .right .content .text {
  justify-content: flex-start;
  height: 395px;
  overflow: hidden;
}

article .top .rsWrapper .right .content .stirenText p,
article .top .rsWrapper .right .content .text p {
  width: 100%;
  font-size: 14px;
  line-height: 1.6;
  color: #323146;
  height: 100%;
  overflow: hidden;
  vertical-align: top;
  text-overflow: ellipsis;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 16;
  margin: 0 0 20px;
}

article .top .rsWrapper .right .content .stirenText .more p,
article .top .rsWrapper .right .content .text .more p {
  width: auto;
}
/*가격 없을 경우, 버튼 정렬*/
article .top .rsWrapper .right .priceBox.flexRowBetween:has(> div:only-child) {
  justify-content: flex-end;
}
article .top .rsWrapper .right .priceBox.flexRowBetween:has(div.alreadySaveArtist:only-child),
article .top .rsWrapper .right .priceBox.flexRowBetween:has(.alreadySaveArtist) {
  justify-content: flex-start;
}

article .top .rsWrapper .right #greyBtn5 {
  height: 34px;
  padding: 8px 24px;
  border-radius: 24px;
  /* margin: 0 0 24px; */
}

article .top .rsWrapper .right #greyBtn5 img {
  width: 18px;
  margin: 0;
}

article .top .rsWrapper .right #greyBtn5 p {
  font-size: 14px;
}

article .top .rsWrapper .right #logoutBtn {
  width: 163px;
  height: 34px;
  border-radius: 24px;
  margin: 0 0 24px;
}

article .top .rsWrapper .right #logoutBtn img {
  width: 18px;
  margin: 0 10px 0 0;
}

article .top .rsWrapper .right #logoutBtn p {
  font-size: 14px;
}

article .top .rsWrapper .right .priceBox > h1 {
  font-size: 28px;
  font-weight: 700;
  color: #0e0e1f;
  text-wrap: nowrap;
}

#detail .top .rsWrapper .right .priceBox > div {
  width: auto;
}

article .top .rsWrapper .right .priceBox #purpleBtn {
  position: relative;
  margin: 0 0 0 16px;
}

article .top .rsWrapper .right .priceBox #purpleBtn img.markIcon {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 28px;
}

article .top .rsWrapper .right .priceBox #darkGrey,
article .top .rsWrapper .right .priceBox #purpleBtn {
  height: 51px;
  border-radius: 24px;
  font-size: 16px;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.25);
  min-width: 200px;
}

article .top .rsWrapper .right .priceBox #darkGrey img,
article .top .rsWrapper .right .priceBox #purpleBtn img {
  width: 20px;
  margin: 0 10px 0 0;
}

article .top .rsWrapper .right .priceBox .downloadBox #darkGrey,
article .top .rsWrapper .right .priceBox .downloadBox #purpleBtn {
  width: 200px;
  /* height: 34px; */
  /* border-radius: 4px; */
  /* font-size: 14px; */
}
article .top .rsWrapper .right .priceBox .downloadBox #darkGrey:hover {
  border: 0;
  box-shadow: inset 0 0 0 200px rgba(0, 0, 0, 0.2);
}
article .top .rsWrapper .right .priceBox .downloadBox #purpleBtn:hover {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), linear-gradient(to right, #b041f3 0%, #ec15ff 100%);
  color: #fff;
}

/* 서브메인 상세페이지 */
#detail .majorModel {
  padding: 4px 0;
}
#detail .majorModel .title {
  color: #8790a3;
  font-size: 12px;
  font-weight: 600;
}
#detail .userInfo > div:first-child {
  gap: 12px;
}
#detail .iconBox {
  display: flex;
  align-items: center;
  gap: 10px;
}
#detail .top .rsWrapper .right .userInfo .icon {
  position: relative;
  width: 20px;
  padding: 0;
  cursor: pointer;
}
#detail .top .rsWrapper .right .userInfo .icon img {
  width: 100%;
  height: auto;
}
#detail .top .rsWrapper .right .userInfo .icon img.activeIcon {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: all 0.2s ease-in-out;
  z-index: 2;
}
#detail .top .rsWrapper .right .userInfo .icon:hover img.activeIcon,
#detail .top .rsWrapper .right .userInfo .icon#active img.activeIcon {
  opacity: 1;
}
#detail .genreInfo {
  display: flex;
  align-items: center;
  width: 100%;
}
#detail .genreInfo li span {
  display: inline-block;
  height: 26px;
  padding: 6px 12px;
  border-radius: 24px;
  background-color: #525162;
  line-height: 1;
  color: #fff;
  font-weight: 400;
}
#detail .genreInfo li::after {
  content: '';
  display: inline-block;
  width: 20px;
  height: 16px;
  vertical-align: middle;
  background: url(../../static/media/arrow.3082fd175ccd604fa999.svg) no-repeat center;
  background-size: contain;
}
#detail .genreInfo li:last-child::after {
  display: none;
}
#detail .top .rsWrapper .right .priceBox .downloadBox button:disabled,
#detail .top .rsWrapper .right .mobilePrice button:disabled {
  background: #dfdce4;
  cursor: not-allowed;
}
#detail .top .rsWrapper .right .content .tagBox {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  /* padding-bottom: 20px; */
}
#detail .top .rsWrapper .right .content .tagBox li {
  min-width: 50px;
  padding: 7px 12px;
  border-radius: 24px;
  background-color: #fff;
  font-size: 14px;
  font-weight: 500;
  color: #3e3d53;
}
#detail .top .rsWrapper .right .content .text {
  height: auto;
  gap: 12px;
  /* min-height: 268px !important; */
}
#detail .top .rsWrapper .right .content .text .prptDetailAccordion {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#detail .top .rsWrapper .right .content .text .prptDetailAccordion .ant-collapse-item {
  display: flex;
  flex-direction: column;
  gap: 0;
}

#detail .ant-collapse-item .ant-collapse-header {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
  border-radius: 8px;
  /* padding: 12px 16px; */
  padding: 0;
  height: auto;
  background: rgba(255, 255, 255, 0.3);
}

#detail .top .rsWrapper .right .content .text .ant-collapse-item .ant-collapse-header {
  border-radius: 8px;
  /* padding: 12px 16px; */
}
#detail .top .rsWrapper .right .content .text .ant-collapse-item.ant-collapse-item-active .ant-collapse-header {
  border-radius: 8px 8px 0 0;
}
#detail .ant-collapse-item.ant-collapse-item-active .ant-collapse-header,
#detail .ant-collapse-item.ant-collapse-item-active .ant-collapse-header + div {
  background: #fff;
  background: rgba(255, 255, 255, 1);
}

/* #detail .top .rsWrapper .right .content .text .prptDetailAccordion .ant-collapse-item .ant-collapse-header {
  border-radius: 8px 8px 0 0;
  padding: 12px 16px 8px 16px;
} */

.ant-collapse-ghost > .ant-collapse-item > .ant-collapse-content {
  background-color: transparent;
  border: 0;
  border-radius: 0 0 8px 8px;
  padding: 8px 16px;
}
.ant-collapse > .ant-collapse-item > .ant-collapse-header .ant-collapse-expand-icon {
  height: 22px;
  display: flex;
  align-items: center;
  padding-inline-end: 0;
  padding: 23px 16px;
  /* width: 36px; */
}
.ant-collapse > .ant-collapse-item > .ant-collapse-header .ant-collapse-arrow {
  display: inline-flex;
  align-items: center;
  color: inherit;
  font-style: normal;
  line-height: 0;
  text-align: center;
  text-transform: none;
  vertical-align: -0.125em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 20px;
  transition: transform 0.3s;
}
.ant-collapse > .ant-collapse-item > .ant-collapse-header .ant-collapse-arrow svg path {
  transition: transform 0.3s;
  /* fill: #ec15ff; */
  /* background: rgba(255, 255, 255, 0.5); */
  border-radius: 100%;
  padding: 4px;
  fill: rgba(0, 0, 0, 1);
  -webkit-text-stroke-color: rgba(0, 0, 0, 1);
  -webkit-text-stroke-width: 2;
}
.ant-collapse > .ant-collapse-item > .ant-collapse-header .ant-collapse-arrow svg {
  font-size: 14px;
}
.ant-collapse > .ant-collapse-item.ant-collapse-item-active > .ant-collapse-header .ant-collapse-arrow svg path {
  -webkit-text-stroke-color: #ec15ff;
  fill: #ec15ff;
}
#detail .top .rsWrapper .right .content .text .prptDetailAccordion .ant-collapse-item .ant-collapse-header .ant-collapse-header-text {
  font-size: 14px;
  font-weight: 700;
  padding: 12px 16px;
}
#detail .top .rsWrapper .right .content .text textarea {
  padding: 0;
  background-color: transparent;
  background-color: initial;
  border-width: 0;
  font-family: Pretendard;
  font-size: 14px;
  font-weight: 400;
  color: #323146;
  line-height: 1.4;
}
#detail .top .rsWrapper .right .content .text textarea:disabled {
  cursor: default;
  background-color: transparent !important;
  color: #323146 !important;
}
#detail #musicBox .rhap_progress-section .separator {
  position: absolute;
  right: 31px;
  font-size: 11px;
}
.ant-collapse > .ant-collapse-item > .ant-collapse-header {
  padding: 8px 0;
  color: rgba(0, 0, 0, 0.88);
  flex-direction: row;
  align-items: center;
  gap: 8px;
  height: 30px;
}
.ant-collapse-ghost > .ant-collapse-item > .ant-collapse-content > .ant-collapse-content-box {
  padding-block: 0;
}
.ant-collapse .ant-collapse-content > .ant-collapse-content-box {
  padding: 0;
}
#detail .rsWrapper .btnArea {
  width: 100%;

  flex-grow: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
  gap: 16px;
  padding: 32px 0 0;
  border-radius: 8px;
}
#detail .rsWrapper .btnArea .approval {
  min-width: 120px;
  border-radius: 4px;
  padding: 8px 12px;
  cursor: pointer;
  height: 40px;
}
#detail .rsWrapper .btnArea .approval button {
  font-size: 14px;
  font-weight: 500;
  font-family: Pretendard;
  color: #fff;
  margin: 0;
}

.promptVersion {
  display: flex;
  padding-top: 32px;
  padding-bottom: 24px;
  flex-direction: column;
  align-items: flex-start;
}

.promptVersion h1 {
  font-size: 20px;
  font-weight: 600;
  color: #0e0e1f;
  margin: 0 0 16px;
  line-height: 1;
}

.promptVersion > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.promptVersion > div dl {
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 4px;
}

.promptVersion > div dl dt {
  color: #3e3d53;
  font-size: 16px;
  font-weight: 700;
  line-height: 140%;
}
.promptVersion > div dl dd {
  color: #3e3d53;
  font-size: 14px;
  font-weight: 500;
  line-height: 140%; /* 19.6px */
}

#detail .rsWrapper .promptGuide {
  margin: 32px 0 20px;
}
#detail .rsWrapper .promptGuide h1 {
  font-size: 20px;
  font-weight: 600;
}
#detail .rsWrapper .promptGuide .more {
  margin: 10px 0 0;
}
#detail .rsWrapper .promptGuide .more p {
  cursor: pointer;
  text-decoration: underline;
  font-size: 16px;
}
#detail .rsWrapper .reviewCreate {
  /* margin: 16px 0 32px; */
  gap: 40px;
  align-items: flex-end;
}
#detail .rsWrapper .reviewCreate:not(:has(.create)) {
  justify-content: flex-end;
}
#detail .rsWrapper .reviewCreate div:first-child {
  padding: 40px 0 0;
}
#detail .top {
  /* margin: 0 0 20px; */
}
.reviewList {
  margin: 24px 0 0;
  /* gap: 8px; */
  padding-top: 8px;
  display: none;
}

.reviewList:has(> div) {
  display: flex;
}

#detail .user .classRank .ant-dropdown-trigger img,
#detail .user .classRank .ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-item img {
  max-width: 14px;
  max-height: 14px;
  cursor: pointer;
}
#detail .user .classRank .ant-dropdown-trigger p {
  margin: 0 4px;
  letter-spacing: 1.2px;
}

#detail .user .classRank .ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-item p {
  margin: 0;
}

#detail .promptThumList.forceWidth {
  width: 100%;
}

#detail .majorModel span.title,
#message .rsWrapper .profile .majorModel span.title {
  color: #8790a3;
  text-align: center;
  text-shadow: 0px 0px 0px rgba(255, 255, 255, 0.5);
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 110%; /* 13.2px */
  letter-spacing: -0.24px;
  background: transparent;
  border: none;
  padding-left: 0;
}
#detail .majorModel span,
#message .rsWrapper .profile .majorModel span {
  border-radius: 12px;
  border: 1px solid #c4c3c7;
  background: #fff;
  color: #6d6c75;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%; /* 11px */
  letter-spacing: -0.33px;
  padding: 3px 4px 4px;
}

article .rsWrapper .tip {
  padding: 0;
  min-height: 148px;
  justify-content: flex-start;
  /* overflow: auto; */
}

article .tip div h1 {
  font-size: 14px;
  font-weight: bold;
  color: #323146;
  margin: 0 0 16px;
}

article .tip .text p {
  font-size: 14px;
  color: #323146;
  overflow: hidden;
  height: 100%;
  text-overflow: ellipsis;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 16;
  font-weight: 400;
  line-height: 1.4;
}

article .rsWrapper .prompt {
  margin: 32px 0 0 0;
}

article .rsWrapper .prompt h1 {
  font-size: 20px;
  font-weight: 600;
  color: #0e0e1f;
  margin: 0 0 16px;
}
article .rsWrapper .prompt {
  margin: 32px 0 0;
}

article .rsWrapper .prompt > div {
  padding: 8px;
  border-radius: 8px;
  border: 1px solid #b041f3;
  border: 1px solid var(--gra-badge, #b041f3);

  background: #fdf2ff;

  background: var(--bg-pink, #fdf2ff);
}

article .rsWrapper .prompt > div textarea.ant-input-outlined {
  background: transparent;
  border: none;
  box-shadow: none;
  font-weight: 500;
  line-height: 1.4;
}

article .rsWrapper .prompt > div .btnBox {
  height: 40px;
}

article .rsWrapper .prompt > div .btnBox > p {
  font-size: 14px;
  padding: 0 0 0 12px;
}

article .rsWrapper .prompt > div .btnBox #pinkBtn {
  width: 77px;
  height: 40px;
  border-radius: 4px;
  font-size: 14px;
}

article .rsWrapper .reviewBox {
  margin: 40px 0 44px 0;
}

article .rsWrapper .reviewBox div {
  width: auto;
}

article .rsWrapper .reviewBox h1 {
  font-size: 32px;
  font-weight: bold;
  color: #0e0e1f;
  margin: 0 40px 0 0;
}

article .rsWrapper .reviewBox div h2 {
  color: #0e0e1f;
  font-size: 16px;
  font-weight: 600;
  margin: 0 8px 0 0;
}

article .rsWrapper .reviewBox div p {
  font-size: 14px;
  color: #87858b;
  margin: 0 0 0 5px;
}

article .rsWrapper .reviewCreate {
  /*  margin: 0 0 40px; */
}

article .rsWrapper .reviewCreate .review {
  width: auto;
}

article .rsWrapper .reviewCreate .review p {
  font-size: 16px;
  color: #0e0e1f;
  margin: 0 0 24px;
}

article .rsWrapper .reviewCreate .create {
  /* width: calc(100% - 224px - 180px); */
  /* padding: 0 40px; */
}

article .rsWrapper .reviewCreate .create p {
  font-size: 24px;
  font-weight: 600;
  color: #0e0e1f;
  margin: 0 0 12px;
  line-height: 1;
}

/* article .rsWrapper .reviewCreate .create div .input:focus */
article .rsWrapper .reviewCreate .create .input:has(textarea:focus) {
  border: 1px solid #b041f3;
  background: #ffffff;
}
article .rsWrapper .reviewCreate .create:has(textarea:focus) button {
  border: 1px solid transparent !important;
  background-image: linear-gradient(90deg, #b041f3 0%, #ec15ff 100%) !important;
  color: #fff;
}

article .rsWrapper .reviewCreate .create div .input {
  width: calc(100% - 73px - 12px);
  height: 48px;
  border-radius: 4px;
  background: #f4f5f7;
  padding: 12px;
  background: #f4f5f7;

  border: 1px solid #dfdce4;

  border: 1px solid var(--b-input, #dfdce4);
  box-shadow: none;
}

article .rsWrapper .reviewCreate .create div .input::placeholder {
  color: #a3a1a7;
}

article .rsWrapper .reviewCreate .create div #greyBtn {
  width: 73px;
  height: 48px;
  font-size: 14px;
  border-radius: 4px;
}

article .rsWrapper .reviewCreate .question {
  max-width: 224px;
}

article .rsWrapper .reviewCreate .question > p {
  font-size: 16px;
  font-weight: 600;
  color: #0e0e1f;
  margin: 0 0 12px;
}

article .rsWrapper .reviewCreate .question #darkGrey2:hover .hoverIcon {
  opacity: 1;
}

article .rsWrapper .reviewCreate .question #darkGrey2 .hoverIcon {
  opacity: 0;
  position: absolute;
  left: 39px;
}

article .rsWrapper .reviewCreate .question #darkGrey2 {
  width: 100%;
  height: 48px;
  border-radius: 50px;
  position: relative;
}
article .rsWrapper .reviewCreate .question #darkGrey2:hover {
  background: #525162;
  background: var(--bg-btnDark, #525162);
  color: #fff;
}

article .rsWrapper .reviewCreate .question #darkGrey2:hover .ques::before {
  background-image: url(../../static/media/i-quesW.2e994104de428244bab9.svg);
}

article .rsWrapper .reviewCreate .question #darkGrey2 img {
  width: 25px;
  margin: 0 10px 0 0;
}

article .rsWrapper .reviewCreate .question #darkGrey2 p {
  font-size: 13px;
  font-weight: 600;
}

.rsWrapper .reviewList .list {
  display: flex;
  padding: 12px 0 12px;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  align-self: stretch;
  gap: 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.rsWrapper .reviewList .list:last-child {
  border-bottom: none;
}
#reviewModal .listBox .listScroll .list p.content,
.reviewList .list .reviewContent p.content {
  line-height: 1.3;
  font-weight: 400;
  font-size: 13px;
  color: #0e0e1f;
}
/* .reviewContent .content, */
.reviewList .list > .content {
  padding-left: 8px;
}
.reviewList .list > .content {
  padding-bottom: 12px;
}
/* .rsWrapper .reviewList .list:has(+ .list.answer) {
  border: 0;
} */

.rsWrapper .reviewList .list.answer {
  display: flex;
  padding: 8px 0;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
  /* background: var(--bg-gray, #f3f3f3); */
}

.rsWrapper .reviewList .list .userReview {
  align-items: flex-start;
  gap: 12px;
  padding: 0 8px;
}

/* .rsWrapper .reviewList .list.answer .userReview {
  width: 50%;
  align-items: flex-start;
} */

.rsWrapper .reviewList .list .userReview > img {
  width: 32px;
  height: 32px;
  border-radius: 100%;
}

.rsWrapper .reviewList .list .userReview > div {
  width: 100%;
  /* padding: 0 32px; */
  gap: 4px;
}

.rsWrapper .reviewList .list .userReview > div .top {
  margin: 0;
}

.rsWrapper .reviewList .list .userReview > div .top div {
  width: auto;
  gap: 8px;
}
#reviewModal .listBox .listScroll .list .userReview > div .top .nickname,
.rsWrapper .reviewList .list .userReview > div .top div .nickname {
  font-size: 16px;
  color: #0e0e1f;
  /* border-bottom: 1px solid #0e0e1f; */
  /* text-decoration: underline; */
  font-weight: 600;
  line-height: 0.9;
  display: flex;
  align-items: center;
  gap: 8px;
}

.reviewList .list .userReview > div .top div p + span,
.reviewList .list .userReview > div .top span > img {
  /* font-size: 0; */
  width: 18px;
  height: 18px;
  display: flex;
}

#detail .top .rsWrapper .left,
#detail .top .rsWrapper .right {
  flex-direction: column;
}
#detail .top .rsWrapper .left .imgScroll div .activeSiren div {
  cursor: pointer;
}
#detail .top .rsWrapper .left .imgScroll div .thumbnail .ant-image {
  position: static;
}
#detail .top .rsWrapper .left .imgScroll div .thumbnail .ant-image img {
  left: 0;
  object-fit: contain;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}
/* #detail .top .rsWrapper .right .user {
  align-items: center;
  padding: 4px 0;
} */
#detail .top .rsWrapper .right .user .majorModel {
  width: 100%;
}
#detail .top .artistMvListInDetail {
  width: 100%;
  margin: 30px 0 0;
}
#detail .top .artistMvListInDetail .noResult {
  background-color: transparent;
  background-color: initial;
}

#detail .rsWrapper .reviewList .list .userReview > div .top #darkGreyBorder {
  width: 45px;
  height: 30px;
  font-size: 12px;
  border-radius: 24px;
}

#detail .rsWrapper .reviewList .list .userReview > div .rateBox {
  margin: 0;
}

#detail .rsWrapper .reviewList .list .userReview > div .rateBox .line {
  height: 18px;
  width: 1px;
  background: #d7d4db;
  margin: 0 12px;
}
#reviewModal .listBox .listScroll .list .userReview > div .rateBox p,
.reviewList .list .answer > div > div p,
.reviewList .list .userReview > div .rateBox p {
  font-size: 11px;
  color: #6d6c75;
  font-weight: 400;
}

#detail .rsWrapper .reviewList .list .userReview > div .content {
  font-size: 14px;
  color: #0e0e1f;
  line-height: 1.4;
}

#detail .rsWrapper .reviewList .list .userReview > div #darkGreyBorder.mobileBtn {
  display: none;
}

#detail .rsWrapper .reviewList .list .answer {
  padding: 10px 0 12px;
  flex-direction: column;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
  background: #f3f3f3;
  gap: 16px;
}
#detail .rsWrapper .reviewList .list > p + .answer:first-child {
  border: none;
}
#detail .rsWrapper .reviewList .list .answer > div {
  flex-direction: column;
  align-items: flex-start;
  padding-left: 8px;
}

#detail .rsWrapper .reviewList .list .answer .userInfoDate {
  width: auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

#detail .rsWrapper .reviewList .list .answer > div > div {
  text-wrap: nowrap;
}
#detail .rsWrapper .reviewList .list .answer > div > div h1 {
  text-wrap: nowrap;
}
/* #detail .rsWrapper .reviewList .list .answer > div > div p {
  font-size: 11px;
  color: #6d6c75;
} */

#detail .rsWrapper .reviewList .list .answer > div > p {
  font-size: 18px;
  color: #6d6c75;
}

#detail .rsWrapper .reviewList .list .answer .content {
  font-size: 14px;
  color: #0e0e1f;
  margin: 0;
  text-wrap-mode: wrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
}

#detail .rsWrapper .reviewList .list .answer .input {
  width: calc(100% - 73px - 12px);
  height: 48px;
  background: #f4f5f7;
  padding: 16px 12px;
  font-size: 13px;
  border: none;
  box-shadow: none;
}

#detail .rsWrapper .reviewList .list .answer #greyBtn {
  width: 73px;
  height: 48px;
  border-radius: 4px;
}

#detail .rsWrapper .allReview {
  margin: 0 0 56px;
  /*border-top: 1px solid rgba(0, 0, 0, 0.1);*/
  padding-top: 12px;
}

#detail .rsWrapper .allReview p {
  font-size: 14px;
  color: #fff;
  font-weight: bold;
  display: flex;
  padding: 12px 32px;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  border-radius: 24px;
  background: linear-gradient(90deg, #13d5df 0%, #f138fc 100%);
}
#detail .rsWrapper .allReview p::after {
  background: url(../../static/media/i-arrowCircleW.6649e16e1f8186e3658f.svg) no-repeat center;
  content: '';
  width: 18px;
  height: 18px;
}
#detail .rsWrapper .allReview p span {
  display: none;
}
#detail .rsWrapper .allReview p:hover {
  color: #fff;
  filter: opacity(0.9);
  box-shadow: 0px 1px 0 1px rgba(241, 56, 252, 0.2);
}

article .rsWrapper .promptBox {
  position: relative;
  margin: 0 0 30px;
}

article .rsWrapper .promptBox .line {
  position: absolute;
  top: 50%;
  left: 0;
  border: 1px dashed #c2b8cb;
  margin: -0.5px 0 0;
  width: 100%;
}

article .rsWrapper .promptBox > div {
  padding: 0 24px;
  background: #ffffff;
  z-index: 2;
  width: auto;
}

article .rsWrapper .promptBox > div img {
  width: 20px;
}

article .rsWrapper .promptBox > div p {
  font-size: 20px;
  margin: 0 12px;
  color: #3e3d53;
  font-weight: 700;
}

article .rsWrapper .promptBox > div #greyBtn {
  width: 22px;
  height: 22px;
  border-radius: 100%;
  font-size: 14px;
}

article .rsWrapper .slide {
  margin: 0 0 52px;
}

#reviewModal .reviewTitle {
  margin: 0;
  padding: 16px 0 12px;
  border-bottom: solid 1px rgba(0, 0, 0, 0.1);
}

#reviewModal .reviewTitle h1,
#reviewModal .reviewTitle p {
  font-size: 20px;
  color: #0e0e1f;
  line-height: 1;
}

#reviewModal .reviewTitle p {
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

#reviewModal .reviewTitle p:hover {
  color: #ec15ff;
}

#reviewModal .reviewBox {
  /* margin: 0 0 25px; */
  padding: 8px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

#reviewModal .reviewBox h2 {
  font-size: 16px;
  font-weight: bold;
  color: #0e0e1f;
  margin: 0 40px 0 0;
  line-height: 1;
}

#reviewModal .reviewBox h3 {
  color: #0e0e1f;
  font-size: 16px;
  margin: 0 5px 0 0;
}

#reviewModal .reviewBox p {
  font-size: 14px;
  color: #87858b;
  margin: 0 0 0 5px;
  border-bottom: 1px solid #87858b;
  line-height: 1;
}

#reviewModal .listBox {
  height: 500px;
  justify-content: flex-start;
  overflow: auto;
  gap: 16px;
  padding: 8px 4px 0 0;
}

#reviewModal .listBox .listScroll {
  gap: 8px;
}
#reviewModal .listBox .listScroll .list {
  flex-direction: column;
  flex-wrap: wrap;
  align-items: start;
  gap: 12px;
  padding: 8px 0 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
#reviewModal .listBox .listScroll .list > div {
  padding-left: 8px;
  padding-right: 8px;
  gap: 12px;
}
#reviewModal .listBox .listScroll .list > div.commentArea button {
  padding: 8px 24px;
}
#reviewModal .listBox .listScroll .list:last-child {
  border: none;
}
#reviewModal .listBox .listScroll .list .userReview {
  align-items: flex-start;
  flex-direction: row;
  gap: 12px;
}

#reviewModal .listBox .listScroll .list .userReview > img {
  width: 32px;
  height: 32px;
  border-radius: 100%;
  border: 1px solid rgba(0, 0, 0, 0.15);
}

#reviewModal .listBox .listScroll .list .userReview > div {
  width: 100%;
  padding: 0;
  gap: 4px;
}

#reviewModal .listBox .listScroll .list .userReview > div .top {
  /* margin: 0 0 13px; */
  gap: 12px;
  align-items: start;
}
.list .userReview > div .top .userInfoDate {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
}
.list .userReview > div .top .userInfoDate p.date {
  color: #6d6c75;
  font-size: 11px;
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
  border: none;
}
#reviewModal .listBox .listScroll .list .userReview > div .top .btnArea {
  gap: 4px;
  padding-right: 8px;
}
#reviewModal .listBox .listScroll .list .userReview > div .top .btnArea > button {
  display: flex;
  height: 30px;
  min-width: 48px;
  padding: 8px;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 4px;
  border: 1px solid #c4c3c7;
}
#reviewModal .listBox .listScroll .list .userReview > div .top .btnArea > button:before {
  height: 14px;
}
/* #reviewModal .listBox .listScroll .list .userReview > div .top p {
  font-size: 16px;
  color: #0e0e1f;
  line-height: 1;
} */
#reviewModal .listBox .listScroll .list .answer > p {
  font-size: 14px;
  color: #0e0e1f;
  margin: 4px 0 0;
}

#reviewModal .listBox .listScroll .list .userReview > div .top #greyBtn {
  width: 45px;
  height: 30px;
  font-size: 12px;
  border-radius: 24px;
}

#reviewModal .listBox .listScroll .list .userReview > div .rateBox {
  /* margin: 0 0 12px; */
}

#reviewModal .listBox .listScroll .list .userReview > div .rateBox .line {
  height: 18px;
  width: 1px;
  background: #d7d4db;
  margin: 0 12px;
}

/* #reviewModal .listBox .listScroll .list .userReview > div .rateBox p {
  color: var(--t-groupTitleD, #6d6c75);
  font-family: Pretendard;
  font-size: 11px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
} */

#reviewModal .listBox .listScroll .list .userReview > div .content {
  font-size: 14px;
  color: #0e0e1f;
  line-height: 1.4;
  gap: 4px;
}

#reviewModal .list .answer {
  padding: 14px 8px 12px;
  /* border-radius: 0 0 0 70px; */
  margin: 4px 0 0;
  background: #f3f3f3;
  gap: 12px;
}

#reviewModal .list .answer .userReview {
  align-items: flex-start;
  padding: 0;
}

#reviewModal .list .answer div h1 {
  font-size: 16px;
  color: #0e0e1f;
  margin: 0 8px 0 0;
}

.list .answer div p {
  font-size: 12px;
  color: #6d6c75;
  text-wrap: wrap;
  width: 100%;
}

#reviewModal .list .answer > p {
  font-size: 14px;
  color: #0e0e1f;
  margin: 16px 0 0;
}

#reviewModal .list .reviewContent {
  width: 100%;
}
#reviewModal .list .reviewContent:has(.editReviewForm) {
  background: #f3f3f3;
}
#reviewModal .list .reviewContent .editReviewForm {
  display: flex;
  padding: 8px;
  flex-direction: row;
  gap: 12px;
  width: 100%;
}
#reviewModal .list .reviewContent .editReviewForm div {
  width: min-content;
  gap: 12px;
}
#reviewModal .list .reviewContent .editReviewForm div button {
  font-size: 13px;
  padding: 8px 24px;
}

#reviewModal .reviewContents {
  margin-left: 45px;
}

.imageModal {
  height: 100vh;
  width: 100vw;
  background: rgba(0, 0, 0, 0.8);
  z-index: 1000;
  position: fixed;
  top: 0;
  left: 0;
  padding: 30px 8px;
}

.imageModal > div {
  position: relative;
  height: 100%;
}

.imageModal .pagination {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}

.imageModal .pagination h1 {
  font-size: 14px;
  color: #ffffff;
  margin: 0 42px 0 0;
}

.imageModal .pagination p {
  font-size: 24px;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.imageModal .pagination p:hover {
  color: #ec15ff;
}

.rhap_progress-bar-show-download {
  background: rgba(255, 255, 255, 0.5);
}

.rhap_progress-bar {
  height: 2px;
}

#musicBox .rhap_progress-section .rhap_progress-container .rhap_progress-indicator {
  /* height: 4px;
  top: -1px; */
}

#musicBox .rhap_controls-section {
  margin-top: 8px;
  height: 32px;
}
#musicBox .rhap_controls-section div {
  display: flex;
  align-items: center;
  height: 100%;
}
#musicBox .rhap_controls-section div button {
  height: 100%;
}
#musicBox .top .tavBox {
  background: rgba(255, 255, 255, 0.3);
}
#musicBox .listBox {
  background: rgba(255, 255, 255, 0.3);
  gap: 8px;
}

#musicBox .rhap_controls-section .rhap_main-controls .rhap_button-clear {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

#musicBox .rhap_controls-section .rhap_shuffle-controls .rhap_button-shuffle {
  padding: 8px 12px;
}

article .top .rsWrapper .right .mobileUser,
article .top .rsWrapper .right .mobilePrice,
article .rsWrapper .mobileQuestion,
article .rsWrapper .reviewList .list .userReview > div .top div img,
article .rsWrapper .reviewList .list .userReview > div .top div .mobileRate,
article .rsWrapper .reviewList .list .userReview > div .top > p,
article .rsWrapper .reviewList .list .mobileBtn,
article .top .rsWrapper .right .mobilePrice #purpleBtn {
  display: none;
}

/* 나중에 추가된 텍스트 프롬프트 돌아가기 버튼 */
article#detail .top .rsWrapper .right .orderFirst button {
  display: none;
}
article .top .rsWrapper .right .mobilePrice > h1 + div {
  justify-content: flex-end;
  width: 100%;
  gap: 12px;
}
@media (max-width: 1400px) {
  /* article .top .rsWrapper .right .priceBox #darkGrey,
  article .top .rsWrapper .right .priceBox #purpleBtn {
    width: 35%;
  } */

  article .top .rsWrapper .right .content .text {
    height: 210px;
  }
  article .top .rsWrapper .right .priceBox #darkGrey,
  article .top .rsWrapper .right .priceBox #purpleBtn {
    min-width: 160px;
  }
}

@media (max-width: 1280px) {
  article .top .rsWrapper .right .content .text {
    height: 130px;
  }
  #otherWrapper .rsWrapper .staff .staffList .staffBox,
  #otherWrapper .rsWrapper .newContents .staffList .staffBox {
    /* width: 49% !important; */
  }
}

@media (max-width: 900px) {
  article .top .rsWrapper .left,
  article .top .rsWrapper .right {
    width: 100%;
    min-width: 100%;
  }
  article .top .rsWrapper,
  article .rsWrapper .reviewList .list {
    flex-wrap: wrap;
  }
  #detail .rsWrapper .promptGuide {
    margin: 0 0 20px;
    padding: 0;
  }

  #detail .top .rsWrapper .left .imgScroll div .thumbnail .ant-image img article .rsWrapper .reviewList .list .userReview,
  article .rsWrapper .reviewList .list .answer {
    /* width: 100%; */
    /* margin: 0 0 30px; */
  }
  article .rsWrapper .tip {
    padding: 30px 8px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.2);
    min-height: 110px;
  }
  article .top .rsWrapper .left .imgBox div .thumbnail {
    margin: 0;
  }
  article .top .rsWrapper .left .play img {
    width: 20px;
    margin: 0 40px 0 0;
  }
  article .top .rsWrapper .left .imgScroll > div {
    width: 100%;
    gap: 3px;
  }
  article .top .rsWrapper .left #purpleBtn,
  article .top .rsWrapper .right .priceBox > h1,
  article .top .rsWrapper .right #greyBtn5,
  article .top .rsWrapper .right #logoutBtn,
  /* article .rsWrapper .reviewCreate .question, */
  article .rsWrapper .reviewCreate .review p,
  /* article .rsWrapper .reviewCreate .create p, */
  article .rsWrapper .reviewCreate .create div .input,
  article .rsWrapper .reviewList .list .userReview > div .top #greyBtn,
  article .rsWrapper .reviewList .list .userReview > div .rateBox {
    display: none;
  }

  article#detail .top .rsWrapper:not(.left) .right {
    padding-top: 0px;
  }

  article#detail .top .rsWrapper .right {
    gap: 12px;
    padding-top: 30px;
  }

  article#detail .top .rsWrapper .right > * {
    order: 2;
  }

  article#detail .top .rsWrapper .right > .siren {
    /* 신고버튼 */
    display: none;
  }

  article#detail .top .rsWrapper .right > h1 {
    margin: 0;
    font-size: 20px;
    line-height: 1.5;
    letter-spacing: 0;
    margin: 4px 0 0;
  }

  /* 유저정보 */
  article#detail .top .rsWrapper .right .user {
    order: 1;
    margin: 0;
  }

  article#detail .top .rsWrapper .right .user .userIcon {
    width: 48px;
    height: 48px;
    /* margin-top: 4px; */
  }

  article#detail .top .rsWrapper .right .user .grade {
    margin: 0;
  }

  article#detail .top .rsWrapper .right .user div .grade div {
    width: auto;
    padding: 3px 7px;
    font-size: 11px;
    margin: 0 8px 0 0;
  }

  article#detail .top .rsWrapper .right .user div h2 {
    font-size: 16px;
  }

  article#detail .top .rsWrapper .right .userInfo {
    flex-direction: row;
    align-items: center;
    margin: 0;
  }

  #detail .top .rsWrapper .right .genreInfo {
    order: 3;
  }

  article#detail .top .rsWrapper .right .content {
    order: 3;
    margin: 0 0 0 0;
    /* gap: 20px; */
    padding: 16px;
  }

  article .top .rsWrapper .right .priceBox {
    display: none;
  }

  article .top .rsWrapper .right .priceBox #darkGrey,
  article .top .rsWrapper .right .priceBox #purpleBtn {
    width: 49%;
  }

  article .top .rsWrapper .right .mobilePrice {
    display: flex;
    padding-bottom: 24px;
    flex-direction: column;
    gap: 10px;
  }
  article .top .rsWrapper .right .mobilePrice > h1 + div {
    justify-content: flex-end;
    width: 100%;
  }
  article .top .rsWrapper .right .mobilePrice > h1 + div .downloadBox {
    width: 100%;
    justify-content: flex-end;
    /* text-align: right; */
    display: flex;
  }
  article .top .rsWrapper .right .mobilePrice h1 {
    font-size: 26px;
    color: #0e0e1f;
    font-weight: 600;
    min-width: 50px;
    width: 100%;
  }
  #detail .top .artistMvListInDetail {
    margin: 20px 16px 0;
  }

  article .top .rsWrapper .right .mobilePrice .downloadBox button {
    display: flex;
    min-width: 95px;
    height: 42px;
    border-radius: 24px;
    display: flex;
    padding: 12px 16px;
    width: 100%;
  }
  article .top .rsWrapper .right .mobilePrice #purpleBtn {
    /* padding: 0 8px; */
  }
  #detail .majorModel {
    padding: 0 0;
  }
  #detail .top {
    margin: 0;
  }
  #detail .rsWrapper .reviewList .list .userReview > div .top {
    /* margin: 0 0 8px; */
  }
  article .rsWrapper .reviewCreate .create p {
    font-size: 20px;
  }
  #detail .top .rsWrapper .right .content .text {
    height: auto;
    min-height: 100px !important;
    gap: 20px;
  }
  article .top .rsWrapper .right .user > div {
    gap: 2px;
  }
  #detail .rsWrapper .reviewList .list .answer > div {
    /* margin: 0 0 16px; */
  }
  article .top .rsWrapper .right .mobilePrice #purpleBtn img {
    width: 16px;
    /* margin: 0 10px 0 0; */
  }
  #detail .rsWrapper .reviewList .list .userReview > div .content {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
  }
  article .top .rsWrapper .right .mobilePrice #purpleBtn p {
    font-size: 14px;
  }

  article .top .rsWrapper .right .content .typeBox .type {
    font-size: 12px;
    margin: 0 8px 8px 0;
  }
  #detail .rsWrapper .promptGuide h1,
  .promptVersion h1,
  article .rsWrapper .prompt h1 {
    margin: 10px 0;
    font-size: 20px;
  }
  article .top .rsWrapper {
    gap: 0;
  }
  article .rsWrapper {
    margin: 0;
    display: flex;
    flex-direction: column;
  }

  article .rsWrapper > p {
    font-size: 14px;
    font-weight: 600;
    color: #0e0e1f;
    margin: 0 0 20px;
  }

  #detail .rsWrapper .btnArea {
    padding: 30px 0 50px;
    gap: 12px;
  }
  #detail .rsWrapper .btnArea .approval {
    min-width: 120px;
  }
  article .rsWrapper #darkGrey2:hover .hoverIcon {
    opacity: 1;
  }

  /* article .rsWrapper #darkGrey2 .hoverIcon {
    opacity: 0;
    position: absolute;
    left: 41px;
  } */

  article .rsWrapper .reviewCreate .question #darkGrey2 {
    width: 100%;
    height: 48px;
    border-radius: 50px;
    position: relative;
  }
  article .rsWrapper .reviewCreate .question {
    max-width: 100%;
  }
  /* article .rsWrapper #darkGrey2 img {
    width: 25px;
    margin: 0 10px 0 0;
  } */

  article .rsWrapper .reviewCreate .question > p {
    font-size: 14px;
  }

  article .rsWrapper .reviewBox {
    justify-content: space-between;
    margin: 0 0 10px;
  }

  article .rsWrapper .reviewBox h1 {
    font-size: 20px;
  }

  article .rsWrapper .reviewCreate .create {
    width: 100%;
    padding: 0;
    padding-top: 20px;
  }

  article .rsWrapper .reviewCreate .create div {
    /* flex-wrap: wrap;
    justify-content: flex-end; */
    align-items: flex-start;
    gap: 12px;
  }

  #detail .rsWrapper .reviewCreate {
    flex-direction: column;
    align-items: flex-start;
    margin: 0;
    margin-bottom: 20px;
  }

  article .rsWrapper .reviewCreate .review {
    margin: 0 0 10px;
  }

  article .rsWrapper .reviewCreate .create div .mobileInput:focus {
    border: 1px solid #b041f3;
    background: #ffffff;
  }

  article .rsWrapper .reviewCreate .create div .mobileInput {
    display: flex;
    width: 100%;
    height: 48px;
    border-radius: 4px;
    background: #f4f5f7;
    padding: 12px 12px;
    background: #f4f5f7;
    box-shadow: none;
    margin: 0 0 10px;
  }

  article .rsWrapper .reviewCreate .create div .mobileInput::placeholder {
    color: #a3a1a7;
  }

  #detail .reviewList {
    margin-top: 20px;
  }

  #detail .rsWrapper .reviewList .list .userReview > div {
    /* width: 100%;
    padding: 4px 0 8px;
    gap: 8px; */
  }

  article .rsWrapper .reviewList .list .userReview > div .content {
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    white-space: nowrap;
  }
  #detail .rsWrapper .reviewList .list {
    width: 100%;
    /* border-radius: 20px; */
  }

  article .rsWrapper .reviewList .list .answer {
    /* border-radius: 30px 0 0 0; */
    padding: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin: 0;
  }

  article .rsWrapper .reviewList .list .answer .mobileInput {
    display: inline;
    display: initial;
    width: 100%;
    height: 130px;
    background: #f4f5f7;
    padding: 16px 12px;
    font-size: 13px;
    border: none;
    box-shadow: none;
    margin: 0 0 10px;
  }

  article .rsWrapper .reviewList .list .userReview > div .top div img,
  article .rsWrapper .reviewList .list .userReview > div .top div .mobileRate,
  article .rsWrapper .reviewList .list .userReview > div .top > p {
    display: inline;
    display: initial;
  }
  /*프로필 이미지*/
  .rsWrapper .reviewList .list .userReview > img {
    width: 20px;
    height: 20px;
  }
  article .top .rsWrapper .right .user > div .flexRowStart {
    /* height: 32px; */
  }
  article .rsWrapper .reviewList .list .userReview > div .top div img {
    /* width: 20px;
    height: 20px; */
    border-radius: 100%;
    /* margin: 0 10px 0 0; */
  }

  article .rsWrapper .reviewList .list .userReview > div .top > p {
    font-size: 12px;
    color: #6d6c75;
  }
  .rsWrapper .reviewList .list .userReview {
    gap: 8px;
  }
  #detail .rsWrapper .reviewList .list .userReview > div .top #darkGreyBorder {
    display: none;
  }

  #detail .rsWrapper .reviewList .list .userReview > div #darkGreyBorder.mobileBtn {
    display: flex;
    align-self: end;
    width: 45px;
    height: 30px;
    border-radius: 24px;
  }

  article .rsWrapper .reviewList .list .userReview {
    margin: 0;
  }

  article .rsWrapper .reviewList .list .mobileBtn {
    display: flex;
  }

  /*가격 없을 경우, 버튼 정렬*/
  article .top .rsWrapper .right .mobilePrice.flexRowBetween > div > .flexRowEnd,
  article .top .rsWrapper .right .mobilePrice.flexRowBetween > div {
    width: 100%;
    gap: 12px;
  }
  article .top .rsWrapper .right .mobilePrice.flexRowBetween > div > .flexRowEnd button {
    width: 100%;
    padding: 12px !important;
    border-radius: 24px !important;
    height: auto !important;
  }
  article .top .rsWrapper .right .mobilePrice.flexRowBetween > div > .flexRowEnd .downloadBox,
  article .top .rsWrapper .right .mobilePrice.flexRowBetween > div .downloadBox {
    width: 100%;
  }
  article .rsWrapper .reviewList .list .mobileBtn #greyBtn {
    width: 45px;
    height: 30px;
    font-size: 12px;
    border-radius: 24px;
    margin: 0 0 10px;
  }

  #detail .rsWrapper .allReview {
    /* align-items: flex-end; */
    margin: 0 0 30px;
  }
  article .top .rsWrapper .left .box16 {
    height: auto;
    margin-bottom: 30px;
  }

  article .top .rsWrapper .left .imgScroll {
    height: auto;
    overflow: visible;
  }

  article .top .rsWrapper .right .tip div h1,
  article .top .rsWrapper .right .tip div p {
    font-size: 12px;
  }

  article#detail .top .rsWrapper .right .orderFirst button {
    display: flex;
    padding: 0 4px;
  }

  .imageModal .pagination h1 {
    display: none;
  }

  .imageModal .pagination {
    padding: 0 16px;
  }

  .imageModal div > h1 {
    position: absolute;
    top: 200px;
    right: 16px;
    color: #ffffff;
    font-size: 14px;
    z-index: 10;
  }

  #reviewModal .reviewTitle {
    /* border-bottom: none; */
  }

  #reviewModal .reviewBox {
    flex-wrap: wrap;
  }

  #reviewModal .reviewBox h1 {
    font-size: 26px;
    font-weight: bold;
    color: #323146;
    margin: 0 0 5px;
  }

  #reviewModal .reviewBox h2 {
    width: 100%;
    margin: 0 0 10px;
    font-size: 20px;
  }

  #reviewModal .listBox .listScroll .list .userReview > div {
    /* width: 100%;
    padding: 14px 10px; */
  }

  #reviewModal .listBox .listScroll .list .userReview > div .content {
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    white-space: nowrap;
  }

  #reviewModal .listBox .listScroll .list {
    width: 100%;
    /* border-radius: 20px; 반응형 댓글 new disign 변경*/
  }

  #reviewModal .listBox .listScroll .list .answer {
    /* border-radius: 30px 0 0 0; */
    padding: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin: 0;
  }

  #reviewModal .listBox .listScroll .list .answer .mobileInput {
    display: inline;
    display: initial;
    width: 100%;
    height: 130px;
    background: #f4f5f7;
    padding: 16px 12px;
    font-size: 13px;
    border: none;
    box-shadow: none;
    margin: 0 0 10px;
  }

  #reviewModal .listBox .listScroll .list .userReview > div .top div {
    width: auto;
  }

  #reviewModal .listBox .listScroll .list .userReview > div .top div img,
  #reviewModal .listBox .listScroll .list .userReview > div .top div .mobileRate,
  #reviewModal .listBox .listScroll .list .userReview > div .top > p {
    display: inline;
    display: initial;
  }

  #reviewModal .listBox .listScroll .list .userReview > div .top div img {
    width: 30px;
    height: 30px;
    border-radius: 100%;
    margin: 0 10px 0 0;
  }

  #reviewModal .listBox .listScroll .list .userReview > div .top div p {
    /* font-size: 14px;
    margin: 0 8px 0 0;
    border-bottom: 1px solid #0e0e1f; */
  }

  #reviewModal .listBox .listScroll .list .userReview > div .top > p {
    font-size: 12px;
    color: #6d6c75;
  }

  #reviewModal .listBox .listScroll .list .userReview {
    /* margin: 0; */
  }

  #reviewModal .listBox .listScroll .list .mobileBtn {
    display: flex;
  }

  #reviewModal .listBox .listScroll .list .mobileBtn #greyBtn {
    width: 45px;
    height: 30px;
    font-size: 12px;
    border-radius: 24px;
    margin: 0 0 10px;
  }

  article .top .rsWrapper .left .user > img {
    display: inline-block;
    width: 24px;
    height: 24px;
  }
  article > .top {
    padding: 20px 0 16px;
  }
  /*댓글 */
  .ant-modal-root .ant-modal-body:has(#reviewModal) {
    padding: 0 24px 16px;
  }
  #detail .rsWrapper .reviewList .list.answer {
    /* width: 100%;
    padding: 12px;
    border-radius: 20px;
    background: rgba(62, 61, 93, 0.1);
    align-items: flex-end;
    margin: 0 0 12px;
    flex-direction: column; */
  }
  #detail .rsWrapper .reviewList .list .answer {
    width: 100%;
    align-items: flex-start;
    /* border-radius: 30px 0 0 0; */
    padding: 8px 0;
  }

  #detail .rsWrapper .reviewList .list.answer .userReview {
    width: 100%;
    align-items: flex-start;
    padding: 0 8px;
    /* border-radius: 30px 0 0 0; */
  }
  #detail .rsWrapper .reviewList .list .answer > div > div h1 {
    font-size: 14px;
  }
  #detail .promptThumList.forceWidth {
    gap: 0;
    padding-bottom: 16px;
  }
  .slick-slider {
    margin: 0 !important;
  }
  #listWrapper #otherWrapper #populerPromptSlider {
    width: 1518px;
    padding: 20px 16px 0;
  }
  .forceWidth #listWrapper #otherWrapper #populerPromptSlider {
    padding: 20px 0 0;
  }

  #otherWrapper .rsWrapper .newContents .staffList .staffBox {
    margin: 0 !important;
  }
  #otherWrapper .rsWrapper .staff .staffList,
  #otherWrapper .rsWrapper .newContents .staffList {
    justify-content: space-between;
    row-gap: 12px;
  }

  #otherWrapper .rsWrapper .staff .staffList .staffBox,
  #otherWrapper .rsWrapper .newContents .staffList .staffBox {
    width: 49% !important;
  }
}
/* 판매현황 모바일 뱃지 */
@media (max-width: 700px) {
  #otherWrapper .rsWrapper .newContents .staffList .approval,
  #otherWrapper .rsWrapper .newContents .staffList .badge-cate {
    min-width: 0;
    height: fit-content;
    padding: 3px 6px;
    font-size: 10px;
    white-space: nowrap;
    flex: none;
  }

  /* 바뀐 리뷰 모달 */
  #reviewModal .btn-del {
    border: none !important;
  }
  #reviewModal .btn-del:hover {
    background-color: transparent !important;
    background-color: initial !important;
  }
  #reviewModal .reviewContents {
    margin-left: 24px;
  }
}

@media (max-width: 500px) {
  .ant-modal.reviewPop {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    min-width: 100%;
    margin: 0;
  }
  .ant-modal.reviewPop .ant-modal-content {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    border-radius: 0;
  }
  .ant-modal-root .ant-modal-body:has(#reviewModal) {
    padding: 0 16px 16px;
  }
  .ant-modal.reviewPop .ant-modal-content #reviewModal .listBox .listScroll .list .userReview > img {
    width: 20px;
    height: 20px;
    border-radius: 100%;
    /* margin: 0 10px 0 0; */
  }
  #reviewModal .listBox .listScroll .list .userReview > div .top .userInfoDate {
    gap: 4px;
  }

  #reviewModal .listBox .listScroll .list .userReview > div .top .btnArea {
    gap: 8px;
  }

  #reviewModal .listBox .listScroll .list .userReview > div .top .btnArea > button {
    height: 22px;
  }
  #reviewModal .listBox .listScroll .list .userReview > div .top .btnArea > button.btn-edit,
  #reviewModal .listBox .listScroll .list .userReview > div .top .btnArea > button.btn-del {
    font-size: 0;
    width: min-content;
    padding: 2px;
    min-width: 0;
    min-width: initial;
    gap: 0;
  }
  #reviewModal .listBox .listScroll .list .reviewContent .editReviewForm div button,
  #reviewModal .listBox .listScroll .list > div.commentArea button {
    font-size: 13px;
    padding: 8px 12px;
  }
  #reviewModal .listBox {
    height: calc(100dvh - 56px);
    width: calc(100vw - 24px);
    padding-bottom: 80px;
  }

  #reviewModal .listBox .listScroll .list .userReview > div .top .nickname,
  .rsWrapper .reviewList .list .userReview > div .top div .nickname {
    font-size: 14px;
  }
  #reviewModal .listBox .listScroll .list p.content,
  .reviewList .list .reviewContent p.content {
    font-size: 12px;
  }
  #reviewModal .listBox .listScroll .list .userReview {
    gap: 4px;
  }
  .rsWrapper .reviewList .list {
    gap: 8px;
  }
}

#otherWrapper > .rsWrapper .content {
  /* gap: 16px; */
}

#otherWrapper > .rsWrapper > div:first-child {
  position: relative;
  padding: 20px 0 0;
  align-items: flex-start;
}
.promptList #otherWrapper > .rsWrapper > div:first-child {
  padding: 20px 0 0;
}
.promptList #otherWrapper > .rsWrapper > div:first-child.noResult {
  padding: 20px 0 0;
  margin-bottom: 40px;
  min-height: 120px;
  display: flex;
  align-items: center;
}
#otherWrapper > .rsWrapper > div.top {
  padding: 20px 0 0;
  max-width: 1520px;
}

#otherWrapper .filter#filter .listBox {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
}
/* #otherWrapper */
#otherWrapper .rsWrapper .staff .staffList,
#otherWrapper .rsWrapper .newContents .staffList {
  flex-wrap: wrap;
  min-height: 200px; /* 400 일 경우 최신 프롬프트가 없는경우 공백이 있으므로 최소값으로 1줄 200px로 노출*/
  align-items: start;
}

.promptList #otherWrapper .rsWrapper .newContents .staffList {
  min-height: 280px;
}

#detail .promptList #otherWrapper .rsWrapper .newContents .staffList {
  min-height: 182px;
}
/* RADIO */

.ant-radio-wrapper span.ant-radio + * {
  padding: 0 8px;
  line-height: 1;
}
.antdCont .ant-radio-wrapper span.ant-radio + * {
  padding-inline-start: unset;
  padding-inline-end: unset;
}
.antdCont .ant-radio {
  margin-right: 8px;
}

.ant-radio-wrapper span {
  text-wrap-mode: nowrap;
}

/* LIST */

#otherWrapper #listWrapper .rsWrapper {
  padding: 16px 0 40px;
}
/* #otherWrapper > .rsWrapper .content {
  gap: 16px;
} */
#otherWrapper .rsWrapper > div .content > .titleBox {
  margin: 0 0 12px;
}

.rsWrapper > div .content .titleBox > h1 {
  font-size: 32px;
  font-weight: bold;
  color: #0e0e1f;
}

#otherWrapper .rsWrapper > div .content .titleBox > h1 br {
  display: none;
}

#otherWrapper .rsWrapper > div .content > .titleBox > img {
  display: none;
}

/* #otherWrapper .rsWrapper > div .content .titleBox .search {
  width: 400px;
  height: 48px;
  background: #f4f5f7;
  padding: 8px 12px;
  gap: 12px;
} */

#otherWrapper .rsWrapper > div .content .titleBox .search img {
  width: 18px;
  /* margin: 0 13px 0 0; */
  height: auto;
}

#otherWrapper .rsWrapper > div .content .titleBox .search input {
  border: none;
  background: none;
  width: calc(100% - 18px);
  box-shadow: none;
}
#otherWrapper .rsWrapper > div .content .titleBox .search input::before {
  display: none;
}
#otherWrapper .rsWrapper > div .content .titleBox .search input::placeholder {
  font-size: 13px;
  color: #a3a1a7;
}

#otherWrapper .rsWrapper > div .content .searchBox div {
  width: auto;
}

#otherWrapper .rsWrapper > div .content .searchBox div #pinkBtn2 {
  min-width: 80px;
  height: 33px;
  font-size: 14px;
  border-radius: 24px;
  margin: 0 4px 0 0;
}

#otherWrapper .rsWrapper > div .content .searchBox div #pinkBtn2.active {
  color: #ffffff;
  background: linear-gradient(to right, #ca79fc 0%, #ff5eb6 100%);
  border: none;
}

#otherWrapper .rsWrapper > div .content .searchBox div div {
  margin: 0 0 0 8px;
}

#otherWrapper .rsWrapper > div .content .searchBox div #pinkBtn {
  width: 120px;
  height: 40px;
  border-radius: 4px;
}

#otherWrapper .rsWrapper > div .content .searchBox div #pinkBtn div img {
  width: 18px;
  margin: 0 13px 0 0;
}

#otherWrapper .rsWrapper > div .content .searchBox div #pinkBtn p,
#otherWrapper .rsWrapper > div .content .searchBox div #whiteBtn p {
  font-size: 14px;
}

.content .searchBox div #whiteBtn {
  width: auto;
  height: 40px;
  padding: 0 12px;
  border-radius: 4px;
}

.content .searchBox div #whiteBtn img {
  width: 14px;
  margin: 0 13px 0 0;
}

#otherWrapper .rsWrapper > div .content .searchBox {
  padding: 12px 0;
  border-bottom: 2px solid #464548;
}

#otherWrapper .rsWrapper .staff .staffList .staffBox:nth-child(3n),
#otherWrapper .rsWrapper .newContents .staffList .staffBox:nth-child(3n),
#otherWrapper .rsWrapper .staff .staffList .staffBox,
#otherWrapper .rsWrapper .newContents .staffList .staffBox {
  width: calc(100% / 6 - 8px);
  /* margin: 0 9px 20px 0; */
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  border: 4px solid transparent;
  transition: 0.2s;
}

#otherWrapper .rsWrapper .staff .staffList .staffBox:nth-child(6n),
#otherWrapper .rsWrapper .newContents .staffList .staffBox:nth-child(6n) {
  /* margin: 0 0 20px 0; */
}
#otherWrapper .rsWrapper > div .content .listBox {
  flex-wrap: wrap;
  min-height: 400px;
  align-content: flex-start;
}

#otherWrapper .rsWrapper > div .content .listBox .list:hover,
#otherWrapper .rsWrapper > div .content .listBox .list:hover .absoluteBox {
  padding: 4px;
  box-shadow: 0 2px 13px #b041f3;
}

#otherWrapper .rsWrapper > div .content .listBox .list {
  width: calc(100% / 6 - 8px);
  height: 168px;
  /* margin: 0 9px 20px 0; */
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  background: linear-gradient(to right, #b041f3 0%, #ec15ff 100%);
}

#otherWrapper .rsWrapper > div .content .listBox .list:nth-child(6n) {
  margin: 0 0 20px;
}

#otherWrapper .rsWrapper > div .content .listBox .list img {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  object-fit: cover;
}

#otherWrapper .rsWrapper > div .content .listBox .list .absoluteBox {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  transition: all 0.2s ease-in-out;
}

#otherWrapper .rsWrapper > div .content .listBox .list .absoluteBox .user {
  padding: 8px;
}

#otherWrapper .rsWrapper > div .content .listBox .list .absoluteBox .user img {
  width: 20px;
  height: 20px;
  border-radius: 100%;
  margin: 0 8px 0 0;
}

#otherWrapper .rsWrapper > div .content .listBox .list .absoluteBox .user p {
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
}

#otherWrapper .rsWrapper > div .content .listBox .list .absoluteBox div .title {
  padding: 12px 8px;
  margin-top: 0;
  border-radius: 0 0 5px 5px;
  background: #e6e6e6;
  height: 40px;
}

#otherWrapper .rsWrapper > div .content .listBox .list .absoluteBox div .title h1 {
  width: 80%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* font-size: 16px;
  font-weight: 400; */
  text-shadow: none;
  color: #0e0e1f;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.26px;
}

#otherWrapper .rsWrapper > div .content .listBox .list .absoluteBox div .title p {
  font-size: 13px;
  color: #0e0e1f;
  font-weight: 600;
}

#otherWrapper .rsWrapper > div .content .listBox .list .absoluteBox div > img {
  margin: 10px;
  width: 32px;
}
#otherWrapper.rsWrapper .newContents .staffList .staffBox .absoluteBox div .greyBox {
  background: #e2e2e2;
}

/*filter*/
.filter .rsWrapper .listBox {
  margin: 0;
  min-height: 36px;
  /* padding: 4px 0;  고도화 간격 줄임*/
}

.filter {
  background: #f3f3f3;
  padding: 16px 0 8px;
  /* border-bottom: 1px solid rgba(0, 0, 0, 0.15); */
  /* box-shadow:  inset 1px, 1px, 1px rgba(0, 0, 0, 0.15); */
}
.profileSection .filter,
.filter:has(.selectArea) {
  padding-bottom: 16px;
}

.filter .rsWrapper {
  max-width: 1552px;
  padding: 0 16px;
  width: 100%;
}
#otherWrapper .filter .rsWrapper {
  max-width: 1518px;
  padding: 0 16px;
}

.filter .rsWrapper .listBox .title {
  min-width: 156px;
  gap: 16px;
  /* margin: 0; */
  margin-top: 6px;
  width: auto;
}
.filter .rsWrapper .listBox .selectArea {
  display: flex;
  flex-direction: row;
  gap: 12px;
}
#musicWrapper .filter .listBox:has(.selectArea) .title {
  margin-top: 12px;
}
#otherWrapper .filter .rsWrapper .title h2 img {
  margin-right: 16px;
}
.filter .listBox .ant-radio-group {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  width: calc(100% - 196px);
  justify-content: flex-start;
  gap: 8px 15px;
  margin: 4px 0 0;
}
.filter .listBox .ant-radio-group label {
  display: flex;
  flex-direction: row;
  min-width: 125px;
  line-height: 1;
  align-items: center;
  margin-inline: 0;
}
/* .filter .listBox {
  display: none;
}   마이페이지 홈 필더 안보임*/

.filter .rsWrapper .title h2 {
  font-size: 16px;
  font-weight: 600;
  color: #0e0e1f;
  margin: 0;
  text-wrap-mode: nowrap;
  gap: 16px;
}

.filter .rsWrapper .title img {
  width: 14px;
}

.filter .rsWrapper .reset #whiteBtn {
  width: 89px;
  height: 34px;
  border-radius: 24px;
  font-size: 14px;
  margin: 8px 0 0;
}

.filter .rsWrapper .reset #whiteBtn img {
  width: 18px;
}

.filter .rsWrapper .reset #greyBtn2 {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  font-size: 14px;
  color: #e94cf7;
}

.filter .rsWrapper .reset #greyBtn4 {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  font-size: 14px;
}
/* .filter .rsWrapper {
  gap: 8px;
} */

#myHome .filter .rsWrapper .listBox .title h2 {
  font-size: 16px;
}

#myHome .filter .rsWrapper .listBox .title img {
  width: 16px;
}

#myHome .filter .rsWrapper .listBox .title p {
  font-size: 16px;
  font-weight: 600;
  color: #0e0e1f;
  margin: 0 0 0 20px;
}

/* #otherWrapper .filter {
  background: #f3f3f3;
  padding: 20px 0;
} */

#otherWrapper .filter .rsWrapper .listBox .ant-radio-group {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  font-weight: 500;
  font-size: 14px;
  margin-top: 3px;
}
#otherWrapper .filter .rsWrapper .listBox:nth-child(4) {
  border-bottom: none;
}

#otherWrapper .filter .rsWrapper .listBox .checkBox {
  margin: 0 0 16px;
}

#otherWrapper .filter .rsWrapper .listBox .checkBox .check {
  width: 20px;
  height: 20px;
  margin: 0 12px 0 0;
}

#otherWrapper .filter .rsWrapper .listBox .checkBox p {
  font-size: 14px;
  color: #000000;
}
.rsWrapper > div .content .filterGroup #pinkBtn2,
.rsWrapper > div .content .searchBox div #pinkBtn2 {
  display: inline-block;
  min-width: 80px;
  height: 33px;
  border-radius: 24px;
  padding: 0 10px;
  margin: 0 4px 0 0;
  font-size: 14px;
  line-height: 33px;
  text-align: center;
}

/* 모바일필터 */
#mobileFilter > div:first-child > p {
  width: 20px;
  height: 20px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwBAMAAAClLOS0AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAASUExURUdwTAAAAAAAAAAAAAAAAAAAAFZgiOcAAAAFdFJOUwBgX5/ffhjBrwAAAKtJREFUOMt1lMkVgCAMBUMR3C1CK/DZgEr/rQiIyPLHW8IfDNlsXUx87rJwqgN/mw8CcVHuFJLVAnnFAinaCfmkE1KVA/ILB6TRdUgr65BO1Rj9vY01RFLNMfZqT68tjjk/xSMyml2qBtknqxadsmgJkUBCdGNERAN8QFfhzylcfCClBJNIacdCUWmxGah9sOGoRbGpaQxwcGjUcDhpnHEB4Mo49JIJtum1tD/T6DbbeF1PlgAAAABJRU5ErkJggg==) no-repeat center;
  background-size: contain;
  font-size: 0px;
  margin: 0 0 38px;
}

#mobileFilter .content h1 {
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 5px;
  color: #323146;
}

#mobileFilter .content h2 {
  font-size: 20px;
  color: #323146;
  margin: 0 0 30px;
}

#mobileFilter .content .searchBox {
  height: 41px;
  border-bottom: 1px solid #87858b;
  padding: 12px 10px;
  margin: 0 0 20px;
}

.ant-drawer-body .ant-input-outlined {
  background: transparent;
}
#mobileFilter .content .searchBox:has(input:focus) {
  border-bottom: 2px solid #c718e2;
}
#mobileFilter .content .searchBox input:focus {
  color: #000;
}

#mobileFilter .content .searchBox input {
  color: #000;
  font-size: 16px;
  font-weight: 600;
}

#mobileFilter .content .searchBox {
  padding: 12px 0;
}
#mobileFilter .content .searchBox input {
  width: calc(100% - 13px);
  border: none;
  padding: 0;
  box-shadow: none;
}
#mobileFilter .content .searchBox input.ant-input-outlined {
  background: inherit;
}
#mobileFilter .content .searchBox img {
  width: 16px;
}

#mobileFilter .content .listBox {
  border-bottom: 1px solid #dbdbe0;
}

#mobileFilter .content .listBox:last-child {
  border-bottom: none;
}

#mobileFilter .content .listBox:last-child {
}

#mobileFilter .content .listBox h3 {
  font-size: 18px;
  color: #323146;
  margin: 20px 0 16px;
}

#mobileFilter .content .listBox > div,
#mobileFilter .content .listBox .ant-radio-group {
  margin: 0 0 20px;
  flex-wrap: wrap;
}

#mobileFilter .content .listBox div .list {
  width: auto;
  padding: 8px;
  border-radius: 16px;
  margin: 0 8px 6px 0;
  border: 1px solid #d6d6d6;
  font-size: 12px;
}
#mobileFilter .content .listBox .ant-radio-group .ant-radio-wrapper {
  padding: 6px 8px;
  margin: 0;
  border-radius: 16px;
  border: 1px solid #d6d6d6;
  font-size: 12px;
}

#mobileFilter .content .listBox div .list#active,
#mobileFilter .content .listBox .ant-radio-group .ant-radio-wrapper:has(.ant-radio-checked) {
  border: solid 1px #e94cf7;
  color: #e94cf7;
}

#mobileFilter .content .listBox .ant-radio-group .ant-radio-wrapper span {
  padding: 0;
}

#mobileFilter .content .listBox .ant-radio-group .ant-radio-wrapper .ant-radio > * {
  display: none;
}

#mobileFilter .content .listBox div .list#active p {
  color: #e94cf7;
}

#mobileFilter .content .listBox div .list#active .round {
  background: #e94cf7;
}

#mobileFilter .content .listBox div .list#active .round img {
  width: 6px;
  display: flex;
}

#mobileFilter .content .listBox div .list .round img {
  display: none;
}

#mobileFilter .content .listBox div .list img {
  display: none;
}

#mobileFilter .content .listBox div .list .round,
#mobileFilter .content .listBox .ant-radio-group .ant-radio-wrapper .ant-radio {
  width: 12px;
  height: 12px;
  border-radius: 100%;
  background: #d6d6d6;
  margin: 0 6px 0 0;
}

#mobileFilter .content .listBox .ant-radio-group .ant-radio-wrapper:has(.ant-radio-checked) .ant-radio {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAALBAMAAABSacpvAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAhUExURUdwTP///////////////////////////////////////48EzvsAAAAKdFJOUwDP3xAg7zCkcI99d5PtAAAAOElEQVQI12NgAANmBihwUoDQLFoCUIGFBlABYQYGjglQAdblEAEGtqgCqIrU5WABkBBUC0MqWAAAcAoJZaXcmycAAAAASUVORK5CYII=) no-repeat center #e94cf7;
  background-size: 6px;
}

#mobileFilter .content .listBox div .list p {
  font-size: 12px;
  color: #222;
}

#mobileFilter .btnBox {
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 30px 20px;
  background: #ffffff;
  gap: 8px;
}

#mobileFilter .btnBox #logoutBtn,
#mobileFilter .btnBox #pinkBtn {
  width: 100%;
  height: 40px;
  border-radius: 4px;
}

#mobileFilter .btnBox #logoutBtn img {
  width: 20px;
  margin: 0 10px 0 0;
}

#mobileFilter .btnBox #pinkBtn p {
  font-size: 14px;
  color: #0e0e1f;
}

#mobileFixedBox {
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: calc(100% - 40px);
  padding: 10px 15px;
  box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.25);
  border: solid 1px #f4f5f7;
  background-color: #ffffff;
  z-index: 100;
  border-radius: 30px;
  display: none;
}

#mobileFixedBox .select {
  width: auto;
  padding: 11px 14px;
  background-color: #f4f5f7;
  border-radius: 40px;
}

#mobileFixedBox .select p {
  font-size: 14px;
}

#mobileFixedBox .select span {
  color: #e94cf7;
  font-weight: 700;
}

#mobileFixedBox > div {
  width: auto;
}

#mobileFixedBox > div img {
  width: 20px;
  margin: 0 0 0 30px;
}

/** tab */
#otherWrapper > div .tab {
  padding: 4px 16px 14px;
  border-bottom: solid 2px #000;
  gap: 4px;
}

#otherWrapper > div .tab #pinkBtn2 {
  width: 150px;
  height: 41px;
  border-radius: 24px;
  font-size: 14px;
  margin: 0 2px;
}

/** 내 마켓플레이스 */
#otherWrapper.promptList > .rsWrapper > div.bottom {
  padding-top: 0px;
}

#otherWrapper.promptList > .rsWrapper > div.top {
  padding-bottom: 0px;
}

#otherWrapper.promptList > .rsWrapper > .bottom .content.sales .listBox .list {
  height: 224px;
}

#otherWrapper.promptList > .rsWrapper > .bottom .content.sales .listBox .list .absoluteBox div .title {
  height: 66px;
  width: 100%;
  padding: 8px;
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}

#otherWrapper.promptList > .rsWrapper > .bottom .content.sales .listBox .list .absoluteBox div .title > div {
  padding: 4px 0;
}

#otherWrapper.promptList > .rsWrapper > .bottom .content.sales .listBox .list .absoluteBox div .title > div:first-child h1,
#otherWrapper.promptList > .rsWrapper > .bottom .content.sales .listBox .list .absoluteBox div .title > div:first-child p {
  font-size: 13px;
  font-weight: 600;
}

#otherWrapper.promptList > .rsWrapper > .bottom .content.sales .listBox .list .absoluteBox div .title .icon {
  width: 12px;
  height: 12px;
}

#otherWrapper.promptList > .rsWrapper > .bottom .content.sales .listBox .list .absoluteBox div .title .info img {
  width: 18px;
  margin: 0;
}

#otherWrapper.promptList > .rsWrapper > .bottom .content.sales .listBox .list .absoluteBox div .title .info p {
  padding-left: 4px;
  font-size: 12px;
}

#otherWrapper.promptList > .rsWrapper > .bottom .content.sales .listBox .list .absoluteBox div .title .info #pinkBtn2 {
  height: 22px;
  flex-grow: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 4px 8px;
  border-radius: 50px;
}

#otherWrapper .thumSearch > div {
  max-width: 1568px;
  padding: 0 16px;
}
/* #listWrapper .rsWrapper .newContents .staffList .staffBox .absoluteBox div .greyBox {
  padding: 12px 0;
} */

.form .info-area .content .box.third .half {
  gap: 12px;
}

.form .info-area .content .box.third .half .ant-input-number {
  width: calc(100% - 40px);
  margin-right: 8px;
}

@media (max-width: 1280px) {
  #otherWrapper .rsWrapper > div .content .listBox .list {
    width: calc(100% / 4 - 10px);
    height: 220px;
  }

  #otherWrapper .rsWrapper > div .content .listBox .list:nth-child(6n) {
    margin: 0 9px 20px 0;
  }

  #otherWrapper .rsWrapper > div .content .listBox .list:nth-child(4n) {
    margin: 0 0 20px;
  }
  #otherWrapper #listWrapper .rsWrapper {
    padding: 16px;
  }
  .form .info-area .content .box.third {
    width: calc(100% / 2 - 27px);
    gap: 20px;
  }

  #detail .promptList#listWrapper .rsWrapper .staff .staffList,
  #detail .promptList#listWrapper .rsWrapper .newContents .staffList {
    display: flex;
    gap: 20px 0.7%;
    flex-wrap: wrap;
  }
}

@media (max-width: 1100px) {
  #detail .promptList#listWrapper .rsWrapper .staff .staffList,
  #detail .promptList#listWrapper .rsWrapper .newContents .staffList {
    display: flex;
    gap: 20px 0.97%;
    flex-wrap: wrap;
  }
}
@media (max-width: 900px) {
  #otherWrapper .rsWrapper > div .content .titleBox > h1 br {
    display: inline;
    display: initial;
  }

  #otherWrapper .rsWrapper > div .content .titleBox > h1 span {
    font-size: 20px;
  }
  #otherWrapper #listWrapper .rsWrapper > div .listBox .staffBox,
  #otherWrapper .rsWrapper > div .content .listBox .list {
    width: calc(100% / 2 - 10px);
    height: 220px;
  }
  #otherWrapper #listWrapper .rsWrapper > div .listBox .staffBox {
    height: auto;
  }
  #otherWrapper #listWrapper .rsWrapper > div .listBox .staffBox:nth-child(6n),
  #otherWrapper #listWrapper .rsWrapper > div .listBox .staffBox:nth-child(4n),
  #otherWrapper .rsWrapper > div .content .listBox .list:nth-child(6n),
  #otherWrapper .rsWrapper > div .content .listBox .list:nth-child(4n) {
    margin: 0 20px 20px 0;
  }

  #otherWrapper #listWrapper .rsWrapper > div .listBox .staffBox:nth-child(2n),
  #otherWrapper .rsWrapper > div .content .listBox .list:nth-child(2n) {
    margin: 0 0 20px;
  }
  .form .info-area .content .box.third {
    width: 100%;
    gap: 20px;
  }
  .filter .listBox .ant-radio-group {
    width: 100%;
    gap: 8px 12px;
  }
  .promptList #otherWrapper .rsWrapper .newContents .staffList {
    justify-content: space-between;
  }

  #otherWrapper .rsWrapper .staff .staffList .staffBox:nth-child(3n),
  #otherWrapper .rsWrapper .newContents .staffList .staffBox:nth-child(3n),
  #otherWrapper .rsWrapper .staff .staffList .staffBox,
  #otherWrapper .rsWrapper .newContents .staffList .staffBox {
    width: calc(100% / 6 - 4px);
  }
}

@media (max-width: 800px) {
  #otherWrapper .filter,
  #otherWrapper .rsWrapper > div .content .titleBox .search,
  #otherWrapper .rsWrapper > div .content .titleBox .search + button.noneM,
  #otherWrapper .rsWrapper > div .content .searchBox > div:nth-child(2) {
    display: none;
  }

  #otherWrapper .rsWrapper > div .content .listBox .list .btn.mobile {
    display: flex;
  }

  #otherWrapper .rsWrapper > div .content > .titleBox,
  #otherWrapper .rsWrapper > div .content .searchBox {
    margin: 0 0 30px;
    align-items: flex-start;
  }
  .rsWrapper > div .content .titleBox > h1 {
    font-size: 20px;
    line-height: 1.2;
  }
  #otherWrapper .rsWrapper > div .content .titleBox > h1 span {
    display: block;
    font-size: 26px;
  }
  #otherWrapper .rsWrapper > div .content > .titleBox > img {
    display: inline;
    display: initial;
    width: 20px;
  }

  #otherWrapper .rsWrapper > div .content .searchBox > div {
    width: 100%;
    justify-content: space-between;
  }

  #mobileFixedBox {
    display: flex;
  }

  #otherWrapper .rsWrapper > div .content .listBox .list {
    width: calc(100% / 2 - 10px);
    height: 184px;
  }

  #otherWrapper .rsWrapper > div .content .listBox .list .absoluteBox div .title {
    flex-direction: column;
    align-items: flex-end;
  }

  #otherWrapper .rsWrapper > div .content .listBox .list .absoluteBox div .title h1 {
    width: 100%;
    font-size: 13px;
    margin: 0 0 5px;
  }

  #otherWrapper .rsWrapper > div .content .listBox .list .absoluteBox div .title p {
    font-size: 16px;
  }

  /* 마켓플레이스 가격 */
  #otherWrapper #listWrapper .rsWrapper > div .listBox .staffBox .greyBox {
    align-items: start;
  }
  #otherWrapper #listWrapper .rsWrapper > div .listBox .staffBox .greyBox > div > div {
    flex-direction: column;
  }
  #otherWrapper #listWrapper .rsWrapper > div .listBox .staffBox .greyBox > div > div p {
    width: 100%;
    text-align: right;
  }
  /* filter */
  .filter .listBox .ant-radio-group label {
    min-width: auto;
  }
  .filter .rsWrapper {
    padding: 0;
  }
  #otherWrapper .thumSearch > div {
    padding: 0;
  }
  #otherWrapper > .rsWrapper .content .titleBox .flexSearchBox:has(+ img) .btn-reset {
    display: none;
  }
  .promptList #otherWrapper > .rsWrapper > div:first-child.noResult {
    margin-bottom: 0;
  }
}

/*!
 * Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 * Copyright 2023 Fonticons, Inc.
 */
.fa{font-family:"Font Awesome 6 Free";font-family:var(--fa-style-family,"Font Awesome 6 Free");font-weight:900;font-weight:var(--fa-style,900)}.fa,.fa-brands,.fa-classic,.fa-regular,.fa-sharp,.fa-solid,.fab,.far,.fas{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;display:var(--fa-display,inline-block);font-style:normal;font-feature-settings:normal;font-variant:normal;line-height:1;text-rendering:auto}.fa-classic,.fa-regular,.fa-solid,.far,.fas{font-family:"Font Awesome 6 Free"}.fa-brands,.fab{font-family:"Font Awesome 6 Brands"}.fa-1x{font-size:1em}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-6x{font-size:6em}.fa-7x{font-size:7em}.fa-8x{font-size:8em}.fa-9x{font-size:9em}.fa-10x{font-size:10em}.fa-2xs{font-size:.625em;line-height:.1em;vertical-align:.225em}.fa-xs{font-size:.75em;line-height:.08333em;vertical-align:.125em}.fa-sm{font-size:.875em;line-height:.07143em;vertical-align:.05357em}.fa-lg{font-size:1.25em;line-height:.05em;vertical-align:-.075em}.fa-xl{font-size:1.5em;line-height:.04167em;vertical-align:-.125em}.fa-2xl{font-size:2em;line-height:.03125em;vertical-align:-.1875em}.fa-fw{text-align:center;width:1.25em}.fa-ul{list-style-type:none;margin-left:2.5em;margin-left:var(--fa-li-margin,2.5em);padding-left:0}.fa-ul>li{position:relative}.fa-li{left:calc(2em*-1);left:calc(var(--fa-li-width, 2em)*-1);position:absolute;text-align:center;width:2em;width:var(--fa-li-width,2em);line-height:inherit}.fa-border{border-radius:.1em;border-radius:var(--fa-border-radius,.1em);border:.08em solid #eee;border:var(--fa-border-width,.08em) var(--fa-border-style,solid) var(--fa-border-color,#eee);padding:.2em .25em .15em;padding:var(--fa-border-padding,.2em .25em .15em)}.fa-pull-left{float:left;margin-right:.3em;margin-right:var(--fa-pull-margin,.3em)}.fa-pull-right{float:right;margin-left:.3em;margin-left:var(--fa-pull-margin,.3em)}.fa-beat{animation-name:fa-beat;animation-delay:0s;animation-delay:var(--fa-animation-delay,0s);animation-direction:normal;animation-direction:var(--fa-animation-direction,normal);animation-duration:1s;animation-duration:var(--fa-animation-duration,1s);animation-iteration-count:infinite;animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:ease-in-out;animation-timing-function:var(--fa-animation-timing,ease-in-out)}.fa-bounce{animation-name:fa-bounce;animation-delay:0s;animation-delay:var(--fa-animation-delay,0s);animation-direction:normal;animation-direction:var(--fa-animation-direction,normal);animation-duration:1s;animation-duration:var(--fa-animation-duration,1s);animation-iteration-count:infinite;animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:cubic-bezier(.28,.84,.42,1);animation-timing-function:var(--fa-animation-timing,cubic-bezier(.28,.84,.42,1))}.fa-fade{animation-name:fa-fade;animation-iteration-count:infinite;animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:cubic-bezier(.4,0,.6,1);animation-timing-function:var(--fa-animation-timing,cubic-bezier(.4,0,.6,1))}.fa-beat-fade,.fa-fade{animation-delay:0s;animation-delay:var(--fa-animation-delay,0s);animation-direction:normal;animation-direction:var(--fa-animation-direction,normal);animation-duration:1s;animation-duration:var(--fa-animation-duration,1s)}.fa-beat-fade{animation-name:fa-beat-fade;animation-iteration-count:infinite;animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:cubic-bezier(.4,0,.6,1);animation-timing-function:var(--fa-animation-timing,cubic-bezier(.4,0,.6,1))}.fa-flip{animation-name:fa-flip;animation-delay:0s;animation-delay:var(--fa-animation-delay,0s);animation-direction:normal;animation-direction:var(--fa-animation-direction,normal);animation-duration:1s;animation-duration:var(--fa-animation-duration,1s);animation-iteration-count:infinite;animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:ease-in-out;animation-timing-function:var(--fa-animation-timing,ease-in-out)}.fa-shake{animation-name:fa-shake;animation-duration:1s;animation-duration:var(--fa-animation-duration,1s);animation-iteration-count:infinite;animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:linear;animation-timing-function:var(--fa-animation-timing,linear)}.fa-shake,.fa-spin{animation-delay:0s;animation-delay:var(--fa-animation-delay,0s);animation-direction:normal;animation-direction:var(--fa-animation-direction,normal)}.fa-spin{animation-name:fa-spin;animation-duration:2s;animation-duration:var(--fa-animation-duration,2s);animation-iteration-count:infinite;animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:linear;animation-timing-function:var(--fa-animation-timing,linear)}.fa-spin-reverse{--fa-animation-direction:reverse}.fa-pulse,.fa-spin-pulse{animation-name:fa-spin;animation-direction:normal;animation-direction:var(--fa-animation-direction,normal);animation-duration:1s;animation-duration:var(--fa-animation-duration,1s);animation-iteration-count:infinite;animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:steps(8);animation-timing-function:var(--fa-animation-timing,steps(8))}@media (prefers-reduced-motion:reduce){.fa-beat,.fa-beat-fade,.fa-bounce,.fa-fade,.fa-flip,.fa-pulse,.fa-shake,.fa-spin,.fa-spin-pulse{animation-delay:-1ms;animation-duration:1ms;animation-iteration-count:1;transition-delay:0s;transition-duration:0s}}@keyframes fa-beat{0%,90%{transform:scale(1)}45%{transform:scale(1.25);transform:scale(var(--fa-beat-scale,1.25))}}@keyframes fa-bounce{0%{transform:scale(1) translateY(0)}10%{transform:scale(1.1,.9) translateY(0);transform:scale(var(--fa-bounce-start-scale-x,1.1),var(--fa-bounce-start-scale-y,.9)) translateY(0)}30%{transform:scale(.9,1.1) translateY(-.5em);transform:scale(var(--fa-bounce-jump-scale-x,.9),var(--fa-bounce-jump-scale-y,1.1)) translateY(var(--fa-bounce-height,-.5em))}50%{transform:scale(1.05,.95) translateY(0);transform:scale(var(--fa-bounce-land-scale-x,1.05),var(--fa-bounce-land-scale-y,.95)) translateY(0)}57%{transform:scale(1) translateY(-.125em);transform:scale(1) translateY(var(--fa-bounce-rebound,-.125em))}64%{transform:scale(1) translateY(0)}to{transform:scale(1) translateY(0)}}@keyframes fa-fade{50%{opacity:.4;opacity:var(--fa-fade-opacity,.4)}}@keyframes fa-beat-fade{0%,to{opacity:.4;opacity:var(--fa-beat-fade-opacity,.4);transform:scale(1)}50%{opacity:1;transform:scale(1.125);transform:scale(var(--fa-beat-fade-scale,1.125))}}@keyframes fa-flip{50%{transform:rotate3d(0,1,0,-180deg);transform:rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),var(--fa-flip-angle,-180deg))}}@keyframes fa-shake{0%{transform:rotate(-15deg)}4%{transform:rotate(15deg)}8%,24%{transform:rotate(-18deg)}12%,28%{transform:rotate(18deg)}16%{transform:rotate(-22deg)}20%{transform:rotate(22deg)}32%{transform:rotate(-12deg)}36%{transform:rotate(12deg)}40%,to{transform:rotate(0deg)}}@keyframes fa-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.fa-rotate-90{transform:rotate(90deg)}.fa-rotate-180{transform:rotate(180deg)}.fa-rotate-270{transform:rotate(270deg)}.fa-flip-horizontal{transform:scaleX(-1)}.fa-flip-vertical{transform:scaleY(-1)}.fa-flip-both,.fa-flip-horizontal.fa-flip-vertical{transform:scale(-1)}.fa-rotate-by{transform:rotate(none);transform:rotate(var(--fa-rotate-angle,none))}.fa-stack{display:inline-block;height:2em;line-height:2em;position:relative;vertical-align:middle;width:2.5em}.fa-stack-1x,.fa-stack-2x{left:0;position:absolute;text-align:center;width:100%;z-index:auto;z-index:var(--fa-stack-z-index,auto)}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:#fff;color:var(--fa-inverse,#fff)}

.fa-0:before{content:"\30"}.fa-1:before{content:"\31"}.fa-2:before{content:"\32"}.fa-3:before{content:"\33"}.fa-4:before{content:"\34"}.fa-5:before{content:"\35"}.fa-6:before{content:"\36"}.fa-7:before{content:"\37"}.fa-8:before{content:"\38"}.fa-9:before{content:"\39"}.fa-fill-drip:before{content:"\f576"}.fa-arrows-to-circle:before{content:"\e4bd"}.fa-chevron-circle-right:before,.fa-circle-chevron-right:before{content:"\f138"}.fa-at:before{content:"\40"}.fa-trash-alt:before,.fa-trash-can:before{content:"\f2ed"}.fa-text-height:before{content:"\f034"}.fa-user-times:before,.fa-user-xmark:before{content:"\f235"}.fa-stethoscope:before{content:"\f0f1"}.fa-comment-alt:before,.fa-message:before{content:"\f27a"}.fa-info:before{content:"\f129"}.fa-compress-alt:before,.fa-down-left-and-up-right-to-center:before{content:"\f422"}.fa-explosion:before{content:"\e4e9"}.fa-file-alt:before,.fa-file-lines:before,.fa-file-text:before{content:"\f15c"}.fa-wave-square:before{content:"\f83e"}.fa-ring:before{content:"\f70b"}.fa-building-un:before{content:"\e4d9"}.fa-dice-three:before{content:"\f527"}.fa-calendar-alt:before,.fa-calendar-days:before{content:"\f073"}.fa-anchor-circle-check:before{content:"\e4aa"}.fa-building-circle-arrow-right:before{content:"\e4d1"}.fa-volleyball-ball:before,.fa-volleyball:before{content:"\f45f"}.fa-arrows-up-to-line:before{content:"\e4c2"}.fa-sort-desc:before,.fa-sort-down:before{content:"\f0dd"}.fa-circle-minus:before,.fa-minus-circle:before{content:"\f056"}.fa-door-open:before{content:"\f52b"}.fa-right-from-bracket:before,.fa-sign-out-alt:before{content:"\f2f5"}.fa-atom:before{content:"\f5d2"}.fa-soap:before{content:"\e06e"}.fa-heart-music-camera-bolt:before,.fa-icons:before{content:"\f86d"}.fa-microphone-alt-slash:before,.fa-microphone-lines-slash:before{content:"\f539"}.fa-bridge-circle-check:before{content:"\e4c9"}.fa-pump-medical:before{content:"\e06a"}.fa-fingerprint:before{content:"\f577"}.fa-hand-point-right:before{content:"\f0a4"}.fa-magnifying-glass-location:before,.fa-search-location:before{content:"\f689"}.fa-forward-step:before,.fa-step-forward:before{content:"\f051"}.fa-face-smile-beam:before,.fa-smile-beam:before{content:"\f5b8"}.fa-flag-checkered:before{content:"\f11e"}.fa-football-ball:before,.fa-football:before{content:"\f44e"}.fa-school-circle-exclamation:before{content:"\e56c"}.fa-crop:before{content:"\f125"}.fa-angle-double-down:before,.fa-angles-down:before{content:"\f103"}.fa-users-rectangle:before{content:"\e594"}.fa-people-roof:before{content:"\e537"}.fa-people-line:before{content:"\e534"}.fa-beer-mug-empty:before,.fa-beer:before{content:"\f0fc"}.fa-diagram-predecessor:before{content:"\e477"}.fa-arrow-up-long:before,.fa-long-arrow-up:before{content:"\f176"}.fa-burn:before,.fa-fire-flame-simple:before{content:"\f46a"}.fa-male:before,.fa-person:before{content:"\f183"}.fa-laptop:before{content:"\f109"}.fa-file-csv:before{content:"\f6dd"}.fa-menorah:before{content:"\f676"}.fa-truck-plane:before{content:"\e58f"}.fa-record-vinyl:before{content:"\f8d9"}.fa-face-grin-stars:before,.fa-grin-stars:before{content:"\f587"}.fa-bong:before{content:"\f55c"}.fa-pastafarianism:before,.fa-spaghetti-monster-flying:before{content:"\f67b"}.fa-arrow-down-up-across-line:before{content:"\e4af"}.fa-spoon:before,.fa-utensil-spoon:before{content:"\f2e5"}.fa-jar-wheat:before{content:"\e517"}.fa-envelopes-bulk:before,.fa-mail-bulk:before{content:"\f674"}.fa-file-circle-exclamation:before{content:"\e4eb"}.fa-circle-h:before,.fa-hospital-symbol:before{content:"\f47e"}.fa-pager:before{content:"\f815"}.fa-address-book:before,.fa-contact-book:before{content:"\f2b9"}.fa-strikethrough:before{content:"\f0cc"}.fa-k:before{content:"\4b"}.fa-landmark-flag:before{content:"\e51c"}.fa-pencil-alt:before,.fa-pencil:before{content:"\f303"}.fa-backward:before{content:"\f04a"}.fa-caret-right:before{content:"\f0da"}.fa-comments:before{content:"\f086"}.fa-file-clipboard:before,.fa-paste:before{content:"\f0ea"}.fa-code-pull-request:before{content:"\e13c"}.fa-clipboard-list:before{content:"\f46d"}.fa-truck-loading:before,.fa-truck-ramp-box:before{content:"\f4de"}.fa-user-check:before{content:"\f4fc"}.fa-vial-virus:before{content:"\e597"}.fa-sheet-plastic:before{content:"\e571"}.fa-blog:before{content:"\f781"}.fa-user-ninja:before{content:"\f504"}.fa-person-arrow-up-from-line:before{content:"\e539"}.fa-scroll-torah:before,.fa-torah:before{content:"\f6a0"}.fa-broom-ball:before,.fa-quidditch-broom-ball:before,.fa-quidditch:before{content:"\f458"}.fa-toggle-off:before{content:"\f204"}.fa-archive:before,.fa-box-archive:before{content:"\f187"}.fa-person-drowning:before{content:"\e545"}.fa-arrow-down-9-1:before,.fa-sort-numeric-desc:before,.fa-sort-numeric-down-alt:before{content:"\f886"}.fa-face-grin-tongue-squint:before,.fa-grin-tongue-squint:before{content:"\f58a"}.fa-spray-can:before{content:"\f5bd"}.fa-truck-monster:before{content:"\f63b"}.fa-w:before{content:"\57"}.fa-earth-africa:before,.fa-globe-africa:before{content:"\f57c"}.fa-rainbow:before{content:"\f75b"}.fa-circle-notch:before{content:"\f1ce"}.fa-tablet-alt:before,.fa-tablet-screen-button:before{content:"\f3fa"}.fa-paw:before{content:"\f1b0"}.fa-cloud:before{content:"\f0c2"}.fa-trowel-bricks:before{content:"\e58a"}.fa-face-flushed:before,.fa-flushed:before{content:"\f579"}.fa-hospital-user:before{content:"\f80d"}.fa-tent-arrow-left-right:before{content:"\e57f"}.fa-gavel:before,.fa-legal:before{content:"\f0e3"}.fa-binoculars:before{content:"\f1e5"}.fa-microphone-slash:before{content:"\f131"}.fa-box-tissue:before{content:"\e05b"}.fa-motorcycle:before{content:"\f21c"}.fa-bell-concierge:before,.fa-concierge-bell:before{content:"\f562"}.fa-pen-ruler:before,.fa-pencil-ruler:before{content:"\f5ae"}.fa-people-arrows-left-right:before,.fa-people-arrows:before{content:"\e068"}.fa-mars-and-venus-burst:before{content:"\e523"}.fa-caret-square-right:before,.fa-square-caret-right:before{content:"\f152"}.fa-cut:before,.fa-scissors:before{content:"\f0c4"}.fa-sun-plant-wilt:before{content:"\e57a"}.fa-toilets-portable:before{content:"\e584"}.fa-hockey-puck:before{content:"\f453"}.fa-table:before{content:"\f0ce"}.fa-magnifying-glass-arrow-right:before{content:"\e521"}.fa-digital-tachograph:before,.fa-tachograph-digital:before{content:"\f566"}.fa-users-slash:before{content:"\e073"}.fa-clover:before{content:"\e139"}.fa-mail-reply:before,.fa-reply:before{content:"\f3e5"}.fa-star-and-crescent:before{content:"\f699"}.fa-house-fire:before{content:"\e50c"}.fa-minus-square:before,.fa-square-minus:before{content:"\f146"}.fa-helicopter:before{content:"\f533"}.fa-compass:before{content:"\f14e"}.fa-caret-square-down:before,.fa-square-caret-down:before{content:"\f150"}.fa-file-circle-question:before{content:"\e4ef"}.fa-laptop-code:before{content:"\f5fc"}.fa-swatchbook:before{content:"\f5c3"}.fa-prescription-bottle:before{content:"\f485"}.fa-bars:before,.fa-navicon:before{content:"\f0c9"}.fa-people-group:before{content:"\e533"}.fa-hourglass-3:before,.fa-hourglass-end:before{content:"\f253"}.fa-heart-broken:before,.fa-heart-crack:before{content:"\f7a9"}.fa-external-link-square-alt:before,.fa-square-up-right:before{content:"\f360"}.fa-face-kiss-beam:before,.fa-kiss-beam:before{content:"\f597"}.fa-film:before{content:"\f008"}.fa-ruler-horizontal:before{content:"\f547"}.fa-people-robbery:before{content:"\e536"}.fa-lightbulb:before{content:"\f0eb"}.fa-caret-left:before{content:"\f0d9"}.fa-circle-exclamation:before,.fa-exclamation-circle:before{content:"\f06a"}.fa-school-circle-xmark:before{content:"\e56d"}.fa-arrow-right-from-bracket:before,.fa-sign-out:before{content:"\f08b"}.fa-chevron-circle-down:before,.fa-circle-chevron-down:before{content:"\f13a"}.fa-unlock-alt:before,.fa-unlock-keyhole:before{content:"\f13e"}.fa-cloud-showers-heavy:before{content:"\f740"}.fa-headphones-alt:before,.fa-headphones-simple:before{content:"\f58f"}.fa-sitemap:before{content:"\f0e8"}.fa-circle-dollar-to-slot:before,.fa-donate:before{content:"\f4b9"}.fa-memory:before{content:"\f538"}.fa-road-spikes:before{content:"\e568"}.fa-fire-burner:before{content:"\e4f1"}.fa-flag:before{content:"\f024"}.fa-hanukiah:before{content:"\f6e6"}.fa-feather:before{content:"\f52d"}.fa-volume-down:before,.fa-volume-low:before{content:"\f027"}.fa-comment-slash:before{content:"\f4b3"}.fa-cloud-sun-rain:before{content:"\f743"}.fa-compress:before{content:"\f066"}.fa-wheat-alt:before,.fa-wheat-awn:before{content:"\e2cd"}.fa-ankh:before{content:"\f644"}.fa-hands-holding-child:before{content:"\e4fa"}.fa-asterisk:before{content:"\2a"}.fa-check-square:before,.fa-square-check:before{content:"\f14a"}.fa-peseta-sign:before{content:"\e221"}.fa-header:before,.fa-heading:before{content:"\f1dc"}.fa-ghost:before{content:"\f6e2"}.fa-list-squares:before,.fa-list:before{content:"\f03a"}.fa-phone-square-alt:before,.fa-square-phone-flip:before{content:"\f87b"}.fa-cart-plus:before{content:"\f217"}.fa-gamepad:before{content:"\f11b"}.fa-circle-dot:before,.fa-dot-circle:before{content:"\f192"}.fa-dizzy:before,.fa-face-dizzy:before{content:"\f567"}.fa-egg:before{content:"\f7fb"}.fa-house-medical-circle-xmark:before{content:"\e513"}.fa-campground:before{content:"\f6bb"}.fa-folder-plus:before{content:"\f65e"}.fa-futbol-ball:before,.fa-futbol:before,.fa-soccer-ball:before{content:"\f1e3"}.fa-paint-brush:before,.fa-paintbrush:before{content:"\f1fc"}.fa-lock:before{content:"\f023"}.fa-gas-pump:before{content:"\f52f"}.fa-hot-tub-person:before,.fa-hot-tub:before{content:"\f593"}.fa-map-location:before,.fa-map-marked:before{content:"\f59f"}.fa-house-flood-water:before{content:"\e50e"}.fa-tree:before{content:"\f1bb"}.fa-bridge-lock:before{content:"\e4cc"}.fa-sack-dollar:before{content:"\f81d"}.fa-edit:before,.fa-pen-to-square:before{content:"\f044"}.fa-car-side:before{content:"\f5e4"}.fa-share-alt:before,.fa-share-nodes:before{content:"\f1e0"}.fa-heart-circle-minus:before{content:"\e4ff"}.fa-hourglass-2:before,.fa-hourglass-half:before{content:"\f252"}.fa-microscope:before{content:"\f610"}.fa-sink:before{content:"\e06d"}.fa-bag-shopping:before,.fa-shopping-bag:before{content:"\f290"}.fa-arrow-down-z-a:before,.fa-sort-alpha-desc:before,.fa-sort-alpha-down-alt:before{content:"\f881"}.fa-mitten:before{content:"\f7b5"}.fa-person-rays:before{content:"\e54d"}.fa-users:before{content:"\f0c0"}.fa-eye-slash:before{content:"\f070"}.fa-flask-vial:before{content:"\e4f3"}.fa-hand-paper:before,.fa-hand:before{content:"\f256"}.fa-om:before{content:"\f679"}.fa-worm:before{content:"\e599"}.fa-house-circle-xmark:before{content:"\e50b"}.fa-plug:before{content:"\f1e6"}.fa-chevron-up:before{content:"\f077"}.fa-hand-spock:before{content:"\f259"}.fa-stopwatch:before{content:"\f2f2"}.fa-face-kiss:before,.fa-kiss:before{content:"\f596"}.fa-bridge-circle-xmark:before{content:"\e4cb"}.fa-face-grin-tongue:before,.fa-grin-tongue:before{content:"\f589"}.fa-chess-bishop:before{content:"\f43a"}.fa-face-grin-wink:before,.fa-grin-wink:before{content:"\f58c"}.fa-deaf:before,.fa-deafness:before,.fa-ear-deaf:before,.fa-hard-of-hearing:before{content:"\f2a4"}.fa-road-circle-check:before{content:"\e564"}.fa-dice-five:before{content:"\f523"}.fa-rss-square:before,.fa-square-rss:before{content:"\f143"}.fa-land-mine-on:before{content:"\e51b"}.fa-i-cursor:before{content:"\f246"}.fa-stamp:before{content:"\f5bf"}.fa-stairs:before{content:"\e289"}.fa-i:before{content:"\49"}.fa-hryvnia-sign:before,.fa-hryvnia:before{content:"\f6f2"}.fa-pills:before{content:"\f484"}.fa-face-grin-wide:before,.fa-grin-alt:before{content:"\f581"}.fa-tooth:before{content:"\f5c9"}.fa-v:before{content:"\56"}.fa-bangladeshi-taka-sign:before{content:"\e2e6"}.fa-bicycle:before{content:"\f206"}.fa-rod-asclepius:before,.fa-rod-snake:before,.fa-staff-aesculapius:before,.fa-staff-snake:before{content:"\e579"}.fa-head-side-cough-slash:before{content:"\e062"}.fa-ambulance:before,.fa-truck-medical:before{content:"\f0f9"}.fa-wheat-awn-circle-exclamation:before{content:"\e598"}.fa-snowman:before{content:"\f7d0"}.fa-mortar-pestle:before{content:"\f5a7"}.fa-road-barrier:before{content:"\e562"}.fa-school:before{content:"\f549"}.fa-igloo:before{content:"\f7ae"}.fa-joint:before{content:"\f595"}.fa-angle-right:before{content:"\f105"}.fa-horse:before{content:"\f6f0"}.fa-q:before{content:"\51"}.fa-g:before{content:"\47"}.fa-notes-medical:before{content:"\f481"}.fa-temperature-2:before,.fa-temperature-half:before,.fa-thermometer-2:before,.fa-thermometer-half:before{content:"\f2c9"}.fa-dong-sign:before{content:"\e169"}.fa-capsules:before{content:"\f46b"}.fa-poo-bolt:before,.fa-poo-storm:before{content:"\f75a"}.fa-face-frown-open:before,.fa-frown-open:before{content:"\f57a"}.fa-hand-point-up:before{content:"\f0a6"}.fa-money-bill:before{content:"\f0d6"}.fa-bookmark:before{content:"\f02e"}.fa-align-justify:before{content:"\f039"}.fa-umbrella-beach:before{content:"\f5ca"}.fa-helmet-un:before{content:"\e503"}.fa-bullseye:before{content:"\f140"}.fa-bacon:before{content:"\f7e5"}.fa-hand-point-down:before{content:"\f0a7"}.fa-arrow-up-from-bracket:before{content:"\e09a"}.fa-folder-blank:before,.fa-folder:before{content:"\f07b"}.fa-file-medical-alt:before,.fa-file-waveform:before{content:"\f478"}.fa-radiation:before{content:"\f7b9"}.fa-chart-simple:before{content:"\e473"}.fa-mars-stroke:before{content:"\f229"}.fa-vial:before{content:"\f492"}.fa-dashboard:before,.fa-gauge-med:before,.fa-gauge:before,.fa-tachometer-alt-average:before{content:"\f624"}.fa-magic-wand-sparkles:before,.fa-wand-magic-sparkles:before{content:"\e2ca"}.fa-e:before{content:"\45"}.fa-pen-alt:before,.fa-pen-clip:before{content:"\f305"}.fa-bridge-circle-exclamation:before{content:"\e4ca"}.fa-user:before{content:"\f007"}.fa-school-circle-check:before{content:"\e56b"}.fa-dumpster:before{content:"\f793"}.fa-shuttle-van:before,.fa-van-shuttle:before{content:"\f5b6"}.fa-building-user:before{content:"\e4da"}.fa-caret-square-left:before,.fa-square-caret-left:before{content:"\f191"}.fa-highlighter:before{content:"\f591"}.fa-key:before{content:"\f084"}.fa-bullhorn:before{content:"\f0a1"}.fa-globe:before{content:"\f0ac"}.fa-synagogue:before{content:"\f69b"}.fa-person-half-dress:before{content:"\e548"}.fa-road-bridge:before{content:"\e563"}.fa-location-arrow:before{content:"\f124"}.fa-c:before{content:"\43"}.fa-tablet-button:before{content:"\f10a"}.fa-building-lock:before{content:"\e4d6"}.fa-pizza-slice:before{content:"\f818"}.fa-money-bill-wave:before{content:"\f53a"}.fa-area-chart:before,.fa-chart-area:before{content:"\f1fe"}.fa-house-flag:before{content:"\e50d"}.fa-person-circle-minus:before{content:"\e540"}.fa-ban:before,.fa-cancel:before{content:"\f05e"}.fa-camera-rotate:before{content:"\e0d8"}.fa-air-freshener:before,.fa-spray-can-sparkles:before{content:"\f5d0"}.fa-star:before{content:"\f005"}.fa-repeat:before{content:"\f363"}.fa-cross:before{content:"\f654"}.fa-box:before{content:"\f466"}.fa-venus-mars:before{content:"\f228"}.fa-arrow-pointer:before,.fa-mouse-pointer:before{content:"\f245"}.fa-expand-arrows-alt:before,.fa-maximize:before{content:"\f31e"}.fa-charging-station:before{content:"\f5e7"}.fa-shapes:before,.fa-triangle-circle-square:before{content:"\f61f"}.fa-random:before,.fa-shuffle:before{content:"\f074"}.fa-person-running:before,.fa-running:before{content:"\f70c"}.fa-mobile-retro:before{content:"\e527"}.fa-grip-lines-vertical:before{content:"\f7a5"}.fa-spider:before{content:"\f717"}.fa-hands-bound:before{content:"\e4f9"}.fa-file-invoice-dollar:before{content:"\f571"}.fa-plane-circle-exclamation:before{content:"\e556"}.fa-x-ray:before{content:"\f497"}.fa-spell-check:before{content:"\f891"}.fa-slash:before{content:"\f715"}.fa-computer-mouse:before,.fa-mouse:before{content:"\f8cc"}.fa-arrow-right-to-bracket:before,.fa-sign-in:before{content:"\f090"}.fa-shop-slash:before,.fa-store-alt-slash:before{content:"\e070"}.fa-server:before{content:"\f233"}.fa-virus-covid-slash:before{content:"\e4a9"}.fa-shop-lock:before{content:"\e4a5"}.fa-hourglass-1:before,.fa-hourglass-start:before{content:"\f251"}.fa-blender-phone:before{content:"\f6b6"}.fa-building-wheat:before{content:"\e4db"}.fa-person-breastfeeding:before{content:"\e53a"}.fa-right-to-bracket:before,.fa-sign-in-alt:before{content:"\f2f6"}.fa-venus:before{content:"\f221"}.fa-passport:before{content:"\f5ab"}.fa-heart-pulse:before,.fa-heartbeat:before{content:"\f21e"}.fa-people-carry-box:before,.fa-people-carry:before{content:"\f4ce"}.fa-temperature-high:before{content:"\f769"}.fa-microchip:before{content:"\f2db"}.fa-crown:before{content:"\f521"}.fa-weight-hanging:before{content:"\f5cd"}.fa-xmarks-lines:before{content:"\e59a"}.fa-file-prescription:before{content:"\f572"}.fa-weight-scale:before,.fa-weight:before{content:"\f496"}.fa-user-friends:before,.fa-user-group:before{content:"\f500"}.fa-arrow-up-a-z:before,.fa-sort-alpha-up:before{content:"\f15e"}.fa-chess-knight:before{content:"\f441"}.fa-face-laugh-squint:before,.fa-laugh-squint:before{content:"\f59b"}.fa-wheelchair:before{content:"\f193"}.fa-arrow-circle-up:before,.fa-circle-arrow-up:before{content:"\f0aa"}.fa-toggle-on:before{content:"\f205"}.fa-person-walking:before,.fa-walking:before{content:"\f554"}.fa-l:before{content:"\4c"}.fa-fire:before{content:"\f06d"}.fa-bed-pulse:before,.fa-procedures:before{content:"\f487"}.fa-shuttle-space:before,.fa-space-shuttle:before{content:"\f197"}.fa-face-laugh:before,.fa-laugh:before{content:"\f599"}.fa-folder-open:before{content:"\f07c"}.fa-heart-circle-plus:before{content:"\e500"}.fa-code-fork:before{content:"\e13b"}.fa-city:before{content:"\f64f"}.fa-microphone-alt:before,.fa-microphone-lines:before{content:"\f3c9"}.fa-pepper-hot:before{content:"\f816"}.fa-unlock:before{content:"\f09c"}.fa-colon-sign:before{content:"\e140"}.fa-headset:before{content:"\f590"}.fa-store-slash:before{content:"\e071"}.fa-road-circle-xmark:before{content:"\e566"}.fa-user-minus:before{content:"\f503"}.fa-mars-stroke-up:before,.fa-mars-stroke-v:before{content:"\f22a"}.fa-champagne-glasses:before,.fa-glass-cheers:before{content:"\f79f"}.fa-clipboard:before{content:"\f328"}.fa-house-circle-exclamation:before{content:"\e50a"}.fa-file-arrow-up:before,.fa-file-upload:before{content:"\f574"}.fa-wifi-3:before,.fa-wifi-strong:before,.fa-wifi:before{content:"\f1eb"}.fa-bath:before,.fa-bathtub:before{content:"\f2cd"}.fa-underline:before{content:"\f0cd"}.fa-user-edit:before,.fa-user-pen:before{content:"\f4ff"}.fa-signature:before{content:"\f5b7"}.fa-stroopwafel:before{content:"\f551"}.fa-bold:before{content:"\f032"}.fa-anchor-lock:before{content:"\e4ad"}.fa-building-ngo:before{content:"\e4d7"}.fa-manat-sign:before{content:"\e1d5"}.fa-not-equal:before{content:"\f53e"}.fa-border-style:before,.fa-border-top-left:before{content:"\f853"}.fa-map-location-dot:before,.fa-map-marked-alt:before{content:"\f5a0"}.fa-jedi:before{content:"\f669"}.fa-poll:before,.fa-square-poll-vertical:before{content:"\f681"}.fa-mug-hot:before{content:"\f7b6"}.fa-battery-car:before,.fa-car-battery:before{content:"\f5df"}.fa-gift:before{content:"\f06b"}.fa-dice-two:before{content:"\f528"}.fa-chess-queen:before{content:"\f445"}.fa-glasses:before{content:"\f530"}.fa-chess-board:before{content:"\f43c"}.fa-building-circle-check:before{content:"\e4d2"}.fa-person-chalkboard:before{content:"\e53d"}.fa-mars-stroke-h:before,.fa-mars-stroke-right:before{content:"\f22b"}.fa-hand-back-fist:before,.fa-hand-rock:before{content:"\f255"}.fa-caret-square-up:before,.fa-square-caret-up:before{content:"\f151"}.fa-cloud-showers-water:before{content:"\e4e4"}.fa-bar-chart:before,.fa-chart-bar:before{content:"\f080"}.fa-hands-bubbles:before,.fa-hands-wash:before{content:"\e05e"}.fa-less-than-equal:before{content:"\f537"}.fa-train:before{content:"\f238"}.fa-eye-low-vision:before,.fa-low-vision:before{content:"\f2a8"}.fa-crow:before{content:"\f520"}.fa-sailboat:before{content:"\e445"}.fa-window-restore:before{content:"\f2d2"}.fa-plus-square:before,.fa-square-plus:before{content:"\f0fe"}.fa-torii-gate:before{content:"\f6a1"}.fa-frog:before{content:"\f52e"}.fa-bucket:before{content:"\e4cf"}.fa-image:before{content:"\f03e"}.fa-microphone:before{content:"\f130"}.fa-cow:before{content:"\f6c8"}.fa-caret-up:before{content:"\f0d8"}.fa-screwdriver:before{content:"\f54a"}.fa-folder-closed:before{content:"\e185"}.fa-house-tsunami:before{content:"\e515"}.fa-square-nfi:before{content:"\e576"}.fa-arrow-up-from-ground-water:before{content:"\e4b5"}.fa-glass-martini-alt:before,.fa-martini-glass:before{content:"\f57b"}.fa-rotate-back:before,.fa-rotate-backward:before,.fa-rotate-left:before,.fa-undo-alt:before{content:"\f2ea"}.fa-columns:before,.fa-table-columns:before{content:"\f0db"}.fa-lemon:before{content:"\f094"}.fa-head-side-mask:before{content:"\e063"}.fa-handshake:before{content:"\f2b5"}.fa-gem:before{content:"\f3a5"}.fa-dolly-box:before,.fa-dolly:before{content:"\f472"}.fa-smoking:before{content:"\f48d"}.fa-compress-arrows-alt:before,.fa-minimize:before{content:"\f78c"}.fa-monument:before{content:"\f5a6"}.fa-snowplow:before{content:"\f7d2"}.fa-angle-double-right:before,.fa-angles-right:before{content:"\f101"}.fa-cannabis:before{content:"\f55f"}.fa-circle-play:before,.fa-play-circle:before{content:"\f144"}.fa-tablets:before{content:"\f490"}.fa-ethernet:before{content:"\f796"}.fa-eur:before,.fa-euro-sign:before,.fa-euro:before{content:"\f153"}.fa-chair:before{content:"\f6c0"}.fa-check-circle:before,.fa-circle-check:before{content:"\f058"}.fa-circle-stop:before,.fa-stop-circle:before{content:"\f28d"}.fa-compass-drafting:before,.fa-drafting-compass:before{content:"\f568"}.fa-plate-wheat:before{content:"\e55a"}.fa-icicles:before{content:"\f7ad"}.fa-person-shelter:before{content:"\e54f"}.fa-neuter:before{content:"\f22c"}.fa-id-badge:before{content:"\f2c1"}.fa-marker:before{content:"\f5a1"}.fa-face-laugh-beam:before,.fa-laugh-beam:before{content:"\f59a"}.fa-helicopter-symbol:before{content:"\e502"}.fa-universal-access:before{content:"\f29a"}.fa-chevron-circle-up:before,.fa-circle-chevron-up:before{content:"\f139"}.fa-lari-sign:before{content:"\e1c8"}.fa-volcano:before{content:"\f770"}.fa-person-walking-dashed-line-arrow-right:before{content:"\e553"}.fa-gbp:before,.fa-pound-sign:before,.fa-sterling-sign:before{content:"\f154"}.fa-viruses:before{content:"\e076"}.fa-square-person-confined:before{content:"\e577"}.fa-user-tie:before{content:"\f508"}.fa-arrow-down-long:before,.fa-long-arrow-down:before{content:"\f175"}.fa-tent-arrow-down-to-line:before{content:"\e57e"}.fa-certificate:before{content:"\f0a3"}.fa-mail-reply-all:before,.fa-reply-all:before{content:"\f122"}.fa-suitcase:before{content:"\f0f2"}.fa-person-skating:before,.fa-skating:before{content:"\f7c5"}.fa-filter-circle-dollar:before,.fa-funnel-dollar:before{content:"\f662"}.fa-camera-retro:before{content:"\f083"}.fa-arrow-circle-down:before,.fa-circle-arrow-down:before{content:"\f0ab"}.fa-arrow-right-to-file:before,.fa-file-import:before{content:"\f56f"}.fa-external-link-square:before,.fa-square-arrow-up-right:before{content:"\f14c"}.fa-box-open:before{content:"\f49e"}.fa-scroll:before{content:"\f70e"}.fa-spa:before{content:"\f5bb"}.fa-location-pin-lock:before{content:"\e51f"}.fa-pause:before{content:"\f04c"}.fa-hill-avalanche:before{content:"\e507"}.fa-temperature-0:before,.fa-temperature-empty:before,.fa-thermometer-0:before,.fa-thermometer-empty:before{content:"\f2cb"}.fa-bomb:before{content:"\f1e2"}.fa-registered:before{content:"\f25d"}.fa-address-card:before,.fa-contact-card:before,.fa-vcard:before{content:"\f2bb"}.fa-balance-scale-right:before,.fa-scale-unbalanced-flip:before{content:"\f516"}.fa-subscript:before{content:"\f12c"}.fa-diamond-turn-right:before,.fa-directions:before{content:"\f5eb"}.fa-burst:before{content:"\e4dc"}.fa-house-laptop:before,.fa-laptop-house:before{content:"\e066"}.fa-face-tired:before,.fa-tired:before{content:"\f5c8"}.fa-money-bills:before{content:"\e1f3"}.fa-smog:before{content:"\f75f"}.fa-crutch:before{content:"\f7f7"}.fa-cloud-arrow-up:before,.fa-cloud-upload-alt:before,.fa-cloud-upload:before{content:"\f0ee"}.fa-palette:before{content:"\f53f"}.fa-arrows-turn-right:before{content:"\e4c0"}.fa-vest:before{content:"\e085"}.fa-ferry:before{content:"\e4ea"}.fa-arrows-down-to-people:before{content:"\e4b9"}.fa-seedling:before,.fa-sprout:before{content:"\f4d8"}.fa-arrows-alt-h:before,.fa-left-right:before{content:"\f337"}.fa-boxes-packing:before{content:"\e4c7"}.fa-arrow-circle-left:before,.fa-circle-arrow-left:before{content:"\f0a8"}.fa-group-arrows-rotate:before{content:"\e4f6"}.fa-bowl-food:before{content:"\e4c6"}.fa-candy-cane:before{content:"\f786"}.fa-arrow-down-wide-short:before,.fa-sort-amount-asc:before,.fa-sort-amount-down:before{content:"\f160"}.fa-cloud-bolt:before,.fa-thunderstorm:before{content:"\f76c"}.fa-remove-format:before,.fa-text-slash:before{content:"\f87d"}.fa-face-smile-wink:before,.fa-smile-wink:before{content:"\f4da"}.fa-file-word:before{content:"\f1c2"}.fa-file-powerpoint:before{content:"\f1c4"}.fa-arrows-h:before,.fa-arrows-left-right:before{content:"\f07e"}.fa-house-lock:before{content:"\e510"}.fa-cloud-arrow-down:before,.fa-cloud-download-alt:before,.fa-cloud-download:before{content:"\f0ed"}.fa-children:before{content:"\e4e1"}.fa-blackboard:before,.fa-chalkboard:before{content:"\f51b"}.fa-user-alt-slash:before,.fa-user-large-slash:before{content:"\f4fa"}.fa-envelope-open:before{content:"\f2b6"}.fa-handshake-alt-slash:before,.fa-handshake-simple-slash:before{content:"\e05f"}.fa-mattress-pillow:before{content:"\e525"}.fa-guarani-sign:before{content:"\e19a"}.fa-arrows-rotate:before,.fa-refresh:before,.fa-sync:before{content:"\f021"}.fa-fire-extinguisher:before{content:"\f134"}.fa-cruzeiro-sign:before{content:"\e152"}.fa-greater-than-equal:before{content:"\f532"}.fa-shield-alt:before,.fa-shield-halved:before{content:"\f3ed"}.fa-atlas:before,.fa-book-atlas:before{content:"\f558"}.fa-virus:before{content:"\e074"}.fa-envelope-circle-check:before{content:"\e4e8"}.fa-layer-group:before{content:"\f5fd"}.fa-arrows-to-dot:before{content:"\e4be"}.fa-archway:before{content:"\f557"}.fa-heart-circle-check:before{content:"\e4fd"}.fa-house-chimney-crack:before,.fa-house-damage:before{content:"\f6f1"}.fa-file-archive:before,.fa-file-zipper:before{content:"\f1c6"}.fa-square:before{content:"\f0c8"}.fa-glass-martini:before,.fa-martini-glass-empty:before{content:"\f000"}.fa-couch:before{content:"\f4b8"}.fa-cedi-sign:before{content:"\e0df"}.fa-italic:before{content:"\f033"}.fa-church:before{content:"\f51d"}.fa-comments-dollar:before{content:"\f653"}.fa-democrat:before{content:"\f747"}.fa-z:before{content:"\5a"}.fa-person-skiing:before,.fa-skiing:before{content:"\f7c9"}.fa-road-lock:before{content:"\e567"}.fa-a:before{content:"\41"}.fa-temperature-arrow-down:before,.fa-temperature-down:before{content:"\e03f"}.fa-feather-alt:before,.fa-feather-pointed:before{content:"\f56b"}.fa-p:before{content:"\50"}.fa-snowflake:before{content:"\f2dc"}.fa-newspaper:before{content:"\f1ea"}.fa-ad:before,.fa-rectangle-ad:before{content:"\f641"}.fa-arrow-circle-right:before,.fa-circle-arrow-right:before{content:"\f0a9"}.fa-filter-circle-xmark:before{content:"\e17b"}.fa-locust:before{content:"\e520"}.fa-sort:before,.fa-unsorted:before{content:"\f0dc"}.fa-list-1-2:before,.fa-list-numeric:before,.fa-list-ol:before{content:"\f0cb"}.fa-person-dress-burst:before{content:"\e544"}.fa-money-check-alt:before,.fa-money-check-dollar:before{content:"\f53d"}.fa-vector-square:before{content:"\f5cb"}.fa-bread-slice:before{content:"\f7ec"}.fa-language:before{content:"\f1ab"}.fa-face-kiss-wink-heart:before,.fa-kiss-wink-heart:before{content:"\f598"}.fa-filter:before{content:"\f0b0"}.fa-question:before{content:"\3f"}.fa-file-signature:before{content:"\f573"}.fa-arrows-alt:before,.fa-up-down-left-right:before{content:"\f0b2"}.fa-house-chimney-user:before{content:"\e065"}.fa-hand-holding-heart:before{content:"\f4be"}.fa-puzzle-piece:before{content:"\f12e"}.fa-money-check:before{content:"\f53c"}.fa-star-half-alt:before,.fa-star-half-stroke:before{content:"\f5c0"}.fa-code:before{content:"\f121"}.fa-glass-whiskey:before,.fa-whiskey-glass:before{content:"\f7a0"}.fa-building-circle-exclamation:before{content:"\e4d3"}.fa-magnifying-glass-chart:before{content:"\e522"}.fa-arrow-up-right-from-square:before,.fa-external-link:before{content:"\f08e"}.fa-cubes-stacked:before{content:"\e4e6"}.fa-krw:before,.fa-won-sign:before,.fa-won:before{content:"\f159"}.fa-virus-covid:before{content:"\e4a8"}.fa-austral-sign:before{content:"\e0a9"}.fa-f:before{content:"\46"}.fa-leaf:before{content:"\f06c"}.fa-road:before{content:"\f018"}.fa-cab:before,.fa-taxi:before{content:"\f1ba"}.fa-person-circle-plus:before{content:"\e541"}.fa-chart-pie:before,.fa-pie-chart:before{content:"\f200"}.fa-bolt-lightning:before{content:"\e0b7"}.fa-sack-xmark:before{content:"\e56a"}.fa-file-excel:before{content:"\f1c3"}.fa-file-contract:before{content:"\f56c"}.fa-fish-fins:before{content:"\e4f2"}.fa-building-flag:before{content:"\e4d5"}.fa-face-grin-beam:before,.fa-grin-beam:before{content:"\f582"}.fa-object-ungroup:before{content:"\f248"}.fa-poop:before{content:"\f619"}.fa-location-pin:before,.fa-map-marker:before{content:"\f041"}.fa-kaaba:before{content:"\f66b"}.fa-toilet-paper:before{content:"\f71e"}.fa-hard-hat:before,.fa-hat-hard:before,.fa-helmet-safety:before{content:"\f807"}.fa-eject:before{content:"\f052"}.fa-arrow-alt-circle-right:before,.fa-circle-right:before{content:"\f35a"}.fa-plane-circle-check:before{content:"\e555"}.fa-face-rolling-eyes:before,.fa-meh-rolling-eyes:before{content:"\f5a5"}.fa-object-group:before{content:"\f247"}.fa-chart-line:before,.fa-line-chart:before{content:"\f201"}.fa-mask-ventilator:before{content:"\e524"}.fa-arrow-right:before{content:"\f061"}.fa-map-signs:before,.fa-signs-post:before{content:"\f277"}.fa-cash-register:before{content:"\f788"}.fa-person-circle-question:before{content:"\e542"}.fa-h:before{content:"\48"}.fa-tarp:before{content:"\e57b"}.fa-screwdriver-wrench:before,.fa-tools:before{content:"\f7d9"}.fa-arrows-to-eye:before{content:"\e4bf"}.fa-plug-circle-bolt:before{content:"\e55b"}.fa-heart:before{content:"\f004"}.fa-mars-and-venus:before{content:"\f224"}.fa-home-user:before,.fa-house-user:before{content:"\e1b0"}.fa-dumpster-fire:before{content:"\f794"}.fa-house-crack:before{content:"\e3b1"}.fa-cocktail:before,.fa-martini-glass-citrus:before{content:"\f561"}.fa-face-surprise:before,.fa-surprise:before{content:"\f5c2"}.fa-bottle-water:before{content:"\e4c5"}.fa-circle-pause:before,.fa-pause-circle:before{content:"\f28b"}.fa-toilet-paper-slash:before{content:"\e072"}.fa-apple-alt:before,.fa-apple-whole:before{content:"\f5d1"}.fa-kitchen-set:before{content:"\e51a"}.fa-r:before{content:"\52"}.fa-temperature-1:before,.fa-temperature-quarter:before,.fa-thermometer-1:before,.fa-thermometer-quarter:before{content:"\f2ca"}.fa-cube:before{content:"\f1b2"}.fa-bitcoin-sign:before{content:"\e0b4"}.fa-shield-dog:before{content:"\e573"}.fa-solar-panel:before{content:"\f5ba"}.fa-lock-open:before{content:"\f3c1"}.fa-elevator:before{content:"\e16d"}.fa-money-bill-transfer:before{content:"\e528"}.fa-money-bill-trend-up:before{content:"\e529"}.fa-house-flood-water-circle-arrow-right:before{content:"\e50f"}.fa-poll-h:before,.fa-square-poll-horizontal:before{content:"\f682"}.fa-circle:before{content:"\f111"}.fa-backward-fast:before,.fa-fast-backward:before{content:"\f049"}.fa-recycle:before{content:"\f1b8"}.fa-user-astronaut:before{content:"\f4fb"}.fa-plane-slash:before{content:"\e069"}.fa-trademark:before{content:"\f25c"}.fa-basketball-ball:before,.fa-basketball:before{content:"\f434"}.fa-satellite-dish:before{content:"\f7c0"}.fa-arrow-alt-circle-up:before,.fa-circle-up:before{content:"\f35b"}.fa-mobile-alt:before,.fa-mobile-screen-button:before{content:"\f3cd"}.fa-volume-high:before,.fa-volume-up:before{content:"\f028"}.fa-users-rays:before{content:"\e593"}.fa-wallet:before{content:"\f555"}.fa-clipboard-check:before{content:"\f46c"}.fa-file-audio:before{content:"\f1c7"}.fa-burger:before,.fa-hamburger:before{content:"\f805"}.fa-wrench:before{content:"\f0ad"}.fa-bugs:before{content:"\e4d0"}.fa-rupee-sign:before,.fa-rupee:before{content:"\f156"}.fa-file-image:before{content:"\f1c5"}.fa-circle-question:before,.fa-question-circle:before{content:"\f059"}.fa-plane-departure:before{content:"\f5b0"}.fa-handshake-slash:before{content:"\e060"}.fa-book-bookmark:before{content:"\e0bb"}.fa-code-branch:before{content:"\f126"}.fa-hat-cowboy:before{content:"\f8c0"}.fa-bridge:before{content:"\e4c8"}.fa-phone-alt:before,.fa-phone-flip:before{content:"\f879"}.fa-truck-front:before{content:"\e2b7"}.fa-cat:before{content:"\f6be"}.fa-anchor-circle-exclamation:before{content:"\e4ab"}.fa-truck-field:before{content:"\e58d"}.fa-route:before{content:"\f4d7"}.fa-clipboard-question:before{content:"\e4e3"}.fa-panorama:before{content:"\e209"}.fa-comment-medical:before{content:"\f7f5"}.fa-teeth-open:before{content:"\f62f"}.fa-file-circle-minus:before{content:"\e4ed"}.fa-tags:before{content:"\f02c"}.fa-wine-glass:before{content:"\f4e3"}.fa-fast-forward:before,.fa-forward-fast:before{content:"\f050"}.fa-face-meh-blank:before,.fa-meh-blank:before{content:"\f5a4"}.fa-parking:before,.fa-square-parking:before{content:"\f540"}.fa-house-signal:before{content:"\e012"}.fa-bars-progress:before,.fa-tasks-alt:before{content:"\f828"}.fa-faucet-drip:before{content:"\e006"}.fa-cart-flatbed:before,.fa-dolly-flatbed:before{content:"\f474"}.fa-ban-smoking:before,.fa-smoking-ban:before{content:"\f54d"}.fa-terminal:before{content:"\f120"}.fa-mobile-button:before{content:"\f10b"}.fa-house-medical-flag:before{content:"\e514"}.fa-basket-shopping:before,.fa-shopping-basket:before{content:"\f291"}.fa-tape:before{content:"\f4db"}.fa-bus-alt:before,.fa-bus-simple:before{content:"\f55e"}.fa-eye:before{content:"\f06e"}.fa-face-sad-cry:before,.fa-sad-cry:before{content:"\f5b3"}.fa-audio-description:before{content:"\f29e"}.fa-person-military-to-person:before{content:"\e54c"}.fa-file-shield:before{content:"\e4f0"}.fa-user-slash:before{content:"\f506"}.fa-pen:before{content:"\f304"}.fa-tower-observation:before{content:"\e586"}.fa-file-code:before{content:"\f1c9"}.fa-signal-5:before,.fa-signal-perfect:before,.fa-signal:before{content:"\f012"}.fa-bus:before{content:"\f207"}.fa-heart-circle-xmark:before{content:"\e501"}.fa-home-lg:before,.fa-house-chimney:before{content:"\e3af"}.fa-window-maximize:before{content:"\f2d0"}.fa-face-frown:before,.fa-frown:before{content:"\f119"}.fa-prescription:before{content:"\f5b1"}.fa-shop:before,.fa-store-alt:before{content:"\f54f"}.fa-floppy-disk:before,.fa-save:before{content:"\f0c7"}.fa-vihara:before{content:"\f6a7"}.fa-balance-scale-left:before,.fa-scale-unbalanced:before{content:"\f515"}.fa-sort-asc:before,.fa-sort-up:before{content:"\f0de"}.fa-comment-dots:before,.fa-commenting:before{content:"\f4ad"}.fa-plant-wilt:before{content:"\e5aa"}.fa-diamond:before{content:"\f219"}.fa-face-grin-squint:before,.fa-grin-squint:before{content:"\f585"}.fa-hand-holding-dollar:before,.fa-hand-holding-usd:before{content:"\f4c0"}.fa-bacterium:before{content:"\e05a"}.fa-hand-pointer:before{content:"\f25a"}.fa-drum-steelpan:before{content:"\f56a"}.fa-hand-scissors:before{content:"\f257"}.fa-hands-praying:before,.fa-praying-hands:before{content:"\f684"}.fa-arrow-right-rotate:before,.fa-arrow-rotate-forward:before,.fa-arrow-rotate-right:before,.fa-redo:before{content:"\f01e"}.fa-biohazard:before{content:"\f780"}.fa-location-crosshairs:before,.fa-location:before{content:"\f601"}.fa-mars-double:before{content:"\f227"}.fa-child-dress:before{content:"\e59c"}.fa-users-between-lines:before{content:"\e591"}.fa-lungs-virus:before{content:"\e067"}.fa-face-grin-tears:before,.fa-grin-tears:before{content:"\f588"}.fa-phone:before{content:"\f095"}.fa-calendar-times:before,.fa-calendar-xmark:before{content:"\f273"}.fa-child-reaching:before{content:"\e59d"}.fa-head-side-virus:before{content:"\e064"}.fa-user-cog:before,.fa-user-gear:before{content:"\f4fe"}.fa-arrow-up-1-9:before,.fa-sort-numeric-up:before{content:"\f163"}.fa-door-closed:before{content:"\f52a"}.fa-shield-virus:before{content:"\e06c"}.fa-dice-six:before{content:"\f526"}.fa-mosquito-net:before{content:"\e52c"}.fa-bridge-water:before{content:"\e4ce"}.fa-person-booth:before{content:"\f756"}.fa-text-width:before{content:"\f035"}.fa-hat-wizard:before{content:"\f6e8"}.fa-pen-fancy:before{content:"\f5ac"}.fa-digging:before,.fa-person-digging:before{content:"\f85e"}.fa-trash:before{content:"\f1f8"}.fa-gauge-simple-med:before,.fa-gauge-simple:before,.fa-tachometer-average:before{content:"\f629"}.fa-book-medical:before{content:"\f7e6"}.fa-poo:before{content:"\f2fe"}.fa-quote-right-alt:before,.fa-quote-right:before{content:"\f10e"}.fa-shirt:before,.fa-t-shirt:before,.fa-tshirt:before{content:"\f553"}.fa-cubes:before{content:"\f1b3"}.fa-divide:before{content:"\f529"}.fa-tenge-sign:before,.fa-tenge:before{content:"\f7d7"}.fa-headphones:before{content:"\f025"}.fa-hands-holding:before{content:"\f4c2"}.fa-hands-clapping:before{content:"\e1a8"}.fa-republican:before{content:"\f75e"}.fa-arrow-left:before{content:"\f060"}.fa-person-circle-xmark:before{content:"\e543"}.fa-ruler:before{content:"\f545"}.fa-align-left:before{content:"\f036"}.fa-dice-d6:before{content:"\f6d1"}.fa-restroom:before{content:"\f7bd"}.fa-j:before{content:"\4a"}.fa-users-viewfinder:before{content:"\e595"}.fa-file-video:before{content:"\f1c8"}.fa-external-link-alt:before,.fa-up-right-from-square:before{content:"\f35d"}.fa-table-cells:before,.fa-th:before{content:"\f00a"}.fa-file-pdf:before{content:"\f1c1"}.fa-bible:before,.fa-book-bible:before{content:"\f647"}.fa-o:before{content:"\4f"}.fa-medkit:before,.fa-suitcase-medical:before{content:"\f0fa"}.fa-user-secret:before{content:"\f21b"}.fa-otter:before{content:"\f700"}.fa-female:before,.fa-person-dress:before{content:"\f182"}.fa-comment-dollar:before{content:"\f651"}.fa-briefcase-clock:before,.fa-business-time:before{content:"\f64a"}.fa-table-cells-large:before,.fa-th-large:before{content:"\f009"}.fa-book-tanakh:before,.fa-tanakh:before{content:"\f827"}.fa-phone-volume:before,.fa-volume-control-phone:before{content:"\f2a0"}.fa-hat-cowboy-side:before{content:"\f8c1"}.fa-clipboard-user:before{content:"\f7f3"}.fa-child:before{content:"\f1ae"}.fa-lira-sign:before{content:"\f195"}.fa-satellite:before{content:"\f7bf"}.fa-plane-lock:before{content:"\e558"}.fa-tag:before{content:"\f02b"}.fa-comment:before{content:"\f075"}.fa-birthday-cake:before,.fa-cake-candles:before,.fa-cake:before{content:"\f1fd"}.fa-envelope:before{content:"\f0e0"}.fa-angle-double-up:before,.fa-angles-up:before{content:"\f102"}.fa-paperclip:before{content:"\f0c6"}.fa-arrow-right-to-city:before{content:"\e4b3"}.fa-ribbon:before{content:"\f4d6"}.fa-lungs:before{content:"\f604"}.fa-arrow-up-9-1:before,.fa-sort-numeric-up-alt:before{content:"\f887"}.fa-litecoin-sign:before{content:"\e1d3"}.fa-border-none:before{content:"\f850"}.fa-circle-nodes:before{content:"\e4e2"}.fa-parachute-box:before{content:"\f4cd"}.fa-indent:before{content:"\f03c"}.fa-truck-field-un:before{content:"\e58e"}.fa-hourglass-empty:before,.fa-hourglass:before{content:"\f254"}.fa-mountain:before{content:"\f6fc"}.fa-user-doctor:before,.fa-user-md:before{content:"\f0f0"}.fa-circle-info:before,.fa-info-circle:before{content:"\f05a"}.fa-cloud-meatball:before{content:"\f73b"}.fa-camera-alt:before,.fa-camera:before{content:"\f030"}.fa-square-virus:before{content:"\e578"}.fa-meteor:before{content:"\f753"}.fa-car-on:before{content:"\e4dd"}.fa-sleigh:before{content:"\f7cc"}.fa-arrow-down-1-9:before,.fa-sort-numeric-asc:before,.fa-sort-numeric-down:before{content:"\f162"}.fa-hand-holding-droplet:before,.fa-hand-holding-water:before{content:"\f4c1"}.fa-water:before{content:"\f773"}.fa-calendar-check:before{content:"\f274"}.fa-braille:before{content:"\f2a1"}.fa-prescription-bottle-alt:before,.fa-prescription-bottle-medical:before{content:"\f486"}.fa-landmark:before{content:"\f66f"}.fa-truck:before{content:"\f0d1"}.fa-crosshairs:before{content:"\f05b"}.fa-person-cane:before{content:"\e53c"}.fa-tent:before{content:"\e57d"}.fa-vest-patches:before{content:"\e086"}.fa-check-double:before{content:"\f560"}.fa-arrow-down-a-z:before,.fa-sort-alpha-asc:before,.fa-sort-alpha-down:before{content:"\f15d"}.fa-money-bill-wheat:before{content:"\e52a"}.fa-cookie:before{content:"\f563"}.fa-arrow-left-rotate:before,.fa-arrow-rotate-back:before,.fa-arrow-rotate-backward:before,.fa-arrow-rotate-left:before,.fa-undo:before{content:"\f0e2"}.fa-hard-drive:before,.fa-hdd:before{content:"\f0a0"}.fa-face-grin-squint-tears:before,.fa-grin-squint-tears:before{content:"\f586"}.fa-dumbbell:before{content:"\f44b"}.fa-list-alt:before,.fa-rectangle-list:before{content:"\f022"}.fa-tarp-droplet:before{content:"\e57c"}.fa-house-medical-circle-check:before{content:"\e511"}.fa-person-skiing-nordic:before,.fa-skiing-nordic:before{content:"\f7ca"}.fa-calendar-plus:before{content:"\f271"}.fa-plane-arrival:before{content:"\f5af"}.fa-arrow-alt-circle-left:before,.fa-circle-left:before{content:"\f359"}.fa-subway:before,.fa-train-subway:before{content:"\f239"}.fa-chart-gantt:before{content:"\e0e4"}.fa-indian-rupee-sign:before,.fa-indian-rupee:before,.fa-inr:before{content:"\e1bc"}.fa-crop-alt:before,.fa-crop-simple:before{content:"\f565"}.fa-money-bill-1:before,.fa-money-bill-alt:before{content:"\f3d1"}.fa-left-long:before,.fa-long-arrow-alt-left:before{content:"\f30a"}.fa-dna:before{content:"\f471"}.fa-virus-slash:before{content:"\e075"}.fa-minus:before,.fa-subtract:before{content:"\f068"}.fa-chess:before{content:"\f439"}.fa-arrow-left-long:before,.fa-long-arrow-left:before{content:"\f177"}.fa-plug-circle-check:before{content:"\e55c"}.fa-street-view:before{content:"\f21d"}.fa-franc-sign:before{content:"\e18f"}.fa-volume-off:before{content:"\f026"}.fa-american-sign-language-interpreting:before,.fa-asl-interpreting:before,.fa-hands-american-sign-language-interpreting:before,.fa-hands-asl-interpreting:before{content:"\f2a3"}.fa-cog:before,.fa-gear:before{content:"\f013"}.fa-droplet-slash:before,.fa-tint-slash:before{content:"\f5c7"}.fa-mosque:before{content:"\f678"}.fa-mosquito:before{content:"\e52b"}.fa-star-of-david:before{content:"\f69a"}.fa-person-military-rifle:before{content:"\e54b"}.fa-cart-shopping:before,.fa-shopping-cart:before{content:"\f07a"}.fa-vials:before{content:"\f493"}.fa-plug-circle-plus:before{content:"\e55f"}.fa-place-of-worship:before{content:"\f67f"}.fa-grip-vertical:before{content:"\f58e"}.fa-arrow-turn-up:before,.fa-level-up:before{content:"\f148"}.fa-u:before{content:"\55"}.fa-square-root-alt:before,.fa-square-root-variable:before{content:"\f698"}.fa-clock-four:before,.fa-clock:before{content:"\f017"}.fa-backward-step:before,.fa-step-backward:before{content:"\f048"}.fa-pallet:before{content:"\f482"}.fa-faucet:before{content:"\e005"}.fa-baseball-bat-ball:before{content:"\f432"}.fa-s:before{content:"\53"}.fa-timeline:before{content:"\e29c"}.fa-keyboard:before{content:"\f11c"}.fa-caret-down:before{content:"\f0d7"}.fa-clinic-medical:before,.fa-house-chimney-medical:before{content:"\f7f2"}.fa-temperature-3:before,.fa-temperature-three-quarters:before,.fa-thermometer-3:before,.fa-thermometer-three-quarters:before{content:"\f2c8"}.fa-mobile-android-alt:before,.fa-mobile-screen:before{content:"\f3cf"}.fa-plane-up:before{content:"\e22d"}.fa-piggy-bank:before{content:"\f4d3"}.fa-battery-3:before,.fa-battery-half:before{content:"\f242"}.fa-mountain-city:before{content:"\e52e"}.fa-coins:before{content:"\f51e"}.fa-khanda:before{content:"\f66d"}.fa-sliders-h:before,.fa-sliders:before{content:"\f1de"}.fa-folder-tree:before{content:"\f802"}.fa-network-wired:before{content:"\f6ff"}.fa-map-pin:before{content:"\f276"}.fa-hamsa:before{content:"\f665"}.fa-cent-sign:before{content:"\e3f5"}.fa-flask:before{content:"\f0c3"}.fa-person-pregnant:before{content:"\e31e"}.fa-wand-sparkles:before{content:"\f72b"}.fa-ellipsis-v:before,.fa-ellipsis-vertical:before{content:"\f142"}.fa-ticket:before{content:"\f145"}.fa-power-off:before{content:"\f011"}.fa-long-arrow-alt-right:before,.fa-right-long:before{content:"\f30b"}.fa-flag-usa:before{content:"\f74d"}.fa-laptop-file:before{content:"\e51d"}.fa-teletype:before,.fa-tty:before{content:"\f1e4"}.fa-diagram-next:before{content:"\e476"}.fa-person-rifle:before{content:"\e54e"}.fa-house-medical-circle-exclamation:before{content:"\e512"}.fa-closed-captioning:before{content:"\f20a"}.fa-hiking:before,.fa-person-hiking:before{content:"\f6ec"}.fa-venus-double:before{content:"\f226"}.fa-images:before{content:"\f302"}.fa-calculator:before{content:"\f1ec"}.fa-people-pulling:before{content:"\e535"}.fa-n:before{content:"\4e"}.fa-cable-car:before,.fa-tram:before{content:"\f7da"}.fa-cloud-rain:before{content:"\f73d"}.fa-building-circle-xmark:before{content:"\e4d4"}.fa-ship:before{content:"\f21a"}.fa-arrows-down-to-line:before{content:"\e4b8"}.fa-download:before{content:"\f019"}.fa-face-grin:before,.fa-grin:before{content:"\f580"}.fa-backspace:before,.fa-delete-left:before{content:"\f55a"}.fa-eye-dropper-empty:before,.fa-eye-dropper:before,.fa-eyedropper:before{content:"\f1fb"}.fa-file-circle-check:before{content:"\e5a0"}.fa-forward:before{content:"\f04e"}.fa-mobile-android:before,.fa-mobile-phone:before,.fa-mobile:before{content:"\f3ce"}.fa-face-meh:before,.fa-meh:before{content:"\f11a"}.fa-align-center:before{content:"\f037"}.fa-book-dead:before,.fa-book-skull:before{content:"\f6b7"}.fa-drivers-license:before,.fa-id-card:before{content:"\f2c2"}.fa-dedent:before,.fa-outdent:before{content:"\f03b"}.fa-heart-circle-exclamation:before{content:"\e4fe"}.fa-home-alt:before,.fa-home-lg-alt:before,.fa-home:before,.fa-house:before{content:"\f015"}.fa-calendar-week:before{content:"\f784"}.fa-laptop-medical:before{content:"\f812"}.fa-b:before{content:"\42"}.fa-file-medical:before{content:"\f477"}.fa-dice-one:before{content:"\f525"}.fa-kiwi-bird:before{content:"\f535"}.fa-arrow-right-arrow-left:before,.fa-exchange:before{content:"\f0ec"}.fa-redo-alt:before,.fa-rotate-forward:before,.fa-rotate-right:before{content:"\f2f9"}.fa-cutlery:before,.fa-utensils:before{content:"\f2e7"}.fa-arrow-up-wide-short:before,.fa-sort-amount-up:before{content:"\f161"}.fa-mill-sign:before{content:"\e1ed"}.fa-bowl-rice:before{content:"\e2eb"}.fa-skull:before{content:"\f54c"}.fa-broadcast-tower:before,.fa-tower-broadcast:before{content:"\f519"}.fa-truck-pickup:before{content:"\f63c"}.fa-long-arrow-alt-up:before,.fa-up-long:before{content:"\f30c"}.fa-stop:before{content:"\f04d"}.fa-code-merge:before{content:"\f387"}.fa-upload:before{content:"\f093"}.fa-hurricane:before{content:"\f751"}.fa-mound:before{content:"\e52d"}.fa-toilet-portable:before{content:"\e583"}.fa-compact-disc:before{content:"\f51f"}.fa-file-arrow-down:before,.fa-file-download:before{content:"\f56d"}.fa-caravan:before{content:"\f8ff"}.fa-shield-cat:before{content:"\e572"}.fa-bolt:before,.fa-zap:before{content:"\f0e7"}.fa-glass-water:before{content:"\e4f4"}.fa-oil-well:before{content:"\e532"}.fa-vault:before{content:"\e2c5"}.fa-mars:before{content:"\f222"}.fa-toilet:before{content:"\f7d8"}.fa-plane-circle-xmark:before{content:"\e557"}.fa-cny:before,.fa-jpy:before,.fa-rmb:before,.fa-yen-sign:before,.fa-yen:before{content:"\f157"}.fa-rouble:before,.fa-rub:before,.fa-ruble-sign:before,.fa-ruble:before{content:"\f158"}.fa-sun:before{content:"\f185"}.fa-guitar:before{content:"\f7a6"}.fa-face-laugh-wink:before,.fa-laugh-wink:before{content:"\f59c"}.fa-horse-head:before{content:"\f7ab"}.fa-bore-hole:before{content:"\e4c3"}.fa-industry:before{content:"\f275"}.fa-arrow-alt-circle-down:before,.fa-circle-down:before{content:"\f358"}.fa-arrows-turn-to-dots:before{content:"\e4c1"}.fa-florin-sign:before{content:"\e184"}.fa-arrow-down-short-wide:before,.fa-sort-amount-desc:before,.fa-sort-amount-down-alt:before{content:"\f884"}.fa-less-than:before{content:"\3c"}.fa-angle-down:before{content:"\f107"}.fa-car-tunnel:before{content:"\e4de"}.fa-head-side-cough:before{content:"\e061"}.fa-grip-lines:before{content:"\f7a4"}.fa-thumbs-down:before{content:"\f165"}.fa-user-lock:before{content:"\f502"}.fa-arrow-right-long:before,.fa-long-arrow-right:before{content:"\f178"}.fa-anchor-circle-xmark:before{content:"\e4ac"}.fa-ellipsis-h:before,.fa-ellipsis:before{content:"\f141"}.fa-chess-pawn:before{content:"\f443"}.fa-first-aid:before,.fa-kit-medical:before{content:"\f479"}.fa-person-through-window:before{content:"\e5a9"}.fa-toolbox:before{content:"\f552"}.fa-hands-holding-circle:before{content:"\e4fb"}.fa-bug:before{content:"\f188"}.fa-credit-card-alt:before,.fa-credit-card:before{content:"\f09d"}.fa-automobile:before,.fa-car:before{content:"\f1b9"}.fa-hand-holding-hand:before{content:"\e4f7"}.fa-book-open-reader:before,.fa-book-reader:before{content:"\f5da"}.fa-mountain-sun:before{content:"\e52f"}.fa-arrows-left-right-to-line:before{content:"\e4ba"}.fa-dice-d20:before{content:"\f6cf"}.fa-truck-droplet:before{content:"\e58c"}.fa-file-circle-xmark:before{content:"\e5a1"}.fa-temperature-arrow-up:before,.fa-temperature-up:before{content:"\e040"}.fa-medal:before{content:"\f5a2"}.fa-bed:before{content:"\f236"}.fa-h-square:before,.fa-square-h:before{content:"\f0fd"}.fa-podcast:before{content:"\f2ce"}.fa-temperature-4:before,.fa-temperature-full:before,.fa-thermometer-4:before,.fa-thermometer-full:before{content:"\f2c7"}.fa-bell:before{content:"\f0f3"}.fa-superscript:before{content:"\f12b"}.fa-plug-circle-xmark:before{content:"\e560"}.fa-star-of-life:before{content:"\f621"}.fa-phone-slash:before{content:"\f3dd"}.fa-paint-roller:before{content:"\f5aa"}.fa-hands-helping:before,.fa-handshake-angle:before{content:"\f4c4"}.fa-location-dot:before,.fa-map-marker-alt:before{content:"\f3c5"}.fa-file:before{content:"\f15b"}.fa-greater-than:before{content:"\3e"}.fa-person-swimming:before,.fa-swimmer:before{content:"\f5c4"}.fa-arrow-down:before{content:"\f063"}.fa-droplet:before,.fa-tint:before{content:"\f043"}.fa-eraser:before{content:"\f12d"}.fa-earth-america:before,.fa-earth-americas:before,.fa-earth:before,.fa-globe-americas:before{content:"\f57d"}.fa-person-burst:before{content:"\e53b"}.fa-dove:before{content:"\f4ba"}.fa-battery-0:before,.fa-battery-empty:before{content:"\f244"}.fa-socks:before{content:"\f696"}.fa-inbox:before{content:"\f01c"}.fa-section:before{content:"\e447"}.fa-gauge-high:before,.fa-tachometer-alt-fast:before,.fa-tachometer-alt:before{content:"\f625"}.fa-envelope-open-text:before{content:"\f658"}.fa-hospital-alt:before,.fa-hospital-wide:before,.fa-hospital:before{content:"\f0f8"}.fa-wine-bottle:before{content:"\f72f"}.fa-chess-rook:before{content:"\f447"}.fa-bars-staggered:before,.fa-reorder:before,.fa-stream:before{content:"\f550"}.fa-dharmachakra:before{content:"\f655"}.fa-hotdog:before{content:"\f80f"}.fa-blind:before,.fa-person-walking-with-cane:before{content:"\f29d"}.fa-drum:before{content:"\f569"}.fa-ice-cream:before{content:"\f810"}.fa-heart-circle-bolt:before{content:"\e4fc"}.fa-fax:before{content:"\f1ac"}.fa-paragraph:before{content:"\f1dd"}.fa-check-to-slot:before,.fa-vote-yea:before{content:"\f772"}.fa-star-half:before{content:"\f089"}.fa-boxes-alt:before,.fa-boxes-stacked:before,.fa-boxes:before{content:"\f468"}.fa-chain:before,.fa-link:before{content:"\f0c1"}.fa-assistive-listening-systems:before,.fa-ear-listen:before{content:"\f2a2"}.fa-tree-city:before{content:"\e587"}.fa-play:before{content:"\f04b"}.fa-font:before{content:"\f031"}.fa-rupiah-sign:before{content:"\e23d"}.fa-magnifying-glass:before,.fa-search:before{content:"\f002"}.fa-ping-pong-paddle-ball:before,.fa-table-tennis-paddle-ball:before,.fa-table-tennis:before{content:"\f45d"}.fa-diagnoses:before,.fa-person-dots-from-line:before{content:"\f470"}.fa-trash-can-arrow-up:before,.fa-trash-restore-alt:before{content:"\f82a"}.fa-naira-sign:before{content:"\e1f6"}.fa-cart-arrow-down:before{content:"\f218"}.fa-walkie-talkie:before{content:"\f8ef"}.fa-file-edit:before,.fa-file-pen:before{content:"\f31c"}.fa-receipt:before{content:"\f543"}.fa-pen-square:before,.fa-pencil-square:before,.fa-square-pen:before{content:"\f14b"}.fa-suitcase-rolling:before{content:"\f5c1"}.fa-person-circle-exclamation:before{content:"\e53f"}.fa-chevron-down:before{content:"\f078"}.fa-battery-5:before,.fa-battery-full:before,.fa-battery:before{content:"\f240"}.fa-skull-crossbones:before{content:"\f714"}.fa-code-compare:before{content:"\e13a"}.fa-list-dots:before,.fa-list-ul:before{content:"\f0ca"}.fa-school-lock:before{content:"\e56f"}.fa-tower-cell:before{content:"\e585"}.fa-down-long:before,.fa-long-arrow-alt-down:before{content:"\f309"}.fa-ranking-star:before{content:"\e561"}.fa-chess-king:before{content:"\f43f"}.fa-person-harassing:before{content:"\e549"}.fa-brazilian-real-sign:before{content:"\e46c"}.fa-landmark-alt:before,.fa-landmark-dome:before{content:"\f752"}.fa-arrow-up:before{content:"\f062"}.fa-television:before,.fa-tv-alt:before,.fa-tv:before{content:"\f26c"}.fa-shrimp:before{content:"\e448"}.fa-list-check:before,.fa-tasks:before{content:"\f0ae"}.fa-jug-detergent:before{content:"\e519"}.fa-circle-user:before,.fa-user-circle:before{content:"\f2bd"}.fa-user-shield:before{content:"\f505"}.fa-wind:before{content:"\f72e"}.fa-car-burst:before,.fa-car-crash:before{content:"\f5e1"}.fa-y:before{content:"\59"}.fa-person-snowboarding:before,.fa-snowboarding:before{content:"\f7ce"}.fa-shipping-fast:before,.fa-truck-fast:before{content:"\f48b"}.fa-fish:before{content:"\f578"}.fa-user-graduate:before{content:"\f501"}.fa-adjust:before,.fa-circle-half-stroke:before{content:"\f042"}.fa-clapperboard:before{content:"\e131"}.fa-circle-radiation:before,.fa-radiation-alt:before{content:"\f7ba"}.fa-baseball-ball:before,.fa-baseball:before{content:"\f433"}.fa-jet-fighter-up:before{content:"\e518"}.fa-diagram-project:before,.fa-project-diagram:before{content:"\f542"}.fa-copy:before{content:"\f0c5"}.fa-volume-mute:before,.fa-volume-times:before,.fa-volume-xmark:before{content:"\f6a9"}.fa-hand-sparkles:before{content:"\e05d"}.fa-grip-horizontal:before,.fa-grip:before{content:"\f58d"}.fa-share-from-square:before,.fa-share-square:before{content:"\f14d"}.fa-child-combatant:before,.fa-child-rifle:before{content:"\e4e0"}.fa-gun:before{content:"\e19b"}.fa-phone-square:before,.fa-square-phone:before{content:"\f098"}.fa-add:before,.fa-plus:before{content:"\2b"}.fa-expand:before{content:"\f065"}.fa-computer:before{content:"\e4e5"}.fa-close:before,.fa-multiply:before,.fa-remove:before,.fa-times:before,.fa-xmark:before{content:"\f00d"}.fa-arrows-up-down-left-right:before,.fa-arrows:before{content:"\f047"}.fa-chalkboard-teacher:before,.fa-chalkboard-user:before{content:"\f51c"}.fa-peso-sign:before{content:"\e222"}.fa-building-shield:before{content:"\e4d8"}.fa-baby:before{content:"\f77c"}.fa-users-line:before{content:"\e592"}.fa-quote-left-alt:before,.fa-quote-left:before{content:"\f10d"}.fa-tractor:before{content:"\f722"}.fa-trash-arrow-up:before,.fa-trash-restore:before{content:"\f829"}.fa-arrow-down-up-lock:before{content:"\e4b0"}.fa-lines-leaning:before{content:"\e51e"}.fa-ruler-combined:before{content:"\f546"}.fa-copyright:before{content:"\f1f9"}.fa-equals:before{content:"\3d"}.fa-blender:before{content:"\f517"}.fa-teeth:before{content:"\f62e"}.fa-ils:before,.fa-shekel-sign:before,.fa-shekel:before,.fa-sheqel-sign:before,.fa-sheqel:before{content:"\f20b"}.fa-map:before{content:"\f279"}.fa-rocket:before{content:"\f135"}.fa-photo-film:before,.fa-photo-video:before{content:"\f87c"}.fa-folder-minus:before{content:"\f65d"}.fa-store:before{content:"\f54e"}.fa-arrow-trend-up:before{content:"\e098"}.fa-plug-circle-minus:before{content:"\e55e"}.fa-sign-hanging:before,.fa-sign:before{content:"\f4d9"}.fa-bezier-curve:before{content:"\f55b"}.fa-bell-slash:before{content:"\f1f6"}.fa-tablet-android:before,.fa-tablet:before{content:"\f3fb"}.fa-school-flag:before{content:"\e56e"}.fa-fill:before{content:"\f575"}.fa-angle-up:before{content:"\f106"}.fa-drumstick-bite:before{content:"\f6d7"}.fa-holly-berry:before{content:"\f7aa"}.fa-chevron-left:before{content:"\f053"}.fa-bacteria:before{content:"\e059"}.fa-hand-lizard:before{content:"\f258"}.fa-notdef:before{content:"\e1fe"}.fa-disease:before{content:"\f7fa"}.fa-briefcase-medical:before{content:"\f469"}.fa-genderless:before{content:"\f22d"}.fa-chevron-right:before{content:"\f054"}.fa-retweet:before{content:"\f079"}.fa-car-alt:before,.fa-car-rear:before{content:"\f5de"}.fa-pump-soap:before{content:"\e06b"}.fa-video-slash:before{content:"\f4e2"}.fa-battery-2:before,.fa-battery-quarter:before{content:"\f243"}.fa-radio:before{content:"\f8d7"}.fa-baby-carriage:before,.fa-carriage-baby:before{content:"\f77d"}.fa-traffic-light:before{content:"\f637"}.fa-thermometer:before{content:"\f491"}.fa-vr-cardboard:before{content:"\f729"}.fa-hand-middle-finger:before{content:"\f806"}.fa-percent:before,.fa-percentage:before{content:"\25"}.fa-truck-moving:before{content:"\f4df"}.fa-glass-water-droplet:before{content:"\e4f5"}.fa-display:before{content:"\e163"}.fa-face-smile:before,.fa-smile:before{content:"\f118"}.fa-thumb-tack:before,.fa-thumbtack:before{content:"\f08d"}.fa-trophy:before{content:"\f091"}.fa-person-praying:before,.fa-pray:before{content:"\f683"}.fa-hammer:before{content:"\f6e3"}.fa-hand-peace:before{content:"\f25b"}.fa-rotate:before,.fa-sync-alt:before{content:"\f2f1"}.fa-spinner:before{content:"\f110"}.fa-robot:before{content:"\f544"}.fa-peace:before{content:"\f67c"}.fa-cogs:before,.fa-gears:before{content:"\f085"}.fa-warehouse:before{content:"\f494"}.fa-arrow-up-right-dots:before{content:"\e4b7"}.fa-splotch:before{content:"\f5bc"}.fa-face-grin-hearts:before,.fa-grin-hearts:before{content:"\f584"}.fa-dice-four:before{content:"\f524"}.fa-sim-card:before{content:"\f7c4"}.fa-transgender-alt:before,.fa-transgender:before{content:"\f225"}.fa-mercury:before{content:"\f223"}.fa-arrow-turn-down:before,.fa-level-down:before{content:"\f149"}.fa-person-falling-burst:before{content:"\e547"}.fa-award:before{content:"\f559"}.fa-ticket-alt:before,.fa-ticket-simple:before{content:"\f3ff"}.fa-building:before{content:"\f1ad"}.fa-angle-double-left:before,.fa-angles-left:before{content:"\f100"}.fa-qrcode:before{content:"\f029"}.fa-clock-rotate-left:before,.fa-history:before{content:"\f1da"}.fa-face-grin-beam-sweat:before,.fa-grin-beam-sweat:before{content:"\f583"}.fa-arrow-right-from-file:before,.fa-file-export:before{content:"\f56e"}.fa-shield-blank:before,.fa-shield:before{content:"\f132"}.fa-arrow-up-short-wide:before,.fa-sort-amount-up-alt:before{content:"\f885"}.fa-house-medical:before{content:"\e3b2"}.fa-golf-ball-tee:before,.fa-golf-ball:before{content:"\f450"}.fa-chevron-circle-left:before,.fa-circle-chevron-left:before{content:"\f137"}.fa-house-chimney-window:before{content:"\e00d"}.fa-pen-nib:before{content:"\f5ad"}.fa-tent-arrow-turn-left:before{content:"\e580"}.fa-tents:before{content:"\e582"}.fa-magic:before,.fa-wand-magic:before{content:"\f0d0"}.fa-dog:before{content:"\f6d3"}.fa-carrot:before{content:"\f787"}.fa-moon:before{content:"\f186"}.fa-wine-glass-alt:before,.fa-wine-glass-empty:before{content:"\f5ce"}.fa-cheese:before{content:"\f7ef"}.fa-yin-yang:before{content:"\f6ad"}.fa-music:before{content:"\f001"}.fa-code-commit:before{content:"\f386"}.fa-temperature-low:before{content:"\f76b"}.fa-biking:before,.fa-person-biking:before{content:"\f84a"}.fa-broom:before{content:"\f51a"}.fa-shield-heart:before{content:"\e574"}.fa-gopuram:before{content:"\f664"}.fa-earth-oceania:before,.fa-globe-oceania:before{content:"\e47b"}.fa-square-xmark:before,.fa-times-square:before,.fa-xmark-square:before{content:"\f2d3"}.fa-hashtag:before{content:"\23"}.fa-expand-alt:before,.fa-up-right-and-down-left-from-center:before{content:"\f424"}.fa-oil-can:before{content:"\f613"}.fa-t:before{content:"\54"}.fa-hippo:before{content:"\f6ed"}.fa-chart-column:before{content:"\e0e3"}.fa-infinity:before{content:"\f534"}.fa-vial-circle-check:before{content:"\e596"}.fa-person-arrow-down-to-line:before{content:"\e538"}.fa-voicemail:before{content:"\f897"}.fa-fan:before{content:"\f863"}.fa-person-walking-luggage:before{content:"\e554"}.fa-arrows-alt-v:before,.fa-up-down:before{content:"\f338"}.fa-cloud-moon-rain:before{content:"\f73c"}.fa-calendar:before{content:"\f133"}.fa-trailer:before{content:"\e041"}.fa-bahai:before,.fa-haykal:before{content:"\f666"}.fa-sd-card:before{content:"\f7c2"}.fa-dragon:before{content:"\f6d5"}.fa-shoe-prints:before{content:"\f54b"}.fa-circle-plus:before,.fa-plus-circle:before{content:"\f055"}.fa-face-grin-tongue-wink:before,.fa-grin-tongue-wink:before{content:"\f58b"}.fa-hand-holding:before{content:"\f4bd"}.fa-plug-circle-exclamation:before{content:"\e55d"}.fa-chain-broken:before,.fa-chain-slash:before,.fa-link-slash:before,.fa-unlink:before{content:"\f127"}.fa-clone:before{content:"\f24d"}.fa-person-walking-arrow-loop-left:before{content:"\e551"}.fa-arrow-up-z-a:before,.fa-sort-alpha-up-alt:before{content:"\f882"}.fa-fire-alt:before,.fa-fire-flame-curved:before{content:"\f7e4"}.fa-tornado:before{content:"\f76f"}.fa-file-circle-plus:before{content:"\e494"}.fa-book-quran:before,.fa-quran:before{content:"\f687"}.fa-anchor:before{content:"\f13d"}.fa-border-all:before{content:"\f84c"}.fa-angry:before,.fa-face-angry:before{content:"\f556"}.fa-cookie-bite:before{content:"\f564"}.fa-arrow-trend-down:before{content:"\e097"}.fa-feed:before,.fa-rss:before{content:"\f09e"}.fa-draw-polygon:before{content:"\f5ee"}.fa-balance-scale:before,.fa-scale-balanced:before{content:"\f24e"}.fa-gauge-simple-high:before,.fa-tachometer-fast:before,.fa-tachometer:before{content:"\f62a"}.fa-shower:before{content:"\f2cc"}.fa-desktop-alt:before,.fa-desktop:before{content:"\f390"}.fa-m:before{content:"\4d"}.fa-table-list:before,.fa-th-list:before{content:"\f00b"}.fa-comment-sms:before,.fa-sms:before{content:"\f7cd"}.fa-book:before{content:"\f02d"}.fa-user-plus:before{content:"\f234"}.fa-check:before{content:"\f00c"}.fa-battery-4:before,.fa-battery-three-quarters:before{content:"\f241"}.fa-house-circle-check:before{content:"\e509"}.fa-angle-left:before{content:"\f104"}.fa-diagram-successor:before{content:"\e47a"}.fa-truck-arrow-right:before{content:"\e58b"}.fa-arrows-split-up-and-left:before{content:"\e4bc"}.fa-fist-raised:before,.fa-hand-fist:before{content:"\f6de"}.fa-cloud-moon:before{content:"\f6c3"}.fa-briefcase:before{content:"\f0b1"}.fa-person-falling:before{content:"\e546"}.fa-image-portrait:before,.fa-portrait:before{content:"\f3e0"}.fa-user-tag:before{content:"\f507"}.fa-rug:before{content:"\e569"}.fa-earth-europe:before,.fa-globe-europe:before{content:"\f7a2"}.fa-cart-flatbed-suitcase:before,.fa-luggage-cart:before{content:"\f59d"}.fa-rectangle-times:before,.fa-rectangle-xmark:before,.fa-times-rectangle:before,.fa-window-close:before{content:"\f410"}.fa-baht-sign:before{content:"\e0ac"}.fa-book-open:before{content:"\f518"}.fa-book-journal-whills:before,.fa-journal-whills:before{content:"\f66a"}.fa-handcuffs:before{content:"\e4f8"}.fa-exclamation-triangle:before,.fa-triangle-exclamation:before,.fa-warning:before{content:"\f071"}.fa-database:before{content:"\f1c0"}.fa-arrow-turn-right:before,.fa-mail-forward:before,.fa-share:before{content:"\f064"}.fa-bottle-droplet:before{content:"\e4c4"}.fa-mask-face:before{content:"\e1d7"}.fa-hill-rockslide:before{content:"\e508"}.fa-exchange-alt:before,.fa-right-left:before{content:"\f362"}.fa-paper-plane:before{content:"\f1d8"}.fa-road-circle-exclamation:before{content:"\e565"}.fa-dungeon:before{content:"\f6d9"}.fa-align-right:before{content:"\f038"}.fa-money-bill-1-wave:before,.fa-money-bill-wave-alt:before{content:"\f53b"}.fa-life-ring:before{content:"\f1cd"}.fa-hands:before,.fa-sign-language:before,.fa-signing:before{content:"\f2a7"}.fa-calendar-day:before{content:"\f783"}.fa-ladder-water:before,.fa-swimming-pool:before,.fa-water-ladder:before{content:"\f5c5"}.fa-arrows-up-down:before,.fa-arrows-v:before{content:"\f07d"}.fa-face-grimace:before,.fa-grimace:before{content:"\f57f"}.fa-wheelchair-alt:before,.fa-wheelchair-move:before{content:"\e2ce"}.fa-level-down-alt:before,.fa-turn-down:before{content:"\f3be"}.fa-person-walking-arrow-right:before{content:"\e552"}.fa-envelope-square:before,.fa-square-envelope:before{content:"\f199"}.fa-dice:before{content:"\f522"}.fa-bowling-ball:before{content:"\f436"}.fa-brain:before{content:"\f5dc"}.fa-band-aid:before,.fa-bandage:before{content:"\f462"}.fa-calendar-minus:before{content:"\f272"}.fa-circle-xmark:before,.fa-times-circle:before,.fa-xmark-circle:before{content:"\f057"}.fa-gifts:before{content:"\f79c"}.fa-hotel:before{content:"\f594"}.fa-earth-asia:before,.fa-globe-asia:before{content:"\f57e"}.fa-id-card-alt:before,.fa-id-card-clip:before{content:"\f47f"}.fa-magnifying-glass-plus:before,.fa-search-plus:before{content:"\f00e"}.fa-thumbs-up:before{content:"\f164"}.fa-user-clock:before{content:"\f4fd"}.fa-allergies:before,.fa-hand-dots:before{content:"\f461"}.fa-file-invoice:before{content:"\f570"}.fa-window-minimize:before{content:"\f2d1"}.fa-coffee:before,.fa-mug-saucer:before{content:"\f0f4"}.fa-brush:before{content:"\f55d"}.fa-mask:before{content:"\f6fa"}.fa-magnifying-glass-minus:before,.fa-search-minus:before{content:"\f010"}.fa-ruler-vertical:before{content:"\f548"}.fa-user-alt:before,.fa-user-large:before{content:"\f406"}.fa-train-tram:before{content:"\e5b4"}.fa-user-nurse:before{content:"\f82f"}.fa-syringe:before{content:"\f48e"}.fa-cloud-sun:before{content:"\f6c4"}.fa-stopwatch-20:before{content:"\e06f"}.fa-square-full:before{content:"\f45c"}.fa-magnet:before{content:"\f076"}.fa-jar:before{content:"\e516"}.fa-note-sticky:before,.fa-sticky-note:before{content:"\f249"}.fa-bug-slash:before{content:"\e490"}.fa-arrow-up-from-water-pump:before{content:"\e4b6"}.fa-bone:before{content:"\f5d7"}.fa-user-injured:before{content:"\f728"}.fa-face-sad-tear:before,.fa-sad-tear:before{content:"\f5b4"}.fa-plane:before{content:"\f072"}.fa-tent-arrows-down:before{content:"\e581"}.fa-exclamation:before{content:"\21"}.fa-arrows-spin:before{content:"\e4bb"}.fa-print:before{content:"\f02f"}.fa-try:before,.fa-turkish-lira-sign:before,.fa-turkish-lira:before{content:"\e2bb"}.fa-dollar-sign:before,.fa-dollar:before,.fa-usd:before{content:"\24"}.fa-x:before{content:"\58"}.fa-magnifying-glass-dollar:before,.fa-search-dollar:before{content:"\f688"}.fa-users-cog:before,.fa-users-gear:before{content:"\f509"}.fa-person-military-pointing:before{content:"\e54a"}.fa-bank:before,.fa-building-columns:before,.fa-institution:before,.fa-museum:before,.fa-university:before{content:"\f19c"}.fa-umbrella:before{content:"\f0e9"}.fa-trowel:before{content:"\e589"}.fa-d:before{content:"\44"}.fa-stapler:before{content:"\e5af"}.fa-masks-theater:before,.fa-theater-masks:before{content:"\f630"}.fa-kip-sign:before{content:"\e1c4"}.fa-hand-point-left:before{content:"\f0a5"}.fa-handshake-alt:before,.fa-handshake-simple:before{content:"\f4c6"}.fa-fighter-jet:before,.fa-jet-fighter:before{content:"\f0fb"}.fa-share-alt-square:before,.fa-square-share-nodes:before{content:"\f1e1"}.fa-barcode:before{content:"\f02a"}.fa-plus-minus:before{content:"\e43c"}.fa-video-camera:before,.fa-video:before{content:"\f03d"}.fa-graduation-cap:before,.fa-mortar-board:before{content:"\f19d"}.fa-hand-holding-medical:before{content:"\e05c"}.fa-person-circle-check:before{content:"\e53e"}.fa-level-up-alt:before,.fa-turn-up:before{content:"\f3bf"}
.fa-sr-only,.fa-sr-only-focusable:not(:focus),.sr-only,.sr-only-focusable:not(:focus){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}:host,:root{--fa-style-family-brands:"Font Awesome 6 Brands";--fa-font-brands:normal 400 1em/1 "Font Awesome 6 Brands"}@font-face{font-family:"Font Awesome 6 Brands";font-style:normal;font-weight:400;font-display:block;src:url(../../static/media/fa-brands-400.878f31251d960bd6266f.woff2) format("woff2"),url(../../static/media/fa-brands-400.016b4a6cdced82ab3aa1.ttf) format("truetype")}.fa-brands,.fab{font-weight:400}.fa-monero:before{content:"\f3d0"}.fa-hooli:before{content:"\f427"}.fa-yelp:before{content:"\f1e9"}.fa-cc-visa:before{content:"\f1f0"}.fa-lastfm:before{content:"\f202"}.fa-shopware:before{content:"\f5b5"}.fa-creative-commons-nc:before{content:"\f4e8"}.fa-aws:before{content:"\f375"}.fa-redhat:before{content:"\f7bc"}.fa-yoast:before{content:"\f2b1"}.fa-cloudflare:before{content:"\e07d"}.fa-ups:before{content:"\f7e0"}.fa-wpexplorer:before{content:"\f2de"}.fa-dyalog:before{content:"\f399"}.fa-bity:before{content:"\f37a"}.fa-stackpath:before{content:"\f842"}.fa-buysellads:before{content:"\f20d"}.fa-first-order:before{content:"\f2b0"}.fa-modx:before{content:"\f285"}.fa-guilded:before{content:"\e07e"}.fa-vnv:before{content:"\f40b"}.fa-js-square:before,.fa-square-js:before{content:"\f3b9"}.fa-microsoft:before{content:"\f3ca"}.fa-qq:before{content:"\f1d6"}.fa-orcid:before{content:"\f8d2"}.fa-java:before{content:"\f4e4"}.fa-invision:before{content:"\f7b0"}.fa-creative-commons-pd-alt:before{content:"\f4ed"}.fa-centercode:before{content:"\f380"}.fa-glide-g:before{content:"\f2a6"}.fa-drupal:before{content:"\f1a9"}.fa-hire-a-helper:before{content:"\f3b0"}.fa-creative-commons-by:before{content:"\f4e7"}.fa-unity:before{content:"\e049"}.fa-whmcs:before{content:"\f40d"}.fa-rocketchat:before{content:"\f3e8"}.fa-vk:before{content:"\f189"}.fa-untappd:before{content:"\f405"}.fa-mailchimp:before{content:"\f59e"}.fa-css3-alt:before{content:"\f38b"}.fa-reddit-square:before,.fa-square-reddit:before{content:"\f1a2"}.fa-vimeo-v:before{content:"\f27d"}.fa-contao:before{content:"\f26d"}.fa-square-font-awesome:before{content:"\e5ad"}.fa-deskpro:before{content:"\f38f"}.fa-sistrix:before{content:"\f3ee"}.fa-instagram-square:before,.fa-square-instagram:before{content:"\e055"}.fa-battle-net:before{content:"\f835"}.fa-the-red-yeti:before{content:"\f69d"}.fa-hacker-news-square:before,.fa-square-hacker-news:before{content:"\f3af"}.fa-edge:before{content:"\f282"}.fa-threads:before{content:"\e618"}.fa-napster:before{content:"\f3d2"}.fa-snapchat-square:before,.fa-square-snapchat:before{content:"\f2ad"}.fa-google-plus-g:before{content:"\f0d5"}.fa-artstation:before{content:"\f77a"}.fa-markdown:before{content:"\f60f"}.fa-sourcetree:before{content:"\f7d3"}.fa-google-plus:before{content:"\f2b3"}.fa-diaspora:before{content:"\f791"}.fa-foursquare:before{content:"\f180"}.fa-stack-overflow:before{content:"\f16c"}.fa-github-alt:before{content:"\f113"}.fa-phoenix-squadron:before{content:"\f511"}.fa-pagelines:before{content:"\f18c"}.fa-algolia:before{content:"\f36c"}.fa-red-river:before{content:"\f3e3"}.fa-creative-commons-sa:before{content:"\f4ef"}.fa-safari:before{content:"\f267"}.fa-google:before{content:"\f1a0"}.fa-font-awesome-alt:before,.fa-square-font-awesome-stroke:before{content:"\f35c"}.fa-atlassian:before{content:"\f77b"}.fa-linkedin-in:before{content:"\f0e1"}.fa-digital-ocean:before{content:"\f391"}.fa-nimblr:before{content:"\f5a8"}.fa-chromecast:before{content:"\f838"}.fa-evernote:before{content:"\f839"}.fa-hacker-news:before{content:"\f1d4"}.fa-creative-commons-sampling:before{content:"\f4f0"}.fa-adversal:before{content:"\f36a"}.fa-creative-commons:before{content:"\f25e"}.fa-watchman-monitoring:before{content:"\e087"}.fa-fonticons:before{content:"\f280"}.fa-weixin:before{content:"\f1d7"}.fa-shirtsinbulk:before{content:"\f214"}.fa-codepen:before{content:"\f1cb"}.fa-git-alt:before{content:"\f841"}.fa-lyft:before{content:"\f3c3"}.fa-rev:before{content:"\f5b2"}.fa-windows:before{content:"\f17a"}.fa-wizards-of-the-coast:before{content:"\f730"}.fa-square-viadeo:before,.fa-viadeo-square:before{content:"\f2aa"}.fa-meetup:before{content:"\f2e0"}.fa-centos:before{content:"\f789"}.fa-adn:before{content:"\f170"}.fa-cloudsmith:before{content:"\f384"}.fa-pied-piper-alt:before{content:"\f1a8"}.fa-dribbble-square:before,.fa-square-dribbble:before{content:"\f397"}.fa-codiepie:before{content:"\f284"}.fa-node:before{content:"\f419"}.fa-mix:before{content:"\f3cb"}.fa-steam:before{content:"\f1b6"}.fa-cc-apple-pay:before{content:"\f416"}.fa-scribd:before{content:"\f28a"}.fa-debian:before{content:"\e60b"}.fa-openid:before{content:"\f19b"}.fa-instalod:before{content:"\e081"}.fa-expeditedssl:before{content:"\f23e"}.fa-sellcast:before{content:"\f2da"}.fa-square-twitter:before,.fa-twitter-square:before{content:"\f081"}.fa-r-project:before{content:"\f4f7"}.fa-delicious:before{content:"\f1a5"}.fa-freebsd:before{content:"\f3a4"}.fa-vuejs:before{content:"\f41f"}.fa-accusoft:before{content:"\f369"}.fa-ioxhost:before{content:"\f208"}.fa-fonticons-fi:before{content:"\f3a2"}.fa-app-store:before{content:"\f36f"}.fa-cc-mastercard:before{content:"\f1f1"}.fa-itunes-note:before{content:"\f3b5"}.fa-golang:before{content:"\e40f"}.fa-kickstarter:before{content:"\f3bb"}.fa-grav:before{content:"\f2d6"}.fa-weibo:before{content:"\f18a"}.fa-uncharted:before{content:"\e084"}.fa-firstdraft:before{content:"\f3a1"}.fa-square-youtube:before,.fa-youtube-square:before{content:"\f431"}.fa-wikipedia-w:before{content:"\f266"}.fa-rendact:before,.fa-wpressr:before{content:"\f3e4"}.fa-angellist:before{content:"\f209"}.fa-galactic-republic:before{content:"\f50c"}.fa-nfc-directional:before{content:"\e530"}.fa-skype:before{content:"\f17e"}.fa-joget:before{content:"\f3b7"}.fa-fedora:before{content:"\f798"}.fa-stripe-s:before{content:"\f42a"}.fa-meta:before{content:"\e49b"}.fa-laravel:before{content:"\f3bd"}.fa-hotjar:before{content:"\f3b1"}.fa-bluetooth-b:before{content:"\f294"}.fa-sticker-mule:before{content:"\f3f7"}.fa-creative-commons-zero:before{content:"\f4f3"}.fa-hips:before{content:"\f452"}.fa-behance:before{content:"\f1b4"}.fa-reddit:before{content:"\f1a1"}.fa-discord:before{content:"\f392"}.fa-chrome:before{content:"\f268"}.fa-app-store-ios:before{content:"\f370"}.fa-cc-discover:before{content:"\f1f2"}.fa-wpbeginner:before{content:"\f297"}.fa-confluence:before{content:"\f78d"}.fa-mdb:before{content:"\f8ca"}.fa-dochub:before{content:"\f394"}.fa-accessible-icon:before{content:"\f368"}.fa-ebay:before{content:"\f4f4"}.fa-amazon:before{content:"\f270"}.fa-unsplash:before{content:"\e07c"}.fa-yarn:before{content:"\f7e3"}.fa-square-steam:before,.fa-steam-square:before{content:"\f1b7"}.fa-500px:before{content:"\f26e"}.fa-square-vimeo:before,.fa-vimeo-square:before{content:"\f194"}.fa-asymmetrik:before{content:"\f372"}.fa-font-awesome-flag:before,.fa-font-awesome-logo-full:before,.fa-font-awesome:before{content:"\f2b4"}.fa-gratipay:before{content:"\f184"}.fa-apple:before{content:"\f179"}.fa-hive:before{content:"\e07f"}.fa-gitkraken:before{content:"\f3a6"}.fa-keybase:before{content:"\f4f5"}.fa-apple-pay:before{content:"\f415"}.fa-padlet:before{content:"\e4a0"}.fa-amazon-pay:before{content:"\f42c"}.fa-github-square:before,.fa-square-github:before{content:"\f092"}.fa-stumbleupon:before{content:"\f1a4"}.fa-fedex:before{content:"\f797"}.fa-phoenix-framework:before{content:"\f3dc"}.fa-shopify:before{content:"\e057"}.fa-neos:before{content:"\f612"}.fa-square-threads:before{content:"\e619"}.fa-hackerrank:before{content:"\f5f7"}.fa-researchgate:before{content:"\f4f8"}.fa-swift:before{content:"\f8e1"}.fa-angular:before{content:"\f420"}.fa-speakap:before{content:"\f3f3"}.fa-angrycreative:before{content:"\f36e"}.fa-y-combinator:before{content:"\f23b"}.fa-empire:before{content:"\f1d1"}.fa-envira:before{content:"\f299"}.fa-gitlab-square:before,.fa-square-gitlab:before{content:"\e5ae"}.fa-studiovinari:before{content:"\f3f8"}.fa-pied-piper:before{content:"\f2ae"}.fa-wordpress:before{content:"\f19a"}.fa-product-hunt:before{content:"\f288"}.fa-firefox:before{content:"\f269"}.fa-linode:before{content:"\f2b8"}.fa-goodreads:before{content:"\f3a8"}.fa-odnoklassniki-square:before,.fa-square-odnoklassniki:before{content:"\f264"}.fa-jsfiddle:before{content:"\f1cc"}.fa-sith:before{content:"\f512"}.fa-themeisle:before{content:"\f2b2"}.fa-page4:before{content:"\f3d7"}.fa-hashnode:before{content:"\e499"}.fa-react:before{content:"\f41b"}.fa-cc-paypal:before{content:"\f1f4"}.fa-squarespace:before{content:"\f5be"}.fa-cc-stripe:before{content:"\f1f5"}.fa-creative-commons-share:before{content:"\f4f2"}.fa-bitcoin:before{content:"\f379"}.fa-keycdn:before{content:"\f3ba"}.fa-opera:before{content:"\f26a"}.fa-itch-io:before{content:"\f83a"}.fa-umbraco:before{content:"\f8e8"}.fa-galactic-senate:before{content:"\f50d"}.fa-ubuntu:before{content:"\f7df"}.fa-draft2digital:before{content:"\f396"}.fa-stripe:before{content:"\f429"}.fa-houzz:before{content:"\f27c"}.fa-gg:before{content:"\f260"}.fa-dhl:before{content:"\f790"}.fa-pinterest-square:before,.fa-square-pinterest:before{content:"\f0d3"}.fa-xing:before{content:"\f168"}.fa-blackberry:before{content:"\f37b"}.fa-creative-commons-pd:before{content:"\f4ec"}.fa-playstation:before{content:"\f3df"}.fa-quinscape:before{content:"\f459"}.fa-less:before{content:"\f41d"}.fa-blogger-b:before{content:"\f37d"}.fa-opencart:before{content:"\f23d"}.fa-vine:before{content:"\f1ca"}.fa-paypal:before{content:"\f1ed"}.fa-gitlab:before{content:"\f296"}.fa-typo3:before{content:"\f42b"}.fa-reddit-alien:before{content:"\f281"}.fa-yahoo:before{content:"\f19e"}.fa-dailymotion:before{content:"\e052"}.fa-affiliatetheme:before{content:"\f36b"}.fa-pied-piper-pp:before{content:"\f1a7"}.fa-bootstrap:before{content:"\f836"}.fa-odnoklassniki:before{content:"\f263"}.fa-nfc-symbol:before{content:"\e531"}.fa-ethereum:before{content:"\f42e"}.fa-speaker-deck:before{content:"\f83c"}.fa-creative-commons-nc-eu:before{content:"\f4e9"}.fa-patreon:before{content:"\f3d9"}.fa-avianex:before{content:"\f374"}.fa-ello:before{content:"\f5f1"}.fa-gofore:before{content:"\f3a7"}.fa-bimobject:before{content:"\f378"}.fa-facebook-f:before{content:"\f39e"}.fa-google-plus-square:before,.fa-square-google-plus:before{content:"\f0d4"}.fa-mandalorian:before{content:"\f50f"}.fa-first-order-alt:before{content:"\f50a"}.fa-osi:before{content:"\f41a"}.fa-google-wallet:before{content:"\f1ee"}.fa-d-and-d-beyond:before{content:"\f6ca"}.fa-periscope:before{content:"\f3da"}.fa-fulcrum:before{content:"\f50b"}.fa-cloudscale:before{content:"\f383"}.fa-forumbee:before{content:"\f211"}.fa-mizuni:before{content:"\f3cc"}.fa-schlix:before{content:"\f3ea"}.fa-square-xing:before,.fa-xing-square:before{content:"\f169"}.fa-bandcamp:before{content:"\f2d5"}.fa-wpforms:before{content:"\f298"}.fa-cloudversify:before{content:"\f385"}.fa-usps:before{content:"\f7e1"}.fa-megaport:before{content:"\f5a3"}.fa-magento:before{content:"\f3c4"}.fa-spotify:before{content:"\f1bc"}.fa-optin-monster:before{content:"\f23c"}.fa-fly:before{content:"\f417"}.fa-aviato:before{content:"\f421"}.fa-itunes:before{content:"\f3b4"}.fa-cuttlefish:before{content:"\f38c"}.fa-blogger:before{content:"\f37c"}.fa-flickr:before{content:"\f16e"}.fa-viber:before{content:"\f409"}.fa-soundcloud:before{content:"\f1be"}.fa-digg:before{content:"\f1a6"}.fa-tencent-weibo:before{content:"\f1d5"}.fa-symfony:before{content:"\f83d"}.fa-maxcdn:before{content:"\f136"}.fa-etsy:before{content:"\f2d7"}.fa-facebook-messenger:before{content:"\f39f"}.fa-audible:before{content:"\f373"}.fa-think-peaks:before{content:"\f731"}.fa-bilibili:before{content:"\e3d9"}.fa-erlang:before{content:"\f39d"}.fa-x-twitter:before{content:"\e61b"}.fa-cotton-bureau:before{content:"\f89e"}.fa-dashcube:before{content:"\f210"}.fa-42-group:before,.fa-innosoft:before{content:"\e080"}.fa-stack-exchange:before{content:"\f18d"}.fa-elementor:before{content:"\f430"}.fa-pied-piper-square:before,.fa-square-pied-piper:before{content:"\e01e"}.fa-creative-commons-nd:before{content:"\f4eb"}.fa-palfed:before{content:"\f3d8"}.fa-superpowers:before{content:"\f2dd"}.fa-resolving:before{content:"\f3e7"}.fa-xbox:before{content:"\f412"}.fa-searchengin:before{content:"\f3eb"}.fa-tiktok:before{content:"\e07b"}.fa-facebook-square:before,.fa-square-facebook:before{content:"\f082"}.fa-renren:before{content:"\f18b"}.fa-linux:before{content:"\f17c"}.fa-glide:before{content:"\f2a5"}.fa-linkedin:before{content:"\f08c"}.fa-hubspot:before{content:"\f3b2"}.fa-deploydog:before{content:"\f38e"}.fa-twitch:before{content:"\f1e8"}.fa-ravelry:before{content:"\f2d9"}.fa-mixer:before{content:"\e056"}.fa-lastfm-square:before,.fa-square-lastfm:before{content:"\f203"}.fa-vimeo:before{content:"\f40a"}.fa-mendeley:before{content:"\f7b3"}.fa-uniregistry:before{content:"\f404"}.fa-figma:before{content:"\f799"}.fa-creative-commons-remix:before{content:"\f4ee"}.fa-cc-amazon-pay:before{content:"\f42d"}.fa-dropbox:before{content:"\f16b"}.fa-instagram:before{content:"\f16d"}.fa-cmplid:before{content:"\e360"}.fa-facebook:before{content:"\f09a"}.fa-gripfire:before{content:"\f3ac"}.fa-jedi-order:before{content:"\f50e"}.fa-uikit:before{content:"\f403"}.fa-fort-awesome-alt:before{content:"\f3a3"}.fa-phabricator:before{content:"\f3db"}.fa-ussunnah:before{content:"\f407"}.fa-earlybirds:before{content:"\f39a"}.fa-trade-federation:before{content:"\f513"}.fa-autoprefixer:before{content:"\f41c"}.fa-whatsapp:before{content:"\f232"}.fa-slideshare:before{content:"\f1e7"}.fa-google-play:before{content:"\f3ab"}.fa-viadeo:before{content:"\f2a9"}.fa-line:before{content:"\f3c0"}.fa-google-drive:before{content:"\f3aa"}.fa-servicestack:before{content:"\f3ec"}.fa-simplybuilt:before{content:"\f215"}.fa-bitbucket:before{content:"\f171"}.fa-imdb:before{content:"\f2d8"}.fa-deezer:before{content:"\e077"}.fa-raspberry-pi:before{content:"\f7bb"}.fa-jira:before{content:"\f7b1"}.fa-docker:before{content:"\f395"}.fa-screenpal:before{content:"\e570"}.fa-bluetooth:before{content:"\f293"}.fa-gitter:before{content:"\f426"}.fa-d-and-d:before{content:"\f38d"}.fa-microblog:before{content:"\e01a"}.fa-cc-diners-club:before{content:"\f24c"}.fa-gg-circle:before{content:"\f261"}.fa-pied-piper-hat:before{content:"\f4e5"}.fa-kickstarter-k:before{content:"\f3bc"}.fa-yandex:before{content:"\f413"}.fa-readme:before{content:"\f4d5"}.fa-html5:before{content:"\f13b"}.fa-sellsy:before{content:"\f213"}.fa-sass:before{content:"\f41e"}.fa-wirsindhandwerk:before,.fa-wsh:before{content:"\e2d0"}.fa-buromobelexperte:before{content:"\f37f"}.fa-salesforce:before{content:"\f83b"}.fa-octopus-deploy:before{content:"\e082"}.fa-medapps:before{content:"\f3c6"}.fa-ns8:before{content:"\f3d5"}.fa-pinterest-p:before{content:"\f231"}.fa-apper:before{content:"\f371"}.fa-fort-awesome:before{content:"\f286"}.fa-waze:before{content:"\f83f"}.fa-cc-jcb:before{content:"\f24b"}.fa-snapchat-ghost:before,.fa-snapchat:before{content:"\f2ab"}.fa-fantasy-flight-games:before{content:"\f6dc"}.fa-rust:before{content:"\e07a"}.fa-wix:before{content:"\f5cf"}.fa-behance-square:before,.fa-square-behance:before{content:"\f1b5"}.fa-supple:before{content:"\f3f9"}.fa-rebel:before{content:"\f1d0"}.fa-css3:before{content:"\f13c"}.fa-staylinked:before{content:"\f3f5"}.fa-kaggle:before{content:"\f5fa"}.fa-space-awesome:before{content:"\e5ac"}.fa-deviantart:before{content:"\f1bd"}.fa-cpanel:before{content:"\f388"}.fa-goodreads-g:before{content:"\f3a9"}.fa-git-square:before,.fa-square-git:before{content:"\f1d2"}.fa-square-tumblr:before,.fa-tumblr-square:before{content:"\f174"}.fa-trello:before{content:"\f181"}.fa-creative-commons-nc-jp:before{content:"\f4ea"}.fa-get-pocket:before{content:"\f265"}.fa-perbyte:before{content:"\e083"}.fa-grunt:before{content:"\f3ad"}.fa-weebly:before{content:"\f5cc"}.fa-connectdevelop:before{content:"\f20e"}.fa-leanpub:before{content:"\f212"}.fa-black-tie:before{content:"\f27e"}.fa-themeco:before{content:"\f5c6"}.fa-python:before{content:"\f3e2"}.fa-android:before{content:"\f17b"}.fa-bots:before{content:"\e340"}.fa-free-code-camp:before{content:"\f2c5"}.fa-hornbill:before{content:"\f592"}.fa-js:before{content:"\f3b8"}.fa-ideal:before{content:"\e013"}.fa-git:before{content:"\f1d3"}.fa-dev:before{content:"\f6cc"}.fa-sketch:before{content:"\f7c6"}.fa-yandex-international:before{content:"\f414"}.fa-cc-amex:before{content:"\f1f3"}.fa-uber:before{content:"\f402"}.fa-github:before{content:"\f09b"}.fa-php:before{content:"\f457"}.fa-alipay:before{content:"\f642"}.fa-youtube:before{content:"\f167"}.fa-skyatlas:before{content:"\f216"}.fa-firefox-browser:before{content:"\e007"}.fa-replyd:before{content:"\f3e6"}.fa-suse:before{content:"\f7d6"}.fa-jenkins:before{content:"\f3b6"}.fa-twitter:before{content:"\f099"}.fa-rockrms:before{content:"\f3e9"}.fa-pinterest:before{content:"\f0d2"}.fa-buffer:before{content:"\f837"}.fa-npm:before{content:"\f3d4"}.fa-yammer:before{content:"\f840"}.fa-btc:before{content:"\f15a"}.fa-dribbble:before{content:"\f17d"}.fa-stumbleupon-circle:before{content:"\f1a3"}.fa-internet-explorer:before{content:"\f26b"}.fa-stubber:before{content:"\e5c7"}.fa-telegram-plane:before,.fa-telegram:before{content:"\f2c6"}.fa-old-republic:before{content:"\f510"}.fa-odysee:before{content:"\e5c6"}.fa-square-whatsapp:before,.fa-whatsapp-square:before{content:"\f40c"}.fa-node-js:before{content:"\f3d3"}.fa-edge-legacy:before{content:"\e078"}.fa-slack-hash:before,.fa-slack:before{content:"\f198"}.fa-medrt:before{content:"\f3c8"}.fa-usb:before{content:"\f287"}.fa-tumblr:before{content:"\f173"}.fa-vaadin:before{content:"\f408"}.fa-quora:before{content:"\f2c4"}.fa-square-x-twitter:before{content:"\e61a"}.fa-reacteurope:before{content:"\f75d"}.fa-medium-m:before,.fa-medium:before{content:"\f23a"}.fa-amilia:before{content:"\f36d"}.fa-mixcloud:before{content:"\f289"}.fa-flipboard:before{content:"\f44d"}.fa-viacoin:before{content:"\f237"}.fa-critical-role:before{content:"\f6c9"}.fa-sitrox:before{content:"\e44a"}.fa-discourse:before{content:"\f393"}.fa-joomla:before{content:"\f1aa"}.fa-mastodon:before{content:"\f4f6"}.fa-airbnb:before{content:"\f834"}.fa-wolf-pack-battalion:before{content:"\f514"}.fa-buy-n-large:before{content:"\f8a6"}.fa-gulp:before{content:"\f3ae"}.fa-creative-commons-sampling-plus:before{content:"\f4f1"}.fa-strava:before{content:"\f428"}.fa-ember:before{content:"\f423"}.fa-canadian-maple-leaf:before{content:"\f785"}.fa-teamspeak:before{content:"\f4f9"}.fa-pushed:before{content:"\f3e1"}.fa-wordpress-simple:before{content:"\f411"}.fa-nutritionix:before{content:"\f3d6"}.fa-wodu:before{content:"\e088"}.fa-google-pay:before{content:"\e079"}.fa-intercom:before{content:"\f7af"}.fa-zhihu:before{content:"\f63f"}.fa-korvue:before{content:"\f42f"}.fa-pix:before{content:"\e43a"}.fa-steam-symbol:before{content:"\f3f6"}:host,:root{--fa-font-regular:normal 400 1em/1 "Font Awesome 6 Free"}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:400;font-display:block;src:url(../../static/media/fa-regular-400.b041b1fa4fe241b23445.woff2) format("woff2"),url(../../static/media/fa-regular-400.50701fbb8177c2dde530.ttf) format("truetype")}.fa-regular,.far{font-weight:400}:host,:root{--fa-style-family-classic:"Font Awesome 6 Free";--fa-font-solid:normal 900 1em/1 "Font Awesome 6 Free"}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:900;font-display:block;src:url(../../static/media/fa-solid-900.b6879d41b0852f01ed5b.woff2) format("woff2"),url(../../static/media/fa-solid-900.d75e3fd1eb12e9bd6655.ttf) format("truetype")}.fa-solid,.fas{font-weight:900}@font-face{font-family:"Font Awesome 5 Brands";font-display:block;font-weight:400;src:url(../../static/media/fa-brands-400.878f31251d960bd6266f.woff2) format("woff2"),url(../../static/media/fa-brands-400.016b4a6cdced82ab3aa1.ttf) format("truetype")}@font-face{font-family:"Font Awesome 5 Free";font-display:block;font-weight:900;src:url(../../static/media/fa-solid-900.b6879d41b0852f01ed5b.woff2) format("woff2"),url(../../static/media/fa-solid-900.d75e3fd1eb12e9bd6655.ttf) format("truetype")}@font-face{font-family:"Font Awesome 5 Free";font-display:block;font-weight:400;src:url(../../static/media/fa-regular-400.b041b1fa4fe241b23445.woff2) format("woff2"),url(../../static/media/fa-regular-400.50701fbb8177c2dde530.ttf) format("truetype")}@font-face{font-family:"FontAwesome";font-display:block;src:url(../../static/media/fa-solid-900.b6879d41b0852f01ed5b.woff2) format("woff2"),url(../../static/media/fa-solid-900.d75e3fd1eb12e9bd6655.ttf) format("truetype")}@font-face{font-family:"FontAwesome";font-display:block;src:url(../../static/media/fa-brands-400.878f31251d960bd6266f.woff2) format("woff2"),url(../../static/media/fa-brands-400.016b4a6cdced82ab3aa1.ttf) format("truetype")}@font-face{font-family:"FontAwesome";font-display:block;src:url(../../static/media/fa-regular-400.b041b1fa4fe241b23445.woff2) format("woff2"),url(../../static/media/fa-regular-400.50701fbb8177c2dde530.ttf) format("truetype");unicode-range:u+f003,u+f006,u+f014,u+f016-f017,u+f01a-f01b,u+f01d,u+f022,u+f03e,u+f044,u+f046,u+f05c-f05d,u+f06e,u+f070,u+f087-f088,u+f08a,u+f094,u+f096-f097,u+f09d,u+f0a0,u+f0a2,u+f0a4-f0a7,u+f0c5,u+f0c7,u+f0e5-f0e6,u+f0eb,u+f0f6-f0f8,u+f10c,u+f114-f115,u+f118-f11a,u+f11c-f11d,u+f133,u+f147,u+f14e,u+f150-f152,u+f185-f186,u+f18e,u+f190-f192,u+f196,u+f1c1-f1c9,u+f1d9,u+f1db,u+f1e3,u+f1ea,u+f1f7,u+f1f9,u+f20a,u+f247-f248,u+f24a,u+f24d,u+f255-f25b,u+f25d,u+f271-f274,u+f278,u+f27b,u+f28c,u+f28e,u+f29c,u+f2b5,u+f2b7,u+f2ba,u+f2bc,u+f2be,u+f2c0-f2c1,u+f2c3,u+f2d0,u+f2d2,u+f2d4,u+f2dc}@font-face{font-family:"FontAwesome";font-display:block;src:url(../../static/media/fa-v4compatibility.1bac2991f3dbfa237aec.woff2) format("woff2"),url(../../static/media/fa-v4compatibility.c6a0c95b0a95c4553700.ttf) format("truetype");unicode-range:u+f041,u+f047,u+f065-f066,u+f07d-f07e,u+f080,u+f08b,u+f08e,u+f090,u+f09a,u+f0ac,u+f0ae,u+f0b2,u+f0d0,u+f0d6,u+f0e4,u+f0ec,u+f10a-f10b,u+f123,u+f13e,u+f148-f149,u+f14c,u+f156,u+f15e,u+f160-f161,u+f163,u+f175-f178,u+f195,u+f1f8,u+f219,u+f27a}
.loginSection .up {
  display: none;
}
#login {
  width: 580px;
  padding: 20px 70px;
}
#login .top {
  margin: 0 0 20px;
  background: #ffffff;
  padding: 0;
}
#login .top div {
  width: 29px;
  height: 29px;
  border-radius: 100%;
  border: 1px solid #cccccc;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
#login .top div:hover {
  background: #cccccc;
}
#login .logo {
  width: 310px;
  padding: 15px 0 40px;
}
#login .logo img {
  width: 100%;
}
#login .email .input {
  width: calc(100% - 120px - 10px) !important;
}
#login .email #pinkBtn {
  width: 120px;
  height: 55px;
  border-radius: 5px;
  margin: 0 0 16px;
}
#login .input {
  width: 100%;
  height: 55px;
  /* background: #eeeeee; */
  border-radius: 5px;
  box-shadow: none;
  padding: 16px 20px;
  font-size: 16px;
  /* margin: 0 0 16; */
}
#login .input::placeholder {
  color: #a3a1a7;
}
#login .input:hover {
  border: 1px solid #ec15ff;
}
#login .input:focus {
  background: #ffffff;
  border: 1px solid #ec15ff;
}
#login .check {
  margin: 0 0 16px;
}
#login #purpleBtn {
  width: 100%;
  height: 58px;
  border-radius: 5px;
  font-size: 18px;
  margin: 0 0 26px;
}
#login .signup {
  margin: 0 0 24px;
}
#login .signup p {
  color: #676767;
  font-size: 13px;
  padding: 0 15px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
#login .signup span:hover {
  color: #ec15ff;
}
#login .signup p:first-child {
  /*border-right: 1px solid #cccccc;*/
}
#login .line {
  position: relative;
  margin: 0 0 20px;
}
#login .line p {
  font-size: 16px;
  z-index: 2;
  padding: 0 10px;
  background: #ffffff;
  color: #6d6c75;
}
#login .line .absoluteBox {
  position: absolute;
  top: 50%;
  height: 1px;
  left: 0;
  margin: -0.5px 0 0;
  background: #dfdce4;
}

#login #kakao,
#login #naver,
#login #facebook,
#login #google {
  width: 100%;
  height: 58px;
  margin: 0 0 16px;
  border-radius: 4px;
}
#login #kakao img,
#login #naver img,
#login #facebook img,
#login #google img {
  width: 20px;
  margin: 0 20px 0 0;
}
#login #kakao p,
#login #naver p,
#login #facebook p,
#login #google p {
  font-size: 18px;
}
#login .ant-checkbox .ant-checkbox-inner {
  width: 20px;
  height: 20px;
}

.loginSection.ant-input-outlined {
  background: #eee;
  font-weight: 500;
}
.loginSection #login .ant-row div:first-child {
  flex: 0 0 1;
}

#login input:-webkit-autofill {
  -webkit-text-fill-color: #000;
  -webkit-transition: background-color 5000s ease-in-out 0s;
  transition: background-color 5000s ease-in-out 0s;
}
#login input:-webkit-autofill:focus,
#login input:-webkit-autofill:active {
  -webkit-text-fill-color: #000;
  -webkit-transition: background-color 5000s ease-in-out 0s;
  transition: background-color 5000s ease-in-out 0s;
}
#login input:-webkit-autofill {
  -webkit-text-fill-color: #000;
  -webkit-transition: background-color 5000s ease-in-out 0s;
  transition: background-color 5000s ease-in-out 0s;
}
#login input:autofill {
  -webkit-text-fill-color: #000;
  transition: background-color 5000s ease-in-out 0s;
}
#login input:-webkit-autofill:hover, #login input:-webkit-autofill:focus, #login input:-webkit-autofill:active {
  -webkit-text-fill-color: #000;
  -webkit-transition: background-color 5000s ease-in-out 0s;
  transition: background-color 5000s ease-in-out 0s;
}
#login input:autofill:hover,
#login input:autofill:focus,
#login input:autofill:active {
  -webkit-text-fill-color: #000;
  transition: background-color 5000s ease-in-out 0s;
}

#signup,
#sign-in {
  font-size: 14px;
  gap: 16px;
  display: flex;
  flex-direction: column;
}
#signup.ant-checkbox-wrapper::hover.ant-checkbox-wrapper:not(.ant-checkbox-wrapper-disabled):hover .ant-checkbox-inner,
#signup.ant-checkbox-wrapper::hover .ant-checkbox:not(.ant-checkbox-disabled):hover .ant-checkbox-inner,
#sign-in.ant-checkbox-wrapper::hover.ant-checkbox-wrapper:not(.ant-checkbox-wrapper-disabled):hover .ant-checkbox-inner,
#sign-in.ant-checkbox-wrapper::hover .ant-checkbox:not(.ant-checkbox-disabled):hover .ant-checkbox-inner {
  border: #ec15ff;
  background-color: inherit;
}

@media (max-width: 700px) {
  #login {
    width: 100%;
    padding: 20px 40px 0;
  }

  #login .input {
    font-size: 14px;
    height: 44px;
  }
  #login .input::placeholder {
    font-size: 14px;
  }
  #login .check {
    margin: 0;
  }
  #login button {
    height: 48px !important;
  }
  .loginSection {
    min-height: 320px;
  }
}

#signup {
  width: 580px;
  padding: 20px 70px;
}
#signup .top {
  margin: 0 0 20px;
  background: #ffffff;
  padding: 0;
}
#signup .top div {
  width: 29px;
  height: 29px;
  border-radius: 100%;
  border: 1px solid #cccccc;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
#signup .top div:hover {
  background: #cccccc;
}

#signup .logo {
  width: 310px;
  padding: 15px 0 20px;
}
#signup .logo img {
  width: 100%;
}
#signup .email .input {
  width: calc(100% - 120px - 10px) !important;
}
#signup .confirmation .input {
  width: calc(100% - 120px - 10px - 64px) !important;
}
#signup .email #pinkBtn,
#signup .confirmation #pinkBtn {
  width: 120px;
  height: 55px;
  border-radius: 5px;
}
#signup .input,
#signup .email .input,
#signup .confirmation .input {
  width: 100%;
  height: 55px;
  /* background: #eeeeee; */
  border-radius: 5px;
  box-shadow: none;
  padding: 16px 20px;
  font-size: 16px;
}
#signup .input::placeholder,
#signup .email .input::placeholder,
#signup .confirmation .input::placeholder {
  color: #a3a1a7;
}
#signup .input:hover,
#signup .email .input:hover,
#signup .confirmation .input:hover {
  border: 1px solid #ec15ff;
}
#signup .input:focus,
#signup .email .input:focus,
#signup .confirmation .input:focus {
  background: #ffffff;
  border: 1px solid #ec15ff;
}
#signup .infoCount {
  width: 64px;
  color: #ec15ff;
  text-align: center;
}
#signup .check {
  margin: 0 0 16px;
}
#signup .checkBox {
  border-top: 1px solid #dfdce3;
  padding: 20px 0 0;
}
#signup .checkBox div {
  margin: 0 0 15px;
}
#signup .checkBox div p {
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  line-height: 1;
  border-bottom: 1px solid #000;
  color: #000;
}
#signup .checkBox div p:hover {
  color: #ec15ff;
  border-bottom: 1px solid #ec15ff;
}
#signup .allCheck {
  width: 100%;
  height: 30px;
  margin-top: 28px;
  margin-bottom: 8px;
}
#signup #purpleBtn {
  width: 100%;
  height: 58px;
  border-radius: 5px;
  font-size: 18px;
  margin: 0 0 26px;
}
#signup .signup {
  margin: 0 0 24px;
}
#signup .signup p {
  color: #676767;
  font-size: 13px;
  padding: 0 15px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
#signup .signup span:hover {
  color: #ec15ff;
}
#signup .signup p:first-child {
  border-right: 1px solid rgba(0, 0, 0, 0.4);
}
#signup .line {
  position: relative;
  margin: 0 0 20px;
}
#signup .line p {
  font-size: 16px;
  z-index: 2;
  padding: 0 10px;
  background: #ffffff;
  color: #6d6c75;
}
#signup .line .absoluteBox {
  position: absolute;
  top: 50%;
  height: 1px;
  left: 0;
  margin: -0.5px 0 0;
  background: #dfdce4;
}
#signup .btn #kakao,
#signup .btn #naver,
#signup .btn #facebook,
#signup .btn #google {
  width: 100%;
  height: 58px;
  margin: 0 0 16px;
  border-radius: 4px;
}
#signup #kakao img,
#signup #naver img,
#signup #facebook img,
#signup #google img {
  width: 20px;
  margin: 0 20px 0 0;
}
#signup #kakao p,
#signup #naver p,
#signup #facebook p,
#signup #google p {
  font-size: 18px;
}

#signup .squre {
  width: 80px;
  height: 80px;
  margin: 0 0 16px;
  border-radius: 24px;
  flex-direction: column;
}
#signup #kakao.squre img,
#signup #naver.squre img,
#signup #google.squre img {
  width: 20px;
  margin: 0 0 10px;
}
#signup #kakao.squre p,
#signup #naver.squre p,
#signup #google.squre p {
  font-size: 14px;
}

#success .top {
  margin: 0 0 20px;
}
#success .top h1 {
  font-size: 24px;
  font-weight: bold;
  color: #0e0e1f;
}
#success .top p {
  font-size: 24px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
#success .top p:hover {
  color: #ec15ff;
}
#success .content {
  padding: 50px 0;
}
#success .content p {
  font-size: 20px;
}
#success #purpleBtn {
  width: 100%;
  height: 58px;
  font-size: 18px;
  border-radius: 4px;
}

#error .top {
  margin: 0 0 20px;
}
#error .top h1 {
  font-size: 24px;
  font-weight: bold;
  color: #0e0e1f;
}
#error .top p {
  font-size: 24px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
#error .top p:hover {
  color: #ec15ff;
}
#error .content {
  padding: 53px 0;
}
#error .content p {
  font-size: 20px;
}
#error .content span {
  font-size: 20px;
  color: #a3a1a7;
}
#error #purpleBtn {
  width: 100%;
  height: 58px;
  font-size: 18px;
  border-radius: 4px;
}
/* 회원가입  yjlee.css*/
#signup .ant-input-disabled.input:hover {
  border: 1px solid #d9d9d9;
}
#signup .checkBox div {
  margin: 0;
  margin: initial;
}
#signup .checkBox div.ant-form-item {
  margin: 0 0 15px;
}
#signup .checkBox div.ant-form-item.ant-form-item-has-error .ant-checkbox .ant-checkbox-inner {
  border-color: #ff4d4f;
}

@media (max-width: 700px) {
  #signup {
    width: 100%;
    padding: 20px 40px;
  }
  #signup .input,
  #signup .email .input,
  #signup .input::placeholder,
  #signup .email .input::placeholder {
    font-size: 14px;
    height: 44px;
  }
  #signup button:not(.squre) {
    height: 44px !important;
  }
  #signup button:not(.squre):has(p) {
    height: auto !important;
  }
  #signup .email .input {
    width: calc(100% - 90px - 10px) !important;
  }
  #signup .email #pinkBtn,
  #signup .confirmation #pinkBtn {
    width: 90px;
    min-width: 90px;
  }
  #signup .input,
  #signup .email .input,
  #signup .confirmation .input {
    padding: 16px 12px;
  }
  #signup .checkBox div.ant-form-item {
    margin: 0 0 8px;
  }
  #signup .checkBox div span {
    font-weight: 500;
    font-size: 13px;
    letter-spacing: -0.3px;
  }
  #signup .checkBox {
    padding: 12px 0 8px;
  }
  #signup #purpleBtn {
    margin: 0 0 8px;
  }
  #signup .signup {
    margin: 0 0 20px;
  }
  #signup .line {
    position: relative;
    margin: 0 0 4px;
  }

  #signup .squre {
    margin: 0;
  }
}

#findPw {
  width: 580px;
  padding: 20px 70px;
  text-align: center;
}

#findPw .top {
  margin: 0 0 20px;
  background: #ffffff;
  padding: 0;
}

#findPw .top div {
  width: 29px;
  height: 29px;
  border-radius: 100%;
  border: 1px solid #cccccc;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

#findPw .top div:hover {
  background: #cccccc;
}

#findPw .logo {
  width: 310px;
  padding: 15px 0 40px;
}

#findPw .logo img {
  width: 100%;
}

#findPw > h1 {
  font-size: 24px;
  color: #0e0e1f;
  font-weight: bold;
  margin: 0 0 60px;
}

#findPw .input {
  width: 100%;
  height: 55px;
  /* background: #eeeeee; */
  border-radius: 5px;
  box-shadow: none;
  padding: 16px 20px;
  font-size: 16px;
  margin-top: 6px;
}

#findPw .input::placeholder {
  color: #a3a1a7;
}

#findPw .input:hover {
  border: 1px solid #ec15ff;
}

#findPw .input:focus {
  background: #ffffff;
  border: 1px solid #ec15ff;
}

#findPw > form > p {
  font-size: 13px;
  color: #87858b;
  margin: 0 0 20px;
}

#findPw #purpleBtn {
  width: 100%;
  height: 58px;
  border-radius: 5px;
  font-size: 18px;
  margin: 0 0 26px;
}

.pwChange #findPw {
  width: 100%;
  padding: 20px 0;
}

.ant-modal-root .pwChange .ant-modal-header > div {
  align-items: start;
}
.pwChange #findPw .input {
  height: 40px;
  padding: 8px 12px 8px 0;
}
.pwChange #findPw .input input {
  font-size: 13px;
  margin: 1px;
}

.pwChange #findPw #purpleBtn {
  margin: 12px 0 0;
  font-size: 14px;
  height: 40px;
  background-image: linear-gradient(to right, #e94cf7, #e94cf7);
}
.pwChange #findPw .ant-form-item {
  margin: 0;
}
@media (max-width: 700px) {
  #findPw .logo,
  #signup .logo,
  #login .logo {
    width: 240px;
  }
  #findPw {
    width: 100%;
    padding: 20px 40px;
  }

  #findPw .input {
    font-size: 14px;
  }

  #findPw .input::placeholder {
    font-size: 14px;
  }
  .pwChange #findPw {
    padding: 0 0 12px;
  }
  #findPw > h1 {
    font-size: 16px;
    margin: 16px 0 32px;
  }
  #findPw .input {
    height: 44px;
  }
  #findPw #purpleBtn {
    height: 44px !important;
  }
  #findPw > form > p {
    font-size: 11px;
  }
}

#member {
    width: 580px;
    padding: 20px 70px;
}

#member .top {
    margin: 0 0 20px;
    background: #ffffff;
    padding: 0;
}

#member .top div {
    width: 29px;
    height: 29px;
    border-radius: 100%;
    border: 1px solid #cccccc;
    cursor: pointer;
    transition: all .2s ease-in-out;
}

#member .top div:hover {
    background: #cccccc;
}

#member .logo {
    width: 310px;
    padding: 15px 0 40px;
}

#member .logo img {
    width: 100%;
}

#member .check {
    padding: 0 0 56px;
    border-bottom: solid 1px #dfdce3;
}

#member .check .checkbox p {
    margin: 0 0 -40px;
}

#member .check .checkbox .text {
    color: #87858b;
    font-size: 13px;
}

#member>div {
    margin: 0 0 16px;
}

#member>div p {
    font-size: 13px;
    color: #87858b;
    cursor: pointer;
    transition: all .2s ease-in-out;
}

#member>div p:hover {
    color: #ec15ff;
}

#member>div.kakao {
    padding: 0 0 0 24px;
}

#member #purpleBtn {
    width: 100%;
    height: 58px;
    font-size: 18px;
    border-radius: 3px;
    margin: 200px 0 0;
}

@media (max-width : 700px) {
    #member {
        width: 100%;
        padding: 20px;
    }

}
/* #myPage .rsWrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
} */
#myPage .rsWrapper:has(#myHome) {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#myHome > .top {
  position: relative;
  min-height: 320px;
  padding: 27px 0;
  background: #efefef;
  /* background: linear-gradient(to bottom, rgb(129 204 208), rgb(134 159 208)); */
}

/* #myHome > .top:has(img) {
  background: rgba(0, 0, 0, 0.3);
} */

#myHome > .top > img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  object-fit: cover;
  /* display: none; */
}

.profileSection .rsWrapper.flexColCenter #myHome .promptThumList {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 1600px;
  padding: 20px 40px 0;
  gap: 0px; /*마에페이지 홈 인기/최신 컨텐츠 간격 조정*/
}
.profileSection .rsWrapper.flexColCenter #myHome .promptThumList #populerPromptSlider {
  padding-bottom: 12px;
}
.profileSection .rsWrapper.flexColCenter #myHome .top .anticon {
  font-size: 16px;
}
.profileSection .rsWrapper.flexColCenter #myHome .top .ant-rate .ant-rate-star:not(:last-child) {
  margin: 0;
}
.profileSection .rsWrapper .ant-row div:first-child {
  width: 100%;
}

#myHome > .top > .rsWrapper > .profile {
  width: 320px;
  padding: 12px;
  border-radius: 16px;
  background-color: rgba(0, 0, 0, 0.5);
}

#myHome > .top > .rsWrapper > .profile > .topProfile .thumb {
  width: 80px;
  height: 80px;
  border-radius: 16px;
  padding: 0;
}

#myHome > .top > .rsWrapper > .profile > .topProfile .thumb img {
  width: 100%;
  height: 100%;
  border-radius: 16px;
  object-fit: cover;
}

#myHome > .top > .rsWrapper > .profile > .topProfile > div {
  width: calc(100% - 80px);
  padding: 0 0 0 16px;
  gap: 8px;
}

#myHome > .top > .rsWrapper > .profile > .topProfile > div .gradeBox {
  /* margin: 0 0 4px; */
/*   gap: 4px; */
}

#myHome > .top > .rsWrapper > .profile > .topProfile > div .gradeBox div {
  width: auto;
}

#myHome > .top > .rsWrapper > .profile > .topProfile > div .gradeBox div .grade {
  width: auto;
  font-size: 12px;
  color: #ffffff;
  width: 50px;
  height: 30px;
  border-radius: 20px;
  border-style: solid;
  border-width: 1px;
  border-image-source: linear-gradient(to right, #13d5df 0%, #f138fc 100%);
  border-image-slice: 1;
  background-image: linear-gradient(to right, #b041f3 0%, #ec15ff 100%), linear-gradient(to right, #13d5df 0%, #f138fc 100%);
  background-origin: border-box;
  background-clip: content-box, border-box;
  margin: 0 8px 0 0;
}

#myHome > .top > .rsWrapper > .profile > .topProfile > div .gradeBox > div:first-child > img {
  width: 20px;
  height: 20px;
  border-radius: 100%;
}

/* #myHome > .top > .rsWrapper > .profile > .topProfile > div .gradeBox > div:nth-child(2) img {
  width: 15px;
  margin: 0 0 0 12px;
} */

/* #myHome > .top > .rsWrapper > .profile > .topProfile > div h1 {
  color: #ffffff;
  font-size: 22px;
  margin: 0 0 4px;
} */

#myHome > .top > .rsWrapper > .profile > .majorModel {
  padding: 8px 0 16px 0;
}

#myHome > .top > .rsWrapper > .profile > .topProfile > div h2 {
  font-size: 11px;
  color: #ffffff;
}
#myHome > .top > .rsWrapper > .profile .bottom {
  position: relative;
  justify-content: start;
  gap: 10px;
  align-items: center;
  height: 32px;
  margin-top: 16px;
}

#myHome > .top > .rsWrapper > .profile .bottom > div {
  width: auto;
}
#myHome > .top > .rsWrapper > .profile .bottom > div.major {
  width: 20px;
  height: 20px;
  flex-wrap: nowrap;
}

#myHome > .top > .rsWrapper > .profile .bottom div > img {
  max-width: 14px;
  max-height: 14px;
}
#myHome > .top > .rsWrapper > .profile .bottom > div.major > img {
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  max-width: initial;
  max-height: none;
  max-height: initial;
  object-fit: contain;
}

#myHome > .top > .rsWrapper > .profile .bottom > div > p {
  font-size: 14px;
  color: #ffffff;
  font-weight: 600;
  margin: 0 7px;
}

#myHome > .top > .rsWrapper > .profile .bottom .absoluteBox {
  position: absolute;
  top: 30px;
  left: 0;
  background-color: #ffffff;
  border: 1px solid #c718e2;
  border-radius: 4px;
  padding: 4px;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
  min-width: 110px;
  width: fit-content;
  z-index: 10;
  gap: 1px;
}

#myHome > .top > .rsWrapper > .profile .bottom .absoluteBox div {
  height: 32px;
  /* margin: 0 0 4px; */
  border-radius: 4px;
  padding: 0 12px;
}
#myHome > .top > .rsWrapper > .profile .bottom .absoluteBox div:hover {
  background: #f7f7f8;
}
#myHome > .top > .rsWrapper > .profile .bottom .absoluteBox div:nth-child(3) {
  margin: 0;
}

#myHome > .top > .rsWrapper > .profile .bottom .absoluteBox div img {
  width: 14px;
  margin: 0 8px 0 0;
}

#myHome > .top > .rsWrapper > .profile .bottom .absoluteBox div p {
  font-size: 13px;
  font-weight: 600;
  color: #0e0e1f;
}

#myHome > .top > .rsWrapper > .profile .bottom > div > h3 {
  font-size: 16px;
  color: #ffffff;
  font-weight: 600;
  margin: 0 8px 0 0;
}

#myHome > .top > .rsWrapper > .profile .bottom > div > h2 {
  font-size: 14px;
  color: #87858b;
  margin: 0 0 0 8px;
}

#myHome > .top > .rsWrapper > .profile .bottom > div > h2 span {
  border-bottom: 1px solid #87858b;
}

#myHome > .top > .rsWrapper > .title {
  width: calc(100% - 320px);
  /* padding: 0 0 0 40px; */
  text-shadow: 0 0px 32px rgba(0, 0, 0, 0.4);
  min-height: 244px;
  padding: 12px;
  border-radius: 16px;
  background-color: rgb(0, 0, 0, 0.15);
}
#myHome > .top > .rsWrapper:has(.followBtn) > .title {
  min-height: 285px;
}
#myHome > .top > .rsWrapper > .title h1 {
  font-size: 32px;
  color: #ffffff;
  font-weight: 500;
  /* margin: 0 0 8px; */
  line-height: 1.4;
  letter-spacing: -0.2px;
  text-shadow: 0 0px 12px rgba(0, 0, 0, 0.4);
}

#myHome > .top > .rsWrapper > .title h2 {
  font-size: 20px;
  color: #ffffff;
  margin: 0 0 20px;
  font-weight: 300;
  letter-spacing: -0.2px;
  text-shadow: 0 0px 12px rgba(0, 0, 0, 0.6);
  word-wrap: break-word;
}

#myHome .searchBox .rsWrapper .text {
  width: auto;
}

#myHome .searchBox .rsWrapper .text img {
  width: 32px;
  /* margin: 0 0 14px; */
}

#myHome .searchBox .rsWrapper .text p {
  background-image: linear-gradient(to right, #ca79fc 0%, #ff5eb6 100%);
  font-family: Pretendard;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

#myHome .searchBox {
  /* height: 108px; */
  /* margin: 0 0 16px; */
  padding: 32px 0;
}

#myHome .searchBox .rsWrapper .search {
  width: 471px;
  height: 38px;
  padding: 8px 0px;
  border-radius: 50px;
  position: relative;
  background: #ffffff;
  margin: 0 120px;
  z-index: 8;
  gap: 0;
}

#myHome .searchBox .rsWrapper .search:after {
  z-index: 0;
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  width: 480px;
  height: 46px;
  background: linear-gradient(to right, #13d5df 0%, #f138fc 100%);
  border-radius: 50px;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
}

#myHome .searchBox .rsWrapper .search img {
  width: 20px;
  position: absolute;
  left: 16px;
  z-index: 2;
}

#myHome .searchBox .rsWrapper .search input {
  width: 100%;
  padding: 0 20px 0 52px;
  height: 40px;
  outline: none;
  border: none;
  box-shadow: none;
  font-size: 16px;
  color: #000000;
  z-index: 1;
  border-radius: 24px;
}

#myHome .searchBox .rsWrapper .search input::placeholder {
  color: #a3a1a7;
  font-size: 15px;
}

#myHome .rsWrapper .promptBox {
  position: relative;
  margin: 0 0 30px;
}

#myHome .rsWrapper .promptBox .line {
  position: absolute;
  top: 50%;
  left: 0;
  height: 1px;
  margin: -0.5px 0 0;
  width: 100%;
}

#myHome .rsWrapper .promptBox > div {
  padding: 0 24px;
  background: #ffffff;
  z-index: 2;
  width: auto;
}

#myHome .rsWrapper .promptBox > div img {
  width: 20px;
}

#myHome .rsWrapper .promptBox > div img.new {
  width: 32px;
}

#myHome .rsWrapper .promptBox > div p {
  font-size: 20px;
  margin: 0 12px;
  color: #3e3d53;
  font-weight: 700;
}

#myHome .rsWrapper .promptBox > div #greyBtn2 {
  width: 22px;
  height: 22px;
  border-radius: 100%;
  font-size: 12px;
}

#myHome .rsWrapper .slide {
  margin: 0 0 52px;
}

#myHome .rsWrapper > .box {
  flex-wrap: wrap;
}

#myHome .rsWrapper > .box .ant-card {
  width: calc(100% / 6 - 9px);
  margin: 0 10px 20px 0;
}

#myHome .rsWrapper > .box .ant-card:nth-child(6n) {
  margin: 0 0 20px;
}

#myHome .rsWrapper > .box .list > div {
  /* padding: 4px; */
  position: relative;
  overflow: hidden;
  border-radius: 16px 16px 0 0;
}

#myHome .rsWrapper > .box .list > div > img {
  width: 100%;
  height: 127px;
}

#myHome .rsWrapper > .box .list > div .absoluteBox {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
}

#myHome .rsWrapper > .box .list > div .absoluteBox .user {
  padding: 8px;
}

#myHome .rsWrapper > .box .list > div .absoluteBox .user div {
  width: auto;
}

#myHome .rsWrapper > .box .list > div .absoluteBox .user div img {
  width: 20px;
  height: 20px;
  margin: 0 8px 0 0;
}

#myHome .rsWrapper > .box .list > div .absoluteBox .user div p {
  font-size: 13px;
  color: #ffffff;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}

#myHome .rsWrapper > .box .list > div .absoluteBox .title > p {
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  margin: 0 0 4px;
  padding: 0 10px;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
}

#myHome .rsWrapper > .box .list .greyBox {
  background: #e2e2e2;
  padding: 8px 12px;
  border-radius: 0 0 16px 16px;
}

#myHome .rsWrapper > .box .list .greyBox > img {
  width: 32px;
  height: 32px;
  border-radius: 100%;
  margin: 0 8px 0 0;
}

#myHome .rsWrapper > .box .list .greyBox > div {
  width: calc(100% - 32px - 8px);
}

#myHome .rsWrapper > .box .list .greyBox div > p {
  font-size: 14px;
  font-weight: 600;
  color: #0e0e1f;
}

#myHome .rsWrapper > .box .list .greyBox div div .imgBox {
  width: auto;
}

#myHome .rsWrapper > .box .list .greyBox div div .imgBox img:first-child {
  width: 20px;
  height: 20px;
  margin: 0 8px 0 0;
}

#myHome .rsWrapper > .box .list .greyBox div div .imgBox img {
  width: 16px;
  height: 16px;
  margin: 0 4px 0 0;
}

#myHome .rsWrapper > .box .list .greyBox div div p {
  font-size: 13px;
  font-weight: 600;
}

#modal .top {
  margin: 0 0 35px;
}

#modal .top h1 {
  font-size: 24px;
  font-weight: 700;
  color: #0e0e1f;
}

#modal .top p {
  font-size: 24px;
}

#modal .filter {
  padding: 0 0 12px;
  border-bottom: 2px solid #464548;
}

#modal .filter div {
  width: auto;
}

#modal .filter div #pinkBtn2 {
  width: auto;
  min-width: 80px;
  padding: 8px 12px;
  height: 33px;
  margin: 0 4px 0 0;
  border-radius: 24px;
}

#modal .filter div input {
  width: 140px;
  height: 40px;
  border: 1px solid #e2dfe4;
  background: #f7f7f8;
  padding: 0 12px;
  border-radius: 4px;
}

#modal .filter div p {
  font-size: 13px;
  margin: 0 12px;
}

#modal .filter div #pinkBtn {
  width: 40px;
  height: 40px;
  margin: 0 0 0 12px;
  border-radius: 4px;
  font-size: 14px;
}

#modal .header {
  height: 48px;
  background: #f3f2fa;
}

#modal .list {
  overflow: auto;
  height: 550px;
  justify-content: flex-start;
}

#modal .list .scroll {
  justify-content: flex-start;
  flex-wrap: nowrap;
}

#modal .list .scroll .listBox {
  height: 64px;
  border-bottom: solid 1px #e2dfe4;
}

#modal .header div {
  font-size: 14px;
  color: #323146;
  font-weight: 600;
}

#modal .list .scroll .listBox div {
  font-size: 13px;
  color: #000000;
}

#modal .header div:nth-child(1),
#modal .list .scroll .listBox div:nth-child(1) {
  width: 80px;
}

#modal .header div:nth-child(2),
#modal .list .scroll .listBox div:nth-child(2) {
  width: 160px;
}

#modal .header div:nth-child(3),
#modal .list .scroll .listBox div:nth-child(3) {
  width: 200px;
}

#modal .header div:nth-child(4),
#modal .list .scroll .listBox div:nth-child(4) {
  width: calc(100% - 80px - 160px - 200px);
}

.ant-radio-wrapper .ant-radio-inner {
  width: 20px;
  height: 20px;
}

.ant-radio-wrapper .ant-radio-inner::after {
  width: 20px;
  height: 20px;
  margin-block-start: -10px;
  margin-inline-start: -10px;
}

#modal .filter div input {
  position: relative;
  /* background-image: url(../img/date.svg); */
  background-repeat: no-repeat;
  background-position: right 10px center;
}

#modal .filter div input[type='date']::-webkit-calendar-picker-indicator,
#modal .filter div input[type='date']::-webkit-inner-spin-button {
  opacity: 0;
  -webkit-appearance: none;
          appearance: none;
}
/*design.css*/

.profile {
  display: flex;
  flex-direction: column;
  justify-content: start;
}
.profile .flexColStart {
  gap: 4px;
}
.profile h1 {
  font-size: 20px; /*줄임*/
  font-weight: 500;
  line-height: 1.2;
  color: #ffffff;
}
.profile h2 {
  font-size: 11px;
  font-weight: 400;
}
.profile .snsArea {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 12px;
}
.profile .snsArea a img {
  margin: 0;
  width: 16px;
}
.profile .snsArea a img:hover {
  fill: #ca79fc;
}
.profile .followBox {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 16px 0;
  margin: 0;
}
.profile .followBox li {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 8px;
  color: #fff;
}
.profile .followBox li p {
  font-size: 13px;
}
.profile .followBox li span {
  font-size: 16px;
  text-decoration: underline;
  font-weight: 500;
}
.profile .followBtn {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 4px;
}
.profile .followBtn button {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  border: 1px solid #b041f3;
  background: rgba(230, 26, 254, 0.2);
  color: #fff;
  padding: 0 8px;
  font-size: 14px;
  height: 40px;
  width: 100%;
  gap: 4px;
}
.profile .followBtn button::before {
  content: '';
  width: 16px;
  height: 16px;
  background: url(../../static/media/follow.553ee9283995a5b03b7e.svg) no-repeat center center;
}
.profile .followBtn button.donation::before {
  content: '';
  background: url(../../static/media/donation.913c30d37bdcd609acf9.svg) no-repeat center center;
}
.profile .followBtn button.request::before {
  content: '';
  background: url(../../static/media/request.da4f3beb6cd245281f68.svg) no-repeat center center;
}
.profile .followBtn .bottom {
  padding: 4px 0;
}
.profile .bottom {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  /* margin-top: 12px; */
  height: 32px;
}
.profile .bottom .rankingArea {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  min-width: 100px;
}
.profile .bottom .absoluteBox {
  display: flex;
  flex-direction: column;
  justify-content: start;
  gap: 2px;
  align-items: flex-start;
}
.profile .bottom .absoluteBox h3 {
  font-weight: 500;
}
/* //disign.css*/

.promptThumList #listWrapper {
  max-width: 1518px;
}
#promptSales .titleBox div img,
.profileTitle div img,
#myHome .rsWrapper .promptBox div img {
  max-height: 24px;
}
#myHome .promptList #otherWrapper .rsWrapper .newContents .staffList {
  min-height: auto;
}

img.default-banner {
    width: 100%;
    height: auto;
    display: block; /* inline 이미지 간격 제거 */
  }

@media (max-width: 1280px) {
  #myHome .rsWrapper > .box .ant-card {
    width: calc(100% / 5 - 9px);
  }

  #myHome .rsWrapper > .box .ant-card:nth-child(6n) {
    margin: 0 9px 20px 0;
  }

  #myHome .rsWrapper > .box .ant-card:nth-child(5n) {
    margin: 0 0 20px;
  }
  .promptThumList #listWrapper {
    width: 100%;
  }
  #myProfile > .rsWrapper.flexColCenter {
    max-width: 100%;
  }
  .profileSection .ant-form {
    width: 100%;
  }
  img.default-banner {
      width: 100%;
      height: auto;
      display: block; /* inline 이미지 간격 제거 */
    }
}

@media (max-width: 900px) {
  #myPage > div > .title .overflowBox div h1 {
    /* font-size: 24px; */
  }

  #myHome .searchBox .rsWrapper .search {
    margin: 0 30px;
  }

  #myHome .rsWrapper > .box .ant-card {
    width: calc(100% / 2 - 9px);
  }

  #myHome .rsWrapper > .box .ant-card:nth-child(6n),
  #myHome .rsWrapper > .box .ant-card:nth-child(5n) {
    margin: 0 9px 20px 0;
  }

  #myHome .rsWrapper > .box .ant-card:nth-child(2n) {
    margin: 0 0 20px;
  }
  #myHome .searchBox .rsWrapper .text p {
    font-size: 14px;
  }
  #promptSales .titleBox div img,
  .profileTitle div img,
  #myHome .rsWrapper .promptBox div img {
    height: 20px;
  }
  #myHome .searchBox .rsWrapper .search {
    margin: 0 auto;
  }
  .profileSection .rsWrapper.flexColCenter #myHome .promptThumList {
    gap: 20px;
  }
  /* #myProfile .rsWrapper .titleBox {
    margin: 0 0 20px;
    position: relative;
  } */
  #myPage .rsWrapper .top .title {
    padding-left: 2px;
    padding-right: 2px;
  }
  #myPage .rsWrapper:has(#myHome) .filter .title {
    padding: 0;
  }
  #myHome > .top > .rsWrapper > .title {
    width: 100%;
    min-height: auto;
    padding: 0;
    align-items: center;
    text-shadow: 0 0px 8px rgba(0, 0, 0, 1);
    background: none;
  }
  #myHome > .top > .rsWrapper:has(.followBtn) > .title {
    min-height: auto;
  }
  #myHome > .top > .rsWrapper > .title {
    order: 1;
  }
  #myHome > .top > .rsWrapper > .title * {
    text-align: center;
    width: 100%;
    font-weight: 500;
  }
  #myHome > .top > .rsWrapper > .title h1 {
    font-size: 24px;
  }
  #myHome > .top > .rsWrapper > .title h2 {
    font-size: 13px;
  }
  #myHome > .top > .rsWrapper > .profile {
    order: 2;
  }
  img.default-banner {
      width: 100%;
      height: auto;
      display: block; /* inline 이미지 간격 제거 */
    }
  /* #myHome .promptThumList .slider-container .slick-track .slick-slide > div {
    margin-left: 0;
    margin-right: 12px;
  }
  #myHome .promptThumList .slider-container .slick-track .slick-slide:nth-child(2n) > div {
    margin-left: 12px;
    margin-right: 0;
  } */
  /* .profileSection .rsWrapper.flexColCenter #myHome .promptThumList .slider-container .slick-track .slick-slide > div {
    margin-left: 0;
    margin-right: 0px;
  }
  .profileSection .rsWrapper.flexColCenter #myHome .promptThumList .slider-container .slick-track .slick-slide:nth-child(2n) > div {

    margin-right: 0;
  } */
}

@media (max-width: 700px) {
  #myPage > div > .title {
    justify-content: flex-start;
  }

  #myPage > div > .title .overflowBox {
    justify-content: flex-start;
    align-items: flex-start;
  }

  #myHome > .top {
    width: 100%;
    height: auto;
    padding: 20px 7px;
  }

  #myHome > .top > .rsWrapper {
    flex-wrap: wrap;
    flex-direction: column;
  }
  #myHome > .top > .rsWrapper > .profile > .topProfile {
    position: relative;
    flex-wrap: wrap;
    flex-direction: column;
    margin-bottom: 8px;
  }
  #myHome > .top > .rsWrapper > .profile > .majorModel {
    padding: 16px 0 0 0;
    order: 2;
  }
  #myHome > .top > .rsWrapper > .profile {
    width: 100%;
  }

  #myHome > .top > .rsWrapper > .title h1 {
    font-size: 24px;
  }

  #myHome > .top > .rsWrapper > .title h2 {
    font-size: 13px;
    margin: 0 0 20px;
  }

  #myHome > .top > .rsWrapper > .profile > .topProfile .thumb {
    width: 100%;
    margin: 0 0 16px;
  }

  #myHome > .top > .rsWrapper > .profile > .topProfile .thumb img {
    width: 80px;
    height: 80px;
    border-radius: 100%;
  }

  #myHome > .top > .rsWrapper > .profile > .topProfile h1 {
    font-size: 18px;
    color: #ffffff;
    margin: 0 0 4px;
  }

  #myHome > .top > .rsWrapper > .profile > .topProfile > div {
    width: auto;
    padding: 0;
  }
  #myHome > .top > .rsWrapper > .profile .bottom {
    order: 1;
    justify-content: center;
    margin: 0;
    display: none;
  }
  #myHome > .top > .rsWrapper > .profile .btnArea,
  #myHome > .top > .rsWrapper > .profile .followBox {
    order: 2;
  }
  /* #myHome > .top > .rsWrapper > .profile > .topProfile > div .gradeBox p {
    font-size: 11px;
    color: #ffffff;
    margin: 0 0 0 4px;
  } */
  #myHome > .top > .rsWrapper > .profile > .topProfile > div .gradeBox {
    gap: 4px;
  }
  #myHome > .top > .rsWrapper > .profile > .topProfile > div .gradeBox div .grade {
    width: 34px;
    height: 18px;
    font-size: 10px;
  }

  #myHome > .top > .rsWrapper > .profile > .topProfile > div .gradeBox > div:first-child > img {
    width: 15px;
    height: 15px;
  }
  /* 모바일 sns 배지 동일선상에 위치 */
  #myHome > .top > .rsWrapper > .profile > .topProfile > div .gradeBox + .mobile {
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
  #myHome > .top > .rsWrapper > .profile > .topProfile > div .gradeBox + .mobile > div {
    width: min-content;
    gap: 10px;
  }
  #myHome > .top > .rsWrapper > .profile > .topProfile > div .gradeBox + .mobile > div.major {
    flex-wrap: nowrap;
  }
  #myHome > .top > .rsWrapper > .profile > .topProfile > div .gradeBox + .mobile > div.major:has(img) {
    margin-left: 10px;
  }
  /* 팔로잉 리스트 - design.css 기반 */
  #myHome > .top > .rsWrapper > .profile .followBox > li {
    flex-direction: column;
    flex: 1 1;
  }

  #myHome > .top > .rsWrapper > .profile .followBox > li > p {
    order: 2;
    font-size: 12px;
  }
  #myHome > .top > .rsWrapper > .profile .followBox > li > span {
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
  }

  #myHome > .top > .rsWrapper > .profile .followBox .mobile {
    position: relative;
  }

  #myHome > .top > .rsWrapper > .profile .followBox .mobile p > img {
    width: 11px;
    margin: 0 0 0 5px;
  }

  #myHome > .top > .rsWrapper > .profile .followBox .mobile .absoluteBox {
    position: absolute;
    top: 50px;
    left: 0;
    background-color: #ffffff;
    border: 1px solid #c718e2;
    border-radius: 4px;
    padding: 4px;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
    width: 110px;
    z-index: 10;
  }

  #myHome > .top > .rsWrapper > .profile .followBox .mobile .absoluteBox div {
    height: 32px;
    margin: 0 0 2px;
    border-radius: 4px;
    /* background: #f7f7f8; */
    padding: 0 12px;
  }

  #myHome > .top > .rsWrapper > .profile .followBox .mobile .absoluteBox div:nth-child(3) {
    margin: 0;
  }

  #myHome > .top > .rsWrapper > .profile .followBox .mobile .absoluteBox div img {
    max-width: 16px;
    max-height: 14px;
    margin: 0 8px 0 0;
  }

  #myHome > .top > .rsWrapper > .profile .followBox .mobile .absoluteBox div p {
    font-size: 13px;
    font-weight: 600;
    color: #0e0e1f;
  }

  #myHome .filter {
    background: #ffffff;
  }

  #myHome .filter .rsWrapper .listBox {
    flex-direction: column;
    align-items: flex-start;
  }

  #myHome .filter .rsWrapper .listBox .title {
    margin: 0 0 16px;
  }

  #myHome .filter .rsWrapper .listBox .title img {
    margin: 0 20px 0 0;
  }

  #myHome .filter .rsWrapper .listBox .ant-radio-wrapper span.ant-radio + * {
    padding: 0 0 0 8px;
  }

  #myHome .searchBox .rsWrapper:has(.text) {
    flex-direction: row;
  }

  #myHome .searchBox .rsWrapper .text {
    width: 50%;
    order: 2;
  }

  #myHome .searchBox {
    height: auto;
    padding: 0 0 20px;
    /* margin: 0 0 40px; */
  }

  #myHome .searchBox .rsWrapper {
    flex-wrap: wrap;
  }
  #myHome .searchBox .rsWrapper .search {
    width: 100%;
    margin: 20px 0 36px;
    order: 1;
  }

  /* #myHome .searchBox .rsWrapper .search:after {

    width: calc(100% + 8px);
  } */

  #myHome .searchBox .rsWrapper .search input {
    padding: 0;
    padding-left: 50px;
  }

  #myHome .searchBox .rsWrapper .search input[placeholder] {
    font-size: 13px;
    line-height: 1;
  }

  #myHome .rsWrapper > .box .ant-card {
    width: calc(100%);
    margin: 0 0 15px;
  }

  #myHome .rsWrapper > .box .ant-card:nth-child(6n),
  #myHome .rsWrapper > .box .ant-card:nth-child(5n),
  #myHome .rsWrapper > .box .ant-card:nth-child(2n) {
    margin: 0 0 15px;
  }

  #modal .filter {
    flex-wrap: wrap;
    margin: 0 0 30px;
    padding: 0 0 30px;
  }

  #modal .filter div {
    width: 100%;
    justify-content: flex-start;
    margin: 0 0 8px;
  }

  #modal .filter div input {
    width: 130px;
  }

  #modal .filter div p {
    margin: 0 10px;
  }

  #modal .top {
    margin: 18px 0 35px;
  }

  #modal .filter div #pinkBtn {
    width: 42px;
    height: 40px;
    margin: 0 0 0 10px;
  }

  #modal .header {
    height: 40px;
    border-radius: 10px;
  }

  #modal .header div {
    font-size: 13px;
  }

  #modal .list .scroll .listBox div {
    font-size: 14px;
  }

  #modal .list .scroll .listBox div:nth-child(3) {
    font-size: 12px;
  }

  #modal .header div:nth-child(1),
  #modal .list .scroll .listBox div:nth-child(1) {
    width: 50px;
  }

  #modal .header div:nth-child(2),
  #modal .list .scroll .listBox div:nth-child(2) {
    width: calc((100% - 50px - 120px) / 2);
  }

  #modal .header div:nth-child(3),
  #modal .list .scroll .listBox div:nth-child(3) {
    width: 120px;
  }

  #modal .header div:nth-child(4),
  #modal .list .scroll .listBox div:nth-child(4) {
    width: calc((100% - 50px - 120px) / 2);
  }

  #modal .list {
    height: auto;
  }

  #myHome .filter .rsWrapper .listBox .title h2 {
    font-size: 16px;
    font-weight: 700;
    color: #0e0e1f;
  }

  #myPage .rsWrapper .title.tabArea {
    padding-left: 0px;
    padding-right: 0px;
  }
  #myPage .rsWrapper .top .title {
    padding-left: 8px;
    padding-right: 8px;
    gap: 4px;
  }

  #myHome .searchBox .rsWrapper .search:after {
    box-shadow: none;
    z-index: -1;
    content: '';
    position: absolute;
    /* top: -3px;
    left: -3px; */
    /* height: 44px; */
    width: calc(100% + 8px);
  }
  img.default-banner {
    width: 100%;
    height: auto;
    display: block; /* inline 이미지 간격 제거 */
  }
}

#myPage .rsWrapper #myProfile,
.profileSection .payDetail {
  max-width: 1600px;
  /* margin: 0 auto; */
  padding: 20px 0 0;
}
#myPage > .rsWrapper:has(.tabArea) #myProfile {
  padding: 20px 0 0;
}

#myProfile .rsWrapper .titleBox {
  margin: 20px 0 20px;
  position: relative;
}

#myProfile .rsWrapper .titleBox .title {
  /* width: 160px; */
  width: auto;
  padding: 0 12px;
  background: #ffffff;
  z-index: 2;
  gap: 0;
}

#myProfile .rsWrapper .titleBox .title img {
  width: 20px;
  margin: 0 12px 0 0;
}

#myProfile .rsWrapper .titleBox .title h1 {
  font-size: 20px;
  font-weight: 600;
  color: #3e3d53;
}

#myProfile .rsWrapper .titleBox .line {
  position: absolute;
  top: 50%;
  left: 0;
  /* border: 1px dashed #c2b8cb; */
  margin: -0.5px 0 0;
  width: 100%;
  height: 1px;
}
#myProfile .userInfo,
#myProfile .myInfo,
#myProfile .sellerInfo,
#myProfile .payInfo {
  align-items: flex-start;
  border-bottom: 1px solid #dbdbe0;
  padding: 16px 0;
}

#myProfile .userInfo {
  padding: 0 0 16px;
}
#myProfile .payInfo {
  border-bottom: none;
}

#myProfile .ai,
#myProfile .aiInfo {
  border-bottom: 1px solid #dbdbe0;
  padding: 30px 0;
  align-items: flex-start;
}

#myProfile .aiInfo {
  align-items: flex-start;
}

#myProfile .title {
  width: 180px;
  flex-wrap: wrap;
  margin-right: 24px;
  row-gap: 12px;
  gap: 12px;
}

#myProfile .title img {
  width: 20px;
  /* margin: 0 14px 0 0; */
}

#myProfile .title h1 {
  font-size: 16px;
  font-weight: 700;
  color: #3e3d53;
}

#myProfile .title div #darkGrey {
  width: 132px;
  padding: 11px;
  height: 40px;
  font-size: 14px;
  border-radius: 4px;
}

#myProfile .sellerInfo .title div #darkGrey {
  min-width: 65px;
}

#myProfile .title div #darkGrey:hover {
  border: 1px;
}

#myProfile .content {
  width: calc(100% - 180px);
  flex-wrap: wrap;
  gap: 30px;
}
#myProfile .content:has(.tabBox) {
  gap: 0;
  row-gap: 8px !important;
  column-gap: 24px !important;
}
#myProfile .aiInfo .content {
  gap: 0px;
}
#myProfile .content .tabBox {
  gap: 12px;
  margin: 0;
}
#myProfile .content .tabBox div {
  margin: 0;
}

#myProfile .userInfo .content .box,
#myProfile .myInfo .content .box,
#myProfile .myInfo .content .box .infoBox .box2,
#myProfile .myInfo .content .box .infoBoxUpdate .box2,
#myProfile .myInfo .content > .info,
#myProfile .sellerInfo .content .info,
#myProfile .payInfo .content .info {
  /* margin: 0 0 26px; */
  align-items: flex-start;
}

#myProfile .myInfo .content .box .infoBox .box2:first-child {
  margin: 0 0 45px;
}

#myProfile .userInfo .content .box .info,
#myProfile .myInfo .content .box .infoBox .box2 .info,
#myProfile .myInfo .content .box .infoBoxUpdate .box2 .info {
  width: calc(50% - 20px);
}

#myProfile .content .info span {
  color: #000;
  font-weight: 500;
  font-size: 13px;
}

#myProfile .userInfo .content .box .info h1,
#myProfile .myInfo .content .box .thumb h1,
#myProfile .myInfo .content .box .thumbUpdate h1,
#myProfile .myInfo .content .box .infoBox .box2 .info h1,
#myProfile .myInfo .content .info h1,
#myProfile .sellerInfo .content .info h1,
#myProfile .payInfo .content .info h1,
#myProfile .ai .content .box p,
#myProfile h1 {
  font-size: 12px;
  color: #464548;
  line-height: 1;
}

#myProfile .ai .content .box p {
  font-size: 13px;
  color: #000;
}

#myProfile .userInfo .content .box .info > div > p {
  margin: 0 0 9px;
}

#myProfile .userInfo .content .box .info > div > p,
#myProfile .ai .content .box p span,
#myProfile .myInfo .content .info p,
#myProfile .myInfo .content .info h1 span,
#myProfile .userInfo .content .box .info h1 span {
  font-size: 12px;
  color: #0d88d4;
}

#myProfile .content .box .info > p,
#myProfile .content .box .infoBox .box2 .info p,
#myProfile .content .info p {
  /* font-size: 13px; */
  color: #000000;
  font-weight: 500;
}

#myProfile .userInfo .content .box .info input,
#myProfile .myInfo .content .box .infoBoxUpdate .box2 .info input,
#myProfile .sellerInfo .content .info input,
#myProfile .payInfo .content .info input,
#myProfile .myInfo .content .info input,
#myProfile .myInfo .content .info textarea {
  width: 100%;
  height: 40px;
  /* background: #f7f7f8;
  border: 1px solid #e2dfe4; */
  border-radius: 4px;
  outline: none;
  padding: 0 10px;
  box-sizing: border-box;
  resize: none;
  font-size: 14px;
}

#myProfile .myInfo .content .info textarea {
  padding: 8px 10px;
  height: 100px;
}

#myProfile .myInfo .content .info:nth-child(3) input {
  margin: 0 0 30px;
}

#myProfile .userInfo .content .box .info input::placeholder,
#myProfile .myInfo .content .box .infoBox .box2 .info input::placeholder,
#myProfile .sellerInfo .content .info input::placeholder,
#myProfile .payInfo .content .info input::placeholder,
#myProfile .myInfo .content .info input::placeholder,
#myProfile .myInfo .content .info textarea::placeholder {
  /* color: #a3a1a7; */
}

#myProfile .userInfo .content .box .info input:disabled,
#myProfile .myInfo .content .box .infoBox .box2 .info input:disabled,
#myProfile .sellerInfo .content .info input:disabled,
#myProfile .myInfo .content .info input:disabled,
#myProfile .payInfo .content .info input:disabled,
#myProfile .myInfo .content .info textarea:disabled,
#myProfile .userInfo .content .box .info input:disabled:hover,
#myProfile .myInfo .content .box .infoBox .box2 .info input:disabled:hover,
#myProfile .sellerInfo .content .info input:disabled:hover,
#myProfile .myInfo .content .info input:disabled:hover,
#myProfile .payInfo .content .info input:disabled:hover,
#myProfile .myInfo .content .info textarea:disabled:hover {
  /* background: #e9ecf1;
  border: 1px solid #e2dfe4; */
  /* color: #524f56; */
  color: #524f56;
  background: #e9ecf1;
}

#myProfile .userInfo .content .box .info input:focus,
#myProfile .myInfo .content .box .infoBox .box2 .info input:focus,
#myProfile .sellerInfo .content .info input:focus,
#myProfile .myInfo .content .info input:focus,
#myProfile .payInfo .content .info input:focus,
#myProfile .myInfo .content .info textarea:focus {
  /* border: 1px solid #b041f3;
  background: #ffffff; */
}

#myProfile .userInfo .content .box .info #darkGrey {
  width: 105px;
  height: 33px;
  border-radius: 4px;
  font-size: 14px;
}

#myProfile .userInfo .content .box .info > .rowBox {
  position: relative;
  gap: 12px;
}

#myProfile .userInfo .content .box .info > .rowBox .ant-select {
  width: 150px;
}

#myProfile .userInfo .content .box .info > .rowBox .absoluteBox {
  position: absolute;
  top: 40px;
  right: 0;
  width: 400px;
  padding: 24px;
  background: #ffffff;
  border-radius: 4px;
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.25);
}

#myProfile .userInfo .content .box .info > .rowBox .absoluteBox .absolueTitle {
  margin: 0 0 31px;
}

#myProfile .userInfo .content .box .info > .rowBox .absoluteBox .absolueTitle h1 {
  font-size: 16px;
  font-weight: 700;
  color: #0e0e1f;
  margin: 0;
}

#myProfile .userInfo .content .box .info > .rowBox .absoluteBox .absolueTitle p {
  font-size: 24px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

#myProfile .userInfo .content .box .info > .rowBox .absoluteBox .absolueTitle p:hover {
  color: #e21dfd;
}

#myProfile .userInfo .content .box .info > .rowBox .absoluteBox .box p {
  font-size: 12px;
  color: #464548;
  margin: 0 0 9px;
}

#myProfile .userInfo .content .box .info > .rowBox .absoluteBox div #darkGrey {
  margin: 0 16px 0 0;
}

#myProfile .userInfo .content .box .info > .rowBox .absoluteBox div #darkGrey,
#myProfile .userInfo .content .box .info > .rowBox .absoluteBox div #purpleBtn {
  width: 120px;
  height: 40px;
  border-radius: 4px;
  font-size: 14px;
}

#myProfile .userInfo .content .box .info > .rowBox > input {
  width: calc(100% - 104px - 12px);
}
#myProfile .content .info button span {
  color: #fff;
}
#myProfile .userInfo .content .box .info > .rowBox #darkGrey {
  width: 104px;
  height: 40px;
  border-radius: 4px;
  font-size: 14px;
}

#myProfile .userInfo .content .box .info > .rowBox .ant-select {
  /* width: calc(50% - 6px); */
  height: 40px;
}

#myProfile .myInfo .content .box .thumb {
  width: 140px;
}

#myProfile .myInfo .content .box .thumb img {
  width: 100%;
  height: 140px;
  border-radius: 16px;
}
#myProfile .myInfo .content .box .thumb img.profilePreview {
  width: 100%;
  min-height: 140px;
  border-radius: 16px;
}

#myProfile .myInfo .content .box .thumbUpdate {
  width: 317px;
}

#myProfile .myInfo .content .box .thumbUpdate #profileImage {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  height: 140px;
  object-fit: cover;
}

#myProfile .myInfo .content .box .thumbUpdate .profileUpload:has(#profileImage) {
  /* background: #eee; */
  border-radius: 8px;
  overflow: hidden;
}

#myProfile .myInfo .content .box .thumbUpdate .plusBox {
  width: 140px;
  height: 140px;
  border-radius: 8px;
  border: 1px dashed #e21dfd;
  background: #fcf7fd;
  cursor: pointer;
  overflow: hidden;
}
#myProfile .myInfo .content .box .thumbUpdate .plusBox:has(img) {
  border: none;
  background: #f5f5f5;
  overflow: hidden;
  border-radius: 8px;
}

#myProfile .myInfo .content .box .thumbUpdate .plusBox .plus {
  width: 40px;
  height: 40px;
  border-radius: 100%;
  background: #f0dbf4;
  color: #c49bcc;
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 4px;
}

#myProfile .myInfo .content .box .thumbUpdate .plusBox p {
  text-align: center;
  font-size: 12px;
  color: #c49bcc;
  line-height: 1.2;
}

#myProfile .myInfo .content .box .thumbUpdate .plusBox p::before {
  display: none;
}

#myProfile .myInfo .content .box .infoBoxUpdate {
  width: calc(100% - 0);
  height: 100%;
  justify-content: space-between;
  padding: 0;
  align-items: flex-start;
}

#myProfile .myInfo .content .box .infoBox {
  width: calc(100% - 140px);
  height: 100%;
  justify-content: space-between;
  padding: 0;
  align-items: flex-start;
}
#myProfile .myInfo .info .ant-image,
.profileBox .ant-image {
  border-radius: 16px;
  overflow: hidden;
}
.mypageSection .plusBannerBox,
#myProfile .myInfo .content .info .plusBannerBox {
  border: 1px dashed #e21dfd;
  background: #fcf7fd;
  min-height: 219px;
  border-radius: 4px;
  cursor: pointer;
  overflow: hidden;
}

/* .plusBannerBox .ant-upload-wrapper .ant-upload-drag {
  background: none;
  border: none;
} */
#myProfile .myInfo .content .info .plusBannerBox:has(img) {
  border: none;
}

#myProfile .myInfo .content .info .plusBannerBox .plus {
  width: 40px;
  height: 40px;
  border-radius: 100%;
  background: #f0dbf4;
  color: #c49bcc;
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 4px;
}

#myProfile .myInfo .content .info .plusBannerBox p {
  text-align: center;
  font-size: 12px;
  color: #c49bcc;
  line-height: 1.2;
}

#myProfile .myInfo .content .info .plusBannerBox p::before {
  display: none;
}

#myProfile .myInfo .content .info h2 {
  font-size: 16px;
  font-weight: 700;
  color: #000000;
  margin: 0 0 12px;
}

#myProfile .myInfo .content .info h3 {
  font-size: 13px;
  color: #000000;
}

#myProfile .ai .content .ant-form-item {
  width: 200px;
  background: #f7f7f8;
  /* border: 1px solid #dfdce4; */
}

#myProfile .ai .content > .tabBox {
  width: auto;
  gap: 12px;
  /* margin-left: 12px; */
}

#myProfile .ai .content .tabBox .aiTab {
  width: auto;
  height: auto;
  padding: 5px 12px;
  border: 1px solid #cccccc;
  border-radius: 30px;
  margin: 0;
  gap: 12px;
}

#myProfile .ai .content .tabBox .aiTab h1 {
  /* font-size: 13px; */
  color: #0e0e1f;
  margin: 0;
  gap: 8px;
}

#myProfile .ai .content .tabBox .aiTab p {
  font-size: 13px;
  color: #0e0e1f;
}

#myProfile .aiInfo .content .ant-checkbox,
#myProfile .aiInfo .content .ant-checkbox .ant-checkbox-inner {
  width: 20px;
  height: 20px;
}

#myProfile .aiInfo .content .ant-checkbox + span img {
  width: 21px;
  margin: 0 0 -6px;
}

#myProfile .aiInfo .content > p {
  font-size: 12px;
  color: #464548;
  margin: 0 0 10px;
}

#myProfile .aiInfo .content p span {
  color: #0d88d4;
}

#myProfile .aiInfo .content .tabBox .tab {
  width: auto;
  padding: 8px 12px;
  border: 1px solid #cccccc;
  font-size: 13px;
  color: #0e0e1f;
  font-weight: 600;
  border-radius: 20px;
  margin: 0;
  line-height: 1;
  height: 34px;
}

#myProfile .btnBox #logoutBtn,
#myProfile .btnBox #darkGrey,
#myProfile .btnBox #purpleBtn {
  width: 120px;
  height: 40px;
  border-radius: 4px;
  font-size: 14px;
  margin: 14px 8px 0;
}
#myProfile .btnBox #logoutBtn {
  border-radius: 4px;
  border: 1px solid #6d6c75;
  border: 1px solid var(--t-groupTitleD, #6d6c75);
}
#myProfile .secession {
  margin: 34px 0 0;
}

#myProfile .secession .title #logoutBtn {
  width: 125px;
  height: 34px;
  border-radius: 24px;
  border: 1px solid #dfdce4;
}
#myProfile > .rsWrapper.flexColCenter {
  max-width: 1520px;
  justify-content: center;
  margin: auto;
  min-width: 200px;
}
#myProfile > .rsWrapper.flexColCenter + .ant-form {
  width: 100%;
}
#myProfile .myInfo .content .box {
  column-gap: 40px;
}
#myProfile .myInfo .content .box .noResult {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  background-color: #f7f7f8;
  border-radius: 8px;
  padding: 20px;
  color: #6d6c75;
  text-align: center;
  flex-wrap: wrap;
  width: 100%;
  height: 140px;
}
#myProfile .myInfo .content .box .thumb + .infoBox .box2 .info {
  width: calc(50% + 90px);
}
#myProfile .myInfo .content .box .thumb + .infoBox .box2 .info:first-child {
  width: calc(50% - 53px);
}
#myProfile .myInfo .content .box .thumbUpdate {
  width: 140px;
}
#myProfile .myInfo .content .box .thumbUpdate .ant-form-item {
  padding: 0;
  width: 140px;
  height: 140px;
}
#myProfile .myInfo .content .box .thumbUpdate .ant-form-item .ant-upload-btn {
  padding: 0;
}
#myProfile .myInfo .content .box .thumbUpdate .ant-upload-wrapper {
  border-radius: 4px;
  overflow: hidden;
}
#myProfile .myInfo .content .box .thumbUpdate .ant-upload-wrapper .ant-upload-drag:not(.ant-upload-disabled):hover,
#myProfile .myInfo .content .box .thumbUpdate .ant-upload-wrapper .ant-upload-drag-hover:not(.ant-upload-disabled),
#myProfile .myInfo .content .box .thumbUpdate .ant-upload-wrapper .ant-upload-drag {
  border-color: transparent;
  background: transparent;
}
#myProfile .myInfo .content .box .thumbUpdate .ant-form-item-control {
  display: flex;
  justify-content: center;
  align-items: center;
}
#myProfile .myInfo .content .box .thumbUpdate .ant-form-item-control .ant-form-item-control-input {
  align-items: flex-start;
}
#myProfile .myInfo .content .box .thumbUpdate .ant-upload-drag {
  background: transparent;
  border: 0;
}
#myProfile .myInfo .content .box .thumbUpdate .ant-upload-drag-container {
  position: relative;
  width: 100%;
  height: 100%;
}

#myProfile .myInfo .content .box .thumbUpdate .ant-upload-drag-container .imageContainer {
  width: 100%;
}
#myProfile .myInfo .content .box .profileUpload {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  height: 100%;
  min-width: 140px;
}
#myProfile .myInfo .content .box .profileUpload .profileBox,
#myProfile .myInfo .content .box .profileUpload .profileBox .ant-image {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  height: 140px;
}
#myProfile .myInfo .content .box .ant-row {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  height: 100%;
}
#myProfile .myInfo .content .infoBoxUpdate {
  width: 100%;
  padding: 0;
  gap: 40px;
}
#myProfile .myInfo .content .infoBoxUpdate img {
  border-radius: 16px;
}
#myProfile .myInfo .info .ant-image {
  width: 100%;
  margin: 0;
  border: none;
  background: transparent;
}
#myProfile .myInfo .info .ant-image .ant-image-mask .anticon-eye {
  color: #fff;
}
#myProfile .myInfo .info h1 + div {
  width: 100%;
  margin: 0;
  border: none;
  background: transparent;
}
#myProfile .myInfo .info h1 + div .ant-upload-wrapper .ant-upload-drag .ant-upload {
  padding: 0;
}
#myProfile .myInfo .info .plusBannerBox .ant-form-item,
#myProfile .myInfo .info .plusBannerBox .ant-upload-drag-container {
  width: 100%;
  height: 100%;
}
#myProfile .myInfo .info .plusBannerBox .ant-form-item .imageContainer,
#myProfile .myInfo .info .plusBannerBox .ant-upload-drag-container .imageContainer {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  /* min-height: 150px; */
  max-height: 219px;
  overflow: hidden;
}
#myProfile .myInfo .info .plusBannerBox .ant-form-item .ant-form-item-control,
#myProfile .myInfo .info .plusBannerBox .ant-form-item .ant-form-item-control-input,
#myProfile .myInfo .info .plusBannerBox .ant-upload-drag-container .ant-form-item-control,
#myProfile .myInfo .info .plusBannerBox .ant-upload-drag-container .ant-form-item-control-input {
  height: min-content;
}
#myProfile .myInfo .info .plusBannerBox .plus {
  margin: 20px 0 4px;
}
#myProfile .myInfo .about_me {
  display: flex;
  padding: 4px 0px;
  align-items: flex-start;
  gap: 10px;
  font-size: 16px;
  font-weight: 700;
  line-height: 140%;
  min-height: 30px;
}
#myProfile .userInfo .content .box .info > .rowBox:not(.ant-select-selector) {
  justify-content: start;
}
#myProfile .userInfo .content .box .info div p {
  color: #000;
}

#myProfile .secession .title #logoutBtn img {
  width: 18px;
  margin: 0 10px 0 0;
}
/* #myprofile 전체에서 사용될 탭버튼 */
#myProfile #pinkBtn2,
#tabBox #pinkBtn2 {
  width: 80px;
  height: 33px;
  border-radius: 24px;
}

/* #myProfile 전체 영역 반응형 */
@media (max-width: 700px) {
  #myProfile .content,
  #myProfile .myInfo .content .box {
    gap: 30px;
  }
  #myProfile .userInfo,
  #myProfile .myInfo,
  #myProfile .payInfo {
    flex-direction: column;
    margin: 0 0 24px;
    padding: 0 0 24px 0;
    gap: 24px;
  }
  #myProfile .title {
    gap: 6px;
    /* margin: 0 0 20px; */
  }
  #myProfile .ai .title {
    gap: 6px;
    margin: 0 0 24px;
  }
  #myProfile .sellerInfo,
  #myProfile .ai,
  #myProfile .aiInfo {
    padding: 0 0 30px;
    width: 100%;
    flex-direction: column;
    margin: 0 0 30px;
  }

  #myProfile .userInfo .content,
  #myProfile .myInfo .content,
  #myProfile .ai .content,
  #myProfile .aiInfo .content,
  #myProfile .sellerInfo .content,
  #myProfile .payInfo .content {
    width: 100%;
    flex-wrap: wrap;
  }

  #myProfile .userInfo .content .box,
  #myProfile .myInfo .content .box,
  #myProfile .myInfo .content .box .infoBox .box2,
  #myProfile .myInfo .content .box .infoBoxUpdate .box2,
  #myProfile .payInfo .content .info {
    flex-direction: column;
    margin: 0;
    gap: 24px;
  }
  #myProfile .myInfo .content {
    gap: 24px;
  }

  #myProfile .userInfo .content .box:nth-child(3) {
    flex-direction: row;
  }

  #myProfile .userInfo .content .box #logoutBtn {
    width: 80px;
    height: 30px;
    border-radius: 4px;
    font-size: 12px;
  }

  #myProfile .userInfo .content .box .info,
  #myProfile .myInfo .content .box .infoBox .box2 .info,
  #myProfile .myInfo .content .box .infoBoxUpdate {
    width: 100%;
    padding: 0;
  }
  #myProfile .myInfo .content .box .infoBox .box2 {
    flex: 1 1;
  }

  #myProfile .myInfo .content .box .thumb {
    width: 100%;
  }

  #myProfile .myInfo .content .box .thumb .profileUpload {
    justify-content: flex-start;
  }

  #myProfile .myInfo .content .box .thumb img {
    width: 140px;
    height: 140px;
    border-radius: 16px;
  }

  #myProfile .myInfo .content .info .plusBannerBox {
    min-height: 110px;
  }

  /*   #myProfile .myInfo .content .info img {
    height: 138px;
  }
 */
  #myProfile .myInfo .content .box .infoBox {
    flex-direction: column;
    padding: 0;
    width: 100%;
    gap: 24px;
  }

  #myProfile .myInfo .content .box .infoBox .box2:first-child {
    margin: 0;
  }

  #myProfile .myInfo .content .box .infoBox .box2:last-child,
  #myProfile .myInfo .content .box .infoBoxUpdate .box2:last-child {
    flex-direction: row;
  }

  #myProfile .userInfo .content .box .info input,
  #myProfile .myInfo .content .box .infoBoxUpdate .box2 .info input,
  #myProfile .sellerInfo .content .info input,
  #myProfile .payInfo .content .info input,
  #myProfile .myInfo .content .info input,
  #myProfile .myInfo .content .info textarea {
    font-size: 13px;
  }

  #myProfile .userInfo .content .box .info > .rowBox {
    flex-wrap: wrap;
  }
  #myProfile .userInfo .content .box .info > .rowBox > :not(button) {
    vertical-align: top;
  }
  #myProfile .userInfo .content .box .info > .rowBox:not(.ant-select-selector):has(button) {
    justify-content: space-between;
  }
  #myProfile .userInfo .content .box .info > .rowBox span + button.mobileBtn {
    margin-top: -28px;
  }
  #myProfile .userInfo .content .box .info:first-child > .rowBox .ant-select {
    width: 86px;
  }

  #myProfile .userInfo .content .box .info:first-child > .rowBox > .mobileInput {
    width: calc(100% - 86px - 10px);
  }

  #myProfile .userInfo .content .box .info > .rowBox #darkGrey.mobileBtn {
    margin: -4px 0 0;
    width: 100%;
  }

  #myProfile .userInfo .content .box:nth-child(3)#update {
    flex-direction: column;
  }

  #myProfile .ai .content .box p span,
  #myProfile .myInfo .content .info p,
  #myProfile .myInfo .content .info h1 span,
  #myProfile .userInfo .content .box .info h1 span {
    font-size: 10px;
  }

  #myProfile .myInfo .content .box .thumbUpdate {
    width: auto;
  }

  #myProfile .myInfo .content .box .thumbUpdate img {
    margin: 0 10px 0 0;
  }
  #myProfile .myInfo .content .box .infoBoxUpdate {
    /* flex-direction: row; */
    gap: 24px;
  }
  #myProfile .myInfo .content .box .infoBoxUpdate .box2 .info {
    width: 100%;
  }

  #myProfile .myInfo .content .info:nth-child(3) input {
    margin: 0 0 5px;
  }

  #myProfile .myInfo .content .info textarea {
    height: 40px;
  }

  #myProfile .ai .content .ant-form-item {
    width: 50%;
  }

  #myProfile .ai .content > .tabBox {
    width: 100%;
    flex-wrap: wrap;
    margin: 2px 0 0;
  }

  #myProfile .sellerInfo .title,
  #myProfile .aiInfo .title {
    width: 100%;
    row-gap: 30px;
    margin-bottom: 10px;
  }
  #myProfile .sellerInfo #darkGrey,
  #myProfile .aiInfo #darkGrey {
    width: 100%;
    height: 40px;
    font-size: 14px;
    border-radius: 4px;
  }

  #myProfile .secession {
    margin: 0 0 30px;
  }

  /* #myProfile .btnBox {
    justify-content: space-between;
  }
 */
  #myProfile .btnBox #logoutBtn,
  #myProfile .btnBox #darkGrey,
  #myProfile .btnBox #purpleBtn {
    margin: 0;
    width: calc(100% / 3 - 10px);
  }

  #myProfile .btnBox#update {
    justify-content: space-between;
  }

  #myProfile .btnBox#update #logoutBtn,
  #myProfile .btnBox#update #purpleBtn {
    width: calc(50% - 8px);
  }
  #myProfile .userInfo .content .box .info > div > p {
    margin: 0;
  }
}
.ant-upload-wrapper .ant-upload-drag {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  background: transparent;
  border: transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.3s;
}
.thumbUpdate .profileBox .ant-upload-wrapper .ant-upload-drag {
  height: 140px;
}
#myProfile .myInfo .about_me,
#myProfile .myInfo .content > div:last-child > div:nth-child(2) .ant-row {
  margin-bottom: 24px;
}
/* 내 프로필 소개이미지 수정모드 전 */
#myProfile .myInfo .info .ant-image img {
  max-height: 219px !important;
}
@media (max-width: 700px) {
  #myProfile .myInfo .info .ant-image img {
    max-height: 150px !important;
  }
}
/* 내 프로필 소개이미지 수정모드 이미지 업로드시 상태 변화 */
#myProfile .introView {
  border-radius: 8px;
  transition: filter 0.3s ease-in-out;
}

#myProfile .introPreview {
  width: 100%;
  max-height: 219px;
  object-fit: cover;
}

.info .ant-upload-wrapper .ant-upload-drag {
  height: auto;
}
.info .ant-upload-wrapper .ant-upload-drag .imageContainer img:first-child {
  width: 100%;
  max-height: 219px;
  object-fit: cover;
}
@media (max-width: 700px) {
  .info .ant-upload-wrapper .ant-upload-drag {
    height: 150px;
  }
  .info .ant-upload-wrapper .ant-upload-drag .imageContainer img:first-child {
    max-height: 150px;
  }
}

/* 채널 이미지 관련 padding 제거, 높이 고정 css */
body:has(#myProfile) .ant-upload-wrapper .ant-upload-drag .ant-upload.ant-upload {
  padding: 0 !important;
  /* height: 214px !important; 내 프로필 이미지 위치 제어가 안되어 주석처리리 */
  margin-bottom: 0 !important;
}
body:has(#myProfile) body :where(.css-dev-only-do-not-override-14i19y2).ant-upload-wrapper .flexColCenter.plusBannerBox .ant-upload-drag .ant-upload {
  padding: 0 !important;
}
body:has(#myProfile) .flexColCenter.plusBannerBox .ant-upload-drag .ant-upload.ant-upload.ant-upload {
  padding: 0 !important;
}

body:has(#myProfile) :where(.css-dev-only-do-not-override-14i19y2).ant-upload-wrapper .ant-upload-drag {
  background: none !important;
  border: none !important;
  width: 100% !important;
}
/* ///////////// */
/* ///////////// */
/* SELLER MODAL */
/* ///////////// */
/* ///////////// */
.sellerModal .title {
  margin: 0 0 37px;
}
.sellerModal .title h1 {
  font-size: 24px;
  font-weight: 700;
  color: #0e0e1f;
}
.sellerModal .title p {
  font-size: 24px;
}
.sellerModal .check {
  margin: 0 0 17px;
}
.sellerModal .check p {
  font-size: 13px;
  color: #000000;
  margin: 0 0 -3px 20px;
  border-bottom: 1px solid #000000;
  line-height: 1;
}
.sellerModal .scroll {
  max-height: 600px;
  overflow-y: auto;
  justify-content: flex-start;
}
.sellerModal .scroll .boxWrapper1,
.sellerModal .scroll .boxWrapper2,
.sellerModal .scroll .boxWrapper3,
.sellerModal .scroll .boxWrapper4 {
  padding: 20px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  margin: 0 0 24px;
}
.sellerModal .scroll .boxWrapper1 .box p,
.sellerModal .scroll .boxWrapper2 .box p,
.sellerModal .scroll .boxWrapper3 .box p,
.sellerModal .scroll .boxWrapper4 .box p {
  font-size: 12px;
  color: #0e0e1f;
  margin: 0 0 9px;
}
.sellerModal .scroll .boxWrapper1 .box:first-child {
  width: 200px;
}
.sellerModal .scroll .boxWrapper1 .box:last-child {
  width: calc(100% - 200px - 40px);
}
.sellerModal .scroll .boxWrapper1 .box:first-child .tab {
  background: linear-gradient(to right, #ca79fc 0%, #ff5eb6 100%);
  border-radius: 4px;
  padding: 4px;
  height: 40px;
}
.sellerModal .scroll .boxWrapper1 .box:first-child .tab div {
  width: calc(50% - 2px);
  font-size: 14px;
  color: #ffffff;
  border-radius: 4px;
  height: 100%;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
.sellerModal .scroll .boxWrapper1 .box:first-child .tab div:hover {
  background: #ffffff;
  color: #464548;
}
.sellerModal .scroll .boxWrapper1 .box:first-child .tab div#active {
  background: #ffffff;
  color: #464548;
}
.sellerModal .scroll .boxWrapper1 .box:last-child #darkGrey {
  width: 88px;
  height: 40px;
  font-size: 14px;
  border-radius: 4px;
}
.sellerModal .scroll .boxWrapper1 .box:last-child input {
  width: calc(100% - 88px - 12px);
}
.sellerModal .scroll .boxWrapper1 .box input,
.sellerModal .scroll .boxWrapper2 .box input,
.sellerModal .scroll .boxWrapper3 .box input,
.sellerModal .scroll .boxWrapper4 .box input {
  height: 40px;
  outline: none;
  border: 1px solid #e2dfe4;
  background: #f7f7f8;
  border-radius: 4px;
  padding: 0 12px;
  font-size: 13px;
}
.sellerModal .scroll .boxWrapper1 .box input::placeholder,
.sellerModal .scroll .boxWrapper2 .box input::placeholder,
.sellerModal .scroll .boxWrapper3 .box input::placeholder,
.sellerModal .scroll .boxWrapper4 .box input::placeholder {
  color: #a3a1a7;
}

.sellerModal .scroll .boxWrapper1 .box input:disabled,
.sellerModal .scroll .boxWrapper2 .box input:disabled,
.sellerModal .scroll .boxWrapper3 .box input:disabled,
.sellerModal .scroll .boxWrapper4 .box input:disabled {
  border: 1px solid #e2dfe4;
  background: #e9ecf1;
  color: #524f56;
}
.sellerModal .scroll .boxWrapper2 > div:first-child {
  padding: 0 0 16px;
  border-bottom: solid 1px rgba(0, 0, 0, 0.1);
  margin: 0 0 16px;
}
.sellerModal .scroll .boxWrapper2 div:first-child .box {
  width: 200px;
}

.sellerModal .scroll .boxWrapper2 div:first-child .box input {
  width: 100%;
}

.sellerModal .scroll .boxWrapper2 div:first-child .box:last-child {
  width: 224px;
}

.sellerModal .scroll .boxWrapper2 div:first-child .box:last-child input {
  width: calc(100% - 88px - 12px);
}

.sellerModal .scroll .boxWrapper2 div:first-child .box:last-child #darkGrey {
  width: 88px;
  height: 40px;
  font-size: 14px;
  border-radius: 4px;
}

.sellerModal .scroll .boxWrapper2 div:nth-child(2) .box:first-child {
  width: 200px;
}

.sellerModal .scroll .boxWrapper2 div:nth-child(2) .box:last-child {
  width: calc(100% - 200px - 40px);
}

.sellerModal .scroll .boxWrapper2 > div:not(:last-child) {
  margin: 0 0 17px;
}

.sellerModal .scroll .boxWrapper2 div .box input {
  width: 100%;
}

.sellerModal .scroll .boxWrapper2 div:nth-child(3) .box,
.sellerModal .scroll .boxWrapper2 div:nth-child(4) .box {
  width: calc(100% / 2 - 20px);
}

.sellerModal .scroll .boxWrapper3 > div:first-child,
.sellerModal .scroll .boxWrapper4 > div:first-child {
  margin: 0 0 17px;
}

.sellerModal .scroll .boxWrapper3 div:first-child .box,
.sellerModal .scroll .boxWrapper4 div:first-child .box {
  width: 200px;
}

.sellerModal .scroll .boxWrapper3 div .box input,
.sellerModal .scroll .boxWrapper4 div .box input {
  width: 100%;
}

.sellerModal .scroll .boxWrapper4 div:first-child .ant-select {
  width: 200px;
  height: 40px;
}

.sellerModal .scroll .boxWrapper4 div:last-child input {
  width: 212px;
}

.sellerModal .scroll .boxWrapper4 div:last-child .box .content > p {
  font-size: 13px;
  margin: 0 16px;
}

.sellerModal .scroll .boxWrapper4 div:last-child .box .content .inputRound {
  width: 40px;
  border-radius: 100%;
  margin: 0 16px 0 0;
}

.sellerModal .scroll .boxWrapper4 div:last-child .box .content .round {
  width: 16px;
  height: 16px;
  border-radius: 100%;
  background: #000000;
  margin: 0 16px 0 0;
}

.sellerModal .scroll .boxWrapper4 div:last-child .box .content .round:last-child {
  margin: 0 44px 0 0;
}

.sellerModal .scroll .boxWrapper4 div:last-child .box .content #darkGrey {
  width: 88px;
  height: 40px;
  border-radius: 4px;
  font-size: 14px;
}

.sellerModal .scroll .btnBox #purpleBtn,
.sellerModal .scroll .btnBox #logoutBtn {
  width: 100px;
  height: 40px;
  margin: 0 5px;
  font-size: 14px;
  border-radius: 4px;
}

@media (max-width: 800px) {
  .sellerModal .scroll {
    max-height: none;
  }

  .sellerModal .check {
    justify-content: space-between;
  }

  .sellerModal .scroll .boxWrapper2 > div,
  .sellerModal .scroll .boxWrapper2 > div:first-child,
  .sellerModal .scroll .boxWrapper1,
  .sellerModal .scroll .boxWrapper2,
  .sellerModal .scroll .boxWrapper3,
  .sellerModal .scroll .boxWrapper4 {
    flex-direction: column;
    align-items: flex-start;
  }

  .sellerModal .scroll .boxWrapper3 > div:first-child,
  .sellerModal .scroll .boxWrapper4 > div:first-child {
    flex-direction: column;
    align-items: flex-start;
    margin: 0;
  }

  .sellerModal .scroll .boxWrapper4 > div:first-child input,
  .sellerModal .scroll .boxWrapper4 div:first-child .ant-select,
  .sellerModal .scroll .boxWrapper2 div:nth-child(2) .box:last-child,
  .sellerModal .scroll .boxWrapper2 div:nth-child(2) .box:first-child,
  .sellerModal .scroll .boxWrapper2 div:nth-child(3) .box,
  .sellerModal .scroll .boxWrapper2 div:nth-child(4) .box,
  .sellerModal .scroll .boxWrapper1 .box:last-child,
  .sellerModal .scroll .boxWrapper2 div:first-child .box:last-child {
    width: 100%;
  }

  .sellerModal .scroll .boxWrapper2 div:nth-child(2) .box:last-child,
  .sellerModal .scroll .boxWrapper2 div:nth-child(2) .box:first-child,
  .sellerModal .scroll .boxWrapper2 div:nth-child(3) .box,
  .sellerModal .scroll .boxWrapper2 div:nth-child(4) .box,
  .sellerModal .scroll .boxWrapper1 .box {
    margin: 0 0 11px;
  }

  .sellerModal .scroll .boxWrapper2 > div:not(:last-child),
  .sellerModal .scroll .boxWrapper1 .box:last-child {
    margin: 0 0 10px;
  }

  .sellerModal .scroll .boxWrapper3 div:first-child .box,
  .sellerModal .scroll .boxWrapper4 div:first-child .box,
  .sellerModal .scroll .boxWrapper2 div:first-child .box {
    width: 100%;
    margin: 0 0 10px;
  }

  .sellerModal .scroll .boxWrapper2 div:first-child .box:last-child input {
    width: calc(100% - 88px - 12px);
  }

  .sellerModal .scroll .boxWrapper4 > div:last-child > div > div {
    flex-wrap: wrap;
  }

  .sellerModal .scroll .boxWrapper4 div:last-child .box .content .inputRound {
    margin: 0 5px 0 0;
  }

  .sellerModal .scroll .boxWrapper4 div:last-child .box .content .round {
    width: 10px;
    height: 10px;
    margin: 0 5px 0 0;
  }

  .sellerModal .scroll .boxWrapper4 > div:last-child > div > div input {
    width: 40%;
  }

  .sellerModal .scroll .boxWrapper4 div:last-child .box .content #darkGrey {
    width: 100%;
    margin: 20px 0 0;
  }

  .sellerModal .scroll .btnBox {
    justify-content: space-between;
  }

  .sellerModal .scroll .btnBox #purpleBtn,
  .sellerModal .scroll .btnBox #logoutBtn {
    width: calc(50% - 8px);
  }
}

#myProfile .userInfo .content .box .info:first-child > .rowBox > .mobileInput {
  width: 100%;
}
/* #myProfile .userInfo .content .box .info > .rowBox #darkGrey {
  width: 100%;
} */
#myProfile .myInfo .content .box .thumbUpdate {
  width: 100%;
}
#myProfile .myInfo .content .box .thumbUpdate .plusBox {
  width: 100%;
  height: 140px;
}
#myProfile .myInfo .content .box .infoBox .box2:last-child,
#myProfile .myInfo .content .box .infoBoxUpdate .box2:last-child {
  flex-direction: column;
}
.ant-upload-wrapper .ant-upload-drag .ant-upload {
  padding: 0;
}

.ant-upload-wrapper .ant-upload-drag .ant-upload-btn {
  display: flex;
  width: 100%;
  height: 100%;
  outline: none;
  border-radius: 8px;
}

.profileSection .ant-form-item {
  width: 100%;
}
#myProfile .rowBox .ant-form-item {
  flex: 1 1;
}
#myProfile .userInfo .content .box .info > .rowBox .ant-select {
  width: 100%;
}
.profileSection .rsWrapper .ant-row div:first-child {
  margin: 0 !important;
}
.profileSection .rsWrapper.flexColCenter #myHome .promptThumList {
  width: 100%;

  padding: 0 16px 40px;
}
.profileSection .rsWrapper.flexColCenter #myHome .promptThumList > div {
  width: 100%;
}
.profileSection .rsWrapper.flexColCenter #myHome .promptThumList #myProfile .myInfo .content .box .thumb .flexRowBetween {
  display: flex;
  justify-content: center;
  align-items: center;
}
.profileSection .rsWrapper.flexColCenter #myHome .promptThumList #myProfile .myInfo .content .box .thumb .flexRowBetween .flexRowBetween {
  width: auto;
  justify-content: center;
}
.profileSection .rsWrapper.flexColCenter #myHome .promptThumList #myProfile .myInfo .content .box .thumb {
  margin: 0;
}

.profileSection .rsWrapper.flexColCenter #myHome .promptThumList .slider-container .slick-track .slick-slide {
}
#myProfile .myInfo .content .box .thumb + .infoBox .box2 .info:first-child,
#myProfile .myInfo .content .box .thumb + .infoBox .box2 .info:last-child {
  width: 100%;
}
#myProfile .myInfo .content .box .infoBox .box2:last-child {
  flex-direction: column;
}
/* //////// */
/* //////// */
/* AIMODAL */
/* //////// */
/* //////// */

.aiModal .title {
  margin: 0 0 37px;
}
.aiModal .title h1 {
  font-size: 24px;
  font-weight: 700;
  color: #0e0e1f;
}
.aiModal .title p {
  font-size: 24px;
}
.aiModal .top {
  padding: 12px;
  border-radius: 16px;
  border-bottom: solid 1px rgba(0, 0, 0, 0.1);
  background-color: rgba(0, 0, 0, 0.05);
  align-items: flex-end;
  margin: 0 0 28px;
}
.aiModal .top .box {
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
  border: solid 1px #c2b8cb;
  height: 188px;
  width: calc(100% - 120px - 24px);
  background: #ffffff;
}
.aiModal .top .box .thumb {
  width: 123px;
}

.aiModal .top .box .thumb p {
  font-size: 12px;
  font-weight: 700;
  color: #464548;
  margin: 0 0 13px;
}

.aiModal .top .box .thumb .plusBox {
  width: 100%;
  height: 123px;
  border-radius: 4px;
  background: #f3f3f3;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.aiModal .top .box .thumb .plusBox .plus {
  width: 40px;
  height: 40px;
  border-radius: 100%;
  background: rgba(0, 0, 0, 0.1);
  font-size: 20px;
  color: #ffffff;
}

.aiModal .top .box .thumb .plusBox:hover {
  background: #f0dbf4;
}

.aiModal .top .box > div {
  width: calc(100% - 123px - 20px);
}

.aiModal .top .box > div .infoBox:not(:last-child) {
  width: 100%;
  margin: 0 0 12px;
}

.aiModal .top .box > div .infoBox p {
  font-size: 12px;
  font-weight: 700;
  color: #464548;
}

.aiModal .top .box > div .infoBox .ant-select {
  width: 300px;
  height: 40px;
}

.aiModal .top .box > div .infoBox input {
  height: 40px;
  width: 300px;
  border: 1px solid #e2dfe4;
  background: #f7f7f8;
  outline: none;
  padding: 0 12px;
  border-radius: 4px;
  font-size: 13px;
}

.aiModal .top .box > div .infoBox input::placeholder {
  font-size: 13px;
  color: #a3a1a7;
}

.aiModal .top #purpleBtn {
  width: 120px;
  height: 40px;
  font-size: 14px;
  border-radius: 24px;
}

.aiModal .filter {
  margin: 0 0 16px;
}

.aiModal .filter .ant-select {
  border-radius: 4px;
  width: 120px;
  height: 40px;
}

.aiModal .filter > div {
  width: auto;
}

.aiModal .filter > div input {
  width: 140px;
  height: 40px;
  border: 1px solid #e2dfe4;
  background: #f7f7f8;
  border-radius: 4px;
  padding: 8px 12px;
  outline: none;
  font-size: 13px;
}

.aiModal .filter > div p {
  font-size: 13px;
  margin: 0 12px;
}

.aiModal .filter > div #purpleBtn {
  width: 40px;
  height: 40px;
  margin: 0 0 0 12px;
  font-size: 20px;
  border-radius: 4px;
}

.aiModal .contentTop {
  border-top: 2px solid #000000;
  background: #f3f2fa;
  height: 48px;
}

.aiModal .contentTop div {
  font-size: 14px;
  color: #323146;
  font-weight: 500;
}

.aiModal .scroll {
  max-height: 350px;
  justify-content: flex-start;
  overflow: auto;
}

.aiModal .contentTop div:nth-child(1),
.aiModal .scroll .content div:nth-child(1) {
  width: 180px;
}

.aiModal .contentTop div:nth-child(2),
.aiModal .contentTop div:nth-child(4),
.aiModal .scroll .content div:nth-child(2),
.aiModal .scroll .content div:nth-child(4) {
  width: 120px;
}

.aiModal .scroll .content div:nth-child(4) .tab {
  padding: 4px 8px;
  font-size: 13px;
  color: #ffffff;
  width: auto;
  border-radius: 50px;
}

.aiModal .scroll .content div:nth-child(4) .tab.success {
  background: #525162;
}

.aiModal .scroll .content div:nth-child(4) .tab.accept {
  background: #0fc9f3;
}

.aiModal .scroll .content div:nth-child(4) .tab.ing {
  background: #f8c930;
}

.aiModal .scroll .content div:nth-child(4) .tab.fail {
  background: #fe393c;
}

.aiModal .contentTop div:nth-child(3),
.aiModal .scroll .content div:nth-child(3) {
  width: 140px;
}

.aiModal .scroll .content div:nth-child(3) img {
  width: 80%;
}

.aiModal .contentTop div:nth-child(6),
.aiModal .scroll .content div:nth-child(6) {
  width: 80px;
}

.aiModal .scroll .content div:nth-child(6) img {
  width: 20px;
}

.aiModal .contentTop div:nth-child(5),
.aiModal .scroll .content div:nth-child(5) {
  width: calc(100% - 180px - 120px - 120px - 140px - 80px);
}

.aiModal .scroll .content {
  border-bottom: 1px solid #e2dfe4;
  padding: 8px 0;
}

.aiModal .scroll .content div:nth-child(5) {
  font-size: 16px;
  color: #464548;
}

.aiModal .scroll .content div {
  font-size: 13px;
  color: #000000;
  font-weight: 600;
}

/* MODAL */
.dataModal .title {
  margin: 0 0 20px;
}

.dataModal .title h1 {
  font-size: 24px;
  color: #0e0e1f;
  font-weight: 700;
}

.dataModal .title p {
  font-size: 24px;
}

.dataModal .boxWrapper {
  border: solid 1px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 40px 0;
  margin: 0 0 24px;
}

.dataModal .boxWrapper .box {
  width: 210px;
  height: 226px;
  padding: 20px;
}

.dataModal .boxWrapper .box div h1 {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 8px;
}

.dataModal .boxWrapper .box div h1 span {
  font-size: 16px;
  font-weight: 400;
}

.dataModal .boxWrapper .box div h2 {
  font-size: 24px;
  color: #3e3d53;
  font-weight: 700;
}

.dataModal .boxWrapper .box#active {
  border: 1px solid #b041f3;
  border-radius: 40px;
  padding: 24px;
}

.dataModal .boxWrapper .box #greyBtn3,
.dataModal .boxWrapper .box #purpleBtn {
  width: 100%;
  height: 50px;
  border-radius: 24px;
}

.dataModal .boxWrapper .box .btn {
  width: 100%;
  height: 50px;
  background-color: rgba(0, 0, 0, 0.03);
  font-size: 16px;
  font-weight: 700;
  color: #4a4b50;
  border-radius: 24px;
}
@media (max-width: 700px) {
  .dataModal .boxWrapper {
    padding: 0;
    border: none;
    flex-wrap: wrap;
  }

  .dataModal .boxWrapper .box {
    width: 100%;
    border: 1px solid #cccccc;
    border-radius: 30px;
    height: auto;
    margin: 0 0 20px;
  }

  .dataModal .boxWrapper .box > div:first-child {
    flex-direction: row;
    justify-content: space-between;
    margin: 0 0 10px;
  }

  .dataModal .boxWrapper .box > div h1 {
    margin: 0;
  }
}

.plan-content > p {
  font-size: 12px;
  color: #464548;
  margin: 20px 0 17px;
}

.plan-content .checkBox {
  margin: 0 0 16px;
}

.plan-content .checkBox .check {
  width: 16px;
  height: 16px;
  border-radius: 100%;
  background: #2687e9;
  font-size: 10px;
  color: #ffffff;
  margin: 0 10px 0 0;
}

.plan-content .checkBox p {
  font-size: 14px;
}

#pinkBtn3 > span {
  width: 100%;
  height: 50px;
  border-radius: 24px;
  font-size: 16px;
  font-weight: 700;
  background: linear-gradient(to right, #ca79fc 0%, #ff5eb6 100%);
  color: #ffffff;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  border: none;
}

#pinkBtn3 > span:hover {
  background: linear-gradient(to right, #b041f3, #ec15ff);
}

#greyBtn6 {
  width: 100%;
  height: 50px;
  border-radius: 24px;
  font-size: 16px;
  font-weight: 700;
  border: none;
  background: rgba(0, 0, 0, 0.03);
  color: #a29fab;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

#greyBtn6:hover {
  background: #a29fab;
  color: #fff;
}

.btnBox #darkGreyBorder2,
.btnBox #purpleBtn {
  width: 100px;
  height: 40px;
  border-radius: 4px;
  font-size: 14px;
  margin: 0 5px;
}

/*================================
마이페이지 플랜정보 
================================*/
/* 공통 */
#plan {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 1520px;
}
#plan:has(.topArea) {
  padding-bottom: 24px;
}
#plan .btnBox {
  display: none;
}
#plan .tit {
  font-size: 16px;
  font-weight: 700;
  color: #3e3d53;
  padding-right: 16px;
}
#plan .l-section__header {
  padding: 12px 0 12px;
}
/* 첫번째 섹션 - 사용정보 */
#plan .topArea .box {
  display: flex;
  padding: 20px 0;
  border: 1px solid #dbdbe0;
  border-radius: 8px;
}
#plan .topArea .box > li {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  padding: 0 20px;
  align-items: start;
  letter-spacing: -0.4px;
}
#plan .topArea .box > li.row {
  flex-direction: row;
}
#plan .topArea .box > li.row > div {
  flex: 1 1;
}
#plan .topArea .box > li.row > div:last-child {
  padding-left: 20px;
  border-left: 1px solid #e0dbe4;
}
#plan .topArea .box > li:not(:last-child) {
  border-right: 1px solid #e0dbe4;
}
#plan .topArea .box > li h2 {
  font-size: 12px;
  font-weight: 700;
  color: #464548;
  margin-bottom: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
}
#plan .topArea .box > li h2 span {
  color: #fe393c;
  font-size: 16px;
  line-height: 0.2;
  margin-top: 2px;
}
#plan .topArea .box > li strong {
  display: block;
  font-size: 20px;
  font-weight: 600;
  color: #000000;
  /* margin: 4px 0 0; */
}
#plan .topArea .box > li:first-child strong {
  font-size: 28px;
  font-weight: 600;
}
#plan .topArea .box > li > div {
  height: 30px;
}
/* 다음결제일에 있는 아이콘인듯 */
#plan .topArea .box > li:first-child > div img {
  /* width: 30px;
  margin: 0 0 0 70px; */
}
#plan .topArea .box > li p {
  font-size: 12px;
  color: #0d88d4;
}
/* 쿠폰 사용중 뱃지인듯 */
#plan .topArea .box > li .coupon {
  width: auto;
  border-radius: 50px;
  padding: 4px 8px;
  border: 1px solid #fe393c;
  color: #f34144;
  font-size: 11px;
  margin: 0 0 0 4px;
}
#plan .topArea .box > li #pinkBtn {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 5px 10px;
  border-radius: 24px;
  font-size: 14px;
  line-height: 1;
}

/* 세번째 섹션 - 플랜정보 */
#plan .planArea .contentBox {
  border: 1px solid #dbdbe0;
  border-radius: 8px;
}
#plan .planArea .switchBox {
  padding: 32px 0 40px;
}
#plan .planArea .switchBox .ant-switch-inner-checked {
  height: 36px;
  line-height: 36px;
}
#plan .planArea .switchBox .ant-switch-inner-unchecked {
  height: 10px;
  line-height: 10px;
}
#plan .planArea .switchBox .ant-switch.ant-switch-checked {
  background: linear-gradient(to right, #b041f3 0%, #ec15ff 100%);
}
#plan .planArea .switchBox .ant-switch {
  width: 80px;
  height: 36px;
  margin: 0 16px 0 0;
  background: #0d88d4;
}
#plan .planArea .switchBox .ant-switch .ant-switch-handle {
  width: 26px;
  height: 26px;
  inset-inline-start: 4px;
  top: 5px;
}
#plan .planArea .switchBox .ant-switch.ant-switch-checked .ant-switch-handle {
  inset-inline-start: calc(100% - 30px) !important;
}
#plan .planArea .switchBox .ant-switch .ant-switch-handle::before {
  border-radius: 100%;
}
#plan .planArea .switchBox h1 {
  font-size: 24px;
  font-weight: 700;
  color: #323146;
}
#plan .planArea .switchBox p {
  margin-top: 16px;
  font-size: 14px;
  text-align: center;
  font-weight: 600;
}
#plan .planArea .switchBox p span {
  color: #c62cff;
}
#plan .planArea .contentBox {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 56px;
  padding: 32px 20px;
  border-radius: 8px;
}
#myPage #plan .planArea .contentBox .box {
  padding-top: 40px;
}
#plan .planArea .contentBox .box {
  width: 388px;
  min-height: 520px;
  padding: 24px;

  border-radius: 40px;
  border: 1px solid transparent;
  transition: all 0.2s ease-in-out;
  /* cursor: pointer; */
}
#plan .planArea .contentBox .box#active {
  border-radius: 40px;
  border: 1px solid #b041f3;
  border: 1px solid var(--gra-badge, #b041f3);
  background: #fff;
  background: var(--c-ff, #fff);
}

#plan .planArea .contentBox .box:hover {
  box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.1);
}
/* box Cont - top bottom 으로 나눔 */
#plan .planArea .contentBox .box .boxCont {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
}
#plan .planArea .contentBox .box .boxCont .top h1 {
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -1px;
  color: #3e3d53;
}
#plan .planArea .contentBox .box .boxCont .top h1 span {
  font-size: 16px;
  color: #524f56;
  margin-left: 8px;
}
#plan .planArea .contentBox .box .boxCont .top .planType {
  padding: 8px 0 20px;
  border-bottom: 1px dashed #524f56;
  gap: 12px;
}
#plan .planArea .contentBox .box .boxCont .top .planType p {
  font-size: 20px;
  color: #3e3d53;
  font-weight: 700;
}
#plan .planArea .contentBox .box .boxCont .top .planType p span {
  font-weight: 500;
}
#plan .planArea .contentBox .box .boxCont .top .planType .tab {
  width: 50px;
  height: 26px;
  font-size: 12px;
  color: #ffffff;
  /* margin: 0 0 0 12px; */
  border-radius: 20px;
}
#plan .planArea .contentBox .box .boxCont .top .planType .tab.beginner {
  background: #6d6c75;
}
#plan .planArea .contentBox .box .boxCont .top .planType .tab.basic {
  background: #f8ab30;
}
#plan .planArea .contentBox .box .boxCont .top .planType .tab.pro {
  background: linear-gradient(to right, #b041f3 0%, #ec15ff 100%), linear-gradient(to right, #13d5df 0%, #f138fc 100%);
  position: relative;
}
#plan .planArea .contentBox .box .boxCont .top .planType .tab.pro::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  border-radius: 20px;
  height: 30px;
  width: 52px;
  background: linear-gradient(to right, #13d5df 0%, #f138fc 100%);
  z-index: -1;
}
.badgeArtist {
  width: auto;
  /* height: 26px; */
  font-size: 11px;
  color: #ffffff;
  border-radius: 16px;
  display: flex;
  padding: 2px 6px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  display: flex;
  flex-direction: row;
}
.badgeArtist.beginner {
  background: #9a9fb5;
}
.badgeArtist.pro {
  background: #9a24a2;
}
.badgeArtist.pro::before {
  background: url(../../static/media/white_artist_icon.270cb422fb393ff25b1f.svg) no-repeat left center / 100%;
  content: '';
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
#plan .planArea .contentBox .box .boxCont .bottom {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 12px;
  font-size: 14px;
}
#plan .planArea .contentBox .box .boxCont .bottom li {
  padding: 8px 0;
  display: flex;
  align-items: center;
  flex-direction: row;
}
#plan .planArea .contentBox .box .boxCont .bottom li b {
  font-size: 12px;
  font-weight: 500;
  color: #464548;
}
#plan .planArea .contentBox .box .boxCont .bottom li .check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-right: 10px;
  border-radius: 100%;
  background: #2687e9;
  text-align: center;
  color: #ffffff;
}
#plan .planArea .contentBox .box .boxCont .bottom li .check span {
  scale: 0.7;
}
/* 버튼 */
#plan .planArea .contentBox .box #greyBtn6,
#plan .planArea .contentBox .box #pinkBtn3 {
  width: 100%;
  height: 50px;
  border-radius: 24px;
  font-size: 16px;
  font-weight: 700;
  margin: 28px 0 0;
}
#plan .planArea .contentBox .box .btn {
  width: 100%;
  height: 50px;
  border-radius: 24px;
  font-size: 16px;
  font-weight: 700;
  background-color: rgba(0, 0, 0, 0.03);
  color: #4a4b50;
}
#plan .couponArea {
  padding-bottom: 20px;
}

@media (max-width: 900px) {
  #myProfile .rsWrapper .titleBox {
    margin: 0 0 24px;
    position: relative;
  }
}
@media (max-width: 700px) {
  #myPage .rsWrapper #myProfile,
  .profileSection .payDetail {
    padding: 20px 0;
    margin: 0;
  }
  #myPage > .rsWrapper:has(.tabArea) #myProfile {
    padding: 0;
  }
  /* #myPage > .rsWrapper:has(.tabArea) #myProfile form div:first-child {
    margin: 0 0 20px;
  } */
  #plan {
    gap: 50px;
  }
  /* 첫번째 섹션 - 사용정보 */
  #plan .topArea .box {
    flex-direction: column;
    padding: 0 20px;
  }
  #plan .topArea .box > li {
    padding: 20px 0;
    gap: 6px;
  }
  #plan .topArea .box > li:not(:last-child) {
    border-right: none;
    border-bottom: 1px solid #e0dbe4;
  }
  #plan .topArea .box > li h2 {
    margin-bottom: 0;
  }
  #plan .topArea .box > li > div {
    height: auto;
    height: initial;
  }
  /* 두번째 섹션 - 쿠폰정보 그리드 */
  #plan .l-section__header {
    flex-direction: column;
    align-items: start;
    gap: 16px;
  }
  #plan .l-section__header > div {
    width: 100%;
    gap: 2%;
    justify-content: space-between;
  }
  #plan .l-section__header > div:last-child {
    align-items: flex-start;
    flex-wrap: wrap;
    margin-left: 0;
    gap: 4px;
  }
  #plan .l-section__header > div:last-child label {
    width: 100%;
    margin-bottom: 10px;
  }
  #plan .l-section__header > div:last-child input.default {
    flex: 4 1;
  }
  #plan .l-section__header > div:last-child button {
    flex: 1 1;
  }
  /* 세번째 섹션 - 플랜정보 */
  #plan .topArea .box > li:nth-of-type(2) strong,
  #plan .topArea .box > li:nth-of-type(3) strong {
    /* font-size: 20px;
    font-weight: 600; */
    line-height: 1;
  }
  #plan .planArea .switchBox {
    padding: 0 0 50px 0;
  }
  #plan .planArea .contentBox {
    flex-direction: column;
    gap: 30px;
    border: 0;
    padding: 0;
  }
  #plan .planArea .contentBox .box {
    width: 100%;
    padding: 30px;
    height: auto;
    min-height: auto;
    border: 1px solid #ccc;
    gap: 20px;
  }
  #plan .planArea .contentBox .box .boxCont .top .planType {
    padding: 15px 0;
  }
}
/*================================
마이페이지 알림림
================================*/
.notice-area #none {
  padding-bottom: 12px;
}

/*================================
마이페이지 랭킹
================================*/
.rankingArea {
  width: 100%;
}
/* .rankingArea .aui-grid-body-panel {
  top: 0 !important;
} */
.rankingArea__header {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 12px 0;
  border-bottom: 2px solid #464548;
}
.rankingArea__header .btnBox {
  display: flex;
  gap: 4px;
}
.rankingArea__header .inputBox {
  display: flex;
  gap: 4px;
  width: 100%;
}
.rankingArea__header .inputBox input {
  width: 250px;
}
.rankingArea__header .inputBox button {
  border-radius: 4px;
}
.rankingArea__header .inputBox .btn-searchIcon {
  width: 40px;
  height: 40px;
}
.rankingArea__header .inputBox .btn-reset {
  width: 40px;
  height: 40px;
  border-color: #6d6c75;
}
.rankingArea__header .inputBox .btn-block {
  padding: 8px 12px;
  margin-left: auto;
}
.rankingArea__table .aui-grid-table {
  border-radius: 8px;
  overflow: hidden;
}
.RankingSection .modal .aui-grid-table {
  border-radius: 0;
}
.rankingArea__table .badge-white {
  padding: 2px 4px;
}

.rankingArea .modal .modalHeader {
  padding-bottom: 20px;
}
.rankingArea .modal .modalCont .inputArea {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 0;
}
.rankingArea .modal .modalCont .inputArea input {
  width: 250px;
}
.rankingArea .modal .modalCont .inputArea > span {
  margin-right: 16px;
  font-size: 16px;
}
.rankingArea .modal .modalCont .inputArea .btn-searchIcon {
  width: 40px;
  height: 40px;
  border-radius: 4px;
}
.rankingArea .modal .modalCont .inputArea .btn-unblock {
  height: 40px;
  padding: 4px 12px;
  margin-left: auto;
}
.rankingArea .modal .modalCont .inputArea .ant-select {
  width: 120px;
}

/* 고도화, 엔지니어 랭킹 */
.rankingArea .titleBox {
  padding: 40px 0 28px;
  font-size: 32px;
  color: #0e0e1f;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.rankingArea .titleBox span {
  /* padding-left: 10px; */
  background: linear-gradient(90deg, #13d5df 0%, #f138fc 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.l-table .tableHeader .th.headerProfile,
.aui-grid-header-panel .aui-grid-table tr td.headerProfile span {
  padding-left: 8px;
  text-align: left;
}
@media (max-width: 1100px) {
  #myPage .rsWrapper:has(#myHome) {
    padding: 0 !important;
  }
  #myHome .filter {
    padding-top: 48px;
  }
}

@media (max-width: 700px) {
  .rankingArea__header {
    flex-direction: column;
    align-items: start;
    gap: 10px;
    padding-bottom: 30px;
  }
  .rankingArea__header .inputBox input {
    flex: 1 1;
  }
  .rankingArea__header .inputBox .btn-block {
    width: 40px;
    height: 40px;
    gap: 0;
    margin-left: 0;
    font-size: 0;
    color: transparent;
  }
  .rankingArea .modal .modalCont .inputArea {
    flex-wrap: wrap;
    row-gap: 30px;
    column-gap: 4px;
    padding-top: 0;
  }
  .rankingArea .modal .modalCont .inputArea * {
    order: 1;
  }
  .rankingArea .modal .modalCont .inputArea input {
    width: calc(100% - 44px - 44px);
  }
  .rankingArea .modal .modalCont .inputArea > span {
    width: calc(100% - 4px - 120px);
    order: 2;
    margin-right: 0;
  }
  .rankingArea .modal .modalCont .inputArea .btn-unblock {
    width: 40px;
    margin-left: 0;
    gap: 0;
    font-size: 0;
  }
  .rankingArea .modal .modalCont .inputArea .ant-select {
    order: 3;
  }
  .rankingArea .titleBox {
    font-size: 26px;
  }
  .rankingArea .titleBox span {
    /* display: block;
    padding: 0;
    padding-top: 5px;
    font-size: 30px;
    width: fit-content; */
  }
  /* .rankingArea__table .aui-grid-template-renderer-wrapper:has(.badge-white) .ai_fl_area {
    justify-content: right;
  } */
  .profileSection .rsWrapper.flexColCenter #myHome .promptThumList {
    padding: 0 16px 40px;
  }
}

/*================================
마이페이지 결제내역
================================*/
.payDetail .searchArea {
  display: flex;
  gap: 10px;
  padding-bottom: 12px;
  /* border-bottom: 2px solid #000; */
}
@media (max-width: 700px) {
  .payDetail .searchArea {
    flex-wrap: wrap;
  }
  .payDetail .ant-select {
    width: 100% !important;
  }
  .payDetail .searchArea .dateBox {
    flex: 1 1;
    display: flex;
    align-items: center;
  }
  .payDetail .searchArea .dateBox .ant-picker {
    flex: 1 1;
  }
}

/* 메시지 전체 레이아웃 */
#myMessage {
  height: calc(100vh - 276px);
  justify-content: flex-start;
}
/* #myMessage > div {
  border-bottom: solid 2px #000;
} */
/* #myMessage > div > .title {
  padding: 40px 0 48px;
  overflow: auto;
} */
/* #myMessage > div > .title .overflowBox {
  min-width: 800px;
}
#myMessage > div > .title .overflowBox > div {
  margin: 0 30px;
  width: auto;
  position: relative;
}
#myMessage > div > .title .overflowBox div h1 {
  font-size: 32px;
  font-weight: bold;
  color: #cccccc;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
#myMessage > div > .title .overflowBox div h1:hover,
#myMessage > div > .title .overflowBox div#active h1 {
  color: #0e0e1f;
}
#myMessage > div > .title .overflowBox div .round {
  display: none;
}
#myMessage > div > .title .overflowBox div#active .round {
  display: flex;
  position: absolute;
  top: -6px;
  left: -10px;
  width: 8px;
  height: 8px;
  border-radius: 100%;
  background: #fe5139;
} */

/* 탭 하단 레이아웃 */
#message {
  height: calc(100vh - 261px);
  padding: 25px 0 10px;
  justify-content: flex-start;
}
#message > .rsWrapper {
  height: 100%;
  align-items: start;
  background: url(../../static/media/logoBG.2514a4f534708efd8a95.png)no-repeat right 95%;
  background-size: 50vw;
}

/* 메시지 리스트 영역 */
#message .rsWrapper .list {
  max-width: 400px;
  border-radius: 8px;
  border: solid 1px rgba(0, 0, 0, 0.1);
  background-color: #f3f3f3;
  overflow: hidden;
  height: 100%;
  justify-content: flex-start;
  overflow-y: auto;
  position: relative;
}
#message .rsWrapper .list .top {
  min-height: 52px;
  padding: 8px 12px 8px 16px;
  border-bottom: solid 1px #dfdce4;
  background-color: #fff;
  font-size: 14px;
  position: absolute;
  top: 0;
  right: 0;
  height: 52px;
  z-index: 2;
}
.logoutBtn,
#message .rsWrapper .list .top .logoutBtn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid #c4c3c7;
  border-radius: 4px;
  transition: 0.3s;
}
.logoutBtn img,
#message .rsWrapper .list .top .logoutBtn img {
  width: 18px;
}
.logoutBtn:hover,
#message .rsWrapper .list .top .logoutBtn:hover {
  background-color: rgb(226, 223, 228, 0.3);
}
#message .rsWrapper .list .box#active {
  background: #ffffff;
}
#message .rsWrapper .list .box#new {
  background: #fdf2ff;
}
#message .rsWrapper .list .box {
  padding: 8px 12px 8px 16px;
  border-bottom: solid 1px #eae8ec;
  gap: 16px;
  height: 67px;
}
#message .rsWrapper .list .listBox {
  flex: 1 1;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  overflow: auto;
  flex-direction: column;
  width: 100%;
  height: fit-content;
  margin-top: 52px;
}
#message .rsWrapper .list .box > div {
  /* padding: 8px 12px 8px 16px; */
  /* border-bottom: solid 1px #eae8ec; */
  gap: 16px;
  height: 67px;
}
#message .rsWrapper .list .box:has(.ant-checkbox-wrapper-checked) {
  background-color: #fdf2ff;
}

#message .rsWrapper .list .box:has(.noResult) {
  border-bottom: none;
  height: 100%;
}
#message .rsWrapper .list .box .noResult {
  border: none;
  background: none;
  width: 100% !important;
  height: 100%;
}
#message .rsWrapper .list .box > div:first-child {
  width: auto;
  position: relative;
  height: 50px;
}
#message .rsWrapper .list .box > div:first-child img {
  width: 32px;
  height: 32px;
  border-radius: 100%;
  box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.3);
}
#message .rsWrapper .center .message .reciver > div > div > .round,
#message .rsWrapper .list .box > div:first-child .round {
  border: 2px solid #ffffff;
  background: #e94cf7;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  position: absolute;
  bottom: 0;
  right: 0;
}
#message .rsWrapper .list .box .more {
  width: 12px;
  position: relative;
  margin: 0;
  padding-bottom: 8px;
}
#message .rsWrapper .list .box .more svg {
  width: 24px;
  height: 24px;
}
#message .rsWrapper .list .box .check {
  gap: 16px;
  margin: 0;
  border: 0;
}
#message .rsWrapper .list .box .messageD {
  width: calc(100% - 180px);
  gap: 4px;
  cursor: pointer;
}
#message .rsWrapper .list .box .info {
  /* width: 168px; */
  gap: 8px;
  align-items: end;
  justify-content: end;
  padding-block-end: 12px;
}
#message .rsWrapper .list .box .info:has(.more) {
  flex-direction: row;
}
#message .rsWrapper .list .box > div:first-child {
  gap: 10px;
}
#message .rsWrapper .list .box > div > h1 {
  font-size: 16px;
  font-weight: 600;
  color: #0e0e1f;
  line-height: 1.5;
  text-wrap-mode: nowrap;
}
#message .rsWrapper .list .box > div > .count {
  width: 26px;
  height: auto;
  background: #f34144;
  border-radius: 100px;
  padding: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #ffffff;
}
#message .rsWrapper .list .box > div > h2 {
  color: #656262;
  font-size: 12px;
  font-weight: 400;
  text-wrap-mode: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
#message .rsWrapper .list .box .info > p {
  font-size: 11px;
  color: #a3a1a7;
  font-weight: 500;
  width: 68px;
  text-align: right;
}
/* #message .rsWrapper .list .box .more p {
  font-size: 18px;
  color: #686275;
} */
#message .rsWrapper .list .box .more .absoluteBox {
  position: absolute;
  top: 20px;
  right: 0;
  border: 1px solid #c718e2;
  background: #ffffff;
  padding: 4px;
  width: 100px;
  border-radius: 4px;
  z-index: 10;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.25);
}
#message .rsWrapper .list .box .more .absoluteBox > div:hover {
  background: #f7f7f8;
}
#message .rsWrapper .list .box .more .absoluteBox > div {
  font-size: 13px;
  border-radius: 4px;
  height: 32px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

/* 가운데 상세 메시지 영역 */
#message .rsWrapper .center {
  flex: 1 1;
  justify-content: flex-start;
  height: 100%;
  padding: 0 25px;
  background: #fff;
}
#message .rsWrapper .center .title {
  display: flex;
  align-items: center;
  width: 100%;
  height: 76px;
  gap: 4px;
}
#message .rsWrapper .center .title .vgBox {
  display: flex;
  align-items: center;
  padding-top: 4px;
}
s #message .rsWrapper .btn-back-mes {
  display: none;
  /* margin-bottom: 8px; */
}
#message .rsWrapper .center .title img {
  width: 10px;
  margin: 0 20px 0 0;
}
#message .rsWrapper .center .title h1 {
  font-size: 24px;
  font-weight: 700;
}
#message .rsWrapper .center .message {
  height: calc(100% - 76px - 50px - 24px);
  justify-content: flex-start;
}
#message .rsWrapper .center .message .sender,
#message .rsWrapper .center .message .reciver {
  margin: 0 0 12px;
}
#message .rsWrapper .center .message .reciver > div > div {
  position: relative;
  width: auto;
  margin: 0 8px 0 0;
}
#message .rsWrapper .center .message .sender > div,
#message .rsWrapper .center .message .reciver > div {
  align-items: flex-end;
  margin: 0 0 8px;
}
#message .rsWrapper .center .message .reciver > div > div > img {
  width: 40px;
  height: 40px;
  border-radius: 100%;
}
#message .rsWrapper .center .message .sender > div,
#message .rsWrapper .center .message .reciver > div > div:last-child {
  max-width: 280px;
  width: auto;
  font-size: 14px;
  color: #000000;
  font-weight: 600;
  padding: 8px 16px;
  background: #f7f7f8;
  border-radius: 24px 24px 24px 0;
  line-height: 1.4;
}
#message .rsWrapper .center .message .sender > div {
  border-radius: 24px 24px 0 24px;
  font-weight: 300;
}
#message .rsWrapper .center .message .sender > p,
#message .rsWrapper .center .message .reciver > p {
  font-size: 11px;
  color: #a3a1a7;
  font-weight: 600;
  letter-spacing: -0.33px;
}
#message .rsWrapper .center .message .sender > div {
  background: #403748;
  color: #ffffff;
}
#message .rsWrapper .center .message .sender > div > img {
  width: 58px;
  border-radius: 4px;
}
#message .rsWrapper .center .inputBox {
  margin: 24px 0 0;
  height: 50px;
  background: #f7f7f8;
  border-radius: 24px;
  padding: 8px 12px;
  margin-top: 12px;
  border: 1px solid transparent;
}
#message .rsWrapper .center .inputBox #pinkBtn.upload {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
}
#message .rsWrapper .center .inputBox #pinkBtn.upload img {
  width: 18px;
}
#message .rsWrapper .center .inputBox .send {
  display: flex;
  height: 34px;
  padding: 12px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 24px;
  background: #ccc;
  color: #000;
}
#message .rsWrapper .center .inputBox .send:hover {
  background: #eb5ef8;
  color: #fff;
}
#message .rsWrapper .center .inputBox .ant-input-outlined:focus + .send {
  background: #eb5ef8;
  color: #fff;
}
#message .rsWrapper .center .inputBox input {
  width: calc(100% - 32px - 61px);
  padding: 0 10px;
  height: 100%;
  border: none;
  outline: none;
  background: transparent;
  box-shadow: none;
  font-size: 14px;
  color: #000000;
}
#message .rsWrapper .center .inputBox:has(input:focus) {
  background-color: #fff;
  border: 1px solid #eb5ef8;
}
#message .rsWrapper .center .inputBox input:focus {
  background-color: #fff;
}
#message .rsWrapper .center .notice {
  display: flex;
  flex-direction: column;
}
#message .rsWrapper .center .notice .date {
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: 400;
  color: #a3a1a7;
}
#message .rsWrapper .center .notice .box {
  display: flex;
  gap: 8px;
  width: 100%;
}
#message .rsWrapper .center .notice .box .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(to bottom, #13d5df 0%, #f138fc 100%);
}
#message .rsWrapper .center .notice .box .icon img {
  width: 24px;
  height: 24px;
}
#message .rsWrapper .center .notice .box .content {
  flex: 1 1;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}
.fiueiR {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px 0;
  width: 100%;
}
/* 메시지 프로필 영역 box & info */
#message .rsWrapper .profile {
  width: 320px;
  height: 100%;
  background: linear-gradient(to bottom, #d6ecf6, #e9e4f6);
  padding: 15px;
  border-radius: 0 8px 8px 0;
  position: relative;
  justify-content: flex-start;
  display: flex;
  gap: 16px;
  overflow: hidden;
}
#message .rsWrapper .profile .title {
  display: none;
}
#message .rsWrapper .profile .box {
  padding: 16px 24px;
  border-radius: 8px;
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.05);
  background-color: rgba(255, 255, 255, 0.5);
  z-index: 10;
}
#message .rsWrapper .profile .box .profileBox {
  gap: 8px;
}
#message .rsWrapper .profile .box .profileBox > img {
  width: 80px;
  height: 80px;
  border-radius: 100%;
  border: solid 1px rgba(0, 0, 0, 0.05);
  /* margin: 0 0 8px; */
}
#message .rsWrapper .profile .box .profileBox > h1 {
  font-size: 14px;
  color: #0e0e1f;
}
#message .rsWrapper .profile .box .profileBox > h2 {
  font-size: 11px;
  color: #6d6c75;
}
#message .rsWrapper .profile .box .profileBox > div:has(.badge_s) img {
  width: 13px;
  height: 13px;
  margin-left: 4px;
}
#message .rsWrapper .profile .box .followBox {
  position: relative;
  padding: 20px 0;
  border-bottom: solid 1px rgba(0, 0, 0, 0.1);
}
#message .rsWrapper .profile .box .followBox .btn-follow {
  margin-left: 16px;
  height: 36px;
  text-wrap-mode: nowrap;
}
/* 팔로워확인모달 */
#message .followBox .modal-overlay {
  position: absolute;
  top: 100%;
  right: 50%;
  transform: translateX(50%);
  z-index: 999;
}
#message .followBox .modal-content {
  width: 280px;
  background: white;
  padding: 8px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  color: #000;
}
#message .followBox .modal-content .title {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  position: relative;
}
#message .followBox .modal-content .title img {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  position: absolute;
  right: 0;
  margin: 0;
}
#message .followBox .modal-content .title h2 {
  font-size: 16px;
  font-weight: 600;
  padding: 12px 0 0px;
}
#message .followBox .modal-content .data {
  max-height: 320px;
  overflow-y: auto;
}
#message .rsWrapper .profile .box .followBox > div {
  /* flex: 1; */
  padding: 0 12px;
}
#message .rsWrapper .profile .box .followBox .btn-follow {
  margin-left: 0;
}
#message .rsWrapper .profile .box .followBox > div h1 {
  margin-bottom: 2px;
  font-size: 16px;
  font-weight: 600;
  color: #0e0e1f;
  line-height: 1.4;
  cursor: pointer;
}
#message .rsWrapper .profile .box .followBox > div p {
  font-size: 12px;
  color: #0e0e1f;
  font-weight: 500;
  text-align: left;
}
#message .rsWrapper .profile .box .followBox .aui-grid-body-panel .aui-grid-default-column:nth-child(3) .aui-grid-renderer-base {
  text-align: left;
}
#message .rsWrapper .profile .box .infoBox {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  padding-top: 12px;
}
#message .rsWrapper .profile .box .infoBox .badgeArea {
  display: flex;
  gap: 4px;
}
#message .rsWrapper .profile .box .infoBox .snsArea button {
  width: 16px;
  height: 16px;
}
#message .rsWrapper .profile .box .infoBox .rankingArea {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}
#message .rsWrapper .profile .box .infoBox .rankingArea > img:first-child {
  width: 14px;
  height: 14px;
}
#message .rsWrapper .profile .box .infoBox .rankingArea .absoluteBox {
  position: absolute;
  top: 30px;
  left: 0;
  z-index: 10;
  min-width: 100px;
  padding: 5px;
  border-radius: 4px;
  border: solid 1px #c718e2;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
  background-color: #fff;
  gap: 2px;
}
#message .rsWrapper .profile .box .infoBox .rankingArea .absoluteBox img {
  width: 18px;
}
#message .rsWrapper .profile .box .infoBox .rankingArea .absoluteBox p {
  width: 100%;
}
#message .rsWrapper .profile .box .infoBox .rankingArea .absoluteBox li {
  display: flex;
  align-items: center;
  justify-content: start;
  width: 100%;
  padding: 2px;
  color: #000;
  padding: 8px;
  gap: 8px;
}
#message .rsWrapper .profile .box .infoBox .aiArea {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
#message .rsWrapper .profile .box .infoBox .aiArea p {
  font-size: 12px;
  color: #8790a3;
  font-weight: 600;
}
#message .rsWrapper .profile .box .infoBox .aiArea > div {
  gap: 5px;
  padding: 0;
}
#message .rsWrapper .profile .box .infoBox .major {
  flex-wrap: nowrap;
}
#message .rsWrapper .profile .box .infoBox .rateArea {
  display: flex;
  align-items: center;
  gap: 8px;
}
#message .rsWrapper .profile .box .infoBox .rateArea h2 {
  font-size: 16px;
  font-weight: 600;
  color: #0e0e1f;
}
/* ant 별점 컨트롤 */
#message .rsWrapper .profile .box .infoBox .rateArea ul {
  display: flex;
}
#message .rsWrapper .profile .box .infoBox .rateArea ul li {
  margin: 0;
}
#message .rsWrapper .profile .box .infoBox .rateArea ul li svg {
  width: 14px;
}
#message .rsWrapper .profile .box .infoBox .rateArea p {
  font-size: 14px;
  color: #87858b;
}
#message .rsWrapper .profile .info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  padding: 0 8px;
  overflow: auto;
}
#message .rsWrapper .profile .info h3 {
  font-size: 14px;
  font-weight: 500;
  color: #0e0e1f;
}
#message .rsWrapper .profile .info h4 {
  font-size: 13px;
  color: #6d6c75;
  font-weight: 400;
  line-height: 1.4;
}
@media (max-width: 1100px) {
  .chatSection #myMessage > div {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
  #myMessage {
    height: calc(100vh - 273px);
    justify-content: flex-start;
  }
}
@media (max-width: 800px) {
  #myMessage .rsWrapper:has(.title.tabArea) {
    /* padding: 0; */
    width: 100vw;
    justify-content: flex-start;
    padding: 0;
  }
  #message .rsWrapper .list {
    max-width: 100%;
  }

  section:has(#myMessage) + #footer {
    padding: 0;
    margin: 0;
    background: #ffffff;
    height: 179px;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1000;
    right: 0;
    top: auto;
  }
}
@media (max-width: 700px) {
  /* 메시지 레이아웃 */

  #message {
    padding: 0;
    /* height: calc(100vh - 258px); */
    justify-content: flex-start;
    position: absolute;
    top: 107px;
    bottom: 0;
    height: auto;
  }

  #message .rsWrapper {
    padding: 0;
  }
  #message .rsWrapper .list .box > div > h1 {
    font-weight: 500;
  }
  /* 메시지 리스트 영역 */
  #message .rsWrapper .list .top {
    padding: 8px 24px;
    top: 2px;
  }
  #message .rsWrapper .list {
    max-width: none;
  }
  #message .rsWrapper .list .box {
    padding: 8px 24px 8px 24px;
  }
  #message .rsWrapper .list .box .info {
    width: 214px;
  }
  /* 가운데 상세 메시지 영역 */
  #message .rsWrapper .center {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1001;
    width: 100vw !important;
    padding: 0 15px;
    background-color: #fff;
  }
  #message .rsWrapper .btn-back-mes {
    display: block;
    width: 10px;
    height: 18px;
    margin-right: 12px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAA8CAYAAADsWQMXAAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAEoSURBVHgB7drRDYIwFIXhEydwhI7gCI7gBjACG8AGukHZwBEYgREYATfANkrSB6XXqKe3Sf/kPvsFmsgVgTS1bmY3ixvrZo9E2ScinAEJegVZh3Z1/AcNGxAaxn/IGIFYEJJARhCuitEEmSKQXhPk75mcIBcQMgJIB0IHTZC5QIIqTZAlMg0ISSA1CDVaIG0E4c/PEYQkkAMIZQOZNEEMCJ21QGyBBEl2GtoV6SOQkQWBAEJbO3dublCUf0hWc5v8bbhCyQFe61FA28XOEB3UoYC+A9EerrIGnUCswzbITwViNTIEUdbbNX8+Yot/C2KSn0QKaNIEMgX0A5AFMZMjyD9309YgIwBR9zI1L78+AQ0gJtnN6O+2eyjCvANZJKzD4wt2RvD3gzvTy+VtsiEJggAAAABJRU5ErkJggg==) no-repeat center;
    background-size: contain;
  }
  #message .rsWrapper .center .svgBox {
    display: none;
  }
  #message .rsWrapper .center .inputBox {
    margin-top: 12px;
  }

  /* 대화 클릭시 노출되는 프로필 */
  #message .rsWrapper .profile {
    display: none;
    position: fixed;
    z-index: 1001;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
  }
  #message .rsWrapper .profile.active {
    display: flex;
  }
  #message .rsWrapper .profile .title {
    display: flex;
    align-items: center;
    height: 44px;
    color: #0e0e1f;
  }
  #message .rsWrapper .profile .title h1 {
    font-size: 24px;
    font-weight: 700;
    color: #0e0e1f;
  }
  #message .rsWrapper .profile .box .followBox > div {
    /* flex: 1; */
    padding: 0 12px;
    width: auto;
    min-width: 92px;
  }
  /* 팔로워 확인 모달 */
  #message .followBox .modal-overlay {
    position: fixed;
    top: 0;
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.1);
  }
  #message .followBox .modal-content {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    padding: 16px 24px 12px;
  }
  #message .followBox .modal-content .title {
    flex-direction: column;
    align-items: start;
    gap: 10px;
    margin-bottom: 12px;
    height: auto;
    height: initial;
  }
  #message .followBox .modal-content .title h2 {
    font-size: 26px;
  }
  #message .followBox .modal-content .title img {
    position: static;
    position: initial;
  }
  #message .rsWrapper .list {
    width: 100%;
    border: none;
    background: #ffffff;
    /* border-top: 1px solid #f3f3f3; */
  }

  .chatSection #myMessage .title {
    /* border: 0 !important; */
  }
  .chatSection .tabArea .overflowBox {
    width: 100%;
    justify-content: start;
  }
}

@charset "UTF-8";

.tabArea {
  /* padding: 40px 0 32px; 명예의 전당 20px height:62px*/
  padding: 16px 0 12px;
  /* height: 69px; */
  gap: 36px;
  align-items: flex-start;
  overflow-x: scroll;
}
/* 요청으로 인한 고정 속성 추가 */
.tabArea {
  position: fixed;
  top: 52px;
  height: 62px;
  z-index: 100;
  background-color: #fff;
}
body:has(.tabArea) section.userPage {
  margin-top: calc(52px + 62px) !important;
}
#myPage:has(.top > img) .tabArea {
  width: 100%;
  max-width: 100%;
}
#myPage .tabArea {
  max-width: 1518px;
  width: calc(100% - 32px);
}

.tabArea .overflowBox {
  padding: 0;
  margin: 0;
  height: 32px;
  min-width: 700px;
  gap: 28px;
}

.tabArea .overflowBox > div,
.tabArea > div {
  margin: 0 8px;
  width: auto;
  position: relative;
  gap: 36px;
}

.tabArea .overflowBox > div {
  margin: 0 8px;
  width: auto;
  position: relative;
}

/*default tab*/

.tabArea div h1,
.tabArea .overflowBox div h1 {
  /* font-size: 32px; */
  font-size: 22px;
  font-weight: 600;
  color: #cccccc;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  padding: 0;
  text-wrap: nowrap;
  line-height: 1.2;
}

.tabArea div h1.m_new,
.tabArea .overflowBox div h1.m_new {
  background: linear-gradient(90deg, #b041f3 0%, #ec15ff 100%);
  background: var(--gra-badge, linear-gradient(90deg, #b041f3 0%, #ec15ff 100%));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
}

#prompt > div > .tabArea .overflowBox .flexColCenter {
  position: relative;
}

.tabArea .overflowBox div .round,
.tabArea div .round {
  display: none;
}

/* 프롬프트 2depth 탭 */

.tabArea .overflowBox div h1:hover,
.tabArea .overflowBox div#active h1 {
  color: #0e0e1f;
}

.overflowBox div .round {
  display: none;
}

.tabArea .overflowBox div#active .round {
  display: flex;
  position: absolute;
  top: -2px;
  left: -10px;
  width: 8px;
  height: 8px;
  border-radius: 100%;
  background: #fe5139;
}

.tabArea .overflowBox div#active:has(.m_new) .round {
  background: #e94cf7;
}

#artistHome .tab {
  gap: 4px;
  padding: 24px 0 16px;
}
.tab #pinkBtn2 {
  flex-shrink: 0;
  width: 150px;
  height: 41px;
  border-radius: 24px;
  font-size: 14px;
}

@media (max-width: 1100px) {
  .tabArea {
    width: 100%;
  }
  #myPage .tabArea {
    margin-left: -16px;
    width: calc(100% - 16px);
  }
  #myPage:has(.top > img) .tabArea {
    margin-left: 0;
    width: calc(100% + 16px);
  }
  #artistHome .tab {
    justify-content: flex-start;
    flex-wrap: nowrap;
    padding: 20px 16px;
    overflow: scroll;
  }
}
@media (max-width: 700px) {
  /* 요청으로 인한 고정 속성 추가 */
  .tabArea {
    height: 58px;
  }
  body:has(.tabArea) section.userPage {
    margin-top: calc(52px + 59px) !important;
  }
  .tabArea .overflowBox {
    justify-content: start;
  }
  .tabArea .overflowBox {
    gap: 20px;
    height: 30px;
    min-width: auto;
    width: fit-content;
  }
  .tabArea .overflowBox div {
    gap: 20px;
    margin: 0;
  }
  .tabArea .overflowBox > div:first-child {
    margin-left: 16px;
  }

  .tabArea .overflowBox div h1 {
    font-size: 20px;
    padding-left: 8px;
    text-wrap: nowrap;
    white-space: nowrap;
  }
  /* #myPage .tabArea {
    margin-left: -16px;
  }
  #myPage .tabArea .overflowBox > div:first-child  {
    margin-left: 0;
  } */

  .tabArea {
    gap: 10px;
  }
  #prompt > div .title.tabArea h1,
  #prompt > div .title div h1,
  .tabArea .overflowBox div h1 {
    font-size: 20px;
    line-height: 1.5;
    text-wrap-mode: nowrap;
  }
  .myMarketplacesSection .rsWrapper:has(.title) {
    padding: 0;
  }
  .tabArea .overflowBox div#active .round {
    top: 0px;
    left: 0px;
    width: 6px;
    height: 6px;
  }

  #artistHome .tab {
    justify-content: flex-start;
    flex-wrap: nowrap;
    padding: 20px 16px;
    overflow: scroll;
  }
  #artistHome .tab #pinkBtn2 {
    width: 80px;
  }
  #artistHome .tab #pinkBtn2.wAuto,
  #artistHome .tab button.wAuto {
    width: fit-content;
  }

  #prompt > div .title.tabArea,
  #prompt > div > .title {
    justify-content: flex-start;
    padding: 16px 0 12px;
    width: 100%;
  }

  #prompt > div .title > div {
    margin: 0 24px 0 0;
  }

  /* #prompt > div .title div h1 {
    font-size: 22px;
  } */

  #builder > div .tab {
    padding: 0;
    border-bottom: none;
  }
  .promptSection #prompt > div .title.tabArea {
    height: 0;
  }
  /* 
  #myMessage > div {
    border-bottom: none;
    padding: 0;
  }
  #myMessage > div .tabArea {
    justify-content: flex-start;
    padding: 30px 0 20px 8px;
  }
  #myMessage > div .tabArea .overflowBox {
    justify-content: flex-start;
  }
  #depth2 .tabArea {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px 0 20px;
    gap: 20px;
  } */
  /* #depth2 > div > .tabArea .overflowBox div h1 {
    font-size: 26px;
  } */
  /* .tabArea .overflowBox div {
    margin: 0 20px 0 10px;
  } */
  /* #depth2 > div > .tabArea .overflowBox div#active .round {
    top: 0px;
    left: 0px;
    width: 6px;
    height: 6px;
  } */
  /* .tabArea .overflowBox div h1 {
    font-size: 24px;
  } */

  /* .tabArea {
    justify-content: flex-start;
  } */

  /* .tabArea .overflowBox {
    justify-content: flex-start;
  } */

  /* .tabArea .overflowBox div#active .round {
    width: 6px;
    height: 6px;
    top: -6px;
    left: -6px;
  } */
}

/* 
#prompt > div > .tabArea {
  padding: 40px 0 32px;
}

#prompt > div > .tabArea > div {
  margin: 0 30px;
  width: auto;
  position: relative;
}

#prompt > div > .tabArea div h1 {
  font-size: 32px;
  font-weight: bold;
  color: #cccccc;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

#prompt > div > .tabArea div h1:hover,
#prompt > div > .tabArea div#active h1 {
  color: #0e0e1f;
}

#prompt > div > .tabArea div .round {
  display: none;
}

#prompt > div > .tabArea div#active .round {
  display: flex;
  position: absolute;
  top: -6px;
  left: -6px;
  width: 8px;
  height: 8px;
  border-radius: 100%;
  background: #fe5139;
}

#builder > div .tab {
  padding: 0 0 16px;
  border-bottom: solid 2px #000;
}

#builder > div .tab #pinkBtn2 {
  width: 150px;
  height: 41px;
  border-radius: 24px;
  font-size: 14px;
  margin: 0 2px;
  line-height: 1;
}

#builder > div .tab #pinkBtn2.active {
  background: linear-gradient(to right, #ca79fc 0%, #ff5eb6 100%);
  color: #ffffff;
  border: 1px solid transparent;
} */

@charset "UTF-8";
.close-icon {
  cursor: pointer;
  width: 20px;
  height: 20px;
}

#pinkBtn2 {
  font-weight: 600;
  transition: none;
}

input {
  font-size: 16px !important;
}

textarea {
  font-size: 16px !important;
}

#root {
  min-width: 340px;
}
#root:has(#musicBox.player) {
  min-width: 340px;
}

.badge {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 50px;
  width: auto;
  height: 26px !important;
  background-origin: border-box;
  background-clip: content-box, border-box;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  border-radius: 20px;
  /* margin: 0 8px 0 0;      영역별 뱃지와 옆 text와의 간격 다름 */
  padding: 2px;
  line-height: 1;
  white-space: nowrap;
}
.badge::after {
  display: none;
}
.badge.pro {
  background-image: linear-gradient(90deg, #b041f3 0%, #ec15ff 100%), linear-gradient(to right, #13d5df 0%, #f138fc 100%);
}
.badge.basic {
  background-image: inherit;
  background-color: #f8ab30;
}
.badge.beginner {
  background-image: inherit;
  background-color: #6d6c75;
}

.badge_s {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 50px;
  width: auto;
  height: 26px !important;
  background-origin: border-box;
  background-clip: content-box, border-box;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  border-radius: 20px;
  margin: 0 10px 0 0;
  padding: 2px;
  line-height: 1;
  width: auto;
  padding: 1px 2px;
  font-size: 11px;
  font-weight: 500;
  height: 23px !important;
  min-width: 44px;
  margin: 0;
}
.badge_s::after {
  display: none;
}
.badge_s.pro {
  background-image: linear-gradient(90deg, #b041f3 0%, #ec15ff 100%), linear-gradient(to right, #13d5df 0%, #f138fc 100%);
}
.badge_s.basic {
  background-image: inherit;
  background-color: #f8ab30;
}
.badge_s.beginner {
  background-image: inherit;
  background-color: #6d6c75;
}

.ranking {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  padding: 0;
  gap: 12px;
  cursor: pointer;
  gap: 8px;
}
.ranking::after {
  background: url(../../static/media/btn-downB.aaa6da97ce5db46ccad4.svg) no-repeat center;
  width: 20px;
  height: 20px;
  content: '';
}
.ranking.music::before {
  background: url(../../static/media/i-rankMusic.0f18c7751f4596b48980.svg) no-repeat center;
  width: 20px;
  height: 20px;
  content: '';
}
.ranking.image::before {
  background: url(../../static/media/i-rankImage.9cc1309c8a9610421c7d.svg) no-repeat center;
  width: 20px;
  height: 20px;
  content: '';
}
.ranking.video::before {
  background: url(../../static/media/i-rankVideo.74deeeedb4f3f9f90383.svg) no-repeat center;
  width: 20px;
  height: 20px;
  content: '';
}
.ranking.text::before {
  background: url(../../static/media/i-rankText.6b4e3c4b7779f8a632a6.svg) no-repeat center;
  width: 20px;
  height: 20px;
  content: '';
}

.ranking_s {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  padding: 0;
  gap: 12px;
  cursor: pointer;
  font-size: 14px;
  min-width: 100px;
  gap: 8px;
}
.ranking_s::after {
  background: url(../../static/media/btn-downB.aaa6da97ce5db46ccad4.svg) no-repeat center;
  width: 20px;
  height: 20px;
  content: '';
}
.ranking_s::after {
  background: url(../../static/media/btn-downB.aaa6da97ce5db46ccad4.svg) no-repeat center;
  width: 16px;
  height: 16px;
  content: '';
}
.ranking_s.music::before {
  background: url(../../static/media/i-rankMusic.0f18c7751f4596b48980.svg) no-repeat center;
  width: 18px;
  height: 18px;
  content: '';
}
.ranking_s.image::before {
  background: url(../../static/media/i-rankImage.9cc1309c8a9610421c7d.svg) no-repeat center;
  width: 18px;
  height: 18px;
  content: '';
}
.ranking_s.video::before {
  background: url(../../static/media/i-rankVideo.74deeeedb4f3f9f90383.svg) no-repeat center;
  width: 18px;
  height: 18px;
  content: '';
}
.ranking_s.text::before {
  background: url(../../static/media/i-rankText.6b4e3c4b7779f8a632a6.svg) no-repeat center;
  width: 18px;
  height: 18px;
  content: '';
}

.approval {
  display: inline-flex;
  min-width: 48px;
  padding: 4px 8px;
  justify-content: center !important;
  align-items: center;
  gap: 10px;
  border-radius: 50px;
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  border: 1px solid transparent;
  height: 22px;
}
.approval::before {
  display: none;
}
.approval.on {
  background: linear-gradient(90deg, #ca79fc 0%, #ff5eb6 100%);
  background: var(--gra-pink, linear-gradient(90deg, #ca79fc 0%, #ff5eb6 100%));
}
.approval.ok {
  background: #0fc9f3;
}
.approval.request {
  background: #f8c930;
}
.approval.off {
  background: #fd8632;
}
.approval.rejection {
  background: #ffa514;
}
.approval.del {
  background: #fe393c;
}
.approval.rejection button {
  color: #fff;
}
.approval.disable {
  background: #fff;
  border-color: #cccccc;
  color: #0e0e1f;
}
.approval.done {
  background: #525162;
}
.approval.gray {
  border-color: #525162;
  color: #525162;
}
.approval.pink {
  border-color: #c718e2;
  color: #c718e2;
}
.approval.orange {
  border-color: #fd8632;
  color: #fd8632;
}
.approval.blue {
  border-color: #0d88d4;
  color: #0d88d4;
}
.btn-default {
  border-radius: 4px;
  font-size: 14px;
  height: 40px;
  min-width: 100px;
  font-weight: 500;
  line-height: 1;
  border-radius: 4px;
  align-items: center;
  justify-content: center;
  background-color: #ffffff !important;
  border-color: #e2dfe4;
  color: #0e0e1f;
}
.btn-default:hover {
  color: #0e0e1f !important;
  box-shadow: inset 0 0 0 200px rgba(0, 0, 0, 0.2);
  border-color: transparent;
  outline: rgba(255, 94, 182, 0.7);
}
.btn-primery {
  border-radius: 4px;
  font-size: 14px;
  height: 40px;
  min-width: 100px;
  font-weight: 500;
  line-height: 1;
  border-radius: 4px;
  align-items: center;
  justify-content: center;
  background-color: #e94cf7 !important;
  border-color: #e94cf7;
  color: #fff;
}
.btn-primery:hover {
  color: #fff !important;
}
.btn-dark {
  border-radius: 4px;
  font-size: 14px;
  height: 40px;
  min-width: 100px;
  font-weight: 500;
  line-height: 1;
  border-radius: 4px;
  align-items: center;
  justify-content: center;
  background-color: #525162 !important;
  border-color: #525162;
  color: #fff;
}
.btn-redR:hover,
.btn-graR:hover,
.btn-gray2:hover,
.btn-red:hover,
.btn-gra:hover,
.btn-dark:hover {
  color: #fff !important;
}
.btn-gra {
  border-radius: 4px;
  font-size: 14px;
  height: 40px;
  min-width: 100px;
  font-weight: 500;
  line-height: 1;
  border-radius: 4px;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(90deg, #b041f3 0%, #ec15ff 100%) !important;
  color: #fff;
}

.btn-red {
  border-radius: 4px;
  font-size: 14px;
  height: 40px;
  min-width: 100px;
  font-weight: 500;
  line-height: 1;
  border-radius: 4px;
  align-items: center;
  justify-content: center;
  background: #f34144 !important;
  color: #fff;
  height: inherit;
  min-width: inherit;
}
.btn-line {
  border-radius: 4px;
  font-size: 14px;
  height: 40px;
  min-width: 100px;
  font-weight: 500;
  line-height: 1;
  border-radius: 4px;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  border: 1px solid #3e3d53;
  color: #3e3d53;
}
.btn-gray2 {
  border-radius: 4px;
  font-size: 14px;
  height: 40px;
  min-width: 100px;
  font-weight: 500;
  line-height: 1;
  border-radius: 4px;
  align-items: center;
  justify-content: center;
  background-color: #a3a1a7 !important;
  border-color: #a3a1a7 !important;
  color: #fff;
}
.btn-pinkGray {
  border-radius: 4px;
  font-size: 14px;
  height: 40px;
  min-width: 100px;
  font-weight: 500;
  line-height: 1;
  border-radius: 4px;
  align-items: center;
  justify-content: center;
  border-radius: 24px;
  background-color: #fdf2ff !important;
  border: 1px solid #eee2f0 !important;
  color: #c49bcc;
  min-width: none;
}
.btn-defaultR {
  border-radius: 4px;
  font-size: 14px;
  height: 40px;
  min-width: 100px;
  font-weight: 500;
  line-height: 1;
  border-radius: 4px;
  align-items: center;
  justify-content: center;
  background-color: #ffffff !important;
  border-color: #e2dfe4;
  color: #0e0e1f;
  border-radius: 24px;
}
.btn-defaultR:hover {
  color: #0e0e1f !important;
  box-shadow: inset 0 0 0 200px rgba(0, 0, 0, 0.2);
  border-color: transparent;
  outline: rgba(255, 94, 182, 0.7);
}
.btn-darkR {
  border-radius: 4px;
  font-size: 14px;
  height: 40px;
  min-width: 100px;
  font-weight: 500;
  line-height: 1;
  border-radius: 4px;
  align-items: center;
  justify-content: center;
  background-color: #525162 !important;
  border-color: #525162;
  color: #fff;
  border-radius: 24px;
}
.btn-darkR:hover {
  color: #fff !important;
}
.btn-graR {
  border-radius: 4px;
  font-size: 14px;
  height: 40px;
  min-width: 100px;
  font-weight: 500;
  line-height: 1;
  border-radius: 4px;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(90deg, #b041f3 0%, #ec15ff 100%) !important;
  color: #fff;
  border-radius: 24px;
}
.btn-redR {
  border-radius: 4px;
  font-size: 14px;
  height: 40px;
  min-width: 100px;
  font-weight: 500;
  line-height: 1;
  border-radius: 4px;
  align-items: center;
  justify-content: center;
  background: #f34144 !important;
  color: #fff;
  border-radius: 24px;
}
.btn-lineR {
  border-radius: 4px;
  font-size: 14px;
  height: 40px;
  min-width: 100px;
  font-weight: 500;
  line-height: 1;
  border-radius: 4px;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  border: 1px solid #3e3d53;
  color: #3e3d53;
  border-radius: 24px;
}
.btn-grayR {
  border-radius: 4px;
  font-size: 14px;
  height: 40px;
  min-width: 100px;
  font-weight: 500;
  line-height: 1;
  border-radius: 4px;
  align-items: center;
  justify-content: center;
  background-color: #a3a1a7 !important;
  border-color: #a3a1a7 !important;
  color: #fff;
  border-radius: 24px;
}
.btn-pinkGrayR {
  border-radius: 4px;
  font-size: 14px;
  height: 40px;
  min-width: 100px;
  font-weight: 500;
  line-height: 1;
  border-radius: 4px;
  align-items: center;
  justify-content: center;
  border-radius: 24px;
  background-color: #fdf2ff !important;
  border: 1px solid #eee2f0 !important;
  color: #c49bcc;
  min-width: none;
  border-radius: 24px;
  padding: 0 8px;
}
.btn-close,
.btn-delete {
  padding: 4px;
  background: url(../../static/media/i-cacelPink.7bc53a58edcd0fd411ef.svg) no-repeat center;
  width: 12px;
}

.btn-iDel {
  display: flex;
  padding: 4px;
  justify-content: center;
  align-items: center;
  border-radius: 24px;
  border: 1px solid #a3a1a7;
  background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwBAMAAAClLOS0AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAASUExURUdwTAAAAAAAAAAAAAAAAAAAAFZgiOcAAAAFdFJOUwBgX5/ffhjBrwAAAKtJREFUOMt1lMkVgCAMBUMR3C1CK/DZgEr/rQiIyPLHW8IfDNlsXUx87rJwqgN/mw8CcVHuFJLVAnnFAinaCfmkE1KVA/ILB6TRdUgr65BO1Rj9vY01RFLNMfZqT68tjjk/xSMyml2qBtknqxadsmgJkUBCdGNERAN8QFfhzylcfCClBJNIacdCUWmxGah9sOGoRbGpaQxwcGjUcDhpnHEB4Mo49JIJtum1tD/T6DbbeF1PlgAAAABJRU5ErkJggg==) no-repeat center / 8px;
  width: 20px;
  height: 20px;
}
button {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  outline: none;
}
.ant-select-outlined.ant-select-disabled:not(.ant-select-customize-input) .ant-select-selector,
.ant-select-disabled .ant-select-selector .ant-select-selection-item,
.ant-input-outlined:disabled .ant-select-outlined.ant-select-disabled:not(.ant-select-customize-input) .ant-select-selector,
.ant-select-disabled,
.ant-select-disabled:hover,
button.disabled,
button.disabled:hover,
button[disabled],
button[disabled]:hover,
button:disabled,
button:disabled:hover {
  background-color: #e9ecf1 !important;
  color: #a29fab !important;
  border-color: #dfdce4 !important;
  box-shadow: none !important;
  cursor: default !important;
  background-image: inherit !important;
}
.notice-link button:disabled {
  background-image: none !important;
  background-image: initial !important;
}
.notice-link button:disabled.icon-arrowCircle {
  background: url(../../static/media/i-arrowCircleG.ae578c394289742da827.svg) no-repeat center;
  background-size: contain;
}
.rejectionPop .ant-select-disabled .ant-select-selector .ant-select-selection-item,
.rejectionPop .ant-input-outlined:disabled,
.rejectionPop .ant-select-outlined.ant-select-disabled:not(.ant-select-customize-input) .ant-select-selector,
.rejectionPop .ant-select-disabled,
.rejectionPop .ant-select-disabled:hover {
  color: #000 !important;
}

.ant-select-disabled .ant-select-arrow,
.ant-select-disabled:hover .ant-select-arrow {
  display: none;
}
.ant-select-disabled:hover .ant-select-selector,
.ant-input-outlined:disabled:hover,
.ant-btn-default:disabled:hover {
  box-shadow: none !important;
  background: none;
}

.ant-select-outlined.ant-select-disabled:not(.ant-select-customize-input) .ant-select-selector .ant-select-arrow .anticon,
.ant-select-disabled .ant-select-arrow .anticon,
.ant-select-disabled:hover .ant-select-arrow .anticon,
button.disabled .ant-select-arrow .anticon,
button.disabled:hover .ant-select-arrow .anticon,
button[disabled] .ant-select-arrow .anticon,
button[disabled]:hover .ant-select-arrow .anticon {
  filter: brightness(0.5);
}

.ant-select-disabled svg,
.ant-select-disabled img,
button[disabled]::before,
button[disabled]::before svg,
button:disabled::before,
button:disabled::before svg,
button[disabled] img,
button[disabled] svg,
button:disabled img,
button:disabled svg {
  fill: #a29fab !important;
  filter: brightness(0.7) !important;
}

.ant-btn-primary:hover,
.ant-btn-default:hover {
  box-shadow: none;
}

.ant-input-affix-wrapper .ant-input-clear-icon {
  font-size: 16px;
}

.anticon-more,
.i-more {
  background: url(../../static/media/i-more.2e65f75667a147252407.svg) no-repeat center;
  width: 18px;
  height: 32px;
  content: '';
  margin-left: 4px;
  margin-right: 4px;
}
.anticon-more svg,
.i-more svg {
  display: none;
}

button .icon,
button.icon {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  outline: none;
  gap: 8px;
}

button .iconT::before,
button.iconT::before,
button .icon::before,
button.icon::before {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  content: '';
  /* filter: brightness(0); */
}

button .icon::before,
button.icon::before {
  width: 20px;
  height: 20px;
}
button.iconT::before:hover,
button .iconT::before:hover,
button .icon::before:hover,
button.icon::before:hover {
  background-repeat: no-repeat;
  background-position: center;
}
button .icon:hover,
button.icon:hover {
  background-repeat: no-repeat;
  background-position: center;
}

.ant-btn-text:not(:disabled):not(.ant-btn-disabled):hover {
  background: none;
  background-color: none;
}
button.iconT {
  display: flex;
  gap: 8px;
  width: auto;
}

button.icon.siren {
  display: inline-block;
  font-size: 0;
  gap: 0;
}
button.icon.siren::before {
  width: 22px;
  height: 22px;
  background: url(../../static/media/i-siren.892f1dfff42a3f3b351e.svg) no-repeat center;
}
button.icon.siren:hover::before {
  background: url(../../static/media/i-sirenOn.1671ebde687100359f06.svg) no-repeat center;
}
button.icon.siren.on::before {
  background: url(../../static/media/i-sirenOn.1671ebde687100359f06.svg) no-repeat center;
}

.share::before {
  background-image: url(../../static/media/i-share.db4c7d4ab45831f1d64e.svg);
}

.listen::before {
  background-image: url(../../static/media/i-listen.dcdbc0a1269ed967aa05.svg);
  width: 22px;
  height: 20px;
}
.listen::before:hover {
  background-image: url(../../static/media/i-listenA.f1da4478d5713028d68b.svg);
}

.keep::before {
  background: url(../../static/media/i-keep.dfa83e12b24fcfe827c7.svg);
}
.keep::before:hover {
  background-image: url(../../static/media/i-keepA.5a47f6306580d79e2925.svg);
}

.put::before {
  background: url(../../static/media/i-basket.e7158b317b8f44806b66.svg);
  width: 22px;
}
.put::before:hover {
  background-image: url(../../static/media/i-basketA.e7b39a172765f92f099c.svg);
}

.sale::before {
  background: url(../../static/media/i-sale.357db2080a516d50d0dc.svg);
  width: 22px;
}
.sale::before:hover {
  background-image: url(../../static/media/i-sale.357db2080a516d50d0dc.svg);
}

.buying::before {
  background: url(../../static/media/i-buying.d1166eb3e4f19a3d11ca.svg);
  width: 22px;
}
.buying::before:hover {
  background-image: url(../../static/media/i-buying.d1166eb3e4f19a3d11ca.svg);
}

.link::before {
  background: url(../../static/media/i-link.67a18a741b775bc76a36.svg);
  width: 16px;
}
.link::before:hover {
  background: url(../../static/media/i-link.67a18a741b775bc76a36.svg);
  box-shadow: inset 0 0 0 200px rgba(0, 0, 0, 0.2);
  border-color: transparent;
  outline: rgba(255, 94, 182, 0.7);
}

.trash::before {
  background: url(../../static/media/i-trashLine.3a7c900ff5f1019cfe55.svg);
  width: 22px;
  filter: brightness(0);
}
.trash:disabled:before {
  filter: brightness(0.7);
}
.trash::before:hover {
  background-image: url(../../static/media/i-trashLine.3a7c900ff5f1019cfe55.svg);
}

.record::before {
  background: url(../../static/media/i-record.ba1458b744adcb5ad4c9.svg);
  width: 22px;
  /* filter: brightness(0); */
}
.record::before:hover {
  background-image: url(../../static/media/i-record.ba1458b744adcb5ad4c9.svg);
}

.myStore::before {
  background: url(../../static/media/i-myStore.90d066f4bcc9633c4497.svg);
  width: 22px;
}
.myStore::before:hover {
  background-image: url(../../static/media/i-myStore.90d066f4bcc9633c4497.svg);
}

.ques::before {
  background: url(../../static/media/i-ques.47fb5b844adbc92adcd8.svg) no-repeat;
  width: 24px !important;
  height: 24px !important;
}
.ques::before :hover {
  background-image: url(../../static/media/i-quesW.2e994104de428244bab9.svg) no-repeat;
}

.artist::before {
  background: url(../../static/media/white_artist_icon.270cb422fb393ff25b1f.svg) no-repeat -2px center / 124%;
  width: 18px;
  height: 18px;
  content: '';
}
.artist::before :hover {
  background-image: url(../../static/media/white_artist_icon.270cb422fb393ff25b1f.svg) no-repeat;
}
.close,
.delete {
  padding: 4px;
}
.close::before,
.delete::before {
  background: url(../../static/media/i_del.26a61671edd1b8c92d8d.svg);
  width: 22px;
}
.close::before:hover,
.delete::before:hover {
  box-shadow: inset 0 0 0 200px rgba(0, 0, 0, 0.2);
  border-color: transparent;
  outline: rgba(255, 94, 182, 0.7);
}
.back::before {
  background: url(../../static/media/icon_arrow.587e2ab25c846bbb9eeb.svg);
  width: 14px;
  height: 14px;
  content: '';
  /* filter: brightness(0); */
}
.back::before:hover {
  background-image: url(../../static/media/icon_arrow.587e2ab25c846bbb9eeb.svg);
}

button.line {
  border: 1px solid #000;
  background: transparent;
}

.infoCount span {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 4px;
}
.infoCount span:before {
  background: url(../../static/media/i-heartLine.28f5ab840bf1fd2d3e68.svg) no-repeat center;
  width: 18px;
  height: 18px;
  content: '';
}
.infoCount .good:before {
  background: url(../../static/media/i-heartLine.28f5ab840bf1fd2d3e68.svg) no-repeat center;
}
.infoCount .sale:before {
  background: url(../../static/media/i-daller.494d1635c4afbedd8aca.svg) no-repeat center;
}
.infoCount .download:before {
  background: url(../../static/media/i-downL.734152a49c16338b2b4c.svg) no-repeat center;
}

.fromTo {
  display: flex;
  padding: 3px 6px 3px;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  background: #dfdce4;
  color: #293f59;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.26px;
}

.blueSpan {
  color: #0d88d4 !important;
}

.w200 {
  width: 200px;
}
.rightT {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  justify-content: flex-end;
}

#root:has(section.userPage) + div .ant-modal .ant-modal-content,
.ant-modal-root .ant-modal .ant-modal-content,
.userPage .ant-modal .ant-modal-content {
  padding: 0;
}
#root:has(section.userPage) + div .ant-modal .ant-modal-content .terms_wrap h1,
.ant-modal-root .ant-modal .ant-modal-content .terms_wrap h1,
.userPage .ant-modal .ant-modal-content .terms_wrap h1 {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 32px;
}
#root:has(section.userPage) + div .ant-modal .ant-modal-content .terms_wrap .docu,
.ant-modal-root .ant-modal .ant-modal-content .terms_wrap .docu,
.userPage .ant-modal .ant-modal-content .terms_wrap .docu {
  display: flex;
  flex-direction: column;
  justify-content: start;
  max-height: 640px;
  overflow: auto;
  gap: 20px;
  line-height: 1.6;
  font-weight: 400;
  padding-bottom: 40px;
}
#root:has(section.userPage) + div .ant-modal .ant-modal-content .terms_wrap .docu h2,
.ant-modal-root .ant-modal .ant-modal-content .terms_wrap .docu h2,
.userPage .ant-modal .ant-modal-content .terms_wrap .docu h2 {
  margin-bottom: 12px;
}
#root:has(section.userPage) + div .ant-modal .ant-modal-content .terms_wrap .docu table,
.ant-modal-root .ant-modal .ant-modal-content .terms_wrap .docu table,
.userPage .ant-modal .ant-modal-content .terms_wrap .docu table {
  margin: 20px 0;
  border: 1px solid #ddd;
  border-radius: 16px;
}
#root:has(section.userPage) + div .ant-modal .ant-modal-content .terms_wrap .docu table th,
.ant-modal-root .ant-modal .ant-modal-content .terms_wrap .docu table th,
.userPage .ant-modal .ant-modal-content .terms_wrap .docu table th {
  height: 40px;
  background: #eee;
}
#root:has(section.userPage) + div .ant-modal .ant-modal-content .terms_wrap .docu table td,
.ant-modal-root .ant-modal .ant-modal-content .terms_wrap .docu table td,
.userPage .ant-modal .ant-modal-content .terms_wrap .docu table td {
  padding: 16px;
  border: 1px solid #ddd;
}

.ant-modal .ant-modal-header {
  color: #000;
  background: #ffffff;
  border-radius: 0;
  margin-bottom: 0;
  padding: 0;
  border-bottom: none;
}

#root:has(section.userPage) + div .ant-modal-header.ant-modal .ant-modal-title,
#root:has(section.userPage) + div .ant-modal-header .ant-modal-title,
.ant-modal-root .ant-modal-header.ant-modal .ant-modal-title,
.ant-modal-root .ant-modal-header .ant-modal-title,
.userPage .ant-modal-header.ant-modal .ant-modal-title,
.userPage .ant-modal-header .ant-modal-title {
  display: flex;
  justify-content: center;
  align-items: center;
  /* height: 54px; 반응형 적용*/
  padding: 12px 24px;
  font-size: 20px;
  font-weight: 700;
  margin: 0;
}
.ant-modal-root .ant-modal-header .ant-modal-title h2 {
  font-size: 20px;
}
.ant-form-item .ant-form-item-label > label {
  position: relative;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  height: auto;
  line-height: 1;
  color: #464548;
  text-align: center;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.1px;
}
/* .ant-form label {
  padding-bottom: 6px;
  line-height: 1;
  font-size: 12px;
}  check 박스와 각 input label 사이즈에 영향 주어서 주석처리*/

/*판매자 정보등록 상단 체크박스  center 정렬*/
.ant-form label.ant-checkbox-wrapper {
  align-items: center;
  display: flex;
  padding-bottom: 0;
  /* text-wrap: nowrap; */
}
.ant-form label.ant-checkbox-wrapper .ant-checkbox + span {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  line-height: 1;
  font-weight: 600;
}

/*각종 라벨 공통*/
.ant-form .btn-label label {
  padding-bottom: 0;
  line-height: 1;
  font-size: 12px;
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: center;
}
.ant-form-vertical .ant-form-item:not(.ant-form-item-horizontal) .ant-form-item-label {
  padding-bottom: 0;
  line-height: 1;
  font-size: 12px;
  margin: 0 !important;
}
#root:has(section.userPage) + div .ant-modal-body,
.ant-modal-root .ant-modal-body,
.userPage .ant-modal-body {
  padding: 16px 24px;
}
.ant-modal-root .ant-modal-body:has(.ticketList) {
  padding: 16px 40px 0;
}
.ant-modal-root .ant-modal-body:has(.ticketList) .modalContent .notice {
  padding-bottom: 0;
}
.ant-modal-root .ant-modal-body:has(#reviewModal) {
  /* padding: 0 24px 16px; */
}
#root:has(section.userPage) + div .ant-modal-body,
.ant-modal-root .ant-modal-body,
.userPage .ant-modal-body .ant-typography {
  font-size: 12px;
  font-weight: 500;
}
#root:has(section.userPage) + div .ant-modal-body .checkLabel,
.ant-modal-root .ant-modal-body .checkLabel,
.userPage .ant-modal-body .checkLabel {
  margin-bottom: 8px;
  font-size: 12px;
}
#root:has(section.userPage) + div .ant-modal-body .ant-modal-confirm-body-wrapper,
.ant-modal-root .ant-modal-body .ant-modal-confirm-body-wrapper,
.userPage .ant-modal-body .ant-modal-confirm-body-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
}
#root:has(section.userPage) + div .ant-modal-body:before,
#root:has(section.userPage) + div .ant-modal-body:after,
.ant-modal-root .ant-modal-body:before,
.ant-modal-root .ant-modal-body:after,
.userPage .ant-modal-body:before,
.userPage .ant-modal-body:after {
  display: none;
}
#root:has(section.userPage) + div .ant-modal-body .ant-input-affix-wrapper > input.ant-input,
.ant-modal-root .ant-modal-body .ant-input-affix-wrapper > input.ant-input,
.userPage .ant-modal-body .ant-input-affix-wrapper > input.ant-input {
  display: flex;
  height: 38px;
  padding: 7px 12px;
  align-items: center;
  gap: 10px;
  flex: 1 0;
  border-radius: 4px;
  border: 1px solid #e2dfe4;
  border: 1px solid var(--b-input, #e2dfe4);
  background: #f7f7f8;
}
#artist-comment-container .ant-input-affix-wrapper > input.ant-input {
  border: none;
}
#root:has(section.userPage) + div .ant-modal-body .ant-input-affix-wrapper > input.ant-input:hover,
.ant-modal-root .ant-modal-body .ant-input-affix-wrapper > input.ant-input:hover,
.userPage .ant-modal-body .ant-input-affix-wrapper > input.ant-input:hover {
  background-color: transparent;
}
#root:has(section.userPage) + div .ant-modal-body .ant-input-affix-wrapper #newName,
#root:has(section.userPage) + div .ant-modal-body .ant-input-affix-wrapper.ant-input-password input,
.ant-modal-root .ant-modal-body .ant-input-affix-wrapper #newName,
.ant-modal-root .ant-modal-body .ant-input-affix-wrapper.ant-input-password input,
.userPage .ant-modal-body .ant-input-affix-wrapper #newName,
.userPage .ant-modal-body .ant-input-affix-wrapper.ant-input-password input {
  border: 0;
}
#root:has(section.userPage) + div .ant-modal-body .ant-input-outlined:hover,
.ant-modal-root .ant-modal-body .ant-input-outlined:hover,
.userPage .ant-modal-body .ant-input-outlined:hover {
  background: transparent;
}
@media (max-width: 700px) {
  .ant-modal-root:has(.submitModal) .ant-modal-body .ant-input-outlined:hover {
    background: #fff;
  }
}
#root:has(section.userPage) + div .ant-modal-body .ant-input-outlined:hover,
#root:has(section.userPage) + div .ant-modal-body .ant-input-outlined:focus,
#root:has(section.userPage) + div .ant-modal-body .ant-input-outlined:focus-within,
.ant-modal-root .ant-modal-body .ant-input-outlined:hover,
.ant-modal-root .ant-modal-body .ant-input-outlined:focus,
.ant-modal-root .ant-modal-body .ant-input-outlined:focus-within,
.userPage .ant-modal-body .ant-input-outlined:hover,
.userPage .ant-modal-body .ant-input-outlined:focus,
.userPage .ant-modal-body .ant-input-outlined:focus-within {
  border-color: #c718e2;
}
#root:has(section.userPage) + div .ant-modal-body .ant-input-outlined:focus-within input,
.ant-modal-root .ant-modal-body .ant-input-outlined:focus-within input,
.userPage .ant-modal-body .ant-input-outlined:focus-within input {
  background: transparent;
}
#root:has(section.userPage) + div .ant-modal-body .btnBox button.btn-default,
.ant-modal-root .ant-modal-body .btnBox button.btn-default,
.userPage .ant-modal-body .btnBox button.btn-default {
  border: 1px solid #525162;
}
#root:has(section.userPage) + div .ant-modal-footer,
#root:has(section.userPage) + div .ant-modal-confirm-btns,
.ant-modal-root .ant-modal-footer,
.ant-modal-root .ant-modal-confirm-btns,
.userPage .ant-modal-footer,
.userPage .ant-modal-confirm-btns {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px 40px 24px;
  gap: 12px;
  margin: 0;
}
#root:has(section.userPage) + div .p20 .ant-modal-body,
.ant-modal-root .p20 .ant-modal-body,
.userPage .p20 .ant-modal-body {
  padding: 0 20px 24px;
}
#root:has(section.userPage) + div .p20 .ant-modal-body h1.title,
.ant-modal-root .p20 .ant-modal-body h1.title,
.userPage .p20 .ant-modal-body h1.title {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 76px;
  padding: 20px 0;
}
#root:has(section.userPage) + div .p20 .ant-modal-body form,
.ant-modal-root .p20 .ant-modal-body form,
.userPage .p20 .ant-modal-body form {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  flex: auto;
  gap: 16px;
  width: 100%;
}
.ant-modal-root .p20 .ant-modal-body form:has(h3.line) {
  gap: 0;
}
#root:has(section.userPage) + div .p20 .ant-modal-body .inputArea,
.ant-modal-root .p20 .ant-modal-body .inputArea,
.userPage .p20 .ant-modal-body .inputArea {
  display: flex;
  flex-direction: column;
  justify-content: start;
  padding: 16px;
  border-radius: 8px;
  background: #f9f9f9;
  gap: 16px;
  width: 100%;
}
#root:has(section.userPage) + div .p20 .ant-modal-body .inputArea .ant-form-item > div,
.ant-modal-root .p20 .ant-modal-body .inputArea .ant-form-item > div,
.userPage .p20 .ant-modal-body .inputArea .ant-form-item > div {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  flex: auto;
  gap: 8px;
}
#root:has(section.userPage) + div .p20 .ant-modal-body .inputArea .ant-form-item > div > div,
.ant-modal-root .p20 .ant-modal-body .inputArea .ant-form-item > div > div,
.userPage .p20 .ant-modal-body .inputArea .ant-form-item > div > div {
  width: 100%;
  flex: auto;
  height: auto;
  font-size: 12px;
  line-height: 1;
}
#root:has(section.userPage) + div .p20 .ant-modal-body .inputArea .ant-select-outlined:not(.ant-select-customize-input) .ant-select-selector,
.ant-modal-root .p20 .ant-modal-body .inputArea .ant-select-outlined:not(.ant-select-customize-input) .ant-select-selector,
.userPage .p20 .ant-modal-body .inputArea .ant-select-outlined:not(.ant-select-customize-input) .ant-select-selector {
  background: #ffffff;
}
#root:has(section.userPage) + div .p20 .ant-modal-body .term,
.ant-modal-root .p20 .ant-modal-body .term,
.userPage .p20 .ant-modal-body .term {
  display: flex;
  flex-direction: column;
  padding: 16px;
  width: 100%;
  gap: 8px;
}
#root:has(section.userPage) + div .p20 .ant-modal-body .term h3,
.ant-modal-root .p20 .ant-modal-body .term h3,
.userPage .p20 .ant-modal-body .term h3 {
  height: 36px;
}
.ant-modal-root .p20 .ant-modal-body .term h3.line {
  border-bottom: 1px solid #dfdce3;
  padding: 8px 0px;
  height: auto;
}
.ant-modal-root .p20 .ant-modal-body .term:has(.line) {
  gap: 16px;
}
.ant-modal-root .p20 .ant-modal-body .term .ant-form-item-control-input {
  min-height: 0;
  min-height: initial;
}
.ant-modal-root .p20 .ant-modal-body .term h3.line span {
  font-size: 16px;
}
#root:has(section.userPage) + div .p20 .ant-modal-body .term > .ant-row,
.ant-modal-root .p20 .ant-modal-body .term > .ant-row,
.userPage .p20 .ant-modal-body .term > .ant-row {
  justify-content: space-between;
}
#root:has(section.userPage) + div .p20 .ant-modal-body .term > .ant-row .termDoc,
.ant-modal-root .p20 .ant-modal-body .term > .ant-row .termDoc,
.userPage .p20 .ant-modal-body .term > .ant-row .termDoc {
  display: flex;
  justify-content: flex-end;
  text-decoration: underline;
}
#root:has(section.userPage) + div .p20 .ant-modal-body .term > .ant-row .ant-row,
.ant-modal-root .p20 .ant-modal-body .term > .ant-row .ant-row,
.userPage .p20 .ant-modal-body .term > .ant-row .ant-row {
  align-items: center;
  gap: 12px;
}
#root:has(section.userPage) + div .p20 .ant-modal-body .termCenter,
.ant-modal-root .p20 .ant-modal-body .termCenter,
.userPage .p20 .ant-modal-body .termCenter {
  display: flex;
  padding: 0px;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  align-self: stretch;
}
#root:has(section.userPage) + div .p20 .ant-modal-body .termCenter .ant-form-item-control-input-content label,
.ant-modal-root .p20 .ant-modal-body .termCenter .ant-form-item-control-input-content label,
.userPage .p20 .ant-modal-body .termCenter .ant-form-item-control-input-content label {
  text-align: center;
  font-weight: 500;
}
#root:has(section.userPage) + div .p20 .ant-modal-body .agreeArea,
.ant-modal-root .p20 .ant-modal-body .agreeArea,
.userPage .p20 .ant-modal-body .agreeArea {
  display: flex;
  padding-top: 12px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
}
#root:has(section.userPage) + div .p20 .ant-modal-body .agreeArea h2,
.ant-modal-root .p20 .ant-modal-body .agreeArea h2,
.userPage .p20 .ant-modal-body .agreeArea h2 {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  padding: 0 12px;
}
#root:has(section.userPage) + div .p20 .ant-modal-body .agreeArea h2:before,
.ant-modal-root .p20 .ant-modal-body .agreeArea h2:before,
.userPage .p20 .ant-modal-body .agreeArea h2:before {
  content: '';
  width: 18px;
  height: 18px;
  background: url(../../static/media/i-cautionRed.62c55391e050dd5ba3bc.svg) no-repeat center;
  display: flex;
}
#root:has(section.userPage) + div .p20 .ant-modal-body .btnArea .ant-form-item-control-input-content,
.ant-modal-root .p20 .ant-modal-body .btnArea .ant-form-item-control-input-content,
.userPage .p20 .ant-modal-body .btnArea .ant-form-item-control-input-content {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding-top: 20px;
}
#root:has(section.userPage) + div .p20 .ant-modal-body .ant-form-item,
.ant-modal-root .p20 .ant-modal-body .ant-form-item,
.userPage .p20 .ant-modal-body .ant-form-item {
  gap: 8px;
  margin: 0;
}
#root:has(section.userPage) + div .p20 .ant-modal-body .ant-form-item .ant-input-outlined,
#root:has(section.userPage) + div .p20 .ant-modal-body .ant-form-item input,
.ant-modal-root .p20 .ant-modal-body .ant-form-item .ant-input-outlined,
.ant-modal-root .p20 .ant-modal-body .ant-form-item input,
.userPage .p20 .ant-modal-body .ant-form-item .ant-input-outlined,
.userPage .p20 .ant-modal-body .ant-form-item input {
  background: #fff;
}
.ant-modal-root .p20 .ant-modal-body .ant-form-item .ant-input-password.ant-input-status-success:has(input[type='password']),
.ant-modal-root .p20 .ant-modal-body .ant-form-item .ant-input-password.ant-input-status-success input[type='password'] {
  background: #e8f0fe;
}

#root:has(section.userPage) + div .p20 .ant-modal-body .ant-form-item .ant-input-outlined[type='password'],
#root:has(section.userPage) + div .p20 .ant-modal-body .ant-form-item input[type='password'],
.ant-modal-root .p20 .ant-modal-body .ant-form-item .ant-input-outlined[type='password'],
.ant-modal-root .p20 .ant-modal-body .ant-form-item input[type='password'],
.userPage .p20 .ant-modal-body .ant-form-item .ant-input-outlined[type='password'],
.userPage .p20 .ant-modal-body .ant-form-item input[type='password'] {
  padding: 0;
}
#root:has(section.userPage) + div .p20 .ant-modal-body .ant-form-item .ant-form-item-label,
.ant-modal-root .p20 .ant-modal-body .ant-form-item .ant-form-item-label,
.userPage .p20 .ant-modal-body .ant-form-item .ant-form-item-label {
  text-align: left;
  padding: 0;
}
#root:has(section.userPage) + div .p20 .ant-modal-body .ant-form-item .ant-form-item-label > label,
.ant-modal-root .p20 .ant-modal-body .ant-form-item .ant-form-item-label > label,
.userPage .p20 .ant-modal-body .ant-form-item .ant-form-item-label > label {
  font-size: 12px;
  line-height: 1;
  height: auto;
}
#root:has(section.userPage) + div .p20 .ant-modal-body .ant-form-item .ant-form-item-label > label.ant-form-item-required:not(.ant-form-item-required-mark-optional)::before,
.ant-modal-root .p20 .ant-modal-body .ant-form-item .ant-form-item-label > label.ant-form-item-required:not(.ant-form-item-required-mark-optional)::before,
.userPage .p20 .ant-modal-body .ant-form-item .ant-form-item-label > label.ant-form-item-required:not(.ant-form-item-required-mark-optional)::before {
  display: none;
}
#root:has(section.userPage) + div .p20 .ant-modal-close,
.ant-modal-root .p20 .ant-modal-close,
.userPage .p20 .ant-modal-close {
  top: 26px;
}
.p20:has(.modalReceipt) .ant-modal-close {
  top: 16px;
}
#root:has(section.userPage) + div .ant-modal-footer button span,
.ant-modal-root .ant-modal-footer button span,
.userPage .ant-modal-footer button span {
  font-size: 14px;
}
#root:has(section.userPage) + div #populerPromptSlider .list > div .absoluteBox .title > p,
.ant-modal-root #populerPromptSlider .list > div .absoluteBox .title > p,
.userPage #populerPromptSlider .list > div .absoluteBox .title > p {
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  padding: 4px 10px;
  text-shadow: 0px 0px 4px rgb(0, 0, 0);
}
#root:has(section.userPage) + div .ant-modal .ant-modal-content,
.ant-modal-root .ant-modal .ant-modal-content,
.userPage .ant-modal .ant-modal-content {
  padding: 0;
}
.ant-modal-root .ant-modal .ant-modal-content .ant-modal-footer button {
  min-width: 100px;
}
#root:has(section.userPage) + div .ant-modal-confirm-warning .ant-modal-confirm-body > .anticon,
#root:has(section.userPage) + div .ant-modal-confirm-confirm .ant-modal-confirm-body > .anticon,
.ant-modal-root .ant-modal-confirm-warning .ant-modal-confirm-body > .anticon,
.ant-modal-root .ant-modal-confirm-confirm .ant-modal-confirm-body > .anticon,
.userPage .ant-modal-confirm-warning .ant-modal-confirm-body > .anticon,
.userPage .ant-modal-confirm-confirm .ant-modal-confirm-body > .anticon {
  color: #f138fc;
  font-size: 40px;
}
#root:has(section.userPage) + div .ant-modal-confirm .ant-modal-confirm-body-wrapper::before,
#root:has(section.userPage) + div .ant-modal-confirm .ant-modal-confirm-body-wrapper::after,
.ant-modal-root .ant-modal-confirm .ant-modal-confirm-body-wrapper::before,
.ant-modal-root .ant-modal-confirm .ant-modal-confirm-body-wrapper::after,
.userPage .ant-modal-confirm .ant-modal-confirm-body-wrapper::before,
.userPage .ant-modal-confirm .ant-modal-confirm-body-wrapper::after {
  display: none;
  content: '';
}
#root:has(section.userPage) + div .ant-modal-confirm .ant-modal-confirm-body,
.ant-modal-root .ant-modal-confirm .ant-modal-confirm-body,
.userPage .ant-modal-confirm .ant-modal-confirm-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  text-align: center;
  gap: 24px;
  padding: 36px 40px 0;
}

.ant-modal-confirm .ant-modal-confirm-content {
  color: #000;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
}
#root:has(section.userPage) + div .ant-modal-confirm .ant-modal-confirm-content *,
.ant-modal-root .ant-modal-confirm .ant-modal-confirm-content *,
.userPage .ant-modal-confirm .ant-modal-confirm-content * {
  font-family: 'Pretendard Variable', 'Pretendard';
  color: #000;
  font-size: 16px;
}
#root:has(section.userPage) + div .ant-modal-confirm .ant-modal-confirm-body > .anticon,
.ant-modal-root .ant-modal-confirm .ant-modal-confirm-body > .anticon,
.userPage .ant-modal-confirm .ant-modal-confirm-body > .anticon {
  margin-inline-end: 0px;
  color: #f138fc;
  font-size: 40px;
}
#root:has(section.userPage) + div .ant-modal-confirm-btns,
.ant-modal-root .ant-modal-confirm-btns,
.userPage .ant-modal-confirm-btns {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  gap: 12px;
}
#root:has(section.userPage) + div .ant-modal-confirm-btns .ant-btn + .ant-btn,
.ant-modal-root .ant-modal-confirm-btns .ant-btn + .ant-btn,
.userPage .ant-modal-confirm-btns .ant-btn + .ant-btn {
  margin: 0;
}
#root:has(section.userPage) + div .ant-btn-primary,
.ant-modal-root .ant-btn-primary,
.userPage .ant-btn-primary {
  color: #eee;
  background: linear-gradient(90deg, #b041f3 0%, #ec15ff 100%);
  border-radius: 4px;
  font-size: 14px;
  height: 40px;
  min-width: 100px;
  font-weight: 500;
  line-height: 1;
  border-radius: 4px;
  align-items: center;
  justify-content: center;
  min-width: 104px;
}
#root:has(section.userPage) + div .ant-btn-variant-solid,
.ant-modal-root .ant-btn-variant-solid,
.userPage .ant-btn-variant-solid {
  color: #eee;
  background: linear-gradient(90deg, #b041f3 0%, #ec15ff 100%);
}
#root:has(section.userPage) + div .ant-btn-variant-outlined:not(:disabled):not(.ant-btn-disabled):hover,
#root:has(section.userPage) + div .ant-btn-variant-solid:not(:disabled):not(.ant-btn-disabled):hover,
#root:has(section.userPage) + div .ant-btn-variant-dashed:not(:disabled):not(.ant-btn-disabled):hover,
.ant-modal-root .ant-btn-variant-outlined:not(:disabled):not(.ant-btn-disabled):hover,
.ant-modal-root .ant-btn-variant-solid:not(:disabled):not(.ant-btn-disabled):hover,
.ant-modal-root .ant-btn-variant-dashed:not(:disabled):not(.ant-btn-disabled):hover,
.userPage .ant-btn-variant-outlined:not(:disabled):not(.ant-btn-disabled):hover,
.userPage .ant-btn-variant-solid:not(:disabled):not(.ant-btn-disabled):hover,
.userPage .ant-btn-variant-dashed:not(:disabled):not(.ant-btn-disabled):hover {
  box-shadow: inset 0 0 0 200px rgba(0, 0, 0, 0.2);
  border-color: transparent;
  outline: rgba(255, 94, 182, 0.7);
}
#root:has(section.userPage) + div .ant-btn-default,
.ant-modal-root .ant-btn-default,
.userPage .ant-btn-default {
  background-color: #ffffff;
  border-color: #e2dfe4;
  border-radius: 4px;
  font-size: 14px;
  height: 40px;
  min-width: 100px;
  font-weight: 500;
  line-height: 1;
  border-radius: 4px;
  align-items: center;
  justify-content: center;
  min-width: 100px;
}
#root:has(section.userPage) + div .ant-btn-default.btn-gray2,
.ant-modal-root .ant-btn-default.btn-gray2,
.userPage .ant-btn-default.btn-gray2 {
  border-radius: 4px;
  font-size: 14px;
  height: 40px;
  min-width: 100px;
  font-weight: 500;
  line-height: 1;
  border-radius: 4px;
  align-items: center;
  justify-content: center;
  background-color: #a3a1a7 !important;
  border-color: #a3a1a7 !important;
  color: #fff;
  margin-left: 0px;
}
#root:has(section.userPage) + div .ant-btn-default.btn-dark,
.ant-modal-root .ant-btn-default.btn-dark,
.userPage .ant-btn-default.btn-dark {
  border-radius: 4px;
  font-size: 14px;
  height: 40px;
  min-width: 100px;
  font-weight: 500;
  line-height: 1;
  border-radius: 4px;
  align-items: center;
  justify-content: center;
  background-color: #525162 !important;
  border-color: #525162;
  color: #fff;
}
#root:has(section.userPage) + div .ant-btn-default.btn-dark:hover,
.ant-modal-root .ant-btn-default.btn-dark:hover,
.userPage .ant-btn-default.btn-dark:hover {
  color: #fff !important;
}
#root:has(section.userPage) + div .ant-btn-default.icon,
.ant-modal-root .ant-btn-default.icon,
.userPage .ant-btn-default.icon {
  border: 0;
  padding: 4px;
  min-width: auto;
}
#root:has(section.userPage) + div .ant-btn-default.icon span,
#root:has(section.userPage) + div .ant-btn-default.icon p,
.ant-modal-root .ant-btn-default.icon span,
.ant-modal-root .ant-btn-default.icon p,
.userPage .ant-btn-default.icon span,
.userPage .ant-btn-default.icon p {
  display: none;
}
.ant-btn-default:not(:disabled):not(.ant-btn-disabled):hover,
#root:has(section.userPage) + div .ant-btn-variant-outlined:not(:disabled):not(.ant-btn-disabled):hover,
#root:has(section.userPage) + div .ant-btn-variant-dashed:not(:disabled):not(.ant-btn-disabled):hover,
#root:has(section.userPage) + div .ant-btn-variant-outlined:not(:disabled):not(.ant-btn-disabled):hover,
#root:has(section.userPage) + div .ant-btn-variant-dashed:not(:disabled):not(.ant-btn-disabled):hover,
.ant-modal-root .ant-btn-variant-outlined:not(:disabled):not(.ant-btn-disabled):hover,
.ant-modal-root .ant-btn-variant-dashed:not(:disabled):not(.ant-btn-disabled):hover,
.ant-modal-root .ant-btn-variant-outlined:not(:disabled):not(.ant-btn-disabled):hover,
.ant-modal-root .ant-btn-variant-dashed:not(:disabled):not(.ant-btn-disabled):hover,
.userPage .ant-btn-variant-outlined:not(:disabled):not(.ant-btn-disabled):hover,
.userPage .ant-btn-variant-dashed:not(:disabled):not(.ant-btn-disabled):hover,
.userPage .ant-btn-variant-outlined:not(:disabled):not(.ant-btn-disabled):hover,
.userPage .ant-btn-variant-dashed:not(:disabled):not(.ant-btn-disabled):hover {
  color: #000;
  border-color: #e2dfe4;
  box-shadow: inset 0 0 0 200px rgba(0, 0, 0, 0.2);
  border-color: transparent;
  outline: rgba(255, 94, 182, 0.7);
}
#root:has(section.userPage) + div .ant-btn:not(:disabled):focus-visible,
.ant-modal-root .ant-btn:not(:disabled):focus-visible,
.userPage .ant-btn:not(:disabled):focus-visible {
  outline: none;
  outline-offset: 0;
}
#root:has(section.userPage) + div .ant-btn-variant-solid:not(:disabled):not(.ant-btn-disabled):active,
.ant-modal-root .ant-btn-variant-solid:not(:disabled):not(.ant-btn-disabled):active,
.userPage .ant-btn-variant-solid:not(:disabled):not(.ant-btn-disabled):active {
  background: #f138fc;
  color: #fff;
}
.bigImg .ant-modal-content {
  background: transparent;
  box-shadow: none;
  position: relative;
}
.bigImg .ant-modal-content button {
  position: absolute;
  right: 20px;
  top: 20px;
}
.bigImg .ant-modal-content .ant-modal-body {
  padding: 0;
}
.bigImg .ant-modal-content .ant-modal-body img {
  border-radius: 8px;
}
.essentialBox .ant-form-item-label > label {
  height: auto;
  font-size: 12px;
}
.essentialBox .ant-form-item-label > label::after {
  content: '*' !important;
  color: #f34144;
  line-height: 0.5;
  padding-top: 4px;
  margin-left: 4px;
  font-weight: 700;
  font-size: 16px;
  visibility: visible !important;
  margin-inline-start: 4px !important;
}

label.ant-form-item-required,
.basicEssential {
  height: auto;
  font-size: 12px;
}
label.ant-form-item-required::after,
.basicEssential::after {
  content: '*' !important;
  color: #f34144;
  line-height: 0.5;
  padding-top: 4px;
  margin-left: 4px;
  font-weight: 700;
  font-size: 16px;
  visibility: visible !important;
  margin-inline-start: 4px !important;
}
.ant-modal-body .confirmPhone .ant-form-item-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ant-modal-body .confirmPhone .ant-form-item-row:has(.ant-form-item-label) {
  gap: 0;
}
.confirmNum > span,
.confirmInput > span {
  display: flex;
  flex-direction: row;
  gap: 12px;
}
.confirmNum .ant-input-group > .ant-input:first-child,
.confirmInput .ant-input-group > .ant-input:first-child,
.confirmInput input {
  border-start-end-radius: 4px;
  border-end-end-radius: 4px;
}
.confirmNum > span > .ant-input-group-addon,
.confirmInput > span > .ant-input-group-addon {
  display: flex;
  flex-direction: row;
  width: 74px;
  background: none;
  border: none;
  padding: 0;
  justify-content: center;
}
.confirmNum .ant-input-group-addon .ant-btn-link {
  color: #fff;
  height: 100%;
  border-radius: 4px;
  padding: 4px 12px;
}
.confirmInput > span > .ant-input-group-addon button {
  background-color: #525162;
  color: #fff;
  height: 100%;
  border-radius: 4px;
  padding: 4px 12px;
}
.ant-btn-link:not(:disabled):not(.ant-btn-disabled):hover {
  color: #fff;
  box-shadow: inset 0 0 0 200px rgba(0, 0, 0, 0.2);
  background-color: #e94cf7;
}

.confirmNum .ant-input-group-wrapper-outlined .ant-input-group-addon:last-child {
  background-color: transparent;
  background-color: initial;
  border: none;
  padding: 0;
  height: 100%;
  width: 140px;
  text-align: right;
}

.confirmNum .ant-input-group-wrapper-outlined .ant-input-group-addon:last-child div span {
  padding: 8px 20px;
}
.confirmNum .ant-input-group-addon .ant-btn-link {
  background-color: #e94cf7;
  color: #fff;
  height: 40px;
  width: 72px;
  border-radius: 4px;
  padding: 0;
  border-start-start-radius: 4px !important;
  border-end-start-radius: 4px !important;
}
/* .confirmInput > span > .ant-input-group-addon button:hover {
  background-color: #525162;
  box-shadow: inset rgba(0, 0, 0, 0.2);
} */
.content-bottom {
  margin-top: 28px;
}

.content-bottom li {
  display: flex;
  flex-direction: row;
  gap: 8px;
  justify-content: space-between;
  width: 100%;
}
.content-bottom li p {
  display: flex;
  flex-direction: row;
  gap: 8px;
}
.content-bottom li a {
  color: #000;
  text-decoration: underline;
}

.major {
  display: flex;
  padding: 0;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
}
.major img {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
}

.majorModel {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  width: 100%;
  padding: 12px;
  gap: 2px;
  text-wrap-mode: nowrap;
  flex-wrap: wrap;
}
.majorModel span {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  border-radius: 50px;
  padding: 4px 5px;
  background: linear-gradient(90deg, rgba(202, 121, 252, 0.7) 0%, rgba(255, 94, 182, 0.7) 100%);
  text-wrap-mode: nowrap;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: -0.36px;
  line-height: 1;
}
.majorModel span.title {
  color: #fff;
  color: var(--c-ff, #fff);
  text-align: center;
  text-shadow: 0px 0px 0px rgba(255, 255, 255, 0.5);
  font-size: 11px;
  font-style: normal;
  font-weight: 400;
  line-height: 110%; /* 12.1px */
  letter-spacing: -0.22px;
  background: transparent;
  margin-right: 4px;
  padding: 4px 0;
}

.majorModelW {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  width: 100%;
  padding: 12px;
  gap: 2px;
  text-wrap-mode: nowrap;
  flex-wrap: wrap;
  padding: 0;
}
.majorModelW span {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  border-radius: 50px;
  padding: 4px 5px;
  background: linear-gradient(90deg, rgba(202, 121, 252, 0.7) 0%, rgba(255, 94, 182, 0.7) 100%);
  text-wrap-mode: nowrap;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: -0.36px;
  line-height: 1;
}
.majorModelW span.title {
  color: #fff;
  color: var(--c-ff, #fff);
  text-align: center;
  text-shadow: 0px 0px 0px rgba(255, 255, 255, 0.5);
  font-size: 11px;
  font-style: normal;
  font-weight: 400;
  line-height: 110%; /* 12.1px */
  letter-spacing: -0.22px;
  background: transparent;
  margin: 0;
}
.majorModelW span {
  border-radius: 12px;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  border: 1px solid #c4c3c7;
  border: 1px solid var(--b-selectLine, #c4c3c7);
  background: #fff;
  color: #6d6c75;
}

/* .majorModel {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  width: 100%;
  padding: 12px;
  gap: 2px;
  text-wrap-mode: nowrap;
  flex-wrap: wrap;
  padding: 0;
}
.majorModel span {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  border-radius: 50px;
  padding: 4px 5px;
  background: linear-gradient(90deg, rgba(202, 121, 252, 0.7) 0%, rgba(255, 94, 182, 0.7) 100%);
  text-wrap-mode: nowrap;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: -0.36px;
  line-height: 1;
} */

.classRank {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  /* gap: 4px; */
  height: 32px;
}

.classRank > div {
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
}
.classRank span {
  font-size: 14px;
  font-weight: 600;
  margin-right: 5px;
  color: #fff;
}
.classRank span::after {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  background-image: url(../../static/media/btn_down.587633fada66dd1d8694.svg) no-repeat right center;
}
.classRank .ant-dropdown-menu-title-content > div {
  gap: 8px;
}
.classRank .ant-dropdown-menu-title-content *,
.classRank .ant-dropdown-menu-title-content p {
  color: #0e0e1f !important;
}

.absolBox,
.absoluteBox {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.absolBox .user,
.absoluteBox .user {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0) 100%);
  min-height: 36px;
  display: flex;
  align-items: start;
  justify-content: start;
  border-radius: 8px;
  padding: 8px;
}
.absolBox .user p,
.absolBox .user h1,
.absoluteBox .user p,
.absoluteBox .user h1 {
  padding: 4px;
  border-radius: 8px;
  background: #141424;
  font-size: 11px !important;
  font-style: normal;
  font-weight: 400 !important;
  line-height: 100%; /* 11px */
  width: fit-content;
  color: #fff;
}
.absolBox .user > div,
.absoluteBox .user > div {
  padding: 0;
}
.absolBox .user img,
.absoluteBox .user img {
  display: none;
}
.absolBox .title,
.absoluteBox .title {
  margin: 0;
}
.absolBox .title h1,
.absoluteBox .title h1 {
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
  line-height: 1.4;
  margin: 0;
}
.absolBox .title:has(h2),
.absoluteBox .title:has(h2) {
  background: #e2e2e2;
  padding: 8px;
}
.absoluteBox .title:has(h2) .infoCount {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  gap: 2px;
}
.absolBox .title:has(h2) .infoCount,
.absoluteBox .title:has(h2) .infoCount {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 12px;
  margin-top: 4px;
}
.absolBox .title h2,
.absoluteBox .title h2 {
  line-height: 1.4;
  margin: 0;
  font-size: 13px;
  padding: 3px 0px;
}
.absolBox .title h2:has(p),
.absoluteBox .title h2:has(p) {
  /* display: flex;
  flex-direction: row;
  justify-content: space-between; */
}
.absolBox .title h2 span,
.absoluteBox .title h2 span {
  /* width: calc(100% - 70px); */
  /* overflow: hidden;
  text-overflow: ellipsis;
  text-wrap: nowrap; */
}
/* .absolBox .title h2 p,
.absoluteBox .title h2 p {
  min-width: 50px;
  text-align: right;
} */
.absolBox .title .greyBox h1,
.absoluteBox .title .greyBox h1 {
  text-shadow: none;
}

.absolBox .user {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0) 100%);
  min-height: 36px;
  display: flex;
  align-items: start;
  justify-content: start;
}
.absolBox .user p,
.absolBox .user h1 {
  padding: 4px;
  border-radius: 8px;
  background: #141424;
  font-size: 11px !important;
  font-style: normal;
  font-weight: 400 !important;
  line-height: 100%; /* 11px */
  width: fit-content;
}
.absolBox .title {
  /* margin-top: 0; */
  /* margin-bottom: 0; */
  padding: 8px;
  margin: 0;
  min-height: 74px;
  justify-content: flex-end;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(51, 51, 51, 0.3) 59.5%, rgba(102, 102, 102, 0) 100%);
}
.absolBox .title h1,
.absolBox .title p {
  background: none;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
}
.absolBox .title h1 {
  line-height: 1;
}

#whiteBtn:hover {
  background: inherit;
  color: inherit;
}

.info-area button {
  font-size: 12px;
  font-weight: 500;
}
.info-area button img {
  font-size: 12px;
  font-weight: 500;
  width: 20px;
}

.ant-divider-horizontal.ant-divider-with-text {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  gap: 0;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAABCAYAAADjAO9DAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ4IDc5LjE2NDAzNiwgMjAxOS8wOC8xMy0wMTowNjo1NyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjEgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkJENjdFRDlDQjIxMTExRUZCNUNGQzc0QUNBQkI0Nzg3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkJENjdFRDlEQjIxMTExRUZCNUNGQzc0QUNBQkI0Nzg3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QkQ2N0VEOUFCMjExMTFFRkI1Q0ZDNzRBQ0FCQjQ3ODciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QkQ2N0VEOUJCMjExMTFFRkI1Q0ZDNzRBQ0FCQjQ3ODciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5DMPkwAAAAGElEQVR42mI8tOP0fwYkYOtuwojMBwgwAG5VA//H3djjAAAAAElFTkSuQmCC) repeat-x left center;
  padding: 20px 0;
  margin: 0 0 40px;
}
.ant-divider-horizontal.ant-divider-with-text span {
  background: #fff;
  font-size: 24px;
  padding: 0 12px;
  font-weight: 600;
  display: flex;
  gap: 12px;
  align-items: center;
}
.ant-divider-horizontal.ant-divider-with-text span img {
  height: 20px;
}
.ant-divider-horizontal.ant-divider-with-text::before {
  position: relative;
  width: 36px;
  height: 24px;
  border-block-start: 1px solid transparent;
  border-block-start-color: inherit;
  border-block-end: 0;
  content: '';
  margin-top: -22px;
  background: #fff url(../../static/media/profile_01.cd4093a5df48bfaabe7f.svg) no-repeat 16px 0px;
}
.ant-divider-horizontal.ant-divider-with-text::after {
  width: 0;
}

.cautionBlue {
  display: flex;
  width: 100%;
  padding: 0px 16px;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 8px;
  background: #eff8f9;
  background: var(--bg-sky, #eff8f9);
}
.cautionBlue h3 {
  display: flex;
  gap: 8px;
  color: #0d88d4;
  color: var(--c-comment, #0d88d4);
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
  border-bottom: 1px solid #dfdce3;
  width: 100%;
  padding: 12px 16px;
  flex-direction: column;
  align-items: center;
}
.cautionBlue .box {
  display: flex;
  flex-direction: column;
  justify-content: start;
  padding: 16px 12px;
  gap: 8px;
}
.cautionBlue .box p {
  font-size: 12px;
}

/* page custom */
/* main */
.slick-dots li button:before,
#bannerSlider .slick-dots li button:before,
#mainSlider .slick-dots li button:before {
  width: 16px;
  height: 16px;
}
#bannerSlider .slick-dots,
#mainSlider .slick-dots {
  bottom: 16px;
  z-index: 2;
}
#bannerSlider .slick-dots li,
#mainSlider .slick-dots li {
  width: 16px;
  height: 16px;
}
#promptSales .titleBox,
.profileTitle,
#myHome .rsWrapper .promptBox {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  gap: 10px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAABCAYAAADjAO9DAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ4IDc5LjE2NDAzNiwgMjAxOS8wOC8xMy0wMTowNjo1NyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjEgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkJENjdFRDlDQjIxMTExRUZCNUNGQzc0QUNBQkI0Nzg3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkJENjdFRDlEQjIxMTExRUZCNUNGQzc0QUNBQkI0Nzg3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QkQ2N0VEOUFCMjExMTFFRkI1Q0ZDNzRBQ0FCQjQ3ODciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QkQ2N0VEOUJCMjExMTFFRkI1Q0ZDNzRBQ0FCQjQ3ODciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5DMPkwAAAAGElEQVR42mI8tOP0fwYkYOtuwojMBwgwAG5VA//H3djjAAAAAElFTkSuQmCC) repeat-x center;
  height: auto;
  line-height: 1;
  padding: 20px 0;
}
#promptSales .titleBox div,
.profileTitle div,
#myHome .rsWrapper .promptBox div {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background: #fff;
  gap: 0;
  padding: 0 12px;
  font-size: 20px;
  font-weight: 700;
}

#promptSales .titleBox div button,
.profileTitle div button,
#myHome .rsWrapper .promptBox div button {
  font-size: 14px;
  border-radius: 50px;
  padding: 4px;
  height: 24px;
  width: 24px;
  margin: 0;
}
#promptSales .titleBox div button:hover,
.profileTitle div button:hover,
#myHome .rsWrapper .promptBox div button:hover {
  border-radius: 50px;
  background: #e3e1e4;
  transition: all 0.2s ease;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}
#promptSales .titleBox div:has(img),
.profileTitle div:has(img),
#myHome .rsWrapper .promptBox div:has(img) {
  gap: 12px;
}

#promptSales .titleBox {
  /* margin-top: -24px; */
}

.ant-divider-horizontal.ant-divider-with-text.ant-divider-dashed::before,
.ant-divider-horizontal.ant-divider-with-text.ant-divider-dashed::after {
  border-style: none;
}

.profileList {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(100% - 80px);
}
.profileList .list > div > img {
  width: 100%;
}

#myHome .rsWrapper > .box div {
  font-size: 20px;
}

#popularWrapper .rankBox .rsWrapper .infoBox .contentsBox .contentsList .contents .absoluteBox {
  padding: 0;
}
#popularWrapper .rankBox .rsWrapper .infoBox .contentsBox .contentsList .contents .absoluteBox .user {
  width: 100%;
  margin-bottom: 0;
  padding: 4px 8px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0) 100%);
  min-height: 36px;
  display: flex;
  align-items: start;
  justify-content: start;
  gap: 9.67px;
}
#popularWrapper .rankBox .rsWrapper .infoBox .contentsBox .contentsList .contents .absoluteBox .user {
  min-height: 0;
  min-height: initial;
}
#popularWrapper .rankBox .rsWrapper .infoBox .contentsBox .contentsList .contents .absoluteBox .user p,
#popularWrapper .rankBox .rsWrapper .infoBox .contentsBox .contentsList .contents .absoluteBox .user h1 {
  padding: 4px;
  border-radius: 8px;
  background: #141424;
  font-size: 11px !important;
  font-style: normal;
  font-weight: 400 !important;
  line-height: 100%; /* 11px */
  width: fit-content;
}
#popularWrapper .rankBox .rsWrapper .infoBox .contentsBox .contentsList .contents .absoluteBox .user img {
  display: none;
}
#popularWrapper .rankBox .rsWrapper .infoBox .contentsBox .contentsList .contents .absoluteBox .price {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0) 100%);
  padding: 8px;
}
#popularWrapper .rankBox .rsWrapper .infoBox .contentsBox .contentsList .contents .absoluteBox div {
  justify-content: start;
}
.classBadge {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  margin-left: 4px;
  gap: 4px;
}
#popularWrapper .rsWrapper .userBox .appraisal .classBadge .major {
  gap: 10px;
}
#popularWrapper .rsWrapper .userBox .appraisal .classBadge .major img {
  height: 24px !important;
  width: 24px !important;
}

#listWrapper .rsWrapper .staff .staffList .staffBox .absoluteBox > div:first-child,
#listWrapper .rsWrapper .newContents .staffList .staffBox .absoluteBox > div:first-child {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0) 100%);
  min-height: 36px;
  display: flex;
  align-items: start;
  justify-content: start;
}
#listWrapper .rsWrapper .staff .staffList .staffBox .absoluteBox > div:first-child p,
#listWrapper .rsWrapper .staff .staffList .staffBox .absoluteBox > div:first-child h1,
#listWrapper .rsWrapper .newContents .staffList .staffBox .absoluteBox > div:first-child p,
#listWrapper .rsWrapper .newContents .staffList .staffBox .absoluteBox > div:first-child h1 {
  padding: 4px;
  border-radius: 8px;
  background: #141424;
  font-size: 11px !important;
  font-style: normal;
  font-weight: 400 !important;
  line-height: 100%; /* 11px */
  width: fit-content;
}
#listWrapper .rsWrapper .staff .staffList .staffBox .absoluteBox > div:first-child p,
#listWrapper .rsWrapper .newContents .staffList .staffBox .absoluteBox > div:first-child p {
  width: fit-content;
}
#listWrapper .rsWrapper .staff .staffList .staffBox .absoluteBox > div:first-child p p,
#listWrapper .rsWrapper .staff .staffList .staffBox .absoluteBox > div:first-child p h1,
#listWrapper .rsWrapper .newContents .staffList .staffBox .absoluteBox > div:first-child p p,
#listWrapper .rsWrapper .newContents .staffList .staffBox .absoluteBox > div:first-child p h1 {
  padding: 4px;
  border-radius: 8px;
  background: #141424;
  font-size: 11px !important;
  font-style: normal;
  font-weight: 400 !important;
  line-height: 100%; /* 11px */
  width: fit-content;
}

.contentsList {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: flex-start;
  width: 100%;
  gap: 10px;
}
.contentsList .contents {
  margin: 0;
}

.rankBox .absolBox,
.rankBox .absoluteBox {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.rankBox .absolBox .flexRowBetween,
.rankBox .absoluteBox .flexRowBetween {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%);
  min-height: 36px;
  display: flex;
  align-items: start;
  justify-content: start;
  gap: 8px;
  padding: 0 8px;
  justify-content: space-between;
}
.rankBox .absolBox .flexRowBetween .user,
.rankBox .absoluteBox .flexRowBetween .user {
  padding: 16px 0;
  background: none;
}
.rankBox .absolBox .flexRowBetween .user p,
.rankBox .absolBox .flexRowBetween .user h1,
.rankBox .absoluteBox .flexRowBetween .user p,
.rankBox .absoluteBox .flexRowBetween .user h1 {
  padding: 4px;
  border-radius: 8px;
  background: #141424;
  font-size: 11px !important;
  font-style: normal;
  font-weight: 400 !important;
  line-height: 100%; /* 11px */
  width: fit-content;
}
.rankBox .absolBox h1,
.rankBox .absoluteBox h1 {
  text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.25);
}
.rankBox .absolBox .priceBox,
.rankBox .absoluteBox .priceBox {
  padding: 16px;
  justify-content: flex-end;
  align-items: flex-end;
}

.comment {
  color: #0d88d4 !important;
}

.rsWrapper .listBox .gerneBox .absolBox div .user,
.rsWrapper .staff .staffList .staffBox .absoluteBox > div:first-child,
.rsWrapper .newContents .staffList .staffBox .absoluteBox > div:first-child {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 8px;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 8px;
}
.rsWrapper .listBox .gerneBox .absolBox div .user img,
.rsWrapper .staff .staffList .staffBox .absoluteBox > div:first-child img,
.rsWrapper .newContents .staffList .staffBox .absoluteBox > div:first-child img {
  display: none;
}

.rsWrapper .info div .contentsBox .musicBox .music > .user,
.rsWrapper .thumbBox .absolBox > div > div {
  width: auto;
}
.rsWrapper .info div .contentsBox .musicBox .music > .user img,
.rsWrapper .thumbBox .absolBox > div > div img {
  display: none;
}
.rsWrapper .info div .contentsBox .musicBox .music > .user p,
.rsWrapper .info div .contentsBox .musicBox .music > .user h1,
.rsWrapper .thumbBox .absolBox > div > div p,
.rsWrapper .thumbBox .absolBox > div > div h1 {
  padding: 4px;
  border-radius: 8px;
  background: #141424;
  font-size: 11px !important;
  font-style: normal;
  font-weight: 400 !important;
  line-height: 100%; /* 11px */
  width: fit-content;
}
.mainTop #popularSlider .list > div .absoluteBox .user {
  border-radius: 8px 8px 0 0;
}
#popularSlider .list > div .absoluteBox .user {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0) 100%);
  min-height: 36px;
  display: flex;
  align-items: start;
  justify-content: start;
  padding-left: 0;
  height: 36px;
  border-radius: 16px 16px 0 0;
}
#popularSlider .list > div .absoluteBox .user p,
#popularSlider .list > div .absoluteBox .user h1 {
  padding: 4px;
  border-radius: 8px;
  background: #141424;
  font-size: 11px !important;
  font-style: normal;
  font-weight: 400 !important;
  line-height: 100%; /* 11px */
  width: fit-content;
}
#popularSlider .list > div .absoluteBox .user div {
  height: auto;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 8px;
}
#popularSlider .list > div .absoluteBox .user div img {
  display: none;
}
#popularSlider .list > div .absoluteBox .user .aiBox p,
#popularSlider .list > div .absoluteBox .user .aiBox h1 {
  padding: 4px;
  border-radius: 8px;
  background: #141424;
  font-size: 11px !important;
  font-style: normal;
  font-weight: 400 !important;
  line-height: 100%; /* 11px */
  width: fit-content;
}

.contentsList .absoluteBox .flexRowStart img {
  display: none;
}

.absoluteBox .title .greyBox .imgBox .ant-rate {
  font-size: 14px;
}
.absoluteBox .title .greyBox .imgBox .ant-rate.ant-rate .ant-rate-star:not(:last-child) {
  margin-inline-end: 0px;
}

#otherWrapper .rsWrapper > div .content .listBox .list .absoluteBox .user img {
  display: none;
}

#musicWrapper .filter .listBox {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: start;
}

.thumbBox .absolBox > div {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0) 100%);
  min-height: 36px;
  display: flex;
  align-items: start;
  justify-content: start;
}

.thumbBox .absolBox .name {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0) 100%);
}

.ant-checkbox .ant-checkbox-inner {
  width: 20px;
  height: 20px;
}

/* #aiWrapper > h1 span {
  font-size: 48px;
} */

.titleBox .noMore:hover {
  cursor: default;
}
.titleBox .search {
  border-radius: 4px;
  border: 1px solid #e2dfe4;
  border: 1px solid var(--b-input, #e2dfe4);
}
.titleBox .search:has(.ant-input-outlined):focus,
.titleBox .search:has(.ant-input-outlined):focus-within {
  border: 1px solid #c718e2;
  background: #fff !important;
}
.titleBox .search:has(.ant-input-outlined):hover {
  background: inherit;
}
.titleBox .search .ant-input-outlined {
  background-color: transparent;
  border-color: transparent;
  padding: 0;
}
.titleBox .search .ant-input-outlined img {
  margin: 0;
}
.titleBox .search .ant-input-outlined:hover {
  background: inherit;
}
.titleBox .search .ant-input-affix-wrapper .ant-input-clear-icon {
  font-size: 20px;
}

.searchBox > div:last-child div {
  gap: 12px;
}

#popularWrapper .rankBox .rsWrapper .thumbnail .absoluteBox {
  padding: 0;
}

#myProfile > .rsWrapper.flexColCenter {
  max-width: 1520px;
  justify-content: center;
  margin: auto;
  min-width: 200px;
  width: 100%;
}
#myProfile > .rsWrapper.flexColCenter + .ant-form {
  width: 100%;
}
#myProfile .myInfo .content .box {
  column-gap: 40px;
}
#myProfile .myInfo .content .box .noResult {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  background-color: #f7f7f8;
  border-radius: 8px;
  padding: 20px;
  color: #6d6c75;
  text-align: center;
  flex-wrap: wrap;
  width: 100%;
  height: 140px;
}
#myProfile .myInfo .content .box .thumb + .infoBox .box2 .info {
  width: calc(50% + 90px);
}
#myProfile .myInfo .content .box .thumb + .infoBox .box2 .info:first-child {
  width: calc(50% - 53px);
}
#myProfile .myInfo .content .box .thumbUpdate {
  width: 140px;
}
#myProfile .myInfo .content .box .thumbUpdate p.comment {
  margin-top: 4px;
}
#myProfile .myInfo .content .box .thumbUpdate .ant-form-item {
  padding: 0;
  width: 140px;
  height: 140px;
}
/* #myProfile .myInfo .content .box .thumbUpdate .ant-form-item .ant-upload-btn {
  padding: 0;
} */
#myProfile .myInfo .content .box .thumbUpdate .ant-upload-wrapper {
  border-radius: 4px;
  overflow: hidden;
}
#myProfile .myInfo .content .box .thumbUpdate .ant-upload-wrapper .ant-upload-drag:not(.ant-upload-disabled):hover,
#myProfile .myInfo .content .box .thumbUpdate .ant-upload-wrapper .ant-upload-drag-hover:not(.ant-upload-disabled),
#myProfile .myInfo .content .box .thumbUpdate .ant-upload-wrapper .ant-upload-drag {
  border-color: transparent;
  background: transparent;
}
#myProfile .myInfo .content .box .thumbUpdate .ant-form-item-control {
  display: flex;
  justify-content: center;
  align-items: center;
}
#myProfile .myInfo .content .box .thumbUpdate .ant-form-item-control .ant-form-item-control-input {
  align-items: flex-start;
}
#myProfile .myInfo .content .box .thumbUpdate .ant-upload-drag {
  background: transparent;
  border: 0;
}
/* #myProfile .myInfo .content .box .thumbUpdate .ant-upload-drag-container {
  position: relative;
  width: 100%;
  height: 100%;
}
#myProfile .myInfo .content .box .thumbUpdate .ant-upload-drag-container .imageContainer {
  width: 100%;
} */

#myProfile .myInfo .content .infoBoxUpdate {
  width: 100%;
  padding: 0;
  gap: 36px;
}
#myProfile .myInfo .content .infoBoxUpdate img {
  border-radius: 16px;
}
/* #myProfile .myInfo .info .ant-image {
  width: 100%;
  margin: 0;
  border: none;
  background: transparent;
} */
#myProfile .myInfo .info h1 + div {
  width: 100%;
  margin: 0;
  border: none;
  background: transparent;
}
#myProfile .myInfo .info h1 + div .ant-upload-wrapper .ant-upload-drag .ant-upload {
  padding: 0;
}
#myProfile .myInfo .info .plusBannerBox .ant-form-item,
#myProfile .myInfo .info .plusBannerBox .ant-upload-drag-container {
  width: 100%;
  height: 100%;
}
#myProfile .myInfo .info .plusBannerBox .ant-form-item .imageContainer,
#myProfile .myInfo .info .plusBannerBox .ant-upload-drag-container .imageContainer {
  position: relative;
  display: flex;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  /* min-height: 150px; */
  max-height: 300px;
  overflow: hidden;
}
#myProfile .myInfo .info .plusBannerBox .ant-form-item .ant-form-item-control,
#myProfile .myInfo .info .plusBannerBox .ant-form-item .ant-form-item-control-input,
#myProfile .myInfo .info .plusBannerBox .ant-upload-drag-container .ant-form-item-control,
#myProfile .myInfo .info .plusBannerBox .ant-upload-drag-container .ant-form-item-control-input {
  height: min-content;
}
#myProfile .myInfo .info .plusBannerBox .plus {
  margin: 20px 0 4px;
}
#myProfile .myInfo .about_me {
  display: flex;
  padding: 4px 0px;
  align-items: flex-start;
  gap: 10px;
  font-size: 16px;
  font-weight: 700;
  line-height: 140%;
  min-height: 30px;
}
/* #myProfile .userInfo .content .box .info > .rowBox:not(.ant-select-selector) {
  justify-content: start;
} */
#myProfile .userInfo .content .box .info div p {
  color: inherit;
}

.userInfo .box:last-child {
  margin-bottom: 0;
}
/* .userInfo .info span {
  display: flex;
  flex-direction: column;
  justify-content: center;
} */
.userInfo .info .ant-select-selection-wrap {
  flex-direction: row;
}

h1 {
  font-weight: 600;
}

.content:has(.flexColStart.box) {
  gap: 0;
}
.content:has(.flexColStart.box) .flexColStart.box {
  gap: 0;
}

.ant-list .ant-list-empty-text,
.noResult {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  background-color: #f7f7f8;
  border-radius: 8px;
  padding: 20px;
  color: #6d6c75;
  text-align: center;
  flex-wrap: wrap;
  width: 100%;
  font-size: 16px;
}

.communitySection .rsWrapper.flexColCenter {
  padding-bottom: 20px;
}

#depth2 .titleBox {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  height: 50px;
}
#depth2 .titleBox .title {
  padding: 0;
}

.ant-layout {
  width: 100%;
  padding: 0;
  margin: auto;
  margin-bottom: 64px;
}
.rankingArea .ant-layout {
  margin-bottom: 0;
  margin-bottom: initial;
}
.ant-layout .aui-grid {
  width: 100%;
}
.ant-form-item .ant-form-item-explain-error {
  text-align: left;
}
img,
.ant-card-bordered {
  border: 0;
}

.sun-editor .se-wrapper .sun-editor:focus {
  border-color: linear-gradient(90deg, #b041f3 0%, #ec15ff 100%);
}

/* radio */
.ant-checkbox,
.ant-radio-group {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 12px;
}
.ant-checkbox *,
.ant-radio-group * {
  text-wrap-mode: nowrap;
}

.ant-radio-wrapper .ant-radio-checked .ant-radio-inner {
  background: linear-gradient(to right, #b041f3 0%, #ec15ff 100%);
  border-color: transparent;
  width: 20px;
  height: 20px;
}
.ant-radio-wrapper .ant-radio-checked:hover .ant-radio-inner {
  border-color: #ec15ff;
}
.ant-radio-wrapper .ant-radio-inner {
  width: 20px;
  height: 20px;
}

.ant-radio-wrapper .ant-radio-checked .ant-radio-inner::after {
  transform: scale(0.45);
  opacity: 1;
  transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
}

.ant-radio-wrapper:hover .ant-checkbox-wrapper-disabled .ant-racheckboxdio-inner,
.ant-radio-wrapper:hover .ant-checkbox-wrapper-disabled .ant-checkbox-innerr::after,
.ant-radio-wrapper .ant-radio-checked:has(:disabled) .ant-radio-inner,
.ant-radio-wrapper .ant-radio-checked:has(:disabled) .ant-radio-innerr::after,
.ant-radio-wrapper:hover .ant-radio-disabled .ant-radio-inner,
.ant-radio-wrapper:hover .ant-radio-disabled .ant-radio-innerr::after,
.ant-radio-wrapper .ant-radio-disabled .ant-radio-checked + input:disabled + .ant-radio-inner,
.ant-radio-wrapper .ant-radio-disabled .ant-radio-checked + input:disabled + .ant-radio-inner::after,
.ant-radio-wrapper .ant-radio-disabled .ant-radio-checked + input:disabled:hover + .ant-radio-inner::after {
  border-color: #dfdce4 !important;
  background: #dfdce4;
}

/* checkbox */
.ant-checkbox-wrapper:not(.ant-checkbox-wrapper-disabled):hover .ant-checkbox-inner,
.ant-checkbox:not(.ant-checkbox-disabled):hover .ant-checkbox-inner {
  border-color: #c718e2;
}

.ant-checkbox .ant-checkbox-inner:after {
  top: 43%;
  inset-inline-start: 25%;
  display: table;
  width: 6.714286px;
  height: 12.142857px;
  border: 3px solid #fff;
  border-top: 0;
  border-inline-start: 0;
  background: linear-gradient(to right, #b041f3 0%, #ec15ff 100%);
}

.profileSection .ant-form {
  max-width: 1600px;
  width: 100%;
  gap: 10px;
  padding: 0 16px 20px;
  display: flex;
  flex-direction: column;
}
.profileSection .ant-row:has(.thumbUpdate) {
  padding: 0;
}
.profileSection .ant-form-item {
  margin: 0;
}
.profileSection .ant-row {
  display: flex;
  flex-flow: row wrap;
  min-width: 0;
  padding: 0;
  gap: 24px;
}
.profileSection .ant-row .title {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  align-items: start;
  color: #3e3d53;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  gap: 12px;
  margin: 0;
}
.profileSection .ant-row .title::before {
  background: url(../../static/media/profile_01.cd4093a5df48bfaabe7f.svg) no-repeat left center;
  width: 20px;
  height: 20px;
  display: inline-block;
}

.fillter + div .titleBox .ant-layout-header {
  display: flex;
  height: 71px;
  padding-bottom: 20px;
  align-items: center;
  gap: 10px;
  align-self: stretch;
}
.fillter + div .titleBox .ant-input-outlined:focus,
.fillter + div .titleBox .ant-input-outlined:focus-within {
  border-color: #c718e2;
  box-shadow: none;
  background-color: inherit;
}
.fillter + div .titleBox .ant-input-outlined {
  background: inherit;
  border-width: 0;
}
.fillter + div .titleBox .ant-input-outlined:focus,
.fillter + div .titleBox .ant-input-outlined:focus-within {
  box-shadow: none;
}

.ant-input-outlined {
  display: flex;
  width: 100%;
  height: 40px;
  padding: 8px 12px;
  align-items: center;
  gap: 8px;
  border-radius: 4px;
  border: 1px solid #e2dfe4;
  border: 1px solid var(--b-input, #e2dfe4);
  background: #f7f7f8;
}
div:has(> .textArea:hover) {
  background: #fff;
  border: 1px solid #e94cf7;
}

div:has(> .textArea:focus) {
  background: #fff !important;
  border: 1px solid #e94cf7;
}

.ant-select-outlined:not(.ant-select-customize-input) .ant-select-selector {
  display: flex;
  height: 40px;
  padding: 4px 0px 4px 8px;
  justify-content: space-between;
  align-items: center;
  border-radius: 4px;
  border: 1px solid #dfdce4;
  background: #ffffff;
}

.ant-select .ant-select-arrow {
  margin-top: -12px;
  width: 24px;
  height: 24px;
  right: 7px;
}
.ant-select .ant-select-arrow .anticon {
  vertical-align: top;
  transition: transform 0.3s;
  background: url(../../static/media/arr_down.23829ee36b8036038ff1.svg) no-repeat center;
  width: 24px;
  height: 24px;
}
.ant-select .ant-select-arrow .anticon svg {
  display: none;
}

.ant-select-selector:hover {
  background: #fff !important;
}

.ant-select-dropdown .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
  font-weight: 500;
  background-color: #fdf2ff;
}

.ant-select-dropdown .ant-select-item {
  min-height: 40px;
  padding-top: 10px;
}

.ant-select-dropdown {
  padding: 0;
  border-radius: 4px;
  border: 1px solid #c718e2;
  background: #fff;
}
/* 드롭다운 내부 스크롤의 전파를 막아, 페이지가 같이 움직이지 않도록 제어 */
.ant-select-dropdown, /* AntD 기본 드롭다운 컨테이너 */
.ant-select-dropdown .rc-virtual-list-holder-inner {
  overscroll-behavior: contain;
}

.ant-select-focused.ant-select-outlined:not(.ant-select-disabled):not(.ant-select-customize-input):not(.ant-pagination-size-changer) .ant-select-selector {
  border-color: #c718e2;
  box-shadow: none;
  background: #fff;
  outline: 0;
}

#builder div .content .layout .ant-layout div div .input:focus + button {
  background-image: linear-gradient(90deg, #b041f3 0%, #ec15ff 100%);
}

#builder div .content .layout .selectWrapper .ant-select,
.ant-select-single {
  height: 40px;
}

.ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item:has(.ant-upload-list-item-thumbnail) {
  padding: 0;
  border: 0;
}

.ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item-thumbnail {
  display: flex;
  justify-content: center;
  align-items: center;
}

.ant-image-preview-root .ant-image-preview-img-wrapper {
  border-radius: 16px;
}

.ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item::before {
  background-color: transparent;
}

.ant-upload-wrapper .ant-upload-drag .ant-upload-btn:has(.ant-upload-drag-container > p) {
  justify-content: start;
  align-items: start;
}
.ant-upload-wrapper .ant-upload-drag .ant-upload-btn:has(.ant-upload-drag-container > p) {
  justify-content: start;
  align-items: start;
  padding: 4px 0;
}
/* .ant-upload-wrapper .ant-upload-drag .ant-upload-drag-container,
.ant-upload-wrapper .ant-upload-drag .ant-upload-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 100%;
}
.ant-upload-wrapper .ant-upload-drag .ant-upload-drag-container > div {
  gap: 4px;
} */
.plus span {
  width: 20px;
  height: 20px;
  background: url(../../static/media/i-upload.424264f03f5010fdce8e.svg) no-repeat center;
}
.plus span svg {
  display: none;
}
/* .ant-upload-wrapper .ant-upload-drag .ant-upload-drag-container > p {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  color: #0d88d4 !important;
} */
.ant-upload-wrapper .ant-upload-drag .ant-upload-drag-container > p {
  display: flex;
  align-items: center;
  gap: 5px;
}
.ant-upload-wrapper .ant-upload-drag .ant-upload-drag-container > p::before {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoBAMAAAB+0KVeAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAwUExURUdwTGRiYmRhYWVhYWRiYmNgYGViYmRgYGRiYmVhYWVgYGViYmNiYmZiYmVjY2ViYge0b3kAAAAPdFJOUwC9X99/EO8gQM8wn1CPbwO6HUAAAAFNSURBVCjPdVI9S8RAEF0jZ8SzCBZWQhQ7m4hgo0VArhNNWju1s4qVlWDEH2BlrWAraCHW1jbXiK3N9XJ3cly8g+dk9vNMnGL35eXtm9nZEULGeWf/TUzG7AcotvMJLgRHf9lyDcUBo1ND3sPElubmMvo6ed5lvTY4I7yQElgh8CM5PwaOJVwFBtK1SVmVv38LBIwiYFPbHwBjBrERslWfCwd6tuRrIJeW65acAp5om7a1yXOHtD0CqXPjjCtto+v2JuQMXxi55Ce+aU14NZH8T9Yej+oSXWDglCQyDGmdAV4rxTd1t/Q1A/lvbMm2unRY07qyWzdOk3vaplDShnmO8uE2JHlFz3knITUPSyW4LB9eWXklPnrfW+QZKdLK2Fipbwasm1ipF+tR9KxUzL+wb86jUZgGPbRaazprIP5GZCbPCZIORY20elz4O+IXryb5pOql6r4AAAAASUVORK5CYII=) no-repeat center;
  background-size: contain;
  content: '';
  width: 18px;
  height: 18px;
  cursor: pointer;
}
.ant-upload-wrapper .ant-upload-drag .ant-upload-drag-container > p button,
.icon-fileDel {
  content: '';
  width: 21px;
  height: 21px;
  border-radius: 50%;
  border: 1px solid #ccc;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwBAMAAAClLOS0AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAASUExURUdwTAAAAAAAAAAAAAAAAAAAAFZgiOcAAAAFdFJOUwBgX5/ffhjBrwAAAKtJREFUOMt1lMkVgCAMBUMR3C1CK/DZgEr/rQiIyPLHW8IfDNlsXUx87rJwqgN/mw8CcVHuFJLVAnnFAinaCfmkE1KVA/ILB6TRdUgr65BO1Rj9vY01RFLNMfZqT68tjjk/xSMyml2qBtknqxadsmgJkUBCdGNERAN8QFfhzylcfCClBJNIacdCUWmxGah9sOGoRbGpaQxwcGjUcDhpnHEB4Mo49JIJtum1tD/T6DbbeF1PlgAAAABJRU5ErkJggg==) no-repeat center #fff;
  background-size: 40%;
  cursor: pointer;
}

.ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item::before,
.ant-upload-wrapper.ant-upload-picture-circle-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item::before,
.ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-circle .ant-upload-list-item::before,
.ant-upload-wrapper.ant-upload-picture-circle-wrapper .ant-upload-list.ant-upload-list-picture-circle .ant-upload-list-item::before {
  width: 100%;
  height: 100%;
}

.ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item-actions .anticon-eye,
.ant-upload-wrapper.ant-upload-picture-circle-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item-actions .anticon-eye,
.ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-circle .ant-upload-list-item-actions .anticon-eye,
.ant-upload-wrapper.ant-upload-picture-circle-wrapper .ant-upload-list.ant-upload-list-picture-circle .ant-upload-list-item-actions .anticon-eye,
.ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item-actions .anticon-download,
.ant-upload-wrapper.ant-upload-picture-circle-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item-actions .anticon-download,
.ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-circle .ant-upload-list-item-actions .anticon-download,
.ant-upload-wrapper.ant-upload-picture-circle-wrapper .ant-upload-list.ant-upload-list-picture-circle .ant-upload-list-item-actions .anticon-download,
.ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item-actions .anticon-delete,
.ant-upload-wrapper.ant-upload-picture-circle-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item-actions .anticon-delete,
.ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-circle .ant-upload-list-item-actions .anticon-delete,
.ant-upload-wrapper.ant-upload-picture-circle-wrapper .ant-upload-list.ant-upload-list-picture-circle .ant-upload-list-item-actions .anticon-delete {
  color: #0e0e1f;
}

.ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item-actions,
.ant-upload-wrapper.ant-upload-picture-circle-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item-actions,
.ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-circle .ant-upload-list-item-actions,
.ant-upload-wrapper.ant-upload-picture-circle-wrapper .ant-upload-list.ant-upload-list-picture-circle .ant-upload-list-item-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.ant-btn-primary:not(:disabled):not(.ant-btn-disabled):hover,
.ant-btn-variant-solid:not(:disabled):not(.ant-btn-disabled):hover {
  color: #ffffff;
  background: #c718e2;
}

.ant-btn-variant-outlined:not(:disabled):not(.ant-btn-disabled):hover,
.ant-btn-variant-dashed:not(:disabled):not(.ant-btn-disabled):hover {
  box-shadow: inset 0 0 0 200px rgba(0, 0, 0, 0.2);
  border-color: transparent;
  outline: rgba(255, 94, 182, 0.7);
  color: #000;
  border-color: #e2dfe4;
}

.ant-switch .ant-switch-handle::before {
  border-radius: 100%;
}

.ant-switch:hover:not(.ant-switch-disabled),
.ant-switch {
  background: #0d88d4;
}

.ant-switch.ant-switch-checked:hover:not(.ant-switch-disabled) {
  color: #eee;
  background: linear-gradient(90deg, #b041f3 0%, #ec15ff 100%);
}

.ant-switch .ant-switch-inner .ant-switch-inner-checked {
  margin-inline-start: calc(-100% + 22px - 56px);
  margin-inline-end: calc(100% - 22px + 56px);
}

.ant-tree .ant-tree-switcher,
.ant-tree .ant-tree-checkbox {
  margin-inline-end: 0px;
}

.ant-tree .ant-tree-indent-unit {
  width: 6px;
  line-height: 2.8;
}
.ant-tree .ant-tree-treenode {
  padding: 0 0 4px 4px;
}
.ant-tree .ant-tree-switcher {
  width: 14px;
  line-height: 2.5;
}

.ant-tree .ant-tree-switcher:before {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

.ant-tree .ant-tree-switcher.ant-tree-switcher-noop::before {
  background: url(../../static/media/i-doc.37df2878072736110d55.svg) no-repeat center;
}

.ant-tree .ant-tree-treenode-selected .ant-tree-switcher.ant-tree-switcher-noop::before {
  background: url(../../static/media/i-docW.44513e5a7d9a22983b35.svg) no-repeat center;
}
.ant-tree .ant-tree-treenode-selected svg {
  fill: #fff;
}

.ant-tree .ant-tree-treenode {
  line-height: 36px;
  color: #0e0e1f;
  font-weight: 400;
}

.ant-btn-variant-text:not(:disabled):not(.ant-btn-disabled):hover,
.ant-tree .ant-tree-switcher:not(.ant-tree-switcher-noop):hover:before {
  background-color: transparent;
}

.ant-tree .ant-tree-switcher .ant-tree-switcher-icon {
  font-size: 14px;
}

.ant-tree .ant-tree-node-content-wrapper .ant-tree-iconEle {
  display: none;
}

.ant-tree-treenode-selected,
.ant-tree-treenode-selected:hover,
.ant-tree.ant-tree-directory .ant-tree-treenode-selected .ant-tree-node-content-wrapper:before,
.ant-tree.ant-tree-directory .ant-tree-treenode-selected .ant-tree-node-content-wrapper:hover:before {
  background: linear-gradient(90deg, #ca79fc 0%, #ff5eb6 100%);
  color: #fff;
  font-weight: 500;
}
.ant-tree-treenode-selected span,
.ant-tree-treenode-selected:hover span,
.ant-tree.ant-tree-directory .ant-tree-treenode-selected .ant-tree-node-content-wrapper:before span,
.ant-tree.ant-tree-directory .ant-tree-treenode-selected .ant-tree-node-content-wrapper:hover:before span {
  color: #fff;
}
.ant-tree-treenode-selected span svg,
.ant-tree-treenode-selected:hover span svg,
.ant-tree.ant-tree-directory .ant-tree-treenode-selected .ant-tree-node-content-wrapper:before span svg,
.ant-tree.ant-tree-directory .ant-tree-treenode-selected .ant-tree-node-content-wrapper:hover:before span svg {
  fill: #fff;
}

.ant-tree .ant-tree-treenode:before {
  display: none;
}

.ant-tree .ant-tree-treenode {
  margin-bottom: 0;
}

.ant-tree.ant-tree-directory .ant-tree-treenode-selected .ant-tree-node-content-wrapper:hover {
  color: #fff;
}

.ant-tree .ant-tree-node-content-wrapper {
  height: 34px;
  line-height: 2.5;
}
.ant-tree .ant-tree-node-content-wrapper:hover {
  background-color: transparent;
}

.ant-tree .ant-tree-treenode:not(.ant-tree-treenode-disabled) .ant-tree-node-content-wrapper:hover {
  color: #0e0e1f;
  background-color: transparent;
}

.ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected {
  background-color: transparent !important;
  color: #fff !important;
}
.ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected.ant-tree-treenode svg {
  fill: #fff;
}

.ant-tree .ant-tree-node-content-wrapper {
  padding-inline: 4px;
}
/* .ant-input-outlined:hover, */
.ant-input-outlined:focus,
.ant-input-outlined:focus-within {
  border-color: #c718e2;
  background-color: #ffffff;
  box-shadow: none;
  /* font-size: 13px; */
}

textarea.ant-input-outlined:focus + button {
  background-image: linear-gradient(90deg, #b041f3 0%, #ec15ff 100%) !important;
  color: #fff;
}

input:-internal-autofill-selected.ant-input-outlined,
input:-internal-autofill-selected {
  background-color: #fff !important;
}

.ant-tree .ant-tree-treenode {
  align-items: center;
}

.ant-btn-variant-outlined:not(:disabled):not(.ant-btn-disabled):active,
.ant-btn-variant-dashed:not(:disabled):not(.ant-btn-disabled):active {
  color: #fff;
  border-color: #e94cf7;
  background: #ffffff;
}

.comment-system .ant-list-items {
  display: flex;
  flex-direction: column;
  justify-content: start;
  gap: 0;
}

.repleBox .ant-comment-nested div {
  display: flex;
  flex-direction: column;
  justify-content: start;
  /* gap: 4px; */
}
.repleBox .ant-comment .comment-date {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 16px;
}

.aui-grid-content-panel-mask:has(+ .aui-grid-left-main-panel) .aui-grid .aui-grid-default-header:first-child {
  border-radius: 0 8px 8px 0 !important;
}

.aui-grid .aui-grid-table tr:has(.first-rank),
.aui-grid .aui-grid-table tr:has(.second-rank),
.aui-grid .aui-grid-table tr:has(.third-rank) {
  background: #fdf2ff;
}

/*scroll*/
.ant-layout,
.ant-layout * {
  box-sizing: border-box;
}
.aui-scroll-track,
.aui-vscrollbar {
  /* width: 8px !important; */
}
.aui-scroll-track {
  background: transparent !important;
  border: 0 !important;
}

.aui-vscrollbar .aui-scroll-thumb {
  border: 0;
  /* top: 0 !important;
  bottom: 0 !important; */
  right: 2px !important;
  left: auto !important;
  width: 6px !important;
  margin-top: -14px;
}
.aui-vscrollbar .aui-scroll-up,
.aui-vscrollbar .aui-scroll-down {
  display: none !important;
}
.artistInfoVideo__thum {
  background-color: #3e3d53;
}

.modalFan #musicWrapper .rsWrapper {
  width: 100%;
}

main .btnArea {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
}
.btnArea {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
}
.btnArea button {
  height: 100%;
}

#inquiryDetail .profileToggle img {
    max-width: 14px;
    max-height: 14px;
    cursor: pointer;
}
.toastui-editor-defaultUI,
.toastui-editor-contents,
.toastui-editor-md-container .toastui-editor-md-preview,
.ProseMirror,
.toast-ui-viewer,
.toast-ui-content,
.ant-empty,
.ant-collapse,
.ant-typography,
.ant-tree,
.ant-popover,
.ant-collapse > .ant-collapse-item > .ant-collapse-header,
.ant-tooltip,
.sun-editor-editable,
.ant-layout,
.ant-menu,
.ant-tree,
.ant-select,
.ant-card,
[class^='ant-modal'],
.ant-collapse-item,
.ant-checkbox-wrapper,
.ant-radio-wrapper .ant-radio,
.ant-input-number .ant-input-number-input,
.ant-input-number,
.ant-upload-wrapper,
.ant-radio-wrapper,
.ant-form-item,
.ant-row,
.ant-radio-group,
.ant-layout,
.ant-layout-sider,
.ant-form,
.ant-btn,
.ant-dropdown,
.ant-dropdown-menu-submenu,
[class^='ant-image'],
[class*=' ant-image'],
.ant-list,
.ant-comment,
.ant-input,
.ant-affix,
.ant-col {
  font-family:
    'Pretendard Variable',
    Pretendard,
    'Noto Sans KR',
    'Malgun Gothic',
    -apple-system,
    BlinkMacSystemFont,
    system-ui,
    Roboto,
    'Helvetica Neue',
    'Segoe UI',
    'Apple SD Gothic Neo',
    'Apple Color Emoji',
    'Segoe UI Emoji',
    'Segoe UI Symbol',
    sans-serif;
}
.ant-modal-confirm .anticon + .ant-modal-confirm-paragraph {
  max-width: calc(100% - 34px);
  min-height: 37px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ant-input-number-outlined {
  border-width: 0;
  background: transparent;
}
.ant-input-number-outlined input {
  text-align: right;
}

.ant-input-number-outlined:focus,
.ant-input-number-outlined:focus-within {
  box-shadow: inset 0 0 0 200px rgba(0, 0, 0, 0.2);
  border-color: transparent;
  outline: rgba(255, 94, 182, 0.7);
}

.noResult * {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  color: #a3a1a7;
  text-align: center;
  margin-top: 0px;
  background: transparent url(../../static/media/help_icon.3cf2ace192c8101fc232.svg) no-repeat left center/24px;
  padding: 10px 0 10px 32px;
  min-height: 80px;
}

.ant-input-affix-wrapper::before {
  display: none;
}

.none {
  display: none !important;
}
.box16 {
  border-radius: 16px;
  overflow: hidden;
}
.custom-checkbox .ant-checkbox-inner {
  border-color: #d9d9d9;
  background: rgba(0, 0, 0, 0.04);
}

.custom-checkbox .ant-checkbox-input {
  cursor: not-allowed;
}

@media (max-width: 1280px) {
  #musicWrapper .rsWrapper > div:first-child {
    flex-direction: row;
  }
  #myPage #myProfile .rsWrapper {
    padding: 0;
  }
  #myPage #myProfile .rsWrapper .btnBox {
    padding-bottom: 40px;
  }
  .profileSection .ant-form {
    width: 100%;
    padding: 0 20px 20px;
  }
}

@media (max-width: 1100px) {
  #mypage .notice-area {
    width: 100%;
  }
  #mypage .rsWrapper {
    padding: 0;
    width: 100%;
  }
  #mypage .rsWrapper .aui-grid {
    width: 100% !important;
  }
}
@media (max-width: 900px) {
  #builder div .content {
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: start;
  }
  #builder div .content .builderGuide h1 {
    font-size: 36px;
  }
  #builder div .content .builderGuide h2 {
    font-size: 20px;
  }
  #builder div .content .builderGuide p img {
    width: 100%;
  }
  #builder div .content:has(.builderGuide) .mobileTab {
    display: none;
  }
  #builder div .content .layout .ant-layout .ant-layout-has-sider {
    padding: 28px 0 0 !important;
    border: 0;
  }
  .myMarketplacesSection #otherWrapper #listWrapper .rsWrapper > div .listBox .staffBox,
  #otherWrapper .rsWrapper > div .content .listBox .list {
    width: calc(50% - 0px);
    margin: 0px 10px 4px 0;
  }
  .myMarketplacesSection #otherWrapper #listWrapper .rsWrapper > div .listBox .staffBox,
  #otherWrapper .rsWrapper > div .content .listBox .staffBox :nth-child(2n) {
    margin-right: 0;
  }
}
@media (max-width: 800px) {
  #musicBox.player {
    height: 100vh;
  }
  #musicBox .listBox {
    height: inherit;
  }

  #mainSlider .slick-dots {
    bottom: 12px;
  }
  #myProfile .myInfo .info .ant-image,
  .profileBox .ant-image {
    border-radius: 8px;
  }
}
@media (max-width: 700px) {
  .badge_s {
    padding: 1px 3px;
    height: 23px !important;
    /* min-width: 43px; */
    font-size: 10px;
    line-height: 0.5;
  }
  #root:has(section.userPage) + div .ant-btn-default.btn-dark,
  .ant-modal-root .ant-btn-default.btn-dark,
  .userPage .ant-btn-default.btn-dark {
    font-size: 14px;
    height: 32px;
    min-width: 72px;
    font-weight: 500;
  }
  .profileSection .ant-form {
    width: 100%;
    padding: 0;
    gap: 0;
  }
  #myHome .filter {
    border: none;
  }
  #myHome .filter .rsWrapper .listBox .title img {
    margin: 0;
  }
  #builder > div .tab {
    padding: 0;
    border-bottom: none;
    justify-content: flex-start;
  }
  #otherWrapper > div .tab {
    justify-content: flex-start;
    border: none;
  }
  #builder div .content .builderGuide .tab {
    padding: 0 0 16px;
  }

  #otherWrapper > div .tab button {
    padding: 12px;
    width: auto !important;
    min-width: 80px;
    height: 32px !important;
  }
  .form .info-area .content .box.third .half input {
    /* height: 32px; */
  }
  /* .ant-form-item .ant-form-item-control-input {
    min-height: auto;
  } */
  .comment-system {
    gap: 0px !important;
  }
  .comment-system h2 {
    display: none !important;
  }
  .comment-system .repleWriteArea * {
    /* min-height: 72px; */
  }
  .comment-system .repleBox > .ant-comment {
    /* border-radius: 20px 20px 16px 20px !important;
    gap: 10px !important;
    padding: 10px !important; */
  }
  .ant-comment .ant-comment-inner {
    padding-block: 0;
  }
  #board-detail .board-detail-wrapper .comment-system .repleBox .ant-comment .ant-comment-inner {
    gap: 8px;
  }
  #board-detail .repleBox .ant-comment-avatar .ant-avatar,
  #board-detail .repleBox .ant-comment-avatar .ant-avatar img {
    width: 32px;
    height: 32px;
  }
  #builder div .content .builderGuide h1 {
    font-size: 24px;
    margin-bottom: 60px;
  }
  #builder div .content .builderGuide h2 {
    font-size: 16px;
  }
  #builder div .content .builderGuide p img {
    width: 100%;
  }
  #builder div .content:has(.builderGuide) .mobileTab {
    display: none;
  }
  .ranking_s {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    font-size: 16px;
    font-weight: 600;
    padding: 0;
    gap: 12px;
    cursor: pointer;
    font-size: 14px;
    /* font-size: 12px; */
    min-width: 100px;
    /* gap: 4px; */
    /* min-width: 34px; */
    height: 18px;
  }
  .ranking_s::after {
    background: url(../../static/media/btn-downB.aaa6da97ce5db46ccad4.svg) no-repeat center;
    width: 20px;
    height: 20px;
    content: '';
  }
  .ranking_s::after {
    background: url(../../static/media/btn-downB.aaa6da97ce5db46ccad4.svg) no-repeat center;
    width: 16px;
    height: 16px;
    content: '';
  }
  .ranking_s.music::before {
    background: url(../../static/media/i-rankMusic.0f18c7751f4596b48980.svg) no-repeat center/14px;
    width: 14px;
    height: 14px;
    content: '';
  }
  .ranking_s.image::before {
    background: url(../../static/media/i-rankImage.9cc1309c8a9610421c7d.svg) no-repeat center/14px;
    width: 14px;
    height: 14px;
    content: '';
  }
  .ranking_s.video::before {
    background: url(../../static/media/i-rankVideo.74deeeedb4f3f9f90383.svg) no-repeat center/14px;
    width: 14px;
    height: 14px;
    content: '';
  }
  .ranking_s.text::before {
    background: url(../../static/media/i-rankText.6b4e3c4b7779f8a632a6.svg) no-repeat center/14px;
    width: 14px;
    height: 14px;
    content: '';
  }
  .ranking_s::after {
    background: url(../../static/media/btn-downB.aaa6da97ce5db46ccad4.svg) no-repeat center 0/14px;
    width: 14px;
    height: 14px;
    content: '';
    background-size: 12px;
  }
  .myMarketplacesSection #prompt {
    padding: 0 16px;
  }
  .myMarketplacesSection #prompt #otherWrapper {
    padding: 0;
  }
  .myMarketplacesSection #prompt #otherWrapper > div .tab {
    /* border-bottom: solid 2px #000; */
    padding: 0 0;
  }
  .myMarketplacesSection #prompt #otherWrapper .rsWrapper {
    padding: 0;
  }
  .myMarketplacesSection #prompt #otherWrapper .rsWrapper > div.listBox .staffBox {
    width: calc(50% - 2px);
    margin: 0 4px 4px 0;
  }
  .myMarketplacesSection #prompt #otherWrapper .rsWrapper > div.listBox .staffBox:nth-child(2n) {
    margin-right: 0;
  }
  .myMarketplacesSection #prompt #otherWrapper .rsWrapper > div.listBox .staffBox.top {
    padding: 30px 0;
    height: 127px;
  }
  #builder > div .tab #pinkBtn2 {
    height: 32px;
    min-width: 80px;
    width: auto;
  }
  #promptSales .titleBox {
    /* margin-top: -24px;
    padding: 0; */
  }
  .affixBox .ant-select .ant-select-arrow {
    margin-top: -13px;
  }
  .ant-select-outlined:not(.ant-select-customize-input) .ant-select-selector {
    width: 100%;
  }
  .ant-select .ant-select-arrow {
    /* margin-top: -16px; */
    width: 24px;
    height: 24px;
    right: 6px;
  }
  .button-group {
    display: flex;
    flex-direction: row;
    gap: 16px;
    justify-content: center;
    padding: 0;
  }
  .button-group button,
  .button-group .ant-btn-default.btn-dark {
    height: 40px;
    width: 100%;
    margin-top: 0;
  }
  #board-detail .board-detail-wrapper .comment-system .ant-comment .repleWriteArea textarea {
    padding: 8px 12px;
    font-size: 13px;
  }
  .userPage .ant-btn-default.btn-gray2 {
    min-width: 72px;
  }
  #board-detail .board-detail-wrapper .comment-system .repleBox .ant-comment .ant-comment-inner .ant-comment-content .ant-comment-content-author-name .box .btnArea {
    padding: 0;
    gap: 0;
  }
  #board-detail .board-detail-wrapper .comment-system .ant-comment-nested .repleBox .ant-comment .ant-comment-inner .ant-comment-content {
    padding: 0 !important;
  }
  #board-detail .board-detail-wrapper .comment-system .ant-comment-nested .repleBox > .ant-comment .repleBox .ant-comment {
    padding: 0 !important;
  }
  .ant-modal-root .ant-modal-footer {
    padding: 16px 16px 24px;
  }
  .artistModal .ant-modal-footer button,
  .ant-modal-root .p20 .ant-modal-footer button {
    width: 100%;
  }
  .ant-modal-root .p20 .ant-modal-body .term {
    padding: 16px 0;
  }
  .cautionBlue {
    padding: 0px;
  }
  .ant-divider-horizontal.ant-divider-with-text {
    padding: 0px;
  }
  .mypageSection .ant-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 30px;
  }
  .btnArea {
    gap: 8px;
  }
  .slick-dots li button:before {
    font-size: 5px;
  }
  #myHome > .top > .rsWrapper > .profile {
    padding: 20px;
  }

  input::placeholder {
    font-size: 14px !important;
  }
  #root:has(section.userPage) + div .ant-modal-confirm .ant-modal-confirm-body > .anticon,
  .ant-modal-root .ant-modal-confirm .ant-modal-confirm-body > .anticon,
  .userPage .ant-modal-confirm .ant-modal-confirm-body > .anticon {
    font-size: 32px;
  }
  .ant-modal-confirm .ant-modal-confirm-content {
    margin-right: 6px;
  }
}

#alram {
    width: 100%;
    height: 80vh;
    padding: 25px 0 40px;

    .rsWrapper {
        height: 100%;

        .list {
            width: 373px;
            height: 100%;
            border-radius: 8px;
            border: 1px solid rgba(0, 0, 0, 0.1);
            background-color: #f3f3f3;
            overflow: hidden;
            justify-content: flex-start;

            .top {
                height: 52px;
                background: #ffffff;
                color: #000000;
                font-size: 16px;
            }

            .box {
                padding: 8px 12px 8px 24px;
                border-bottom: 1px solid #eae8ec;
                transition: all 0.2s ease-in-out;
                cursor: pointer;

                &:hover {
                    background: #ffffff;
                }

                &#active {
                    background: #ffffff;
                }

                &#new {
                    background: #fdf2ff;
                }

                >div:first-child {
                    width: auto;
                    position: relative;

                    img {
                        width: 40px;
                        height: 40px;
                        border-radius: 100%;
                    }

                    .round {
                        border: 2px solid #ffffff;
                        background: #e94cf7;
                        width: 10px;
                        height: 10px;
                        border-radius: 100%;
                        position: absolute;
                        bottom: 0;
                        right: 0;
                    }
                }

                >div {
                    width: calc(100% - 40px - 20px);
                    margin: 0 12px;

                    >div:first-child {
                        margin-bottom: 4px;
                    }

                    h1 {
                        font-size: 16px;
                        font-weight: 600;
                        color: #0e0e1f;
                    }

                    h2 {
                        color: #656262;
                        font-size: 12px;
                    }

                    p {
                        font-size: 11px;
                        color: #a3a1a7;
                        font-weight: 500;
                    }

                    .count {
                        width: 26px;
                        background: #f34144;
                        border-radius: 100px;
                        padding: 4px;
                        font-size: 12px;
                        font-weight: 600;
                        color: #ffffff;
                    }
                }
            }
        }

        .content {
            width: calc(100% - 373px);
            padding: 0 0 0 28px;
            height: 100%;
            justify-content: flex-start;

            .top {
                padding: 24px 0;

                .svgBox {
                    width: auto;
                    margin-right: 20px;
                }

                h1 {
                    font-size: 24px;
                    font-weight: 700;
                    color: #0e0e1f;
                }
            }

            .date {
                margin: 8px 0 16px;

                p {
                    color: #a3a1a7;
                    font-size: 14px;
                    font-weight: 600;

                    &:first-child {
                        margin-right: 10px;
                    }
                }
            }

            .box {
                align-items: flex-start;

                .icon {
                    width: 40px;
                    height: 40px;
                    border-radius: 100%;
                    background: linear-gradient(to bottom, #13d5df 0%, #f138fc 100%);
                }

                div:not(.icon) {
                    width: calc(100% - 40px);
                    padding: 0 0 0 24px;

                    p {
                        color: #000000;
                        font-size: 14px;
                        font-weight: 600;
                        line-height: 1.5;
                    }
                }
            }
        }
    }

}

@media (max-width: 700px) {
    #alram {
        padding: 0;

        .rsWrapper {
            padding: 0;

            .top,
            .content {
                display: none;
            }

            .list {
                background: #ffffff;
                border: none;
                border-radius: 0;
                border-top: 1px solid #eae8ec;
                width: 100%;
            }
        }
    }
}
#seller .tab {
  padding: 0 0 16px;
  border-bottom: solid 2px #000;
  margin: 0 0 58px;
}

#seller .tab #pinkBtn2 {
  width: 150px;
  height: 41px;
  border-radius: 24px;
  font-size: 14px;
  margin: 0 2px;
}

#seller .tab #pinkBtn2.active {
  background: linear-gradient(to right, #ca79fc 0%, #ff5eb6 100%);
  color: #ffffff;
  border: 1px solid transparent;
}

#seller .rsWrapper .title {
  margin: 0 0 60px;
}
#seller .rsWrapper .title p {
  font-size: 20px;
  font-weight: 600;
  color: #000000;
}
#seller .rsWrapper .title p span {
  border-bottom: 2px solid #000000;
}
#seller .rsWrapper :where(.css-dev-only-do-not-override-apn68).ant-checkbox .ant-checkbox-inner {
  width: 20px;
  height: 20px;
}

#seller .rsWrapper :where(.css-dev-only-do-not-override-apn68).ant-radio-wrapper span.ant-radio + * {
  padding: 0 10px;
}

#seller .rsWrapper .titleBox {
  margin: 0 0 30px;
}

#seller .rsWrapper .titleBox .title {
  width: 220px;
}

#seller .rsWrapper .titleBox .title svg,
#seller .rsWrapper .titleBox .title img {
  width: 24px;
  margin: 0 15px 0 0;
}

#seller .rsWrapper .titleBox .title h1 {
  font-size: 24px;
  font-weight: 600;
  color: #3e3d53;
}

#seller .rsWrapper .titleBox .line {
  width: calc((100% - 140px) / 2);
  /* border: 1px dashed #e6e6e6; */
  height: 1px;
}

#seller .rsWrapper .aiInfo,
#seller .rsWrapper .accountBox,
#seller .rsWrapper .aiBox,
#seller .rsWrapper .tagBox,
#seller .rsWrapper .infoBox,
#seller .rsWrapper .sellerBox,
#seller .rsWrapper .ai,
#seller .rsWrapper .type {
  align-items: flex-start;
  padding: 30px 0;
}

#seller .rsWrapper .aiInfo .title,
#seller .rsWrapper .accountBox .title,
#seller .rsWrapper .aiBox .title,
#seller .rsWrapper .tagBox .title,
#seller .rsWrapper .infoBox .title,
#seller .rsWrapper .sellerBox .title,
#seller .rsWrapper .ai .title,
#seller .rsWrapper .type .title {
  width: 180px;
  flex-wrap: wrap;
}

#seller .rsWrapper .aiInfo .content > div > img,
#seller .rsWrapper .infoBox .content .box .info > div > img,
#seller .rsWrapper .sellerBox .content .box .info > div > img {
  width: 12px;
  margin: 0 0 9px 14px;
}

#seller .rsWrapper .type .title svg,
#seller .rsWrapper .aiInfo .title img,
#seller .rsWrapper .accountBox .title svg,
#seller .rsWrapper .aiBox .title svg,
#seller .rsWrapper .tagBox .title img,
#seller .rsWrapper .infoBox .title img,
#seller .rsWrapper .sellerBox .title svg,
#seller .rsWrapper .ai .title div img,
#seller .rsWrapper .type .title img {
  width: 20px;
  margin: 0 14px 0 0;
}

#seller .rsWrapper .ai .title div img:last-child {
  width: 12px;
}

#seller .rsWrapper .aiInfo .title h1,
#seller .rsWrapper .accountBox .title h1,
#seller .rsWrapper .aiBox .title h1,
#seller .rsWrapper .tagBox .title h1,
#seller .rsWrapper .infoBox .title h1,
#seller .rsWrapper .sellerBox .title div h1,
#seller .rsWrapper .ai .title div h1,
#seller .rsWrapper .type .title h1 {
  font-size: 16px;
  font-weight: 600;
  color: #3e3d53;
}

#seller .rsWrapper .ai .title div h1 {
  margin: 0 10px 0 0;
}

#seller .rsWrapper .aiInfo .title #darkGrey,
#seller .rsWrapper .ai .title #darkGrey {
  width: 132px;
  height: 40px;
  border-radius: 4px;
  font-size: 14px;
  margin: 12.5px 0 0;
}

#seller .rsWrapper .aiInfo .content,
#seller .rsWrapper .accountBox .content,
#seller .rsWrapper .aiBox .content,
#seller .rsWrapper .tagBox .content,
#seller .rsWrapper .infoBox .content,
#seller .rsWrapper .sellerBox .content,
#seller .rsWrapper .ai .content,
#seller .rsWrapper .type .content {
  width: calc(100% - 180px);
  flex-wrap: wrap;
}

#seller .rsWrapper .aiInfo .content .box,
#seller .rsWrapper .accountBox .content .box,
#seller .rsWrapper .aiBox .content .box,
#seller .rsWrapper .tagBox .content .box,
#seller .rsWrapper .infoBox .content .box,
#seller .rsWrapper .sellerBox .content .box,
#seller .rsWrapper .ai .content .box,
#seller .rsWrapper .type .content .box {
  margin: 0 0 24px;
  align-items: flex-start;
}

#seller .rsWrapper .aiInfo .content .box .info,
#seller .rsWrapper .accountBox .content .box .info,
#seller .rsWrapper .aiBox .content .box .info,
#seller .rsWrapper .tagBox .content .box .info,
#seller .rsWrapper .infoBox .content .box .info,
#seller .rsWrapper .sellerBox .content .box .info,
#seller .rsWrapper .ai .content .box .info,
#seller .rsWrapper .type .content .box .info {
  margin: 0 0 25px;
}

#seller .rsWrapper .type .content .box .info > div {
  height: 40px;
}

#seller .rsWrapper .aiInfo .content .box .info:last-child,
#seller .rsWrapper .accountBox .content .box .info:last-child,
#seller .rsWrapper .aiBox .content .box .info:last-child,
#seller .rsWrapper .tagBox .content .box .info:last-child,
#seller .rsWrapper .infoBox .content .box .info:last-child,
#seller .rsWrapper .sellerBox .content .box .info:last-child,
#seller .rsWrapper .ai .content .box .info:last-child,
#seller .rsWrapper .type .content .box .info:last-child {
  margin: 0;
}

#seller .rsWrapper .aiInfo .content > div > h1,
#seller .rsWrapper .aiInfo .content .box .info h1,
#seller .rsWrapper .accountBox .content .box .info h1,
#seller .rsWrapper .aiBox .content .box .info h1,
#seller .rsWrapper .tagBox .content .box .info h1,
#seller .rsWrapper .infoBox .content .box .info h1,
#seller .rsWrapper .sellerBox .content .box .info h1,
#seller .rsWrapper .ai .content .box .info h1,
#seller .rsWrapper .type .content .box .info h1 {
  font-size: 12px;
  color: #464548;
  margin: 0 0 9px;
}

#seller .rsWrapper .aiBox .content .box textarea,
#seller .rsWrapper .aiBox .content .box .info input,
#seller .rsWrapper .tagBox .content .box .info input,
#seller .rsWrapper .infoBox .content .box .info input,
#seller .rsWrapper .infoBox .content .box .info textarea,
#seller .rsWrapper .sellerBox .content .box .info textarea,
#seller .rsWrapper .sellerBox .content .box .info input,
#seller .rsWrapper .sellerBox .content .box .info > div input,
#seller .rsWrapper .ai .content .box .info > div input,
#seller .rsWrapper .type .content .box .info > div .input {
  width: 200px;
  height: 40px;
  border: 1px solid #e2dfe4;
  background: #f7f7f8;
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 13px;
  outline: none;
}

#seller .rsWrapper .aiBox .content .box textarea::placeholder,
#seller .rsWrapper .aiBox .content .box .info input::placeholder,
#seller .rsWrapper .tagBox .content .box .info::placeholder,
#seller .rsWrapper .infoBox .content .box .info input::placeholder,
#seller .rsWrapper .infoBox .content .box .info textarea::placeholder,
#seller .rsWrapper .sellerBox .content .box .info textarea::placeholder,
#seller .rsWrapper .sellerBox .content .box .info input::placeholder,
#seller .rsWrapper .sellerBox .content .box .info > div input::placeholder,
#seller .rsWrapper .ai .content .box .info > div input::placeholder,
#seller .rsWrapper .type .content .box .info > div .input::placeholder {
  font-size: 13px;
  color: #a3a1a7;
}

#seller .rsWrapper .aiBox .content .box textarea:focus,
#seller .rsWrapper .aiBox .content .box .info input:focus,
#seller .rsWrapper .tagBox .content .box .info:focus,
#seller .rsWrapper .infoBox .content .box .info input:focus,
#seller .rsWrapper .infoBox .content .box .info textarea:focus,
#seller .rsWrapper .sellerBox .content .box .info textarea:focus,
#seller .rsWrapper .sellerBox .content .box .info input:focus,
#seller .rsWrapper .sellerBox .content .box .info > div input:focus,
#seller .rsWrapper .ai .content .box .info > div input:focus,
#seller .rsWrapper .type .content .box .info > div .input:focus {
  background: #ffffff;
  border: 1px solid #b041f3;
}

#seller .rsWrapper .sellerBox .content .box .info > .bottom {
  width: calc(100% / 3 - 27px);
}

#seller .rsWrapper .sellerBox .content .box .info > div input,
#seller .rsWrapper .sellerBox .content .box .info > div .ant-select {
  width: calc(50% - 6px);
  height: 40px;
}

#seller .rsWrapper .ai .content .box .info > div {
  width: calc(100% / 3 - 27px);
}

#seller .rsWrapper .infoBox .content .box .info input,
#seller .rsWrapper .infoBox .content .box .info textarea,
#seller .rsWrapper .sellerBox .content .box .info textarea,
#seller .rsWrapper .sellerBox .content .box .info input,
#seller .rsWrapper .ai .content .box .info > div input {
  width: 100%;
}

#seller .rsWrapper .ai .content .box .info > div .ant-select {
  width: 100%;
  height: 40px;
}

#seller .rsWrapper .sellerBox .content .box .info > div .ant-select-selector,
#seller .rsWrapper .ai .content .box .info > div .ant-select-selector {
  border: 1px solid #e2dfe4;
  background: #f7f7f8;
}

#seller .rsWrapper .sellerBox .content .box .info > .greenBox {
  width: 100%;
  padding: 24px;
  border-radius: 4px;
  border: 1px solid #dbdbe0;
  background: #eff8f9;
}

#seller .rsWrapper .sellerBox .content .box .info > .greenBox #darkGrey {
  width: auto;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 14px;
  margin: 0 16px 0 0;
}

#seller .rsWrapper .sellerBox .content .box .info > .greenBox > div > img {
  width: 21px;
  margin: 0 0 0 16px;
}

#seller .rsWrapper .sellerBox .content .box .info > .greenBox > h1 {
  font-size: 12px;
  color: #464548;
  margin: 25px 0;
}

#seller .rsWrapper .sellerBox .content .box .info > .greenBox > p {
  font-size: 13px;
  color: #000000;
  font-weight: 500;
}

#seller .rsWrapper .infoBox .content .box .info:last-child textarea,
#seller .rsWrapper .sellerBox .content .box .info textarea {
  height: 72px;
  resize: none;
}

#seller .rsWrapper .infoBox .content .box .info textarea {
  height: 204px;
  resize: none;
  white-space: pre-wrap;
}

#seller .rsWrapper .tagBox .content .box .info > p {
  font-size: 12px;
  color: #0d88d4;
  margin: 0 0 9px;
}

#seller .rsWrapper .tagBox .content .box .info div .tag {
  width: auto;
  padding: 8px 10px;
  border: 1px solid #cccccc;
  border-radius: 50px;
  margin: 0 12px 0 0;
}

#seller .rsWrapper .tagBox .content .box .info div .tag > p {
  font-size: 13px;
  color: #0e0e1f;
  font-weight: 600;
  margin: 0 15px 0 0;
}

#seller .rsWrapper .tagBox .content .box .info div .tag > img {
  width: 8px;
}

#seller .rsWrapper .tagBox .content .box .info input {
  margin: 0 12px 0 0;
}

#seller .rsWrapper .accountBox .content .box .info .plusBox,
#seller .rsWrapper .aiBox .content .box .info .plusBox {
  width: 180px;
  height: 180px;
  border-radius: 4px;
  padding: 8px 16px;
  border: 1px dashed #e21dfd;
  background: #fcf7fd;
  cursor: pointer;
}

#seller .rsWrapper .accountBox .content .box .info .plusBox {
  width: 300px;
  margin: 0 40px 0 0;
}

#seller .rsWrapper .accountBox .content .box .info .plusBox .plus,
#seller .rsWrapper .aiBox .content .box .info .plus {
  background: #f0dbf4;
  border-radius: 100%;
  width: 40px;
  height: 40px;
  color: #c49bcc;
  margin: 0 0 8px;
}

#seller .rsWrapper .accountBox .content .box .info .plusBox > p,
#seller .rsWrapper .aiBox .content .box .info .plusBox > p {
  color: #c49bcc;
  text-align: center;
  line-height: 1.2;
  font-size: 12px;
}

#seller .rsWrapper .accountBox .content .box .info .plusBox p {
  font-size: 16px;
}

#seller .rsWrapper .accountBox .content .box .info .plusBox:hover .plus,
#seller .rsWrapper .aiBox .content .box .info .plusBox:hover .plus {
  background: #c49bcc;
  color: #f0dbf4;
}

#seller .rsWrapper .aiBox .content .box textarea {
  height: 173px;
  width: 100%;
  resize: none;
}

#seller .rsWrapper .accountBox .content .box .info .account {
  width: 300px;
  height: 180px;
  padding: 20px 16px;
  border-radius: 16px;
  box-shadow: 1px 2px 8px 0 rgba(0, 0, 0, 0.25);
  border: solid 1px rgba(226, 29, 253, 0.2);
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), linear-gradient(to bottom, #848ff5, #b369ba);
}

#seller .rsWrapper .accountBox .content .box .info .account h1 {
  font-size: 16px;
  color: #0e0e1f;
  margin: 0 0 10px;
}

#seller .rsWrapper .accountBox .content .box .info .account p {
  font-size: 14px;
  color: #403748;
  margin: 0 0 34px;
}

#seller .rsWrapper .accountBox .content .box .info .account #pinkBtn {
  width: 180px;
  height: 40px;
  border-radius: 24px;
  font-size: 14px;
  font-weight: 700;
}

#seller .rsWrapper > p {
  color: #f34144;
  font-size: 14px;
  margin: 0 0 80px;
  font-weight: 600;
}

#seller .rsWrapper .btnBox #purpleBtn,
#seller .rsWrapper .btnBox #darkGrey,
#seller .rsWrapper .btnBox #logoutBtn {
  width: 120px;
  height: 40px;
  margin: 0 8px;
  border-radius: 4px;
  font-size: 14px;
}

#seller .aiInfo .content .ant-checkbox,
#seller .aiInfo .content .ant-checkbox .ant-checkbox-inner {
  width: 20px;
  height: 20px;
}

#seller .aiInfo .content .ant-checkbox + span img {
  width: 21px;
  margin: 0 0 -6px;
}

#seller .aiInfo .content > p {
  font-size: 12px;
  color: #464548;
  margin: 0 0 10px;
}

#seller .aiInfo .content p span {
  color: #0d88d4;
  margin: 0 0 0 12px;
}

#seller .aiInfo .content .tabBox .tab {
  width: auto;
  padding: 8px 12px;
  border: 1px solid #cccccc;
  font-size: 13px;
  color: #0e0e1f;
  font-weight: 600;
  border-radius: 20px;
  margin: 0 12px 0 0;
}

#seller .rsWrapper .aiBox .content .box .info #darkGrey {
  width: 93px;
  height: 30px;
  border-radius: 4px;
  font-size: 12px;
}

#seller .rsWrapper .aiBox .content .box:not(.image) .info > div {
  align-items: flex-end;
}

#seller .rsWrapper .aiBox .content .box .info > div > div > h1 {
  font-weight: 700;
}

#seller .rsWrapper .aiBox .content .box .info > div > div > div:not(.plusBox) {
  align-items: flex-end;
  margin: 0 0 12px;
}

#seller .rsWrapper .aiBox .content .box .info > div > div:first-child > .plusBox {
  width: calc(100% - 40px);
}

#seller .rsWrapper .aiBox .content .box:not(.image) .info > div > div:last-child {
  width: auto;
}

#seller .rsWrapper .aiBox .content .box .info > div > div > div > img {
  width: 18px;
  margin: 0 0 0 15px;
}

/* //////// */
/* //////// */
/* AIMODAL */
/* //////// */
/* //////// */

.aiModal .title {
  margin: 0 0 20px;
}

.aiModal .title h1 {
  font-size: 24px;
  font-weight: 700;
  color: #0e0e1f;
}

.aiModal .title p {
  font-size: 24px;
}

.aiModal .top {
  padding: 12px;
  border-radius: 16px;
  border-bottom: solid 1px rgba(0, 0, 0, 0.1);
  background-color: rgba(0, 0, 0, 0.05);
  align-items: flex-end;
  margin: 0 0 28px;
}

.aiModal .top .box {
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
  border: solid 1px #c2b8cb;
  height: 188px;
  width: calc(100% - 120px - 24px);
  background: #ffffff;
}

.aiModal .top .box .thumb {
  width: 123px;
}

.aiModal .top .box .thumb p {
  font-size: 12px;
  font-weight: 700;
  color: #464548;
  margin: 0 0 13px;
}

.aiModal .top .box .thumb .plusBox {
  width: 100%;
  height: 123px;
  border-radius: 4px;
  background: #f3f3f3;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.aiModal .top .box .thumb .plusBox .plus {
  width: 40px;
  height: 40px;
  border-radius: 100%;
  background: rgba(0, 0, 0, 0.1);
  font-size: 20px;
  color: #ffffff;
}

.aiModal .top .box .thumb .plusBox:hover {
  background: #f0dbf4;
}

.aiModal .top .box > div {
  width: calc(100% - 123px - 20px);
}

.aiModal .top .box > div .infoBox:not(:last-child) {
  width: 100%;
  margin: 0 0 12px;
}

.aiModal .top .box > div .infoBox p {
  font-size: 12px;
  font-weight: 700;
  color: #464548;
}

.aiModal .top .box > div .infoBox .ant-select {
  width: 300px;
  height: 40px;
}

.aiModal .top .box > div .infoBox input {
  height: 40px;
  width: 300px;
  border: 1px solid #e2dfe4;
  background: #f7f7f8;
  outline: none;
  padding: 0 12px;
  border-radius: 4px;
  font-size: 13px;
}

.aiModal .top .box > div .infoBox input::placeholder {
  font-size: 13px;
  color: #a3a1a7;
}

.aiModal .top #pinkBtn {
  width: 120px;
  height: 40px;
  font-size: 14px;
  border-radius: 24px;
}

.aiModal .filter {
  margin: 0 0 16px;
}

.aiModal .filter .ant-select {
  border-radius: 4px;
  width: 120px;
  height: 40px;
}

.aiModal .filter > div {
  width: auto;
}

.aiModal .filter > div input {
  width: 140px;
  height: 40px;
  border: 1px solid #e2dfe4;
  background: #f7f7f8;
  border-radius: 4px;
  padding: 8px 12px;
  outline: none;
  font-size: 13px;
}

.aiModal .filter > div p {
  font-size: 13px;
  margin: 0 12px;
}

.aiModal .filter > div #pinkBtn {
  width: 40px;
  height: 40px;
  margin: 0 0 0 12px;
  font-size: 20px;
  border-radius: 4px;
}

.aiModal .contentTop {
  border-top: 2px solid #000000;
  background: #f3f2fa;
  height: 48px;
}

.aiModal .contentTop div {
  font-size: 14px;
  color: #323146;
  font-weight: 500;
}

.aiModal .scroll {
  max-height: 350px;
  justify-content: flex-start;
  overflow: auto;
}

.aiModal .contentTop div:nth-child(1),
.aiModal .scroll .content div:nth-child(1) {
  width: 180px;
}

.aiModal .contentTop div:nth-child(2),
.aiModal .contentTop div:nth-child(4),
.aiModal .scroll .content div:nth-child(2),
.aiModal .scroll .content div:nth-child(4) {
  width: 120px;
}

.aiModal .scroll .content div:nth-child(4) .tab {
  padding: 4px 8px;
  font-size: 13px;
  color: #ffffff;
  width: auto;
  border-radius: 50px;
  font-weight: 300;
  line-height: 1;
}

.aiModal .scroll .content div:nth-child(4) .tab.success {
  background: #525162;
}

.aiModal .scroll .content div:nth-child(4) .tab.accept {
  background: #0fc9f3;
}

.aiModal .scroll .content div:nth-child(4) .tab.ing {
  background: #f8c930;
}

.aiModal .scroll .content div:nth-child(4) .tab.fail {
  background: #fe393c;
}

.aiModal .contentTop div:nth-child(3),
.aiModal .scroll .content div:nth-child(3) {
  width: 140px;
}

.aiModal .scroll .content div:nth-child(3) img {
  width: 80%;
  border-radius: 4px;
}

.aiModal .contentTop div:nth-child(6),
.aiModal .scroll .content div:nth-child(6) {
  width: 80px;
}

.aiModal .scroll .content div:nth-child(6) img {
  width: 20px;
}

.aiModal .contentTop div:nth-child(5),
.aiModal .scroll .content div:nth-child(5) {
  width: calc(100% - 180px - 120px - 120px - 140px - 80px);
}

.aiModal .scroll .content {
  border-bottom: 1px solid #e2dfe4;
  padding: 8px 0;
}

.aiModal .scroll .content div:nth-child(5) {
  font-size: 16px;
  color: #464548;
}

.aiModal .scroll .content div {
  font-size: 13px;
  color: #000000;
  font-weight: 600;
}

.aiCreateModal .title,
.notiModal .title {
  margin: 0 0 60px;
}

.aiCreateModal .title h1,
.notiModal .title h1 {
  font-size: 24px;
  font-weight: 700;
  color: #0e0e1f;
  margin: 0;
}

.aiCreateModal .title p,
.notiModal .title p {
  font-size: 24px;
}

.notiModal h1 {
  font-size: 20px;
  font-weight: 500;
  color: #000000;
  margin: 0 0 20px;
  text-align: center;
}

.notiModal h1 span {
  color: #c718e2;
}

.notiModal > p {
  font-size: 14px;
  color: #0e0e1f;
  margin: 0 0 38px;
}

.notiModal #purpleBtn {
  width: calc(100% - 80px);
  height: 58px;
  border-radius: 5px;
  font-size: 18px;
}

.aiCreateModal > div > p {
  font-size: 12px;
  color: #0e0e1f;
  margin: 0 0 9px;
}

.aiCreateModal > div:not(:last-child) {
  margin: 0 0 20px;
}

.aiCreateModal > div > input {
  width: 100%;
  border: 1px solid #e2dfe4;
  background: #f7f7f8;
  height: 40px;
  border-radius: 4px;
  font-size: 13px;
  padding: 12px;
}

.aiCreateModal > div > input::placeholder {
  color: #a3a1a7;
  font-size: 13px;
}

.aiCreateModal > div:last-child {
  margin: 80px 0 0;
}

.aiCreateModal > div > #purpleBtn,
.aiCreateModal > div > #logoutBtn {
  width: 100px;
  height: 40px;
  border-radius: 4px;
  margin: 0 5px;
  font-size: 14px;
}

@media (max-width: 1100px) {
  #seller .rsWrapper .aiInfo .title,
  #seller .rsWrapper .accountBox .title,
  #seller .rsWrapper .aiBox .title,
  #seller .rsWrapper .tagBox .title,
  #seller .rsWrapper .infoBox .title,
  #seller .rsWrapper .sellerBox .title,
  #seller .rsWrapper .ai .title,
  #seller .rsWrapper .type .title {
    width: 160px;
  }

  #seller .rsWrapper .aiInfo .content,
  #seller .rsWrapper .accountBox .content,
  #seller .rsWrapper .aiBox .content,
  #seller .rsWrapper .tagBox .content,
  #seller .rsWrapper .infoBox .content,
  #seller .rsWrapper .sellerBox .content,
  #seller .rsWrapper .ai .content,
  #seller .rsWrapper .type .content {
    width: calc(100% - 160px);
  }

  #seller .rsWrapper .type .content .box .info > div .input {
    width: 130px;
  }
}

@media (max-width: 900px) {
  #seller .rsWrapper {
    align-items: flex-start;
  }

  #seller .rsWrapper > p {
    font-size: 11px;
    margin: 0 0 30px;
    line-height: 1.2;
  }

  #seller .rsWrapper .titleBox .title h1 {
    font-size: 20px;
  }

  #seller .rsWrapper .aiInfo,
  #seller .rsWrapper .accountBox,
  #seller .rsWrapper .aiBox,
  #seller .rsWrapper .tagBox,
  #seller .rsWrapper .infoBox,
  #seller .rsWrapper .sellerBox,
  #seller .rsWrapper .ai,
  #seller .rsWrapper .type {
    flex-wrap: wrap;
    border-bottom: 1px solid #dbdbe0;
  }

  #seller .rsWrapper .aiInfo .title,
  #seller .rsWrapper .accountBox .title,
  #seller .rsWrapper .aiBox .title,
  #seller .rsWrapper .tagBox .title,
  #seller .rsWrapper .infoBox .title,
  #seller .rsWrapper .sellerBox .title,
  #seller .rsWrapper .ai .title,
  #seller .rsWrapper .type .title {
    width: 100%;
    margin: 0 0 32px;
  }

  #seller .rsWrapper .aiInfo .content,
  #seller .rsWrapper .accountBox .content,
  #seller .rsWrapper .aiBox .content,
  #seller .rsWrapper .tagBox .content,
  #seller .rsWrapper .infoBox .content,
  #seller .rsWrapper .sellerBox .content,
  #seller .rsWrapper .ai .content,
  #seller .rsWrapper .type .content {
    width: 100%;
  }

  #seller .rsWrapper .aiInfo .content .box .info,
  #seller .rsWrapper .accountBox .content .box .info,
  #seller .rsWrapper .aiBox .content .box .info,
  #seller .rsWrapper .tagBox .content .box .info,
  #seller .rsWrapper .infoBox .content .box .info,
  #seller .rsWrapper .sellerBox .content .box .info,
  #seller .rsWrapper .ai .content .box .info,
  #seller .rsWrapper .type .content .box .info {
    flex-wrap: wrap;
  }

  #seller .rsWrapper .type .content .box .info > div {
    position: relative;
    height: auto;
  }

  #seller .rsWrapper .type .content .box .info > div .input {
    margin: 0 0 14px;
  }

  #seller .rsWrapper .sellerBox .content .box .info > .bottom,
  #seller .rsWrapper .ai .content .box .info > div {
    width: 100%;
  }

  #seller .rsWrapper .ai .content .box .info > div {
    margin: 0 0 30px;
  }

  #seller .rsWrapper .ai .content .box .info > div:last-child {
    margin: 0;
  }

  #seller .aiInfo > #darkGrey,
  #seller .rsWrapper .ai .content .box > #darkGrey {
    width: 100%;
    height: 40px;
    border-radius: 4px;
    font-size: 14px;
  }

  #seller .aiInfo .content p span {
    margin: 0;
  }

  #seller .rsWrapper .tagBox .content .box .info > div:first-child {
    align-items: flex-start;
    margin: 0 0 15px;
  }

  #seller .rsWrapper .tagBox .content .box .info > div:first-child p {
    font-size: 11px;
    color: #0d88d4;
    line-height: 1.2;
  }

  #seller .rsWrapper .tagBox .content .box .info > div {
    flex-wrap: wrap;
  }

  #seller .rsWrapper .tagBox .content .box .info input {
    width: 100%;
    margin: 0 0 15px;
  }

  #seller .rsWrapper .tagBox .content .box .info div .tag {
    margin: 0 12px 12px 0;
  }

  #seller .rsWrapper .aiBox .content .box .info > div {
    flex-wrap: wrap;
  }

  #seller .rsWrapper .aiBox .content .box:not(.image) .info > div > div:last-child,
  #seller .rsWrapper .accountBox .content .box .info .plusBox,
  #seller .rsWrapper .aiBox .content .box:not(.image) .info .plusBox,
  #seller .rsWrapper .aiBox .content .box .info > div > div:first-child > .plusBox,
  #seller .rsWrapper .aiBox .content .box .info > div > div:first-child:not(.plus) {
    width: 100%;
  }

  #seller .rsWrapper .aiBox .content .box:not(.image) .info > div > div:first-child {
    margin: 0 0 30px;
  }

  #seller .rsWrapper .aiBox .content .box .info #darkGrey {
    width: 104px;
    height: 40px;
    font-size: 12px;
  }

  #seller .rsWrapper .aiBox .content .box .info > div > div > div:not(.plusBox) {
    justify-content: space-between;
    align-items: center;
  }

  #seller .rsWrapper .aiBox .content .box .info p {
    font-size: 11px;
    color: #2687e9;
  }

  #seller .rsWrapper .accountBox .content .box .info .account,
  #seller .rsWrapper .accountBox .content .box .info .plusBox,
  #seller .rsWrapper .aiBox .content .box .info .plusBox {
    height: 110px;
  }

  #seller .rsWrapper .accountBox,
  #seller .rsWrapper .aiBox {
    border-bottom: none;
  }

  #seller .rsWrapper .accountBox .content .box .info {
    justify-content: space-between;
  }

  #seller .rsWrapper .accountBox .content .box .info .account,
  #seller .rsWrapper .accountBox .content .box .info .plusBox {
    width: calc(100% / 2 - 7.5px);
    margin: 0;
    padding: 0 17px;
    border-radius: 4px;
  }

  #seller .rsWrapper .accountBox .content .box .info .account p,
  #seller .rsWrapper .accountBox .content .box .info .account h1 {
    font-size: 12px;
  }

  #seller .rsWrapper .accountBox .content .box .info .account p {
    margin: 0 0 20px;
  }

  #seller .rsWrapper .accountBox .content .box .info .account #pinkBtn {
    width: 100%;
    height: 28px;
    font-size: 12px;
  }

  #seller .rsWrapper .aiBox .content .box.image .info {
    justify-content: flex-start;
  }

  #seller .rsWrapper .aiBox .content .box.image .info .plusBox {
    width: 100px;
    height: 100px;
    margin: 0 13px 15px 0;
  }

  #seller .rsWrapper .aiBox .content .box.image .info .plusBox:nth-child(3) {
    margin: 0 0 15px;
  }

  .aiModal .top .box > div .infoBox,
  .aiModal .top .box > div,
  .aiModal .top .box .thumb,
  .aiModal .top .box {
    width: 100%;
    flex-wrap: wrap;
    height: auto;
  }

  .aiModal .top .box,
  .aiModal .top .box .thumb {
    margin: 0 0 20px;
  }

  .aiModal .top .box > div .infoBox p {
    margin: 0 0 9px;
  }

  .aiModal .filter .ant-select,
  .aiModal .top #pinkBtn {
    width: 100%;
  }

  .aiModal .filter {
    flex-wrap: wrap;
  }

  .aiModal .filter > div {
    margin: 0 0 10px;
  }

  .aiModal .filter > div input {
    width: 130px;
  }

  .aiModal .contentTop {
    border-top: none;
    border-radius: 8px;
  }

  .aiModal .contentTop div:nth-child(5),
  .aiModal .scroll .content div:nth-child(5),
  .aiModal .contentTop div:nth-child(3),
  .aiModal .scroll .content div:nth-child(3) {
    display: none;
  }

  .aiModal .contentTop div {
    font-size: 13px;
  }

  .aiModal .contentTop div:nth-child(6),
  .aiModal .scroll .content div:nth-child(6),
  .aiModal .contentTop div:nth-child(2),
  .aiModal .contentTop div:nth-child(4),
  .aiModal .scroll .content div:nth-child(2),
  .aiModal .scroll .content div:nth-child(4),
  .aiModal .contentTop div:nth-child(1),
  .aiModal .scroll .content div:nth-child(1) {
    width: calc(100% / 4);
  }

  .aiModal .scroll .content {
    height: 65px;
  }

  #seller .tab {
    justify-content: flex-start;
  }

  #seller .tab #pinkBtn2 {
    width: 80px;
    height: 32px;
  }

  #seller .rsWrapper .type .content .box .info > div:first-child :where(.css-dev-only-do-not-override-apn68).ant-radio-wrapper span.ant-radio + * {
    padding: 0 20px 0 10px;
  }

  #seller .rsWrapper .sellerBox .content .box .info > .greenBox > div > img,
  #seller .rsWrapper .ai .content .box .info:nth-child(3) {
    margin: 0;
  }

  #seller .rsWrapper .sellerBox .content .box .info > .greenBox {
    padding: 20px 10px;
  }

  #seller .rsWrapper .aiInfo .content > div > img,
  #seller .rsWrapper .infoBox .content .box .info > div > img,
  #seller .rsWrapper .sellerBox .content .box .info > div > img {
    width: 12px;
    margin: 0 0 9px 7px;
  }

  #seller .rsWrapper .aiBox .content .box textarea {
    height: 75px;
  }

  #seller .rsWrapper .accountBox .content .box .info .account {
    padding: 0 14px;
  }

  .notiModal #purpleBtn {
    width: 100%;
    height: 40px;
    font-size: 14px;
  }

  .notiModal h1 {
    font-size: 16px;
  }

  .aiCreateModal .title,
  .notiModal .title {
    margin: 0 0 30px;
  }

  .notiModal > p {
    font-size: 12px;
  }

  .aiCreateModal > div:last-child {
    margin: 40px 0 0;
  }

  .aiCreateModal > div > p {
    font-weight: 600;
  }

  .aiCreateModal > div > #purpleBtn,
  .aiCreateModal > div > #logoutBtn {
    width: 49%;
  }

  #seller .rsWrapper .sellerBox .content .box .info > .greenBox > h1 {
    margin: 20px 0 5px;
  }

  #seller .aiInfo .content .ant-checkbox + span img {
    margin: 0 0 -7px;
  }

  #seller .rsWrapper .title {
    margin: 0 0 15px;
    justify-content: flex-start;
  }
  #seller .rsWrapper .title p {
    font-size: 13px;
  }
}

/* 무한 스크롤 */
.infinite-scroll-component__outerdiv {
  width: 100%;
}

/* tooltip */
.prompt-detail-prev.ant-tooltip .ant-tooltip-inner {
  padding: 0;
  background-color: transparent;
  background-color: initial;
  box-shadow: none;
  box-shadow: initial;
}
.prompt-detail-prev.ant-tooltip .ant-tooltip-inner #engineWrapper {
  padding: 0;
}
.prompt-detail-prev.ant-tooltip .ant-tooltip-inner .flexColCenter {
  display: block;
}
.prompt-detail-prev.ant-tooltip .ant-tooltip-inner #engineWrapper .rsWrapper .listBox .gerneBox {
  margin: 0;
}
.prompt-detail-prev.ant-tooltip .ant-tooltip-inner .flexColBetween .play {
  display: flex;
}
.ant-tooltip.badge-nm {
  border: 1px solid rgb(199, 24, 226);
  border-radius: 8px;
}
.ant-tooltip.badge-nm .ant-tooltip-arrow:before {
  background: #fff;
  margin: 0px 0 -1px;
}
.ant-tooltip.badge-nm .ant-tooltip-arrow:after {
  border-bottom: 1px solid rgb(199, 24, 226);
  border-right: 1px solid rgb(199, 24, 226);
}
.ant-tooltip.badge-nm .ant-tooltip-content .ant-tooltip-inner {
  background-color: #fff;
  color: #000;
  font-size: 16px;
  font-weight: 500;
}
.ant-tooltip.widthAuto {
  width: auto;
}

/* mobile filter */
#mobileFilter .content {
  margin-bottom: 100px;
}

/* 뮤직 플레이어 */
/* .ant-dropdown.spread-button {
  border: 1px solid rgb(199, 24, 226);
  border-radius: 8px;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 10px;
  width: 100px;
}
.ant-dropdown.spread-button li.ant-dropdown-menu-item {
  font-size: 13px;
  font-family: Pretendard;
  font-weight: 500;
}
#musicBox .listBox .list-nothing {
  margin: 10px;
}
#musicBox .listBox.playlist .list .titleBox .user h1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
#musicBox .listBox .list {
  gap: 6px;
}
#musicBox .affixBox .ant-affix {
  height: auto !important;
  background: linear-gradient(to bottom, #bbecee, #f1c3f5);
}
.lyricsInfo .ant-modal-content {
  padding: 0;
} */
.lyricsInfo .ant-modal-content .ant-modal-body {
  max-height: 70vh;
  overflow: auto;
  padding: 30px 40px;
}
.lyricsInfo .ant-modal-content .ant-modal-body .wrapInfo h1 {
  color: #0e0e1f;
  font-size: 20px;
  font-family: Pretendard;
}
.lyricsInfo .ant-modal-content .ant-modal-body .wrapInfo p,
.lyricsInfo .ant-modal-content .ant-modal-body .wrapInfo textarea {
  color: #87858b;
  font-family: Pretendard;
}
body:not(:has(#artistAlbum)) .lyricsInfo .ant-modal-content .ant-modal-body .wrapInfo textarea:not(:disabled) {
  font-weight: 500;
  padding: 0;
  border: 0;
}
.lyricsInfo .ant-modal-content .ant-modal-body .wrapInfo textarea:disabled {
  background-color: #fff !important;
  cursor: default;
  padding: 0;
  border: 0;
  color: #000 !important;
}

.lyricsInfo .ant-modal-content .ant-modal-body .wrapInfo {
  margin: 0 0 20px;
}

.lyricsInfo .ant-modal-content .ant-modal-body .bottomContent button {
  height: 40px;
  padding: 0 12px;
  border-radius: 4px;
}

#musicBox .rhap_volume-container .rhap_volume-bar-area .rhap_volume-indicator {
  height: 12px;
}

/* 음악 플레이어 모달창 */
.musicPlayerModal {
  max-width: none;
  max-width: initial;
  width: 100%;
  margin: 0;
  position: static;
  padding: 0;
}
.musicPlayerModal .ant-modal-body {
  padding: 0 !important;
}
.musicPlayerModal .ant-modal .ant-modal-close:hover {
  background-color: transparent;
  background-color: initial;
}

/* rate star */
:where(.css-apn68).ant-rate .ant-rate-star:not(:last-child) {
  margin: 0 2px;
}

.ant-rate .ant-rate-star:not(:last-child) {
  margin: 0 2px;
}
.ant-rate.not-empty.index-0 li.ant-rate-star:nth-child(n + 2),
.ant-rate.not-empty.index-0.width-0 li.ant-rate-star:nth-child(1) {
  display: none;
}
.ant-rate.not-empty.index-1 li.ant-rate-star:nth-child(n + 3),
.ant-rate.not-empty.index-1.width-0 li.ant-rate-star:nth-child(2) {
  display: none;
}
.ant-rate.not-empty.index-2 li.ant-rate-star:nth-child(n + 4),
.ant-rate.not-empty.index-2.width-0 li.ant-rate-star:nth-child(3) {
  display: none;
}
.ant-rate.not-empty.index-3 li.ant-rate-star:nth-child(n + 5),
.ant-rate.not-empty.index-3.width-0 li.ant-rate-star:nth-child(4) {
  display: none;
}
.ant-rate.not-empty.index-4.width-0 li.ant-rate-star:nth-child(5) {
  display: none;
}
.ant-rate.index-0.width-1 li.ant-rate-star:nth-child(1) .ant-rate-star-first,
.ant-rate.index-1.width-1 li.ant-rate-star:nth-child(2) .ant-rate-star-first,
.ant-rate.index-2.width-1 li.ant-rate-star:nth-child(3) .ant-rate-star-first,
.ant-rate.index-3.width-1 li.ant-rate-star:nth-child(4) .ant-rate-star-first,
.ant-rate.index-4.width-1 li.ant-rate-star:nth-child(5) .ant-rate-star-first {
  width: 10% !important;
  color: inherit;
  z-index: 1;
  opacity: 1;
}
.ant-rate.index-0.width-2 li.ant-rate-star:nth-child(1) .ant-rate-star-first,
.ant-rate.index-1.width-2 li.ant-rate-star:nth-child(2) .ant-rate-star-first,
.ant-rate.index-2.width-2 li.ant-rate-star:nth-child(3) .ant-rate-star-first,
.ant-rate.index-3.width-2 li.ant-rate-star:nth-child(4) .ant-rate-star-first,
.ant-rate.index-4.width-2 li.ant-rate-star:nth-child(5) .ant-rate-star-first {
  width: 20% !important;
  color: inherit;
  z-index: 1;
  opacity: 1;
}
.ant-rate.index-0.width-3 li.ant-rate-star:nth-child(1) .ant-rate-star-first,
.ant-rate.index-1.width-3 li.ant-rate-star:nth-child(2) .ant-rate-star-first,
.ant-rate.index-2.width-3 li.ant-rate-star:nth-child(3) .ant-rate-star-first,
.ant-rate.index-3.width-3 li.ant-rate-star:nth-child(4) .ant-rate-star-first,
.ant-rate.index-4.width-3 li.ant-rate-star:nth-child(5) .ant-rate-star-first {
  width: 30% !important;
  color: inherit;
  z-index: 1;
  opacity: 1;
}
.ant-rate.index-0.width-4 li.ant-rate-star:nth-child(1) .ant-rate-star-first,
.ant-rate.index-1.width-4 li.ant-rate-star:nth-child(2) .ant-rate-star-first,
.ant-rate.index-2.width-4 li.ant-rate-star:nth-child(3) .ant-rate-star-first,
.ant-rate.index-3.width-4 li.ant-rate-star:nth-child(4) .ant-rate-star-first,
.ant-rate.index-4.width-4 li.ant-rate-star:nth-child(5) .ant-rate-star-first {
  width: 40% !important;
  color: inherit;
  z-index: 1;
  opacity: 1;
}
.ant-rate.index-0.width-5 li.ant-rate-star:nth-child(1) .ant-rate-star-first,
.ant-rate.index-1.width-5 li.ant-rate-star:nth-child(2) .ant-rate-star-first,
.ant-rate.index-2.width-5 li.ant-rate-star:nth-child(3) .ant-rate-star-first,
.ant-rate.index-3.width-5 li.ant-rate-star:nth-child(4) .ant-rate-star-first,
.ant-rate.index-4.width-5 li.ant-rate-star:nth-child(5) .ant-rate-star-first {
  width: 50% !important;
  color: inherit;
  z-index: 1;
  opacity: 1;
}
.ant-rate.index-0.width-6 li.ant-rate-star:nth-child(1) .ant-rate-star-first,
.ant-rate.index-1.width-6 li.ant-rate-star:nth-child(2) .ant-rate-star-first,
.ant-rate.index-2.width-6 li.ant-rate-star:nth-child(3) .ant-rate-star-first,
.ant-rate.index-3.width-6 li.ant-rate-star:nth-child(4) .ant-rate-star-first,
.ant-rate.index-4.width-6 li.ant-rate-star:nth-child(5) .ant-rate-star-first {
  width: 60% !important;
  color: inherit;
  z-index: 1;
  opacity: 1;
}
.ant-rate.index-0.width-7 li.ant-rate-star:nth-child(1) .ant-rate-star-first,
.ant-rate.index-1.width-7 li.ant-rate-star:nth-child(2) .ant-rate-star-first,
.ant-rate.index-2.width-7 li.ant-rate-star:nth-child(3) .ant-rate-star-first,
.ant-rate.index-3.width-7 li.ant-rate-star:nth-child(4) .ant-rate-star-first,
.ant-rate.index-4.width-7 li.ant-rate-star:nth-child(5) .ant-rate-star-first {
  width: 70% !important;
  color: inherit;
  z-index: 1;
  opacity: 1;
}
.ant-rate.index-0.width-8 li.ant-rate-star:nth-child(1) .ant-rate-star-first,
.ant-rate.index-1.width-8 li.ant-rate-star:nth-child(2) .ant-rate-star-first,
.ant-rate.index-2.width-8 li.ant-rate-star:nth-child(3) .ant-rate-star-first,
.ant-rate.index-3.width-8 li.ant-rate-star:nth-child(4) .ant-rate-star-first,
.ant-rate.index-4.width-8 li.ant-rate-star:nth-child(5) .ant-rate-star-first {
  width: 80% !important;
  color: inherit;
  z-index: 1;
  opacity: 1;
}
.ant-rate.index-0.width-9 li.ant-rate-star:nth-child(1) .ant-rate-star-first,
.ant-rate.index-1.width-9 li.ant-rate-star:nth-child(2) .ant-rate-star-first,
.ant-rate.index-2.width-9 li.ant-rate-star:nth-child(3) .ant-rate-star-first,
.ant-rate.index-3.width-9 li.ant-rate-star:nth-child(4) .ant-rate-star-first,
.ant-rate.index-4.width-9 li.ant-rate-star:nth-child(5) .ant-rate-star-first {
  width: 90% !important;
  color: inherit;
  z-index: 1;
  opacity: 1;
}

/* 더보기 버튼 */
#whiteBtn.noMore {
  border: none;
  background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
  background: initial;
}
#whiteBtn.noMore:hover {
  cursor: default;
  box-shadow: none;
  box-shadow: initial;
}

/* 검색 버튼 */
#mobileFilter .btnBox #pinkBtn {
  width: 100%;
}
.buttonGroup.allShowButtonFlex,
#musicWrapper .rsWrapper > div .content .searchBox > div:nth-child(2).buttonGroup.allShowButtonFlex {
  display: flex;
}

/* input */
.titleBox .search .ant-input-affix-wrapper:not(.ant-input-disabled):hover,
.titleBox .search :where(.css-dev-only-do-not-override-14i19y2).ant-input-affix-wrapper:not(.ant-input-disabled):hover {
  z-index: auto;
}
.titleBox .search .ant-input-outlined:hover,
.titleBox .search :where(.css-dev-only-do-not-override-14i19y2).ant-input-outlined:hover {
  border-color: currentColor;
  border-color: initial;
  background-color: transparent;
  background-color: initial;
}
.titleBox .search .ant-input-outlined,
.titleBox .search :where(.css-dev-only-do-not-override-14i19y2).ant-input-outlined {
  background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
  background: initial;
  border-width: medium;
  border-width: initial;
  border-style: none;
  border-style: initial;
  border-color: currentColor;
  border-color: initial;
}
.titleBox .search .ant-input-affix-wrapper:not(.ant-input-disabled):hover,
.titleBox .search .ant-input-outlined:focus,
.titleBox .search .ant-input-outlined:focus-within,
.titleBox .search :where(.css-dev-only-do-not-override-14i19y2).ant-input-affix-wrapper:not(.ant-input-disabled):hover,
.titleBox .search :where(.css-dev-only-do-not-override-14i19y2).ant-input-outlined:focus,
.titleBox .search :where(.css-dev-only-do-not-override-14i19y2).ant-input-outlined:focus-within {
  box-shadow: none;
  box-shadow: initial;
  outline: 0;
}

/* slider
#top10 #newSlider .slick-list {
  padding: 70px 0 0 !important;
} */

/* dropdown */
#musicInfo .rsWrapper .info div .userBox .userInfo .nameBox div > p {
  font-size: 16px;
  font-weight: 500;
  margin: 0 5px 0 0;
}
#musicInfo .rsWrapper .info div .userBox .userInfo .nameBox .ant-dropdown p {
  font-size: 13px;
  font-weight: 500;
  margin: 0 5px 0 0;
}
#musicInfo .rsWrapper .info div .userBox .userInfo .nameBox .appraisal img {
  margin: 0 5px 0 0;
  cursor: pointer;
}
.classRank .ant-dropdown {
  border: 1px solid rgb(199, 24, 226);
  border-radius: 8px;
}
.classRank .ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-item,
.classRank .ant-dropdown-menu-submenu .ant-dropdown-menu .ant-dropdown-menu-item,
.classRank .ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-submenu-title,
.classRank .ant-dropdown-menu-submenu .ant-dropdown-menu .ant-dropdown-menu-submenu-title,
.ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-item,
.ant-dropdown-menu-submenu .ant-dropdown-menu .ant-dropdown-menu-item,
.ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-submenu-title,
.ant-dropdown-menu-submenu .ant-dropdown-menu .ant-dropdown-menu-submenu-title {
  padding: 8px 12px;
  height: 32px;
}
.classRank .ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-item .ant-dropdown-menu-title-content p,
.ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-item .ant-dropdown-menu-title-content p {
  color: #000 !important;
}
.classRank span::after {
  height: 0;
}

/* 서브메인 페이지 */
#musicWrapper .content .searchBox .tabBox,
#otherWrapper .content .searchBox .tabBox,
#artistHome .tabBox {
  width: auto;
  padding: 4px 2px;
  background: linear-gradient(to right, #b041f3 0%, #ec15ff 100%);
  border-radius: 50px;
  margin: 0 12px 0 0 !important;
}
#artistHome .tabBox {
  width: fit-content;
  margin: auto !important;
}
#artistHome .form-album .tabBox {
  flex-wrap: wrap;
  margin: 0 !important;
  border-radius: 0;
  background: none;
}
#musicWrapper .content .searchBox .tabBox .tab,
#otherWrapper .content .searchBox .tabBox .tab,
#artistHome .tabBox .tab {
  padding: 6px 12px;
  width: auto;
  cursor: pointer;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.2s ease-in-out;
  border-radius: 50px;
  margin: 0 2px;
  border: 0;
  text-wrap-mode: nowrap;
}
#musicWrapper .content .searchBox .tabBox .tab#active,
/* #musicWrapper .content .searchBox .tabBox .tab:hover, */
#otherWrapper .content .searchBox .tabBox .tab#active,
/* #otherWrapper .content .searchBox .tabBox .tab:hover, */
#artistHome .tabBox .tab#active {
  background: #ffffff;
  color: #464548;
}

/* 열혈 팬 */
#musicWrapper.panList {
  margin-top: 12px;
}
#musicWrapper.panList .rsWrapper {
  width: 100%;
}
#musicWrapper.panList .rsWrapper > div .content .searchBox {
  margin: 0 0 8px;
  height: 33px;
  justify-content: center;
  align-items: start;
}

#musicWrapper.panList .content .searchBox .tabBox {
  display: flex;
  height: 33px;
  justify-content: flex-end;
  align-items: center;
  margin: 0 !important;
}

#musicWrapper.panList .content .searchBox .tabBox .tab {
  display: flex;
  padding: 6px 12px 5px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  line-height: 1;
}
.fanSearchBox {
  /* border-bottom: 2px solid #000; */
}

#musicWrapper .rsWrapper > div .content .searchBox .buttonGroup,
#otherWrapper .rsWrapper > div .content .searchBox .buttonGroup {
  gap: 8px;
}
#musicWrapper .rsWrapper > div .content .searchBox div {
  gap: 0;
}
#musicWrapper .rsWrapper > div .content h4.musicSpaceNotice {
  width: 100%;
  color: #f34144;
}
#otherWrapper .rsWrapper > div .content .searchBox div button {
  align-items: center;
  display: flex;
  flex-direction: row;
  gap: 8px;
  justify-content: start;
  padding: 0 12px;
}
#otherWrapper .rsWrapper > div .content .searchBox div #pinkBtn {
  width: auto;
}
#otherWrapper .rsWrapper > div .content .listBox .list .ant-checkbox-wrapper {
  margin: 0 8px 0 0;
}
#musicWrapper .rsWrapper > div .content .listBox .list .HeaderIndex {
  width: 80px;
  text-align: center;
}
#musicWrapper .rsWrapper > div .content .listBox .list .HeaderThumb {
  width: 64px;
  margin: 0 10px;
  text-align: center;
}
#musicWrapper .rsWrapper > div .content .listBox .list .HeaderTitleAndUser {
  /* width: calc((100% - 40px - 60px - 80px - 50px - 88px - 200px - 48px - 48px - 48px - 48px)); */
  flex: 1 1;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 5px;
}

#musicWrapper .rsWrapper > div .content .listBox .list .HeaderUser {
  min-width: 100px;
  width: 25%;
}
#musicWrapper .rsWrapper > div .content .listBox .list .HeaderLike {
  width: 88px;
  text-align: center;
}
#musicWrapper .rsWrapper > div .content .listBox .list .HeaderPlayCount {
  width: 88px;
  text-align: left;
  padding-left: 14px;
}
#musicWrapper .rsWrapper > div .content .listBox .list .HeaderReview {
  width: 200px;
  text-align: center;
}
#musicWrapper .rsWrapper > div .content .listBox .list .HeaderListen {
  width: 88px;
  text-align: center;
}
#musicWrapper .rsWrapper > div .content .listBox .list .HeaderVideo {
  width: 88px;
  text-align: left;
  padding-left: 12px;
}
#musicWrapper .rsWrapper > div .content .listBox .noListData,
#otherWrapper .rsWrapper > div .content .listBox .noListData {
  width: 100%;
  height: 100px;
  text-align: center;
}
#musicWrapper .rsWrapper > div .content .listBox .noListData h1,
#otherWrapper .rsWrapper > div .content .listBox .noListData h1 {
  font-size: 20px;
  line-height: 100px;
}
#musicWrapper .rsWrapper > div .content .listBox .list.tableHeader {
  gap: 5px;
  border-bottom: 1px solid #e2dfe4;
  border-radius: 0;
  border-radius: initial;
  padding: 0;
  height: 48px;
  margin-bottom: 2px;
}
#musicWrapper .rsWrapper > div .content .listBox .list.tableHeader:hover {
  background: #fff;
}
#musicWrapper .rsWrapper > div .content .listBox .list .views .i-playHit {
  width: inherit;
  margin: 0 0 0 16px;
}
#musicWrapper .rsWrapper > div .content .searchBox div #pinkBtn:disabled:hover,
#musicWrapper .rsWrapper > div .content .searchBox div #whiteBtn:disabled:hover {
  box-shadow: none;
  box-shadow: initial;
  cursor: not-allowed;
}

.titleBox .flexSearchBox {
  display: flex;
}
.titleBox .flexSearchBox .ant-select {
  height: 42px;
  width: 100px;
  margin: 0 8px 0 0;
}
.titleBox .flexSearchBox .ant-select .ant-select-selector {
  height: 42px;
  background: #f4f5f7;
}

#musicWrapper .ant-dropdown,
#musicWrapper .ant-dropdown .artistMvListInList .artistInfoAlbum .artistInfoAlbum__thum {
  z-index: 1000;
}

/* 서브메인 상세 페이지 */

article#detail .top .rsWrapper .right p.aiModelInfo {
  padding: 4px;
  border-radius: 8px;
  background: #141424;
  line-height: 100%;
  text-align: center;
  color: #fff;
  width: auto;
  font-size: 11px;
}
#detail .top .rsWrapper .right .priceBox .downloadBox.disabled button,
#detail .top .rsWrapper .right .mobilePrice .downloadBox.disabled button {
  background: #dfdce4;
  cursor: not-allowed;
  box-shadow: none;
}
#detail .alreadySaveArtist {
  height: 32px;
  flex-grow: 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.05);
}
#detail .alreadySaveArtist img {
  width: 20px;
  height: 20px;
  border-radius: 16px;
}
#detail .alreadySaveArtist p {
  font-family: Pretendard;
  font-size: 12px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: -0.24px;
  color: #0e0e1f;
}
#detail .alreadySaveArtist * {
  font-weight: 600;
}
#detail .ant-collapse-header {
  flex-direction: row-reverse;
}
#detail .ant-collapse-expand-icon button.ant-switch-checked span.ant-switch-inner {
  color: #eee;
  background: linear-gradient(90deg, #b041f3 0%, #ec15ff 100%);
}
#detail .ant-collapse-expand-icon button.ant-switch span.ant-switch-inner .ant-switch-inner-checked,
#detail .ant-collapse-expand-icon button.ant-switch span.ant-switch-inner .ant-switch-inner-unchecked {
  line-height: 1.8;
}

/* 장바구니 */
#header .rsWrapper .cartWrapper .cartBox {
  max-height: 45vh;
  overflow: auto;
}

/* 라디오 버튼 */
/* .ant-radio-wrapper-checked .ant-radio-checked .ant-radio-inner {
  border-radius: 50px;
  border-style: solid;
  border-width: 6px;
  border-image-source: linear-gradient(to right, #b041f3 0%, #ec15ff 100%);
  border-image-slice: 1;
  background-image: linear-gradient(to bottom, #fff, #fff), linear-gradient(to right, #b041f3 0%, #ec15ff 100%);
  background-origin: border-box;
  background-clip: content-box, border-box;
  background-color: #ffffff !important;
  border-color: #ffffff !important;
} */

/* 체크 박스 */
/* .ant-checkbox-wrapper-checked .ant-checkbox-checked .ant-checkbox-inner {
  border-radius: 4px;
  border-style: solid;
  border-width: 1px;
  border-image-source: linear-gradient(to right, #b041f3 0%, #ec15ff 100%);
  border-image-slice: 1;
  background-image: linear-gradient(to right, #b041f3 0%, #ec15ff 100%), linear-gradient(to right, #b041f3 0%, #ec15ff 100%);
  background-origin: border-box;
  background-clip: content-box, border-box;
  background-color: #ffffff !important;
} */
/* .ant-checkbox-wrapper:hover .ant-checkbox-inner {
  border-color: #ec15ff !important;
} */

#listWrapper #otherWrapper .profileTitle {
  padding: 10px 0;
  width: calc(100% - 32px);
}
#listWrapper #otherWrapper .rsWrapper {
  padding: 8px 0;
}
#listWrapper #otherWrapper .rsWrapper.paddingZero {
  padding: 0;
}
#listWrapper #otherWrapper > .rsWrapper > div:first-child {
  padding: 0;
}
#listWrapper #otherWrapper #populerPromptSlider {
  /* padding: 20px 40px 0; */
  /* width: calc(100% - 80px); */
  width: 100%;
}

/* .promptThumList #listWrapper:has(#populerPromptSlider) {
  max-width: 1598px;
} */
#listWrapper #otherWrapper #populerPromptSlider {
  /* padding: 20px 40px 0; */
  /* width: calc(100% - 80px); */
  width: 100%;
}
#listWrapper #otherWrapper .slick-list .staffBox {
  width: 100%;
  margin: 0 0 20px -8px;
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  border: 12px solid transparent;
  transition: 0.2s;
}
/* #listWrapper #otherWrapper .slick-list .staffBox:hover {
  border: 4px solid transparent;
  background-image: linear-gradient(transparent, transparent), linear-gradient(#b041f3, #ec15ff);
  background-origin: border-box;
  background-clip: content-box, border-box;
  box-shadow: 0 2px 13px #b041f3;
} */
#listWrapper #otherWrapper .slick-list .staffBox .absoluteBox {
  cursor: pointer;
}
#listWrapper #otherWrapper .slick-list .staffBox .absoluteBox > div:first-child {
  /*background: linear-gradient(180deg, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0) 28%); */
  /* min-height: 36px; */
  display: flex;
  align-items: start;
  justify-content: start;
  /* z-index: -2; */
  height: fit-content;
}
#listWrapper #otherWrapper .slick-list .staffBox .absoluteBox .title {
  padding: 8px;
  background: #e2e2e2;
}
#listWrapper .rsWrapper .staff .staffList .staffBox:hover .absoluteBox .hover-bg {
  /* #listWrapper .rsWrapper .newContents .staffList .staffBox:hover .absoluteBox .hover-bg{ */
  /* #listWrapper #otherWrapper .slick-list .staffBox:hover .absoluteBox .hover-bg { */
  width: 100%;
  height: 0;
  background: #0006;
  position: absolute;
  padding-bottom: calc(198 / 352 * 100%);
}
#listWrapper #otherWrapper .slick-list .staffBox .absoluteBox .play,
#detail #listWrapper #otherWrapper .slick-list .staffBox .absoluteBox .play {
  width: 50px;
  height: 50px;
  position: absolute;
  top: calc(50% - 20px);
  left: 50%;
  transform: translate(-50%, -50%);
}
@media (max-width: 700px) {
  #listWrapper #otherWrapper .slick-list .staffBox .absoluteBox .play,
  #detail #listWrapper #otherWrapper .slick-list .staffBox .absoluteBox .play {
    display: none;
  }
}
#listWrapper #otherWrapper .slick-list .staffBox .absoluteBox .play > img,
#detail #listWrapper #otherWrapper .slick-list .staffBox .absoluteBox .play > img {
  width: 50px;
  height: auto;
}
#listWrapper #otherWrapper .slick-list .staffBox .absoluteBox .greyBox > img {
  width: 24px;
  height: 24px;
  border-radius: 100%;
  margin: 0 8px 0 0;
}

/* #listWrapper #otherWrapper .slick-list .staffBox .absoluteBox .greyBox > div {
  width: calc(100% - 32px);
} */
#listWrapper #otherWrapper .slick-list .staffBox .absoluteBox .greyBox div .imgBox {
  width: calc(100% - 40px);
  justify-content: flex-start;
}
#listWrapper #otherWrapper .slick-list .staffBox .absoluteBox .greyBox div .imgBox + p {
  text-wrap-mode: nowrap;
}

#listWrapper #otherWrapper .slick-list .staffBox .absoluteBox .greyBox div > h1 {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 2px;
  color: #000000;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100px;
  padding: 0;
  text-align: left;
}

.profileSection #listWrapper #otherWrapper .slick-list .staffBox .absoluteBox .greyBox > div {
  width: calc(100% - 32px);
}
.profileSection #listWrapper #otherWrapper .slick-list .staffBox .absoluteBox .greyBox div .imgBox {
  /* width: auto;  마이페이지 홈 썸네일 안정화*/
  justify-content: flex-start;
  align-items: center;
}
.profileSection #listWrapper #otherWrapper .slick-list .staffBox .absoluteBox .greyBox div > h1:has(p) {
  font-size: 14px;
  font-weight: 600;
  /* margin: 0 0 2px;  프로필 단독 일때, 정렬 안맞음 제어*/
  color: #000000;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: calc(100% - 40px);
  padding: 0;
}
#listWrapper #otherWrapper .slick-list .staffBox .absoluteBox .greyBox div > p {
  font-size: 13px;
  font-weight: 600;
  text-wrap-mode: nowrap;
}
#listWrapper #otherWrapper .slick-list .staffBox .absoluteBox .thumbnail {
  display: block;
  position: relative;
  width: 100%;
  height: 0;
  border-radius: 16px 16px 0px 0px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  /* padding: 8px; */
  padding-bottom: calc(198 / 352 * 100%);
}
.profileSection #listWrapper #otherWrapper .slick-list .staffBox .absoluteBox .thumbnail {
  display: flex;
  position: relative;
  width: 100%;
  height: 0;
  border-radius: 12px 12px 0px 0px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  /* padding: 8px; */
  padding-bottom: calc(198 / 352 * 100%);
}
/* .container {
  width: 100%;
  height: 0;
  padding-bottom: calc(height/width * 100%);
  background-size: cover;
  background-image: url('이미지경로/이미지파일');
  background-repeat: no-repeat;
  background-position: center;
} */

#listWrapper #otherWrapper .slick-list .staffBox .absoluteBox .thumbnail .user {
  background: initial;
  width: 100%;
  min-height: 0;
  min-height: initial;
  margin: 0;
  z-index: 999;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0) 100%);
  position: absolute;
}
#listWrapper #otherWrapper .slick-list .staffBox .absoluteBox .thumbnail .user p {
  padding: 4px;
  border-radius: 8px;
  background: #141424;
  font-size: 11px !important;
  font-style: normal;
  font-weight: 400 !important;
  line-height: 100%;
  width: fit-content;
  color: #fff;
}
#listWrapper #otherWrapper .slick-list .staffBox .absoluteBox .thumbnail > h2 {
  position: absolute;
  bottom: 0;
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  /* margin: 0 0 4px; */
  line-height: 1.4;
  text-shadow: 0 0 8px #00000080;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 8px;
  width: 100%;
  text-align: left;
}
/* 프롬프트 랭크 아이콘 */
div.promptRankIcon::before {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  content: '';
  margin: -3px 0 0;
}
div.promptRankIcon {
  position: relative;
  display: flex;
}
.promptRank1::before {
  background-image: url(../../static/media/i-rank01.01262d83e6d777191536.svg);
  width: 38px;
  height: 54px;
}
.promptRank2::before {
  background-image: url(../../static/media/i-rank02.907222d626694c822491.svg);
  width: 38px;
  height: 54px;
}
.promptRank3::before {
  background-image: url(../../static/media/i-rank03.9ca32349dc6c039b4e19.svg);
  width: 38px;
  height: 54px;
}
.promptRank4::before {
  background-image: url(../../static/media/i-rank04.7a4f410b0549b5fe37be.svg);
  width: 38px;
  height: 54px;
}
.promptRank1 .rank-value,
.promptRank2 .rank-value,
.promptRank3 .rank-value,
.promptRank4 .rank-value {
  flex-grow: 0;
  font-family:
    'Pretendard Variable',
    Pretendard,
    -apple-system,
    BlinkMacSystemFont,
    system-ui;
  font-size: 16px;
  font-weight: 800;
  font-stretch: normal;
  font-style: normal;
  color: #000;
  position: absolute;
  top: 54%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 1;
}
/* .promptRank3 .rank-value,
.promptRank4 .rank-value {
  top: 55%;
} */

/* 탈퇴 사유 모달창 */
.leaveReason .ant-modal-content {
  padding: 0;
}
.leaveReason .ant-modal-content .ant-modal-body {
  max-height: 70vh;
  overflow: auto;
  padding: 0 40px;
}
.leaveReason .ant-modal-content .ant-modal-body .ant-select-selector {
  background-color: transparent;
  background-color: initial;
  cursor: default;
  color: #87858b;
}
.leaveReason .ant-modal-content .ant-modal-body .ant-select-disabled .ant-select-selector:hover {
  border: 1px solid #d9d9d9 !important;
}
.leaveReason .ant-modal-content .ant-modal-body textarea {
  color: #87858b;
}
.leaveReason .ant-modal-content .ant-modal-body textarea:disabled {
  background-color: transparent;
  background-color: initial;
  cursor: default;
}
.leaveReason .ant-modal-content .ant-modal-footer button {
  width: 100px;
  height: 40px;
  border-radius: 8px;
}
.leaveReason .ant-modal-content .ant-modal-footer button#whiteBtn {
  width: 100px;
  height: 40px;
  border-radius: 8px;
}
.leaveReason .ant-modal-content .ant-modal-footer div {
  gap: 12px;
}

/* 관리자 회원 상세페이지 */
.admin #myPage #myProfile .ant-form {
  width: 90%;
}

/* 관리자 프롬프트 검토 목록페이지 */
.ant-form-item.periodFilter .ant-form-item-control-input-content {
  display: flex;
}
.ant-form-item.periodFilter .ant-form-item-control-input-content .ant-select-in-form-item {
  width: 100px;
  margin: 0 10px 0 0;
}

/* cursor */
.cursorNotAllowed {
  cursor: not-allowed;
}

/* 판매등록 페이지 */
/* #promptSales .plusBox > div {
  width: 320px;
} */
#promptSales .plusBox .imageContainer img.expandIcon {
  cursor: pointer;
  position: absolute;
  top: 38%;
  right: 56%;
  width: 22%;
  height: 22%;
  background: transparent;
  border-radius: 50%;
  pointer-events: auto;
  padding: 2px;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  z-index: 10;
  object-fit: contain;
}
#promptSales .plusBox .imageContainer img.changeIcon {
  cursor: pointer;
  position: absolute;
  top: 38%;
  right: 40%;
  width: 22%;
  height: 22%;
  background: transparent;
  border-radius: 50%;
  pointer-events: auto;
  padding: 2px;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  z-index: 10;
  object-fit: contain;
}
#promptSales .plusBox .imageContainer img.trashIcon {
  cursor: pointer;
  position: absolute;
  top: 38%;
  right: 26%;
  width: 20%;
  height: 20%;
  background: transparent;
  border-radius: 50%;
  pointer-events: auto;
  padding: 2px;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  z-index: 10;
  object-fit: contain;
}
#promptSales .plusBox .imageContainer img.uploadthum {
  transition: filter 0.3s ease-in-out;
  filter: brightness(1);
}
#promptSales .plusBox:hover .imageContainer img.expandIcon,
#promptSales .plusBox:hover .imageContainer img.changeIcon,
#promptSales .plusBox:hover .imageContainer img.trashIcon {
  opacity: 1;
}
#promptSales .plusBox:hover .imageContainer img.uploadthum {
  filter: brightness(0.7);
}
#promptSales .plusBox .ant-upload-disabled .imageContainer img {
  cursor: not-allowed;
}
#promptSales .content:has(.flexColStart.box) .box.image .info {
  overflow: auto;
}
#promptSales .info .ant-upload-wrapper.fileBtnBox .ant-upload-drag {
  height: auto;
}
#promptSales .info .ant-upload-wrapper.fileBtnBox .ant-upload-drag .ant-upload-btn {
  padding: 0;
}
#promptSales .info .ant-upload-wrapper.fileBtnBox .ant-upload-disabled button {
  cursor: not-allowed;
}

/* 마이페이지 */
/* #myHome > .top > .rsWrapper > .profile .flexRowBetween.bottom {
  padding: 20px 0 0;
} */
#myHome .promptThumList.forceWidth {
  width: 100%;
}
#myHome > .top > .rsWrapper > .profile .bottom div.major > img {
  width: 24px;
  height: 24px;
}

/* 내 프로필 */
/* #myProfile .myInfo .content .box .thumbUpdate .plusBox .plus,
#myProfile .myInfo .content .info .plusBannerBox .plus {
  margin: auto;
} */
#myProfile .myInfo .content .box .thumbUpdate .plusBox p,
#myProfile .myInfo .content .info .plusBannerBox p {
  display: block;
}

/* AI 모델 등록 */
.modalAi .modalAi__headerArea .closeIcon img {
  width: 20px;
}

/* 장바구니 */
#header .mobileCart .cartWrapper > .priceBox {
  background: #fff;
}

/* 채팅 */
#message .rsWrapper .profile .box .infoBox .aiArea {
  flex-direction: row;
}
#message .rsWrapper .profile .box .infoBox .aiArea p {
  align-content: center;
}
#message .rsWrapper .profile .box .infoBox .aiArea > div {
  width: auto;
}

/* 음원공간 */
#musicWrapper .rsWrapper > div .content .listBox .list .HeaderEngineerRank {
  width: 125px;
  text-align: center;
}
#musicWrapper .rsWrapper > div .content .listBox .list .HeaderGenre {
  width: 125px;
  text-align: center;
}
#musicWrapper .rsWrapper > div .content .listBox .list .HeaderDesc {
  width: 200px;
  text-align: center;
}
#musicWrapper .rsWrapper > div .content .listBox .list .engineerRank {
  width: 125px;
}
#musicWrapper .rsWrapper > div .content .listBox .list .engineerRank img {
  margin: 0 8px 0 0;
}
#musicWrapper .rsWrapper > div .content .listBox .list .genre {
  width: 125px;
}
#musicWrapper .rsWrapper > div .content .listBox .list .desc {
  width: 200px;
}
#musicWrapper .rsWrapper > div .content .listBox .list .desc p {
  width: 200px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  text-align: center;
}

#listWrapper #otherWrapper .profileTitle2 {
  padding: 20px 0;
  max-width: 1518px;
  width: 100%;
  border-top: 1px solid #e2dfe4;
  margin: 0 20px;
}
#listWrapper #otherWrapper .profileTitle2 div:first-child {
  display: flex;
}
#listWrapper #otherWrapper .profileTitle2 img {
  width: 18px;
  margin: 0 8px 0 0;
}
#listWrapper #otherWrapper .profileTitle2 p {
  font-size: 16px;
}
#listWrapper #otherWrapper .slick-list #musicVideoCard .absoluteBox .thumbnail > h2 {
  position: absolute;
  bottom: 8px;
  right: 8px;
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  line-height: 1.4;
  text-shadow: 0 0 8px #00000080;
  width: 100%;
  width: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#listWrapper #otherWrapper .slick-list #musicVideoCard .absoluteBox .thumbnail > h2 img {
  width: 44px;
  background-color: rgba(30, 30, 30, 0.8);
  border-radius: 8px;
}
#listWrapper #otherWrapper .slick-list #musicVideoCard .absoluteBox .title {
  padding: 8px;
  background: #fff;
}
#listWrapper #otherWrapper .slick-list #musicVideoCard .absoluteBox .title .mvViewCount {
  display: flex;
  align-items: center;
}
#listWrapper #otherWrapper .slick-list #musicVideoCard .absoluteBox .title .mvViewCount p {
  color: #464548;
}
#listWrapper #otherWrapper .slick-list #musicVideoCard .absoluteBox .title .mvDownloadBtn {
  width: 26px;
  height: 26px;
  flex-grow: 0;
  display: flex;
  padding: 4px;
  border-radius: 50px;
  border: solid 1px #ccc;
  background-color: #fff;
  justify-content: center;
  align-items: center;
}
#listWrapper #otherWrapper .slick-list #musicVideoCard .absoluteBox .title .mvDownloadBtn.disabled {
  background-color: #ccc;
}
#listWrapper #otherWrapper .slick-list #musicVideoCard .absoluteBox .title .mvDownloadBtn.disabled svg path {
  stroke: #a29fab;
}
#listWrapper #otherWrapper .slick-list #musicVideoCard .absoluteBox .title > div:first-child {
  gap: 6px;
}
#listWrapper #otherWrapper .slick-list #musicVideoCard .absoluteBox .title > div:first-child p {
  font-weight: 600;
}
#listWrapper #otherWrapper .slick-list #musicVideoCard .absoluteBox .greyBox > img {
  margin: 0;
  width: 22px;
  height: 22px;
}
#listWrapper #otherWrapper .slider-container2#populerPromptSlider {
  padding: 0;
}

.approval.amateur {
  background: #9a9fb5;
}
.approval.pro {
  background: #c12cca;
}

/* 유튜브 플레이어 */
.ant-modal-wrap:has(.youtubePlayerModal) {
  overflow: hidden;
}
.ant-modal-root:has(.youtubePlayerModal) .ant-modal-mask {
  background-color: rgba(0, 0, 0, 0.8);
}
.youtubePlayerModal {
  margin: 0;
  top: 0;
}
.ant-modal.youtubePlayerModal .ant-modal-close {
  top: 24px;
}
.youtubePlayerModal .ant-modal-content .ant-modal-close span {
  display: flex;
}
.youtubePlayerModal .ant-modal-content .ant-modal-close span.ant-modal-close-x {
  font-size: 24px;
  color: #fff;
}
.youtubePlayerModal .ant-modal-content {
  width: 100vw;
  border-radius: 0;
  background-color: transparent;
}
.youtubePlayerModal .ant-modal-content .ant-modal-body {
  position: relative;
  height: 100vh;
  padding: 0 8vw !important;
  cursor: default;
}
.youtubePlayerModal .ant-modal-content .modalHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
}
.youtubePlayerModal .ant-modal-content .modalHeader .titleBox {
  display: flex;
  flex-direction: column;
  align-items: start;
  width: calc(100% - 150px);
}
.youtubePlayerModal .ant-modal-content .modalHeader .titleBox h3 {
  width: 100%;
  font-size: 24px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1;
  margin-bottom: 8px;
}
.youtubePlayerModal .ant-modal-content .modalHeader .titleBox span {
  text-wrap: nowrap;
}
.youtubePlayerModal .ant-modal-content .modalHeader .iconBox {
  display: flex;
  align-items: center;
  gap: 16px;
}
.youtubePlayerModal .ant-modal-content .modalHeader .iconBox .icon {
  cursor: pointer;
  padding: 0;
  position: relative;
  width: 26px;
  display: flex;
  justify-content: center;
}

.youtubePlayerModal .ant-modal-content .modalHeader .titleBox .ant-switch {
  height: 32px;
}

.youtubePlayerModal .ant-modal-content .modalHeader .iconBox .icon img {
  width: 32px;
  height: 32px;
}
.youtubePlayerModal .ant-modal-content .modalHeader .iconBox .icon img.activeIcon {
  width: 32px;
  height: 32px;
  opacity: 0;
  position: absolute;
  top: 0;
  transition: all 0.2s ease-in-out;
  z-index: 2;
}
.youtubePlayerModal .ant-modal-content .modalHeader .iconBox .icon img.activeIcon:hover,
.youtubePlayerModal .ant-modal-content .modalHeader .iconBox .icon#active img.activeIcon {
  opacity: 1;
}

.youtubePlayerModal .ant-modal-content .modalHeader .iconBox .siren img:hover {
  content: url(../../static/media/i-sirenOn.1671ebde687100359f06.svg);
  width: 24px;
  margin-left: 2px;
}

.youtubePlayerModal .ant-modal-content .modalHeader .iconBox .siren img {
  width: 100%;
  height: 100%;
}
.youtubePlayerModal .ant-modal-content .youtubeBox {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% - 96px));
  z-index: 1;
  width: 100%;
  max-height: calc(100vh - 150px);
  padding: 0 8vw;
  margin-top: 96px;
}

.youtubePlayerModal .html5-video-player:not(.ytp-transparent),
.youtubePlayerModal .html5-video-player.unstarted-mode,
.youtubePlayerModal .html5-video-player.ad-showing,
.youtubePlayerModal .html5-video-player.ended-mode {
  background-color: transparent !important;
}

.youtubePlayerModal .ant-modal-content .youtubeBox > div:has(iframe) {
  width: 100%;
  /*height: 100%;*/
  margin-top: 96px;
}
/* .youtubePlayerModal .ant-modal-content .youtubeBox > div:has(iframe) {
  border-radius: 12px;
  overflow: hidden;
} */

.youtubePlayerModal .ant-modal-content .youtubeBox iframe {
  width: 100%;
}

.youtubePlayerModal .ant-modal-content .btnBox {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 1.5vw;
  pointer-events: none;
  margin-top: 96px;
}
.youtubePlayerModal .ant-modal-content .btnBox button {
  width: 5vw;
  min-width: 0 !important;
  min-width: initial !important;
  max-width: 76px;
  min-height: 8vw;
  max-height: 160px;
  background-color: rgba(255, 255, 255, 0.1) !important;
  border: medium none currentColor;
  border: initial;
  color: #fff;
  pointer-events: auto;
}
.youtubePlayerModal .ant-modal-content .btnBox button:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.youtubePlayerModal .iconBox img {
  cursor: pointer;
}
.youtubePlayerModal .iconBox button.ant-switch.artist-mv-block.ant-switch-checked {
  background-color: #e94cf7;
}

/* 관리자 앨범관리 */
.albumSongListModal .aui-grid-default-column img {
  cursor: pointer;
}

@media (max-width: 1800px) {
  .youtubePlayerModal .ant-modal-content .youtubeBox {
    max-height: none;
    max-height: initial;
  }
  .youtubePlayerModal .ant-modal-content .youtubeBox iframe {
   /*  min-height: 47.5vw; */
   max-height: calc(100vh - 96px);
  }
}
@media (max-width: 1518px) {
  #listWrapper #otherWrapper .profileTitle2 {
    padding: 20px;
  }
}
@media (max-width: 1100px) {
  #listWrapper #otherWrapper .slick-list .staffBox .absoluteBox .greyBox > div > div:has(.imgBox),
  #listWrapper #otherWrapper .slick-list .staffBox .absoluteBox .greyBox > div:has(.imgBox) {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: start;
    width: calc(100% - 16px);
  }
  .profileSection #listWrapper #otherWrapper .slick-list .staffBox .absoluteBox .greyBox div .imgBox,
  #listWrapper #otherWrapper .slick-list .staffBox .absoluteBox .greyBox > div > div .imgBox {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
  }
  #listWrapper #otherWrapper .slick-list .staffBox .absoluteBox .greyBox > div > div:has(.imgBox) p {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    width: 100%;
  }
  .youtubePlayerModal .ant-modal-content .youtubeBox > div:has(iframe) {
    margin-top: 0;
  }
  .youtubePlayerModal .ant-modal-content .youtubeBox iframe {
    max-height: none;
    max-height: initial;
  }
  .youtubePlayerModal .ant-modal-content .btnBox {
    margin-top: 0;
  }
}

/* 모바일 가로 */
@media (max-width: 950px) and (orientation: landscape) {
  .ant-modal-wrap:has(.youtubePlayerModal) {
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  #listWrapper #otherWrapper .profileTitle2 {
    border-top: none;
  }
  #listWrapper #otherWrapper .slick-list .staffBox .absoluteBox .greyBox > div > div:has(.imgBox) {
    width: 100%;
  }
  #listWrapper #otherWrapper .slick-list .staffBox .absoluteBox .greyBox > div:has(.imgBox) {
    width: calc(100% - 8px);
  }
  .youtubePlayerModal .ant-modal-content .youtubeBox {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-50% - 96px));
    z-index: 1;
    width: 100%;
    padding: 0 8vw;
    margin-top: 96px;
  }
  .youtubePlayerModal .ant-modal-content .ant-modal-body {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 0 !important;
  }
  .youtubePlayerModal .ant-modal-content .modalHeader {
    flex-direction: column;
    justify-content: start;
    align-items: start;
    gap: 5px;
    width: 100%;
    height: 91px;
    padding: 16px 8vw;
  }
  .youtubePlayerModal .ant-modal-content .modalHeader .titleBox {
    flex-direction: row;
    gap: 5px;
    width: 100%;
  }
  .youtubePlayerModal .ant-modal-content .modalHeader .titleBox h3 {
    margin-bottom: 0;
    font-size: 20px;
  }
  .youtubePlayerModal .ant-modal-content .modalHeader .titleBox .badge-originM {
    padding: 4px 12px;
    font-size: 12px;
  }
  .youtubePlayerModal .ant-modal-content .youtubeBox {
    min-height: calc(100vh - 91px);
    position: relative;
    top: auto;
    top: initial;
    left: auto;
    left: initial;
    transform: none;
    transform: initial;
    margin-top: 0;
    padding-bottom: 2vw;
  }
  .youtubePlayerModal .ant-modal-content .youtubeBox > div > div:has(iframe) {
    position: relative;
    /* width: 100%;
    height: 100%;
    overflow: hidden; */
  }
  .youtubePlayerModal .ant-modal-content .youtubeBox iframe {
    /* position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    transform: translate(-50%, -50%);
    width: 177vh;
    height: 100vh; */
    position: relative;
    z-index: 1;
  }
}

/* 태블릿 세로 */
@media (orientation: portrait) and (min-width: 768px) and (max-width: 1024px) {
  .youtubePlayerModal .ant-modal-content .youtubeBox iframe {
    height: 40vw;
  }
}

/* 모바일 세로 */
@media (orientation: portrait) and (max-width: 700px) {
  .youtubePlayerModal {
    top: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    max-width: initial !important;
    width: 100% !important;
    height: 100vh;
  }
  .ant-modal.youtubePlayerModal .ant-modal-close {
    top: 20px;
    right: 20px;
  }
  .youtubePlayerModal .ant-modal-content .ant-modal-body {
    width: 100%;
    height: 100vh;
    padding: 16px 0 !important;
  }
  .youtubePlayerModal .ant-modal-content .modalHeader {
    flex-direction: column;
    align-items: start;
    gap: 16px;
    padding: 0 16px;
  }
  .youtubePlayerModal .ant-modal-content .modalHeader .titleBox {
    justify-content: start;
    width: calc(100% - 30px);
  }
  .youtubePlayerModal .ant-modal-content .modalHeader .titleBox h3 {
    font-size: 20px;
  }
  .youtubePlayerModal .ant-modal-content .modalHeader .titleBox .badge-originM {
    padding: 4px 12px;
  }
  .youtubePlayerModal .ant-modal-content .youtubeBox {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    width: 100%;
    min-height: 0;
    min-height: initial;
    padding: 0 8vw;
    margin-top: 0;
  }
  .youtubePlayerModal .ant-modal-content .youtubeBox iframe {
    position: relative;
    z-index: 1;
    width: 100%;
    /*height: auto;*/
  }
  .youtubePlayerModal .ant-modal-content .btnBox {
    padding: 0;
    pointer-events: none;
  }
  .youtubePlayerModal .ant-modal-content .btnBox button {
    min-height: 60px;
    width: 30px;
    height: 60px !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    pointer-events: auto;
  }
}

@media (max-width: 700px) {
  #musicWrapper .content .searchBox .tabBox,
  #otherWrapper .content .searchBox .tabBox,
  #artistHome .tabBox {
    padding: 4px;
  }
  #musicWrapper .content .searchBox .tabBox .tab,
  #otherWrapper .content .searchBox .tabBox .tab,
  #artistHome .tabBox .tab {
    padding: 4px 8px;
    margin: 0;
  }
  #listWrapper #otherWrapper .slick-list .staffBox .absoluteBox .greyBox div > h1 {
    font-size: 12px;
    line-height: 1;
  } /* 프롬프트 랭크 아이콘 */
  div.promptRankIcon::before {
    margin: -4px 0 0;
  }
}
/* 기타 모달창 */
.ant-modal-body .confirmResponse .content {
  margin: 20px 0;
}
.ant-modal-body .confirmResponse button {
  min-width: 100px;
  height: 40px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
}
.ant-modal-body .confirmResponse .content .mainResponseText {
  font-size: 18px;
}
.ant-modal-body .confirmResponse .content .subResponseText {
  font-size: 14px;
}

.ant-modal-body .confirmResponse .content {
}

/* 아티스트 */
.l-artist__content button.btn-view {
  margin: auto;
}
button.btn-view:disabled:hover {
  cursor: not-allowed;
}
.td.trackInfo .trackInfo__list .artist img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}
.td.trackInfo .trackInfo__list .artist::before {
  display: none;
}

button.ant-switch.artist-mv-stat {
  width: 100px;
  height: 34px;
  line-height: 34px;
  font-family: pretendard;
}
button.ant-switch.artist-mv-stat.ant-switch-checked {
  background-color: #e94cf7;
}
button.ant-switch.artist-mv-stat .ant-switch-handle {
  top: 3px;
  width: 28px;
  height: 28px;
}
button.ant-switch.artist-mv-stat.ant-switch-checked .ant-switch-handle {
  inset-inline-start: calc(100% - 33px);
}
button.ant-switch.artist-mv-stat .ant-switch-inner .ant-switch-inner-unchecked {
  margin-top: -34px;
}
button.ant-switch.artist-mv-stat:active .ant-switch-handle::before {
  inset-inline-end: 0%;
}
button.ant-switch.artist-mv-stat:active.ant-switch-checked .ant-switch-handle::before {
  inset-inline-start: 0%;
}
button.btn-download:disabled {
  cursor: not-allowed;
  background: url(../../static/media/i-downG.f8789f35a4f9e133d29e.svg) no-repeat center #dfdce4 !important;
}
button.btn-round.upload:disabled {
  cursor: not-allowed;
}

/* 아이콘 */
.aiMusic::before {
  background: url(../../static/media/i-ai-music.9b49ce504234adf6cc90.svg);
}

/* 대항전 */
.ant-modal .ant-modal-body .ready-song-confirm .ready-song-value {
  color: #c718e2;
}
/* .ant-modal .ant-modal-body #custom-confirm .btn-confirm {
  width: 130px;
} */

/* 판매 현황 */
/* .infoCount p {
  font-size: 12px;
}
.infoCount p.infoArtistWh {
  line-height: 22px;
  display: flex;
  gap: 4px;
}
.infoCount p.infoArtistWh img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
} */

@media (max-width: 1518px) {
  .prompt-detail-prev .ant-tooltip-content #engineWrapper .rsWrapper {
    width: 1520px;
    padding: 0;
  }
  #listWrapper #otherWrapper .rsWrapper {
    padding: 8px 0;
    width: 100%;
  }
  #listWrapper #otherWrapper .slider-container2#populerPromptSlider {
    padding: 0 16px;
  }
}

@media (max-width: 1280px) {
  .prompt-detail-prev .ant-tooltip-content #engineWrapper .rsWrapper {
    width: 1100px;
    padding: 0;
  }
  #listWrapper #otherWrapper .profileTitle,
  #listWrapper #otherWrapper .profileTitle2 {
    width: 100%;
  }
  #listWrapper #otherWrapper #populerPromptSlider {
    width: 100%;
  }
  /* #otherWrapper .filter .rsWrapper .title h2 {
    margin-left: 20px;
  } */
  /* #header .rsWrapper .cartWrapper {
    display: none;
  } */
}

@media (max-width: 1100px) {
  .prompt-detail-prev .ant-tooltip-content #engineWrapper .rsWrapper {
    width: 1100px;
    padding: 0;
  }
  #header .rsWrapper .userWrapper {
    width: 280px;
    position: fixed;
    top: 0;
    right: 0;
    background: #ffffff;
    padding: 40px 18px;
    z-index: 1000;
    min-height: 100vh;
    /* height: 100vh; */
    justify-content: flex-start;
    overflow-y: auto;
    transition: all 0.2s ease-in-out;
    opacity: 1 !important;
    bottom: 0;
  } /* yjlee 에서 정의한 프롬프트 레이아웃 컨트롤 */
  #listWrapper #otherWrapper .staffBox .absoluteBox .greyBox {
    align-items: start;
  }
  #listWrapper #otherWrapper .staffBox .absoluteBox .greyBox > div > div {
    flex-direction: column;
    align-items: start;
  }
  #listWrapper #otherWrapper .staffBox .absoluteBox .greyBox > div > div p {
    width: 100%;
    text-align: right;
  }
  #header .mobileMyMenuHeader {
    display: flex;
  }
  #header .userWrapper div > img {
    width: 20px;
  }
  #header .userWrapper > div:first-child {
    padding: 0 0 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    margin: 0 0 8px;
  }
  /* 마이 메뉴: header top right */
  /* #header .userWrapper .mobileIconBox .close_icon {
    width: auto;
  } */

  #header .userWrapper .mobileIconBox {
    width: auto;
  }
  #header .userWrapper .mobileIconBox div {
    position: relative;
  }
  #header .userWrapper .mobileIconBox div .round {
    width: 8px;
    height: 8px;
    border-radius: 100%;
    position: absolute;
    top: 0;
    right: 16px;
    background: #fe5139;
  }
  #header .userWrapper .mobileIconBox div:last-child .round {
    right: -4px;
  }
  #header .userWrapper .mobileIconBox div img {
    width: 20px;
    margin: 0 20px 0 0;
  }
  #header .userWrapper .mobileIconBox div:last-child img {
    width: 15px;
    margin: 0;
  }
  #header .rsWrapper .cartWrapper {
    display: none;
  }
}

@media (max-width: 900px) {
  #popularSlider .list > div .absoluteBox .user div.promptRankIcon {
    display: none;
  }
  #popularSlider .list > div .absoluteBox .thumbnail {
    height: 124px;
  }
  #popularSlider .list > div .absoluteBox .thumbnail .user {
    padding: 0;
  }
  #popularSlider .list > div .absoluteBox p {
    font-size: 12px;
    padding: 0 8px;
  }
  .Section #listWrapper .rsWrapper .staff .staffList .staffBox .absoluteBox .thumbnail > h2,
  .Section #listWrapper .rsWrapper .newContents .staffList .staffBox .absoluteBox .thumbnail > h2 {
    font-size: 12px;
  }

  #listWrapper .rsWrapper .newContents .staffList .staffBox .absoluteBox .thumbnail > h2 {
    font-size: 16px;
  }

  /* 서브메인 페이지 */
  #otherWrapper .rsWrapper > div .content .listBox {
    justify-content: space-between;
  }
  #musicWrapper .rsWrapper > div .content .searchBox #subFilter,
  #otherWrapper .rsWrapper > div .content .searchBox #subFilter {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  #musicWrapper .content .searchBox .tabBox,
  #otherWrapper .content .searchBox .tabBox {
    /*  max-width: 124px; */
  }
  #musicWrapper .content .searchBox #subFilter div.flexRowCenter:nth-child(2),
  #otherWrapper .content .searchBox #subFilter div.flexRowCenter:nth-child(2) {
    margin: 10px 0 0;
    justify-content: flex-start;
  }
  #musicWrapper .rsWrapper > div .content .listBox .list.tableHeader {
    display: none;
  }
  #mobileFilter .content .listBox div.searchBox {
    flex-wrap: nowrap;
  }
  #musicWrapper .rsWrapper > div .content .searchBox > div {
    width: auto;
    justify-content: space-between;
  }
  #otherWrapper .rsWrapper > div .content .searchBox > div {
    width: auto;
    justify-content: space-between;
  }
  .titleBox .flexSearchBox {
    display: none;
  }
  .buttonGroup.allShowButtonFlex,
  #musicWrapper .rsWrapper > div .content .searchBox > div:nth-child(2).buttonGroup.allShowButtonFlex {
    display: flex;
  }

  /* 서브메인 상세 페이지 */

  #detail .top .rsWrapper .right .priceBox > div {
    width: 100%;
  }
  article .top .rsWrapper .right .mobilePrice #purpleBtn {
    width: 100%;
    display: flex;
    /* max-width: 200px; */
    /* margin: 0 0 0 16px; */
  }
  #detail .top .rsWrapper .right .priceBox > div.downloadBox {
    display: none;
  }
  #detail .top .rsWrapper .right .userInfo > div {
    width: 100%;
  }
  #detail .top .rsWrapper .right .userInfo > div .goList {
    display: flex;
    padding: 4px 12px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 24px;
    border: 1px solid #dfdce4;
  }

  #detail .top .rsWrapper .right .user > div {
    /* width: 100%; */
  }
  article#detail .top .rsWrapper .right .orderFirst {
    order: 1;
  }
  article#detail .top .rsWrapper .right .orderFirst > div:last-child {
    gap: 12px;
  }
  article .top .rsWrapper .right .mobilePrice {
    /* width: auto; */
  }
  /* article .top .rsWrapper .right .mobilePrice #darkGrey {
    width: 95px;
    height: 35px;
    border-radius: 4px;
    display: flex;
    padding: 0 8px;
  } */

  #otherWrapper .rsWrapper .staff .staffList .staffBox:nth-child(3n),
  #otherWrapper .rsWrapper .newContents .staffList .staffBox:nth-child(3n),
  #otherWrapper .rsWrapper .staff .staffList .staffBox,
  #otherWrapper .rsWrapper .newContents .staffList .staffBox {
    width: calc(50% - 10px);
  }

  /* tooltip */
  .prompt-detail-prev .ant-tooltip-content #engineWrapper .rsWrapper {
    width: 650px;
    padding: 0;
  }

  /* 슬라이드 */
  #newWrapper #newSlider .slick-slide.slick-current {
    transform: scale(1.6);
    padding: 0;
    opacity: 1;
  }
  #newWrapper #newSlider .slick-slide {
    opacity: 1;
  }

  /* 음원공간 */
  #musicWrapper .rsWrapper > div .content .listBox .list .engineerRank,
  #musicWrapper .rsWrapper > div .content .listBox .list .genre,
  #musicWrapper .rsWrapper > div .content .listBox .list .desc {
    display: none;
  }
  #musicWrapper .rsWrapper > div .content .listBox .list .titleBox .title.showText {
    padding: 0;
    margin: 0;
    align-items: center;
  }
  #musicWrapper .rsWrapper > div .content .listBox .list .titleBox .artistbox {
    height: 20px;
  }
  #musicWrapper .rsWrapper > div .content .listBox .list .titleBox .artistbox p.i-playHit {
    background: url(../../static/media/i-play.405efc4051266ee74660.svg) no-repeat left center;
    padding-left: 20px;
    height: 20px;
    line-height: 20px;
  }
  #musicWrapper .rsWrapper > div .content .listBox .list .titleBox .artistbox p.i-panHit {
    background: url(../../static/media/i-fan.80c00af8935350644cf2.svg) no-repeat left center;
    padding-left: 20px;
    height: 20px;
    line-height: 20px;
  }
  #musicWrapper .rsWrapper > div .content .listBox .list .titleBox .artistbox p.i-engineerRank {
    background: url(../../static/media/i-engineer_rank.d247164399facf7f4e65.svg) no-repeat left center;
    padding-left: 20px;
    height: 20px;
    line-height: 20px;
  }
  #musicWrapper .rsWrapper > div .content .listBox .list .titleBox .artistbox p.i-genre {
    background: url(../../static/media/i-genre.f02a53f7bd1fd3839581.svg) no-repeat left center;
    padding-left: 20px;
    height: 20px;
    line-height: 20px;
  }
  #musicWrapper .rsWrapper > div .content .listBox .list .titleBox .artistbox p.i-musicDesc {
    background: url(../../static/media/i-desc.1cef4ff3ac5e538427cc.svg) no-repeat left center;
    padding-left: 20px;
    height: 20px;
    line-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 120px;
  }
  #musicWrapper .rsWrapper > div .content .listBox .list .titleBox .title.showText div p {
    display: block;
  }
  #musicWrapper .rsWrapper > div .content .listBox .list .video {
    width: auto;
    margin: 0 0px 0 4px;
  }
  #musicWrapper .rsWrapper > div .content .listBox .list .btn.play.mobile {
    padding: 0;
    width: 20px;
  }
  #musicWrapper .rsWrapper > div .content .listBox .list .anticon-more {
    margin-left: 0;
  }
  #musicWrapper .rsWrapper > div .content .listBox .list .anticon-more svg {
    display: none;
  }
  .spread-button.musicList .ant-dropdown-menu-item .ant-dropdown-menu-title-content {
    /* display: flex; */
  }
  .spread-button.musicList .ant-dropdown-menu-item .ant-dropdown-menu-title-content .dropdown-label-item {
    display: flex;
  }
  .spread-button.musicList .ant-dropdown-menu-item .ant-dropdown-menu-title-content .heart,
  .spread-button.musicList .ant-dropdown-menu-item .ant-dropdown-menu-title-content .siren,
  .spread-button.musicList .ant-dropdown-menu-item .ant-dropdown-menu-title-content .keep {
    background-color: transparent;
    background-color: initial;
    border-radius: 0;
    border-radius: initial;
    cursor: pointer;
    padding: 0 0px;
    position: relative;
    width: 26px;
  }
  .spread-button.musicList .ant-dropdown-menu-item .ant-dropdown-menu-title-content .heart img.activeIcon,
  .spread-button.musicList .ant-dropdown-menu-item .ant-dropdown-menu-title-content .siren img.activeIcon,
  .spread-button.musicList .ant-dropdown-menu-item .ant-dropdown-menu-title-content .keep img.activeIcon {
    background: #fff;
    opacity: 0;
    position: absolute;
    transition: all 0.2s ease-in-out;
    width: 100%;
  }
  .spread-button.musicList .ant-dropdown-menu-item .ant-dropdown-menu-title-content .heart img,
  .spread-button.musicList .ant-dropdown-menu-item .ant-dropdown-menu-title-content .siren img,
  .spread-button.musicList .ant-dropdown-menu-item .ant-dropdown-menu-title-content .keep img {
    width: 100%;
  }
  .spread-button.musicList .ant-dropdown-menu-item .ant-dropdown-menu-title-content .heart#active img.activeIcon,
  .spread-button.musicList .ant-dropdown-menu-item .ant-dropdown-menu-title-content .siren#active img.activeIcon,
  .spread-button.musicList .ant-dropdown-menu-item .ant-dropdown-menu-title-content .keep#active img.activeIcon {
    opacity: 1;
  }

  /* 아티스트 */
  .l-artist__content .cardList {
    justify-content: space-between;
  }
  button.ant-switch.artist-mv-stat {
    width: 100px;
    height: 34px;
    line-height: 34px;
    font-family: pretendard;
  }

  button.ant-switch.artist-mv-stat {
    width: 80px;
    height: 26px;
    line-height: 26px;
  }
  button.ant-switch.artist-mv-stat .ant-switch-handle {
    top: 2px;
    width: 22px;
    height: 22px;
  }
  button.ant-switch.artist-mv-stat.ant-switch-checked .ant-switch-handle {
    inset-inline-start: calc(100% - 25px);
  }
  button.ant-switch.artist-mv-stat .ant-switch-inner .ant-switch-inner-unchecked {
    margin-top: -26px;
  }
  #listWrapper #otherWrapper .profileTitle {
    padding: 12px 0 12px;
    margin: 12px;
  }

  #listWrapper #otherWrapper .slick-list .staffBox {
    border: 10px solid #0000;
    border-radius: 24px;
    margin: -8px;
    width: 100%;
  }
  /* .profileSection #listWrapper #otherWrapper .slick-list .staffBox {
    margin: 0 0px 0px -8px;
    border: 11px solid transparent;
    border-radius: 24px;
  } */
}

@media (max-width: 800px) {
  #musicWrapper .rsWrapper > div .content .listBox .list .titleBox .title {
    width: 100%;
  }
  #musicWrapper .rsWrapper > div .content .listBox .list .titleBox .userBox {
    width: 100%;
    gap: 8px;
  }
  #musicBox.player {
    height: auto;
  }
  /*   #myProfile .myInfo .content .box .thumbUpdate .plusBox .plus,
  #myProfile .myInfo .content .info .plusBannerBox .plus {
    margin: auto !important;
  } */
}

@media (max-width: 700px) {
  #populerPromptSlider .arrowLeft {
    left: -10px;
  }
  #listWrapper #otherWrapper .slick-list .staffBox .absoluteBox .thumbnail,
  #popularSlider .list > div .absoluteBox .thumbnail,
  #listWrapper .rsWrapper .newContents .staffList .staffBox .absoluteBox .thumbnail,
  #listWrapper .rsWrapper .staff .staffList .staffBox:hover .absoluteBox .hover-bg {
    /* height: 87.75px; */
    height: 0;
    padding-bottom: calc(198 / 352 * 100%);
  }
  #listWrapper .rsWrapper .newContents .staffList .staffBox:hover .absoluteBox .hover-bg,
  #listWrapper #otherWrapper .slick-list .staffBox:hover .absoluteBox .hover-bg,
  #listWrapper .rsWrapper .newContents .staffList .staffBox:hover .absoluteBox .play > img {
    display: none;
  }
  /* #gerneWrapper .rsWrapper .listBox .gerneBox {
    width: calc(14.2857142857% - 25px);
    margin: 0 29px 40px 0;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25);
  } */

  /* yjlee 에서 정의한 프롬프트 레이아웃 컨트롤 */
  #listWrapper #otherWrapper .staffBox .absoluteBox .greyBox {
    align-items: start;
  }
  #listWrapper #otherWrapper .staffBox .absoluteBox .greyBox > div > div {
    flex-direction: column;
    align-items: start;
  }
  #listWrapper #otherWrapper .staffBox .absoluteBox .greyBox > div > div p {
    width: 100%;
    text-align: right;
  }
  #listWrapper #otherWrapper #populerPromptSlider {
    width: 100%;
    padding: 0;
  }
  #musicWrapper .rsWrapper > div .content h4.musicSpaceNotice {
    font-weight: 600;
    font-size: 11px;
    padding: 8px 0;
  }
  #musicWrapper .rsWrapper > div .content .listBox .list:hover,
  #musicWrapper .rsWrapper > div .content .listBox .list {
    border-bottom: none;
    border-radius: 8px;
  }

  #detail #listWrapper #otherWrapper .slider-container2#populerPromptSlider .slick-current > div {
    /* margin-bottom: 8px; */
  }
}

@media (max-width: 400px) {
  /* 메인 페이지 */
  .mainIcon {
    width: 83px;
    margin: -80px 0 0;
  }

  /* 서브 메인 상세 */
  #detail .rsWrapper .btnArea .approval {
    min-width: 60px;
    max-width: 80px;
  }

  .profileSection #detail .rsWrapper .btnArea .approval {
    min-width: 100px;
  }
  #listWrapper #otherWrapper .slick-list .staffBox {
    border: 10px solid #0000;
    border-radius: 24px;
    margin: 0 0 0 -8px;
    width: 104%;
  }
}

.param_title {
  font-size: 16px;
  font-weight: bold;
  padding: 5px;
}

.promptSaveGuide {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-bottom: 16px;
}

.promptSaveGuide h1 {
  background: linear-gradient(90deg, #ca79fc 0%, #ff5eb6 100%);
  font-weight: 700;
  color: transparent;
  text-align: center;
  -webkit-background-clip: text;
  margin: 0 0 10px;
  line-height: 1.2;
}

.termsTable {
  width: 100%;
}

.termsTable > thead {
  border: 1px solid;
}

.termsTable > thead > tr {
  border: 1px solid;
  font-weight: bold;
}

.termsTable > thead > tr > td {
  border: 1px solid;
  text-align: center;
  height: 30px;
}

.termsTable > tbody {
  border: 1px solid;
}

.termsTable > tbody > tr {
  border: 1px solid;
}

.termsTable > tbody > tr > td {
  border: 1px solid;
  height: 30px;
  padding: 4px 8px;
  line-height: 1.4;
}

.divCenter {
  display: grid;
  place-items: center;
}

#detail .promptThumList {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 1600px;
  padding: 24px 16px 48px;
  gap: 4px;
}

.whiteBackground {
  background: #ffffff !important;
}

.grayBackground {
  background: rgba(0, 0, 0, 0.04) !important;
}

.selectedButton {
  background: #525162 !important;
  color: #fff !important;
  border: 1px solid transparent !important;
}

/* applyModal 내 Input hover 스타일 제거 */
.applyModal .ant-input:hover,
.applyModal .ant-input:focus {
  background-color: rgba(0, 0, 0, 0.04) !important;
  border-color: #d9d9d9 !important;
  box-shadow: none !important;
}

/* applyModal 내 Select hover 스타일 제거 */
.applyModal .ant-select:hover .ant-select-selector {
  /* background-color: rgba(0, 0, 0, 0.04) !important;
  border-color: #d9d9d9 !important;
  box-shadow: none !important; */
}

@charset "UTF-8";
/* PC 및 모바일 노출 클래스 */
.nonePC {
  display: none !important;
}
@media (max-width: 700px) {
  .nonePC {
    display: block !important;
  }
  .noneM {
    display: none !important;
  }
}
/* 한줄처리 클래스 */
.hiddenText {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* 커서 */
.cursor {
  cursor: pointer;
}

/* Ant Image UI Custom */
.ant-image-preview-switch-left,
.ant-image-preview-switch-right
/* ,
.ant-image-preview-switch-left-disabled,
.ant-image-preview-switch-right-disabled*/ {
  background: rgba(0, 0, 0, 0.2);
  /* border: 1px solid rgb(255, 255, 255, 0.25); */

  max-width: 80px;
  width: 100%;
  height: 160px;
  border-radius: 0;
  border: 0;
}

.ant-image-preview-switch-left-disabled,
.ant-image-preview-switch-right-disabled {
  background: rgba(0, 0, 0, 0);
}
.ant-image-preview-switch-left-disabled svg,
.ant-image-preview-switch-right-disabled svg {
  filter: brightness(0.3);
}
.ant-image-preview-switch-left:not(.ant-image-preview-switch-left-disabled):hover,
.ant-image-preview-switch-right:not(.ant-image-preview-switch-right-disabled):hover {
  background: rgba(0, 0, 0, 0.8);
  /* border: 1px solid rgb(255, 255, 255, 0.45); */
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
}
.ant-input-show-count-suffix,
.ant-input-textarea-show-count .ant-input-data-count {
  position: absolute;
  bottom: -1px;
  right: 5px;
  font-size: 9px;
}

/*================================
Ant Upload Custom
================================*/
.l-upload {
  min-width: 100px;
  min-height: 100px;
  border: 1px dashed #e21dfd;
  border-radius: 8px;
  overflow: hidden;
}
.l-upload:has(.imageContainer) {
  border: none;
}
.l-upload > * {
  height: 100%;
  color: #c49bcc;
  background-color: #fcf7fd;
}
.l-upload .ant-upload {
  display: block !important;
}
.l-upload .plus {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #f0dbf4;
}
/* 배너형 */
.l-upload.banner {
  display: block;
  width: 100%;
  min-width: 100%;
  min-height: fit-content;
  padding: 10px 0;
  background-color: #fcf7fd;
}
.l-upload.banner:has(.l-file) {
  border: none;
  background-color: transparent;
}
/* 파일 업로드 */
.l-file {
  display: flex;
  align-items: center;
  width: 100%;
  color: #000;
}
/* 앨범 등록 아이콘 */
.l-table .l-upload .plus {
  font-size: 25px;
}

/*================================
Ant Modal Custom
================================*/
.ant-modal-body {
  line-height: auto;
}
.ant-modal-content {
  overflow: hidden;
}
@media (max-width: 700px) {
  .ant-modal-body:has(.modalReceipt) {
    padding: 0 20px 30px 20px !important;
  }
}
.ant-modal .ant-modal-close {
  width: 20px;
  height: 20px;
  top: 16px;
  right: 20px;
  z-index: 11;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwBAMAAAClLOS0AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAASUExURUdwTAAAAAAAAAAAAAAAAAAAAFZgiOcAAAAFdFJOUwBgX5/ffhjBrwAAAKtJREFUOMt1lMkVgCAMBUMR3C1CK/DZgEr/rQiIyPLHW8IfDNlsXUx87rJwqgN/mw8CcVHuFJLVAnnFAinaCfmkE1KVA/ILB6TRdUgr65BO1Rj9vY01RFLNMfZqT68tjjk/xSMyml2qBtknqxadsmgJkUBCdGNERAN8QFfhzylcfCClBJNIacdCUWmxGah9sOGoRbGpaQxwcGjUcDhpnHEB4Mo49JIJtum1tD/T6DbbeF1PlgAAAABJRU5ErkJggg==) no-repeat center;
  background-size: contain;
}
.ant-modal .ant-modal-close span {
  display: none;
}
.ant-modal .ant-modal-close:hover {
  background-color: inherit;
}
:where(.css-dev-only-do-not-override-5wsri9).ant-modal .ant-modal-content .ant-btn-primary {
  background-color: #a3a1a7;
}
.custom-modal-footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.custom-modal-footer button {
  min-width: 100px;
}
.ant-modal-body .btnArea button {
  min-width: 100px;
  height: 40px;
  font-size: 14px;
}
@media (max-width: 700px) {
  .ant-modal-body .btnArea button {
    width: 100%;
  }
}
/*================================
Modal Common
================================*/
/* 모달 안내문 */
.modal-notice {
  padding: 12px;
  border-radius: 8px;
  background-color: #eff8f9;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.7px;
  line-height: 1.2;
}
.modal-notice.design {
  min-height: 58px;
  align-items: center;
  display: flex;
  margin-bottom: 12px;
}
.modal-notice.design:has(+ .fanSearchBox div) {
  margin-bottom: 0;
}
.modal-notice .blue {
  color: #0d88d4;
}
.modal-notice i {
  display: inline-block;
  width: 14px;
  height: 14px;
  background: url(../../static/media/i-cautionBlue.0f401c3f7eef932c4543.svg) no-repeat center;
  background-size: contain;
}
.modal-notice a {
  text-decoration: underline;
}
/* 공통 */
.modal-common {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}
.modal-common h5 {
  margin-top: 24px;
  font-size: 16px;
  text-align: center;
}
.modal-common h6 {
  font-size: 13px;
  line-height: 1.3;
}
.modal-common p {
  font-size: 11px;
}
.modal-icon {
  display: block;
  width: 40px;
  height: 40px;
  margin-top: 24px;
  background-size: contain;
}
.modal-icon.download {
  background: url(../../static/media/i-downP.d4ddf963846ef8ec688f.svg) no-repeat center;
}
.modal-icon.upload {
  background: url(../../static/media/i-uploadP.ceaa0f5fafdef2fc656a.svg) no-repeat center;
}
/*================================
Modal Contents
================================*/
.modalContent {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  padding: 8px;
}
.modalContent .ticketList {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: 560px;
  overflow-y: scroll;
}
.modalContent .notice {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 0;
  margin-top: 10px;
  border-top: 1px dashed #c4c3c7;
  font-size: 12px;
  font-weight: 500;
  color: #a3a1a7;
}
.modalContent .notice p:first-child {
  color: #000;
}
/* antd design.css 영향 받는 부분 */
.modal-inputBox input.ant-input {
  display: inherit !important;
  height: fit-content !important;
  padding: 0 !important;
  border-radius: 0 !important;
  border: none !important;
  background: none !important;
}
@media (max-width: 700px) {
  .download-modal h6 br {
    display: none;
  }
}
/*================================
열혈 팬 모달
================================*/
.modalFan {
  border-radius: 8px;
  overflow: hidden;
}
.modalFan .tabBox {
  max-width: fit-content !important;
  text-wrap: nowrap;
}
.modalFan .modal-inputBox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 16px 0;
  /* border-bottom: 2px solid #000; */
}
.modalFan .modal-inputBox .result {
  min-width: 76px;
  font-size: 16px;
}
.modalFan .modal-inputBox > div {
  display: flex;
  align-items: center;
  gap: 8px;
}
.modalFan .modal-inputBox button {
  height: 40px;
  padding: 0 10px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  border-color: #6d6c75;
}

.modalFan .modal-inputBox .btn-red,
.modalFan .modal-inputBox .btn-white {
  border-radius: 8px;
}

.modalFan .modal-inputBox input.ant-input {
  height: 40px;
  padding: 0 !important;
  border-radius: 4px !important;
  border: inherit;
}
.modalFan .modal-inputBox button.btn-searchIcon {
  min-width: 40px;
}
.modalFan .modal-inputBox .search {
  display: none;
}

.modalFan .ant-modal-content .ant-modal-body .l-table .tableBody {
  max-height: 350px;
  overflow: auto;
  min-height: 350px;
}

@media (max-width: 700px) {
  .modalFan {
    width: 100% !important;
    max-width: 100% !important;
    height: 100vh;
    margin: 0 !important;
    top: 0;
    border-radius: 0;
  }
  .modalFan .ant-modal-title {
    justify-content: start !important;
    margin-bottom: 30px;
    padding-top: 50px !important;
    font-size: 26px !important;
  }
  .modalFan .ant-modal-content {
    border-radius: 0;
    height: 100vh;
  }
  .modalFan .ant-modal-content .ant-modal-header {
    justify-content: start;
    margin: 0;
  }
  .modalFan .ant-modal-content .ant-modal-body {
    padding: 0 16px !important;
  }
  .modalFan .ant-modal-content .ant-modal-body .searchBox {
    justify-content: start !important;
    margin: 0 !important;
  }
  .modalFan .modal-inputBox {
    position: relative;
  }
  .modalFan .modal-inputBox .btn-search {
    width: 32px;
    height: 32px;
    background: url(../../static/media/i-search.32412c02ca18f3d62907.svg) no-repeat center/18px;
  }
  .modalFan .modal-inputBox .search {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 0;
    background-color: #fff;
  }
  .modalFan .modal-inputBox .search.show {
    display: flex;
  }
  .modalFan .modal-inputBox .search input {
    flex: 1 1;
  }
  .modalFan .modal-inputBox .search .btn-close {
    width: 20px;
    height: 40px;
    padding: 0;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwBAMAAAClLOS0AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAASUExURUdwTAAAAAAAAAAAAAAAAAAAAFZgiOcAAAAFdFJOUwBgX5/ffhjBrwAAAKtJREFUOMt1lMkVgCAMBUMR3C1CK/DZgEr/rQiIyPLHW8IfDNlsXUx87rJwqgN/mw8CcVHuFJLVAnnFAinaCfmkE1KVA/ILB6TRdUgr65BO1Rj9vY01RFLNMfZqT68tjjk/xSMyml2qBtknqxadsmgJkUBCdGNERAN8QFfhzylcfCClBJNIacdCUWmxGah9sOGoRbGpaQxwcGjUcDhpnHEB4Mo49JIJtum1tD/T6DbbeF1PlgAAAABJRU5ErkJggg==) no-repeat center;
    background-size: 70%;
    font-size: 0;
    color: transparent;
  }
  .modalFan .ant-modal-content .ant-modal-body .l-table .tableBody {
    max-height: calc(100dvh - 100px);
    padding-bottom: 50px;
  }
  .modalFan .ant-modal-content .ant-modal-body .panList .l-table .tableBody {
    max-height: calc(100dvh - 250px);
  }
}
/*================================
후원하기모달
================================*/
.modalSupport {
  width: 800px !important;
}
.modalSupport .ant-modal-body {
  padding: 0 !important;
  color: #0e0e0f;
}
.modalSupport .btn-fan {
  border-radius: 5px;
}
.modalSupport .wrap {
  padding: 0 16px;
}
.modalSupport .wrap > .userInfo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  padding-bottom: 20px;
  border-bottom: 4px solid #0e0e0f;
}
.modalSupport .wrap > .userInfo img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  overflow: hidden;
  border-radius: 50%;
}
.modalSupport .wrap > .userInfo h3 {
  font-size: 20px;
  font-weight: 600;
}
.modalSupport .wrap > .userInfo h3 span {
  font-weight: 700;
}
.modalSupport .wrap > .content {
}
.modalSupport .wrap > .content > .content-top {
  padding: 40px 0;
  font-size: 24px;
  text-align: center;
  color: #c718e2;
}
.modalSupport .wrap > .content > .content-top p {
  font-size: 16px;
  font-weight: 600;
  color: #0e0e1f;
}
.modalSupport .wrap > .content > .supportList {
  padding-bottom: 8px;
  margin-bottom: 12px;
  border-bottom: 1px solid #dfdce3;
}
.modalSupport .wrap > .content > .supportList > li {
  display: flex;
  margin-bottom: 20px;
}
.modalSupport .wrap > .content > .supportList > li > .list-tit {
  width: 120px;
  font-size: 16px;
  font-weight: 700;
  color: #3e3d53;
}
.modalSupport .wrap > .content > .supportList > li > .list-tit span {
  display: block;
  font-size: 11px;
  font-weight: 600;
}
.modalSupport .wrap > .content > .supportList > li > .list-cont {
  flex: 1 1;
  min-width: 0;
}
.modalSupport .wrap > .content > .supportList > li > .list-cont .btnBox {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
/* 후원금액 버튼 */
.modalSupport .wrap > .content > .supportList > li > .list-cont .btnBox button {
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}
.modalSupport .wrap > .content > .supportList > li > .list-cont .btnBox button:hover {
  border: 1px solid #b041f3;
  box-shadow: 0px 0px 8px 0px rgba(236, 21, 255, 0.5);
}
.modalSupport .wrap > .content > .supportList > li > .list-cont .info {
  font-size: 12px;
}
.modalSupport .wrap > .content > .supportList > li > .list-cont .info i {
  display: inline-block;
  width: 28px;
  height: 28px;
  margin: 0 5px;
  vertical-align: middle;
  background: url(../../static/media/bad_support.ab2d7f97584c33c50a2c.svg) no-repeat center;
  background-size: contain;
}
.modalSupport .wrap > .content > .supportList > li > .list-cont .info span {
  text-decoration: underline;
}
.modalSupport .wrap > .content > .supportList > li > .list-cont .total {
  display: inline-block;
  height: 28px;
  padding: 6px 9px;
  vertical-align: middle;
  border-radius: 40px;
  font-size: 13px;
  color: #fff;
}
.modalSupport .wrap > .content > .supportList > li > .list-cont .total svg {
  margin-left: 20px;
  cursor: pointer;
}
.modalSupport .wrap > .content strong {
  padding-left: 20px;
  margin-left: 28px;
  background: url(../../static/media/i-cautionG.c967bcb1ffe33174c0ec.svg) no-repeat center left;
  background-size: 14px;
  color: #939ca7;
}
.modalSupport .wrap > .content > .content-bottom {
}
.modalSupport .wrap > .content > .content-bottom > li {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.modalSupport .wrap > .content > .content-bottom > li:nth-of-type(1) {
  justify-content: start;
}
.modalSupport .wrap > .content > .content-bottom > li h6 {
  font-size: 16px;
}
.modalSupport .wrap > .content > .content-bottom > li p {
  font-size: 14px;
}
.modalSupport .wrap > .content > .content-bottom > li > a {
  margin-left: auto;
  color: #0e0e0f;
  text-decoration: underline;
}
@media (max-width: 700px) {
  .modalSupport .wrap > .content > .content-top {
    padding: 20px 0 50px 0;
    font-size: 18px;
  }
  .modalSupport .wrap > .content > .content-top p {
    font-size: 14px;
  }
  .modalSupport .wrap > .content > .content-top p span:not(.c-blue) {
    display: block;
  }
  .modalSupport .wrap > .content > .supportList > li {
    flex-direction: column;
    margin-bottom: 30px;
  }
  .modalSupport .wrap > .content > .supportList > li > .list-tit {
    width: 100%;
  }
  .modalSupport .wrap > .content > .supportList > li > .list-tit span {
    float: right;
  }
  .modalSupport .wrap > .content > .supportList > li > .list-cont .btnBox {
    flex-wrap: wrap;
    gap: 8px;
  }
  .modalSupport .wrap > .content > .supportList > li > .list-cont .btnBox button {
    padding: 4px;
    font-size: 12px;
  }
  .modalSupport .wrap > .content > .content-bottom > li h6 {
    font-size: 14px;
  }
  .modalSupport .wrap > .content > .content-bottom > li p {
    font-size: 12px;
  }
  .modalSupport .ant-modal-footer {
    padding: 20px 16px 40px 16px !important;
  }
  .modalSupport .btn-fan {
    width: 100%;
  }
  .modal-notice.design {
    margin: 8px 0;
  }
}

/*================================
내 저장소 음원 모달
================================*/
.modalStorage .ant-modal-body {
  padding: 0 24px !important;
}
.modalStorage .l-header {
  align-items: center;
  height: fit-content;
  padding: 16px 0;
  border: none;
}
.modalStorage .l-header .infoBox p {
  display: inline-block;
  font-size: 16px;
  font-weight: 500;
  color: #000;
}
.modalStorage .l-header .infoBox p span {
  padding-left: 5px;
  color: #e94cf7;
}
.modalStorage .l-header .linkBox {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  margin-right: 5px;
}

.modalStorage .l-header .inputBox {
  display: flex;
  align-items: center;
  gap: 4px;
}
.modalStorage .l-header .inputBox .ant-select {
  width: 120px;
}
.modalStorage .l-header .inputBox button {
  min-width: 40px;
  height: 40px;
  border-radius: 4px;
}
.modalStorage .ant-modal-footer {
  padding: 16px 0 24px 0 !important;
  gap: 10px;
}
.modalStorage .ant-modal-footer button {
  min-width: 100px;
}
/* UI 세부조절 */
.modalStorage .td i {
  width: 18px;
  height: 18px;
}
.modalStorage .td .icon-link {
  width: 21px;
  height: 21px;
}
.modalStorage .td .badge-cate {
  padding: 2px 12px;
}
@media (max-width: 700px) {
  .modalStorage {
    top: 0;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .modalStorage .ant-modal-content {
    height: 100vh;
    border-radius: 0;
  }
  .modalStorage .ant-modal-header {
    height: 54px;
  }
  .modalStorage .ant-modal-body {
    padding: 0 16px !important;
    overflow: scroll;
  }
  .modalStorage .l-header {
    flex-direction: column;
    align-items: start;
    gap: 20px;
    margin-bottom: 10px;
  }
  .modalStorage .l-header .linkBox {
    margin: 0;
  }
  .modalStorage .l-header .inputBox {
    width: 100%;
  }
  .modalStorage .ant-modal-footer {
    height: 80px;
    padding: 30px 16px 30px 16px !important;
    margin-top: 0;
  }
  .modalStorage .ant-modal-footer button {
    flex: 1 1;
  }
  .modalStorage .td .title {
    font-size: 14px;
  }
  .modalStorage .td .badge-cate {
    min-width: 42px;
    padding: 4px;
    font-size: 11px;
  }
/*   .modalFan .ant-modal-content .ant-modal-body .l-table {
      max-height: 500px;
      overflow: auto !important;
  } */
}

/*================================
대항전 참가신청 모달
================================*/
.applyModal {
}
.applyModal .ant-modal-body {
  padding: 0 !important;
}
.applyModal .wrap {
  padding: 0 20px 12px 20px;
}
.applyModal .wrap > .notice > h5 {
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 700;
}
.applyModal .wrap > .notice > h5::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: 0 8px 0 8px;
  vertical-align: middle;
  background: url(../../static/media/i-cautionRed.62c55391e050dd5ba3bc.svg) no-repeat center;
  background-size: contain;
}
.applyModal .wrap > .notice > ul {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 16px 28px;
  margin-bottom: 20px;
  border-radius: 5px;
  background-color: #eff8f9;
}
/* .applyModal .wrap > .notice > ul li {
  line-height: 1;
} */

/* .applyModal .wrap > .notice > ul > li::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 3px;
  margin: 0 6px;
  vertical-align: middle;
  border-radius: 3px;
  background-color: #0e0e0f;
} */
.applyModal .wrap > form {
  display: flex;
  flex-wrap: wrap;
  column-gap: 12px;
  padding: 16px;
  border: 1px solid #c2b8cb;
  border-radius: 8px;
}
.applyModal .wrap > form > h3 {
  width: 100%;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}
.applyModal .wrap > form > .artistInfo {
  flex: 1 1;
  align-items: start;
  max-width: none;
}
.applyModal .wrap > form > .artistInfo > ul.infoList {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}
.applyModal .wrap > form > .artistInfo > ul.infoList > li {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.applyModal .wrap > form > .artistInfo > ul.infoList > li .ant-form-item {
  margin-bottom: 0;
}
.applyModal .wrap > form > .artistInfo > .artistType > div > div:nth-child(1),
.applyModal .wrap > form > .artistInfo > ul.infoList > li > div:nth-child(1) {
  min-width: 175px;
}
.applyModal .wrap > form > .artistInfo > ul.infoList > li > div:nth-child(2) {
  flex: 1 1;
}
.applyModal .wrap > form > .artistInfo > ul.infoList > li > div label {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 700;
  text-align: start;
  color: #464548;
  line-height: 1;
}
.applyModal .wrap > form > .artistInfo > ul.infoList > li > div > * {
  width: 100%;
}
.applyModal .wrap > form > .artistProfile {
  width: 140px;
  height: 140px;
  border: 1px solid #ccc;
  border-radius: 16px;
  overflow: hidden;
}
.applyModal .wrap > form > .artistProfile .ant-image {
  width: 100%;
  height: 100%;
}
.applyModal .wrap > form > .artistProfile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.applyModal .wrap > form > .artistInfo > .artistmemBox b {
  font-size: 12px;
  font-weight: 700;
  color: #464548;
}
.applyModal .wrap > form > .artistInfo > .artistmemBox ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.applyModal .wrap > form > .artistInfo > .artistmemBox ul .artistmem {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.applyModal .wrap > form > .artistInfo > .artistmemBox ul .artistmem img {
  width: 80px;
  height: 80px;
  border-radius: 80px;
  object-fit: cover;
}
.applyModal .wrap > form > .artistInfo > .artistmemBox ul .artistmem .ant-image-mask {
  border-radius: 50%;
}
.applyModal .wrap > form > .artistInfo > .artistmemBox ul .artistmem span {
  font-size: 11px;
  text-align: center;
}
.applyModal .btnArea {
  gap: 10px;
  margin-top: 20px;
}
.applyModal .btnArea button {
  min-width: 120px;
}
@media (max-width: 700px) {
  .applyModal {
    top: 0;
    width: 100% !important;
    max-width: none !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .applyModal .ant-modal-content {
    border-radius: 0;
    height: 100vh !important;
    overflow-y: auto;
  }
  .applyModal .wrap > form {
    flex-direction: column;
  }
  .applyModal .wrap > form > .artistProfile {
    order: 1;
    align-self: center;
    width: 140px;
    margin-top: 16px;
    margin-bottom: 30px;
  }
  .applyModal .wrap > form > .artistInfo {
    order: 2;
  }
  .applyModal .wrap > form > .artistInfo > ul.infoList > li {
    flex-direction: column;
    align-items: start;
  }
  .applyModal .wrap > form > .artistInfo > ul.infoList > li > div {
    width: 100%;
  }
  .applyModal .wrap > form > .artistInfo > ul.infoList > li > div:nth-child(1) {
    min-width: 0;
  }
  .applyModal .ant-modal-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 55px;
    background: #fff;
  }
  .applyModal .ant-modal-close {
    position: fixed;
  }
  .applyModal .ant-modal-body {
    min-height: calc(100vh - 55px);
    margin-top: 55px;
    overflow: scroll;
  }
  .applyModal .btnArea button {
    flex: 1 1;
  }
  .applyModal .wrap > .notice > ul {
    padding: 8px 12px 6px;
    margin-bottom: 30px;
  }
  .applyModal .wrap > .notice > ul li {
    font-size: 11px;
  }
  .artistType {
    width: 100%;
  }
}

/*================================
대항전 영상제출 모달
================================*/
.submitModal {
}
.submitModal .ant-modal-body {
  padding: 0 !important;
}
.submitModal .ant-input-outlined {
  background: #fff;
}
.submitModal .ant-input-outlined.ant-input-disabled {
  text-align: center;
}
.submitModal label {
  font-size: 12px;
  line-height: normal;
  color: #464548;
}
.submitModal .wrap {
  padding: 0 20px;
}
.submitModal .wrap > form {
  padding: 16px;
  border-radius: 8px;
  background-color: #f3f3f3;
}
.submitModal .wrap > form > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.submitModal .wrap > form > div > label {
  display: flex;
  align-items: start;
  margin-bottom: 5px;
}
.submitModal .wrap > form > div > label > span {
  position: relative;
  padding-left: 15px;
  font-size: 11px;
}
.submitModal .wrap > form > div > label > span::before {
  content: '*';
  position: absolute;
  top: 1px;
  left: 5px;
  margin-top: 1px;
}
.submitModal .wrap > form > div > input {
  width: 100%;
  margin-bottom: 16px;
}
.submitModal .wrap > form > div > button {
  padding: 8px;
  border-radius: 4px;
}
.submitModal .wrap > form > ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
}
.submitModal .wrap > form > ul > li {
  display: flex;
  gap: 12px;
  width: 100%;
}
.submitModal .wrap > form > ul > li > .first {
  flex: 0 0 80px;
}
.submitModal .wrap > form > ul > li > .second {
  flex: 0 0 80px;
}
.submitModal .wrap > form > ul > li > button {
  height: 40px;
  border-radius: 4px;
}
.submitModal .wrap > form > ul > li > .third {
  flex: 0 0 200px;
}
.submitModal .wrap > form > ul > li > .last {
  flex: 1 0;
}
.submitModal .ant-modal-footer {
  gap: 10px;
}
.submitModal .ant-modal-footer button {
  width: 120px;
}
.submitModal .wrap > form > li.submitModal-intro .ant-form-item {
  margin-bottom: 16px;
}
.submitModal .wrap > form > .submitModal-intro-label {
  display: block;
}
.submitModal .wrap > form > ul > li .ant-form-item {
  margin-bottom: 0;
}
.submitModal .btnArea {
  padding: 24px 0;
}
@media (max-width: 700px) {
  .submitModal {
    top: 0;
    width: 100% !important;
    max-width: none !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .submitModal .ant-modal-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 54px;
  }
  .submitModal .ant-modal-close {
    position: fixed;
    z-index: 2;
  }
  .submitModal .ant-modal-content {
    border-radius: 0;
    min-height: 100vh;
  }
  .submitModal .ant-modal-body .wrap {
    margin-top: 54px;
    overflow: scroll;
  }
  .submitModal .wrap > form > div {
    flex-direction: column;
  }
  .submitModal .wrap > form > div > label {
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 5px;
  }
  .submitModal .wrap > form > div > label > span {
    width: 100%;
    margin-top: 5px;
  }
  .submitModal .wrap > form > div > label > span::before {
    top: 2px;
    transform: none;
  }
  .submitModal .wrap > form > div > button {
    height: 30px;
  }
  .submitModal .wrap > form > ul {
    gap: 35px;
  }
  .submitModal .wrap > form > ul > li {
    flex-wrap: wrap;
    gap: 6px;
  }
  .submitModal .wrap > form > ul > li > *:nth-child(2),
  .submitModal .wrap > form > ul > li > *:nth-child(3) {
    flex: 1 1;
  }
  .submitModal .wrap > form > ul > li > *:nth-child(4),
  .submitModal .wrap > form > ul > li > *:nth-child(6) {
    flex: 100% 1;
  }

  .submitModal .ant-modal-footer {
    height: 80px;
    margin: 0 !important;
    padding: 20px 16px !important;
  }
  .submitModal .ant-modal-footer button {
    flex: 1 1;
  }
}

/*================================
아티스트 플랜 모달
================================*/
.ant-modal-wrap:has(.modalPlan) {
  overflow: visible;
  overflow: initial;
}
@media (max-width: 700px) {
  .ant-modal-wrap:has(.modalPlan) {
    overflow: auto;
  }
  .modalPlan {
    top: 0;
    left: 0;
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    max-width: initial !important;
    width: 100vw !important;
  }
  .modalPlan .ant-modal-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 54px;
  }
  .modalPlan .ant-modal-close {
    position: fixed;
    z-index: 2;
  }
  .modalPlan .ant-modal-body {
    margin-top: 54px;
  }
}

/*================================
Receipt Component
================================*/
.modalReceipt {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: #f9f9f9;
  border-radius: 8px;
}
.modalReceipt ~ div:has(.btn-grad) {
  margin-top: 16px;
}
.modalReceipt:has(section.l-section) {
  padding: 0;
  background: #fff;
}
@media (max-width: 700px) {
  .modalReceipt {
    flex-direction: column;
  }
}
/* 추가된 결제 모달창 */
.ant-modal:has(.modalPay) .ant-modal-close {
  top: 16px !important;
}
.modalPay {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.modalPay .infoArea {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.modalPay .infoArea .info {
  padding: 12px 16px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}
.modalPay .infoArea .info.plan {
  border: 0;
  background: #f9f9f9;
}
.modalPay .infoArea .info.pay {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.modalPay .infoArea .info h3 {
  font-size: 16px;
}
.modalPay .infoArea .info > p {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 12px;
}
.modalPay .infoArea .info.plan > p {
  padding: 0;
}
.modalPay .infoArea .info > p strong {
  font-size: 16px;
}
.modalPay .infoArea ul.info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.modalPay .infoArea .info > li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.modalPay .infoArea .info > li button {
  margin-left: auto;
  text-decoration: underline;
}
.modalPay .infoArea .info.agree {
}

.modalPay .infoArea .info.agree strong {
  font-size: 16px;
}
.modalPay .infoArea .info.agree p {
  font-size: 14px;
}
.modalPay .infoArea .notice {
  padding: 0 16px 12px 16px;
}
.modalPay .infoArea .notice p {
  color: #a3a1a7;
}
.modalPay .infoArea .notice h5 {
  font-size: 12px;
}
.modalPay .btnArea {
  display: flex;
  gap: 10px;
  padding-bottom: 20px;
}
.modalPay .btnArea button {
  min-width: 100px;
  height: 40px;
}
.modalPay .btnArea button i {
  display: inline-block;
  width: 12px;
  height: 12px;
}
@media (max-width: 700px) {
  .ant-modal:has(.modalPay) {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    top: 0;
  }
  .ant-modal:has(.modalPay) .ant-modal-content {
    width: 100%;
    min-height: 100vh;
    border-radius: 0px;
  }
  .ant-modal:has(.modalPay) .ant-modal-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 100px;
    padding-top: 60px;
  }
  .ant-modal:has(.modalPay) .ant-modal-close {
    position: fixed;
    z-index: 11;
  }
  .ant-modal:has(.modalPay) .ant-modal-header .ant-modal-title {
    justify-content: start !important;
    padding: 0 16px !important;
    font-size: 24px !important;
  }
  .ant-modal:has(.modalPay) .ant-modal-body {
    height: calc(100% - 100px);
    padding: 20px 16px !important;
    margin-top: 100px;
    overflow-y: scroll;
  }
  .modalPay {
    height: 100%;
  }
  .modalPay .btnArea button {
    flex: 1 1;
  }
  .modalPay .infoArea .info.agree > li {
    gap: 0;
  }
  .modalPay .infoArea .info.agree strong {
    font-size: 14px;
  }
  .modalPay .infoArea .info.agree p {
    font-size: 12px;
  }
}
/* 신용카드 옵션 */
.optList {
  display: flex;
  gap: 12px;
}
.modalReceipt .optList {
  padding: 16px;
  border-radius: 16px;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.05);
  background-color: #fff;
}
.optList .opt {
  flex: 1 1;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.5);
  font-size: 16px;
  font-weight: 500;
  background-color: #f9f8fa;
  cursor: pointer;
}
.optList .opt input {
  display: none;
}
.optList .opt::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 16px;
  vertical-align: middle;
}
.optList .opt:has(input[value='CARD'])::before {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAVCAYAAABG1c6oAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAFLSURBVHgB5ZRNTsMwEIXftPaeI4QbwAlIb9CeANh10UpBAqlbdkgFkUWosqM3oDcATtDeIOEG2duTwY76ywYcsYIn2R5nks/P8STAvxNtgiRJjoxRF0Q4QoBEUDHbRZ6n5RboYBFbvXRhEGxHRcmCwWw2XSk/t1Y9k1BluHOa53dlCCtJJs4ML7uERzftqbXNY5AUWnM8Ht+E8MDMflg5l5EP1F4udhdjtFfpuw5+WfsO393e52gjwbnrowNgLSiesuncl487pJMmqewqTdPqO95odB0TqAEebHldPoVLvvrGRi/9AgjQAZBZx9ivRUK0cdsKKCLl1xscsERbYJbdvwnqgXN26ZtAeqGFvj4UKjqE/nCY3GbZwyLg+ea910xnAnxsgVzjSnXpRStdjEeBX4pthsrYbq+xtltpEhlj+23+Nlrb+U/K64/qE3gbhjdYRGt3AAAAAElFTkSuQmCC) no-repeat center;
  background-size: contain;
}
.optList .opt:has(input[value='EPAY'])::before {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAVCAYAAABG1c6oAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAGMSURBVHgB1ZRPTsJAFMbf/GHfG1hPgJ5APIG9Qd1TpYnoFtiZQLSEyhY8gfEE1BvQG3CEugb6/AYKgmBKw0a/pM10OvPre997U6K/LrEaVKt1XwrRwNCiImKasOBhGHZaa6Dn1SuCxAjDDyaOCuAAkGVQHey7BDTS2XzF3Hphu0IF5fu+NZ+VnIwRSTpSQRAkm8/65wLjJVIoC0Gfacrjfv9pSAW0EyEK8yyFdOCNq6QaLD9wuPS+SRjchcHNG+9+JEnWULQr2L+ufprOu0phHataGLbPc4GCxYnn3TlI2wbcFkvYmLLiSSlt5kWLnFFeyksiXSPlN2yyAJ1gJga4RQdoLxCbX01fKT095ZRjTKHXqLGRgQuv3QOBHKepiEyTmpZQJW2KEiPtU/NuEakgy0S/D7jjYS/sbPkSBI8TyrwzQoGGtDqezO+5wDxprZuz2TSRpBJZmgZHA7OIf+3NLQ/NuaQjtYowwtXAIR/Ao5iK6WKD8f0/vPUemnhymdmmYkpQnFbvpRPQv9AXVwiRTRL2i/EAAAAASUVORK5CYII=) no-repeat center;
  background-size: contain;
}
.optList .opt:has(input[value='phone'])::before {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAVCAYAAABG1c6oAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADcSURBVHgB7ZTBCQIxEEVnYrxvCSnBUrQDvbsYBMEeFAmoi0c7sASxAreEWIEWEDOOgrCwMTm4XmT/6fOZvJ/TB2hYGAq11plzshd76Jyzu52xSSDD1N11z2wziInA3gkGRbEoq7GsN3c1Ep3W22U/xsvHsyP/ZsJ2VM1FoDrzgFdIiIAuoVxAw2qBLfAvgTJ1kOfTIZFQT++9t0Wx2n8FJOr0eAReUyYElqn7IFAgqLffbBY6dIPE84beJoHeo5EdPPA8EcR14xGulX1Y7LniRVYQkZSuNMbc4Nd6AKOmSXIXLJ6rAAAAAElFTkSuQmCC) no-repeat center;
  background-size: contain;
}
.optList .opt:has(input[value='COUPON'])::before {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAVCAYAAABG1c6oAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAHdSURBVHgB3VRNTvMwEJ2x3U/fMpyAcAK4AdyA3oCybioStZXYkSXiN1JDxa69AeEE0BPADQgnIOxQk3gYl4a0UCDdId4iceyZZ7+Z5wD8Gbiua1WJw2LQbLZ3hBA+ENiwDAhiQu2F4Wn0Tsi723lWe+BhQkTXn3dFix/bQBgT6NHsPApc5xxbqnQlCIJEmYUskxuGOde51++fDRcdxHE6PgIl4cVJMDvfanUb/BqMx6LO7+GEEFFYfPRvEYYnPlSAqhJkGqLz2h0BRr3ekVeZUAo5aDW7m7KWeqYe5cp/iyi3gcjI8opNskxdsbIt8y2ESt4JpUyjSR1J2FzpBo+fTU5J+MLBNW4GRcUMkwXcFEM24qbEWS7vFx655XRix+newQ8wMazmARZJNrZJU3mAiDa3aBUJbj4TdG6I4Pqi7PKI1ewx8RWAflQq9+dsI1A0ikBTw1ky191nn+ZbbC3eECaESqU+y7ZY9g5XEMZjMpLnbcM+3F3sw5cE8V+soTT9tGkN9uEt5w7mJP+EafJalVgBFcE1PHCcdv1Loqltirts8V1+ervocE+kk7lgUxIAQ5Zo0tGHNTNvpZlcu7w8jLE8QbsuUJ6biw7L4RE0+L3+8XCZpImKqv/E341X9TLWtrq5begAAAAASUVORK5CYII=) no-repeat center;
  background-size: contain;
}
.optList .opt:has(:checked) {
  background-color: #525162;
  color: #fff;
}
.optList .opt:has(:checked):has(input[value='CARD'])::before {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAVCAYAAABG1c6oAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADYSURBVHgB5VTRDYIwEH01DMAGlg1wA0bQCXQ0RnADcALZgG4AG9TX5NDDYITil7zkpeUBr3ftXYHNwQwT733K4UKmWIaevBpjHJSZJTsfj5bMtWElosVCqGCq8JyInpEtWfAFItCQNkyMrOI47LEOjvuY7fBjJGp+I0vE4QxJWRu2DLmU8hlOrKHWf3PjP8WUIeSU73jVoqN2mGM64H0PC4wL26poowzdxDdT2keMUmZqNVM8QaU8aqm5kE7pVnRK6LJai7mIsXgGo2+bIBwRd9uUSyrhz/AAHHzp9PpR/rwAAAAASUVORK5CYII=) no-repeat center;
}
.optList .opt:has(:checked):has(input[value='EPAY'])::before {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAVCAYAAABG1c6oAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAETSURBVHgB1ZThDYIwEIUP4wA4gTqBbqBu4Aa6gWwgTqBOoE5gnECcAJgANkAnqO/CEapAbOUXL/lC2tLX1/aAqDNSSnkgU/ZKwLbwccRsjscdPEBAdpqAJVg4jhMU6Xxeiv4QprmS1Od2j1oKqZ56u1+zokf5Nl4gwoQzWahf07cHxaob3hJMD2Sopi0fYTKg/ILY9A5CjbUQmiRkDfEy39xIcEEE5jI+kueUDBOuwVWMUhCDHRmoyfACFmAsZnxJW218JRgZskHARSol4UnfWEvqChVVzhAm0692SuXZcVmdNbPbT0MD+ZSXFXNobSiJvabxjzPkIqaWKhIGlN/iCaYx2WmmeZSSP06i7JXJ998RvQEhSeOetlCaywAAAABJRU5ErkJggg==) no-repeat center;
}
.optList .opt:has(:checked):has(input[value='phone'])::before {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAVCAYAAABG1c6oAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACeSURBVHgB7ZTRDYMwDETPqAN0BI/QkbpBGamrdAM2aJgANghnARKCBCMBP4gnWYHIuTg/DzgYSW3GGJ9cXlgniEiAB8OU1USfP2txaZHILFk/cbAJWZ8tgfbcBj51arPAwdyBd+AlAx9eAwXw5qLDrxnmuysQvcZGq1Recy5Qxw9OVGZ6TCIBHua4wXUe5kydn88ZW6dTZqg4fYuz6QCUmnI++/dZ0gAAAABJRU5ErkJggg==) no-repeat center;
}
.optList .opt:has(:checked):has(input[value='COUPON'])::before {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAVCAYAAABG1c6oAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAEmSURBVHgB3VThFcFADE49A9QEmMAKNnAbqA1swAZswAaYQE3ABr0N2OB8IUectq5+eb73vtf2klzy5dIj+hs459KmAWOwcM1RgMbvk8hmPTwK8ALuSvJxdSPQgodgfQByfCdJkouvzki2jKoVzMFpyXqmY9sqUy2QfU4RaMU48YFIrxYx/rpsxio8Ue6xP4AgyV7FmbCCJbgV47Kkwlz3EO9r8c3lvVdVrQWP9FnVUVfs0VKSViwBn13wVLLBPjhlHh+O24i6VDsb1YvcxfdwreKyR4X0HJsJxmP4GNAn+NuSGnr2AXmTiXZsUwQkQT/GN2oOGZA0exmNd9xU+X+ZJZ/pLuvkjQpsN7K+DWxG7H0osboC4767bayruQPqJKeu6Z34k7gChPuHx5Cri1YAAAAASUVORK5CYII=) no-repeat center;
}
@media (max-width: 700px) {
  .optList {
    width: 100%;
    min-height: auto;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .optList .opt {
    flex: 47% 1;
    height: 40px;
    font-size: 13px;
  }
}

/* 영수증 */
.receipt {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 16px;
}
.receipt__content {
  flex: 2 1;
  border-radius: 16px 16px 0 0;
  border: 1px solid #b041f3;
  border-bottom: none;
  padding: 12px 28px;
  background-color: #fff;
}
.receipt__content h5 {
  margin-bottom: 8px;
  background: linear-gradient(90deg, #ca79fc 0%, #ff5eb6 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 24px;
  font-weight: 600;
}
.receipt__content p {
  display: flex;
  justify-content: space-between;
  padding: 10px 0px;
  font-size: 14px;
  font-weight: 500;
  color: #464548;
}
.receipt__content p b {
  font-size: 16px;
  font-weight: 500;
}
.receipt__content p b.red {
  color: #f34144;
}
.receipt__total {
  flex: 1 1;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 40px;
  border-radius: 0 0 16px 16px;
  background: linear-gradient(90deg, #ca79fc 0%, #ff5eb6 100%);
  font-size: 20px;
  font-weight: 400;
  color: #fff;
}
.receipt__total b {
  font-weight: 600;
}
.receipt__total::before {
  content: '';
  position: absolute;
  top: -16px;
  left: 0;
  width: 16px;
  height: 32px;
  border: 1px solid #b041f3;
  border-left: none;
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
  background-color: #f9f9f9;
}
.receipt__total::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 32px;
  top: -16px;
  right: 0;
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
  border: 1px solid #b041f3;
  border-right: none;
  background-color: #f9f9f9;
}
@media (max-width: 700px) {
  .receipt__content {
    padding: 20px;
  }
  .receipt__content h5 {
    margin-bottom: 10px;
  }
  .receipt__total {
    padding: 20px;
  }
}

/*================================
Ticket Component
================================*/
.ticket {
  max-width: 480px;
  display: flex;
  margin-bottom: 16px;
  color: #fff;
  cursor: pointer;
}
.ticket__left {
  flex: 3 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  border-radius: 0px 8px 8px 0px;
  background: linear-gradient(90deg, #ff8a14 0%, #ffa514 100%);
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);
}
.ticket__left h5 {
  font-size: 44px;
  font-weight: 900;
  line-height: 1;
}
.ticket__left h5 span {
  display: block;
  font-size: 16px;
  font-weight: 600;
}
.ticket__left .ticketInfo {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.3;
}
.ticket__right {
  flex: 1 1 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px;
  border-left: 1px dashed #fff;
  border-radius: 8px 0 0 8px;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB5BAMAAAAAFvhEAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAYUExURUdwTP///////////////////////////x1LVb4AAAAHdFJOUwAg34DPEE+CZi7wAAABNklEQVRYw+3YPUsEMRDG8fhyZ6vgB/ClsFU8tRVBrhVOsD2wuPbw1nu+vrtJNpkU2cmMWAjz9H9+CdlqnbPZbP9mn3f6dg6s1fEhcKGOT4CtxRZbbLHFFltssSqe3a/r8epxOj5G91aLZ0s8T8Yb4LUWvwP7yfgJlC7iHsaOkwldxD3MyEegNI0HGLeOO3emaTzAO+atCprELXBJk7gFLukct8EFneM2uKBT3ApTOsWtMKXHuB0m9Bi3w4SOsQTOdIwlcKZDLIMTHWIZnGgfS+GR9rEUHukhlsORHmI5HOkP4FsBB7oPOwUc6DgxHGg/OUxoBZxoDZxoFRxpHRxpJexpLexpNezc4tr+Fdls7oxdvT0Hu8tqfMPHX7V2joadVuKD38Ruybdd9c6rlytuD/ZJ2mx/uR+z7Csq0/g6NAAAAABJRU5ErkJggg==) no-repeat center center #ffa514;
  background-size: 40px 40px;
  font-size: 0px;
  font-weight: 600;
}
/* 티켓 발급 상태 */
.ticket.off {
  color: #a3a1a7;
}
.ticket.off .ticket__left {
  background: #e6e6e6;
}
.ticket.off .ticket__right {
  background-image: none;
  background-color: #e6e6e6;
}
.ticket.off .ticket__right b {
  font-size: 16px;
}
/*================================
Video List Component 
================================*/
.modalVideo {
  position: absolute;
  top: 100%;
  right: -100%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: auto;
  min-width: 420px;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
  background-color: #fff;
}
.modalVideo .modalHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
  margin-bottom: 8px;
}
.modalVideo .modalHeader a {
  font-size: 16px;
  font-weight: 500;
  color: #0e0e1f;
}
.modalVideo .modalHeader a:hover {
  text-decoration: none;
}
.modalVideo .modalHeader a::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  vertical-align: middle;
  background: url(../../static/media/i-youtube.174152ad68b2880a3687.svg) no-repeat center;
  background-size: contain;
}
.modalVideo .modalHeader a::after {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 18px;
  vertical-align: middle;
  background: url(../../static/media/angle-right-solid.0eff5c3edbdb6c1b8ad3.svg) no-repeat center;
  background-size: contain;
}
.modalVideo .modalHeader a span {
  max-width: 150px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.modalVideo .modalHeader button {
  width: 20px;
  height: 20px;
  font-size: 0;
  color: transparent;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwBAMAAAClLOS0AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAASUExURUdwTAAAAAAAAAAAAAAAAAAAAFZgiOcAAAAFdFJOUwBgX5/ffhjBrwAAAKtJREFUOMt1lMkVgCAMBUMR3C1CK/DZgEr/rQiIyPLHW8IfDNlsXUx87rJwqgN/mw8CcVHuFJLVAnnFAinaCfmkE1KVA/ILB6TRdUgr65BO1Rj9vY01RFLNMfZqT68tjjk/xSMyml2qBtknqxadsmgJkUBCdGNERAN8QFfhzylcfCClBJNIacdCUWmxGah9sOGoRbGpaQxwcGjUcDhpnHEB4Mo49JIJtum1tD/T6DbbeF1PlgAAAABJRU5ErkJggg==) no-repeat center;
  background-size: contain;
}
.ant-modal-content .ant-modal-body .flexWrapCenter button {
  min-width: 100px;
  font-size: 14px;
}
@media (max-width: 700px) {
  .modalVideo {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1000;
    min-width: 100%;
    height: 100vh;
    border-radius: 0;
    border: none;
    box-shadow: none;
  }
  .modalVideo .modalHedaer {
    flex-direction: column;
    align-items: start;
    padding: 0;
    gap: 35px;
  }
  .modalVideo .modalHedaer a {
    order: 2;
  }
  .modalVideo .modalHedaer button {
    order: 1;
    align-self: end;
    width: 24px;
    height: 24px;
  }
}
/* 비디오 리스트 */
.videoList {
  display: flex;
  gap: 10px;
}
.videoList li {
  width: 160px;
}
.videoList li .video__thum {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 90px;
  padding: 8px;
  border-radius: 8px;
  overflow: hidden;
}
.videoList li .video__thum i {
  align-self: flex-end;
}
.videoList li .video__thum .youtube {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.videoList li .video__info {
  padding: 8px 4px 4px 4px;
}
.videoList li .video__info .user {
  display: flex;
  align-items: center;
  gap: 4px;
}
.videoList li .video__info .user img {
  width: 20px;
  height: 20px;
  border-radius: 20px;
}
.videoList li .video__info .user p {
  font-size: 12px;
  font-weight: 600;
  color: #0e0e1f;
}
.videoList li .video__info .count {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.videoList li .video__info .count p {
  font-size: 12px !important;
}
.videoList li .video__info .count .count-view {
  color: #464548;
}
.videoList li .video__info .count .count-view::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  vertical-align: middle;
  background: url(../../static/media/i-count.7aba6db4f80a502ab17a.svg) no-repeat center;
  background-size: contain;
}
@media (max-width: 700px) {
  .videoList {
    flex-wrap: wrap;
    gap: 2%;
    row-gap: 2vw;
  }
  .videoList li {
    width: 49%;
  }
}

/*================================
Record Component
================================*/
/* slick */
#RecordSlider {
  width: 100%;
  padding: 16px 0 20px;
  background: linear-gradient(90deg, #f138fc 0%, #13d5df 100%);
}
#RecordSlider .rsWrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: auto;
}
#RecordSlider .slick-slider {
  padding: 0 100px;
}
#RecordSlider .slick-slider .slick-list {
  margin-right: -28px;
  padding-bottom: 8px;
}
#RecordSlider .slick-slider .slick-slide {
  padding-left: 1px;
  padding-right: 25px;
  border-radius: 16px;
  /* border: 4px solid #fff;
  background: #fff; */
  /* box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25); */
}
#RecordSlider .slick-slider .slick-arrow {
  width: 36px;
  height: 36px;
  border-radius: 36px;
  background: rgba(0, 0, 0, 0.1);
}
#RecordSlider .slick-slider .slick-arrow:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 13px;
  height: 20px;
  font-size: 0;
}
#RecordSlider .slick-slider .slick-arrow:hover {
  background: linear-gradient(90deg, rgba(176, 65, 243, 0.6) 0%, rgba(236, 21, 255, 0.6) 100%);
}
#RecordSlider .slick-slider .slick-arrow.slick-prev {
  left: 30px;
}
#RecordSlider .slick-slider .slick-arrow.slick-prev:before {
  background: url(../../static/media/angle-left-solid-w.86c4d3c7160886555929.svg) no-repeat center;
  background-size: contain;
}
#RecordSlider .slick-slider .slick-arrow.slick-next {
  right: 30px;
}
#RecordSlider .slick-slider .slick-arrow.slick-next:before {
  background: url(../../static/media/angle-right-solid-w.c487c5608523fc27d83b.svg) no-repeat center;
  background-size: contain;
}
@media (max-width: 700px) {
  #RecordSlider .slick-slider {
    padding: 0;
  }
  #RecordSlider .slick-slider .slick-list {
    margin-right: -8px;
  }
  #RecordSlider .slick-slider .slick-slide {
    padding-right: 8px;
    padding-left: 8px;
  }
  #RecordSlider .slick-slider .slick-arrow {
    z-index: 2;
  }
  #RecordSlider .slick-slider .slick-arrow.slick-prev {
    left: -10px;
  }
  #RecordSlider .slick-slider .slick-arrow.slick-next {
    right: -10px;
  }
  #RecordSlider {
    padding: 8px 0;
  }
  #RecordSlider .rsWrapper {
    gap: 12px;
  }
}
/* record */
.record {
  padding: 4px;
  border-radius: 16px;
  /* border: 2px solid #fff; */
  background-color: #fff;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
  /*cursor: pointer;*/
}
.record__thum {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 0;
  border-radius: 12px;
  overflow: hidden;
  /* 샘플이미지. 개발시 url 바뀌어야함 */
  background-size: cover;
  padding-bottom: 100%;
}
/* .record__thum::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.38) 1%, rgba(0, 0, 0, 0) 20%);
  transition: 0.3s;
} */
.record__thum::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 72px;
  height: 72px;
  background-size: contain;
  opacity: 0;
  transition: 0.3s;
}
/* .record:hover .record__thum::before {
  background: rgba(0, 0, 0, 0.4);
} */
.record:hover .record__thum::after {
  opacity: 1;
}
.record__thum .aiModel {
  margin: 8px;
  z-index: 1;
}
.record__thum h5 {
  display: flex;
  z-index: 1;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(51, 51, 51, 0.3) 59.5%, rgba(102, 102, 102, 0) 100%);
  position: absolute;
  bottom: 0;
  width: 100%;
  cursor: pointer;
}
.record__thum h5 span {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.record__user {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px 0;
  height: 36px;
  cursor: pointer;
}
.record__user img {
  width: 24px;
  height: 24px;
  border-radius: 24px;
  object-fit: cover;
}
.record__user span {
  flex: 1 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12px;
  color: #0e0e1f;
  font-weight: 600;
}
@media (max-width: 700px) {
  .record__thum {
    height: 160px;
  }
  .record__thum h5 {
    font-size: 12px;
    gap: 8px;
  }
}
/*title selectResult*/
.fillterSelect {
  background: linear-gradient(90deg, #13d5df 0%, #f138fc 100%);
  background: var(--gra-simbol, linear-gradient(90deg, #13d5df 0%, #f138fc 100%));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  width: fit-content;
}
@media (max-width: 700px) {
  .titleBox:has(.fillterSelect) h1 {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
}

/*================================
Button Component
================================*/
.btn-coupon {
  padding: 10px 12px;
  border-radius: 24px;
  background: linear-gradient(90deg, #ffa514 0%, #ff8a14 100%);
  font-size: 14px;
  font-weight: 500;
  color: #fff;
}
.btn-coupon span {
  display: inline-block;
  min-width: 20px;
  min-height: 20px;
  padding: 4px;
  vertical-align: middle;
  border-radius: 50%;
  background-color: #fff;
  font-size: 12px;
  font-weight: 600;
  color: #f34144;
}
/* 등록 가능 쿠폰 없을 경우 */
.btn-coupon.off {
  background: #e6e6e6;
  color: #a3a1a7;
}
.btn-coupon.off span {
  color: #a3a1a7;
}
/* 팬 관련 버튼 */
.btn-fan {
  width: 200px;
  height: 40px;
  line-height: 40px;
  border-radius: 24px;
  color: #fff;
}
.btn-fan::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  vertical-align: middle;
}
.btn-fan.join {
  background: linear-gradient(270deg, #13d5df 0%, #2687e9 99.99%);
}
.btn-fan.join::before {
  background: url(../../static/media/i-fanAddW.74abb8dda41751150bde.svg) no-repeat center;
  background-size: contain;
}
.btn-fan.support {
  background: linear-gradient(90deg, #b041f3 0%, #ec15ff 100%);
}
.btn-fan.support::before {
  background: url(../../static/media/i-support.1c20f50ecc13294a385e.svg) no-repeat center;
  background-size: contain;
}
.btn-fan.receive {
  background: #e94cf7;
}
.btn-fan.receive::before {
  background: url(../../static/media/i-edit.8a53df0ae86c520201d8.svg) no-repeat center;
  background-size: contain;
}
.btn-fan.complete {
  border: 1px solid #dfdce4;
  color: #3e3d53;
}
.btn-fan.complete::before {
  background: url(../../static/media/i-fan.80c00af8935350644cf2.svg) no-repeat center;
  background-size: contain;
}
.btn-fan.self {
  background: #eee;
  color: #a29fab !important;
}
.btn-fan.self::before {
  background: url(../../static/media/i-fanAddG.b436eb1e00663b2f14f9.svg) no-repeat center;
  background-size: contain;
}
/* 팬 관련 버튼 페이지별 컨트롤 - 우선 여기에서 제어*/
.fanSearchBox .btn-fan {
  width: 100px;
  margin: 20px 0 12px auto;
}
.artistTop__profile .btn-fan.complete {
  max-width: 60px;
}
.artistTop__profile .btn-fan.complete::before {
  display: none;
}
/* 공유하기 */
.btn-share {
  padding: 8px 24px;
  border-radius: 24px;
  background: linear-gradient(90deg, #13d5df 0%, #f138fc 100%);
  font-size: 14px;
  color: #fff;
}
.btn-share::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  background: url(../../static/media/i-share.db4c7d4ab45831f1d64e.svg) no-repeat center;
  background-size: contain;
}
.btn-share.icon {
  position: relative;
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 50%;
  background: linear-gradient(to right, #ca79fc 0%, #ff5eb6 100%);
}
.btn-share.icon::before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  height: 70%;
}
/* 바로가기 UI */
.linkUI {
  padding: 4px 8px;
  border-radius: 24px;
  border: 1px solid #dfdce4;
  font-size: 12px;
  color: #3e3d53;
  cursor: pointer;
}
.linkUI::after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 16px;
  height: 16px;
  margin-left: 4px;
  background: url(../../static/media/i-arrowCircle.bf28feb6c4c333e24a3a.svg) no-repeat center;
  background-size: contain;
}
.linkUI:hover {
  text-decoration: none;
  color: inherit;
  background-color: #efefef;
}
/*================================
Input Component
================================*/
input.default {
  outline: none;
  width: 400px;
  height: 40px;
  padding: 0 12px;
  border-radius: 4px;
  border: 1px solid #e2dfe4;
  background: #f7f7f8;
  transition: 0.3s;
}
input.default ::placeholder {
  color: #a3a1a7;
}
input.default:focus {
  border-color: #e94cf7;
  box-shadow: 0 0 5px rgba(233, 76, 247, 0.5);
  background: #fff;
}

/*================================
Layout
================================*/
.l-wrap {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.l-section {
  width: 100%;
}
.l-section .tit {
  font-size: 16px;
  font-weight: 700;
  color: #3e3d53;
}
.l-section__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
}
.l-section__header label {
  margin-right: 8px;
  font-size: 16px;
  font-weight: 700;
}
.l-section__header > div {
  display: flex;
  align-items: center;
  gap: 10px;
}
.l-section__header > div:last-child {
  margin-left: auto;
}

#artistIndex .notice-none {
  min-height: 180px;
}
/*================================
Notice Component
================================*/
.notice-none {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 400px;
  padding: 12px 8px;
  border-radius: 4px;
  background-color: #f5f5f5;
}
.notice-none::before {
  content: '';
  width: 24px;
  height: 24px;
  margin-right: 8px;
  background: url(../../static/media/circle-exclamation-solid.799fff54345001c172cb.svg) no-repeat center;
  background-size: contain;
}
.notice-none h5 {
  font-size: 16px;
  font-weight: 500;
  color: #a3a1a7;
}
.notice-blue {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 20px 40px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  background: #eff8f9;
}
.notice-blue::before {
  content: '';
  width: 24px;
  height: 24px;
  margin-bottom: 16px;
  background: url(../../static/media/i-mark-blue.681d1a48031af38bd532.svg) no-repeat center;
  background-size: contain;
}
.notice-blue h5 {
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
  text-align: center;
}
.notice-blue h5 span {
  color: #c718e2;
}
.notice-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  border-radius: 8px;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.8) 100%), linear-gradient(180deg, #848ff5 0%, #b369ba 100%);
}
.notice-link.fixH {
  height: 400px;
}
.notice-link h5 {
  background: linear-gradient(180deg, #848ff5 0%, #b369ba 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 20px;
  font-weight: 500;
  text-align: center;
  line-height: normal;
}
.notice-link h5 p {
  background: linear-gradient(90deg, #7c67ee, #b892f2);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.notice-link h5 strong {
  font-size: 24px;
  font-weight: 800;
}
.notice-link .c-dark span {
  color: #c718e2;
}
.notice-link button {
  height: 40px;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 14px;
  background-color: #e94cf7;
  color: #fff;
}
.notice-link button i {
  width: 18px;
  height: 18px;
}
.notice-link button:hover {
  background-color: #ba3dc6;
}
@media (max-width: 700px) {
  .notice-link.fixH {
    height: 88px;
    padding: 24px 20px;
    letter-spacing: -1.2px;
  }
  .notice-link h5 {
    font-size: 16px;
  }
  .notice-link h5 strong {
    font-size: 20px;
  }
  .notice-none {
    min-height: 88px;
  }
}

/*================================
아티스트 > 채널 홈 상단 레이아웃
================================*/
.artistTop {
  display: flex;
  width: 1518px;
}
.artistTop .btnArea button {
  max-width: 200px;
}
.artistTop__profile {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 22%;
  padding: 10px 16px 0;
  min-width: 240px;
}
.artistTop__profile .btnArea {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.artistTop__profile .btnArea .siren {
  position: absolute;
  top: 50%;
  left: 30px;
  transform: translateY(-50%);
}
.artistTop__slider {
  display: flex;
  align-items: center;
  width: calc(100% - 320px);
  flex: 1 1;
  border-radius: 20px;
  flex-direction: column;
  /* gap: 8px; */
}
.artistTop__slider:has(#ArtistSlider) {
  /* border-radius: 20px; */
  background: linear-gradient(90deg, #13d5df 0%, #f138fc 100%);
  background: var(--gra-simbol, linear-gradient(90deg, #13d5df 0%, #f138fc 100%));
}
.artistTop__slider:has(#ArtistSlider) .artistTop__title {
  display: flex;
}

/*무료 배너 title 추가*/
.artistTop__slider .artistTop__title {
  display: none;
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
  padding: 16px 32px 0;
}
.artistTop__slider .artistTop__title h2 {
  display: flex;
  height: 32px;
  padding: 3px 12px;
  align-items: center;
  gap: 8px;
  border-radius: 24px;
  background: linear-gradient(90deg, #7342d0 0%, #a840ca 100%);
  color: #fff;
  font-family: Pretendard;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: -0.16px;
}
.artistTop__slider .artistTop__title h2::before {
  background: url(../../static/media/white_artist_icon.270cb422fb393ff25b1f.svg) no-repeat left -2px center;
  content: '';
  width: 20px;
  height: 20px;
  background-size: 22px;
}
.artistTop__slider .artistTop__title > button,
.editBanner {
  display: flex;
  padding: 4px 12px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-align: justify;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  border-radius: 50px;
  background: #ffa514;
}
@media (max-width: 1520px) {
  .artistTop {
    width: 100%;
    padding: 4px 16px 0 0;
  }
}
@media (max-width: 700px) {
  .artistTop {
    width: 100%;
    flex-direction: column;
    align-items: center;
    padding: 0;
  }
  .artistTop__profile {
    order: 2;
    padding: 20px;
    width: 100%;
  }
  .artistTop__profile .btnArea .siren {
    left: 0px;
  }
  .artistTop__slider {
    order: 1;
    width: 100%;
    border-radius: 0;
  }
}
/*================================
아티스트 > 채널 홈 > 전체리뷰 모달
================================*/
.modalReview .ant-modal-content {
  border-radius: 8px;
  overflow: hidden;
}
.modalReview .ant-modal-title {
  justify-content: start !important;
  /* border-bottom: 1px solid rgba(0, 0, 0, 0.1); */
}
.modalReview .ant-modal-body {
  padding-top: 0;
}
.ant-modal-body .fromReple {
  display: flex;
  padding: 8px 0px;
  align-items: center;
  gap: 10px;
  align-self: stretch;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  background: #fff;
  color: #0e0e1f;
  font-size: 16px;
  font-weight: 700;
  line-height: 100%; /* 16px */
  display: none; /*16-18: 고객 삭제요청*/
}

#artist-comment-container .ant-modal-body > .comment-header {
  /* margin-top: 16px; */
}
.modalReview .infinite-scroll-component__outerdiv {
  max-height: 400px;
  overflow: auto;
}
.modalReview .infinite-scroll-component__outerdiv .infinite-scroll-component .comment-item .comment-content {
  padding: 0 8px 0;
}
#artist-comment-container .modalReview .infinite-scroll-component__outerdiv .infinite-scroll-component .comment-item .reply-form {
  margin: 12px 8px 8px;
  gap: 8px;
}

@media (max-width: 700px) {
  .ant-modal-wrap:has(.modalReview) {
    overflow: hidden;
  }
  .modalReview {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    top: 0;
  }
  .modalReview .ant-modal-content {
    width: 100%;
    height: 100vh;
    border-radius: 0px;
  }
  .modalReview .ant-modal-header {
    height: 53px;
  }
  .modalReview .ant-modal-body {
    height: calc(100dvh - 53px);
    padding-bottom: 80px;
    overflow: auto;
  }
  .modalReview .infinite-scroll-component__outerdiv {
    max-height: 78vh;
  }
  .profileUpload {
    width: 140px;
  }
}
/*================================
아티스트 > 채널 홈 
================================*/
/* 정보 UI */
.artistInfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: auto;
}
.artistInfo__profile {
  width: 140px;
  height: 140px;
  border-radius: 16px;
  overflow: hidden;
}
.artistInfo__profile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.artistInfo__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  color: #0e0e1f;
}
.artistInfo__list li {
  line-height: 1.3;
}
.artistInfo__list .btn-share.icon {
  width: 32px;
  height: 32px;
}
.artistInfo__list .btn-share.icon::before {
  width: 50%;
  height: 50%;
}

/* 무료배너 - 프로아티스트 목록 슬라이드 관련 */
.artistTop__slider .artistInfo {
  background-color: #fff;
  /* border: 1px solid rgba(255, 255, 255, 0.2); */
  box-shadow: 0px 8px 8px 0px rgba(0, 0, 0, 0.2);
  position: relative;
  width: 364px;
  height: 240px;
  border-radius: 16px;
  /*cursor: pointer;*/
}
.artistTop__slider .artistInfo__profile {
  width: 100%;
  height: 100%;
}
.artistTop__slider .artistInfo__list {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 64px;
  padding: 12px 16px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 8px 0;
  border-radius: 0 0 16px 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0px 8px 8px 0px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
.artistTop__slider .artistInfo__list li {
  font-size: 12px;
  line-height: 1;
}
.artistTop__slider .artistInfo__list .name {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.4px;
  margin: 0;
  width: 100%;
  justify-content: start;
}
.artistTop__slider .artistInfo__list .name button {
  display: none;
}
.artistTop__slider .artistInfo__list .genre::after {
  content: ' /  ';
  padding-right: 2px;
}
.artistTop__slider .artistInfo__list .fan {
  position: absolute;
  right: 16px;
  top: 12px;
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
}
/* 고객 요청 반영 슬라이드 1400 지점 변화 */
@media (max-width: 1400px) {
  .artistTop__slider .artistInfo {
    width: 95%;
    min-width: 290px;
  }
}
/* 무료배너 - 프로아티스트 목록 슬라이드 관련 반응형 */
@media (max-width: 700px) {
  .artistTop__slider #ArtistSlider .artistInfo {
    width: 100%;
    height: 130px;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }
  .artistTop__slider #ArtistSlider .slick-slider {
    margin-bottom: 0 !important;
  }
  .artistTop__slider #ArtistSlider .slick-list {
    padding: 0;
  }
  .artistTop__slider #ArtistSlider .slick-dots {
    bottom: 0;
    z-index: 10;
  }
  .artistTop__slider:has(#ArtistSlider) .artistTop__title {
    position: absolute;
    left: 160px;
    width: calc(100% - 160px);
    padding: 6px;
    z-index: 10;
    text-wrap: nowrap;
  }
  .artistTop__slider:has(#ArtistSlider) .artistTop__title h2 {
    gap: 2px;
    height: auto;
    padding: 1px 4px;
    font-size: 10px;
  }
  .artistTop__slider:has(#ArtistSlider) .artistTop__title h2::before {
    width: 10px;
    height: 10px;
    background-size: 15px;
  }
  .artistTop__slider:has(#ArtistSlider) .artistTop__title button,
  .editBanner {
    padding: 2px 4px;
    font-size: 10px;
  }
  .artistTop__slider #ArtistSlider .artistInfo__profile {
    width: 160px;
    height: 100%;
    border-radius: 0;
  }
  .artistTop__slider #ArtistSlider .artistInfo__list {
    position: inherit;
    flex: 1 1;
    gap: 10px;
    flex-direction: column;
    height: 100%;
    padding: 0;
    padding-top: 32px;
    border-radius: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    color: #fff;
  }
  .artistTop__slider #ArtistSlider .artistInfo__list li {
    height: fit-content;
  }
  .artistTop__slider #ArtistSlider .artistInfo__list .name {
    order: 1;
  }
  .artistTop__slider #ArtistSlider .artistInfo__list .genre {
    order: 3;
  }
  .artistTop__slider #ArtistSlider .artistInfo__list .genre::after {
    display: none;
  }
  .artistTop__slider #ArtistSlider .artistInfo__list .group {
    order: 4;
  }
  .artistTop__slider #ArtistSlider .artistInfo__list .fan {
    position: static;
    position: initial;
    order: 2;
    width: 100%;
    justify-content: start;
    color: #fff;
  }
  .artistTop__slider #ArtistSlider .artistInfo__list .fan::before {
    width: 12px;
    height: 12px;
    background: url(../../static/media/i-fanW.0397f8a843c5e113205b.svg) no-repeat center;
    background-size: contain;
  }
}

.artistInfo__list .name {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 24px;
}
.artistInfo__list .name .badge {
  margin-right: 0;
}
.artistInfo__list .fan {
  font-size: 16px;
  font-weight: 500;
  color: #464548;
  display: flex;
  flex-direction: row;
  gap: 12px;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.artistInfo__list .fan::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: middle;
  background: url(../../static/media/i-fan.80c00af8935350644cf2.svg) no-repeat center;
  background-size: contain;
}
/* 아티스트 홈 */
#artistIndex {
  display: flex;
  flex-direction: column;
}
.artistIntro {
  display: flex;
  flex-direction: column;
  gap: 64px;
  padding: 20px 0;
}

.artistIntro.list {
  flex-direction: column;
}
.artistIntro article {
  display: flex;
  flex-direction: column;
  flex: 1 1;
}
/* 아티스트 홈 .artistIntro article 내부 */
.artistIntro__title {
  position: relative;
  margin-bottom: 28px;
  font-size: 20px;
  font-weight: 700;
  color: #3e3d53;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAABCAYAAADjAO9DAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ4IDc5LjE2NDAzNiwgMjAxOS8wOC8xMy0wMTowNjo1NyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjEgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkJENjdFRDlDQjIxMTExRUZCNUNGQzc0QUNBQkI0Nzg3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkJENjdFRDlEQjIxMTExRUZCNUNGQzc0QUNBQkI0Nzg3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QkQ2N0VEOUFCMjExMTFFRkI1Q0ZDNzRBQ0FCQjQ3ODciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QkQ2N0VEOUJCMjExMTFFRkI1Q0ZDNzRBQ0FCQjQ3ODciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5DMPkwAAAAGElEQVR42mI8tOP0fwYkYOtuwojMBwgwAG5VA//H3djjAAAAAElFTkSuQmCC) repeat-x left top 12px;
  display: flex;
  height: 32px;
  padding-top: 5px;
}
.artistIntro__title {
  text-align: center;
  justify-content: center;
}
.artistIntro__title h4 {
  padding-left: 16px;
}

.artistIntro__title.center {
  text-align: center;
  justify-content: center;
}
.artistIntro__title.center h4 {
  padding-left: 24px;
}
.artistIntro__title h4 {
  background-color: #fff;
  align-items: center;
  padding-bottom: 10px;
  width: fit-content;
  display: flex;
}
.artistIntro__title h4 i {
  width: 20px;
  height: 20px;
  margin-right: 12px;
  vertical-align: middle;
  margin-top: -2px;
}
.artistIntro__title h4 button.more {
  content: '';
  display: inline-block;
  width: 22px;
  height: 22px;
  margin: 0 16px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 100%;
  background: url(../../static/media/angle-right-solid.0eff5c3edbdb6c1b8ad3.svg) no-repeat center;
  background-size: 9px;
  position: static;
  position: initial;
  transform: none;
  transform: initial;
  font-size: 0;
}

.artistIntro__title h4 button.more:hover {
  background-color: #e3e1e4;
}

.artistIntro__title h4 button.more.open {
  background: url(../../static/media/angle-right-solid.0eff5c3edbdb6c1b8ad3.svg) no-repeat center rgba(0, 0, 0, 0.2);
  transform: rotate(90deg);
  /* filter: invert(43%) sepia(86%) saturate(2571%) hue-rotate(265deg) brightness(97%) contrast(99%); */
  border-radius: 100%;
}
.artistIntro__title h4 button.more.open:hover {
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.artistIntro__title .close-btn {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
.artistIntro__main {
  display: flex;
  flex-direction: column;
  row-gap: 20px;
  flex: 1 1;
  color: #0e0e1f;
}
.artistIntro__main.gallery {
  flex-direction: row;
  gap: 2.5%;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.artistIntro__main .content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-height: 250px;
  overflow: hidden;
}
.artistIntro__main .content p {
  font-size: 16px;
  line-height: 1.6;
  text-align: justify;
}
.artistIntro__main .list {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0px 0 8px;
}
.artistIntro__main .list b {
  font-size: 12px;
  font-weight: 500;
}
.artistIntro__main .list p {
  padding: 8px 0;
}
.artistIntro__main .artistmemBox b {
  font-size: 14px;
  font-weight: 600;
}
.artistIntro__main .artistmemBox ul {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.artistIntro__main .artistmemBox ul .artistmem {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.artistIntro__main .artistmemBox ul .artistmem img {
  width: 80px;
  height: 80px;
  border-radius: 80px;
  object-fit: cover;
}
.artistIntro__main .artistmemBox ul .artistmem span {
  font-size: 11px;
  text-align: center;
}
.artistIntro article .btn-view {
  margin-top: 28px;
  align-self: center;
}

/* .artistIntro article:first-child .artistIntro__main.gallery:has(> :nth-child(4):not(:last-child)),
.artistIntro__main.gallery:has(> :nth-child(4n)) {
  justify-content: space-between;
}

.artistIntro article:nth-child(2) .artistIntro__main.gallery:has(> :nth-child(4):not(:last-child)) {
  justify-content: space-between;
} */

@media (max-width: 700px) {
  .artistIntro {
    flex-direction: column;
    gap: 50px;
    padding: 30px 0;
  }
  .artistIntro__title {
    text-align: center;
    justify-content: center;
    background-position: left top 12px;
  }
  .artistIntro__title h4 {
    padding-left: 16px;
  }
  .artistIntro__main .content p {
    font-size: 14px;
  }
  .artistIntro__main.gallery {
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .artistIntro__main .content {
    max-height: 300px;
  }
  .artistIntro__main .artistmemBox ul {
    flex-wrap: wrap;
  }
  .artistInfo__list .fan {
    gap: 6px;
  }
  .artistIntro__main .list b {
    font-size: 11px;
  }
}
/* 아티스트 공통 레이아웃 */
.l-artist {
  padding: 20px 0;
}
.l-artist__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 12px;
  padding: 20px 0 12px;
}
.l-artist__header h3 {
  max-width: 700px;
  padding: 0;
  font-size: 24px;
  color: #0e0e1f;
  display: flex;
  flex-direction: row;
  gap: 8px;
}
.l-artist__header h3 .comment {
  font-size: 12px;
  align-items: center;
  letter-spacing: -0.24px;
  font-weight: 500;
  display: flex;
  flex-direction: row;
  gap: 8px;
}

.l-artist__header h3 .comment::before {
  content: '*';
}
.l-artist__header h3 b {
  color: #ff6d38;
  font-weight: bold;
}
.l-artist__header h3 b:nth-of-type(1) {
  padding: 0 12px;
}
.l-artist__header .ant-select {
  width: 150px;
}
.l-artist__header .ant-input {
  width: 240px;
}
.l-artist__header .btnBox {
  display: flex;
  align-items: center;
  gap: 8px;
}

.l-artist__header .btnBox .ant-input-affix-wrapper .ant-input {
}
.l-artist__header .btn-searchIcon {
  min-width: 40px;
  height: 40px;
  border-radius: 4px;
}
.l-artist__header .search {
  display: none;
}
.l-artist__header .linkBox {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 4px;
  width: 100%;
}
/* 공통 컨텐츠 래퍼역할 */
.l-artist__content {
}
/* 2단 레이아웃 : pannel */
.l-artist__content.pannel {
  display: flex;
  gap: 60px;
}
.l-artist__content.pannel .pannel__right {
  flex: 1 1;
}
/* 2단 레이아웃 타이틀 영역 */
.l-artist__content.pannel .pannel__right .pannelInfo {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}
.l-artist__content.pannel .pannel__right .pannelInfo .infoTitle {
  width: 770px;
}
.l-artist__content.pannel .pannel__right .pannelInfo .infoTitle > h3 {
  margin-bottom: 20px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 40px;
}
.l-artist__content.pannel .pannel__right .pannelInfo .infoTitle > div {
  font-size: 14px;
  color: #3e3d53;
}
.l-artist__content.pannel .pannel__right .pannelInfo .infoTitle > p span {
  display: inline-block;
  max-width: calc(100% - 68px);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* 더보기 버튼 활성화 */
.l-artist__content.pannel .pannel__right .pannelInfo .infoTitle > p:has(.btn-more-text.fold) span {
  overflow: visible;
  white-space: wrap;
  text-overflow: initial;
}
.l-artist__content.pannel .pannel__right .pannelInfo .infoList {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  align-items: end;
  gap: 13px;
}
.l-artist__content.pannel .pannel__right .pannelInfo .infoList li {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 12px;
  text-wrap: nowrap;
}
.l-artist__content.pannel .pannel__right .pannelInfo .infoList li.genre {
  gap: 4px;
}
/* 2단 레이아웃 테이블 상단 정보 */
.l-artist__content.pannel .pannel__right .pannelHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 0;
}
.l-artist__content.pannel .pannel__right .pannelHead h5 {
  font-size: 16px;
  font-weight: 600;
}
.l-artist__content.pannel .pannel__right .pannelHead .btnBox {
  display: flex;
  align-items: center;
  gap: 8px;
}
.l-artist__content.pannel .pannel__right .pannelHead .btnBox button {
  border-color: #6d6c75;
  font-weight: 500;
}
.l-artist__content.pannel .pannel__right .pannelHead .linkBox {
  display: flex;
  justify-content: end;
  gap: 8px;
  width: 100%;
}
/* 갤러리형 정렬 */
.l-artist__content .cardList {
  display: flex;
  /* flex-direction: column; */
  /* justify-content: center; */
  row-gap: 2vw;
  column-gap: 6px;
  align-content: flex-start;
  padding: 20px 0;
  width: 100%;
  flex-wrap: wrap;
}
.l-artist__content .cardList:has(.notice-none) {
  padding: 0;
}
.l-artist__content .cardList > li {
  display: flex;
  width: 100%;
  gap: 2.5%;
  flex-wrap: wrap;
}
.l-artist__content .cardList .btn-view {
  align-self: center;
}
.l-artist__content #purpleBtn {
  width: 120px;
  height: 40px;
  margin: auto;
  margin-top: 20px;
  border-radius: 4px;
  font-size: 14px;
}

#artistHome .l-artist__header {
  padding-top: 4px;
}
#artistHome #artistAlbum .l-artist__header.isSelf {
  padding-top: 78px;
}
#artistHome #artistStorage .l-artist__header.isSelf {
  padding-top: 70px;
}
#artistHome #artistNews .l-artist__header.isSelf {
  padding-top: 70px;
}
#artistHome #artistVideo .l-artist__header.isSelf {
  padding-top: 70px;
}
#artistHome #artistVideo:has(.tabBox) .l-artist__header {
  padding-top: 36px;
}

@media (max-width: 1100px) {
  .l-artist {
    padding: 0 16px;
  }
  .l-artist__content .cardList .btn-view {
    margin-top: 30px; /*앨범 섬네일과 간격 */
  }
}

/* 모바일 버튼 구조 컨트롤 */
@media (max-width: 700px) {
  .l-artist {
    padding: 0 16px 16px;
  }
  .l-artist__header {
    /* 모바일용 검색창 좌표 지정 */
    position: relative;
    row-gap: 8px;
    padding: 36px 0 20px;
  }
  .l-artist__header h3 {
    font-size: 20px;
    text-wrap: nowrap;
    height: 40px;
    align-items: center;
  }
  .l-artist__header h3 b:nth-of-type(1) {
    padding: 0;
  }
  .l-artist__header .ant-select {
    width: 120px;
  }
  .l-artist__header .btnBox {
    gap: 15px;
  }
  .l-artist__header .btnBox .btn-album,
  .l-artist__header .btnBox .btn-del,
  .l-artist__header .btnBox .btn-addMusic,
  .l-artist__header .btnBox .btn-regiMusic {
    gap: 0;
    height: auto;
    width: auto;
    padding: 0;
    border: none;
    background: none;
    font-size: 0;
    color: transparent;
  }
  .l-artist__header .btnBox .btn-album::before {
    background: url(../../static/media/i-disc.da774a6ba60fc285e3ae.svg) no-repeat center;
    background-size: contain;
  }
  .l-artist__header .btnBox .btn-addMusic::before {
    width: 18px;
    height: 18px;
    background: url(../../static/media/m-music.b3b9c716de06d3246a51.svg) no-repeat center;
    background-size: contain;
  }
  .l-artist__header .btnBox .btn-regiMusic::before {
    width: 18px;
    height: 18px;
    background: url(../../static/media/i-waveB.0949e31e30613cdeb599.svg) no-repeat center;
  }
  .l-artist__header .search {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 0;
    background-color: #fff;
  }
  .l-artist__header .search.active {
    display: flex;
  }
  .l-artist__header .search input {
    flex: 1 1;
  }
  .l-artist__header .search .btn-close {
    min-width: 40px;
    height: 40px;
    padding: 0;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwBAMAAAClLOS0AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAASUExURUdwTAAAAAAAAAAAAAAAAAAAAFZgiOcAAAAFdFJOUwBgX5/ffhjBrwAAAKtJREFUOMt1lMkVgCAMBUMR3C1CK/DZgEr/rQiIyPLHW8IfDNlsXUx87rJwqgN/mw8CcVHuFJLVAnnFAinaCfmkE1KVA/ILB6TRdUgr65BO1Rj9vY01RFLNMfZqT68tjjk/xSMyml2qBtknqxadsmgJkUBCdGNERAN8QFfhzylcfCClBJNIacdCUWmxGah9sOGoRbGpaQxwcGjUcDhpnHEB4Mo49JIJtum1tD/T6DbbeF1PlgAAAABJRU5ErkJggg==) no-repeat center;
    background-size: 12px;
    font-size: 0;
    color: transparent;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 100%;
    margin-left: 12px;
  }
  .l-artist__header .linkBox {
    justify-content: start;
  }
  .l-artist__content .cardList > li {
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 3vw;
  }

  #artistHome .l-artist__header {
    padding-top: 10px;
  }
  #artistHome #artistStorage .l-artist__header {
    padding-top: 40px;
  }
}
/*================================
앨범 공통 컴포넌트
================================*/
/* 앨범 리스트 UI ArtistInfoAlbum.jsx */
.artistInfoAlbum {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 220px;
  padding: 12px;
  border-radius: 16px;
  border: 4px solid transparent;
  box-sizing: border-box;
  transition: 0.3s;
  cursor: pointer;
  align-items: center;
}
.artistInfoAlbum:hover {
  border: 4px solid #c718e2;
  box-shadow: 0px 0px 8px 0px rgba(236, 21, 255, 0.5);
}
.artistInfoAlbum__thum {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 192px;
  height: 192px;
  padding: 8px;
  border-radius: 16px;
  overflow: hidden;
}
.artistInfoAlbum__thum::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.35), transparent 25%), linear-gradient(to bottom, rgba(0, 0, 0, 0.35), transparent 25%);
}
.artistInfoAlbum__thum > img {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.artistInfoAlbum__thum > span {
  align-self: end;
  z-index: 1;
}
.artistInfoAlbum__thum > h5 {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  position: absolute;
  bottom: 8px;
  font-weight: 500;
  text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
  z-index: 1;
}
.artistInfoAlbum__list {
  padding: 0 4px 0;
  width: 100%;
}
.artistInfoAlbum__list li {
  padding: 4px 0;
}
.artistInfoAlbum__list li.title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  gap: 8px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.artistInfoAlbum__list li.title .badge-title {
  padding: 3px 4px 2px;
}
.artistInfoAlbum__list li.title .title-text {
  text-overflow: ellipsis;
  text-wrap-mode: nowrap;
  overflow: hidden;
}

.artistInfoAlbum__list li.info {
  display: flex;
  align-items: center;
}
.artistInfoAlbum__list li.info p:first-child::after {
  content: '';
  display: inline-block;
  width: 1px;
  height: 10px;
  margin: 0 4px;
  background-color: #c4c3c7;
}
.artistInfoAlbum__list li.info .info-date {
  font-size: 14px;
}
.artistInfoAlbum__list li.info .info-heart {
  margin-left: auto;
}
.artistInfoAlbum__list li.info .info-heart i {
  width: 16px;
  height: 16px;
  margin-right: 4px;
}
.artistInfoAlbum__list li.profile {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 600;
}
.artistInfoAlbum__list li.profile .badge {
  height: 22px !important;
}
.artistInfoAlbum__list li.profile button {
  padding: 0;
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
}
.artistInfoAlbum__list li.profile button span {
  text-overflow: ellipsis;
  overflow: hidden;
  text-wrap-mode: nowrap;
}
.artistInfoAlbum__list li.profile img {
  width: 20px;
  height: 20px;
  border-radius: 20px;
  object-fit: cover;
}
.artistInfoAlbum__btn {
  display: flex;
  padding-top: 8px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  width: 100%;
}
.artistInfoAlbum__btn button {
  flex: 1 1;
}

.ant-dropdown .artistInfoAlbum__thum {
  width: 160px;
  height: 160px;
}

@media (max-width: 700px) {
  .artistInfoAlbum {
    width: 48%;
    max-width: none;
    padding: 0;
    border-radius: 20px;
  }
  .artistInfoAlbum__thum {
    width: 100%;
    height: 0;
    padding-bottom: 100%;
  }
  /* .artistInfoAlbum__list {
    padding: 0 4px 4px;
  } */
  .artistInfoAlbum__list li.info {
    flex-wrap: wrap;
  }
  .artistInfoAlbum__list li.info .info-heart {
    width: 100%;
    margin: 12px 0 4px;
  }
  .artistInfoAlbum__btn {
    padding-bottom: 8px;
  }
  .artistInfoAlbum .badge {
    padding: 2px;
    height: 22px !important;
  }
}
/* 앨범 리스트 UI 다운드롭에서 변형  */
.artistMvListInList .artistInfoAlbum {
  padding: 0;
  overflow: hidden;
}
.artistMvListInList .artistInfoAlbum .artistInfoAlbum__thum {
  border-radius: 0;
}
.artistMvListInList .artistInfoAlbum .artistInfoAlbum__list,
.artistMvListInList .artistInfoAlbum .artistInfoAlbum__btn {
  display: none;
}
@media (max-width: 700px) {
  .artistMvListInList .artistInfoAlbum {
    width: 44vw;
    height: 44vw;
  }
  .artistMvListInList .artistInfoAlbum .artistInfoAlbum__thum {
    width: 100%;
    height: 100%;
  }
}
/* 앨범 제작 폼 AlbumForm.jsx */
.form-album {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 400px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: #f3f3f3;
}
.form-album label {
  font-size: 12px;
  font-weight: 500;
  color: #0e0e1f;
}
.form-album input,
.form-album textarea {
  background-color: #fff;
}
.form-album {
}
.form-album .l-upload {
  width: 100%;
  max-width: 210px;
  height: 210px;
}
.form-album .l-upload .imageContainer {
  width: 100%;
  height: 100%;
}
.form-album .l-upload .imageContainer > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.form-album .l-upload .iconOverlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  gap: 12px;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1000;
}
.form-album .l-upload .imageContainer:hover .iconOverlay {
  opacity: 1;
}
.form-album .bottom {
  gap: 8px;
}
.form-album .bottom > li {
  display: flex;
  width: 100%;
}
.form-album .bottom > li label {
  width: 80px;
  height: 40px;
  line-height: 40px;
}
.form-album .bottom > li > div,
.form-album .bottom > li > input,
.form-album .bottom > li > textarea {
  flex: 1 1;
}
.form-album .bottom > li .calculator {
  display: flex;
  align-items: center;
  gap: 12px;
}
.form-album .bottom > li .calculator input {
  width: 80px;
  height: 40px;
  border-radius: 4px;
  border: 1px solid #dfdce4;
  background-color: #fff;
  outline: none;
  text-align: center;
}
.form-album .bottom > li .calculator p {
  margin-left: auto;
  font-size: 14px;
  font-weight: 500;
}
.form-album .bottom > li .calculator button {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid #ccc;
  background: #fff;
  font-size: 18px;
}

/* 앨범 제작 프로세스 */
.albumProcess {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
}
.albumProcess > li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 175px;
}
.albumProcess > li > b {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #dbdbe0;
  background-color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 36px;
  text-align: center;
  color: #0e0e1f;
}
.albumProcess > li > b::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 100%;
  width: 175px;
  height: 2px;
  background-color: #c4c2c7;
}
.albumProcess > li:last-child > b::after {
  display: none;
}
.albumProcess > li > p {
  font-size: 13px;
  font-weight: 600;
  color: #a29fab;
}
.albumProcess > li.active > b {
  border: 1px solid transparent;
  background: linear-gradient(90deg, #ca79fc 0%, #ff5eb6 100%);
  color: #fff;
}
.albumProcess > li.active > p {
  background: linear-gradient(90deg, #ca79fc 0%, #ff5eb6 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 15px;
  font-weight: 700;
}

/* 앨범 제작 UI */
#artistAlbum .notice-link b {
  font-size: 16px;
}
#artistAlbum .notice-link > .btnArea {
  gap: 10px;
}
#artistAlbum .notice-link > .btnArea > * {
  width: 180px;
  height: 33px;
  border-radius: 24px;
  font-size: 14px;
  line-height: 33px;
  text-align: center;
}
#artistAlbum .notice-link > .btnArea > .linkUI {
  padding: 0;
  background: #fff;
}
#artistAlbum .notice-link > .btnArea > .linkUI:hover {
  background: #efefef;
}
#artistAlbum .l-artist__content.pannel .pannel__right .pannelHead {
  padding-top: 0;
}

/* 앨범 상세화면 레이아웃 AlbumDetail.jsx */
#albumPage {
  width: 100%;
  background: linear-gradient(180deg, rgba(131, 223, 227, 0.2) 0%, rgba(225, 182, 228, 0.2) 100%);
}
#albumPage .l-artist__content {
  max-width: 1518px;
  padding: 20px 0;
  margin: auto;
}
@media (max-width: 1100px) {
  #albumPage .l-artist__content {
    max-width: 100%;
    /* padding: 0 16px; */
  }
}
#albumPage .l-artist__content.pannel .pannel__left {
  max-width: 400px;
  width: 100%;
  margin-left: 16px;
}
#albumPage .l-artist__content.pannel .pannel__right {
  padding: 20px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);
  margin-right: 16px;
}
@media (max-width: 700px) {
  #albumPage {
    background: #fff;
  }
  #albumPage .btn-more-text::before {
    margin-right: 0;
  }
  #albumPage .btn-more-text::after {
    display: none;
  }

  #albumPage .l-artist__content.pannel .pannel__left {
    width: 100%;
    padding: 20px 16px;
    background: linear-gradient(180deg, rgba(131, 223, 227, 0.2) 0%, rgba(225, 182, 228, 0.2) 100%);
    max-width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    margin-left: 0;
  }
  #albumPage .l-artist__content.pannel .pannel__right {
    border-radius: 0;
    padding: 30px 16px;
    box-shadow: none;
    margin: 0;
  }
  #albumPage .l-artist__content.pannel .pannel__right .pannelInfo {
    flex-direction: column;
  }
  #albumPage .l-artist__content.pannel .pannel__right .pannelInfo .infoTitle {
    order: 2;
    width: 100%;
  }
  #albumPage .l-artist__content.pannel .pannel__right .pannelInfo .infoTitle > h3 {
    margin-top: 12px;
    font-size: 20px;
  }
  #albumPage .l-artist__content.pannel .pannel__right .pannelInfo .infoTitle > p span {
    max-width: calc(100% - 24px);
  }
  #albumPage .l-artist__content.pannel .pannel__right .pannelInfo .infoList {
    order: 1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  #albumPage .l-artist__content.pannel .pannel__right .pannelHead {
    /* fixed되는 선택 UI */
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    height: 60px;
    padding: 8px 15px;
    border-radius: 30px;
    box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.25);
    background-color: #fff;
  }
  #albumPage .l-artist__content.pannel .pannel__right .pannelHead h5 {
    padding: 8px 15px;
    border-radius: 40px;
    background: #f7f7f8;
  }
  #albumPage .l-artist__content.pannel .pannel__right .pannelHead .btnBox {
    gap: 25px;
  }
  #albumPage .l-artist__content.pannel .pannel__right .pannelHead .btnBox .btn-white {
    gap: 0;
    height: fit-content;
    border: none;
    padding: 0;
    font-size: 0;
    color: transparent;
  }
}
/* 앨범 상세화면 UI */
.albumInfo {
}
.albumInfo__thum {
  max-width: 400px;
  min-width: 80px;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.35), transparent 25%), linear-gradient(to bottom, rgba(0, 0, 0, 0.35), transparent 25%);
  aspect-ratio: 1;
}
.albumInfo__thum img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.albumInfo__profile {
  display: flex;
  gap: 16px;
  margin: 40px 0 12px 0;
}
.albumInfo__profile > img {
  width: 80px;
  height: 80px;
  border-radius: 16px;
  object-fit: cover;
}

.albumInfo__profile ul {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.albumInfo__profile > ul > li.name {
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 500;
  display: flex;
}
.albumInfo__profile > ul > li.genre {
  display: flex;
  gap: 4px;
  text-wrap: nowrap;
  color: #8790a3;
}
.albumInfo__profile > ul > li.genre p {
  font-size: 12px;
  margin-top: 4px;
}
.albumInfo__profile > ul > li.genre div {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.albumInfo__profile > ul > li.genre div .badge-white {
  padding: 3px 4px;
}
.albumInfo__btnBox {
  display: flex;
  align-items: center;
  gap: 12px;
  text-wrap: nowrap;
  position: relative;
  justify-content: space-between;
  flex-direction: column;
}
.albumInfo__btnBox p {
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 12px;
  width: 100%;
  justify-content: space-between;
}
.albumInfo__btnBox p:last-child {
  justify-content: flex-end;
}
/* .albumInfo__btnBox .goodCount::before {
  background: url(/src/assets/images/common/active_heart_icon.svg)
    no-repeat center;
} */
.albumInfo__btnBox button {
  height: 34px;
  border-radius: 24px;
  gap: 8px;
  border-color: #e2dfe4;
}
.albumInfo__btnBox .btn-back {
  border-radius: 24px;
}
.albumInfo__btnBox .goodCount {
  padding: 8px 12px;
  border: 1px solid #3e3d53;
  border-radius: 24px;
  font-size: 14px;
  color: #3e3d53;
  line-height: 1;
  display: flex;
  flex-direction: row;
  text-wrap: nowrap;
  white-space: nowrap;
}
.albumInfo__btnBox .goodCount::before {
  content: '좋아요';
  display: inline-block;
  /* width: 18px; */
  /* height: 18px; */
  margin-right: 10px;
  vertical-align: middle;
  /* background: url(/src/assets/images/common/active_heart_icon.svg) no-repeat center; */
  background-size: contain;
  line-height: 1;
}

@media (max-width: 1340px) {
  .albumInfo__btnBox {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }
  .albumInfo__btnBox p {
    flex-direction: row;
    align-items: flex-start;
    width: 100%;
    justify-content: space-between;
  }
}
@media (max-width: 1250px) {
  .l-artist__content.pannel {
    gap: 2%;
  }
  #albumPage .l-artist__content.pannel .pannel__left {
    justify-content: center;
    display: flex;
    margin: 16px 0;
    max-width: 100%;
  }

  #albumPage .l-artist__content {
    flex-direction: column;
    gap: 0;
    padding: 0 0 16px;
  }

  .albumInfo {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: flex-start;
    margin: 0 16px;
    gap: 16px;
    align-items: flex-end;
  }
  .albumInfo .albumInfo__thum {
    min-width: 160px;
  }
  .albumInfo__profile {
    display: flex;
    gap: 16px;
    margin: 0;
    align-items: center;
  }

  .albumInfo__btnBox {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    flex-direction: row;
    align-items: center;
  }
  .albumInfo__btnBox p {
    width: min-content;
  }
}
@media (max-width: 700px) {
  .albumInfo > div {
    align-items: center;
    height: fit-content;
  }

  .albumInfo__btnBox {
    width: 100%;
    display: flex;
    justify-content: center;
    /* flex-direction: column; */
    align-items: center;
    flex-wrap: wrap;
  }
  .albumInfo {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
  .albumInfo > div {
    width: 100%;
    max-width: 400px;
  }
  .albumInfo .albumInfo__thum {
    width: 100%;
  }
  .albumInfo__profile {
    margin: 30px 0 12px 0;
  }
  .albumInfo__btnBox .goodCount {
    font-size: 12px;
  }
  .albumInfo__btnBox .btn-share {
    padding: 6px 10px;
    font-size: 12px;
  }
  .albumInfo__btnBox .btn-keep {
    min-width: 18px;
    width: 18px;
    height: 18px;
  }
  .albumInfo__btnBox .goodCount::before {
    margin-right: 4px;
  }
  .albumInfo__btnBox p {
    width: 100%;
  }
  .albumInfo__btnBox p:last-child {
    justify-content: start;
  }
}

/*================================
아티스트 > 영상 
================================*/
/* 영상 UI */
.artistMvListInList {
  min-width: 380px;
  max-width: 1220px;
  max-height: 243px;
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  border: solid 1px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  gap: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.artistMvListInList .artistIntro__title {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.artistMvListInList .artistIntro__title i {
  width: 16px;
  height: 16px;
  margin-right: 8px;
}
.artistMvListInList .artistIntro__title i + h4 {
  padding: 0;
}

.artistMvListInList .artistIntro__title h4 {
  display: flex;
  padding-bottom: 0;
  margin-right: 8px;
  font-size: 16px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  gap: 4px;
  cursor: pointer;
  width: calc(100% - 64px);
}

.artistMvListInList .artistIntro__title h4 .artistNm {
  background: linear-gradient(90deg, #b041f3 0%, #ec15ff 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  max-width: 380px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.artistMvListInList .artistIntro__title h4 .btn_moreTitle {
  /* background: url(/src/assets/images/common/angle-right-solid.svg) no-repeat center;
  width: 16px;
  height: 16px; */
}
.artistMvListInList .artistIntro__title .more-btn {
  display: flex;
  padding: 4px 8px;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  border-radius: 24px;
  border: 1px solid #a3a1a7;
  background: #fff;
  font-size: 12px;
  margin-left: 8px;
  width: auto;
}
.artistMvListInList .artistIntro__title .close-btn {
  top: 18px;
  width: 20px;
  height: 20px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwBAMAAAClLOS0AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAASUExURUdwTAAAAAAAAAAAAAAAAAAAAFZgiOcAAAAFdFJOUwBgX5/ffhjBrwAAAKtJREFUOMt1lMkVgCAMBUMR3C1CK/DZgEr/rQiIyPLHW8IfDNlsXUx87rJwqgN/mw8CcVHuFJLVAnnFAinaCfmkE1KVA/ILB6TRdUgr65BO1Rj9vY01RFLNMfZqT68tjjk/xSMyml2qBtknqxadsmgJkUBCdGNERAN8QFfhzylcfCClBJNIacdCUWmxGah9sOGoRbGpaQxwcGjUcDhpnHEB4Mo49JIJtum1tD/T6DbbeF1PlgAAAABJRU5ErkJggg==) no-repeat center;
  background-size: contain;
}
.artistMvListInList .artistIntro__main {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
}
.artistMvListInList .artistInfoVideo {
  width: 188px;
}
.artistMvListInList .artistInfoVideo__thum {
  height: 90px;
}
.artistMvListInList .artistInfoVideo__list .artistInfoVideo__video li.profile > img {
  width: 18px;
  height: 18px;
}
.artistMvListInList .artistInfoVideo__list .artistInfoVideo__video .profile p,
.artistMvListInList .artistInfoVideo__list .artistInfoVideo__video .info p {
  font-size: 12px;
  text-wrap-mode: nowrap;
}
.artistMvListInList .artistInfoVideo__list .artistInfoVideo__video .info .btn-download {
  /* width: 26px;
  height: 26px; */
}
.artistMvListInList .artistIntro__title {
  background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
  background: initial;
  margin-bottom: 0;
}
.artistMvListInList .notice-none {
  height: 158px;
}
@media (max-width: 932px) {
  .ant-dropdown:has(.artistMvListInList) {
    position: fixed;
    top: 0 !important;
    left: 0 !important;
  }
  .artistMvListInList {
    min-width: auto;
    min-height: auto;
    width: 100vw;
    height: 100vh;
    border-radius: 0;
    max-height: none;
  }
  .artistMvListInList .artistIntro__title {
    justify-content: start;
    height: auto;
    padding-top: 30px;
    margin-bottom: 8px;
  }
  .artistMvListInList .artistIntro__title i {
    min-width: 16px;
    min-height: 16px;
  }
  .artistMvListInList .artistIntro__title h4 {
    padding: 0;
    margin: 0;
  }
  .artistMvListInList .artistIntro__title button {
    width: 24px;
    height: 24px;
  }
  .artistMvListInList .artistIntro__main {
    width: 100%;
    gap: 0.5vw;
    flex: initial;
  }
  .artistMvListInList .artistInfoVideo {
    flex: 1 1;
    max-width: 18vw;
  }
  .artistMvListInList .artistInfoVideo:nth-of-type(6) {
    display: none;
  }
}
@media (max-width: 700px) {
  .artistMvListInList .artistIntro__title {
    padding-top: 60px;
  }
  .artistMvListInList .artistIntro__main {
    justify-content: space-between;
    gap: 1vw;
    row-gap: 12px;
  }
  .artistMvListInList .artistInfoVideo {
    max-width: 48.5%;
    width: 48.5%;
  }
  .artistMvListInList .artistInfoVideo:nth-of-type(6) {
    display: block;
  }
}
.artistInfoVideo {
  max-width: 248px;
  width: 100%;
  padding: 0px;
  border-radius: 8px;
  border: 4px solid transparent;
  transition: 0.3s;
  /* cursor: pointer; */
  position: relative;
}
.artistMvListInDetail .artistInfoVideo {
  max-width: none;
  max-width: initial;
}
.artistInfoVideo:hover {
  border: 4px solid #c718e2;
  box-shadow: 0px 0px 8px 0px rgba(236, 21, 255, 0.5);
  border-radius: 12px;
}
.slider-container2 .slick-list .slick-track {
  gap: 8px;
  display: flex;
  flex-direction: row;
}

.slider-container2 .slick-list .slick-track {
  gap: 4px;
  display: flex;
  flex-direction: row;
}
.slider-container2 .slick-list .slick-track .slick-slide {
  gap: 16px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
.slider-container2 .slick-list .slick-track .slick-slide > div {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}
.slider-container2 .slick-list .slick-track .slick-slide > div > div {
  width: 100%;
  height: max-content;
}

/* .slider-container2 .artistInfoVideo {
  border: 1px solid #ddd;
  padding: 0;
  background: #fff;
}
.slider-container2 .artistInfoVideo:hover {
  border: 4px solid #c718e2;
  box-shadow: 0px 0px 8px 0px rgba(236, 21, 255, 0.5);
  border-radius: 12px;
  padding: 0px;
} */
.artistInfoVideo:hover .artistInfoVideo__thum .artistInfoVideo__thum_hoverBg {
  width: 100%;
  height: 0;
  background: #0006;
  position: absolute;
  top: 0;
  left: 0;
  padding-bottom: calc(198 / 352 * 100%);
}
/* .slider-container2 .artistInfoVideo:hover .artistInfoVideo__list .artistInfoVideo__video {
  padding: 8px 4px 4px;
} */

/* .artistInfoVideo:hover .artistInfoVideo__thum .icon-video {
  opacity: 1;
  z-index: 10;
} */
.artistInfoVideo .rock {
  left: 0;
  border-radius: 8px;
}
.artistInfoVideo__thum {
  position: relative;
  display: flex;
  align-items: end;
  justify-content: end;
  width: 100%;
  height: 0;
  padding: 8px;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  padding-bottom: calc(198 / 382 * 100%);
  cursor: pointer;
}
.artistInfoVideo__thum::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), transparent 30%);
  pointer-events: none;
}
.artistInfoVideo__thum .thumTit {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 10;
  width: 100%;
  padding: 3px 8px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 16px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.artistInfoVideo__thum .icon-video {
  /* margin: auto;
  margin-top: 20%; */
  opacity: 1;
  z-index: 10;
  position: absolute;
  bottom: 8px;
}

.artistInfoVideo__thum > img {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.artistInfoVideo__list .artistInfoVideo__video {
  padding: 8px 4px 4px;
  background: #fff;
  border-radius: 0 0 8px 8px;
}
.artistInfoVideo__list .artistInfoVideo__video li.profile {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #0e0e1f;
}
.artistInfoVideo__list .artistInfoVideo__video li.profile > img {
  width: 20px;
  height: 20px;
  border-radius: 20px;
}
.artistInfoVideo__list .artistInfoVideo__video li.profile p {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.artistInfoVideo__list .artistInfoVideo__video li.info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-items: center;
  padding: 2px 0;
}
.artistInfoVideo__list .artistInfoVideo__video li.info span {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
}
.artistInfoVideo__list .artistInfoVideo__video li.info span .date {
  padding-top: 1px;
  line-height: 1;
}
.artistInfoVideo__list .artistInfoVideo__video li.info * {
  width: min-content;
  letter-spacing: -0.2px;
}
.artistInfoVideo__list .artistInfoVideo__video li.info .btn-download.disabled {
  background-image: url(../../static/media/i-downD.92e2930eba8175719d3f.svg) !important;
}
.artistInfoVideo__list .artistInfoVideo__video li.info .btn-download:disabled,
.artistInfoVideo__list .artistInfoVideo__video li.info .btn-download {
  min-width: 26px;
  width: auto;
  border-radius: 26px;
  border: 1px solid #ccc;
  background-image: url(../../static/media/i-downL.734152a49c16338b2b4c.svg);
  background-size: 12px !important;
  background-repeat: no-repeat;
  background-position: right 4px center !important;
  padding-right: 18px;
  height: 20px;
  display: flex;
}
.artistInfoVideo__list .artistInfoVideo__video li.info .btn-download::before {
  content: 'MP3';
  line-height: 1;
  font-size: 10px;
}
#musicWrapper .rsWrapper > div .content .listBox .list .artistMvListInList .artistInfoVideo__list .artistInfoVideo__video .li.profile p {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.24px;
}
#musicWrapper .rsWrapper > div .content .listBox .list .artistMvListInList .artistInfoVideo__list .artistInfoVideo__video li.info p {
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.24px;
}

.artistInfoVideo__list li.info .viewCount {
  padding-left: 20px;
  background: url(../../static/media/i-count.7aba6db4f80a502ab17a.svg) no-repeat left center;
  background-size: 16px;
}
.artistInfoVideo__music {
  display: flex;
  gap: 8px;
  padding: 4px;
  border-radius: 8px;
  background: #f5f5f5;
}
.artistInfoVideo__music .musicThum {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 48px;
  font-size: 12px;
}
.artistInfoVideo__music .musicThum > img {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
  background-color: rgb(62, 61, 83);
}
.artistInfoVideo__music .musicInfo {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
}
.artistInfoVideo__music .musicInfo li {
  display: flex;
  line-height: 1.2;
}
.artistInfoVideo__music .musicInfo li.title {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12px;
  font-weight: 500;
}
.artistInfoVideo__music .musicInfo li.profile {
  align-items: center;
  flex-direction: row;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 11px;
  cursor: pointer;
}
.artistInfoVideo__music .musicInfo li.profile > img {
  width: 16px;
  height: 16px;
  margin-right: 8px;
  border-radius: 16px;
  object-fit: cover;
}
@media (max-width: 700px) {
  .artistInfoVideo {
    max-width: none;
    width: 47%;
    padding: 0;
  }
  .slick-list .artistInfoVideo {
    width: 100%;
  }
  .artistInfoVideo__thum {
    height: 90px;
  }
  .artistInfoVideo__thum .thumTit {
    font-size: 14px;
  }
}

@media (max-width: 500px) {
  .artistInfoVideo__music .musicThum {
    display: none;
  }
}

/*================================
아티스트 > 소식
================================*/
#artistNews {
  padding-top: 20px;
}
#artistNews:has(.notice-link) {
  padding-top: 20px;
}
/* 나중에 추가된 소식작성 버튼 */
#artistNews .l-artist__header .btn-edit.btn-dark {
  height: 40px;
  padding: 0 12px;
  border-radius: 4px;
}
.newsBox {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  padding: 8px;
}
/* 상단 */
.newsBox__head {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.newsBox__head .profileBox {
  display: flex;
  align-items: center;
  gap: 12px;
}
.newsBox__head .profileBox > img {
  width: 32px;
  height: 32px;
  border-radius: 32px;
  object-fit: cover;
}
.newsBox__head .profileBox > div {
  width: fit-content;
}
.newsBox__head .profileBox .name {
  font-size: 16px;
  color: #0e0e1f;
  line-height: 1;
}
.newsBox__head .profileBox > div > .date {
  font-size: 11px;
  color: #6d6c75;
}
.newsBox__head .infoBox {
  display: flex;
  align-items: center;
  gap: 20px;
}
.newsBox__head .infoBox li {
  display: flex;
  align-items: center;
  gap: 8px;
  /*  cursor: pointer; */
}
/* 컨텐츠 왼쪽 */
.newsBox__cont {
  display: flex;
  width: 100%;
  gap: 20px;
  justify-content: space-between;
}
.newsBox__cont .left {
  min-width: 600px;
  font-size: 13px;
}
.newsBox__cont .left .content {
  display: flex;
  flex-direction: column;
}
.newsBox__cont .left .content p {
  display: -webkit-box;
  line-height: normal;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.newsBox__cont .left .content.active p {
  display: block;
  overflow: visible;
}
.newsBox__cont .left .content button {
  align-self: end;
  text-decoration: underline;
  color: #939ca7;
}
.newsBox__cont .left > a {
  display: inline-block;
  margin: 5px 0;
}
/* 컨텐츠 오른쪽 */
.newsBox__cont .right {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 12px;
}
.newsBox__cont .right > li {
  width: 180px;
  height: 100px;
  border-radius: 8px;
  overflow: hidden;
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 40%);
  background-color: rgb(62, 61, 83);
}
.newsBox__cont .right > li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 컨텐츠 편집모드 */
.newsBox__cont.edit-mode .right {
  flex-direction: column;
  align-items: start;
  justify-content: start;
  width: 100%;
  overflow: hidden;
}
.newsBox__cont.edit-mode .right > ul {
  display: flex;
  width: 100%;
  gap: 12px;
}
.newsBox__cont.edit-mode .right > ul > li {
  min-width: 180px;
  width: 180px;
  height: 100px;
}
.newsBox__cont.edit-mode .right > ul > li img:not(.iconStyle) {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.newsBox__cont.edit-mode .right .btnArea {
  align-self: flex-end;
}
.newsBox__cont.edit-mode .right .btnArea button {
  width: 80px;
}
.newsBox__cont.edit-mode .left {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.newsBox__cont.edit-mode .left textarea {
  min-height: 135px;
}
/* 컨텐츠 편집모드 - 이미지 편집 아이콘 컨트롤 */
.newsBox__cont.edit-mode .right > ul > li img.iconStyle {
  visibility: hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  opacity: 0;
  transition: 0.3s;
}
.newsBox__cont.edit-mode .right > ul > li img.iconStyle:nth-of-type(1) {
  left: 35%;
}
.newsBox__cont.edit-mode .right > ul > li img.iconStyle:nth-of-type(3) {
  left: 65%;
}
.newsBox__cont.edit-mode .right > ul > li:hover img.iconStyle {
  visibility: visible;
  opacity: 1;
}
#artistNews .l-artist__content .btn-view {
  margin: 20px auto;
}
@media (max-width: 700px) {
  #artistNews {
    padding-top: 0px;
  }
  #artistNews .l-artist__header .btn-edit.btn-dark {
    gap: 4px;
    height: 30px;
    font-size: 13px;
  }
  .newsBox__head .profileBox > div > .date {
    display: none;
  }
  .newsBox__cont {
    flex-direction: column;
  }
  .newsBox__cont .left {
    min-width: 100%;
  }
  .newsBox__cont .left .content {
    flex-direction: column;
    justify-content: flex-start;
    gap: 10px;
  }
  .newsBox__cont .right,
  .newsBox__cont.edit-mode .right > ul {
    justify-content: start;
    flex-wrap: wrap;
    gap: 2vw;
  }
  .newsBox__cont .right > li,
  .newsBox__cont.edit-mode .right > ul > li {
    min-width: 0;
    min-width: initial;
    width: 48.5%;
  }
  .newsBox__cont.edit-mode .right .btnArea {
    align-self: center;
  }
}
/* 소식컨텐츠 입력영역 otherType으로 컨트롤 */
.newsBox.otherType {
  padding: 16px;
  border-radius: 8px;
  background-color: #f3f3f3;
}
.newsBox.otherType .newsBox__cont .left {
  width: auto;
  flex: 1 1;
  min-width: 700px;
  gap: 12px;
}
.newsBox.otherType .newsBox__cont .left textarea {
  height: 130px;
  margin-bottom: 12px;
}
.newsBox.otherType .newsBox__cont .left input {
  height: 32px;
}
.newsBox.otherType .newsBox__cont .right {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: start;
  flex: 1 1;
  gap: 12px;
}
.newsBox.otherType .newsBox__cont .right > p {
  font-size: 12px;
  color: #464548;
}
.newsBox.otherType .newsBox__cont .right > .btnBox {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 8px;
  width: 100%;
}
.newsBox.otherType .newsBox__cont .right > ul {
  display: flex;
  align-items: center;
  gap: 12px;
}
/* 이미지 업로드  - 껍데기 */
.newsBox.otherType .newsBox__cont .right > ul > li {
  width: 180px;
  height: 100px;
}
/* 이미지 업로드 - 이미지 첨부 되는 영역 */
.newsBox.otherType .newsBox__cont .right > ul > li .imageContainer {
  width: 100%;
  height: 100%;
}
/* 이미지 업로드 - 첨부된 이미지 */
.newsBox.otherType .newsBox__cont .right > ul > li .imageContainer > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.newsBox.otherType .newsBox__cont .right > ul > li .iconOverlay {
  width: 100%;
  height: 100%;
}
.newsBox.otherType .newsBox__cont .right > .btnBox button {
  width: 80px;
  height: 32px;
}
@media (max-width: 700px) {
  .newsBox.otherType .newsBox__cont .left {
    min-width: 0;
  }
  .newsBox.otherType .newsBox__cont .right > ul {
    flex-wrap: wrap;
    gap: 2vw;
  }
  .newsBox.otherType .newsBox__cont .right > ul > li {
    width: 48.5%;
  }
  .newsBox.otherType .newsBox__cont .right > .btnBox {
    justify-content: center;
  }
}
/*================================
아티스트 > 소식 > 더보기 모달
================================*/
.modalNews {
  width: 1000px !important;
  border-radius: 8px;
  overflow: hidden;
}
.modalNews .wrap {
  display: flex;
  width: 100%;
  gap: 0px;
  flex-direction: row;
}
.modalNews .wrap .newsBox {
  width: calc(100% - 380px);
}
.modalNews .wrap .commentBox {
  width: 380px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 4px;
  padding: 12px 32px 20px 20px;
  min-height: 500px;
  /* max-height: 800px; */
}
.modalNews .wrap .commentBox > div {
  width: 100%;
}
.modalNews .ant-modal-title {
  justify-content: start !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.modalNews .ant-modal-body {
  padding: 0px;
}
@media (max-width: 700px) {
  .ant-modal.modalNews {
    width: 100% !important;
    max-width: none !important;
    height: 100vh !important;
    margin: 0;
    top: 0;
    border-radius: 0;
  }
  .modalNews .ant-modal-content {
    border-radius: 0;
    height: 100vh;
  }
  .modalNews .ant-modal-header {
    height: 55px;
  }
  .modalNews .ant-modal-body {
    height: calc(100vh - 55px);
    overflow: scroll;
  }
  .modalNews .wrap {
    flex-direction: column;
  }
  .modalNews .wrap > div.commentBox {
    width: 100%;
  }
}
/* 왼쪽 게시물 영역  (newsBox의 left right가 세로로 떨어지는 형태) */
.modalNews .newsBox.modalType {
  min-height: 500px;
  max-height: 800px;
  overflow: scroll;
  padding: 12px 16px 20px 32px;
  border-right: 1px solid #ddd;
}
.modalNews .newsBox.modalType .newsBox__cont {
  flex-direction: column;
}
.modalNews .newsBox.modalType .newsBox__cont .left {
  min-width: auto;
}
.modalNews .newsBox.modalType .newsBox__cont .right {
  flex-direction: column;
}
.modalNews .newsBox.modalType .newsBox__cont .right > li {
  width: 100%;
  height: auto;
  height: initial;
}
/* 오른쪽 코멘트 영역 artist_comment_leejh.css 기반 */
.modalNews .commentBox #artist-comment-container .comment-textarea {
  min-height: 40px;
  height: 40px;
  padding: 8px;
  border: 1px solid #e2dfe4;
  resize: auto;
}
.modalNews .commentBox #artist-comment-container .comment-submit-btn {
  height: 40px;
  font-size: 14px;
  min-width: 72px;
  border-radius: 4px;
  background: #a3a1a7;
  opacity: 1 !important;
}
.modalNews .commentBox #artist-comment-container .comment-list {
  max-height: 700px;
  overflow: auto;
}
.modalNews .commentBox #artist-comment-container .comment-user {
  gap: 8px;
}
.modalNews .commentBox #artist-comment-container .comment-user .ant-avatar {
  width: 20px;
  height: 20px;
  margin-top: 2px;
}
.modalNews #artist-comment-container .comment-header h2 {
  margin-bottom: 12px;
}

.modalNews .commentBox #artist-comment-container .comment-header {
  align-items: start;
  margin-bottom: 0;
}
.modalNews .commentBox #artist-comment-container .comment-meta {
  gap: 0;
}
.modalNews .commentBox button {
  height: 22px;
  padding: 4px;
  border: 1px solid #c4c3c7;
  font-size: 12px;
  font-weight: 500;
}
.modalNews .commentBox #artist-comment-container button.btn-edit {
  width: 22px;
  gap: 0;
  border-color: #525162;
  font-size: 0;
}
.modalNews .commentBox #artist-comment-container button:has(.btn-del-icon) {
  gap: 0;
  padding: 4px;
  border: none;
  font-size: 0;
}
.modalNews .commentBox #artist-comment-container button:has(.btn-del-icon):hover {
  background-color: transparent;
}
.modalNews .commentBox #artist-comment-container button.show-replies-btn {
  gap: 4px;
  padding: 4px;
  border: 1px solid #c4c3c7;
}
@media (max-width: 700px) {
  .modalNews .newsBox.modalType {
    min-height: auto;
    max-height: none;
    max-height: initial;
    width: 100%;
  }
  .modalNews .commentBox #artist-comment-container .comment-textarea {
    resize: none;
  }
}

/*================================
명예의 전당
================================*/
#musicHistory {
  padding-top: 40px;
}
#musicHistory > .l-artist__header {
  align-items: end;
}
#musicHistory > .l-artist__header h3 {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  max-width: calc(100% - 150px);
  padding-left: 150px;
  font-size: 32px;
  text-align: center;
  justify-content: center;
  gap: 16px;
}
#musicHistory > .l-artist__header h3 span {
  font-size: 20px;
  font-weight: bold;
  background: linear-gradient(90deg, #13d5df 45%, #f138fc 55%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* 안에 컴포넌트 5개 정렬 */
#musicHistory > .l-artist__content {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 20px;
  gap: 20px;
  padding: 40px 0 60px 0;
}
/* 카드컴포넌트 아티스트 > 채널 홈 정보 UI (.artistInfo) 응용*/
#musicHistory .artistInfo {
  width: 280px;
  gap: 0;
}
#musicHistory .artistInfo > .artistInfo__profile {
  width: 100%;
  height: 280px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  overflow: hidden;
}
#musicHistory .artistInfo > .artistInfo__profile > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#musicHistory .artistInfo > .artistInfo__list {
  position: relative;
  align-items: center;
  gap: 8px;
  width: 264px;
  min-height: 258px;
  padding: 12px;
  padding-top: 16px;
  margin-top: -16px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.05);
}
#musicHistory .artistInfo > .artistInfo__list .promptRankIcon {
  background-size: cover;
}
#musicHistory .artistInfo > .artistInfo__list .promptRankIcon:before {
  background-size: cover;
}
#musicHistory .artistInfo > .artistInfo__list .promptRankIcon span {
  background-size: cover;
}
#musicHistory .artistInfo > .artistInfo__list > li {
  width: 100%;
}
#musicHistory .artistInfo > .artistInfo__list > .rank {
  position: absolute;
  width: 38px;
  height: 41px;
  top: -3px;
  left: 8px;
}
#musicHistory .artistInfo > .artistInfo__list .name {
  display: inline-block;
  max-width: 180px;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 20px;
}
#musicHistory .artistInfo > .artistInfo__list .name a {
  color: inherit;
  font-weight: 600;
}
#musicHistory .artistInfo > .artistInfo__list .title {
  display: flex;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 16px;
  font-weight: 500;
  color: #e613b5;
  justify-content: center;
  align-items: center;
}
#musicHistory .artistInfo > .artistInfo__list > .title button::after {
  content: '';
  display: inline;
  width: 20px;
  height: 20px;
  background: url(../../static/media/i-videoB.26b80e2b2a1e1926ed73.svg) no-repeat center;
  background-size: contain;
  vertical-align: middle;
}
#musicHistory .artistInfo > .artistInfo__list > .original {
  font-size: 12px;
}
#musicHistory .artistInfo > .artistInfo__list > .original a {
  padding-left: 8px;
  font-size: 13px;
}
#musicHistory .artistInfo > .artistInfo__list .count {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 14px;
}
#musicHistory .artistInfo > .artistInfo__list .count > i {
  vertical-align: middle;
  margin-right: 4px;
}
#musicHistory .artistInfo > .artistInfo__list .count > div > i.viewCount {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 3px;
  vertical-align: bottom;
  background: url(../../static/media/i-count.7aba6db4f80a502ab17a.svg) no-repeat center;
  background-size: contain;
}
#musicHistory .artistInfo > .artistInfo__list .count > div > i.likeCount {
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: bottom;
  background: url(../../static/media/i-good.f8e643ecdaf4fa8a9a71.svg) no-repeat center;
  background-size: contain;
}
#musicHistory .artistInfo > .artistInfo__list .school {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1;
  font-size: 13px;
  font-weight: 500;
  color: #3e3d53;
}
#musicHistory .artistInfo > .artistInfo__list .school > span:not(:last-child)::after {
  content: '/';
  display: inline-block;
  margin: 0 5px;
  color: #c4c3c7;
}
#musicHistory .artistInfo > .artistInfo__list > .artistmemBox {
  display: flex;
  justify-content: center;
  width: 100%;
  gap: 8px;
}
#musicHistory .artistInfo > .artistInfo__list > .artistmemBox > .artistmem {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 50px;
  font-size: 11px;
  text-align: center;
  gap: 2px;
}
#musicHistory .artistInfo > .artistInfo__list > .artistmemBox > .artistmem > img {
  max-width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  overflow: hidden;
}
#musicHistory .artistInfo > .artistInfo__list > .artistmemBox > .artistmem > span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#musicHistory .artistInfo > .artistInfo__list > .linkBox {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  padding: 4px;
  border-radius: 8px;
  background: #f3f3f3;
  font-size: 12px;
  color: #000;
}
#musicHistory .artistInfo > .artistInfo__list > .linkBox button {
  color: #000;
}
#musicHistory .artistInfo > .artistInfo__list > .linkBox > div button::after {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAF5SURBVHgBzZJPTsJQEId/81r/LDkC3IAlIdT0CA1o4k48AdwAOYF4AnCv0CM0KSHs5Aj1Bl0itG+cVlEDVAto4pe0mfa9fm9mOsB/h5JbtXpRNlXs4AAWkR5Mp25Atu0UtDaewCjiMEJlxCVTgkIqY32nIu5hD7RJbZBqzecomJ+vKfSmoyCJLKvhEKMjDSnLYTMmdH3/0c0SntXq4SpW64upDBilsvQclJPnWu3cRg42hJJRa9tGIu5gH6EilLYKWXq9j5BZb+0VE8+QVyg9emZG2lhlnvTkRbCmC5ZL3c3hexvsdWz7sqijFxkFKZOMQKmo53lumCWRv3wjTe4slnFJbcqcQhwvbGYKkFxaI45hVypOETn4mEPLqjdFcKXl4zRt9bUMA8dHsqfW8KD53p8MB1lC9S67JVCfCDa+IVkng/oyq/1MYVKiyNrYAamgmdWCJMNc8/UzHJyeIjTxC2goT8fkTvxhKgwV+Bo7kmSzisfjBw9/xSvcZ4K0efO3oAAAAABJRU5ErkJggg==) no-repeat center;
  background-size: contain;
  vertical-align: middle;
}
#musicHistory .artistInfo > .artistInfo__list > .linkBox button::after {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url(../../static/media/i-videoB.26b80e2b2a1e1926ed73.svg) no-repeat center;
  background-size: contain;
  vertical-align: middle;
}
#musicHistory > .l-artist__header {
  padding: 16px 0 16px 0;
  /* border-bottom: solid 2px #464548; */
}

#musicHistory > .noListData {
  width: 100%;
  height: 100px;
  text-align: center;
}

#musicHistory > .noListData h1 {
  font-weight: 600;
  font-size: 20px;
  line-height: 100px;
}
@media (max-width: 1100px) {
  #musicHistory > .l-artist__content {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 900px) {
  #musicHistory > .l-artist__content {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 700px) {
  #musicHistory {
    padding-top: 0;
  }
  #musicHistory > .l-artist__header {
    padding: 0 0 12px;
    flex-direction: column;
    align-items: start;
  }
  #musicHistory > .l-artist__header h3 {
    width: 100%;
    max-width: 100%;
    padding: 16px 0;
    font-size: 26px;
  }
  #musicHistory > .l-artist__header h3 span {
    font-size: 16px;
    background: linear-gradient(90deg, #13d5df 15%, #f138fc 95%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  #musicHistory > .l-artist__content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4vw;
  }
  #musicHistory .artistInfo {
    min-width: 150px;
    width: 43.5vw;
  }
  #musicHistory .artistInfo > .artistInfo__profile {
    height: 43.5vw;
  }
  #musicHistory .artistInfo > .artistInfo__list {
    width: 100%;
    min-height: 205px;
    height: fit-content;
    padding: 12px;
  }
  #musicHistory .artistInfo > .artistInfo__list .name {
    max-width: calc(100% - 50px);
    font-size: 14px;
  }
  #musicHistory .artistInfo > .artistInfo__list .title {
    padding: 0;
    font-size: 12px;
  }
  #musicHistory .artistInfo > .artistInfo__list > .title button::after {
    width: 16px;
    height: 16px;
  }
  #musicHistory .artistInfo > .artistInfo__list .count {
    gap: 8px;
    font-size: 14px;
  }
  #musicHistory .artistInfo > .artistInfo__list .count i {
    width: 14px;
    height: 14px;
  }
  #musicHistory .artistInfo > .artistInfo__list .school {
    font-size: 11px;
  }
  #musicHistory .artistInfo > .artistInfo__list .school > span:not(:last-child)::after {
    margin: 0 3px;
  }
  #musicHistory .artistInfo > .artistInfo__list > .artistmemBox {
    gap: 2px;
  }
  #musicHistory .artistInfo > .artistInfo__list > .artistmemBox > .artistmem {
    max-width: 35px;
    font-size: 10px;
  }
  #musicHistory .artistInfo > .artistInfo__list > .artistmemBox > .artistmem > img {
    max-width: 24px;
    height: 24px;
    max-height: 24px;
  }
  #musicHistory .artistInfo > .artistInfo__list > .artistmemBox > .artistmem > span {
    display: none;
  }
  #musicHistory .artistInfo > .artistInfo__list > .linkBox {
    justify-content: space-between;
    font-size: 11px;
  }
  #musicHistory .artistInfo > .artistInfo__list > .linkBox button {
    padding: 0;
    gap: 4px;
  }
  #musicHistory .artistInfo > .artistInfo__list > .linkBox button::after {
    width: 14px;
    height: 14px;
  }
}

/*================================
Slick
================================*/
#ArtistSlider {
  width: 100%;
  padding: 0 24px;
}
#ArtistSlider .slick-list {
  padding: 8px 8px 24px;
}

.ant-modal-body #artistBanner {
}
@media (max-width: 700px) {
  #ArtistSlider {
    padding: 0;
  }
  #ArtistSlider .slick-slider {
    margin-bottom: 25px !important;
  }
  #ArtistSlider .slick-dots {
    bottom: -20px;
  }
  #ArtistSlider .artistInfo {
    max-width: 100%;
    flex-direction: row;
    gap: 20px;
    padding: 12px 32px;
  }
  #ArtistSlider .artistInfo__profile {
    width: 80px;
    height: 80px;
  }
  #ArtistSlider .artistInfo__list {
    text-align: left;
  }
  #ArtistSlider .artistInfo__list .name {
    font-size: 16px;
    margin-bottom: 0px;
  }
}
#ArtistBannerSlider {
  position: relative;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  height: 320px;
}
#ArtistBannerSlider .slick-dots {
  bottom: 10px;
}
#ArtistBannerSlider .artistBanner {
  position: relative;
  height: 320px;
  /* border-radius: 16px; */
  background: linear-gradient(90deg, #13d5df 0%, #f138fc 100%);
  overflow: hidden;
}
#ArtistBannerSlider .artistBanner > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#ArtistBannerSlider > button {
  position: absolute;
  right: 8px;
  top: 8px;
}

#artistHome #ArtistBannerSlider > button.btn-edit.round::before {
  filter: brightness(0);
}

@media (max-width: 700px) {
  #ArtistBannerSlider {
    height: auto;
    border-radius: 0;
  }
  #ArtistBannerSlider .artistBanner {
    height: 130px;
    border-radius: 0;
  }
  #ArtistBannerSlider .slick-dots {
    bottom: 4px;
  }
}
#artistVideo,
#artistAlbum {
  padding-top: 0px;
  border-top: solid 2px #464548;
}
/* padding-top: 40px; 에서 변경 , 소식과 높이 맞춤*/
#artistHome #artistVideo,
#artistHome #artistAlbum {
  padding-top: 20px;
  border-top: none;
}

#artistAlbum > .l-artist__content > .cardList > .noListData {
  width: 100%;
  height: 100px;
  text-align: center;
}

#artistAlbum > .l-artist__content > .cardList > .noListData h1 {
  font-weight: 600;
  font-size: 20px;
  line-height: 100px;
}
.music-type-notice-none {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  margin-top: 2px;
  margin-right: 8px;
}
.title .music-type-notice-none,
.title .music-type-notice-none::before {
  margin: 0;
}
.music-type-notice-none::before {
  content: '';
  width: 18px;
  height: 18px;
  margin-right: 8px;
  background: url(../../static/media/i-notice.0ec2d0cb5471475675f6.svg) no-repeat top center;
  /* background: url(/src/assets/images/common/circle-exclamation-solid.svg) no-repeat center; */
  background-size: auto;
  cursor: pointer;
}

/* Tooltip 모바일 스타일 */
.ant-tooltip-inner {
  font-size: 14px !important;
  line-height: 1.4 !important;
  word-wrap: break-word !important;
  white-space: normal !important;
}

@media (max-width: 700px) {
  .ant-tooltip-inner {
    font-size: 13px !important;
    max-width: 300px !important;
    padding: 8px 12px !important;
  }
}

@media (max-width: 700px) {
  #artistHome #artistVideo,
  #artistHome #artistAlbum {
    padding-top: 0;
  }
  .slider-container2 .slick-list .slick-track {
    gap: 16px;
    display: flex;
    flex-direction: row;
  }
  .slider-container2 .slick-list .slick-track .slick-slide {
    gap: 16px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
  }
  .slider-container2 .slick-list .slick-track .slick-slide > div {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .slider-container2 .slick-list .slick-track .slick-slide > div > div {
    width: 49% !important;
    height: max-content;
    /* aspect-ratio: 2 / 3; */
  }
}

/* 게시판 작성페이지 썸네일 */

#boardDetail .imageContainer {
  display: flex;
  flex-direction: row;
  align-items: center;
  overflow: hidden;
  height: 200px;
  gap: 12px;
}
#boardDetail .imageContainer img {
  max-width: 24px;
  max-height: 24px;
  display: flex;
}
#boardDetail .imageContainer img.uploadthum {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}

#boardDetail .plusBox .imageContainer img.expandIcon,
#boardDetail .plusBox .imageContainer img.changeIcon,
#boardDetail .plusBox .imageContainer img.trashIcon {
  z-index: 99;
}
#boardDetail .plusBox .imageContainer img.uploadthum {
  transition: filter 0.3s ease-in-out;
  filter: brightness(1);
  object-fit: cover;
  width: 100%;
  height: 100%;
  border-radius: 4px;
}
#boardDetail .plusBox:hover .imageContainer img.expandIcon,
#boardDetail .plusBox:hover .imageContainer img.changeIcon,
#boardDetail .plusBox:hover .imageContainer img.trashIcon {
  opacity: 1;
}
#boardDetail .plusBox:hover .imageContainer img.uploadthum {
  filter: brightness(0.7);
}
#boardDetail .plusBox .ant-upload-disabled .imageContainer img {
  cursor: not-allowed;
}
#boardDetail .content:has(.flexColStart.box) .box.image .info {
  overflow: auto;
}
#boardDetail .info .ant-upload-wrapper.fileBtnBox .ant-upload-drag {
  height: auto;
}
#boardDetail .info .ant-upload-wrapper.fileBtnBox .ant-upload-drag .ant-upload-btn {
  padding: 0;
}
#boardDetail .info .ant-upload-wrapper.fileBtnBox .ant-upload-disabled button {
  cursor: not-allowed;
}

/* 프로필 영역 */
#artistProfile #darkGrey {
  border: solid 1px #525162;
  background: #525162;
  color: #ffffff;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  font-size: 12px;
}
#artistBanner .titleArea {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 12px;
}
#artistBanner .titleArea h3 {
  font-size: 12px;
}
#artistBanner .titleArea label {
  font-size: 10px;
}
#myProfile .profileBox .iconExpand {
  cursor: pointer;
  position: absolute;
  top: 50%;
  right: 62.5%;
  width: 20px !important;
  height: 20px !important;
  transform: translateY(-50%);
  pointer-events: auto;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  z-index: 10;
}
#artistBanner .profileBox .banBox {
  padding: 20px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
/* 배너 영역이 늘어날 때 보더 컨트롤 */
#artistBanner .profileBox:not(:has(.banBox:nth-of-type(3))) .banBox:nth-of-type(2),
#artistBanner .profileBox:has(.banBox:nth-of-type(3)) .banBox:nth-of-type(3) {
  border-bottom: none;
}
#myProfile .profileBox .iconChange {
  cursor: pointer;
  position: absolute;
  top: 50%;
  right: 42.5%;
  width: 20px !important;
  height: 20px !important;
  transform: translateY(-50%);
  pointer-events: auto;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  z-index: 10;
}

#myProfile .profileBox .iconTrash {
  cursor: pointer;
  position: absolute;
  top: 48.5%;
  right: 22.5%;
  width: 20px !important;
  height: 20px !important;
  transform: translateY(-50%);
  pointer-events: auto;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  z-index: 10;
}

#myProfile #profileImage {
  border-radius: 8px;
  transition: filter 0.3s ease-in-out;
}

#myProfile .profilePreview {
  width: 140px;
  height: 140px;
  object-fit: cover;
}

#myProfile .plusBannerBox .iconExpand {
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 43%;
  width: 20px !important;
  height: 20px !important;
  transform: translate(-50%, -43%);
  pointer-events: auto;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  z-index: 10;
}

#myProfile .plusBannerBox .iconChange {
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px !important;
  height: 20px !important;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  z-index: 10;
}

#myProfile .plusBannerBox .iconTrash {
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 57%;
  width: 20px !important;
  height: 20px !important;
  transform: translate(-50%, -57%);
  pointer-events: auto;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  z-index: 10;
}

/* #myProfile .introView {
  border-radius: 2%;
  transition: filter 0.3s ease-in-out;
}

#myProfile .introPreview {
  width: 100%;
  max-height: 300px;
  object-fit: cover;
} */

/* 아티스트 영역 */
#artistProfile .plusBox {
  width: 110px;
  height: 110px;
  border-radius: 8px;
  border: 1px dashed #e21dfd;
  background: #fcf7fd;
  cursor: pointer;
  overflow: hidden;
}
#artistProfile .plusBox:has(.imageContainer) {
  border-color: transparent;
}

#artistProfile .ant-upload-drag-container .plusBox .imageContainer {
  width: 100%;
}

#artistProfile .plusBox .plus {
  width: 36px;
  height: 36px;
  border-radius: 100%;
  background: #f0dbf4;
  color: #c49bcc;
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 8px;
}

#artistProfile .plusBox p {
  display: block;
  text-align: center;
  font-size: 11px;
  color: #c49bcc;
  line-height: 1.2;
}

#artistProfile .profileUpload img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#artistProfile .profileBox .iconExpand {
  cursor: pointer;
  position: absolute;
  top: 50%;
  right: 62.5%;
  width: 20px !important;
  height: 20px !important;
  transform: translateY(-50%);
  pointer-events: auto;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  z-index: 10;
}

#artistProfile .profileBox .iconChange {
  cursor: pointer;
  position: absolute;
  top: 50%;
  right: 42.5%;
  width: 20px !important;
  height: 20px !important;
  transform: translateY(-50%);
  pointer-events: auto;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  z-index: 10;
}

#artistProfile .profileBox .iconTrash {
  cursor: pointer;
  position: absolute;
  top: 48.5%;
  right: 22.5%;
  width: 20px !important;
  height: 20px !important;
  transform: translateY(-50%);
  pointer-events: auto;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  z-index: 10;
}

#artistProfile #profileImage {
  border-radius: 8px;
  transition: filter 0.3s ease-in-out;
}

#artistProfile .profilePreview {
  width: 140px;
  height: 140px;
  object-fit: cover;
}

#artistBanner .plusBannerBox {
  width: 100%;
  border: 1px dashed #e21dfd;
  background: #fcf7fd;
  height: 125px;
  border-radius: 4px;
  cursor: pointer;
  overflow: hidden;
}
#artistBanner .plusBannerBox .introImagesContainer {
  width: 100%;
}
#artistBanner .plusBannerBox:has(.imageContainer) {
  border: none;
}
#artistBanner .plusBannerBox .ant-upload-drag-container {
  width: 100%;
  height: 100%;
  min-height: 125px;
}

#artistBanner .plusBannerBox .plus {
  width: 40px;
  height: 40px;
  border-radius: 100%;
  background: #f0dbf4;
  color: #c49bcc;
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 4px;
}

#artistBanner .plusBannerBox p {
  display: block;
  text-align: center;
  font-size: 12px;
  color: #c49bcc;
  line-height: 1.2;
}

#artistBanner .plusBannerBox .iconExpand {
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 43%;
  width: 20px !important;
  height: 20px !important;
  transform: translate(-50%, -43%);
  pointer-events: auto;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  z-index: 10;
}

#artistBanner .plusBannerBox .iconChange {
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px !important;
  height: 20px !important;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  z-index: 10;
}

#artistBanner .plusBannerBox .iconTrash {
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 57%;
  width: 20px !important;
  height: 20px !important;
  transform: translate(-50%, -57%);
  pointer-events: auto;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  z-index: 10;
}

#artistBanner .introView {
  border-radius: 2%;
  transition: filter 0.3s ease-in-out;
}

#artistBanner .introPreview {
  width: 100%;
  max-height: 300px;
  object-fit: cover;
}

#artistBanner .flexColCenter .imageContainer {
  position: relative;
  width: 100%;
  height: 125px;
  min-width: 428px;
  overflow: hidden;
}
/* 배너 컨테이너에 추가한 이미지 */
#artistBanner .flexColCenter .imageContainer > img:not(.iconStyle) {
  width: 100%;
  min-width: 428px;
  height: 100%;
  object-fit: cover;
}

#artistBanner .flexColCenter .plusBannerBox img {
  width: auto;
  object-fit: cover;
  display: block;
}

#artistNews .highlight-date {
  display: flex;
  min-width: 34px;
  padding: 4px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 100px;
  background: linear-gradient(90deg, #ca79fc 0%, #ff5eb6 100%);
  color: #fff;
  color: var(--c-ff, #fff);
  font-size: 10px;
  font-weight: 600;
  line-height: 100%; /* 10px */
}
#artistNews .d_noti {
  padding: 0;
  white-space: nowrap;
  line-height: 1.6;
  text-align: center;
}

#artistNews .iconOverlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  gap: 12px;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1000;
}

#artistNews .imageContainer:hover .iconOverlay {
  opacity: 1;
}

/* 아티스트배너 antd 모달창 컨트롤 */
.ant-modal-body:has(#artistBanner) {
  padding: 10px 36px 36px 36px;
}
/* 아티스트배너 모달창 및 배너 영역 반응형 */
@media (max-width: 700px) {
  .ant-modal:has(#artistBanner) {
    padding: 0;
  }
  .ant-modal:has(#artistBanner) {
    top: 0;
    margin: 0;
    width: 100% !important;
  }
  .ant-modal-content:has(#artistBanner) {
    top: 0;
    width: 100vw;
    height: 100vh;
    border-radius: 0;
  }
  .ant-modal-body:has(#artistBanner) {
    height: calc(100vh - 54px);
    padding: 0 16px;
    padding-bottom: 90px;
    overflow: scroll;
  }
  #artistBanner .btnArea {
    position: fixed;
    bottom: 0;
    width: 100%;
    left: 0;
    padding: 20px 16px 30px 16px;
    background: #fff;
  }
}

/*================================
테이블 기본 컴포넌트
================================*/
.l-table {
}

.l-table .tableHeader {
  display: flex;
  align-items: center;
  width: 100%;
  height: 48px;
  border-radius: 8px;
  background-color: #f3f2fa;
  font-size: 16px;
  font-weight: 500;
  color: #0e0e1f;
  margin-bottom: 2px;
}
.l-table .tableHeader.border {
  border-radius: 0;
  border-top: 2px solid #464548;
  border-bottom: 1px solid #e2dfe4;
}
.l-table .tableHeader .th {
  flex: 1 1;
  text-align: center;
  text-wrap: nowrap;
  font-size: 14px;
  font-weight: 500;
}
.l-table .tableHeader .th.left {
  text-align: left;
}
.l-table .tableHeader .th span {
  vertical-align: middle;
  color: #f34144;
}
.l-table .tableBody {
}
.l-table .tableBody .tr {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 88px;
  padding: 12px 0;
  border-bottom: 1px solid #e2dfe4;
  z-index: 1;
}
.l-table .tableBody .tr:last-child {
  border: 0;
}
#albumList.l-table .tableBody .tr:last-child {
  border-bottom: 1px solid #e2dfe4;
}
.l-table .tableBody2 .tr {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 88px;
  padding: 12px 0;
  border-bottom: 1px solid #e2dfe4;
  z-index: 1;
}
.l-table .tableBody2 .tr:last-child {
  border: 0;
}
#albumList.l-table .tableBody2 .tr:last-child {
  border-bottom: 1px solid #e2dfe4;
}
.l-table .tableBody .tr:hover {
  background-color: #f4f5f7;
}
.l-table .tableBody .tr:has(.ant-checkbox-checked),
.l-table .tableBody .tr:has(.ant-radio-checked) {
  background-color: #f4f5f7;
  /* background-color: #fdf2ff; */
}
.l-table .tableBody2 .tr.active {
  background-color: #f4f5f7;
}
/*블럭일 경우 class => rock*/
.rock {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 50px;
  z-index: 2;
  visibility: hidden;
  background: rgba(0, 0, 0, 0.4) url(../../static/media/i-rock.79925f419904111e4f75.svg) no-repeat center;
  border-radius: 8px;
}
.l-table .tableBody .tr .td {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
.td.left,
.l-table .tableBody .tr .td.left {
  justify-content: start;
  text-align: left;
}
.l-table .tableBody .tr .td.linkDown {
  gap: 8px;
  padding-left: 8px;
}

.l-table .tableBody .tr .td.linkDown button {
  height: 36px;
}
.l-table .tableBody .tr .td.video {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: left;
  min-width: 0;
}
.l-table .tableBody .btn-edit.btn-dark {
  min-width: auto;
  height: 30px;
  font-size: 13px;
  padding: 8px;
  gap: 4px;
}

.l-table .tableBody2 .tr .td {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
.td.left,
.l-table .tableBody2 .tr .td.left {
  justify-content: start;
  text-align: left;
}
.l-table .tableBody2 .tr .td.linkDown {
  gap: 8px;
  padding-left: 8px;
}

.l-table .tableBody2 .tr .td.linkDown button {
  height: 36px;
}
.l-table .tableBody2 .tr .td.video {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: left;
  min-width: 0;
}
.l-table .tableBody2 .btn-edit.btn-dark {
  min-width: auto;
  height: 30px;
  font-size: 13px;
  padding: 8px;
  gap: 4px;
}
/*================================
td 음원 정보 컴포넌트 
================================*/
.l-table .tableBody .tr .td.trackInfo {
  justify-content: start;
}
.td.trackInfo .trackInfo__thum {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  overflow: hidden;
}
.td.trackInfo .trackInfo__thum img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.td.trackInfo .trackInfo__list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  flex: 1 1;
  min-width: 0;
  padding: 0 12px;
}
.td.trackInfo .trackInfo__list > div {
  display: flex;
  align-items: center;
  gap: 4px;
}
.td.trackInfo .trackInfo__list > div > p {
  flex: 1 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
@media (max-width: 700px) {
  .td.trackInfo .trackInfo__thum {
    width: 50px;
    height: 50px;
  }
  .td.trackInfo .trackInfo__list {
    padding: 0 8px;
  }
  .td.trackInfo .trackInfo__list {
    gap: 8px;
  }
  .l-table .tableBody .tr {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 88px;
    padding: 12px 0;
    border-bottom: 1px solid #e2dfe4;
    z-index: 1;
  }
  .rock {
    left: -8px;
    right: -8px;
  }
}

/*================================
아티스트 첫화면에 노출되는 테이블
================================*/
#artistMainTable,
#artistMainTable h1 {
  font-size: 14px;
}
#artistMainTable .btn-fan {
  width: 108px;
  font-size: 14px;
}
#artistMainTable .tableHeader {
  border-top: 2px solid #464548;
  border-bottom: 1px solid #e6e6e6;
  border-radius: 0;
  background-color: #fff;
  font-size: 14px;
}
#artistMainTable.l-table .tableHeader .th,
#artistMainTable.l-table .tableBody .tr .td {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  max-width: 14%;
}
#artistMainTable .tableHeader .th:nth-child(1),
#artistMainTable .tableBody .tr .td:nth-child(1) {
  max-width: 100px;
  justify-content: center;
}
#artistMainTable.l-table .tableHeader .th:nth-child(2),
#artistMainTable.l-table .tableBody .tr .td.trackInfo {
  max-width: none;
  max-width: initial;
  width: 100%;
  min-width: 200px;
  justify-content: center;
  min-width: 200px;
}
#artistMainTable.l-table .tableHeader .th.ganre,
#artistMainTable.l-table .tableHeader .th.fanBtn,
#artistMainTable.l-table .tableBody .tr .td.fanBtn {
  justify-content: center;
}

#artistMainTable.l-table .tableHeader .th:last-child {
  justify-content: center;
  /* padding-left: 24px; */
}
#artistMainTable .tableBody .tr .td i {
  width: 20px;
  height: 20px;
  margin-right: 8px;
}
#artistMainTable .trackInfo__list span {
  color: #a3a1a7;
  text-wrap: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  /* height: 12px; */
}
@media (max-width: 700px) {
  #artistMainTable .tableHeader,
  #artistMainTable .tableBody .tr .td:nth-child(4),
  #artistMainTable .tableBody .tr .td:nth-child(5),
  #artistMainTable .tableBody .tr .td:nth-child(6) {
    display: none;
  }
  #artistMainTable .tableBody .tr .td:nth-child(1) {
    max-width: 25px;
  }
  #artistMainTable .tableBody .tr .td.video {
    max-width: 25px;
  }
  #artistMainTable .tableBody .tr .td.fanBtn {
    max-width: 40px;
    margin-left: 12px;
  }
  #artistMainTable .tableBody .tr .td.video {
    font-size: 0;
  }
  #artistMainTable .trackInfo__list span {
    font-size: 12px;
  }
  #artistMainTable .trackInfo__list ul {
    display: flex !important;
    align-items: center;
  }
  #artistMainTable .trackInfo__list ul li {
    text-wrap: nowrap;
    font-size: 11px;
    min-width: 56px;
  }

  #artistMainTable .trackInfo__list ul li p {
    gap: 4px;
    display: flex;
  }
  #artistMainTable .tableBody .tr .td .trackInfo__list ul li i {
    width: 12px;
    height: 12px;
    margin-right: 0;
  }
  #artistMainTable .btn-fan {
    width: fit-content;
    height: fit-content;
    line-height: normal;
    /* border-radius: 0;
    border: none;
    background: none;*/
    font-size: 12px;
    padding: 2px 4px;
  }
  #artistMainTable .btn-fan:disabled {
    background: none !important;
  }
  #artistMainTable .btn-fan.btn-fan.self::before,
  #artistMainTable .btn-fan.btn-fan.complete::before,
  #artistMainTable .btn-fan.btn-fan.join::before {
    /* background: url(/src/assets/images/common/i-fanAddB.svg) no-repeat center; */
    display: none;
  }
  .l-table .tableBody {
    border-top: 2px solid #464548;
  }

  #albumList.l-table .tableBody {
    border-top: none;
  }
}

/*================================
아티스트 > 영상 > 미등록 음원 테이블 
================================*/
#unregist .tableHeader .th:nth-child(1),
#unregist .tableBody .tr .td:nth-child(1) {
  max-width: 100px;
}
#unregist .tableHeader .th:nth-child(4),
#unregist .tableBody .tr .td:nth-child(4),
#unregist .tableHeader .th:nth-child(5),
#unregist .tableBody .tr .td:nth-child(5) {
  max-width: 130px;
}
#unregist .td.trackInfo .btn-round {
  margin-right: 12px;
}
@media (max-width: 700px) {
  #unregist .tableHeader {
    display: none;
  }
  #unregist .tableHeader .th:nth-child(1),
  #unregist .tableBody .tr .td:nth-child(1) {
    max-width: 20px;
    margin: 0 8px;
  }
  #unregist .tableHeader .th:nth-child(4),
  #unregist .tableBody .tr .td:nth-child(4),
  #unregist .tableHeader .th:nth-child(5),
  #unregist .tableBody .tr .td:nth-child(5) {
    max-width: fit-content;
  }
  #unregist .tableBody .tr {
    flex-wrap: wrap;
    height: auto;
  }
  #unregist .tableBody .tr .td:nth-child(3) {
    flex: 100% 1;
    margin: 6px 0;
  }
  #unregist .tableBody .tr .td:nth-child(4) {
    margin-left: auto;
    margin-right: 8px;
  }
  #unregist .tableBody .tr .td .btn-round.upload {
    height: 26px;
    padding: 8px;
  }
  #unregist .btn-round {
    min-width: 0;
    min-width: initial;
    height: 26px;
    font-size: 11px;
  }
  #unregist .td.trackInfo .btn-round {
    margin-right: 8px;
  }
}

/*================================
아티스트 > 영상 > 수록곡 테이블
================================*/
#track .tableHeader .th:nth-child(1),
#track .tableBody .tr .td:nth-child(1),
#track .tableHeader .th:nth-child(2),
#track .tableBody .tr .td:nth-child(2) {
  max-width: 50px;
}
#track .tableHeader .th:nth-child(4),
#track .tableBody .tr .td:nth-child(4),
#track .tableHeader .th:nth-child(5),
#track .tableBody .tr .td:nth-child(5),
#track .tableHeader .th:nth-child(6),
#track .tableBody .tr .td:nth-child(6),
#track .tableHeader .th:nth-child(7),
#track .tableBody .tr .td:nth-child(7) {
  max-width: 120px;
}
#track .tableHeader .th:nth-child(8),
#track .tableBody .tr .td:nth-child(8) {
  max-width: 100px;
}
#track .tableFooter {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin: 40px 0 20px 0;
}
#track .tableFooter button {
  width: 100px;
  height: 40px;
  border-radius: 4px;
}
#track .tableFooter button i {
  width: 18px;
  height: 18px;
  vertical-align: middle;
}

.withCursor {
  cursor: pointer;
}
/*================================
앨범 > 상세화면 > 앨범 수록곡 테이블
================================*/
#albumList .tableHeader .th,
#albumList .tableBody .tr .td {
  max-width: 65px;
}
#albumList .tableHeader .th:nth-child(1),
#albumList .tableBody .tr .td:nth-child(1),
#albumList .tableHeader .th:nth-child(2),
#albumList .tableBody .tr .td:nth-child(2) {
  max-width: 35px;
}
#albumList .tableHeader .th.mv,
#albumList .tableBody .tr .td.mv {
  max-width: 70px;
}
#albumList .tableHeader .th:nth-child(3),
#albumList .tableBody .tr .td:nth-child(3) {
  max-width: none;
}
#albumList .tableHeader .th.genre,
#albumList .tableBody .tr .td.genre {
  max-width: 110px;
  gap: 8px;
}
#albumList .tableBody .tr .td.genre p {
  max-width: 100%;
  overflow: hidden;
  text-wrap: nowrap;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#albumList .tableBody .tr .td.trackInfo .trackInfo__list .genre::before,
#albumList .tableBody .tr .td.genre::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: middle;
  background: url(../../static/media/i-genre.f02a53f7bd1fd3839581.svg) no-repeat center;
  background-size: contain;
}
#albumPage #albumList .tableBody .tr .td.genre::before {
  filter: brightness(0.8);
}
#albumList .tableBody .tr .td button i {
  width: 20px;
  height: 20px;
  vertical-align: middle;
}
#albumList .tableBody .tr .td button i.icon-play {
  width: 18px;
  height: 18px;
}
#albumList .tableBody .tr .td button i.icon-reason,
#albumList .tableBody .tr .td button i.icon-lyrics {
  width: 16px;
  height: 16px;
}
#albumPage button:has(.icon-mv.gray) {
  cursor: inherit;
}
@media (max-width: 700px) {
  #albumList .tableHeader {
    display: none;
  }
  #albumList .tableBody .tr .td {
    flex: 1 1;
    max-width: fit-content;
  }
  #albumList .tableBody .tr .td.mv {
    max-width: 40px;
  }
  #albumList .tableHeader .th:nth-child(3),
  #albumList .tableBody .tr .td:nth-child(3) {
    min-width: 0;
    max-width: 100%;
  }
  #albumList .tableBody .tr .td.trackInfo .trackInfo__list .genre::before {
    width: 12px;
    height: 12px;
    margin-right: 4px;
  }
}

/*================================
아티스트 > 내 저장소 테이블
================================*/
#storageTable .tableHeader .th:nth-child(1),
#storageTable .tableBody .tr .td:nth-child(1) {
  max-width: 50px;
}
#storageTable .tableHeader .th:nth-child(2),
#storageTable .tableBody .tr .td:nth-child(2),
#storageTable .tableHeader .th:nth-child(3),
#storageTable .tableBody .tr .td:nth-child(3) {
  max-width: 90px;
}
#storageTable .tableHeader .th:nth-child(5),
#storageTable .tableBody .tr .td:nth-child(5) {
  max-width: 280px;
}
#storageTable .tableHeader .th:nth-child(6),
#storageTable .tableBody .tr .td:nth-child(6),
#storageTable .tableHeader .th:nth-child(8),
#storageTable .tableBody .tr .td:nth-child(8) {
  max-width: 125px;
}
/* 엔지니어명 */
#storageTable .tableHeader .th.left {
  padding-left: 12px;
}
#storageTable .tableBody .name {
  display: flex;
  align-items: center;
  gap: 8px;
}
#storageTable .tableBody .name > img {
  width: 24px;
  height: 24px;
  border-radius: 24px;
  object-fit: cover;
}
@media (max-width: 700px) {
  #storageTable .tableBody .tr {
    height: 90px;
  }
  #storageTable .tableBody .tr .td:nth-child(1) {
    max-width: 20px;
  }
  #storageTable .tableBody .tr .td:nth-child(2) {
    max-width: none;
  }
  #storageTable .tableBody .name {
    gap: 4px;
    color: #a3a1a7;
  }
  #storageTable .tableBody .badge-cate {
    padding: 4px;
    font-size: 11px;
  }
  #storageTable .tableBody .trackInfo__list .info > p {
    flex: initial;
    min-width: 50px;
  }
  #storageTable .tableBody .trackInfo__list .info > p:nth-of-type(2) {
    flex: 1 1;
  }
  #storageTable .tableBody .trackInfo__list .info i {
    display: inline-block;
    width: 12px;
    height: 12px;
    vertical-align: middle;
  }
}

/*================================
아티스트 > 소식 테이블
================================*/
#artistNewsTable .tableBody {
  gap: 2px;
  display: flex;
  flex-direction: column;
  padding-top: 40px;
}
#artistNewsTable .tableBody .tr {
  height: fit-content;
  cursor: pointer;
}

#artistNewsTable .tableBody .tr:last-child {
  border: 0;
}
#artistNewsTable .tableBody .tr.tr_noti {
  background: #fdf2ff;
}
#artistNewsTable .tableHeader .th:nth-child(1),
#artistNewsTable .tableBody .tr .td:nth-child(1) {
  max-width: 50px;
}
#artistNewsTable .tableHeader .th:nth-child(2),
#artistNewsTable .tableBody .tr .td:nth-child(2) {
  max-width: 80px;
}
@media (max-width: 700px) {
  #artistNewsTable .tableBody {
    border-top: 0;
    padding-top: 20px;
  }
}
/*================================
열혈 팬
================================*/
#fanTableBody .tr {
  height: 56px;
  padding: 12px;
}
#fanTableBody .tr .td:has(.ant-checkbox),
#fanTableBody .tr .td.rankBox {
  max-width: 50px;
}
#fanTableBody .tr .td.titleBox {
  justify-content: start;
}
#fanTableBody .tr .td.titleBox .title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 8px;
  border-radius: 16px;
  background-color: #fff;
  font-size: 12px;
}
#fanTableBody .tr:hover.title,
#fanTableBody .tr:has(.ant-checkbox-checked) .title {
  box-shadow: 1px 2px 2px 0px rgba(0, 0, 0, 0.25);
}
#fanTableBody .tr .td.titleBox .title > img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  overflow: hidden;
}

/*================================
내 저장소 음원 모달
================================*/
.modalStorage .tableHeader .th:nth-child(1),
.modalStorage .tableBody .tr .td:nth-child(1), 
.modalStorage .tableBody2 .tr .td:nth-child(1) {
  max-width: 40px;
}
.modalStorage .tableHeader .th:nth-child(2),
.modalStorage .tableBody .tr .td:nth-child(2),
.modalStorage .tableBody2 .tr .td:nth-child(2) {
  max-width: 50px;
}
.modalStorage .tableHeader .th:nth-child(3),
.modalStorage .tableBody .tr .td:nth-child(3),
.modalStorage .tableBody2 .tr .td:nth-child(3) {
  max-width: 100px;
}
.modalStorage .tableHeader .th:nth-child(5),
.modalStorage .tableBody .tr .td:nth-child(5),
.modalStorage .tableBody2 .tr .td:nth-child(5) {
  max-width: 115px;
}
.modalStorage .tableHeader .th:nth-child(6),
.modalStorage .tableBody .tr .td:nth-child(6),
.modalStorage .tableBody2 .tr .td:nth-child(6),
.modalStorage .tableHeader .th:nth-child(7),
.modalStorage .tableBody .tr .td:nth-child(7),
.modalStorage .tableBody2 .tr .td:nth-child(7) {
  max-width: 80px;
}
@media (max-width: 700px) {
  .modalStorage .tableHeader,
  .modalStorage .tableBody .tr .td:nth-child(1),
  .modalStorage .tableBody .tr .td:nth-child(3),
  .modalStorage .tableBody .tr .td:nth-child(5),
  .modalStorage .tableBody2 .tr .td:nth-child(1),
  .modalStorage .tableBody2 .tr .td:nth-child(3),
  .modalStorage .tableBody2 .tr .td:nth-child(5) {
    display: none;
  }
  /* 번호, 버튼 td 사이즈 동일 */
  .modalStorage .tableBody .tr .td:nth-child(2),
  .modalStorage .tableBody .tr .td:nth-child(6),
  .modalStorage .tableBody .tr .td:nth-child(7)
  .modalStorage .tableBody2 .tr .td:nth-child(2),
  .modalStorage .tableBody2 .tr .td:nth-child(6),
  .modalStorage .tableBody2 .tr .td:nth-child(7) {
    max-width: 30px;
  }
}

/* ArtistComment.jsx */
#artist-comment-container .comment-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 0;
  font-family: 'Noto Sans KR', sans-serif;
}

#artist-comment-container .comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

#artist-comment-container .comment-header h2 {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  color: #333;
  letter-spacing: -0.4px;
}

#artist-comment-container .comment-count {
  font-size: 16px;
  color: #000;
  font-weight: 600;
}

#artist-comment-container .comment-input-container {
  display: flex;
  /* margin-top: 15px; */
  margin-bottom: 32px;
  /* bor der: 1px solid #e1e1e1; */
  border-radius: 4px;
  overflow: hidden;
  gap: 12px;
}
#artist-comment-container .comment-input-container textarea {
  min-height: 48px;
  font-size: 13px;
  padding: 11px 16px 10px;
  border: 1px solid #dfdce4;
}

#artist-comment-container .ant-modal-content .comment-input-container textarea {
  padding-top: 11px;
}
#artist-comment-container .comment-textarea {
  flex: 1 1;
  /* border: none; */
  resize: none;
  padding: 12px 15px;
  font-size: 14px;
  min-height: 50px;
}

#artist-comment-container .comment-textarea:focus {
  outline: none;
  box-shadow: none;
}
/*아티스트 영상 댓글 작성  */
#artist-comment-container .comment-textarea:focus-within {
  border-color: #c718e2;
}

#artist-comment-container .comment-submit-btn {
  background-color: #a3a1a7;
  border: none;
  /* border-left: 1px solid #e1e1e1; */
  color: #fff;
  height: auto;
  padding: 0 20px;
  font-weight: 500;
  border-radius: 4px;
}

#artist-comment-container .comment-submit-btn:hover {
  background-image: linear-gradient(90deg, #b041f3 0%, #ec15ff 100%) !important;
  color: #fff;
}
#artist-comment-container .comment-submit-btn:hover {
  background-image: linear-gradient(90deg, #b041f3 0%, #ec15ff 100%) !important;
  color: #fff;
}

#artist-comment-container .comment-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

@media (max-width: 768px) {
  #artist-comment-container .comment-container {
    padding: 10px;
  }

  #artist-comment-container .comment-submit-btn {
    padding: 0 15px;
    font-size: 13px;
    min-width: 75px;
  }
  #artist-comment-container .comment-header h2 {
    font-size: 16px;
  }
  #artist-comment-container .comment-count {
    font-size: 13px;
  }
}

/* ArtistCommentItem.jsx */
#artist-comment-container .comment-item {
  padding: 8px;
  border-bottom: 1px solid #f0f0f0;
}

#artist-comment-container .comment-reply {
  /* background-color: #f9f9f9; */
}

#artist-comment-container .comment-content {
  display: flex;
  flex-direction: column;
  /* padding-right: 8px; */
}

#artist-comment-container .comment-user {
  display: flex;
  gap: 12px;
  padding-top: 12px;
}
#artist-comment-container .comment-reply .comment-user {
  border-top: 1px dashed rgba(0, 0, 0, 0.1);
}
#artist-comment-container .comment-reply:first-child .comment-user {
  border-top: 1px dashed transparent;
}
#artist-comment-container .comment-user .ant-avatar {
  margin: 0;
}
#artist-comment-container .comment-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

#artist-comment-container .comment-info {
  flex: 1 1;
}

#artist-comment-container .comment-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  margin-top: 0;
  gap: 12px;
}

#artist-comment-container .comment-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: start;
  flex-direction: column;
}

#artist-comment-container .comment-userDate {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
}

#artist-comment-container .comment-username {
  font-weight: 600;
  color: #333;
  /*cursor: pointer;*/
  /*text-decoration: underline;*/
}

#artist-comment-container .comment-username:hover {
  /*text-decoration: underline;*/
}

#artist-comment-container .comment-date {
  font-size: 11px;
  color: #6d6c75;
  margin-left: 0px;
  font-weight: 400;
}

#artist-comment-container .comment-reply-to {
  /* width: 64px; */
  /* height: 16px; */
  flex-grow: 0;
  font-family: Pretendard;
  font-size: 13px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: -0.26px;
  text-align: left;
  color: #293f59;
  padding: 3px 4px;
  /* margin-left: 8px; */
  border-radius: 8px;
  background-color: #dfdce4;
}

#artist-comment-container .btn-del-icon {
  width: auto;
  height: 14px;
}

#artist-comment-container .comment-actions {
  display: flex;
  gap: 4px;
  align-items: center;
  /* margin-right: 10px; */
}
#artist-comment-container .comment-actions button {
  padding: 8px;
  font-size: 12px;
}

/* #artist-comment-container .comment-reply-btn {
  border: 1px solid #d9d9d9;
  font-size: 12px;
  color: #666;
  background: none;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 3px;
} */

#artist-comment-container .comment-reply-btn:hover {
  background-color: #f0f0f0;
}

#artist-comment-container .comment-more-container {
  position: relative;
}

#artist-comment-container .comment-more-btn {
  background: none;
  border: none;
  font-size: 16px;
  color: #666;
  cursor: pointer;
  padding: 0 4px;
}

#artist-comment-container .comment-more-menu {
  position: absolute;
  right: 0;
  top: 100%;
  background: white;
  border: 1px solid #e1e1e1;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 10;
  min-width: 100px;
}

#artist-comment-container .comment-more-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#artist-comment-container .comment-more-menu li {
  padding: 0;
}

#artist-comment-container .comment-more-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 16px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 13px;
}

#artist-comment-container .comment-more-menu button:hover {
  background-color: #f5f5f5;
}

#artist-comment-container .comment-text {
  font-size: 14px;
  line-height: 1.5;
  color: #333;
  margin: 8px 0;
  word-break: break-word;
}

#artist-comment-container .comment-footer {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-top: 8px;
}

#artist-comment-container .comment-likes {
  display: flex;
  align-items: center;
}

#artist-comment-container .like-btn {
  background: none;
  border: none;
  font-size: 13px;
  color: #666;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0;
}

#artist-comment-container .like-btn:hover {
  color: #333;
}

#artist-comment-container .show-replies-btn {
  /* margin-bottom: 3px; */
  border-radius: 100px;
  background: #525162;
  display: flex;
  min-width: 22px;
  padding: 4px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-align: center;
  font-size: 13px;

  line-height: 100%;
  border-radius: 4px;
  border: 1px solid #525162;
}
#artist-comment-container .show-replies-btn:has(span) {
  border: 1px solid #c4c3c7;
  color: #0e0e1f;
  background-color: #fff;
  font-weight: 600;
}

#artist-comment-container .show-replies-btn:has(span):hover {
  background-color: #f0f0f0;
}

#artist-comment-container .share-btn {
  background: none;
  border: none;
  font-size: 13px;
  color: #666;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
}

#artist-comment-container .share-icon {
  font-size: 14px;
}

#artist-comment-container .comment-edit-container {
  margin-top: 8px;
  display: flex;
  gap: 8px;
}

#artist-comment-container .comment-edit-input {
  flex: 1 1;
  border: 1px solid #e1e1e1;
  border-radius: 4px;
  resize: none;
  padding: 8px 12px;
  font-size: 14px;
}
#artist-comment-container .comment-edit-input:focus-within {
  border: 1px solid #c718e2;
}
#artist-comment-container .comment-edit-btn {
  background-color: #a3a1a7;
  border: 1px solid #e1e1e1;
  color: #fff;
  height: auto;
  padding: 0 16px;
  font-weight: 500;
  border-radius: 4px;
  min-width: 72px;
}

#artist-comment-container .reply-form {
  margin: 12px 0 8px;
  display: flex;
  gap: 12px;
}
#artist-comment-container .reply-form .reply-input {
  background: #fff;
}

#artist-comment-container .reply-input {
  flex: 1 1;
  /* border: 1px solid #e1e1e1; */
  border-radius: 4px;
  resize: none;
  padding: 8px;
  font-size: 14px;
}

#artist-comment-container .reply-submit-btn {
  background-color: #a3a1a7;
  border: 1px solid #e1e1e1;
  color: #333;
  height: auto;
  padding: 0 16px;
  font-weight: 500;
  border-radius: 4px;
  color: #fff;
  min-width: 72px;
}

#artist-comment-container .comment-children {
  /* padding-top: 12px; */
  gap: 8px;
  display: flex;
  flex-direction: column;
  background-color: #f3f3f3;
}

#artist-comment-container .comment-item.comment-reply .comment-user > .comment-info {
  /* margin-left: 8px; */
}

#artist-comment-container .btn-edit {
  border-radius: 4px;
  border: 1px solid #c4c3c7;
  background: #525162;
  color: #fff;
  font-size: 13px;
}
#artist-comment-container .btn-edit::before {
  filter: brightness(1);
  min-width: 14px;
  height: 14px;
  content: '';
}

#artist-comment-container .comment-list .all-review {
  /* width: 93px; */
  /* height: 17px; */
  /* flex-grow: 0;
  font-size: 14px;
  font-weight: 500;
  text-align: justify;
  color: #0e0e1f;
  cursor: pointer;
  padding: 8px 0 20px;
  text-decoration: underline; */
  width: fit-content;
  font-size: 14px;
  color: #fff;
  font-weight: bold;
  display: flex;
  padding: 12px 32px;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  border-radius: 24px;
  background: linear-gradient(90deg, #13d5df 0%, #f138fc 100%);
  margin-top: 12px;
}
#artist-comment-container .comment-list .all-review::after {
  display: inline-block;
  background: url(../../static/media/i-arrowCircleW.6649e16e1f8186e3658f.svg) no-repeat center;
  content: '';
  width: 18px;
  height: 18px;
  vertical-align: middle;
}
#artist-comment-container .comment-list .all-review:hover {
  color: #fff;
  filter: opacity(0.9);
  box-shadow: 0px 1px 0 1px rgba(241, 56, 252, 0.2);
}

@media (max-width: 700px) {
  #artist-comment-container .comment-actions {
    flex-wrap: wrap;
    gap: 8px;
  }
  #artist-comment-container button {
    height: 22px;
    padding: 4px;
    border: 1px solid #c4c3c7;
    font-size: 12px;
    font-weight: 500;
  }
  #artist-comment-container button.ant-modal-close {
    border: 0;
  }
  #artist-comment-container button.btn-edit {
    width: 22px;
    gap: 0;
    border-color: #525162;
    font-size: 0;
  }
  #artist-comment-container button:has(.btn-del-icon) {
    gap: 0;
    padding: 4px;
    border: none;
    font-size: 0;
  }
  #artist-comment-container button:has(.btn-del-icon):hover {
    background: transparent;
  }
  #artist-comment-container button.show-replies-btn {
    gap: 4px;
    padding: 4px;
    border: 1px solid #c4c3c7;
    height: 22px;
  }
  #artist-comment-container .comment-footer {
    flex-wrap: wrap;
  }
  #artist-comment-container .comment-avatar {
    width: 22px;
    height: 22px;
  }
  #artist-comment-container .comment-meta {
    gap: 4px;
  }
  #artist-comment-container .comment-header {
    margin-bottom: 8px;
  }
  #artist-comment-container .comment-list .all-review {
   /*  padding: 8px 0; */
  }
  #artistVideo.l-artist:has(> .comment-container),
  #artistAlbum.l-artist:has(> .comment-container) {
    padding: 16px;
  }

  #artistVideo.l-artist,
  #artistAlbum.l-artist {
    /* padding: 0 0 16px; */
  }

  /* #artistVideo.l-artist:has(.notice-none),
  #artistAlbum.l-artist:has(.notice-none) {
    padding: 0 16px 16px;
  } */

  #artistBanner .plusBannerBox {
    min-width: 0;
    min-width: initial;
  }

  /*전체 리뷰 팝업제어 */
  .replePop .ant-drawer-body {
    padding: 0;
  }
  .replePop #reviewModal .reviewTitle {
    display: flex;
    padding: 16px 24px 12px 24px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    background: #fff;
    flex-direction: row;
  }
}

/*================================
대항전 접수 (풀스크린 디자인)
================================*/
.competition {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 850px;
  overflow: hidden;
  padding-top: 90px;
  padding-bottom: 66px;
  overflow: hidden;
  border-radius: 20px;
  background: url(../../static/media/bg_competition.237acd3786e9eff6a329.png) no-repeat center;
  background-size: cover;
  margin-bottom: 20px;
}
.competition::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 120%;
  height: 300px;
  background: linear-gradient(90deg, rgba(19, 213, 223, 0.8) 0%, rgba(241, 56, 252, 0.8) 100%);
  rotate: -4deg;
}
.competition__title {
  width: 100%;
  color: #fff;
  text-align: center;
  line-height: normal;
}
.competition .editBanner {
  position: absolute;
  top: 20px;
  right: 20px;
}
.competition__title p {
  font-size: 32px;
}
.competition__title h3 {
  font-size: 60px;
  line-height: 1.4;
}
.competition__title .badge-regular {
  display: inline-block;
  max-width: 100%;
  margin-top: 32px;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.competition__process {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 76px;
}
.competition__process > li {
  position: relative;
}
.competition__process > li::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -50%;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAcCAYAAABsxO8nAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAADPSURBVDhPtdRhDcJADAXgVcGQgJTNARKGAxyAAySwSUDBJGABCTg4XpP7sYTr9ZXcllyypOmXXq930jX6pJHT7QullAZUqmsWkTdT9U9FQCYkPnKyIiODlaALku+bKiisBB2AvLCOEazYbGxPkTWCmacWxarHH8HcOWIxF9KGMxgFMRgNVbAnBvbUAtJrdKYhr08U5CG6bRdiEBdikSoUQUwoihShfxALuiFwjbxFFjTkt0jj1OtY69GEYI+1YGo/m+rMX3eOGMSdIxZpCn0BYAOAHf2e/EoAAAAASUVORK5CYII=) no-repeat center;
  background-size: contain;
}
.competition__process > li:last-child::after {
  display: none;
}
.competition__process > li > .info {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  width: 120px;
  height: 120px;
  border: 1px solid #fff;
  border-radius: 50%;
  color: #fff;
}
.competition__process > li > .info h5 {
  font-size: 20px;
  font-weight: 500;
}
.competition__process > li > .info p {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
}
/* li에 과정표시가 필요한 경우 .active */
.competition__process > li.active > .info {
  background: #fff;
  box-shadow: 0px 0px 8px 0px rgba(236, 21, 255, 0.5);
}
.competition__process > li.active > .info h5 {
  font-size: 24px;
  font-weight: 700;
  color: #e94cf7;
  letter-spacing: -0.5px;
}
.competition__process > li.active > .info p {
  font-size: 13px;
  font-weight: 600;
  color: #0e0e1f;
}
/* li에 버튼이 있는 경우, 접수 .hasBtn */
.competition__process > li.hasBtn {
  position: relative;
}
.competition__process > li.hasBtn > .btnBox {
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: calc(100% + 30px);
  padding: 12px;
  padding-bottom: 150px;
  border-radius: 16px;
  background-color: #fff;
}
.competition__process > li.hasBtn > .btnBox button {
  height: 40px;
  border-radius: 24px;
  font-size: 14px;
  color: #fff;
}

.competition__process > li.hasBtn > .btnBox button.btn-line {
  border: 1px solid #000;
  color: #000;
}
.competition__process > li.hasBtn > .btnBox button.btn-line i {
  filter: brightness(0);
}
.competition__process > li.hasBtn > .btnBox button i {
  width: 16px;
  height: 16px;
  vertical-align: middle;
}

@media (max-width: 1000px) {
  .competition__process {
    gap: 32px;
  }

  .competition__process > li > .info {
    width: 100px;
    height: 100px;
  }
  .competition__process > li::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -34%;
  }
  .competition__process > li.active > .info h5 {
    font-size: 20px;
  }
  .competition__process > li > .info h5 {
    font-size: 16px;
  }
  .competition__process > li > .info p {
    font-size: 13px;
  }

  .competition__process > li.hasBtn > .btnBox button.btn-line {
    min-width: 100%;
    letter-spacing: -0.7px;
  }
  .competition__process > li.hasBtn > .btnBox button.btn-line i {
    display: none;
  }
}
@media (max-width: 700px) {
  .competition {
    height: 548px;
    padding: 40px 8px 12px;
    margin-bottom: 16px;
  }
  .competition::before {
    height: 150px;
  }
  .competition::before {
    rotate: 353deg;
  }
  .competition .editBanner {
    top: 12px;
    right: 12px;
  }

  .competition__title p {
    font-size: 20px;
  }
  .competition__title h3 {
    font-size: 36px;
  }
  .competition__process {
    gap: 2vw;
    width: inherit;
  }
  .competition__process > li {
    width: 57px;
  }
  .competition__process > li::after {
    top: 15px;
    left: 100%;
    transform: none;
    transform: initial;
    width: 8px;
    height: 18px;
    background-size: contain;
  }
  .competition__process > li > .info {
    gap: 8px;
    width: auto;
    height: auto;
    border: none;
    border-radius: 0;
    text-align: center;
  }
  .competition__process > li > .info h5 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    padding: 8px;
    border: 1px solid #fff;
    border-radius: 50%;
    font-size: 13px;
    text-align: center;
  }
  .competition__process > li > .info p {
    font-size: 10px;
    letter-spacing: -0.8px;
  }
  .competition__process > li.active > .info {
    background: none;
    box-shadow: none;
  }
  .competition__process > li.active > .info h5 {
    box-shadow: 0px 0px 8px 0px rgba(236, 21, 255, 0.5);
    background: #fff;
    font-size: 13px;
  }
  .competition__process > li.active > .info p {
    font-size: 10px;
    color: #fff;
  }
  .competition__process > li.active:has(.btnBox) > .info p {
    color: #0e0e1f;
  }
  .competition__process > li.hasBtn > .btnBox {
    bottom: -5px;
    width: calc(100% + 10px);
    padding: 8px;
    padding-bottom: 78px;
  }
  .competition__process > li.hasBtn > .btnBox button {
    height: 20px;
    font-size: 10px;
  }
  .competition__process > li.hasBtn > .btnBox button i {
    display: none;
  }
}
/*================================
대항전 접수 외 진행상태 (헤더형 디자인) .otherType
================================*/
.competition.otherType {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 300px;
  overflow: hidden;
  padding: 40px 0;
  overflow: hidden;
  border-radius: 20px;
  background: url(../../static/media/bg_competition.237acd3786e9eff6a329.png) no-repeat center;
  background-size: cover;
}
.competition.otherType:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(19, 213, 223, 0.8) 0%, rgba(241, 56, 252, 0.8) 100%);
  rotate: none;
}
.competition.otherType .competition__title {
  z-index: 1;
}
/* 컴포넌트화 대비 구조가 있어도 display none 처리 되게  */
.competition.otherType .competition__title p {
  display: none;
}
.competition.otherType .competition__title h3 {
  font-size: 36px;
  text-shadow: 0px 4px 20px #000;
}
/* 컴포넌트화 대비 구조가 있어도 display none 처리 되게  */
.competition.otherType .competition__process > li.hasBtn > .btnBox {
  display: none;
}

@media (max-width: 1000px) {
  .competition.otherType {
    height: auto;
    padding: 40px 0 4%;
  }
}
@media (max-width: 700px) {
  .competition.otherType {
    height: 160px;
    padding: 30px 0;
    margin-bottom: 0;
    gap: 16px 0;
  }
  .competition.otherType .competition__title h3 {
    font-size: 24px;
  }
}
/*================================
대항전에 들어가는 카드 컴포넌트 (진행중)
================================*/
.card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* min-width: 300px; */
  width: 18.7%;
  max-width: 360px;
  color: #0e0e1f;
  border-radius: 8px;
  transition: 0.3s;
  overflow: hidden;
  box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.1);
}
.card.mine,
.card.mine:hover {
  border: 4px solid #c718e2;
  box-shadow: 0px 0px 8px 0px rgba(236, 21, 255, 0.5);
}
/* 썸네일영역 */
.card .card__thum {
  position: relative;
  overflow: hidden;
  width: 100%;
  border-radius: 8px 8px 0  0;
}
.card .card__thum::after {
  content: '';
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 34px;
  height: 28px;
  background: url(../../static/media/i-video.f1eb5fc6f99bd2537ecd.svg) no-repeat center;
  background-size: contain;
}
.card .card__thum > div {
  width: 100%;
  height: 100%;
  padding-bottom: 52%;
  object-fit: cover;
}
.card .card__thum > .rank {
  position: absolute;
  top: -3px;
  left: 8px;
}
/* 정보 및 버튼영역 */
.card .card__info {
  flex: 1 1;
  min-width: 0;
}
.card .card__info > .infoTop {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 4px 0;
  width: 100%;
}
/* 정보영역 바로 밑 구조들 100% */
.card .card__info > .infoTop > * {
  flex: 1 1;
  min-width: 0;
}
.card .card__info > .infoTop > .title {
  font-size: 16px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.card .card__info > .infoTop > .name {
  display: flex;
  align-items: center;
  gap: 4px;
}
.card .card__info > .infoTop > .name > img {
  width: 20px;
  height: 20px;
  border-radius: 100%;
  object-fit: cover;
}
.card .card__info > .infoTop > .name > p {
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.card .card__info > .infoTop > .count {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 13px;
  color: #464548;
}
.card .card__info > .infoTop > .count > li {
  flex: 1 1;
  gap: 4px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.card .card__info > .infoTop > .count > li::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  vertical-align: middle;
}
.card .card__info > .infoTop > .count > li.viewCount::before {
  background: url(../../static/media/i-count.7aba6db4f80a502ab17a.svg) no-repeat center;
  background-size: contain;
}
.card .card__info > .infoTop > .count > li.likeCount::before {
  background: url(../../static/media/i-good.f8e643ecdaf4fa8a9a71.svg) no-repeat center;
  background-size: contain;
}
.card .card__info > .infoTop > .origin {
  padding: 4px 8px;
  border-radius: 8px;
  background-color: #f5f5f5;
  gap: 2px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 108px;
}
.card .card__info > .infoTop > .origin > .aiArea {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  text-wrap: nowrap;
}
.card .card__info > .infoTop > .origin > .aiArea > .badge-AI{
  text-wrap: nowrap;
  margin-left: auto;
}
.card .card__info > .infoTop > .origin > .aiArea > .name {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.card .card__info > .infoTop > .origin > .aiArea > .name > p {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.card .card__info > .infoTop > .origin > .aiArea > .name > img {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  object-fit: cover;
}
.card .card__info > .infoFooter {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 8px 0 4px;
  gap: 1%;
}
.card .card__info > .infoFooter > button i {
  display: inline-block;
  width: 18px;
  height: 18px;
}

.card .card__info > .infoFooter > button i[class^='icon-']:hover {
  filter: invert(43%) sepia(86%) saturate(2571%) hue-rotate(265deg) brightness(97%) contrast(99%);
}
.card .card__info > .infoFooter > button i.icon-play {
  width: 16px;
  height: 16px;
}
.card .card__info > .infoFooter > button i.icon-heart {
  display: inline-block;
  width: 18px;
  height: 18px;
  background: url(../../static/media/i-heartLineB.8d5f935f2c0b00825c18.svg) no-repeat center;
  background-size: contain;
}
.card .card__info > .infoFooter > button i.active.icon-heart {
  background: url(../../static/media/active_heart_icon.93cff5f2c5117f2fd317.svg) no-repeat center;
  background-size: contain;
}
@media (max-width: 1100px) {
  .card {
    flex-direction: column;
    gap: 0;
    width: 23vw;
    min-width: 90px;
    padding: 0;
  }
}
@media (max-width: 700px) {
  .card {
    width: 44.5vw;
    box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.1);
  }
  /* .card:hover {
    border-radius: 16px;
    overflow: hidden;
  } */
  .card .card__thum {
    min-width: 100%;
    width: 100%;
    /* min-height: 90px;
    height: 30vw; */
  }
  .card .card__thum>div {
    padding-bottom: 50%;
  }
  .card .card__info > .infoTop {
    gap: 4px;
    width: 100%;
  }
  .card .card__info > .infoTop > .title {
    font-size: 14px;
  }
/*   .card .card__info > .infoTop > .name > img {
    display: none;
  } */
  .card .card__info > .infoTop > .name > p {
    font-size: 11px;
  }
  .card .card__info > .infoTop > .count {
    gap: 4px;
    font-size: 13px;
    justify-content: space-between;
  }
  .card .card__info > .infoTop > .count > li::before {
    width: 12px;
    height: 12px;
  }
  .card .card__info > .infoTop > .count > li.viewCount::before {
    width: 13px;
  }
  /* .card .card__info > .infoTop > .origin > .aiArea span:first-child {
    display: none;
  } */
  .card .card__info > .infoTop > .origin {
    border-radius: 8px 8px 0 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }
  .card .card__info > .infoTop > .origin > .aiArea {
    margin-bottom: 4px;
  }
  /* .card .card__info > .infoTop > .origin > .name > img {
    display: none;
  } */
  .card .card__info > .infoFooter {
    padding: 8px 0;
    gap: initial;
  }
  .card .card__info > .infoFooter > button {
    padding: 0;
  }
  .card .card__info > .infoFooter > button i {
    width: 14px !important;
    height: 14px !important;
  }
  .card .card__info > .infoFooter > button .icon-heart:hover,
  .card .card__info > .infoFooter > button .icon-heart.active:hover {
    filter: initial;
  }
  
}
@media (max-width: 420px) {
  .card .card__info > .infoTop > .origin > .aiArea span:first-child {
    display: none;
  }
  .card .card__info > .infoTop > .origin {
    padding: 4px 4px;
  }
}
/*================================
대항전에 들어가는 카드 컴포넌트 (결과) .colType => 삭제됨
================================*/
.card.colType {
  flex-direction: column;
  gap: 0;
  padding: 0;
  border-radius: 16px;
  box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.card.colType .card__thum {
  height: 360px;
  border-radius: 0;
}
.card.colType .card__info {
  position: relative;
}
.card.colType .card__info .infoTop {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -100%);
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0;
  row-gap: 10px;
  width: 320px;
  padding: 12px 16px 4px 16px;
  background-color: rgba(255, 255, 255, 0.8);
}
.card .card__info > .infoTop > * {
  flex: 100% 1;
}
.card.colType .card__info > .infoTop > .title {
  font-size: 20px;
}
.card.colType .card__info > .infoTop > .name,
.card.colType .card__info > .infoTop > .count {
  flex: 50% 1;
}
.card.colType .card__info > .infoTop > .count {
  justify-content: end;
}
.card.colType .card__info > .infoTop > .origin {
  background-color: transparent;
}
.card.colType .card__info > .infoTop > .origin > .aiArea {
  display: none;
}
.card.colType .card__info > .infoTop > .origin > .name > img {
  display: none;
}
.card.colType .card__info > .infoTop > .origin > .name::before {
  content: '원곡자';
  color: #323146;
  font-size: 12px;
}
.card.colType .card__info > .infoTop > .origin > .name {
  font-size: 13px;
  color: #2687e9;
}
.card.colType .card__info .infoFooter {
  padding: 16px;
}
@media (max-width: 1100px) {
  .card.colType {
    width: 48%;
    max-width: none;
    max-width: initial;
  }
}
@media (max-width: 700px) {
  .card.colType {
    width: 100%;
    max-width: 100%;
  }
  .card.colType .card__info .infoTop {
    width: 100%;
  }
  .card.colType .card__info > .infoTop > .name > img {
    display: block;
  }
  .card.colType .card__info > .infoTop > .name > p {
    font-size: 14px;
  }
  .card.colType .card__info > .infoTop > .count > li::before {
    width: 16px;
    height: 16px;
  }
  .card.colType .card__info > .infoTop > .origin {
    border-bottom: 0;
  }
  .card.colType .card__info > .infoFooter > button i {
    width: 18px;
    height: 18px;
  }
}
/*================================
대항전 카드 레이아웃 컨트롤
================================*/
.l-artist__content:has(.card) .wrap {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: 1.2vw;
  justify-content: flex-start;
  flex-direction: row;
}
.l-artist__content:has(.card.colType) .wrap {
  padding: 40px 0 28px 0;
  row-gap: 1.2vw;
}
/* @media (max-width: 900px) {
  .l-artist__content:has(.card) .wrap {
    gap: 1.4%;
  }
} */
@media (max-width: 700px) {
  .competition .l-artist__header {
    padding: 30px 0;
  }
  .l-artist__content:has(.card) .wrap {
    /* justify-content: space-between; */
    gap: 3vw;
    row-gap: 3vw;
  }
  .l-artist__content:has(.card.colType) .wrap {
    flex-direction: column;
    row-gap: 16px;
    padding: 20px 0 30px 0;
  }
}

@media (max-width: 500px) {
  .l-artist__content:has(.card) .wrap {
    gap: 2vw;
    row-gap: 3vw;
  }
}
.l-artist__content .noListData {
  width: 100%;
  height: 100px;
  text-align: center;
}
.l-artist__content .noListData h1 {
  font-weight: 600;
  font-size: 20px;
  line-height: 100px;
}
/*================================
기타 UI
================================*/
.cutline {
  display: flex;
  justify-content: end;
  width: 100%;
  margin: 24px 0;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAECAYAAABodtTSAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ4IDc5LjE2NDAzNiwgMjAxOS8wOC8xMy0wMTowNjo1NyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjEgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkQ2QzYzMjREMjU5NjExRjBBMjRGODQ5MjU2NDNDMEMxIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkQ2QzYzMjRFMjU5NjExRjBBMjRGODQ5MjU2NDNDMEMxIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RDZDNjMyNEIyNTk2MTFGMEEyNEY4NDkyNTY0M0MwQzEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RDZDNjMyNEMyNTk2MTFGMEEyNEY4NDkyNTY0M0MwQzEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4Gx/ymAAAAWUlEQVR42mL8v0yEhYGBgYvhPwMzAz7AyPgfSH4B4j/oUiADDIC4HYjVGfCDj0CcBsTHsRkiCMT6QCyK14j//2SAJA82KZAhp4HYC4jZCbgE5I0b2CQAAgwAAiEOLjknoLkAAAAASUVORK5CYII=) repeat-x top;
}
.cutline p {
  width: 96px;
  padding: 8px;
  border-radius: 0 0 24px 24px;
  background-color: #ffa514;
  font-size: 12px;
  text-align: center;
  color: #fff;
}
.cutline p::after {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 4px;
  vertical-align: middle;
  background: url(../../static/media/i-congrat.5cdcf7f9cca5f5cd1a1e.svg) no-repeat center;
  background-size: contain;
}
@media (max-width: 700px) {
  .cutline {
    justify-content: center;
  }
}
.notice-top10 {
  padding: 13px 0;
  text-align: center;
}
.notice-top10 h5 {
  background: linear-gradient(90deg, #13d5df 35%, #f138fc 65%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 48px;
  font-weight: 700;
}
.notice-top10 p {
  margin-top: 10px;
  font-size: 11px;
  color: #2687e9;
}

.custom-confirm-modal .ant-modal-content {
  padding: 20px;
  border-radius: 8px;
  background: white;
  text-align: center;
}

#custom-confirm .modal-header {
  position: relative;
  display: flex;
  width: 100%;
  justify-content: flex-end;
  align-items: center;
  padding-top: 24px;
}
#custom-confirm .modal-heade + .modal-body .icon-box img {
  margin-top: 24px;
}
#custom-confirm .modal-header h3 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 20px;
  font-weight: bold;
  /* margin-top: 12px; */
}

#custom-confirm .close-btn {
  background: none;
  border: none;
  font-size: 56px;
  margin-top: -12px;
  margin-right: -15px;
  font-weight: 100;
  cursor: pointer;
}

#custom-confirm .modal-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 154px;
  vertical-align: middle;
  font-size: 16px;
  line-height: 1.2;
  justify-content: flex-start;
}

#custom-confirm .icon-box {
  font-size: 40px;
  margin-top: 20px;
}

body:has(#artistAlbum) #custom-confirm .icon-box img {
  width: 100%;
  object-fit: contain;
}

#custom-confirm .modal-body > p {
  text-align: center;
}

#custom-confirm .modal-body .checkArea {
  display: flex;
  align-items: start;
  gap: 8px;
  padding: 12px 0;
  border-top: 1px solid #dfdce3;
  font-size: 13px;
}
#custom-confirm .modal-body .checkArea > p {
  padding-top: 2px;
}

#custom-confirm .confirm-name {
  font-size: 18px;
  font-weight: bold;
  color: #0d88d4;
}

#custom-confirm .modal-footer {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 20px 0 8px;
}
#custom-confirm .modal-footer button {
  display: flex;
  flex-direction: row;
  height: 40px;
  min-width: 100px;
  padding: 8px 12px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 4px;
  font-size: 14px;
}
#custom-confirm .btn-confirm {
  background-image: linear-gradient(to right, #b041f3 0%, #ec15ff 100%);
  color: white;
}

#custom-confirm .btn-cancel {
  border: 1px solid #dfdce4;
}

@media (max-width: 700px) {
  #custom-confirm .modal-body .icon-box img {
    height: 32px;
  }
  #custom-confirm .modal-body {
    min-height: 120px;
  }
  #custom-confirm .close-btn {
    font-size: 40px;
    margin-top: -8px;
  }
  #custom-confirm .modal-header h3 {
    margin-top: 4px;
  }
}