@charset "UTF-8";

/*공연투자 관련*/
:root {
	--card-width: 280px;
 	--card-height: 400px;
 	--card-transition-duration: 800ms;
  	--card-transition-easing: ease;
	
}
 
 .music-section1 {
 	text-align: center;
 	/* margin-top:155px; */
 }
 
 .main-section1-list {
 	display: flex;
 	gap:0 27px;
 	margin-bottom: 93px;
 }
 
 .main-section1-list li {
 	width: 300px;
 	height:auto;
 	min-height: 370px;
 	border-radius: 20px;
 	padding: 32px 28px;
 	text-align: left;
 	color: #373333;
 	font-size: 16px;
 	font-weight: 700;
 	line-height: 24px;
 	background-repeat: no-repeat;
 	background-position: bottom 32px right 24px;
 }
 
 .main-section1-list li:first-child {
 	background-color: #F7F0DD;
 	background-image:url(../images/business/music_global_img01.png);
 }
 .main-section1-list li:nth-child(2) {
 	background-color: #E2F1E1;
 	background-image:url(../images/business/music_global_img02.png);
 }
 .main-section1-list li:nth-child(3) {
 	background-color: #E8E8FF;
 	background-image:url(../images/business/music_global_img03.png);
 }
  .main-section1-list li:last-child {
 	background-color: #FAEEE7;
 	background-image:url(../images/business/music_global_img04.png);
 }
 
 .music-global-title {
 	font-size: 32px;
 	line-height: 42px;
 	margin-bottom:10px;
 }
 
 .partner-img {
 	width: 100%;
 	height: 100px;
 	margin-bottom: 180px;
 	position:relative;
 	overflow:hidden;
 }
 
 .partner-img > ul {
 	position:absolute;
 	display:flex;
 }
 
 .partner-img > ul li {
 	width:3300px;
 	height:100px;
 	padding-right:50px;
 }
 
 .partner-img img {
 	height: 100px;
 	width:100%;
 	display:block;
 	object-fit: contain;
 }
 
 .recent-wrapper {
 	display: flex;
 	justify-content: center;
 	width: auto;
 }
 
 .recent-album-slider {
 	width: 670px;
 	height: 325px;
 	display: flex;
 	overflow:hidden;
 }
 .recent-album-slider .slick-list {
 	margin-left: -20px;
 }
 
 .recent-album-slider .slick-slide {
 	margin-left: 20px;
 } 
  
 .album-poster.slick-slide {
 	width: auto;
 	height:325px;
 }
 
 .album-poster.slick-slide img {
 	width: 100%;
 	height: 100%;
 	max-width: 325px;
 	object-fit: cover;
 }
 
 .album-poster.slick-slide:not(.slick-current){
 	opacity:0.4;
 	background-color: #ddd;
 }
 
 .album-poster {
 	width: 325px;
 	height: 325px;
 }
 
 .album-poster img {
 	width: 100%;
 	height: 100%;
 	object-fit: cover;
 }
 
 .recent-album-info {
 	width: 452px;
 	text-align: left;
 	padding: 32px 28px 32px 40px;
 }
 .recent-album-info .slick-slide {
 	height:290px;
 }

 .album-class {
 	background-color:rgba(255, 68, 56, 0.2);
 	padding: 6px 10px;
 	color: #FF4438;
 	font-weight:600;
 	border-radius: 8px;
 	line-height:normal;
 }
 
 .recent-album-title {
 	color: #373333;
 	text-overflow: ellipsis;
 	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	margin: 12px 0 32px 0;
 }
 
 .recent-album-title p {
 	cursor:pointer;
 	text-overflow: ellipsis;
   	overflow: hidden;
   	word-break: break-word; 
   	display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical
 }
 
 .recent-album-title p:hover, .recent-album-artist:hover {
 	text-decoration:underline;
 }
 
 .recent-album-title span {
 	color: #615A5A;
 	font-size: 14px;
	font-style: normal;
	font-weight: 400;
 }
 
 .recent-album-artist {
 	cursor:pointer;
 	font-size: 16px;
 	font-weight: 400;
 	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow:hidden;
 }
 
 .recent-music-arrow-mob {
 	display:none;
 }
 
 .recent-music-arrow {
 	display: flex;
 	gap: 0 15px;
 	align-items: flex-end;
 	position:absolute;
 	bottom:0;
 }
 
 .recent-music-arrow span {
 	width: 48px;
 	height: 48px;
 }
 
 .recent-music-arrow span img {
 	width: 100%;
 	height: 100%;
 	object-fit: cover;
 }
 
 
 
/*음악 제작 투가*/
 .music-section2 {
 	padding-top: 315px;
 }
 
 .music-produce-list {
 	display: grid;
 	grid-template-columns: repeat(4, 1fr);
 	gap: 27px;
 }
 
 .music-produce-list li {
 	border-radius: 8px;
 	box-shadow: 5px 6px 9.2px 0px rgba(0, 0, 0, 0.25);
 	width: 300px;
 	height: 300px;
 	overflow: hidden;
 	position: relative;
 }
 
 .music-produce-bg {
	width: 100%;
	height: 100%;
 }
 
 .music-produce-bg img {
 	width:100%;
 	height: 100%;
 	transform: scale(1.05);
 	object-fit: cover;
 }
 
 .music-produce-hover {
 	position: absolute;
 	width: 100%;
 	height: 100%;
 	color: #F5F5FA;
 	background: linear-gradient(0deg, rgba(0, 0, 0, 0.80) 0%, rgba(0, 0, 0, 0.00) 68.68%), url(<path-to-image>), transparent 50% / cover no-repeat; 	
 	transform: translateY(0);
 }
 
 .music-produce-hover > div {
 	position: absolute;
 	bottom: 30px;
 	left: 50%;
 	transform: translateX(-50%);
 	text-align: center;
 	width: 100%;
 	height: auto;
 	padding: 0 12px;
 }
 
 .music-produce-hover p {
 	font-size: 16px;
 	font-weight: 700;
 	line-height:22px;
 	margin-bottom:4px;
 	width: 100%;
 }
 
 .music-produce-hover span {
 	font-size: 14px;
 	font-weight: 400;
 }
 
 .music-produce-list li:hover .music-produce-bg img {
 	transform: scale(1);
 	transition: 0.5s;
 }
 
 .music-produce-list li:hover .music-produce-hover {
 	transform: translateY(-100%);
 	transition: 0.5s;
 }
 
 
 
 
/*공연 투자*/
 
 .music-section3 {
 	position: relative;
 	width: 100%;
 	height: 100%;
 	display: flex;
 	justify-content: center;
 	align-items: center;
 	padding-top: 176px;
 }

 .cardList-wrap {
 	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 500px;
	overflow:hidden;
 }

.cardList {
  position: absolute;
  width: calc(3 * var(--card-width));
  height: auto;
}
.cardlist-btn {
  --btn-size: 35px;
  width: var(--btn-size);
  height: var(--btn-size);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
}
.cardlist-btn.btn-left {
  left: -5%;
}
.cardlist-btn.btn-right {
  right: -5%;
}
.cardlist-btn .card-arrows {
  width: 100%;
  height: 100%;
}

.cards-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  perspective: 1000px;
}

.card {
  --card-translateY-offset: 100vh;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translateX(var(--card-translateX-offset)) translateY(var(--card-translateY-offset)) rotateY(var(--card-rotation-offset)) scale(var(--card-scale-offset));
  -webkit-transform: translate(-50%, -50%) translateX(var(--card-translateX-offset)) translateY(var(--card-translateY-offset)) rotateY(var(--card-rotation-offset)) scale(var(--card-scale-offset));
  display: inline-block;
  width: var(--card-width);
  height: var(--card-height);
  transition: transform var(--card-transition-duration) var(--card-transition-easing);
  user-select: none;
}
.card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  transition: opacity var(--card-transition-duration) var(--card-transition-easing);
  opacity: calc(1 - var(--opacity));
  /*background: linear-gradient(0deg, rgba(255, 255, 255, 0.80) 22.89%, rgba(255, 255, 255, 0.00) 83.67%), lightgray 50% / cover no-repeat;*/
}
.card-image {
  position: relative;
  width: 100%;
  height: 100%;
}
.card-image img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card.current-card::after {
	content:"";
	width: 100%;
	height:100%;
	position: absolute;
	left:0;
	top:0;
	background: linear-gradient(0deg, rgba(255, 255, 255, 0.80) 22.89%, rgba(255, 255, 255, 0.00) 83.67%);
}

.card.current-card {
  --current-card-rotation-offset: 0;
  --card-translateX-offset: 0;
  --card-rotation-offset: var(--current-card-rotation-offset);
  --card-scale-offset: 1.2;
  --opacity: 0.8;
}
.card.previous-card {
  --card-translateX-offset: calc(-1 * var(--card-width) * 1.1);
  --card-rotation-offset: 25deg;
}
.card.next-card {
  --card-translateX-offset: calc(var(--card-width) * 1.1);
  --card-rotation-offset: -25deg;
}
.card.previous-card, .card.next-card {
  --card-scale-offset: 0.9;
  --opacity: 0.4;
}

.card.extra-card {
	z-index:-1 !important;
	left:50%;
	transform:translateX(-50%);
	-webkit-transform: translate3d(-50%,0,-10px);
	-webkit-transform-style: preserve-3d;
	opacity:0.4;
}

 .infoList {
   position: absolute;
   width: calc(3 * var(--card-width));
   height: var(--card-height);
   pointer-events: none;
 }
 .card-info-wrapper {
   position: relative;
   width: 100%;
   height: 100%;
   display: flex;
   justify-content: flex-start;
   align-items: flex-end;
   perspective: 1000px;
   transform-style: preserve-3d;
 }

 .card-info-wrapper > div {
   transform: translateZ(2rem);
   transition: transform var(--card-transition-duration) var(--card-transition-easing);
   margin: 0 auto;
 }

 .current-info {
   opacity: 1;
   display: block;
 }

 .card-info-wrapper > div p {
  	position: relative;
  	white-space: nowrap;
  	color: #373333;
  	width: fit-content;
 	text-overflow: ellipsis;
 	overflow:hidden;
  	text-transform: uppercase;
  	font-size: 28px;
  	line-height:40px;
  	font-weight:700;
  	text-align:center;
 }

.info.previous-info, .info.next-info, .info.extra-info {
  opacity: 0;
  display: none;
}
 
 





 /*소속 아티스트*/
 
 .music-section4 {
 	padding-top: 110px;
 }
 .music-artist-list {
 	display: flex;
 	margin-bottom:250px;
 	justify-content: center;
 }
 
 .music-artist-list li {
 	width: 427px;
 	height:610px;
 	position: relative;
 	cursor:pointer;
 	overflow: hidden;
 }
 
 .music-artist-bg {
 	width: 100%;
 	height: 100%;
 }
 
 .music-artist-bg img {
 	object-fit: cover;
 	width: 100%;
 	height:100%;
 }
 
 .music-artist-list li .music-artsit-hover {
 	background: linear-gradient(180deg, rgba(255, 68, 56, 0.00) 0%, #FF4438 100%), url(<path-to-image>), transparent 50% / cover no-repeat;
 	width: 100%;
 	height: 100%;
 	position: absolute;
 	top: 0;
 	transform:translateY(100%);
 	transition: 0.5s;
 }
 
  .music-artsit-hover h3 {
  	text-align: center;
  	position: absolute;
  	bottom: 80px;
  	left: 50%;
  	transform: translateX(-50%);
  	color: #F5F5FA;
  }
  
   .music-artist-list li:hover .music-artsit-hover {
 	transform: translateY(0);
  }
  
  .music-modal-wrap {
  	background-color: rgba(0,0,0,0.5);
  	width: 100%;
  	height: 100%;
  	position:fixed;
  	z-index: 2000;
  	top:0;
  	display:none;
  }
  
  .music-modal {
  	width: 930px;
  	height: 673px;
  	position: absolute;
  	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
  	border-radius: 10px;
  	overflow:hidden;
  }
  
  .music-modal> div {
  	width: 100%;
  	height: 100%;
  	display:flex;
  }
  
  
  .music-modal-imgbox {
  	width: 480px;
  	height: 673px;
  	position: relative;
  }
  
  .music-modal-imgbox img {
  	width: 100%;
  	height: 100%;
  	object-fit: cover;
  }
  
  .music-modal-textbox {
  	position: absolute;
  	bottom: 60px;
  	left: 50%;
  	transform: translateX(-50%);
  	color: #F5F5FA;
  	text-align:center;
  	width: 100%;
  }
  
  .music-modal-content {
  	width: 450px;
  	height:100%;
  	padding:72px 60px 26px 44px;
  	position: relative;
  	background-color: #F5F5FA;
  }
  
  .modal-close {
  	float: right;
  	cursor:pointer;
  	position: absolute;
  	top: 16px;
  	right: 16px;
  }
  
  .modal-title {
  	color: #373333;
  	font-size: 24px;
  	font-weight: 700;
  }
  
  .music-modal-content dt {
  	font-size: 14px;
  	font-weight: 700;
  	margin: 36px 0 14px 0;
  }
  
  .music-modal-content dd {
  	font-size: 14px;
  	height: 190px;
  	margin-bottom: 44px;
  }
  
  .modal-artist-snslist {
  	margin-top: 16px;
  	display:grid;
  	grid-template-columns: repeat(2, 1fr);
  	gap: 20px 0;
  }
  
  .modal-artist-snslist li a{
  	display: flex;
  }
  .modal-artist-snslist li a img {
  	margin-right: 8px;
  }
  
  
 @media (max-width: 1025px){
 
	 :root {
		--card-width: 200px;
	 	--card-height: 300px;
	 	--card-transition-duration: 800ms;
	  	--card-transition-easing: ease;
		
	}
	
 
	 /*공통 타이틀*/
	 .title-area p {
	 	font-size: 20px;
	 	line-height: 28px;
	 	width:540px;
	 }
	 
	 .title-area h4 {
	 	font-size: 28px;
	 	line-height: 40px;
	 	margin-bottom:5px;
	 }
	 
	 .main-section1-list {
	 	flex-wrap: wrap;
	 	justify-content: center;
	 	gap: 28px;
	 	padding: 0 20px;
	 }
	 
	 .main-section1-list li {
	 	min-height: 340px;
	 	width: 325px;
	 } 
	 
	 .recent-album-info {
	 	text-align: left;
	 	padding: 40px 26px 0 40px;
	 	width: 380px;
	 	position:relative;
	 }
	 
	 .recent-album-info .slick-slide {
	 	height: 285px;
	 }
	 
	 .recent-music-arrow span {
	 	width:36px;
	 	height:36px;
	 }
	 
	 .recent-music-arrow {
	 	bottom:0;
	 }
	 
	 .music-produce-list {
	 	display:flex;
	 	flex-wrap: wrap;
	 	padding: 0 20px;
	 	justify-content: center;
	 }
	 
	 .music-produce-list li {
	 	width:226px;
	 	height: 226px;
	 	gap: 25px;
	 }
	 
	 .music-produce-list li:nth-of-type(7) {
	 	grid-column:1/2;
	 }
	 
	 .music-produce-hover p {
	 	font-size: 18px;
	 	line-height:24px;
	 }
	 
	 .music-produce-hover span {
	 	font-size: 14px;
	 	line-height:20px;
	 }
	 
	 .music-artist-list {
	 	justify-content:center;
	 }
	 
	 .music-artsit-hover h3{
	 	font-size: 30px;
	 }
	 
	 .music-artist-list li {
	 	width: 243px;
	 	height:347px;
	 }
	 
	 .music-modal {
	 	width: 720px;
	 	height: 380px;
	 }
	 .music-modal-imgbox {
	 	width:250px;
	 	height: 100%;
	 }
	 
	 .music-modal-textbox {
	    bottom: 40px;
	}
	 
	 .music-modal-textbox h1 {
	 	font-size: 44px;
	 	line-height:60px;
	 }
	 
	 .music-modal-textbox p {
	 	font-size: 18px;
	 	line-height:26px;
	 }
	 
	 .music-modal-content {
	 	width:465px;
	 	padding: 45px 45px 45px 25px;
	 	border-top-right-radius: 8px;
	 	border-bottom-right-radius: 8px;
	 }
	 
	 .modal-title {
	 	font-size: 20px;
	 	line-height: 28px;
	 }
	 
	 .sns-title {
	 	display:none;
	 }
	 
	 .music-modal-content dt {
		margin: 5px 0 28px 0; 
	 }
	 
	 .music-modal-content dd {
	 	margin-bottom:15px;
	 	height: auto;
	 }
	 
	 .modal-artist-snslist {
	 	display: flex;
	 	gap: 40px;
	 	margin-top:6px;
	 }
	 
	 .modal-artist-snslist li a span {
	 	display:none;
	 }
	 
	 
 } 
 
  
 @media (max-width: 996px){
 
 	.title-area {
 		padding: 0 20px;
 	}
 	
 	.main-section1-list li {
	 	width: 300px;
	 }
	 
	 
	 .music-produce-list li {
	 	width: 210px;
	 	height: 210px;
	 }
	 
	  .recent-album-info {
	 	padding: 40px 20px 0 40px;
	 	margin-left: 0;
	 	width: calc(100% - 325px);
	 }
 
 }
  
  
 

 @media (max-width: 767px){
 
 
	 /*공통 타이틀*/
	  .title-area p {
	 	font-size: 16px;
	 	line-height: 22px;
	 }
	 
	  .title-area h4 {
	 	font-size: 20px;
	 	line-height: 32px;
	 }
	 
	 
	 .music-global-title {
	 	font-size: 24px;
	 	line-height: 32px; 
	 }
	 
	 
	 .album-class {
	 	font-size: 11px;
	 }
	 
	 .recent-album-title, .recent-album-artist {
	 	font-size: 14px;
	 	line-height:22px;
	 }
	 
     .music-section2 {
     	padding-top:100px;
     }
     
	 .music-produce-hover > div {
	 	bottom:20px;
	 }
	 
	 .music-produce-hover p {
	 	font-size: 16px;
	 	line-height:22px;
	 }
	  
	 .music-produce-hover span {
	 	font-size: 14px;
	 	line-height:20px;
	 	bottom:30px;
	 }
	 
	 .recent-album-title span {
	 	font-size: 13px;
	 	line-height:20px;
	 }
	 
	 
	 
	 /*공연투자*/
	 .cardlist-btn.btn-left {
	 	left: 20%;
	 }
	 
	 .cardlist-btn.btn-right {
	 	right: 20%;
	 }
	 
	 
	 /*소속 아티스트*/
	 
	 .music-artist-list {
	 	flex-wrap: wrap;
	 	justify-content: center;
	 }
	 
	 
	 
 }  
 
 
 
 
 
@media (max-width: 500px){
	
	 .title-area p {
	 	width: 100%;
	 }
 
 	 .music-artist-list {
	 	flex-wrap: wrap;
	 	justify-content: center;
	 }
 	
 	.music-artist-list li {
	 	width: 50%;
	 	height: 268px;
	 }
	 
	  .main-section1-list li {
	 	width: 100%;
	 	min-height: 264px;
	 	background-position: bottom 24px right 20px;
	 	background-size: auto 92px;
	 	padding-right: 100px;
	 }
	 
	 .recent-wrapper {
	 	flex-direction: row-reverse;
	 	position:relative;
	 }
	 
	 
	 .recent-album-info {
	 	width: calc(100% - 198px);
	 	padding: 0 0 0 20px;
	 	height: 158px;
	 }
	 
	 .recent-album-title {
	 	margin-bottom:20px;
	 }
	 
	  .recent-album-artist {
		-webkit-line-clamp: 1;
	 }
		 
	 .recent-album-slider {
	 	width:158px;
	 	height: 158px;
	 }
	 .album-poster.slick-slide {
	 	width: auto;
	 	height:158px;
	 }
	 
	 .album-poster.slick-slide img {
	 	max-width: 158px;
	 }
	 
	 .recent-music-arrow {
		display:none;	 	
	 }
	 
	 .recent-music-arrow-mob {
	 	display:flex;
	 	position:absolute;
	 	bottom:-30px;
	 	right:20px;
	 	justify-content: flex-end;
	 	gap: 8px;
	 	margin:0;
	 }
	 
	 .recent-music-arrow-mob span {
	 	width: 24px;
	 	height: 24px;
	 }
	 
	 
	 .album-class {
	 	padding: 6px 8px;
	 }
	 
	 .music-produce-list {
		display: grid;
		grid-template-columns: repeat(2,1fr);
		gap: 19px;
	 }
	 
	  .music-produce-list li {
	 	width: auto;
	 	height: auto;
	 }
	 
	 .music-produce-hover span {
	 	font-size: 13px;
	 }
	 
	 
	 .card-info-wrapper > div {
 		margin-bottom: 10px;
 	}
	 
	 .card-info-wrapper > div p {
	 	font-size: 20px;
	 	line-height:28px;
	 }
	 
	 .card.extra-card {
		opacity:0;
	 }
	 
	 
	  .music-modal {
	 	width: 335px;
	 	height: 470px;
	 	border-radius:14px;
	 }
	 
	 .music-modal-imgbox {
	 	width: 100%;
	 }
	 
	 .music-modal-imgbox img {
	 	filter:brightness(0.4);
	 }
	 .music-modal-content {
	 	position:absolute;
	 	width:100%;
	 	color: #F5F5FA;
	 	padding:48px 24px 100px 24px;
	 	background-color: transparent;
	 }
	 
	 .music-modal-content dd {
	    margin-bottom: 15px;
	    height: auto;
	    font-size: 13px;
	}
	 
	 .modal-title {
	 	color: #F5F5FA;
	 }
	 
	 .modal-artist-snslist {
	 	margin-top: 24px;
	 	filter:invert(100%) sepia(93%) saturate(0%) hue-rotate(220deg) brightness(107%) contrast(106%);
	 }
	 
	 
 
 }
 
 /*폴드 접혔을때*/
 
 @media (max-width: 330px){
  	
  	.recent-wrapper {
  		flex-direction: column-reverse;
  	}
 	
 	.recent-album-info {
 		width:100%;
 		padding: 20px;
 	}
 	
 	.recent-album-slider {
 		width:200px;
 		height:200px;
 		margin-left:20px;
 	}
 	
 	.album-poster.slick-slide {
 		height:200px;
 	}
 	
 	.album-poster.slick-slide img {
 		max-width:200px;
 	}
 	
 	.music-produce-hover p {
 		font-size: 14px;
 	} 	
 	/*공연투자*/
 	.card-info-wrapper > div p {
	    white-space: break-spaces;
	    width: 100%;
	    font-size: 16px;
	    line-height: 24px;
 	}
 	
 	.cardlist-btn.btn-right {
 		right:30%;
 	}
 	
 	.cardlist-btn.btn-left {
 		left:30%;
 	}
 	
 }