/* 自訂檔 */

@import url(http://fonts.googleapis.com/earlyaccess/notosanstc.css); /* font-family: 'Noto Sans TC', sans-serif; */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400'); /* font-family: 'Open Sans', sans-serif; */
@import url('https://fonts.googleapis.com/css?family=Montserrat:200,400,500'); /* font-family: 'Montserrat', sans-serif; */

html {	
	font-size: 10px;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
	font-family: Helvetica, Arial, 'Noto Sans TC', "微軟正黑體", sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.6;
	color: #333;
	scroll-behavior: smooth;
	background: url(../profile_02.png), #fff;
}

.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0
}

.clear01 {
}
.clear01::after {
	content: "";
	display: block;
	clear: both;
}

.fleft{
	float: left;
}

/*
.back-to-top {
	width: 38px;
	height:41px;	
	position: fixed;
	bottom: 20px;
	right: 25px;
	text-decoration: none;
	font-size: 12px;
	padding: 1em;
	display: none;
	background:url(../top.png) no-repeat;
	z-index:1000;
}
*/

/* =============== 語言列 ===================== */


@media (min-width: 992px) {
	.language{
		position:fixed;
		right: 15px;
		margin-top: 28px;
		z-index: 50;
	}
	
	.language ul{
	margin: 0;
	padding: 0;
	}
	
	.language ul li{
	float: left;
	list-style-type: none;
	margin-right: 3px;
	}
}


@media (min-width: 1200px) {
	.language{
		right: 80px;
	}
}

@media (max-width: 991px) {
	.language{
		padding-left: 20px;
		background: #fff;
		text-align: center;
	}
	
	.language ul{
	margin: 0;
	padding: 0;
	}
	
	.language ul li{
		display: inline-block;
		list-style-type: none;
		margin-right: 3px;
	}
	
	
}





.language ul li a{
	width: 30px;
	color: #fff;
	font-size: 13px;
	padding:6px 0;
	text-align: center;
	display: block;
}

.language ul li:nth-of-type(1) a{
	background: #004f94;
}

.language ul li:nth-of-type(2) a{
	background: #49b8c3;
}

.language ul li:nth-of-type(3) a{
	background: #6ea831;
}

.language ul li:nth-of-type(4) a{
	background: #1a7f18;
}





/* =============== 首頁 ===================== */

.container {
    padding-right: 30px;
    padding-left: 30px;
    margin-right: auto;
    margin-left: auto;
}

footer{
	font-size: 13px;
	color: rgba(220,220,220,1.00);
	text-align: center;
	padding: 10px 0;
	background: #1e427d;
}

/* 第2層 */
.index_profile *{
	box-sizing: border-box;
}
.index_profile{	
	background: #e8e8e8;
}

.index_profile ul{	
	display: flex;
	flex-flow: wrap;	
	margin: 0;
	padding: 0;	
}

.index_profile ul li{
	list-style-type: none;
}

.index_profile ul li:nth-of-type(1){
	width: 45%;
	min-height: 320px;
	background: url(../index_01.png) no-repeat center bottom;
	background-size: cover;
}

.index_profile ul li:nth-of-type(2){
	flex: 1;
	padding: 40px 30px 0;
	letter-spacing: 1px;
	background: url(../index_02.png) no-repeat center top;
	background-size: contain;
}

@media (max-width: 991px) {	
	.index_profile ul li:nth-of-type(1){
		width: 100%;
		min-height: 320px;
	}
	.index_profile ul li:nth-of-type(2){
		padding: 10px 30px 30px;
		background:none;
	}
	
}


.index_title{
	color: #1e427d;
	padding: 0 0 15px;
	margin-bottom: 40px;
	text-align: center;
	font-size: 22px;
	font-weight: 500;
	letter-spacing: 1px;
	background: url(../icon03.png) no-repeat center bottom;
}

.index_title .en{
	color: #afafaf;
	font-size: 32px;
	line-height: 1.1;
	font-weight: 300;
	font-family: 'Open Sans', sans-serif;
	letter-spacing: 1px;
	margin-bottom: 6px;
}






/* 第3層 */

.index_choice{
	padding: 60px 0;
	background:url(../index_03.jpg) no-repeat;
	background-size: cover;
	
	background-attachment: fixed;
	
	
}


.index_choice .index_title{
	color: #fff;
	font-weight: 400;
}

.index_choice ul{
	margin:50px 0 0;
	padding: 0;
}

.index_choice ul li{
	width: calc(100%/4);
	position: relative;
	float: left;
	padding: 0 30px 0;
	color: #fff;
	text-align: center;
	letter-spacing: 1px;
	list-style-type: none;
}

@media (max-width: 767px) {
	.index_choice ul li{
		width: calc(100%/2);
	}
	.index_choice ul li:nth-of-type(3){
		clear: left;
	}
}

@media (max-width: 479px) {	
	.index_choice ul li{
		width: 100%;
		padding: 0 25px 15px;
	}	
	
}

.index_choice ul li .pic{
	position: relative;
	margin-bottom: 20px;
}
.index_choice ul li .pic img{
	max-width: 120px;
}

.index_choice ul li:hover .pic{
	animation:iconmove 0.5s infinite alternate;
}

.index_choice ul li h4{
	color: #69e2ef;
	font-weight: 400;
	line-height: 130%;
}

.index_choice ul li p{
	font-size: 14px;
	font-weight: 400;
}

@keyframes iconmove {
	from {top: 0;}
	to {top:-15px;}
}



/* 第4層 */


.index_product{
	padding: 60px 0 0;
}

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

.index_product ul li{
	position: relative;
	list-style-type: none;	
	border-radius: 3px;
	margin-bottom: 30px;
	text-align: center;
	cursor: pointer;
	overflow: hidden;
	z-index: 1;	
}

.index_product ul li a{
	color: #004f93;
}

.index_product ul li a:hover{
	color: #308cdc;
}

.index_product ul li .pic{
	overflow: hidden;	
}

.index_product ul li .pic img{
	transition: all 0.3s;
}

.index_product ul li:hover .pic img{	
	transform: scale(1.2,1.2);
}

.index_product ul li h2{
	font-size: 22px;
	margin-top: 30px;
}

.index_product ul li p{
	color: rgba(112,112,112,1.00);
}



@media (min-width: 992px) {
	
	.index_product ul li{
		width: calc(100%/3 - 10px);		
		margin: 0 calc(10px*3/2) 50px 0;
		float: left;
	}

	.index_product ul li:nth-of-type(3n){
		margin-right: 0;
	}
	
	.index_product ul li:nth-of-type(3n+1){
		clear: left;
	}
	
	
}


@media (min-width: 768px) and (max-width: 991px) {
	.index_product ul li{
		width: calc(100%/2 - 7.5px);
		margin: 0 calc(7.5px*2) 50px 0;
		float: left;
	}	

	.index_product ul li:nth-of-type(2n){
		margin-right: 0;
	}
	
	.index_product ul li:nth-of-type(2n+1){
		clear: left;
	}
	
}




/*第5層*/

.index_certification{
	padding: 40px 0;
	background: url(../index_17.jpg) no-repeat center bottom;
}








/*========================== 公司簡介 ============================*/


.profile{
	min-height: 585px;
	position: relative;
	display: flex;
	flex-flow: wrap;
}

.profile section{	
	display: flex;
	align-items: center;
	position: relative;
}
.profile section:nth-of-type(1){
	width: 60%;
	background: url(../profile_03.png) no-repeat right center, url(../profile_02.png);
	background-size: cover, auto;
}
.profile section:nth-of-type(2){
	width: 40%;
	padding:40px 100px 40px 0;
	background:  url(../profile_02.png);
}

.profile .con{
	letter-spacing: 1px;
}
.profile .title{
	display:flex;
	flex-flow: row-reverse wrap;
	align-items: flex-start;
}
.profile .con .en{
	max-width: 158px;
	position: relative;
	font-size: 14px;
	line-height: 140%;
	font-weight: 600;
	color: #004f94;
	text-transform: uppercase;
	padding: 0px 0 0px 35px;
	letter-spacing: 1px;
	margin: 5px 0 0 30px;
}
.profile .con .en::before{
	content: "";
	width: 4px;
	height: 100%;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	background: #004f94;
	transform:skewX(-10deg);
}
.profile .con .en::after{
	content: "";
	width: 4px;
	height: 100%;
	display: block;
	position: absolute;
	top: 0;
	left: 8px;
	background: #49b8c3;
	transform:skewX(-10deg);
}
.profile .con h3{
	flex: 1;
	line-height: 140%;
}
.profile .con p{
	color: #555;
}

@media (max-width: 1299px) {
	.profile .con .en{
		width: 100%;
		max-width: none;
		padding: 0px 0 0px 30px;
		margin: 0 0 15px 5px;
	}
}

@media (max-width: 991px) {
	.profile section:nth-of-type(1){
		width: 100%;
		padding-top: 40%;
		background: url(../profile_03-m.png) no-repeat right center, url(../profile_02.png);
		background-size: cover, auto;
	}
	.profile section:nth-of-type(2){
		width: 100%;
		padding:60px 60px ;
	}
}

@media (max-width: 479px) {
	.profile section:nth-of-type(2){
		padding:40px 30px ;
	}
}







/*======================== 內頁 ============================*/

.pagecon{
	min-height: 400px;
	padding: 0 0 0;
}

.pageswf{
	margin-top: 85px;
	height: 350px;
	position: relative;
}

.pageswf::before{
	content: "";
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0);
}


.pageswf.swf01{
	background: url(../pageswf01.jpg) no-repeat center;	
}

.pageswf.swf02{
	background: url(../pageswf02.jpg) no-repeat center;	
}

.pageswf.swf03{
	background: url(../pageswf03.jpg) no-repeat center;	
}



.pageswf .center{
	position: absolute;
	top:50%;
	left: 50%;
	padding: 15px;
	transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	text-align: center;
	color:#fff;
}

.pageswf .center .en{
	font-size: 40px;
	line-height: 1.1;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 300;
	margin-bottom: 10px;
}

.pageswf .center h3{
	margin: 0;
	font-weight: 500;
	letter-spacing: 5px;
}



/*========================== 製造技術 ==============================*/

.techstyle{
	padding: 40px 0 0;	
}
.techstyle .title{
	font-size: 24px;
	font-weight: 600;
	letter-spacing: 2px;
	margin-bottom: 15px;
	padding-left: 35px;
	background: url(../icon04.png) no-repeat left 9px;
}
.techstyle .title span.en{
	display: inline-block;
	font-weight: normal;
	color: #999;
}


.techstyle .container > ul{
	width: 100%;
	margin: 0 0 80px;
	padding: 0;
	list-style: none;
	display: flex;
	flex-flow: wrap;
}
.techstyle .container > ul > li{
	width: 100%;
	display: flex;
	flex-flow: wrap;
}

.techstyle .container > ul > li section{
	width: 50%;
	display: flex;
	position: relative;
}
.techstyle .container > ul > li section:nth-of-type(1){
	padding:20px 20px 20px 0;
}
.techstyle .container > ul > li section:nth-of-type(2){
	
}
.techstyle .container > ul > li section:nth-of-type(1)::after{
	content: "";
	width: 46px;
	height: 1px;
	display: block;
	position: absolute;
	top: 50%;
	right: -25px;
	transform: translateY(-50%);
	z-index: 5;
	border-bottom: #1e427d dashed 6px;
}

.techstyle .container > ul > li .pic{
	width: 100%;
	position: relative;
	padding-top: 55%;	
}
.techstyle .container > ul > li .pic img{
	width: 100%;
	height: 100%;
	object-fit: cover;

	position: absolute;
	top: 0;
	left: 0;	
}
.techstyle .container > ul > li .con{
	width: 100%;
	display: flex;
	align-items: center;
	padding: 40px;
	letter-spacing: 2px;
	border: #1e427d dashed 6px;
}
.techstyle .container > ul > li h4{
	font-size: 20px;
}


.techstyle .container > ul > li:nth-of-type(even){
	flex-flow: row-reverse wrap;
}
.techstyle .container > ul > li:nth-of-type(even) section:nth-of-type(1){
	padding:20px 0 20px 20px;
}
.techstyle .container > ul > li:nth-of-type(even) section:nth-of-type(1)::after{
	content: "";
	right: auto;
	left: -25px;
	border-bottom: #49b8c3 dashed 6px;
}
.techstyle .container > ul > li:nth-of-type(even) .con{
	border: #49b8c3 dashed 6px;
}


.techstyle .container > ul > li:last-of-type section:nth-of-type(1){
	padding:20px 0 0 20px;
}
.techstyle .container > ul > li:first-of-type section:nth-of-type(1){
	padding:0 20px 20px 0;
}



.techstyle .container > ul > li.nopic section:nth-of-type(1){
	padding: 20px 0 20px 20px ;
}
.techstyle .container > ul > li.nopic section:nth-of-type(1)::after{
	display: none;
}

.techstyle .container > ul > li.nopic section:nth-of-type(2){
	padding:20px 20px 20px 0;
}
.techstyle .container > ul > li.nopic section:nth-of-type(2) .con{
	border: #1e427d dashed 6px;
}


@media (max-width: 991px) {
	.techstyle .container > ul > li{
		margin-bottom: 40px;
	}
	.techstyle .container > ul > li section{
		width: 100%;
		padding:0 !important;
	}
	.techstyle .container > ul > li section:nth-of-type(1){
		margin-bottom: 10px;
	}
	.techstyle .container > ul > li section:nth-of-type(1)::after, 
	.techstyle .container > ul > li:nth-of-type(even) section:nth-of-type(1)::after{
		display: none;
	}
	.techstyle .container > ul > li .con{
		padding: 20px 30px;
	}
	.techstyle .container > ul > li .pic{
		padding-top: 70%;	
	}
}




.products{
	margin: 0;
	padding: 0;
	list-style: none;

	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: auto;
	gap: 5px;
	grid-template-areas:
	"p01 p02 p02 p05" 
	"p03 p03 p04 p05";
}
.products li{
	position: relative;
	padding-top: 40%;
}
.products li:nth-of-type(1){
	grid-area: p01;
}
.products li:nth-of-type(2){
	grid-area: p02;
}
.products li:nth-of-type(3){
	grid-area: p03;
}
.products li:nth-of-type(4){
	grid-area: p04;
}
.products li:nth-of-type(5){
	grid-area: p05;
}

.products li > img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	top: 0;
	left: 0;
}

.products li .con{
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 20px;
	color: #fff;
	letter-spacing: 2px;
	background: rgba(0,0,0,0.7);
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	opacity: 0;
	transition: all 0.3s;
}

.products li:hover .con{
	opacity: 1;
}

@media (max-width: 767px) {
	.products{
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: auto;
		gap: 5px;
		grid-template-areas:
		"p01 p05" 
		"p02 p05" 
		"p03 p04";
	}
	.products li{
		padding-top: 100%;
	}
	.products li .con{
		font-size: 16px;
	}
}











/*====================== 聯絡我們 ===========================*/

.contact{
}

.contact p{
	color: #666;
	letter-spacing: 1px;
}

.pagetitle{
	font-size: 26px;
	font-weight: 500;
	text-align: center;
	letter-spacing: 1px;
	margin:15px 0 25px;
}

.pagetitle::after{
	content: "";
	display: block;
	height: 6px;
	background: url(../icon04.jpg) no-repeat center top;
	margin-top: 15px;
}

























































/*=====================================================================================
快選外內距
======================================================================================*/

.ptop5 { padding-top: 5px;}
.ptop50 { padding-top: 50px;}
.ptop100 { padding-top: 100px;}
.pbottom50 { padding-bottom: 50px;}
.pbottom70 { padding-bottom: 70px;}
.pbottom80 { padding-bottom: 80px;}
.pright0 { padding-right: 0;}
.pright5 { padding-right: 5px;}
.pright10 { padding-right: 10px;}
.pright15 { padding-right: 15px;}
.pright20 { padding-right: 20px;}
.pright25 { padding-right: 25px;}
.pright30 { padding-right: 30px;}
.pleft0 { padding-left: 0;}
.pleft5 { padding-left: 5px;}
.pleft10 { padding-left: 10px;}
.pleft15 { padding-left: 15px;}
.pleft20 { padding-left: 20px;}
.pleft25 { padding-left: 25px;}
.pleft30 { padding-left: 30px;}



.mauto { margin: 0 auto;}
.m0 { margin: 0 !important;}
.mtop5 { margin-top: 5px;}
.mtop10 { margin-top: 10px;}
.mtop15 { margin-top: 15px;}
.mtop20 { margin-top: 20px;}
.mtop25 { margin-top: 25px;}
.mtop30 { margin-top: 30px;}
.mtop40 { margin-top: 40px;}
.mtop50 { margin-top: 50px;}
.mtop70 { margin-top: 70px;}
.mtop100 { margin-top: 100px !important;}
.mtop106 { margin-top: 106px !important;}
.mtop130 { margin-top: 130px !important;}
.mbottom0 { margin-bottom: 0 !important;}
.mbottom5 { margin-bottom: 5px !important;}
.mbottom10 { margin-bottom: 10px !important;}
.mbottom15 { margin-bottom: 15px !important;}
.mbottom20 { margin-bottom: 20px !important;}
.mbottom25 { margin-bottom: 25px !important;}
.mbottom30 { margin-bottom: 30px !important;}
.mbottom35 { margin-bottom: 35px !important;}
.mbottom40 { margin-bottom: 40px !important;}
.mbottom50 { margin-bottom: 50px !important;}
.mbottom60 { margin-bottom: 60px !important;}
.mbottom70 { margin-bottom: 70px !important;}
.mbottom80 { margin-bottom: 80px !important;}
.mbottom90 { margin-bottom: 90px !important;}
.mbottom100 { margin-bottom: 100px !important;}
.mleft5 { margin-left: 5px;}
.mleft10 { margin-left: 10px;}
.mleft15 { margin-left: 15px;}
.mleft20 { margin-left: 20px;}
.mleft25 { margin-left: 25px;}
.mleft30 { margin-left: 30px;}
.mleft50 { margin-left: 50px;}
.mleft60 { margin-left: 60px;}
.mleft65 { margin-left: 65px;}
.mleft80 { margin-left: 80px;}
.mleft85 { margin-left: 85px;}
.mleft90 { margin-left: 90px;}
.mleft160 { margin-left: 160px;}
.mleft230 { margin-left: 230px;}
.mleft240 { margin-left: 240px;}
.mright5 { margin-right: 5px;}
.mright10 { margin-right: 10px;}
.mright15 { margin-right: 15px;}
.mright20 { margin-right: 20px;}
.mright25 { margin-right: 25px;}
.mright30 { margin-right: 30px;}
.mright40 { margin-right: 40px;}
.mright50 { margin-right: 50px;}
.mright60 { margin-right: 60px;}