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

.page-work-in{ 
	position:absolute;
	width:100%;
	overflow:hidden;
}

/*-------------------------
		裝飾元素設定
-------------------------*/

.triangle-home1{
	position:absolute;
	top:0;
	left:0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 220px 380px 0 0;
	border-color: #000 transparent transparent transparent;
	opacity:0.05;
}

.triangle-home2{
	position:absolute;
	bottom:0;
	left:0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 445px 0 0 255px;
	border-color: transparent transparent transparent #000;
	opacity:0.05;
}

.triangle-home3{
	position:absolute;
	bottom:0;
	left:0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 270px 0 0 475px;
	border-color: transparent transparent transparent #000;
	opacity:0.05;
}

.triangle-work{
	position:absolute;
	bottom:0;
	right:0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 800px 800px;
	border-color: transparent transparent #000 transparent;	
	opacity:0.05;
}

.line-group{
	position:absolute;
	left:0;
}
.line-work{
	height:1px;
	background:#ccc;			
}
.line-work:nth-of-type(1){ margin-left:10px;}
.line-work:nth-of-type(2){ margin-top: 10px;}
.line-work:nth-of-type(3){ margin-top: 20px;}
.line-work:nth-of-type(4){ margin-top: 40px;}

.device{
	position:absolute;
	top:55%;
	left:12%;
	width:1025px;
	height:635px;
	margin-top:-317.5px;
	
	-webkit-transform-origin: left;
		-ms-transform-origin: left;
			transform-origin: left;
}

.pc			 { position:absolute; z-index:1; top:0;	 	left:0;}
.tablet		 { position:absolute; z-index:2; top:175px; left:735px;	 }
.mobile		 { position:absolute; z-index:3; top:435px; left:620px; }

.pc 	.photoBox{ margin:33px 28px 0; width:640px; height:360px; }
.tablet .photoBox{ margin:41px 18px 0; width:255px; height:340px; }
.mobile .photoBox{ margin:24px  8px 0; width: 82px; height:146px; }

.photoBox{ position:relative; overflow:hidden;}
.photoBox li{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	
	background-position:center center;
	background-repeat:no-repeat;
	background-size: cover;
	
/*	opacity:0;
	filter:Alpha(Opaicty=0);*/
}

.img-cover{ 
	position:absolute;
	top:0;
	left:0;
	z-index:2;
}


/*-------------------------
		控制面板設定
-------------------------*/

.control-panel{
	position:absolute;
	right:7%;
	bottom:100px;
	width:240px;
	height:240px;	
}
.control-line1, 
.control-line2{
	position:absolute;
	top:0;
	width:1px;
	height:340px;
	background:rgba(0,0,0,0.5);
	
	-webkit-transform-origin: top;
		-ms-transform-origin: top;
			transform-origin: top;
}
.control-line1{	
	left:0;	
	-webkit-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
    		transform: rotate(-45deg);
}
.control-line2{
	right:0;
	-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
    		transform: rotate(45deg);
}

.casename{
	position:absolute;
	top:50%;
	margin-top:80px;
	width:100%;
	text-align:center;

}
.casename .tw{font-size:16px;}
.casename .en{font-size:13px; color:#666; margin-top:4px;}

.case-logo{
	position:absolute;
	top:0;
	left:50%;
	margin-left:-85px;
	margin-top:-85px;
	width:170px;
	height:170px;
	
    -webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
    		transform: rotate(45deg);
}

.case-logo img{
	position:absolute;
	top:60%;
	left:60%;
	
	-webkit-transform:translate(-50%, -50%) rotate(-45deg);
		-ms-transform:translate(-50%, -50%) rotate(-45deg);
		 	transform:translate(-50%, -50%) rotate(-45deg);
}

.control-bn{
	position:absolute;
	top:50%;
	width:40px;
	height:40px;
	background:#ddd;
	cursor:pointer;
	z-index:2;
		
    -webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
    		transform: rotate(45deg);
			
	-webkit-transition: background .3s ease-in-out;
       -moz-transition: background .3s ease-in-out;
         -o-transition: background .3s ease-in-out;
            transition: background .3s ease-in-out;
}

.idPrev { right:50%; margin-top: -20px; margin-right:16px;}
.idNext { left: 50%; margin-top: -20px; margin-left: 16px;}
.idClose{ left: 50%; margin-left:-20px; margin-top:  16px;}

.control-bn img{
	position:absolute;
	top:50%;
	left:50%;
	
	-webkit-transform:translate(-50%, -50%) rotate(-45deg);
		-ms-transform:translate(-50%, -50%) rotate(-45deg);
		 	transform:translate(-50%, -50%) rotate(-45deg);
}

.control-bn:hover{ background:#81D1C6;}


/*------------------------------------------
              Mobile 、tablet
------------------------------------------*/
@media only screen and (max-width : 1200px){
	.tablet{display:none;}
}
@media only screen and (max-width : 1000px){
	.device{ left:5%;}
	.control-panel{ right:5%;}
}
@media only screen and (max-width : 780px){
	header,
	.tablet, .mobile,.img-cover, .line-group,
	.control-line1, .control-line2,
	.idPrev, .idNext{ 
		display:none;
	}	
	
	.device{
		position:relative;
		left:0;
		width:100%;
		/*height:auto;*/
		margin:0;
	}
	
	.pc{ position:static; left:0; height:100%;}		
	.pc .photoBox{ margin:0; width:100%; height:100%;}	
	.pc .photoBox li{
		position:relative;
		left:auto;
		width:100%;
		margin-top:10px;
		box-shadow: 0px 0px 2px #888;
		/*height:100%;*/
	}
	.pc .photoBox li:first-child{margin-top:0;}
	
	.control-panel{	
		position:relative;
		margin:auto;
		right:0;
		bottom:0;
		height:180px;
	}
	
	.casename{ top:100px; margin-top:0;}
	.case-logo{ margin-top:-60px;}
	
	.idClose{
		position:fixed;
		top:25px;
		right:25px;		
		left: auto;
		margin:0;
		z-index:2;
		background:rgba(221,221,221,0.8);
	}
}

@media only screen and (max-width : 520px){
	.idClose{
		top:35px;
		right:15px;		
		
		-webkit-transform-origin: right;
			-ms-transform-origin: right;
				transform-origin: right;
		
		-webkit-transform:translate(-50%, -50%) rotate(-45deg) scale(0.8);
			-ms-transform:translate(-50%, -50%) rotate(-45deg) scale(0.8);
		 		transform:translate(-50%, -50%) rotate(-45deg) scale(0.8);
	}