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

.innerContent{
	opacity:0;
	
	-webkit-transition:opacity 1s linear 1s;
	-moz-transition:opacity 1s linear 1s;
	-ms-transition:opacity 1s linear 1s;
	-o-transition:opacity 1s linear 1s;
	transition:opacity 1s linear 1s;
}
.showNow .innerContent{
	opacity:1;
}
.innerContent::before, .innerContent::after{
	content:'';
	display:block;
	margin:10px auto;
	height:30px;
	width:1px;
	background:#FFF;
	opacity:0.3;
}
.innerContent::after{
	margin:10px auto 0 auto;
}

.list{
	overflow:hidden;
	margin:20px auto;
	width:1090px;
}
.listItem{
	position:relative;
	float:left;
	width:70px;
	height:200px;
	padding:9px;
	margin:5px;
	border:rgba(255,255,255,0) solid 1px;
	border-bottom:#b5975b solid 1px;
	background:rgba(33,33,33,0);
	cursor:pointer;
	overflow:hidden;
	
	-webkit-transition:all 0.3s linear;
	-moz-transition:all 0.3s linear;
	-ms-transition:all 0.3s linear;
	-o-transition:all 0.3s linear;
	transition:all 0.3s linear;
}
.listItem img{
	position:absolute;
	right:10px;
	bottom:10px;
	opacity:0;
	
	-webkit-transition:all 0.3s linear;
	-moz-transition:all 0.3s linear;
	-ms-transition:all 0.3s linear;
	-o-transition:all 0.3s linear;
	transition:all 0.3s linear;
}
.stepW{
	position:absolute;
	bottom:10px;
	width:70px;
	text-align:center;
	
	-webkit-transition:all 0.3s linear;
	-moz-transition:all 0.3s linear;
	-ms-transition:all 0.3s linear;
	-o-transition:all 0.3s linear;
	transition:all 0.3s linear;
}
.stepNum{
	display:inline-block;
	font-size:0.75em;
	color:#b5975b;
}
.stepNum span{
	font-size:3em;
	color:#FFF;
	opacity:0.2;
	display:inline-block;
	margin-right:-15px;
	line-height:1em;
	
	-webkit-transition:all 0.3s linear;
	-moz-transition:all 0.3s linear;
	-ms-transition:all 0.3s linear;
	-o-transition:all 0.3s linear;
	transition:all 0.3s linear;
}
h3{
	position:relative;
	color:#FFF;
	font-size:0.95em;
	font-weight:normal;
}
h3::after{
	content:'';
	width:0px;
	height:1px;
	background:#b5975b;
	position:absolute;
	left:80px;
	top:1em;
	
	-webkit-transition:all 0.3s linear;
	-moz-transition:all 0.3s linear;
	-ms-transition:all 0.3s linear;
	-o-transition:all 0.3s linear;
	transition:all 0.3s linear;
}
p{
	margin:10px 0 0 80px;
	width:280px;
	opacity:0;
	
	-webkit-transition:all 0.3s linear;
	-moz-transition:all 0.3s linear;
	-ms-transition:all 0.3s linear;
	-o-transition:all 0.3s linear;
	transition:all 0.3s linear;
}
/*打開*/
.listItem.on, .listItem.on:hover{
	width:360px;
	border:rgba(255,255,255,0.3) solid 1px;
	background:rgba(33,33,33,0.3);
}
.listItem.on img{
	opacity:0.3;
}
.listItem.on .stepNum span{
	font-size:4em;
}
.listItem.on h3::after{
	width:70px;
}
.listItem.on p{
	opacity:1;
}
.listItem.on:hover .stepW{
	bottom:10px;
	
	-webkit-transform:none;
	-moz-transform:none;
	-ms-transform:none;
	-o-transform:none;
	transform:none;
}

/*滑入*/
.listItem:hover{
	border:rgba(255,255,255,0.1) solid 1px;
}
.listItem:hover .stepW{
	bottom:20px;
}

/*====預售屋===*/
.list2{
	margin:20px auto;
	overflow:hidden;
	max-width:780px;
}
.listItem2{
	width:300px;
	height:140px;
	padding:39px;
	margin:5px;
	float:left;
	border:rgba(255,255,255,0.3) solid 1px;
	background:rgba(33,33,33,0.3);
}
.stepW2{
	float:left;
	width:70px;
	text-align:center;
}
.stepW2 img{
	margin:0 auto;
	opacity:0.3;
}
.stepW2 h3::after{
	width:70px;
	position:static;
	display:block;
}
.listItem2 p{
	opacity:1;
	padding-left:20px;
	border-left:rgba(255,255,255,0.3) dotted 1px;
	margin:0 0 0 90px;
	min-height:140px;
}


@media screen and (max-width:1130px),screen and (max-height:660px){
.list{
	width:auto;
	max-width:460px;
}
.listItem{
	float:none;
	height:auto;
	width:auto;
	margin:0 0 20px;
	border:none;
	background:none;
	cursor:default;
}
.listItem img{
	opacity:0.3;
}
.stepW{
	position:static;
	float:left;
}
p{
	margin:-3px 0 40px 90px;
	padding-left:20px;
	border-left:rgba(255,255,255,0.3) dotted 1px;
	min-height:80px;
	width:auto;
	opacity:1;
}
h3::after{
	position:static;
	display:block;
	width:70px;
}
.listItem.on, .listItem.on:hover, .listItem:hover{
	width:auto;
	border:none;
	background:none;
}
.listItem.on .stepNum span{
	font-size:3em;
}
}
@media screen and (max-width:500px){
.stepW{
	float:none;
	width:auto;
	text-align:left;
}
p{
	margin:10px 0 20px;
	padding:0px;
	border:none;
	min-height:0;
}
h3{
	display:inline-block;
}
}
@media screen and (max-width:820px),screen and (max-height:660px){
.listItem2{
	float:none;
	margin:0px auto 20px;
}
}
@media screen and (max-width:420px){
.listItem2{
	width:auto;
	height:auto;
	padding:9px;
	
	border:none;	
	background:none;
}	
.stepW2{
	width:auto;
	float:none;
}
.stepW2 h3{
	display:block;
}
.stepW2 h3::after{
	width:200px;
	margin:0 auto;
}
.listItem2 p{
	margin:10px auto 0;
	border:none;
	padding:0;
	min-height:0;
	max-width:200px;
}
}
@media screen and (max-width:640px), screen and (max-height:400px){
.innerContent::before, .innerContent::after{
	height:15px;
}	
}