/*!********************************************************************
***************************Copyright (c) 2016 by yuchen.****************
*************************************************************************/


/*************************
*******main.css******
**************************/

body {
	font-family: 'Verdana', Helvetica, "Microsoft YaHei", "微軟雅黑體 ", "微軟正黑體", "Microsoft JhengHei", sans-serif;
	color: #1e1e1e;
	line-height: 30px;
	background: #ffffff;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: 'Verdana', Helvetica, "Microsoft YaHei", "微軟雅黑體 ", "微軟正黑體", "Microsoft JhengHei", sans-serif;
	font-weight: 400;
	line-height: 30px;
	letter-spacing: 2px;
	color: #000000;
}

h1 {
	font-size: 24px;
}

h2 {
	font-size: 24px;
}

h3 {
	font-size: 16px;
}

h4 {
	font-size: 14px;
}

h5 {
	font-size: 18px;
}

h6 {
	font-size: 16px;
}

p,
.css_table,
li,
td {
	font-size: 16px;
	letter-spacing: 2px;
}

#services_product p {
	letter-spacing: 2px;
}

.ranktable td {
	Font-family: "Microsoft YaHei", "Microsoft JhengHei", sans-serif;
}

@media screen and (max-width:767px) {
	p,
	li,
	td {
		font-size: 14px;
	}
}

a {
	color: #14aebc;
	-webkit-transition: color 300ms, background-color 300ms;
	-moz-transition: color 300ms, background-color 300ms;
	-o-transition: color 300ms, background-color 300ms;
	transition: color 300ms, background-color 300ms;
}

a:hover,
a:focus {
	color: #00d5e8;
	text-decoration: none;
	outline: none;
}

.btn-primary {
	padding: 8px 20px;
	background: #c52d2f;
	color: #ff0;
	border-radius: 4px;
	border: none;
	margin-top: 10px;
}


/*--------------自訂 開始---------------------------*/

#gotop {
	display: none;
	position: fixed;
	right: 10px;
	bottom: 25vh;
	padding: 0px 10px;
	font-size: 54px;
	cursor: pointer;
	z-index: 999;
}

#gotop img:hover {
	will-change: animation, transform, opacity;
	-webkit-animation: top 0.5s ease-in-out infinite;
	animation: top 0.5s ease-in-out infinite;
}

@-webkit-keyframes top {
	0% {
		-webkit-transform: scale(1);
	}
	50% {
		-webkit-transform: scale(1.1);
	}
	100% {
		-webkit-transform: scale(1);
	}
}

@keyframes top {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.1);
	}
	100% {
		transform: scale(1);
	}
}

@keyframes bounceInUp {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}

@media(max-width:911px) {
	#gotop {
	display: none;
	position: fixed;
	right: 10px;
	bottom: 10px;
	padding: 0px 10px;
	font-size: 54px;
	cursor: pointer;
	z-index: 999;
}
	#gotop img{
		max-width: 60px;
	}
}
@media(max-width:600px) {
	#gotop img{
		max-width: 45px;
	}
}


/*---------------自訂 結束---------------------------*/


/*************************
*******Header******
**************************/

.navbar>.container .navbar-brand {
	margin-left: 0;
}

.navbar-brand {
	padding: 0 0 0 220px;
	/*0*/
	margin: 0;
}

@media(max-width:1919px) {
	.navbar-brand {
		padding: 0;
		/*0*/
		margin: 0;
	}
}

.navbar {
	border-radius: 0;
	margin-bottom: 0;
	background-color: transparent;
	/*padding-top: 5px;*/
	/*15px 0; 選單列距離上方*/
}

.navbar-nav {
	margin-top: 0px;
	/*12px---選單距離上方*/
}

.navbar-nav>li {
	margin-left: 0px;
	/*35px 選單的間距*/
	/*padding-top: 45px;*/
}

@media screen and (max-width: 991px) {
	.navbar-nav>li {
		padding-top: 0px;
	}
}

.navbar-inverse .navbar-nav > li > a {
	padding: 0px 0px;
	/*5px 12px*/
	margin: 0;
	border-radius: 3px;
	color: #767676;
	line-height: 24px;
	display: inline-block;
}

.navbar-inverse .navbar-nav > li > a:hover {
	/*	  hover顏色*/
	color: #767676;
	background-color: #fff;
}

.navbar-inverse {
	border: none;
}

.navbar-inverse .navbar-brand {
	font-size: 36px;
	line-height: 50px;
	color: #fff;
}

.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus,
.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus {
	background-color: transparent;
	color: #000;
}

.navbar-inverse .navbar-nav .dropdown-menu {
	/*background-color: rgba(104, 153, 141, .8);
    下拉後背景色*/
	/*-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.125);
    -moz-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.125);
   box-shadow: 0 3px 8px rgba(0, 0, 0, 0.125);*/
	border: 0;
	padding: 0;
	margin-top: 0;
	border-top: 0;
	border-radius: 0;
	left: 0;
	color: #fff;
}

.navbar-inverse .navbar-nav .dropdown-menu:before {
	position: absolute;
	top: 0;
}

.navbar-inverse .navbar-nav .dropdown-menu > li > a {
	padding: 8px 15px;
	color: #fff;
}

.navbar-inverse .navbar-nav .dropdown-menu > li:hover > a,
.navbar-inverse .navbar-nav .dropdown-menu > li:focus > a,
.navbar-inverse .navbar-nav .dropdown-menu > li.active > a {
	/* background-color: #659388;
    下拉hover顏色*/
	color: #fff;
}

.navbar-inverse .navbar-nav .dropdown-menu > li:last-child > a {
	border-radius: 0 0 3px 3px;
}

.navbar-inverse .navbar-nav .dropdown-menu > li.divider {
	background-color: transparent;
}

.dropdown-menu p {
	color: #fff;
}

.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
	border-top: 0;
	padding-bottom: 0;
}

.footer {
	vertical-align: top;
	font-size: 14px;
	color: #fff;
	background: #4a5960;
	padding-bottom: 30px;
}


/********************************************************************
***********************************login*****************************
********************************************************************/


/****source:http://bootsnipp.com/snippets/d39ve    *****/

.panel {
	margin-top: 120px;
	background-color: transparent;
}

@media screen and (max-width:768px) {
	.loginbtn input {
		margin-top: 10px;
	}
}

.panel-info {
	border-color: #5cb85c;
}

.panel-info>.panel-heading {
	color: #ffffff;
	background-color: #5cb85c;
	border-color: #bce8f1;
}

.panel-info .ripple input[type="submit"] {
	position: relative;
	border: none;
	outline: none;
	cursor: pointer;
	background: #5cb85c;
	color: #ffffff;
	padding: 8px 20px;
	border-radius: 50px;
	font-size: 14px;
	border: 1px #5cb85c solid;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

.panel-info .ripple input[type="submit"]:hover {
	background: #3d8b3d;
	border: 1px #3d8b3d solid;
}

.panel-info .ripple input[type="reset"] {
	position: relative;
	border: none;
	outline: none;
	cursor: pointer;
	background: #ffffff;
	color: #5cb85c;
	padding: 8px 20px;
	border-radius: 50px;
	font-size: 14px;
	border: 1px #5cb85c solid;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

.panel-info .ripple input[type="reset"]:hover {
	color: #3d8b3d;
	border: 1px #3d8b3d solid;
}

.panel-default {
	border-color: #5fb0e4;
}

.panel-default>.panel-heading {
	color: #ffffff;
	background-color: #5fb0e4;
	border-color: #bce8f1;
}

.panel-default .ripple input[type="button"] {
	position: relative;
	border: none;
	outline: none;
	cursor: pointer;
	background: #ffffff;
	color: #5fb0e4;
	padding: 8px 20px;
	border-radius: 50px;
	font-size: 14px;
	border: 1px #5fb0e4 solid;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

.panel-default .ripple input[type="button"]:hover {
	background: #248ed3;
	border: 1px #248ed3 solid;
	color: #ffffff;
}

#services_login a {
	color: #000000;
}

#services_login a:visited {
	color: #000000;
}

#services_login a:hover,
#services_login a:focus {
	color: #5fb0e4;
}

.panel-success {
	border-color: #748bce;
}

.panel-success>.panel-heading {
	color: #ffffff;
	background-color: #748bce;
	border-color: #748bce;
}

.panel-success .ripple input[type="button"] {
	position: relative;
	border: none;
	outline: none;
	cursor: pointer;
	background: #748bce;
	color: #ffffff;
	padding: 8px 20px;
	border-radius: 50px;
	font-size: 14px;
	border: 1px #748bce solid;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

.panel-success .ripple input[type="button"]:hover {
	background: #7475ce;
	border: 1px #7475ce solid;
	color: #ffffff;
}


/**svg背景**/

#particles {
	width: 100%;
	height: 100%;
	overflow: hidden;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	position: absolute;
	z-index: -2;
}


/**service_albumman**/

.panel-default2 {
	border-color: #2b85bf;
}

.panel-default2>.panel-heading {
	color: #ffffff;
	background-color: #2b85bf;
	border-color: #2b85bf;
}

.panel-default2 .ripple input[type="button"] {
	position: relative;
	border: none;
	outline: none;
	cursor: pointer;
	background: #ffffff;
	color: #2b85bf;
	padding: 8px 20px;
	border-radius: 50px;
	font-size: 14px;
	border: 1px #2b85bf solid;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

.panel-default2 .ripple input[type="button"]:hover {
	background: #248ed3;
	border: 1px #248ed3 solid;
	color: #ffffff;
}

.ripple0 input {
	position: relative;
	border: none;
	outline: none;
	cursor: pointer;
	background: transparent;
	color: #14aebc;
	padding: 8px 20px;
	border-radius: 2px;
	font-size: 14px;
	border: 1px #14aebc solid;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

.ripple0 input:hover {
	border: 1px #107780 solid;
	color: #107780;
}

.ripple01 input {
	position: relative;
	border: none;
	outline: none;
	cursor: pointer;
	background: #fff;
	color: #14aebc;
	border-radius: 2px;
	font-size: 14px;
	border: 1px #14aebc solid;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

.ripple0 input:hover {
	border: 1px #107780 solid;
	color: #107780;
}


/*************************
*********slidershow******
**************************/

.carousel-control.left {
	background-image: -webkit-linear-gradient(left, color-stop(rgba(255, 255, 255, 0.1) 0), color-stop(rgba(0, 0, 0, 0.0001) 100%));
	background-image: linear-gradient(to right, rgba(255, 255, 255, 0.1) 0, rgba(0, 0, 0, 0.0001) 100%);
	background-repeat: repeat-x;
	filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
}

.carousel-control.right {
	right: 0;
	left: auto;
	background-image: -webkit-linear-gradient(left, color-stop(rgba(0, 0, 0, 0.0001) 0), color-stop(rgba(255, 255, 255, 0.1) 100%));
	background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0, rgba(255, 255, 255, 0.1) 100%);
	background-repeat: repeat-x;
	filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
}

.hide-bullets {
	list-style: none;
	margin-left: -40px;
	margin-top: 0px;
	text-align: right;
	cursor: pointer;
	line-height: 22px;
	color: #000;
}

.thumbnail {
	padding: 0;
}

.carousel-inner>.item>img,
.carousel-inner>.item>a>img {
	width: 100%;
}

.hide-bullets a {
	color: #000;
}

.hide-bullets a:link {
	color: #000;
}

.hide-bullets a:visited {
	color: #000;
}

.hide-bullets a:hover {
	color: #a16b55;
}


/*************************
****slidershow  - fade******
**************************/

.carousel-fade .carousel-inner .item {
	opacity: 0;
	transition-property: opacity;
}

.carousel-fade .carousel-inner .active {
	opacity: 1;
}

.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
	left: 0;
	opacity: 0;
	z-index: 1;
}

.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
	opacity: 1;
}

.carousel-fade .carousel-control {
	z-index: 2;
}


/*************************
*******bbstory ******
**************************/
.no-gutter > [class*='col-'] {
	padding-right: 0;
	padding-left: 0;
}

.carousel-fade .carousel-control {
	top:45%;
	background-image: none;
}

.bbstory {
	background-image: url(../../images/bbbg.jpg);
	background-position: center;
	background-repeat: repeat-y;
	background-size: auto;
	min-height: 350px;
}

.bbstory img {
	display: block;
	height: auto;
	max-width: 100%;
	margin: 0 auto;
}

/*************************
*****button******
**************************/


/**bbs**/

.ripple button {
	position: relative;
	border: none;
	outline: none;
	cursor: pointer;
	background: transparent;
	color: #587922;
	padding: 8px 20px;
	border-radius: 2px;
	font-size: 14px;
	border: 1px #587922 solid;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

.ripple button:hover {
	border: 1px #93b659 solid;
	color: #93b659;
	border-radius: 30px;
}

.ripple input {
	position: relative;
	border: none;
	outline: none;
	cursor: pointer;
	background: transparent;
	color: #587922;
	padding: 8px 20px;
	border-radius: 2px;
	font-size: 14px;
	border: 1px #587922 solid;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

.ripple input:hover {
	border: 1px #93b659 solid;
	color: #93b659;
	border-radius: 30px;
}

#services_bbs input[type="text"] {
	padding: 2px 0;
	line-height: 26px;
	border-radius: 2px;
	border: 1px #6dbb4f solid;
	background: transparent;
	color: #6dbb4f;
}

#services_bbs input:hover {
	border-color: #54ce25;
	outline: 0
}

#services_bbs input:focus {
	border-color: #6fddb2;
	outline: 0;
	box-shadow: inset 0 0px 0px rgba(128, 222, 91, .9), 0 0 6px rgba(128, 222, 91, .6);
}

#services_bbs textarea[type="text"] {
	padding: 2px 0;
	line-height: 26px;
	border-radius: 2px;
	border: 1px #6dbb4f solid;
	background: transparent;
	color: #6dbb4f;
}

#services_bbs textarea:hover {
	border-color: #54ce25;
	outline: 0
}

#services_bbs textarea:focus {
	border-color: #6fddb2;
	outline: 0;
	box-shadow: inset 0 0px 0px rgba(128, 222, 91, .9), 0 0 6px rgba(128, 222, 91, .6);
}

@media(max-width:768px) {
	#services_bbs input,
	#services_bbs textarea,
	#services_news input,
	#services_news textarea,
	#services_login input,
	#services_login textarea {
		font-size: 16px;
	}
}


/**new**/

.ripple2 input {
	position: relative;
	border: none;
	outline: none;
	cursor: pointer;
	background: transparent;
	color: #587922;
	padding: 8px 20px;
	border-radius: 2px;
	font-size: 14px;
	border: 1px #587922 solid;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

.ripple2 input:hover {
	border: 1px #93b659 solid;
	color: #93b659;
	border-radius: 30px;
}

/*************************
*********ssbg******
**************************/
.ssbg {
	
	background-position: center;
	background-repeat: repeat-y;
	background-size: 99% 100%;
}
#carousel-bounding-box {
	border:solid 1px #fff;
	box-shadow:0px 0px 3px rgba(0,0,0,.3);
}

.ssbgin {
    background: url(../../images/ssbg.jpg);
}

.partners ul li img {
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	-webkit-transition: .2s ease-in-out;
	transition: .2s ease-in-out;
}

.partners ul {
	margin: 0;
	padding: 0;
}

.partners ul li {
	display: inline-block;
	float: left;
	width: 16.66666666666667%;
    border: #ffffff 1px solid;
	cursor:pointer;
}
.ad1_title {
	padding: 0 1% 3%;
}
		
@media(max-width:992px) {
	.partners ul li {
		display: inline-block;
		float: left;
		width: 12.5%;
	}
	.ssbg {
		margin-bottom:5%;
	}
}

@media(max-width:992px) {
	.partners ul li {
		display: inline-block;
		float: left;
		width: 12.5%;
	}
}

@media(max-width:400px) {
	.partners ul li {
		display: inline-block;
		float: left;
		width: 16.66666666666667%;
	}
}

.partners ul li img:hover {
	-webkit-filter: grayscale(0);
	filter: grayscale(0);
}
@media(max-width:1200px) {
	.ssbg {
		margin-right: 0px;
		margin-left: 0px;
	}
}
	@media(max-width:1440px) {
		#ad1 {
			padding: 2% 0 9%;
		}
	}
	@media(max-width:991px) {
		#ad1 {
			padding: 4% 0 13%;
		}
		.carousel-inner>.item>a>img {
			width:100%;
		}
		.flower01,.flower02 {
			width:45%;
		}
			.flower01 img,.flower02 img {
				width:100%;
			}
	}
	@media(max-width:500px) {
		#ad1 {
			padding: 7% 3% 15%;
		}
		.ad1_title {
			padding: 0 0 2%;
		}
		.flower01, .flower02 {
			width: 49%;
		}
		.bbstory {
			margin-top:20px;
		}
		.ssbg {
			padding:0;
		}
	}
	@media(max-width:425px) {
		.ad1_title {
			padding: 0 0 5%;
		}
	}
.fa-chevron-right,.fa-chevron-left {
				color:#fff;
			}
/*---news strat-------------------------------------------------------------------------------------------------------------------------------*/
/*news_title*/
.news_title {
	padding: 0 1% 1%;
}
/*inews*/
.inews {
	padding:0 2%;
	z-index:8;
}
/*inews_list*/
.inews_list {
	position:relative;
	text-align:left;
	border:solid 3px #fff;
	border-radius:12px;
	background: url(../../images/inews_bg_02.png) bottom center no-repeat, url(../../images/inews_bg_01.png) center repeat-y;
	background-size: contain;
    padding: 1em;
    min-height: 340px;
	box-shadow: 3px 2px 3px rgba(0,0,0,.1);
}
	/*inews_deco*/
	.inews_deco {
		text-align:right;
		margin-bottom:2%;
	}
		.inews_deco img {
			max-width:40%;
		}
	.inews_list:after {
		content:'';
		position:absolute;
		right: -6%;
		bottom: -19%;
		background: url(../../images/type.png) top right no-repeat;
		width: 15%;
		height: 25%;
		background-size: contain;
	}
	.inews_list p {
		transition: .2s linear;
	}
	.inews_list td {
		font-size:12px;
		letter-spacing:0;
		vertical-align: top;
	}
	.inews_list a {
		transition: .2s linear;
		font-size:15px;
		letter-spacing:1px;
	}
	.inews_list a:hover,.inews_list p:hover {
		color: #e5211b;
	}
/*newsin*/
.newsin {
	text-align: left;
    padding: 0 4%;
    min-height: 500px;
	background:rgba(255,255,255,0.7);

}
	.newsin span {
		font-size: 13px;
		line-height: 20px;
		letter-spacing: 0;
	}
	.newsin p {
		color:#000;
	}
		.inews_list p a {
			font-size:13px;
		}
	.newsin img {
		max-width:100%;
	}
	.newsin a {
		display:inline-block;
		transition: .2s linear;
	}
		.newsin a:hover {
			color: #e5211b;
		}
	@media screen and (max-width:830px) {
		.inews_list:after {
			display:none;
		}
	}
	@media screen and (max-width:500px) {
		.inews {
			padding:0;
		}
		.inews_list {
			min-height:250px;
			padding:2%;
		}
		.news_title {
			padding: 3% 1% 3% 1%;
		}
		.newsin {
			padding:0;
		}
		.inews_list a {
			font-size:14px;
		}
	}
	@media screen and (max-width:430px) {
		.newsin td,.inews_list td {
			display:block;
			width:100%;
			text-align:left;
		}
		.newsin a {
			font-size:14px;
		}
	}
/*---news end-------------------------------------------------------------------------------------------------------------------------------*/

.sst img {
    float: left;
    display: block;
    margin: 3px;
}

@media screen and (max-width:650px) {
.sst img {
	width:48%;
}
}}

/*************************
*******animate ***********
**************************/
.animate_flash img:hover {
	opacity: 1;
	-webkit-animation: flash 1.5s;
	animation: flash 1.5s;
}
@-webkit-keyframes flash {
	0% {
		opacity: .4;
	}
	
	100% {
		opacity: 1;
	}
}
@keyframes flash {
	0% {
		opacity: .4;
	}
	
	100% {
		opacity: 1;
	}
}

/*************************
****services_partition*****
**************************/

#services_partition {
	background: #fff;
	padding-bottom: 40px;
}
.partition {
    width: 55%;
	padding-top: 2%;
}

.partition img {
	margin: 0px auto;
}
/*rmbt*/
.rmbt {
	text-align:center;
	padding:0 0 2% 0;
    width: 100%;
}

		.rmbt li {
			display:inline-block;
			width:10%;
			padding:0 5px;
			vertical-align:top;
		}
.rmbt li img {
			width:100%;
		}

	@media screen and (max-width:1200px) {
		.rmbt li {
			width:14%;
			padding:5px;
		}
	}
	@media screen and (max-width:950px) {
     .rmbt li {
			width:21%;
		}
	}
	@media screen and (max-width:700px) {

		.rmbt li {
			width:24%;
		}
		.rmbt li img {
			width:100%;
		}

	}