@charset "utf-8";
/* CSS Document */


/*以下是頁面基本設定*/
html {
	font-size: 16px;
	font-family: "Noto Sans TC", sans-serif;
	-webkit-text-size-adjust:100%;
	height:100%;
}

body {  /*整體頁面設定*/
	height: 100%;
	margin: 0;
	padding: 0;
	color:#333;
	
	font-weight: normal;
	letter-spacing: normal;
	background-color: #FFFFFF;
	overflow-y: scroll;
	overflow-x: hidden;
}

a {
    text-decoration:none;
}

/*a:link {color:#333333;}    /* 設定尚未點閱過的連結樣式 */
/*a:visited {color:#333333;} /* 設定過去曾經閱過的連結 */
/*a:hover {color:#FF0000;}   /* 設定滑鼠游標指在連結位置上的樣式 */
/*a:active {color:#FF0000;}  /* 設定上點擊過的連結樣式 */

h1, h2, h3, p, ul, li {/*清除內外邊距*/
	margin:0;
	padding:0;
}

ul, li {
	list-style: none;
}

* {/*padding自動計算*/
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}


input, button, select, textarea, *:focus {/*表單邊框線清除*/
	outline:none;
}

/*以下是手機 電腦 平板自適語法*/
a:not([href]):not([tabindex]) {
	color: inherit;
	text-decoration: none;
}
a {
	color: inherit;
	cursor: pointer;
	text-decoration: none;
}

img{
	height:auto;
	max-width:100%
}
a img {
	border:0px;
}

div img,  div iframe, section img, section iframe{
	vertical-align:middle;
}

.container {
	width: 1300px;
	margin: 0 auto;
}
.container:after, .clearfix:after { /*清除flaot 浮動，還原div高度*/
    content: "\0020";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

section.mainbody {
	background: rgba(253, 186, 72, 0.3);
	/*background: rgba(99, 99, 99, 0.8);*/
}

/*預設通用浮動寬度百分比*/
.col-w1, .col-w2, .col-w3, .col-w4, .col-w5, .col-w6, .col-w7, .col-w8, .col-w9, .col-w10, .col-w11, .col-w12  { 
	float: left;
}
.col-w1 {
	width:calc( 100% / 12 );	/*約 8.333333% */
}
.col-w2 {
	width:calc( 100% / 6 ); 	/*約 16.666667% */
}
.col-w3 {
	width:25%;
}
.col-w4 {
	width:calc( 100% / 3 );		/*約 33.333333% */
}
.col-w5 {
	width:calc( 100% * 5 / 12 );  /*約 41.666667% */
}
.col-w6 {
	width:50%;
}
.col-w7 {
	width:calc( 100% * 7 / 12 ); /*約 58.333333% */
}
.col-w8 {
	width:calc( 100% * 8 / 12 ); /*約 66.666666% */
}
.col-w9 {
	width:75%;
}
.col-w10 {
	width:calc( 100% * 10 / 12 ); /*約 83.333333% */
}
.col-w11 {
	width:calc( 100% * 11 / 12 ); /*約 91.666667% */
}
.col-w12 {
	width:100%;
}
.fl-right {
	float:right !important;
}
.padding-all-5 {
	padding: 5px;
}
.padding-t3 {
	padding-top: 3px;
}
.padding-t10 {
	padding-top: 10px;
}
.padding-l10 {
	padding-left: 10px;
}
.padding-r10 {
	padding-right: 10px;
}
.padding-b10 {
	padding-bottom: 10px;
}
.padding-l50 {
	padding-left: 50px;
}
.padding-t10 {
	padding-top: 10px;
}
.padding-l10 {
	padding-left: 10px;
}
.padding-r10 {
	padding-right: 10px;
}
.padding-b10 {
	padding-bottom: 10px;
}
.padding-l50 {
	padding-left: 50px;
}
.padding-l3p {
	padding-left: 3%;
}
.padding-r3p {
	padding-right: 3%;
}
.padding-l5p {
	padding-left: 5%;
}

.margin-t3p {
	margin-top: 3%;
}
.margin-b3p {
	margin-bottom:3%;
}

.text-indent-5em {
	display: block;
	text-indent: -5em;
	padding-left: 5em;
}
.text-underline {
	text-decoration: underline;
}
.justify {
	text-align: justify;
	text-justify: inter-ideograph;
	-ms-text-justify: inter-ideograph; /*IE9*/
	-moz-text-align-last:justify; /*Firefox*/
	-webkit-text-align-last:justify; /*Chrome*/
}
.img-text {
	display: block;
	text-align: center;
	width: 100%;
	padding: 1%;
}

.mainbody.about-bg {
	background: url("../images/about-bg.png") no-repeat rgba(253, 186, 72, 0.3) center;
	background-attachment:fixed;
	background-size: cover;
}

.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

.video-container iframe, .video-container object, .video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#gotop {
		display: none;
		cursor: pointer;
		font-size: 0.9em;
		position: fixed;
		text-align: center;
		z-index: 9999;
		-webkit-transition: background-color 0.2s ease-in-out;
		-moz-transition: background-color 0.2s ease-in-out;
		-ms-transition: background-color 0.2s ease-in-out;
		-o-transition: background-color 0.2s ease-in-out;
		transition: background-color 0.2s ease-in-out;
		background: rgba(63, 138, 122, 0.8);
		color: #ffffff;
		border-radius: 3px;
		padding-left: 12px;
		padding-right: 12px;
		padding-top: 12px;
		padding-bottom: 12px;
		right: 20px;
		bottom: 20px;
}
#gotop:hover {
	background: #025172;
}

#reply {
		display: none;
		cursor: pointer;
		font-size: 0.9em;
		position: fixed;
		text-align: center;
		z-index: 9999;
		-webkit-transition: background-color 0.2s ease-in-out;
		-moz-transition: background-color 0.2s ease-in-out;
		-ms-transition: background-color 0.2s ease-in-out;
		-o-transition: background-color 0.2s ease-in-out;
		transition: background-color 0.2s ease-in-out;
		background: rgba(63, 138, 122, 0.8);
		color: #ffffff;
		border-radius: 3px;
		padding-left: 12px;
		padding-right: 12px;
		padding-top: 12px;
		padding-bottom: 12px;
		left: 20px;
		bottom: 20px;
}
#reply:hover {
	background: #025172;
}

@media only screen and (max-width: 1239px) and (min-width: 960px) {
	.container {
		/*width:940px;*/
		width:100%;
	}
}	
@media only screen and (max-width: 959px) and (min-width: 768px) {
	.container {
		width:100%;
	}

}
@media only screen and (max-width: 767px) and (min-width: 480px) {
	.container {
		width: 100%;
	}
}
@media only screen and (max-width: 479px)  {
	.container {
		width: 100% !important;
	}
}

@media screen and (min-width: 990px) { /* 解析度大於 1004px 時 */
	/* 邊界為 上下15 左右60 */
	.sc_all_60 {
		padding: 15px calc( 100% * 0 / 1903 );
	}
}

@media only screen and (max-width: 1213px) and (min-width: 990px) {
	.container {
		width: 100%;
	}
	.sc_all {
		padding: 0px 10px;
	}
	.sc_all_60 {
		padding:15px 0px 15px 15px;
	}
	.sc_all_10 {
		padding: 15px 15px 0px;
	}

	ul.firstnav li a {
		padding:5px 10px 5px 10px;
		font-size: 0.9em;
	}
	.logo div > a {
		width:96%;
	}
}

@media screen and (max-width: 991px) { /* 解析度小於 1024px 時*/
	/* 邊界 上下15 左右10 */
	.sc_all_lr50 {
		padding: 0;
	}
	
	/* ----- 手機版寬度設定為100% -----*/
	.col-sm {
		float:left;
		width:100%;
	}
	.col-sm-w3 {
		width: calc( 100% * 3 / 12 );
	}
	.col-sm-w4 {
		width: calc( 100% * 4 / 12 );
	}
	.col-sm-w6 {
		width: calc( 100% * 6 / 12 );
	}
	
	.float-none {
		float: none;
	}

	.padding-sm, .padding-sm-zero {
		padding:0;
	}
	
	
	.padding-st10 {
		padding-top:10px;
	}
	
	.img-text {
		font-size: 0.9rem;
	}
	
	.text-info p, .pro-info p {
		font-size: 1rem;
		padding: 0 0 2%;
	}
	
	#gotop:hover {
		background: rgb(63, 138, 122, 0.8);
	}
	
	.top {
		/*height: 250px;
		padding-bottom: 30px;
		padding-top: 30px;*/
	}
	.logo h1 {
		font-size: 54px;
	}
	.logo img {
	float: left;
	}
	span.logo {
		
	display: block;
    float: left;
    width: 46%;
    font-size: 20px;
		
		}
	section {
		padding-top: 0;
	}
	
	.mainbody {
		padding-top: 0;
	}
	
	.top_banner {
		/*height: 180px;
    	width: 100%;
		overflow: hidden;*/
	}
	
	.top_banner img {
		/*position: absolute;
		overflow: hidden;*/
		/*height: 180px;*/
		/*width: auto;*/
		max-width: none;
	}
	
	.home-news ul li, .home-news ul li:nth-of-type(3n+2), .home-news ul li:nth-of-type(3n+3),
	.pro-list ul li, .pro-list ul li:nth-of-type(3n+3), .pro-list ul li:nth-of-type(3n+2) {
		/*float: left;
		width: calc( 100% * 4 / 12 );*/
		margin-bottom: 5%;
		padding: 0;
	}
	

	
	div.home-icon {
		margin: 1% 3% 1% 0;
	}
	
	.work li {
		width:auto;
	}
	
	.home-slogan {
		padding:5px 10px 10px;
	}
	
	

	
	/*---- 網路行銷 -----*/
	
	.home-info-con {
		font-size: 0.9rem;
		padding:3%;
	}
	
	/*----- -----*/
	.info3-con, .home-info-con > .info4, .home-info-con > .info6 {
		width: auto;
	}
	.info3-con:last-of-type {
		margin-bottom: 0;
	}
	/*----- 公司簡介 -----*/
	.mainbody.about-bg {
		/*background: rgba(253, 186, 72, 0.3);*/
		background: url("../images/about-bg.png") no-repeat rgba(253, 186, 72, 0.3) center;
		background-attachment:fixed;
		background-size: cover;
	}
	.abouts {
		letter-spacing: normal;
		font-size: 1em;
		padding: 2% 3%;
	}
	.abouts h2 {
		font-size: 1.1rem;
	}
	.color-a1 {
		/*padding-bottom: 10px;*/
		margin-bottom: 2%;
	}
	.abouts-01 p, .abouts-02 p {
		padding:0px 0px 10px 0px;
	}
	
	/*----- 產品介紹 -----*/
	
	.products {
		/*padding: 0 1% 5%;*/
		padding: 2% 3% 5%;
	}
	.pro-name {
		font-size: 1.1rem;
	}
	.pro-info {
		padding: 2% 3%;
	}
	
	/*------聯絡我們 -----*/
	.form-left {
		padding-bottom: 2px;
	}
	.con-map {
		margin: 1% 0;
		height:auto;
	}
	
	 /*----- 底部 -----*/
	.foot {
		/*background: url(../images/foot-bg.jpg) right top no-repeat;
		background-size: 100%;*/

		padding: 0px 10px 20px;
		font-size: 0.8rem;
	}
	.foot > img {
		display: none;		/*底圖由img改成使用背景圖*/
	}
	.foot .container {
		position: initial;	/*取消定位*/
	}
	
	/*---- 底部 公司名稱 -----*/
	.comName {
		margin-top:5%;		/*重新設定上邊界 縮小 */
	}
	.comName span:nth-of-type(1) {
		font-size: 1.5em;
	}
	
	/*---- 底部其他資訊 QRcode youtube -----*/
	.foot-othter {
		float: left !important;
	}
	.foot-youtube, .foot-qrcode {
		float:left;
		margin:0px 20px 0px 0px;
	}
	
	/*---- 底部公司資訊 -----*/
	.fmail {
		text-align: left;
	}
	.comInfo {
	    padding: 2% 0 0;
	}
	.comInfo > div > span {
		display: block;
	}
	.xNumber {
		text-align: left;
	}
	
	/* ----- 主選單 -----*/
	.nav {
		position: absolute;
		right: 0;
    	z-index: 999;
		background: rgba(255,222,156,0.85);
		background-size: 100%;
		width: 70%;
		display: none;
	}
	.nav .container {
		background: none;
	}
	ul.top-menu{
		display:block;
		float: none;
		text-align: left;
	}
	ul.top-menu > li {
		float:none;
		position: relative;
		white-space: inherit;
		border-right: 0;
		margin: 0;
		padding:0;
	}
	ul.top-menu > li > a {
		position: relative;
		width:100%;
		font-size:1.2em;
		padding-left: 5%;
	}
	.nav .select > a {
		color:#000;
		background: #bdefdc !important;
	}
	ul.top-menu li:hover > a {
		/*color:#000;
		background: #bdefdc;*/
	}
	.mobmenu {	/*手機版主選單樣式*/
		position: absolute;
		right: 0;
		top: 0;
		padding: 10px 0px;
	}
	.mobmenu a {
		font-size:0.8em;
	}
	.m-menu {
		display: block;
	}
	.m-menu {
		float:left;
		padding-left:1%;
	}
	.m-menu a {
		color:#000;
		border:1px solid #000;
		border-radius: 3px;
		padding:3px;
		white-space: nowrap;
	}
	
	/*---- 選單 -----*/
	ul.top-menu > li {
		border-bottom: 1px solid #fff;
	}
	ul.top-menu li ul li {
		top: 0;
		border-right: 0;
	}
	ul.top-menu li ul li:last-of-type {
		border-bottom: 0;
	}
	ul.subnav {
		position: inherit;
		z-index: 99;
		opacity: 1;
		display:none;
		left: 0px;
		padding-top:0;
	}
	
	ul.subnav {
/*		position: absolute;
		z-index: -1;
		opacity:  0;
		width: 100%;*/
	}
	ul.top-menu li:hover ul {
		position: relative;
		padding: 0;
		margin: 0 0 0 0;
		transition: opacity 0.5s ease-in-out;
		-moz-transition: opacity 0.5s ease-in-out;
		-webkit-transition: opacity 0.5s ease-in-out;

	}


	.sub-arrow {
		position: absolute;
		display: block;
		top:0;
		right:0;
		padding:0px 0px 0px 20px;
		width:100%;
		height: 100%;
		z-index: 99;
	}
	.sub-arrow span {
		position: absolute;
		right: 0;
		bottom: 0;
		width: 0;
		height: 0;
		border-bottom: 12px solid red;
		border-left: 12px solid transparent;
	}
	
	
	
	/*------ 服務項目 ------*/

	.service-con {
		width: 100%;
		margin:0 auto;
		padding-bottom:5px;
		margin-bottom:20px;
		border-bottom:1px dashed #333;
	}
	.service-con:last-of-type {
		border: none;
		margin-bottom: 0;
	}
}



@media screen and (max-width: 480px) { /* 解析度小於 1024px 時*/
	.home-info-con, .home-info-con.websell {
		/*margin:20px 10px;*/
		background: #fff;
	}
	
}