@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);
body {
    font-family:"微軟正黑體", "新細明體",'Roboto Condensed', Arial, Helvetica, sans-serif;
}
h1 {
    font-family:"微軟正黑體", "新細明體",'Roboto Condensed', Arial, Helvetica, sans-serif;
    font-size: 60px;
    font-weight: 400;
}
h2 {
    font-family:"微軟正黑體", "新細明體",'Roboto Condensed', Arial, Helvetica, sans-serif;
    font-size: 38px;
    font-weight: 400;
}
h3 {
    font-family:"微軟正黑體", "新細明體",'Roboto Condensed', Arial, Helvetica, sans-serif;
    font-size: 33px;
    font-weight: 300;
    color: #333;
}
p {
    font-family:"微軟正黑體", "新細明體",'Roboto Condensed', Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.8;
    color: #333;
}
/*------------------------------------
preLoader
------------------------------------*/

#jpreLoader {
    width: 223px;
    height: 41px;
    background: url(/ECSWebSite/images/fullPage/X-Squared/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:#FFFFFF;
    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: #444;
}
h1.nav_title a:hover {
    opacity: 0.5;
}

h1.nav_title a sup{
	font-size: 14px;
    position: absolute;
}

.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: #333;
    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: #777777;
    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: #777777;
    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;
}
#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;
}

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


.fp-slide {
	overflow: hidden;
}


/*======== section1 ========*/
.section1 {
    width: 100%;
    height: 100%;
    background: url(/ECSWebSite/images/fullPage/X-Squared/s1_bg.jpg) left top no-repeat;
    background-size: cover;
    min-height: 500px;
    overflow: hidden;
}
.section1 #intro-mouse {
    position: absolute;
    width: 70px;
    height: 70px;
    background: url(/ECSWebSite/images/fullPage/X-Squared/landing-mouse-tappetino.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/X-Squared/landing-mouse.gif) center center no-repeat;
}
.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: 568px;
    height: 516px;
    background: url(/ECSWebSite/images/fullPage/X-Squared/MiniPC-X-Squared-1.png) left top no-repeat;
    top: 50%;
    left: 50%;
    margin-top: -131px;
    margin-left: -108px;
   /* animation: ani_s1i 1.5s ease-in;
    -webkit-animation: ani_s1i 1.5s ease-in;
    -moz-animation: ani_s1i 1.5s ease-in;*/
}
@keyframes ani_s1i {
    0% {
        margin-top: -101px;
        opacity: 0.5;
    }
    100% {
        margin-top: -131px;
        opacity: 1;
    }
}
@-webkit-keyframes ani_s1i {
    0% {
        margin-top: -101px;
        opacity: 0.5;
    }
    100% {
        margin-top: -131px;
        opacity: 1;
    }
}
@-moz-keyframes ani_s1i {
    0% {
        margin-top: -101px;
        opacity: 0.5;
    }
    100% {
        margin-top: -131px;
        opacity: 1;
    }
}
@-o-keyframes ani_s1i {
    0% {
        margin-top: -101px;
        opacity: 0.5;
    }
    100% {
        margin-top: -131px;
        opacity: 1;
    }
}
.section1 .center .txt {
    position: absolute;
    top: 50%;
	left:50%;
    margin-top: -29px;
    margin-left: -472px;
   /* animation: ani_s1t 2s ease-in;
    -webkit-animation: ani_s1t 1.5s ease-in;
    -moz-animation: ani_s1t 1.5s ease-in;
    -o-animation: ani_s1t 1.5s ease-in;*/
}
@keyframes ani_s1t {
    0% {
        opacity: 0;
        margin-top: -109px;
    }
    100% {
        opacity: 1;
        margin-top: -69px;
    }
}
@-webkit-keyframes ani_s1t {
    0% {
        opacity: 0;
        margin-top: -109px;
    }
    100% {
        opacity: 1;
        margin-top: -69px;
    }
}
@-moz-keyframes ani_s1t {
    0% {
        opacity: 0;
        margin-top: -109px;
    }
    100% {
        opacity: 1;
        margin-top: -69px;
    }
}
@-o-keyframes ani_s1t {
    0% {
        opacity: 0;
        margin-top: -109px;
    }
    100% {
        opacity: 1;
        margin-top: -69px;
    }
}
@keyframes ani_s1i1 {
    0% {
        top: 38%;
        opacity: 0;
    }
    100% {
        top: 41%;
        opacity: 1;
    }
}
.section1 .center .txt h1 {
    font-size: 155px;
    text-align: center;
    font-weight: 200;
    text-shadow: 1px 1px 3px #FFF;
    font-family: 'Roboto Condensed', sans-serif, Helvetica, Arial, Verdana;
	float: left;
    margin-left: 109px;
    height: 175px;
}
.section1 .center .txt h1 sup {
    font-size: 40px;
    position: absolute;
    top: 26px;
	font-weight:400;
}

.section1 .center .txt h2 {
	width: 110px;
	height: 16px;
	float: left;
	margin-top: 122px;
	margin-left: 34px;
	font-size: 22px;
	font-weight: bold;
}

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

/*======== section2 slide1 ========*/
.section2 {
    width: 100%;
    height: 100%;
	background-color:#FFFFFF;
    min-height: 500px;
    overflow: hidden;
}

.section2 .slide1 .center .img1 {
    position: absolute;
    width:1048px;
    height: 800px;
    background:url(/ECSWebSite/images/fullPage/X-Squared/MiniPC-X-Squared-2.png) left top no-repeat;
	top:0px;
	left:50%;
    margin-top: -236px;
    margin-left: -731px;
	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過渡及動畫 */
.section2.active .slide1.active .center .img1{
	margin-top:-75px;
    transition-delay: 0.8s;
    opacity: 1;
} 

.section2 .slide1 .center .txt {
    position: absolute;
    width: 600px;
    top: 50%;
    left: 50%;
    margin-top: 109px;
    margin-left: -106px;
    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過渡及動畫 */
.section2.active .slide1.active .center .txt {
    margin-left: -20px;
    transition-delay: 1.5s;
    opacity: 1;
}

/*======== section2 slide2 ========*/
.section2 .slide2{}

.section2 .slide2 .bg{
    width: 100%;
    height: 100%;
    background:url(/ECSWebSite/images/fullPage/X-Squared/s2s2_bg.jpg) center center no-repeat;
    background-size: cover;
}

.section2 .slide2 .center .txt {
    position: absolute;
    width: 567px;
	left:50%;
	margin-left:-500px;
    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過渡及動畫 */
.section2.active .slide2.active .center .txt {
    transition-delay: 0.8s;
    opacity: 1;
	margin-top:130px;
}

.section2 .slide2 .center .txt h2{color:#FFFFFF; text-shadow:1px 1px 1px #1B1B1B;}
.section2 .slide2 .center .txt p{color:#FFFFFF; text-shadow:1px 1px 1px #1B1B1B;}


/*======== section2 slide3 ========*/
.section2 .slide3 .bg {
    width: 100%;
    height: 100%;
    background:url(/ECSWebSite/images/fullPage/X-Squared/s2s3_bg.jpg) center center no-repeat;
    background-size: cover;
}

.section2 .slide3 .center .img1{
	 position: absolute;
     width: 644px;
     height: 382px;
     background:url(/ECSWebSite/images/fullPage/X-Squared/MiniPC-X-Squared-3.png) center center no-repeat;
     top: 50%;
     left: 50%;
     margin-top: -664px;
     margin-left: -382px;
	 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過渡及動畫 */
.section2.active .slide3.active .center .img1{
     margin-top: -380px;
     transition-delay: 0.8s;
     opacity: 1;
}

.section2 .slide3 .center .img2{
	 position: absolute;
     width: 281px;
     height: 242px;
     background:url(/ECSWebSite/images/fullPage/X-Squared/s2s3_img2.png) center center no-repeat;
     top: 50%;
     left: 50%;
     margin-top: -350px;
     margin-left: 125px;
	 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過渡及動畫 */
.section2.active .slide3.active .center .img2{
     margin-top: -315px;
	 margin-left: 66px;
     transition-delay: 1.8s;
     opacity: 1;
}

.section2 .slide3 .center .txt {
    position: absolute;
    width: 422px;
    top: 50%;
	left:50%;
	margin-left:-450px;
    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過渡及動畫 */
.section2.active .slide3.active .center .txt {
	margin-top:92px;
    transition-delay: 2.3s;
    opacity: 1;
}

/*==== 圖表 ====*/
.section2 .slide3 .center ul.dataimages{
	position: absolute;
    top: 50%;
    left: 50%;
	margin-left:40px;
	list-style-type:none;
	width:400px;
	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過渡及動畫 */
.section2.active .slide3.active .center ul.dataimages {
	margin-top:5px;
    transition-delay: 2.8s;
    opacity: 1;
	/* font-family: 'Roboto Condensed', sans-serif, Helvetica, Arial, Verdana; */
}

.section2 .slide3 ul.dataimages li{height:30px;}
.section2 .slide3 ul.dataimages li.p1{
    font-family: 'Roboto Condensed', sans-serif, Helvetica, Arial, Verdana;
}
.section2 .slide3 ul.dataimages li.p1 ul{list-style-type:none;}
.section2 .slide3 ul.dataimages li.p1 li{float:right; margin-right: 10px;}

.section2 .slide3 ul.dataimages li.word{margin-right:20px;}
.section2 .slide3 ul.dataimages li.left{
	width:15px;
	height:15px;
	background-color:#3C78B7;
}

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

.section2 .slide3 li p{
	color: #FFF;
    text-shadow: 1px 1px 1px #000;
}

.section2 .slide3 li.p1 p, .section2 .slide3 li.p4 p, .section2 .slide3 li.p7 p{color:#000; text-shadow:none;}

.section2 .slide3 li.p2{
	width:321px;
	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過渡及動畫 */
.section2.active .slide3.active li.p2{
	width:60px;
	margin-top: 10px;
	transition-delay: 3.3s;
}

.section2 .slide3 li.p5{
	width:396px;
	background-color:#3C78B7;
	margin-top: 20px;
	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過渡及動畫 */
.section2.active .slide3.active li.p5{
	width:106px;
	margin-top: 20px;
	transition-delay: 3.5s;
}
.section2 .slide3 li.p5 p{
	width: 100px; 
	margin-left: 50px; 
	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;
}
.section2 .slide3 li.p2 p{
	width: 100px; 
	margin-left: 6px; 
	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過渡及動畫 */
.section2.active .slide3.active li.p2 p{transition-delay: 4s; opacity: 1;}
.section2.active .slide3.active li.p5 p{transition-delay: 4.3s; opacity: 1; margin-left: 50px;}

.section2 .slide3 li.p3 p{width:100px; margin-left: 277px;font-family: 'Roboto Condensed', sans-serif, Helvetica, Arial, Verdana;}
.section2 .slide3 li.p6 p{width:100px; margin-left: 342px;font-family: 'Roboto Condensed', sans-serif, Helvetica, Arial, Verdana;}
.section2 .slide3 li.p3{width:321px; margin-top: 10px;}
.section2 .slide3 li.p4, .section2 .slide3 li.p7{border-top: 1px solid #555; margin-top:10px;}
.section2 .slide3 li.p4 p, .section2 .slide3 li.p7 p{text-align:center;font-family: 'Roboto Condensed', sans-serif, Helvetica, Arial, Verdana;}
.section2 .slide3 li.p6{width:396px; background-color:#6F6E6E; margin-top: 10px;}

.fp-section ul.dataimages li.word p, .fp-section ul.dataimages li.word2 p{font-size: 15px;font-family: 'Roboto Condensed', sans-serif, Helvetica, Arial, Verdana;}
.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+ */
}

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

/*======== section3 slide1 ========*/
.section3 {
    width: 100%;
    height: 100%;
    background:url(/ECSWebSite/images/fullPage/X-Squared/s3s1_bg.jpg) center center no-repeat;
    background-size: cover;
    min-height: 500px;
    overflow: hidden;
}

.section3 .slide1 .center .img1 {
    position: absolute;
    width: 1040px;
    height: 800px;
    background:url(/ECSWebSite/images/fullPage/X-Squared/MiniPC-X-Squared-4.png) center center no-repeat;
    top: 50%;
	right:0;
	margin-top: -440px;
	margin-right: -390px;
	transition: all 1s ease-out;
	-moz-transition: all 1s ease-out;
    -webkit-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
	opacity: 0;
}
/* CSS3過渡及動畫 */
.section3.active .slide1.active .center .img1{
	margin-top: -440px;
    margin-right: -190px;
	transition-delay: 0.5s;
	opacity: 1;
}

.section3 .slide1 .center .img2{
    position: absolute;
    width:342px;
    height: 338px;
    background:url(/ECSWebSite/images/fullPage/X-Squared/s3s1_img2.png) center center no-repeat;
    top: 50%;
    left: 50%;
	margin-top: -381px;
    margin-left: -444px;
	transition: all 1s ease-out;
	-moz-transition: all 1s ease-out;
    -webkit-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
	opacity: 0;
}
/* CSS3過渡及動畫 */
.section3.active .slide1.active .center .img2{
	margin-top: -212px;
    margin-left: -526px;
	transition-delay: 0.5s;
	opacity: 1;
}


.section3 .slide1 .center .txt {
    position: absolute;
    width: 621px;
    top: 50%;
    left: 50%;
    margin-top: 133px;
    margin-left: -458px;
    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過渡及動畫 */
.section3.active .slide1.active .center .txt {
    transition-delay: 1.5s;
    opacity: 1;
}
.section3 .slide1 .center .txt p.remark {
    font-family: 'Roboto Condensed', sans-serif, Helvetica, Arial, Verdana;
    font-size: 14px;
    font-weight: 300;
    line-height: 30px;
    color: #85B3C1;
    margin-top: 18px;
    width: 600px;
}
/*======== section3 slide2 ========*/
.section3 .slide2{
	width: 100%;
    height: 100%;
    background:url(/ECSWebSite/images/fullPage/X-Squared/s3s2_bg.jpg) center center no-repeat;
    background-size: cover;
    min-height: 500px;
    overflow: hidden;
}

.section3 .slide2 .center .img1 {
    position: absolute;
    width: 700px;
    height: 492px;
    background:url(/ECSWebSite/images/fullPage/X-Squared/s3s2_img1.png) center center no-repeat;
    top: 50%;
    left: 0;
    margin-top: -280px;
    margin-left: -358px;
	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過渡及動畫 */
.section3.active .slide2.active .img1{
	margin-left: -5px;
	transition-delay: 2.6s;
    opacity: 1;
}

.section3 .slide2 .center .img1 .a{
    position: absolute;
    width:488px;
    height: 354px;
    background:url(/ECSWebSite/images/fullPage/X-Squared/s3s2_img1a.png) center center no-repeat;
    top:15px;
    left: 170px;
	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過渡及動畫 */ 
.section3.active .slide2.active .center .img1 .a{
    transition-delay: 3.3s;
    opacity: 1;
} 


.section3 .slide2 .center .txt {
    position: absolute;
    width: 573px;
    top: 50%;
    left: 50%;
    margin-top: 142px;
    margin-left: -589px;
    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過渡及動畫 */
.section3.active .slide2.active .center .txt {
    margin-left: -528px;
    transition-delay: 0.7s;
    opacity: 1;
}

.section3.active .slide2.active .center .txt .icon{
	width:105px;
	height:100px;
	background:url(/ECSWebSite/images/fullPage/X-Squared/s3s2_icon_Wi-Fi_ac.svg) left top no-repeat;
	position:absolute;
	bottom: -36px;
	left:-8px;
	background-size:91px 84px;
}

.section3 .slide2 .center .txt p{padding-left:88px;}


/*==== 圖表 ====*/
.section3 .slide2 .center ul.dataimages{
	position: absolute;
    top: 50%;
    left: 50%;
	margin-top: 143px;
	margin-left:-21px;
	list-style-type:none;
	width:400px;
	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過渡及動畫 */
.section3.active .slide2.active .center ul.dataimages {
	margin-left:100px;
    transition-delay: 1.5s;
    opacity: 1;
}

.section3 .slide2 ul.dataimages li{height:30px;}
.section3 .slide2 ul.dataimages li.p1{}
.section3 .slide2 ul.dataimages li.p1 ul{list-style-type:none;}
.section3 .slide2 ul.dataimages li.p1 li{float:right; margin-right: 10px;}

.section3 .slide2 ul.dataimages li.word{margin-right:20px;}
.section3 .slide2 ul.dataimages li.left{
	width:15px;
	height:15px;
	background-color:#3C78B7;
}

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

.section3 .slide2 li p{
	color: #FFF;
    text-shadow: 1px 1px 1px #000;
}

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

.section3 .slide2 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過渡及動畫 */
.section3.active .slide2.active li.p2{
	width:315px;
	margin-top: 10px;
	transition-delay: 2s;
}

.section3 .slide2 li.p2 p{
	width: 100px; 
	margin-left: 235px; 
	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過渡及動畫 */
.section3.active .slide2.active li.p2 p{transition-delay: 3s; opacity: 1;}

.section3 .slide2 li.p3 p{width: 100px; margin-left: 26px;font-family: 'Roboto Condensed', sans-serif, Helvetica, Arial, Verdana;}
.section3 .slide2 li.p3{width:100px; margin-top: 10px;}
.section3 .slide2 li.p4{border-top: 1px solid #555; margin-top:10px;}
.section3 .slide2 li.p4 p{text-align:center;font-family: 'Roboto Condensed', sans-serif, Helvetica, Arial, Verdana;}

.section3 .slide2 li.p2 h4{
	position: absolute;
    top: 44px;
    right: -50px;
	width:100px;
    font-size: 21px;
    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過渡及動畫 */
.section3.active .slide2.active li.p2 h4{
	right: -20px;
	transition-delay: 2.5s; 
	opacity: 1;
}

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

/*======== section3 slide3 ========*/
.section3 .slide3{
	width: 100%;
    height: 100%;
    background:url(/ECSWebSite/images/fullPage/X-Squared/s3s3_bg.jpg) center center no-repeat;
    background-size: cover;
    min-height: 500px;
    overflow: hidden;
}

.section3 .slide3 .center .img1{
    position: absolute;
    width: 924px;
    height: 504px;
    background:url(/ECSWebSite/images/fullPage/X-Squared/MiniPC-X-Squared-5.png) center center no-repeat;
    left: 50%;
	margin-top: -478px;
    margin-left: -462px;
	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過渡及動畫 */
.section3.active .slide3.active .center .img1{
	margin-top: -140px;
	transition-delay: 0.8s; 
	opacity: 1;	
}

.section3 .slide3 .center .txt {
    position: absolute;
    width: 546px;
    top: 50%;
	left:50%;
    margin-top: -1px;
    margin-left: -524px;
    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過渡及動畫 */
.section3.active .slide3.active .center .txt {
    margin-top: 78px;
    transition-delay: 1.5s;
    opacity: 1;
}

.section3 .slide3 .center .txt p{padding-left:88px;}

.section3.active .slide3.active .center .txt .icon{
	width:105px;
	height:100px;
	background:url(/ECSWebSite/images/fullPage/X-Squared/s3s3_icon_M.2.svg) left top no-repeat;
	position:absolute;
	bottom:-11px;
	left:-8px;
	background-size:91px 84px;
}


/*==== 圖表 ====*/
.section3 .slide3 .center ul.dataimages{
	position: absolute;
    top: 50%;
    left: 50%;
	margin-left:72px;
	list-style-type:none;
	width:400px;
	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過渡及動畫 */
.section3.active .slide3.active .center ul.dataimages {
	margin-top:-18px;
    transition-delay: 2s;
    opacity: 1;
}

.section3 .slide3 ul.dataimages li{height:30px;}
.section3 .slide3 ul.dataimages li.p1{}
.section3 .slide3 ul.dataimages li.p1 ul{list-style-type:none;}
.section3 .slide3 ul.dataimages li.p1 li{float:right; margin-right: 10px;}

.section3 .slide3 ul.dataimages li.word{margin-right:20px;}
.section3 .slide3 ul.dataimages li.left{
	width:15px;
	height:15px;
	background-color:#3C78B7;
}

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

.section3 .slide3 li p{
	color: #FFF;
    text-shadow: 1px 1px 1px #000;
}

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

.section3 .slide3 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過渡及動畫 */
.section3.active .slide3.active li.p2{
	width:298px;
	margin-top: 10px;
	transition-delay: 2.5s;
}

.section3 .slide3 li.p2 h4{
	position: absolute;
    top: 44px;
    right: -42px;
	width:100px;
    font-size: 21px;
    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過渡及動畫 */
.section3.active .slide3.active li.p2 h4{
	right: -2px;
	transition-delay: 3.8s;
	opacity: 1;
}

.section3 .slide3 li.p5{
	width:10px;
	background-color:#3C78B7;
	margin-top: 20px;
	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過渡及動畫 */
.section3.active .slide3.active li.p5{
	width:308px;
	margin-top: 20px;
	transition-delay: 2.8s;
}

.section3 .slide3 li.p5 h4{
	position: absolute;
    top: 174px;
    right: -43px;
	width:100px;
    font-size: 21px;
    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過渡及動畫 */
.section3.active .slide3.active li.p5 h4{
	right: -13px;
	transition-delay: 4.1s;
	opacity: 1;
}


.section3 .slide3 li.p2 p{
	width: 100px; 
	margin-left: 230px; 
	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過渡及動畫 */
.section3.active .slide3.active li.p2 p{transition-delay: 3.3s; opacity: 1;}


.section3 .slide3 li.p3 p{width:100px; margin-left: 99px;font-family: 'Roboto Condensed', sans-serif, Helvetica, Arial, Verdana;}
.section3 .slide3 li.p6 p{width:100px; margin-left: 99px;font-family: 'Roboto Condensed', sans-serif, Helvetica, Arial, Verdana;}
.section3 .slide3 li.p3{width:178px; margin-top: 10px;}
.section3 .slide3 li.p4, .section3 .slide3 li.p7{border-top: 1px solid #555; margin-top:10px;}
.section3 .slide3 li.p4 p, .section3 .slide3 li.p7 p{text-align:center;font-family: 'Roboto Condensed', sans-serif, Helvetica, Arial, Verdana;}
.section3 .slide3 li.p6{width:162px; background-color:#6F6E6E; margin-top: 10px;}

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

/*======== section3 slide4 ========*/
.section3 .slide4{
	width: 100%;
    height: 100%;
    background:url(/ECSWebSite/images/fullPage/X-Squared/s3s4_bg.jpg) center center no-repeat;
    background-size: cover;
    min-height: 500px;
    overflow: hidden;
}

.section3 .slide4 .center .img1{
    position: absolute;
    width: 700px;
    height: 330px;
    background:url(/ECSWebSite/images/fullPage/X-Squared/MiniPC-X-Squared-6.png) center center no-repeat;
	top:50%;
	left:50%;
	margin-top: -191px;
	margin-left: -330px;
	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過渡及動畫*/
.section3.active .slide4.active .center .img1{
	margin-left: -530px;
	transition-delay: 0.8s; 
	opacity: 1;	
} 

.section3 .slide4 .center .img2{
    position: absolute;
    width: 530px;
    height: 274px;
    background:url(/ECSWebSite/images/fullPage/X-Squared/MiniPC-X-Squared-7.png) center center no-repeat;
	top:50%;
	left:50%;
	margin-top: -247px;
	margin-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過渡及動畫*/
.section3.active .slide4.active .center .img2{
	margin-left: -7px;
	transition-delay: 1.2s; 
	opacity: 1;	
} 

.section3 .slide4 .center .line{
	position:absolute;
	top:50%;
	left:50%;
	margin-top: -45px;
	margin-left: -31px;
	height:117px;
	border-left:2px solid #CA9C17;
	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過渡及動畫*/
.section3.active .slide4.active .line{
	margin-top: -75px;
    transition-delay: 2s;
    opacity: 1;
	-webkit-animation: flash 1s 2.5s infinite;
	-moz-animation: flash 1s 2.5s infinite;
	animation: flash 1s 2.5s infinite;
} 

.section3 .slide4 .center .line .icon2{
	width:105px;
	height:100px;
	background:url(/ECSWebSite/images/fullPage/X-Squared/s3s4_icon_EZ-Charger.svg) left bottom no-repeat;
	background-size:91px 84px;
	position:absolute;
	top:99px;
	left:-41px;
}

/* flash動畫 */
@-webkit-keyframes flash {
    0% {
		opacity:1;
    }
	
	50%{
		opacity:0.4;
	}

    100% {
        opacity:1;
    }
}

@-moz-keyframes wave1 {
	0% {
		opacity:1;
    }
	
	50%{
		opacity:0.4;
	}

    100% {
        opacity:1;
    }
}

@keyframes wave1 {
	0% {
		opacity:1;
    }
	
	50%{
		opacity:0.4;
	}

    100% {
        opacity:1;
    }	
}


.section3 .slide4 .center .txt {
    position: absolute;
    width: 563px;
    top: 50%;
	left:50%;
    margin-top: 97px;
    margin-left: -255px;
    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過渡及動畫*/
.section3.active .slide4.active .center .txt {
    margin-left: -517px;
    transition-delay: 1.8s;
    opacity: 1;
} 

.section3 .slide4 .center .txt p{padding-left:88px;}

.section3.active .slide4.active .center .txt .icon{
	width:105px;
	height:100px;
	background:url(/ECSWebSite/images/fullPage/X-Squared/s3s4_icon_USB3.0.svg) left top no-repeat;
	position:absolute;
	bottom:-10px;
	left:-5px;
	background-size:91px 84px;
}

/*==== 圖表 ====*/
.section3 .slide4 .center ul.dataimages{
	position: absolute;
    top: 50%;
    left: 50%;
	margin-top: 120px;
	margin-left:-21px;
	list-style-type:none;
	width:400px;
	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過渡及動畫 */
.section3.active .slide4.active .center ul.dataimages {
	margin-left:83px;
    transition-delay: 2s;
    opacity: 1;
}

.section3 .slide4 ul.dataimages li{height:30px;}
.section3 .slide4 ul.dataimages li.p1{}
.section3 .slide4 ul.dataimages li.p1 ul{list-style-type:none;}
.section3 .slide4 ul.dataimages li.p1 li{float:right; margin-right: 10px;}

.section3 .slide4 ul.dataimages li.word{margin-right:20px;}
.section3 .slide4 ul.dataimages li.left{
	width:15px;
	height:15px;
	background-color:#3C78B7;
}

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

.section3 .slide4 li p{
	color: #FFF;
    text-shadow: 1px 1px 1px #000;
}

.section3 .slide4 li.p1 p, .section3 .slide4 li.p4 p{color:#000; text-shadow:none;font-family: 'Roboto Condensed', sans-serif, Helvetica, Arial, Verdana;}

.section3 .slide4 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過渡及動畫 */
.section3.active .slide4.active li.p2{
	width:315px;
	margin-top: 10px;
	transition-delay: 2.5s;
}

.section3 .slide4 li.p2 p{
	width: 100px;
	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;  
	opacity: 0;
	font-family: 'Roboto Condensed', sans-serif, Helvetica, Arial, Verdana;
}
/* CSS3過渡及動畫 */
.section3.active .slide4.active li.p2 p{transition-delay: 3s; opacity: 1;}

.section3 .slide4 li.p3 p{width: 100px; margin-left: 3px;font-family: 'Roboto Condensed', sans-serif, Helvetica, Arial, Verdana;}
.section3 .slide4 li.p3{width:76px; margin-top: 10px;}
.section3 .slide4 li.p4{border-top: 1px solid #555; margin-top:10px;}
.section3 .slide4 li.p4 p{text-align:center;}

.section3 .slide4 li.p2 h4{
	position: absolute;
    top: 44px;
    right: -50px;
	width:100px;
    font-size: 21px;
    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過渡及動畫 */
.section3.active .slide4.active li.p2 h4{
	right: -20px;
	transition-delay: 3.5s; 
	opacity: 1;
}

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


/*======== section4 slide1 ========*/
.section4 .slide1 .bg {
	width: 100%;
    height: 100%;
    background:url(/ECSWebSite/images/fullPage/X-Squared/s4s1_bg.jpg) center center no-repeat;
    background-size: cover;
}

.section4 .slide1 .center .img1 {
    position: absolute;
    width:819px;
    height: 594px;
	background:url(/ECSWebSite/images/fullPage/X-Squared/s4s1_img1.png) center top no-repeat; 
    bottom:-10px;
    left: 50%;
    margin-left: -135px;
	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過渡及動畫 */
.section4.active .slide1.active .center .img1{
    margin-left: -195px;
    transition-delay: 0.8s;
    opacity: 1;
}

.section4 .slide1 .center .img2 {
    position: absolute;
    width:76px;
    height: 76px;
    background:url(/ECSWebSite/images/fullPage/X-Squared/s4s1_img2.png) center center no-repeat;
    bottom:0;
    left: 50%;
    margin-left: 242px;
	margin-bottom:300px;
	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過渡及動畫 */
.section4.active .slide1.active .center .img2{
    margin-left: 187px;
    transition-delay: 2.3s;
    opacity: 0.5;
	-webkit-animation: wave1 2s 3s infinite;
	-moz-animation: wave1 2s 3s infinite;
	animation: wave1 2s 3s infinite;
}

/* sound-1動畫 */
@-webkit-keyframes wave1 {
    0% {
		transform: scale(0.7);
		opacity:0;
    }
	
	50%{
	    transform: scale(1.3);
		opacity:1;
	}

    100% {
	    transform: scale(1.3);
        opacity:0;
    }
}

@-moz-keyframes wave1 {
	0% {
		transform: scale(0.7);
		opacity:0;
    }
	
	50%{
	    transform: scale(1.3);
		opacity:1;
	}

    100% {
	    transform: scale(1.3);
        opacity:0;
    }
}

@keyframes wave1 {
	0% {
		transform: scale(0.7);
		opacity:0;
    }
	
	50%{
	    transform: scale(1.3);
		opacity:1;
	}

    100% {
	    transform: scale(1.3);
        opacity:0;
    }	
}

.section4 .slide1 .center .img3{
    position: absolute;
    width:151px;
    height: 151px;
    background:url(/ECSWebSite/images/fullPage/X-Squared/s4s1_img3.png) center center no-repeat;
    bottom:0;
    left: 50%;
    margin-left: 149px;
	margin-bottom: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過渡及動畫 */
.section4.active .slide1.active .center .img3{
    transition-delay: 2.6s;
    opacity: 0;
	-webkit-animation: wave2 2s 3.3s infinite;
	-moz-animation: wave2 2s 3.3s infinite;
	animation: wave2 2s 3.3s infinite;
}

/* sound-2動畫 */
@-webkit-keyframes wave2 {
    0% {
		transform: scale(1);
		opacity:0;
    }
	
	50%{
	    transform: scale(1.5);
		opacity:1;
	}

    100% {
	    transform: scale(2);
        opacity:0;
    }
}

@-moz-keyframes wave2 {
    0% {
		transform: scale(1);
		opacity:0;
    }
	
	50%{
	    transform: scale(1.5);
		opacity:1;
	}

    100% {
	    transform: scale(2);
        opacity:0;
    }
}

@keyframes wave2 {
    0% {
		transform: scale(1);
		opacity:0;
    }
	
	50%{
	    transform: scale(1.5);
		opacity:1;
	}

    100% {
	    transform: scale(2);
        opacity:0;
    }
}

.section4 .slide1 .center .img4{
    position: absolute;
    width:614px;
    height: 464px;
    background:url(/ECSWebSite/images/fullPage/X-Squared/MiniPC-X-Squared-8.png) center center no-repeat;
	left:50%;
    bottom:0;
	margin-left: -307px;
	margin-bottom:208px;
	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過渡及動畫 */
.section4.active .slide1.active .center .img4{
    margin-left: -446px;
    transition-delay: 1.3s;
    opacity: 1;
}

.section4 .slide1 .center .img4 .img4a{
	position: absolute;
    width: 452px;
    height: 258px;
    top: 25px;
    left: 27px;
	transition: all 1s ease-out;
	-moz-transition: all 1s ease-out;
    -webkit-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
    opacity: 0;
}
/* CSS3過渡及動畫 */
.section4.active .slide1.active .center .img4 .img4a{
    transition-delay: 4s;
    opacity: 1;

}

.section4 .slide1 .center .txt {
    position: absolute;
    width: 880px;
	bottom:44px;
	left:50%;
	margin-left:-483px;
	margin-bottom:16px;
	text-shadow:1px 1px 1px #000;
    border-radius: 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;
    opacity: 0;
	color:#FFFFFF;
}
/* CSS3過渡及動畫 */
.section4.active .slide1.active .center .txt {
    transition-delay: 1.6s;
    opacity: 1;
}
.section4 .slide1 .center .txt p{color:#FFF; padding-left:113px;}

.section4 .slide1 .center .txt p.remark{
	font-size:12px;
	padding-top:10px;
	font-style: italic;	
}

.section4.active .slide1.active .center .txt .icon{
	width:105px;
	height:100px;
	background:url(/ECSWebSite/images/fullPage/X-Squared/s4s1_icon_Cortana.svg) left top no-repeat;
	position:absolute;
	left:2px;
	bottom: 0px;
	background-size:105px 100px;
}


/*======== section4 slide2 ========*/
.section4 .slide2 .bg {
	width: 100%;
    height: 100%;
    background:url(/ECSWebSite/images/fullPage/X-Squared/s4s2_bg.jpg) center center no-repeat;
    background-size: cover;
}

.section4 .slide2 .center .img1 {
    position: absolute;
    width:922px;
    height: 439px;
    background:url(/ECSWebSite/images/fullPage/X-Squared/s4s2_img1.png) center center no-repeat;
    top: 50%;
    left: 50%;
    margin-top: -111px;
    margin-left: -529px;
	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過渡及動畫 */
.section4.active .slide2.active .center .img1{
    transition-delay: 0.7s;
    opacity: 1;
}

.section4 .slide2 .center .img2 {
    position: absolute;
    width:169px;
    height: 138px;
    background:url(/ECSWebSite/images/fullPage/X-Squared/MiniPC-X-Squared-9.png) center center no-repeat;
    bottom:-192px;
    left: 50%;
    margin-left: 313px;
	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過渡及動畫 */
.section4.active .slide2.active .center .img2{
	bottom:-10px;
    transition-delay: 2s;
    opacity: 1;
}

.section4 .slide2 .center .img2 .img3{
	position: absolute;
    width:90px;
    height: 65px;
    background:url(/ECSWebSite/images/fullPage/X-Squared/s4s2_img3.png) center center no-repeat;
    top:-33px;
	left:-1px;
	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過渡及動畫 */
.section4.active .slide2.active .center .img3{
	bottom:-10px;
    transition-delay: 3s;
    opacity: 0;
	-webkit-animation: wifi 1s 3s infinite;
	-moz-animation: wifi 1s 3s infinite;
	animation: wifi 1s 3s infinite;
}
/* round2動畫 */
@-webkit-keyframes wifi {
    0% {
		transform:translateX(0px) translateY(20px) scale(0.5, 0.5);
		opacity:1;
    }
	
    100% {
	    transform:translateX(-15px) translateY(-20px) scale(1.2, 1.2);
        opacity:0.1;
    }
}
@-moz-keyframes wifi {
    0% {
		transform:translateX(0px) translateY(20px) scale(0.5, 0.5);
		opacity:1;
    }
	
    100% {
	    transform:translateX(-15px) translateY(-20px) scale(1.2, 1.2);
        opacity:0.1;
    }
}

@keyframes wifi {
    0% {
		transform:translateX(0px) translateY(20px) scale(0.5, 0.5);
		opacity:1;
    }
	
    100% {
	    transform:translateX(-15px) translateY(-20px) scale(1.2, 1.2);
        opacity:0.1;
    }
}

.section4 .slide2 .center .img4{
    position: absolute;
    width:316px;
    height: 98px;
    background:url(/ECSWebSite/images/fullPage/X-Squared/s4s2_img4.png) center center no-repeat;
    top:50%;
    left: 50%;
    margin-top: -335px;
    margin-left:45px;
	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過渡及動畫*/
.section4.active .slide2.active .center .img4{
    margin-top: -239px;
    transition-delay: 1.5s;
    opacity: 1;
} 

.section4 .slide2 .center .img5{
    position: absolute;
    width:908px;
    height: 365px;
    background:url(/ECSWebSite/images/fullPage/X-Squared/s4s2_img5.png) center center no-repeat;
    top:50%;
    left: 50%;
    margin-top: -97px;
    margin-left:-529px;
	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過渡及動畫*/
.section4.active .slide2.active .center .img5{
    transition-delay: 4s;
    opacity: 1;
} 

.section4 .slide2 .center .txt {
    position: absolute;
    top: 50%;
	left:50%;
    width: 391px;
    margin-left: -446px;
    margin-top: -322px;
    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過渡及動畫*/
.section4.active .slide2.active .center .txt {
    margin-top: -240px;
    transition-delay: 1.2s;
    opacity: 1;
} 

.section4 .slide2 .center .txt a.film, a.view{
	color: #FF5000;
    cursor: pointer;
    display: inline-block;
    font-size: 16px;
    line-height: 1;
    margin-right: 30px;
    text-decoration: none;
    text-transform: uppercase;
    margin-top: 20px;
}

.section4 .slide2 .center .txt a i.fa{
	margin-right:6px;
}


.section4 .slide2 .center .txt a p {
  font-size: 15px;
  color: #e54f00;
  display: inline-block;
}

.section4 .slide2 .center .txt a:hover p{
	text-decoration:underline;
	
}


/*======== section4 slide3 ========*/
.section4 .slide3 .bg {
	width: 100%;
    height: 100%;
    background:url(/ECSWebSite/images/fullPage/X-Squared/s4s3_bg.jpg) center center no-repeat;
    background-size: cover;
}

.section4 .slide3 .center .img1{
    position: absolute;
    width:462px;
    height: 423px;
    background:url(/ECSWebSite/images/fullPage/X-Squared/s4s3_img1.png) center center no-repeat;
    top:50%;
    left: 50%;
    margin-top: -335px;
    margin-left:17px;
	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過渡及動畫 */ 
.section4.active .slide3.active .center .img1{
    margin-left:-7px;
    transition-delay: 0.6s;
    opacity: 1;
} 

.section4 .slide3 .center .img1 .a{
    position: absolute;
    width:419px;
    height: 244px;
    background:url(/ECSWebSite/images/fullPage/X-Squared/s4s3_img1a.png) center center no-repeat;
    top:18px;
    left: 22px;
	transition: all 0.8s ease-out;
	-moz-transition: all 0.8s ease-out;
    -webkit-transition: all 0.8s ease-out;
    -o-transition: all 0.8s ease-out;
    opacity: 0;
}
/* CSS3過渡及動畫 */ 
.section4.active .slide3.active .center .img1 .a{
    transition-delay: 2.4s;
    opacity: 1;
}


.section4 .slide3 .center .img2{
    position: absolute;
    width:455px;
    height: 367px;
    background:url(/ECSWebSite/images/fullPage/X-Squared/s4s3_img2.png) center center no-repeat;
    top:50%;
    left: 50%;
    margin-top: -325px;
    margin-left:-419px;
	transition: all 0.8s ease-out;
	-moz-transition: all 0.8s ease-out;
    -webkit-transition: all 0.8s ease-out;
    -o-transition: all 0.8s ease-out;
    opacity: 0;
}
/* CSS3過渡及動畫 */ 
.section4.active .slide3.active .center .img2{
    margin-left:-459px;
    transition-delay: 1s;
    opacity: 1;
} 

.section4 .slide3 .center .img2 .a{
    position: absolute;
    width:407px;
    height: 239px;
    background:url(/ECSWebSite/images/fullPage/X-Squared/s4s3_img2a.png) center center no-repeat;
    top:10px;
    left: 23px;
	transition: all 0.8s ease-out;
	-moz-transition: all 0.8s ease-out;
    -webkit-transition: all 0.8s ease-out;
    -o-transition: all 0.8s ease-out;
    opacity: 0;
}
/* CSS3過渡及動畫 */ 
.section4.active .slide3.active .center .img2 .a{
    transition-delay: 2.6s;
    opacity: 1;
}

.section4 .slide3 .center .img3{
    position: absolute;
    width:214px;
    height: 200px;
    background:url(/ECSWebSite/images/fullPage/X-Squared/MiniPC-X-Squared-10.png) center center no-repeat;
    top:50%;
    left: 50%;
    margin-top: -52px;
    margin-left:-135px;
	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過渡及動畫 */ 
.section4.active .slide3.active .center .img3{
    transition-delay: 1.8s;
    opacity: 1;
} 

.section4 .slide3 .center .img4{
	position: absolute;
    width:231px;
    height: 42px;
    margin-top: -101px;
    margin-left:650px;
}
.section4 .slide3 .center .img4 ul{
	list-style-type:none;
	width:600px;
}

.section4 .slide3 .center .img4 li{
	float:left;
	width:100px;
}

.section4 .slide3 .center .img4 li.img4a{
	width:105px;
	height:100px;
	background:url(/ECSWebSite/images/fullPage/X-Squared/s4s3_icon_HDMI.svg) center center no-repeat;
	background-size: 105px 100px;

}

.section4 .slide3 .center .img4 li.img4b{
	width:105px;
	height:100px;
	background:url(/ECSWebSite/images/fullPage/X-Squared/s4s3_icon_D-Sub.svg) center center no-repeat;
	background-size: 105px 100px;
}

.section4 .slide3 .center .img4 ul:after{clear:both;}

.section4 .slide3 .center .txt {
    position: absolute;
    bottom: 0;
	left:50%;
    width: 457px;
    margin-left: -446px;
    margin-bottom: 103px;
    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過渡及動畫 */ 
.section4.active .slide3.active .center .txt {
    margin-bottom: 80px;
    transition-delay: 2s;
    opacity: 1;
} 


/*======== section5 ========*/
.section5 {}
.section5 .bg {
    width: 100%;
    height: 100%;
    background:url(/ECSWebSite/images/fullPage/X-Squared/s5_bg.jpg) center center no-repeat;
    background-size: cover;
}

.section5 .center .txt {
    position: absolute;
    bottom: 10px;
	left:50%;
    width: 460px;
    margin-left:2px;
    margin-bottom: 226px;
    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過渡及動畫 */
.section5.active .center .txt {
    margin-bottom: 100px;
    transition-delay: 0.8s;
    opacity: 1;
}

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

/*======== section7 slide1 ========*/
.section7 .slide1 .bg{
    width:100%;
	height:100%;    
}

.section7 .slide1 .center .img1 {
    position: absolute;
    width: 1130px;
    height: 485px;
    background: url(/ECSWebSite/images/fullPage/X-Squared/s7s1_img1.jpg) center center no-repeat;
    top: 0px;
    left: 50%;
    margin-left: -565px;
    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;
}
/*.section7 .slide1 .center .img1:after{
	content:"";
	width:320px;
	height:586px;	
}*/

.section7 .slide1 .center .img1a{
	position: absolute;
    width: 267px;
    height: 150px;
    top: 101px;
    left: 428px;
    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;
}
.section7.active .slide1.active .center .img1 .img1a {
    transition-delay: 1.8s;
    opacity: 1;
}

.section7 .slide1 .center .img2 {
    position: absolute;
    width: 100%;
    height: 485px;
    background:url(/ECSWebSite/images/fullPage/X-Squared/s7s1_bg.jpg)right center repeat-x;
    top: 0px;
    left: 0px;
    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;
}

.section7 .slide1 .center .img3 {
    position: absolute;
    width: 579px;
    height: 495px;
    background:url(/ECSWebSite/images/fullPage/X-Squared/s7s1_img3.png)center no-repeat;
    bottom: 0;
    right: -170px;
    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 .slide1.active .center .img3 {
	transition-delay: 1.2s;
    opacity: 1;
	right: -70px;
}

.section7 .slide1 .center .img3a {
    position: absolute;
    width: 154px;
    height: 111px;
    background:url(/ECSWebSite/images/fullPage/X-Squared/s7s1_img3a.png)center no-repeat;
    top: -68px;
    right:427px;
    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 .slide1.active .center .img3a {
	opacity: 0;
    transition-delay: 1.8s;
    -webkit-animation: s7s1wifi 1.5s 2.3s infinite;
    -moz-animation: s7s1wifi 1.5s 2.3s infinite;
    animation: s7s1wifi 1.5s 2.3s infinite;
    animation-name: s7s1wifi;
    animation-duration: 1.8s;
    animation-timing-function: initial;
    animation-delay: 1.8s;
    animation-iteration-count: infinite;
    animation-direction: initial;
    animation-fill-mode: initial;
    animation-play-state: initial;
}
/* wifi動畫 */
@-webkit-keyframes s7s1wifi {
	0% {
		transform:translateX(0px) translateY(20px) scale(0.5, 0.5);
		opacity:1;

    }
	
    100% {
	    transform:translateX(-20px) translateY(10px) scale(1, 1);
        opacity:0.5;
		top: -88px;
  

    }
   
}
@-moz-keyframes s7s1wifi {
	0% {
		transform:translateX(0px) translateY(20px) scale(0.5, 0.5);
		opacity:1;

    }
	
    100% {
	    transform:translateX(-20px) translateY(10px) scale(1, 1);
        opacity:0.5;
        top: -88px;

    }
	
}

@keyframes s7s1wifi {
	0% {
		transform:translateX(0px) translateY(20px) scale(0.5, 0.5);
		opacity:1;

    }
	
    100% {
	    transform:translateX(-20px) translateY(10px) scale(1, 1);
        opacity:0.5;
        top: -88px;

    }
}

.section7 .slide1 .center .item{
	float:left;
	position:absolute;
	top: 50%;
    left: 50%;
	margin-top: 130px;
    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;
}


.section7 .slide1 .center .app-store{
	width:103px;
	height:140px;
	background:url(/ECSWebSite/images/fullPage/X-Squared/Appstore_QRcode_icon.svg) center no-repeat;
	background-size:103px 140px;
    margin-left: -634px;
}
.section7 .slide1 .center .google-play{
	width:103px;
	height:140px;
	background:url(/ECSWebSite/images/fullPage/X-Squared/Googleplay_QRcode_icon.svg) center no-repeat;
	background-size:103px 140px;
    margin-left: -503px;
}
/* CSS3 animation */
.section7.active .slide1.active .center .item{
	margin-top: 174px;
    transition-delay: 2.3s;
    opacity: 1;
}


.section7 .slide1 .center .txt {
    position: absolute;
    width: 529px;
	left:50%;
	top: 50%;
	margin-left:-339px;
	margin-top:103px;
	color: #FFFFFF;
    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;
}
.section7 .slide1 .center .txt a.user-guide{
	display: block;
	width:140px;
	height:45px;
	margin-top: 11px;
	background:url(/ECSWebSite/images/fullPage/X-Squared/user_guide_icon.png)left top no-repeat;
}

.section7 .slide1 .center .txt a.user-guide:hover {
	background:url(/ECSWebSite/images/fullPage/X-Squared/user_guide_icon.png)left bottom no-repeat;
}

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

.section7 .slide1 .center .txt h2{color:#333;}



/*======== section7 slide2 ========*/
.section7 .slide2 .bg{
    width: 100%;
    height: 100%;
    background:url(/ECSWebSite/images/fullPage/X-Squared/s7s2_bg.jpg)right center no-repeat;
    background-size: cover;
}
.section7 .slide2 .center .txt {
    position: absolute;
    width: 520px;
	left:50%;
	top: 50%;
	margin-left:-477px;
	margin-top:-203px;
	color: #FFFFFF;
    text-shadow: 1px 1px 1px #000000;
    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 .slide2.active .center .txt {
	margin-top:-70px;
    transition-delay: 0.7s;
    opacity: 1;
}
.section7 .slide2 .center .txt p{color:#FFFFFF;}

/*======== section14 slide3 ========*/
.section7 .slide3 .bg{
    width: 100%;
    height: 100%;
    background:url(/ECSWebSite/images/fullPage/X-Squared/s7s3_bg.jpg)left center no-repeat;
    background-size: cover;
}
.section7 .slide3 .center .txt {
    position: absolute;
    width: 900px;
	left:50%;
	top: 50%;
	margin-left:-430px;
	margin-top:129px;
	color: #FFFFFF;
    text-shadow: 1px 1px 1px #000000;
    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 .slide3.active .center .txt {
	margin-top:77px;
    transition-delay: 1.5s;
    opacity: 1;
}
.section7 .slide3 .center .txt p{color:#FFFFFF;}

.section7 .slide3 .center .img1{
	position: absolute;
    width:200px;
    height: 156px;
    background:url(/ECSWebSite/images/fullPage/X-Squared/s7s3_img1.png) center center no-repeat;
    top:50%;
    left: 50%;
    margin-top: -253px;
    margin-left:-446px;
	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過渡及動畫 */ 
.section7.active .slide3.active .center .img1{
	margin-top: -133px;
	transition-delay: 0.6s;
	opacity: 1;
}

.section7 .slide3 .center .img2{
	position: absolute;
    width:200px;
    height: 156px;
    background:url(/ECSWebSite/images/fullPage/X-Squared/s7s3_img2.png) center center no-repeat;
    top:50%;
    left: 50%;
    margin-top: -253px;
    margin-left:-87px;
	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過渡及動畫 */ 
.section7.active .slide3.active .center .img2{
	margin-top: -133px;
	transition-delay: 0.9s;
	opacity: 1;
}

.section7 .slide3 .center .img3{
	position: absolute;
    width:200px;
    height: 156px;
    background:url(/ECSWebSite/images/fullPage/X-Squared/s7s3_img3.png) center center no-repeat;
    top:50%;
    left: 50%;
    margin-top: -246px;
    margin-left:265px;
	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過渡及動畫 */ 
.section7.active .slide3.active .center .img3{
	margin-top: -126px;
	transition-delay: 1.2s;
	opacity: 1;
}

/*======== section7 slide4 ========*/
.section7 .slide4 .bg{
    width: 100%;
    height: 100%;
    background:url(/ECSWebSite/images/fullPage/X-Squared/s7s4_bg.jpg)center center no-repeat;
    background-size: cover;
}
.section7 .slide4 .center .txt {
    position: absolute;
    width: 544px;
	left:50%;
	top: 50%;
	margin-left:-107px;
	margin-top:-4px;
	color: #FFFFFF;
    text-shadow: 1px 1px 1px #000000;
    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 .slide4.active .center .txt {
	margin-left:-17px;
    transition-delay: 1.8s;
    opacity: 1;
}
.section7 .slide4 .center .txt p{color:#FFFFFF;}

.section7 .slide4 .center .img1{
	position: absolute;
    width:800px;
    height: 416px;
    background:url(/ECSWebSite/images/fullPage/X-Squared/s7s4_img1.png) center center no-repeat;
    top:50%;
    left: -116px;
    margin-top: -133px;
	transition: all 1s ease-out;
	-moz-transition: all 1s ease-out;
    -webkit-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
	transform:rotate(-20deg);
	-o-transform:rotate(-20deg);
	-ms-transform:rotate(-20deg);
	-webkit-transform:rotate(-20deg);
	transform-origin:left bottom;
	-webkit-transform-origin:left bottom;
	-moz-transform-origin:left bottom;
	-o-transform-origin:left bottom;
    opacity: 0;
}

/* CSS3過渡及動畫 */ 
.section7.active .slide4.active .center .img1{
	transform:rotate(0deg);
	-o-transform:rotate(0deg);
	-ms-transform:rotate(0deg);
	-webkit-transform:rotate(0deg);
	left: -116px;
	transition-delay: 0.6s;
	opacity: 1;
} 

.section7 .slide4 .center .img1a{
	position: absolute;
    width:448px;
    height: 254px;
    background:url(/ECSWebSite/images/fullPage/X-Squared/s7s4_img1a.png) center center no-repeat;
    top:50%;
    left: 50%;
    margin-top: -113px;
    margin-left:-122px;
	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過渡及動畫 */ 
.section7.active .slide4.active .center .img1a{
	transition-delay: 2s;
	opacity: 1;
} 


.section7 .slide4 .center .img2{
	position: absolute;
    width:696px;
    height: 683px;
    background:url(/ECSWebSite/images/fullPage/X-Squared/s7s4_img2.png) center center no-repeat;
    top:50%;
    left: 50%;
    margin-top: -429px;
    margin-left:-504px;
	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過渡及動畫 */ 
.section7.active .slide4.active .center .img2{
	transition-delay: 2.2s;
	opacity: 0;
	animation: iconFlash2 2s ease-in 2.4s infinite;
    -webkit-animation: iconFlash2 2s ease-in 2.4s infinite;
    -moz-animation: iconFlash2 2s ease-in 2.4s infinite;
} 


.section7 .slide4 .center .img3{
	position: absolute;
    width:460px;
    height: 523px;
    background:url(/ECSWebSite/images/fullPage/X-Squared/s7s4_img3.png) center center no-repeat;
    top:50%;
    left: 50%;
    margin-top: -410px;
    margin-left:-378px;
	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過渡及動畫 */ 
.section7.active .slide4.active .center .img3{
	margin-top: -421px;
    margin-left:-358px;
	transition-delay: 2.2s;
	opacity: 1;
	animation: iconFlash 2s ease-in 2.4s infinite;
    -webkit-animation: iconFlash 2s ease-in 2.4s infinite;
    -moz-animation: iconFlash 2s ease-in 2.4s infinite;
} 

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




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


/*------------------------------------
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;
}