@charset "utf-8";

/* CSS Document */

@font-face{  

    font-family:'en';

    src: url('../fonts/ufonts.com_century-gothic.ttf') format('truetype'); 

}

@font-face{  

    font-family:'enB';

    src: url('../fonts/ufonts.com_century-gothic-bold.ttf') format('truetype'); 

}

@font-face{  

    font-family:'en1';

    src: url('../fonts/ufonts.com_arial-ce.ttf') format('truetype'); 

}

@font-face{  

    font-family:'en2';

    src: url('../fonts/ufonts.com_baskerville-old-face.ttf') format('truetype'); 

}

.en{

	 font-family:'en';

}

.enB{

	 font-family:'enB';

}

.en1{

	 font-family:'en1';

}

.en2{

	 font-family:'en2';

}

audio{

	display:none;	

}

body {

	font-family:"微軟正黑體", "儷黑Pro";

	

}

@media (min-width: 1310px) {

	

}

#popBg{

	position:fixed;

	width:100%;

	height:100%;

	left:0;

	top:0;

	right:0;

	bottom:0;

	margin:auto;

	background:rgba(0,0,0,0.9);

	z-index:9999;

	display:none;/**/

	/*

	background:url('../tpl/video pop.jpg') center center no-repeat;

	

	background:url('../tpl/publications_in.jpg') center center no-repeat;*/

}

.popClose{

	position:absolute;

	width:26px;

	height:26px;

	top:0px;

	right:-60px;

}

.popClose:hover{

	cursor:pointer;

}

.slidePrev{

	position:absolute;

	width:28px;

	height:48px;

	top:0;

	bottom:0;

	left:-100px;

	margin:auto 0;

}

.slideNext{

	position:absolute;

	width:28px;

	height:48px;

	top:0;

	bottom:0;

	right:-100px;

	margin:auto 0;

}

.slideBtn > img:nth-child(1){

	display:block;

}

.slideBtn > img:nth-child(2){

	display:none;

}

.slideBtn:hover{

	cursor:pointer;

}

.slideBtn:hover > img:nth-child(1){

	display:none;

}

.slideBtn:hover > img:nth-child(2){

	display:block;

}



#bg{

	position:fixed;

	width:100%;

	height:100%;

	left:0;

	top:0;

	right:0;

	bottom:0;

	margin:auto;

	background:url('../images/bg.jpg') center center no-repeat;

	background-size:cover;/**/

	z-index:0;

}

#bgMask{

	position:fixed;

	width:100%;

	height:100%;

	left:0;

	top:0;

	right:0;

	bottom:0;

	margin:auto;

	z-index:1;

	overflow:hidden;

}

#bgMask > div{

	position:absolute;

	width:5760px;

	height:3240px;

	left:-1920px;

	top:-1080px;

}

#bgMask > div > div{

	position:relative;

	float:left;

	width:1920px;

	height:1080px;

	background:#000000;

	opacity:0.8;

}

#bgMask > div > div.center{	

	background:url('../images/light.png') center center no-repeat;

	opacity:1;

}

#bgSoundControls{

	position:fixed;

	width:103px;

	height:25px;

	right:4px;

	top:17px;

	z-index:999;

}

#bgSoundControls img{

	display:block;

	width:100%;

}

#bgSoundControls:hover{

	cursor:pointer;

}

#bgSoundControls .on{

	display:block;

}

#bgSoundControls .off{

	display:none;

}

#bgSoundControls.current .on{

	display:none;

}

#bgSoundControls.current .off{

	display:block;

}

#footer{

	position:fixed;

	width:334px;

	height:25px;

	right:18px;

	bottom:12px;

	

	z-index:999;

}

#footer img{

	display:block;

	width:100%;

}



.page0, .page, .page2{

	position:absolute;

	width:100%;

	height:100%;

	left:0;

	top:0;

	right:0;

	margin:0 auto;

	z-index:2;

	display:none;

}

/*入口輪播頁*/

#index{

	background-color:#FFFFFF;

	z-index:99;

	display:block;/**/

}

#banner{

	position:absolute;

	width:100%;

	height:90%;/*89.17197452229299, 90*/

	left:0;

	right:0;

	top:0;

	

	margin:auto;

	z-index:0;

}

#banner > div{

	position:absolute;

	width:100%;

	height:100%;	

	background-position:center center;

	background-repeat:no-repeat;

	background-size:cover;

	left:0;

	right:0;

	top:0;

	bottom:0;

}

#enter{

	position:absolute;

	width:100%;

	height:10%;

	left:0;

	right:0;

	bottom:0;

	margin:0 auto;

	z-index:1;

	background-color:#FFFFFF;

	display:block;

}

#enter:hover{

	cursor:pointer;

}

#enter > div{

	position:absolute;

	width:100px;

	height:20px;

	left:0;

	top:0;

	right:0;

	bottom:0;

	margin:auto;

	z-index:1;

	font-size:16px;

	line-height:20px;

	text-align:center;

	letter-spacing:1px;

	color:#333333;

	font-weight:bold;

}

/*入口選單頁*/

#home{

	/*background:url('../tpl/index2.jpg') center center no-repeat;

	background-size:cover;

	*/

	display:block;

}

#homeIn{

	position:absolute;

	width:100%;

	height:380px;

	margin:auto;

	left:0;

	right:0;

	top:0;

	bottom:0;

}

#header1{

	position:relative;

	width:602px;

	margin:0 auto;

	left:0;

	right:0;

}

#header1 > div{

	position:relative;

	display:inline-block;

	vertical-align:bottom;

	opacity:0;

}

#header1 > div img{

	display:block;

	max-width:100%;

}

#header1 > div.logo{

	width:185px;

	height:178px;

	margin-right:11px;

}

#header1 > div.title{

	width:374px;

	height:25px;

	margin-bottom:2px;

}



.menu ul li a{

	position:relative;

	display:block;

	width:100%;

	height:25px;

	overflow:hidden;

}

.menu ul li a > div{

	position:relative;

	width:100%;

	height:50px;

	padding:0;

	top:0;

}

.menu ul li a > div img{

	display:block;

	height:100%;

}

.menu ul li.current a > div{

	top:-25px;

}



/*入口選單*/

#menu1{

	position:relative;

	width:100%;

	margin-top:67px;

}

#menu1 > ul{

	position:relative;

	width:100%;	

	text-align:center;

}

#menu1 > ul > li{

	position:relative;

	display:inline-block;

	

	margin-top:0;

	margin-bottom:0;

	margin-left:21px;

	margin-right:21px;

	opacity:0;

}

/*內頁左區塊 logo + 選單*/

#left{

	position:fixed;

	width:150px;

	left:57px;

	top:65px;

	z-index:999;

	display:none;

}

#header2{

	position:relative;

	width:100%;

	margin-top:0;

}

#header2 > div{

	position:relative;

	/*width:450px;

	opacity:0;*/

}

#header2 > div.logo{

	width:412px;

	height:100px;

	/*margin-right:11px;*/

}

#header2 > div.logo img{

	width:100%;

	height:100%;

}

/*

#header2 > div.logo > img:first-child{

	width:110px;

	height:100px;

}

#header2 > div.logo > img:last-child{

	width:308px;

	height:100px;

}

*/

/*

#header2 > div.title{

	font-size:76px;

	letter-spacing:2px;

	line-height:55px;

	color:#FFFFFF;

	padding:0 0 0 0;

	opacity:0.3;

}

*/

#menu2{

	position:relative;

	width:100px;

	margin-left:24px;

	margin-top:20px;

	

}

#menu2 > ul > li{

	position:relative;

	margin-top:2px;

	opacity:0;

}



/*關於我們*/

#aboutus{

	/*background:url('../tpl/about_us.jpg') center center no-repeat;

	background-size:cover;

	

	display:block;*/

}

#aboutus > div.pageIn{

	position:absolute;

	width:1430px;/*75.4*/

	right:0;

	/*bottom:20px;*/

	top:214px;/*191*/

}

#aboutus div.banner{

	position:relative;

	width:100%;

}

#aboutus div.banner img{

	display:block;

	max-width:100%;

}

#aboutus div.content{

	position:relative;

	width:100%;

}

#aboutus div.content > div{

	position:relative;

	float:left;

}

#aboutus div.content > div img{

	display:block;

	max-width:100%;

}

#aboutus div.tw{

	width:779px;

}

#aboutus div.en{

	width:649px;

}



/*人物*/

#people{

	/*background:url('../tpl/people.jpg') center center no-repeat;

	background-size:cover;

	

	display:block;*/

}

#people > div.pageIn{

	position:absolute;

	width:1383px;

	height:688px;

	right:0;

	/*bottom:40px;*/

	top:214px;

}

#people > div.pageIn > div{

	position:relative;

	display:inline-block;

	vertical-align:top;

}

#people div.photo{

	width:295px;/*313*/

	height:467px;/*425*/

}

#people div.photo img{

	display:block;

	max-width:100%;

	width:100%;

	height:100%;

}

#people div.content{

	width:948px;

	margin-left:15px;

	margin-top:0;

}

#people div.content  img{

	display:block;

	max-width:100%;

}

#people div.tw{

	position:relative;

}

#people div.en{

	position:relative;

}

#people .content div.sign{

	position:absolute;

	width:280px;

	height:150px;

	right:0;

	bottom:5px;

}





/*住宅空間*/

#dwelling{

	/*

	background:url('../tpl/dwelling_1a.jpg') center center no-repeat;

	background-size:cover;

	

	display:block;*/

}

#dwelling > div.pageIn{

	position:absolute;

	width:1690px;

	height:435px;

	right:0;

	bottom:20px;

}



#dwelling > div.pageIn > div{

	position:relative;

	display:inline-block;

	vertical-align:top;

	/*margin-right:36px;*/

	margin-right:30px;

}

#dwelling div.first{

	position:relative;

	width:145px;

	height:230px;

	/*margin-right:30px;*/

	margin-top:60px;

	background:rgba(89, 87, 87, 0.3);	

}

#dwelling div.first img{

	display:block;

	max-width:100%;

}

#dwelling div.first .title{

	position:absolute;

	top:-60px;

}



#dwelling div.first .line{

	position:relative;

	width:100%;

}

#dwelling div.first .num{

	position:relative;

}

#dwelling div.first .pager{

	width:100%;

	position:absolute;

	bottom:-15px;

}

#dwelling div.first .pager > div{

	width:26px;

	height:31px;

}



#dwelling div.first .pager .prev{

	position:absolute;

	left:5px;

	display:none;

}

#dwelling div.first .pager .next{

	position:absolute;

	right:5px;

}

#dwelling div.first .pager .prev:hover,

#dwelling div.first .pager .next:hover

{

	cursor:pointer;

}



#dwelling div.item{

	position:relative;

	width:145px;

	height:230px;

	margin-top:60px;

}

#dwelling div.item img{

	display:block;

	max-width:100%;

	width:100%;

}

#dwelling div.item div.no{

	position:absolute;

	/*right:25px;*/

	width:145px;

	height:60px;

	right:0;

	top:-60px;

	z-index:3;

	opacity:0;

}

#dwelling div.item div.title{

	position:absolute;

	width:145px;

	height:140px;

	bottom:-140px;	

	z-index:3;

	

}

#dwelling div.item div.titleIn{

	position:absolute;

	width:145px;

	height:140px;

	/*left:-25px;*/

	left:0;

	opacity:0;

}

#dwelling div.item div.thumb{

	position:absolute;

	width:100%;

	height:145px;

	left:0;

	right:0;

	top:0;

	overflow:hidden;

}

#dwelling div.item div.thumb img{

	display:block;

	width:100%;

}

#dwelling div.item div.pic{

	position:absolute;

	width:100%;

	height:145px;

	left:0;

	right:0;

	top:0;

	overflow:hidden;

	opacity:0;

}

#dwelling div.item div.pic:hover{

	cursor:pointer;

}

#dwelling div.item div.picIn{

	position:absolute;

	width:100%;

	height:230px;

	left:0;

	right:0;

	top:0;

	overflow:hidden;

}



/*住宅空間2*/

#dwelling2{

	/*background:url('../tpl/business in.jpg') center center no-repeat;

	background-size:cover;

	

	display:block;*/

	

}

#dwelling2 > div.pageIn{

	position:absolute;

	width:1690px;

	height:510px;

	right:0;

	bottom:40px;

}

#dwelling2 > div.pageIn > div{

	position:relative;

	display:inline-block;

	vertical-align:top;

	

}

#dwelling2 div.first{

	position:relative;

	width:145px;

	height:405px;/*465*/

	margin-top:60px;

	background:rgba(89, 87, 87, 0.3);

	margin-right:32px;

	

}

#dwelling2 div.first img{

	display:block;

	max-width:100%;

}

#dwelling2 div.first .title{

	position:absolute;

	top:-60px;

}

#dwelling2 div.first .back{

	position:absolute;

	width:31px;

	height:26px;

	right:10px;

	top:10px;

}

#dwelling2 div.first .back:hover{

	cursor:pointer;

}

#dwelling2 div.first .subTitle{

	position:relative;

	width:90%;

	margin-left:auto;

	margin-right:auto;

	margin-top:40px;

}

#dwelling2 > div.pageIn > div.ls{

	position:relative;

	margin-right:0;

	width:1480px;

	height:405px;/*465*/

	margin-top:60px;

	overflow:hidden;

}

#dwelling2 > div.pageIn > div.ls div.lsIn{

	position:relative;

	height:405px;

	white-space: nowrap;

	/* background-color:#000000; */

	background-color:#cbcbcc;

	vertical-align:top;

	

}

#dwelling2 > div.pageIn > div.ls div.lsIn img{

	/*display:block;*/

	/*float:left;*/

	display:inline;

	max-height:100%;

	/* margin-right:10px; */

	margin-right:14px;

}

#dwelling2 > div.pageIn > div.ls div.lsIn img:last-child{

	margin-right:0;

}





/*商業空間*/

#business{

	/*background:url('../tpl/business.jpg') center center no-repeat;

	background-size:cover;

	

	display:block;*/

}

#business > div.pageIn{

	position:absolute;

	width:1690px;

	height:435px;

	right:0;

	bottom:20px;	

}



#business > div.pageIn > div{

	position:relative;

	display:inline-block;

	vertical-align:top;

	/*margin-right:36px;*/

	margin-right:30px;

}

#business div.first{

	position:relative;

	width:145px;

	height:230px;

	/*margin-right:30px;*/

	margin-top:60px;

	background:rgba(89, 87, 87, 0.3);	

}

#business div.first img{

	display:block;

	max-width:100%;

}

#business div.first .title{

	position:absolute;

	top:-60px;

}

#business div.first .line{

	position:relative;

	width:100%;

}

#business div.first .num{

	position:relative;

}

#business div.first .pager{

	width:100%;

	position:absolute;

	bottom:-15px;

}

#business div.first .pager > div{

	width:26px;

	height:31px;

}



#business div.first .pager .prev{

	position:absolute;

	left:5px;

	display:none;

}

#business div.first .pager .next{

	position:absolute;

	right:5px;

}

#business div.first .pager .prev:hover,

#business div.first .pager .next:hover

{

	cursor:pointer;

}



#business div.item{

	position:relative;

	width:145px;

	height:230px;

	margin-top:60px;

}

#business div.item img{

	display:block;

	max-width:100%;

	width:100%;

}

#business div.item div.no{

	position:absolute;

	/*right:25px;*/

	width:145px;

	height:60px;

	right:0;

	top:-60px;

	z-index:3;

	opacity:0;

}

#business div.item div.title{

	position:absolute;

	width:145px;

	height:140px;

	bottom:-140px;	

	z-index:3;

	

}

#business div.item div.titleIn{

	position:absolute;

	width:145px;

	height:140px;

	/*left:-25px;*/

	left:0;

	opacity:0;

}

#business div.item div.thumb{

	position:absolute;

	width:100%;

	height:145px;

	left:0;

	right:0;

	top:0;

	overflow:hidden;

}

#business div.item div.thumb img{

	display:block;

	width:100%;

}

#business div.item div.pic{

	position:absolute;

	width:100%;

	height:145px;

	left:0;

	right:0;

	top:0;

	overflow:hidden;

	opacity:0;

}

#business div.item div.pic:hover{

	cursor:pointer;

}

#business div.item div.picIn{

	position:absolute;

	width:100%;

	height:230px;

	left:0;

	right:0;

	top:0;

	overflow:hidden;

}



/*商業空間2*/

#business2{

	/*background:url('../tpl/business in.jpg') center center no-repeat;

	background-size:cover;

	

	display:block;*/

	

}

#business2 > div.pageIn{

	position:absolute;

	width:1690px;

	height:510px;

	right:0;

	bottom:40px;

}

#business2 > div.pageIn > div{

	position:relative;

	display:inline-block;

	vertical-align:top;

	

}

#business2 div.first{

	position:relative;

	width:145px;

	height:405px;/*465*/

	margin-top:60px;

	background:rgba(89, 87, 87, 0.3);

	margin-right:32px;

}

#business2 div.first img{

	display:block;

	max-width:100%;

}

#business2 div.first .title{

	position:absolute;

	top:-60px;

}

#business2 div.first .back{

	position:absolute;

	width:31px;

	height:26px;

	right:10px;

	top:10px;

}

#business2 div.first .back:hover{

	cursor:pointer;

}

#business2 div.first .subTitle{

	position:relative;

	width:90%;

	margin-left:auto;

	margin-right:auto;

	margin-top:40px;

}

#business2 > div.pageIn > div.ls{

	position:relative;

	margin-right:0;

	width:1480px;

	height:405px;/*465*/

	margin-top:60px;

	overflow:hidden;

}

#business2 > div.pageIn > div.ls div.lsIn{

	position:relative;

	height:405px;

	white-space: nowrap;

	/* background-color:#000000; */

	background-color:#cbcbcc;

}

#business2 > div.pageIn > div.ls div.lsIn img{

	/*display:block;*/

	/*float:left;*/

	display:inline;

	max-height:100%;

	/* margin-right:10px; */

	margin-right:14px;

	vertical-align:top;

}

#business2 > div.pageIn > div.ls div.lsIn img:last-child{

	margin-right:0;

}



/*媒體報導*/

#publications{

	/*background:url('../tpl/publications.jpg') center center no-repeat;

	background-size:cover;

	

	display:block;*/

}

#publications > div.pageIn{

	position:absolute;

	width:1275px;

	height:706px;/*643*/

	right:100px;

	/*bottom:40px;*/

	top:196px;

}

#publications > div.pageIn > div{

	position:relative;

}

#publications div.title{

	width:280px;

	height:60px;

}

#publications div.title img{

	display:block;

	width:100%;

}

#publications div.ls{

	position:relative;

}

#publications div.item{

	position:relative;

	display:inline-block;

	width:168px;/*176*/

	height:200px;/*234, 223*/

	vertical-align:top;

	margin-right:22px;

	margin-bottom:25px;

}

#publications div.pic{

	position:relative;

	width:100%;

	height:100%;

	overflow:hidden;

}

#publications div.pic:hover{

	cursor:pointer;

}

#publications div.thumb{

	position:relative;

	width:100%;

	height:100%;

}

#publications div.thumb img{

	display:block;

	width:100%;

	height:100%;

}

#publications div.border{

	position:absolute;

	width:100%;

	height:100%;

	border:3px solid #7D633A;

	left:0;

	top:0;

	right:0;

	bottom:0;

	margin:auto;

	opacity:0;

}



#publicationsPop{

	position:absolute;

	width:685px;/*650*/

	height:447px;/*365*/

	border:3px solid #7D633A;

	left:0;

	top:0;

	right:0;

	bottom:0;

	margin:auto;

	z-index:99999;

	display:none;/**/

}

#publicationsPop .publicationsBox{

	position:absolute;

	width:100%;

	height:100%;

	left:0;

	top:0;

	right:0;

	bottom:0;

	margin:auto;

	background:#000000;

	overflow:hidden;

}

#publicationsPop .publicationsBox img{

	display:block;

	width:100%;

	height:100%;

}

#publicationsPop .title{

	position:absolute;

	right:0;

	bottom:-28px;

	font-size:15px;

	font-family:"en", "微軟正黑體", "儷黑Pro";

	

	text-align:right;

	color:#7D633A;

	letter-spacing:1px;

	line-height:18px;

}

#publicationsPop .caption{

	position:absolute;

	top:300px;/*210*/

	right:-60px;

	font-size:15px;

	font-family:"en", "微軟正黑體", "儷黑Pro";

	

	text-align:right;

	color:#7D633A;

	letter-spacing:1px;

	line-height:18px;

}



/*影音空間*/

#video{

	/*background:url('../tpl/video.jpg') center center no-repeat;

	background-size:cover;

	

	display:block;*/

}

#video > div.pageIn{

	position:absolute;

	width:1375px;

	height:706px;

	right:0;

	/*bottom:40px;*/

	top:196px;

}

#video > div.pageIn > div{

	position:relative;

}

#video div.title{

	width:280px;

	height:60px;

}

#video div.title img{

	display:block;

	width:100%;

}



#video div.ls{

	position:relative;

}

#video div.item{

	position:relative;

	display:inline-block;

	width:335px;/*350*/

	height:235px;/*240, 145+75+15*/

	vertical-align:top;

	margin-right:125px;

}

#video div.pic{

	position:relative;

	width:100%;

	height:145px;

	overflow:hidden;

}

#video div.pic:hover{

	cursor:pointer;

}

#video div.thumb{

	position:relative;	

}

#video div.thumb img{

	display:block;

	width:100%;

}

#video div.icon{

	position:absolute;

	width:28px;

	height:28px;

	left:0;

	top:0;

	right:0;

	bottom:0;

	margin:auto;

}

#video div.icon img{

	display:block;

	width:100%;

}

#video div.border{

	position:absolute;

	width:100%;

	height:100%;

	border:3px solid #7D633A;

	left:0;

	top:0;

	right:0;

	bottom:0;

	margin:auto;

	opacity:0;

}

#video div.item div.title{

	position:relative;	

	height:335px;

	height:75px;

}

#video div.item div.title img{

	display:block;

	width:100%;

}



#videoPop{

	position:absolute;

	width:640px;

	height:360px;

	border:3px solid #7D633A;

	left:0;

	top:0;

	right:0;

	bottom:0;

	margin:auto;

	z-index:99999;

	display:none;

}

#videoPop .videoBox{

	position:absolute;

	width:100%;

	height:100%;

	left:0;

	top:0;

	right:0;

	bottom:0;

	margin:auto;

	background:#000000;

	z-index:3;

}

#videoPop .videoBoxIn{

	position:absolute;

	width:100%;

	height:100%;

	left:0;

	top:0;

	right:0;

	bottom:0;

	margin:auto;

}

#videoPop .title{

	position:absolute;

	width:100%;

	height:100%;

	left:0;

	top:-28px;

	font-size:15px;

	font-family:"en", "微軟正黑體", "儷黑Pro";

	

	text-align:left;

	color:#7D633A;

	letter-spacing:1px;

	line-height:18px;

	z-index:1;

}



/*得獎記錄*/

#award{

	/*background:url('../tpl/award.jpg') center center no-repeat;

	background-size:cover;

	

	display:block;*/

}

#award > div.pageIn{

	position:absolute;

	width:1380px;

	height:715px;

	right:0;

	/*bottom:35px;*/

	top:196px;

}

#award > div.pageIn > div{

	position:relative;

}

#award > div.pageIn img{

	display:block;

	max-width:100%;

}

#award > div.pageIn div.title{

	width:960px;

}

#award > div.pageIn div.lsY{

	width:960px;

	height:630px;

}

#award > div.pageIn div.lsYIn{

	display:none;

}

#award > div.pageIn div.lsYIn img{

	

}



/*聯絡我們*/

#contact{

	/*background:url('../tpl/contact.jpg') center center no-repeat;

	background-size:cover;

	

	display:block;*/

}

#contact > div.pageIn{

	position:absolute;

	width:1060px;

	height:670px;

	right:0;

	bottom:95px;

	text-align:right;

}

#contact > div.pageIn img{

	display:block;

	max-width:100%;

}

#contact > div.pageIn > div{

	position:relative;

	display:inline-block;

	vertical-align:middle;

	

}

#contact div.title{

	width:230px;

	height:46px;

}

#contact div.title img{

	display:block;

	width:100%;

}

#contact div.content{	

	width:805px;

	height:670px;

	background:rgba(255,255,255,0.15);

}

#contact div.content img{

	display:block;

	/*width:100%;*/

	max-height:100%;

}





.fadeIn{

	opacity:0;/**/	

}