@charset "utf-8";
/*
Template Name: PaceMaker
Author: <a href="https://www.os-templates.com/">OS Templates</a>
Author URI: https://www.os-templates.com/
Licence: Free to use under our free template licence terms
Licence URI: https://www.os-templates.com/template-terms
File: Layout CSS
*/

/*2022/4/13 edit*/

@import url("fontawesome-4.3.0.min.css");
@import url("framework.css");
@import url("fontawesome-all.min.css");

/* Header
--------------------------------------------------------------------------------------------------------------- */
#header{padding:70px 0;}


#header #logo h1{margin:0; padding:0; font-size:26px; font-variant:small-caps;}


/* Content Area
--------------------------------------------------------------------------------------------------------------- */
.container{padding:0px 0;}

/* Footer
--------------------------------------------------------------------------------------------------------------- */
#footer{padding:80px 0;}

#footer .title{margin:0 0 30px 0; padding:0 0 8px 0; border-bottom:1px solid; font-size:20px; text-transform:capitalize;}

/* Transition Fade
--------------------------------------------------------------------------------------------------------------- */
.faico a, #mainav *, #backtotop, #mainav2 *{transition:all .3s ease-in-out;}


/* Navigation
--------------------------------------------------------------------------------------------------------------- */
nav ul, nav ol{margin:0; padding:0; list-style:none;}

#mainav, .sidebar nav{line-height:normal;}
#mainav .drop::after, #mainav li li .drop::after{position:absolute; font-family:"FontAwesome"; font-size:10px; line-height:10px;}
#mainav, #mainav2{
	font-size:20px;
}

/* Top Navigation */
.padbot{padding-bottom:30px;}
#mainav ul.clear{margin-bottom:-3px;}
#mainav ul ul{z-index:9999; position:absolute; width:200px; text-transform:none;}
#mainav li{position:relative; float:left; width:20%; margin:0; padding:0; text-align:center;}
#mainav li li{width:100%; margin:0;}
#mainav li a{display:block; padding:30px 20px; border:solid; border-width:0 0 0px 0;}
#mainav li li a, #mainav li li .drop{display:block; margin:0; padding:10px 15px; border-width:0 0 1px 0;}
#mainav .drop::after, #mainav li li .drop::after{content:"\f0d7";}
#mainav .drop::after{top:35px; left:5px;}
#mainav li li .drop::after{top:15px; left:5px;}
#mainav ul ul{visibility:hidden; opacity:0;}
#mainav ul li:hover > ul{visibility:visible; opacity:1;}

#mainav form{display:none; margin:0; padding:0;}
#mainav form select, #mainav form select option{display:block; cursor:pointer; outline:none;}
#mainav form select{width:100%; padding:5px; border:1px solid;}
#mainav form select option{margin:5px; padding:0; border:none;}

#mainav2 ul.clear{margin-bottom:-3px;}
#mainav2 ul ul{z-index:9999; position:absolute; width:200px; text-transform:none;}
#mainav2 li{position:relative; float:left; margin:0; padding:0;}
#mainav2 li li{width:100%; margin:0;}
#mainav2 li a{display:block; padding:30px 20px; border:solid; border-width:0 0 0px 0;}
#mainav2 li li a, #mainav2 li li .drop{display:block; margin:0; padding:10px 15px; border-width:0 0 1px 0;}
#mainav2 .drop::after, #mainav2 li li .drop::after{content:"\f0d7";}
#mainav2 .drop::after{top:35px; left:5px;}
#mainav2 li li .drop::after{top:15px; left:5px;}
#mainav2 ul ul{visibility:hidden; opacity:0;}
#mainav2 ul li:hover > ul{visibility:visible; opacity:1;}

#mainav2 .sidebar nav{line-height:normal;}
#mainav2 .drop::after, #mainav2 li li .drop::after{position:absolute; font-family:"FontAwesome"; font-size:10px; line-height:10px;}



/* Back to Top */
#backtotop{z-index:999; display:inline-block; position:fixed; visibility:hidden; bottom:20px; right:20px; width:36px; height:36px; line-height:36px; border-radius:5px; font-size:16px; text-align:center; opacity:.2;}
#backtotop i{display:block; width:100%; height:100%; line-height:inherit;}
#backtotop.visible{visibility:visible; opacity:.5;}
#backtotop:hover{opacity:1;}

/* 顏色
--------------------------------------------------------------------------------------------------------------- */
body{color:#BBBBBB; background-color:#FFFFFF;}
a{color:#BE9145;}
.borderedbox{border-color:#D7D7D7;}
.overlay{color:inherit; background-color:#FFFFFF; }

.row3{color:#000000; background-color:#FFFFFF;}
.row4{color:#000000; background-color:#FFFFFF;}

/* Header */
#header a{color:inherit;}

/* Footer */
#footer .title{border-color:#000000;}

/* 選單 */
#mainav{color:#000000; background-color:#B7D185; border-color:#BE9145;}
#mainav li a{color:inherit; border-color:#BE9145;}
#mainav .active a, #mainav a:hover, #mainav li:hover > a{color:#FFFFFF; background-color:#7E995A; border-color:#FFFFFF;}
#mainav li li a, #mainav .active li a{color:#000000; background-color:#B7D185; border-color:rgba(0,0,0,.6);}
#mainav li li:hover > a, #mainav .active .active > a{color:#FFFFFF; background-color:#7E995A;}
#mainav form select{color:#000000; background-color:#B7D185; border-color:#000000;}

#backtotop{color:#FFFFFF; background-color:#BE9145;}

#mainav2{color:#000000; background-color:#B7D185; border-color:#BE9145;}
#mainav2 li a{color:inherit; border-color:#BE9145;}
#mainav2 .active a, #mainav2 a:hover, #mainav2 li:hover > a{color:#FFFFFF; background-color:#7E995A; border-color:#FFFFFF;}


/* Tables + Comments */
table, td{border-color:#D7D7D7;}
tr[type="reset"]{color:inherit; background-color:#FBFBFB;}
tr:nth-child(even){color:inherit; background-color:#F7F7F7;}
table a{background-color:inherit;}

/*按鈕設定*/
input[type="submit"],
input[type="reset"],
input[type="button"],
button,
/*按鈕樣式顏色*/
.button {
	/*按鈕預設顏色*/
	background-color: #70c7be;
	border-radius: 4px;
	color: #ffffff;
	height: 2.85em;
	line-height: 2.95em;
}

/*按鈕大小*/
input[type="submit"].fit,
input[type="reset"].fit,
input[type="button"].fit,
button.fit,
.button.fit {
	display: block;
	margin-left:20%;
	margin-right:20%;
}

/*按鈕1特效*/
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
button:hover,
.button:hover {
	background-color: #82cec6;
}
	
/*按鈕2顏色*/
input[type="submit"].style2,
input[type="reset"].style2,
input[type="button"].style2,
button.style2,
.button.style2 {
	background-color: #7f92cf;
}

/*按鈕2特效*/
input[type="submit"].style2:hover,
input[type="reset"].style2:hover,
input[type="button"].style2:hover,
button.style2:hover,
.button.style2:hover {
	background-color: #92a2d6;
}

/*按鈕3顏色*/
input[type="submit"].style3,
input[type="reset"].style3,
input[type="button"].style3,
button.style3,
.button.style3 {
	background-color: #9d7ed0;
}

/*按鈕3特效*/
input[type="submit"].style3:hover,
input[type="reset"].style3:hover,
input[type="button"].style3:hover,
button.style3:hover,
.button.style3:hover {
	background-color: #ab91d7;
}

/*實績表*/
.p_table{
	font-size:22px;
	overflow-x:auto;
}

/*示意圖文字*/
.pic_title{
	font-size:25px;
	text-align: center;
	font-weight: bold;
}

/* Media Queries
--------------------------------------------------------------------------------------------------------------- */
@-ms-viewport{width:device-width;}

.pro_table{
	overflow-x:auto;
}


/* 響應式網頁設定
--------------------------------------------------------------------------------------------------------------- */

@media screen and (min-width:180px) and (max-width:978px) {
	#header, #mainav, .container, #footer{max-width:95%;}

	#mainav{border:none;}
	#mainav ul{display:none;}
	#mainav form{display:block;}

	#footer div div p{
		word-break:break-all;
		display:block;
	}

	.footer_right{
		position: relative;
	}
	.information{
		font-size:13px;
		letter-spacing:0px;
	}
	
	.p_table{
		width:100%;
	}
	
	/* 公司簡介 */
	.left_content{
		width:70%;
		float:left;
		line-height:34px;
	}
	
	.right_content{
		width:auto;
		margin-left:70%;
		overflow:hidden;
	}
	
	.left_content, .right_content{
		font-size:22px;
		letter-spacing:3px;
		color:#000000;
	}
	
	.right_content img{
		width:200px;
		height:173px;
		border:1px solid #000000;
		margin:10px 10px;
	}
	
	.select{
		display:none;
	}
	/*營業項目*/
	#top_context{
		width:90%;
		float:left;
		margin: 10px 40px;
	}
	
	#left_context{
		width:90%;
		height: 100%;
		margin: 10px 40px;
	}
	#right_context{
		width:90%;
		margin: 10px 40px;
	}
	#left_context img,#right_context img{
		width:250px;
	}
	.i_content{
		font-size:22px;
		white-space:pre-wrap;
	}
	.i_title{
		font-size:35px;
	}
	
	/*產品目錄格子設定*/
	.box.t{
		width:80%;
		margin: 5% 10%;
		height:600px;
		float:left;
		background-color:#DBEDF0;
	}
	
	.box.m{
		width:80%;
		margin: 5% 10%;
		height:500px;
		float:left;
		background-color:#DBEDF0;
	}

	.box.b{
		width:80%;
		margin: 5% 10%;
		height:500px;
		float:left;
		background-color:#DBEDF0;
	}
	
	.box p{
		line-height:15px;
	}
	
	.box img{
		max-width:50%;
	}
	
	.p_title{
		font-size:22px;
	}
	
	.p_context{
		font-size:18px;
		margin: 0px 0px;
		padding: 10px 0px;
	}
	
	/*產品目錄*/
	
	#pro_title{
		font-size:30px;
	}
	#pro_title2{
		font-size:25px;
	}
	.pro_tab{
		font-size:20px;
	}
	.pro_name{
		font-size:20px;
	}
	.pro_text{
		font-size:15px;
	}
	.p_t_t{
		font-size:25px;
		display: inline;
	}
	.pro_describe{
		font-size:15px;
	}
	
	table{
		width:100%;
		border:2px #FFFFFF solid;
		table-layout:auto;
		border-color:#FFFFFF;
		vertical-align:top;
		overflow-x:auto;
		white-space:nowrap;
	}
	td{
		padding:5px 8px;
	}

	/*產品目錄標題大小*/
	.title_in_p{
		text-align: center;
		color: white;
		width: 100%;
		height: 164.45px;
		line-height: 164.45px;
		font-size: 48px;
	}
	
	.title_in_p2{
		text-align: center;
		color: white;
		width: 100%;
		height: 164.45px;
		font-size: 36px;
	}
	
	.title_in_p3{
		text-align: center;
		color: white;
		width: 100%;
		height: 164.45px;
		line-height: 164.45px;
		font-size: 36px;
	}
	
}


/* 筆電、桌電
--------------------------------------------------------------------------------------------------------------- */
@media screen and (min-width:978px) {
	#header, #mainav, #mainav2, .container, #footer{max-width:978px;}
	
	.p_table{
		width:90%;
	}
	
	.information{
		font-size:20px;
		letter-spacing:0px;
	}
	.footer_left{
		width:50%;
		float:left;
	}
	.footer_right{
		position: relative;
		width:auto;
		margin-left:50%;
		overflow:hidden;
	}
	
	/* 營業項目 */
	
	#top_context{
		width:100%;
		float:left;
		margin: 10px 30px;
	}
	#left_context{
		width:50%;
		float:left;
		margin: 10px 30px;
	}
	#right_context{
		width:auto;
		margin-left:50%;
		margin-top:35%;
	}
	#right_context img{
		width:200px;
		margin:5px 10px;
	}
	.i_content{
		font-size:22px;
	}
	.i_title{
		font-size:35px;
	}
	#top_context p,#left_context p{
		margin:30px 0px;
	}
	
	
	/* 公司簡介 */
	
	.left_content{
		width:70%;
		float:left;
		line-height:34px;
	}
	.right_content{
		width:auto;
		margin-left:70%;
	}
	.left_content{
		font-size:22px;
		letter-spacing:2px;
		color:#000000;
	}
	
	.right_content{
		font-size:22px;
		letter-spacing:2px;
		color:#000000;
	}
	
	.right_content img{
		width:150px;
		height:130px;
		border:1px solid #000000;
		margin:20px 20px;
	}
	
	/* "聯絡我們"欄位 */
	
	#line{
		display:inline;
		white-space:nowrap;
		overflow:hidden;
	}
	#line2{
		display:inline;
		white-space:nowrap;
	}
	
	/*產品目錄*/
	
	#pro_title{
		font-size:50px;
	}
	#pro_title2{
		font-size:35px;
	}
	.pro_tab{
		font-size:30px;
	}
	.pro_name{
		font-size:25px;
	}
	.pro_text{
		font-size:20px;
	}
	.p_t_t{
		font-size:30px;
		display: inline;
	}

	.pro_describe{
		font-size:25px;
	}
	
	table{
		width:100%;
		border:2px #FFFFFF solid;
		table-layout:auto;
		border-color:#FFFFFF;
		vertical-align:top;
		overflow-x:auto;
	}
	td{
		padding:5px 8px;
	}
	
	/*產品目錄選項*/
	
	.dropdowns .select{
		display:none;
	}
	.navFixed .select{
		display:block;
		display:flex;
		/* 水平置中 */
		justify-content: center;
		z-index: 1; 
		position: fixed;
		top: 0;
		left:0;
		margin-top: 0;
		min-width: 100%;
		opacity: 1;
		transition: opacity .5s ease-out;
		background-color:#B7D185;
	}
	
	/*產品目錄圖片*/
	.timg{
		width:450px;
		margin:20px 20px;
	}
	.pimg{
		width:35%;
		margin: 20px 50px;
	}
	.himg{
		width:90%;
		margin: 10px 50px;
	}
	.limg{
		width:20%;
		margin:30px 50px;
	}
	
	/*產品目錄格子設定*/
	.box.t{
		width:30%;
		margin: 20px 16px;
		height:600px;
		float:left;
		background-color:#DBEDF0;
	}
	
	.box.m{
		width:30%;
		margin: 20px 16px;
		height:500px;
		float:left;
		background-color:#DBEDF0;
	}

	.box.b{
		width:30%;
		margin: 20px 16px;
		height:500px;
		float:left;
		background-color:#DBEDF0;
	}
	
	.box p{
		line-height:18px;
	}
	
	.p_title{
		font-size:26px;
	}
	
	.p_context{
		font-size:22px;
	}

	/*產品目錄標題大小*/
	.title_in_p{
		text-align: center;
		color: white;
		width: 100%;
		height: 164.45px;
		line-height: 164.45px;
		font-size: 48px;
	}
	
	.title_in_p2{
		text-align: center;
		color: white;
		width: 100%;
		height: 164.45px;
		font-size: 36px;
	}
	
	.title_in_p3{
		text-align: center;
		color: white;
		width: 100%;
		height: 164.45px;
		line-height: 164.45px;
		font-size: 36px;
	}
}


/* Other
--------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width:650px) {
	.scrollable{display:block; width:100%; margin:0 0 30px 0; padding:0 0 15px 0; overflow:auto; overflow-x:scroll;}
	.scrollable table{margin:0; padding:0; white-space:nowrap;}
	
	.p_table{
		width:100%;
	}

	.footer_right{
		position: relative;
	}
	
	/*聯絡我們*/
	.information{
		font-size:10px;
		letter-spacing:0px;
	}
	
	/*公司簡介*/
	.left_content{
		width:100%;
		line-height:30px;
		font-size:19px;
		letter-spacing:3px;
		color:#000000;
	}
	
	.right_content{
		margin:20px 20px;
		width:100%;
	}
	
	.right_content img{
		width:250px;
		height:216px;
		border:1px solid #000000;
		margin:20px 20px;
	}
	.select{
		display:none;
	}
	
	/*營業項目*/
	#top_context{
		width:85%;
		float:left;
		margin: 10px 40px;
	}
	#left_context{
		width:85%;
		margin: 10px 40px;
	}
	#right_context{
		width:85%;
		margin: 10px 40px;
	}
	#left_context img,#right_context img{
		width:250px;
	}
	.i_content{
		font-size:22px;
		white-space:pre-wrap;
	}
	.i_title{
		font-size:35px;
	}
	
	/*產品目錄*/
	
	#pro_title{
		font-size:28px;
	}
	#pro_title2{
		font-size:25px;
		text-align:left;
	}
	.pro_tab{
		font-size:20px;
	}
	.pro_name{
		font-size:20px;
	}
	.pro_text{
		font-size:15px;
	}
	.p_t_t{
		font-size:25px;
		display: inline;
	}
	.pro_describe{
		font-size:15px;
	}
	table{
		width:100%;
		border:2px #FFFFFF solid;
		table-layout:auto;
		border-color:#FFFFFF;
		vertical-align:top;
		overflow-x:auto;
		white-space:nowrap;
	}
	td{
		padding:5px 8px;
	}
	
	/*產品目錄格子設定*/
	.box.t{
		width:70%;
		margin: 5% 10%;
		height:600px;
		float:left;
		background-color:#DBEDF0;
	}
	
	.box.m{
		width:70%;
		margin: 5% 10%;
		height:500px;
		float:left;
		background-color:#DBEDF0;
	}

	.box.b{
		width:70%;
		margin: 5% 10%;
		height:500px;
		float:left;
		background-color:#DBEDF0;
	}
	
	.p_title{
		font-size:25px;
	}
	
	.p_context{
		font-size:18px;
	}
	
	.box img{
		max-width:80%;
	}
	/*產品目錄標題大小*/
	.title_in_p{
		text-align: center;
		color: white;
		width: 100%;
		height: 164.45px;
		line-height: 164.45px;
		font-size: 32px;
	}
	
	.title_in_p2{
		text-align: center;
		color: white;
		width: 100%;
		height: 164.45px;
		font-size: 24px;
	}
	
	.title_in_p3{
		text-align: center;
		color: white;
		width: 100%;
		height: 164.45px;
		line-height: 164.45px;
		font-size: 24px;
	}
}