/* swiper */
body:has(.funding-mainslide .swiper) .wrapper{
    max-width: initial;
    padding-top: 0px;
}

.funding-mainslide .swiper {
    width: 100%;
    height: 50vh;
}

.funding-mainslide .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    cursor: grabbing;
}

.funding-mainslide .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.funding-mainslide .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: "";
}

.funding-mainslide .swiper-pagination{
    bottom: 30px !important;
}

.funding-mainslide .swiper-pagination-bullet{
    background-color: #fff;
}

.funding-mainslide .slider-textbox h1,.funding-mainslide .slider-textbox p{
    color: #fff;
}

.funding-mainslide .slider-textbox h1{
    font-size: var(--f-large);
    margin-bottom: 10px;
}

.funding-mainslide .slider-textbox p{
    font-size: var(--f-small);
}

/* 펀딩메인페이지 */
.funding-wrapper{
    margin: auto;
    max-width: 1300px;
}

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

.funding-wrapper .funding-listinfor{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    margin-top: 80px;
    margin-bottom: 30px;
    box-sizing: border-box;
}

.funding-wrapper .funding-listinfor .infor-classfi{
    display: flex;
    box-sizing: border-box;
}

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

.funding-listinfor .infor-sort li:hover, .funding-listinfor .infor-sort li:focus, 
.funding-listinfor .infor-sort li:focus-visible, .funding-listinfor .infor-sort li.active{
    font-weight: initial;
}

.funding-wrapper .funding-listinfor .infor-classfi li:last-child{
    padding-right:0;
    margin-right: 0;
}

.funding-wrapper .funding-listinfor .infor-classfi li:last-child::after{
    display: none;
}

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

.funding-box{
    grid-template-columns: repeat(2, calc(50% - 25px));
    gap: 50px;
    display: grid;
    width: 100%;
    margin-bottom: 100px;
}

.funding-list{
    display: flex;
    margin: 15px 0;
    align-items: stretch;
    height: auto;
    width: 100%;
}

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

.f-textbox li {
    margin-bottom: 14px;
    font-size: var(--f-normal);
    display: flex;
    align-items: flex-start;
}

.f-textbox li .li-tit {
    width: 100px;
    margin-right: 20px;
    display: inline-block;
    position: relative;
    font-weight: normal;
    color: #6b7280;
}

.f-textbox .f-subtext .last-price span{
    font-weight: 500;
    color: var(--black-color);
}

.f-textbox li span.ml-4{
    width: 160px;
    display: inline-block;
}

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

.funding-box .f-subtext .list-subtxt{
    font-size: var(--f-small);
    margin-top: 20px;
    margin-bottom: 40px;
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: keep-all;
    line-height: 1.65;
}

.progress-wrapper{
    position: absolute;
    bottom: 0;
    width: 100%;
    width: 100%;
    left: 0;
    /* padding: 0 14px; */
}

.funding-list .f-imgbox{
    width: calc(100% - 55%);
    background-color: #eee;
    position: relative;
    margin-right: 20px;
    cursor: pointer;
    padding-top: calc(100% - 37%);
    overflow: hidden;
}

.funding-list .f-imgbox img{
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    transition: var(--transition);

}

.funding-list .f-imgbox img:hover{
    transform: scale(105%); 
}

.funding-badge p{
    position: absolute;
    top: 15px;
    left: 15px;
    height: 30px;
    color: #fff;
    font-size: var(--f-caption);
    padding: 6px 12px;
    background-color: #00000060;
}

.funding-list  .f-textbox .f-header{
    display: flex;
    align-items: center;
}

.funding-list  .f-textbox h4{
    font-size: 18px;
    font-weight: 700;
    line-height: 1.6;
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: keep-all;
    color: var(--black-color);
    cursor: pointer;
}

.funding-list  .f-textbox h3{
    margin-right: 7px;
    color: var(--primary-color);
    font-weight: 700;
    font-size: 20px;
}

.funding-list  .f-textbox .f-header p{
    color: #8c9090;
}

p.fdate{
    margin-left: auto;
    font-size: 10px;
    padding: 5px 10px;
    background-color: rgba(180, 150, 106, .1);
    border-radius: 50px;
}

/* progress bar */
.progress2 {
    border-radius: 30px;
    background: #ddd; 
    margin-top: 15px;
}
  
.progress-bar2 {
    height: 5px;
    border-radius: 30px;
    background-color: var(--secondary-color);
    transition: 0.4s linear;  
    transition-property: width, background-color;    
}
  
.progress-moved .progress-bar2 {
    /* width: 60%;  */
    background-color: var(--secondary-color);  
    transition: var(--transition);
}

.progress-moved{
    overflow: hidden;
}

/* 펀딩 디테일페이지 */
/* HTML에 박힌 CSS 옮김 */
.fundingModal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
}

.wantDetailModal-content {
    background-color: #fff;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 1200px;
    position: relative;
}

.fundingModal-close {
    color: #aaa;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    position: absolute;
    right: 20px;
    top:14px;
}

.fundingModal-close:hover,
.fundingModal-close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* 펀딩 디테일페이지 */
ul.breadcrumb {
    padding: 15px 0;
    list-style: none;
    margin-bottom: 50px;
    border-bottom: 1px dashed var(--gray1-color);
}

ul.breadcrumb li {
  display: inline;
  font-size: var(--f-small);
}

ul.breadcrumb li+li:before {
  padding: 8px;
  color: black;
  content: url(../images/left.png);
  opacity: .5;
}

ul.breadcrumb li a {
  color: var(--font-color);
  text-decoration: none;
  font-size: var(--f-small);
}

ul.breadcrumb li a:hover {
  color: var(--primary-color);
  text-decoration: none;
  font-size: var(--f-small);
}

ul.breadcrumb li:last-child{
    font-weight: 700;
}

.fundingdetail-wrbox{
    width: 1040px;
    margin: auto;
    margin-bottom: 100px;

}

.fundingdetail-wrbox > h1{
    font-size: var(--f-large);
    margin-bottom: 50px;
    display: flex;
    align-items: center;
}

.fundingdetail-wrbox .swiper {
    width: 100%;
    height: 100%;
}

.fundingdetail-wrbox .swiper-slide {
    cursor: grabbing;
    background: #ddd;
    width: 100%;
    padding-top: 140%;
    position: relative;
    border: 1px solid rgb(239, 239, 239);
    box-sizing: border-box;
}

.fundingdetail-wrbox .swiper-slide img {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.fundingdetail-wrbox .swiper-slide:after{
    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;
}

.funding-slidebox .swiper-pagination{
    bottom: 30px !important;
}

.fundingdetail-wrbox .swiper-pagination-bullet{
    background-color: #fff;
}

.fundingdetail-wrbox{
    display: flex;
    flex-direction: column;
}

.fundingdetail-wrbox > h1{
    width: 100%;
    color: #141515;
}

.wrbox-slidebox{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

body:has(.stickybar-wrbox) .wrapper{
    padding-top: 0px;
    margin-top: 40px;
}

.funding-slidebox{
    width: 40%;
}

.slide-detailtext{
    width: 54%;
    height: 100%;
    position: relative;
}

.detailtext-top div{
    margin-bottom: 26px;
}

.detailtext-top h3{
    font-size: var(--f-small);
    font-weight: 500;
}

.detailtext-top h1{
    font-size: var(--f-large);
    word-break: keep-all;
}

.detailtext-top .detail-title{
    color: var(--black-color);
    min-height: 70px;
    max-height: auto;
    line-height: 1.3;
    font-size: var(--f-large);
    margin-bottom: 50px;
}

.detailtext-top  .primaryprice{
    color: var(--primary-color);
}

.detailtext-top .fdate{
    font-size: var(--f-caption);
    color: var(--primary-color);
    padding: 6px 12px;
    background-color: rgba(180, 150, 106, .1);
    border-radius: 50px;
    margin-left: 10px;
}

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

.detailtext-top h1 span{
    font-size: var(--f-small);
    font-weight: 500;
}

.detailtext-top .long-fundingtext{
    font-size: var(--f-small);
}

.detailtext-top .long-fundingtext span{
    font-size: var(--f-small);
    color: var(--primary-color);
}

.detailtext-bottom li{
    margin-bottom: 15px;
}

.detailtext-bottom li p.fdate{
    margin-left: 15px;
}

.detailtext-bottom li:nth-child(2){
    display: flex;
    align-items: center;
}

.detailtext-bottom span.li-tit{
    font-size: var(--f-small);
    font-weight: 500;
    width: 100px;
    margin-right: 20px;
    display: inline-block;
    position: relative;
}

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

.detailtext-bottom{
    border-top: 1px solid #f4f4f4;
    padding-top: 40px;
    margin-top: 40px;
}

.wishbutton button{
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    cursor: pointer;
    padding: 0;
    border-radius: 4px;
    position: relative;
}

.wishbutton button p{
    font-size: 10px;
    position: absolute;
    bottom: 5px;
    text-align: center;
}

.wishbutton button .thum-heart{
    border-radius: 4px;
    width: 100%;
    height: 100%;
    background: url(../images/heart-white.png) no-repeat center center /20px #ddd!important;
}

.wishbutton button .thum-heart.active{
    background: url(../images/heart-red.png) no-repeat center center /20px #fff !important;
}

.fundingdetail-button .thum-heart{
    bottom: 0;
    left: 0;
    top: initial;
    width: 40px;
    height: 45px;
    box-shadow: none;
}

.fundingdetail-button{
    display: flex;
    justify-content: space-between;
    margin-top: 35px;
}

.supportbtn{
    width: 100%;
    border-radius: 4px;
    font-size: var(--f-normal);
    font-weight: 600;
    color: #fff;
    background-color: var(--secondary-color);
    margin-left: 20px;
}

.supportbtn:hover,.supportbtn:focus{
    background-color: #a18357;
    transition: var(--transition);
}

/* tab */
.fundingdetail-wrbox .tab-wrapper {
    overflow: hidden;
    border-top: 1px solid #f4f4f4;
    border-bottom: 1px solid var(--gray2-color);
    margin-top: 60px;
    background-color: #Fff;
    z-index: 999;
    position: sticky;
    left: 0;
    top: 0;
    width: 100vw;
    transform: translateX(-23%);
    box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 4px;
}

.fundingdetail-wrbox .tab button {
    background-color: #fff;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 16px 28px;
    font-size: var(--f-normal);
    font-weight: bold;
    color: #00000066;
    display: inline-block;
}

.fundingdetail-wrbox .tab-wrapper .tab{
    width: 1040px;
    margin: auto;
}

.fundingdetail-wrbox .tab button:hover {
    color: #141515;
}
  
.fundingdetail-wrbox .tab button.active {
    color: #2e343d;
    border-bottom: 2px solid #2e343d;
}

.fundingdetail-wrbox .tabcontent {
    display: none;
    padding: 50px 0;
    width: 100%;
    padding-bottom: 0px;
}

body:has(.stickybar-wrbox) .header-wp{
    position: relative;
}

/* 스티키 박스 */
.stickybox{
    width: 100%;
    border: 1px solid var(--gray1-color);
    border-radius: 4px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 0px, rgba(0, 0, 0, 0.04) 0px 2px 4px;
    padding: 20px;
    background-color: #fff;
    margin-bottom: 15px;
}

.stickybox:hover,.stickybox:focus{
    border: 1px solid var(--secondary-color);
    background-color: rgb(250 245 237);
    cursor: pointer;
    transition: var(--transition);
}

.stickybox:hover .st-top p.leave{
    background-color: rgb(255, 87, 87);
    color: #fff;
    transition: var(--transition);
}

.stickybox .st-top{
    display: flex;
    margin-bottom: 10px;
    font-weight: 600;
    align-items: center;
}

.stickybox .st-top p img{
    margin-right: 5px;
}

.stickybox .st-top p.leave{
    margin-left: auto;
    font-size: 10px;
    line-height: 16px;
    letter-spacing: -0.005em;
    color: rgb(255, 87, 87);
    background-color: rgb(255, 238, 238);
    border-radius: 2px;
    border: 1px solid rgb(255, 188, 188);
    padding: 3px 6px;
}

.stickybox h1{
    font-size: 20px;
    font-weight: 700;
    color: var(--black-color);
}

.stickybox p.sub{
    font-size: var(--f-caption);
}

.tabinner-sticky{
    width: 1040px;
    display: flex;
    flex-wrap: nowrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
    gap: 50px;
}

.tab-subbox{
    width: 100%;
}

.tab-subbox h3{
    font-size: 20px;
    color: #141515;
    margin-bottom: 20px;
}

.discount-infor{
    border-top: 1px dashed var(--gray1-color);
    padding-top: 40px;
}

.tab-subbox img{
    width: 100%;
}

.stickybar-wrbox{
    display: block;
    /* flex: 1 1 350px; */
    max-width: 370px;
    padding-top: 50px;
    order: 2;
    width: 100%;
    height: 100%;
    margin: 0px;
    z-index: 1;
    position: sticky;
    top: 100px;
    border: 1px solid var(--border-color);
    padding: 15px;
    margin-top: 50px;
    border-radius: 4px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 0px, rgba(0, 0, 0, 0.04) 0px 0px 15px;
    background-color: #Fff;
}

.stickybar-wrbox h4{
    margin-bottom: 15px;
    font-size: var(--f-small);
    color: var(--black-color);
}

.fixedbox{
    overflow: auto;
    height: 40vh;
    margin-bottom: 40px;
}

.sticky-rightbox{
    display: none;
}

.sticky-rightbox p:first-child{
    font-size: var(--f-small);
    font-weight: 600;
    border-top: 1px dashed var(--gray1-color);
    padding-top: 20px;
    margin-top: 20px;
}

.sticky-rightbox p.projectp{
    font-size: var(--f-caption);
}

.choice-thisbox .minus, .choice-thisbox .plus{
    width:36px;
    height:36px;
    background:#fff;
    border-radius:4px;
    display: flex;
    border:1px solid #ddd;
    vertical-align: middle;
    text-align: center;
    align-items: center;
    justify-content: center;
    font-size: var(--f-normal);
    cursor: pointer;
}

.choice-thisbox .number{
    display: flex;
    justify-content: center;
}

.choice-thisbox input{
    height: 36px;
    width: 30%;
    text-align: center;
    font-size: var(--f-normal);
    border: 1px solid #ddd;
    border-radius:4px;
    display: inline-block;
    vertical-align: middle;
    margin: 0 5px;
    font-weight: 500;
}

.sticky-rightbox > p span{
    color: #999;
    font-weight: 400;
    font-size: var(--f-caption);
}

.project-price{
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 15px 0;
}

.project-price li{
    border: 1px solid #f2f2f2;
    padding: 6px;
    font-size: var(--f-small);
    background-color: #fff;
}

.project-price li:hover,.project-price li:focus{
    border: 1px solid var(--secondary-color);
}

.sticky-rightbox button{
    width: 100%;
    background-color: #575e68;
    color: #fff;
    font-size: var(--f-normal);
    font-weight: 700;
    height: 46px;
    border-radius: 4px;
    margin-top: 15px;
}

.fundingdetail-button.bottom .supportbtn{
    margin-left: 15px;
}

.fundingdetail-button.bottom{
    margin-top: 15px;
}

.fixedbox::-webkit-scrollbar {
    width: 10px;
}

.fixedbox::-webkit-scrollbar-thumb {
    background-color: #d9d9d9;
}

.fixedbox::-webkit-scrollbar-track {
    background-color: #f5f6fa;
}

/* 댓글 */
.commentbox{
    width: 100%;
    height: auto;
    border: 1px solid var(--gray1-color);
    padding: 24px;
    border-radius: 8px;
    box-sizing: border-box;
    margin-bottom: 15px;
    position: relative;
}
.tab-subbox h3 span{
    font-size: 20px;
    color: var(--secondary-color);
}

.comment-header h3{
    margin-bottom: 0px;
}

.comment-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
}

.comment-header button{
    display: inline-block;
    padding: 8px 14px;
    color: #fff;
    text-align: center;
    font-size: var(--f-small);
    font-weight: bold;
    background-color: #575e68;
    border-radius: 4px;
    box-sizing: border-box; 
}

.commentid{
    display: flex;
    margin-bottom: 15px;
}

.commentid li{
    margin-right: 15px;
    padding-right: 15px;
    position: relative;
    font-size: var(--f-caption);
}

.commentid .comment-last{
    margin-left: auto;
    display: flex;
}

.commentid .comment-last p{
    font-size: var(--f-caption);
    padding-left: 7px;
    cursor: pointer;
    cursor: pointer;
    transition: var(--transition);
    padding: 4px 12px;
    border-radius: 30px;
    border: 1px solid #ddd;
    font-size: 10px;
    background-color: #fff;
}

.commentid .comment-last p:nth-child(1):hover{
    color: var(--primary-color);
}

.commentid .comment-last p:nth-child(2):hover{
    color: var(--red-color);
}

.commentid li:first-child{
    color: var(--black-color);
    font-weight: 500;
}

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

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

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

.li-linenone::after{
    display: none;
}

.comment-write{
    position: relative;
    left: 0;
    display: none;
}

.comment-write input{
   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;
   padding-right: 90px;
}

.comment-write input::placeholder{
    font-size: var(--f-small);
}

.comment-write button{
    position: absolute;
    right: 5px;
    top: 5px;
    border: none;
    width: 46px;
    height: 46px;
    border-radius: 50px;
    color: #fff;
    background-color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.comment-write button img{
    width: initial;
}

.content_wrap {
    clear:both; 
    display:block; 
    overflow:hidden; 
    font-size: var(--f-small); 
    position: relative;

}

.btn_more {            
    display:block;
    text-align:right; 
    font-size: var(--f-caption); 
    position: absolute;
    right: 0;
    bottom: 0;
    color: var(--black-color);
    background-color: #f5f6fa;
    width: auto;
    padding: 4px 12px;
    border-radius: 30px;
    color: var(--black-color);
}

.SynopsisText {
    width: 88%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* 팀소개 */
.team-wr{
    width: 100%;
    width: 100%;
    text-align: center;
    margin: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.team-wr li{
    width: calc(100%/5);
}

.team-wr h3{
    font-size: var(--f-normal);
    margin-top: 10px;
}

.team-imgbox{
    width: 100px;
    position: relative;
    overflow: hidden;
    height: 100px;
    border-radius: 50px;
}

.team-wr .team-imgbox{
    margin: 0 auto;
}

.team-imgbox img:first-child{
    display: block;
    width: 100px;
    margin: auto;
    background-color: #f0f0f0;
    object-fit: fill;
}

.team-imgbox img:nth-child(2){
    position: absolute;
    bottom: 0;
    right: 15px;
    display: block;
    width: 30px;
    height: 30px;
    padding: 7px;
    border-radius: 50%;
    background-color: #ddd;
    box-shadow: 0 0.1rem 0.6rem rgba(0, 0, 0, 0.14);
    cursor: pointer;
}

.thum-heart{
    position: absolute;
    top: 15px;
    right: 15px;
    display: block;
    width: 30px;
    height: 30px;
    padding: 7px;
    border-radius: 50%;
    box-shadow: 0 0.1rem 0.6rem rgba(0, 0, 0, 0.14);
    cursor: pointer;
    background: url(../images/heart-white.png) no-repeat center center /16px #ddd !important;
}

.thum-heart.active{
    background: url(../images/heart-red.png) no-repeat center center /16px #fff !important;
}

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

/* 청원페이지 */
.request-wrapbox{
    /* margin-bottom: 100px; */
}

.request-wrapbox .funding-listinfor{
    margin-bottom: 45px;
}

.petition-wrbox .peti-txtwr > h1{
    font-size: 18px;
    margin-bottom: 15px;
    color: var(--black-color);
    font-weight: 600;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    width: 100%;
    cursor: pointer;
    height: 55px;
}

.petition-wrbox .progress2{
    display: none;
}

.petition-wrbox::after {
    position: absolute;
    bottom: -20px;
    right: -20px;
    content: '';
    width: 40px;
    height: 40px;
    border-bottom: 0;
    border-top: 1px solid var(--gray1-color);
    border-right: 0;
    border-left: 0;
    transform: rotate(-45deg);
    background: #FFF;
}

.petition-allwrap{
    grid-template-columns: repeat(4, calc(25% - 23px));
    gap: 30px;
    display: grid;
    width: 100%;
}

.petition-wrbox{
    width: 100%;
    border: 1px solid var(--gray1-color);
    padding: 30px;
    background-color: #fff;
    position: relative;
    cursor: pointer;
    border-top: 2px solid var(--black-color);
}

.petition-wrbox .progress-moved .progress-bar2{
    background: rgb(92,96,96);
    background: linear-gradient(90deg, rgb(78 83 83) 42%, rgba(20,21,21,1) 100%);
    height: 7px;
}

.request-flag::before{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 0;
    border-bottom: 4px solid #fff;
    border-top: 15px solid transparent;
    border-left: 40px solid #fff;
    border-right: 10px solid transparent;
}

.request-flag{
    text-align: center;
    position: absolute;
    top: -35px;
    right: 0;
    height: 70px;
    width: 50px;
    background-color: var(--black-color);
}

.request-flag a{
    color: #fff;
    font-size: var(--f-small);
    position: absolute;
    top: 15px;
    left: 0;
    transform: translateX(50%);
}

.petition-wrbox.zero{
    opacity: 0.4;
}

.petition-wrbox.zero:hover{
    border: 1px solid var(--gray1-color);
}

.petition-wrbox .peti-box{
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.petition-wrbox .peti-txtwr{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    height: auto;
    width: 100%;
}

.petition-wrbox .f-textbox li{
    margin-bottom: 0px;
}

.petition-wrbox .f-textbox li span.ml-4{
    width: 100%;
}

.petition-wrbox .f-textbox{
    padding: 0px;
    width: 100%;
}

.request-wrapbox .progress-wrapper{
    width: 100%;
    position: initial;
}

.request-wrapbox .f-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px dashed var(--gray1-color);
    padding-top: 30px;
    margin-top: 30px;
}

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

.good-imgbox img{
    width: 22px;
    height: 22px;
    margin-right: 14px;
}

.good-imgbox h1{
    font-size: 18px;
    color: var(--black-color);
}

.request-wrapbox .f-header h3{
    font-size: 20px;
    color: var(--black-color);
    font-weight: 700;
}


/* 청원 게시판 */
.request-detailwr {
    margin: auto;
    max-width: 1300px;
    margin-bottom: 100px;
}

body:has(.request-detailwr) .wrapper{
    min-height: initial;
}

.request-inforbox{
    border: 1px solid var(--gray1-color);
    padding: 40px;
    background-color: #fcfcfc;
    position: relative;
    margin-bottom: 30px;
    border-top: 2px solid var(--black-color);
}

.request-inforbox::after {
    position: absolute;
    bottom: -20px;
    right: -20px;
    content: '';
    width: 40px;
    height: 40px;
    border-bottom: 0;
    border-top: 1px solid var(--gray1-color);
    border-right: 0;
    border-left: 0;
    transform: rotate(-45deg);
    background: #FFF;
}

.request-detailwr .request-view .tit-area {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 30px;
}

.request-detailwr .request-view .tit-area2{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.request-detailwr .classic-badge{
    padding: 6px 16px;
    margin-right: 15px;
    background-color: #ebebeb;
    border-radius: 30px;
    font-size: var(--f-caption);
}

.request-detailwr .progress-wrapper{
    position: initial;
}

.request-detailwr .progress-moved .progress-bar2{
    background: linear-gradient(90deg, rgb(78 83 83) 42%, rgba(20,21,21,1) 100%);
    height: 7px;
}

.request-detailwr .progress-wrapper .f-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 15px;
}

.request-detailwr .progress-wrapper .f-header h3{
    font-size: 20px;
}

.request-detailwr .request-view .tit-area>.tit {
    font-size: 22px;
    flex: 1;
    color: var(--black-color);
    font-weight: 700;
    display: flex;
    align-items: center;
}

.request-detailwr .request-view .tit-area>.id {
    font-size: var(--f-small);
    margin-left: 50px;
}

.request-detailwr .request-view .tit-area>.id span{
    font-weight: 500;
}

.request-detailwr .request-view .tit-area .good{
    margin-left: 20px;
}

.request-detailwr .request-view .tit-area .good span{
    font-weight: 500;
}

.request-detailwr .request-view .edit-area {
    padding: 50px;
}

.request-detailwr .request-view .edit-area .img img {
    width: auto;
    max-width: 100%;
    margin: 15px auto;
}

.request-view .edit-area .img+.edit-txt {
    margin-top: 60px;
}

.request-detailwr .edit-txt p {
    font-size: var(--f-normal);
    line-height: 1.8;
    word-break: keep-all;
    color: var(--black-color);
    padding: 0 40px;
}

.request-detailwr .btnWrap {
    position: relative;
}

.request-detailwr .outlink-news {
    margin-top: 80px;
    text-align: center;
}

.request-detailwr .btnWrap.outlink-list .btnType01 {
    border: 1px solid var(--gray1-color);
    color: var(--font-color);
    padding: 0px;
    margin-right: 30px;
    border-radius: 30px;
}

.request-detailwr .btnWrap.outlink-list:last-child .btnType01{
    margin-right: 0px;
}

.bottom-listbox.comment .list-mini .list-modify li{
    color: var(--font-color) !important;
}

.request-detailwr .btnWrap.outlink-list:nth-child(1) .btnType01:hover,.request-detailwr .btnWrap.outlink-list:nth-child(1) .btnType01:focus{
    background: #b18d6217;
}

.request-detailwr .btnWrap.outlink-list:nth-child(2) .btnType01:hover,.request-detailwr .btnWrap.outlink-list:nth-child(2) .btnType01:focus{
    background: #fcfcfc;
}

.request-detailwr .btnType01 {
    font-size: var(--f-small);
    line-height: 54px;
    display: inline-block;
    min-width: 130px;
    height: 54px;
    padding: 0 10px;
    text-align: center;
    border: 1px solid var(--main-color);
    background: #fff;
    -webkit-transition: all ease .2s;
    -moz-transition: all ease .2s;
    -ms-transition: all ease .2s;
    -o-transition: all ease .2s;
    transition: all ease .2s;
    cursor: pointer;
}

.request-button{
    display: flex;
    justify-content: flex-end;
    justify-content: center;
    margin-top: 100px;
}

.request-button img{
    width: 16px;
    height: 16px;
    margin-right: 8px;
}

.request-button .outlink-list:nth-child(1) .btnType01{
    border: 1px solid var(--secondary-color);
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

table.request-table{
    width: 100%;
    border-collapse : collapse;
    margin-bottom: 30px;
}

table.request-table .background{
    background-color: #fcfcfc;
}

table.request-table .bold{
    font-weight: 500;
}

.request-table th,.request-table td{
    width: 100px;
    height: 50px;
    text-align: center;
    border: 1px solid var(--gray1-color);
    vertical-align: top;
    vertical-align: bottom; 
    vertical-align: middle; 
}

.request-table .progress-wrapper{
    position: initial;
    margin: auto;
    padding: 20px 30px;
}

.request-table .progress-wrapper .f-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.request-table .progress-wrapper .good-imgbox img {
    width: 20px;
    height: 20px;
    margin-right:10px;
}

.request-table .progress-moved .progress-bar2{
    background-color: var(--black-color);
}

.request-table .progress-wrapper .good-imgbox h1{
    font-size: 18px;
    color: var(--font-color);
}

/* 공지사항, 댓글, 리스트 */
.bottom-listwr.list{
    margin-bottom: 100px;
}

.bottom-listwr.list .list-mini h4{
    margin-top: 0px;
}

.bottom-listwr.list li.list-mini:first-child{
    border-top: 1px solid var(--gray1-color);
}

.bottom-listwr.list li.list-mini{
    padding: 20px;
}

.bottom-listwr{
    width: 1300px;
    margin: auto;
}

.bottom-listwr .comment-write{  
    display: block;
}

.bottom-listwr .comment-write button{
    border: none;
    width: 46px;
    height: 46px;
    border-radius: 50px;
    color: #fff;
    background-color: var(--black-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.bottom-listwr .comment-write button:hover,.bottom-listwr .comment-write button:focus{
    background-color: var(--secondary-color);
    transition: var(--transition);
}

.bottom-listwr .comment-write input{
    padding-right: 100px;
    margin-bottom: 0px;
    box-shadow: none;
    border-radius: 30px;
    border: 1px solid var(--gray1-color);
    margin-bottom: 5px;
}

.bottom-listwr > h1{
    color: var(--black-color);
    font-size: 20px;
    margin-bottom: 30px;
}

.bottom-listbox{
    width: 100%;
}

.bottom-listbox > li{
    border-bottom: 1px solid var(--gray1-color);
    padding: 20px;
}

.bottom-listbox .list-mini{
    display: flex;
    justify-content: space-between;
}

.bottom-listbox .list-mini .list-modify{
    cursor: pointer;
}

.bottom-listbox .list-mini h5{
    margin-right: 30px;
    font-weight: 400;
    font-size: 12px;
}

.bottom-listbox .list-mini h4{
    margin-right: auto;
    color: var(--black-color);
    font-weight: 500;
    margin-top: 10px;
}

.bottom-listbox .list-mini .bottom-row{
    display: flex;
    flex-direction: column;
}

.bottom-listbox  .list-modify{
    display: flex;
}

.bottom-listbox  .list-modify li{
    margin-left: 7px;
    font-size: 12px;
}

.bottom-listbox.comment .list-modify li:hover,.bottom-listbox .list-modify li:focus{
    color: var(--primary-color) !important;
}

.bottom-listbox.comment .list-modify li:last-child:hover,.bottom-listbox .list-modify li:last-child:focus{
    color: var(--red-color) !important;
}

.bottom-listbox .list-mini.reply{
    padding-left: 45px;
    position: relative;
}

.bottom-listbox .list-mini.reply:before{
    content: "";
    width: 20px;
    height: 1px;
    border-bottom: 1px dashed var(--font-color);
    position: absolute;
    left: 0;
    top: 50%;
    margin-left: 10px;
}

.bottom-listbox .list-mini.reply:after{
    content: "";
    width: 1px;
    height: 15px;
    border-left: 1px dashed var(--font-color);
    position: absolute;
    left: 0;
    top: 35%;
    margin-left: 10px;
}

/* 페이지네이션 */
.w3-bar{
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 50px;
    margin-bottom: 100px;
}

.w3-bar a:hover{
    background-color: #fcfcfc;
}

.w3-button.active{
    color: var(--secondary-color);
    border: 1px solid var(--secondary-color);
}

/* 메인 홈화면 */
.swiper-scrollbar.swiper-scrollbar-horizontal{
    background: var(--swiper-scrollbar-bg-color,rgba(255, 255, 255, 0.3));
    display: block;
    position: absolute;
    bottom: 7%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1300px;
    text-align: left;
}

.swiper-scrollbar-drag{
    background-color: #ffffff8f
}

.classic-mainwr{
    width: 1300px;
    margin: auto;
    margin-bottom: 100px;
}


.classic-mainwr .my-artist .artist-avatar{
    width: 120px;
    height: 120px;
}

.classic-mainwr .my-artist .artist-avatar img{
    border-radius: initial;
}

.classic-mainwr .my-artist .artist-avatar:hover img{
    transition: var(--transition);
    transform: scale(105%);
}

.classic-mainwr .myartist-item{
    margin-right: 40px;
    cursor: pointer;
}

.classic-mainwr .artist-avatar img{
    border-radius: initial;
}

body:has(.classic-mainwr){
    background-color: #000;
}

.funding-mainslide .first .swiper-wrapper .swiper-slide:before {
    background: linear-gradient(to bottom, rgba(0, 0, 0, .0), rgba(0, 0, 0, 1));
}

.classic-mainwr  .myartist-item .artist-tit{
    color: #fff;
    margin-top: 10px;
}

.classic-mainwr .my-artist h3{
    font-size: 32px;
    color: #fff;
    margin-top: 100px;
}

.classic-mainwr .swiper.second img,.today-artist img{
    width: 100%;
    border-radius: 8px;
}

.classic-mainwr .swiper.second img{
    margin-bottom: 15px;
}

.classic-mainwr .tw{
    display: flex;
    align-items: stretch;
    position: relative;
}

.today-artist{
    max-width: 384px;
    height: 384px;
    margin-right: 15px;
    position: relative;
}

.classic-mainwr .swiper-wrapper.second{
    width: 60%;
}

.classic-mainwr .today-artist .box-text{
    position: absolute;
    z-index: 999;
    bottom: 0;
    left: 0;
    padding: 24px;
    width: 100%;
    background-color: #1415158f;
    border-radius: 0 0 8px 8px;
}

.classic-mainwr .today-artist .box-text strong{
    color: #fff;
}

.classic-mainwr .today-artist .box-text .txt-1{
    color: #fff;
    padding-top: 5px;
    font-size: var(--f-small);
}

.classic-mainwr .swiper-scrollbar-drag{
    background-color: #ffffff8f;
}

.box-text strong{
    font-size: 20px;
    color: #fff;
}

.classic-mainwr .swiper-scrollbar.swiper-scrollbar-horizontal{
    background: var(--swiper-scrollbar-bg-color,rgba(255, 255, 255, 0.3));
    height: 2px;
    bottom: 0;
}

.common-txt-1{
    font-size: 32px;
    color: #fff;
    margin-top: 100px;
    margin-bottom: 30px;
}

.animated-title {
    font-weight:700; 
    position: relative; 
    width: 100vw;
    max-width:100vw; 
    height: auto;
    padding: 180px 0;
    overflow-x: hidden;
    overflow-y: hidden; 
    transform: translateX(-16%);
}
.animated-title .track {
    position: absolute; 
    white-space: nowrap;
    will-change: transform;
    animation: marquee 30s linear infinite; 
}

.animated-title .content{
    font-size: 70px;
    color: #ffffff40;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (hover: hover) and (min-width: 700px){
.animated-title .content {
    -webkit-transform: translateY(calc(100% - 8rem)); 
    transform: translateY(calc(100% - 12rem));
}
}

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

.main-bigheader h1,.main-bigheader p{
    color: #fff;
}

.main-bigheader h1{
    font-size: 32px;
    padding-top: 100px;
    margin-bottom: 30px;
}

.main-bigheader p{
    line-height: 1.6;
    font-size: var(--f-normal);
    font-weight: 300;
}

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

.classic-mainwr .my-artist .funding-list img{
    border-radius: 8px;
    height: initial !important;
}

.classic-mainwr .funding-list .f-imgbox{
    border-radius: 8px;
}

.main-wrapper .myartist-item .artist-avatar{
    width: 140px;
    height: 140px;
    position: relative;
    border: 2px solid var(--primary-color);
}

.main-wrapper .myartist-item .artist-tit{
    color: #fff;
    margin-top: 15px;
}

.main-wrapper .myartist-item{
    margin-right: 20px;
    width: calc(100%/8 - 15px);
}

.main-bigheader {
    align-items: flex-start;
    margin-bottom: 30px;
}

body:has(.home) .main-bigheader p{
    /* padding-top: 180px; */
    /* font-size: 18px; */
}

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

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

.main-project .pro-textbox li.pro-summ{
    font-weight: 100;
    width: 95%;
}

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

.main-project .pro-textbox h4{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    width: 95%;
    /* font-size: 26px; */
    margin-top: 5px;
}

.main-project .pro-textbox::after{
    position: absolute;
    bottom: -20px;
    right: -20px;
    content: '';
    width: 40px;
    height: 40px;
    transform: rotate(-45deg);
    background: var(--black-color); 
}

.main-project .pro-item img,.main-project .pro-item{
    border-radius: 0px;
    cursor: pointer;
}

.main-project .pro-item:hover,.main-funding .funding-list:hover{
    transform: scale(103%);
    transition: var(--transition);
}

.main-project .pro-item:not(:hover),.main-funding .funding-list:not(:hover){
    transform: scale(100%); 
    transition: 0.25s ease-out;
}

.main-project .pro-item{
    border: 2px solid transparent;
    border-image: linear-gradient(to right, var(--primary-color) 0%, #3c3c3c 100%);
    border-image-slice: 1;
    border-left: none;
    border-right: none;
    border-bottom: none;
}

.funding-list .f-imgbox img:hover{
    transform: none;
}

.main-project .pro-textbox li {
    margin-top: 15px;
}

.pro-txtlist {
    bottom: 30px;
}

.mainpage-badge{
    position: absolute;
    right: 20px;
    top: 20px;
    background-color: var(--primary-color);
    color: #fff;
    z-index: 999;
    font-size: var(--f-normal);
    padding: 5px 20px;
    border-radius: 3px;
}

.bnr-common .swiper-wrapper .swiper-slide:before {
    background-image: linear-gradient(to bottom,rgba(0,0,0,.05),rgb(20 21 21));
}


.main-funding  .progress-wrapper{
    position: initial;
    margin-top: 50px;
}

.main-funding .funding-list{
    /* background-color: #3c3c3c; */
    align-items: center;
    padding: 30px;
    position: relative;
    margin: 0px;
    border: 1px solid transparent;
    border-image: linear-gradient(to right, var(--primary-color) 0%, #3c3c3c 100%);
    border-image-slice: 1;
    border-left: none;
    border-right: none;
    border-bottom: none;
}

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

.main-funding .funding-list::after{
    position: absolute;
    bottom: -20px;
    right: -20px;
    content: '';
    width: 40px;
    height: 40px;
    transform: rotate(-45deg);
    background: var(--black-color); 
}

.main-funding .funding-box {
    gap: 40px;
    margin-bottom: 180px;
}

.main-request h4{
    margin-bottom: 20px;
}

.main-request p{
    font-size: 18px;
}

.request-innertext{
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
    top: 23%;
    width: 100%;
}

.request-innertext .btn{
    padding: 10px 0;
    width: 250px;
    height: 55px;
    margin-top: 45px;
    font-size: var(--f-normal);
    /* background-color: #ab7c52cc; */
    border: 1px solid var(--primary-color);
    background-color: transparent;
    text-align: left;
    color: #fff;
    text-align: center;
    backdrop-filter: blur(3px);
    border-radius: 3px;
    box-shadow: 1px 2px 12px 3px rgb(165 123 86 / 23%);
}

.main-request h4{
    font-size: 32px;
    line-height: 1.6;
}

.main-artist{
    cursor: pointer;
}

.main-artist .artist-item .artist-thum {
    padding-top: 90%;
    border-radius: 0px;
    background-color: var(--black-color);
}

.main-artist .artist-avatar {
    width: 90px;
    height: 90px;
    margin-top: -50px;
    border: 4px solid #AB7C52;
}

.main-artist .artist-item {
    border-radius: 0px;
    border: none;
}

.main-artist .artist-tit {
    padding: 20px;
    font-size: 20px;
    color: #fff;
    width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    text-align: center;
    margin: auto;
}

.main-artist .artist-slide .swiper-slide {
    background-color: #3c3c3c;
    background-image: linear-gradient(to bottom,rgb(0 0 0 / 0%),rgb(20 21 21 / 90%));
    border: 1px solid transparent;
    border-image: linear-gradient(to left, var(--primary-color) 0%, #000000 100%);
    border-image-slice: 1;
}

.main-artist .swiper-pagination-clickable .swiper-pagination-bullet{
    background-color: #ffffff8f;
}

.main-artist  .swiper-pagination{
    bottom: 0;
}

.main-artist .swiper-pagination-bullet {
    width: 6px;
    height: 6px;
    background: transparent;
    opacity: 1;
}

.main-artist .swiper-pagination-bullet-active {
    width: 40px;
    transition: width .5s;
    border-radius: 5px;
    background-color: #AB7C52;
}

.main-funding .f-textbox .f-header p{
    background-color: #181818;
    color: var(--secondary-color);
}

.main-artist .swiper-wrapper{
    padding-bottom: 30px;
}

.main-artist .artist-slide .swiper-slide::after {
    position: absolute;
    bottom: -20px;
    right: -20px;
    content: '';
    width: 40px;
    height: 40px;
    transform: rotate(-45deg);
    background: var(--black-color);
    border-top: 1px solid var(--primary-color);
}


/* 아티스트 상세페이지 */
body:has(.artist-detail) {
    background-color: #000;
}

body:has(.artist-detail) .footer-wp{
    background-color: #000;
    border-top: #000;
}

body:has(.artist-detail) .footer-top{
    border-bottom: #000;
}

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

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

.artist-detail .my-artist{
    margin-top: 0px;
}

.artist-detail .myartist-item .artist-tit{
    font-size: var(--f-normal);
    color: #Fff;
}

.artist-detail .myartist-item .artist-avatar {
    width: 145px;
    height: 145px;
    margin-bottom: 10px;
    cursor: pointer;
}

.artist-detail .listinfor{
    line-height: 1.6;
}

.artist-detail .artist-avatar img:hover{
    transform: scale(105%);
    transition: var(--transition);
}

.artist-detail .my-artist ul {
    flex-wrap: wrap;
    margin-top: 30px;
}

.artist-detail .my-artist ul li{
    margin-top: 30px;
    margin-right: 40px;
}

.artist-detail .my-artist ul li:nth-child(7n){
    margin-right: 0px;
}

.artist-detail h2.artmain-name{
    font-size: var(--f-large);
    font-weight: 900;
    width: 50%;
    margin: 20px auto;
    margin-bottom: 0px;
}

.artist-detail .artmain-info{
    margin-bottom: 120px;
    margin-top: 15px;
    font-size: var(--f-normal);
    width: 80%;
}

.detailtit{
    margin-top: 120px !important;
}

.artist-detailwr{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.artist-detailwr .swiper{
    width: 100%;
    display: flex;
    margin-top: 30px;
}

.artist-detailwr .swiper img{
    width: 100%;
}

.artist-detailwr .swiper-backface-hidden .swiper-slide{
    width: calc(100%/4 - 21px) !important;
    margin-right: 26px;
}

.artist-detailwr .swiper-backface-hidden .slide-imgbox{
    position: relative;
    padding-top: 140%;
    overflow: hidden;
    border-radius: 6px;
}

.artist-detailwr .swiper-backface-hidden .swiper-slide img{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    cursor: pointer;
}

.artist-detailwr .swiper-backface-hidden .swiper-slide img:hover{
    transform: scale(105%); 
    transition: var(--transition);
}

.artist-detailwr .swiper-backface-hidden .swiper-slide img:not(:hover){
    transform: scale(100%); 
    transition: 0.25s ease-out;
}

.artist-detailwr .swiper-backface-hidden .swiper-slide .box-text{
    margin: 15px 0;
    margin-bottom: 30px;
}

.artist-detailwr .swiper-backface-hidden .swiper-slide .box-text strong{
    font-size: var(--f-normal);
    line-height: 1.6;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    cursor: pointer;
}

.artist-detailwr .swiper-backface-hidden .swiper-slide:last-child{
    margin-right: 0px;
}

.artist-detailwr .swiper-scrollbar.swiper-scrollbar-horizontal{
    bottom: 0;
}

.artistgoods .swiper-backface-hidden .slide-imgbox{
    padding-top: calc(100% - 37%);
}

.artistgoods .swiper-backface-hidden .swiper-slide img{
    height: initial;
}

.artistgoods .swiper-backface-hidden .swiper-slide {
    width: calc(100%/4 - 20px) !important;
    margin-right: 20px;
}

.artistgoods{
    margin-bottom: 120px;
}

.movie .swiper-backface-hidden .swiper-slide{
    width: calc(100%/5 - 20px) !important;
    margin-right: 20px;
    cursor: pointer;
}

.movie .swiper-backface-hidden .swiper-slide:before {
    position: absolute;
    bottom: 0;
    left: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 20%), rgba(0, 0, 0, 1));
    width: 100%;
    height: 100%;
    content: "";
    z-index: 4;
}

.movie .swiper-backface-hidden .swiper-slide .box-text{
    position: relative;
    z-index: 999;
}

.movie .swiper-backface-hidden .swiper-slide .videos span img{
    z-index: 999;
    width: 60px;
    height: 60px;
    position: absolute;
    top: 30%;
    left: 38%;
}

.movie-imgwr{
    position: relative;
    padding-top: 100%;
}

.movie .swiper-backface-hidden .swiper-slide img.thumbnail{
    position: absolute;
    height: 100%;
    border-radius: 6px;
}

.bottom-listwr.artist .bottom-listbox .list-mini h5,.bottom-listbox .list-mini .list-modify li{
    color: #ffffff9c;
}

.bottom-listwr.artist .list-mini h4{
    color: #fff;
}

.bottom-listwr.artist .bottom-listbox > li{
    border-bottom: 1px solid #333;
}

.bottom-listwr.list li.list-mini:first-child{
    border-top: 1px solid #333;
}

.artist-follow{
    bottom: 80px;
    left: auto;
    position: fixed;
    right: 40px;
    text-align: right;
    z-index: 1000;
}

.artist-follow .followbox{
    background-color: #000;
    border-radius: 100px;
    box-shadow: 0 0px 3px 12px rgb(255 255 255 / 30%);
    display: block;
    width: 120px;
    height: 120px;
    text-align: center;
    padding: 35px 0;
    animation: shine 3s Infinite Alternate;
    transition: var(--transition);
    cursor: pointer;
    color: #fff;
    font-size: var(--f-normal);
}

.artist-follow .followbox:hover{
    transform: scale(102%);
}

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

@keyframes shine {
    0% {
        box-shadow: 0px 0px 12px #a7a7a7;
    }

    25% {
        box-shadow: 0px 0px 12px #B4966A;
    }

    75% {
        box-shadow: 0px 0px 12px #a7a7a7;
    }

    100% {
        box-shadow: 0px 0px 12px #B4966A;
    }
}

.artist-detail .bottom-listwr > h1{
    color: #FFF;
    font-size: var(--f-large);
    margin-top: 120px;
    line-height: 1.6;
}

.artist-detail .bottom-listbox > li {
    border-bottom: 1px solid #333;
    background-color: var(--black-color);
    color: var(--white-color);
    border-color: #222529;
    border-color: rgba(255,255,255,.2);
    padding: 24px;
    border-radius: 8px;
    box-sizing: border-box;
    margin-bottom: 15px;
}

.artist-detail .bottom-listbox .list-mini h5{
    color: #ffffff9c;
}

.artist-detail .bottom-listbox .list-mini h4{
    color: #fff;
    cursor: pointer;
}

.artist-detail .w3-bar a{
    color: #ffffffd0;
}

.artist-detail .w3-bar a:hover{
    background-color: #ffffff30;
}

.artist-detail .w3-button.active{
    border: 1px solid #fff;
}

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

.artist-detail .bottom-listwr .comment-write input::placeholder{
    color: #ffffff9c;
}

.artist-detail .bottom-listwr .comment-write button {
    background-color: #ffffff1f;
}

.artist-detail .bottom-listwr .comment-write button:hover,.artist-detail .bottom-listwr .comment-write button:focus{
    background-color: var(--primary-color);
}

.artist-detail .bottom-listbox .list-modify li:last-child:hover, .artist-detail .bottom-listbox .list-modify li:last-child:focus {
    color: #ffffff9c;
}

.comment-wrlist {
    width: 100vw;
    transform: translateX(-50%);
    left: 50%;
    position: relative;
    background-color: #2d3136;
}

.comment-aritsth1{
    margin-top: 0px;
    padding-top: 120px;
}

.w3-bar.comment-pagination{
    margin-bottom: 0px;
    padding-bottom: 100px;
}

.artist-detail .funding-list .f-imgbox{
    border-radius: 6px;
}

.artist-detail .funding-list .f-textbox h4{
    font-size: var(--f-normal);
    color: #fff;
    line-height: 1.6;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.artist-detail .my-artist .funding-list {
    width: calc(100%/3 - 18px);
    margin-top: 0px;
    margin-bottom: 0px;
}

.artist-detail .my-artist .funding-list:nth-child(3n){
    margin-right: 0px;
}

.detail-moviewrapper{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

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

.artist-detail .funding-list .f-imgbox img{
    height: auto !important;
}

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

.artist-titleflex img{
    cursor: pointer;
}

.my-artist.movie .f-textbox,.my-artist.project .f-textbox {
    padding-bottom: 0px;
}

.my-artist.movie .funding-list .f-textbox h4,.my-artist.project .funding-list .f-textbox h4{
    margin-bottom: 0px;
}

.my-artist.movie ul,.my-artist.project ul{
    padding-bottom: 0px;
}

.my-artist.movie  .f-imgbox{
    position: relative;
    opacity: 1;
    transition: var(--transition);
}

.artist-detailwr .f-imgbox{
    opacity: 1;
    transition: var(--transition);
}

.my-artist.movie .f-imgbox:hover,
.artist-detailwr .f-imgbox:hover{
    opacity: .8;
}

.my-artist.movie  .f-imgbox::after{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 50px;
    height: 50px;
    background: url(../images/play.png)no-repeat center right 9px /28px rgba(0, 0, 0, .5);
    transform: translate(-50%, -50%);
    content: '';
    border-radius: 50%;
}

.artist-titleflex p{
    display: flex;
    align-items: center;
    font-size: var(--f-normal);
    color: #Fff;
    cursor: pointer;
}

.artist-titleflex p img{
    margin-left: 15px;
}

.artist-titleflex p:hover .plusimg{
    transform: rotate(180deg);
    transition: 1s;
}

.artist-detail .artmain-info:last-child {
    padding-top: 45px;
}

.artist-detail .artmain-info {
    margin-top: 30px;
}

.commentbox.artistpage{
    background-color: var(--black-color);
    color: var(--white-color);
    border-color: #222529;
    border-color: rgba(255,255,255,.2);
}

.artistpage .commentid {
    width: 100%;
    display: flex;
    margin-bottom: 15px;
}

.artistpage .commentid li.li-reply {
    padding: 0;
    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;
}

.artistpage .commentid li:first-child,.artistpage .SynopsisText{
    color: #fff;
}

.artistpage .commentid li:nth-child(2)::after{
    content: none;
}

.artistpage .commentid li.li-reply:hover {
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    transition: var(--transition);
}

.gall-list-squ .f-imgbox{
    padding-top: 100%;
}

/* 마이페이지 */
.classic-mypagewr{
    display: flex;
    flex-wrap: nowrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
    gap: 80px;
    margin-bottom: 100px;
}

.mypage-stickybox{
    display: block;
    max-width: 350px;
    min-width: 350px;
    order: 1;
    width: 100%;
    height: 100%;
    margin: 0px;
    position: sticky;
    top: 100px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background-color: var(--background-color);
}

.mypage-tabbox{
    order: 2;
    width: calc(100% - 350px);
}

.classic-mypagewr .form-box.avatar-form{
    background-color: var(--font-color);
    border-radius: 10px 10px 0 0;
    padding: 30px;
    padding-bottom: 50px;
}

.mypage-name p{
    font-size: var(--f-normal);
    font-weight: 600;
    text-align: center;
    margin: 15px auto;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mypage-name p img{
    margin-left: 5px;
}

.mypage-name .avatar-form .avatar{
    text-align: center;
    margin: auto;
}

.classic-mypagewr .like-modify{
    background-color: #Fff;
    border-radius: 6px;
    margin: auto;
    position: absolute;
    top: 170px;
    transform: translateX(-50%);
    left: 50%;
    width: 85%;
    z-index: 999;
    padding: 20px 15px;
    box-shadow: rgba(100, 100, 111, 0.1) 0px 7px 29px 0px;
}

.classic-mypagewr .like-modify ul{
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.classic-mypagewr .like-modify ul li{
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}

.classic-mypagewr .like-modify ul li h5{
    font-weight: 500;
    margin-bottom: 5px;
}

.classic-mypagewr .like-modify ul li p{
    font-size: var(--f-normal);
    color: var(--black-color);
    font-weight: 700;
}

.classic-mypagewr .commentbox {
    margin-bottom: 20px;
    box-shadow: 0px 3px 6px 0px #f3f4f8;
    cursor: pointer;
    padding: 0px;
    padding-bottom: 24px;
}

.classic-mypagewr .commentbox .commentid{
    background-color: #f5f6fac0;
    padding: 10px 20px;
    margin-bottom: 24px;
    padding-right: 15px;
}

.classic-mypagewr .commentbox .SynopsisText{
    padding: 0 20px;
}

.classic-mypagewr .btn_more{
    margin-right: 20px;
}

.mypage-management{
    background-color: #Fff;
    border-radius: 6px;
    margin: auto;
    width: 85%;
    padding: 15px;
    box-shadow: rgba(100, 100, 111, 0.1) 0px 7px 29px 0px;
    margin-top: 65px;
}

.mypage-management li{
    border-bottom: 1px solid var(--background-color);
    padding: 15px 10px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.mypage-management li button{
    background-color: #fff;
}

.mypage-management li img:first-child{
    margin-right: 10px;
}

.mypage-management li img{
    filter: grayscale(100%);
}

.mypage-management li img.right{
    margin-left: auto;
    cursor: pointer;
}

.mypage-management li:last-child{
    border-bottom: 0px;
}

.maypage-logout{
    background-color: #Fff;
    border-radius: 6px;
    margin: auto;
    width: 85%;
    padding: 15px;
    box-shadow: rgba(100, 100, 111, 0.1) 0px 7px 29px 0px;
    margin: 20px auto;
    margin-bottom: 25px;
    text-align: center;
}

.maypage-logout:hover,.maypage-logout:focus{
    opacity: 0.7;
    cursor: pointer;
    transition: var(--transition);
}

.maypage-logout a{
    color: var(--font-color);
}

.mypage-management li a{
    font-weight: 500;
}

.mypage-tabbox .tab-wrapper .tab{
    width: 100%;
    margin-bottom: 50px;
}

.mypage-tabbox .tab-wrapper .tab button{
    padding: 0px 30px;
    background: #fff;
    font-size: var(--f-normal);
    padding-bottom: 20px;
}

.mypage-tabbox .tab-wrapper .tab button.active{
    border-bottom: 2px solid var(--primary-color);
    color: var(--primary-color);
}

.mypage-tabbox .my-artist{
    margin-top: 0px;
}

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

.mypage-tabbox .my-artist.project ul{
    margin-top: 0px;
}

.mypage-tabbox .my-artist.project .f-textbox h4{
    font-size: var(--f-small);
    line-height: 1.4;
    font-weight: 600;
}

.mypage-tabbox .my-artist .f-textbox{
    padding-top: 10px;
}

.mypage-tabbox .funding-list .f-imgbox{
    border-radius: 6px;
    position: relative;
}

.mypageheart{
    top: 7px;
    right: 7px;
    background: url(../images/heart-red.png) no-repeat center center /16px #fffc;
    width: 30px;
    height: 30px;
    padding: 7px;
    border-radius: 50%;
    box-shadow: 0 0.1rem 0.6rem rgba(0, 0, 0, 0.14);
}

.mypageheart.active{
    background: url(../images/heart-white.png) no-repeat center center /16px #ddddddba;
}

.mypage-tabbox .funding-list .f-imgbox span.project-ing,.mypage-tabbox .funding-list .f-imgbox span.project-end{
    position: absolute;
    top: 7px;
    left: 7px;
    z-index: 99;
    color: #fff;
    padding: 3px 10px;
    background-color: var(--primary-color);
    font-size: 10px;
    border-radius: 3px;
}

.mypage-tabbox .funding-list .f-imgbox span.project-end{
    background-color: var(--black-color);
}

.mypage-tabbox .funding-list .f-imgbox img{
    height: auto !important;
}

.mypage-tabbox .mypage-set{
    width: 100%;
}

.mypage-tabbox .mypage-set li .m-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.mypage-tabbox .mypage-set li .m-header h5{
    color: var(--black-color);
    font-size: var(--f-normal);
}

.mypage-tabbox .mypage-set li{
    padding: 30px 0;
}

.mypage-tabbox .mypage-set li.first{
    padding-top: 0px;
}

.mypage-tabbox .mypage-set li:first-child img{
    width: 80px;
    height: 80px;
    position: relative;
    border: 1px solid var(--border-color);
    cursor: pointer;
    border-radius: 50px;
    padding: 13px;
    background-color: #e4e6e7;
}

.mypage-tabbox .mypage-set button.mypage-out{
    background-color: #fff;
    padding: 0px;
    border-radius: 0px;
    font-size: 14px;
    text-decoration: underline;
}

.mypage-tabbox .mypage-set button.mypage-out:hover{
    color: var(--red-color);
}

.mypage-tabbox .mypage-coin .coin-flex{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 60px;
}

.mypage-tabbox .mypage-coin .coin-box{
    width: 80%;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 20px 30px;
    margin-right: 15px;
    box-shadow: 0px 3px 6px 0px #f3f4f8;
}

.mypage-tabbox .mypage-coin .coin-box p{
    font-size: var(--f-normal);
    font-weight: 600;
}

.mypage-tabbox .mypage-coin .coin-box img{
    width: 20px;
    margin-right: 10px;
}

.mypage-tabbox .mypage-coin .coin-box h5{
    margin-left: auto;
    font-size: var(--f-normal);
    color: var(--primary-color);
}

.mypage-tabbox .mypage-coin button{
    width: 20%;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background-color: var(--secondary-color);
    padding: 20px 30px;
    font-size: var(--f-normal);
    box-shadow: 0px 3px 6px 0px #f3f4f8;
    color: #fff;
    letter-spacing: 0.8px;
}

.mypage-tabbox .mypage-coin button:hover,.mypage-tabbox .mypage-coin button:focus{
    opacity: 0.7;
    transition: var(--transition);
}

.mypage-tabbox .coinuse-list li{
    display: flex;
    width: 100%; 
    padding: 20px 0;
    border-bottom: 1px solid var(--border-color);
}

.mypage-tabbox .coinuse-list li p:nth-child(1){
    margin-right: 30px;
    color: var(--black-color);
    font-weight: 500;
}

.mypage-tabbox .coinuse-list li p:nth-child(2){
    margin-right: 20px;
    width: 15%;
}

.mypage-tabbox .coinuse-list li p:nth-child(3){
    margin-right: 20px;
    width: 60%;
    overflow: hidden;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.mypage-tabbox .coinuse-list li p:nth-child(4){
    margin-right: 0;
    margin-left: auto;
}

.mypage-tabbox .coinuse-list li p.use{
    color: var(--blue-color);
}

.mypage-tabbox .coinuse-list li p.charge{
    color: var(--green-color);
}

.mypage-tabbox .coinuse-list li p.return{
    color: var(--red-color);
}


.mypage-tabbox .product-card{
    display: block;
    padding-bottom: 20px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    margin-bottom: 20px;
    box-shadow: 0px 3px 6px 0px #f3f4f8;
}

.mypage-tabbox .product-card:last-child{
    margin-bottom: 0px;
}

.mypage-tabbox .product-card .text-muted {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
    background-color: var(--background-color);
    padding: 10px 20px;
}

.mypage-tabbox .product-card .text-muted span{
    font-size: var(--f-caption);
}

.mypage-tabbox .product-card .text-muted .badge{
    color: #fff;
    padding: 7px 12px;
    font-size: var(--f-caption);
    border-radius: 3px;
}

.mypage-tabbox .product-card .text-muted .badge.green{
    background-color: var(--green-color);
}

.mypage-tabbox .product-card .text-muted .badge.grey{
    background-color: var(--font-color);
}

.mypage-tabbox .product-card img{
    width: 120px;
    border-radius: 8px;
    margin-right: 30px;
}

.mypage-tabbox .product-card .imgbox{
    display: flex;
    align-items: center;
    width: 100%;
    padding: 20px;
    padding-bottom: 0px;
}

.mypage-tabbox .product-card .prod-content{
    font-size: var(--f-normal);
    color: var(--black-color);
    margin-bottom: 15px;
}

.mypage-tabbox .product-card .rewordcontent{
    margin-bottom: 5px;
}

.mypage-tabbox .product-card .price{
    font-size: var(--f-small);
    margin-top: 10px;
}

.mypage-tabbox .product-card .price span{
    color: var(--primary-color);
    font-weight: 600;
}

.classic-mypagewr .commentid li:first-child{
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: keep-all;
    font-size: var(--f-small);
}

.classic-mypagewr .commentid li.last:after{
    background: none;
}

.classic-mypagewr .commentid li.last{
    padding-right: 0px;
}

.toggleSwitch {
    width: 60px;
    height: 30px;
    display: block;
    position: relative;
    border-radius: 30px;
    background-color: var(--background-color);
    box-shadow: 0 0 10px 0px rgba(0 0 0 / 15%);
    cursor: pointer;
}
  
.toggleSwitch .toggleButton {
    width: 23px;
    height: 23px;
    position: absolute;
    top: 50%;
    left: 4px;
    transform: translateY(-50%);
    border-radius: 50%;
    background: #aeb4b7;
}
  
#toggle:checked ~ .toggleSwitch {
    background: #aeb4b7;
}
  
#toggle:checked ~ .toggleSwitch .toggleButton {
    left: calc(100% - 26px);
    background: #fff;
}
  
.toggleSwitch, .toggleButton {
    transition: all 0.2s ease-in;
}

.borderyes{
    border-bottom: 2px solid var(--primary-color);
    color: var(--primary-color);
}

.title-listimg img{
    width: 24px;
    height: 24px;
    margin-right: 15px;
}   

.title-listimg{
    font-size: 18px;
    display: flex;
    align-items: center;
    width: 100%;
    background-color: #fff;
    box-shadow: 0px 5px 0px #0000000a;
    color: var(--black-color);
    padding-bottom: 20px;
    margin-bottom: 50px;
}

.mypage-set .mypage-setbox input{
    display: block;
    border-radius: 4px;
    width: 100%;
    border: 1px solid var(--border-color);
    background-color: rgba(245, 246, 250, 30%);
}

.mypage-set .mypage-setbox input.mypage-pass{
    margin: 20px 0;
}

.mypage-set .mypage-setbox .m-header input{
    display: none;
}

.classic-mypagewr .artist-titleflex button{
    border-radius: 30px;
    padding: 5px 15px;
    background-color: var(--background-color);
    font-size: var(--f-caption);
    margin-bottom: 20px;
}

.classic-mypagewr .tab-subbox h3{
    font-size: var(--f-normal);
}

.aritst-manage .my-artist.project .detailtit {
    margin-top: 60px !important;
}

.classic-mypagewr .project-input-wr p{
    margin-bottom: 10px;
    color: var(--font-color);
    font-weight: 600;
}

.project-input-wr textarea{
    display: block;
    border-radius: 4px;
    width: 100%;
    border: 1px solid var(--border-color);
    background-color: rgba(245, 246, 250, 30%);
    margin-bottom: 20px;
    resize: none;
    padding: 15px;
}

.classic-mypagewr .project-input-wr input{
    display: block;
    border-radius: 4px;
    width: 100%;
    border: 1px solid var(--border-color);
    background-color: rgba(245, 246, 250, 30%);
    margin-bottom: 20px;
}

.mypage-infortext{
    font-size: var(--f-caption);
}

.classic-mypagewr input::placeholder{
    font-size: var(--f-small);
}

.classic-mypagewr input:focus-visible,
.classic-mypagewr input:focus,
.classic-mypagewr textarea:focus-visible,
.classic-mypagewr textarea:focus{
    outline: none;
    border: 1px solid var(--primary-color);
}

.project-input-wr{
    width: 100%;
}

.classic-mypagewr .team-wr li{
    margin-right: 30px;
    width: initial;
}

.classic-mypagewr .team-wr li:last-child{
    margin-right: 0px;
}

.classic-mypagewr .team-imgbox .thum-heart {
    background: url(../images/heart-white.png) no-repeat center center /16px #ddd;
    right: 0 ;
    top: initial;
    bottom: 30px;
}

.classic-mypagewr .team-imgbox .thum-heart.active {
    background: url(../images/heart-red.png) no-repeat center center /16px #fff;
    right: 0 ;
    top: initial;
    bottom: 30px;
}

.classic-mypagewr .funding-list{
    position: relative;
    margin-bottom: 0px;
}

.mypagebottom-modify{
    padding: 15px 40px;
    border-radius: 4px;
    background-color: var(--primary-color);
    color: #fff;
    font-weight: 600;
    letter-spacing: 1px;
    font-size: var(--f-small);
    box-sizing: border-box;
    border: 1px solid transparent;
}

.mypagebottom-modify:active,.mypagebottom-modify:focus{
    color: var(--primary-color);
    background-color: #fff;
    border: 1px solid var(--primary-color);
}

.mypagebottom-modify:hover{
    opacity: 0.9;
    transition: var(--transition);
}

.mypage-bottomwr{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-top: 30px;
    margin-top: 50px;
    border-top: 1px dashed var(--border-color);
}

.mypage-bottomwr button:nth-child(1){
    background-color: #aeb4b7;
    margin-right: 15px;
}

.sub-wrapper .my-artist.movie .f-textbox h4{
    color: #fff;
}

.sub-wrapper .my-artist.movie .f-textbox{
    padding-top: 0px;
    width: 100%;
    margin-bottom: 10px;
}

.nickname-box{
    position: relative;
    width: 100%;
}

.nickname-box button{
    position: absolute;
    right: 5px;
    top: 5px;
    bottom: 5px;
    padding: 5px 20px;
    font-size: var(--f-caption);
    border-radius: 4px;
    background-color: var(--font-color);
    border: 1px solid #ddd;
    color: #fff;
    height: 40px;
}

.admin-button{
    text-align: center;
    margin-bottom: 25px;
    text-decoration: underline;
}

.admin-button:hover{
    opacity: 0.7;
    transition: var(--transition);
}

.mypage-setbox.first .avatar-form .avatar::after {
    background: none;
}

.my-artist ul {
    touch-action: pan-x;
}

/* 펀딩 결제 확인페이지 */
.price-allbox table {
    position: relative;
    margin: 10px 0 0;
    border-top: 1px solid var(--font-color);
    width: 100%;
    text-align: center;
}

.price-allbox .checkinput{
    text-align: center;
    display: block;
    margin: auto;
    width: auto;
    border: 1px solid var(--gray1-color);
    border-radius: 4px;
}

caption {
    display: none;
}

.price-allbox thead th {
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
    font-weight: 500;
    background: #fafafa;
    color: var(--black-color);
}

.price-allbox table td {
    padding: 16px;
    font-size: 14px;
    line-height: 1.6;
    vertical-align: middle;
    color: var(--black-color);
}

.price-allbox th {
    word-break: break-all;
    word-wrap: break-word;
    color: #888;
}

.price-allbox .right {
    text-align: right;
    padding-right: 15px;
}

.price-allbox .center {
    text-align: center;
}

.price-allbox.typeList tfoot td {
    background: #fafafa;
    border-bottom: 1px solid var(--border-color);
    border-top: 1px solid var(--border-color);
    color: var(--black-color);
    text-align: center;
}

.price-allbox.typeList tfoot td span,.price-allbox.typeList tfoot td strong{
    color: var(--black-color);
}

.price-allbox.typeList tfoot td span.txt18.red-allprice{
    color: var(--red-color);
}

.price-allbox.typeList tfoot .gLeft{
    float: left;
    color: var(--black-color);
}

.wrapper:has(.price-allbox) {
    width: 1300px;
}

.price-allbox table td.left.gClearLine{
    text-align: left;
}

.price-allbox table td.left.gClearLine a{
    color: var(--black-color);
}

.price-allbox table td.left.gClearLine .option{
    color: var(--black-color);
}

.price-allbox table td.right{
    text-align: center;
}

.price-allbox table td.right strong{
    color: var(--black-color);
}

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

.price-allbox .price-imgbox img{
    width: 100%;
    border-radius: 4px;
}

.orderArea.delivery-allbox{
    border-top: 1px dashed var(--gray1-color);
}

.orderArea.delivery-allbox .title {
    margin-top: 30px;
}

.orderArea.delivery-allbox .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
}

.ec-base-help{
    font-size: var(--f-caption);
}

.orderArea.delivery-allbox .title h3 {
    display: inline-block;
    vertical-align: middle;
    color: #333;
    font-size: 14px;
}

.orderArea.delivery-allbox .title .required {
    color: #333;
    text-align: right;
}

.delivery-table table {
    width: 100%;
    position: relative;
    margin: 10px 0 0;
    border-top: 1px solid var(--font-color);
    color: #333;
}

.delivery-table tbody th {
    border-bottom: 1px solid var(--border-color);
    text-align: center;
    font-weight: normal;
    background-color: #fafafa;
}

.delivery-table table th,
.delivery-table table td {
    padding: 16px;
    font-size: 14px;
    line-height: 1.6;
    vertical-align: middle;
    color: var(--black-color);
    font-weight: 500;
}

.delivery-table table td{
    border-bottom: 1px solid var(--border-color);
}

[class^='btnNormal'], a[class^='btnNormal'] {
    display: inline-block;
    border: 1px solid var(--gray1-color);
    border-radius: 4px;
    font-size: var(--f-small);
    font-weight: 500;
    text-align: center;
    line-height: 38px;
    padding: 0 20px;
    margin-left: 5px;
    box-shadow: 0px 3px 6px 0px #f3f4f8;
}

input.delivery-name{
    width: 30%;
}

input.zipcode-input{
    width: 40%;
    position: relative;
}

input.inputTypeText{
    width: 50%;
    margin-top: 15px;
    margin-right: 10px;
}

.zipcond-wrbox{
    display: flex;
}

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

.number-inputbox select{
    border-radius: 4px;
    height: 40px;
}

span.underbar{
    padding: 0 15px;
}

.number-inputbox input.phone-minibox{
    width: 20%;
}

.delivery-table.typeWrite input{
    height: 40px;
}

.payArea {
    overflow: hidden;
    border: 1px solid var(--border-color);
    line-height: 1.5;
    padding: 20px 30px;
    border-radius: 4px;
    box-shadow: 0px 3px 10px 0px #e9e9e9;
    margin-top: 20px;
}

.payArea .payment {
    float: left;
    width: 100%;
}

.payArea .method {
    padding: 17px 20px 15px;
    font-weight: bold;
    border-bottom: 1px solid var(--font-color);
    display: flex;
    margin-bottom: 15px;
}

.payArea .method span {
    display: flex;
    align-items: center;
    margin-right: 20px;
}

.ec-base-label label{
    color: var(--black-color);
}

.payArea .method span input{
    margin-right: 10px;
}

.payArea .ec-base-table th,
.payArea .ec-base-table td {
    padding: 10px;
    vertical-align: middle;
    color: var(--black-color);
    font-weight: 500;
}

.ec-base-table tbody th {
    border-bottom: 1px solid var(--border-color);
    text-align: center;
    font-weight: normal;
    background-color: #fafafa;
}

.payArea .ec-base-table td {
    border-bottom: 1px solid var(--border-color);
}

.paymentAgree .all {
    position: relative;
    padding: 10px 20px;
    font-weight: bold;
    background: #fafafa;
    display: flex;
    align-items: center;
    margin-top: 50px;
    font-weight: 500;
    color: var(--black-color);
}

.paymentAgree .all input{
    margin-right: 10px;
}

.payArea .total h4 {
    padding: 20px;
}

.payArea .total .paymentAgree {
    position: relative;
    margin: 20px 10px 0 10px;
    padding: 0 0 0 18px;
    text-align: left;
    font-size: 13px;
    line-height: 1.8;
}

.ec-base-table.tableClear table {
    width: 100%;
}

.ec-base-table.tableClear table select {
    width: 30%;
    margin-right: 10px;
    border-radius: 4px;
    height: 40px;
}

.payment-pricebtn{
    margin-left: 50px;
}

.payment-pricebtn .price{
    margin-right: 10px;
    width: 100%;
}

.pricepayment-total{
    padding: 40px 0;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    padding-right: 0;
}

.pricepayment-total button{
    display: inline-block;
    border-radius: 4px;
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    padding: 0px 50px;
    box-shadow: 0px 3px 6px 0px #f3f4f8;
    line-height: 60px;
    background-color: var(--black-color);
    color: #fff;
    margin-left: auto;
    width: 100%;
    border-radius: 30px;
}

.pricepayment-total button:hover{
    background-color: var(--primary-color);
    transition: var(--transition);
}

.pricepayment-total button:disabled {
    background: var(--gray2-color);
    cursor: default;
}

.payArea input {
    height: 40px;
}

.last-pricebox{
    font-size: 20px;
    color: var(--red-color);
}

.pricepayment-total h4{
    font-size: 20px;
    color: var(--black-color);
}

.paymentAgree button{
    margin-left: auto;
    background: none;
}

.ec-order-payment-card,.payment-cashbox{
    width: 100%;
}

.payment-cashbox th{
    width: 15%;
}

.payment-cashbox input{
    border-radius: 4px;
    margin-left: 5px;
}

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

.priceheader-title{
    font-size: 18px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
}

.apply-form .form-lbl.priceheader-title{
    font-weight: 700;
}

.orderArea.delivery-allbox .title h3{
    font-size: 18px;
}

.priceheader-title span{
    font-size: var(--f-small);
    color: #fff;
    background-color: var(--secondary-color);
    border-radius: 4px;
    padding: 3px 10px;
    margin-right: 10px;
}

.paytable-caption{
    margin-top: 20px;
    font-size: 13px;
    color: var(--black-color);
}

.paytable-caption span{
    font-size: var(--f-caption);
    font-weight: 400;
}

.board-paging li {
    line-height: 39px;
}

/* 결제완료페이지 */
.complete-paymentwr .pay-banner{
    width: 100%;
    background-color: #c09a63;
    margin-left: -40px;
    padding: 40px;
    width: calc(100% + 80px);
}

.complete-paymentwr .pay-banner img{
    width: 15%;
    -webkit-filter: brightness(0) invert(1); 
    filter: brightness(0) invert(1);
}

body:has(.complete-paymentwr) .apply-form{
    padding-top: 0px;
}

.complete-paymentwr .pay-banner h1{
    font-size: var(--f-large);
    color: #fff;
    font-weight: 400;
    margin-top: 30px;
    margin-bottom: 20px;
}

.complete-paymentwr .pay-banner span{
    font-size: var(--f-large);
    color: #fff;
    font-weight: 500;
    border-bottom: 3px solid #ffffff80;
}

.complete-paymentwr .pay-textbox{
    padding: 50px 0;
    color: var(--black-color);
    font-weight: 500;
}

.complete-paymentwr .pay-textbox p{
    font-size: var(--f-normal);
    line-height: 2;
    color: var(--black-color);
}

.complete-paymentwr .pay-textbox p:first-child{
    color: var(--black-color);
    font-weight: 600;
    margin-bottom: 15px;
}

.complete-paymentwr .pay-textbox p span{
    color: var(--primary-color);
    font-size: var(--f-normal);
    font-weight: 600;
}

.complete-paymentwr .price-allbox table{
    border-top: 1px solid var(--font-color);
    /* border-bottom: 1px solid var(--gray1-color); */
}

.complete-paymentwr .price-allbox table th{
    padding: 15px;
}

.complete-paymentwr .detail{
    margin-top: 15px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    cursor: pointer;
}

.complete-paymentwr .detail p:hover{
    opacity: 0.7;
    transition: var(--transition);
}

.complete-paymentwr .detail img{
    margin-left: 15px;
}

.complete-btnbox{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 50px;
    margin-bottom: 30px;
}

.complete-btnbox button{
    padding: 15px 50px;
    border-radius: 4px;
    font-size: var(--f-normal);
    color: #fff;
    background-color: var(--secondary-color);
}

.complete-btnbox button:first-child{
    margin-right: 20px;
    background-color: var(--font-color);
}

.complete-btnbox button:hover{
    opacity: 0.8;
    transition: var(--transition);
}

.price-allbox table td.right .red-allprice{
    color: var(--red-color);
}

/* 공지사항 */
.board_wrap{
    margin-top: 40px;
    margin-bottom: 0px;
}

.board_wrap .w3-bar{
    margin-bottom: 0px;
}

.board_title{
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.board_title strong{
    font-size: var(--f-large);
    color: var(--black-color);
}

.board_title p{
    margin-top: 5px;
}

.bt_wrap{
    margin-top: 30px;
    text-align: center;
    font-size: 0;
}

.bt_wrap a{
    display: inline-block;
    min-width: 80%;
    margin-left: 10px;
    padding: 10px;
    border: 1px solid var(--black-color);
    border-radius: 2px;
}

.bt_wrap a:first-child{
    margin-left: 0;
}

.bt_wrap a.on{
    background-color: #ddd;
    color: #fff;
}

.board_list{
    width: 100%;
    border-top: 2px solid var(--black-color);
}

.board_list > div{
    border-bottom: 1px solid var(--gray1-color);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

.board_list > div.top{
    border-bottom: 1px solid #eee;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    background: #fcfcfc;
}

.board_list > div:last-child{
    border-bottom: 1px solid #888;
}

.board_list > div > div{
    display: inline-block;
    padding: 18px;
    text-align: center;
}

.board_list > div.top >div{
    font-weight: 600;
    color: var(--black-color);
}

.board_list .num{
    width: 10%;
}

.board_list .title{
    width: 60%;
    text-align: left;
    color: var(--black-color);
    cursor: pointer;
    font-weight: 500;
    font-size: var(--f-normal);
}

.board_list .top .title{
    text-align: center;
    font-size: var(--f-small);
}

.board_list .writer{
    width: 10%;
}

.board_list .date{
    width: 10%;
}

.board_list .count{
    width: 10%;
}

.board_page{
    margin-top: 30px;
    text-align: center;
}

.board_page a{
    display: inline-block;
    width: 32px;
    height: 32px;
    box-sizing: border-box;
    vertical-align: middle;
    border: 1px solid #ddd;
    border-left: 0;
    line-height: 100%;
}

.board_page a.bt{
    padding-top: 10px;
    letter-spacing: -1px;
}

.board_page a.num{
    padding-top: 9px;
}

.board_page a.num.on{
    border-color: var(--black-color);
    background-color: var(--black-color);
    color: #fff;
}

.board_page a:first-child{
    border-left: 1px solid #ddd;
}

.board_wrap .search {
    position: relative;
    width: 30%;
}

.board_wrap .search input {
    width: 100%;
    border: 1px solid var(--gray1-color);
    border-radius: 50px;
    padding: 20px;
    font-size: 14px;
    padding-right: 50px;
}

.board_wrap .search img {
    position: absolute;
    width: 36px;
    height: 36px;
    top: 7px;
    right: 7px;
    margin: 0;
    background: var(--black-color);
    padding: 6px;
    border-radius: 30px;
}

.board_wrap .search img:hover{
    cursor: pointer;
    opacity: 0.8;
    transition: var(--transition);
}

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

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

.board_wrap .board-paging li {
    background-color: #fff;
    border: 1px solid var(--gray1-color);
}

.board_wrap .board-paging li:hover{
    opacity: 0.7;
    transition: var(--transition);
}

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

/* 공지사항 detail */
.sub-news-inner {
    margin-bottom: 80px;
}

.sub-content>.sub-tit {
    font-size: var(--f-large);
    font-weight: 700;
    color: var(--black-color);
    text-align: center;
    margin-bottom: 60px;
}

.sub-news-inner .recruit-view {
    border-top: 2px solid var(--black-color);
    border-bottom: 1px solid var(--gray1-color);
}

.sub-news-inner .recruit-view .tit-area {
    display: flex;
    align-items: center;
    padding: 30px;
    background: #fcfcfc;
}

.sub-news-inner .recruit-view .tit-area>.tit {
    font-size: 18px;
    font-weight: 700;
    color: var(--black-color);
    flex: 1;
}

.sub-news-inner .recruit-view .tit-area .date {
    font-size: var(--f-small);
    margin-left: 50px;
}

.titarea-subbox{
    display: flex;
}

.sub-news-inner .recruit-view .edit-area {
    padding: 30px 20px 60px 20px;
    border-top: 1px solid #eee;
}

.recruit-view .edit-area .img+.edit-txt {
    margin-top: 60px;
}

.sub-news-inner .edit-txt{
    color: var(--black-color);
    font-size: var(--f-normal);
}

.sub-news-inner .notice-listbtn {
    margin: 50px auto;
    text-align: right;
}

.sub-news-inner .notice-listbtn .btnType01{
    padding: 15px 50px;
    border-radius: 4px;
    font-size: var(--f-normal);
    color: #fff; 
    background-color: var(--font-color); 
}


.sub-news-inner .notice-listbtn .btnType01:first-child{
    margin-right: 15px;
    background-color: var(--secondary-color);
}

.noticepost-paging li:first-child {
    padding-top: 0;
}

.noticepost-paging li {
    border-bottom: 1px solid var(--border-color);
    text-align: left;
    font-size: 14px;
    display: flex;
    align-items: center;
}

.noticepost-paging{
    border-top: 1px solid var(--border-color);
    text-align: center;
    margin-top: 50px;
    margin-bottom: 100px;
}

.noticepost-paging li .prenext {
    background-color: #fff;
    padding: 18px 30px 18px 35px;
    display: inline-block;
    background: url(/assets/images/icon/grey/ic_artop.png) left 10px center no-repeat;
    background-size: 20px;
    cursor: pointer;
}

.noticepost-paging li .next {
    background-color: #fff;
    padding: 18px 30px 18px 35px;
    display: inline-block;
    background: url(/assets/images/icon/grey/ic_ardown.png) left 10px center no-repeat;
    background-size: 20px;
    cursor: pointer;
}

.noticepost-paging li a {
    transition: all 0.5s;
    cursor: pointer;
    width: calc(100% - 120px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    color: var(--black-color);
    font-weight: 500;
}


/* 전체 디테일 수정 */
.sub-wrapper .funding-list .f-imgbox{
    width: initial;
}

.sub-wrapper .funding-list .f-imgbox img{
    height: auto !important;
}

.sub-wrapper .funding-list:nth-child(2n) .f-imgbox{
    margin-right: 0px;
}

.sub-wrapper .funding-list {
    flex-direction: column;
}

.sub-wrapper .touuchArea.artist-touch{
    display: flex;
    margin-top: 25px;
}

.sub-wrapper .movie-imgwr{
    padding-top: initial;
    width: fit-content;
}

.sub-wrapper .movie-imgwr img{
    position: relative;
    width: 100%;
}

.sub-wrapper .funding-list .f-textbox h4{
    font-size: var(--f-normal)
}

.sub-wrapper .swiper-horizontal .box-text{
    width: 100%;
}

.sub-wrapper .swiper-horizontal .box-text strong{
    font-size: var(--f-normal)
}

.sub-wrapper .funding-list .f-textbox{
    width: 100%;
    padding: 0;
    margin-top: 15px;
}

.sub-wrapper .my-artist.movie .f-imgbox{
    position: relative;
}

.sub-wrapper .videos span img{
    width: 50px;
    height: 50px;
    position: absolute;
    z-index: 999;
    top: 25%;
    left: 40%;
}

.sub-wrapper .slide-imgbox{
    padding-top: 100%;
}

.sub-wrapper .slide-imgbox img{
    position: absolute;
    top: 0;
    left: 0;
}

.grey-listbtn{
    border: 1px solid var(--font-color);
    margin-left: 15px;
}

.funding-applybtn{
    display: block;
    text-align: center;
    margin: auto;
    margin-top: 80px;
}

.apply-form .form-box:has(.reword-addbtn) {
    display: initial;
}

.apply-form .funding-applyflex:has(.btn){
    display: flex;
    align-items: center;
}

.apply-form .funding-applyflex:has(.btn) button{
    margin-left: auto;
}

.funding-modalwr .modal-content{
    height: auto;
}

.funding-modalwr .modal-content .art-body{
    padding: 20px;
    padding-bottom: 0px;
}

.funding-modalwr .modal-content .art-body input:nth-child(1),.funding-modalwr .modal-content .art-body select{
    margin-bottom: 15px;
}

.funding-modalwr .modal-content .art-body input,.funding-modalwr .modal-content .art-body select{
    width: 100%;
}

.fa-trash-o:before {
    content: "\f014";
    font-size: 26px;
}

.wrapper .petition-allwrap .petition-disable{
    opacity: .5;
}

.notice-pagination .board-paging li{
    background-color: #fff;
    color: var(--font-color);
    border: 1px solid var(--gray1-color);
}

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

.notice-pagination .board-paging li.disable {
    background-color: var(--background-color);
    opacity: 0.5;
    color: var(--font-color);
}

.notice-pagination .board-paging li.paging-next{
    background: url(../images/icon/grey/ic_arright.png)no-repeat center center / 24px #FFF;
}

.notice-pagination .board-paging li.paging-prev {
    background: url(../images/icon/grey/ic_arleft.png)no-repeat center center / 24px #FFF;
}

#alert_setting_startdt{
    margin-top: -10px;
    font-size: var(--f-caption);
    color: var(--red-color);
    font-weight: 500;
}

.aritst-manage .funding-list .f-imgbox img{
    height: auto !important;
}

.aritst-manage .movie-imgwr{
    padding-top: initial;
    width: fit-content;
    margin-bottom: 10px;
}

.aritst-manage .box-text strong,.aritst-manage .funding-list .f-textbox h4{
    font-size: var(--f-small);
    line-height: 1.4;
    font-weight: 600;
    color: var(--black-color);
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: keep-all
}

.aritst-manage .my-artist.movie .f-imgbox{
    position: relative;
}

.aritst-manage .videos span img{
    width: 50px;
    height: 50px;
    position: absolute;
    z-index: 999;
    top: 25%;
    left: 40%;
}

.aritst-manage .slide-imgbox{
    padding-top: 100%;
}

.aritst-manage .slide-imgbox img{
    position: absolute;
    top: 0;
    left: 0;
}

.aritst-manage .my-artist ul{
    flex-wrap: wrap;
    width: 100%;
}

.aritst-manage .my-artist .funding-list:last-child{
    margin-right: 26px;
}

.aritst-manage .my-artist .funding-list:nth-child(4n){
    margin-right: 0px;
}

.aritst-manage .artistgoods{
    margin-bottom: initial;
}

#prj_preview{
    margin: 15px auto;
    display: block;
    text-align: center;
    margin-bottom: 0px;
}

.prj-body input,.alb-body input,.vid-body input{
    margin-bottom: 10px;
}

.prj-body li,.alb-body li,.vid-body li{
    margin-top: 15px;
}

.prj-body li:first-child,.alb-body li:first-child,.vid-body li:first-child{
    margin-top: 0px;
}

#prjModal .modal-content, #albModal .modal-content, #vidModal .modal-content{
    height: auto;
}

.mypage-artistwr{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.mypage-artistwr .swiper-slide{
    width: calc(25% - 20px);
    margin-right: 26px;
    margin-bottom: 26px;
}

.mypage-artistwr .swiper-slide:nth-child(4n){
    margin-right: 0px;
}

.maypage-proallbox{
    display: flex;
    flex-direction: column;
    margin-right: 26px;
    margin-bottom: 40px;
    width: calc(100%/4 - 19.5px);
    position: relative;
    cursor: pointer;
}

.maypage-proallbox .project-modifybtn{
    display: flex;
}

.maypage-proallbox .project-modifybtn button{
    padding: 5px 15px;
    font-size: var(--f-caption);
    border-radius: 30px;
    background-color: var(--background-color);
    width: 100%;
    background-color: #fff;
    border: 1px solid #ddd;
    background-color: #f5f6fa7a;
}

.maypage-proallbox .project-modifybtn button:first-child{
    margin-right: 15px;
}

.maypage-proallbox .project-modifybtn button:first-child:hover{
    color: var(--primary-color);
    transition: var(--transition);
}


.maypage-proallbox .project-modifybtn button:last-child:hover{
    color: var(--red-color);
    transition: var(--transition);
}

.maypage-proallbox:nth-child(4n){
    margin-right: 0px;
}

.request-proallbox{
    width: calc(100%/3 - 19.5px);
}

.request-proallbox:nth-child(3n){
    margin-right: 0;
}

.request-proallbox:nth-child(4n){
    margin-right: auto;
}

.classic-mypagewr .request-proallbox .petition-wrbox{
    padding: 30px;
}

.project-managewr{
    display: flex;
    flex-wrap: wrap;
}

.mypage-prowr{
    position: relative;
    padding-top: 125%;
    border: 1px solid var(--border-color);
    overflow: hidden;
    border-radius: 6px;
    box-shadow: 0px 3px 6px 0px #f3f4f8;
}

.mypage-prowr img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.mypage-subbox:nth-child(4n){
    margin-right: 0px;
}

.mypage-subbox p{
    font-size: var(--f-small);
    line-height: 1.4;
    font-weight: 600;
    color: var(--black-color);
    margin-top: 12px;
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: keep-all;
    height: 40px;
    margin-bottom: 10px;
}

.modify-artistmodal .modal-content{
    height: auto;
}

.modify-artistmodal input{
    margin-top: 10px;
    margin-bottom: 15px;
}

.modify-artistmodal select{
    width: 100%;
}

.modify-moviebox h3{
    font-size: var(--f-normal);
    margin-top: 10px;
}

.modify-moviebox  .movie-subbox{
    width: calc(50% - 13px);
    margin-right: 26px;
    margin-bottom: 26px;
    margin-top: 0px;
}

.modify-moviebox  .movie-subbox:nth-child(2n){
    margin-right: 0px;
}

.sub-wrapper .swiper-wrapper{
    margin-top: 40px;
}

.modify-moviebox .swiper-wrapper{
    flex-wrap: wrap;
    margin-top: 0px;
}

.modify-moviebox  .artist-detailwr .swiper{
    display: flex;
    flex-wrap: wrap;
}

.modal-body.vid-body{
    padding: 20px;
}

.modal-body.vid-body li{
    display: flex;
    flex-direction: column;
}

.apply-form .filebox img{
    display: block;
    margin: 20px auto;
    text-align: center;
    margin-top: 20px;
    margin-right: 20px;
}

.apply-form .filebox:nth-child(2n) img{
    margin-right: 0px;
}

.modal-footer button:first-child{
    margin-right: 10px;
}

.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
    border: 1px solid var(--primary-color) !important;
    background: var(--secondary-color) !important;
    color: #fff!important;
    text-align: center;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
    text-align: center;
}

.form-box input.datepicker{
    cursor: pointer;
    position: relative;
}

.form-box input.datepicker::placeholder{
    font-size: var(--f-small);
}

.mypage-management li button.active,.mypage-management li button.tabclick{
    color: var(--primary-color);
    background-color: #fff;
}

.mypage-management li img.active{
    filter: none;
}

.reword-addwr input{
    margin-top: 10px;
    margin-bottom: 15px;
}

.apply-simpleinfor{
    margin-top: 40px;
}

.apply-form form .file-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

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

.pro-summ {
    margin-top: 30px;
}

.classic-mypagewr .petition-wrbox{
    margin-bottom: 20px;
    border-radius: 6px;
    border-top: 0px;
    border: 1px solid var(--gray1-color);
    box-shadow: 0px 3px 6px 0px #f3f4f8;
}

.classic-mypagewr .petition-wrbox .peti-txtwr p{
    margin: 0px;
    width: 90%;
}

.classic-mypagewr .petition-wrbox .f-textbox li span.ml-4{
    font-size: var(--f-caption);
}

.classic-mypagewr .petition-wrbox::after{
    display: none;
}

.classic-mypagewr .commentid .comment-last p:nth-child(1):hover {
    color: var(--red-color);
    transition: var(--transition);
}

.mypage-setbox.first .avatar-form .avatar{
    width: 120px;
    height: 120px;
}

.myartist-followbox .myartist-item .team-imgbox{
    position: initial;
}

.myartist-followbox .myartist-item{
    margin-right: 26px;
    margin-bottom: 26px;
    width: calc(100% / 7 - 22.3px);
    position: relative;
}

.myartist-followbox .myartist-item:nth-child(7n){
    margin-right: 0px;
}

.myartist-followbox ul{
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.myartist-followbox .myartist-item h4{
    font-size: var(--f-small);
    color: var(--black-color);
    text-align: center;
    margin-top: 12px;
}

.project-managewr .thum-heart{
    top: 15px;
    right: 15px;
}

.mypagefollow-wrbox .project-managewr{
    margin-bottom: 40px;
}

.mypagefollow-wrbox .maypage-proallbox{
    margin-bottom: 6px;
}

.myproject-followbox .funding-list{
    margin-bottom: 26px;
}

.myproject-followbox .funding-list:nth-child(4n){
    margin-right: 0px;
}

.myproject-followbox .funding-list .f-imgbox{
    position: relative;
    padding-top: 125%;
    border: 1px solid var(--border-color);
    overflow: hidden;
    border-radius: 6px;
    box-shadow: 0px 3px 6px 0px #f3f4f8;
}

.myproject-followbox .funding-list .f-imgbox img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  
}

.nocontentsbox{
    width: 100%;
}

.classic-mypagewr .listinfor{
    justify-content: flex-end;
    margin-top: 0px;
}

/* 크레딧 모달 */
.coin-chargebox .coinmodal-list .coinbutton{
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--f-normal);
    color: #fff;
    width: 150px;
    padding: 10px 20px;
    border-radius: 50px;
    background-color: var(--secondary-color);
    font-weight: 500;
    border: 2px solid #fff;
}

.coinbutton img{
    width: 20px;
}

.coin-chargebox .coinmodal-list .coinbutton:hover{
    opacity: 0.9;
    transition: var(--transition);
}

.coin-chargebox .coinmodal-list p{
    font-size: var(--f-normal);
    color: var(--black-color);
    font-weight: 600;
    margin-right: auto;
}

.coin-chargebox .coinmodal-list p span{
    font-size: var(--f-small);
    color: var(--primary-color);
}

.coin-chargebox .coinmodal-list input{
    margin-right: 15px;
}

.coin-chargebox .coinmodal-list{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 17px;
    padding-bottom: 17px;
    border-bottom: 1px dashed var(--border-color);
}

.coin-chargebox .coinmodal-list.last{
    border-bottom: none;
}

.coin-chargebox{
    padding: 40px;
}

.coin-modal{
    height: auto;
}

.coin-completebtn{
    width: 100%;
    background-color: #fff;
    border: 1px solid var(--primary-color);
    border-radius: 6px;
    padding: 15px;
    color: var(--primary-color);
    font-size: var(--f-normal);
    letter-spacing: 0.8px;
}

.coin-completebtn:hover{
    opacity: 0.9;
    transition: var(--transition);
    background-color: #b4966a0a;
}

.coinmore-wrbox {
    background-color: var(--background-color);
    padding: 20px 40px;
}

.coinboard p {
    font-size: var(--f-caption);
    margin-top: 5px;
}

.coin-modal .modal-inner {
    padding: 0;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

#toc-toggle {
    cursor: pointer;
    color: var(--font-color);
    font-size: var(--f-middle);
}

.coinmore > p {
    font-size: var(--f-normal);
    font-weight: 500;
    color: var(--black-color);
}

.coinmore{
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.coinboard{
    padding: 20px 0;
}

.cointext-wr{
    margin-right: auto;
}

.coin-modal input[type="radio"]{
    vertical-align: middle;
}

.coin-modal input[type="radio"] {
    appearance: none;
    border: max(2px, 0.1em) solid var(--gray1-color);
    border-radius: 50%;
    width: 18px;
    height: 18px;
    padding: 0px;

}

.coin-modal input[type="radio"]:checked {
    border: 0.4em solid var(--primary-color);
}

.coin-modal input[type="radio"]:focus-visible {
    outline-offset: max(2px, 0.1em);
}

.coin-modal input[type="radio"]:hover {
    box-shadow: 0 0 0 max(4px, 0.2em) var(--border-color);
    cursor: pointer;
    transition: var(--transition);
}

.coin-modal input[type="radio"]:hover+span {
    cursor: pointer;
}

.coin-modal input[type="radio"]:disabled {
    background-color: var(--border-color);
    box-shadow: none;
    opacity: 0.7;
    cursor: not-allowed;
}

.coin-modal input[type="radio"]:disabled+span {
    opacity: 0.7;
    cursor: not-allowed;
}

/* 회원탈퇴하기 모달 */
.memberout-modal{
    height: auto;
}

.memberout-modal .modal-inner{
    padding: 40px;
    text-align: center;
}

.memberout-modal .modal-inner img{
    border-radius: 50px;
    background-color: var(--background-color);
    border: 1px dashed var(--gray1-color);
    padding: 13px;
    display: block;
    text-align: center;
    margin: auto;
    width: 65px;
    height: 65px;
}

.memberout-modal .modal-inner h1{
    font-size: 20px;
    margin-top: 30px;
    margin-bottom: 15px;
    color: var(--black-color);
}

.memberout-modal .modal-inner p{
    font-size: var(--f-normal);
}

.memberout-modal .memberout-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 30px;
}

.memberout-modal .memberout-btn button{
    padding: 15px 40px;
    border-radius: 4px;
    background-color: var(--font-color);
    color: #fff;
    font-weight: 600;
    letter-spacing: 1px;
    font-size: var(--f-small);
    box-sizing: border-box;
    border: 1px solid transparent;
    width: 50%;
}

.memberout-modal .memberout-btn button:hover{
    opacity: 0.9;
    transition: var(--transition);
}


.memberout-modal .memberout-btn button:first-child{
    background-color: var(--background-color);
    margin-right: 15px;
    color: var(--font-color);
}

.admin-btnwp .btn {
    padding: 0 20px;
    box-shadow: 0 1px 3px 3px rgb(180 150 106 / 10%), 0px 1px 20px 0px rgb(180 150 106 / 5%);
}

.classic-mypagewr .commentid li.last{
    margin-left: auto;
}

.classic-mypagewr .commentid .comment-last{
    margin-left: initial;
}

.classic-mypagewr .commentid li:after{
    display: none;
}

.mypage-badge{
    position: absolute;
    top: 7px;
    right: 7px;
    font-size: 10px;
    color: #fff;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 4px;
}

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

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

.mypage-badge.red{
    background-color: #ff4f65;
}

.classic-mypagewr .avatar-form .avatar::after {
    background: url(../images/icon/grey/ic_set.png)no-repeat center center /20px var(--white-color);
}

.classic-mypagewr .w3-bar{
    margin-bottom: 0px;
}

/* selectbox */
.custom-select {
    position: relative;
    width: 100%;
}

.custom-select select {
    display: none;
}

.select-selected {
    background-color: #fff;
}

.select-selected:after {
    position: absolute;
    content: "";
    top: 25px;
    right: 20px;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-color: #ddd transparent transparent transparent;
}

.select-selected.select-arrow-active:after {
    border-color: transparent transparent #ddd transparent;
    top: 18px;
}

.select-selected {
    padding: 15px 20px;
    border: 1px solid var(--gray1-color);
    border-color: var(--gray1-color);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 0px, rgba(0, 0, 0, 0.04) 0px 2px 4px;
    border-radius: 4px;
    cursor: pointer;
    user-select: none;
    font-weight: 500;
    color: var(--black-color);
}

body:has(.select-arrow-active) .select-selected{
    background-color: var(--background-color);
}

.select-items div{
    padding: 15px 20px;
    border-bottom: 1px solid var(--gray1-color);
}

.select-items div:last-child{
    border-bottom: 0px;
}

.select-items {
    position: absolute;
    background-color: #fff;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99;
    border: 1px solid var(--gray1-color);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 0px, rgba(0, 0, 0, 0.04) 0px 0px 30px;
}

.select-hide {
    display: none;
}

.select-items div:hover,
.same-as-selected {
    background-color: var(--background-color);
    cursor: pointer;
}

.choice-allprice{
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 15px 20px;
    margin-top: 15px;
    background-color: var(--background-color);
    border-radius: 4px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 0px, rgba(0, 0, 0, 0.04) 0px 2px 4px;
}

.choice-allprice p{
    font-weight: 500;
    color: var(--black-color);
    font-size: var(--f-normal);
}

.choice-allprice p span{
    color: var(--red-color);
    font-size: var(--f-normal);
    font-weight: 500;
}

.choice-thisbox{
    display: flex;
    align-items: center;
    margin-top: 15px;
    padding: 15px 20px;
    background: var(--background-color);
    border-radius: 4px;
}

.choice-thisbox img{
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.choice-thisbox p{
    font-size: var(--f-caption);
    color: var(--black-color);
    font-weight: 400;
}

.funding-selectboxwr{
    height: auto;
    overflow: auto;
}

.funding-selectboxwr::-webkit-scrollbar {
    width: 10px;
}

.funding-selectboxwr::-webkit-scrollbar-thumb {
    background-color: #d9d9d9;
}

.funding-selectboxwr::-webkit-scrollbar-track {
    background-color: #f5f6fa;
}

/* 반려 모달창 */
.companion-modal{
    z-index: 999;
    display: block;
    background-color: rgb(0 0 0 / 70%);
}

.companion-modal .modal-content{
    transform: translateY(50%);
}

.companion-modal .apply-info{
    margin-top: 30px;
    background: url(../images/icon/black/ic_info.png)no-repeat center left 20px /20px #f0142f0f;
    color: var(--red-color);
    border: none;
    border: 1px solid var(--red-color);
    box-sizing: border-box;
}

.companion-modal .memberout-modal .modal-inner p{
    font-size: var(--f-small);
}

#request_comm .list-mini h5{
    padding-right: 100px;
}

#request_comm .list-mini{
    position: relative;
}

#request_comm .list-mini .list-modify{
    position: absolute;
    right: 20px;
    top: 20px;
}

/* 회사소개페이지 */
@import url('https://fonts.cdnfonts.com/css/bargemo');

.introduce-allwrapper{
    overflow: hidden;
}


.introduce-allwrapper .box {
    width: 100%;
    height: 100%;
    position: relative;
    color: #ffffff;
    background: url('/assets/images/introduce/banner.png') center center / cover no-repeat; 
    /* width: 1920px;  */
    height:840px; 
    margin: auto;
}

body:has(.introduce-mainheader){
    background-color: #000;
}

nav.introduce-mainheader{
    width: 100%;
    height: 180px;
    position: fixed;
    top: 0;
    left: 0;
    backdrop-filter: blur(3px);
    z-index: 998;
    border-bottom: 1px solid transparent;
}

.header-inner{
    max-width: 1300px;
    width: 100%;
    height: 160px;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: env(safe-area-inset-top);
    left: 0;
    right: 0;
    z-index: 999;
}

.introduce-mainheader .left, .introduce-mainheader .right {
    height: 56px;
    display: flex;
    align-items: center;
    position: absolute;
}

.introduce-mainheader .left > img{
    width: 200px;
    cursor: pointer;
}

.introduce-mainheader .left {
    left: 0;
    top: 20px;
}

.introduce-mainheader .right {
    right: 0;
    top: 20px;
}

.middle-logo img{
    width: 50%;
}

.middle-logo{
    text-align: center;
    cursor: pointer;
}

.introduce-mainheader.scroll {
    background-color: rgba(0, 0, 0, .4);
    height: 100px;
    border-bottom: 1px solid #ffffff40;
    width: 100%;
}

.introduce-mainheader.scroll .middle-logo{
    display: none;
}

.introduce-mainheader.scroll .right button{
    background-color: rgba(0, 0, 0, .2);
    border: 1px solid #fff;
}

.introduce-mainheader.scroll .right button:hover{
    background-color: rgba(255, 255, 255, .1);
}

.middle-logo p{
    color: #Fff;
    font-weight: 300;
}

.introduce-mainheader .right button{
    padding: 10px 30px;
    font-size: var(--f-normal);
    color: #Fff;
    background-color: transparent;
    border: 1px solid #b4966a9e;
    border-radius: 30px;
}

.introduce-mainheader .right button:hover{
    background-color: rgba(0, 0, 0, .5);
    transition: var(--transition);
}

.introduce-allwrapper .box h1{
    position: absolute;
    transform: translateY(-45%);
    top: 40%;
    font-family: 'Bargemo', sans-serif;
    color: #fff;
    font-size: 170px;
    width: 100%;
    text-align: center;
    font-weight: 400;
}

.introduce-allwrapper .box p{
    position: absolute;
    top: 52%;
    font-family: 'Bargemo', sans-serif;
    color: #ddd;
    width: 100%;
    text-align: right;
    font-weight: 400;
    right: 18%;
    font-size: 30px;
}

.introduce-allwrapper .box p::before{
    position: absolute;
    content: "";
    width: 83%;
    width: calc(100% - 270px);
    height: 2px;
    background-color: #fff;
    left: 0;
    top: 50%;
    animation-name: line1;
    animation-duration: 2.5s;
    animation-timing-function: linear;
    animation-direction: alternate;
}

@keyframes line1 {
    0%   { width: 10%;}
    50% {width: 50%;}
    100% { width: calc(100% - 270px);}
}

.introduce-aboutwr{
    overflow: hidden;
    padding-top: 240px;
    position: relative;
    padding-bottom: 120px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='355' height='355' viewBox='0 0 800 800'%3E%3Cg fill='none' stroke='%23251F16' stroke-width='1'%3E%3Cpath d='M769 229L1037 260.9M927 880L731 737 520 660 309 538 40 599 295 764 126.5 879.5 40 599-197 493 102 382-31 229 126.5 79.5-69-63'/%3E%3Cpath d='M-31 229L237 261 390 382 603 493 308.5 537.5 101.5 381.5M370 905L295 764'/%3E%3Cpath d='M520 660L578 842 731 737 840 599 603 493 520 660 295 764 309 538 390 382 539 269 769 229 577.5 41.5 370 105 295 -36 126.5 79.5 237 261 102 382 40 599 -69 737 127 880'/%3E%3Cpath d='M520-140L578.5 42.5 731-63M603 493L539 269 237 261 370 105M902 382L539 269M390 382L102 382'/%3E%3Cpath d='M-222 42L126.5 79.5 370 105 539 269 577.5 41.5 927 80 769 229 902 382 603 493 731 737M295-36L577.5 41.5M578 842L295 764M40-201L127 80M102 382L-261 269'/%3E%3C/g%3E%3Cg fill='%23292218'%3E%3Ccircle cx='769' cy='229' r='5'/%3E%3Ccircle cx='539' cy='269' r='5'/%3E%3Ccircle cx='603' cy='493' r='5'/%3E%3Ccircle cx='731' cy='737' r='5'/%3E%3Ccircle cx='520' cy='660' r='5'/%3E%3Ccircle cx='309' cy='538' r='5'/%3E%3Ccircle cx='295' cy='764' r='5'/%3E%3Ccircle cx='40' cy='599' r='5'/%3E%3Ccircle cx='102' cy='382' r='5'/%3E%3Ccircle cx='127' cy='80' r='5'/%3E%3Ccircle cx='370' cy='105' r='5'/%3E%3Ccircle cx='578' cy='42' r='5'/%3E%3Ccircle cx='237' cy='261' r='5'/%3E%3Ccircle cx='390' cy='382' r='5'/%3E%3C/g%3E%3C/svg%3E");
}

.introduce-header{
    width: 100%;
    margin: auto;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    width: 100%;
    max-width: 1300px;
}

.intro-numberbox{
    text-align: center;
    margin-right: 80px;
}

.intro-numberbox h3{
    font-size: 120px;
    font-family: 'Bargemo', sans-serif;
    color: var(--secondary-color);
    opacity: 0.5;
    font-weight: 700;
}

.intro-numberbox p{
    font-size: 30px;
    font-family: 'Bargemo', sans-serif;
    color: var(--secondary-color);
    font-weight: 700;
}

.intro-textbox h1,.intro-textbox h1 span{
    font-size: 44px;
    color: #fff;
}

.intro-textbox h1 span{
    text-shadow: -1px -1px 0 var(--secondary-color), 1px -1px 0 var(--secondary-color), -1px 1px 0 var(--secondary-color), 1px 1px 0 var(--secondary-color);
    color: var(--black-color);
}

body:has(.introduce-mainheader.scroll) .introduce-aboutwr .intro-box1{
    content: "";
    width: 85%;
    height: 2px;
    background-color: var(--secondary-color);
    animation-name: line1;
    animation-duration: 1.5s;
    animation-timing-function: linear;
    animation-direction: alternate;
    /* animation-iteration-count: infinite; */
    animation-fill-mode:forwards;
    margin-top: 80px;
    margin-left: auto;
    opacity: 0.5;
}

.intro-historybox{
    width: 100%;
    max-width: 1300px;
    margin: auto;
    display: flex;
    align-items: flex-start;
    margin-top: 80px;
}

.intro-historybox .history-box{
    margin-right: 60px;
}

.intro-historybox .history-box:last-child{
    margin-right: 0px;
}

.intro-historybox .history-img img{
    width: 18%;
    margin-bottom: 40px;
}

.intro-historybox .history-box:hover .history-img img{
    transform: scale(1.2);
    cursor: pointer;
    transition: var(--transition);
}

.intro-historybox .history-box:hover{
    cursor: pointer;
}

.intro-historybox .history-box:not(:hover) .history-img img{
    transition: 0.5s ease-out;
}

.necessity-box:hover{
    width: 85%;
    cursor: pointer;
    transition: var(--transition) !important;
}

.necessity-box:not(:hover){
    width: 80% !important;
    transition: var(--transition) !important;
}

.platform-box:hover{
    animation-name: top;
    animation-duration: 1s;
    cursor: pointer;
}


@keyframes top {
    0% {
      transform: translateY(0);
    }
    
    100% {
        transform: translateY(-10%);
    }
}

.intro-historybox h5{
    font-size: 18px;
    color: #fff;
    margin-bottom: 15px;
    border-top: 1px solid #333;
    padding-top: 15px;

}

.intro-historybox p{
    color: #fff;
    font-size: var(--f-normal);
}

.intro-textbox p{
    color: #fff;
    font-size: var(--f-normal);
    margin-top: 15px;
}

.introduce-necesswr{
    width: 100%;
    max-width: 1300px;
    margin: auto;
    padding-top: 120px;
    overflow: hidden;
}

.necessity-box{
    background-color: #0D0D0D;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 60px;
    border-radius: 150px;
    width: 80%;
    height: 160px;
    margin-left: auto;
    padding-left: 100px;
}

.necessity-box:last-child{
    margin-bottom: 0px;
    background-color: #333333;
}

.necessity-box .checkbox-img{
    width: 8%;
}

.necessity-box .checkbox-img img{
    width: 35px;
}

.necessity-box p{
    font-size: 20px;
    color: #fff;
}

.necessity-wrbox{
    margin-top: 80px;
}

.intro-necessbox{
    position: relative;
}

body:has(.introduce-mainheader.scroll) .intro-necessbox .intro-box2{
    content: "";
    width: 2px;
    height: 100%;
    background-color: var(--secondary-color);
    position: absolute;
    left: 6%;
    top: 0;
    animation-name: line2;
    animation-duration: 4s;
    animation-timing-function: linear;
    animation-direction: alternate;
    /* animation-iteration-count: infinite; */
}

@keyframes line2 {
    0%   { height: 5%;}
    50%  {height: 50%;}
    100% { height:100%;}
}

.necessity-box:nth-child(2){
    background-color: #1A1A1A;
}

.introduce-solutionwr{
    overflow: hidden;
    margin: 120px auto; 
    padding: 120px 0;
    margin-bottom: 0px;
    background-color: #121212;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='355' height='355' viewBox='0 0 800 800'%3E%3Cg fill='none' stroke='%2331281D' stroke-width='1'%3E%3Cpath d='M769 229L1037 260.9M927 880L731 737 520 660 309 538 40 599 295 764 126.5 879.5 40 599-197 493 102 382-31 229 126.5 79.5-69-63'/%3E%3Cpath d='M-31 229L237 261 390 382 603 493 308.5 537.5 101.5 381.5M370 905L295 764'/%3E%3Cpath d='M520 660L578 842 731 737 840 599 603 493 520 660 295 764 309 538 390 382 539 269 769 229 577.5 41.5 370 105 295 -36 126.5 79.5 237 261 102 382 40 599 -69 737 127 880'/%3E%3Cpath d='M520-140L578.5 42.5 731-63M603 493L539 269 237 261 370 105M902 382L539 269M390 382L102 382'/%3E%3Cpath d='M-222 42L126.5 79.5 370 105 539 269 577.5 41.5 927 80 769 229 902 382 603 493 731 737M295-36L577.5 41.5M578 842L295 764M40-201L127 80M102 382L-261 269'/%3E%3C/g%3E%3Cg fill='%23332B1E'%3E%3Ccircle cx='769' cy='229' r='5'/%3E%3Ccircle cx='539' cy='269' r='5'/%3E%3Ccircle cx='603' cy='493' r='5'/%3E%3Ccircle cx='731' cy='737' r='5'/%3E%3Ccircle cx='520' cy='660' r='5'/%3E%3Ccircle cx='309' cy='538' r='5'/%3E%3Ccircle cx='295' cy='764' r='5'/%3E%3Ccircle cx='40' cy='599' r='5'/%3E%3Ccircle cx='102' cy='382' r='5'/%3E%3Ccircle cx='127' cy='80' r='5'/%3E%3Ccircle cx='370' cy='105' r='5'/%3E%3Ccircle cx='578' cy='42' r='5'/%3E%3Ccircle cx='237' cy='261' r='5'/%3E%3Ccircle cx='390' cy='382' r='5'/%3E%3C/g%3E%3C/svg%3E");
}

.intro-solutionbox{
    width: 100%;
    max-width: 1300px;
    margin: auto;
    margin-top: 80px;
}

.solution-prev,.solution-next{
    border-radius: 100px;
    border: 1px solid #ffffff8c;
    height: 150px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 0 60px;
    background-color: #000;
}

.solution-next{
    background-color: #8b7047;
    border: none;
    width: 60%;
}

.solution-box:last-child{
    margin-bottom: 0px;
}

.solution-prev h3,.solution-next h3{
    font-size: 20px;
    color: #fff;
    margin-bottom: 10px;
}

.solution-prev p,.solution-next p{
    color: #fff;
    opacity: 0.5;
}

.solution-box{
    display: flex;
    align-items: center;
    margin-bottom: 60px;
}

.solution-box .checkimg{
    text-align: center;
    width: 25%;
}

.solution-box .checkimg img{
    width: 30%;
    opacity: 0.5;
}

.introduce-platformwr .intro-box3 {
    content: "";
    width: 83.8%;
    height: 2px;
    background-color: var(--secondary-color);
    animation-name: line3;
    animation-duration: 4s;
    animation-timing-function: linear;
    animation-direction: alternate;
    margin-top: 80px;
    margin-right: auto;
    animation-iteration-count: infinite;
    animation-fill-mode:forwards;
    opacity: 0.5;
}

@keyframes line3 {
    0% {
        width: 10%;
    }

    50% {
        width: 50%;
    }

    100% {
        width: 83.8%;
    }
}

.intro-platformbox{
    width: 100%;
    max-width: 1300px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    margin-top: 80px;
}

.platform-box{
    width: 28%;
    background-color: #1a1a1a;
    margin-right: 60px;
    border-radius: 30px;
    text-align: center;
    height: 450px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.platform-box:last-child{
    margin-right: 0px;
}

.platform-box .formimg-box img{
    width: 90px;
}

.platform-box h3{
    font-size:var(--f-middle);
    color: var(--secondary-color);
    margin-top: 30px;
    margin-bottom: 20px;
}

.platform-box p{
    color: #fff;
    word-break: keep-all;
    width: 70%;
    font-size: var(--f-normal);
}

.platform-box:nth-child(2){
    margin-top: 80px;
}

.intro-welcomewr{
    background: url(/assets/images/introduce/bottom.png)no-repeat top center/ cover;
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    height: 53vh;
    text-align: center;
}

.intro-welcomewr h1{
    font-size: var(--f-large);
    color: #fff;
    line-height: 1.6;
}

.intro-welcomewr .welcome-textbox{
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
    top: 33%;
    width: 100%;
}

.intro-welcomewr .welcome-textbox button{
    padding: 14px 40px;
    font-size: 20px;
    color: #Fff;
    background-color: transparent;
    border: 1px solid #b4966a9e;
    margin-top: 50px;
    background-color: rgba(0, 0, 0, .5);
    border-radius: 30px;
}

.intro-welcomewr .welcome-textbox button:hover{
    background-color: rgba(0, 0, 0, 1);
    transition: var(--transition);
}

body:has(.introduce-mainheader) .footer-wp{
    background-color: #000;
}

body:has(.introduce-mainheader) .footer-top {
    border-bottom: 1px solid var(--black-color);
}

body:has(.introduce-mainheader) .footer-wp{
    border-top: 1px solid var(--black-color);
}

body:has(.introduce-mainheader) .footer-top li{ 
    color: var(--gray1-color);
}

.introduce-allwrapper .box .scroll-img{
    position: absolute;
    bottom: -40px;
    left: 48.5%;
    display: inline-block;
    animation: scroll 2s linear infinite;
}

.introduce-allwrapper .box .scroll-img img{
    border-radius: 50px;
    border: 1px solid #ffffff7a;
    padding: 20px 12px;
    width: 45px;
    z-index: 999;
    background: #000;
}

@keyframes scroll {
    0% {
      transform: translateY(-50%);
      opacity: 1;
    }
    
    100% {
        transform: translateY(50%);
    }
}

.introduce-platformwr{
    padding: 120px 0;
}

.bnr-common{
    overflow: hidden;
}