@font-face {
	font-family: "Noto Sans";
		src: url("../fonts/NotoSansCJKtc-Bold.otf");
}
@font-face {
		font-family: "Avenir Next";
		src: url("../fonts/Avenir Next.ttc");
}

:root {
	--main-bg-color: #EEE;
	--main-text-color: #444444;
	--main-title-color: #E1301E;
	--main-hover-color: #70C3E1;
	--secondard-hover-color: #f39c12;
}

* {
	cursor: zoom-in;
}

body {
	font-family: "Noto Sans", "Avenir Next";
	font-size: 1.15em;
	background-color:var(--main-bg-color);
	/* background-image: url('../img/bg_all.png'); 
    background-size: contain;
    background-attachment: fixed;
    background-repeat: no-repeat;
	background-position: 50% 100%; */
	flex-grow: 1;
	overflow-x: hidden;
	color: var(--main-text-color);
	max-width: 1200px;

}
a:link, a:visited {
	color: inherit !important;
	text-decoration: none;
}			
.main {
	width: 100vw;
	overflow-x: hidden;
}
.main-img {
	max-width: 100vw;
	min-width: 100vw;
	height: auto; /* 確保圖片比例正確 */
}

.editor-content {
	background-color: white;
	border: 1px solid #000;
	padding: 20px;
	margin-top: -5px;
	margin-left: 10px;
	text-align: justify;
	position: relative;
	z-index: 1;
}

.editor-content:hover {
	border-color: #333;
	background-color: #f8f9fa;
}

.paper-tape-title {
	position: relative;
	display: block;
	width: 600px;
	margin-bottom: 0;
	z-index: 10;
	height: 60px;
}

/* 左上角黑色小三角形 - 朝左的等腰直角三角形 */
.paper-tape-title::before {
	content: '';
	position: absolute;
	top: 7px;
	left: 119px;
	width: 0;
	height: 0;
	border-top: 19px solid transparent;
	border-right: 20px solid #000;
	border-bottom: 0px solid transparent;
	border-left: 0;
	z-index: 11;
}

.paper-tape-text {
	display: inline-block;
	background-color: #FFF;
	color: #000;
	padding: 15px 30px 15px 15px;
	font-weight: bold;
	font-size: 1.2rem;
	margin: 0;
	margin-top: 7px;
	margin-left: -10px;
	border: 1px solid #000;
	width: 150px;
	text-align: center;
	vertical-align: top;
	position: relative;
	z-index: 5;
	height: 60px;
	box-sizing: border-box;
}

/* 副標題區塊 - 白色，右側，往左覆蓋title */
.paper-tape-subtitle {
	display: inline-block;
	background-color: white;
	color: #000;
	padding: 15px 25px;
	font-weight: bold;
	font-size: 1.2rem;
	margin: 0;
	margin-left: -20px;
	margin-top: 25px;
	border: 1px solid #000;
	width: 400px;
	text-align: left;
	height: 60px;
	vertical-align: top;
	position: relative;
	z-index: 10;
}
.paper-tape-text:hover, .paper-tape-subtitle:hover, .paper-tape-title:hover .paper-tape-subtitle, .paper-tape-title:hover .paper-tape-text{
	background-color: var(--main-title-color);
	color: white;
	/* top: 20px;
	left: -20px; */
}

.paper-tape-title:hover::before {
	top: 7px;
	left: 119px;
}

.editor-content {
	background-color: white;
	border: 1px solid #000;
	padding: 20px;
	margin-top: -5px;
	margin-left: 10px;
	text-align: justify;
	position: relative;
	z-index: 1;
}

.editor-content:hover {
	border-color: #333;
	background-color: #f8f9fa;
}

.cover-story {
    display: flex;
    position: relative;
    justify-content: center; /* 水平置中 */
    align-items: center; /* 垂直置中 */	
	margin: 0 auto; /* 確保整個區塊置中 */
    max-width: 100%; /* 防止超出容器寬度 */
}
.cover-img {
	max-width: 100%;
	min-width: 100%;
	height: auto; /* 確保圖片比例正確 */
}
.cover-title {
	color: var(--main-title-color);
	font-size:3.5rem;
	z-index:9;	
	position: absolute;
	top: -45px;
	left: 2.3%;
	letter-spacing: 6px;
	font-family: "Avenir Next";
	transform: rotate(90deg);
	transform-origin: left bottom;
}
.cover-title:hover {
	color : var(--main-hover-color);
}
.cover-text {
	left: 65%; 
	top: -30px; 
	height: 120px;
	width: 400px;
	z-index:9;
	color : var(--main-title-color);
	background-color : #FFF;
	border: 3px solid var(--main-title-color);
}
.cover-text:hover,.column-text:hover, .column-full-text:hover {
	color : white;
	background-color : var(--main-title-color);
	border: 3px solid #FFF;
}
.column-title, .special-title{
	color: var(--main-title-color);
	font-size:3.5rem;
	z-index:9;	
	position: absolute;
	top: -35px;
	left: 2.3%;
	letter-spacing: 6px;
	font-family: "Avenir Next";
	transform: rotate(90deg);
	transform-origin: left bottom;
}
.column-title:hover, .special-title:hover {
	color : var(--main-hover-color);
}
.column-text {
	top: -40px;
	left: 10%;
	height: 120px;
	width: 80%;
	padding: 20px;
	z-index:99;
	vertical-align: middle;
	color : var(--main-title-color);
	position: relative;
	background-color : white;
	border: 3px solid var(--main-title-color);
}
.column-full-text {
	top: -40px;
	min-height: 60px;
	z-index:9;
	color : var(--main-title-color);
	background-color : white;
	position: relative;
	border: 3px solid var(--main-title-color);
}
.special-title {
	left: 52%;
	top: -35px;
}
.pos-text {
	color: var(--main-title-color);
	font-size:1.8rem;
	font-family: "Avenir Next";
}
.pos-text:hover {
	color : var(--main-hover-color);
}	

.translate-middle {
	transform: translate(-50%, -80%) !important;
}
					
.enlarge-img:hover{
	transform:scale(1.05);
}
.spotify-frame{
	border-radius:12px; 
	max-width:100%; 
	width:60%;
	height: 560px;
}

.bg-short {
	/* background-image: url('../img/bg_short.png'); 
    background-size: 80%;
    background-repeat: no-repeat; 
	background-position: 50% 70%; */
	background-color: var(--main-bg-color);
	flex-grow: 1;
	overflow-x: hidden;
	color: var(--main-text-color);
}

.prev-card {
	padding-left: 10%;
	padding-right: 10%;
}

.prev-card-title {
	position: relative;
	width: 50%;
	top: -30px;
	color: var(--main-title-color);
	background-color: white;
	padding: 3px;
	font-size:0.9rem;
	border: 2px;
	border-color: var(--main-title-color) !important;
}
.prev-card-text {
	position: relative;
	background-color:var(--main-title-color);
	color: white;
	width: 90%;
	top: -40px;	
	padding: 5px;
	padding-left:10px;
	font-size:0.8em;
	border: 2px;
	border-color: var(--main-title-color) !important;
}
.prev-card:hover .prev-card-title {
    color: white;
    background-color: var(--main-title-color);
}

.prev-card:hover .prev-card-text {
    color: var(--main-title-color);
    background-color: white;
}

.owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev, .owl-carousel button.owl-dot {
	font-size: 2em;
}
.owl-prev, .owl-next {
	width: 15px;
	height: 0px;
	position: absolute;
	top: 30%;
	transform: translateY(-50%);
	display: block !important;
	border:0px solid black;
}
.owl-prev { left: -55px; }
.owl-next { right: -30px; }
    
.owl-prev i, .owl-next i { 
	color: var(--main-title-color);
}
.owl-prev i:hover, .owl-next i:hover { 
	color: var(--main-hover-color);
}
.short-video {
	min-height: 560px;
	width: 100%;
	border-radius:20px; 
}
.footer {
	background-color: var(--main-title-color);
	color: white;
	text-align: center;
	font-size: 0.9rem;
}

@media ( max-width : 991.98px ){
	.paper-tape-title {
		margin-left: 10%;
	}
	.editor-content {
		max-width: 80%;
		margin-left: 10%;
	}
	.cover-title {
		font-size:1.5rem;
		top: 1%;
		left: 3%;
		transform: rotate(90deg);
		transform-origin: left bottom;
	}
	.cover-text {
		left: 50%; 
		top: 5%;
		height: 100px;
		width: 70%;
		z-index:9;
		font-size: 0.95rem;
		color : var(--main-title-color);
		background-color : #FFF;
		border: 3px solid var(--main-title-color);
	}

	.column-title, .special-title{
		font-size:1.5rem;
		top: -15px;
		left: 3%;
		transform: rotate(90deg);
		transform-origin: left bottom;
	}
	.column-text{
		max-width: 100%;
		left: 50%;
		top: 50px;
		right: inherit;
		height: 100px;
		width: 80%;
		font-size:1rem;
	}
	.column-full-text {
		font-size: 0.95rem;
		min-height: 40px;
		width: 80%;
		padding-bottom: 0px;
	}
	.special-title {
		left: 3%; 
		top: 56.5%;
	}
	.pos-text {
		color: var(--main-title-color);
		font-size:1.3rem;
		z-index:9;	
		font-family: "Avenir Next";
		left: -2%;
		position: relative;
	}
	.spotify-frame{
		width:80%;
	}
	.short-video {
		width: 80%;
	}	
	.bg-short{
		background-size: 100%;
		background-position: 50% 50%;
	}
	.prev-card {
		padding-left: 0;
		padding-right: 0;
	}
	.prev-card-title {
		width: 70%;
	}
	
	/* 手機版紙帶樣式調整 */
	.paper-tape-title {
		width: 100%;
		margin-bottom: 0;
		height: 48px;
	}
	
	.paper-tape-title::before {
		left: 111px;
		border-top: 16px solid transparent;
		border-right: 14px solid #000;
		border-bottom: 0px solid transparent;
		border-left: 0;
		top: -11px;
	}
	.paper-tape-title:hover::before {
		top: 9px;
		left: 92px;
	}	
	
	.paper-tape-text {
		font-size: 0.95rem;
		padding: 8px 15px;
		width: 115px;
		background-color: #FFF;
		color: #000;
		z-index: 5;
		margin-top: -10px;
		margin-left: 10px;
		height: 42px;
		box-sizing: border-box;
		border: 1px solid #000;
		display: inline-block;
		text-align: center;
		vertical-align: top;
		position: relative;
	}
	
	.paper-tape-subtitle {
		font-size: 0.95rem;
		padding: 8px 15px;
		width: 230px;
		margin-left: -13px;
		margin-top: 5px;
		z-index: 10;
		height: 42px;
		box-sizing: border-box;
		border: 1px solid #000;
		display: inline-block;
		text-align: left;
		vertical-align: top;
		position: relative;
		background-color: white;
		color: #000;
	}
}