@charset "big5";
@import url("../../../css/_reset.css");
@import url("../../../css/_footer.css");
@import url("/css/fancybox/jquery.fancybox.css");


#XlegendTop { position: relative; width:100%; min-width: 1000px; height: 45px; z-index: 999; }
#googleCode { position: absolute; z-index: 900; }
ul, li { list-style-type: none; }
.footer_container {z-index: 999;}
.fancybox-lock .fancybox-overlay { overflow-y: hidden; !important }  /* fancybox  */
body {
	background: #49c2f4;
	color: #393939;
	font-size: 15px;
	line-height: 1.5em;
	font-family: "·L³n¥¿¶ÂÅé", Verdana;
}

.section .content {
	position: relative;
	width: 1000px;
	margin: 0 auto;
}
.clearFix:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
}
* html .clearFix,*:first-child+html .clearFix { zoom: 1;}
/* =============================================================
  intro
==============================================================*/
.nav {
	position: fixed;
	padding-left: 25px;
	width: 160px;
	height: 100%;
	right: 0px;top: 0;
	z-index: 99;
}

.nav .container {
	position: relative;
	width: 160px;
	height: 100%;
	background-color: rgba(0,130,197,0.95);
}
.nav ul {
	position: absolute;
	left: 50%;
	margin-left: -45px;
	top: 50%;
	margin-top: -55px;
}
.nav li {}
.nav li a {
	width: 90px;
	height: 23px;
	white-space: nowrap;
  	text-indent: 200%;
  	overflow: hidden;
  	display: block;
  	background: url('../images/nav.png') right 0 no-repeat;
  	margin-bottom: 20px;
}
.nav li.nav_1 a {
	
}
.nav li a:hover {
	filter:alpha(opacity=70);
	opacity: 0.7;
}
.nav li.nav_2 a {
	background-position: right -42px;
}
.nav li.nav_2 a:hover {
	/*background-position: right -127px;*/
}

.nav li.top a {
	background-position: right -87px;
}

.nav .nav_arrow {
	background: url('../images/nav.png') 0 -37px no-repeat;
	width: 17px;height: 31px;
	position: absolute;
	top: 50%;
	margin-top: -30px;
	left: -25px;
	cursor: pointer;
}
/* =============================================================
  intro
==============================================================*/
h1,h2 {
	white-space: nowrap;
  	text-indent: 200%;
  	overflow: hidden;
  	display: block;
}
#intro {
	background: url('../images/bg_intro.jpg') center top no-repeat;
	height: 1154px;
}

.btn li a {
	background: url('../images/btn.png') 0 0 no-repeat;
	white-space: nowrap;
  	text-indent: 200%;
  	overflow: hidden;
  	display: block;
}
.btn li {
	position: absolute;
	left: 50%;
}
.btn li.btn_1,.btn li.btn_3 {
	top: 790px;
}
.btn li.btn_1 {margin-left: -276px;}
.btn li.btn_3 {margin-left: 97px;}
.btn li.btn_2 {
	top: 810px;
	margin-left: -111px;
}
.btn li.btn_4 {
	top: 563px;
	margin-left: -107px;
}
.btn li.btn_1 a {
	width: 179px;
	height: 178px;
	background-position: -272px 0px;
}

.btn li.btn_1 a:hover {
	background-position: -272px -222px;
}

.btn li.btn_2 a {
	width: 221px;
	height: 222px;
	background-position: -476px 0px;
}
.btn li.btn_2 a:hover {
	background-position: -476px -222px;
}

.btn li.btn_3 a {
	width: 179px;
	height: 178px;
	background-position: -721px 0px;
}

.btn li.btn_3 a:hover {
	background-position: -721px -222px;
}

.btn li.btn_4 a {
	width: 214px;
	height: 61px;
	background-position: 0px 0px;
}

.btn li.btn_4 a:hover {
	background-position: 0px -61px;
}



/* =============================================================
  page1
==============================================================*/
#page1 {
	height: 1100px;
	background: url('../images/bg_page1.jpg') center center no-repeat;
}
#page1 .text {
	width: 262px;
	position: absolute;
	top: 300px;
	left: 230px;
}
#page1 .title {
	white-space: nowrap;
  	text-indent: 200%;
  	overflow: hidden;
  	display: block;
  	background: url('../images/title_page2.png') 0 0 no-repeat;
  	height: 78px;
  	margin-bottom: 10px;
}
#page1 p {
	width: 256px;
	text-align: justify;
	padding-left: 3px;
	font-size: 16px;
	line-height: 1.4em;
}
#page1 .mov {
	position: absolute;
	width: 444px;
	height: 250px;
	overflow: hidden;
	border: 3px solid #000;
	left: 40px;
	top: 510px;
}
/* =============================================================
  page2
==============================================================*/
#page2 {
	height: 1100px;
	background: url('../images/bg_page.png') center center no-repeat;
	position: relative;
}

#characterPager {
	position: absolute;
	left: 50%;
	margin-left: 90px;
	top: 212px;
	width: 385px;
	z-index: 3
}
#characterPager ul {

}
#characterPager li {
	float: left;
	margin-bottom: 18px;
}
#characterPager li a {
	background: url('../images/tab.png') 0 0 no-repeat;
	white-space: nowrap;
  	text-indent: 200%;
  	overflow: hidden;
  	display: block;
  	width: 78px;
  	height: 17px;
}
#characterPager li.name_1,
#characterPager li.name_5 {
	margin-right: 13px;
}
#characterPager li.name_2 {
	margin-right: 28px;
}
#characterPager li.name_3 {
	margin-right: 27px;
}
#characterPager li.name_6 {
	margin-right: 14px;
}
#characterPager li.name_7 {
	margin-right: 14px;
}

#characterPager li.name_1 a {}
#characterPager li.name_1 a:hover,
#characterPager li.name_1 a.active {
	background-position: 0 -68px;
}

#characterPager li.name_2 a {
	background-position: -91px 0px;
	width: 63px;
}
#characterPager li.name_2 a:hover,
#characterPager li.name_2 a.active {
	background-position: -91px -68px;
}

#characterPager li.name_3 a {
	background-position: -182px 0px;
}
#characterPager li.name_3 a:hover,
#characterPager li.name_3 a.active {
	background-position: -182px -68px;
}

#characterPager li.name_4 a {
	background-position: -287px 0px;
}
#characterPager li.name_4 a:hover,
#characterPager li.name_4 a.active {
	background-position: -287px -68px;
}

#characterPager li.name_5 a {
	background-position: -0px -35px;
}
#characterPager li.name_5 a:hover,
#characterPager li.name_5 a.active {
	background-position: -0px -103px;
}

#characterPager li.name_6 a {
	background-position: -91px -35px;
}
#characterPager li.name_6 a:hover,
#characterPager li.name_6 a.active {
	background-position: -91px -103px;
}

#characterPager li.name_7 a {
	background-position: -182px -35px;
	width: 91px;
}
#characterPager li.name_7 a:hover,
#characterPager li.name_7 a.active {
	background-position: -182px -103px;
}

#characterPager li.name_8 a {
	background-position: -287px -35px;
	width: 93px;
}
#characterPager li.name_8 a:hover,
#characterPager li.name_8 a.active {
	background-position: -287px -103px;

}

#page2 .slider {
	position: relative;
	top: 170px;
	width: 100%;
	overflow: hidden;
}

#page2 .slides {
	height: 790px;
	*zoom: 1;
}
#page2 .slides > li {
	width:1000px;
	height: 790px;
	position: relative;
}


#characterSlides .article,
#characterSlides .character{
	position: absolute;
}

.name {
	white-space: nowrap;
  	text-indent: 200%;
  	overflow: hidden;
  	display: block;
  	background: url('../images/name.png') 0 0 no-repeat;
  	height: 34px;
  	width: 200px;
  	margin-bottom: 20px;
}

.slide2 .name {background-position: 0px -40px;}
.slide3 .name {background-position: 0px -80px;}
.slide4 .name {background-position: 0px -120px;}
.slide5 .name {background-position: 0px -160px;}
.slide6 .name {background-position: 0px -200px;}
.slide7 .name {background-position: 0px -240px;}
.slide8 .name {background-position: 0px -280px;}

.article {
	width: 360px;
	left: 690px;
	top: 140px;
	z-index: 2;
}
.article p {
	margin-bottom: 20px;
}
.character {
	z-index: 1;
}
.slide1 .character {
	background: url('../images/character_1.png') 0 0 no-repeat;
	width: 655px;height: 728px;
	left: 90px;
}
.slide2 .character {
	background: url('../images/character_2.png') 0 0 no-repeat;
	width: 744px;height: 743px;
	left: 90px;
}
.slide3 .character {
	background: url('../images/character_3.png') 0 0 no-repeat;
	width: 618px;height: 771px;
	left: 92px;
}
.slide4 .character {
	background: url('../images/character_4.png') 0 0 no-repeat;
	width: 579px;height: 759px;
	left: 220px;
}
.slide5 .character {
	background: url('../images/character_5.png') 0 0 no-repeat;
	width: 565px;height: 767px;
	left: 204px;
}
.slide6 .character {
	background: url('../images/character_6.png') 0 0 no-repeat;
	width: 532px;height: 761px;
	left: 201px;
}
.slide7 .character {
	background: url('../images/character_7.png') 0 0 no-repeat;
	width: 647px;height: 770px;
	left: 52px;
}
.slide8 .character {
	background: url('../images/character_8.png') 0 0 no-repeat;
	width: 724px;height: 778px;
	left: 110px;
}
#page2 .bx-wrapper .bx-controls-direction a {
	width: 44px;
	height: 70px;
}
#page2 .bx-wrapper .bx-next,
#page2 .bx-wrapper .bx-next:hover,
#page2 .bx-wrapper .bx-prev,
#page2 .bx-wrapper .bx-prev:hover {
	background: url('../images/icon_arrow.png') 0 0 no-repeat;
	
}
#page2 .bx-wrapper .bx-next,
#page2 .bx-wrapper .bx-next:hover {
	background-position: right 0;
}

#page2 .big5 {display: none;}
.slide1 .text {height: 327px;}
.slide2 .text {height: 87px;}
.slide3 .text {height: 134px;}
.slide4 .text {height: 87px;}
.slide5 .text {height: 111px;}
.slide6 .text {height: 208px;}
.slide7 .text {height: 63px;}
.slide8 .text {height: 110px;}

.bx-wrapper .bx-pager.bx-default-pager a{
	margin: 0 5px;
	border: 1px solid #fff;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active {
	background: #0d88c8;
}

#page1 .bx-wrapper .bx-pager {
	bottom: 5px;
}


.voice {padding-top: 20px;}
 a.sm2_button {
 	white-space: nowrap;
  	text-indent: 200%;
  	overflow: hidden;
 	display: inline-block;
 	background: url('../images/icon_sound.png') 0 0 no-repeat;
 	width: 45px;
 	height: 39px;
 	margin-right: 7px;
 }
 a.sm2_button.sm2_playing,
 a.sm2_button:hover {
 	background-position: -51px 0px;
 }

a.sm2_button.sm2_paused {
  	background-position: -102px 0px;
}