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

@import url("reset.css");

body{
	font-family:"微軟正黑體", Arial, Helvetica, sans-serif;
	font-size:16px;
	-webkit-text-size-adjust:none;
}

/*remove blur*/
.logo{
	image-rendering:-webkit-optimize-contrast;
}

article{
	padding-top:55px;
}

.out{
	width:1100px;
	margin:0 auto;
	padding:0 20px;
	position:relative;
}

.out_page{
	width:1000px;
	margin:0 auto;
	padding:0 20px 100px;
	position:relative;
}

footer, article, header{
	min-width:1140px;
}

article{
	overflow:hidden;
}

/*BANNER-----------------------------------------*/
.home_banner, .home_banner .owl-carousel{
	position:relative;
}

.home_banner p{
	background:rgba(255,255,255,0.8);
	position:absolute;
	bottom:30px;
	left:50%;
	z-index:10;
	margin-left:70px;
	font-size:22px;
	line-height:1.5em;
	width:410px;
	padding:20px 30px;
	pointer-events:none;
}

.home_banner p:after{
	content:"";
	position:absolute;
	left:15px;
	top:15px;
	border-style:solid;
	border-width:0 11px 11px 0;
	border-color:transparent #730210 transparent transparent;
}

.home_banner li{
	width:100%;
	height:445px;
	position:relative;
	background-repeat:no-repeat;
	background-position:top center;
}

.home_banner .owl-theme .owl-dots{
	position:absolute;
	left:0;
	bottom:-30px;
	width:100%;
}

.home_banner .owl-theme .owl-dots .owl-dot span{
	width:12px;
	height:12px;
 	background:#797979;
}

.home_banner .owl-theme .owl-dots .owl-dot.active span,
.home_banner .owl-theme .owl-dots .owl-dot:hover span{
	 background:#313131;
}

/*HOME_FEATURE-----------------------------------------*/
.home_feature{
	height:510px;
}

.home_feature .feature{
	background:#F3F3F3;
	background-size:auto;
	padding-top:90px;
	height:420px;
	position:relative;
}

/*HOME_PROJECT-----------------------------------------*/
.home_project{
	height:460px;
	background:url(../images/home_project.jpg) top center no-repeat;
	background-size:auto 110%;
	text-align:center;
}

.home_project h5{
	font-size:26px;
	padding:80px 0;
	position:relative;
}

.home_project h5:before{
	content:"";
	position:absolute;
	top:50px;
	left:50%;
	width:30px;
	height:3px;
	background:#A50319;
	margin-left:-15px;
}

.home_project li{
	text-align:left;
	padding:0 20px 20px 0;
}

.home_project li a{
	display:block;
}

.home_project a{
	transition:0.2s;
}


.home_project .img_out{
	display:inline-block;
	background:#FFFFFF;
	padding:7px;
	margin-right:15px;
	box-shadow:4px 4px 4px rgba(0,0,0,0.3);
	float:left;
	transition:0.2s;
}

.home_project .owl-carousel .owl-item img{
	width:130px;
	height:98px;
	transform-style:flat;/*chrome bug*/
}

.home_project h6{
	color:#000000;
	margin:10px 0;
	line-height:1.5em;
	height:1.5em;
	overflow:hidden;
	transition:0.2s;
}

.home_project a:hover h6{
	color:#730210;
}

.home_project p{
	font-size:14px;
	color:#666666;
	line-height:1.5em;
	height:4.5em;
	overflow:hidden;
	transition:0.2s;
}

.home_project a:hover p{
	color:#333;
}
.home_project a:hover .img_out{
	opacity:0.8;
}

.home_project .owl-theme .owl-nav{
	margin-top:30px;
}

.home_project .owl-theme .owl-nav [class*="owl-"] {
    padding:0;
    margin:0;
    text-indent:-100px;
    overflow:hidden;
}

.home_project .owl-theme .owl-nav .owl-prev{
    height:0;
    width:0;
    background:none;
    position:absolute;
	bottom:4px;
	border:solid #222;
	border-width:0px 2px 2px 0px;
	padding:7px;
	display:inline-block;
	-webkit-transform:rotate(135deg);
	transform:rotate(135deg);
	border-radius:0;
}

.home_project .owl-theme .owl-nav .owl-prev:hover,
.home_project .owl-theme .owl-nav .owl-next:hover{
	background:none;
	border:solid #A50319;
	border-width:0px 2px 2px 0px;
}

.home_project .owl-theme .owl-nav .owl-next{
    height:0;
    width:0;
    background:none;
    position:absolute;
	border:solid #222;
	border-width:0px 2px 2px 0px;
	padding:7px;
	display:inline-block;
	-webkit-transform:rotate(-45deg);
	transform:rotate(-45deg);
	border-radius:0;
}

/*GEOTECH-----------------------------------------*/
.page_banner.geotech h1{
	text-shadow:0 0 8px #FFFFFF;
}

/*PROJECT-----------------------------------------*/
.project h2{
	color:#730210;
	font-size:25px;
}

.project .info{
	font-weight:bold;
	line-height:1.5em;
	color:#333333;
	padding:15px 0 40px;
	position:relative;
}

.project .list{
	float:left;
	width:32.4%;
}

.project .list:nth-child(3n-1){
	margin:0 1.4%;
}

.project .list a .image{
	position:relative;
	overflow:hidden;
	border-radius:5px;
}

.project .list a .image img{
	width:100%;
	height:243px;
	border-radius:5px;
}

.project .list a .image:before{
	content:"";
	position:absolute;
	top:100%;
	left:0;
	width:100%;
	height:100%;
	background:rgba(114,27,38,0.9) url(../images/icon_more.png) center top 45% no-repeat;
	text-align:center;
	transition:0.3s 0.2s;
}

.project .list a:hover .image:before{
	position:absolute;
	top:0;
	left:0;
	transition:0.2s;
}

.project .list a .image:after{
	content:"Read more";
	position:absolute;
	top:100%;
	left:0;
	width:100%;
	height:1em;
	text-align:center;
	color:#FFFFFF;
	transition:0.1s 0.2s;
}

.project .list a:hover .image:after{
	position:absolute;
	top:55%;
	left:0;
	width:100%;
	height:1em;
	transition:0.3s 0.2s;
}

.project .list a .title{
	color:#730210;
	font-weight:bold;
	font-size:18px;
	line-height:1.5em;
	height:3em;
	overflow:hidden;
	margin:1em 0;
}

/*ABOUT-----------------------------------------*/
.page_banner.about h1{
	color:#FFFFFF;
}

.page_banner.about .info:before{
	content:"";
	position:absolute;
	top:-50px;
	right:0;
	width:1px;
	height:28px;
	background:#FFFFFF;
}

.page_banner.about .info:after{
	content:"";
	position:absolute;
	bottom:-50px;
	right:0;
	width:1px;
	height:28px;
	background:#FFFFFF;
}

.page_info.about .left_menu .menu a{
	padding:20px 10px 15px;
}

.page_info.about .right_info .top .info{
	padding:15px 0 0;
}

.page_info.about .right_info .top .info:after{
	display:none;
}

/*CONTACT*/
.page_info .right_info.contact h2{
	color:#730210;
	font-size:25px;
}

.page_info .right_info.contact ul{
	margin:50px 0 20px;
}

.page_info .right_info.contact li{
	height:50px;
	line-height:50px;
	font-weight:bold;
	color:#333333;
	position:relative;
}

.page_info .right_info.contact li:after{
	content:"";
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	height:1px;
	background:#FFFFFF;
	border-top:#D4D4D4 1px solid;
}

.page_info .right_info.contact li:last-child:after{
	display:none;
}

.page_info .right_info.contact li img{
	vertical-align:middle;
}

.page_info .right_info.contact li span{
	display:inline-block;
	padding-left:10px;
	width:3.5em;
}

.page_info .right_info.contact .map{
	background:#FFFFFF;
	padding:5px;
	box-shadow:2px 2px 5px rgba(0,0,0,0.3);
}

/*COMMON--------------------------------------------------------------------*/

/*HEADER-----------------------------------------*/
header{
	background:#383635;
	box-shadow:0px 2px 2px rgba(0,0,0,0.1);
	position:fixed;
	width:100%;
	z-index:1000;
}

header nav{
	text-align:right;
}

header .logo{
	display:block;
	width:168px;
	height:126px;
	background:#FFFFFF url(../images/header_logo.png) center center no-repeat;
	background-size:116px auto;
	position:absolute;
	top:0;
	left:20px;
	box-shadow:0 0 5px rgba(0,0,0,0.3);
	transition:0.2s;
}

header .logo.active{
	background-size:70% auto;
	width:151px;
	height:100px;
}

header ul,
header ul li{
	display:inline-block;
	vertical-align:middle;
}

header ul li a{
	display:block;
	height:55px;
	line-height:55px;
	padding:0 15px;
	margin-right:10px;
	color:#FFFFFF;
	position:relative;
}

header ul li a:hover{
	background:#721B26;
}

header .login{
	display:inline-block;
	vertical-align:middle;
	font-size:13px;
	color:rgba(255,255,255,0.7);
	border:rgba(255,255,255,0.3) 1px solid;
	padding:8px 16px;
	border-radius:20px;
	margin-left:10px;
	transition:0.2s;
}

header .login:hover{
	color:rgba(255,255,255,1);
	border:rgba(255,255,255,1) 1px solid;
}

/*PAGE BANNER-----------------------------------------*/
.page_banner{
	background-position:bottom center;
	background-repeat:no-repeat;
	background-size:auto 103%;
	height:296px;
	position:relative;
}

.page_banner .info{
	text-align:right;
	position:absolute;
	right:50%;
	top:50%;
	transform:translateY(-50%);
	margin-right:-520px;
}

.page_banner .info:before{
	content:"";
	position:absolute;
	top:-50px;
	right:0;
	width:1px;
	height:28px;
	background:#721B26;
}

.page_banner .info:after{
	content:"";
	position:absolute;
	bottom:-50px;
	right:0;
	width:1px;
	height:28px;
	background:#721B26;
}

.page_banner h1{
	font-size:45px;
	animation:fadeInLeft 1.5s 0.5s both;
}

.page_banner p{
	font-size:25px;
	padding-top:0.7em;
	animation:fadeInLeft 1.5s 0.7s both;
}

@keyframes fadeInLeft{
0%{
opacity:0;
-webkit-transform:translate(-50%, 0);
transform:translate(-50%, 0)
}
to{
opacity:1;
-webkit-transform:none;
transform:none
}
}

/*AREA-----------------------------------------*/
.area{
	padding:20px 0 35px 25px;
	background:url(../images/area_icon.png) top 20px left no-repeat;
	color:#666666;
}

.area a{
	color:#666666;
}

.area a:last-child{
	color:#333333;
}

/*PAGE INFO-----------------------------------------*/
.page_info{
	background:#F3F3F3;
}

.page_info .left_menu{
	width:250px;
	float:left;
}

.page_info .left_menu h1{
	background:#333333;
	color:#FFFFFF;
	padding:12px;
	font-size:18px;
}

.page_info .left_menu .menu a{
	display:block;
	font-weight:bold;
	font-size:18px;
	color:#333333;
	padding:30px 10px 15px;
	position:relative;
}

.page_info .left_menu .menu a:hover{
	color:#730210;
}

.page_info .left_menu .menu a:after{
	content:"";
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	height:1px;
	background:#FFFFFF;
	border-top:#AA1126 1px solid;
}

.page_info .left_menu .sub a{
	display:block;
	color:#666666;
	padding:7px 0 10px 0.7em;
	line-height:1.3em;
	text-indent:-0.7em;
	word-break:break-all;
	position:relative;
}

.page_info .left_menu .sub a:before{
	content:"• ";
}

.page_info .left_menu .sub a:after{
	content:"";
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	height:1px;
	background:#FFFFFF;
	border-top:#D4D4D4 1px solid;
}

.page_info .left_menu .sub li:last-child a:after{
	display:none;
}

.page_info .left_menu .sub a:hover{
	color:#730210;
}

.page_info .right_info{
	width:700px;
	float:right;
}

.page_info .right_info .top{
	padding-bottom:20px;
}

.page_info .right_info .top h2{
	color:#730210;
	font-size:25px;
}

.page_info .right_info .top .info{
	font-weight:bold;
	line-height:1.5em;
	color:#333333;
	padding:15px 0 20px;
	position:relative;
}

.page_info .right_info .top .info:after{
	content:"";
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	height:1px;
	background:#FFFFFF;
	border-top:#999999 1px solid;
}

.page_info .right_info .bottom h3{
	color:#730210;
	font-size:20px;
	padding:60px 0 15px;
}

.page_info .right_info .bottom li .info{
	line-height:1.5em;
	color:#666666;
}

.page_info .right_info .bottom li:last-child .info{
	padding:15px 0 0;
}

.page_info .right_info img{
	max-width:100%;
	height:auto;
}

/*PAGETOP-----------------------------------------*/
body a.pagetop{
	display:block;
	width:55px;
	height:55px;
	border-radius:50%;
	z-index:500;
	background:#313131;
	opacity:0.8;
	position:relative;
	-webkit-transition:opacity 0.2s;
	transition:opacity 0.2s;
}

body a.pagetop:hover{
	opacity:1;
}

body a.pagetop:after{
	content:"";
	border:solid #FFFFFF;
	border-width:0px 2px 2px 0px;
	padding:7px;
	display:inline-block;
	position:absolute;
	top:55%;
	left:50%;
	-webkit-transform:rotate(-135deg) translate(-50%,-50%);
	transform:rotate(-135deg) translate(-50%,-50%);
	-webkit-transform-origin:left top;
	transform-origin:left top;
}

/*FOOTER and FEATURE-----------------------------------------*/
.footer_home .feature{
	display:none;
}

.feature{
	background:url(../images/feature.jpg) top center no-repeat;
	background-size:auto 110%;
	padding:90px 0 0;
	height:460px;
	position:relative;
}

.feature li{
	width:28%;
	float:left;
	text-align:center;
}

.feature li:nth-child(2){
	margin:0 8%;
}

.feature li a{
	display:block;
}

.feature .circle{
	width:125px;
	height:125px;
	background:#730210;
	display:inline-block;
	border-radius:50%;
	overflow:hidden;
	position:relative;
}

.feature .circle.two{
	background:#383635;
}

.feature .circle.one .all,
.feature .circle.two .all,
.feature .circle.three .all{
	position:absolute;
	top:0;
	left:0;
	transition:0.2s 0.6s;
}

.feature a:hover .circle.one .all,
.feature a:hover .circle.two .all,
.feature a:hover .circle.three .all{
	position:absolute;
	top:0;
	left:125px;
	transition:0.6s;
}


.feature .circle.one .a,
.feature .circle.two .a{
	position:absolute;
	top:125px;
	left:0;
	transition:0.3s 0.2s;
}

.feature .circle.three .a{
	position:absolute;
	top:-125px;
	left:0;
	transition:0.3s 0.2s;
}

.feature a:hover .circle.one .a,
.feature a:hover .circle.two .a,
.feature a:hover .circle.three .a{
	position:absolute;
	top:0;
	left:0;
}

.feature .circle.one .b{
	position:absolute;
	top:32px;
	left:-125px;
	transition:0.5s 0.2s;
}

.feature .circle.two .b{
	position:absolute;
	top:0;
	left:-125px;
	transition:0.5s 0.2s;
}

.feature .circle.three .b{
	position:absolute;
	top:125px;
	left:0;
	transition:0.5s 0.2s;
}

.feature a:hover .circle.two .b,
.feature a:hover .circle.three .b{
	position:absolute;
	top:0;
	left:0;
}

.feature a:hover .circle.one .b{
	position:absolute;
	top:32px;
	left:56px;
	animation:o1b 1s 0.7s;
}

@keyframes o1b{
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

.feature h6{
	color:#313131;
	font-size:26px;
	font-weight:normal;
	padding:30px 0 15px;
}

.feature p{
	color:#313131;
	line-height:1.8em;
	height:8em;
}

.feature .more{
	display:inline-block;
	width:95px;
	height:40px;
	background:#929292;
	line-height:40px;
	border-radius:20px;
	color:#FFFFFF;
	overflow:hidden;
	position:relative;
	transition:0.2s;
}

.feature li a:hover .more{
	background:#730210;
}

.feature .more span{
	width:95px;
	height:40px;
	display:block;
	transition:0.5s;
}

.feature .more .arrow{
	position:absolute;
	top:0;
	left:-95px;
}

.feature .more .arrow img{
	width:95px;
	height:40px;
}

.feature li a:hover .arrow{
	position:absolute;
	top:0;
	left:0;
}

.feature .more .name{
	position:absolute;
	top:0;
	left:0;
}

.feature li a:hover .name{
	position:absolute;
	top:0;
	left:95px;
}

.shadow{
	background:url(../images/shadow.png);
	width:799px;
	height:7px;
	position:absolute;
	bottom:0;
	left:50%;
	transform:translateX(-50%);
}

.footer{
	background:#383635;
	color:#FFFFFF;
	font-size:12px;
	padding:15px 0;
}