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

.parallax-layer{
	position:absolute;
	width:100%;
}

.base{ z-index:2;}
.back{ z-index:1;}
.fore{ z-index:3;}

/*-------------------------
	   	  首頁設定
-------------------------*/

.page-home{ 
	position:fixed;	
	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;
}

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

.slogan-home{
	position:absolute;
	top:50%;
	left:10%;
	
	-webkit-transform:translateY(-50%);
		-ms-transform:translateY(-50%);
		 	transform:translateY(-50%);
}

.slogan-home h2{		
	font-size:18px; 
	letter-spacing:1.5px;	
	position:relative;
}

.slogan-home h1{ 
	color: #B32829;
	letter-spacing:8px;
	font-size:34px;
	margin:25px 0 80px 45px;	
	position:relative;
}

.slogan-home p{ 
	color:#999;
	text-align:center;
	line-height:2;
	display:inline-block;	
	position:relative;
}

.dsic{
	width:4px;
	height:4px;
	background:#999;
	display:inline-block;
	border-radius:50%;
	margin:5px 15px;
	vertical-align:middle;
}

.device{
	position:absolute;
	top:50%;
	right:100px;
	width:1025px;
	height:635px;
	margin-top:-317.5px;
	
	-webkit-transform-origin: right;
	-ms-transform-origin: right;
	transform-origin: right;
}

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

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

.open { position:relative; overflow:hidden;}
.open 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);*/
	
	-webkit-transition: opacity 1s ease-in-out;
       -moz-transition: opacity 1s ease-in-out;
         -o-transition: opacity 1s ease-in-out;
            transition: opacity 1s ease-in-out;
}

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

/*-------------------------
	   	 about 設定
-------------------------*/

.heading{
	position:absolute;
	right:100px;
	margin-top:0;
	font-family: 'Century Gothic';
	font-size:38px;
	line-height:1.2;
	color:#000;
/*	border:#0F0 10px solid;*/
	
	-webkit-transition: all .6s ease-in-out;
       -moz-transition: all .6s ease-in-out;
         -o-transition: all .6s ease-in-out;
            transition: all .6s ease-in-out;
}

.page-about .content{	
	position:relative;
	height:600px;
	/*padding-bottom:31.25%;*/
	background:#222;
	overflow:hidden;
}

.bg-img-about{
	position:absolute;
	right:-100px;
	bottom:-80px;
	opacity:0.5;
}

.page-about .text{
	position:relative;
	width:50%;
	padding:20px;
	text-align:center;
	color:#fff;
	line-height:2;
	
	top:50%;
	-webkit-transform:translateY(-50%);
		-ms-transform:translateY(-50%);
		 	transform:translateY(-50%);
}

.title-about{
	position:absolute;
	width:214px;
	height:100%;
	top:0;
	left:50%;
	margin-left:-109px;
	background:url(../images/about/title.png) no-repeat center center;
	background-size:contain;
}

.slogan-about{
	position:relative;
	height:150px;
	line-height:150px;
	background:#000;
	color:#999;
	text-align:center;
	font-size:18px;
	overflow:hidden;
}

.slogan-about h1{ line-height:1.2; color:#fff;}

/*-------------------------
	   	 work 設定
-------------------------*/

.page-work{	opacity:0;}

.page-work{ 
	position:fixed;
	top:0;
	left:0;
	width:100%;
	background:#fff;
	overflow:hidden;
}

.page-work .content{	
	position:relative;
	height:100%;
	overflow:hidden;
}

.work-box{
	position:absolute;
	width:694px;
	height:565px;
	top:50%;
	left:25%;
	margin-top:-282.5px;
	margin-left:-347px;
	/*overflow: hidden;*/
}

.work-box > img{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:99%;
}

.scroll{
	position:relative;
	margin:33px 28px 0;
	width:640px;
	height:360px;
	padding-bottom:220px;
}

.scroll .mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_draggerRail{height:1px; background:#666;}
.scroll .mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.scroll .mCSB_scrollTools_horizontal .mCSB_dragger:hover .mCSB_dragger_bar { background-color:#BC262A;}
.scroll .mCSB_scrollTools_horizontal .mCSB_buttonLeft,
.scroll .mCSB_scrollTools_horizontal .mCSB_buttonRight{ width: 12px; height: 20px; margin-top:-3px;}
.scroll .mCSB_scrollTools_horizontal .mCSB_buttonLeft{ left: 0;  background:url(../images/work/arrowL.png) center center;}
.scroll .mCSB_scrollTools_horizontal .mCSB_buttonRight{ right:0; background:url(../images/work/arrowR.png) center center;}
	
.work-box ul{ position:relative;}
.work-box ul li{ float:left; }

.case-list{
	position:absolute;
	top:50%;
	left:75%;
	width:732px;
	margin-top:-235px;
	margin-left:-365.5px;
	text-align:center;
}

.case-list ul{
	position:relative;
	width:auto;
	/*overflow:hidden;*/
	margin:0;
	display:inline-block;
	text-align:center;
}

.case-list li{
	position:relative;
	width:120px;
	height:120px;
	background:#e0e0e2;
	margin:-15px 30px;
	display:inline-block;
	opacity:0;
	
    -webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
    		transform: rotate(45deg);
}

.case-list li 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);
}

.case-list li.hover,
.case-list li.on{
	background:#81D1C6;	
}

/*-------------------------
	   	 service 設定
-------------------------*/

.triangle-service1{
	position:absolute;
	top:0;
	left:0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 395px 265px 0 0;
	border-color: #fff transparent transparent transparent;
	opacity:0.05;
}

.triangle-service2{
	position:absolute;
	bottom:0;
	left:0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 740px 0 0 425px;
	border-color: transparent transparent transparent #fff;
	opacity:0.05;
}

.triangle-service3{
	position:absolute;
	bottom:0;
	right:0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 220px 380px;
	border-color: transparent transparent #fff transparent;
	opacity:0.05;
}

.page-service .content{	
	position:relative;
	background:#222;
	overflow:hidden;
}

.service-list ul{
	position:relative;
	width:47%;	
	margin:100px auto 0;
	min-width:720px;
	overflow:hidden;
}

.service-list li{
	position:relative;
	float:left;
	width:33.33%;
	text-align:center;
	height:0;
	padding-bottom:22%;	
}

.service-photo{
	width:100%;
	height:0;
	padding-bottom:30%;
	margin:11% 0 10px 0;
	
	background-position:center center;
	background-repeat:no-repeat;	
}

.service-name{
	width:120px;
	text-align:center;
	color:#fff;
	line-height:40px;
	border-top:#81D1C6 2px solid;
	display:inline-block;
}

.page-service .text{
	position:relative;
	padding:20px;
	margin:40px 0;
	text-align:center;
	color:#BC262A;
	line-height:2;
	letter-spacing:2px;
}

/*-------------------------
	   	 contact 設定
-------------------------*/

.page-contact{ opacity:0;}

#map0{position:relative;}

.page-contact{ 
	position:fixed;
	top:0;
	left:0;
	width:100%;
	background:#fff;
	overflow:hidden;
}

.page-contact .content{	
	position:relative;
	height:100%;
	overflow:hidden;
}

.page-contact h1{
	position:relative;
	right:0;
	text-align:center;
	margin:5% auto 0;
}

.page-contact .text-wrap{
	position:relative;
	overflow:hidden;
	background:url(../images/line.png) no-repeat center center;
	margin-bottom:4%;
}

.page-contact .text{
	position:relative;
	width:50%;
	height:100%;
	padding:0 20px;
	text-align:center;
	color:#000;
	line-height:2;	
	box-sizing:border-box;
}
/*.page-contact .text:nth-child(even){ background:rgba(30,40,50,0.6);}*/
.page-contact .text a{ color:#000; }
.page-contact .text a:hover{ text-decoration:underline;}

.page-contact .w-area{
	position:absolute;
	text-align:left;
	letter-spacing:1px;
	color:#666;
	white-space: nowrap;
	
	top:50%;
	left:50%;
	-webkit-transform:translate(-50%, -50%);
		-ms-transform:translate(-50%, -50%);
		 	transform:translate(-50%, -50%);
}

.contact-title{
	margin-bottom:10px;
	font-weight:bold;	
	font-size:15px;
	color:#000;
}

.contact-title .tw{
	letter-spacing:2px;
	padding:2px 0;
	border-bottom:#BC262A 2px solid;	
}

.contact-info li{
	padding-left:40px;
}

.contact-info .item{
	position:absolute;
	left:0;
}

/*-------------------------
	   	footer 設定
-------------------------*/

.page-footer .content{
	position:relative;
	height:80px;
	padding:35px 0;
	background:#222;
	overflow:hidden;
}

.footer-logo{
	position:absolute;
	left:5%;
	height:80px;
	padding-left:110px;
	background:url(../images/footer/footer-logo.png) no-repeat;
	color:#999;
	font-size:13px;
}

.footer-logo .word{
	position:relative;
	top:50%;
	-webkit-transform:translateY(-50%);
		-ms-transform:translateY(-50%);
		 	transform:translateY(-50%);
}
.footer-logo .en, 
.footer-logo .en a{ 
	font-size:12px;
	color:#999;
}

.page-footer .text{
	position:absolute;
	right:5%;
	height:80px;
	background:url(../images/footer/footer-line.png) no-repeat 300px center;
}

.link,
.share{
	display:inline-block;
	overflow:hidden;
	margin-top:15px;
}

.page-footer .t1{
	color:#81D1C6;
	text-align:right;
	margin-bottom:15px;	
	font-size:13px;
}

.link ul{ margin-left:-30px;}

.link li{
	position:relative;
	margin-left:30px;
	display:inline-block;
}

.link li a{
	color:#fff;
	font-size:13px;
}
.link li a:hover{ color:#999; }

.arrow{
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 4px 0 4px 4px;
	border-color: transparent transparent transparent #81D1C6;
	display:inline-block;
	margin-right:5px;	
}

.share ul{
	text-align:right;
	margin-top:-4px;
	margin-left:75px;
}

.share li{
	margin-left:10px;
	display:inline-block;
	cursor:pointer;
}