@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);

.name{
	text-transform:uppercase;
	color:#cac8c8;
	position:fixed;
	top:650px;
	right:-60px;
	transform: rotate(270deg);
	font-size:12px;
	z-index:1000;
	font-weight:300;
	font-family: 'Noto Sans TC', sans-serif;
}

.number{
	color:#ffffff;
	position:absolute;
	top:1000px;
	right:-60px;
	transform: rotate(270deg);
	font-size:300px;
	z-index:10;
	font-weight:400;
	font-family: 'Noto Sans TC', sans-serif;
}

#case{
	position: relative;
	width:100%;
	text-align:left;
}

#case p, #case a{
	text-align:left; !important
}

#case .bg{
	position:absolute;
	left:10%;
	top:0;
	background-color:#eff5f8;
	height:335px;
	width:200%;
}

#case .head{
	font-weight:300;
	font-size:40px;
	line-height:50px;
	color:#000000;
	font-family: 'Noto Sans TC', sans-serif;
	text-align:left;
	text-transform:uppercase;
}

#case .more{
	color:#1ea2ef;
	text-transform:uppercase;
	font-size:12px;
	font-weight:700;
	width:100%;
	display:block;
	letter-spacing:2px;
	position:relative;
	margin-top:50px;
}


#case .more .connect{
	width:40px;
	height:4px;
	background:rgba(30, 162, 239, .5);
	left:100px;
	top:10px;
	position:absolute;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
	}

#case .more:hover > .connect{
	width:90px;
	}


#case .more .connect::before{
	content:"";
	position: absolute;
    top: 0;
    left: 0;
	width:4px;
	height:4px;
	background:rgba(30, 162, 239, 1.0);
	}
	
#case .more .connect::after{
	content:"";
	position: absolute;
    top: 0;
    right: 0;
	width:4px;
	height:4px;
	background:rgba(30, 162, 239, 1.0);
	}

.caseGroup .cover{
	width:100%;
	height:0;
	padding-top:100%;
	background-size:100%;
	background-position:left;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}

.caseGroup:hover > .cover{
	background-size:120%;
}

.btn_case{
	height:80px;
	padding:0 15px;
	line-height:80px;
	background-color:#1f9ce5;
	font-weight:300;
	color:#FFFFFF;
	width:100%;
	position:relative;
}

.caseGroup .connect{
	width:40px;
	height:4px;
	background:rgba(255, 255, 255, .5);
	right:15px;
	top:38px;
	position:absolute;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
	}

.caseGroup:hover > .btn_case > .connect{
	width:90px;
	}

.caseGroup .connect::before{
	content:"";
	position: absolute;
    top: 0;
    left: 0;
	width:4px;
	height:4px;
	background:rgba(255, 255, 255, 1.0);
	}
	
.caseGroup .connect::after{
	content:"";
	position: absolute;
    top: 0;
    right: 0;
	width:4px;
	height:4px;
	background:rgba(255, 255, 255, 1.0);
	}

.kv{
	width:100%;
	min-height:800px;
	background-image:url(../images/banner01.jpg);
	background-size:60%;
	background-repeat:no-repeat;
	background-position:top right;
	background-color:#eff5f8;
	position:absolute;
	top:0;
	left:0;
	z-index:-100;
}

#about{
	padding:122px 0;
	
}

#about .head{
	font-weight:300;
	font-size:64px;
	line-height:70px;
	text-transform:uppercase;
	margin-bottom:20px;
}

#about .take{
	max-width:270px;
}

.action{
	position:relative;
	width:100%;
	height:200px;
	margin-top:0px;
}

.action .bg{
	position:absolute;
	top:0;
	left:0;
	width:50%;
	height:203px;
	background-color:#495f6c;
}

.action .icon{
	background-color:#495f6c;
	padding:75px 0;
}

.action .icon .set{
	text-align:center;
	border-right:1px solid #6c7e88;
	text-transform:uppercase;
	color:#ffffff;
	font-size: 12px;
	font-weight:700;
}

.infoPhoto{
	font-weight:800;
	font-size:24px;
	color:#1ea2ef;
	text-align:right;
	padding:40px
}

.infoText{
	padding:80px 40px;
	text-align:left;
	color:#495f6c;
}

.infoText span{
	font-weight:300;
	font-size:24px;
}

.infoPhoto img{
	width:100%;
	margin-top:200px;
}

.aboutContent{
	position:relative;
	background-color:#FFFFFF;
	width:100%;
	overflow:hidden;
}

.aboutContent .bgColor{
	width:100%;
	height:300px;
	left:25%;
	bottom:40px;
	background-color:#eff5f8;
	position:absolute;
}

#fleet{
	position:relative;
	margin-top:60px;
	overflow:hidden;
}

.fleetSlider{
	width:60%;
	float:right;
}

.fleetBox{
	width:60%;
	height:450px;
	position:absolute;
	background-color:#FFFFFF;
	top:50px;
	padding:4%;
	z-index:-10;
}

.fleetBox .head{
	font-weight:800;
	font-size:24px;
	line-height:33px;
	color:#1ea2ef;
}

.fleetBox .head .high{
	font-weight:300;
	font-size:64px;
	line-height:70px;
	float:left;
	margin-right:15px;
	color:#495f6c;
}

.fleetBox .car{
	display:block;
	clear:both;
	max-width:50%;
	margin-top:30px;
}

#slider #case_details{
	margin-bottom:80px;
}


#slider #fleet, #slider #case_details{
	height:auto!important;
	min-height:500px;
}

.fleetCar{
	z-index:9999;
}

.fleetCar img{
	margin-top:-50px;
	width:21%;
}

#case .high{
	font-weight:300;
	font-size:24px;
	line-height:30px;
	padding-bottom:60px;
}

#case_details{
	padding:50px 0;
}

.detailSlider{
	width:70%;
	float:left;
}

.caseBox{
	width:35%;
	height:50px;
	position:absolute;
	background-color:#FFFFFF;
	top:120px;
	right:0px;
	padding:4%;
	z-index:10;
	font-size:32px;
	color:#1ea2ef;
	font-weight:300;
}

.caseDetails{
	width:30%;
	float:right;
	padding:180px 30px 20px 60px;
	font-weight:300;
}

.caseDetails .location{
	margin-bottom:50px;
}

.caseDetails .date, .caseDetails .location span{
	font-weight:800;
	}

.contactInfo img{
	width:64px;
}

.contactInfo{
	background-color:#ffffff;
	font-size:14px;
	line-height:22px!important;
	padding-top:30px;
	border-right:#eff5f8 1px solid;	
	}

.contactInfo div{
	width:100%;
	position:relative;
	height:100%;
}

.contactInfo div .base{
	background-image: linear-gradient(to right, #1896e1, #485ebf);
	height:6px;
	width:100%;
	position:absolute;
	bottom:0;
}

.toTop .bar{
	border-top:#d2d2d2 1px solid;
	border-bottom:#d2d2d2 1px solid;
	height:40px;
	position:relative;
}

.fleetContent{
	margin-top:-50px;
	background-color:#eff5f8 !important; 
	text-align:right;
	overflow:hidden;
}

.fleetContent span{
	font-weight: 300;
    font-size: 24px;
}

.fleetContent .pic{
	width:50%;
	margin:50px auto;
	position:relative;
	box-shadow: 50px 50px 0px white;
}

.fleetContent .pic div{
	z-index:505;
}

.fleetContent .pic .bgColor{
	width:100%;
	height:100%;
	background-color:#FFFFFF;
	position:absolute;
	top:50px;
	left:50px;
	z-index:10;
}

.googleMap{
	height:415px;
	border:1px #999999 solid;
}

.topButton{
	color:#1ea2ef;
	font-size:14px;
	text-transform:uppercase;
	font-weight:700;
	line-height:30px;
	text-align:center;
	position:absolute;
	width:100%;
	bottom:60px;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}

.toTop{
	position:relative;
	padding-top:120px;
	cursor:pointer;
	background-color:#FFFFFF;
}

.toTop .connect{
	width:4px;
	height:40px;
	position:absolute;
	left:50%;
	margin-left:-2px;
	bottom:20px;
	background:rgba(30, 162, 239, .5);
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
	}

.toTop:hover > .topButton{
	bottom:100px;
	}

.toTop:hover > .connect{
	height:80px;
	}

.toTop .connect::before{
	content:"";
	position: absolute;
    top: 0;
    left: 0;
	width:4px;
	height:4px;
	background:rgba(30, 162, 239, 1.0);
	}
	
.toTop .connect::after{
	content:"";
	position: absolute;
    bottom: 0;
    right: 0;
	width:4px;
	height:4px;
	background:rgba(30, 162, 239, 1.0);
	}

.toTop{
	width:100%;
}


footer{
	background-color:#ffffff;
	color:#495f6c;
}

.footerBreak{
	width:100px;
	height:80px;
	background-color:#eff5f8;
	margin:30px auto 0;
	border-left:60px solid #ffffff
}


.footerMenu{
	color::#161d25;
	line-height:2.0;
	font-size:13px;
	width:100%;
	padding:15px;
	margin:0 auto;
	background-color:#eff5f8;
}

.footerMenu .menuRight{
	text-align:right;
}

.footerMenu .menuRight a{
	color:#161d25;
	margin-left:30px;
}

.footerMenu .menuRight span{
	float:left;
}
.stretched #gotoTop {  }

#gotoTop:hover { color: #000000; }

@media (max-width: 1199px){
.kv{
	background-size:70%;
}
}

@media (max-width: 991px){
.kv{
	background-size:100%;
	background-position:top left;
}

#about{
	padding:60px 0;
}

#about .head{
	font-size:36px;
	line-height:42px;
}

#about .head, #about .take{
	color:#ffffff;
}

.action .icon .set{
	border-right:none;
	padding:0;
}

.action .icon{
	background-color:#495f6c;
	padding:35px 0;
}

.fleetSlider{
	width:100%;
	float:none;
}

.fleetBox{
	width:100%;
	height:auto;
	position:relative;
	top:auto;
	clear:both;
}

.fleetBox .car{
	max-width:100%;
}



.fleetCar img{
	width:70%;
	margin-top:30px;
}

.fleetContent{
	margin:30px;
}

.fleetContent .pic{
	width:80%;}

.number{
	display:none;
}

.detailSlider{
	width:100%;
	float:none;
}

.caseBox{
	width:100%;
	height:50px;
	position:relative;
	background-color:#eff5f8;
	top:0px;
	right:0px;
	padding:4%;
	z-index:10;
	font-size:32px;
	color:#1ea2ef;
	font-weight:300;
}

.caseDetails{
	width:100%;
	float:none;
	padding:4%;
	font-weight:300;
}

.caseDetails .location{
	margin-bottom:50px;
}

.caseDetails .date, .caseDetails .location span{
	font-weight:800;
	}

#case_details{
	padding-top:10px;
}

}


@media (max-width: 767px) {
.name{
	top:450px;
	right:-50px;
	font-size:9px;
}

.kv{
	background-size:200%;
}

.action{
	margin:0;
}

.action .bg{
	display:none;
}

.infoPhoto img{
	width:100%;
	margin-top:40px;
}

.infoPhoto{
	padding:0px;
}

.infoText{
	padding:20px 0px 0px 0px;
}

	.footerBreak{
	display:none;
	}
	
	.footerMenu .menuRight{
	text-align:left;
	}
	
	.footerMenu .menuRight a{
	margin:0;
	}
	
	.footerMenu .menuRight span{
	float:none;
	display:block;
	}
	
#fleet{
	position:relative;
	margin-top:20px;
}

}

@media (max-width: 479px){
}