@charset "UTF-8";

/*--- common Style ---*/
.hidden{
	overflow: hidden;
}
.boxShadow{
	box-shadow: 5px 5px 15px grey;
}

/*頁首導覽區*/
header>nav>div>span:hover,header>nav>div>a:hover{
	animation: infobutton 0.5s 0s forwards;
}

/*--- 主體區 ---*/
header>nav>div>a,header>nav>div>span{
	color: white;
	font-size: 1.25rem;
}
#bg1>div>div>p{
	background-color: rgb(153, 153, 153, 0.4);
	border-radius: 5px 5px;
}

div.container>div.row>p{
	/* font-size: 1.25rem; */
	line-height: 2rem;}
#bg1{
	background-image: url(https://images.unsplash.com/photo-1579693207456-a3c037d9a8d4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1868&q=80)
	;background-attachment:fixed;
	background-size:100vw;
	background-repeat: no-repeat;
	background-position: center top;
	opacity: 0.8;
	border-bottom-right-radius:1519px 150px;
	border-bottom-left-radius:1500px 300px;}

#bg2{
	background-image: url(https://images.unsplash.com/photo-1448932284983-0c7b152eba33?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80);
	background-attachment: fixed;
	background-size: 100VW;
	background-repeat: no-repeat;
	opacity: 0.6;}

body>:nth-child(3)>:first-child{
	position:relative;}
body>:nth-child(3)>:first-child::after{
	content: "";
	position: absolute;
	width: calc(100% / 2);
	border-bottom: 1px solid;
	top: 110%;
	left: calc(100% / 2 - 25%);
	opacity: 0.6;}

/*--- 導覽案扭區 ---*/
#guidebtn>button:hover{
	box-shadow: 5px 5px 15px grey;
	animation: boxShadow 0.5s 1s forwards;
}

/*--- PS作品輪播區 ---*/

#Carousel>:nth-child(2)>:nth-child(2)>div>img{
	width: 100%;
	height: 100%;}

	/*--- Ai作品輪播區 ---*/
#myCarousel1>div>div>div>h3,
#myCarousel1>div>div>div>p{
	color: black;
}

/*--- 時間軸區 ---*/
#historyLine{position: relative;}
#historyLine::before{
	content: "";
	width: 10px;
	height: 90%;
	position: absolute;
	background-color: #f3f3f3;
	left: 50%;
	top:10%;
	z-index: -1;}
#historyLine::after{
	content: "";
	width: 20vw;
	border-bottom: 1px solid black;
	position: absolute;
	left: calc(100% / 2 - 10vw);
	top: 7%;}

#historyLine>h2::after{content: "";width: 30px;}

#historyLine>section>h5{
	background-color: #ffffff;}


/*Line of Time*/
#historyLine>:nth-child(2)>div{position: relative;}
/*#historyLine>:nth-child(2)>div>:nth-child(1)::before{content: "";width: 50px;height: 2px;background-color:#999;
position: absolute;right: 1px;top: 50%;}*/
#historyLine>:nth-child(2)>div>:nth-child(2)::before{
	content: "";
	width: 16px;
	height: 16px;
	position: absolute;
    left: 49%;
    top: 12%;
    margin-top:-4px;
    background-color: #fff;
    border-radius: 10px;
    border: 2px solid #999;}
/*#historyLine>:nth-child(2)>div>:nth-child(2)::after{content: "";width: 50px;height: 2px;background-color:#999;
	position: absolute;left: 13px;top: 50%;}*/
#historyLine>:nth-child(3)>div{position: relative;}	
#historyLine>:nth-child(3)>div>:nth-child(2)::before{
	content: "";
	width: 16px;
	height: 16px;
	position: absolute;
    left: 49%;
    top: 0%;
    margin-top:-4px;
    background-color: #fff;
    border-radius: 10px;
    border: 2px solid #999;}
/*#historyLine>:nth-child(3)>div>:nth-child(2)::after{
	content: "";
	width: 50px;
	height: 2px;
	background-color:#999;
	position: absolute;
	left: 13px;
	top: 50%;}*/
/*#historyLine>:nth-child(4)>div>:nth-child(1)::before{
	content: "";
	width: 50px;
	height: 2px;
	background-color:#999;
	position: absolute;
	right: 1px;
	top: 55%;}*/
#historyLine>:nth-child(4)>div>:nth-child(2)::before{
	content: "";
	width: 16px;
	height: 16px;
	position: absolute;
    left: 49%;
    top: 0%;
    margin-top:-4px;
    background-color: #fff;
    border-radius: 10px;
    border: 2px solid #999;}	
/*#historyLine>:nth-child(4)>div>:nth-child(2)::after{
	content: "";
	width: 50px;
	height: 2px;
	background-color:#999;
	position: absolute;
	left: 12px;
	top: 50%;}*/    

/*--- footer ---*/
footer>div{
	max-width:1519.2px;
}
footer>div>div>p,
footer>div>p>a,
footer>div>div>span,
footer>div>p{
	color: white;
	
}
footer>div>div:hover{
	cursor: pointer;
}
footer>div>:nth-child(5):hover{
	cursor: pointer;
}


/*--- Animate Zone ---*/
@keyframes infobutton {
	from {opacity: 1;}
	to {opacity: 1;
		border-radius: 10px;
		box-shadow: 5px 5px 5px grey;}
}
@keyframes boxShadow {
	from {opacity: 1;}
	to {opacity: 1;
	}
}


/*--- 自適應比照Bootstrap尺寸 ---*/
/*--- Phone Landscape Style ---*/
@media screen and (min-width:576px){
	
	/*--- 時間軸區 ---*/
	#historyLine::after{
		top: 4%;}
	#historyLine::before{
		top:7%;}
	

	/*Line of Time*/
	#historyLine>:nth-child(4)>div>:nth-child(2)::before{
		left: 49%;}
	}

/*--- Pad Portrait Style ---*/
@media screen and (min-width:768px) {
	
	/*--- 時間軸區 ---*/
	#historyLine::after{top: 11%;}
	#historyLine::before{
		top:15%;}

	/*Line of Time*/
	#historyLine>:nth-child(2)>div>:nth-child(2)::before{
		left: 97%;
    	top: 50%;}
    #historyLine>:nth-child(2)>div>:nth-child(2)::after{
    	content: "";
    	width: 50px;
    	height: 2px;
    	background-color:#999;
		position: absolute;
		left: 110%;
		top: 52%;}
	#historyLine>:nth-child(3)>div>:nth-child(2)::before{
		left: 15%;
    	top: 50%;}
    #historyLine>:nth-child(3)>div>:nth-child(2)::after{
    	content: "";
    	width: 50px;
    	height: 2px;
    	background-color:#999;
		position: absolute;
		left: -12%;
		top: 54%;}
	#historyLine>:nth-child(4)>div>:nth-child(2)::before{
		left: 98%;
		top: 50%;}
	#historyLine>:nth-child(4)>div>:nth-child(2)::after{
		content: "";
		width: 50px;
		height: 2px;
		background-color:#999;
		position: absolute;
		left: 110%;
		top: 53%;}

}

/*--- Pad Landscape Style ---*/
@media screen and (min-width:992px) {
	
	/*--- 時間軸區 ---*/
	#historyLine::before{
		top:18%;}

	/*Line of Time*/
	#historyLine>section>h5{
		background-color: #ffffff;
		margin: 0 45% 0 44.5%;}
	#historyLine>:nth-child(2)>div>:nth-child(1)::before{
		content: "";
		width: 50px;
		height: 2px;
		background-color:#999;
		position: absolute;
		right: 1px;
		top: 50%;}
	#historyLine>:nth-child(2)>div>:nth-child(2)::before{
		left: -2px;
    	top: 50%;}
	#historyLine>:nth-child(2)>div>:nth-child(2)::after{
		content: "";
		width: 50px;
		height: 2px;
		background-color:#999;
		position: absolute;
		left: 13px;
		top: 50%;}
	#historyLine>:nth-child(3)>div>:nth-child(2)::before{
		left: 99%;
    	top: 50%;}
    #historyLine>:nth-child(3)>div>:nth-child(3)::before{
    	content: "";
    	width: 50px;
    	height: 2px;
    	background-color:#999;
		position: absolute;
		right: 87%;
		top: 54%;}
    #historyLine>:nth-child(3)>div>:nth-child(2)::after{
    	width: 35px;
    	left: 85%;
    	top: 54%;}
	#historyLine>:nth-child(4)>div>:nth-child(1)::before{
		content: "";
		width: 50px;
		height: 2px;
		background-color:#999;
		position: absolute;
		left: 90%;
		top: 55%;}
	#historyLine>:nth-child(4)>div>:nth-child(2)::before{
		left: -1%;}
	#historyLine>:nth-child(4)>div>:nth-child(2)::after{
		width: 40px;
		left: 5%;}


}

/*--- PC Style ---*/
@media screen and (min-width:1200px){
	
	/*--- 時間軸區 ---*/
	
	#historyLine::before{top:15%;}
	#historyLine::after{top: 8%;}
	#historyLine>:nth-child(3)>div>:nth-child(3)::before{
		right: 89%;
		top: 54%;}
	#historyLine>:nth-child(3)>div>:nth-child(2)::after{
		width: 35px;
		left: 87%;
		top:
	 }
	#historyLine>:nth-child(4)>div>:nth-child(1)::before{
		left: 91%;
		top: 57%;
	}
	#historyLine>:nth-child(4)>div>:nth-child(2)::before{
		left: -1%;}
	#historyLine>:nth-child(4)>div>:nth-child(2)::after{
		left:4%;
		width: 50px;
	}

}