:root{
	--G-color:rgb(101,192,185);
	--B-color:rgb(87,87,87);
}

body{
	color:var(--B-color);
	overflow-x:hidden;
	font-family:"Clear Sans",Verdana,"Century Gothic","PingFang",Helvetica,Arial,"PingFang TC","LiHei Pro Medium","Heiti TC","Microsoft JhengHei","DFKai-SB",sans-serif
}
.text-G{
	color:var(--G-color);
}
.text-B{
	color:var(--B-color);
}
.ratio16-9{
   position: relative;
   width: 100%;
   padding-top: 56.25%; /* 16:9 Aspect Ratio */	
}
.ratio4-3{
   position: relative;
   width: 100%;
   padding-top: 75%; /* 4:3 Aspect Ratio */	
}
#MainMenu .FirstMenu>a:hover{
	color:var(--G-color);
	border-bottom:2px solid var(--G-color);
}
#MainMenu .FirstMenu>a{
	border-bottom:2px solid transparent;
}
.MenuHover{
	color:var(--G-color) !important;
	border-bottom:2px solid var(--G-color)	
}
/* #header #headermenu li{
	color:rgba(255,255,255,.75);
	border-bottom:1px solid transparent;
} */
#header{
	background-color:#fff ;
	position:fixed;
	z-index:999;
	width:100%;
}

#header #mobile .list-unstyled{
	font-size:1.1rem;
}
#header #mobile .list-unstyled li{
	line-height:3rem;
}
/* #header #mobile .list-unstyled li>a{
	color:var(--white)
} */
.scrollTop{
	background-color:rgba(0, 0, 0, 0.54) !important;	
}
.scrollTopLink{
	color:#fff !important;
}


@media (max-width: 576px) {
	body {
		font-size:12px;
	}
	#main{
		margin-bottom:50px;
		padding-top:80px;
	}
/* 	#header{
		background-color: rgba(0, 0, 0, 0.54) !important;
		color: #fff !important;
	} */
}

@media (max-width: 768px ) and (min-width: 576px) {
	body {
		font-size:14px;
	}
	#main{
		margin-bottom:100px;
		padding-top:65px;
	}
}

@media (min-width: 992px ) and (max-width: 1200px) {
	body {
		font-size:16px;
	}
	#main{
		margin-bottom:50px;
		padding-top:100px;
	}
}

@media (min-width: 1200px) {
	body {
		font-size:18px;
	}
	#main{
		margin-bottom:50px;
		padding-top:100px;
	}
}
.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}
@keyframes rotateIn {
  from {
	transform-origin: center;
	transform: rotate3d(0, 0, 1, -200deg);
	opacity: 0;
  }

  to {
	transform-origin: center;
	transform: none;
	opacity: 1;
  }
}

.rotateIn {
  animation-name: rotateIn;
}