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

.txt {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 150px;
	z-index: 10;/*overflow: hidden;*/
}
.title {
	margin: 100px 0 30px 0;
}
#bg {
	background: url(../images/environ/bg.jpg);
	background-size: cover;
	background-position: center;
	opacity: 0.1;
}
.all {
	position: absolute;
	left: 50%;
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	transform: translateX(-50%);
}
.dbox {
	position: relative;
	overflow: auto;
}
.dbox li {
	position: relative;
	width: 125px;
	height: 125px;
	margin: 5px;
	float: left;
}

.dbox div {
	position: absolute;
}
.dbox .bord {
	border: #BA9C6F solid 1px;
	opacity: 1;
	width: 123px;
	height: 123px;
}
.nav {
	position: absolute;
	top: 0;
	width: 270px;
	margin-bottom: 50px;
}
.nav .bb {
	opacity: 0.8;
}
.nav .bb:hover {
	opacity: 1;
}
.nav .on {
	opacity: 1;
}
.on .bord {
	
	border: #ccc solid 1px;
	background-color: rgba(30,30,30,0.5);
}
.herf {
	text-align: center;
	width: 90%;
	height: 90%;
	margin: 5%;
}
.herf a {
	display: block;
	width: 100%;
	height: 100%;
}
.herf div {
	width: 100%;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
}
.all .B {
	float: right;
	margin-right: 265px;
}
.all .R {
	position: absolute;
	top: 0;
	right: 0;
	width: 270px;
}
.dbox .o0 {
	opacity: 0;
}
.dbox .o1 {
	border: none;
	background-color: rgba(30,30,30,0.3);
	width: 125px;
	height: 125px;
}
.dbox .o2 {
	
	border: none;
	background-color: rgba(30,30,30,0.5);
	width: 125px;
	height: 125px;
}
.dbox .o3 {
	opacity: 0.5;
}
.dbox .o4 {
	border: none;
	background-color: rgba(30,30,30,0.7);
	width: 125px;
	height: 125px;
}
.dbox .o5 {
	opacity: 0.6;
}
.t2 {
	display: none;
}
/*動畫*/
.locat {
	position: relative;
	margin: 5px 270px;
	width: 761px;
	height: 526px;
	overflow: hidden;
	
	border: #ccc solid 2px;
}
.envph {
	position: absolute;
	width: 100%;
	height: 100%;
}
.envph img {
	position: absolute;
	
	
	width: 100%;
	height: 100%;
	height:auto;
	display: block;
	opacity: 0;
}
/*espace*/
.envph .s1 {
	opacity: 1;
}
.envph .s5-1 {
	opacity: 1;
}
.envph .s6-1 {
	top: -500px;
	opacity: 1;
}
.envph .s7 {
	top: -100px;
	opacity: 1;
}
/*eroom*/
.envph .r1{
	opacity: 1;
}
.envph .r3{
	opacity: 1;
	position: absolute;
	overflow:hidden;
	width:1px;
	height: 100%;
}
.envph .r5{
	position: absolute;
	opacity: 1;
	overflow:hidden;
	width:100%;
	height:1px;
	
}
/*ekara*/
.envph .k1{
	opacity: 1;
}
/*elight*/
.envph .l1{
	opacity: 1;
}
/*動畫*/

@media screen and (max-width:1500px) {
.all {
}
.locat {
	margin: 5px 135px;
}
.nav, .all .R {
	width: 135px;
}
.nav .no, .R .no {
	display: none;
}
.all .B {
	margin-right: 0;
}
}
@media screen and (max-width:1250px) {
.locat {
	margin: 0;
}
.all .B, .all .R {
	display: none;
}
.nav {
	width: 540px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	transform: translateX(-50%);
}
.nav li {
	float: left;
}
}
@media screen and (max-width:1100px) {
.txt {
	right: 0;
}
.title {
	margin: 120px 0 30px 0;
}
}
 @media screen and (max-width:850px) {
.all {
	left: 30px;
	right: 30px;
	-webkit-transform: none;
	-moz-transform: none;
	-ms-transform: none;
	-o-transform: none;
	transform: none;
}
}
 @media screen and (max-width:600px) {
.nav {
	width: 100%;
	overflow: visible;
}
.nav li {
	margin: 5px 0;
	width: 100%;
	height: 80px;
}
.nav .on {
	display: none;
}
.t2 {
	position:relative;
	display: block;	
	margin: 0;
	margin-bottom:10px;
	width: 100%;
	height: 80px;
}
.t2 div{
	position:absolute;
}

.t2 .bord, .dbox .bord {
	width: 100%;
	height: 100%;
}
.t2 .bord{
	border: #ccc solid 1px;
	background-color: rgba(30,30,30,0.8);
 }
.herf {
	width: 100%;
	height: 100%;
	margin: 0;
}
}
 @media screen and (max-width:520px) {
.all {
	left: 20px;
	right: 20px;
}
}
 @media screen and (max-height:800px) {
.title {
	margin: 120px 0 30px 0;
}
.all .B {
	display: none;
}
}