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

.mainArea{
	padding:0;}

/*關於我們*/
.aboutArea{
	background: url(../images/about_bg.png) top center no-repeat;
	background-size: cover;
	margin-top: -75px;
	position: relative;
	z-index: 100;
	padding:110px 0 305px 0;
	overflow:hidden;
	text-align:center;}

.aboutArea h2{
	margin-bottom:45px;
	font-family: 'Cinzel', serif;
	font-weight: normal;
	letter-spacing: 2px;
	font-size:40px;
	color:#1a213f;
	padding: 65px 0 35px 0;
	position: relative;
	background: url(../images/icon.png) top center no-repeat;}
.aboutArea h2:after{
	content: "";
	position: absolute;
	left: 50%;
	margin-left: -150px;
	bottom: 0;
	width: 300px;
	height: 1px;
	background: #b5b5b5;}
.aboutArea h2:before{
	content: "";
	position: absolute;
	left: 50%;
	bottom: -4px;
	width: 8px;
	height: 8px;
	margin-left: -4px;
	background: #b5b5b5;
	transform: rotate(45deg);
}

.aboutArea .Img{
	margin-bottom:15px;}

.aboutArea .Txt{
	font-family: 'Arimo', sans-serif;
	color:#1a213f;
	line-height:1.8;}

.aboutArea .btn{
	margin-top:50px;
	text-align:center;}

.aboutArea .btn a{
	display:inline-block;
	padding:17px 50px;
	color:#FFF;
	background: #0b288c;
	font-family: 'Cinzel', serif;
	font-size: 15px;
	position: relative;}
.aboutArea .btn a:after{
	content: "";
	position: absolute;
	left: -5px;
	top: -5px;
	width: 100%;
	height: 100%;
	border:5px solid rgba(11,40,140,0.1);}
.aboutArea .btn a:hover:after{
	border:5px solid rgba(11,40,140,1);
}
/*推薦商品/房型*/
.featureArea{
	background: url(../images/horse_bg.png) bottom center no-repeat;
	background-size: cover;
	margin-top: -75px;
	padding-bottom: 30px;
	position: relative;
	z-index: 3;}
.featureArea:before{
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 80px 380px 0 0;
	z-index: 2;
	border-color: #0059df transparent transparent transparent;}
.featureArea:after{
	content: "";
	position: absolute;
	left: 0;
	top:-40px;
	width: 100%;
	height: 117px;
	z-index: 1;
	background: url(../images/square.png) no-repeat;
	background-size: cover;}

.featureArea ul li:nth-child(2){
	display: none;
}
.featureArea ul li .Img{
	position:relative;
	overflow:hidden;}

.featureArea ul li .Img a{
	display:block;}

.featureArea ul li .Img img{
	display:block;
	width:100%;}

.featureArea ul li .Txt,
.adArea ul li .Txt{
	width: 300px;
	padding: 15px;
	box-sizing: border-box;
	padding:370px 45px 90px 45px;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fcd91d+0,005bd7+100&1+0,0+100 */
	background: -moz-linear-gradient(top, rgba(252,217,29,0.9) 0%, rgba(0,91,215,0.9) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(252,217,29,0.9) 0%,rgba(0,91,215,0.9) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(252,217,29,0.9) 0%,rgba(0,91,215,0.9) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcd91d', endColorstr='#00005bd7',GradientType=0 ); /* IE6-9 */}

.featureArea ul li .Txt h3 strong a,
.adArea ul li .Txt h3 strong a{
	position:relative;
	display:block;
	font-size:37px;
	color:#fff;
	font-family: 'Abhaya Libre', serif;
	font-weight: bold;
	font-style: italic;
	padding-bottom:10px;}
.featureArea ul li .Txt .btn,
.adArea ul li .Txt .btn{
	display: inline-block;
	margin-top: 17px;
}
.featureArea ul li .Txt .btn a,
.adArea ul li .Txt .btn a{
	display: block;
	font-family: 'Cinzel', serif;
	font-size: 15px;
	color: #fff;
	background: #0b288c;
	padding:17px 45px;
	position: relative;
}
.featureArea .btn a:after,
.adArea .btn a:after{
	content: "";
	position: absolute;
	left: -5px;
	top: -5px;
	width: 100%;
	height: 100%;
	border:5px solid rgba(11,40,140,0.1);}
.featureArea .btn a:hover:after,
.adArea .btn a:hover:after{
	border:5px solid rgba(11,40,140,1);
}
/*廣告跑馬燈*/
.adArea{
	background: url(../images/meal_bg.jpg) bottom center no-repeat;
	background-size: cover;
	margin-top: -75px;
	position: relative;}
.adArea:before{
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 80px 380px 0 0;
	z-index: 2;
	border-color: #fcd91d transparent transparent transparent;}
.adArea:after{
	content: "";
	position: absolute;
	left: 0;
	top:-39px;
	width: 100%;
	height: 117px;
	z-index: 1;
	background: url(../images/blue.png) no-repeat;
	background-size: cover;}
.adArea ul li .Txt{
	width: 300px;
	padding: 15px;
	box-sizing: border-box;
	padding:370px 45px 90px 45px;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fcd91d+0,005bd7+100&1+0,0+100 */
	background: -moz-linear-gradient(top, rgba(0,91,215,0.9) 0%, rgba(252,217,29,0.9) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(0,91,215,0.9) 0%,rgba(252,217,29,0.9) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(0,91,215,0.9) 0%,rgba(252,217,29,0.9) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00005bd7', endColorstr='#fcd91d',GradientType=0 ); /* IE6-9 */
	float: right;}
.adArea ul li:first-child{
	display: none;
}

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

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

@media (max-width: 768px){	
	.aboutArea{
		margin-top: -65px;
	}
}

@media (max-width: 640px){
	.featureArea{
		background-size: auto;}
}
@media (max-width: 400px){
	.adArea:before,
	.featureArea:before{
		border-width: 80px 200px 0 0;}
}
@media (max-width: 360px){
	.featureArea ul li .Txt,
	.adArea ul li .Txt{
		width: 100%;
	}
}