@charset "utf-8";
/* CSS Document */
@import url("reset.css");

/* --行動網頁隱藏的內容--------------------------------- */
#headerlogo, 
#headerlogo02, 
#shadow, 
#shadow02,
.computer, 
.content01top p, 
.content02top p, 
.content03top p, 
.content04top p, 
.content05top p, 
.footerleft02, 
.footerleft03{
	display: none;}

/* --行動網頁相關屬性設定--------------------------------- */
*{
	box-sizing: border-box; -webkit-box-sizing: border-box;}
html{
	font-family: Arial, Helvetica, sans-serif, "微軟正黑體";
	-webkit-text-size-adjust: none;
	-webkit-user-select: none;
	min-width: 320px;
}

/* --行動網頁共同的CSS--------------------------------- */
#content02, 
#content03, 
#content04, 
#content02index, 
#index01{
	padding: 25px 20px 0 20px; width: 100%;}
#content01infro .left01, 
#content01infro .right01, 
#content03infro .left01, 
#content03infro .right01, 
#content04infro .left01, 
#content04infro02 .left02{ 
	width: 100%;}
#content01infro .left01 h1, 
#content03infro .left01 h1, 
#content04infro .left01 h1, 
#content04infro02 .left02 h1{
	color: rgb(0,122,230);
	font-size: 1.600em;
	line-height: 34px;
	text-align: center;
}
#content01infro .left01 h1{
	padding: 20px 0 12px 0;}
#content03infro .left01 h1, 
#content04infro .left01 h1, 
#content04infro02 .left02 h1{
	padding-bottom: 16px;}
#content01infro .left01 p, 
#content03infro .left01 p,
#content04infro .left01 p, 
#content04infro02 .left02 p, 
#index01infro .left01 p{
	color: rgb(51,51,51);
	font-size: 1em;
	letter-spacing: 1px;
	line-height: 28px;
	text-align: left;
}
#content01infro .right01 img, 
#content02infro .productimage img, 
#content02-2infro .productimage img, 
#content03infro .right01 img, 
#content04infro .right01 img, 
#content04infro02 .right02 img{
	display: block;
	height: auto;
	margin: 0 auto;
	max-width: 100%;
}
#content02infro .productinfro h2, 
#content02infro .productinfro02 h2,
#content02-2infro .productinfro02 h2{
	color: rgb(0,122,230); 
	font-size: 1.375em;
	font-weight: bold;
}
#content02infro ul li, 
#content02-2infro ul li,
#content05infro .mapinfro ul li{
	overflow: hidden;
	padding: 4px 0; 
	position: relative;
}
#content05infro .mapinfro .contacttitle, 
#content05infro .mapinfro .contacttitle02{
	color: rgb(0,122,230);
	font-weight: bold;
	letter-spacing: 1px;
	padding-right: 4px;
	text-align: left;
	width: 100%;
}
#content05infro .mapinfro .contacttitle03, 
#content05infro .mapinfro .contacttitle04, 
#content05infro .mapinfro .contacttitle05{
	color: rgb(0,122,230);
	font-weight: bold;
	width: 30%;
}
#nav li a:hover, 
#nav .searcharea .language p a:hover{
	opacity: 0.5;}
#content02list li:hover, 
#content02 dt:hover, 
#content02 dd:hover, 
#footerinfro .footerleft04 li a:hover, 
#footerinfro .footerleft05 li:hover, 
#gotop:hover, 
#index01 li:hover, 
.pagecontent a:hover,
.pagecontent span:hover, 
.product li:hover{
	opacity: 0.75;}
#content02 dt, 
#content02 dd{
	color: rgb(255,255,255);
	font-size: 1.000em;
	padding: 10px 0 10px 17px;
}
#content02infro, 
#content02-2infro{
	background-color: rgb(228,242,255);
	float: right;
	padding: 20px;
	width: 100%;
}
#content02infro .productinfro02, 
#content02-2infro .productinfro02{
	padding-top: 15px; width: 100%;}
#content02infro ul, 
#content02-2infro ul{
	overflow: hidden; padding-top: 11px;}
#content02infro .producttitle, 
#content02-2infro .producttitle{
	float: left;
	font-size: 0.938em;
	width: 30%;
}
#content02infro .producttext, 
#content02-2infro .producttext{
	float: right;
	font-size: 0.938em;
	line-height: 24px;
	margin-top: -2px;	
	width: 70%;
}
#content03infro, 
#content03infro02{
	margin: 0 auto;
	padding-top: 25px;	
	width: 100%;
}
#content05infro .mapinfro .contacttitle, 
#content05infro .mapinfro .contacttitle06{
	float: left; width: 82px;}
#content05infro .mapinfro h2, 
#content05infro .mapinfro h2, 
#content05infro .mapinfro h2{
	background: url(../images/icon08.png) 0 3px no-repeat;
	background-size: contain;
	color: rgb(0,122,230);
	font-size: 1.375em;
	font-weight: bold;
	letter-spacing: 1px;
	margin-bottom: 8px;
	padding: 0 0 0 18px;	
}
#index01infro .right01, 
#index01infro .left01, 
#index01 li, 
.product li{ 
	width: 100%;}
#slider .show1 img, 
#slider .show2 img{
	bottom: 0;
	display: block;
	float: left;
	height: auto;
	left: 0;
	margin: 0 auto;
	right: 0;
	top: 0;
	max-width: 240px;
}
#slider .show1, 
#slider .show2{
	background-position: 0 0; background-repeat: no-repeat;}
.content01top, 
.content01bottom, 
.content02top, 
.content03top, 
.content03bottom, 
.content04top, 
.content04bottom, 
.content05top{
	height: 20px;
	padding-bottom: 20px;
	width: 100%;
}
.award h1, 
.content01top h1, 
.content01bottom h1, 
.content02top h1, 
.content03top h1, 
.content03bottom h1, 
.content04top h1, 
.content04bottom h1, 
.content05top h1, 
.index01top h1, 
.product h1{
	color: rgb(0,122,230);
	float: left;
	font-size: 1.375em;
	font-weight: bold;
}
.content03top h1, 
.content03bottom h1{
	background: url(../images/icon05.png) left center no-repeat; padding-left: 29px;}
.product h1, 
.content02top h1{
	background: url(../images/icon02.png) left center no-repeat; padding-left: 27px;}
.award p, 
.award .awardp{
	color: rgb(51,51,51);
	float: left;
	font-size: 1.000em;
	letter-spacing: 1px;
	padding: 6px 0 14px 0;
}
.award01 img, 
.award02 img, 
.award03 img, 
.award04 img, 
.award05 img{
	display: block;
	height: auto;
	margin: 0 auto;
}

/* --行動網頁漢堡選單--------------------------------- */
#mobilemenu{
	float: right;
	height: 25px;
	right: 16px;
	position: relative;
	top: 28px;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .6s ease-in-out;
	-moz-transition: .6s ease-in-out;
	transition: .6s ease-in-out;
	width: 25px;
}
#mobilemenu span{
	background: rgb(0,91,172);
	display: block;
	height: 3px;
	left: 0;
	position: absolute;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .35s ease-in-out;
	-moz-transition: .35s ease-in-out;
	transition: .35s ease-in-out;
	width: 25px;
}
#mobilemenu span:nth-child(1) {
	top: 0px;}
#mobilemenu span:nth-child(2) {
	top: 8px;}
#mobilemenu span:nth-child(3) {
	top: 16px;}
#mobilemenu.open span:nth-child(1) {
	top: 10px;
	-webkit-transform: rotate(135deg);
	-moz-transform: rotate(135deg);
	-o-transform: rotate(135deg);
	transform: rotate(135deg);
}
#mobilemenu.open span:nth-child(2) {
	opacity: 0; width: 0%;}
#mobilemenu.open span:nth-child(3) {
	top: 10px;
	-webkit-transform: rotate(-135deg);
	-moz-transform: rotate(-135deg);
	-o-transform: rotate(-135deg);
	transform: rotate(-135deg);
}
#nav{
	display: none;
	height: auto;
	position: relative;
	width: 100%;
}
#nav ul{
 	border-top: 3px solid rgb(0,91,172);
	height: auto; 
	list-style-type: none;
	width: 100%;
}
#nav li{
	border-bottom: 1px solid rgb(215,220,225); width: 100%;}
#nav li a{
	color: rgb(0,91,172);
	display: block;
	font-size: 1.000em;
	font-weight: 500;
	height: 46px;
	letter-spacing: 1px;
	line-height: 46px;
	margin: auto;
	padding-left: 16px;
	position: relative;
	text-align: left;
	text-decoration: none;
	transition: opacity .45s ease-out;
   -moz-transition: opacity .45s ease-out;
   -webkit-transition: opacity .45s ease-out;
}
#nav li a:after{
	border-right: 2px solid rgb(0,91,172);
	border-top: 2px solid rgb(0,91,172);
	content: "";
	display: block;
	height: 8px;
	margin: -6px 0px 0px 0px;
	position: absolute;
	right: 16px;
	top: 50%;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	width: 8px;
}
#nav .searcharea{
	clear: both;
	height: 54px;
	line-height: 54px;
	position: relative;
	width: 100%;
}
#nav .searcharea .language{
	float: left;}
#nav .searcharea .language p{
	float: left; 
	margin-left: 17px;
	top: -5px;
}
#nav .searcharea .language p a{
	color: rgb(0,91,172);
	font-weight: 500;
	padding-left: 34px;
	opacity: 1;	
	text-decoration: none;
	transition: opacity .45s ease-out;
   -moz-transition: opacity .45s ease-out;
   -webkit-transition: opacity .45s ease-out;
}
#nav .searcharea .language .Chinese{
	background: url(../images/Chinese.png) left no-repeat;}
#nav .searcharea .language .English{
	background: url(../images/English.png) left no-repeat;}
#nav .searcharea .search{
	position: relative;}
#nav .searcharea .search .searchsubmit{
	background: url(../images/searchicon.png) no-repeat;
	border: 0;
	height: 20px;
	outline: none;
	position: absolute;
	right: 26px;
	text-indent: -9999px;
	top: 16px;
	width: 20px;
}
#nav .searcharea .search input[type=text]{
	background-color: rgb(230,235,240);
	border: 0;
	border-radius: 16px;
	-webkit-border-radius: 16px;
	-moz-border-radius: 16px;
	color: rgb(51,51,51);
	float: right;
	height: 30px;
	line-height: 30px;
	outline: none;
	padding: 2px 0 0 12px;
	position: absolute;
	right: 16px;
	top: 12px;
	width: 141px;
}

/* --行動網頁版頭--------------------------------- */
.mobileheader{
	background-color: rgb(255,255,255);
	border-top: rgb(0,97,184) 4px solid;
	box-shadow: -2px 1px 1px 1px rgba(18,18,18,0.12);
	display: block;
	height: 80px;
	width: 100%;
}
#mobilelogo{
	float: left;
	height: 56px;
	margin: 10px 10px 0 16px;
	width: 150px;
}

/* --行動網頁版頭英文版--------------------------------- */
#mobilelogo02{
	float: left;
	height: 56px;
	margin: 10px 10px 0 16px;
	width: 186px;
}

/* --行動網頁首頁與內頁banner--------------------------------- */
.pagebanner{
	background-position: center center;
	background-size: cover;
	height: 240px;
	margin: 0 auto;
	max-width: 100%;	
}
.pagebanner ul{
	height: 240px; margin: 0 auto;}
.pagebanner li{
	background-position: center center;
	background-size: cover;
	height: 240px; 
	list-style-type: none;
	max-width: 100%;	
}
.slide{
	background-position: center center;
	background-size: cover;	
	height: 360px;
	margin: 0 auto;
	overflow: hidden;
	position: relative;
	max-width: 100%;
}
.slide ul{	
	height: 360px; margin: 0 auto;}
.slide li{
	background-position: center center;
	background-size: cover;
	height: 360px;
	left: 0;
	list-style-type: none;
	position: absolute;
	right: 0;
	top: 0;
	max-width: 100%;
	z-index: 1;
}
.slide li img{
	display: block;
	height: auto;
	max-width: 100%;
}
.slide #dots{
	bottom: 20px;
	font-size: 0;
	height: 14px;
	opacity: 0.7;
	left: 0;
	position: absolute;
	right: 0;
	text-align: center;
	z-index: 9999;
}
.slide #dots a{
	background-color: rgb(200,200,200);
	border-radius: 100%;
	display: inline-block;
	height: 14px;
	margin-left: 12px;
	width: 14px; 
}
.slide #dots a.active{ 
	background-color: rgb(240,5,5);}

/* --行動網頁首頁--------------------------------- */
.index01top{
	padding-bottom: 20px; width: 100%;}
.index01top h1{
	background: url(../images/icon01.png) left center no-repeat; padding-left: 27px;}
#index01infro{
	margin: 0 auto; width: 100%;}
#index01infro .right01 img{
	display: block;
	height: auto;
	margin: 26px auto 0 auto;	
	max-width: 100%;
}
#index01 ul{
	margin: 20px auto 0 auto; width: 100%;}
#index01 li img{
	display: block;
	height: auto;
	margin: 0 auto 5px auto;
	opacity: 1.0;
	transition: opacity .4s ease-in-out;
   -moz-transition: opacity .4s ease-in-out;
   -webkit-transition: opacity .4s ease-in-out;
	max-width: 300px;
}
#index01 h2{
	color: rgb(51,51,51);
	font-size: 1.000em;
	letter-spacing: 1px;
	padding-bottom: 25px;
	text-align: center;
}
#productinfro{
	background-color: rgb(243,243,243);
	padding: 25px 20px 0 20px;	
	width: 100%;
}
#productinfro .product{
	background-color: rgb(243,243,243);
	margin: 0 auto;
	width: 100%;
}
.product ul{
	padding-top: 42px; width: 100%;}
.product li img{
	display: block;
	height: auto;
	margin: 0 auto;
	opacity: 1.0;
	padding-bottom: 25px;
	transition: opacity .4s ease-in-out;
   -moz-transition: opacity .4s ease-in-out;
   -webkit-transition: opacity .4s ease-in-out;
	max-width: 228px;
}
.award{
	margin: 0 auto;
	padding: 25px 20px 0 20px;
	width: 100%;
}
.award h1{
	background: url(../images/icon03.png) left center no-repeat; padding: 0 0 2px 27px;}
.award .awardp{
	line-height: 26px;}
.award ul{
	margin: 0 auto;
	padding-top: 75px;
	width: 100%;
}
.award li{
	margin-bottom: 25px;}
.award01 img{
	height: auto; max-width: 137px;}
.award02 img{
	height: auto; max-width: 85px;}
.award03 img{
	height: auto; max-width: 58px;}
.award04 img{
	height: auto; max-width: 61px;}
.award05 img{
	height: auto; max-width: 84px;}

/* --行動網頁關於我們--------------------------------- */
#content01{
	padding: 25px 20px 20px 20px; width: 100%;}
.content01top h1{
	background: url(../images/icon01.png) left center no-repeat; padding-left: 27px;}
.content01bottom h1{
	background: url(../images/icon04.png) left center no-repeat; padding-left: 48px;}
#content01infro{
	margin: 0 auto;
	padding: 24px 0 5px 0;	
	width: 100%;	
}
#content01infro li{
	display: block;
	height: 160px;
	margin: 0 auto 20px auto;
	max-width: 158px;
}
#content01infro h1{
	padding: 20px 0 12px 0;}
#content01infro h2{
	font-size: 1.600em;
	margin: 0 auto;
	padding-bottom: 18px;
	text-align: center;
}

/* --行動網頁產品介紹---------------------------------- */
#content02list{
	padding: 25px 20px 0 20px; width: 100%;}
#content02list ul{
	width: 100%;}
#content02list li{
	width: 100%;}
#content02list li img{
	display: block;
	height: auto;
	margin: 0 auto;
	opacity: 1.0;
	transition: opacity .4s ease-in-out;
   -moz-transition: opacity .4s ease-in-out;
   -webkit-transition: opacity .4s ease-in-out;
	max-width: 220px;
}
#content02list h2{
	color: rgb(51,51,51);
	font-size: 1.125em;
	letter-spacing: 1px;
	padding-bottom: 25px;
	text-align: center;
}
#content02{
	overflow: hidden;
	padding: 25px 20px; 
	width: 100%;
}
#content02 dl{
	background-color: rgb(0,122,230);
	border: 4px solid rgb(40,167,225);
	border-radius: 12px;
	float: left;
	margin-top: 25px;
	padding: 13px 23px 23px 23px;
	width: 100%;
}
#content02 dt{
	background: url(../images/icon09.png) left 13px no-repeat;
	border-bottom: 1px dotted rgb(204,204,204);
	opacity: 1.0; 
	transition: opacity .4s ease-in-out;
   -moz-transition: opacity .4s ease-in-out;
   -webkit-transition: opacity .4s ease-in-out;
}
#content02 dd{
	opacity: 1.0;
	transition: opacity .4s ease-in-out;
   -moz-transition: opacity .4s ease-in-out;
   -webkit-transition: opacity .4s ease-in-out;
}
#content02 dd a{
	color: rgb(255,255,255); text-decoration: none;}
#content02infro, #content02-2infro{
	margin-top: 25px;}
#slider{
	height: 200px;
	margin: 0 auto;
	overflow: hidden;
	position: relative;
	width: 240px;
}

/* --行動網頁品管流程--------------------------------- */
#content03infro .left01{
	padding: 5px 0 25px 0; width: 100%;}
#content03infro02 li{
	height: 260px;
	margin: 0 auto 10px auto;
	width: 300px;
}

/* --行動網頁物流後勤--------------------------------- */
.content04top h1, .content04bottom h1{
	background: url(../images/icon06.png) left center no-repeat; padding-left: 29px;}
#content04infro, #content04infro02{
	margin: 0 auto; width: 100%;}
#content04infro{
	padding: 25px 0 15px 0;}
#content04infro02{
	padding: 50px 0 15px 0;}
#content04infro .left01, #content04infro02 .left02{
	padding: 5px 0 10px 0;}

/* --行動網頁聯絡我們--------------------------------- */
#content05{
	padding: 25px 20px 10px 20px; width: 100%;}
.content05top h1{
	background: url(../images/icon07.png) left center no-repeat; padding-left: 32px;}
#content05infro{
	margin: 0 auto;
	overflow: hidden;
	padding-bottom: 6px;	
	width: 100%;
}
#content05infro .iframemap{
	height: 370px;
	margin-bottom: 20px;
	overflow: hidden;
	padding-top: 20px;
	width: 100%;
}
#content05infro .mapinfro{
	width: 100%;}
#content05infro .mapinfro ul{
	font-size: 1em;
	letter-spacing: 1px;
	line-height: 28px;
}
#content05infro .mapinfro .contacttext{
	color: rgb(0,0,0); 
	float: left;
	width: 73.2%;
}
.clearfix{
	clear: both;}

/* --行動網頁聯絡我們英文版--------------------------------- */
#content05infro .mapinfro .contacttitle03{
	float: left; width: 11%;}
#content05infro .mapinfro .contacttitle04{
	float: left; width: 11.5%;}

/* --行動網頁搜尋結果&頁碼--------------------------------- */
#tablewrapper{
	margin: 0 auto; width: 100%;}
.newsdatatable{
	border-collapse: collapse;
	margin-top: 34px;
	width: 100%;
}
.newsdatatable th{
	background-color: rgb(0,97,184);
	color: rgb(255,255,255);
	font-size: 1.000em;
	letter-spacing: 1px;
	padding: 12px 0;
	text-align: center;
	width: 100%;
}
.newsdatatable td{
	color: rgb(51,51,51);
	font-size: 1.000em;
	letter-spacing: 1px;
	line-height: 28px;
	padding: 7px 30px;
	text-align: left;
	width: 100%;
}
.newsdatatable td a{
	color: rgb(51,51,51); text-decoration: none;}
.newsdatatable tr:nth-child(even){
	background-color: rgb(239,239,239);}
.pagecontent{
    margin: 22px;
    padding: 22px;
    text-align: center;
}
.pagecontent a{
	color: rgb(51,51,51);
	font-size: 0.938em;
    margin: 2px;
	opacity: 1.0;
	padding: 5px 0;
    text-decoration: none;
	transition: opacity .45s ease-out;
   -moz-transition: opacity .45s ease-out;
   -webkit-transition: opacity .45s ease-out;
}
.pagecontent span{
	color: rgb(51,51,51);
	font-size: 0.938em;
	font-weight: normal;
	letter-spacing: 1px;
	margin: 2px;
}

/* --行動網頁刊尾--------------------------------- */
.footer{
	background-color: rgb(0,39,162);
	clear: both;
	padding-top: 25px;	
	width: 100%;
}
#footerinfro{
	margin: 0 auto;  width: 100%;}
#footerinfro .footerleft{
	padding: 20px 0 5px 0; width: 100%;}
#footerinfro .footerleft li{
	color: rgb(255,255,255);
	font-size: 0.938em;
	letter-spacing: 1px;
	padding-bottom: 4px;
	text-align: center;
}
#footerinfro h1{
	height: 75px;
	margin: 0 auto;
	width: 195px;
}
#footerinfro .footerleft03{ 
	margin-top: -4px;
	text-align: center;
	width: 100%;
}
#footerinfro .footerleft03 li{
	color: rgb(255,255,255);
	font-size: 0.938em;
	letter-spacing: 1px;
	line-height: 20px;
	padding-bottom: 17px;
}
#footerinfro .footerleft04{
	text-align: center; width: 100%;}
#footerinfro .footerleft04 li{
	color: rgb(255,255,255);
	font-size: 0.938em;
	letter-spacing: 1px;
	line-height: 13px;
	padding: 13px;
	text-align: center;
}
#footerinfro .footerleft04 li a{
	color: rgb(255,255,255);
	opacity: 1;
	text-decoration: none;
	transition: opacity .4s ease-in-out;
   -moz-transition: opacity .4s ease-in-out;
   -webkit-transition: opacity .4s ease-in-out;
}
#footerinfro .footerleft05{
	height: 34px;
	left: 0;
	margin: 0 auto;
	opacity: 1;	
	padding: 25px 0;
	position: relative;
	right: 0;
	top: 0;
	width: 100px;
}
#footerinfro .footerleft05 li{
	float: left;
	height: 34px;
	margin: -8px 0 0 30px;
	opacity: 1;
	transition: opacity .4s ease-in-out;
   -moz-transition: opacity .4s ease-in-out;
   -webkit-transition: opacity .4s ease-in-out;	
	width: 34px;
}
#footerinfro .footerleft05 li:nth-of-type(1){
	margin-left: 0;}
#footerinfro .footerleft06{
	margin: 0 auto;
	padding: 25px 0;
	width: 100%;
}
#gotop{
	background: url(../images/gotop02.png) no-repeat;
	height: 18px;
	margin: 0 auto;
	opacity: 1;
	text-indent: -9999px;
	transition: opacity .4s ease-in-out;
   -moz-transition: opacity .4s ease-in-out;
   -webkit-transition: opacity .4s ease-in-out;
	width: 100px;	
}

/* --行動網頁刊尾英文版--------------------------------- */
#footerinfro .footerlogo{
	height: 72px;
	margin: 0 auto;
	width: 232px;
}

/* --行動網頁橫放設定--------------------------------- */
@media screen and (orientation:landscape){
#content05infro .mapinfro .contacttext{
	color: rgb(51,51,51);
	float: left;
	width: 85.7%;
}
#content05infro .mapinfro .contacttitle03{
	float: left; width: 6.7%;}
#content05infro .mapinfro .contacttitle04{
	float: left; width: 6.8%;}
}

/* --行動網頁最大尺寸320設定--------------------------------- */
@media screen and (max-width:320px){
#nav .searcharea .search input[type=text]{
	width: 101px;}
}

/* --行動網頁平板設定--------------------------------- */
@media screen and (min-width:768px) and (max-width:1024px){
.award p, .award .awardp{
	color: rgb(51,51,51);
	float: left;
	letter-spacing: 1px;
	margin: 4px 0 0 30px;
}
.award p{
	font-size: 1.000em;}
.award .awardp{
	font-size: 0.875em;}
.award ul{
	margin: 0 auto;
	padding-top: 55px;
	width: 100%;
}
}