:root{
	--G-color:rgb(0,160,176);
	--B-color:rgb(87,87,87);
	--LG-color: rgb(145,170,34);
	--DG-color: rgb(0,140,58);
	--BR-color: rgb(224,130,108);
}

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
}

/*下拉選單改成hover*/
.dropdown>.dropdown-menu {
  top: 200%;
  transition: 0.3s all ease-in-out;
}
.dropdown:hover>.dropdown-menu {
  display: block;
  top: 100%;
}

.dropdown>.dropdown-toggle:active {
  /*Without this, clicking will make it sticky*/
    pointer-events: none;
}
/*下拉選單改成hover*/

/*麵包導航列*/
.arr-right .breadcrumb-item+.breadcrumb-item::before {
	content: "›";
	vertical-align:top;
	font-size: 1.75rem;
	line-height: 1.25rem;
}
.breadcrumb{
	margin-bottom: 0;
	padding-bottom: 0;

}
/*麵包導航列*/
a{
	color:#221714;
}
a:hover{
	text-decoration:none;
	color:#221714;
}


.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;
}
#footer{
	font-size:0.8rem;
	border-top:40px solid var(--G-color);
	color:#fff;
	position:absolute;
	z-index:2
}


@media (max-width: 576px) {
	html,body {
		font-size:12px;
	}
	#header{
		padding:0px 10px;
		background-color:rgba(0, 0, 0, 0.54) !important;
		color:#fff !important;
	}

}

@media (max-width: 768px ) and (min-width: 576px) {
	html,body {
		font-size:14px;
	}
	#header{
		background-color:rgba(0, 0, 0, 0.54) !important;
		color:#fff !important;
	}

}

@media (min-width: 992px ) and (max-width: 1200px) {
	html,body {
		font-size:16px;
	}

}

@media (min-width: 1200px) {
	html,body {
		font-size:18px;
	}

}
.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;
}

/**
Fixing bootstrap columns for safari
 */
.row:before, .row:after{
 display: inline-block !important;
}