@charset "utf-8";



body{

	margin:0;

	background-image:url(../img/bg.png);

	background-repeat:repeat;

	background-color:#000;

	color:#999;

	font-size:12px;

	font-family: "微軟正黑體", 'Alegreya Sans', sans-serif;

	text-align:center;

	line-height:23px;

}





.skipBtn{

	position: fixed;

	left:50%;

	bottom:30px;

	transform: translateX(-50%);

	background: #FFF;

	color:#999;

	border: 1px solid;

	border-radius:1em;

	font-size: 1.2em;

	padding: 0.8em 1.5em;

	text-decoration: none;

	transition: background 0.2s;

}

.skipBtn:hover{

	background: #EEE;

}





/*Header*/



#header{

	width:1185px; /* 原本 1168px, 為了 MAC 改成 1185px */

	margin:0 auto;

}



#logo, #iconmenu{

	vertical-align:top;

}





.logo a{

	float:left;

	border-right:1px #777 solid;

	padding:15px;

}



#iconmenu{

	display:inline-block;

	position:relative;

}



#icon{

	float:right;

	padding:10px 0;

	display: flex;

	align-items: center;

}



#icon span{

	margin-left:10px;

}



#icon span.toHome{

	cursor: pointer;

	transition: color 0.2s;

}

#icon span.toHome:hover{

	color:#FFF;

}



#icon span a{

	margin-left:5px;

	opacity:0.5;

	transition: all .3s ease-in-out;

	-webkit-transition: all .3s ease-in-out;

    -moz-transition: all .3s ease-in-out;   

    -o-transition: all .3s ease-in-out;

}



#icon span a:hover{

	opacity:1;

}



#menu{

	clear:both;

}



#menu ul{

	width:100%;

	border-top:1px #777 solid;

}



#menu ul li{

	display:inline-block;

	width:152px;

	height:30px;

	padding-top:20px;

	position:relative;

}



#menu ul li:after{

	content:'│';

	color:#999;

}



#menu ul li:last-child:after{

	content:'';

}



#menu ul li a{

	color:#FFF;

	text-decoration:none;

	font-weight:bold;

	font-size:14px;

	padding:0 42px;

	opacity:0.5;

	transition: all .3s ease-in-out;

	-webkit-transition: all .3s ease-in-out;

    -moz-transition: all .3s ease-in-out;   

    -o-transition: all .3s ease-in-out;

}



#menu ul li a:hover{

	opacity:1;

}



#menu ul li a:before{

	content:'';

	top:0px;

	bottom:0px;

	left:0px;

	right:10px;

	position:absolute;

	background-image:url(../img/mouseover.png);

	background-repeat:no-repeat;

	background-position: center top;

	opacity:0;

	transition: all .3s ease-in-out;

	-webkit-transition: all .3s ease-in-out;

    -moz-transition: all .3s ease-in-out;   

    -o-transition: all .3s ease-in-out;

}



#menu ul li a:hover:before{

	opacity:1;

}





/*大圖閃光*/

#large_shine {

width: 1300px;

height: 515px;

background: url('../img/bigshine.png');

position: absolute;

background-position: -500px 0px;

background-size:840px 520px;

left: 0px;

top: 0px;

background-repeat: no-repeat;

opacity:0.4;

}





#large_shine_index {

width: 1300px;

height: 399px;

background: url('../img/bigshine.png');

position: absolute;

background-position: -1000px 0px;

background-size:840px 520px;

background-repeat: no-repeat;

opacity:0.7;

}



#large_shine_c {

width: 1300px;

height: 600px;

background: url('../img/bigshine.png');

position: absolute;

background-position: -1000px 0px;

background-size:840px 520px;

background-repeat: no-repeat;

opacity:0.7;

}



/*indexMain*/





	/*大圖*/

#masterpic{

	width:100%;

	height:auto;

	border-top:1px #777 solid;

	border-bottom:1px #777 solid;

}



	/*三大按鈕*/

#big-btn-three{

	text-align:center;

	margin:25px 0;

	margin-left:25px;

}



.big-btn{

	display:inline-block;

	margin:0 2px;

}

.img-b{

	width:410px;

	height:116px;

	display:block;

	transition:all .3s ease-in-out;

}



#bigbtn1 a, #bigbtn1 a:visited{

	background-image:url(../img/bu01b.png);

	background-repeat:no-repeat;

	width:410px;

	height:116px;

	opacity:0.5;

}





#bigbtn1 a:hover{

	opacity:1;

}



#bigbtn2 a, #bigbtn2 a:visited{

	background-image:url(../img/bu02b.png);

	background-repeat:no-repeat;

	width:410px;

	height:116px;

	opacity:0.5;

}



#bigbtn2 a:hover{

	opacity:1;

}







#bigbtn3 a, #bigbtn3 a:visited{

	background-image:url(../img/bu03b.png);

	background-repeat:no-repeat;

	width:410px;

	height:116px;

	opacity:0.5;

}



#bigbtn3 a:hover{

	opacity:1;

}







/* Footer */

#wrap{

		width:1300px;

		margin:0 auto;

	min-height: 100%;

	*display: table; /* For IE7 Hack */

	*height: 100%; /* For IE7 Hack */



}



#main{

	clear:both;

	overflow:auto; 

	padding-bottom: 180px;

	margin-top:10px;

}





#footer{

	/*height:90px;*/

	width:100%;

	background-color:#000;

	bottom:0px;

	box-shadow:2px -5px 10px #000;

	position: relative;

	margin-top: -180px; /* negative value of footer height */

	height: 180px;

	clear:both; 

}



#footer p{

	padding:5px;

	text-align:center;

	line-height:18px;



}







/*理念分享a-idea*/



.page{

	position:relative;

}



.pagepic{

	max-width:100%;

	height:auto;

}



	/*文字內容*/

	



.square {

	width: 100px;

	height: 4px;

	background: white;

	margin:10px 0px;

}



#a-idea-text1{

	text-align:left;

	width:420px;

	text-shadow:2px 2px 5px #000000;

	top:100px;

	right:100px;;

	position:absolute;

	z-index:99999;

}



#a-idea-text1 h3{

	font-size:22px;

	font-weight:bold;

	color:white;

}



#a-idea-text1 p{

	line-height:30px;

	display:inline-block;

}



#a-idea-text1 div a img{

	width:36px;

	height:auto;

	border:0px;

}



#a-idea-text1 div a, #a-idea-text1 div a:visited{

	padding:0 0 0 380px;

	opacity:0.5;

}



#a-idea-text1 div a:hover{

	opacity:1;

}



#a-idea-text1b{

	text-align:right;

}



#a-idea-text2{

	text-align:left;

	width:300px;

	text-shadow:2px 2px 5px #000000;

	top:230px;

	left:150px;

	position:absolute;

	z-index:99999;

}



#a-idea-text2 h3{

	font-size:22px;

	font-weight:bold;

	color:white;

}





#a-idea-text2 div a img{

	width:36px;

	height:auto;

	border:0px;

	margin-top:10px;

}



#a-idea-text2 div a, #a-idea-text2 div a:visited{

	opacity:0.5;

}



#a-idea-text2 div a:hover{

	opacity:1;

}



#bee{

	top:12px;

	left:150px;;

	position:absolute;

}







#hex1text p, #hex2text p, #hex3text p, #hex4text p, #hex5text p, #hex6text p{

	text-align:left;

	font-weight:bold;

	font-size:14px;

	opacity:0;

	transition: all .3s ease-in-out;

	-webkit-transition: all .3s ease-in-out;

    -moz-transition: all .3s ease-in-out;   

    -o-transition: all .3s ease-in-out;

}



#hex1{

	width:138px;

	height:auto;

	position:absolute;

	top:60px;

	left:438px;

	z-index:100;

}



#hex1text div{

	opacity:0;

	transition: all .3s ease-in-out;

	-webkit-transition: all .3s ease-in-out;

    -moz-transition: all .3s ease-in-out;   

    -o-transition: all .3s ease-in-out;

}



#hexpic1{

	width:138px;

	height:120px;

	opacity:0.9;

	transition: all .3s ease-in-out;

	-webkit-transition: all .3s ease-in-out;

    -moz-transition: all .3s ease-in-out;   

    -o-transition: all .3s ease-in-out;

}



#hex1:hover #hex1text p{

	opacity:1;

}



#hex1:hover #hex1text div{

	opacity:1;

}



#hex1:hover #hexpic1{

	opacity:1;

	cursor: pointer;

}



#hex2{

	width:138px;

	height:auto;

	position:absolute;

	top:128px;

	left:545px;

	z-index:1000;

}



#hex2text div{

	opacity:0;

	transition: all .3s ease-in-out;

	-webkit-transition: all .3s ease-in-out;

    -moz-transition: all .3s ease-in-out;   

    -o-transition: all .3s ease-in-out;

}



#hexpic2{

	width:138px;

	height:120px;

	opacity:0.5;

	transition: all .3s ease-in-out;

	-webkit-transition: all .3s ease-in-out;

    -moz-transition: all .3s ease-in-out;   

    -o-transition: all .3s ease-in-out;

}



#hex2:hover #hex2text p{

	opacity:1;

}



#hex2:hover #hex2text div{

	opacity:1;

}



#hex2:hover #hexpic2{

	opacity:1;

	cursor: pointer;

}



#hex3{

	width:138px;

	height:auto;

	position:absolute;

	top:255px;

	left:545px;

	z-index:999;

}



#hex3text div{

	opacity:0;

	transition: all .3s ease-in-out;

	-webkit-transition: all .3s ease-in-out;

    -moz-transition: all .3s ease-in-out;   

    -o-transition: all .3s ease-in-out;

}



#hexpic3{

	width:138px;

	height:120px;

	opacity:0.8;

	transition: all .3s ease-in-out;

	-webkit-transition: all .3s ease-in-out;

    -moz-transition: all .3s ease-in-out;   

    -o-transition: all .3s ease-in-out;

}



#hex3:hover #hex3text p{

	opacity:1;

}



#hex3:hover #hex3text div{

	opacity:1;

}



#hex3:hover #hexpic3{

	opacity:1;

	cursor: pointer;

}



#hex4{

	width:138px;

	height:auto;

	position:absolute;

	top:318px;

	left:438px;

	z-index:999;

}



#hex4text div{

	opacity:0;

	transition: all .3s ease-in-out;

	-webkit-transition: all .3s ease-in-out;

    -moz-transition: all .3s ease-in-out;   

    -o-transition: all .3s ease-in-out;

}



#hexpic4{

	width:138px;

	height:120px;

	opacity:0.5;

	transition: all .3s ease-in-out;

	-webkit-transition: all .3s ease-in-out;

    -moz-transition: all .3s ease-in-out;   

    -o-transition: all .3s ease-in-out;

}



#hex4:hover #hex4text p{

	opacity:1;

}



#hex4:hover #hex4text div{

	opacity:1;

}



#hex4:hover #hexpic4{

	opacity:1;

	cursor: pointer;

}



#hex5{

	width:138px;

	height:auto;

	position:absolute;

	top:255px;

	left:330px;

	z-index:999;

}



#hex5text div{

	margin-right:100px;

	opacity:0;

	transition: all .3s ease-in-out;

	-webkit-transition: all .3s ease-in-out;

    -moz-transition: all .3s ease-in-out;   

    -o-transition: all .3s ease-in-out;

}



#hexpic5{

	width:138px;

	height:120px;

	opacity:0.8;

	transition: all .3s ease-in-out;

	-webkit-transition: all .3s ease-in-out;

    -moz-transition: all .3s ease-in-out;   

    -o-transition: all .3s ease-in-out;

}



#hex5:hover #hex5text p{

	opacity:1;

}



#hex5:hover #hex5text div{

	opacity:1;

}



#hex5:hover #hexpic5{

	opacity:1;

	cursor: pointer;

}



#hex6{

	width:138px;

	height:auto;

	position:absolute;

	top:128px;

	left:330px;

	z-index:999;

}



#hex6text div{

	margin-right:100px;

	opacity:0;

	transition: all .3s ease-in-out;

	-webkit-transition: all .3s ease-in-out;

    -moz-transition: all .3s ease-in-out;   

    -o-transition: all .3s ease-in-out;

}



#hexpic6{

	width:138px;

	height:120px;

	opacity:0.6;

	transition: all .3s ease-in-out;

	-webkit-transition: all .3s ease-in-out;

    -moz-transition: all .3s ease-in-out;   

    -o-transition: all .3s ease-in-out;

}



#hex6:hover #hex6text p{

	opacity:1;

}



#hex6:hover #hex6text div{

	opacity:1;

}



#hex6:hover #hexpic6{

	opacity:1;

	cursor: pointer;

}



.hexlocation{

	position:relative;

	width:138px;

}







#hex1text p{

	padding-left:100px;

}



#hex2text p{

	padding-left:150px;

}



#hex3text p{

	padding-left:150px;

}



#hex4text p{

	padding-left:150px;

}



#hex5text p{

	padding-left:10px;

}



#hex6text p{

	padding-left:20px;

}



#hex1text h2, #hex2text h2, #hex3text h2, #hex4text h2, #hex5text h2, #hex6text h2{

	text-align:left;

	line-height:0px;

	font-weight:bold;

	font-size:24px;

	color:#333;

	cursor: pointer;

}





#hex1text{

	color:#FFF;

	top:-50px;

	left:45px;

	position:absolute;

}





#hex1text div img{

	width:196px;

	padding:0px 0px 45px 22px;

	margin-top:5px;

}



#hex2text{

	color:#FFF;

	top:-30px;

	left:45px;

	position:absolute;

}





#hex2text div img{

	width:196px;

	padding:0px 0px 25px 66px;

	margin-top:5px;

}



#hex3text{

	color:#FFF;

	top:60px;

	left:45px;

	position:absolute;

}





#hex3text div img{

	width:196px;

	padding:18px 0px 0px 75px;

	margin-bottom:5px;

}



#hex4text{

	color:#FFF;

	top:60px;

	left:45px;

	position:absolute;

}





#hex4text div img{

	width:196px;

	padding:18px 0px 0px 75px;

	margin-bottom:5px;

}



#hex5text{

	width:275px;

	color:#FFF;

	top:60px;

	left:-182px;

	position:absolute;

}





#hex5text div img{

	width:196px;

	padding:18px 0px 0px 0px;

	margin-bottom:5px;

}



#hex5text h2{

	padding-left:225px;

}



#hex6text{

	width:275px;

	color:#FFF;

	top:-30px;

	left:-182px;

	position:absolute;

}





#hex6text div img{

	width:196px;

	padding:0px 0px 25px 10px;

	margin-top:5px;

}



#hex6text h2{

	padding-left:225px;

}



#contentslider:before, #contentslider:after {

display: table;

content: "";

line-height: 0;

}



#contentslider:after {

clear: both;

}







.a00{

	position:relative;

	top:200px;

	left:950px;

}



.aimg{

	width:250px;

	height:auto;

}



.aimg h1{

	font-size:24px;

	font-weight:bold;

	color:#FFF;

	text-shadow:2px 3px #000000;

}



.aimg p{

	margin-top:10px;

	color:#CCC;

	text-shadow:2px 3px #000000;

}



.aimgpic{

	margin-top:10px;

}





/*包住圖片的容器 到時候看你要怎麼排你再自己改*/

.port-containerA{

  width: 300px;

  float: left;

}



/*當滑鼠hover到圖片上時,滑鼠指標變成手*/



.port-containerA:hover{

  cursor: pointer;

}



/*點下去的內容..一開始不要讓他出現..所以每個要點下去的內容要用這class包住*/



.display-idA{

  	width:10px;

	height:10px;

	display:none;

	position: fixed;

	top:0px;

	z-index:9999999999;

}



/*點下去之後關閉按鈕的樣式,這邊是照抄你的範例頁 一樣自己改*/



.closebtnA {

	margin-left:200px;

	margin-top:10px;

	cursor: pointer;

}













/*---main of profolio---*/

.title-chinese{

	position:relative;

	font-weight:bold;

	color:#FFF;

	font-size:40px;

	margin-top:-16%;

	letter-spacing:1px;

	text-shadow:1px 1px 3px #000;

	z-index:2;

}



.title-English{

	position:relative;

	display:block;

	margin-top:0.8%;

	color:#FFF;

	letter-spacing:.5px;

	text-shadow:.5px .5px 1px #000;

	z-index:2;

}



.profolio-container{

	margin:auto;  

	margin-top:3%;

	padding-left:7%;

	width:1024px; 

	position:relative;   

	z-index:3;

}



.profolio-container>hr{

	border:0px;  

	height:1px;   

	width:92%;

	margin:20px 0px 15px 7px;

	text-shadow:1px 1px 3px #000;

	background-color:#888;	

	color:#999; /*IE6*/

}



.profolio-container #title-years{color:#FFF;}

.profolio-container h2{

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

	position:relative;

	left:-5px;

	display:block;

	width:110px;

	color:#CCC;

	text-align:left; 

	font-weight:bold; 

	font-size:15px; 

	margin-left:10px;

	text-shadow:1px 1px 3px #000;

	z-index:3;

}



.profolio-container .triangle-right{

	background:none;

	border:none;

	width: 0;

    height: 0;

	position:relative;

    border-top: 7px solid transparent;

    border-left: 14px solid #BCBCBC;

    border-bottom: 7px solid transparent;

	margin-top:5px;

	cursor:none;

	z-index:5;

}



.profolio-container div{

	float:left;

	display:inline-block;

	width:300px;

	height:420px;

	vertical-align:top;

	margin:0px 8px 16px 8px;

	background:#000;

	border:1px #444 solid;

	cursor:pointer;

}



.clearfix{ clear:both; }



.profolio-container img{

	width:300px;

	opacity:0.7;

	border-bottom:1px rgba(255,255,255,0.2) solid;

	transition:all .3s ease-in-out;

	-webkit-transition: all .3s ease-in-out;

    -moz-transition: all .3s ease-in-out;   

    -o-transition: all .3s ease-in-out;

}



.profolio-container a{ text-decoration:none; display:block; }

.profolio-container div:hover img{ opacity:1; }



hr{

	border:0px;  height:1px;   width:87%;

	background-color:#444;	color:#444; /*IE6*/

}



h3{

	color:#7B6650;

	font-size:20px;

	padding:15px 0px;

	font-weight:bolder;

}



.profolio-container ul{

	text-align:left;	color:#CCC;

	margin-left:20px;   margin-top:15px;

}



.profolio-container .circle{

	margin-left:120px;

	margin-top:10px;

	height:58px;

	width:58px;

	background:#181818;

	border:1px #444 solid;

	border-radius:29px;

	-moz-border-radius: 29px;

    -webkit-border-radius: 29px;

	transition:all .3s ease-in-out;

	-webkit-transition: all .3s ease-in-out;

    -moz-transition: all .3s ease-in-out;   

    -o-transition: all .3s ease-in-out;

}

.profolio-container div:hover .circle{ background:#CCC;}



#online-all .circle{

	margin-left:120px;

	margin-top:10px;

	height:58px;

	width:58px;

	background:#181818;

	border:1px #444 solid;

	border-radius:29px;

	-moz-border-radius: 29px;

    -webkit-border-radius: 29px;

	transition:all .3s ease-in-out;

	-webkit-transition: all .3s ease-in-out;

    -moz-transition: all .3s ease-in-out;   

    -o-transition: all .3s ease-in-out;

}

#online-all .circle:hover{background:#FFF;}

#online-all .circle:hover #more{color:rgba(153,0,0,0.8);}



#more{

	display:block;

	color:#727171;

	font-size:11px;

	font-weight:bold;

	margin-top:20px;

	transition:all .3s ease-in-out;

	-webkit-transition: all .3s ease-in-out;

    -moz-transition: all .3s ease-in-out;   

    -o-transition: all .3s ease-in-out;

}



/*---main of team---*/

#title-team-chinese{

	position:relative; margin-top:-16%;	

}



.team-title-h3{

	position:relative;

	font-weight:bold;

	color:#D3B294;

	font-size:25px;

	margin-top:5px;

	letter-spacing:1px;

	text-shadow:2px 2px 3px #000;

	z-index:2;

}



.team-title-p{

	position:relative;

	display:block;

	margin-top:10px;

	font-size:14px;

	color:#FFF;

	letter-spacing:.5px;

	text-shadow:2px 2px 5px #000;

	text-shadow:2px 2px 1px #000;

	z-index:2;

}



.team-pic img{

	opacity:0.4; 

	position:relative; 

	z-index:1;

	transition:all .5s ease-in-out;

	-webkit-transition: all .4s ease-in-out;

    -moz-transition: all .4s ease-in-out;   

    -o-transition: all .4s ease-in-out;

}



#g-main img{ opacity: 1; };



.img-container{ float:left; }

.img-container a{ height:500; display:block; }

.team-pic a:hover img{ opacity:1; }



.team-box{	

	font-weight:bold;

	background:rgba(122,101,79,0.8); 

	position:relative;

	height:70px;

	width:90px; 

	

	margin-top:-100px;

	cursor:pointer;

	z-index:3;

}



.team-box-span1{

	color:#FFF; 

	font-size:14px;

	position:absolute; 

	display:block; 

	margin-top:14px; 

	margin-left:12px;

}



.team-box-span2{

	color:#FFF;

	font-size:18px;

	position:absolute; 

	display:block; 

	margin-top:11px; 

	margin-left:12px;

}



.ca-container{

	position:relative;

	margin:25px auto 20px auto;

	width:1200px;

	height:350px;

}



#g-main .ca-container{

	display:inline-block;

	float:left;

	position:relative;

	margin:auto 30px 20px 180px;

	width:500px;

	height:533px;

}



.ca-wrapper{

	width:100%;

	height:100%;

	position:relative;

}



.ca-item{

	position:relative;

	float:left;

	width:133px;

	height:100%;

	text-align:center;

}



#g-main .ca-item{

	position:relative;

	float:left;

	width:500px;

	height:100%;

	text-align:center;

}



.ca-item-main{

	padding:0px;

	position:absolute;

	background:#000;

	overflow:hidden;

	-moz-box-shadow:1px 1px 2px rgba(0,0,0,0.2);

	-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.2);

	box-shadow:1px 1px 2px rgba(0,0,0,0.2);

}



.ca-nav span{

	width:25px;

	height:38px;

	background:transparent url(../img/arrows2.png) no-repeat top left;

	position:absolute;

	top:50%;

	margin-top:-19px;

	left:-40px;

	text-indent:-9000px;

	opacity:0.5;

	cursor:pointer;

	z-index:100;

}

.ca-nav span.ca-nav-next{

	background-position:top right;

	left:auto;

	right:-40px;

}

.ca-nav span:hover{

	opacity:1.0;

}



p{ color:#c9c9c9;}

.team-member-r,.team-member-l{ clear:both; }



.team-member-r img,.team-member-l img{

	border:none; 

	width:350px; 

	height:auto; 

	padding:12px 0px; 

	background:none;

}



.team-member-r img, .team-member-r p{ display:inline-block; vertical-align:middle; }

.team-member-l img, .team-member-l p{ display:inline-block; vertical-align:middle; }

.team-member-r p, .team-member-l p{ width:700px; padding-bottom:50px; }

.team-member-r p span, .team-member-l p span{ font-size:18px; font-weight:bold; line-height:70px; color:#e5e5e5;}



.team-member-r{

	border-top:1px #444 solid;

	border-bottom:1px #444 solid; 

	background:rgba(49,49,49,0.5); 

}



#gotop {

    position: fixed;

    right: 20px;

    bottom: 20px;    

    padding: 9px 15px;    

    font-size: 20px;

    background: #777;

    color: white;

    cursor: pointer;

	border-radius:20px;

	z-index:15;

	display:none;

}









/*作品分享 線上分享 連結內容*/



.c-case-pic img{

	width:1300px;

	height:515px;

}



.c-case{

	position:relative;

}



.c-case-circle{

	position:absolute;

	z-index:100;

	top:350px;

	left:1050px;

	height:150px;

	width:150px;

	background:#FFFFFF;

	border:1px #CCCCCC solid;

	border-radius:75px;

	-moz-border-radius: 75px;

    -webkit-border-radius: 75px;

	transition:all .3s ease-in-out;

	-webkit-transition: all .3s ease-in-out;

    -moz-transition: all .3s ease-in-out;   

    -o-transition: all .3s ease-in-out;

}



.c-case-circle p{

	font-weight:bold;

	color:#847057;

	font-size:14px;

	margin-top:15px;

}



#c-case{

	position:relative;

	text-align:left;

}



#c-case-title{

	display:inline-block;

	position:absolute;

	top:30px;

	left:300px;

}



#c-case-main{

	display:inline-block;

	margin-left:600px;

	margin-top:15px;

	text-align:left;

}



#c-case-title h1{

	font-size:45px;

	font-weight:bold;

	color:#847057;

}



#c-case-title h3{

	font-size:18px;

	font-weight:bold;

	color:#999;

}





#c-case-picall{

	text-align:left;

	margin-top:20px;

	margin-bottom:20px;

}



#c-case-pic1{

	display:inline-block;

	margin-right:30px;

}



#c-case-pic2{

	display:inline-block;

}



#c-case-pic1 span, #c-case-pic2 span{

	margin-right:3px;

}



.port-container{

	display:inline-block;

	cursor:pointer;

}



.display-id{

	width:100%;

	height:100%;

	display:none;

	position: fixed;

	top:0px;

	z-index:9999999999;

}







.c-case-big{



	width:100%;

	height:100%;

	

}



.c-case-big-bg{

	background-color:#000;

	opacity:0.9;

	width:100%;

	height:100%;



}



.e-textpic{

	padding-left:290px;

	display: inline-block;

	margin-bottom:20px;

}



.e-img{

	float:left;

	width:300px;

	height:200px;

	display: inline-block;

	margin:10px;

}



.e-text{

	float:left;

	width:600px;

	height:auto;

	display: inline-block;

	line-height:30px;

	margin:10px;

}



.f-fmain{

	margin:20px;

	width:1300px;

	height:560px;

	position:absolute;

	margin-left:100px;

}



.f-main{

	float:left;

	display:inline-block;

	margin-left:85px;

	width:500px;

	height:553px;

}



.f-table{

	 float:left;

	 display:inline-block;

	 width:500px;

	 text-align:left;

	 margin:10px;

	 position:relative;

	 top:70px;

}



#g-main .f-table{

	 padding-top:7px;

	 overflow:hidden;

	 width:400px;

	 text-align:left;

	 margin-left:-400px;

	 position:relative;

	 top:150px;

	z-index: 0;

}



.f-text a{

	color:#CCC;

}



.f-title-chinese{

	padding-left:10px;

	position:relative;

	font-weight:bold;

	color:#FFF;

	font-size:40px;

	letter-spacing:1px;

	text-shadow:1px 1px 3px #000;

	z-index:2;

}



#f-case-title{

	margin-top:30px;

	text-align:left;

}



#f-case-main{

	margin-left:600px;

	margin-top:15px;

	text-align:left;

}



#f-case-title h1{

	font-size:45px;

	font-weight:bold;

	color:#847057;

}



#f-case-title h3{

	font-size:18px;

	font-weight:bold;

	color:#999;

}



.f-textpic{

	display: inline-block;

	margin-bottom:20px;

}



.f-img{

	float:left;

	width:300px;

	height:200px;

	display: inline-block;

	margin:10px 30px auto -20px;

}



.f-text{

	float:left;

	width:600px;

	height:auto;

	display: inline-block;

	line-height:30px;

	margin:auto auto auto 10px;

	padding-top:20px;

	text-align:left;

}



.g-title{

	float:left;

	display:inline-block; 

	position:relative; 

	margin-left:20px;

	width:480px;

}



.g-title .triangle-right{

	float:left;

	background:none;

	border:none;

	width: 0;

    height: 0;

	position:relative;

    border-top: 7px solid transparent;

    border-left: 14px solid #BCBCBC;

    border-bottom: 7px solid transparent;

	margin-top:5px;

	cursor:none;

	z-index:5;

}



.g-title h2{

	float:left;

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

	position:relative;

	left:-30px;

	display:block;

	width:70px;

	color:rgba(204,204,204,0.5);

	text-align:left; 

	text-decoration:none;

	font-weight:bold; 

	font-size:15px; 

	padding-left:25px;

	margin-left:10px;

	margin-bottom:10px;

	text-shadow:1px 1px 3px #000;

	z-index:3;

}



.g-title h2:hover{

	color:rgba(204,204,204,1);	

	transition:all .3s ease-in-out;

	-webkit-transition: all .3s ease-in-out;

    -moz-transition: all .3s ease-in-out;   

    -o-transition: all .3s ease-in-out;

}



.g-main{float:left; margin:10px auto 50px 80px;}





.galleryMenu{

	position: relative;

	float:left;

	display: flex;

	flex-direction:column;

	align-items:flex-start;

	width:480px;

	margin-left:20px;

	z-index: 1;

}

.galleryMenu .case{

	position: relative;

}

.galleryMenu .case+.case{

	margin-top:0.5em;

}

.galleryMenu .case > a{

	display: flex;

	align-items: center;

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

	padding:0.05em 0.5em;

	color:#777;

	text-decoration: none;

	font-size: 1.3em;

	font-weight: bold;

	transition: color 0.2s;

}

.galleryMenu .case.active > a,

.galleryMenu .case:hover > a{

	color:#CCC;

}

.galleryMenu .case:hover{

	z-index:1;

}

.galleryMenu .case > a:before{

	content:"";

	display: block;

	border:0.4em solid transparent;

	border-right:none;

	border-left-width:0.8em;

	border-left-color:#CCC;

	margin-right:0.3em;

}

.galleryMenu .case ul{

	position: absolute;

	left:100%;

	top:0;

	padding-left:1em;

	max-height:15em;

	text-align:left;

	overflow:hidden auto;

	display:none;

}

.galleryMenu .case:hover ul{

	display:block;

}

.galleryMenu .case ul li{

	background: #333;

}

.galleryMenu .case ul li+li{

	border-top:1px solid #111;

}

.galleryMenu .case ul li a{

	color:#CCC;

	text-decoration: none;

	display: block;

	font-size: 1.1em;

	padding:0.5em 1em;

	transition: all 0.2s;

	white-space: nowrap;

}

.galleryMenu .case ul li a:hover,

.galleryMenu .case ul li.active a{

	color:#FFF;

	background: #666;

}





#member{

	float:left;

	width:289px;

	height:180px;

	border:1px #444 solid;

	background-color:#000000;

	color:#FFFFFF;

	padding:5px 5px 27px 4px;

	margin:600px 0 -500px 0;

}

#member h2{

	display:block;

	height:42px;

	padding:15 0 0 15px;

	color:#FFFFFF;

	font-weight:bold;

	font-size:20px;

	background:13px 6px #333333;

	margin:0 0 4px 0px;;

}

#member form{

	width:264px;

	padding:0 12px 0 13px;

}

#member form label{

	display:block;

	width:250px;

	float:left;

}

#member form input.txtBox{

	width:260px;

	height:24px;

	border-bottom:#D4D0C8 solid 1px;

	border-right:#D4D0C8 solid 1px;

	border-left:#404040 solid 1px;

	border-top:#404040 solid 1px;

	float:left;

}

#member form a{

	float:left;

	color:#9D0A0A;

	background-color:inherit;

	text-decoration:none;

	margin:8px 0 0 0;

}

#member form a:hover{

	text-decoration:underline;

}

#member form input.login{

	background:url(img/login_bg.gif) 0 0 no-repeat #333333;

	width:61px;

	height:20px;

	float:right;

	cursor:pointer;

	border:none;

	color:#fff;

	margin:8px 0 0 5px;

}



.qqq{

	margin-top:20px;

	padding-left:80px;

}



.yyy{

	padding-left:80px;

}



.ooo{

	margin-top:40px;

	margin-bottom:20px;

	padding-left:80px;

}



.ppp{

	width:350px;

	margin-top:20px;

	padding-left:20px;

	display:inline-block;

}



.ppp>h2>strong{

	font-size:18px;

	font-weight:bold;

	color: #CCC;

}



.g-title-chinese{

	position:relative;

	font-weight:bold;

	font-size:40px;

	letter-spacing:1px;

	text-shadow:1px 1px 3px #000;

	z-index:2;

	color:#847057;

}