@charset "utf-8";


/* header */
.header-wp {
    width: 100%;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    padding: 20px 40px;
    height: 80px;
    background-color: var(--white-color);
    backdrop-filter: blur(3px);
    z-index: 998;
    border-bottom: 1px solid transparent;
}

.header-wp.scroll {
    border-bottom: 1px solid var(--border-color);
    background-color: rgba(255, 255, 255, .6);
}

.header-logo {
    width: 180px;
    height: 40px;
    background: url(/assets/images/logo/logo.png) no-repeat left center / contain;
    margin-right: 48px;
    cursor: pointer;
    position: relative;
}

.header-logo:after {
    content: '';
    position: absolute;
    right: -24px;
    top: 25%;
    width: 1px;
    height: 50%;
    background-color: var(--gray2-color);
}

.header-gnb {
    display: flex;
    align-items: center;
    flex: 1;
}

.header-gnb li {
    margin-right: 48px;
    transition: var(--transition);
}

.header-gnb li a {
    display: block;
    width: 100%;
    font-weight: 700;
    font-size: var(--f-normal);
    color: var(--black-color);
    position: relative;
}

.header-gnb li a::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: calc(100% + 24px);
    border-radius: 50px;
    z-index: -1;
    transition: var(--transition);
    border: 1px solid transparent;
}

.header-gnb li a:hover,
.header-gnb li a:focus,
.header-gnb li a:focus-visible {
    color: var(--primary-color);
}

.header-gnb li a:hover:after,
.header-gnb li a:focus:after,
.header-gnb li a:focus-visible:after {
    width: calc(100% + 24px);
    background: rgba(180, 150, 106, .1);
}

.header-gnb li.active a {
    color: var(--primary-color);
}

.header-alrwp {
    margin-right: 24px;
    position: relative;
}

.header-ham {
    width: 40px;
    height: 40px;
    font-size: 0;
    color: transparent;
    background: url(../images/icon/black/ic_ham.png) no-repeat center center / 28px var(--background-color);
    border-radius: 50px;
    transition: var(--transition);
    cursor: pointer;
    border: 1px solid transparent;
    margin-left: 24px;
}

.header-login+.header-ham {
    background-color: transparent;
}

.header-ham2 {
    width: 40px;
    height: 40px;
    font-size: 0;
    color: transparent;
    background: url(../images/icon/white/ic_ham.png) no-repeat center right -5px / 32px;
    transition: var(--transition);
    cursor: pointer;
    border: 1px solid transparent;
    margin-top: 5px;
}

.header-alarm {
    width: 40px;
    height: 40px;
    font-size: 0;
    color: transparent;
    background: url(../images/icon/black/ic_notice.png) no-repeat center center / 28px var(--background-color);
    border-radius: 50px;
    transition: var(--transition);
    cursor: pointer;
    border: 1px solid var(--background-color);
}

.header-my {
    width: 40px;
    height: 40px;
    font-size: 0;
    color: transparent;
    background: url(../images/icon/black/ic_my.png) no-repeat center center / 28px var(--background-color);
    border-radius: 50px;
    transition: var(--transition);
    cursor: pointer;
}

.header-ham:hover,
.header-ham:focus,
.header-ham:focus-visible,
.header-alarm:hover,
.header-alarm:focus,
.header-alarm:focus-visible,
.header-my:hover,
.header-my:focus,
.header-my:focus-visible {
    border: 1px solid var(--border-color);
    background-color: var(--background-color);
    box-shadow: var(--box-shadow);
}

.header-alarm.notice {
    position: relative;
}

.header-alarm.notice::after {
    position: absolute;
    top: 5px;
    right: 5px;
    content: '';
    width: 8px;
    height: 8px;
    border: 2px solid var(--background-color);
    border-radius: 100%;
    background-color: var(--red-color);
}

.header-login {
    width: 120px;
    height: 40px;
    border-radius: 50px;
    transition: var(--transition);
    background: rgb(171, 124, 82);
    background: linear-gradient(127deg, rgba(171, 124, 82, 1) 0%, rgba(180, 150, 106, 1) 100%);
    color: var(--white-color);
    cursor: pointer;
    font-family: 'Roboto';
    letter-spacing: .5px;
    overflow: hidden;
}

.header-login:hover,
.header-login:focus,
.header-login:focus-visible {
    opacity: .9;
}

/* wrappper */
.wrapper {
    max-width: 1300px;
    width: 100%;
    margin: 0 auto;
    margin-top: 80px;
    padding-top: 40px;
    min-height: calc(100vh - 238px);
}

/* footer */
.footer-wp {
    width: 100%;
    background: var(--background-color);
    padding: 20px 0 40px 0;
    text-align: center;
    border-top: 1px solid var(--border-color);
    box-sizing: border-box;
}

.footer-top {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    box-sizing: border-box;
}

.footer-top ul {
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-top li {
    margin-right: 24px;
    position: relative;
    font-size: var(--f-caption);
    color: var(--black-color);
    cursor: pointer;
}

.footer-top li:last-child {
    margin-right: 0;
    position: inherit;
}

.footer-top li:after {
    content: '';
    position: absolute;
    right: -12px;
    top: 25%;
    width: 1px;
    height: 50%;
    background: var(--border-color);
}

.footer-top li:last-child::after {
    display: none;
}

.copyright {
    font-size: var(--f-caption);
    color: var(--font-color);
    margin-top: 20px;
}

.copyright b {
    font-size: var(--f-caption);
}

.footer-info li span {
    margin-right: 12px;
    position: relative;
    font-size: var(--f-caption);
    font-size: var(--f-caption);
    color: var(--font-color);
    display: inline-block;
}

.footer-info li span:last-child {
    margin-right: 0;
}

.footer-info li span:after {
    content: '';
    position: absolute;
    right: -6px;
    top: 25%;
    width: 1px;
    height: 50%;
    background: var(--border-color);
}

.footer-info li span:last-child::after {
    display: none;
}

body:has(.artist-detail) .footer-info li span:after {
    background: var(--font-color);
}

body:has(.artist-detail) .footer-info li span {
    color: var(--gray2-color);
}

body:has(.artist-detail) .footer-top {
    margin-bottom: 0;
}

body:has(.artist-detail) .copyright,
body:has(.artist-detail) .copyright b {
    color: var(--gray2-color);
}

/* login */
body:has(.login-wp) {
    background-color: var(--background-color);
}

.login-wp {
    margin: 0 auto 40px auto;
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 480px;
    padding: 48px;
    background-color: var(--white-color);
    border-radius: 8px;

}

.login-tit {
    font-size: var(--f-large);
    margin-bottom: 14px;
    color: var(--black-color);
}

.login-subtit {
    font-size: var(--f-small);
    color: var(--font-color);
    margin-bottom: 40px;
}

.btn-login {
    width: 100%;
    border-radius: 4px;
    margin-top: 16px;
}

.login-logo {
    width: 120px;
    height: 40px;
    background: url(/assets/images/logo/logo.png) no-repeat left center / contain;
}

.form-box input {
    width: 100%;
    border: 1px solid var(--gray1-color);
    border-radius: 4px;
}

.form-box {
    margin-bottom: 20px;
}
.form-box.gal-body {
    margin-bottom: 0;
}

.login-find {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 24px;
}

.login-find li {
    margin-right: 24px;
    position: relative;
}

.login-find li a {
    width: 100%;
    display: block;
    color: var(--black-color);
}

.login-find li:after {
    position: absolute;
    right: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 60%;
    background-color: var(--gray1-color);
    content: '';
}

.login-find li:last-child::after {
    display: none;
}

.or-line {
    text-align: center;
    border-bottom: 1px solid var(--border-color);
    margin: 40px 0 40px 0;
    position: relative;
}

.login-wp:has(.snsbtn-wp) .or-line {
    margin-top: 58px;
}

.or-line p {
    background-color: var(--white-color);
    display: inline-block;
    padding: 0 14px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: var(--black-color);
}

.snsbtn-wp {
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-regi {
    margin-top: 40px;
    color: var(--black-color);
    text-align: center;
    display: block;
}

.login-regi span {
    color: var(--primary-color);
    font-weight: 600;
    margin-left: 14px;
}

.btn-sns {
    border-radius: 100%;
    width: 48px;
    height: 48px;
    font-size: 0;
    color: transparent;
    border: 1px solid transparent;
    margin-right: 14px;
    transition: var(--transition);
}

.btn-sns:hover {
    opacity: .6;
}

.btn-sns:last-child {
    margin-right: 0;
}

.googlelogin {
    background: url(/assets/images/icon/ic_g2.png) no-repeat center center / 34px var(--white-color);
    border-color: var(--border-color);
}

.kakaologin {
    background: url(/assets/images/icon/ic-kakako_on.png) no-repeat center center / 32px #facc00;
}

.naverlogin {
    background: url(/assets/images/icon/ic-naver_on.png) no-repeat center center / 28px #03ea66;
    border-color: var(--border-color);
}

.caption {
    font-size: 12px;
    color: var(--font-color);
    margin-top: 10px;
}

.validation {
    font-size: 12px;
    color: var(--red-color);
    margin-top: 10px;
}

.validation-success {
    font-size: 12px;
    color: var(--green-color);
    margin-top: 10px;
}

.form-lbl {
    margin-bottom: 10px;
    display: block;
    color: var(--font-color);
    font-weight: 600;
}

.terms-tarea {
    cursor: pointer;
    width: 100%;
    border: 1px solid var(--gray1-color);
    border-radius: 4px;
    resize: none;
}

.check-wp {
    color: var(--black-color);
}

.check-wp span {
    font-weight: 600;
    color: var(--primary-color);
    cursor: pointer;
}

.term-box {
    font-size: 12px;
    color: var(--black-color);
}

.inp-btn {
    position: relative;
}

.inp-btn button {
    position: absolute;
    right: 5px;
    top: 5px;
    padding: 0 16px;
    border-radius: 4px;
    font-size: var(--f-small);
    height: 40px;
}

.inp-btn input {
    padding-right: 140px;
}

.certiForm {
    display: none;
}

.certiForm.active {
    display: block;
}

.btn-certi.active {
    background-color: var(--border-color);
    border-color: var(--border-color);
}

/* 알림 */
.alarm-wp {
    min-width: 400px;
    width: 100%;
    max-width: 400px;
    height: auto;
    max-height: calc(100vh - 100px);
    position: absolute;
    top: 110%;
    right: 0;
    background-color: var(--white-color);
    z-index: 1000;
    box-shadow: var(--box-shadow);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: default;
    overflow: hidden;
}

.alarm-header {
    padding: 24px;
    padding-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.alarm-header p {
    font-weight: 600;
    font-size: var(--f-middle);
    color: var(--black-color);
}

.alarm-header a {
    color: var(--primary-color);
    font-size: var(--f-caption);
    cursor: pointer;
}

.alr-txt {
    width: calc(100% - 56px);
}

.alarm-caption {
    font-size: var(--f-caption);
    /*  overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;*/
    display: block;
    word-break: keep-all;
}

.alarm-tit {
    display: flex;
    justify-content: space-between;
    font-size: var(--f-normal);
    font-weight: 600;
    margin-bottom: 6px;
}

.alarm-tit p {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
    color: var(--black-color);
}

.alarm-tit p.alarm-dedate {
    color: #88898f;
    font-weight: 400;
    font-size: 12px;
    padding-left: 6px;
    margin-left: auto;
    flex-shrink: 0;
}

.alarm-date {
    color: #88898f;
    font-weight: 600;
    font-size: 12px;
    margin-top: 40px;
}

.alarm-date:first-child {
    margin-top: 0;
}

.alarm-item {
    margin-top: 20px;
    padding: 20px 16px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    display: flex;
    flex-wrap: wrap;
    cursor: pointer;
    transition: var(--transition);
}

.alarm-item:hover,
.alarm-item:focus,
.alarm-item:focus-visible {
    border-color: var(--secondary-color);
}

.alarm-item.read {
    opacity: .5;
    background-color: var(--background-color);
}

.avatar {
    width: 40px;
    height: 40px;
    margin-right: 16px;
    display: block;
    background-color: #DDD;
    border-radius: 100%;
}

.alarm-inner {
    overflow-y: auto;
    height: 100%;
    max-height: calc(100% - 59px);
    padding: 24px;
}


.alarm-inner::-webkit-scrollbar {
    width: 10px;
}

.alarm-inner::-webkit-scrollbar-thumb {
    background-color: var(--gray1-color);
    border-radius: 8px;
}

.alarm-inner::-webkit-scrollbar-track {
    background-color: var(--border-color);
    background-color: transparent;
}

.alr_menu {
    display: none;
}

.alr_menu.active {
    display: flex;
    flex-direction: column;
}

/* register select */
.btn-regisel {
    margin-bottom: 40px;
    height: 100px;
    text-align: left;
    padding: 0 20px;
    display: flex;
    align-items: center;
    background-color: var(--white-color);
    border: 1px solid var(--border-color);
    box-shadow: var(--box-shadow);
    border-radius: 8px;
}

.btn-regisel:last-child {
    margin-bottom: 0;
}

.btn-regisel h3 {
    margin-bottom: 15px;
    padding-left: 30px;
    line-height: 1.0;
    font-size: 18px;
    color: var(--black-color);
}

.btn-regisel p {
    line-height: 1.2;
    font-size: var(--f-caption);
    font-weight: 400;
}

.btn-regisel .avatar {
    flex-shrink: 0;
    width: 68px;
    height: 68px;
}

.tit-user {
    background: url(../images/icon/ic_user.png) no-repeat center left / 24px;
}

.tit-artist {
    background: url(../images/icon/ic_piano.png) no-repeat center left / 24px;
}

.tit-buisness {
    background: url(../images/icon/ic_business.png) no-repeat center left / 24px;
}

.form-box+.caption {
    margin-top: -10px;
}

.login-wp .form-lbl {
    padding-left: 8px;
    position: relative;
}

.login-wp .form-lbl::after {
    content: '*';
    position: absolute;
    left: 0;
    line-height: 1.8;
    color: var(--red-color);
}

.login-wp .form-lbl span {
    font-size: 12px;
    margin-left: 5px;
}

.login-wp .form-lbl:has(.lbl-ch) {
    padding-left: 0;
}

.login-wp .form-lbl:has(.lbl-ch):after {
    display: none;
}

.avatar-form .avatar {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    position: relative;
    background: url(../images/icon/ic-userdefault3.png) no-repeat center center / 55px #e4e6e7;
    border: 1px solid var(--border-color);
    cursor: pointer;
}

.avatar-form .avatar::after {
    content: '';
    width: 28px;
    height: 28px;
    border: 1px dashed var(--border-color);
    background: url(../images/icon/grey/ic_camera.png)no-repeat center center /16px var(--white-color);
    position: absolute;
    right: 0;
    bottom: 0;
    border-radius: 50%;
}

.classic-mypagewr .form-box.avatar-form .avatar {
    display: block;
}

.avatar-form .avatar img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.login-wp .caption {
    color: var(--primary-color);
}

.number-3col {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
}

.number-3col .form-lbl {
    width: 100%;
    display: block;
}

.form-box input[type=file] {
    padding: 11px 14px;
}

.listinfor {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 120px;
    margin-bottom: 30px;
}

.listinfor h3 {
    font-size: var(--f-big);
    color: var(--black-color);
}

.infor-sort {
    display: flex;
    box-sizing: border-box;
}

.infor-sort li {
    padding-right: 20px;
    position: relative;
    margin-right: 20px;
    cursor: pointer;
    box-sizing: border-box;
}


.infor-sort li:hover,
.infor-sort li:focus,
.infor-sort li:focus-visible,
.infor-sort li.active {
    font-weight: 600;
    color: var(--primary-color);
}

.infor-sort li:last-child {
    padding-right: 0;
    margin-right: 0;
}

.infor-sort li::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    height: 10px;
    width: 1px;
    background: #d1d5db;
}

.infor-sort li:last-child::after {
    display: none;
}

.gallery-wp {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-top: 60px;
    margin-bottom: 30px;
}

.artist-item {
    width: calc(100%/4 - 20px);
    border-radius: 6px;
    position: relative;
    border: 1px solid var(--border-color);
    box-sizing: border-box;
    cursor: pointer;
    margin-right: 26px;
    margin-bottom: 26px;
}

.artist-item:nth-child(4n) {
    margin-right: 0;
}

.artist-thum {
    width: 100%;
    padding-top: 100%;
    border-radius: 6px 6px 0 0;
    background-color: #DDD;
    position: relative;
    overflow: hidden;
}

.artist-thum:before {
    position: absolute;
    bottom: 0;
    left: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .0), rgba(0, 0, 0, .3));
    width: 100%;
    height: 100%;
    content: "";
    z-index: 4;
}

.artist-thum img {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: var(--transition);
    z-index: 3;
}

.artist-thum:hover img {
    transform: scale(105%);
}

.artist-avatar {
    width: 68px;
    height: 68px;
    margin: 0 auto;
    margin-top: -34px;
    display: block;
    background-color: var(--white-color);
    border: 4px solid var(--white-color);
    border-radius: 50%;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    z-index: 4;
}

.artist-avatar img {
    width: 100%;
    min-height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    /* border-radius: 50%; */
    object-fit: contain;
}

.artist-tit {
    text-align: center;
    font-size: var(--f-normal);
    color: var(--black-color);
    padding: 5px 20px 20px 20px;
}

.thum-heart {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
    background: url(../images/icon/ic_heart.png)no-repeat top right /30px;
    display: block;
    z-index: 5;
    transition: var(--transition);
    cursor: pointer;
}

.thum-heart.active {
    background: url(../images/icon/ic-hearfillred.png)no-repeat top right /30px;
}

.thum-heart .bub-wp {
    position: absolute;
    top: 0%;
    right: 0;
    z-index: 4;
    display: none;
}

.thum-heart.active .bub-wp {
    display: block;
}

.hearts-animations {
    width: 30px;
    height: 20px;
    position: relative;
}

.heart {
    z-index: 0;
    position: absolute;
    top: 40%;
    left: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: url(../images/icon/ic-hearfillred.png) no-repeat center center / contain;
    animation: hearts 1s 1;
    animation-iteration-count: 1;
    opacity: 0;
}

.hearts-animations .heart:nth-child(1) {
    animation-delay: .5s;
    -webkit-animation-delay: .5s;
    left: 5%;
}

.hearts-animations .heart:nth-child(2) {
    animation-delay: 0s;
    -webkit-animation-delay: 0;
    left: 33.3%;
}

.hearts-animations .heart:nth-child(3) {
    animation-delay: 1s;
    -webkit-animation-delay: 1s;
    left: 60%;
}

@keyframes hearts {
    0% {
        transform: rotate(20deg);
        opacity: 0;
    }

    50% {
        transform: rotate(-20deg);
        opacity: .8;
    }

    100% {
        top: -10px;
        transform: rotate(20deg);
        opacity: 0;
    }
}

@-webkit-keyframes hearts {
    0% {
        transform: rotate(20deg);
        opacity: 0;
    }

    50% {
        transform: rotate(-20deg);
        opacity: .8;
    }

    100% {
        top: -10px;
        transform: rotate(20deg);
        opacity: 0;
    }
}

.admin-btnwp {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    align-items: center;
    margin: 40px 0;
    padding-top: 40px;
    border-top: 1px dashed var(--border-color);
}

.admin-btnwp .btn {
    padding: 0 20px;
    height: 48px;
    line-height: 48px;
    margin-left: 20px;
    border-radius: 30px;
}

.sub-wrapper {
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
}

.my-artist {
    margin-top: 80px;
}

.my-artist h3 {
    font-size: var(--f-large);
    color: var(--black-color);
    display: block;
    width: 100%;
}

.my-artist ul {
    display: flex;
    margin-top: 40px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px;
    touch-action: pan-y;
    width: 100%;
}

.my-artist ul::-webkit-scrollbar {
    height: 5px;
}

.my-artist ul::-webkit-scrollbar-thumb {
    background-color: var(--gray1-color);
}

.my-artist ul::-webkit-scrollbar-track {
    background-color: var(--border-color);
    background-color: transparent;
}

.myartist-item {
    display: inline-block;
    margin-right: 20px;
}

.myartist-item .artist-avatar {
    margin-top: 0;
    border: none;
}

.myartist-item .artist-tit {
    padding-bottom: 0;
    max-width: 150px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
}

.touuchArea.active {
    cursor: pointer;
}

.gallery-wp .funding-list {
    width: calc(100%/2 - 20px);
    margin: 0;
    margin-right: 40px;
    margin-bottom: 40px;
}

.gallery-wp .funding-list:nth-child(2n) {
    margin-right: 0;
}

.gallery-wp .funding-list .f-imgbox {
    width: calc(100% - 55%);
    padding-top: calc(100% - 37%);
}

.gallery-wp .funding-list .f-imgbox img {
    width: 100% !important;
    height: auto !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
}

.gallery-wp .funding-list .f-textbox h4 {
    color: var(--black-color);
    margin-bottom: 10px;
}

.gallery-wp .f-textbox {
    display: flex;
    flex-direction: column;
    padding: 0 20px;
}

.gallery-wp .f-btnwp {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-top: 20px;
}

.btn-share {
    border: 1px solid var(--primary-color);
    background: url(../images/icon/black/ic_share.png) no-repeat center center / 24px var(--background-color);
    width: 50px;
    border-radius: 50%;
    border: 1px solid var(--background-color);
    margin-left: 0;
}

.btn-plus {
    font-size: var(--f-small);
    color: var(--black-color);
    padding: 0 24px;
    padding-right: 36px;
    line-height: 1.0;
    background-color: var(--background-color);
    border-radius: 30px;
    margin-right: 16px;
    width: auto;
    flex: 1;
}

.f-textbox li.con-summ {
    margin: 0 0 40px 0;
    font-size: var(--f-caption);
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    word-break: keep-all;
}

.gallery-wp .f-textbox li span {
    color: var(--black-color);
}

.my-artist .f-imgbox {
    width: 100% !important;
    padding-top: 140%;
    margin-right: 0 !important;
}

.my-artist .f-imgbox img {
    width: 100% !important;
    height: auto !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
}

.my-artist .f-textbox h4 {
    color: var(--black-color);
    margin-bottom: 10px;
}

.my-artist .f-textbox {
    padding: 20px 0;
    width: 100%;
}

.my-artist .funding-list {
    flex-direction: column;
    width: calc(25% - 20px);
    margin-right: 26px;
}

.my-artist .funding-list:last-child {
    margin-right: 0;
}

.my-artist .funding-list:last-child {
    margin-right: 0;
}

/* project */
.my-artist.my-project .f-imgbox img {
    width: 100% !important;
    height: auto !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
}

.my-artist.my-project .f-imgbox {
    padding-top: 140%;
}

/* artist detail */
body:has(.artist-detail) {
    background-color: var(--black-color);
}

.wrapper:has(.artmainbox) {
    padding-top: 0;
}

body:has(.artist-detail) .header-wp.scroll .header-gnb li a,
body:has(.artist-detail) .header-wp .header-gnb li a {
    color: var(--white-color);
}

body:has(.artist-detail) .header-wp.scroll,
body:has(.artist-detail) .header-wp {
    background-color: rgba(0, 0, 0, .4);
}

body:has(.artist-detail) .header-wp.scroll {
    border-bottom: 1px solid var(--primary-color);
}

body:has(.artist-detail) .header-wp.scroll .header-logo,
body:has(.artist-detail) .header-wp .header-logo {
    filter: brightness(100);
}

body:has(.artist-detail) .header-wp .header-gnb li a:hover,
body:has(.artist-detail) .header-wp .header-gnb li a:focus,
body:has(.artist-detail) .header-wp .header-gnb li a:focus-visible {
    color: var(--primary-color);
}

.header-alarm:hover,
.header-alarm:focus,
.header-alarm:focus-visible,
.header-my:hover,
.header-my:focus,
.header-my:focus-visible {
    background-color: rgba(245, 246, 250, 0.8);
}

.artmainbox {
    width: 100%;
    height: calc(100vh - 120px);
    position: relative;
    z-index: 40;
    border-radius: 16px 16px 0 0;
}

.artmainbox::before {
    position: absolute;
    bottom: 0;
    left: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .0), rgba(0, 0, 0, .2) 30%, rgba(0, 0, 0, .4) 50%, rgba(0, 0, 0, .8) 95%, rgba(0, 0, 0, 1) 100%);
    width: 100%;
    height: 100%;
    content: "";
    animation: wave 2.5s linear infinite;
    transform-origin: center bottom;
}

@keyframes wave {
    0% {
        transform: scaleY(0.9);
    }

    50% {
        transform: scaleY(1.2);
    }

    100% {
        transform: scaleY(0.9);
    }
}

.artmainbox:hover::before {
    transform: scaleX(1);
}

.paper-avatar {
    width: 140px;
    height: 140px;
    z-index: 55;
    position: relative;
    margin: 0 auto;
    margin-top: -150px;
    border: 4px solid var(--primary-color);
}

.artmain-name {
    color: var(--white-color);
    text-align: center;
    margin-top: 20px;
    font-size: var(--f-large);
}

.artmain-info {
    width: 600px;
    text-align: center;
    color: var(--border-color);
    font-weight: 400;
    margin: 0 auto;
    margin-top: 20px;
}

.artist-detail .listinfor h3 {
    color: var(--white-color);
}

.artist-detail .listinfor {
    margin-top: 120px;
}

.artMainSwiper .swiper-slide {
    width: 100%;
    height: calc(100vh - 120px);
}

.myartist-item .artist-avatar {
    width: 100px;
    height: 100px;
}

.gallery-wp .funding-list .f-textbox h4 span {
    font-size: 18px;
    display: none;
}

.gallery-wp .funding-list .f-textbox h4 {
    margin-bottom: 20px;
}


/* 공통 슬라이드 */
.bnr-common {
    width: 100vw;
    height: 50vh;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--black-color);
}

.wrapper:has(.bnr-common) {
    padding-top: 0;
}

.bnr-common .swiper-slide {
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    cursor: grabbing;
}

.bnr-common .swiper-wrapper .swiper-slide:before {
    position: absolute;
    top: 0;
    left: 0;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, .05), rgba(0, 0, 0, .50));
    width: 100%;
    height: 100%;
    content: "";
    z-index: 5;
}

.slider-textbox {
    display: block;
    position: absolute;
    bottom: 15%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1300px;
    z-index: 10;
    text-align: left;
    min-height: 137px;
    padding-right: 30%;
}

.slider-textbox .bnr-tit {
    font-size: var(--f-big);
    margin-bottom: 15px;
    line-height: 1.35;
    color: var(--white-color);
}

body:has(.home) .slider-textbox .bnr-tit {
    font-size: 42px;
}

.slider-textbox .bnr-subtit {
    font-size: var(--f-normal);
    color: var(--white-color);
    font-weight: 400;
}

.bnr-common .swiper-pagination {
    bottom: 30px;
}

.bnr-common .swiper-pagination-bullet {
    background-color: var(--white-color);
}

/* Main */
body:has(.home) {
    background-color: var(--black-color);
}

.main-bigheader {
    display: flex;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

body:has(.home) .main-bigheader h1,
body:has(.home) .main-bigheader p {
    color: var(--white-color);
}

body:has(.home) .main-bigheader h1 {
    font-size: 42px;
    padding-top: 140px;
    margin-bottom: 30px;
}

body:has(.home) .main-bigheader p {
    line-height: 1.6;
    font-size: var(--f-normal);
    font-weight: 300;
    margin-top: 180px;
    padding-top: 0;
    cursor: pointer;
    transition: var(--transition);
}

.big-move {
    display: inline-block;
    width: 24px;
    height: 15px;
    margin-left: 10px;
    background: url(../images/icon/ic_longar.png)no-repeat center right / 30px;
    transition: var(--transition);
}

.main-bigheader p:hover .big-move {
    width: 35px;
}

.main-bigheader p:hover {
    color: rgba(255, 255, 255, .6) !important;
}

.big-mark {
    width: 15px;
    height: 15px;
    border-radius: 100%;
    display: inline-block;
    background-color: var(--secondary-color);
}

.pro-fixeditem {
    width: calc(40% - 40px);
    margin-right: 40px;
    position: sticky;
    top: 200px;
    height: 600px;
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
    transition: var(--transition);
    opacity: 0.7;
    cursor: pointer;
}

.pro-fixeditem:hover {
    filter: grayscale(0);
    opacity: 1;
}

.main-project .pro-fixeditemlist {
    width: 60%;
    padding-left: 40px;
}

.main-project {
    display: flex;
}

.main-project .pro-item {
    background-color: var(--black-color);
    margin-bottom: 40px;
}

.main-project .pro-item:last-child {
    margin-bottom: 0;
}

.main-project .pro-textbox {
    padding: 24px;
}

.main-project .pro-imgbox {
    width: 230px;
    height: 322px;
}

.main-project .pro-summ {
    color: var(--white-color);
    -webkit-line-clamp: 3;
}

.main-project .pro-textbox {
    width: calc(100% - 230px);
    padding-left: 40px;
}

.main-project .pro-textbox li {
    color: var(--white-color);
}

.main-project .pro-date {
    background: url(../images/icon/white/ic_calendar.png)no-repeat center left /20px;
}

.main-project .pro-place {
    background: url(../images/icon/white/ic_location.png)no-repeat center left /20px;
}

body:has(.home) .my-artist h3 {
    color: var(--white-color);
}

.main-project .artist-badge {
    background-color: #181818;
    color: var(--secondary-color);
}

.main-project .pro-textbox h4 {
    color: var(--white-color);
    font-size: var(--f-middle);
}

.main-request {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    height: 50vh;
    background-color: var(--primary-color);
    text-align: center;
}

.main-request h4 {
    font-size: 42px;
    margin-bottom: 30px;
    color: var(--white-color);
    text-align: center;
}

.main-request p {
    font-size: var(--f-normal);
    color: var(--white-color);
    font-weight: 400;
}

.main-funding .funding-list .f-imgbox {
    width: 150px;
    padding-top: 212px;
}

.main-funding .f-textbox {
    width: calc(100% - 232px);
}

.main-funding .funding-list .f-textbox h4 {
    color: var(--white-color);
    font-size: var(--f-middle);
}

.main-funding {
    position: relative;
}

.homeSwiper .swiper-pagination {
    width: 100%;
    max-width: 1300px;
    left: 50%;
    transform: translateX(-50%);
    text-align: right;
    bottom: 15%;
    opacity: .6;
}

.homeSwiper .swiper-pagination span,
.homeSwiper .swiper-pagination {
    color: var(--white-color);
    font-family: 'Noto Serif KR', serif;
}

.homeSwiper .swiper-pagination-total {
    font-size: var(--f-large);
}

.homeSwiper .swiper-pagination-current {
    font-size: 80px;
    font-style: italic;
}

.homeSwiper .swiper-scrollbar-drag {
    background-color: var(--secondary-color);
}

/* project item */
.pro-item {
    width: 100%;
    display: flex;
}

.pro-imgbox {
    width: 200px;
}

.pro-imgbox img {
    width: 100%;
}

.pro-textbox {
    padding: 0 14px;
    width: calc(100% - 48%);
    position: relative;
}

.pro-textbox h4 {
    font-size: var(--f-large);
    width: 100%;
}

.pro-txtlist {
    width: 100%;
    position: absolute;
    bottom: 40px;
    left: 40px;
}

.pro-summ {
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: keep-all;
    margin-top: 20px;
}

.pro-date,
.project-mainbox .gallery-wp .pro-date {
    margin-top: 20px;
    background: url(../images/icon/black/ic_calendar.png)no-repeat center left /20px;
    padding-left: 25px;
}

.pro-place,
.project-mainbox .gallery-wp .pro-place {
    margin-top: 10px;
    background: url(../images/icon/black/ic_location.png)no-repeat center left /20px;
    padding-left: 25px;
}

.project-mainbox .gallery-wp .pro-date .li-tit {
    display: none;
}

.project-mainbox .gallery-wp .pro-place .li-tit {
    display: none;
}

.project-mainbox .gallery-wp .pro-artist .li-tit {
    display: none;
}

.pro-artist {
    display: flex;
    flex-wrap: wrap;
}

.artist-badge {
    background-color: var(--border-color);
    font-size: var(--f-caption);
    padding: 5px 10px;
    border-radius: 30px;
    line-height: 1.0;
}

.pro-artist .artist-badge {
    margin-right: 10px;
    margin-top: 10px;
}

body:has(.home) .header-wp.scroll .header-gnb li a {
    color: var(--white-color);
}

body:has(.home) .header-wp.scroll .header-gnb li a:hover {
    color: var(--primary-color);
}

body:has(.home) .header-wp.scroll {
    background-color: rgba(0, 0, 0, .4);
}

body:has(.home) .header-wp.scroll .header-logo {
    filter: brightness(100);
}

body:has(.home) .header-wp.scroll .header-ham {
    background: url(../images/icon/black/ic_ham.png) no-repeat center center / 28px var(--background-color);
    transition: none;
}

body:has(.home) .header-wp.scroll .header-ham:hover {
    border-color: transparent;
    opacity: .9;
}

body:has(.home) .header-wp.scroll .header-login+.header-ham {
    background: url(../images/icon/white/ic_ham.png) no-repeat center center / 28px var(--secondary-color);
    transition: none;
}

body:has(.home) .header-wp.scroll .header-login+.header-ham:hover {
    border-color: transparent;
    opacity: .9;
}

/* preloader */
.preloader {
    background: url(../images/logo/logo.png) no-repeat center center / 300px var(--background-color);
    display: flex;
    align-items: center;
    height: 100vh;
    width: 100vw;
    text-align: center;
    justify-content: center;
    z-index: -50;
    position: fixed;
    top: 0;
    left: 0;
}

.preloader .logo {
    background: url(../images/logo/logo.png) no-repeat center center / contain;
    width: 300px;
    height: 150px;
}

/* 빈값 */
.item-emp {
    font-size: var(--f-normal);
    padding-top: 38px;
    background: url(../images/icon/grey/ic_info.png)no-repeat left top /32px;
}

.gall-emp {
    width: 100%;
    padding: 100px 0;
    text-align: center;
    background: url(../images/icon/grey/ic_info.png)no-repeat center top 48px /42px;
}

.gall-emp a {
    color: var(--primary-color);
    font-weight: 600;
    font-size: var(--f-normal);
    padding: 0 5px;
}

.f-textbox .pro-txtlist {
    font-size: var(--f-normal);
}

/* project detail */
.artist-detail .artmainbox {
    border-radius: 0;
    margin-top: 50px;
    height: 80vh;
}

.artist-detail .artmainbox::before {
    position: absolute;
    bottom: 0;
    left: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .0), rgba(0, 0, 0, .2) 30%, rgba(0, 0, 0, .4) 50%, rgba(0, 0, 0, .8) 95%, rgba(0, 0, 0, 1) 100%);
    width: 100%;
    height: 100%;
    content: "";
    animation: wave 2.5s linear infinite;
    transform-origin: center bottom;
}

@keyframes wave {
    0% {
        transform: scaleY(0.9);
    }

    50% {
        transform: scaleY(1.2);
    }

    100% {
        transform: scaleY(0.9);
    }
}

.artist-detail .artmainbox:hover::before {
    transform: scaleX(1);
}

body:has(.sub-header) header {
    display: none;
}

body:has(.sub-header) .wrapper {
    padding-top: 0;
    margin-top: 0;
}

body:has(.sub-header) {
    scroll-behavior: smooth;
}

.project-detailarea {
    margin-top: 80px;
}

.project-detailarea img {
    width: 100%;
}

.project-detail .comment-wrlist {
    background-color: #2d3136;
}

.project-detail .bottom-listwr.list {
    margin-top: 140px;
}

.artist-detail.project-detail h2.artmain-name {
    font-size: var(--f-large);
}

.artist-detail .bottom-listwr {
    width: 100%;
    max-width: 1030px;
}

.prod-tit {
    color: var(--white-color);
    font-size: var(--f-large);
}

.project-detailarea .prod-tit {
    margin-bottom: 30px;
}

.prod-tabwp {
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 999;
    position: sticky;
    width: 100vw;
    top: 50px;
    left: 0;
    transform: translateX(-50%);
    margin-left: 50%;
    box-shadow: rgba(225, 225, 225, 0.05) 0px 2px 4px;
}

.prod-tab {
    margin: 0 auto;
    width: 100%;
    max-width: 1030px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}

.prod-tab a {
    border: none;
    outline: none;
    cursor: pointer;
    padding: 0 28px 16px 28px;
    font-size: var(--f-normal);
    font-weight: bold;
    color: #cbcbcb;
    display: inline-block;
    background-color: transparent;
    transition: var(--transition);
    border-bottom: 2px solid transparent;
}

.prod-tab a.active {
    color: var(--white-color);
    border-bottom: 2px solid var(--primary-color);
}

.artist-detail.project-detail .bottom-listwr .comment-write input {
    border-color: var(--primary-color);
    background-color: var(--black-color);
    box-shadow: 0 1px 3px 3px rgb(180 150 106 / 20%), 0px 1px 20px 0px rgb(180 150 106 / 10%);
}

.project-detail .commentbox,
.project-detail .commentid li:first-child {
    background-color: var(--black-color);
    color: var(--white-color);
    border-color: #222529;
    border-color: rgba(255, 255, 255, .2);
}

.project-detail .commentid li {
    color: var(--border-color);
}

.project-detail .commentid li:first-child {
    max-width: 150px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
}

.project-detail .commentid li:nth-child(2) {
    color: var(--gray2-color);
    margin-right: 0;
}

.project-detail .commentid li:nth-child(2)::after {
    display: none;
}

.project-detail .SynopsisText {
    color: var(--white-color);
    font-weight: 300;
    line-height: 1.25;
    width: 100%;
    overflow: unset;
    display: block;
    -webkit-line-clamp: unset;
    -webkit-box-orient: unset;
}

.sub-header {
    height: 50px;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    z-index: 9997;
}

.sub-header .sub-headerin {
    margin: 0 auto;
    width: 100%;
    height: 100%;
    max-width: 1300px;
    filter: brightness(100);
    background: url(../images/logo/logo.png)no-repeat center left / 180px;
    display: flex;
    justify-content: space-between;
}

.home-coming {
    width: 180px;
    height: 100%;
    display: block;
}

.demo-slide .swiper-slide {
    width: 100%;
}

.demo-slide img {
    width: 100%;
}

.demo-modal .modal-inner b {
    font-size: 20px;
    font-style: italic;
    margin: 20px 0;
    display: block;
    color: var(--white-color);
    color: var(--primary-color);
}

.demo-modal .modal-inner p {
    color: var(--white-color);
    line-height: 1.8;
    font-weight: 300;
}

.demo-modal .modal-content {
    background-color: var(--black-color);
}

.demo-modal .close {
    background: url('/assets/images/icon/white/ic_x.png') no-repeat center center / 24px transparent;
}

.demo-modal .modal-header,
.demo-modal .modal-content {
    border-color: var(--font-color);
}

.demo-modal .swiper-pagination .swiper-pagination-bullet-active {
    background-color: var(--primary-color);
}

.demo-modal .modal-header p {
    color: var(--white-color);
    width: calc(100% - 18px);
    margin-right: 18px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
}

.demo-modal .swiper-pagination {
    bottom: 20px;
}

.demo-modal .modal-inner::-webkit-scrollbar {
    width: 5px;
}

.demo-modal .modal-inner::-webkit-scrollbar-thumb {
    background-color: var(--primary-color);
}

.demo-modal .modal-inner::-webkit-scrollbar-track {
    background-color: var(--black-color);
}

.modal.demo-modal {
    backdrop-filter: blur(4px);
    background-color: rgba(0, 0, 0, 0.6);
    flex-direction: column;
    justify-content: center;
}

.demo-slide img {
    z-index: 888;
    position: relative;
}

.demo-slide::after {
    position: absolute;
    bottom: 0;
    left: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .0), rgba(0, 0, 0, 1));
    width: 100%;
    height: 100%;
    content: "";
    z-index: 990;
}

.modalslide-text {
    margin-top: -20vh;
    position: relative;
    z-index: 999;
}

.project-detail .paper-avatar {
    border-color: var(--primary-color);
    margin-top: -150px;
}

.project-detail .myartist-item .artist-avatar {
    border: 1px solid var(--font-color);
}

.project-detail .myartist-item.ullimItem .artist-avatar {
    border-color: var(--primary-color);
}

.artist-detail .comment-write {
    margin-bottom: 30px;
}

.artist-detail .commentid li.li-reply {
    margin-right: 0;
    margin-left: auto;
    cursor: pointer;
    transition: var(--transition);
    padding: 4px 12px;
    border-radius: 30px;
    border: 1px solid var(--border-color);
    background-color: rgba(255, 255, 255, .1);
    font-size: 10px;
    color: #fff;
}

.artist-detail .commentid li.li-reply:hover {
    color: var(--primary-color);
}

.artist-detail .commentid li.li-reply+.li-reply {
    margin-left: 10px;
}

.artist-detail .commentid {
    width: 100%;
}

.commentid {
    align-items: center;
}

.write-span {
    box-shadow: 0 1px 3px 3px rgb(180 150 106 / 20%), 0px 1px 20px 0px rgb(180 150 106 / 10%);
    background-color: var(--black-color);
    border-radius: 30px;
    border: 1px solid var(--primary-color);
    padding: 17px 24px;
    color: var(--border-color);
    padding-right: 100px;
    width: 100%;
    height: 56px;
    display: block;
    cursor: pointer;
}

.demo-modal .modal-inner p.write-notice {
    background-color: #222529;
    font-size: var(--f-caption);
    padding: 14px;
    font-weight: 400;
    line-height: 1.5;
    border-radius: 4px;
    color: var(--gray1-color);
    margin-top: 15px;
    border: 1px solid #999;
}

.demo-modal .modal-inner p.write-notice b {
    display: block;
    background: url(../images/icon/white/ic_info.png)no-repeat left center / contain;
    color: var(--white-color);
    font-size: var(--f-small);
    font-style: normal;
    padding-left: 30px;
    font-weight: 300;
    margin: 0;
    margin-bottom: 10px;
}

.demo-modal .modal-inner .btn {
    width: 100%;
    margin-top: 24px;
}

.demo-modal .modal-inner label {
    color: var(--white-color);
}

.demo-modal .modal-inner input,
.demo-modal .modal-inner textarea {
    background-color: #343a43;
    color: var(--white-color);
    width: 100%;
    margin-top: 15px;
    border-radius: 4px;
    border: 1px solid #999;
}

.demo-modal .modal-inner textarea {
    resize: none;
    height: 300px;
    padding: 14px;
}

.demo-modal .modal-inner textarea::-webkit-scrollbar {
    width: 5px;
}

.demo-modal .modal-inner textarea::-webkit-scrollbar-thumb {
    background-color: var(--primary-color);
}

.demo-modal .modal-inner textarea::-webkit-scrollbar-track {
    background-color: var(--black-color);
}

.demo-modal .modal-inner textarea::placeholder,
.demo-modal .modal-inner input::placeholder {
    color: var(--gray1-color);
}

.demo-modal .modal-inner input:focus,
.demo-modal .modal-inner textarea:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 1px 3px 3px rgb(180 150 106 / 20%), 0px 1px 20px 0px rgb(180 150 106 / 10%);
}

.write-modal .modal-content,
.reply-modal .modal-content,
.read-modal .modal-content {
    height: auto;
    max-height: calc(100vh - 100px);
}

.read-modal .modal-content {
    min-height: 500px;
}

.project-detail .gall-emp {
    color: var(--border-color);
    background: url(../images/icon/white/ic_info.png)no-repeat center top 48px /42px;
}

.btnModalnR {
    display: flex;
}

.btnModalnR h4 {
    cursor: pointer;
    transition: var(--transition);
}

.btnModalnR:hover h4 {
    color: var(--primary-color);
}

.read-modal .modal-header p {
    font-weight: 600;
}

.read-modal .modal-inner p {
    font-weight: 400;
}

.board-paging {
    display: flex;
}

.board-paging li {
    display: block !important;
    width: 40px !important;
    height: 40px !important;
    line-height: 1.0;
    padding: 11px 0;
    text-align: center;
    border-radius: 3px;
    background-color: #222529;
    border: 1px solid rgba(255, 255, 255, .2);
    color: var(--white-color);
    margin: 0 5px;
    cursor: pointer;
    transition: var(--transition);
    line-height: 40px;
    padding: 0 !important;
}

.board-paging li:hover,
.board-paging li:focus,
.board-paging li:focus-visible {
    outline: none;
    background-color: var(--primary-color);
}

.paging-prev {
    background: url(../images/icon/white/ic_arleft.png)no-repeat center center / 24px;
}

.paging-next {
    background: url(../images/icon/white/ic_arright.png)no-repeat center center / 24px;
}

.temt-paging-prev a {
    background: url(../images/icon/white/ic_arleft.png)no-repeat center center / 24px;
    color: transparent !important;
    width: 40px !important;
    height: 40px !important;
}

.temt-paging-next a {
    background: url(../images/icon/white/ic_arright.png)no-repeat center center / 24px;
    color: transparent !important;
    width: 40px !important;
    height: 40px !important;
}

.board-paging li.active {
    background: var(--primary-color);
}

.board-paging li.disable {
    opacity: .5;
}

.board-paging li.disable:hover,
.board-paging li.disable:focus,
.board-paging li.disable:focus-visible {
    color: #FFF;
    background-color: #222529;
    cursor: default;
}

.scrolling {
    position: fixed;
    right: 40px;
    bottom: 40px;
    z-index: 55;
    cursor: pointer;
}

.scrolling .scrollline {
    display: inline-block;
    width: 3px;
    height: 50px;
    background: rgba(255, 255, 255, .3);
    animation: play-scroll 5s linear infinite;
    bottom: 0;
    border-radius: 4px;
    position: relative;
}

.scrollline::after {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    content: '';
    background-color: var(--white-color);
    opacity: .5;
}

.scrolling .scrolltext {
    display: inline-block;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2px;
    padding-left: 1rem;
    display: none;
}

@keyframes play-scroll {
    0% {
        height: 50px;
    }

    50% {
        height: 70px;
    }

    100% {
        height: 50px;
    }
}

@-webkit-keyframes play-scroll {
    0% {
        height: 50px;
    }

    50% {
        height: 70px;
    }

    100% {
        height: 50px;
    }
}


.loading {
    background: url(../images/logo/logo.png) no-repeat center center / 300px var(--black-color);
    display: flex;
    align-items: center;
    height: 100vh;
    width: 100vw;
    text-align: center;
    justify-content: center;
    z-index: 9999;
    position: fixed;
    top: 0;
    left: 0;
}

.loading .logo {
    background: url(../images/logo/logo.png) no-repeat center center / contain;
    filter: brightness(100);
    width: 300px;
    height: 150px;
}

.artist-detail .commentbox.reply {
    padding-left: 45px;
    position: relative;
    width: calc(100% - 45px);
    margin-left: 45px;
    background-color: var(--black-color);
    color: var(--white-color);
    border-color: #222529;
    border-color: rgba(255, 255, 255, .2);
    color: var(--white-color);
}

.artist-detail .commentbox.reply:before {
    content: "";
    width: 20px;
    height: 1px;
    border-bottom: 1px dashed var(--font-color);
    position: absolute;
    left: 0;
    top: 31px;
    margin-left: 10px;
}

.artist-detail .commentbox.reply:after {
    content: "";
    width: 1px;
    height: 15px;
    border-left: 1px dashed var(--font-color);
    position: absolute;
    left: 0;
    top: 16px;
    margin-left: 10px;
}

h2.artmain-info.date {
    background: url(../images/icon/white/ic_calendar.png)no-repeat center left /20px;
    padding-left: 25px;
    width: auto !important;
    margin: 0 auto;
    display: inline-block !important;
    font-size: var(--f-normal);
    margin-top: 15px !important;
}

h2.artmain-info.location {
    background: url(../images/icon/white/ic_location.png)no-repeat center left /20px;
    padding-left: 25px;
    width: auto !important;
    margin: 0 auto;
    display: inline-block !important;
    font-size: var(--f-normal);
    margin-top: 15px;
    margin-bottom: 15px;
}

.artist-detail .artmain-info:last-child {
    padding-top: 15px;
    border-top: 1px dashed var(--font-color);
}

.artist-detail .artmain-info {
    width: 80%;
}

.artpaper-top {
    display: flex;
    flex-direction: column;
}

.artist-detail .commentbox.reply {
    padding-left: 55px;
}

.artist-detail .commentbox.reply:after,
.artist-detail .commentbox.reply:before {
    left: 10px;
}

.artist-detail .gall-emp {
    color: var(--white-color);
    background: url(../images/icon/white/ic_info.png)no-repeat center top 48px /42px;
    width: 100%;
}

.artist-detail {
    max-width: 1030px;
}

.apply-title h3 {
    font-size: var(--f-large);
    color: var(--black-color);
    margin-bottom: 10px;
}

body:has(.apply-form) {
    background-color: var(--background-color);
}

.apply-form {
    padding: 40px;
    border: 1px solid var(--border-color);
    margin: 40px 0;
    background-color: #FFF;
}

.apply-formtit {
    font-size: var(--f-middle);
    color: var(--black-color);
    margin-bottom: 40px;
}

.apply-form .form-lbl {
    font-weight: 600;
    color: var(--black-color);
    cursor: default;
}

.apply-form .btn {
    padding: 0 16px;
}

.apply-form textarea {
    border: 1px solid var(--gray1-color);
    border-radius: 4px;
    padding: 14px;
    width: 100%;
    resize: none;
    height: 150px;
}

.apply-form .form-box:has(.btn).form-button {
    text-align: center;
    margin-bottom: 40px;
    display: block;
}

.apply-form .form-lbl+.btn {
    margin-top: 10px;
}

.apply-form .form-box:has(.btn) {
    margin-top: 40px;
    display: flex;
    justify-content: space-between;
}

.apply-form hr {
    border: 1px dashed var(--border-color);
    margin: 60px 0 40px 0;
}

.apply-info {
    padding: 16px;
    border: 1px solid var(--gray1-color);
    border-radius: 4px;
    font-size: var(--f-caption);
    padding-left: 50px;
    background: url(../images/icon/black/ic_info.png)no-repeat center left 20px /20px var(--background-color);
}

.apply-info.mt-20 {
    margin-top: 20px;
}

input+.apply-info,
textarea+.apply-info,
label+.apply-info,
.swiper+.apply-info,
.apply-info.mt-30 {
    margin-top: 30px;
}

.apply-info.mt-0-mb-20 {
    margin-top: 0;
    margin-bottom: 20px;
}

.wrapper:has(.apply-form) {
    width: 768px;
}

.form-box .apply-formtit {
    margin-bottom: 0;
}

.apply-form .modal-footer {
    text-align: center;
}

.apply-form .modal-footer button {
    min-width: 100px;
}

.apply-form .modal-content {
    height: auto;
}

.apply-form .modal-content li {
    margin-bottom: 20px;
}

.apply-form .modal-content li:last-child {
    margin-bottom: 0;
}

.apply-form .modal-content li input {
    margin-top: 10px;
}

.add-filebox {
    width: 150px;
    height: 210px;
    border-radius: 6px;
    border: 1px solid var(--gray1-color);
    background: url(../images/icon/grey/ic_plus.png)no-repeat center center / 32px var(--background-color);
    transition: var(--transition);
    display: inline-block;
    margin-right: 16px;
    margin-bottom: 14px;
}

.add-filebox.fourfilebox {
    height: 150px;
    position: relative;
    overflow: hidden;
}

.add-filebox.fourfilebox img {
    width: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
}

.add-filebox:hover {
    opacity: .6;
}

.upload-box {
    overflow-x: auto;
    white-space: nowrap;
}

.upload-item {
    width: 150px;
    height: 210px;
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    border: 1px solid var(--gray1-color);
    background-color: var(--background-color);
    margin-right: 16px;
    display: inline-block;
}

.upload-item.four {
    height: 150px;
}

.upload-item img {
    width: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.btn-remove {
    position: absolute;
    right: 8px;
    top: 8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: url(../images/icon/black/ic_x.png)no-repeat center center / 16px var(--white-color);
}

.btn-remove:hover {
    opacity: .6;
}

.inp-datepicker,
.form-box input.inp-datepicker {
    padding-right: 36px;
    background: url(../images/icon/grey/ic_calendar.png)no-repeat right 10px center / 20px;
    color: var(--black-color);
}

.form-half {
    display: inline-block;
    width: 50%;
    float: left;
    padding-right: 8px;
}

.form-half+.form-half {
    padding-left: 8px;
    padding-right: 0;
}

.clear {
    clear: both;
}

.btn.btn-applyinner {
    font-size: var(--f-small);
    border: 1px solid var(--border-color);
    color: var(--white-color);
    padding-left: 36px;
    line-height: 1.0;
    background: url(../images/icon/white/ic_plus.png)no-repeat left 10px top 16px / 20px var(--black-color);
    border-radius: 30px;
}

.reward-item {
    background-color: var(--background-color);
    border: 1px solid var(--gray1-color);
    box-shadow: var(--box-shadow);
    padding: 40px 16px 0 16px;
    border-radius: 6px;
    margin-top: 30px;
    position: relative;
    width: 100%;
}

.apply-footer {
    margin-top: 60px;
    text-align: center;
    display: flex;
    justify-content: center;
}
.apply-footer.artist-apply {
    margin-bottom: 30px;
}

.apply-footer .btn.btn-cancel {
    width: 150px;
    background-color: var(--white-color);
}

.apply-footer .btn:nth-child(2) {
    width: calc(70% - 166px);
    margin-left: 16px;
    border-radius: 30px;
}

.inp-select {
    padding-right: 36px;
    background: url(../images/icon/grey/ic_ardown.png)no-repeat right 10px center / 20px #FFF;
    color: var(--black-color);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 6px;
    outline: none;
}

.art-tm-box {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 1px solid var(--gray1-color);
    background: url(../images/icon/grey/ic_plus.png)no-repeat center center / 24px var(--background-color);
    transition: var(--transition);
    display: block;
    position: relative;
    overflow: hidden;
    margin-bottom: 10px;
}

.art-tm-box img {
    position: absolute;
    width: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.funding-modalwr .modal-content .art-body input,
.funding-modalwr .modal-content .art-body select {
    border-radius: 6px;
}

.funding-applyflex {
    flex-wrap: wrap;
}

#reward_div {
    width: 100%;
}

.apply-form .my-artist {
    margin-top: 0;
}

.apply-form .my-artist .touuchArea {
    margin-top: 0;
}

.apply-form .myartist-item .artist-tit {
    font-size: var(--f-small);
}

.art-list {
    margin-bottom: 20px;
    overflow-y: auto;
    max-height: 400px;
}

.art-list li {
    padding: 8px 16px;
    background-color: var(--background-color);
    border-radius: 6px;
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: var(--transition);
    margin-bottom: 10px;
    display: inline-block;
    margin-right: 10px;
}

.art-list li:hover {
    color: var(--primary-color);
}

/* project */

.artist-detail .my-artist .media-listwp .funding-list {
    margin-right: 30px;
    width: calc(100%/4 - 22px) !important;
}

.artist-detail .my-artist .media-listwp .funding-list:nth-child(4n) {
    margin-right: 0;
}

.my-artist.movie .funding-list .f-textbox h4 {
    height: auto;
}

/* main */
.main-project .pro-item {
    overflow: hidden;
}

.main-artist .artist-tit {
    font-size: var(--f-normal) !important;
}

.main-wrapper .myartist-item .artist-avatar {
    cursor: pointer;
    transition: var(--transition);
    background-color: var(--black-color);
    border: 1px solid var(--primary-color);
}

.main-wrapper .myartist-item .artist-avatar:hover img {
    transform: scale(1.05);
    opacity: .5;
}

.main-wrapper .myartist-item .artist-avatar:hover+.artist-tit {
    color: var(--primary-color);
    transition: var(--transition);
}

.main-wrapper .myartist-item .artist-avatar img {
    transition: var(--transition);
}

body:has(.home) .main-bigheader h1 {
    font-size: 40px;
    cursor: pointer;
    transition: var(--transition);
}

body:has(.home) .main-bigheader h1:hover {
    color: var(--primary-color);
}

body:has(.home) .main-bigheader h1:hover .big-mark {
    background-color: var(--white-color);
    width: 25px;
    height: 25px;
}

.big-mark {
    background-color: var(--primary-color);
    transition: var(--transition);
}

.main-artist .artist-avatar {
    width: 68px !important;
    height: 68px !important;
    margin-top: -34px !important;
}

.main-request {
    background: url(../images/back.jpg)no-repeat top right / cover;
}

body:has(.home) .header-wp.scroll {
    border-color: var(--primary-color);
}


.marq-bg {
    width: 100vw;
    height: 100%;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    z-index: -1;
    top: 50%;
}

.cover {
    width: 100%;
    margin-bottom: 12vw;
    display: flex;
    opacity: .2;
}

.cover p {
    font-size: var(--f-big);
    padding: 20px 0;
    color: var(--background-color);
    font-family: 'Bitter', serif;
    font-weight: 700;
}

.cover:nth-child(1) {
    margin-top: 20px;
    transform: rotate(3deg);
    background-color: var(--black-color);
}

.cover:nth-child(2) {
    transform: rotate(3deg);
    justify-content: flex-end;
    background-color: var(--black-color);
}

.main-funding .funding-list::after {
    display: none;
}

.main-funding .funding-list {
    background-color: var(--black-color);
}

.main-artist .artist-avatar {
    border: 2px solid #ffffff8f !important;
}


/* password */
.pass-box {
    position: relative;
}

.pass-box input {
    padding-right: 48px;
}

#keyShow {
    position: absolute;
    right: 0;
    top: 0;
    display: none;
    cursor: pointer;
    width: 50px;
    height: 50px;
    background: url(../images/icon/black/ic_view.png)no-repeat center center / 20px;
}

#keyShow.eyeClose {
    background: url(../images/icon/black/ic_viewnone.png)no-repeat center center / 20px;
}

#keyShow2 {
    position: absolute;
    right: 0;
    top: 0;
    display: none;
    cursor: pointer;
    width: 50px;
    height: 50px;
    background: url(../images/icon/black/ic_view.png)no-repeat center center / 20px;
}

#keyShow2.eyeClose {
    background: url(../images/icon/black/ic_viewnone.png)no-repeat center center / 20px;
}

.timer {
    color: var(--red-color);
}

.regform-hidden {
    display: none;
}

.regform-hidden.active {
    display: block;
}

.funding-list .pro-textbox .pro-txtlist {
    position: unset;
}

.funding-list .pro-textbox h4 {
    font-size: var(--f-middle);
    font-size: 20px;
    color: var(--black-color);
    cursor: pointer;
}

.funding-list .pro-textbox {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.funding-wrapper .funding-list .f-textbox h4 {
    margin-bottom: 20px;
}

.commen-repbox {
    margin-top: 16px;
    padding-top: 16px;
    width: 100%;
}

.commen-repbox .comment-write {
    margin-bottom: 0;
    width: 100%;
    padding-left: 65px;
    position: relative;
}

.commen-repbox .comment-write:before {
    content: "";
    width: 20px;
    height: 1px;
    border-bottom: 1px dashed var(--font-color);
    position: absolute;
    left: 10px;
    top: 31px;
    margin-left: 10px;
}

.commen-repbox .comment-write:after {
    content: "";
    width: 1px;
    height: 15px;
    border-left: 1px dashed var(--font-color);
    position: absolute;
    left: 10px;
    top: 16px;
    margin-left: 10px;
}

.commen-repbox>.comment-write>input {
    margin-bottom: 0 !important;
    box-shadow: none !important;
    background-color: rgba(255, 255, 255, .1) !important;
    border-color: var(--border-color) !important;
    width: 100%;
    height: 56px;
    border-radius: 30px;
    border: 1px solid var(--gray1-color);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 0px, rgba(0, 0, 0, 0.04) 0px 2px 4px;
    margin-bottom: 30px;
    padding: 20px 24px;
}

.commen-repbox>.comment-write>button {
    background-color: var(--black-color) !important;
    border: 1px solid rgba(255, 255, 255, .2) !important;
    border: none;
    width: 46px;
    height: 46px;
    border-radius: 50px;
    color: #fff;
    background-color: var(--black-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.commen-repbox>.comment-write>button:hover,
.commen-repbox>.comment-write>button:focus {
    background-color: var(--secondary-color);
    transition: var(--transition);
}

.bottom-listbox .list-mini {
    flex-wrap: wrap;
}

.white-repbox .comment-write>button {
    border: 1px solid #ccc !important;
}

.commen-repbox.white-repbox {
    padding-top: 0;
}

.commen-repbox.white-repbox input {
    background-color: var(--background-color) !important;
}

.bottom-listwr .comment-write input {
    outline: none;
}

.artist-detail .commentbox li,
.artist-detail .commentbox li:nth-child(1) {
    color: var(--white-color);
}

.artist-detail .commentbox li:nth-child(2) {
    color: var(--gray2-color);
}

.artist-detail .commentbox li:nth-child(2):after {
    display: none;
}

.artist-detail .SynopsisText {
    color: var(--white-color);
    display: block;
    -webkit-line-clamp: unset;
    width: 100%;
}

.paper-avatar .thum-heart {
    top: unset;
    bottom: -0;
    right: 0;
    background: url(../images/icon/ic_heart.png)no-repeat center center /20px var(--background-color);
    border-radius: 50px;
    border: 4px solid var(--black-color);
    width: 42px;
    height: 42px;
    display: none;
}

.paper-avatar .thum-heart.active {
    background: url(../images/icon/ic-hearfillred.png)no-repeat center center /20px var(--background-color);
}

.thum-heart.selected {
    display: block;
}

.artist-follow.selected .followbox {
    display: none;
}

/* 검색 */
.class-search {
    position: relative;
    width: 50%;
    min-width: 1000px;
    margin: 0 auto;
    margin-top: 60px;
}

.class-search input {
    width: 100%;
    height: 56px;
    padding: 20px 24px;
    padding-right: 100px;
    border-radius: 30px;
    border: 1px solid var(--gray1-color);
    margin-bottom: 5px;
    outline: none;
    transition: var(--transition);
    box-shadow: 0 1px 3px 3px rgb(180 150 106 / 10%), 0px 1px 20px 0px rgb(180 150 106 / 5%);
}

.class-search input::placeholder {
    font-size: var(--f-small);
}

.class-search input:active,
.class-search input:focus,
.class-search input:focus-visible {
    border-color: var(--primary-color);
}

.class-search button {
    width: 46px;
    height: 46px;
    border-radius: 50px;
    background: url(../images/icon/white/ic_search.png) no-repeat center center /28px var(--black-color);
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 5px;
    top: 5px;
    transition: var(--transition);
}

.class-search button:hover {
    opacity: .6;
}

.search-total {
    color: var(--black-color);
    padding-left: 26px;
    background: url(../images/icon/grey/ic_info.png)no-repeat center left / 20px;
}

.search-total span {
    font-weight: 600;
    color: var(--primary-color);
}

/* 펀딩 */
.fundingdetail-wrbox {
    max-width: 1300px;
    width: 100%;
}

.fundingdetail-wrbox .tab-wrapper {
    width: 100%;
}

.tabinner-sticky {
    width: 100%;
}

.price-allbox .price-imgbox {
    width: 10%;
}

.price-allbox .price-imgbox a {
    width: 105px;
    height: 105px;
    border-radius: 4px;
    cursor: pointer;
    display: block;
}

tfoot td p.total-price {
    font-weight: 600;
    color: var(--red-color);
    text-align: center;
    display: block;
}

.payment-coin li {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin-bottom: 20px;
}

.payment-coin li>div {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.payment-coin li label {
    font-weight: 600;
    color: var(--black-color);
    display: block;
    width: 100%;
    margin-bottom: 10px;
}

.payment-coin li .coin-box {
    width: 100%;
    border-bottom: 1px solid var(--border-color);
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 0 0 20px 0;
    font-weight: 600;
    flex-wrap: wrap;
}

.payment-coin li:last-child .coin-box {
    border-bottom: none;
}

.payment-coin li .coin-box p {
    color: var(--black-color);
}

.payment-coin li .coin-box h5 {
    margin-left: auto;
    font-weight: 600;
    color: var(--black-color);
}

.payment-coin li .coin-box h5.minus-coin {
    color: var(--pink-color);
}

.payment-coin li .coin-box h5.state-coin {
    color: var(--green-color);
}

.payment-coin li button {
    width: 140px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background-color: var(--secondary-color);
    padding: 15px 20px;
    font-size: var(--f-small);
    box-shadow: 0px 3px 6px 0px #f3f4f8;
    color: var(--white-color);
    margin-left: 15px;
}

.payment-coin li .coin-box img {
    margin-right: 10px;
}

.price-wrapperbox {
    width: 768px;
}

.payment-coin li .coin-box .validation {
    width: 100%;
    display: block;
    color: var(--red-color);
    margin-top: 0;
}

.fcomp-tit {
    font-size: var(--f-large);
}

/* hamburger */
.sitemap-tit {
    font-size: var(--f-big);
    font-weight: 600;
    color: var(--primary-color);
    color: var(--black-color);
    margin-bottom: 60px;
    width: 480px;
}

.sitemap-modal {
    margin: 0;
    width: 100vw;
    height: auto;
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(6px);
}

.sitemap-modal .modal-header {
    height: 80px;
    display: flex;
    align-items: center;
    border-bottom: none;
}

.sitemap-modal .modal-header p {
    width: 100%;
    width: 200px;
    background: url(/assets/images/logo/logo.png) no-repeat left 20px center / 180px;
    position: relative;
    color: transparent;
    line-height: 40px;
    cursor: pointer;
}

.sitemap-modal .modal-header .close {
    background-color: transparent;
    right: 30px;
    top: 15px;
}

.site-menu {
    display: flex;
    flex-wrap: wrap;
    width: 50%;
}

.site-menu ul {
    width: 50%;
    padding-bottom: 40px;
    padding-right: 40px;
}

.site-menu ul li {
    color: var(--black-color);
    margin-bottom: 20px;
    font-weight: 600;
}

.site-menu ul li.sitemap-subtit {
    color: var(--primary-color);
    font-size: var(--f-normal);
    font-size: 18px;
    cursor: pointer;
    width: auto;
    display: inline-block;
    margin-right: auto;
    cursor: pointer;
}

.sitemap-modal .modal-inner {
    padding-left: 40px;
    padding-bottom: 0;
    padding-right: 40px;
    display: flex;
}

.ul-half {
    flex-wrap: wrap;
    display: flex;
}

.ul-half li {
    width: 50%;
    cursor: pointer;
}

.site-menu .ul-half li:hover {
    color: var(--primary-color);
}

.site-menu .ul-half li.sitemap-subtit {
    cursor: default;
    width: 100%;
}

.ham-slide {
    width: calc(50% - 480px);
    height: calc(50% - 480px);
    background-color: var(--black-color);
    padding: 24px;
    position: relative;
    border-radius: 12px;
    margin-bottom: 40px;
}

.hamSwiper {
    width: 100%;
}

.hamSwiper .swiper-slide {
    width: 100%;
    padding-top: 100%;
    border-radius: 12px;
}

.hamSwiper .swiper-slide p {
    position: absolute;
    bottom: 40px;
    left: 20px;
    color: var(--background-color);
    z-index: 5;
    font-weight: 600;
    font-size: var(--f-normal);
}

.hamSwiper .swiper-slide::after {
    position: absolute;
    bottom: 0;
    left: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .0), rgba(0, 0, 0, .6));
    width: 100%;
    height: 100%;
    content: "";
    z-index: 4;
}

.ham-slide .swiper-pagination-bullet {
    background-color: var(--background-color);
}

.ham-slide .swiper-pagination-bullet-active {
    background-color: var(--primary-color);
}

body:has(.header-ham2) .sitemap-modal {
    max-width: 1300px;
    margin: 0 auto;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    border: none;
}

body:has(.header-ham2) .sitemap-modal .sitemap-tit {
    color: var(--white-color);
}

body:has(.header-ham2) .sitemap-modal .site-menu ul li {
    color: var(--gray2-color);
    font-weight: 400;
}

body:has(.header-ham2) .site-menu ul li.sitemap-subtit {
    color: var(--background-color);
    font-weight: 600;
}

body:has(.header-ham2) .ham-slide {
    display: none;
}

body:has(.header-ham2) .sitemap-modal .modal-header p {
    background-position-x: left;
    filter: brightness(100);
}

body:has(.header-ham2) .sitemap-modal .modal-header .close {
    background: url('/assets/images/icon/white/ic_x.png') no-repeat center right / 24px;
    right: 0;
    top: 0;
}

body:has(.header-ham2) .sitemap-modal .modal-header {
    padding: 0;
    height: 50px;
}

body:has(.header-ham2) .sitemap-modal .modal-inner {
    padding: 0;
}

.req-btn {
    color: var(--black-color) !important;
}

.btn-allview {
    background: url(../images/icon/ic_longar_b.png)no-repeat center right 5px / 20px;
    color: var(--black-color);
    font-size: var(--f-normal);
    padding: 12px 20px;
    padding-right: 36px;
    margin-top: 24px;
}

.btn-allview:hover {
    color: var(--primary-color);
    background-position-x: 100%;
}

.search-wp {
    text-align: center;
    padding: 60px 0;
    border-radius: 8px 8px 0 0;
}

.search-wp .listinfor {
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 0;
}

.search-wp .listinfor h3 {
    width: 100%;
}

.search-wp .listinfor p {
    font-size: var(--f-normal);
    color: var(--black-color);
    width: 100%;
    margin-top: 10px;
}

.more-right {
    display: inline-block;
    width: 20px;
    height: 15px;
    margin-left: 10px;
    background: url(../images/icon/ic_longar_b.png)no-repeat center right / 24px;
    transition: var(--transition);
    opacity: .3;
}

.listinfor .viewall-txt {
    color: var(--black-color);
    font-weight: 600;
    cursor: pointer;
}

.listinfor .viewall-txt:hover {
    color: var(--primary-color);
}

.listinfor .viewall-txt:hover .more-right {
    width: 24px;
    opacity: .6;
}

.listinfor h3 span {
    font-size: var(--f-big);
    color: var(--primary-color);
    font-style: italic;
    padding-right: 6px;
}

.listinfor h3 span.badge-num {
    width: 20px;
    height: 20px;
    border-radius: 100%;
    display: inline-block;
    background-color: var(--red-color);
    background-color: var(--black-color);
    color: var(--white-color);
    font-size: var(--f-small);
    margin-left: 10px;
    padding-right: 0;
    font-style: unset;
    text-align: center;
    line-height: 20px;
    margin-bottom: 10px;
}


.wrapper .request-detailwr+.bottom-listwr,
.wrapper .request-detailwr {
    max-width: 1040px;
}

body:has(.request-wrapbox) {
    background-color: var(--background-color);
}

.request-wrapbox .petition-wrbox::after {
    background-color: var(--background-color);
}

.gallery-wp .pro-date,
.gallery-wp .pro-place,
.gallery-wp .pro-artist {
    padding-left: 0;
    background: transparent;
    margin-bottom: 14px;
}

.gallery-wp .pro-date .li-tit,
.gallery-wp .pro-place .li-tit,
.gallery-wp .pro-artist .li-tit {
    width: 100px;
    margin-right: 20px;
    display: inline-block;
    position: relative;
}

.gallery-wp .pro-date .li-tit:after,
.gallery-wp .pro-place .li-tit:after,
.gallery-wp .pro-artist .li-tit:after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    height: 10px;
    width: 1px;
    background: #d1d5db;
}

.gallery-wp .pro-artist .artist-badge {
    margin-top: 0;
    margin-bottom: 10px;
}

/* guide */
.guide-card {
    padding: 24px;
    text-align: center;
    height: 100%;
    cursor: grab;
    background-color: #FFF;
}

.guideSwiper {
    height: 100%;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    box-shadow: var(--box-shadow);
}

.guideSwiper .swiper-wrapper {
    margin-top: 0 !important;
}

.guide-card h5 {
    font-size: 20px;
    color: var(--black-color);
    margin-bottom: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.guide-card h5 span {
    background-color: var(--black-color);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    line-height: 24px;
    display: inline-block;
    font-size: 12px;
    margin-right: 8px;
    font-weight: 600;
    color: var(--white-color);
}

.apply-info2 {
    padding: 16px;
    border: 1px solid var(--gray1-color);
    border-radius: 4px;
    font-size: var(--f-caption);
    padding-left: 50px;
    background: url(../images/icon/white/ic_info.png)no-repeat center left 20px /20px #555;
    text-align: left;
    color: var(--white-color);
}

.guideSwiper .swiper-button-next:after,
.guideSwiper .swiper-button-prev:after {
    display: none;
}

.guideSwiper .swiper-button-next {
    top: unset;
    bottom: 24px;
    font-size: var(--f-small);
    color: var(--primary-color);
    border-radius: 30px;
    width: auto;
    padding: 0 16px;
    padding-right: 32px;
    background: url(../images/icon/grey/ic_arright.png)no-repeat center right 10px /20px var(--white-color);
    cursor: pointer;
    font-weight: 600;
}

.guideSwiper .swiper-button-prev {
    top: unset;
    bottom: 24px;
    font-size: var(--f-small);
    color: var(--primary-color);
    border-radius: 30px;
    width: auto;
    padding: 0 16px;
    padding-left: 32px;
    background: url(../images/icon/grey/ic_arleft.png)no-repeat center left 10px /20px var(--white-color);
    cursor: pointer;
    font-weight: 600;
}

.guideSwiper .swiper-button-prev {
    left: 24px;
}

.guideSwiper .swiper-button-next {
    right: 24px;
}

.guide-card img {
    width: 100%;
    margin: 16px 0;
}

.modal-guide {
    display: block;
}

.modal-guide .modal-content {
    height: 678px;
    background-color: var(--background-color);
}

.modal-guide .close {
    background-color: transparent;
}

.modal-body.art-body {
    padding: 20px;
    /*padding-bottom: 0px;*/
}

.modal-body.art-body select {
    margin-bottom: 10px;
}

.inner-addmovie input {
    width: 100%;
    border-radius: 6px;
}

.upload-imgbox {
    justify-content: unset !important;
}

.upload-imgbox .upload-item {
    margin-top: 16px;
    width: 320px;
    height: 320px;
}

.apply-movieupload {
    margin: 0 !important;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.apply-movieupload img {
    border-radius: 6px;
}

.guide-card h3 {
    font-weight: 600;
    font-size: var(--f-normal);
    margin-top: 10px;
    color: var(--black-color);
    text-align: left;
    position: relative;
    padding-left: 10px;
}

.guide-card h3::after {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    border-radius: 100%;
    background-color: var(--primary-color);
    content: '';
}

.guide-card h3:nth-child(1) {
    margin-top: 0;
}

.guide-card h4 {
    font-weight: 400;
    font-size: var(--f-small);
    margin-top: 5px;
    text-align: left;
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--border-color);
}

.btn-black {
    border-radius: 30px;
    background-color: var(--black-color);
    color: var(--white-color);
    padding: 0 28px;
}

.sub-news-inner .good-imgbox {
    background: var(--white-color);
    border: 1px solid var(--gray1-color);
    border-radius: 30px;
    padding: 10px 20px;
}

.request-view .request-inforbox {
    padding-bottom: 30px;
}

.pf-badge {
    padding-left: 20px;
    background: url(../images/icon/ic_pfbadge.png)no-repeat center left /12px;
}

.funding-list.load-target {
    display: none;
}

.search-for {
    flex-wrap: wrap;
}

.search-for h3 {
    width: 50%;
    margin-bottom: 48px;
    padding-bottom: 48px;
    border-bottom: 1px solid var(--border-color);
}

.search-for h3 span {
    font-size: var(--f-normal);
    color: var(--gray2-color);
}

.search-for .class-search {
    width: 50%;
    min-width: auto;
    margin: 0;
    margin-bottom: 48px;
    padding-bottom: 48px;
    border-bottom: 1px solid var(--border-color);
    text-align: right;
}

.search-for .class-search input {
    width: 400px;
    box-shadow: none;
}

.search-for .infor-sort {
    width: 50%;
    margin-left: auto;
    justify-content: flex-end;
}

.search-for .search-total {
    width: 50%;
}

.board_wrap .search-for {
    margin-top: 0;
}

.board_wrap .search-for h3 {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom-width: 0;
}

.board_wrap .search-for .class-search {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom-width: 0;
}

.board_wrap .search-for .search-total {
    margin-top: 48px;
    padding-top: 48px;
    border-top: 1px solid var(--border-color);
    background: url(../images/icon/grey/ic_info.png)no-repeat bottom 1px left / 20px;
    width: 100%;
}

.board_wrap .board-paging li.paging-prev {
    background: url(../images/icon/black/ic_arleft.png)no-repeat center center / 24px;
}

.board_wrap .board-paging li.paging-next {
    background: url(../images/icon/black/ic_arright.png)no-repeat center center / 24px;
}

.board_wrap .w3-bar {
    padding-bottom: 50px;
}

.sub-content .sub-tit span {
    font-size: var(--f-normal);
    color: var(--gray2-color);
    font-style: italic;
}

.contact-txt {
    width: 100%;
    resize: none;
    border: 1px solid var(--gray1-color);
    border-radius: 4px;
    padding: 14px;
}

.contact {
    margin: 0 auto;
}

.contact .recruit-view {
    background: var(--background-color);
    padding: 36px;
    color: var(--black-color);
}

.contact .recruit-view .form-lbl,
.contact .recruit-view .form-box input,
.contact .recruit-view .form-box textarea,
.contact .recruit-view .form-box select,
.contact .apply-info {
    color: var(--black-color);
}

.contact .apply-info {
    background-color: #FFF;
}

.contact .apply-info a {
    color: var(--pink-color);
    text-decoration: underline;
}

.contact select {
    border-color: var(--gray1-color);
    width: 300px;
}

.contact input:hover,
.contact input:focus,
.contact input:focus-visible,
.contact select:hover,
.contact select:focus,
.contact select:focus-visible,
.contact textarea:hover,
.contact textarea:focus,
.contact textarea:focus-visible {
    outline: none;
    border-color: var(--primary-color);
    transition: var(--transition);
}

.contact .form-box:has(input:hover) label,
.contact .form-box:has(input:focus) label,
.contact .form-box:has(input:focus-visible) label,
.contact .form-box:has(select:hover) label,
.contact .form-box:has(select:focus) label,
.contact .form-box:has(select:focus-visible) label,
.contact .form-box:has(textarea:hover) label,
.contact .form-box:has(textarea:focus) label,
.contact .form-box:has(textarea:focus-visible) label {
    color: var(--primary-color);
}

.contact .btn-black {
    width: 300px;
}

.btn-refund {
    border-radius: 30px;
    color: var(--red-color);
    font-size: 12px;
    padding: 0 10px;
    height: auto;
    margin-left: 15px;
}

.btn-refund2 {
    border-radius: 30px;
    font-size: 12px;
    padding: 0 10px;
    height: auto;
    margin-left: 15px;
    color: var(--font-color);
    cursor: default;
}

.btn-refund2:hover {
    opacity: 1;
}

.return-citem {
    display: flex;
}

.coin-chargebox .coinmodal-list.return-citem p {
    margin-right: 0;
    margin-left: auto;
}

.guide-toggle {
    width: 50px;
    height: 50px;
    font-size: 0;
    color: transparent;
    background: url(../images/icon/white/ic_bulb.png) no-repeat center center / 28px var(--secondary-color);
    border-radius: 50px;
    transition: var(--transition);
    box-shadow: 0 5px 10px rgb(0 0 0 / 6%);
    position: fixed;
    right: 40px;
    bottom: 40px;
}

.error-info {
    padding: 40px;
    font-size: var(--f-normal);
    color: var(--black-color);
    text-align: center;
    padding-top: 80px;
    background: url(../images/icon/grey/ic_info.png) no-repeat top 40px center / 28px;

}

.error-info b {
    font-size: var(--f-normal);
    color: var(--red-color);
}

.error-info button {
    margin-top: 40px;
}

.edit-txt img {
    display: block;
    width: 100%;
}

.petition-allwrap:has(.gall-emp) {
    display: block;
}

.funding-box:has(.gall-emp) {
    display: block;
}

.coinuse-list .notice-pagination .board-paging li {
    padding: 0;
    width: 40px;
    height: 40px;
    text-align: center;
    align-items: center;
    justify-content: center;
}

.coinuse-list .notice-pagination .board-paging li a {
    width: 40px;
    height: 40px;
    padding: 11px 0;
    display: block;
}

.coinuse-list .notice-pagination .board-paging li a:hover {
    background-color: transparent;
}

.coinuse-list .notice-pagination .board-paging li:hover {
    opacity: .8;
}

.modalC .mypage-tabbox .product-card .price span {
    font-size: 20px;
    font-weight: 600;
}

.modalC .mypage-tabbox .product-card {
    width: calc(100% - 40px);
    margin: 20px;
}

.modalC .coin-completebtn {
    width: calc(100% - 40px);
    margin: 20px;
    border-radius: 30px;
    background-color: var(--black-color);
    color: var(--white-color);
    padding: 0 28px;
    height: 50px;
    line-height: 50px;
}

.modalC .coin-completebtn:hover,
.modalC .coin-completebtn:focus,
.modalC .coin-completebtn:focus-visible {
    width: calc(100% - 40px);
    margin: 20px;
    border-radius: 30px;
    background-color: var(--black-color);
    color: var(--white-color);
    padding: 0 28px;
    height: 50px;
    line-height: 50px;
    opacity: .8;
}

.artist-detail .w3-bar li a {
    width: 100%;
    height: calc(100% - 22px);
    color: inherit;
    display: block;
    margin: 0;
}


.sub-news-inner.sub-content .notice-listbtn {
    text-align: center;
}

.sub-news-inner.sub-content .notice-listbtn .btnType01,
.sub-news-inner.sub-content .notice-listbtn .btnType01:first-child {
    border: 1px solid var(--gray1-color);
    color: var(--font-color);
    padding: 0px;
    border-radius: 30px;
    font-size: var(--f-small);
    line-height: 54px;
    display: inline-block;
    min-width: 130px;
    height: 54px;
    text-align: center;
    transition: var(--transition);
    cursor: pointer;
    background: var(--white-color);
}

.sub-news-inner {
    max-width: 1040px;
    margin: 0 auto;
}

.touuchArea+.apply-info {
    margin-top: 20px;
}

#project input#searchInput {
    width: 100%;
    margin-bottom: 20px;
    margin-top: 0;
    border-radius: 6px;
    margin-top: 10px;
}

#self_mem_nickname,
#artist #searchInput {
    width: 100%;
    border-radius: 6px;
    margin-top: 0;
}

.apply-proul .myartist-item .artist-avatar {
    width: 100%;
    height: auto;
    border-radius: 0;
}

.apply-proul .myartist-item .artist-avatar img {
    position: unset;
}

.apply-proul .myartist-item .artist-tit {
    width: 100%;
    max-width: 200px;
    text-align: left;
    padding-left: 0;
    margin-bottom: 20px;
    padding-right: 0;
}

.apply-proul .myartist-item {
    width: calc(33.3% - 20px);
    margin-right: 20px;
}

.apply-proul .myartist-item:nth-child(3n) {
    margin-right: 0;
}

.apply-form .artist-touch {
    flex-wrap: wrap;
}

.apply-form .artist-touch .funding-list {
    width: calc(33.3% - 14px);
    margin-right: 20px;
}

.apply-form .artist-touch .funding-list:nth-child(3n) {
    margin-right: 0;
}

.apply-form .artist-touch .funding-list .f-imgbox {
    margin-right: 0;
    border-radius: 6px;
}

.apply-movul {
    display: flex;
    flex-wrap: wrap;
}

.apply-movul .funding-list {
    width: calc(33.3% - 14px);
    margin-right: 20px;
}


.apply-movul .funding-list:nth-child(3n) {
    margin-right: 0;
}

.sub-wrapper .apply-movul .funding-list .f-imgbox {
    margin-right: 0;
    border-radius: 6px;
}

.mobile-on {
    display: none !important;
}

.artist-detail .my-artist ul,
.artist-detail .my-artist,
.artist-detail .my-artist ul li:has(.gall-emp) {
    width: 100%;
}


.my-artist.my-project .f-textbox h4 {
    font-size: var(--f-normal);
    margin-bottom: 0;
}

.my-artist.my-project .funding-list {
    width: 200px;
    display: inline-block;
    margin-bottom: 0;
}

.my-artist.my-project ul {
    overflow: auto;
    white-space: nowrap;
    display: block;
}

.progress2 .progress-bar2 {
    height: 10px;
}

.notice-pagination .board-paging li.paging-prev,
.notice-pagination .board-paging li.paging-next {
    background-color: var(--white-color);
}

.project-mainbox .my-artist.my-project .f-textbox h4 {
    height: 52px;
}

.request-detailwr .list-mini h5 {
    padding-right: 100px;
}

.request-detailwr .list-mini {
    position: relative;
}

.request-detailwr .list-mini .list-modify {
    position: absolute;
    right: 20px;
    top: 20px;
}

/* footer */
.modalP .modal-content,
.modalPV .modal-content {
    width: 100%;
    height: 90%;
    max-height: 825px;
    max-width: 1080px;
    margin: 0;
}

.modalP .modal-content .modal-header p,
.modalPV .modal-content .modal-header p {
    font-weight: 600;
}

.modalP .modal-inner,
.modalP p,
.modalP li,
.modalPV p {
    color: var(--black-color);
}


.modalP b,
.modalP h3,
.modalPV b,
.modalPV h3 {
    color: var(--black-color);
    display: block;
    font-size: var(--f-normal);
    font-weight: 600;
}

.modalP h3,
.modalPV h3 {
    margin-bottom: 10px;
}

.modalP h2,
.modalPV h2 {
    color: var(--black-color);
    display: block;
    font-size: var(--f-middle);
    font-weight: 600;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px dashed var(--border-color);
}

.modalP h2 span,
.modalPV h2 span {
    background: url(../images/favicon/android-icon-48x48.png)no-repeat bottom left / 24px;
    padding-left: 26px;
    display: inline-block;
    color: var(--black-color);
    font-size: var(--f-normal);
    font-weight: 600;
    font-style: italic;
    display: block;
    opacity: .8;
    margin-bottom: 10px;
}

.modalP h2 b {
    color: var(--primary-color);
}

.dashed-hr {
    border: 1px dashed var(--border-color);
    border-top: none;
}

.term-ulist li {
    list-style: circle;
    list-style-position: inside;
}

.modalPV b {
    margin-top: 10px;
    display: block;
}

.main-date {
    background: url(../images/icon/white/ic_calendar.png)no-repeat center left /20px;
    color: var(--white-color);
}

.ullimItem,
.project-detail .myartist-item .artist-avatar {
    border: 4px solid var(--primary-color);
}

.SynopsisText.show-all-text {
    display: block;
}

.artist-detail .detail-notice .bottom-listbox>li {
    margin-bottom: 0;
}

.project-managewr .request-proallbox {
    width: calc(33.3% - 17.3px);
}

.mypage-tabbox .coinuse-list li p:nth-child(3),
.mypage-tabbox .coinuse-list li p:nth-child(2) {
    color: var(--black-color);
}


/* introduce */

.introduce-wp .search-for h3 {
    width: 100%;
    border-bottom: none;
}

/* funding follow */
.funding-wrapper .my-artist.my-project ul.touuchArea {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    overflow-x: auto;
}

.funding-wrapper .my-artist.my-project ul.touuchArea .funding-list {
    flex: 0 0 auto;
}


/* apply state badge */
.apply-form .artist-avatar {
    position: relative;
}

.badge-apply-wait,
.badge-apply-appr {
    position: absolute;
    right: 20px;
    top: 10px;
    padding: 3px 8px;
    font-size: 10px;
    border-radius: 4px;
    color: var(--white-color);
}

.badge-apply-wait {
    background-color: var(--blue-color);
}

.badge-apply-appr {
    background-color: var(--green-color);
}

.apply-form .btn.btn-appr {
    padding: 5px 15px;
    font-size: var(--f-caption);
    border-radius: 30px;
    width: 100%;
    border: 1px solid #ddd;
    background-color: #f5f6fa7a;
    height: auto;
    margin-top: 10px;
}

/* artist detail */
.artist-noti-feed .comment-aritsth1 {
    color: #FFF;
    font-size: var(--f-large);
    line-height: 1.6;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.artist-noti-feed .comment-aritsth1 a {
    padding: 0 20px;
    height: 48px;
    line-height: 48px;
    margin-left: 20px;
    border-radius: 30px;
}

.artist-noti-list {
    display: flex;
    gap: 0 30px;
    flex-wrap: no-wrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 30px;
    width: 100%;
}

.artist-noti-list::-webkit-scrollbar {
    height: 8px;
}

.artist-noti-list::-webkit-scrollbar-thumb {
    background-color: var(--secondary-color);
    border-radius: 10px;
    background-clip: padding-box;
    border: 2px solid transparent;
}

.artist-noti-list::-webkit-scrollbar-track {
    border-radius: 10px;
}

.artist-noti-item {
    flex: 0 0 auto;
    width: calc(100%/3 - 20px);
    min-width: 250px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 8px;
    position: relative;
    cursor: pointer;
    transition: var(--transition);
}

.artist-noti-item h4 {
    color: #fff;
    font-weight: 400;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.artist-noti-item:hover,
.artist-noti-item:focus,
.artist-noti-item:focus-visible {
    border: 1px solid var(--primary-color);
    box-shadow: 0 1px 3px 3px rgb(180 150 106 / 20%), 0px 1px 20px 0px rgb(180 150 106 / 10%);
}

.artist-detail .artist-noti-item h2.artmain-name {
    font-size: var(--f-normal);
    text-align: left;
    display: flex;
    gap: 0 8px;
    align-items: center;
    margin: 0;
    margin-bottom: 8px;
}

.artist-noti-item .paper-avatar {
    position: unset;
    margin: 0;
    width: 32px;
    height: 32px;
    border-width: 2px;
    display: inline-block;
}

.read-modal .modal-inner .btn {
    width: 48%;
}

.modal-inner-btn {
    text-align: center;
}

body:has(.sub-header) {
    overflow-x: hidden;
}

.artist-vibe {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 80px;
    margin-top: 150px;
}

.artist-vibe .paper-avatar {
    margin-top: 0;
}

.artist-vibe .artist-noti-feed .comment-aritsth1 {
    padding-top: 0;
    font-size: var(--f-middle);
}

.artist-detail .artist-vibe .gall-emp {
    padding: 50px 0;
    background-position-y: 0;
    text-align: left;
    background-position-x: left;
}

.artist-noti-feed {
    width: calc(100% - 220px);
}

.artist-vibe .artist-profilebox {
    max-width: 140px;
}

.artist-detail .artist-vibe .artist-profilebox h2.artmain-name {
    width: 100%;
    font-size: var(--f-middle);
    font-weight: 700;
}

.artist-vibe+.comment-wrlist .comment-aritsth1 {
    margin-top: 80px;
    padding-top: 80px;
}

.artist-vibe+.comment-wrlist .w3-bar.comment-pagination {
    padding-bottom: 80px;
}

.btn-community {
    width: 100%;
    border-radius: 30px;
    font-size: var(--f-normal);
    font-weight: 600;
    color: #fff;
    border: 1px solid var(--primary-color);
    max-width: 200px;
    height: 56px;
    line-height: 56px;
    text-align: center;
    margin: 0 auto;
    transition: var(--transition);
    display: block;
    animation: shine 3s Infinite Alternate;
    background-color: #000;
    padding: 0 30px;
}

.artist-detail .artist-follow .followbox {
    width: 100%;
    border-radius: 30px;
    font-size: var(--f-normal);
    font-weight: 600;
    max-width: 200px;
    height: 56px;
    line-height: 56px;
    text-align: center;
    margin: 0 auto;
    padding: 0 30px;
    border: 1px solid var(--primary-color);
}

.artist-follow {
    display: flex;
    gap: 20px;
    flex-direction: column;
}

.chips-wp {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: center;
    margin-top: 24px;
}

.chip {
    color: #fff;
    background-color: #222529;
    border: 1px solid var(--font-color);
    border-radius: 30px;
    padding: 4px 10px;
    text-transform: capitalize;
    transition: var(--transition);
    font-size: var(--f-small);
    word-break: break-all;
}

.chip:hover {
    background-color: var(--font-color);
    border-color: var(--border-color);
}

#badgeModal {
    display: none;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

#badgeModal.active {
    display: flex;
}

#badgeModal .modal-contents {
    display: inline-block !important;
    width: auto;
    height: auto;
    position: relative;
    padding: 30px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: #fff;
    min-width: 25vw;
    margin: 0;
}

#badgeModalInner .modal-contents {
    padding: 0 0 24px 0;
    border: none;
    border-radius: 0;
    min-width: 30vw;
    max-width: 600px;
    background-color: transparent;
}

#badgeModalInner .modal-contents h2 {
    font-size: var(--f-middle);
    line-height: 1.45;
    letter-spacing: .5px;
}

#badgeModalInner .modal-contents div {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    transition: var(--transition);
}

#badgeModalInner .modal-contents div:hover,
#badgeModalInner .modal-contents div:has(.active) {
    background-color: var(--background-color);
}

#badgeModalInner .modal-contents div p {
    font-size: var(--f-normal);
    font-weight: 600;
}

#badgeModalInner .modal-contents div p span {
    margin-right: 8px;
}

.badge-ai-list {
    margin: 24px 0;
}

#badgeModalInner .modal-contents div ul {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

#badgeModalInner .modal-contents div .s-badge {
    color: var(--font-color);
    border: 1px solid var(--border-color);
    background-color: var(--background-color);
    border-radius: 30px;
    padding: 4px 10px;
    z-index: 999;
    position: relative;
    text-transform: capitalize;
    display: flex;
    align-items: center;
    gap: 0 8px;
    transition: var(--transition);
    cursor: pointer;
}

#badgeModalInner .modal-contents div:hover .s-badge,
#badgeModalInner .modal-contents div:has(.active) .s-badge {
    background-color: #fff;
}

#badgeModalInner .modal-contents div ul .s-badge.active {
    color: #fff;
    border-color: var(--primary-color);
    background-color: var(--primary-color);
}

#badgeModalInner .modal-contents div:hover .s-badge.active,
#badgeModalInner .modal-contents div:has(.active) .s-badge.active {
    background-color: var(--primary-color);
}

#badgeModalInner .modal-contents div ul .s-badge:hover {
    transform: scale(.95);
    box-shadow: var(--box-shadow);
}

#badgeModalInner .modal-contents div ul .s-badge .close {
    position: unset;
    width: 14px;
    height: 14px;
    background: url(/assets/images/icon/white/ic_x.png)no-repeat center center / contain;
    filter: brightness(0);
    transition: var(--transition);
}

#badgeModalInner .modal-contents div ul .s-badge.active .close {
    filter: inherit;
}

.inp-badgewrite {
    width: 100%;
    border-radius: 8px;
    outline: none;
    transition: var(--transition);
}

.inp-badgewrite::placeholder {
    color: var(--gray1-color);
}

.inp-badgewrite:focus,
.inp-badgewrite:focus-visible,
.inp-badgewrite:hover {
    border-color: var(--primary-color);
}

#badgeModalInner .modal-contents div:has(.inp-badgewrite:focus),
#badgeModalInner .modal-contents div:has(.inp-badgewrite:hover),
#badgeModalInner .modal-contents div:has(.inp-badgewrite:focus-visible) {
    background-color: var(--background-color);
}

#badgeModal .modal-footer {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding-bottom: 0;
}

.btn-apply {
    font-size: var(--f-normal);
    color: #fff;
    background-color: var(--font-color);
    width: auto;
    padding: 12px 40px;
    transition: var(--transition);
    height: 50px;
}

.SynopsisText .chips-wp {
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-top: 8px;
    cursor: default;
}

.SynopsisText .chips-wp .chip {
    font-size: var(--f-caption);
    white-space: nowrap;
    cursor: default;
    font-weight: 400;
}

.inp-create {
    position: relative !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
}

.inp-create input {
    padding-right: 90px !important;
}

.inp-create .btn-create {
    position: absolute;
    right: 4px;
    top: 4px;
    width: 78px;
    height: 42px;
    background-color: var(--orange-color);
    color: #fff;
    border-radius: 4px;
}

.touuchArea:has(.gall-list-squ){
    gap: 26px 0;
}