@charset "utf-8";
/* CSS Document */
* { font-family: "儷黑體", "儷中黑", "黑體", Verdana, "微軟正黑體", "新細明體", Arial, Geneva, sans-serif; }

@font-face {
  font-family: MyCustomFont;
  unicode-range: U+00-7F; /* ASCII */
  src: local(Helvetica), local(Arial); /* 先找 Helvetica ，沒有的話用 Arial */
  
}
body {
	margin: 0;
	min-width: 1000px;
	padding: 0;
}

p {
	font-size: 1.125em; /* 18px */
	color: #444;
	font-weight: normal;
	line-height: 1.625em; /* 26px */
}

h1 { /*簡介內文*/
	font-size: 1.250em; /* 20px */
	color: #444;
	font-weight: normal;
	line-height: 1.625em; /* 26px */
}

h2 { /*首頁標題*/
	font-size: 1.250em; /* 20px */
	color: #12adb3;
	font-weight: normal;
	padding: 10px;
	border: dashed 1px #12adb3;
	-webkit-border-radius: 10px;
            border-radius: 10px;
	width: 420px;
	position: absolute;
	float: left;
	top: 440px;
	left: 73px;
}

h3 { /*大標-灰*/
	font-size: 2.500em; /* 40px */
	color: #555;
	font-weight: bold;
}

h4 { /*大標-白*/
	font-size: 2.500em; /* 40px */
	color: #fff;
	font-weight: bold;
}

h5 { /*案例大標*/
	font-size: 2.250em; /* 36px */
	color: #f7941e;
}

h6 { /*客戶名稱*/
	font-size: 1.500em; /* 24px */
	color: #999;
}


section {
	width: 1000px;
	margin-left:auto;
	margin-right:auto;
	position: relative;
	/*border: solid 1px #0F0;*/
	}
	
article {}

/*------------------ 側邊點點選單 ------------------*/
#nav {
	list-style: none;
	position: fixed;
	top: 250px;
	right: 20px;
	z-index:999;
}

#nav li {
	margin: 15px 0 15px 0;	
}

#nav li a{
	width: 15px;
	height: 15px;
	-webkit-border-radius: 10px;
            border-radius: 10px;
	background-color: #fff;
	border: solid 1px #ddd;
	display:block;
}
#nav li a:hover,
#nav li a.dot {
	width: 15px;
	height: 15px;
	-webkit-border-radius: 10px;
            border-radius: 10px;
	background-color: #ddd;
	border: solid 1px #fff;
	display:block;
}
/**/

/*------------------ 主選單 ------------------*/
.menu {
	width: 100%;
	height: 60px;
	background-color: #fff;
	box-shadow:0px 1px 3px rgba(0,0,0,0.3);
	margin: 0px;
	padding: 0px;
	z-index:999;
	position: fixed;
}
.menu_inside {
	width: 1000px;
	margin-left: auto;
	margin-right:auto;
	position: relative;
	}
.menu_inside li.none,
.menu_inside li.none a,
.menu_inside li.none a:hover,
.menu_inside li.none a.txt:hover,
.menu_inside li.none a:hover{
	margin:0px;
	padding:0px;
	border:0px;
	width:0px;
	height:0px;
	background:#fff;
	}
.menu_inside ul {
	list-style: none; 
	padding:0;
	float: right;
  }
.menu_inside li{
	display: inline-block;
	border:0; 
	margin-left: 20px;
	margin-right: 10px;
	line-height: 60px;
	width:80px;
  }
.menu_inside a{
	color: #555;
	font-size: 0.938em; /* 15px */
	text-decoration:none;
	padding-right: 13px;
	background:url(../images/nav_arrow.png) no-repeat right center;
	}	
.menu_inside a.txt,
.menu_inside a.txt:hover,
.menu_inside a:hover {
	color: #888;
	background:url(../images/nav_arrow.png) no-repeat right 1px;
	}		
	
	
.logo {
    cursor:pointer;
	float: left;
	width: 261px;
	height: 100px;
	background:url(../images/nav_logo.png) no-repeat;
	z-index:999;
	}
/**/

#cover, #intro, #mobile, #system, #experience, #case, #contact {
	width: 100%;
}

/*------------------ P1首頁 ------------------*/
#cover {
	background:url(../images/cover.png) 50% 0 no-repeat fixed;
	height: 900px;
	margin: 0 auto;
	padding: 0;
	overflow: hidden;
}

#cover .logoB  {
	background:url(../images/cover_logo.png) no-repeat;
	width: 183px;
	height: 31px;
	position: absolute;
	float: right;
	top: 260px;/*200*/
	right: 53px;
	}
	
#cover .slogan  {
	background:url(../images/cover_title.png) no-repeat;
	width: 455px;
	height: 58px;
	position: absolute;
	float: left;
	top: 500px;
	left: 75px;
	}
	
#cover .down a  {
	background:url(../images/cover_down.gif) no-repeat;
	width: 209px;
	height: 63px;
	position: absolute;
	float: left;
	top: 728px;
	left: 397px;
	}
/**/

/*------------------ P2簡介 ------------------*/
#intro {
	background:url(../images/intro_i5a.png) 50% -100px no-repeat fixed,url(../images/intro.png) 50% 0 repeat-y fixed;
	height: 900px;
	margin: 0 auto;
	padding: 0;
	position:relative;
	overflow:hidden;
}

#intro h3 {
	position: absolute;
	float: left;
	top: 170px;
	left: 92px;
	display: block;
	}
	
#intro h1 {
	position: absolute;
	float: left;
	top: 230px;
	left: 92px;
	padding-right: 190px;
	display: block;
	}
	
.introScroll{
	-webkit-animation:iphoneScroll;
	-moz-animation:iphoneScroll;
	-o-animation:iphoneScroll;
	-ms-animation:iphoneScroll;
	animation:iphoneScroll;
	
	-webkit-animation-duration: 0.7s;
	-moz-animation-duration: 0.7s;
	-o-animation-duration: 0.7s;
	-ms-animation-duration: 0.7s;
	animation-duration:0.7s;
	
	-webkit-animation-timing-function: linear; 
	-moz-animation-timing-function: linear; 
	-o-animation-timing-function: linear; 
	-ms-animation-timing-function: linear; 
	animation-timing-function: linear; 
	
	-webkit-animation-fill-mode:forwards;
	-moz-animation-fill-mode:forwards;
	-o-animation-fill-mode:forwards;
	-ms-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
	
	-webkit-animation-iteration-count:1;
	-moz-animation-iteration-count:1;
	-o-animation-iteration-count:1;
	-ms-animation-iteration-count:1;
	animation-iteration-count:1;
	}
	
@-webkit-keyframes iphoneScroll {
	0% {background:url(../images/intro_i5a.png) 50% 0px no-repeat fixed,url(../images/intro.png) 50% 0 repeat-y fixed;}
	100% {background:url(../images/intro_i5a.png) 50% 366px no-repeat fixed,url(../images/intro.png) 50% 0 repeat-y fixed;}
}
@-moz-keyframes iphoneScroll{
	0% {background:url(../images/intro_i5a.png) 50% 0px no-repeat fixed,url(../images/intro.png) 50% 0 repeat-y fixed;}
	100% {background:url(../images/intro_i5a.png) 50% 366px no-repeat fixed,url(../images/intro.png) 50% 0 repeat-y fixed;}
}
@-o-keyframesiphoneScroll {
	0% {background:url(../images/intro_i5a.png) 50% 0px no-repeat fixed,url(../images/intro.png) 50% 0 repeat-y fixed;}
	100% {background:url(../images/intro_i5a.png) 50% 366px no-repeat fixed,url(../images/intro.png) 50% 0 repeat-y fixed;}
}
@-ms-keyframes iphoneScroll {
	0% {background:url(../images/intro_i5a.png) 50% 0px no-repeat fixed,url(../images/intro.png) 50% 0 repeat-y fixed;}
	100% {background:url(../images/intro_i5a.png) 50% 366px no-repeat fixed,url(../images/intro.png) 50% 0 repeat-y fixed;}
}
@keyframes iphoneScroll {
	0% {background:url(../images/intro_i5a.png) 50% 0px no-repeat fixed,url(../images/intro.png) 50% 0 repeat-y fixed;}
	100% {background:url(../images/intro_i5a.png) 50% 366px no-repeat fixed,url(../images/intro.png) 50% 0 repeat-y fixed;}
}

/**/


/*------------------ P3行動技術 ------------------*/
#mobile {
	background:url(../images/mobile_dots.png) repeat;
	height: 900px;
	margin: 0 auto;
	padding: 0;
	overflow:hidden;
}

#mobile .title{
	position: absolute;
	opacity:0;
	top:600px;
	left: 44px;
	}
#mobile .pic1 {
	background:url(../images/mobile_pic1.png) no-repeat;
	width: 170px;
	height: 178px;
	display: block;
	}
	
#mobile h3 {
	}
	
/*1-影像處理*/	
ul.mobile_list{
	position:absolute;
	top:155px;
	left:214px;
	height:430px;
	}
.mobile_list li{
	display: inline-block;
	zoom:1;
     *display: inline;
	 
	}
.mobile_h3{
	font-size: 1.375em;
	padding:0px 0px 13px;
	}

.block1 { 
	background:url(../images/mobile_pic2.png) no-repeat;
	width: 188px;
	height: 210px;
	color:#fff;
	line-height:1.5em;
	overflow:hidden;
	position: absolute ;
	top:0px;
	cursor:crosshair;
	}
.block1 .content_hover{
	background:#8ce071;
	margin:0px;
	padding:15px 15px 30px;
	width: 188px;
	position:absolute;
	top:158px;
	}
	
.block1.mouseenter  .content_hover{
	-webkit-animation:mouseenter01;
	-moz-animation:mouseenter01;
	-o-animation:mouseenter01;
	-ms-animation:mouseenter01;
	animation:mouseenter01;
	
	-webkit-animation-duration: 0.2s;
	-moz-animation-duration: 0.2s;
	-o-animation-duration: 0.2s;
	-ms-animation-duration: 0.2s;
	animation-duration: 0.2s;
	
	-webkit-animation-timing-function: linear; 
	-moz-animation-timing-function: linear; 
	-o-animation-timing-function: linear; 
	-ms-animation-timing-function: linear; 
	animation-timing-function: linear; 
	
	-webkit-animation-fill-mode:forwards;
	-moz-animation-fill-mode:forwards;
	-o-animation-fill-mode:forwards;
	-ms-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
	
	-webkit-animation-iteration-count:1;
	-moz-animation-iteration-count:1;
	-o-animation-iteration-count:1;
	-ms-animation-iteration-count:1;
	animation-iteration-count:1;
	}
	
@-webkit-keyframes mouseenter01 {
	0% {top:158px;}
	100% {top:0px;}
}
@-moz-keyframes mouseenter01 {
	0% {top:158px;}
	100% {top:0px;}
}
@-o-keyframes mouseenter01 {
	0% {top:158px;}
	100% {top:0px;}
}
@-ms-keyframes mouseenter01 {
	0% {top:158px;}
	100% {top:0px;}
}
@keyframes mouseenter01 {
	0% {top:158px;}
	100% {top:0px;}
}

.block1.mouseleave  .content_hover{
	-webkit-animation:mouseleave01;
	-moz-animation:mouseleave01;
	-o-animation:mouseleave01;
	-ms-animation:mouseleave01;
	animation:mouseleave01;
	
	-webkit-animation-duration: 0.2s;
	-moz-animation-duration: 0.2s;
	-o-animation-duration: 0.2s;
	-ms-animation-duration: 0.2s;
	animation-duration: 0.2s;
	
	-webkit-animation-timing-function: linear; 
	-moz-animation-timing-function: linear; 
	-o-animation-timing-function: linear; 
	-ms-animation-timing-function: linear; 
	animation-timing-function: linear; 
	
	-webkit-animation-fill-mode:forwards;
	-moz-animation-fill-mode:forwards;
	-o-animation-fill-mode:forwards;
	-ms-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
	
	-webkit-animation-iteration-count:1;
	-moz-animation-iteration-count:1;
	-o-animation-iteration-count:1;
	-ms-animation-iteration-count:1;
	animation-iteration-count:1;
	}
	
@-webkit-keyframes mouseleave01 {
	0% {top:0px;}
	100% {top:158px;}
}
@-moz-keyframes mouseleave01 {
	0% {top:0px;}
	100% {top:158px;}
}
@-o-keyframes mouseleave01 {
	0% {top:0px;}
	100% {top:158px;}
}
@-ms-keyframes mouseleave01 {
	0% {top:0px;}
	100% {top:158px;}
}
@keyframes mouseleave01 {
	0% {top:0px;}
	100% {top:158px;}
}

.block2 { 
	background:#fff;
	width: 158px;/*188*/
	height: 165px;/*210*/
	margin:10px 0px 0px;
	overflow:hidden;
	color:#999;
	line-height:1.5em;
	
	padding:15px 15px 30px;
	position: absolute ;
	top:210px;
	}
.block2 .mobile_h3{
	padding-bottom:40px
	}
	
.block3 { 
	background:url(../images/mobile_pic3.png) no-repeat;
	width: 386px;
	height: 430px;
	color:#fff;
	line-height:1.5em;
	margin:0px 3px;
	overflow:hidden;
	position:relative;
	cursor:crosshair;
	}
.block3 .content_hover{
	background:#00d1c1;
	margin:0px;
	padding:15px 15px 30px;
	width: 386px;
	position:absolute;
	top:376px;
	
	}
	
.block3 .mobile_h3{
	padding-bottom:188px
	}


	
.block3.mouseenter  .content_hover{
	-webkit-animation:mouseenter02;
	-moz-animation:mouseenter02;
	-o-animation:mouseenter02;
	-ms-animation:mouseenter02;
	animation:mouseenter02;
	
	-webkit-animation-duration: 0.2s;
	-moz-animation-duration: 0.2s;
	-o-animation-duration: 0.2s;
	-ms-animation-duration: 0.2s;
	animation-duration: 0.2s;
	
	-webkit-animation-timing-function: linear; 
	-moz-animation-timing-function: linear; 
	-o-animation-timing-function: linear; 
	-ms-animation-timing-function: linear; 
	animation-timing-function: linear; 
	
	-webkit-animation-fill-mode:forwards;
	-moz-animation-fill-mode:forwards;
	-o-animation-fill-mode:forwards;
	-ms-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
	
	-webkit-animation-iteration-count:1;
	-moz-animation-iteration-count:1;
	-o-animation-iteration-count:1;
	-ms-animation-iteration-count:1;
	animation-iteration-count:1;
	}
	
@-webkit-keyframes mouseenter02 {
	0% {top:376px;}
	100% {top:0px;}
}
@-moz-keyframes mouseenter02 {
	0% {top:376px;}
	100% {top:0px;}
}
@-o-keyframes mouseenter02 {
	0% {top:376px;}
	100% {top:0px;}
}
@-ms-keyframes mouseenter02 {
	0% {top:376px;}
	100% {top:0px;}
}
@keyframes mouseenter02 {
	0% {top:376px;}
	100% {top:0px;}
}

.block3.mouseleave  .content_hover{
	-webkit-animation:mouseleave02;
	-moz-animation:mouseleave02;
	-o-animation:mouseleave02;
	-ms-animation:mouseleave02;
	animation:mouseleave02;
	
	-webkit-animation-duration: 0.2s;
	-moz-animation-duration: 0.2s;
	-o-animation-duration: 0.2s;
	-ms-animation-duration: 0.2s;
	animation-duration: 0.2s;
	
	-webkit-animation-timing-function: linear; 
	-moz-animation-timing-function: linear; 
	-o-animation-timing-function: linear; 
	-ms-animation-timing-function: linear; 
	animation-timing-function: linear; 
	
	-webkit-animation-fill-mode:forwards;
	-moz-animation-fill-mode:forwards;
	-o-animation-fill-mode:forwards;
	-ms-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
	
	-webkit-animation-iteration-count:1;
	-moz-animation-iteration-count:1;
	-o-animation-iteration-count:1;
	-ms-animation-iteration-count:1;
	animation-iteration-count:1;
	}
	
@-webkit-keyframes mouseleave02 {
	0% {top:0px;}
	100% {top:376px;}
}
@-moz-keyframes mouseleave02 {
	0% {top:0px;}
	100% {top:376px;}
}
@-o-keyframes mouseleave02 {
	0% {top:0px;}
	100% {top:376px;}
}
@-ms-keyframes mouseleave02 {
	0% {top:0px;}
	100% {top:376px;}
}
@keyframes mouseleave02 {
	0% {top:0px;}
	100% {top:376px;}
}

	
.block4 { 
	background:#fff;
	width: 158px;/*188*/
	height: 165px;/*210*/
	overflow:hidden;
	color:#999;
	line-height:1.5em;
	
	padding:15px 15px 30px;
	position: absolute ;
	top:0px;
	}
	
.block4 .mobile_h3{
	padding-bottom:40px
	}
	
.block5 { 
	background:url(../images/mobile_pic4.png) no-repeat;
	width: 188px;
	height: 210px;
	margin:10px 0px 0px;
	overflow:hidden;
	
	color:#fff;
	line-height:1.5em;
	overflow:hidden;
	position:relative;
	cursor:crosshair;
	}

.block5 .content_hover{
	background:#ff5a60;
	margin:0px;
	padding:15px 15px 30px;
	width: 188px;
	position:absolute;
	top:158px;
	}
.block5 .mobile_h3{
	padding-bottom:40px
	}

.block5.mouseenter  .content_hover{
	-webkit-animation:mouseenter01;
	-moz-animation:mouseenter01;
	-o-animation:mouseenter01;
	-ms-animation:mouseenter01;
	animation:mouseenter01;
	
	-webkit-animation-duration: 0.2s;
	-moz-animation-duration: 0.2s;
	-o-animation-duration: 0.2s;
	-ms-animation-duration: 0.2s;
	animation-duration: 0.2s;
	
	-webkit-animation-timing-function: linear; 
	-moz-animation-timing-function: linear; 
	-o-animation-timing-function: linear; 
	-ms-animation-timing-function: linear; 
	animation-timing-function: linear; 
	
	-webkit-animation-fill-mode:forwards;
	-moz-animation-fill-mode:forwards;
	-o-animation-fill-mode:forwards;
	-ms-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
	
	-webkit-animation-iteration-count:1;
	-moz-animation-iteration-count:1;
	-o-animation-iteration-count:1;
	-ms-animation-iteration-count:1;
	animation-iteration-count:1;
	}
	

.block5.mouseleave  .content_hover{
	-webkit-animation:mouseleave01;
	-moz-animation:mouseleave01;
	-o-animation:mouseleave01;
	-ms-animation:mouseleave01;
	animation:mouseleave01;
	
	-webkit-animation-duration: 0.2s;
	-moz-animation-duration: 0.2s;
	-o-animation-duration: 0.2s;
	-ms-animation-duration: 0.2s;
	animation-duration: 0.2s;
	
	-webkit-animation-timing-function: linear; 
	-moz-animation-timing-function: linear; 
	-o-animation-timing-function: linear; 
	-ms-animation-timing-function: linear; 
	animation-timing-function: linear; 
	
	-webkit-animation-fill-mode:forwards;
	-moz-animation-fill-mode:forwards;
	-o-animation-fill-mode:forwards;
	-ms-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
	
	-webkit-animation-iteration-count:1;
	-moz-animation-iteration-count:1;
	-o-animation-iteration-count:1;
	-ms-animation-iteration-count:1;
	animation-iteration-count:1;
	}
	


.mobileScroll .title{
	-webkit-animation:mobileScroll;
	-moz-animation:mobileScroll;
	-o-animation:mobileScroll;
	-ms-animation:mobileScroll;
	animation:mobileScroll;
	
	-webkit-animation-duration: 1s;
	-moz-animation-duration: 1s;
	-o-animation-duration: 1s;
	-ms-animation-duration: 1s;
	animation-duration: 1s;
	
	-webkit-animation-timing-function: ease-in-out; 
	-moz-animation-timing-function: ease-in-out; 
	-o-animation-timing-function: ease-in-out; 
	-ms-animation-timing-function: ease-in-out; 
	animation-timing-function: ease-in-out; 
	
	-webkit-animation-fill-mode:forwards;
	-moz-animation-fill-mode:forwards;
	-o-animation-fill-mode:forwards;
	-ms-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
	
	-webkit-animation-iteration-count:1;
	-moz-animation-iteration-count:1;
	-o-animation-iteration-count:1;
	-ms-animation-iteration-count:1;
	animation-iteration-count:1;
	}
	
@-webkit-keyframes mobileScroll {
	0% {top:900px;opacity:0;}
	100% {top:320px;opacity:1;}
}
@-moz-keyframes mobileScroll {
	0% {top:900px;opacity:0;}
	100% {top:320px;opacity:1;}
}
@-o-keyframes mobileScroll {
	0% {top:900px;opacity:0;}
	100% {top:320px;opacity:1;}
}
@-ms-keyframes mobileScroll {
	0% {top:900px;opacity:0;}
	100% {top:320px;opacity:1;}
}
@keyframes mobileScroll {
	0% {top:900px;opacity:0;}
	100% {top:320px;opacity:1;}
}
	

/*------------------ P4系統技術 ------------------*/
#system {
	background:url(../images/system_dots.png) repeat;
	height: 900px;
	margin: 0 auto;
	padding: 0;
	overflow:hidden;
}

#system .title{
	position: absolute;
	left: 95px;
	top:900px;
	opacity:0;
	}

#system .pic1 {
	background:url(../images/system_pic1.png) no-repeat;
	width: 204px;
	height: 210px;
	display: block;
	}
	
#system h3 {
	}
	
#system h3 span {
	padding-left: 35px;
	}
	
ul.system_list{
	position:absolute;
	top:155px;
	left:325px;
	height:430px;
	}	
.system_list li{
	display: inline-block;
	zoom:1;
     *display: inline;
	}
.system_h3{
	font-size: 1.375em;
	padding:0px 0px 13px;
	}
	
.block6 { 
	background:url(../images/system_pic2.png) no-repeat;
	width: 295px;
	height: 387px;
	color:#fff;
	line-height:1.5em;
	overflow:hidden;
	position:relative;
	cursor:crosshair;
	}
.block6 .content_hover{
	background:#7b0051;
	margin:0px;
	padding:15px 15px 40px;
	width: 295px;
	position:absolute;
	top:335px;
	}
.block6  .system_h3{
	padding-bottom:160px;
	}
.block7 { 
	background:url(../images/system_pic3.png) no-repeat;
	width: 295px;
	height: 387px;
	color:#fff;
	line-height:1.5em;
	overflow:hidden;
	position:relative;
	cursor:crosshair;
	margin-left:3px;
	}
.block7 .content_hover{
	background:#b4a76c;
	margin:0px;
	padding:15px 15px 40px;
	width: 295px;
	position:absolute;
	top:335px;
	}
.block7  .system_h3{
	padding-bottom:160px;
	}

.block6.mouseenter  .content_hover,
.block7.mouseenter  .content_hover{
	-webkit-animation:mouseenter03;
	-moz-animation:mouseenter03;
	-o-animation:mouseenter03;
	-ms-animation:mouseenter03;
	animation:mouseenter03;
	
	-webkit-animation-duration: 0.2s;
	-moz-animation-duration: 0.2s;
	-o-animation-duration: 0.2s;
	-ms-animation-duration: 0.2s;
	animation-duration: 0.2s;
	
	-webkit-animation-timing-function: linear; 
	-moz-animation-timing-function: linear; 
	-o-animation-timing-function: linear; 
	-ms-animation-timing-function: linear; 
	animation-timing-function: linear; 
	
	-webkit-animation-fill-mode:forwards;
	-moz-animation-fill-mode:forwards;
	-o-animation-fill-mode:forwards;
	-ms-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
	
	-webkit-animation-iteration-count:1;
	-moz-animation-iteration-count:1;
	-o-animation-iteration-count:1;
	-ms-animation-iteration-count:1;
	animation-iteration-count:1;
	}
	
@-webkit-keyframes mouseenter03 {
	0% {top:335px;}
	100% {top:0px;}
}
@-moz-keyframes mouseenter03 {
	0% {top:335px;}
	100% {top:0px;}
}
@-o-keyframes mouseenter03 {
	0% {top:335px;}
	100% {top:0px;}
}
@-ms-keyframes mouseenter03 {
	0% {top:335px;}
	100% {top:0px;}
}
@keyframes mouseenter03 {
	0% {top:335px;}
	100% {top:0px;}
}

.block6.mouseleave  .content_hover,
.block7.mouseleave  .content_hover{
	-webkit-animation:mouseleave03;
	-moz-animation:mouseleave03;
	-o-animation:mouseleave03;
	-ms-animation:mouseleave03;
	animation:mouseleave03;
	
	-webkit-animation-duration: 0.2s;
	-moz-animation-duration: 0.2s;
	-o-animation-duration: 0.2s;
	-ms-animation-duration: 0.2s;
	animation-duration: 0.2s;
	
	-webkit-animation-timing-function: linear; 
	-moz-animation-timing-function: linear; 
	-o-animation-timing-function: linear; 
	-ms-animation-timing-function: linear; 
	animation-timing-function: linear; 
	
	-webkit-animation-fill-mode:forwards;
	-moz-animation-fill-mode:forwards;
	-o-animation-fill-mode:forwards;
	-ms-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
	
	-webkit-animation-iteration-count:1;
	-moz-animation-iteration-count:1;
	-o-animation-iteration-count:1;
	-ms-animation-iteration-count:1;
	animation-iteration-count:1;
	}
	
@-webkit-keyframes mouseleave03 {
	0% {top:0px;}
	100% {top:335px;}
}
@-moz-keyframes mouseleave03 {
	0% {top:0px;}
	100% {top:335px;}
}
@-o-keyframes mouseleave03 {
	0% {top:0px;}
	100% {top:335px;}
}
@-ms-keyframes mouseleave01 {
	0% {top:0px;}
	100% {top:335px;}
}
@keyframes mouseleave03 {
	0% {top:0px;}
	100% {top:335px;}
}



.systemScroll .title{
	-webkit-animation:systemScroll;
	-moz-animation:systemScroll;
	-o-animation:systemScroll;
	-ms-animation:systemScroll;
	animation:systemScroll;
	
	-webkit-animation-duration: 1s;
	-moz-animation-duration: 1s;
	-o-animation-duration: 1s;
	-ms-animation-duration: 1s;
	animation-duration: 1s;
	
	-webkit-animation-timing-function: linear; 
	-moz-animation-timing-function: linear; 
	-o-animation-timing-function: linear; 
	-ms-animation-timing-function: linear; 
	animation-timing-function: linear; 
	
	-webkit-animation-fill-mode:forwards;
	-moz-animation-fill-mode:forwards;
	-o-animation-fill-mode:forwards;
	-ms-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
	
	-webkit-animation-iteration-count:1;
	-moz-animation-iteration-count:1;
	-o-animation-iteration-count:1;
	-ms-animation-iteration-count:1;
	animation-iteration-count:1;
	}
@-webkit-keyframes systemScroll {
	0% {top:900px;opacity:0;}
	100% {top:182px;opacity:1;}
}
@-moz-keyframes systemScroll {
	0% {top:900px;opacity:0;}
	100% {top:182px;opacity:1;}
}
@-o-keyframes systemScroll {
	0% {top:900px;opacity:0;}
	100% {top:182px;opacity:1;}
}
@-ms-keyframes systemScroll {
	0% {top:900px;opacity:0;}
	100% {top:182px;opacity:1;}
}
@keyframes systemScroll {
	0% {top:900px;opacity:0;}
	100% {top:182px;opacity:1;}
}

/*------------------ P5經歷 ------------------*/
#experience {
	background:url(../images/experience_dots.png) repeat;
	height: 1000px;
	margin: 0 auto;
	padding: 150px 0 0 0;
}

#experience  .item1 {
	width: 100%;
	margin-bottom: 95px;
	display: block;
	position: absolute;
	float: left;
	left: 0px;
	}
#experience  .item2 {
	width: 100%;
	margin-bottom: 95px;
	display: block;
	position: absolute;
	float: left;
	top: 260px;
	left: 0px;
	}
#experience  .item3 {
	width: 100%;
	margin-bottom: 95px;
	display: block;
	position: absolute;
	float: left;
	top: 490px;
	left: 0px;
	}
#experience  .item4 {
	width: 100%;
	margin-bottom: 95px;
	display: block;
	position: absolute;
	float: left;
	top: 720px;
	left: 0px;
	}
#experience  .item5 {
	width: 100%;
	display: block;
	position: absolute;
	float: left;
	top: 950px;
	left: 0px;
	}

#experience h4 {	
	position: absolute;
	float: left;
	top: 0px;
	left: 349px;
	display: block;
	}	
#experience p {	
	color: #fff;
	position: absolute;
	float: left;
	top: 60px;
	left: 349px;
	display: block;
	}
#experience p span {	
	color: #444;
	font-size: 0.875em; /* 14px */
	display: block;
	}

#experience .pic1 {
	background:url(../images/experience_pic1.png) no-repeat left;
	width: 275px;
	height: 160px;
	margin-right: 74px;
	}
#experience .pic2 {
	background:url(../images/experience_pic2.png) no-repeat left;
	width: 275px;
	height: 137px;
	margin-right: 74px;
	}
#experience .pic3 {
	background:url(../images/experience_pic3.png) no-repeat left;
	width: 275px;
	height: 106px;
	margin-right: 74px;
	}
#experience .pic4 {
	background:url(../images/experience_pic4.png) no-repeat left;
	width: 275px;
	height: 148px;
	margin-right: 74px;
	}
#experience .pic5 {
	background:url(../images/experience_pic5.png) no-repeat left;
	width: 275px;
	height: 123px;
	margin-right: 74px;
	}
	
/**/

/*------------------ P6案例 ------------------*/
#case {
	background:url(../images/case_dots.png) repeat;
	height: 750px;
	margin: 0 auto;
	padding: 150px 0 0 0;
}

#case h3 {
	position: absolute;
	float: left;
	top: 0px;
	left: 65px;
	display: block;
	}

#case h5 {
	position: absolute;
	float: left;
	top: 10px;
	left: 50px;
	display: block;
	}	
#case p {
	position: absolute;
	float: left;
	top: 60px;
	left: 65px;
	padding: 0 0 27px 0;
	display: block;
	}

#case .list {
	position: absolute;
	float: left;
	left: 65px;
	right: 0;
	padding: 0;
	display: block;
	}
#case .list1 {
	/*width: 985px; 寬度會爆版*/
	position: absolute;
	float: left;
	top: 150px;
	left: 65px;
	right: 0;
	padding: 0;
	display: block;
	}
#case .list2 {
	/*width: 985px; 寬度會爆版*/
	position: absolute;
	float: left;
	top: 350px;
	left: 65px;
	right: 0;
	padding: 0;
	display: block;
	}

#case .name {
	padding: 10px 10px 10px 0;	
    display:block;
	}

#case a.icon {
	width: 70px;
	height: 66px;
	margin: 0 10px 0 0;
	}
#case a:hover.icon {
	filter:alpha(opacity=80); /*IE*/
	-moz-opacity:0.80; /*FireFox*/ 
	opacity:0.80; /*Chrome, Opera, Safari*/
  }	
  
/*popup內容*/  
aside {
    width: 100%;
    background: url(../images/pop_bg.png) repeat;
    position:fixed;
    z-index:999;
    top:0;
    left:0;
    display:none;
	}
#show {
	width:800px;
	height: 495px;
	padding: 50px;
	margin-top: 65px;
	margin-left:auto;
	margin-right:auto;
	background-color: #fff;
	border:solid 1px #cfcfcf;
	-webkit-border-radius:5px;
	   -moz-border-radius:5px;
	        border-radius:5px;
	-webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.25);
		-moz-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.25);
			box-shadow: 0 1px 10px rgba(0, 0, 0, 0.25);
	vertical-align:middle;
	}
#show .btn_close a {
	display:block;
    width:37px;
	height:35px;
	background:url(../images/case_icon_del.png) no-repeat center center;
	float:right;
	top: 0px;
	right: 0px;
	-webkit-transition:-webkit-transform 0.5s;
	-moz-transition:-moz-transform 0.5s;
	-o-transition:o-transform 0.5s;
	-ms-transition:-ms-transform 0.5s;
	}
#show .btn_close a:hover {
	background:url(../images/case_icon_dela.png) no-repeat center center;
	-webkit-transform:rotate(179deg);
	-moz-transform:rotate(179deg);
	-o-transform:rotate(179deg);
	-ms-transform:rotate(179deg);
	}
#show h5 {
	line-height: 1.625em; /* 26px */
	}
#show h6 { /*客戶名稱*/
	margin-bottom: 20px;
	}
#show ul {
	width: 500px;
	border: solid 1px #000;
	list-style: disc; 
	list-style-position:inside;
	border:0; 
	/*margin: 0 0 0 345px;*/
    margin: 0 0 0 290px;
  }
#show li {
	margin: 0;
	padding: 0;
	color: #444;
	border-bottom: dotted 1px #999;
	line-height: 2.4em; 
  }
.qrcode {
	float: left; 
	margin: 20px 10px 0 0;
	}  
.qrcode img { 
	width: 185px;
	height: 185px;
	display: block;
	/*border: solid 1px #000;*/
	padding: 0;
	margin: 0;
	}

/* --- app下載btn ---*/
.download {
	float:left;
	margin: 40px 0 0 0;
}
.apple a {	
	color: #fff;
	font-size: 1.125em; /* 18px */
	text-decoration:none;
	line-height: 60px;
	padding: 0 0 0 70px;
	width: 130px;
	height: 60px;
	display: block;
	background:url(../images/case_icon_apple.png) no-repeat 20px center,rgba(113,113,113,1);
	background:url(../images/case_icon_apple.png) no-repeat 20px center,-webkit-linear-gradient(top, rgba(113,113,113,1), rgba(75,75,75,1));
	background:url(../images/case_icon_apple.png) no-repeat 20px center,-moz-linear-gradient(top, rgba(113,113,113,1), rgba(75,75,75,1));
	background:url(../images/case_icon_apple.png) no-repeat 20px center,-o-linear-gradient(top, rgba(113,113,113,1), rgba(75,75,75,1));
	background:url(../images/case_icon_apple.png) no-repeat 20px center,-ms-linear-gradient(top, rgba(113,113,113,1), rgba(75,75,75,1));
	box-shadow : 1px 2px 5px #999 ;
	margin: 0 0 20px 0;
	-webkit-border-radius: 5px;
            border-radius: 5px;
}
.apple a:hover {	
	background:url(../images/case_icon_apple.png) no-repeat 20px center,rgba(75,75,75,1);
	background:url(../images/case_icon_apple.png) no-repeat 20px center,-webkit-linear-gradient(top, rgba(75,75,75,1), rgba(113,113,113,1));
	background:url(../images/case_icon_apple.png) no-repeat 20px center,-moz-linear-gradient(top, rgba(75,75,75,1), rgba(113,113,113,1));
	background:url(../images/case_icon_apple.png) no-repeat 20px center,-o-linear-gradient(top, rgba(75,75,75,1), rgba(113,113,113,1));
	background:url(../images/case_icon_apple.png) no-repeat 20px center,-ms-linear-gradient(top, rgba(75,75,75,1), rgba(113,113,113,1));
	-webkit-border-radius: 5px;
            border-radius: 5px;
}
.gplay a {
	color: #fff;
	font-size: 1.125em; /* 18px */
	text-decoration:none;
	line-height: 60px;
	padding: 0 0 0 70px;
	width: 130px;
	height: 60px;
	display: block;
	background:url(../images/case_icon_gplay.png) no-repeat 20px center,rgba(116,169,0,1);
	background:url(../images/case_icon_gplay.png) no-repeat 20px center,-webkit-linear-gradient(top, rgba(144,195,31,1), rgba(103,149,0,1));
	background:url(../images/case_icon_gplay.png) no-repeat 20px center,-moz-linear-gradient(top, rgba(144,195,31,1), rgba(103,149,0,1));
	background:url(../images/case_icon_gplay.png) no-repeat 20px center,-o-linear-gradient(top, rgba(144,195,31,1), rgba(103,149,0,1));
	background:url(../images/case_icon_gplay.png) no-repeat 20px center,-ms-linear-gradient(top, rgba(144,195,31,1), rgba(103,149,0,1));
	box-shadow : 1px 2px 5px #999 ;
	margin: 0;
	-webkit-border-radius: 5px;
            border-radius: 5px;
}
.gplay a:hover {
	background:url(../images/case_icon_gplay.png) no-repeat 20px center,rgba(103,149,0,1);
	background:url(../images/case_icon_gplay.png) no-repeat 20px center,-webkit-linear-gradient(top, rgba(103,149,0,1), rgba(144,195,31,1));
	background:url(../images/case_icon_gplay.png) no-repeat 20px center,-moz-linear-gradient(top, rgba(103,149,0,1), rgba(144,195,31,1));
	background:url(../images/case_icon_gplay.png) no-repeat 20px center,-o-linear-gradient(top, rgba(103,149,0,1), rgba(144,195,31,1));
	background:url(../images/case_icon_gplay.png) no-repeat 20px center,-ms-linear-gradient(top, rgba(103,149,0,1), rgba(144,195,31,1));
	-webkit-border-radius: 5px;
            border-radius: 5px;
	}
/**/

/* --- 手機框架動態效果 ---*/
.phone { /* 左往右淡入 */
	width: 236px;
	height: 495px;
	background: url(../images/case_phone.jpg) no-repeat;
	display: block;
	padding: 0;
	margin-right: 50px;
	float: left;
	-webkit-animation:fadeInLeft 1.2s;
		-moz-animation:fadeInLeft 1.2s;
			animation:fadeInLeft 1.2s;
}
@-webkit-keyframes fadeInLeft {
	0% {
		opacity: 0;
		-webkit-transform: translateX(-30px);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateX(0);
	}
}
@-moz-keyframes fadeInLeft {
	0% {
		opacity: 0;
		-moz-transform: translateX(-30px);
	}
	100% {
		opacity: 1;
		-moz-transform: translateX(0);
	}
}
@-o-keyframes fadeInLeft {
	0% {
		opacity: 0;
		-o-transform: translateX(-30px);
	}
	100% {
		opacity: 1;
		-o-transform: translateX(0);
	}
}
@keyframes fadeInLeft {
	0% {
		opacity: 0;
		transform: translateX(-30px);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}
.fadeInLeft {
	-webkit-animation-name: fadeInLeft;
		-moz-animation-name: fadeInLeft;
			-o-animation-name: fadeInLeft;
				animation-name: fadeInLeft;
}
/**/
.phone img { /*手機內圖*/
	width: 197px;
	height: 337px;
	display: block;
	padding: 0;
	margin: 86px 0 0 20px;
	float: left;
	}
/**/


/*------------------ P7聯絡 ------------------*/
#contact {
	background:url(../images/contact_dots.png) repeat;
	height: 700px;
	margin: 0 auto;
	padding: 150px 0 0 0;
}

#contact h4 {
	position: absolute;
	float: left;
	top: 0px;
	left: 65px;
	display: block;
	}
#contact p {
	color: #fff;
	margin: -8px 0 0 25px;
	}
#contact a {
	color: #fff;
	text-decoration:none;
	}
#contact a:hover {
	padding-bottom: 2px;
	border-bottom: dotted 2px #fff;
	}
#contact .welcome {
	color: #fff;
	position: absolute;
	float: left;
	top: 178px;
	left: 40px;
	display: block;
	}
	
#contact .tel {
	background:url(../images/contact_icon1.png) no-repeat;
	position: absolute;
	float: left;
	top: 70px;
	left: 65px;
	padding: 0;
	display: block;
	}
#contact .add {
	background:url(../images/contact_icon2.png) no-repeat;
	position: absolute;
	float: left;
	top: 100px;
	left: 65px;
	padding: 0;
	display: block;
	}
#contact .mail {
	background:url(../images/contact_icon3.png) no-repeat left 0px;
	position: absolute;
	float: left;
	top: 130px;
	left: 65px;
	padding: 0;
	display: block;
	}

#contact .input_name { /*輸入框-姓名*/
	width: 239px;
	position: absolute;
	float: left;
	top: 220px;
	left: 65px;
	color: #888;
	font-size: 1.125em; /* 18px */
	font-weight: normal;
	background-color: #fff;
	border: 1px solid #fff;
	padding: 10px;
	margin-right: 15px;
	-webkit-border-radius: 5px;
            border-radius: 5px;
}
#contact .input_mail { /*輸入框-mail*/
	width: 600px;
	position: absolute;
	float: left;
	top: 220px;
	left: 344px;
	color: #888;
	font-size: 1.125em; /* 18px */
	font-weight: normal;
	background-color: #fff;
	border: 1px solid #fff;
	padding: 10px;
	-webkit-border-radius: 5px;
            border-radius: 5px;
}
#contact .input_edit { /*輸入框-多行輸入*/
	width: 880px;
	position: absolute;
	float: left;
	top: 285px;
	left: 65px;
	color: #888;
	font-size: 1.125em; /* 18px */
	font-weight: normal;
	background-color: #fff;
	border: 1px solid #fff;
	padding: 10px;
	-webkit-border-radius: 5px;
            border-radius: 5px;
}
#contact .send a {
	width: 130px;
	height: 40px;
	position: absolute;
	float: left;
	top: 485px;
	left: 458px;
	color: #fff;
	font-size: 1.125em; /* 18px */
	font-weight: normal;
	text-align: center;
	line-height: 40px;
	background-color: #ff5a5f;
	border: 1px solid #fff;
	-webkit-border-radius: 5px;
            border-radius: 5px;
	}
#contact .send a:hover {
	color: #888;
	background-color: #e6e6e6;
	border: 1px solid #fff;
	-webkit-border-radius: 5px;
            border-radius: 5px;
	}


/*Firefox才會在正確高度顯示*/
@-moz-document url-prefix(){ #contact .send a { 
	width: 130px;
	height: 40px;
	position: absolute;
	float: left;
	top: 510px; /*差異處*/
	left: 458px;
	color: #fff;
	font-size: 1.125em; /* 18px */
	font-weight: normal;
	text-align: center;
	line-height: 40px;
	background-color: #ff5a5f;
	border: 1px solid #fff;
	-webkit-border-radius: 5px;
            border-radius: 5px;
}}
.copyright {
	color: #fff;
	font-size: 1.125em; /* 18px */
	font-weight: normal;
	text-align: center;
	margin-top: 600px;
}
/**/