/* 第二主選單&手機板主選單修正 */

/* head2 */
.header--clone {
	position: fixed;
	width: 100%;
	z-index: 130;
	top: 0;
	left: 0;
	transform: translateY(-220px);
	transition: all 0.6s ease-in-out;
}

.header--stick {
	transform: translateY(0%);
}

.sb-active .header--clone {
	transform: translateY(-220px);
}


/* humburger */
#mobile_toggle {
	padding: 0;
	position: absolute;
	top: 52%;
	transform: translateY(-50%);
	left: 10px;
	outline: none;
}

#mobile_toggle p {
	margin: 0;
}

.mobile-toggle {
	width: 40px;
	height: 36px;
	position: relative;
	background-color: transparent;
	border: none;
	outline: none;
}

.mobile-toggle span,
.mobile-toggle::before,
.mobile-toggle::after {
	content: "";
	display: block;
	background: #000;
	width: 30px;
	height: 3px;
	margin: 0 auto;
	position: absolute;
	top: 8px;
	left: 0;
	right: 0;
	-webkit-transition: opacity 400ms ease, -webkit-transform 400ms ease 0s;
	transition: opacity 400ms ease, -webkit-transform 400ms ease 0s;
	-o-transition: transform 400ms ease 0s, opacity 400ms ease;
	transition: transform 400ms ease 0s, opacity 400ms ease;
	transition: transform 400ms ease 0s, opacity 400ms ease, -webkit-transform 400ms ease 0s;
	-webkit-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transform-origin: 0px 50% 0px;
	-ms-transform-origin: 0px 50% 0px;
	transform-origin: 0px 50% 0px;
	outline: none;
}

.mobile-toggle::after {
	top: 24px;
}

.mobile-toggle span {
	top: 16px;
}

.sb-active .mobile-toggle::before {
	-webkit-transform: rotate(45deg) translate(0px, -4px);
	-ms-transform: rotate(45deg) translate(0px, -4px);
	transform: rotate(45deg) translate(0px, -4px);
}

.sb-active .mobile-toggle span {
	opacity: 0;
}

.sb-active .mobile-toggle::after {
	-webkit-transform: rotate(-45deg) translate(0px, 4px);
	-ms-transform: rotate(-45deg) translate(0px, 4px);
	transform: rotate(-45deg) translate(0px, 4px);
}


/* 第二主選單&手機板主選單修正 end*/

/* 手機版 head fixed */
#container #header {
	position: relative;
	z-index: 999;
	background-color: #fff;
	box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.3);
}

/* 這個是有用的假設你有要用那個黑色色塊的話這個要用高不然 黑色色塊會蓋住他 */

#container {
	position: relative;
}

.sb-active #container:before {
	content: "";
	width: 100%;
	height: 100%;
	display: block;
	background: rgba(0, 0, 0, 0.8);
	position: absolute;
	left: 0;
	top: 0;
	z-index: 888;
	-webkit-animation: cover 0.5s;
	animation: cover 0.5s;
}

@keyframes cover {
	from {
		background: rgba(0, 0, 0, 0);
	}

	to {
		background: rgba(0, 0, 0, 0.8);
	}
}

#header2 {
	min-height: auto !important;
	opacity: 0;
	box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.3);
}

#header2.header--stick {
	opacity: 1;
}

@keyframes closebtn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

.sb-site {
	transition: transform 400ms ease;
}

.header—clone {
	transition: transform 400ms ease;
}

@media (max-width: 480px) {

	li,
	a,
	p,
	div,
	dd,
	th,
	td {
		font-size: 14px;
	}

	h2,
	.h2 {
		font-size: 26px;
	}
}

/* 共用區 */
.wrapper {
	width: 100%;
	max-width: 1440px;
	padding: 0 2%;
}

.dblue {
	color: #004ab8 !important;
}

a:hover,
a:focus {
	text-decoration: none;
	color: #0030ae;
}

li,
a,
p,
div,
dd,
th,
td {
	font-size: 16px;
	line-height: 1.5;
}

.fz16 {
	font-size: 16px;
}

.cominfomail {
	display: none;
}

#footer {
	background: #ffffff;
	color: #070707;
	border-top: 1px solid;
}

#footer .ftbar li,
#footer .ftbar li a {
	font-size: 14px;
}

#footer .ftbar li a {
	color: #000;
	width: 100%;
}

.footer .smo>div {
	background-color: #000;
	border-radius: 5px;
}

.footer .smo {
	margin-top: 5em;
	display: none;
}

#footer .title {
	background: none;
	border-bottom: 1px solid #999;
	font-weight: 900;
	font-size: 15px;
}

#cominfo ul li:first-child {
	background: none;
	padding: 0;
}

#cominfo ul li:nth-child(2) {
	background: none;
	padding: 0;
}

#cominfo a {
	color: #000;
	font-size: 14px;
}

#cominfo a:hover,
#cominfo a:focus {
	color: #0030ae;
}

#cominfo ul li {
	padding-left: 0;
	font-size: 14px !important;
}

#footer .ftbar li a {
	padding: 0 3em 0 6px;
}

.cominfofax,
.cominfotel,
.cominfoadd {
	font-size: 14px;
}

#main_menu a:hover,
#main_menu>.active>a,
#main_menu>.active>a:hover,
#main_menu>.active>a:focus {
	background-image: none;
	color: #000;
	background-color: transparent;
	font-weight: 900;
}

#main_menu>li {
	position: relative;
	margin: 10px 15px;
}

.navbar-nav>li>a {
	padding-top: 15px;
	padding-bottom: 15px;
	font-size: 18px;
	padding: 15px 0;
}

#main_menu>li::before {
	content: '';
	position: absolute;
	z-index: -1;
	bottom: 8px;
	left: 0;
	width: 100%;
	height: 3px;
	opacity: 1;
	transform: scale3d(0, 1, 1);
	transform-origin: 0% 50%;
	transition: transform 0.5s;
	background-color: #0061f2;
}

#main_menu>li:hover::before,
#main_menu>li:focus::before {
	transform: scale3d(1, 1, 1);
}

#language_area ul li a:hover,
#language_area ul li a:focus {
	background-image: none;
	background-color: #999999;
}

.nav-pills>li+li {
	margin-left: 0;
}

#copyright,
#copyright a,
#footlink ul li a,
#footlink {
	font-size: 14px;
}

#footlink ul li a {
	display: inline-block;
}

.navbar-default .navbar-nav>li>a {
	color: #000;
}

#side_menu>ul>li>a {
	color: #ffffff;
}

#side_menu>ul>li.active ul li a:hover,
#side_menu>ul>li.active ul li.active a {
	color: #000;
	background-image: none;
	font-weight: 900;
}

#side_menu>ul>li.active ul li a {
	color: #1f1a79;
	font-weight: 900;
}

#side_menu>ul>li>a:after {
	line-height: 24px;
}

.breadcrumb {
	background: transparent;
	text-align: right;
}

.breadcrumb a {
	color: #000000;
}

.breadcrumb>.active {
	color: #1f1a79;
}


.breadcrumb>li+li:before {
	content: ">";
	padding: 0 5px;
	color: #999;
}

.breadcrumb li:first-child a {
	background-position: 0 center;
	text-indent: 0;
	display: inline-block;
	width: auto;
	height: auto;
	vertical-align: baseline;
	padding-left: 20px;
}

.content {
	background: #ffffff;
	;
}

#side_menu {
	box-shadow: 0 2px 4px -2px rgba(0, 0, 0, .6);
}

#side_menu>ul>li:last-child>a {
	margin-bottom: 0;
}

.breadcrumb a:hover,
.breadcrumb a:focus {
	color: #0030ae;
}

.morePage.breadcrumb>li:nth-last-child(2) {
	display: none;
}

.nav>li>a:hover,
.nav>li>a:focus {
	background-color: transparent;
}

@media (max-width: 991px) {
	#side_menu {
		display: none;
	}

	#left_menu>.sb-menu>li:nth-last-child(3) {
		display: none;
	}

	#left_menu>.sb-menu>li:nth-last-child(1),
	#left_menu>.sb-menu>li:nth-last-child(2) {
		width: 50%;
		float: left;
	}

	#left_menu>.sb-menu>li:nth-last-child(1) a,
	#left_menu>.sb-menu>li:nth-last-child(2) a {
		font-size: 14px;
	}

	#side_pSearch .btn-default {
		padding: 8px 12px;
	}

	#kwd {
		font-size: 15px;
	}

	#left_menu #side_menu>ul>li>a,
	#left_menu a {
		padding: 12px 16px;
		font-size: 15px;
	}
}

@media (max-width: 991px) {


	.ft-bar,
	.cominfo,
	#footer {
		padding-top: 16px;
	}

	#footer .wrapper {
		margin-bottom: 22px;
	}
}

@media (max-width: 768px) {
	#footer .ftbar li {
		width: 48%;
		float: left;
	}

	.breadcrumb {
		margin: 0;
		padding-bottom: 0;
	}
}

@media (max-width: 480px) {

	.breadcrumb li,
	.breadcrumb a {
		font-size: 12px;
	}
}


/* 共用區 end*/

/* 首頁 */
.index-com {
	background: #eee;
	width: 50%;
	margin-left: 0;
}

.index-new {
	background: url(../images/home_about.jpg) no-repeat center top;
	background-size: cover;
}

.index-new {
	width: 50%;
	margin-right: 0;
}

.index-pro .col-md-4 .image {
	display: block;
}

.index-pro .col-md-4 .pro-series {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	text-align: center;
	font-size: 2.5em;
	font-style: normal;
	color: #fff;
	line-height: 2;
	background-color: rgba(0, 0, 0, .6);
	background: linear-gradient(180deg, rgba(0, 0, 0, .5)0%, rgba(0, 0, 0, .65)60%, rgb(21, 22, 24)100%);
}

.index-com .more {
	display: inline-block;
	padding: 6px;
	margin: 10px 0;
	color: #888;
	background-image: none;
	position: absolute;
	right: 16px;
	top: -54px;
	font-size: 14px;
}

.index-com .more:hover,
.index-com .more:focus {
	color: #000000;
}


.index-com .more:before,
.index-com .more::after {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-top: 11px;
	margin-left: 11px;
	border-bottom: 1px solid #888888;
	border-right: 1px solid #888;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
	position: absolute;
	margin-top: 7px;
	transition: all 0.5s;
}

.index-com .more:hover:before,
.index-com .more:hover::after,
.index-com .more:focus:before,
.index-com .more:focus::after {
	border-bottom: 1px solid #000;
	border-right: 1px solid #000;
}

.index-com .more::after {
	right: -2px;
}

.index-com .more:before {
	right: -6px;
}

.index-pro .col-md-4:hover .image {
	box-shadow: none;
}


.ehover12 img {
	max-width: none;
	width: -webkit-calc(100% + 20px);
	width: calc(100% + 20px);
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(-10px, 0, 0);
	transform: translate3d(-10px, 0, 0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.ehover12:hover img {
	opacity: 0.4;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

.ehover12 .overlay {
	padding: 20% 20px;
}

.ehover12 h2 {
	position: relative;
	overflow: hidden;
	padding: 0.5em 0;
	background-color: transparent;
	margin-bottom: 0;
	font-size: 1em;
	text-shadow: 1px 2px 4px #333;
}

.ehover12 h2::after {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background: #fff;
	content: '';
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(-100%, 0, 0);
	transform: translate3d(-100%, 0, 0);
}

.ehover12:hover h2::after {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

.ehover12 p {
	line-height: 2;
	font-size: 0.8em;
	color: #FFF;
	opacity: 0;
	background-color: transparent;
	border: none;
	font-size: 0.8em;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(100%, 0, 0);
	transform: translate3d(100%, 0, 0);
}

.ehover12:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

.index-pro .col-md-4:hover .pro-series {
	color: #fff;
}

.index-com .com {
	margin: 0;
}

.ehover12 .biga {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

.index-map .index-map-text .title {
	background-image: none;
	padding: 0;
	font-weight: 900;
}

#index_company h3 a {
	font-size: 35px;
	font-weight: 900;
}

@media (max-width: 991px) {
	.index-com {
		width: 100%;
	}

	.flex-box {
		display: flex;
	}

	.ehover12 .overlay {
		padding: 10% 20px;
	}

	.ehover12 h2 {
		font-size: 25px;
		padding: 12px 0;
	}

	.ehover12 p {
		font-size: 20px;
		line-height: 1.8;
	}
}

@media (max-width: 768px) {
	.index-new {
		display: none;
	}
}

@media (max-width: 375px) {

	.index-map .index-map-text .title,
	#index_company h3 a {
		font-size: 27px;
	}
}

/* 首頁end */

/* 英文版 */

.index-pro .col-md-4 .pro-series {
	max-width: initial;
}

/* 英文版 end*/

/* 產品單元 */
#pb_area_mobile {
	display: block;
}

.productPic {
	width: 31%;
	height: 222px;
	margin: 1%;
	float: left;
	position: relative;
	background-color: #000;
	overflow: hidden;
	transition: all 0.5s;
	background: rgba(66, 101, 210, 0.6);
	position: relative;
	cursor: pointer;
	background-size: cover;
	background-position: center;
	display: block;
}


.productPic .mask {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(66, 101, 210, 0.75);
	opacity: 0;
	transition: all 0.5s;
}

.productPic .mask:hover,
.productPic .mask:focus {
	opacity: 1;
}

.productPic .mask p {
	position: absolute;
	color: #fff;
	text-align: center;
	margin: 0;
	transform: translate(-50%, -50%);
	top: 50%;
	left: 50%;
	font-size: 18px;
}

.productPic a {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 999;
	background-size: cover;
	background-position: center;
}

.productPic .fancybox img {
	display: none;
}

#pb_area {
	display: none;
}

#fancybox-thumbs ul {
	transform: translateX(-50%);
}

#fancybox-thumbs ul::after {
	content: '';
	display: block;
	clear: both;
	visibility: hidden;
	overflow: hidden;
}

.fancybox-nav span {
	visibility: visible !important;
}

.productPic img {
	opacity: 0;

}

.productPic:hover img,
.productPic:focus img {
	opacity: .2;
}


#content .thumbnails .catelist {
	height: 270px;
	min-width: auto;
	max-width: initial;
	width: 31%;
}

.listItemH.listItemH {
	height: 330px;
}

.thumbnail {
	padding: 0;
	border: #e1e1e1 1px solid;
	height: 270px;
}

.thumbnail .caption {
	padding: 20px 0 10px 0;
}

.listimg {
	height: 210px;
	border: transparent;
}

.snip0001:hover,
.snip0000:hover {
	/* background: rgba(0, 0, 0, 0.65); */
	background: rgba(108, 147, 224, 0.65);
	border: none;
}

.snip0000 .snip-btn a i {
	top: 50%;
}

.cate-name a,
.cate-name-more a {
	font-size: 16px;
	color: #000000;
}

.snip0001 .btn.btn-info {
	background-image: none;
	background-color: #000;
}

.prodlist .cate-name a {
	color: #a5a5a5;
	font-size: 16px;
	font-weight: 600;
	font-family: "Arial", "sans-serif";
}

.nav-list ul[id^="roottreecid"] {
	display: none;
}

@media (max-width: 920px) {
	.productPic {
		width: 48%;
	}

	.thumbnail {
		position: relative;
	}

	.listimg {
		border: transparent;
		position: absolute;
		transform: translate(-50%, -50%);
		left: 50%;
		top: 50%;
		width: 100%;
	}

	.thumbnail .caption {
		padding: 20px 0 10px 0;
		position: absolute;
		bottom: 0;
		transform: translateX(-50%);
		left: 50%;
	}
}

@media (max-width: 620px) {
	.productPic {
		height: 150px;
	}
}

@media (max-width: 568px) {
	.productPic {
		height: 108px;
	}

	#content .thumbnails .catelist {
		width: 48%;
		float: left;
		margin: 1%;
		height: 210px;
	}

	.thumbnail {
		height: 210px;
	}

	.listimg {
		height: 170px;
	}

	.thumbnail .caption {
		position: absolute;
		bottom: 0;
		transform: translateX(-50%);
		left: 50%;
	}
}

@media (max-width: 360px) {
	.productPic {
		width: 100%;
		height: 195px;
	}
}

/* 產品單元 end*/

/* 表單頁 */
.btn {
	border-radius: 0;
	border-color: transparent;
	font-size: 15px;
}

.btn-danger {
	color: #fff;
	background-color: #000;
	border-color: transparent;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger.focus,
.btn-danger:active,
.btn-danger.active,
.open>.dropdown-toggle.btn-danger {
	color: #fff;
	background-color: #444;
	border-color: transparent;
}

.btn-primary {
	color: #fff;
	background-color: #0c009f;
	border-color: transparent;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.btn-primary.active,
.open>.dropdown-toggle.btn-primary {
	color: #fff;
	background-color: #1736ce;
	border-color: transparent;
}

.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
	outline: none;
}

.alert {
	border-radius: 0;
	font-size: 16px;
}

.alert-info {
	color: #000000;
	background-color: #efefef;
	border-color: #dfdfdf;
}

.form-horizontal {
	font-size: 16px;
	padding: 8px 12px;
	height: auto;
}

.form-control {
	font-size: 17px;
	box-shadow: none;
	border-radius: 0;
	height: auto;
	padding: 8px 12px;
}

.form-control:focus {
	border-color: #999;
	box-shadow: none;
}

.form-horizontal .control-label .red,
.formStar {
	color: #cc0000;
	font-size: 25px;
	vertical-align: -8px;
	margin-right: 2px;
}

.txtNormal {
	display: block;
}

fieldset.over-border {
	border-radius: 0;
}


/* 表單頁 end */

/* 文字列表 */
.tabList th {
	background: #1f1a79;
	color: #fff;
}

.tabList th,
.tabList td:nth-child(1),
.tabList td:nth-child(3) {
	text-align: center;
}

.tabList th:nth-child(1) {
	width: 10%;
}

.tabList th:nth-child(2) {
	width: 70%;
}

.tabList th:nth-child(3) {
	width: 20%;
}

.tabList tr:nth-child(2n) {
	background-color: #e5efff;
}


.tabList>tbody>tr:nth-child(2n) {
	background-color: #ebebeb;
}

.tabList>tbody>tr:hover,
.tabList>tbody>tr:hover a {
	background-color: #3f3f3f;
	color: #fff
}

.tabList>thead>tr>th,
.tabList>thead>tr>td {
	border-bottom: none;
}

.tabList a {
	display: block;
}

/* 文字列表end */

/* 20191114色系調整 */
.index-pro .col-md-4:nth-of-type(1) .pro-series {
	background-color: #5daee1aa;
	background: linear-gradient(180deg, rgba(93, 174, 225, 0.5)60%, rgba(20, 99, 171, 0.7)100%);
	;
}

.index-pro .col-md-4:nth-of-type(2) .pro-series {
	/* background-color: #87c766aa; */
	background: linear-gradient(180deg, rgba(135, 199, 102, 0.5)60%, rgba(55, 124, 19, 0.7)100%);
}

.index-pro .col-md-4:nth-of-type(3) .pro-series {
	/* background-color: #f89448aa; */
	background: linear-gradient(180deg, rgba(248, 148, 72, 0.5)60%, rgba(188, 82, 2, 0.7)100%);
}

.index-pro .col-md-4:nth-of-type(4) .pro-series {
	/* background-color: #f1708caa; */
	background: linear-gradient(180deg, rgba(241, 112, 140, 0.5)60%, rgba(210, 73, 103, 0.7)100%);
}

.index-pro .col-md-4:nth-of-type(5) .pro-series {
	/* background-color: #6f6bb7aa; */
	background: linear-gradient(180deg, rgba(111, 107, 183, 0.5)60%, rgba(83, 79, 165, 0.7)100%);
}

.index-pro .col-md-4:nth-of-type(6) .pro-series {
	background: linear-gradient(180deg, rgba(255, 234, 0, 0.5)60%, rgb(255, 194, 0, 0.7)100%);
}

#language_area,
#copyright {
	color: white;
	background: linear-gradient(to left, #127cbd 0%, #2691ac 10%, #279f75 20%, #4eae47 30%, #7cad35 40%, #c8b02e 50%, #e29541 60%, #ec752c 70%, #e85d37 80%, #d94044 90%, #e3355c 100%);
}

#language_area {
	background: linear-gradient(to right, #127cbd 0%, #2691ac 10%, #279f75 20%, #4eae47 30%, #7cad35 40%, #c8b02e 50%, #e29541 60%, #ec752c 70%, #e85d37 80%, #d94044 90%, #e3355c 100%);

}

.fa-search:before {
	color: #fff;
}

#side_menu>ul>li:nth-of-type(6n+1)>a::after {
	background-color: #127cbd;
}

#side_menu>ul>li:nth-of-type(6n+2)>a::after {
	background-color: #4eae47;
}

#side_menu>ul>li:nth-of-type(6n+3)>a::after {
	background-color: #c8b02e;
}

#side_menu>ul>li:nth-of-type(6n+4)>a::after {
	background-color: #e85d37;
}

#side_menu>ul>li:nth-of-type(6n+5)>a::after {
	background-color: #d94044;
}

#side_menu>ul>li:nth-of-type(6n+6)>a::after {
	background-color: #021cac;
}

#side_menu>ul>li>a {
	background: #dedede;
	color: #000000;
}

#side_menu>ul>li>a:hover,
#side_menu>ul>li.active>a {
	background: #3646b5;
	color: #fff;
}

#side_menu>ul>li>a:after {
	content: "\e081";
	float: right;
	font-family: 'Glyphicons Halflings';
	font-style: normal;
	font-weight: 400;
	font-size: 18px;
	line-height: 1;
	color: #fff;
	margin-top: 2px;
	border-radius: 50%;
	box-shadow: 0 1px 1px 1px rgba(0, 0, 0, .2);
}

.snip0000:hover .snip-btn i {
	width: 80px;
}

/* 20200428 */
@media(max-width:1366px) {

	#mainnav {
		margin-top: 0.5em;
	}

	#main_menu>li {
		margin: 10px 8px;
	}

	.navbar-default .navbar-nav>li>a {
		font-size: 17px;
	}
}

@media(max-width:1200px) {
	#main_menu>li {
		margin: 10px 5px;
	}

	.navbar-default .navbar-nav>li>a {
		font-size: 15px;
	}
}

@media(max-width:991px) {
	.index-pro .ehover12 {
		position: relative;
	}

	.index-pro .ehover12 .info {
		display: none;
	}

	.index-pro .ehover12 .info h2::after {
		display: none;
	}

	.index-pro .ehover12 h2 {
		margin-top: 0;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);

	}
}

/* 20200428 end*/