@charset "utf-8";
@import url("reset.css"); /*重置*/
@import url(http://fonts.googleapis.com/css?family=Lato:400,900,300); /* font */
@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,700,900,100italic,300,300italic,400italic,500,500italic,700italic,900italic);
/* CSS Document */

body {
	font-family: 'Lato', '微軟正黑體', sans-serif; /*自行增減使用 */
	font-size: 16px;
	line-height:1.5;
	color: #333;
	background:url(../images/all/bg.jpg) left top repeat;
	}
a { color:#000; text-decoration: none; }
a:hover { color:#2f65d3; 
    -o-transition: color .5s linear;
    -webkit-transition: color .5s linear;
    -moz-transition: color .5s linear;
    transition:  color .5s linear; /*連結淡入淡出*/
}

/*---------------------- 基礎設定 ----------------------*/
/*反白設定*/
::selection { background: #666; color: #FFF; }
::-moz-selection { background: #666; color: #FFF; }

/* --為避免客戶使用編輯器時會用到ul ol, 此重置值依情況自行啟用！
ol, ul, li { 
    margin: 0;
	padding: 0;
	font: inherit;
	border:0;
	vertical-align: baseline;
}
--*/

/*全頁共用hack*/
*, *:before, *:after { box-sizing: border-box;}
.clearfix:after { content: " "; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { zoom: 1;}  /*清左右浮動*/

/*通用排版用*/
.center { text-align:center; }
.flt { float:left; }
.flr { float:right; }

/* CSS3 style  陰影圓角範例，可自行增減使用 */
.css-radius {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
} 
.css-shadow {
	-webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, .4);
	-moz-box-shadow: 1px 1px 4px rgba(0, 0, 0, .4);
	box-shadow: 1px 1px 4px rgba(0, 0, 0, .4);
}

/*元件(共用)*/
.input, .textarea, .select { background: #FFF; border: 1px solid #CCC; font-family: 'Lato', '微軟正黑體', sans-serif; font-size:15px; line-height:1.1; color:#555; }
.input:focus, .textarea:focus, .select:focus { border:1px solid #000; }

/*線(共用)*/
hr { height:1px; background:#CCC; }

/*文字樣式(共用)*/
.white { color: #FFF; }
.gray { color:#999; }
.black { color:#000; }
.blue { color: #3064ce; }
.red { color: #CC0000; }
.green { color: #28A9B1; }
.orange { color: #FF6600; }
.yellow { color: #FFFF00; }
.purple { color:#6633CC; }
.brown { color:#613C33; }

h1, h2, h3, h4, h5 { font-family: 'Roboto', '微軟正黑體', sans-serif; }

/*---------------------- 頁面開始 ----------------------*/
/*全頁佈局*/
#wrapper { max-width:1200px; margin:0 auto; }
.container { max-width:1000px; margin:0 auto; }
.content { max-width:1000px; margin:0 auto; padding:4em 0; }
.content strong, .content b { font-weight:bold; }

/* 頁首 */
header { background:#fff; }
header .logo { display:block; width:70%; max-width:510px; }
header .container { padding:10px 0; position:relative; }
.iconmenu { list-style:none; padding:0; margin:0; position:absolute; right:0; top:65%; }
.iconmenu li { float:right; padding:0 1em; }
.iconmenu li:first-child { border-left:1px solid #CCC; padding-right:0; }
.iconmenu li a { display:block; color:#888; }
.iconmenu li a:hover { color:#de021d; }

.menu { background:url(../images/all/nav_bg.jpg) repeat-x; min-height:50px; z-index:999; border-bottom:1px solid #FFF; }
.menu ul { list-style:none; padding:0; }
.menu ul li { float:left; width:20%; text-align:center; color:#FFF; background:url(../images/all/nline.png) right center no-repeat; }
.menu ul li:last-child { background:none; }
.menu ul li a { display:block; height:50px; line-height:50px; color:#FFF; margin-right:1px; }
.menu ul li a:hover, .menu ul li.on a { background:url(../images/all/nav_bg_hover.jpg) repeat-x;  }
.toggle { display: none; }
.arrow-bottom {
	position: absolute;
	top: 25px;
	right: 13px;
	margin-left: 5px;
	border-top: 4px solid #FFF;
	border-right: 4px solid transparent;    
	border-left: 4px solid transparent;        
	width: 1px;
	height: 1px;
}

/* 內頁banner*/
.banner2 { height:250px; }
.banner2 h1 { text-align:center; font-weight:bold; text-shadow:1px 1px 2px #ccc; }
.banner2 h1 strong { display:block; color:#174093; margin-top:1em; margin-bottom:-10px; }
.banner2 h1 span { font-size:48px; padding-bottom:10px; text-transform:uppercase; border-bottom:5px solid #174093; }
.crumb { background:url(../images/all/white.png); text-align:right; }
.crumb .container { padding:10px 0; font-size:13px; }

/*  頁尾 */
footer { background:#174093; }
footer, footer a { color:#FFF; }
footer .row { display:table; width:100%; margin:0; }
footer .column-3 { float:inherit; display:table-cell; background:url(../images/all/fline.png) left center no-repeat; padding:2em 0 2em 1.5em; border-left:1px solid #8198c5; font-size:14px; }
.copyright { background:#000; padding:1em 0; text-align:center; font-size:13px; border-top:1px solid #FFF; }
.copyright copyright, .copyright small { margin:0 5px; }


/* 回頂端 */
#goTop {
	border:1px solid #CCC;
	color:#888;
	background:#FFF;
	text-align:center;
	position:fixed;
	bottom:20px;
	right:20px;
	width:50px;
	height:50px;
	line-height:50px;
	cursor:pointer;
	display:none;
	-moz-border-radius:25px;
	-webkit-border-radius:25px;
	border-radius:25px;
	-webkit-box-shadow:#EEE 0px 0px 5px;
	-moz-box-shadow:#EEE 0px 0px 5px;
	box-shadow:#EEE 0px 0px 5px;
}
#goTop:hover { background:#000; color:#FFF; }


.row { margin-left:-1em; margin-right:-1em; }
.column-2 { float:left; padding:0 1em; width:50%; }
.column-3 { float:left; padding:0 1em; width:33.333%; }
.column-4 { float:left; padding:0 1em; width:25%; }
.column-5 { float:left; padding:0 1em; width:20%; }
.stit { font-size:28px; font-weight:bold; color:#000; margin-bottom:10px; text-transform:uppercase; text-shadow:1px 1px 2px #AAA; }
.btnWrap { text-align:center; margin:1em 0; }
.btnWrap a { display:inline-block; margin:0 1em; font-size:18px; padding:5px 25px; background:#FFF; color:#174093; border:1px solid #174093; border-radius:3px; }
.btnWrap a:hover { color:#46a7f2; border:1px solid #46a7f2; }


/*----index---*/
.inFocus { background:#ffedad; height:380px; overflow:hidden; }
.inFocus .focus1 { float:left;  width:510px; padding:40px 30px; }
.inFocus .focus1 .slick-slider { margin:20px 50px; }
.inFocus .focus1 .slick-slide { 
    border:1px solid #fff;
	border-radius:5px;
	line-height:130px;
	text-align:center;
	background:#FFF;
}
.inFocus .focus1 h2 { text-align:center; font-size:30px; font-weight:bold; margin-top:20px; }
.inFocus .focus1 p { display:block; margin:0 50px; }
.inFocus .focus1 p strong { font-size:24px; }
.inFocus .focus2 { float:right; width:490px; }
.inFocus .focus2 img { display:block; }

.inBox { padding:4em 0 0 0; }
.inBox .row { margin-left:-0.5em; margin-right:-0.5em; }
.inBox .column-4 { padding:0 0.5em;  }
.inBox .column-4 img { width:100%; vertical-align:middle; }
.inBox .column-4 h3 { background:#FFF; height:88px; overflow:hidden; padding:20px; border-bottom:1px solid #CCC; text-align:center; }
.inBox .column-4 span { background:#FFF; display:block; padding:19px; height:238px; line-height:200px; text-align:center; }
.inBox .column-4 span:after {
  content : ".";
  font-size : 1px;
  margin-left : -1px;
  opacity : 0;
}
.inBox .column-4 span img { max-width:200px; max-height:200px; width:inherit; }


/*-------內頁開始------------*/
.title { text-align:center; font-size:30px; border-bottom:1px solid #CCC; padding-bottom:.5em; margin-bottom:1em; }
.title span { display:block; font-size:16px; color:#999; }

.company { padding-bottom:4em; display:table; width:100%; }
.company .pull-left { display:table-cell; width:40%; float:inherit; }
.company .pull-right { display:table-cell; vertical-align:middle; line-height:2; float:inherit; padding-left:3em; font-size:18px; color:#174093; }
.org { line-height:1.2; }
.org tr th { width:20%; vertical-align:middle; padding:15px; background:#ccc; }
.org tr td { vertical-align:middle; padding:15px; background:#FFF; border-bottom:1px solid #c5d9ec; }
.org .sec { background:#d8ecff; text-align:center; color:#174093; }

.idea .column-5 h3 { padding:0.5em 1em; background:#174093; color:#FFF; margin-bottom:1em; text-align:center; }
.business .column-2 img { max-width:45%; margin:0 1%; }
.business .column-2 p { background:#E5E5E5; padding:15px; margin:10px 0; }
.winner .column-4 { margin-bottom:2em; }
.winner .column-4 img { width:80%; max-width:270px; display:block; margin:0 auto }

.site { margin-bottom:2em; }
.site .column-3 { margin-bottom:2em; }
.site .column-3 span { display:block; background:#FFF; margin-bottom:0.5em; }
.site .column-3 span img { width:100%; }
.site .column-3 h3 { line-height:1.2; text-align:center; padding:10px; }

.service { margin-bottom:2em; }
.service .column-4 { margin-bottom:2em; }
.service .column-4 span { display:block; background:#FFF; margin-bottom:0.5em; }
.service .column-4 span img { width:100%; }
.service .column-4 h3 { line-height:1.2; text-align:center; padding:10px; }

.client { margin-bottom:2em; }
.client .column-4, .client .column-5 { margin-bottom:2em; }
.client .column-4 span, .client .column-5 span { display:block; background:#FFF; margin:0 2%; height:70px; line-height:65px; text-align:center; -webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; /*border:2px solid #06C;*/ }
.client .column-4 span, .client .column-5 a.on{ display:block; border: 2px solid #F00;  -webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}
.client .column-4 span:after, .client .column-5 span:after {
  content : ".";
  font-size : 1px;
  margin-left : -1px;
  opacity : 0;
}
.client .column-4 img, .client .column-5 img { max-width:80%; max-height:80%; vertical-align:middle;}


/* product */
.nav-tabs {
   background:url(../images/all/tab_bg.jpg) repeat-x;
   list-style:none;
   padding:0;
   margin:0;
   border:0;
}

.nav-tabs > li {
	position: relative;
	background:url(../images/all/tab_line.jpg) center right no-repeat;
	margin-right:-3px;
	display: inline-block;
    margin: 0 -3px 0 0;
    list-style: none;
	float:inherit;
}
.nav-tabs > li > a {
	color: #fff;
	display:block;
	font-weight: bold;
	text-decoration: none;
	font-size: 14px;
	border:0;
	margin:0;
	border-radius:0;
	background:none;
}
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
	border:0;
}
.nav-tabs > li > a:hover { color:#FFC; background:none; }
.tab-pane { background:#FFF; padding:10px 0; }
.tab-pane a { 
	display:inline-block;
	vertical-align:top;
	padding:5px 20px;
	color:#174093;
	font-size:14px;
	line-height:1.2;
}
.tab-pane a:hover, .tab-pane a.on { text-decoration:underline; }

.product { padding:2em 0; }
.product .row { margin-left:-0.5em; margin-right:-0.5em; }
.product .column-4 { padding:0 0.5em;  }
.product .column-4 img { width:100%; }
.product .column-4 h2 { height:88px; overflow:hidden; padding:20px; text-align:center; }
.product .column-4 span { background:#FFF; display:block; padding:19px; height:238px; line-height:200px; text-align:center; border-bottom:4px solid #174093; }
.product .column-4 span:after {
  content : ".";
  font-size : 1px;
  margin-left : -1px;
  opacity : 0;
}
.product .column-4 span img { max-width:200px; max-height:200px; width:inherit; vertical-align:middle; }
.product .column-4 a:hover span { border-bottom:4px solid #46a7f2; }
.product .column-4 a:hover span img { opacity:0.9; }

.product .tit { background:#174093; padding:0.5em 1em; color:#FFF; font-size:20px; }
.product .focus { background:#FFF; padding:2em 2em 4em 2em; border-bottom:2px solid #DDD; }
.product .focus .img { float:left; width:55%; padding:1em; }
.product .focus .img img { max-width:100%; }
.product .focus .img .slick-list { margin-bottom:2em; }
.product .focus .txt { float:right; width:40%; }
.product .focus .txt h3 { font-weight:bold; padding-bottom:0.5em; border-bottom:1px solid #CCC; margin-bottom:1em; }
.product .focus .txt .pdf { display:inline-block; margin:2em 0 0 0; background:#f3f7ff; padding:5px 15px; border:1px solid #6a9bff; color:#6a9bff; }
.product .focus .txt .pdf:hover { background:#174093; border:1px solid #174093; color:#FFF; }
.product .focus .dm { text-align:center; clear:both; padding:4em 0 0 0; }
.product .focus .dmtxt { clear:both; padding:4em 0 0 0; }
.product .focus .dm img { max-width:100%; }

/* project */
.project { padding:0; }
.project .column-4 { margin-bottom:2em; }

/* contact */
.formWrap { }
.formWrap p { margin:0 0 1em 0; display:block; clear:both; overflow:hidden; }
.formWrap p label { padding:6px; float:left; width:90px; text-align:right; }
.formWrap p span { margin-left:90px; display:block;  }
.formWrap p .input { padding:10px; width:100%; -webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px; }
.formWrap p .textarea { padding:10px; width:100%; height:120px; -webkit-border-radius: 3px;-moz-border-radius: 3px; border-radius: 3px; }
.formWrap p .code { width:160px; height:40px; color:#06F; }
.formWrap #imgg { margin-top:5px; margin-left:1em; }

.formWrap .row { margin-bottom:2em; }
.formWrap .column-3 { font-size:14px; color:#174093; text-align:center; }
.formWrap .column-3 .fa { margin-right:0.5em; }




@media (max-width: 1024px) { 
.content { padding-left:4%; padding-right:4%; }

/* 頁首 */
header .logo { margin-left:1em; }
.iconmenu { display:none; }

/*----index---*/
.inFocus { width:90%; height:auto; margin:0 auto; }
.inFocus .focus1 { float:inherit; width:auto; padding:30px 30px; }
.inFocus .focus2 { float:inherit; width:auto; }
.inFocus .focus2 img { float:left; width:50%; }

.inBox { width:90%; margin:0 auto; }
.crumb .container { padding:10px }

}

@media (max-width: 768px) { 
/*全頁佈局*/
.content { padding-top:2em; padding-bottom:2em; }

/*  頁尾 */
footer .container { padding-left:4%; padding-right:4%; }
footer .row { display:block; }
footer .column-3 { display:block; width:auto; background:none; padding-left:0; border-left:0; border-top:1px solid #8198c5; }

.column-2, .column-3, .column-4 { width:50%; }
.column-5 { width:33.333%;}

/*----index---*/
.inBox .column-4 { margin-bottom:2em;  }

.company .pull-left { display:block; width:auto; }
.company .pull-right { display:block; width:auto; padding:2em 0 0 0; }

.idea .column-5 { margin-bottom:2em;  }
.business .column-2 { float:inherit; width:auto; }
.business .column-2 img { max-width:46%; margin:0 2%; }

.site { margin-bottom:4em; }
.site .column-3 { float:inherit; width:90%; max-width:369px; margin:0 auto 2em; }

.service { margin-bottom:4em; }

.formWrap .row { padding:0 1em 0 2em; margin-bottom:2em; }
.formWrap .column-3 { float:inherit; width:auto; margin:0 0 1em 0; border:0; border-bottom:1px solid #CCC; padding:0; padding-bottom:1em; font-size:18px; text-align:left; }

}

@media (max-width: 640px) { 
/* 頁首 */
.nav { display: none; }
.toggle {
	display: block;
	background: #082d76;
	padding:0 1em;
	color: #FFF;
	height:50px;
	line-height:50px;
	font-size:20px;
	text-transform:uppercase;
}
.toggle i { margin-right:10px; }
.menu { background:#006; }
.menu ul li { float:inherit; width:auto; background:url(../images/all/nav_bg.jpg) repeat-x; }
.menu ul li:last-child { background:url(../images/all/nav_bg.jpg) repeat-x; }
.arrow-bottom {
	top: 20px;
}

/*----index---*/
.banner { display:none; }
}

@media (max-width: 480px) { 
/*  頁尾 */
.copyright copyright, .copyright small { display:block; }

.column-2, .column-3, .column-4, .column-5 { float:inherit; width:auto; }


/*----index---*/
.inFocus { width:auto; }
.inFocus .focus1 { padding:30px 10px; }
.inFocus .focus2 img { float:inherit; width:100%; }

.service .column-4 { width:90%; max-width:369px; margin:0 auto 2em; }

.client { margin-bottom:4em; }

.formWrap .column-3 {  font-size:13px; }
.formWrap .column-3 .fa { display:none; }

}