@charset "UTF-8";
/**
*
* @authors Your Name (you@example.org)
* @date    2016-12-10 16:57:22
* @version $Id$
*/

.shortlist{
	display: block;
	width: 100%;
}

.shortlist .directions{
	display: block;
	width: 100%;
	font-size: 20px;
	letter-spacing: 0;
	line-height: 1.5;
	color: #000;
}

.shortlist .gallery{
	display: block;
	width: 100%;
	padding-top: 60px;
}

.shortlist .gallery .group{
	display: flex;
  flex-wrap: wrap;
  justify-content: flex-start; /* 子元素靠左 */
  gap: 30px; /* 控制行列間距 */

  padding-top: 40px;
}

.shortlist .gallery .group .item{
	position: relative;
	flex: 0 0 calc((100% - 60px) / 3); /* 3 個一行，兩個 gap */
}

.shortlist .gallery .group .item a{
	position: relative;
	display: inline-block;
	width: 100%;

	border-radius: 30px;

	aspect-ratio: 520/648;
  overflow: hidden;

  text-decoration: none;
  color: #FFF;
}

.shortlist .gallery .group .item a img{
  width: 100%;
  height: 100%;
  object-fit: cover;

  transition: transform 0.5s ease; /* 平滑過渡 */
}

.shortlist .gallery .group .item a:hover img {
    transform: scale(1.1); /* 放大 10% */
}


.shortlist .gallery .group .item a .overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40%; /* 覆蓋底部高度，可調整 */
  background: linear-gradient(to top, rgba(255,255,255,1) ,rgba(255,255,255,0)); 
  /* 從底部半透明白漸變到透明 */
  pointer-events: none; /* 避免遮擋點擊事件 */
}

.shortlist .gallery .group .item a span.vote{
	position: absolute;
	display: inline-block;

	top: 15px;
	right: 15px;

	padding: 10px;

	border-radius: 15px;
	background: rgba(255, 255, 255, 0.9);
	z-index: 1;

	color: #0062c2;
	letter-spacing: 0;
	font-size: 14px;
}

.shortlist .gallery .group .item a span.vote i{
	font-size: 18px;
	font-style: normal;
}

.shortlist .gallery .group .item a .info{
	position: absolute;
	display: block;
	width: 100%;

	bottom: 0px;
	left: 0px;
	padding: 15px;
}

.shortlist .gallery .group .item a .info .director{
	display: inline-block;
	width: 100%;
	letter-spacing: 0;
	color: #000;
}

.shortlist .gallery .group .item a .info .director span.song{
	display: inline-block;
	width: 100%;
	padding-bottom: 0px;
	font-size: 20px;
	font-weight: bold;
}

.shortlist .gallery .group .item a .info .director span.author{
	display: inline-block;
	width: 100%;
	font-size: 14px;
	font-weight: bold;
}

.shortlist .gallery .group .item a span.goin{
	position: absolute;
	display: inline-block;
	
	right: 15px;
	bottom: 22px;

	padding: 5px 10px;

	font-size: 14px;
	letter-spacing: 0;
	color: #0062c2;

	border-radius: 15px;
	background: rgba(255, 255, 255, 0.9);
}

.inner.shortpannel{
	padding-top: 0;
}

.shortlistkv{
	position: relative;
	display: block;
	width: 100%;
	height: 400px;
  overflow: hidden;
}

.shortlistkv img{
	width: 120%;
  height: 120%;
  object-fit: cover;

  filter: blur(5px); /* 数值越大越模糊 */
}

.shortlistkv .overlay {
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: rgba(0,0,0,0.1); /* 可加淡色层 */
}

.shortdetail{
	position: relative;
	display: block;
	width: 100%;
}

.shortdetail .keel{
	position: relative;
	display: flex;
	margin-top: -280px;
}

.shortdetail .keel .person{
	width: 300px;
	padding-right: 30px;
}

.shortdetail .keel .person .cover{
	display: inline-block;
	width: 100%;

	border-radius: 30px;

	border: 5px solid #FFF;

	aspect-ratio: 520/648;
  overflow: hidden;

  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.shortdetail .keel .person .cover img{
	width: 100%;
  height: 100%;
  object-fit: cover;
}

.shortdetail .keel .person .govote{
	display: inline-block;
	width: 100%;
	text-align: center;
}

.shortdetail .keel .person .govote a{
	display: inline-block;
	margin-top: 20px;
	padding: 8px 40px;
	border-radius: 30px;
	font-size: 22px;
	color: #FFF;
	letter-spacing: 0;
	background: #0060c0;
	text-decoration: none;
}

.shortdetail .keel .person .govote a:hover{
	background: #be9956;
	text-decoration: none;
}




.shortdetail .keel .intro{
	display: flex;
	flex-wrap: wrap;
	width: calc(100% - 300px);
	align-content: space-between;
}

.shortdetail .keel .intro .master{
	display: inline-block;
	width: 100%;
	padding-top: 10px;
}

.shortdetail .keel .intro .master .song{
	display: inline-block;
	width: 100%;
	padding-bottom: 5px;

	font-size: 32px;
	font-weight: bold;
	color: #FFF;
	letter-spacing: 1px;
}

.shortdetail .keel .intro .master span.author{
	display: inline-block;
	width: 100%;
	padding-bottom: 10px;

	font-size: 20px;
	color: #FFF;
	letter-spacing: 0px;
}

.shortdetail .keel .intro .master .component{
	display: flex;
	width: 100%;
	flex-wrap: wrap;
	justify-content: space-between;
}

.shortdetail .keel .intro .master .component .item{
	display: flex;
	width: 48%;
	padding-bottom: 5px;
	padding-right: 10px;
}

.shortdetail .keel .intro .master .component .item .alias{
	width: calc(100% - 196px);
	padding-right: 5px;
	font-size: 16px;
	letter-spacing: 0;
	align-self: center;
	color: #FFF;
}

.shortdetail .keel .intro .master .component .item .showtxt{
	width: 196px;
	padding: 2px 10px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.2);
	color: #FFF;
	font-size: 14px;
}

.shortdetail .keel .intro .slave{
	display: flex;
	width: 100%;
	justify-content: space-between;
	align-content: center;
	padding-bottom: 80px;
}

.shortdetail .keel .intro .slave span.vote{
	display: block;
	font-size: 16px;
	align-self: center;
	color: #FFF;
	letter-spacing: 0;
}

.shortdetail .keel .intro .slave span.vote i{
	display: inline-block;
	padding-top: 5px;
	font-size: 26px;
	font-style: normal;
	letter-spacing: 2px;
}

.shortdetail .keel .intro .slave a.btn{
	display: inline-block;
	width: 100px;
}

.shortdetail .keel .intro .information{
	display: block;
	width: 100%;
}

.shortdetail .keel .intro .information .zone{
	display: block;
	width: 100%;
	padding-bottom: 50px;
}

.shortdetail .keel .intro .information .zone span.title{
	position: relative;
	display: block;
	width: 100%;
	padding-bottom: 10px;
	font-size: 22px;
	font-weight: bold;
	letter-spacing: 0;
	color: #be9956;
}

.shortdetail .keel .intro .information .zone span.title::after{
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 4px;
	background: linear-gradient(to right, #ba9764, #051b47, #26496e);
}

.shortdetail .keel .intro .information .zone .detail{
	display: block;
	width: 100%;
	margin-top: 10px;

	font-size: 16px;
	line-height: 1.5;
}


/*大於等於1921*/
@media (min-width: 1921px) {
}


/*小於等於1920*/
@media (max-width: 1920px) {
}

/*小於等於1800*/
@media (max-width: 1800px) {
}

/*小於等於1600*/
@media (max-width: 1600px) {

}

/*小於等於1441*/
@media (max-width: 1441px) {
}

/*小於等於1280*/
@media (max-width: 1280px) {

	.shortdetail .keel{
		margin-top: -250px;
	}

	.shortdetail .keel .person{
		width: 250px;
	}

	.shortdetail .keel .intro{
		width: calc(100% - 250px);
	}

	.shortdetail .keel .intro .master .song{
		font-size: 28px;
	}

	.shortdetail .keel .intro .slave{
		padding-bottom: 60px;
	}

	.shortdetail .keel .intro .information .zone span.title{
		font-size: 18px;
	}

}

/*小於等於1160*/
@media (max-width: 1160px) {

	
}

/*小於等於1024*/
/* pad default */
@media (max-width: 1024px) {
}

/*小於等於992*/
@media (max-width: 992px) {
}

/*小於等於960*/
@media (max-width: 960px) {

	.shortlist .gallery .group{
		display: flex;
	  flex-wrap: wrap;
	  justify-content: flex-start; /* 子元素靠左 */
	  gap: 20px; /* 控制行列間距 */

	  padding-top: 40px;
	}

	.shortlist .gallery .group .item{
		position: relative;
		flex: 0 0 calc((100% - 20px) / 2); /* 2 個一行，1 個 gap */
	}

	.shortdetail .keel{
		flex-wrap: wrap;
	}

	.shortdetail .keel .person{
		width: 300px;
		padding-right: 0;
	}

	.shortdetail .keel .intro{
		width: 100%;
	}

	.shortdetail .keel .intro .master .song{
		padding-top: 30px;
		color: #000;
	}

	.shortdetail .keel .intro .master span.author{
		color: #000;
	}

	.shortdetail .keel .intro .master .component .item{
		width: 100%;
	}

	.shortdetail .keel .intro .master .component .item .alias{
		width: 120px;
		color: #000;
	}

	.shortdetail .keel .intro .master .component .item .showtxt{
		width: calc(100% - 120px);
		color: #000;
		background: rgba(0, 0, 0, 0.1);
	}

	.shortdetail .keel .intro .slave{
		padding-top: 30px;
	}

	.shortdetail .keel .intro .slave span.vote{
		color: #000;
	}

}

/*小於等於768*/
@media (max-width: 768px) {

	
}

/*小於等於575*/
/*mobile*/
@media (max-width: 575px) {

}

@media (max-width: 480px) {

	.shortlist .gallery{
		padding-top: 40px;
	}

	.shortlist .directions{
		font-size: 16px;
		padding-top: 20px;
	}

	.shortlist .gallery .group .item a span.vote{
		font-size: 12px;
		padding: 5px 10px;
		right: 10px;
		top: 10px;
	}

	.shortlist .gallery .group .item a span.vote i{
		font-size: 14px;
	}

	.shortlist .gallery .group .item a .info{
		padding: 10px;
	}

	.shortlist .gallery .group .item a .info .director span.song{
		font-size: 16px;
	}

	.shortlist .gallery .group .item a .info .director span.author{
		font-size: 12px;
	}

	.shortlist .gallery .group .item a span.goin{
		right: 10px;
		bottom: 14px;
		font-size: 12px;
	}
}

/*小於等於414*/
@media (max-width: 414px) {
	
}

/*小於等於380*/
@media (max-width: 380px) {

}



/*小於等於350*/
@media (max-width: 350px) {
}