body{overflow-y:scroll!important;}
/* add */

#landing.container .creaits .plan-wrap{justify-content: start;}
#sub.container #song-view .follow.is-following::before{
  background-color: #fff;
  background-image: url(/assets/img/common/ico_following.svg);
}
#creator-list button.follow{
  color: transparent;
}
#sub.container button.follow.is-following{
  background-color: #fff;
  background-image: url(/assets/img/common/ico_following.svg);
  
}
#sub.container .creator .sidebar .func .view-btn.is-following::before{
  background-color: #fff;
  background-image: url(/assets/img/common/ico_following.svg);
}

.container .mypage .profile-menu .menu-list li{
  cursor: pointer;
}

.floating-player.visible{
  opacity: 1;
  transform: translateY(0);
  transition: transform 0.3s, opacity 0.3s ease;
  z-index: 10;
}
.floating-player.invisible{
  opacity: 0;
  transform: translateY(100%);
  transition: transform 0.3s, opacity 0.3s ease;
}
.floating-player .control-buttons{
display: flex;
justify-content: center;
align-items: center;
}
.floating-player .player-content .player-controls{
  flex-direction: row;
  gap: 2rem;
}
.floating-player .player-content .progress{
  margin-top: 0;
}
.floating-player .player-content .player-info .thumb{
  min-width: 7rem;
}
#sub.container .song-list .list li .playbar-wrap button.state-playing[title="play"]{background-image: url(/assets/img/common/ico_pause.svg); background-size: 10px;}
.view-btn.is-following{width: 12rem!important;}
#sub.container .song-list .more-wrap{position:relative; right: unset; top: unset; display: inline-block;}
.craetor-intro{display: flex; flex-direction: column;}
.container .mypage .profile-menu.show{z-index: 1000;}
.container .language .lang-tab.show{z-index: 1000;}
#sub.container .search-wrap .search_form .input_search{color: #ddd;}
.modal-group-container{z-index: 999;}
.modal-wrap.modal-signup{z-index: 10; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.modal-wrap.modal-privacy{z-index: 11; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.modal-wrap.modal-terms{z-index: 11; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}

#sub.container .creaits .plan-wrap{justify-content: start;}
.sub-modal-wrap .modal-content .image-upload{background-color: #00000030; border: 1px solid #ffffff30;}
#sub.container .creator .cover-image{background-repeat: no-repeat; background-position: center; background-size: cover;}
.sub-modal-wrap .modal-content textarea::-webkit-scrollbar{display: none;}
.sub-modal-wrap .modal-content .image-wrap span{background: #00000030; color: #fff; padding: 1rem; border-radius: 2rem;}
#sub.container .creator .sidebar .count dl{cursor: pointer;}

#sub.container #followers .creator-list-grid,
#sub.container #following .creator-list-grid{
  grid-template-columns: repeat(3, 1fr);
  gap: 5rem;
  margin-top: 3rem;
}
@media (max-width: 1520px) {
  #sub.container #followers .creator-list-grid,
  #sub.container #following .creator-list-grid
  {grid-template-columns: repeat(2, 1fr); gap: 5rem;}
}


@media (max-width: 768px) {
  #sub.container .song-list .more-wrap{position: absolute; right:0; top: 2rem;}
  #sub.container .playlist .song-list .more-wrap{top: inherit;}
  #sub.container .myprojects .song-list .more-wrap{top: 4rem;}
}

.popup-modal{
  width: 100%;
  height: 100vh;
  /* background: #000000c2; */
  z-index: 999;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
}
.popup-modal.hidden{
  display: none;
}
.popup-modal .popup{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  min-width: 650px;
  /* min-height: 650px;
  max-width: 95%;
  max-height: 95%; */
  z-index: 1000;
  background-color: rgba(42, 42, 42, 0.7);
  backdrop-filter: blur(4px);
  border: 1px solid #555;
  text-align: left;
  padding: 3.5rem;
  border-radius: 3rem;
  box-shadow: 0 0 5rem rgba(0, 0, 0, 1);
  display: flex;
  flex-direction: column;
}
.popup-modal .popup .btn-close{
  position: absolute;
  right: 1.5rem;
  top: 1.5rem;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  border: 1px solid #555;
  background: url(/assets/img/common/ico_close.svg) no-repeat center center;  
}
.popup-modal .popup input,
.popup-modal .popup select,
.popup-modal .popup option{
 background: transparent;
 border: none;
 color: #fff;
 padding: 0;
 height: 100%;
 font-size: 1.4rem;
 color: #fff;
}
.popup-modal.payment .popup > .title{
  color: #fff;
  font-size: 2rem;
  margin-bottom: 3rem;
}
.popup-modal.payment .popup .box{
  display: flex;
  width: 100%;
  background: #242424;
  border-radius: 4.5rem;
  height: 5.5rem;
  border: 0;
  padding: 1rem 2rem;
  margin-bottom: 1rem;
}
.popup-modal.payment .popup .box .title{
  min-width: 9rem;
  font-size: 1.4rem;
  color: #aaa;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
}
.popup-modal.payment .popup .box .row{
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
}

.popup-modal.payment .popup .box .row .value{
  font-size: 1.4rem;
  color: #fff;
}
.popup-modal.payment .popup .text{
  font-size: 14px;
  color: #fff;
  font-weight: 400;
}
.popup-modal.payment .popup .box.payment-method{
  flex-direction: row;
  align-items: center;
}

.popup-modal.payment .popup .box.name{
  flex-direction: row;
  align-items: center;
}
.popup-modal.payment .popup .box input{
  background: #333;
  border-radius: 4.5rem;
  padding: 0 1.4rem;
  color: #fff;
  font-size: 1.4rem;
  width: 100%;
}
.popup-modal.payment .popup .box.name input{
  margin-right: 1.4rem;
}
.popup-modal.payment .popup .box input:last-child{
  margin-right: 0!important;
}
.popup-modal.payment .popup .box.email{
  flex-direction: row;
  align-items: center;
}

.popup-modal.payment .popup .box.email input{
  margin-right: 1.4rem;
}
.popup-modal.payment .popup .box.email input:last-child{
  margin-left: 1.4rem;
}
.popup-modal.payment .popup .box.payment-method .icon{
  margin-left: 1rem;
  height: 2.4rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  background: #fff;
  border-radius: 1.4rem;
  padding: 0.2rem 0.6rem;
}
.popup-modal.payment .popup .box.payment-method .icon .img-icon{
  height: 100%;
  object-fit: contain;
}
.popup-modal.payment .popup .box.payment-method .icon .text{
  color: #333;
  font-weight: 500;
}
.popup-modal.payment .popup .box.payment-method label{
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  padding-left: 3rem;
  user-select: none;
  font-size: 1.4rem;
  margin-right: 2rem;
  color: #fff;
}

.popup-modal.payment .popup .box.payment-method input[type="radio"]{
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.popup-modal.payment .popup .box.payment-method label::before{
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  border: 2px solid #666;
  border-radius: 50%;
  background-color: transparent;
  transition: all 0.2s ease;
  display: block !important;
}
.popup-modal.payment .popup .box.payment-method label.active{
  display: flex;
}
.popup-modal.payment .popup .box.payment-method label.hidden{
  display: none;
}
.popup-modal.payment .popup .box.payment-method input[type="radio"]:checked + *::before,
.popup-modal.payment .popup .box.payment-method label:has(input[type="radio"]:checked)::before{
  border-color: #ff6800;
  background-color: #ff6800;
}

.popup-modal.payment .popup .box.payment-method label::after{
  content: '';
  position: absolute;
  left: 0.6rem;
  top: 50%;
  transform: translateY(-50%) scale(0);
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background-color: #fff;
  opacity: 0;
  transition: all 0.2s ease;
  display: block !important;
}

.popup-modal.payment .popup .box.payment-method input[type="radio"]:checked ~ *::after,
.popup-modal.payment .popup .box.payment-method label:has(input[type="radio"]:checked)::after{
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

.popup-modal.payment .popup .box.payment-method label:hover::before{
  border-color: #ff6800;
  background: #fff;
}
.popup-modal.payment .popup .box select{
  padding: 0;
  background: #333;
  width: 100%;
  text-align: start;
  padding-left: 1.4rem;
  border-radius: 4.5rem;
}
.popup-modal.payment .popup .box select option{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.popup-modal .popup .btn-confirm{
  width: 100%;
  min-height: 5rem;
  font-size: 1.5rem;
  font-weight: 500;
  
}
.popup-modal .popup .btn-confirm:hover{
  box-shadow: 0px 0px 21px 8px rgba(255, 255, 255, 0.38);
}
.popup-modal .popup .check-wrap{
  margin: 4rem 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.popup-modal .popup .check-wrap input[type="checkbox"]{
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.popup-modal .popup .check-wrap .check-label{
  position: relative;
  display: inline-block;
  width: 1.7rem;
  height: 1.7rem;
  border: 1px solid #666;
  border-radius: 2px;
  background-color: transparent;
}
.popup-modal .popup .check-wrap input[type="checkbox"]:checked + .check-label{
  background: #333 url(/assets/img/common/ico_chk.svg) no-repeat center center;
  background-size: 10px;
}

.popup-modal .popup .check-wrap .col.c2{
  margin-left: auto;
}
.popup-modal .popup .check-wrap button{
  color: #fff;
  font-size: 1.5rem;
  font-weight: 500;
  height: 100%;
}
.popup-modal .popup .check-wrap button.btn-agreement{
  cursor: pointer;
  padding-left: 0.6rem;
}
.popup-modal .popup .check-wrap button.btn-open-agreement{
  cursor: pointer;
  border-bottom: 1px solid #fff;
}
.modal-wrap.payment-terms,
.modal-wrap.member-leave-terms{
  z-index: 1000;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.popup-modal.member-leave .popup{
  min-width: 440px;
  min-height : 400px;
}

.popup-modal.member-leave .popup .top-icon{
  max-width: 100%;
  border: 0px;
  vertical-align: top;
  object-fit: contain;
  margin-left: auto;
  margin-right: auto;
}

.popup-modal.member-leave .popup .title{
  font-size: 2.2rem;
    color: #fff;
    font-weight: 500;
    text-align: center;
    margin: 20px 0;
}
.popup-modal.member-leave .popup .description{
  font-size: 1.3rem;
  color: #888;
  text-align: center;
  margin-top: 1rem;
  line-height: 1.4;
}

#sub.container .creator .sidebar .func .share{margin-right: 0;}
#sub.container .creator .sidebar .func .thumb-right{
  margin-left: auto;
}
/* #sub.container .more-wrap{margin-left: 1rem;} */

#sub.container .playlist .playlist-header .cover{aspect-ratio: 1 / 1;}

/* #sub.container .song-list .list li .img-wrap{min-width: 6rem;} */

#sub.container #song-view .like::before{background-image: url(/assets/img/common/ico_like.svg); background-size: 1.5rem;}
#sub.container #song-view .like.is-liked::before{background-image: url(/assets/img/common/ico_like_on.svg); background-size: 1.5rem;}

.container .notice-menu ul li{
  cursor: pointer;
}
.container .notice-menu ul li:last-child{
  margin-bottom: 0;
}


#sub.container .content-area.scroll-text{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* background-image: url(/assets/img/common/bg_content_01.jpg);
  background-position: center;
  background-repeat: no-repeat; */
  padding: 6rem 4rem;
  height: 100vh;
}
#sub.container .content-area.scroll-text .title{
  margin: 0 auto;
  color: #fff;
  font-weight: 600;
  font-size: 3rem;
  margin-bottom: 6rem;
}
#sub.container .content-area.scroll-text .box{
  background-color: rgba(42, 42, 42, 0.7);
  backdrop-filter: blur(4px);
  border: 1px solid #555;
  padding: 3.5rem;
  border-radius: 3rem;
  box-shadow: 0 0 5rem rgba(0, 0, 0, 1);
  width: 60%;
  overflow-y: scroll;
  color: #ccc;
  line-height: 1.5;
  font-size: 1.4rem;

}
#sub.container .content-area.scroll-text .box::-webkit-scrollbar{
  display: none;
}
.popup-modal.add-playlist-song .popup > .title{
  background-image: url(/assets/img/common/ico_playlist_h3.svg);
  padding-left: 3rem;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 2rem;
  font-size: 2.4rem;
  color: #fff;
  font-weight: 500;
}
.popup-modal.add-playlist-song .member-playlist{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
  margin: 2rem 0;
  gap: 2rem;
  overflow-x: hidden;
  overflow-y: scroll;
}
.popup-modal.add-playlist-song .member-playlist .playlist-item{
  width: 100%;
  height: 7rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}
.popup-modal.add-playlist-song .member-playlist .playlist-item .col{
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 7rem;
  min-height: 7rem;
}
.popup-modal.add-playlist-song .member-playlist .playlist-item .col.c3{
  flex-direction: column;
  align-items: start;
  justify-content: center;
  width: 100%;
}
.popup-modal.add-playlist-song .member-playlist .playlist-item .col .img-cover{
  width: 7rem;
  height: 7rem;
  border-radius: 1.5rem;
  object-fit: cover;
  overflow: hidden;
}
.popup-modal.add-playlist-song .member-playlist .playlist-item .col .title{
  display: block;
  margin-bottom: 1rem;
  font-size: 2rem;
  font-weight: 600;
  color: #fff;
}
.popup-modal.add-playlist-song .member-playlist .playlist-item .col .text{
  color: #999;
  font-weight: 200;
  font-size: 1.6rem;
}
.popup-modal.add-playlist-song .member-playlist .playlist-item .col .btn-add-playlist-song{
  width: 4rem;
  height: 4rem;
  background: #232323 url(/assets/img/common/ico_add.svg) no-repeat center center;
  border-radius: 50%;
}
.popup-modal.add-playlist-song .member-playlist .playlist-item .col.c1{
  min-width: 4rem;
}
.popup-modal.add-playlist-song .member-playlist .playlist-item .col.c2{
  min-width: 7rem;
}
.popup-modal.add-playlist-song .member-playlist .playlist-item .col .btn-delete{
  width: 4rem;
  height: 4rem;
  background: #232323 url(/assets/img/common/ico_del.svg) no-repeat center center;
  border-radius: 50%;
}
.popup-modal.add-playlist-song .empty-msg{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #aaa;
  font-size: 1.4rem;
}
.popup-modal.add-playlist-song .empty-msg.hidden{
  display: none;
}
.popup-modal.add-playlist .popup{
  min-height: fit-content;
}
.popup-modal.add-playlist .popup > .title{
  font-size: 2.4rem;
  color: #fff;
  font-weight: 500;
}
.popup-modal.add-playlist .popup .cover-img-upload-box{
  margin: 2rem 0;
  width: 100%;
  overflow: hidden;
  height: 25rem;
  display: flex;
  position: relative;
  border-radius: 3rem;
  margin-bottom: 4rem;
}
.popup-modal.add-playlist .popup .cover-img-upload-box .cover-image.image-wrap{
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 2rem;
  overflow: hidden;
  position: relative;
}
.popup-modal.add-playlist .popup .cover-img-upload-box .cover-image.image-wrap .image-upload{
  background-color: #00000030;
  border: 1px solid #ffffff30;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: url(/assets/img/common/ico_img_upload.svg) no-repeat center center;
  background-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(4px);
}
.popup-modal.add-playlist .popup .cover-img-upload-box .cover-image.image-wrap input[type=file]{
  position: absolute;
  left: -999999px;
}
.popup-modal.add-playlist .popup .cover-img-upload-box .cover-image.image-wrap span{
  background: #00000030;
  color: #fff;
  padding: 1rem;
  border-radius: 2rem;
  font-size: 1.4rem;
  text-align: center;
  margin-top: 1rem;
  line-height: 1.4;
}
.popup-modal.add-playlist .popup .cover-img-upload-box .cover-image.image-wrap .dropbox{
  position: absolute;
  z-index: 2;
  background: rgba(0, 0, 0, 0.6);
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
  opacity: 0;
}

.popup-modal.add-playlist .popup .box{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  margin-bottom: 4rem;
}
.popup-modal.add-playlist .popup .box .label{
  color: #fff;
  font-size: 1.8rem;
  margin-bottom: 1rem;
}
.popup-modal.add-playlist .popup .box input{
  color: #fff;
  font-size: 1.4rem;
  background: #333;
  border-radius: 4.5rem;
  padding: 0 2rem;
  color: #fff;
  width: 100%;
  height: 5rem;
}
#sub.container .playlist .playlist-header .profile-wrap{
  align-items: start;
}
#sub.container .playlist .playlist-header .profile{
  align-items: center;
}

ul.pagination {
  margin-top: 3rem;
  font-size: 1.4rem;
  color: rgb(255, 255, 255);    
  display:flex;justify-content: center;align-items: center;
}
ul.pagination li{display:inline-block;}


ul.pagination li.previous a,
ul.pagination li.next a{
  display:inline-block;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  width: 45px;
  height: 45px;
  border-radius: 50px;
  cursor: pointer;
  text-transform: uppercase;
  background: url(/assets/img/common/ico_next.svg) no-repeat center center;
  transition: 0.3s ease;
}
ul.pagination li.previous a{    
  transform: rotate(180deg);    
}
ul.pagination li.previous a:before,
ul.pagination li.next a:before{
  position: absolute;
  display: inline-block;
  inset: 0;
  border-radius: 50px;
  padding: 1px;
  background: linear-gradient(50deg, rgba(34, 34, 34, 1), rgba(117, 117, 117, 1), rgba(173, 173, 173, 0.5));
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
ul.pagination li.previous.disabled a{
  cursor:default;
}
ul.pagination li.number a{
  color:#AAA;
}
ul.pagination li.number.active a{
  color:white!important;font-weight:600;
}
#sub.container .grid-wrap{display: grid; grid-template-columns: 55rem 1fr; gap: 2.5rem;} 
#sub.container .credits-box{display:block; border-radius: 2.5rem; background: linear-gradient(50deg,rgba(255, 104, 0, 1), rgba(229, 167, 124, 1)); padding: 3rem;}


@media (max-width: 1280px) {
  #sub.container .grid-wrap{display: flex; flex-direction: column;}

}

/* 결제 심사 전 임시 비활성화 */
#sub.container .credits-box .passes{display: grid; grid-template-columns: 50% 50%; margin-bottom: 3rem;}
/* 결제 심사를 위한 수정*/
/* #sub.container .credits-box .passes{display: flex; margin-bottom: 3rem;} */


/* 결제 심사 전 임시 비활성화 */
#sub.container .credits-box dl:first-child{border-right: 1px solid rgba(255, 255, 255, 0.27);}

/* 결제 심사를 위한 수정*/
/* #sub.container .credits-box dl{width: 100%;} */

#sub.container .credits-box dl dt{display: block; margin-bottom: 1.5rem; font-size: 2rem; color: #FFDCC4; font-weight: 600;}

/* 결제 심사 전 임시 비활성화 */
#sub.container .credits-box dl dd{position: relative; font-size: 2.4rem; color: #FFDCC4; font-weight: 600; padding-left: 11rem; text-align: end; display: flex; align-items: end; justify-content: end;}
/* 결제 심사를 위한 수정*/
/* #sub.container .credits-box dl dd{position: relative; font-size: 2.4rem; color: #FFDCC4; font-weight: 600; text-align: end;} */
#sub.container .credits-box dl:first-child{padding-right: 3rem;}

#sub.container .credits-box dl dd::before{display: inline-block; left: 0; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; background: url(../img/common/ico_passes_star.svg) no-repeat;}
#sub.container .credits-box dl dd span{display: inline-block; padding-right: 0.5rem; font-size: 3.6rem; color: #fff; font-weight: 800;}

/* 결제 심사 전 임시 비활성화 */
#sub.container .credits-box dl:last-child{padding-left: 3rem;}

#sub.container .credits-box button{width: 100%; border-radius: 4rem; height: 4.5rem; padding: 0 5rem; font-size: 1.5rem; background: #fff; border: 1px solid; color: #ff6800; border-image: linear-gradient(50deg, rgba(255, 104, 0, 0.3), rgba(255, 104, 0, 1)); font-weight: 500; transition: 0.3s ease;}
#sub.container .credits-box button:hover{box-shadow: 0 0 2rem rgba(255, 104, 0, 1);}

/* 결제 심사 전 임시 비활성화 */
.container .mypage .profile-menu .credits{
  display: grid;
    grid-template-columns: 1fr;
    padding: 1.5rem 0;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #444;
    gap: 2rem;
}
/* 결제 심사를 위한 수정*/
/* .container .mypage .profile-menu .credits{
    display: flex;
    border-bottom: 1px solid #444;
} */
/* 결제 심사 전 임시 비활성화 */
.container .mypage .profile-menu .credits dl{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
 /* 결제 심사를 위한 수정*/
/* .container .mypage .profile-menu .credits dl{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
} */
.container .mypage .profile-menu .credits dl dt{
  position: relative;
  font-size: 1.4rem;
  color: #fff;
  padding-left: 3rem;
}
.container .mypage .profile-menu .credits dl dt::before{
  display: inline-block;
  left: 0;
  top: 50%;
  width: 20px;
  height: 20px;
  background: url(../img/common/ico_credits_star.svg) no-repeat center;
  transform: translateY(-50%);
}
.container .mypage .profile-menu .credits dl dd{
  font-size: 1.2rem;
  color: #aaa;
  
}
/* 결제 심사 전 임시 비활성화 */
.container .mypage .profile-menu .credits dl:first-child dd{
  /* border-right: 1px solid #444; */
  /* padding-right: 1rem; */
}
 /* 결제 심사를 위한 수정*/
/* .container .mypage .profile-menu .credits dl:first-child dd{
  border-right: unset;
} */

.container .mypage .profile-menu .credits dl dd span{
  font-size: 2.4rem;
    color: #ff6800;
    font-weight: 600;
    margin-right: 3px;
    line-height: 2rem;
}
.container .mypage .profile-menu .credits dl:last-child dt{
  /* margin-left: 1rem; */
}
.sub-modal-wrap .create-song-pop{width: 45rem; padding: 1rem;}
.sub-modal-wrap .create-song-pop em{display: block; font-size: 2rem; color: #fff; font-weight: 500; margin-top: 4rem;}
.sub-modal-wrap .create-song-pop .pop-content,
.sub-modal-wrap .create-song-pop .pop-content p{text-align: center;}
.sub-modal-wrap .create-song-pop .pop-content p{margin-top: 2rem;}
.sub-modal-wrap .create-song-pop .pop-content button{margin-top: 4.5rem;}

.modal-wrap.create-song-pop em{display: block; font-size: 2rem; color: #fff; font-weight: 500; margin-top: 4rem;}
.modal-wrap.create-song-pop .pop-content,
.modal-wrap.create-song-pop .pop-content p{text-align: center;}
.modal-wrap.create-song-pop .pop-content p{margin-top: 1rem; color: #ccc; font-size: 1.6rem;}
.modal-wrap.create-song-pop .pop-content button{margin-top: 4.5rem;}
#sub.container .mv-list .list .like-button{color: transparent;}
#main.container .slide-content .swiper-slide .like-button{color: transparent;}
#sub.container .more-wrap .content .song-del{background-image: url(/assets/img/common/ico_del.svg)}
#main.container .genre-column{min-width: 0; display: flex; flex-direction: column;}
#main.container .genre-column ul li .img-wrap{min-width: 12rem;}
#main.container .genre-column ul li .text{overflow: hidden;}
#main.container .genre-column .empty-song-msg{margin: auto; color: #aaa; font-size: 1.4rem;}
#main.container .genre-column ul li .text .like-button{color: transparent;}
#sub.container .mv-list .list li{overflow: hidden;}

#sub.container .creator .create-content .song-list ul.list{height: 24rem; overflow-x: hidden; overflow-y: hidden; padding-right: 6px; transition: height 0.5s ease;}
#sub.container .creator .create-content .song-list ul.list.more{height: 60rem; overflow-y: scroll; padding-right: 0; transition: height 0.5s ease;}
#sub.container .button-pop-container.genre-select-pop{z-index: 10;}


@media(max-width:1024px){
  #main.container .genre-list{display: block;}
  #main.container .genre-column{margin-top: 5rem;}
  #main.container .genre-column ul li:last-child{border-bottom:0;}
}

#sub.container .create-mv .slider-container {
  position: relative;
  width: 100%;
  overflow: hidden;
}

#sub.container .create-mv .slides {
  display: flex;
  width: 100%;
  transition: transform 0.3s ease;
}

#sub.container .create-mv .slide {
  width: 100%;
  flex-shrink: 0;
}

/* timeline-controls는 슬라이더 하단 중앙 고정 */
#sub.container .create-mv .timeline-controls {
  position: absolute;
  bottom: 3rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: start;
  align-items: center;
  width: 100%;
  max-width: 57rem;
  margin-top: 3rem;
}

/* 진행 표시 라인 */
#sub.container .create-mv .scroll-indicator {
  position: relative;
  flex-grow: 1;
  height: 1px;
  background-color: #555;
}

#sub.container .create-mv .scroll-indicator::before,
#sub.container .create-mv .scroll-indicator::after {
  display: inline-block;
  content: "";
  position: absolute;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: #999;
}

#sub.container .create-mv .scroll-indicator::after {
  left: 0;
}

#sub.container .create-mv .scroll-indicator::before {
  right: 0;
}

/* 좌우 버튼 */
#sub.container .create-mv .nav-button-group {
  position: absolute;
  display: flex;
  border-radius: 2rem;
  background: #5a5a5a;
  z-index: 1;
  overflow: hidden;
}

#sub.container .create-mv .nav-button-group .nav-btn {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 0;
  background-color: transparent;
  background: no-repeat center center;
}

#sub.container .create-mv .nav-button-group .nav-btn.left,
#sub.container .create-mv .nav-button-group .nav-btn.right {
  background-image: url(/assets/img/common/ico_next.svg);
}

#sub.container .create-mv .nav-button-group .nav-btn.left {
  transform: rotate(180deg);
}
.popup-modal.update-project-info .popup{
  min-height: 440px;
}
.popup-modal.update-project-info .popup .box{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  margin-bottom: 4rem;
}
.popup-modal.update-project-info .popup .box .label{
  color: #fff;
  font-size: 1.8rem;
  margin-bottom: 1rem;
}
.popup-modal.update-project-info .popup .box input{
  font-size: 1.4rem;
  background: #333;
  border-radius: 4.5rem;
  padding: 0 2rem;
  color: #fff;
  width: 100%;
  height: 5rem;
  border: none;
}
.popup-modal.update-project-info .popup > .title{
  font-size: 2.4rem;
  color: #fff;
  font-weight: 500;
  margin-bottom: 5rem;
}
.sub-modal-wrap .pop-content .img-wrap{
  min-width: 7rem;
}
.sub-modal-wrap .pop-content .text{
  min-width: 0;
}
#sub.container .create-mv .scroll-wrap{
  overflow-x: scroll;
}

#sub .content-area.boardwrite form{
  width: 100%; 
  padding: 4rem; 
  background: #222; 
  border-radius: 3rem;}

#sub .content-area.boardwrite .inputrow{
    display:flex;
    align-items:center;
}
#sub .content-area.boardwrite .inputrow .inputrow-t{
    color: #eee;
    min-width: 100px;
    font-size: 1.6rem;
}
#sub .content-area.boardwrite .inputrow .inputrow-b{
  width:100%;
}
#sub .content-area.boardwrite .inputrow .inputrow-b input{
    height:6rem;
    line-height:6rem;
    border:solid 1px #666;
    background:#2c2c2c;
    color:#fff;
    width:100%;
    border-radius: 6rem;
    padding-left: 3rem;
}
#sub .content-area.boardwrite .inputrow .inputrow-b input::placeholder{
    color:#aaa;
}
#sub .content-area.boardwrite #editor{
  min-height:400px;
  width:100%;
  border: 1px solid #444;
  border-bottom-right-radius: 2.5rem;
  border-bottom-left-radius: 2.5rem;
  color: #aaa;
}

#sub .content-area.boardwrite .ql-toolbar.ql-snow{
  border-top-right-radius: 2.5rem;
  border-top-left-radius: 2.5rem;
  padding: 2rem;
}
#sub .content-area.boardwrite .inputrow-btn{
  width: 100%;
}
#sub .content-area.boardwrite .inputrow-btn button{
   height: 5rem;
    border-radius: 5rem;
    font-size: 1.5rem;
    padding: 0 4rem;
    font-weight: 400;
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    margin-left: auto;
    margin-top: 2rem;
    background: linear-gradient(10deg, rgba(255, 255, 255, 0.25), rgba(199, 199, 199, 0.15)); 
    border: 1px solid #444;
    color: #ccc;
    transition: all 0.3s ease;
}
#sub .content-area.boardwrite .inputrow-btn button:hover{
    border: 1px solid #ff6800;
    background: #fff;
    color: #ff6800;
}
#sub.container .create-mv .mv-container .mv-area{
  width: 80rem;
  height: 46rem;
}

#sub.container .create-mv .mv-container .mv-area.vertical{
  width: 40rem;
  height: 60rem;
  margin: auto;
}
#sub.container .create-mv .mv-container .mv-area.horizontal{
  width: 80rem;
  height: 46rem;
}
#sub.container .create-mv .mv-container .mv-area.square{
  width: 50rem;
  height: 50rem;
  left: 150px;
}
#sub.container .create-mv .mv-container #view-video{
  position: absolute;
  padding: 0;
}
#sub.container .create-mv .mv-container #view-video.horizontal{
  left: 75px;
  top: 75px;
}
#sub.container .create-mv .mv-container #view-video.vertical{
  left: 272px;
  top: 75px;
}
#sub.container .create-mv .mv-container #view-video.square{
  left: 225px;
  top: 75px;
}

#sub.container .create-mv .mv-container .mv-area .video-player{
  width: 100%!important;
  height: 100%!important;
  background:#000!important;
}


#sub.container .create-mv .scroll-wrap.vertical{
  height: 40rem;
}
#sub.container .create-mv .scroll-wrap.square{
  height: 28rem;
}
#sub.container .create-mv .time-item .thumb{
  margin-top: 1rem;
  height: calc(100% - 2rem)!important;
}

#sub.container #mv-play .player-box .player-content .thumb{
  height: 54rem;
}
.pricing .card dl dd strong{
  margin-right: 0.6rem;
}

#sub.container .create-mv .mv-container .download-wrap{
  display: grid;
  grid-template-columns: 1fr;
}
.pricing .card{
  width: 48rem;
}
@media (max-width: 500px) {
  .pricing .card{
    width: 100%;
  }
}



/* 모바일 햄버거 버튼 */
.hamburger {
  display:none; position:absolute; width:34px; height:34px; right:2rem; top:50%; margin-top:-17px; z-index: 1001;
}

.hamburger.active{z-index:9999;}

.hamburger i {
  position:absolute;
  height:3px;
  border-radius:2px;
  background:#111;
  transition:transform 0.45s cubic-bezier(0.9, -0.6, 0.3, 1.6), width 0.2s ease 0.2s;
}

.hamburger.active i{background:#fff;}

.hamburger i:nth-child(1) {
  top:50%;
  left:0;
  margin:-2px 0 0 0;
  width:100%;
  transform-origin:50% 50%;
}
.hamburger i:nth-child(2) {
  top:7px;
  left:0;
  width:20px;
  transform-origin:0 50%;
}
.hamburger i:nth-child(3) {
  bottom:7px;
  left:0;
  width:28px;
  transform-origin:100% 50%;
}
.hamburger.active i:nth-child(1) {
  transform:rotate(-45deg);
  transition:transform 0.45s cubic-bezier(0.9, -0.6, 0.3, 1.6) 0.1s;
}
.hamburger.active i:nth-child(2) {
  width:17px;
  transform:translate(6px, -3px) rotate(45deg);
  transition:transform 0.45s cubic-bezier(0.9, -0.6, 0.3, 1.6) 0.1s, width 0.2s ease;
}
.hamburger.active i:nth-child(3) {
  width:17px;
  transform:translate(12px, 3px) rotate(45deg);
  transition:transform 0.45s cubic-bezier(0.9, -0.6, 0.3, 1.6) 0.1s, width 0.2s ease;
}



.hamburger i{background:#222;}
.hamburger i{background:#fff;}


@media(max-width:768px){
  .nav-container{position: relative; height: 9rem; width: 100%;}
  .container .nav ul.top-menu,
  .container .nav .menu,
  .container .nav .back{display:none;}
  .hamburger{display:block !important;}
  .container .nav{justify-content: space-between; position: relative; width: 100%; height: 9rem; flex-direction: row; padding: 2rem; background: linear-gradient(180deg,rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);}
  .nav-container{position: fixed; z-index: 1000;}
  .container .nav ul{display: flex; margin-right: 5rem; gap: 1rem;}
  .container .nav ul li.mypage,
  .container .nav ul li{margin-bottom: 0;}
  .container .language .lang-tab.show{display: flex; flex-direction: column; top: 8rem; right: 2rem; bottom: inherit; left: inherit;}
  .container .mypage .profile-menu{top: 6.9rem; bottom: inherit; left: -11rem; background: rgba(30, 30, 30, 0.9);}
  .container .nav ul.menu-list{flex-direction: column; margin-right: 0;}
  #sub.container .creator .create-content .song-list ul.list{height: 37rem;}
}

/* 모바일 네비게이션 */
.mnb { position:fixed; width:100%; height:100vh; line-height:100vh; left:-100%; top:0; text-align:center; transition:left 0s calc(150ms * 2), transform 0s calc(150ms * 2);  z-index:9; font-size:0;}
.mnb::before, .mnb::after {display:inline-block;  width:100%;  height:50%; left:0; background-color:#111; transform:translateX(-110%); transform-origin:0 50%; transition:transform calc(150ms * 2) 150ms cubic-bezier(0.215, 0.61, 0.355, 1); z-index:-100;}
.mnb::before {top:0;}
.mnb::after {bottom:0;}
.mnb li {opacity:0; }
.mnb.active {left:0;}
.mnb.active::before, .mnb.active::after {transform:translateX(0); transition-delay:0s;}
.mnb.active::after {transition-delay:calc(150ms / 2);}
.mnb.active li {opacity:1;}


.mnb > ul {position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display:inline-block; line-height:1; vertical-align:middle; text-align:center; z-index:1;}
.mnb > ul > li > a {display:block; font-size:4rem; line-height:1.4; font-weight:700; color:#aaa; transition: all 0.3s ease;}
.mnb > ul > li > ul {position:absolute; left:0; opacity:0; transform:translateY(-10%); top:100%; width:100%; padding-top:2rem; visibility:hidden; z-index:2;}
.mnb > ul > li > ul > li > a {font-size:1.6rem; font-weight:200; color:#fff; line-height:1.5;}
.mnb > ul > li > ul li a::before, .mnb > ul > li > ul li a::after {display:none;}
.mnb li:hover > a {color:#fff;}

/* 
.mnb li {position:relative;}
.mnb li:hover a::before, .mnb li:hover a::after {animation:blink 1s 150ms steps(1, end) forwards infinite; transform:translateX(calc(100% - 0.5rem)); transition-duration:calc(150ms * 3);}
.mnb li:hover a::after {transition-delay:calc(150ms / 2);}
.mnb li:hover ul {opacity:1; transform:translateY(0); transition:transform calc(150ms * 2) calc(150ms * 3) cubic-bezier(0.215, 0.61, 0.355, 1), opacity calc(150ms * 2) calc(150ms * 3) cubic-bezier(0.215, 0.61, 0.355, 1), visibility 0s calc(150ms * 3);  visibility:visible;}


.mnb a {position:relative; display:inline-block; color:#364C62; overflow:hidden; padding:0.5rem 1rem 0.125rem;  transition:color 150ms cubic-bezier(0.215, 0.61, 0.355, 1), opacity 150ms cubic-bezier(0.215, 0.61, 0.355, 1), transform 150ms cubic-bezier(0.215, 0.61, 0.355, 1); z-index:1;}
.mnb a::before, .mnb a::after {display:inline-block;  width:100%; height:50%; left:0; background-color:#F5F5F5; transform:translateX(-110%); transform-origin:0 50%; transition:transform 0s cubic-bezier(0.215, 0.61, 0.355, 1); z-index:-1;}
.mnb a::before {top:0;}
.mnb a::after {bottom:0;}

.mnb ul:not(:focus-within):not(:hover) li .mnb a {opacity:1; transform:translate(0, 0);}
.mnb li a {opacity:0.25; transition-duration:calc(150ms * 3); transform:translate(0, calc(30% * -1));}
.mnb li ul a {opacity:0.8;}
.mnb li:hover > a {color:#ff6800; opacity:1; transform:translate(0, 0);}
.mnb li:hover > a:hover {color:#ff6800; transition-delay:0s;}
.mnb li:hover ~ li > a {transition-duration:calc(150ms * 3); transform:translate(0, 30%);} 
*/

/* 포인터 깜빡 거림 */
@keyframes blink {
  50%, 100% {
    opacity:0;
  }
}