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

/*列表頁*/
ul.spotList{
	margin:0 -9px;}

ul.spotList li{
	padding:0 9px;
	margin-bottom:60px;}

ul.spotList li .item:hover{
	background: url(../images/room_txt.jpg);
}

ul.spotList li .Img{
	position:relative;
	background:#000;
	overflow:hidden;}

ul.spotList li .Img img{
	display:block;
	width:100%;
	transition: all 0.6s ease;}
ul.spotList li .item:hover .Img img{
	transform: scale(1.05);
}
ul.spotList li .Txt{
	position: relative;
	padding:30px 18px;
	border-top: 1px solid #d1c9aa;}

ul.spotList li .Txt h3{
	font-size:23px;
	letter-spacing: 2px;
	font-weight:normal;
	color:#212324;
	display:block;
	width:100%;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;}

ul.spotList li .Txt p{
	padding-top:20px;
	color:#8d8d8d;
	line-height:1.8;
	height:50px;}

ul.spotList li .Txt b{/*距離計算*/
	margin-top:20px;
	display:block;
	font-size:12px;
	font-weight:normal;
	color:#b4a365;}

/****內頁****/
.contentBox{}
.mainArea .contentBox h3.articleTitle{
	margin-bottom: 30px;
	background: url(../images/spot.png) left bottom repeat-x;
}
.contentBox .leftBox{
	padding: 0 55px 0 0;
	float:left;
	width:70%;}

.contentBox .leftBox .title{
	margin-bottom:45px;}

.contentBox .leftBox .title b{
	display:block;
	font-size:12px;
	font-weight:normal;
	color:#b4a365;
	padding:0;}
.contentBox .leftBox .title b i{
	color: #212324;
	font-size: 14px;
	margin-right: 10px;
}	
.contentBox .leftBox .shareBox{
	float:right;}

.contentBox .leftBox .shareBox a{
	cursor:pointer;
	display:block;
	vertical-align:middle;
	padding:3px 5px;
	font-size:12px;
	color:#FFF;
	border-radius:3px;
	
	-webkit-transition:none;
	-moz-transition:none;
	-o-transition:none;
	transition:none;}

.contentBox .leftBox .Img{
	margin-bottom:20px;}

.contentBox .leftBox .Img img{
	width:100%;}

.contentBox .rightBox{
	padding:60px 0 0 0;
	float:right;
	width:30%;}

.contentBox .rightBox .link{
	margin-bottom:15px;}

.contentBox .rightBox .link a{
	display:inline-block;
	padding:7px 15px;
	
	font-size:16px;
	color:#FFF;
	box-shadow:2px 2px 2px #CCC;
	border-radius:3px;
	
	-webkit-transition:none;
	-moz-transition:none;
	-o-transition:none;
	transition:none;}

ul.icon{
	margin:10px 0;}

ul.icon li{
	display:inline-block;
	font-size:13px;
	margin-right:15px;}

ul.icon li img{
	vertical-align:middle;
	margin-right:10px;}

.map{
	border:1px solid #d1c9aa;}

#spotMap{
	height:300px;}

/*側邊相簿*/
ul.side_album li{
	width:33.33%;
	padding:0 5px 5px 0;}

@media (max-width: 767px){
	.top .link{
		float:none;
		width:100%;
		text-align:center;}
	
	.col-4{
		width:50%;
		margin-bottom:25px;}
	
	.top{
		position:static;
		margin:15px 0;}	
	
	.top ul.classLink{
		float:none;
		width:100%;
		text-align:center;
		padding-bottom:10px;
		border-bottom:1px solid #CCC;
		margin-bottom:10px;}
	
	.top .link{
		float:none;
		width:100%;
		text-align:center;}
		
		/*內頁*/
	.contentBox .leftBox{
		float:none;
		width:100%;
		padding:0;}
	
	.contentBox .rightBox{
		float:none;
		width:100%;
		margin-top:20px;}
}

@media (max-width: 480px){
	.mainArea .contentBox h3.articleTitle{
		text-align:left;}
}
@media (max-width: 360px){
	.col-4{
		width:100%;
		margin-bottom:25px;}
}
.newIcon{
	position: absolute;
	right: 0;
	top: 0;
	width: 15px;
	height:50px;
	display: block;
}
.newIcon.newIcon_blue{
	background: #3ec1d3;
}
.newIcon.newIcon_orange{
	background: #ff9a00;
}
.newIcon.newIcon_green{
	background: #54b04b;
}
ul.classLink li a.newIcon_blue:hover,
ul.classLink li a.newIcon_blue.current{
	color: #3ec1d3;
}
ul.classLink li a.newIcon_blue:after{
	background: #3ec1d3;
}
ul.classLink li a.newIcon_orange:hover,
ul.classLink li a.newIcon_orange.current{
	color:  #ff9a00;
}
ul.classLink li a.newIcon_orange:after{
	background:  #ff9a00;
}
ul.classLink li a.newIcon_green:hover,
ul.classLink li a.newIcon_green.current{
	color:  #54b04b;
}
ul.classLink li a.newIcon_green:after{
	background:  #54b04b;
}