@charset "UTF-8";
body{ background: #09212a; font-size: 100%;}
a{ cursor: pointer; text-decoration: none;}


body{ 
	margin:0px; padding:0px; 
	font-family:"微軟正黑體", Arial; 
}

.wrapper{}
.main{
	position: absolute; z-index:2;
	width: 100%; height: 100%;
	overflow: hidden;
}


/*bg*/
.bg{
	position: absolute;
	width: 100%; height: 100%;
	background: url(../images/bg.jpg) no-repeat top center;
}
.bg-r, .bg-l{
	position: absolute;
	width: 668px; height: 812px;
}
.bg-l{
	background: url(../images/bg_l.png) no-repeat;
	left: 0px; 	top: 0px;
}
.bg-r{
	background: url(../images/bg_r.png) no-repeat;
	right: 0px; bottom: 0px;
}


/*sec0*/
.main-title, .logo, .gobtn{
	position: absolute; z-index:2;
}
.logo{
	background: url(../images/logo.png) no-repeat;
	width: 300px; height: 221px;
	top: 20px; left: 30px; 
}
.main-title{
	background: url(../images/main_title.png) no-repeat;
	width: 470px; height: 193px; display: none;
	top: 50%; margin-top: -60px; left: 50%; margin-left: -205px;
}
.gobtn{
	background: url(../images/go_btn.png) no-repeat;
	width: 103px; height: 103px;
	top: 50%; margin-top: 163px; left: 50%; margin-left: -52px;
}
.gobtn:hover{
	background-position: 0px -103px;
	margin-top: 166px;
}

.videomask{
	position: absolute; z-index:2;
	width: 100%; height: 100%;
	background: url(../images/video_bg.png) repeat;
	display: none \9;
}

/*sec1*/
.sec1-txt, .sec1-title, .sec1-role{
	position: absolute;
}
.sec1-txt{
	top: 20px; left: 50%; margin-left: 150px;
	background: url(../images/sec1_txt_bg.png) no-repeat;
	width: 579px; height: 617px; 
}
.sec1-txt:hover{ 
	margin-left: 0px;
   -webkit-transition: all 0.5s ease-out;
       -moz-transition: all 0.5s ease-out;
        -ms-transition: all 0.5s ease-out;
         -o-transition: all 0.5s ease-out;
            transition: all 0.5s ease-out;
}



.sec1-txt p{ 
	padding: 220px 115px 0px 15px;
	font-size: 18px; line-height: 30px;
 }
.sec1-title{
	top: 0px; left: 50%; margin-left: 80px;
	background: url(../images/sec1_title.png) no-repeat;
	width: 280px; height: 206px;
}
.sec1-role{
	top: 20px; left: 50%; margin-left: -800px;
	background: url(../images/sec1_role.png) no-repeat;
	width: 988px; height: 1071px;
}
.sec1-parallax-01{
	position: absolute; cursor: pointer;
	top: 30px; left: 250px;
	width: 181px; height: 308px;
}
.sec1-parallax-02{
	position: absolute; cursor: pointer;
	top: 120px; left: 650px;
}
.sec1-parallax-03{
	position: absolute; cursor: pointer;
	top: 380px; left: 550px;
}

.font-color-b{
	display: block;
	color:#00eaff; font-size: 22px;
	padding-left: 15px;
}


/*sec2*/
.sec2-menu{ 
	position: relative; z-index: 7;
	margin: 0px auto; 
	width: 100%; height:100px; max-width: 1450px;
	overflow: hidden;
}
.sec2-l-menu, .sec2-r-menu, .sec2-l-menu a, .sec2-r-menu a{
	position: absolute;
}
.sec2-l-menu{ top: 20px; left: 50px;}
.sec2-r-menu{ top: 20px; right: 50px;}
.sec2-l-menu a, .sec2-r-menu a{
	position: absolute; display: block; cursor: pointer;	
}
.sec2_01_btn a, .sec2_02_btn a, .sec2_03_btn a, .sec2_04_btn a{
	background: url(../images/sec2_main_btn.png) no-repeat;
	height: 70px;
}
.sec2_01_btn a{	
	left: 0px; 
	width: 222px;
	background-position: 0px 0px;
}
.sec2_01_btn a:hover,.sec2_01_btn a.active{ background-position: 0px -70px;}

.sec2_02_btn a{
	left: 212px;
	width: 223px; 
	background-position: -222px 0px;
}
.sec2_02_btn a:hover,.sec2_02_btn a.active{ background-position: -222px -70px;}
.sec2_03_btn a{	
	right: 213px; 
	width: 222px;
	background-position: -445px 0px;
}
.sec2_03_btn a:hover,.sec2_03_btn a.active{ background-position: -445px -70px;}
.sec2_04_btn a{
	right: 0px;
	width: 221px; 
	background-position: -667px 0px;
}
.sec2_04_btn a:hover,.sec2_04_btn a.active{ background-position: -667px -70px;}

.contentHMove{
	position: absolute;
	top: 0px; left: 0px;
	height: 100%; width: 100%;
}
.conth0{
	left: 0%;
	overflow: hidden;
}
.conth1{
	left: 100%;
	overflow: hidden;
}
.conth2{
	left: 200%;
	overflow: hidden;
}

.backHMove{
	position: absolute;
	top: 0px; left: 0px;
	height: 100%; width: 100%;
}
.bgH0{
	left: 0%;
}
.bgH1{left: -100%;}
.bgH2{left: -200%;}
.sec2-1-role-port{
	position: absolute;
	width: 900px; height: 1000px;
	top: 0px;  left: 50%; margin-left: -430px;
}
.sec2-1-role{
	position: absolute;
	width: 859px; height: 926px;
	background: url(../images/sec2_1_role.png) no-repeat;
	top: 0px;  left: 0px;
}

#sec2-1-port{
	position: absolute;
	width: 859px; height: 926px;
	top: 0px;  left: 50%; margin-left: -430px;
}
.sec2-1-cont{
	position: absolute;
	width: 859px; height: 926px;
	top: 0px;  left: 50%; margin-left: -430px;
}

.sec2-1-title, .sec2-1-01-txtbox, .sec2-1-02-txtbox, .sec2-1-03-txtbox, .sec2-1-04-txtbox, .sec2-1-05-txtbox, .sec2-1-06-txtbox, .sec2-1-txtbox{
	position: absolute;
}

.sec2-1-title{
	background: url(../images/sec2_1_txt.png) no-repeat;
	width: 475px; height: 65px;
	top: 120px; left: -250px;
}
.sec2-1-01-txtbox{
	background: url(../images/sec2_1_01_txtbox.png) no-repeat;
	width: 519px; height: 147px;
	top: 180px; left: -280px;
}
.sec2-1-01-txtbox:hover{
	left: -180px;
   -webkit-transition: all 0.5s ease-out;
       -moz-transition: all 0.5s ease-out;
        -ms-transition: all 0.5s ease-out;
         -o-transition: all 0.5s ease-out;
            transition: all 0.5s ease-out;
}
.sec2-1-01-txtbox p{
	padding: 35px 150px 0px 25px;
	font-size: 15px; line-height: 30px;
}

.sec2-1-02-txtbox{
	background: url(../images/sec2_1_02_txtbox.png) no-repeat;
	width: 439px; height: 172px;
	top: 350px; left: -320px;
}
.sec2-1-02-txtbox:hover{
	left: -180px;
   -webkit-transition: all 0.5s ease-out;
       -moz-transition: all 0.5s ease-out;
        -ms-transition: all 0.5s ease-out;
         -o-transition: all 0.5s ease-out;
            transition: all 0.5s ease-out;
}
.sec2-1-02-txtbox .font-color-b{
	display: inline-block;
	padding: 10px 80px 0px 25px;
}
.sec2-1-02-txtbox p{
	padding: 5px 80px 0px 25px;
	font-size: 15px; line-height: 30px;
}

.sec2-1-03-txtbox{
	background: url(../images/sec2_1_03_txtbox.png) no-repeat;
	width: 439px; height: 172px;
	top: 550px; left: -280px;
}
.sec2-1-03-txtbox:hover{
	left: -180px;
   -webkit-transition: all 0.5s ease-out;
       -moz-transition: all 0.5s ease-out;
        -ms-transition: all 0.5s ease-out;
         -o-transition: all 0.5s ease-out;
            transition: all 0.5s ease-out;
}
.sec2-1-03-txtbox .font-color-b{
	display: inline-block;
	padding: 10px 80px 0px 25px;
}
.sec2-1-03-txtbox p{
	padding: 5px 80px 0px 25px;
	font-size: 15px; line-height: 30px;
}

.sec2-1-04-txtbox{
	background: url(../images/sec2_1_04_txtbox.png) no-repeat;
	width: 421px; height: 155px;
	top: 180px; left: 780px;
}
.sec2-1-04-txtbox:hover{
	left: 680px;
   -webkit-transition: all 0.5s ease-out;
       -moz-transition: all 0.5s ease-out;
        -ms-transition: all 0.5s ease-out;
         -o-transition: all 0.5s ease-out;
            transition: all 0.5s ease-out;
}
.sec2-1-04-txtbox .font-color-b{
	display: inline-block;
	padding: 20px 20px 0px 35px;
}
.sec2-1-04-txtbox p{
	padding: 5px 20px 0px 35px;
	font-size: 15px; line-height: 30px;
}

.sec2-1-05-txtbox{
	background: url(../images/sec2_1_05_txtbox.png) no-repeat;
	width: 491px; height: 155px;
	top: 350px; left: 700px;
}
.sec2-1-05-txtbox:hover{
	left: 600px;
   -webkit-transition: all 0.5s ease-out;
       -moz-transition: all 0.5s ease-out;
        -ms-transition: all 0.5s ease-out;
         -o-transition: all 0.5s ease-out;
            transition: all 0.5s ease-out;
}
.sec2-1-05-txtbox .font-color-b{
	display: inline-block;
	padding: 20px 10px 0px 100px;
}
.sec2-1-05-txtbox p{
	padding: 5px 10px 0px 110px; 
	font-size: 14px; line-height: 30px;
}

.sec2-1-06-txtbox{
	background: url(../images/sec2_1_06_txtbox.png) no-repeat;
	width: 491px; height: 174px;
	top: 530px; left: 720px;
}
.sec2-1-06-txtbox:hover{
	left: 620px;
   -webkit-transition: all 0.5s ease-out;
       -moz-transition: all 0.5s ease-out;
        -ms-transition: all 0.5s ease-out;
         -o-transition: all 0.5s ease-out;
            transition: all 0.5s ease-out;
}
.sec2-1-06-txtbox .font-color-b{
	display: inline-block;
	padding: 20px 10px 0px 100px;
}
.sec2-1-06-txtbox p{
	padding: 5px 10px 0px 110px; 
	font-size: 14px; line-height: 30px;
}
.sec2-1-txtbox{
	top: 738px; left: 350px;
	background: url(../images/sec2_1_txtbox.png) no-repeat;
	width: 879px; height: 138px;
}

.sec2-1-txtbox .uparrow{
	position: absolute;
	top: -33px; left: 0px;
	background: url(../images/up.gif) no-repeat;
	width: 103px; height: 33px;

}
.sec2-1-txtbox:hover{
	left: 120px; top: 600px;
}



.sec2-2-role-port{
	position: absolute;
	width: 1000px; height: 1000px;
	top: 0px;  left: 50%; margin-left: -459px;
}
.sec2-2-role{
	position: absolute;
	width: 918px; height: 800px;
	background: url(../images/sec2_2_role.png) no-repeat;
	top: 0px;  left: 20px; 
}

#sec2-2-port{
	position: absolute;
	width: 920px; height: 1000px;
	top: 0px;  left: 50%; margin-left: -459px;
}
.sec2-2-l-txt, .sec2-2-r-txt{
	position: absolute; display: block;
}
.sec2-2-l-txt{
	background: url(../images/sec2_2_l_txt.png) no-repeat;
	top: 110px; left: -150px;
	width: 337px; height: 561px;
}
.sec2-2-r-txt{
	background: url(../images/sec2_2_r_txt.png) no-repeat;
	top: 150px; right: -150px;
	width: 383px; height: 532px;
}


.sec2-3-role-port{
	position: absolute;
	width: 1600px; height: 960px;
	top: 0px;  left: 50%; margin-left: -600px;
}
.sec2-3-role{
	position: absolute;
	width: 1600px; height: 960px;
	background: url(../images/sec2_3_role.png) no-repeat;
	top: 0px;  left: 0px; 
}

#sec2-3-port{
	position: absolute;
	width: 920px; height: 1000px;
	top: 0px;  left: 50%; margin-left: -459px;
}

.sec2-3-l-txt, .sec2-3-r-txt{
	position: absolute;
}
.sec2-3-l-txt{
	background: url(../images/sec2_3_l_txt.png) no-repeat;
	top: 150px; left: 50%; margin-left: -600px;
	width: 728px; height: 551px;
}
.sec2-3-r-txt{
	background: url(../images/sec2_3_r_txt.png) no-repeat;
	top: 210px; left: 50%; margin-left: 311px;
	width: 311px; height: 548px;
}
/*sec3*/
.sec3-cont{
	position: absolute;
	background: url(../images/sec3_cont.png) no-repeat;
	width: 1341px; height: 667px;
	top: 50px; left: 50%; margin-left: -670px;
}
/*sec4-cont*/
.sec4-role{
	position: absolute;
	top: 0px; left: 50%; margin-left: -200px; 
	background: url(../images/sec4_role.png) no-repeat;
	width: 906px; height: 795px;
}
.sec4-cont{
	position: absolute;
	background: url(../images/sec4_cont.png) no-repeat;
	width: 1266px; height: 800px;
	top: 0px; left: 50%; margin-left: -700px;
}


/*sec5*/
.sec5-box{
	position: absolute;
	top: 80px; left: 50%; margin-left: -289px;
	/*background: url(../images/sec5_btn.png) no-repeat;*/
	width: 578px; height: 669px;
}
.sec5-box div{
	position: absolute;
}
.sec5-btn03 a, .sec5-btn02 a{
	position: absolute; z-index:1;
	width: 290px; height: 180px;
	top: 50px; left: 00px; 
 }
.sec5-btn01 a, .sec5-btn04 a{
	position: absolute; z-index:1;
	width: 290px; height: 180px;
	top: 80px; left: 00px; 
 }
.sec5-btn05 a, .sec5-btn06 a{
	position: absolute; z-index:1;
	width: 290px; height: 180px;
	top: 100px; left: 00px;
 }
.sec5-btn01{
	top: 167px; left: 0px;
 	background: url(../images/sec5_01_btn.png) no-repeat;
	width: 290px; height: 335px;
}
.sec5-btn01:hover{
	background: url(../images/sec5_01_over_btn.png) no-repeat;
 }

.sec5-btn02{
	top: 0px; left: 0px;
 	background: url(../images/sec5_02_btn.png) no-repeat;
	width: 289px; height: 335px;
}
.sec5-btn02:hover{
	background: url(../images/sec5_02_over_btn.png) no-repeat;
 }
.sec5-btn03{
	top: 0px; right: 0px;
 	background: url(../images/sec5_03_btn.png) no-repeat;
	width: 289px; height: 335px;
}
.sec5-btn03:hover{
	background: url(../images/sec5_03_over_btn.png) no-repeat;
 }
.sec5-btn04{
	top: 167px; right: 0px;
 	background: url(../images/sec5_04_btn.png) no-repeat;
	width: 289px; height: 335px;
}
.sec5-btn04:hover{
	background: url(../images/sec5_04_over_btn.png) no-repeat;
 }
.sec5-btn05{
	bottom: 0px; right: 0px;
 	background: url(../images/sec5_05_btn.png) no-repeat;
	width: 289px; height: 335px;
}
.sec5-btn05:hover{
	background: url(../images/sec5_05_over_btn.png) no-repeat;
 }
.sec5-btn06{
	bottom: 0px; left: 0px;
 	background: url(../images/sec5_06_btn.png) no-repeat;
	width: 289px; height: 335px;
}
.sec5-btn06:hover{
	background: url(../images/sec5_06_over_btn.png) no-repeat;
 }

.sec5-box-bg{
	position: absolute;
	width: 1449px; height: 745px;
	top: -40px; left: 50%; margin-left: -725px;
	background: url(../images/sec5_cont_bg.png) no-repeat;
}
.sec5-bg{
	position: absolute;
	top: 240px; left: 50%; margin-left: -1330px;
	background: url(../images/sec5_cont_dbg.png) no-repeat;
	width: 2657px; height: 509px;
}
.backMove{
	position: absolute;
	top: 0px; left: 0px;
	height: 100%; width: 100%;
}
.bgbasic{
	position: absolute;
	top: 0px;
	height: 100%; width: 100%;
}



.bg0{
	top: 0%;	
}
.bg1{
	top: -100%;
	background: url(../images/sec1_sec_bg.png) no-repeat top center;	
}
.bg2{
	top: -200%;	
}
.bg3{
	top: -300%;
	
}
.bg4{
	top: -400%;	
}
.bg5{
	top: -500%;	
}

.contentMove{
	position: absolute; z-index:5;
	top: 0px; left: 0px;
	height: 100%; width: 100%;
}
.contbasic{
	position: absolute;
	top: 0px;
	height: 100%; width: 100%;
}
.cont0{
	top: 0%;
}
.cont1{
	top: 100%;
}
.cont2{
	top: 200%;
}
.cont3{
	top: 300%;	
}
.cont4{
	top: 400%;
}
.cont5{
	top: 500%;
}
.content{ 
	position: relative;
	margin: 0px auto; color: #fff;
	width: 100%; height: 100%;
	overflow: hidden;
}


/*nav*/
.nav{
	position: fixed; z-index:9; display: none;
	background: url(../images/nav_bg.png) no-repeat;
	width: 189px; height: 180px;
	top: 50%; margin-top: -90px; right: -139px;
}
.nav:hover{
	 right: 0px;
}
.nav ul{
	position: absolute;
	top: 7px; left: 55px; 
	list-style: none;
	width: 120px; height: 150px;
}
.nav li{ float: left;}
.nav li a{
	display: block; cursor: pointer;
	width: 120px; height: 30px;
}

.goto1btn a{
	background: url(../images/nav_btn.png) no-repeat;
	background-position: 0px 0px;
}
.goto1btn a:hover, .goto1btn a.active{ background-position: -120px 0px;}
.goto2btn a{
	background: url(../images/nav_btn.png) no-repeat;
	background-position: 0px -30px;
}
.goto2btn a:hover, .goto2btn a.active{ background-position: -120px -30px;}
.goto3btn a{
	background: url(../images/nav_btn.png) no-repeat;
	background-position: 0px -60px;
}
.goto3btn a:hover, .goto3btn a.active{ background-position: -120px -60px;}
.goto4btn a{
	background: url(../images/nav_btn.png) no-repeat;
	background-position: 0px -90px;
}
.goto4btn a:hover, .goto4btn a.active{ background-position: -120px -90px;}
.goto5btn a{
	background: url(../images/nav_btn.png) no-repeat;
	background-position: 0px -120px;
}
.goto5btn a:hover, .goto5btn a.active{ background-position: -120px -120px;}


.goserverbtn{
	position: absolute; display: inline-block; z-index:2;
	background:  url(../images/goserver_btn.png) no-repeat;
	bottom: 15px; right: 15px;
	width: 214px; height: 215px;
}