/* ==================================================
   Basic Styles
================================================== */

html{
	width:100%;
	font-size: 100%; 
	-webkit-text-size-adjust: 100%; 
	-ms-text-size-adjust: 100%;
}

body{
	background:#fff;
	color:#000;
	font-weight:400;
	font-size:16px;
	font-family: 'Montserrat', sans-serif;
	line-height:30px;
	letter-spacing: 0.2px;
}


a{
	color:#777;
	font-weight: 400;
	text-decoration: none;
	cursor: pointer;
	
	-webkit-transition: color 0.15s ease-in-out 0s;	
	   -moz-transition: color 0.15s ease-in-out 0s;
		 -o-transition: color 0.15s ease-in-out 0s;
		    transition: color 0.15s ease-in-out 0s;
}

a:hover,
a:active,
a:focus{
	outline: 0;
	color:#000;
	text-decoration:none;
}

a img {
	border: none;
}

a > img {
	vertical-align: bottom;	
}

img {
	max-width: none;	
}

p {
	margin: 0 0 30px;
}

ul {
    margin: 0 0 20px 0px;
    padding: 0;
}

ul {
	list-style: circle inside;
}

li {
	line-height: 30px;
}

input::input-placeholder,
textarea::input-placeholder {
	color: #BCBCC4;
	opacity: 1;
}
hr {
	border-top: 2px solid rgba(0,0,0,0.2);
	text-align:center;
	margin: 0 100px 30px 100px;
  }

/* ==================================================
   Typography
================================================== */

h3{
	margin:0 0 0 0;
	color:#000;
	font-weight:400;
	font-family: 'Montserrat', sans-serif;

	line-height:1.5em;
	font-size:20px;
	letter-spacing: 0.6px;
	text-align:center;
}


h6{
	font-size:15px;
	font-weight:400;
	line-height:0.8em;
	color:#adadad;
	text-align:center;
	letter-spacing: 0.5px
}
h4{
	font-size:16px;
	font-weight:400;
	letter-spacing: 1px;
	color:#131313;
	letter-spacing: 0.5px;
	text-align:left;
	line-height:1.6em;
	/* padding-top: 5px; */
	
}
h5{
	font-size:25px;
	font-weight:400;
	/* letter-spacing: 1px; */
	color:#000;
	letter-spacing: 0.5px;
	text-align:center;
	/* line-height:1.6em; */
	/* padding-top: 5px; */
}



/* ==================================================
   Margin Bottom Sets
================================================== */

.margin-0{
	margin-bottom:0 !important;
}


/* ==================================================
   Header
================================================== */

header {
	background:transparent;
	position: static;
	width: 100%;
	height: 100px;
	z-index: 1001;
	padding-top:40px;
	padding-bottom: 0px;
}

header #logo a {
	color: #000;
	font-family: 'Montserrat', sans-serif;
	font-size: 22px;
	font-weight: 500;
	line-height: 100px;
	letter-spacing: 2px;
}

header #logo a:hover {
	color: #777;
	border-bottom:2px solid #000;
}



/* Navigation */

nav#menu {
	float: right;
}

nav#menu #menu-nav {
	margin:  0 ;
	padding: 0;
	padding-top:25px;

}

nav#menu #menu-nav li {
	position: static;	
	list-style: none;
	float: left;	
}

nav#menu #menu-nav li a {
	color: #000;
	font-family: 'Montserrat', sans-serif;
	font-size: 18px;
	font-weight: 500;
	/* line-height: 100px;  */
	/* display: block; */
	letter-spacing: 0.2px;
}

nav#menu #menu-nav li:last-child {
	padding-right: 0;
}

nav#menu #menu-nav li a:hover {
	color: #777;
	border-bottom:2px solid #000;
}

/* ==================================================
   Intro Box
================================================== */

#intro-box {
	position: relative;
	background:transparent;
	padding: 45px 0 0px;
	text-align:start;

}

#intro-box h3 {
	color: #000;
	font-family: 'Montserrat', sans-serif;
	font-size: 33px;
    font-weight: 500;
	line-height: 1.5em;
	letter-spacing: 0.5px;
	text-align: start;
}


#intro-box p {
	text-align: left;
}

#intro-box .center {
	text-align: center;
}

/* ==================================================
   Team People / Single Team
================================================== */

/* Single Team Page */
/* 
#single-team .team-img {
	margin-bottom: 50px;	
}

#single-team .team-img img {
	width: 100%;
} */

#single-team .team-img {
	margin-bottom: 30px;
	text-align: center; /* Center the video horizontally */
  }
  
  #single-team .team-img img{
	max-width: 100%; /* Ensure the video does not exceed container width */
	width: 100%;
	height: auto;
	text-align: center;
  }
  /* .video{
	max-width:640px;
	text-align: center;
  }*/
  .yt{
	position: relative;
	width: 100%;
	padding-bottom: 56.25%;
	margin-bottom: 30px;
 }

  .yt iframe{
	position: absolute;
    width: 100%;
    height:100%;
    top: 0;
    left: 0;
  } 

/* ==================================================
   About
================================================== */
#about-team .team-img {
	margin-top: 70px;
	text-align: center; /* Center the video horizontally */
  }  

#about-team .team-img img{
	max-width: 100%; /* Ensure the video does not exceed container width */
	width: 50%;
	height: auto;
	text-align: center;
  }

/* ==================================================
   Portfolio
================================================== */

#portfolio img {
	width: 100%;	
}

#projects {
	margin: 0;
	padding: 0;
}

#projects li {
	list-style: none;
	margin-bottom: 30px;
}

.item-project {
	position: relative;
	overflow: hidden;
		
}

.item-project:hover img,
.item-project:active img {
	opacity: 0.4;
}



.image-container {
	position: relative;
	display: inline-block;
	overflow: hidden;
  }
  
  .image-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #fff;
	padding: 10px;
	font-size: 34px;
	/* font-weight: bold; */
	display: none;
	opacity: 0;
	transition: opacity 0.3s;
	z-index: 1; /* 使文本位于遮罩层之上 */
  }
  .image-text.title {
	font-weight: bold;
  }
  .image-text.description {
	top: 60%; /* Adjust the vertical position for description text */
	font-size: 18px; /* Adjust font size for description text */
  }
  
  .overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 1);
	z-index: 0; /* 遮罩层在底部 */
	opacity: 0;
	transition: opacity 0.3s;
  }
  
  .image-container:hover .image-text {
	display: block;
	opacity: 1;
  }
  
  .image-container:hover .overlay {
	opacity: 1;
  }

  .fit-image {
  	max-width: 100%;
  	height: auto;
  	display: block;
	}

.image-gallery {
  /* 確保容器可以置中 */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.image-gallery img {
  max-width: 100%;
  height: auto;
  /* 圖片之間可以加上一些間距 */
  margin-bottom: 20px; 
}

  
/* ==================================================
   cv
================================================== */
#cv img {
	width: relative;
		
}

.cv-button {
	position: relative;
	overflow: hidden;
	text-align: center;
		
}

.cv-button:hover img,
.cv-button:active img {
	opacity:.55
}


#prize img {
	width: relative;
		
}
.prize {
	position: relative;
	overflow: hidden;
	text-align: center;
		
}
/* ==================================================
   Footer
================================================== */

footer {
	position:relative;
	background: transparent;
	padding: 40px 0 40px;
	margin-bottom: 0px;
	/* display: table; */
	/* clear: both; */
}

/* ==================================================
   Footer Widgets
================================================== */

footer.footer-widgets .widget {
	margin-bottom: 0;
	text-align: center; 
}

footer.footer-widgets {
	color: #777;
	font-size: 16px;
}

footer.footer-widgets a {
	color: #777;	
}

footer.footer-widgets a:hover {
	color: #000;
	border-bottom:2px solid #000;
	/* background: rgba(200,200,200,10); */
}