@charset "utf-8";
/* CSS Document */
/*loading*/
.bg_loader
{
	background:rgba(0,0,0,0.7);
	width: 100%;
	height:100%;
	position: fixed;
	left:0;
	top:0;
	z-index: 9999;
}
.lds-ripple {
  display: inline-block;
  width: 80px;
  height: 80px;
  position:absolute;
  left:50%;
  top:50%;
  margin-left:-40px;
  margin-top:-40px;
}
.lds-ripple div {
  position: absolute;
  border: 4px solid #fff;
  opacity: 1;
  border-radius: 50%;
  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
  animation-delay: -0.5s;
}
@keyframes lds-ripple {
  0% {
    top: 36px;
    left: 36px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: 0px;
    left: 0px;
    width: 72px;
    height: 72px;
    opacity: 0;
  }
}

html {
	overflow-y: scroll;
	overflow-x: hidden;
	-ms-overflow-style: scrollbar;
}

body {
	font: 400 12px/1.8 "Open Sans", sans-serif;
	color: #666;
	-webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5,h6,p,li,th,td,#mainTitle,#subTitle
{
	font-family:"Microsoft JhengHei",Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;	
}
.h3-blue
{
	font-size:24px;
	color:midnightblue;
	font-weight: normal;
}
p,li
{
	font-size:16px;
	line-height: 1.7;
	text-align: justify;
}
img {
	max-width: 100%;
	height: auto;
}

iframe {
	border: 0;
}
/*主選單*/
.header
{
	height:80px;
	box-shadow: 0 0 5px 5px rgba(0,0,0,0.1);
	transition:all 0.7s;
	background:rgba(255,255,255,1);
}
#index_owlslider,.bannerin
{
	margin-top:80px;
}
.logo-s
{
	position: fixed;
	left:10px;
	top:10px;
}
.logo-b
{
	transform: scale(0.8);
	justify-content: center;
	transition:all 0.5s;
}
/*漢堡按鈕*/
#dropbtn
{
	display:block;
	border:none;
	outline:none;
	transform: scale(0.8);
	position: absolute;
	right:10px;
	top:10px;
}
.main-menu
{
	width:100%;
}

.main-menu ul
{
	list-style:none;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin:0;
	padding:0;
}
.main-menu ul li
{
	flex: 1;
}
.main-menu ul li a
{
	display: block;
	text-align: center;
	color:rgba(100,100,100,1);
	text-decoration: none;
}
.main-menu ul li .overblock
{
	height:1px;
	width:0;
	background:rgba(61,167,159,1.00);
	margin:0 10%;
	transition: all 0.3s linear;
}
.main-menu ul li:hover .overblock
{
	width:80%;
}
/*Index-banner*/
.owl-nav .owl-prev,.owl-nav .owl-next
{
	outline:none;
	border:none;
}
.owl-dots button
{
	background:rgba(3,51,124,1.00)!important;
}
/*Footer*/
#footer
{
	background: url(../images/bg-footer.jpg) no-repeat;
	background-size:cover;
	padding:20px 10px;
}
.info-footer ul
{
	padding:0;
	margin:0;
}
.info-footer li
{
	list-style: none;
}
.info-footer a,.info-footer p,.info-footer i
{
	color:#fff;
	font-size:14px;
}
.info-footer img
{
	height:40px;
}
/*Scroll UP*/
.scroll-up
{
	position:fixed;
	right:10px;
	bottom:20px;
	display: none;
	z-index: 999;
}
.scroll-up a
{
	color:#fff;
	display: block;
	padding:10px 22px;
	font-size:22px;
	background:rgba(0,39,119,0.7);
	border:1px solid #fff;
	border-radius: 100px;
	transition: all 0.7s;
}
.scroll-up a:hover
{
	background:rgba(0,39,119,1);
}
/*首頁訊息*/
.news-block
{
	padding:50px 0;
}
.news-header
{
	background:#e8e3d4;
	padding:10px 10px 0;
	display:inline-flex;
	width:100%;
	justify-content: flex-start;
	align-items:baseline;
}
.news-header h2
{
	color:#204665;
	font-size:20px;
	margin-right:5px;
}
.news-header p
{
	color:#333;
	font-size:8px;
}
.news-content h3
{
	font-size:20px;
}
.news-content ul
{
	list-style: none;
	padding:10px;
}
.news-content ul li
{
	border-bottom:1px dotted #ccc;
}
.news-content ul li a
{
	color:#333;
	text-decoration: none;
	font-size:14px;
	display: flex;
	padding:10px;
	justify-content: space-between;
}
.news-content ul li a div:last-of-type
{
	flex:0 0 80px;
	text-align: right;
}
.news-content span
{
	background:#204665;
	color:#fff;
	padding:2px 5px;
	margin-right:5px;
	border-radius: 3px;
}
.news-footer a
{
	text-align:right;
	font-size:16px;
	color:#00b4cb;
	display: block;
}
/*首頁對外連結*/
.other-link
{
	display: flex;
	flex-wrap: wrap;
}
.other-link a
{
	flex:0 1 98%;
	margin:1%;
	color:white!important;
}
.other-link a:nth-of-type(1),.other-link a:nth-of-type(2)
{
	background:#3a559f;
}
.other-link a:nth-of-type(3)
{
	background:#ed5430;
}

.other-link a:nth-of-type(4)
{
	background:#55acee;
}
.other-link a:nth-of-type(5)
{
	background:#00c300;
}
.text-white
{
	color:white;
}

.index-induction
{
	background:url(../images/bg_center.jpg) no-repeat fixed;
	background-size:cover;
	padding:150px 15px;
	height: auto!important;
	overflow: hidden;
}
.m-6
{
	margin-top:100px;
	margin-bottom:100px;
}
/*pagination*/
.pagination a {
	border: 1px solid #eaeaea;
	display: inline-block;
	text-transform: uppercase;
	text-align: center;
	color: #999;
	padding: 4px 12px;
}

.pagination a.active {
	border-color: #CACACA;
}
.newsitem a:hover>.viewicon
{
	display: block;
}
.newsitem
{
	padding:15px!important;
}
.newsitem h3
{
	font-size:20px!important;
	padding:10px 0;
}
.newsitem p
{
	font-size:16px!important;
	color:#333;
}
.newsitem p small
{
	font-size:12px!important;
}
/*網網相連*/
.table-link td,.table-link th
{
	text-align: justify!important;
}
.table-link a
{
	font-size:16px;
	color:#333;
}
/* Portfolio grid */

.works-grid {
	list-style: none;
	padding: 0;
	margin: 0;
}

.works-grid.works-grid-gut {
	margin: 0 0 0 -10px;
}

.works-grid.works-grid-gut .work-item {
	padding: 0 0 10px 10px;
}

.work-item {
	width: 50%;
	float: left;
	margin: 0;
}

.works-grid-3 .work-item {
	width: 33.333333%;
}

.works-grid-4 .work-item {
	width: 25%;
}

.works-grid-5 .work-item {
	width: 20%;
}

.work-item > a {
	position: relative;
	display: block;
	overflow: hidden;
	padding:15px;
	color:#333;
	text-decoration: none;
}

.work-image {
	position: relative;
	overflow: hidden;
}

.work-image img {
	display: block;
	overflow: hidden;
	width: 100%;
	transition:all 0.7s;
}

.work-caption {
	width: 100%;
	padding: 0 20px;
	opacity: 0;
	position: absolute;
	bottom: 100%;
	left: 94px;
	text-align: center;
	overflow: hidden;
}

.work-title {
	font-size: 20px;
	color:rgba(5,24,63,1.00);
	margin: 6px 0 6px;
}

.work-descr {
	color: #aaa;
}

.work-item:hover .work-image:after {
	background: rgba(0, 0, 0, .6);
}

.work-item:hover .work-image > img {
	-webkit-transform: scale(1.1) rotate(2deg);
	   -moz-transform: scale(1.1) rotate(2deg);
	    -ms-transform: scale(1.1) rotate(2deg);
	     -o-transform: scale(1.1) rotate(2deg);
	        transform: scale(1.1) rotate(2deg);
}

.work-item:hover .work-caption {
	bottom: 50%;
	opacity: 1;
	z-index: 3;
	-webkit-transform: translateY(50%);
	   -moz-transform: translateY(50%);
	        transform: translateY(50%);
}
#footer p,#footer li,#footer a
{
	font-size:16px;
}


/* -------------------------------------------------------------------
Portfoli Single
------------------------------------------------------------------- */

.work-details-title {
	color: #111;
	margin: 0 0 20px;
}

.work-details ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.work-details ul > li {
	border-bottom: 1px dotted #c2c2c2;
	padding: 0 0 5px;
	margin: 0 0 5px;
}

/*Media queries*/
@media (max-width: 991px) {
	.main-menu
	{
		padding-top:70px;
	}
	.main-menu li	
	{
		width:100%;
		margin:0!important;
	}
	.main-menu a
	{
		background:rgba(253,253,253,1.00);
		display: block!important;
		width:100%;
		padding:10px;
	}
	.work-item,
	.works-grid-3 .work-item,
	.works-grid-4 .work-item,
	.works-grid-5 .work-item {
		width: 50%;
	}

}
@media (min-width: 576px) {

}
@media (min-width: 768px) {

}

@media (min-width: 992px) {
	.header
	{
		height:120px;
	}
	#index_owlslider,.bannerin
	{
		margin-top:120px;
	}
	.main-menu ul
	{
		flex-direction: row;
	}
	.info-footer a,.info-footer p,.info-footer i
	{
		color:#fff;
		font-size:16px;
	}
	.info-footer img
	{
		height:auto;
	}
	.other-link a
	{
		flex:0 1 48%;
		margin:1%;
		color:white;
	}
	#footer p,#footer li,#footer a
	{
		font-size:16px;
	}
}

@media (min-width: 1200px) {
	.header
	{
		height:200px;
	}
	#index_owlslider,.bannerin
	{
		margin-top:200px;
	}
	.logo-b
	{
		transform: scale(0.8);
	}
	/*捲動縮小的選單樣式*/
	.header-s
	{
		height:100px!important;
		opacity: 0.9;
	}
	.header-s .logo-b
	{
		transform: scale(0.5);
	}
	.other-link a
	{
		flex:0 1 31%;
		margin:1%;
	}
}

@media (min-width: 1600px) {
	.header
	{
		height:260px;
	}
	#index_owlslider,.bannerin
	{
		margin-top:260px;
	}
	.logo-b
	{
		transform: scale(1);
	}	
	.other-link a
	{
		flex:0 1 18%;
		margin:1%;
	}
}
@media only screen and (max-width: 480px) {

	.work-item,
	.works-grid-3 .work-item,
	.works-grid-4 .work-item,
	.works-grid-5 .work-item {
		width: 100%;
	}

}
/*color
204665 藍
00b4cb

*/