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

@import url("reset.css");
/* content-font */

@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,700);
/* modelName-font */

@import url(https://fonts.googleapis.com/css?family=Open+Sans:600);

@import url(https://fonts.googleapis.com/css?family=Rajdhani:400,500);

@import url(https://fonts.googleapis.com/css?family=Quicksand);

body {
    font-family:"微軟正黑體", "新細明體", Arial, Helvetica, sans-serif;
}
h1 {
    font-family:"微軟正黑體", "新細明體", Arial, Helvetica, sans-serif;
    font-size: 60px;
    font-weight: 400;
}
h2 {
    font-family:"微軟正黑體", "新細明體", Arial, Helvetica, sans-serif;
    font-size: 38px;
    font-weight: 400;
}
h3 {
    font-family:"微軟正黑體", "新細明體", Arial, Helvetica, sans-serif;
    font-size: 33px;
    font-weight: 300;
    color: #333;
}
p {
    font-family:"微軟正黑體", "新細明體", Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.6;
    color: #333;
}

/*------------------------------------
preLoader
------------------------------------*/

#jpreLoader {
    width: 223px;
    height: 41px;
    background: url(/ECSWebSite/images/fullPage/One/preloader_logo.png) center top no-repeat;
}
/*------------------------------------
Wrapper
------------------------------------*/

#wrapper {
    background-color: #FFF;
    /*遮住高度不夠破圖*/
    
    z-index: 5;
}
/*------------------------------------
Top Nav
------------------------------------*/

#nav_wrapper {
    height: 50px;
    margin-top: 50px;
    margin-bottom: 50px;
    font-size: 14px;
    font-family: sans-serif, Helvetica, Arial, Verdana;
    font-weight: 400;
    z-index: 3;
    position: relative;
    top: 25px;
    margin: 0 auto;
    background-color: #FFF;
}
#top_nav {
    background-color:rgba(255,255,255,0.6);
    /*border-bottom: #CCC solid 1px;*/
    text-align: center;
    margin: 0 auto;
    -webkit-transition: height 200ms ease-in-out;
    transition: height 200ms ease-in-out;
}
#top_nav .inner {
    width: 960px;
    height: 60px;
    margin: 0 auto;
}
/*== nav_title ==*/

h1.nav_title {
    display: block;
    float: left;
    /*z-index: 100;*/
    
    font-size: 26px;
    height: 20px;
    margin-left: 20px;
    margin-top: 6px;
}
h1.nav_title a {
    text-decoration: none;
    font-family: 'Open Sans', sans-serif, Helvetica, Arial, Verdana;
    font-size: 30px;
    line-height: 1;
    color:#202020;
}
h1.nav_title a:hover {
    opacity: 0.5;
}

.default {
    /*width: 960px;*/
    height: 50px;
}
.fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    z-index: 9999;
    box-shadow: #333 0 0 10px;
    -moz-box-shadow: #333 0 0 10px;
    -webkit-box-shadow: #333 0 0 10px;
}
.fixed h1.nav_title {
    display: block;
    float: left;
    /*z-index: 100;*/
    
    font-size: 26px;
    height: 20px;
    margin-top: 14px;
}
.fixed h1.nav_title a {
    display: block;
}
.fixed h1.nav_title a:hover {} .fixed .nav_line {
    float: right;
    margin-top: 23px;
}

/*== nav_line ==*/
.nav_line {
    float: right;
    margin-top: 16px;
}
.nav_line ul {
    list-style-type: none;
}
.nav_line ul li {
    float: left;
    margin-right: 15px;
}
.nav_line ul li a {
    color: #202020;
    text-decoration: none;
    padding: 3px 7px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    transition-property: color, background;
    transition-duration: 0.5s, 0.5s;
    -webkit-transition-property: color, background;
    -webkit-transition-duration: 0.5s, 0.5s;
    -moz-transition-property: color, background;
    -moz-transition-duration: 0.5s, 0.5s;
    -o-transition-property: color, background;
    -o-transition-duration: 0.5s, 0.5s;
}
.nav_line ul li a:hover {
    background: #202020;
    color: #fff;
    transition-property: color, background;
    transition-duration: 0.5s, 0.5s;
    -webkit-transition-property: color, background;

    -webkit-transition-duration: 0.5s, 0.5s;
    -moz-transition-property: color, background;
    -moz-transition-duration: 0.5s, 0.5s;
    -o-transition-property: color, background;
    -o-transition-duration: 0.5s, 0.5s;
}
.nav_line ul li a.select {
    background: #202020;
    color: #fff;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

/*------------------------------------
fp-menu
------------------------------------*/
#fp-menu.right {
    right: 13px;
}
#fp-menu {
    position: fixed;
    z-index: 100;
    margin-top: -32px;
    top: 50%;
    opacity: 1;
}
#fp-menu ul#mymenu {
    position: absolute;
    top: 50%;
    left: auto;
    right: 4px;
    z-index: 11;
	margin-top:-70px;
}
#fp-menu ul#mymenu li {
    display: block;
    width: 14px;
    height: 13px;
    margin: 7px;
    position: relative;
}
/*#fp-menu ul#mymenu li.sam{
	top: 2px;
    left: 2px;
    border: 1px solid #e54f00;
    background: rgba(0, 0, 0, 0);
    border-radius: 50%;
    z-index: 1;
}*/

#fp-menu ul#mymenu li a {
    display: block;
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    cursor: pointer;
    text-decoration: none;
}
#fp-menu ul#mymenu li a span {
    border-radius: 50%;
    position: absolute;
    z-index: 1;
    height: 4px;
    width: 4px;
    border: 0;
    background: #e54f00;
    left: 50%;
    top: 50%;
    margin: -2px 0 0 -2px;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
}
#fp-menu ul#mymenu li.active a span {
    background: #e54f00;
	height: 12px;
    width: 12px;
    margin: -6px 0 0 -6px;
    border-radius: 100%;
}
/*#fp-menu ul#mymenu li.active .fp-tooltip{
	-webkit-transition: opacity 0.2s ease-in;
    transition: opacity 0.2s ease-in;
    width: auto;
    opacity: 1;
}*/

#fp-menu ul#mymenu li:hover a span {
    width: 10px;
    height: 10px;
    margin: -5px 0px 0px -5px;
}

#fp-menu ul#mymenu li.active:hover a span {
    background: #e54f00;
	height: 12px;
    width: 12px;
    margin: -6px 0 0 -6px;
    border-radius: 100%;
}

#fp-menu ul#mymenu li .fp-tooltip {
    position: absolute;
    top: -6px;
    padding: 6px;
    color: #ffffff;
    /*tooltip color*/   
    font-size: 12px;
    font-family: arial, helvetica, sans-serif;
    white-space: nowrap;
    max-width: 220px;
    /* overflow: hidden;*/  
    display: block;
    opacity: 0;
    width: 0;
    background: #e54f00;
}
#fp-menu ul#mymenu li .fp-tooltip:after {
    content: "";
    position: absolute;
    display: block;
    width: 0;
    top: 6px;
    right: -7px;
    bottom: auto;
    left: auto;
    border-style: solid;
    border-width: 7px 0 7px 7px;
    border-color: transparent #e54f00;
}
#fp-menu ul#mymenu li:hover .fp-tooltip {
    -webkit-transition: opacity 0.2s ease-in;
    transition: opacity 0.2s ease-in;
    width: auto;
    opacity: 1;
}
#fp-menu ul#mymenu li .fp-tooltip.right {
    right: 23px;
}

/*======== fp-section ========*/
.fp-section .center {
    /*width: 960px;*/
    margin: 0 auto;
    height: 100%;
    position: relative;
	overflow: hidden;
}

.fp-section h2 {
    margin-bottom: 10px;
}


.fp-slide {
	overflow: hidden;
}


/*======== section1 ========*/
.section1 {
    width: 100%;
    height: 100%;
    background: url(/ECSWebSite/images/fullPage/One/MiniPC-One-9.jpg) left 182px repeat-x;
    min-height: 500px;
}

.section1 .center {
    width: 100%;
    height: 100%;
    background: url(/ECSWebSite/images/fullPage/One/s1_bottom_bg.jpg) left bottom repeat-x;
}

.section1 #intro-mouse {
    position: absolute;
    width: 70px;
    height: 70px;
    /*background: url(/ECSWebSite/images/fullPage/One/landing-mouse-tappetino-2.png) no-repeat;*/
    display: block;
    bottom: 1%;
    left: 50%;
    margin-left: -35px;
    -webkit-animation: mymove 1.75s ease-in-out infinite;
    -moz-animation: mymove 1.75s ease-in-out infinite;
    animation: mymove 1.75s ease-in-out infinite;
}
.section1 #intro-mouse .mouse {
    background: url(/ECSWebSite/images/fullPage/One/landing-mouse-2.gif) center center no-repeat;
	background-size: 70px 70px;
}
.section1 #intro-mouse .mouse a {
    display: inline-block;
    width: 70px;
    height: 70px;
    cursor: pointer;
}
@keyframes mymove {
    0% {
        padding-bottom: 50px;
        .opacity(0.8);
    }
    50% {
        padding-bottom: 70px;
        .opacity(0.35);
    }
    100% {
        padding-bottom: 50px;
        .opacity(0.8);
    }
}
@-webkit-keyframes mymove {
    0% {
        padding-bottom: 50px;
        .opacity(0.8);
    }
    50% {
        padding-bottom: 70px;
        .opacity(0.35);
    }
    100% {
        padding-bottom: 50px;
        .opacity(0.8);
    }
}
@-moz-keyframes mymove {
    0% {
        padding-bottom: 50px;
        .opacity(0.8);
    }
    50% {
        padding-bottom: 70px;
        .opacity(0.35);
    }
    100% {
        padding-bottom: 50px;
        .opacity(0.8);
    }
}
@-o-keyframes mymove {
    0% {
        padding-bottom: 50px;
        .opacity(0.8);
    }
    50% {
        padding-bottom: 70px;
        .opacity(0.35);
    }
    100% {
        padding-bottom: 50px;
        .opacity(0.8);
    }
}
.section1 .center .img1 {
    position: absolute;
    width: 868px;
    height: 695px;
    background: url(/ECSWebSite/images/fullPage/One/MiniPC-One-1.png) left top no-repeat;
    top: 50%;
    left: 50%;
    margin-top: -298px;
    margin-left: -300px;
}

.section1 .center .img2 {
    position: absolute;
    width: 868px;
    height: 596px;
    background: url(/ECSWebSite/images/fullPage/One/s1_img2.png) left top no-repeat;
    top: 50%;
    left: 50%;
    margin-top: -303px;
    margin-left: -297px;
	animation: mylight 2s ease-in infinite;
    -webkit-animation: mylight 2s ease-in infinite;
    -moz-animation: mylight 2s ease-in infinite;
}

@keyframes mylight {
    0% {
        opacity: 1;
    }
	50% {
        opacity: 0.1;
    }
    100% {
        opacity: 1;
    }
}
@-webkit-keyframes mylight {
    0% {
        opacity: 1;
    }
	50% {
        opacity: 0.1;
    }
    100% {
        opacity: 1;
    }
}
@-moz-keyframes mylight {
    0% {
        opacity: 1;
    }
	50% {
        opacity: 0.1;
    }
    100% {
        opacity: 1;
    }
}
@-o-keyframes mylight {
    0% {
        opacity: 1;
    }
	50% {
        opacity: 0.1;
    }
    100% {
        opacity: 1;
    }
}

.section1 .center .img4 {
    position: absolute;
    width: 12px;
    height: 136px;
    background: url(/ECSWebSite/images/fullPage/One/s1_img4.png) left top no-repeat;
    top: 50%;
    left: 50%;
    margin-top: -136px;
    margin-left: 157px;
	animation: myreflective 5s 2.2s ease-in infinite;
    -webkit-animation: myreflective 5s 2.2s ease-in infinite;
    -moz-animation: myreflective 5s 2.2s ease-in infinite;
}

@keyframes myreflective {
    0% {
        opacity: 0;	
    }
	20% {
        opacity: 1;	
    }
	50% {
        opacity: 1;
    }
    70% {
        opacity: 0;
		margin-top: 150px;
    }
	100% {
        opacity: 0;
    }
}
@-webkit-keyframes myreflective {
    0% {
        opacity: 0;	
    }
	20% {
        opacity: 1;	
    }
	50% {
        opacity: 1;
    }
    70% {
        opacity: 0;
		margin-top: 150px;
    }
	100% {
        opacity: 0;
    }
}
@-moz-keyframes myreflective {
    0% {
        opacity: 0;	
    }
	20% {
        opacity: 1;	
    }
	50% {
        opacity: 1;
    }
    70% {
        opacity: 0;
		margin-top: 150px;
    }
	100% {
        opacity: 0;
    }
}
@-o-keyframes myreflective {
    0% {
        opacity: 0;	
    }
	20% {
        opacity: 1;	
    }
	50% {
        opacity: 1;
    }
    70% {
        opacity: 0;
		margin-top: 150px;
    }
	100% {
        opacity: 0;
    }
}

.section1 .center .img5 {
    position: absolute;
    width: 12px;
    height: 136px;
    background: url(/ECSWebSite/images/fullPage/One/s1_img4.png) left top no-repeat;
    top: 50%;
    left: 50%;
    margin-top: -136px;
    margin-left: 163px;
	animation: myreflective2 5s 2.2s ease-in infinite;
    -webkit-animation: myreflective2 5s 2.2s ease-in infinite;
    -moz-animation: myreflective2 5s 2.2s ease-in infinite;
}

@keyframes myreflective2 {
    0% {
        opacity: 0;	
    }
	20% {
        opacity: 1;	
    }
	50% {
        opacity: 1;
    }
    70% {
        opacity: 0;
		margin-top: 85px;
    }
	100% {
        opacity: 0;
    }
}
@-webkit-keyframes myreflective2 {
    0% {
        opacity: 0;	
    }
	20% {
        opacity: 1;	
    }
	50% {
        opacity: 1;
    }
    70% {
        opacity: 0;
		margin-top: 85px;
    }
	100% {
        opacity: 0;
    }
}
@-moz-keyframes myreflective2 {
    0% {
        opacity: 0;	
    }
	20% {
        opacity: 1;	
    }
	50% {
        opacity: 1;
    }
    70% {
        opacity: 0;
		margin-top: 85px;
    }
	100% {
        opacity: 0;
    }
}
@-o-keyframes myreflective2 {
    0% {
        opacity: 0;	
    }
	20% {
        opacity: 1;	
    }
	50% {
        opacity: 1;
    }
    70% {
        opacity: 0;
		margin-top: 85px;
    }
	100% {
        opacity: 0;
    }
}

.section1 .center .img3 {
    position: absolute;
    width: 730px;
    height: 404px;
    background: url(/ECSWebSite/images/fullPage/One/s1_img3.png) left top no-repeat;
    top: 50%;
    left: 50%;
    margin-top: -296px;
    margin-left: -191px;
}

.section1 .center .txt {
    position: absolute;
    top: 50%;
	left:50%;
    margin-top: 82px;
    margin-left: -397px;
    width: 327px;
}

.section1 .center .txt h1 {
	font-family:"Rajdhani", sans-serif, Helvetica, Arial, Verdana;
    font-size: 122px;
    text-align: center;
    font-weight: 200;
    /*text-shadow: 1px 1px 3px #FFF;*/
    float: left;
    margin-left: 38px;
	letter-spacing: -4px;
	line-height:82px;
	color:#000;
}


.section1 .center .txt h2 {
	text-indent:-9999px;
	width: 66px;
	height: 16px;
	background-image:url(/ECSWebSite/images/fullPage/One/miniPC_black.svg);
	background-size: 66px 16px;
	background-repeat: no-repeat;
	float: left;
	margin-top: 62px;
	margin-left: 14px;
}

.section1 .center .txt h3 {
    color:#434343;
    font-size: 32px;
    text-align: center;
    line-height: 1.6;
    /*text-shadow: 1px 1px 1px #FFF;*/
    clear: both;
}

/*======== fp-section ========*/
.fp-section .center .txt h2{
	font-size: 42px;
	font-family:"微軟正黑體", "新細明體", Arial, Helvetica, sans-serif;
	/* letter-spacing: -3px; */
}

.fp-section{
	overflow:hidden;
}

/*======== section2 ========*/
.section2 .bg{
    width: 100%;
    height: 100%;
    background:url(/ECSWebSite/images/fullPage/One/MiniPC-One-2.jpg) left top no-repeat;
    background-size: cover;
	position:absolute;
	top:0;
	left:0;
}
.section2 .center .txt {
    position: absolute;
    width: 546px;
    left:50%;
    top: 50%;
    margin-left: 67px;
    margin-top:-18px;
    transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    opacity: 0;
}

.section2 .center .txt h2, .section2 .center .txt p{text-align:center;}

/* CSS3 animation */
.section2.active .center .txt {
    transition-delay: 0.8s;
    opacity: 1;
	margin-top:43px;
}

.section2 .center .img1 {
    position: absolute;
    width: 173px;
    height: 262px;
    background:url(/ECSWebSite/images/fullPage/One/MiniPC-One-3.png) center center no-repeat;
    top: 50%;
	left:50%;
	margin-top: -280px;
	margin-left: 242px;
	transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
	opacity: 0;
}
/* CSS3 animation */
.section2.active .center .img1{
	margin-top: -229px;
	transition-delay: 0.5s;
	opacity: 1;
} 

/*======== section3 ========*/
.section3 .bg{
    width: 100%;
    height: 100%;
    background:url(/ECSWebSite/images/fullPage/One/MiniPC-One-4.jpg) left top no-repeat;
    background-size: cover;
	position:absolute;
	top:0;
	left:0;
}
.section3 .center .txt {
    position: absolute;
    width: 569px;
    left:50%;
    top: 50%;
    margin-left:-299px;
    margin-top:-271px;
    transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    opacity: 0;
}

/* CSS3 animation */
.section3.active .center .txt {
    transition-delay: 0.5s;
    opacity: 1;
	margin-top:-210px;
} 

.section3 .center .txt h2, .section3 .center .txt p{
	text-align:center;	
}

.section3 .center .img1 {
    position: absolute;
    width: 410px;
    height: 240px;
    background:url(/ECSWebSite/images/fullPage/One/s3_img1.png) center center no-repeat;
    top: 50%;
	left:50%;
	margin-top: -60px;
	margin-left: -218px;
	transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
	opacity: 0;
}
/* CSS3 animation */
.section3.active .center .img1{
	margin-top: -15px;
	transition-delay: 0.8s;
	opacity: 1;
} 

.section3 .center .img2 {
    position: absolute;
    width: 447px;
    height: 455px;
    background:url(/ECSWebSite/images/fullPage/One/MiniPC-One-5.png) center center no-repeat;
    top: 50%;
	right:-224px;
	margin-top: -223px;
	transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
	opacity: 1;
}
/* CSS3 animation */
.section3.active .center .img2{
	right:-92px;
	transition-delay: 1.2s;
	opacity: 1;
} 

/*======== section4 ========*/
.section4{
	width:100%;
	height:100%;
	background-color:#000000;
}
.section4 .bg{
    width: 100%;
    height: 100%;
    /*background:url(/ECSWebSite/images/fullPage/One/MiniPC-One-10.jpg) center top no-repeat;*/
    background-size: cover;
	position:absolute;
	top:0;
	left:0;
}
.section4 .center .txt {
    position: absolute;
    width: 551px;
    left:50%;
    top: 0;
    margin-top:167px;
    margin-left: -57px;
    transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    opacity: 0;
}

/* CSS3 animation */
.section4.active .center .txt {
    transition-delay: 0.5s;
    opacity: 1;
	margin-top:213px;
	text-shadow:1px 1px #000;
} 

.section4 .center .txt h2, .section4 .center .txt p{
	text-align:center;
	color:#FFF;
}

.section4 .center .img1 {
    position: absolute;
    width: 950px;
    height: 500px;
    background:url(/ECSWebSite/images/fullPage/One/s4_bg.jpg) center top no-repeat;
    top: 0;
	left:50%;
	margin-left: -679px;
	transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
	opacity: 1;
}
/* CSS3 animation 
.section4.active .center .img1{
	margin-top: -15px;
	transition-delay: 0.8s;
	opacity: 1;
}  */

.section4 .center .txt1 {
    position: absolute;
    width: 510px;
    left:50%;
    top: 0;
    margin-left: 45px;
    margin-top:254px;
    text-shadow:1px 1px #000;
    transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    opacity: 0;
}

/* CSS3 animation */
.section4.active .center .txt1 {
    transition-delay: 0.7s;
    opacity: 1;
	margin-top:284px;
}

.section4 .center .txt1 h3{
	font-size:24px;
	color:#FFFFFF;
	margin-bottom: 6px;
}	
.section4 .center .txt1 p{
	font-size:14px;
	color:#949494;
	line-height:1.3;
}


/*==== bar ====*/
.section4 .center .callout-container{
	position: absolute;
    top: 50%;
    left: 50%;
    margin-top:67px;
    margin-left: -516px;
	color:#FFFFFF;
	overflow:hidden;
	transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    opacity:0;
}
/* CSS3 animation */
.section4.active .center .callout-container {
    transition-delay: 1s;
    opacity: 1;
} 

.section4 .center .callout-container .box-all{
	width: 342px;
	float:left;
	margin:0 auto;
}

.section4 .center .callout-container .box1, .section4 .center .callout-container .box2{
	margin-right:30px;
}

.section4 .center .callout-container .graph{
	border: 1px solid #949494;
    border-radius: 8px;
    padding: 10px;
	text-align:center;
}
.section4 .center .callout-container .graph p{color:#FFFFFF;}
.section4 .center .callout-container .graph p.bottom{font-size: 24px;}
.section4 .center .callout-container .graph h6{
	color:#FFFFFF;
	font-size: 56px;
    font-weight: 100;
}
.section4 .center .callout-container .graph h6 span{
	font-size: 18px;
	margin-left: 5px;	
}

.section4 .center .callout-container .graph-txt{
	text-align:center;
}
.section4 .center .callout-container .graph-txt h3{
	font-size: 23px;
	color:#FFF;
	margin-top:10px;
	margin-bottom: 6px;
}

.section4 .center .callout-container .graph-txt p{
	font-size:14px;
	color:#949494;
	line-height:1.3;
}

/*======== section5 ========*/
.section5 .bg{
    width: 100%;
    height: 100%;
   /* background:url(/ECSWebSite/images/fullPage/One/s3_bg.jpg) left top no-repeat;
    background-size: cover;*/
	position:absolute;
	top:0;
	left:0;
}
.section5 .center .txt {
    position: absolute;
    width: 692px;
    left:50%;
    top: 50%;
    margin-left:-459px;
    margin-top:150px;
    transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    opacity: 0;
}

/* CSS3 animation */
.section5.active .center .txt {
    transition-delay: 1.2s;
    opacity: 1;
	margin-top:180px;
}

.section5 .center .txt h2, .section5 .center .txt p{text-align:center;} 

.section5 .center .img1 {
    position: absolute;
    width: 658px;
    height: 584px;
    background:url(/ECSWebSite/images/fullPage/One/s5_img1.png) center center no-repeat;
    top: 50%;
	left:50%;
	margin-top: -319px;
	margin-left: -477px;
	transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
	opacity: 1;
}

.section5 .center .img2 {
    position: absolute;
    width: 280px;
    height: 308px;
    background:url(/ECSWebSite/images/fullPage/One/MiniPC-One-6.png) center center no-repeat;
    top: 50%;
	left:50%;
	margin-top: -11px;
	margin-left:254px;
	transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
	opacity: 1;
}
/* CSS3 animation*/
.section5.active .center .img2{
	margin-left:149px;
	transition-delay: 0.7s;
	opacity: 1;
}  

.section5 .center #img3 {
	position: absolute !important;
	top: 50%;
	left:50%;
	margin-top: -295px;
	margin-left:-456px;
	z-index:0;
	transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
	opacity: 1;
}

.section5 .center #img3 ul{}

.section5 .center #img3 ul li{
	list-style:none;
}

/*======== section6 ========*/
.section6 .bg{
    width: 100%;
    height: 100%;
    background:url(/ECSWebSite/images/fullPage/One/MiniPC-One-11.jpg) center center no-repeat;
    background-size: cover;
	position: absolute;
    top: 0;
    left: 0;
}

.section6 .center .img1 {
    position: absolute;
    width: 591px;
    height: 388px;
    background:url(/ECSWebSite/images/fullPage/One/s6_img1.png) center center no-repeat;
    top: 50%;
	left:50%;
	margin-top: -366px;
	margin-left: -374px;
	transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
	opacity: 0;
}
/* CSS3過渡及動畫*/
.section6.active .center .img1{
	transition-delay: 1s;
	opacity: 1;
}
.section6 .center .img1 .img1a{
    position: absolute;
    width: 101px;
    height: 74px;
    background:url(/ECSWebSite/images/fullPage/One/s6_img1a.png) center center no-repeat;
    top: 131px;
    left: 37px;
	transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
	opacity: 0;
}
/* CSS3過渡及動畫*/
.section6.active .center .img1 .img1a{
	transition-delay: 1.8s;
	opacity: 0;
	-webkit-animation:s6select 6s 3s infinite;
	-moz-animation:s6select 6s 3s infinite;
	animation:s6select 6s 3s infinite;
}
/* select動畫 */
@-webkit-keyframes s6select {
    0% {
		transform:translateX(0px);
		opacity:1;
    }
	
	15% {
	    transform:translateX(0px);
        opacity:1;
    }
	
    30% {
	    transform:translateX(101px);
        opacity:1;
    }
	45% {
	    transform:translateX(202px);
        opacity:1;
    }
	60% {
	    transform:translateX(303px);
        opacity:1;
    }
	75% {
	    transform:translateX(404px);
        opacity:1;
    }
	100% {
	    transform:translateX(404px);
        opacity:1;
    }
}
@-moz-keyframes s6select {
	0% {
		transform:translateX(0px);
		opacity:1;
    }
	
	15% {
	    transform:translateX(0px);
        opacity:1;
    }
	
    30% {
	    transform:translateX(101px);
        opacity:1;
    }
	45% {
	    transform:translateX(202px);
        opacity:1;
    }
	60% {
	    transform:translateX(303px);
        opacity:1;
    }
	75% {
	    transform:translateX(404px);
        opacity:1;
    }
	100% {
	    transform:translateX(404px);
        opacity:1;
    }
}

@keyframes s6select {
	0% {
		transform:translateX(0px);
		opacity:1;
    }
	
	15% {
	    transform:translateX(0px);
        opacity:1;
    }
	
    30% {
	    transform:translateX(101px);
        opacity:1;
    }
	45% {
	    transform:translateX(202px);
        opacity:1;
    }
	60% {
	    transform:translateX(303px);
        opacity:1;
    }
	75% {
	    transform:translateX(404px);
        opacity:1;
    }
	100% {
	    transform:translateX(404px);
        opacity:1;
    }
}

.section6 .center .img2 {
    position: absolute;
    width: 194px;
    height: 210px;
    background:url(/ECSWebSite/images/fullPage/One/MiniPC-One-7.png) center center no-repeat;
    top: 50%;
    left:50%;
    margin-top: 3px;
    margin-left: -405px;
    transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    opacity: 0;
}
/* CSS3過渡及動畫*/
.section6.active .center .img2{
	margin-left: -435px;
	transition-delay: 1.3s;
	opacity: 1;
}

.section6 .center .img2 .img2a{
    position: absolute;
    width: 97px;
    height: 83px;
    background:url(/ECSWebSite/images/fullPage/One/s6_img2a.png) center center no-repeat;
    top: -70px;
    left: 52px;
	transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
	opacity: 0;
}
/* CSS3過渡及動畫*/
.section6.active .center .img2 .img2a{
	transition-delay: 0.8s;
	opacity: 0;
	-webkit-animation:s6wifi 1s 2s infinite;
	-moz-animation:s6wifi 1s 2s infinite;
	animation:s6wifi 1s 2s infinite;
}
/* wifi動畫 */
@-webkit-keyframes s6wifi {
    0% {
		transform:translateY(20px) scale(0.3, 0.3);
		opacity:0.5;
    }
	
    100% {
	    transform:translateY(-25px) scale(1, 1);
        opacity:0.1;
    }
}
@-moz-keyframes s6wifi {
	0% {
		transform:translateY(20px) scale(0.3, 0.3);
		opacity:0.5;
    }
	
    100% {
	    transform:translateY(-25px) scale(1, 1);
        opacity:0.1;
    }
}

@keyframes s6wifi {
	0% {
		transform:translateY(20px) scale(0.3, 0.3);
		opacity:0.5;
    }
	
    100% {
	    transform:translateY(-25px) scale(1, 1);
        opacity:0.1;
    }  
}

.section6 .center .img3 {
    position: absolute;
    width: 486px;
    height: 515px;
    background:url(/ECSWebSite/images/fullPage/One/s6_img3.png) center center no-repeat;
    top: 50%;
	right: -269px;
	margin-top: -190px;
	transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
	opacity: 0;
}
/* CSS3過渡及動畫*/
.section6.active .center .img3{
	right:0;
	transition-delay: 1.5s;
	opacity: 1;
}
.section6 .center .img3 .img3a{
    position: absolute;
    width: 25px;
    height: 23px;
    background:url(/ECSWebSite/images/fullPage/One/s6_img3a.png) center center no-repeat;
    top: 169px;
    left: 202px;
	transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
	opacity: 0;
}
/* CSS3過渡及動畫*/
.section6.active .center .img3 .img3a{
	transition-delay: 1.6s;
	opacity: 0;
	-webkit-animation:s6btn 1s 3s infinite;
	-moz-animation:s6btn 1s 3s infinite;
	animation:s6btn 1s 3s infinite;
}
/* btn動畫 */
@-webkit-keyframes s6btn {
    0% {
		transform:scale(3, 3);
		opacity:0.5;
    }
	
    100% {
	    transform:scale(1, 1);
        opacity:1;
    }
}
@-moz-keyframes s6btn {
	0% {
		transform:scale(3, 3);
		opacity:0.5;
    }
	
    100% {
	    transform:scale(1, 1);
        opacity:1;
    }
}

@keyframes s6btn {
	0% {
		transform:scale(3, 3);
		opacity:0.5;
    }
	
    100% {
	    transform:scale(1, 1);
        opacity:1;
    }
}

.section6 .center .txt {
    position: absolute;
    width: 741px;
    top: 50%;
    left:50%;
    margin-top: 196px;
    margin-left: -404px;
    transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    opacity: 0;
}

/* CSS3過渡及動畫 */
.section6.active .center .txt {
    margin-left: -424px;
    transition-delay: 0.7s;
    opacity: 1;
}

.section6.active .center .txt .icon{
	width:105px;
	height:100px;
	background:url(/ECSWebSite/images/fullPage/One/s6_icon_intel.svg) left top no-repeat;
	position:absolute;
	bottom: 62px;
	left: 349px;
	background-size: 80px;
}


/*======== section7 ========*/
.section7{
	background-color:#000;
	overflow: hidden;
}
.section7 .bg{
    width: 100%;
    height: 100%;
    background:url(/ECSWebSite/images/fullPage/One/s7_bg.jpg) left top no-repeat;
    background-size: cover;
	position:absolute;
	top:0;
	left:0;
}
.section7 .center .txt {
    position: absolute;
    width: 551px;
	left:50%;
	top: 50%;
	margin-left:-299px;
	margin-top:141px;
    transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    opacity: 0;
}

/* CSS3 animation */
.section7.active .center .txt {
    transition-delay: 1.1s;
    opacity: 1;
	margin-top:168px;
} 

.section7 .center .txt h2{
	text-align:center;
	color:#FFF;
}

.section7 .center .txt h3{
	font-size:24px;
	text-align:center;
	color:#FFF;
}

.section7 .center .txt p{
	text-align:center;
	color:#949494;
}

.section7 .center .img1 {
    position: absolute;
    width: 1072px;
    height: 520px;
    background:url(/ECSWebSite/images/fullPage/One/MiniPC-One-17.png) center center no-repeat;
    top: 50%;
	left:50%;
	margin-top: -538px;
	margin-left: -477px;
	transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
	opacity: 0;
}
/* CSS3 animation */
.section7.active .center .img1{
	margin-top: -491px;
	transition-delay: 0.5s;
	opacity: 1;
} 

.section7 .center .img2 {
    position: absolute;
    width: 1128px;
    height: 563px;
    background:url(/ECSWebSite/images/fullPage/One/s7_img2.png) center center no-repeat;
    top: 50%;
	left:50%;
	margin-top: -513px;
	margin-left: -615px;
	transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
	opacity: 0;
	
}
/* CSS3 animation */
.section7.active .center .img2{
	transition-delay: 1.3s;
    opacity: 0;
	animation: myflicker 2s ease-in 1s infinite;
    -webkit-animation: myflicker 2s ease-in 1s infinite;
    -moz-animation: myflicker 2s ease-in 1s infinite;
} 

@keyframes myflicker {
    0% {
        opacity: 0.5;		
    }
	50% {
        opacity: 1;
    }
    100% {
        opacity: 0.5;
    }
}
@-webkit-keyframes myflicker {
     0% {
        opacity: 0.5;	
    }
	50% {
        opacity: 1;
    }
    100% {
        opacity: 0.5;
    }
}
@-moz-keyframes myflicker {
     0% {
        opacity: 0.5;	
    }
	50% {
        opacity: 1;
    }
    100% {
        opacity: 0.5;
    }
}
@-o-keyframes myflicker {
     0% {
        opacity: 0.5;	
    }
	50% {
        opacity: 1;
    }
    100% {
        opacity: 0.5;
    }
} 

.section7 .center .img3 {
    position: absolute;
    width: 74px;
    height: 90px;
    background:url(/ECSWebSite/images/fullPage/One/icon-Card-Reader.svg) center center no-repeat;
    top: 50%;
	left:50%;
	margin-top: 19px;
	margin-left: -60px;
	transition: all 0.7s ease-out;
	-moz-transition: all 0.7s ease-out;
    -webkit-transition: all 0.7s ease-out;
    -o-transition: all 0.7s ease-out;
	opacity: 0;
}
/* CSS3 animation */
.section7.active .center .img3{
	margin-top: 59px;
	transition-delay: 0.8s;
	opacity: 1;
} 


/*======== section8 ========*/
.section8 .bg{
    width: 100%;
    height: 100%;
    background:url(/ECSWebSite/images/fullPage/One/s8_bg.jpg) left top no-repeat;
    background-size: cover;
	position:absolute;
	top:0;
	left:0;
}
.section8 .center .txt {
    position: absolute;
    width: 477px;
    left:50%;
    top: 50%;
    margin-left:-546px;
    margin-top:-161px;
    transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    opacity: 0;
}

/* CSS3 animation */
.section8.active .center .txt {
    transition-delay: 1.2s;
    opacity: 1;
	margin-top:-66px;
} 

.section8 .center .txt h2{
	color:#000;
	text-align:center;
}

.section8 .center .txt h3{
	font-size:24px;
	color:#000;
	margin-bottom:10px;
	text-align:center;
}

.section8 .center .txt p{
	color:#333;
	text-shadow:1px 1px #FFF;
	text-align:center;
}

.section8 .center .img1 {
    position: absolute;
    width: 382px;
    height: 520px;
    background:url(/ECSWebSite/images/fullPage/One/MiniPC-One-8.png) center center no-repeat;
    top: 50%;
	left:50%;
	margin-top: -264px;
	margin-left: 260px;
	transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
	-moz-transform:scale(0.7,0.7);
	-ms-transform:scale(0.7,0.7);
	-o-transform:scale(0.7,0.7);
	-webkit-transform:scale(0.7,0.7);
	opacity: 0;
}
/* CSS3 animation */
.section8.active .center .img1{
	margin-top: -213px;
	margin-left: 211px;
	-moz-transform:scale(1,1);
	-ms-transform:scale(1,1);
	-o-transform:scale(1,1);
	-webkit-transform:scale(1,1);
	transition-delay: 0.5s;
	opacity: 1;
} 

.section8 .center .img2 {
    position: absolute;
    width: 724px;
    height: 440px;
    background:url(/ECSWebSite/images/fullPage/One/s8_img2.png) center center no-repeat;
    bottom:-149px;
	left:50%;
	margin-left:-577px;
	transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
	opacity: 0;
	
}
/* CSS3 animation*/ 
.section8.active .center .img2{
	transition-delay: 0.9s;
    opacity:1;
	bottom:-85px;
	margin-left:-421px;
} 

.section8 .center .img3 {
    position: absolute;
    width: 74px;
    height: 90px;
    background:url(/ECSWebSite/images/fullPage/One/icon-TypeC-EZ-Charger.svg) center center no-repeat;
    top: 50%;
	left:50%;
	margin-top: -239px;
	margin-left: -432px;
	transition: all 0.7s ease-out;
	-moz-transition: all 0.7s ease-out;
    -webkit-transition: all 0.7s ease-out;
    -o-transition: all 0.7s ease-out;
	opacity: 0;
}
/* CSS3 animation */
.section8.active .center .img3{
	margin-top: -190px;
	transition-delay: 1.3s;
	opacity: 1;
}

.section8 .center .img4 {
    position: absolute;
    width: 98px;
    height: 72px;
    background:url(/ECSWebSite/images/fullPage/One/icon-USB3.1-Type-C.svg) center center no-repeat;
    top: 50%;
	left:50%;
	margin-top: -221px;
	margin-left: -330px;
	transition: all 0.7s ease-out;
	-moz-transition: all 0.7s ease-out;
    -webkit-transition: all 0.7s ease-out;
    -o-transition: all 0.7s ease-out;
	opacity: 0;
}
/* CSS3 animation */
.section8.active .center .img4{
	margin-top: -172px;
	transition-delay: 1.4s;
	opacity: 1;
}

/*======== section9 ========*/
.section9 .bg{
    width: 100%;
    height: 100%;
	position:absolute;
	top:0;
	left:0;
}
.section9 .center .txt {
    position: absolute;
    width: 854px;
    left:50%;
    top: 50%;
    margin-left:-502px;
    margin-top:102px;
    transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    opacity: 0;
}

/* CSS3 animation */
.section9.active .center .txt {
    transition-delay: 1.2s;
    opacity: 1;
	margin-top:144px;
}

.section9 .center .txt h2{
	color:#000;
}

.section9 .center .txt h3{
	font-size:24px;
	color:#000;
	margin-bottom:10px;
}

.section9 .center .txt p{
	color:#333;
}

.section9 .center .img1 {
    position: absolute;
    width: 1200px;
    height: 556px;
    background:url(/ECSWebSite/images/fullPage/One/s9_img1.png) center center no-repeat;
    top: 50%;
	left:50%;
	margin-top: -392px;
	margin-left: -273px;
	transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
	opacity: 1;
}
/* CSS3 animation  */
.section9.active .center .img1{
	margin-left: -325px;
	transition-delay: 0.5s;
	opacity: 1;
}

.section9 .center .img2 {
    position: absolute;
    width: 1113px;
    height: 418px;
    background:url(/ECSWebSite/images/fullPage/One/s9_img2.png) center center no-repeat;
    top: 50%;
	left:50%;
	margin-top: -374px;
	margin-left: -286px;
	transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
	opacity: 0;
	
}
/* CSS3 animation */
.section9.active .center .img2{
	transition-delay: 1s;
    opacity:1;
} 

.section9 .center .img3 {
    position: absolute;
    width: 248px;
    height: 274px;
    background:url(/ECSWebSite/images/fullPage/One/MiniPC-One-12.png) center center no-repeat;
    top: 50%;
	left:50%;
	margin-top: -53px;
	margin-left: 61px;
	transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
	opacity:0;
}
/* CSS3 animation */
.section9.active .center .img3{
	transition-delay: 0.8s;
	opacity: 1;
}

.section9 .center .img4 {
    position: absolute;
    width: 98px;
    height: 72px;
    background:url(/ECSWebSite/images/fullPage/One/icon-DisplayPort.svg) center center no-repeat;
    top: 50%;
	left:50%;
	margin-top: 10px;
	margin-left: -519px;
	transition: all 0.7s ease-out;
	-moz-transition: all 0.7s ease-out;
    -webkit-transition: all 0.7s ease-out;
    -o-transition: all 0.7s ease-out;
	opacity: 0;
}
/* CSS3 animation*/ 
.section9.active .center .img4{
	margin-top: 52px;
	transition-delay: 1.3s;
	opacity: 1;
}

.section9 .center .img5 {
    position: absolute;
    width: 98px;
    height: 72px;
    background:url(/ECSWebSite/images/fullPage/One/icon-D-Sub.svg) center center no-repeat;
    top: 50%;
	left:50%;
	margin-top: 10px;
	margin-left: -432px;
	transition: all 0.7s ease-out;
	-moz-transition: all 0.7s ease-out;
    -webkit-transition: all 0.7s ease-out;
    -o-transition: all 0.7s ease-out;
	opacity: 0;
}
/* CSS3 animation */
.section9.active .center .img5{
	margin-top: 52px;
	transition-delay: 1.4s;
	opacity: 1;
}

.section9 .center .img6 {
    position: absolute;
    width: 98px;
    height: 72px;
    background:url(/ECSWebSite/images/fullPage/One/icon-HDMI.svg) center center no-repeat;
    top: 50%;
	left:50%;
	margin-top: 10px;
	margin-left: -345px;
	transition: all 0.7s ease-out;
	-moz-transition: all 0.7s ease-out;
    -webkit-transition: all 0.7s ease-out;
    -o-transition: all 0.7s ease-out;
	opacity: 0;
}
/* CSS3 animation */
.section9.active .center .img6{
	margin-top: 52px;
	transition-delay: 1.5s;
	opacity: 1;
}


/*======== section10 ========*/
.section10 .bg{
    width: 100%;
    height: 100%;
	position:absolute;
	top:0;
	left:0;
}
.section10 .center .txt {
    position: absolute;
    width: 408px;
	left:50%;
	top: 50%;
	margin-left:96px;
	margin-top:-145px;
    transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    opacity:0;
}

/* CSS3 animation */
.section10.active .center .txt {
	margin-top:-109px;
    transition-delay: 1.3s;
    opacity: 1;
}

.section10 .center .txt h2{
	color:#000;
	text-align:center;
}

.section10 .center .txt h3{
	font-size:24px;
	color:#000;
	margin-bottom:10px;
	text-align:center;
}

.section10 .center .txt p{
	color:#333;
	text-align:center;
}

.section10 .center .txt p.remark{
	font-size:14px;
	padding-top:5px;
	font-style:italic;
	color:#AEAEAE;
	text-align:center;
}

.section10 .center .img1 {
    position: absolute;
    width: 600px;
    height: 608px;
    background:url(/ECSWebSite/images/fullPage/One/s10_img1.png) center center no-repeat;
    top: 50%;
	left:-4px;
	margin-top: -280px;
	transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
	opacity: 0;
}
/* CSS3 animation */
.section10.active .center .img1{
	left:-46px;
	transition-delay: 1.2s;
	opacity: 1;
}

.section10 .center .img2 {
    position: absolute;
    width: 223px;
    height: 212px;
    background:url(/ECSWebSite/images/fullPage/One/MiniPC-One-13.png) center center no-repeat;
    top: 50%;
	left:583px;
	margin-top: -237px;
	transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
	opacity: 1;
	
}
/* CSS3 animation */
.section10.active .center .img2{
	left:514px;
	transition-delay: 0.5s;
    opacity:1;
} 

.section10 .center .img2a{
	position: absolute;
    width: 266px;
    height: 89px;
    background:url(/ECSWebSite/images/fullPage/One/s10_img2a.png) center center no-repeat;
    top: 50%;
	left:490px;
	margin-top:-85px;
	transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
	opacity: 0;
}

/* CSS3 animation */
.section10.active .center .img2a{
	transition-delay: 1s;
	opacity: 0;
	-webkit-animation:wifi-1 2.2s 2.3s infinite;
	-moz-animation:wifi-1 2.2s 2.3s infinite;
	animation:wifi-1 2.2s 2.3s infinite;
}

@-webkit-keyframes wifi-1 {
    0% {
		transform:scale(0.5, 0.5);
		opacity:0.7;
    }
    100% {
	    transform:scale(2, 2);
        opacity:0;
    }
}
@-moz-keyframes wifi-1 {
	0% {
		transform:scale(0.5, 0.5);
		opacity:0.7;
    }
    100% {
	    transform:scale(2, 2);
        opacity:0;
    }
}

@keyframes wifi-1 {
	0% {
		transform:scale(0.5, 0.5);
		opacity:0.7;
    }
    100% {
	    transform:scale(2, 2);
        opacity:0;
    }
}

.section10 .center .img2b{
    position: absolute;
    width: 304px;
    height: 105px;
    background:url(/ECSWebSite/images/fullPage/One/s10_img2b.png) center center no-repeat;
    top: 50%;
	left:471px;
	margin-top:-99px;
	transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
	opacity: 0;
}
/* CSS3 animation*/  
.section10.active .center .img2b{
	transition-delay: 1s;
	opacity: 0;
	-webkit-animation:wifi-2 2.2s 2.6s infinite;

	-moz-animation:wifi-2 2.2s 2.6s infinite;
	animation:wifi-2 2.2s 2.6s infinite;
}

@-webkit-keyframes wifi-2 {
    0% {
		transform:scale(0.5, 0.5);
		opacity:1;
    }	
    100% {
	    transform:scale(1.2, 1.2);
        opacity:0.3;
    }
}
@-moz-keyframes wifi-2 {
	0% {
		transform:scale(0.5, 0.5);
		opacity:1;
    }	
    100% {
	    transform:scale(1.2, 1.2);
        opacity:0.3;
    }
}

@keyframes wifi-2 {
	0% {
		transform:scale(0.5, 0.5);
		opacity:1;
    }	
    100% {
	    transform:scale(1.2, 1.2);
        opacity:0.3;
    } 
}

.section10 .center .img3 {
    position: absolute;
    width: 93px;
    height: 79px;
    background:url(/ECSWebSite/images/fullPage/One/s10_img3.png) center center no-repeat;
    top: 50%;
	left:498px;
	margin-top: -266px;
	transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
	opacity:0;
}
/* CSS3 animation */
.section10.active .center .img3{
	left:470px;
	transition-delay: 0.9s;
	opacity: 1;
}

.section10 .center .img4 {
    position: absolute;
    width: 98px;
    height: 72px;
    background:url(/ECSWebSite/images/fullPage/One/icon-Bluetooth.svg) center center no-repeat;
    top: 50%;
	left:50%;
	margin-top: -236px;
	margin-left: 221px;
	transition: all 0.7s ease-out;
	-moz-transition: all 0.7s ease-out;
    -webkit-transition: all 0.7s ease-out;
    -o-transition: all 0.7s ease-out;
	opacity: 0;
}
/* CSS3 animation */
.section10.active .center .img4{
	margin-top: -208px;
	transition-delay: 1.3s;
	opacity: 1;
}

.section10 .center .img5 {
    position: absolute;
    width: 98px;
    height: 72px;
    background:url(/ECSWebSite/images/fullPage/One/icon-Wi-Fi-ac.svg) center center no-repeat;
    top: 50%;
	left:50%;
	margin-top: -236px;
	margin-left: 307px;
	transition: all 0.7s ease-out;
	-moz-transition: all 0.7s ease-out;
    -webkit-transition: all 0.7s ease-out;
    -o-transition: all 0.7s ease-out;
	opacity: 0;
}
/* CSS3 animation*/ 
.section10.active .center .img5{
	margin-top: -208px;
	transition-delay: 1.4s;
	opacity: 1;
}


/*==== 圖表 ====*/
.section10 .center ul.dataimages{
	position: absolute;
    top: 50%;
    left: 50%;
	margin-top: 114px;
	margin-left:142px;
	list-style-type:none;
	width:373px;
	transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    opacity: 0;
}

/* CSS3 animation */
.section10.active .center ul.dataimages {
	margin-top: 144px;
    transition-delay: 1.6s;
    opacity: 1;
}

.section10 ul.dataimages li{height:26px;}
.section10 ul.dataimages li.p1{}
.section10 ul.dataimages li.p1 ul{list-style-type:none;}
.section10 ul.dataimages li.p1 li{float:left; margin-right: 10px;}
.section10 ul.dataimages li.word{margin-right:20px;}
.section10 ul.dataimages li.left{
	width:15px;
	height:15px;
	background-color:#3C78B7;
}

.section10 ul.dataimages li.right{
	width:15px;
	height:15px;
	background-color:#6F6E6E;
}

.section10 li p{
	font-size:16px;
	color: #FFF;
    text-shadow: 1px 1px 1px #000;
	font-family: 'Roboto Condensed', sans-serif, Helvetica, Arial, Verdana;
}

.section10 li.p1 p, .section3 .slide2 li.p4 p{color:#000; text-shadow:none;}

.section10 li.p2{
	width:10px;
	margin-top: 10px;
	transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
}
/* CSS3 animation */
.section10.active li.p2{
	width:290px;
	margin-top: 10px;
	transition-delay: 2s;
}

.section10 li.p2 p{width: 100px; margin-left: 211px; transition: all 0.5s;  opacity: 0;}

/* CSS3 animation */
.section10.active li.p2 p{transition-delay: 3s; opacity: 1;}

.section10 li.p3 p{width: 100px; margin-left: 11px;}
.section10 li.p3{width:86px; margin-top: 10px;}
.section10 li.p4{border-top: 1px solid #828282; margin-top:20px;}
.section10 li.p4 p{text-align:center; color: #444; text-shadow: none; padding-top:10px; font-size:18px;}

.section10 li.p2 h4{
	position: absolute;
    top: 39px;
    right: -50px;
	width:100px;
    font-size: 18px;
    font-style: italic;
    color:#333333;
	transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
	opacity: 0;
	font-family: 'Roboto Condensed', sans-serif, Helvetica, Arial, Verdana;
}
/* CSS3 animation */
.section10.active li.p2 h4{
	right: -23px;
	transition-delay: 2.5s; 
	opacity: 1;
}

.section10 .center ul.dataimages p sup{line-height:0;}

.fp-section ul.dataimages li.word p, .fp-section ul.dataimages li.word2 p{font-size:14px;}
.fp-section ul.dataimages li.blue{
	background: rgb(162,196,232); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(162,196,232,1) 0%, rgba(170,197,222,1) 17%, rgba(97,153,199,1) 50%, rgba(58,132,195,1) 51%, rgba(65,154,214,1) 59%, rgba(75,184,240,1) 71%, rgba(58,139,194,1) 84%, rgba(38,85,139,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(162,196,232,1)), color-stop(17%,rgba(170,197,222,1)), color-stop(50%,rgba(97,153,199,1)), color-stop(51%,rgba(58,132,195,1)), color-stop(59%,rgba(65,154,214,1)), color-stop(71%,rgba(75,184,240,1)), color-stop(84%,rgba(58,139,194,1)), color-stop(100%,rgba(38,85,139,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(162,196,232,1) 0%,rgba(170,197,222,1) 17%,rgba(97,153,199,1) 50%,rgba(58,132,195,1) 51%,rgba(65,154,214,1) 59%,rgba(75,184,240,1) 71%,rgba(58,139,194,1) 84%,rgba(38,85,139,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(162,196,232,1) 0%,rgba(170,197,222,1) 17%,rgba(97,153,199,1) 50%,rgba(58,132,195,1) 51%,rgba(65,154,214,1) 59%,rgba(75,184,240,1) 71%,rgba(58,139,194,1) 84%,rgba(38,85,139,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(162,196,232,1) 0%,rgba(170,197,222,1) 17%,rgba(97,153,199,1) 50%,rgba(58,132,195,1) 51%,rgba(65,154,214,1) 59%,rgba(75,184,240,1) 71%,rgba(58,139,194,1) 84%,rgba(38,85,139,1) 100%); /* IE10+ */
}

.fp-section ul.dataimages li.grey{
	background: rgb(193,193,193); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(193,193,193,1) 0%, rgba(99,99,99,1) 46%, rgba(99,99,99,1) 50%, rgba(99,99,99,1) 53%, rgba(130,130,130,1) 76%, rgba(99,99,99,1) 87%, rgba(99,99,99,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(193,193,193,1)), color-stop(46%,rgba(99,99,99,1)), color-stop(50%,rgba(99,99,99,1)), color-stop(53%,rgba(99,99,99,1)), color-stop(76%,rgba(130,130,130,1)), color-stop(87%,rgba(99,99,99,1)), color-stop(100%,rgba(99,99,99,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(193,193,193,1) 0%,rgba(99,99,99,1) 46%,rgba(99,99,99,1) 50%,rgba(99,99,99,1) 53%,rgba(130,130,130,1) 76%,rgba(99,99,99,1) 87%,rgba(99,99,99,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(193,193,193,1) 0%,rgba(99,99,99,1) 46%,rgba(99,99,99,1) 50%,rgba(99,99,99,1) 53%,rgba(130,130,130,1) 76%,rgba(99,99,99,1) 87%,rgba(99,99,99,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(193,193,193,1) 0%,rgba(99,99,99,1) 46%,rgba(99,99,99,1) 50%,rgba(99,99,99,1) 53%,rgba(130,130,130,1) 76%,rgba(99,99,99,1) 87%,rgba(99,99,99,1) 100%); /* IE10+ */
}

/*======== section11 ========*/
.section11 .bg{
    width: 100%;
    height: 100%;
    background:url(/ECSWebSite/images/fullPage/One/MiniPC-One-14.jpg) center center no-repeat;
    background-size: cover;
	position:absolute;
	top:0;
	left:0;
}
.section11 .center .txt {
    position: absolute;
    width: 714px;
	left:50%;
	top: 50%;
	margin-left:-348px;
	margin-top:-256px;
    transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    opacity: 0;
}

/* CSS3 animation */
.section11.active .center .txt {

	margin-top:-197px;
    transition-delay: 0.7s;
    opacity: 1;
}

.section11 .center .txt h2, .section11 .center .txt p{text-align:center;}

/*======== section12 ========*/
.section12 .bg{
    width: 100%;
    height: 100%;
    background:url(/ECSWebSite/images/fullPage/One/MiniPC-One-15.jpg) center center no-repeat;
    background-size: cover;
	position:absolute;
	top:0;
	left:0;
}
.section12 .center .txt {
    position: absolute;
    width: 425px;
    left:50%;
    top: 50%;
    margin-left:-442px;
    margin-top:-169px;
    background-color:rgba(255,255,255,0.6);
    padding:30px;
    border-radius:8px;
    transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    opacity: 0;
}

/* CSS3 animation */
.section12.active .center .txt {
	margin-left:-549px;
    transition-delay: 1s;
    opacity: 1;
}

.section12 .center .txt h2{text-align:center;}
.section12 .center .txt p{text-align:center;}

.section12 .center .img1 {
    position: absolute;
    width:796px;
    height: 652px;
    background:url(/ECSWebSite/images/fullPage/One/MiniPC-One-16.png) center center no-repeat;
    top: 50%;
	left:50%;
	margin-top: -305px;
	margin-left: -266px;
	transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
	opacity: 1;
}
/* CSS3 animation */
.section12.active .center .img1{
	margin-left: -150px;
	transition-delay: 0.7s;
	opacity: 1;
} 


/*======== section13 ========*/
.section13 {
    /*height: 300px !important;
	margin-top: 300px !important;*/
}
.section13 .fp-tableCell {
    height: 60% !important;
    vertical-align: bottom;
}

/*------------------------------------
go TOP
------------------------------------*/
#gotop {
    display: none;
    position: fixed;
    /*left:50%;*/ 
    right: 28px;
    bottom: 35px;
    /*margin-left:500px;*/  
    text-indent: -9999px;
    width: 46px;
    height: 45px;
    background-image: url(/ECSWebSite/images/gotop.png);
    background-repeat: no-repeat;
    cursor: pointer;
    z-index: 9999;
}
#gotop:hover {
    background-position: left bottom;
}
#gotop a {
    display: block;
    width: 46px;
    height: 45px;
}