@charset "utf-8";
/* CSS Document */
@font-face {
  font-family: 'icomoon';
  src: url("../fonts/icomoon/icomoon.eot?srf3rx");
  src: url("../fonts/icomoon/icomoon.eot?srf3rx#iefix") format("embedded-opentype"), url("../fonts/icomoon/icomoon.ttf?srf3rx") format("truetype"), url("../fonts/icomoon/icomoon.woff?srf3rx") format("woff"), url("../fonts/icomoon/icomoon.svg?srf3rx#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
}

body, html {
	height:100%
}
body {
	color:#333;
	font-family:'Nunito', Arial, Helvetica, sans-serif, "微軟正黑體"!important;
	margin:0px;
	padding:0px;	
}
a,a:hover {
	text-decoration:none;
	transition:all 0.5s;
	-webkit-transition:all .5s;
	-o-transition:all .5s;
	-ms-transition:all .5s;
	-moz-transition:all .5s;
}
ul,li {
	list-style-type:none;
	margin:0px;
	padding:0px;
}
h1,h2,h3,h4,h5,h6 {
	font-weight: normal;
	margin: 0;
}
* {
	outline: none;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}
img {
	display:block;
	border:0px;
}
p{
	margin:0;
}
ul,label{
	margin:0;
	padding:0;
}
.item {
	padding:0 1%;
	overflow:hidden;
}
.container {
	width:98%;
	max-width:1200px;
	min-width:1000px;
	margin:0 auto;
}
.banner, .header, .footer {
	min-width:1000px;
}
.section {
	padding:50px 0;	
	min-width:1000px;
}
.section h2.sec_title {
	font-size:1.8em;
	font-family:Arial, Helvetica, sans-serif,'新細明體';
	background:url(../images/index/title_icon.png) no-repeat left;
	clear:both;
	padding-left:25px;
	padding-top:2px;
	margin-bottom:30px;
}
.section h2 font {
	color:#9fce7a;
}
.section h2 span {
	color:#aaa;
	font-family:'Lora', "Times New Roman", Times, serif;
	font-size:.5em;
	display:inline-block;
	vertical-align:middle;
	margin-left:10px;
}
.clear_both {
	clear:both;
	visibility: hidden;
}
header.headerfix {
	padding:8px 0;
}
.headerfix h3 {
	font-size:1.2em;
	background-position: left 2px;
	padding:0px 0px 0px 90px;
}
.headerfix .hd_nav {
	margin-top: 0px;
}
header.header-scrolled {
  background: #fff;
  -webkit-box-shadow:0px 1px 10px rgba(37,123,239,.3);
  -moz-box-shadow:0px 1px 10px rgba(37,123,239,.3);
	box-shadow:0px 1px 10px rgba(37,123,239,.3);	
  -webkit-transition: all 0.6s;
  -moz-transition: all 0.6s;
  -ms-transition: all 0.6s;
  -o-transition: all 0.6s;
}
/*--header--*/
header {
	background:#fff;
	width:100%;
	padding:10px 0;
	position:fixed;
	z-index:99;
	transition: all .5s;
	-webkit-transition:all .5s;
	-o-transition:all .5s;
	-ms-transition:all .5s;
	-moz-transition:all .5s;
	/*height:80px;如有手機選單，建議不要設定高度，可能會造成手機選單高度有限制，否則使.hd_nav設定fix就可無視*/	
}
header h3 {
	font-size:1.5em;/*變更即可變更logo大小*/
	display:inline-block;
	color:#1728a0;
	background:url(../images/hd_logo.jpg) no-repeat;
	background-size: contain;
	background-position:left 0px;
	/*height:40px;變更高度即可變更logo大小*/
	float:left;
	margin-left:1%;
	padding:2px 0px 3px 110px;
	transition: all .5s;
	-webkit-transition:all .5s;
	-o-transition:all .5s;
	-ms-transition:all .5s;
	-moz-transition:all .5s;
}
header h3 span {
	font-size:12px;
	display:block;
}
header a {
	color:#333;
}
.hd_nav {
	width:40%;
	float:right;
	margin-top:3px;
}
.hd_nav li {
	float:left;
	list-style:none;
	width:23%;
	padding:0 1%;
	position:relative;
}
.hd_nav li::after {
	content:'';
	background:#9fce7a;
	width:1px;
	height:15px;
	position:absolute;
	top:0;
	bottom:0;
	right:0;
	margin: auto 0;
}
.hd_nav li:last-child::after {
	content:'';
	width:0px;
}
.hd_nav li a {
    color: rgb(102, 102, 102);
    font-size: 1.1em;
    text-align: center;
    text-decoration: none;
    display: block;
    width: 90%;
    margin: 5px auto;
	padding:5px 0;
    border-radius: 0px;
    position: relative;
    overflow: hidden;
}
.hd_nav li a:hover {
	color:#257bef;
    border-radius: 0px;
}
.hd_nav li.active a {
	color:#257bef;
}
/*選單樣式*/
.hd_nav a span::before {
		width: 100%;
		height: 2px;
		background: #11d059;
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		-moz-transform: translateX(-100%);
		-ms-transform: translateX(-100%);
		-webkit-transform: translateX(-100%);
		transform: translateX(-100%);
		-moz-transition: 0.3s;
		-o-transition: 0.3s;
		-webkit-transition: 0.3s;
		transition: 0.3s;
	}

.hd_nav a span::after {
		width: 100%;
		height: 2px;
		background: #11d059;
		content: "";
		position: absolute;
		right: 0;
		bottom: 0;
		-moz-transform: translateX(100%);
		-ms-transform: translateX(100%);
		-webkit-transform: translateX(100%);
		transform: translateX(100%);
		-moz-transition: 0.3s;
		-o-transition: 0.3s;
		-webkit-transition: 0.3s;
		transition: 0.3s;
	}

.hd_nav a::before {
		width: 2px;
		height: 100%;
		background: #11d059;
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		-moz-transform: translateY(100%);
		-ms-transform: translateY(100%);
		-webkit-transform: translateY(100%);
		transform: translateY(100%);
		-moz-transition: 0.3s;
		-o-transition: 0.3s;
		-webkit-transition: 0.3s;
		transition: 0.3s;
	}

.hd_nav a::after {
		width: 2px;
		height: 100%;
		background: #11d059;
		content: "";
		position: absolute;
		right: 0px;
		bottom: 0;
		-moz-transform: translateY(-100%);
		-ms-transform: translateY(-100%);
		-webkit-transform: translateY(-100%);
		transform: translateY(-100%);
		-moz-transition: 0.3s;
		-o-transition: 0.3s;
		-webkit-transition: 0.3s;
		transition: 0.3s;
	}
.hd_nav a:hover::before, .hd_nav a:hover::after {
		background: #11d059;
		-moz-transform: translateX(0);
		-ms-transform: translateX(0);
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}

.hd_nav a:hover span::before, .hd_nav a:hover span::after {
		background: #11d059;
		-moz-transform: translateX(0);
		-ms-transform: translateX(0);
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
/*--header END--*/

/*--banner--*/
.banner {
	width:100%;
	padding-top:71px;
}
.banner img {
}
/*--banner END--*/

/*--about_us--*/
.about_us h2 {
}
.about_us h2 font {
}
.about_us h2 span {
}
.about_txt {
	width:63%;
	float:left;
	margin-right:2%;
}
.about_txt p {
	margin-bottom:1em;
}
.about_img {
	text-align:center;
	width:35%;
	float:left;
}
.about_img img {
	max-width:100%;
	display:inline-block;
	vertical-align:middle;
}
/*--about_us END--*/

/*--Business project--*/
.project {
	background:url(../images/index/pro_bg.jpg) no-repeat fixed center top;
	background-size:cover;
}
.project h2.sec_title {
	color:#fff;
	background:url(../images/index/title_icon2.png) no-repeat left;
}
.project h2 font {
	color:#fff;
}
.project h2 span {
	color:#fff;
}
.project ul {
	color:white;
	text-align:center;
	display:block;
	margin:0 auto 30px;
}
.project ul li {
	display:inline-block;
	width:17.6%;
	margin:0 1%;
}
.project ul li div {
	border:1px solid white;
	padding:30px 0;
}
.project ul li img {
	margin:0 auto;
}
.project ul li p {
	margin-top:1em;
}
/*--Business project END--*/

/*--Product--*/
.product #portfolio_wrapper li .portfolio_img {
	background:#fff;
	border:1px solid #e8e8e8;
}
.product #portfolio_wrapper li a {
	color:#333;
	display:block;
	padding-top:30px;
}
.product #portfolio_wrapper li a span {
	width:70%;
	display:block;
	margin:0 auto;
	padding:15px 0 50px;
}
.product #portfolio_wrapper li p {
	display:block;
	width:100%;
	height:1em;
	padding:1em 0;
}
.product #portfolio_wrapper li p font {
	display: table-cell;
	padding-right:.5em;
}
.product #portfolio_wrapper li p font:first-child {
	white-space:nowrap;
	width:42px;
}
.product #portfolio_wrapper li p font:last-child {
	padding-right:0em;
}
/*--Product END--*/

/*--banner2--*/
.banner2 {
	color:#fff;
	background:url(../images/index/banner2_bg.jpg) no-repeat fixed center top;
	background-size:cover;
	text-align:center;
	padding: 0px 0;
}
.banner2 .ban_dott {
	background:url(../images/index/dott.png) repeat fixed 0px 0px;
    background-size: 2px;
    -webkit-background-size: 2px;
	padding: 100px 0;
}
.banner2 strong {
	font-size:2.5em;
	font-family:Arial, Helvetica, sans-serif,'新細明體';
	font-weight:normal;
	display:block;
}
.banner2 p {
	font-size:1.5em;
	display:block;
	margin:1em 0;
}
.banner2 span {
	font-size:1.2em;
	display:inline-block;
	margin:30px 0 0;
	padding:.8em 1.5em;
	border:1px solid #fff;
}
/*--banner2 END--*/

/*--contact us--*/
.contact_us form .focusinput {
	background:#fff;
	border:1px solid #257bef;
	transition:all 0.5s;
	-webkit-transition:all .5s;
	-o-transition:all .5s;
	-ms-transition:all .5s;
	-moz-transition:all .5s;
}
.contact_us p {
	line-height:1.6;
	margin-bottom:20px;
}
.contact_us p font {
    color: rgb(255, 0, 0);
    font-size: 0.9em;
}
.contact_us p em {
	font-size:.8em;
}
.contact_us em {
    color: rgb(255, 0, 0);
	font-style:normal;
}
.contact_us iframe {
	display:block;
	margin:10px 0;
	border:5px solid #ccc;
	webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.contact_us form div {
    width: 48%;
    margin: 0 1%;
    margin-bottom: 20px;
    float: left;
}
.contact_us form label {
    width: 97%;
    display: block;
    margin-bottom: 0.5em;
    margin-left: 1%;
}
.contact_us form input {
    font-family: 'Titillium Web', sans-serif ,Arial, Helvetica, sans-serif, "微軟正黑體";
	background:rgba(0,0,0,0);
    width: 97%;
    padding: 0.9em 1.5%;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(170, 170, 170);
    border-image: initial;
}
.contact_us form div.content_txt {
    width: 100%;
}
.contact_us form div.content_txt label {
    width: 99%;
    display: block;
    margin-bottom: 0.5em;
    margin-left: .5%;
}
.contact_us form textarea {
    font-family: 'Titillium Web', sans-serif ,Arial, Helvetica, sans-serif, "微軟正黑體";
    width: 97%;
    height: 10em;
    resize: vertical;
    padding: 0.5em 0.5%;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(170, 170, 170);
    border-image: initial;
}
.contact_us form button {
    font-family: 'Titillium Web', sans-serif ,Arial, Helvetica, sans-serif, "微軟正黑體";
	color:#fff;
	font-size:.9em;
	background:#aaa;
	display:block;
	margin-top:25px;
	margin-left:10px;
	padding:.8em 1.5em;
	border:0;
	border-radius:5px;
	cursor:pointer;
	transition: all 0.2s ease;
	-webkit-transition: all .2s ease;
	-o-transition: all .2s ease;
	-ms-transition: all .2s ease;
	-moz-transition: all .2s ease;
}
.contact_us form button:hover {
	background:#2a73ed;
	transition: all 0.2s ease;
	-webkit-transition: all .2s ease;
	-o-transition: all .2s ease;
	-ms-transition: all .2s ease;
	-moz-transition: all .2s ease;
}
/*--contact us END--*/

/*--footer--*/
.footer {
	color: #333;
	background:url(../images/index/ft_bg.jpg);
    clear: both;
	padding:80px 0;
	border-top:8px solid #333333;
	overflow:hidden;
}
.ft_logo {
	float:left;
}
.ft_logo h3 {
	font-size: 1.4em;
	display: block;
	background: url(../images/index/ft_logo.png) no-repeat;
	background-size:contain;
	background-position: left 0px;
	width: 100%;
	padding: 20px 0px 20px 105px;
}
.ft_copyright {
	font-size:.9em;
	clear:both;
	padding-left:.3em;
}
.ft_contact {
	width:28%;
	float:right;
}
.ft_contact li {
	font-size:.9em;
	display:block;
	width:100%;
	float:right;
	margin-bottom:1em;
}
.ft_contact div {
	display:inline-block;
}
.ft_contact a {
	color:#fff;
	border-bottom:1px solid #fff;
	transition: all 0.1s;
	-webkit-transition: all .1s;
	-o-transition: all .1s;
	-ms-transition: all .1s;
	-moz-transition: all .1s;
}
.ft_contact a:hover {
	border-bottom:0px solid #fff;
}
/*--footer END--*/