@charset "utf-8";
/* CSS Document */
@import 'reset.css';
@import 'about.css';
@import 'product.css';
@import 'tech.css';
@import 'contact.css';
@import 'application.css';


/* common
============================================*/
body{ font:12px 微軟正黑體,Verdana, Arial, Helvetica, sans-serif; /*overflow:hidden;*/}
#wrapper{ position:absolute; display:block; width:100%; height:100%; min-width:1200px; min-height:800px;}
body#index{overflow: hidden;}
/* LOGO */
h1 a{ position:absolute; display:block; width:129px; height:70px; left:4px; top:0px; text-indent:-9999px; z-index:1000; background:url(../images/logo.jpg) no-repeat center center; background-size: contain; }
.COMPAC_logo{ position: fixed; bottom: 70px; left: 55px; width: 252px; height: 60px; display: block; background: url(../images/img_logo.jpg) center center no-repeat; background-size: contain; box-shadow: 0 0 10px rgba(0,0,0,.5); }
/* FOOTER */
.footer{ position:fixed; display:block; width:100%; height:40px; left:0; bottom:0; background:url(../images/footer.jpg) 0 0 repeat; z-index:10000; text-align:right;}
.footer img{ padding:10px 10px 0 0 ;}

/*選單列*/
.nav{display:none; position:fixed; left:50px; top:0px; width:138px; height:330px; background:url(../images/menu_bg.png) no-repeat; z-index:1000;}
.nav li{ float:left; cursor: pointer; }
.nav li a{ position: relative; display:block; width:129px; height:330px; text-align: center;color: #fff; height:30px; line-height: 30px; font-size: 16px; text-decoration: none; /*background:url(../images/menu.jpg) no-repeat;*/left:4px;}
.nav li a::before{ content: ""; width: 0; display: none;
height: 0;
border-style: solid;
border-width: 3px 0 3px 5px;
border-color: transparent transparent transparent #ffffff;
line-height: 0px;
_border-color: #000000 #000000 #000000 #ffffff;
_filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');  position: absolute; left: 20px; top: 12px;}

.nav li a:hover{ background-color: #353533; }
.nav li a:hover::before{ display: block; }

.nav li.navAbout a{  width:129px; position:absolute; top:80px;}
.nav li.navProduct a{ width:129px; height:30px; position:absolute; top:115px;}
.nav li.navApplication a{ width:129px; height:30px; position:absolute; top:150px; }
.nav li.navTech a{ width:129px; height:30px; position:absolute; top:185px;}
.nav li.navContact a{ width:129px; height:30px; position:absolute; top:220px;}
.nav li.navScroll{ width:129px; height:30px; position:absolute; top:296px; background-position:0px -241px; cursor: pointer; }


.nav .social {
	position: absolute;
	top: 267px;
	left: 0;
	width: 100%;
}

p.copyright{
	padding: 0 10px; color: #fff; line-height: 40px; font-size: 13px; letter-spacing: 1px; font-weight: normal; font-family: Arial, Helvetica, sans-serif; display: inline-block;}
}
.navApplication{position: relative;}
.nav li.navApplication ul{
	left: 2px; top: 0;
	display:none;
	position: absolute;
	margin-left:132px;
	margin-top:148px;
}

.nav li.navApplication ul li a{ min-width: 170px; background:#626262; top: initial; left: initial; position: inherit;}
.nav li.navApplication ul li a:hover{ color: #dfd4d4; }
.nav li.navApplication ul li a::before{ display: none; }
/* 首頁
============================================*/
body#index{ background:url(../images/index_bg.jpg) no-repeat fixed 50% 50%;}
#main{ position: absolute; top: 0; left: 0; width:100%; height:100%;}
#plane{
	position:absolute;
	display:block;
	width:1200px;
	height:800px;
	top:50%; /*距離上方的位置*/
	left:50%; /*距離左方的位置*/
	margin-top:-400px; /*上方邊界*/
	margin-left:-600px; /*左方邊界*/
}


/*背景動畫*/

	#supersize{
			position:fixed;
		}
		
	#supersize img, #supersize a{
			height:100%;
			width:100%;
			position:absolute;
			z-index: 0;
		}
	#supersize .prevslide, #supersize .prevslide img{
			z-index: 1;
		}
	#supersize .activeslide, #supersize .activeslide img{
			z-index: 2;
		}

.fix_close{
	width:17px;
	height:17px;
	padding: 10px 15px;
	background:url(../images/fix_close.png) no-repeat center center;
	position:absolute;
	top:20px;
	right:0px;
	z-index:9999;
	cursor: pointer; 
}


.social {
	display: inline-block;
	vertical-align: middle;
	text-align: center;
	font-size: 0;
}

.social a {
	margin: 0 5px;
}

.social a:hover {
	opacity: .7;
}

.social .icon {
	width: 24px;
	height: 24px;
	overflow: hidden;
	display: inline-block;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.social .icon-facebook {
	background-image: url(../images/icon-facebook.png);
}

.social .icon-instagram {
	background-image: url(../images/icon-instagram.png);
}