@charset "utf-8";
/* CSS Document */
@import url("reset.css");
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,400,700,300');
@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700,900,400italic,700italic');

	@word_font-family:"メイリオ",Meiryo,"STXihei", HEITI TC, "HEITI TC", "黑體-繁", "微軟正黑體", "黑體", sans-serif;
	@victor-family: "STXihei", HEITI TC, "HEITI TC", "黑體-繁", "微軟正黑體", "黑體", sans-serif;
	@content-family: Arial, Helvetica, sans-serif;
	@foot-family:"Gill Sans MT", Arial, Helvetica, sans-serif;
	
	@colorBG: #F7F6F2;
	@stdcolor:#808080;
	@imagePath:"../images";
	@like_fontType:"微軟正黑體","黑體","新細明體", sans-serif;

	@contact_top_word:"Times New Roman", Times, serif;
	@try_word:"Baskerville","Big Caslon","Caslon","Garamond","Garamond Premier Pro","Adobe Garamond Pro","Adobe Garamond","NSimSun","SimSun","STSong","AR PL SungtiL GB","TW-Sung","WenQuanYi Bitmap Song",serif;
	
	@top_menu_hight:40px;
	@ex-color:#FCCF00;

	@date-font:"Garamond","Garamond Premier Pro","Adobe Garamond Pro","Adobe Garamond",serif;
	@menu_font: Georgia, "Garamond","Garamond Premier Pro","Adobe Garamond Pro","Adobe Garamond",serif;
	
	@drag_wrap_width:3072px;
	@drag_wrap_height:1728px;

	@content-family: Arial, Helvetica, sans-serif, "黑體-繁", "微軟正黑體", "黑體";
	@foot-family:Helvetica, Arial, "Gill Sans MT",  sans-serif;
	@sub-menu: "Gill Sans MT", 'Trajan pro',  sans-serif;
	//@defaultTitleFamily: 
	@Trajan: 'Trajan pro' ,"Times New Roman", Times, serif;

	@word_font-family:"メイリオ",Meiryo,"STXihei", HEITI TC, "HEITI TC", "黑體-繁", "微軟正黑體", "黑體", sans-serif;

	@imagePath:"img";

	@top_menu_hight:40px;
	@ex-color:#FCCF00;

	@colorBG: #000;


	@defaulFontColor: #221814;

	@titleColorYellow: #d69300 ;
	@titleColorBlack: #23272a;
	@titleColorGray: #888889;
	@contentBGColor: #e5e6e6;

	@linkColor: @defaulFontColor;
	@linkHoverColor: #41CEBD;

	@defaultPercent: 100%;
	@defaultWidth: 960px;
	@menuHeight: 672px;

	@mainNavX: 156px;
	@mainNavY: 20px;

	@groupNavX: 30px;

	@Roboto-family: 'Roboto Condensed', sans-serif;
	@Lato-family: 'Lato', sans-serif;

	

	
	
	.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
   


	}
	
	.clearfix {display: inline-block;}
	/* Hides from IE-mac \*/
	* html .clearfix {height: 1%;}
	.clearfix {display: block;}
	/* End hide from IE-mac */
	.clearboth{
		clear:both;

	}
	.myfloatLeft{
		float:left;
	}
	.myfloatRight{
		float:right;
	}
	.myTextRight{
		text-align:right;
	}
	html,body{
	
	/*background-image:url("images/bg2.jpg");*/
	
	width:100%;
	
	/* background:url(images/bg2.jpg);*/
	
	
	}
	body {
	-webkit-text-size-adjust:none;/*chrome設定字大小*/
	margin:0;
	padding:0;
	/*overflow:hidden;*/
	/*overflow:auto;*/	
	font-size:12px;

	
	
	}

	a{text-decoration: none;}

	a:link,a:visited,a:active {
		/*color:#4f91b0;
		text-decoration:none;*/
		text-decoration:none;
	}
	a:hover {
		/*color:#000000;*/
	}





.fa-ba{
	content:"";
}


@media (min-width: 1025px) {
}

#pattern-overlay{
	background-image: url("images/checkers.png");
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 99;
}
#slideHeight{
	height: 945px;
	width: 100%;
}
.section{	
	height: auto;
	width: 100%;	
	background-color: #fff;
}
.st_container{
	
	margin: 0 auto;
	height: auto;
	// padding-top: 35px;
	padding-bottom: 35px;	
}
@media (min-width: 768px) {
  .st_container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .st_container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .st_container {
    width: 1170px;
  }
}
.block_h1{
	color: #282828;
	font-size: 42px;
	font-weight: bold;
	padding-bottom: 22px;
	border-bottom: 1px solid #000;
	text-align: center;
	letter-spacing: 1px;
	font-family: @Roboto-family;
}
h1{
	color: #282828;
	font-size: 42px;
	font-weight: bold;
	padding-bottom: 22px;
	border-bottom: 1px solid #000;
	text-align: center;
	letter-spacing: 1px;
	font-family: @Roboto-family;
}
.h1white{
	color: #fff;
	border-bottom: 1px solid #fff;
}
h2{
	margin-top: 17px;
	// color: #FD5252;
	font-size: 29px;
	font-weight: bold;	
	text-align: center;
	letter-spacing: 1px;
	font-family: @Roboto-family;

}
.abs{
	max-width: 750px;
	margin: 0 auto;
	font-family: @Lato-family;
	font-size: 13px;
	color: #232323;
	margin-top: 16px;
	margin-bottom: 35px;
	line-height: 21px;
	text-align: center;
	letter-spacing: 1px;

}
.bged{
	background-color:#EDEDED; 
}
.bggr{
	background-color:#27AAA3;
}
.bgwh{
	background-color: #fff;
}

.slide_slogan{
	width: 632px;
	position: absolute;
	z-index: 997;
	bottom: 30%;
	/*right: 150px;*/
	li{
		width: 100%;

		/*h1{font-family: @Roboto-family; font-size: 47px; font-weight: bold; color: #fff; text-align: left;  border: 0; padding-bottom: 0;}*/
		.slogan_title{font-family: @Roboto-family; font-size: 47px; font-weight: bold; color: #fff; text-align: left;  border: 0; padding-bottom: 0;}
		
		.fontfff{color: #fff !important;}
		h2{font-family: @Roboto-family; font-size: 38px; font-weight: bold; color: #FD5252; margin-top: 18px; text-align: left; border: 0;}
		.sq{padding: 16px; background-color:#FD5252; margin-top: 18px; }
		.sq p{font-family: @Lato-family; font-size: 16px; line-height: 22px; color: #fff;}
		.sq .learnmore{display: block; margin-top: 11px;}
		.sq2{margin-top: 20px;}
	}

}/*slogan*/
/*@media screen and (min-width: 400px) {
	.slide_slogan{width: 100% ;bottom: 35%;	right: 0px;}
	.slide_slogan .slogan{ width: 260px !important; margin: 0 auto !important; position: static !important; }
	.slide_slogan li h1{font-family: @Roboto-family; font-size: 24px; font-weight: bold; color: #fff; text-align: left;  border: 0; padding-bottom: 0;}
	.slide_slogan li h2{font-family: @Roboto-family; font-size: 16px; font-weight: bold; color: #FD5252; margin-top: 18px; text-align: left; border: 0;}
	.slide_slogan li .sq{padding: 16px; background-color:#FD5252; margin-top: 18px; }
	.slide_slogan li .sq p{font-family: @Lato-family; font-size: 13px; line-height: 22px; color: #fff;}
	.slide_slogan li .sq .learnmore{display: block; margin-top: 11px;}

	
}*/

@media screen and (max-width: 600px) {
	.slide_slogan{width: 250px ;bottom: 35%;	right: 0px;}
	.slide_slogan .slogan{ width: 260px !important; margin: 0 auto !important; position: static !important; }
	/*.slide_slogan li h1{font-family: @Roboto-family; font-size: 24px; font-weight: bold; color: #fff; text-align: left;  border: 0; padding-bottom: 0;}*/
	.slide_slogan li.slogan .slogan_title{font-family: @Roboto-family; font-size: 24px; font-weight: bold; color: #ffffff; text-align: left;  border: 0; padding-bottom: 0;}
	
	.slide_slogan li.slogan h2{font-family: @Roboto-family; font-size: 18px; font-weight: bold; color: #FD5252; margin-top: 18px; text-align: left; border: 0;}
	.slide_slogan li.slogan .sq{padding: 16px; background-color:#FD5252; margin-top: 18px; }
	.slide_slogan li.slogan .sq p{font-family: @Lato-family; font-size: 13px; line-height: 22px; color: #fff;}
	.slide_slogan li.slogan .sq .learnmore{display: block; margin-top: 11px;}
	#prevslide, #nextslide{height:29px; width:32px; }
	#prevslide{
		background-size:32px 29px;
	}
	#prevslide:hover{
		background-size:32px 29px;
	}
	#nextslide{
		background-size:32px 29px;
	}
	#nextslide:hover{
		background-size:32px 29px;
	}

	
}

@media (min-width: 601px) and (max-width: 1000px){
	.slide_slogan{width: 500px;}
  	.slide_slogan li .slogan_title{font-family: @Roboto-family; font-size: 30px; font-weight: bold; color: #fff; text-align: left;  border: 0; padding-bottom: 0;}
	.slide_slogan li h2{font-family: @Roboto-family; font-size: 24px; font-weight: bold; color: #FD5252; margin-top: 18px; text-align: left; border: 0;}
	.slide_slogan li .sq{padding: 16px; background-color:#FD5252; margin-top: 18px; }
	.slide_slogan li .sq p{font-family: @Lato-family; font-size: 14px; line-height: 22px; color: #fff;}
	.slide_slogan li .sq .learnmore{display: block; margin-top: 11px;}
}

@media(min-width: 1001px) and (max-width: 1600px) {
  	.slide_slogan{width: 500px;}
  	.slide_slogan li .slogan_title{font-family: @Roboto-family; font-size: 30px; font-weight: bold; color: #fff; text-align: left;  border: 0; padding-bottom: 0;}
	.slide_slogan li h2{font-family: @Roboto-family; font-size: 24px; font-weight: bold; color: #FD5252; margin-top: 18px; text-align: left; border: 0;}
	.slide_slogan li .sq{padding: 16px; background-color:#FD5252; margin-top: 18px; }
	.slide_slogan li .sq p{font-family: @Lato-family; font-size: 14px; line-height: 22px; color: #fff;}
	.slide_slogan li .sq .learnmore{display: block; margin-top: 11px;}
	
}

@media (min-width: 1600px) and (max-width: 3200px){
  	.slide_slogan{width: 632px;}
  	.slide_slogan li .slogan_title{font-family: @Roboto-family; font-size: 47px; font-weight: bold; color: #fff; text-align: left;  border: 0; padding-bottom: 0;}
	.slide_slogan li h2{font-family: @Roboto-family; font-size: 38px; font-weight: bold; color: #FD5252; margin-top: 18px; text-align: left; border: 0;}
	.slide_slogan li .sq{padding: 16px; background-color:#FD5252; margin-top: 18px; }
	.slide_slogan li .sq p{font-family: @Lato-family; font-size: 16px; line-height: 22px; color: #fff;}
	.slide_slogan li .sq .learnmore{display: block; margin-top: 11px;}
}


/*bootstrap===*/
.container {
  padding-right: 0px;
  padding-left:	0px;

  margin-right: auto;
  margin-left: auto;
}
// @media (min-width: 768px) {
//   .container {
//     width: 750px;
//   }
// }
// @media (min-width: 992px) {
//   .container {
//     width: 970px;
//   }
// }
// @media (min-width: 1200px) {
//   .container {
//     width: 1170px;
//   }
// }
.thumbnail{
	padding: 0;
	border-radius:0;
}
.thumbnail > img, .thumbnail a > img{
	margin: 0;
}
.thumbnail img{
	width: 100%;
}
.thumbnail .caption{
	padding-bottom: 26px;
	padding-top: 12px;
	h3{ font-family:@Roboto-family; font-weight: bold; font-size: 25px; color: #282828; text-align: center; margin-bottom: 4px; a{color: #282828;} }
	h4{ font-family:@Lato-family;  font-size: 20px; color: #FD5252; text-align: center; a{color: #FD5252;}}
	hr{border:0; height:1px;  width: 83%; margin: 0 auto ; padding-top:10px; border-top: 0px; border-bottom: 1px #000 solid;}
	h4.slogan{ font-family:@Roboto-family; margin-top: 17px;}
}

@media screen and (max-width: 767px) {
	.thumbnail{width: 320px; margin: 0 auto; margin-bottom: 25px; }
}

#i_product{
	// padding-bottom: 30px;
	.i_pd_h{ min-height:440px;}
	
	.i_pd_more{
		position: absolute;		
		bottom: 50px;
		left: 50%;
		margin-left: -104px;
		img{width: 208px;}
	}
}

.progress{
	border-radius: 0;
	box-shadow: none;
	width: 65%;
	margin: 0 auto;
	background-color: #444B53;
	position: relative;
	overflow:visible;
	margin-top:45px; 
	.fn{
		position: absolute;
		top: -30px;
		left: 0;
		font-family:@Roboto-family; font-weight: bold; font-size: 14px; 
	}
	.tip{
		position: absolute;
		top: -30px;
		right: -20px;
		width: 58px;
		height: 26px;
		background-image: url('images/tip1.png');
		font-family:@Roboto-family; font-weight: bold; font-size: 13px;
		color: #fff; 
		text-align: center;
	}

}
.progress-bar{
	background-color: #FD5252;
}
.i_feature{
	list-style-image: url('images/cc.png');
	margin-top: 20px;
	text-align: center;
	li{
		position: relative;
		margin-bottom: 3px;
		font-family:@Lato-family;  font-size: 15px;
		text-align: center;
		display: inline-block;
		word-wrap: break-word;
		img{position: absolute; left: -15px; top: 8px; width: 8px; height: 8px;}
	}
	.warp{
		display: block;
	}
}
.i_more{
	margin-top: 35px;
	text-align: center;
	img{width: 208px;}
}
.eyesign_row{
	height: auto;
	position: relative;
}
.eyesign_mobile{display: none;}
.eyesign{
	position: relative;
	height: 100%;
	img{max-width: 100%;}
	h3{font-family:@Roboto-family; font-weight: bold; font-size: 27px; color: #282828; letter-spacing: 1px;}
	h4{font-family:@Lato-family; font-size: 19px; color: #FD5252; letter-spacing: 0px; margin-top: 18px; line-height: 24px;}
	p{font-family:@Lato-family; font-size: 14px; color: #232323; letter-spacing: 0px; margin-top: 12px; line-height: 20px;}
	.i_more{margin-top: 30px; text-align: left;}
}
@media screen and (max-width: 767px) {
	.eyesign{width: 320px; margin: 0 auto; }
	.eyesignleft{overflow: hidden; width: 350px; /* margin-bottom: 90px;*/}
	.eyesignleft .mobile{width: 100%; }
	.eyesign_row .eyesignright{display: none;}
	/*.eyesign_row .eyesignright{position: absolute; top: 20px;}*/
	.eyesignright h3{color: #fff;}
	.eyesignleft{position: relative;}
	.eyesign_mobile{display:block; position: absolute; top: 30px; width: 80%; left: 25px; }
	.eyesign_mobile h3{color: #fff; }
	.eyesign_mobile h4{color: #4a2b12; font-size: 16px; }
	.eyesign_mobile .i_more{margin-top: 10px; }
	

}
@media screen and (max-width: 767px) {
	.desktop{display: none;}
	.mobile{display: '';}
}
@media screen and (min-width: 768px) {
   .desktop{display: '';}
	.mobile{display: none;}
}

@media screen and (max-width: 1024px) {
	.flash{display: none;}
	.noflash{display: '';}
}
@media screen and (min-width: 1025px) {
	.flash{display: '';}
    .noflash{display: none;}
	
}


.feature_outer{
	margin-top: 25px;
}
.feature_grid{
	background-color: #fff;
	border-bottom: 6px solid #1B776E;
	padding: 5% 10% 10% 10%;
	margin-bottom: 26px;
	min-height: 590px;
	.fpic{text-align: center; height: 50%;  padding-top: 8%; padding-bottom: 8%; img{max-width: 100%;}}
	p{font-family:@Lato-family; font-size: 14px; color: #282828; line-height: 22px;}
	h3{color: #49B25B; font-size: 27px; font-family:@Roboto-family; font-weight: bold; text-align: center;}
	h4{font-family:@Roboto-family; font-weight: bold; font-size: 19px; color: #353535; margin-top: 24px; display:inline-block; position: relative; }
	.feature-arrow{position: absolute; right: -30px; top:-1px;}
}
@media screen and (max-width: 767px) {
	.feature_grid{width: 320px; margin: 0 auto; margin-bottom: 25px; }
}
.more_f{ width: 272px; margin: 0 auto; margin-top: 30px;}


#i_customers{
	padding-top: 20px;
}
.col-customers{
	/*padding-left: 0;
	padding-right: 0;*/
}
.customers-grid{
	overflow: hidden;
}


.portfolio-container{
	font-size:0;
}
.portfolio-item {
	width:25%;
	position: relative;
	z-index:8;
	display:inline-block;
	overflow: hidden;
	margin-bottom:-10px;
	cursor:url(images/crosshair.png) 40 40, crosshair;
}
.portfolio-item .portfolio-image {
	position: relative;
	display: block;
	overflow: hidden;
}
.portfolio-item .portfolio-image img {
	width: 100%;
	height: auto;
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	transition: all 0.2s linear;
}
.portfolio-item:hover .project-overlay {
	opacity:1;
	background-color: rgba(39, 170, 163, 0.8);
	-webkit-transition:all 0.4s ease 0s;
	-moz-transition:all 0.4s ease 0s;
	-ms-transition:all 0.4s ease 0s;
	-o-transition:all 0.4s ease 0s;
	transition:all 0.4s ease 0s;
}
.project-overlay {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	opacity:1;
	z-index:9;

	-webkit-transition:all 0.3s ease 0s;
	-moz-transition:all 0.3s ease 0s;
	-o-transition:all 0.3s ease 0s;
	transition:all 0.3s ease 0s;
}
.project-info {
	position:relative;
	width:100%;
	height:146px;
	padding:30px 0 0 0;
	text-align:center;
	background:#EDEDED;
}
.project-info h4{
	font-family:@Roboto-family; font-weight: bold; font-size: 17px; color: #282828; 
	margin-bottom: 10px;

}

.project-categories {
	display:block;
	font-family:@Lato-family;  font-size: 14px; color: #444444;
}
.contentWrapper{
	position:relative;
	overflow:hidden;
	width:100%;
}
#projects{
	position:relative;
	clear:both;
	float:left;
	list-style-type:none;
	margin:0;
}
.portfolio-item-iContent{
	display:none;
}
.portfolio-item-wrap {
    background: #fafafa;
    width: 100%;
    display: none;
	position:relative;
	padding:90px 0 50px;
	font-size:14px;
}
.portfolio-item-arrow{
	position:absolute;
	top:-16px;
	color:#ffffff;
	font-size:44px;
}
.portfolio-item-close{
	position:absolute;
	width:24px;
	height:24px;
	font-size:24px;
	color:#cccccc;
	left:50%;
	top:30px;
	margin:0 0 0 -12px;
	opacity:.5;
	cursor:pointer;
}
.portfolio-item-close:hover{
	opacity:.7
}
.portfolio-item-prev, .portfolio-item-next{
	position:absolute;
	z-index:999;
	width:40px;
	line-height:80px;
	height:80px;
	color:#999999;
	font-size:30px;
	left:0;
	top:50%;
	margin-top:-40px;
	text-align:center;
	opacity:.5;
	background:#fff;
	cursor:pointer;
}
.portfolio-item-next{
	right:0;
	left:auto;
}
.portfolio-item-prev:hover, .portfolio-item-next:hover{
	opacity:.9
}
.project-details ul{
	margin:0;
	list-style-type:none;
	margin-bottom:20px;
}
.project-details li{
	border-bottom:1px solid #eaeaea;
	padding:10px 0;
}
.project-details li:last-child{
	border-bottom:0;
}
@media only screen and (max-width: 767px) {

	.portfolio-item{
		width:50%;
	}
}
@media only screen and (max-width: 480px) {
	.portfolio-item{
		width:100%;
	}
}
#i_blog{
	margin-top: 60px;
}
.blog_outer{
	margin-top: 75px;
}

.blog_grid{
	.bpic{
		width: 50%;
		float: left;
		margin-right: 5%;
		img{width: 100%; height: auto;}

	}
	.info{
		float: left;
		width: 45%;
		h3{font-family:@Roboto-family; font-weight: bold; font-size: 27px; color: #282828; }
		.date{font-family: 'Georgia',serif; font-size: 14px; color: #848484; margin-top: 12px;}
		p{font-family:@Lato-family;  font-size: 13px; color: #545454; margin-top: 20px; line-height: 21px;}
	}

}
@media only screen and (max-width: 767px) {
	.blog_grid{
		width: 320px;
		margin: 0 auto;
	}
	.blog_grid .bpic{
		margin-right: 0;
		width: 100%;
	}
	.blog_grid .info{
		width: 100%;
	}
}


.blog_grid2{
	padding-bottom: 30px;
	.info{
		float: left;
		width: 100%;	
	}

}

.about_outer{
	margin-top: 39px;
}
#i_about{
	margin-top: 20px;
	margin-bottom: 100px;
}
.about_grid{
	.bpic{
		width: 100%;		
		img{max-width: 100%; height: auto;}

	}
	.plogo{margin-top: 30px;}
	.info{
		
		h3{font-family:@Roboto-family; font-weight: bold; font-size: 26px; color: #FD5252; margin-top: 40px; }
		.date{font-family: 'Georgia',serif; font-size: 14px; color: #848484; margin-top: 12px;}
		p{font-family:@Lato-family;  font-size: 13px; color: #545454; margin-top: 20px; line-height: 21px;}
	}
}
@media only screen and (max-width: 767px) {
	.about_grid2{
		width: 320px;
		margin: 0 auto;
	}
	
}

.e404{
	padding-top: 20px;
	
	p{font-family:@Lato-family;  font-size: 14px; line-height: 22px;}
}

a.btn-spec {
	background-color: #FD5252;
	color: #fff;
	text-decoration: none;
	margin-right: 20px;

	&:focus,
	&:active,
	&:hover{
		color: #fff;
		opacity: .8;
		outline: none;
	}
}