﻿/* CSS Document */
.box_right_ctxt a {
	color: #00677c;
	text-decoration: none;
}
.box_right_ctxt a:hover {
	color: #03b6d4;
	text-decoration: none;
}

body {
	margin-left: auto;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: auto;
	-moz-user-select: none;
}
a {
	color: #fff;
	text-decoration: none;
}

a:hover {
	color: #fdd000;
	text-decoration: none;
}
.Chinese_12 {
	font-family: "新細明體";
	font-size: 12px;
	color: #000000;
	line-height:18px;
}
.chinese_12b {
	font-family: "新細明體";
	font-size: 12px;
	color: #499cb7;
	line-height:18px;
}
.footer_14 {
	font-size: 14px;
	font-family: "新細明體";
	color: #499cb7;
	font-weight: normal;
	line-height: 30px;
}
.Chinese_16r1 {	font-family: "新細明體";
	font-size: 16px;
	color: #ff6846;
}
.eng_121 {	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
}
#container {
	height: auto;
	width: 1002px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: auto;
	padding: 0px;
}
#content {
	height: 609px;
	width: 1002px;
	background-image: url(../images/index/index_bg.jpg);
	background-repeat: no-repeat;
}
#content_anima {
	height: 468px;
	width: 533px;
	margin-top: 38px;
	margin-right: 177px;
	margin-bottom: 177px;
	margin-left: 292px;
}
#content_story {
	height: auto;
	width: 703px;
	position: absolute;
	top: 183px;
	left: 135px;
}
#section {
	height: 119px;
	width: 112px;
	padding-top: 113px;
	padding-left: 117px;
}
#footer {
	background-color: #000000;
	height: 75px;
	width: 1002px;
	color: #ffffff;
	text-align: left;
	font-size: 12px;
	line-height: 14px;
	text-decoration: none;
	vertical-align: middle;
}
#footer_l {
	font-size: 11px;
	color: #FFF;
	text-align: left;
	height: 15px;
	width: 125px;
	margin-top: auto;
	margin-bottom: auto;
	margin-left: 40px;
	vertical-align: middle;
	padding-top: 30px;
	padding-bottom: 30px;
	float: left;
}
#footer_r {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FFF;
	float: right;
	width: 550px;
	height: 55px;
	margin-top: 10px;
	margin-right: 40px;
	margin-bottom: 10px;
	text-align: right;
	vertical-align: middle;
}
#story {
	font-size: 13px;
	color: #000;
	height: auto;
	width: 703px;
	padding-top: 10px;
	padding-right: auto;
	padding-bottom:10px;
	padding-left: auto;
	line-height: 18px
}
#buy {
	height: 25px;
	width: 350px;
	float: left;
	clear: left;
	padding-left: 165px;
	padding-top: 60px;
}
#btn {
	width:111px;
	float: left;
	padding-top: 0px;
	padding-left: 265px;
	padding-right: 250px;
}
#btn2 {
	height: 30px;
	width:111px;
	padding-top: 0px;
}
#number {
	font-size: 13px;
	color: #666;
	height: 20px;
	width: 250px;
	float: left;
	padding-left: 600px;
}
#wordsec {
	height: 26px;
	width: 455px;
	padding-top: 0px;
	padding-right: auto;
	padding-bottom: 0px;
	padding-left: 16px;
}
#wordbox {
	background-image: url(../images/story/story_w02.png);
	height: auto;
	width: 703px;
}
.word {
	height: auto;
	width: 658px;
	padding-top: 15px;
	padding-right: 23px;
	padding-bottom: 15px;
	padding-left: 23px;
}
.wordtitle {
	height: 19px;
	width: 400px;
	float: left;
}
.share {
	float: right;
	font-family: Arial, Helvetica, sans-serif;
	top: auto;
	width: 180px;
}
.wordcontent{
	font-size: 13px;
	font-variant: normal;
	color: #707070;
	height: auto;
	width: 658;
	padding-top: 10px;
	*clear: both;
	*float: left;
}
.wordpattern_l {
	background-image: url(../images/story/dot.png);
	background-repeat: repeat-x;
	height: 7px;
	width: 329px;
	float: left;
}
.wordpattern_r {
	background-image: url(../images/story/dot.png);
	background-repeat: repeat-x;
	height: 7px;
	width: 329px;
	float: right;
	text-align: right;
}
.testtitle {
	font-size: 14px;
	color: #707070;
	vertical-align: middle;
}
#masterbox {
	background-image: url(../images/story/story_m02.png);
	width: 703px;
	clear: both;
}
#choicemaster {
	float: right;
	height: 24px;
	width: 130px;
	margin-right: 21px;
}
.mastertitle {
	height: 19px;
	float: left;
	clear: both;
}
.masterpattern_r {
	height: 19px;
	background-image: url(../images/story/dot.png);
	background-repeat: repeat-x;
	width: 300px;
	background-position: left center;
	float: left;
}
#yline {
	background-image: url(../images/story/dot.png);
	background-repeat: repeat-x;
	width: 370px;
	height: 7px;
}
#title_r {
	float: right;
	width: 13px;
	height: 13px;
	margin-top: 3px;
	margin-bottom: 3px;
}
#titlebox {
	width: 658px;
	height: 19px;
}
#titlebox {
	height: 19px;
	width: 658px;
	display: table;
}
#titlebox_l {
	width: 645px;
	float: left;
	height: 19px;
	background-image: url(../images/story/dot.png);
	background-repeat: repeat-x;
	background-position: center;
}
#mastertitle_m {
	float: left;
	height: 7px;
	width: 7px;
	background-color: #FFF;
	
	margin-top: 6px;
	*margin-top: 2px;
	
}
#mastertitle_m img {
	vertical-align: middle;
}
#titlebox_l .mastertitle ul {
	list-style-type: none;
	height: 19px;
	margin: 0px;
	padding: 0px;
}
#titlebox_l .mastertitle ul li {
	display: block;
	height: 19px;
}
#t1 {
	background-image: url(../images/story/story_m04.png);
	background-repeat: no-repeat;
	width: 9px;
	float: left;
}
#t3 {
	background-color: #DEEBED;
	font-size: 14px;
	line-height: 19px;
	color: #666;
	text-decoration: none;
	float: left;
}
#t2 {
	background-image: url(../images/story/story_m05.png);
	background-repeat: no-repeat;
	width: 9px;
	float: left;	
}
.wordcontent a {
	color: #00687d;
	text-decoration: none;
}
.wordcontent a:hover {
	color: #03b6d4;
}
#whitebox {
	background-color: #FFF;
	width: 8px;
	height: 19px;
	float: left;
}
#container #content_story #story #masterbox span {
	clear: both;
	float: left;
}
.wordtitle span {
	line-height: 19px;
	font-size: 14px;
	color: #707070;
	display: block;
	float: left;
	background-color: #feec99;
}
.share span {
	float: left;
	display: block;
	line-height: 16px;
	font-size: 13px;
	margin-right: 5px;
	margin-left: 5px;
}
#container #content_story #story span {
	float: left;
}
#container #content #topmenu {
	background-image: url(../images/index/index_03.png);
	background-repeat: no-repeat;
	height: 39px;
	width: 871px;
	margin-top: 30px;
	margin-left: 30px;
	float: left;
	clear: both;
}
ul.topnav {
	float: left;
	padding: 0px;
	margin-top: 6px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 230px;
	list-style-type: none;
}
ul.topnav li {
	float: left;
	position: relative; /*--Declare X and Y axis base--*/
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 20px;
	margin: 0;
}


ul.topnav li ul.subnav {
	list-style: none;
	position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
	left: 0;
	top: 32px;
	margin: 0;
	padding: 0;
	display: none;
	float: left;
	width: 93px;
	border: 1px solid #fdd000;
	background-color: #FFF;
	
}
ul.topnav li ul.subnav li{
	margin: 0;
	padding: 0; /*--Create bevel effect--*/
	clear: both;
	width: 93px;
	
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #fdd000;
	border-bottom-color: #fdd000;
	height: 20px;
}
html ul.topnav li ul.subnav li a {
	float: left;
	font-size: 12px;
	color: #767676;
	padding-left: 20px;
	text-decoration: none;
	width:73px;
	height: 20px;
	line-height: 20px;	
}
html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
	color: #000;
	background-color: #fdd000;
}
#container #storycontent #storybg1 {
	background-image: url(../images/story/story_bg_top.png);
	background-repeat: no-repeat;
	background-position: top;
	height: 193px;
}
#container #storycontent #storybg3 {
	background-image: url(../images/story/story_bg_bottom.png);
	background-repeat: no-repeat;
	background-position: bottom;
	height: 256px;
}
#container #storycontent #storybg2 {
	background-image: url(../images/story/story_bg_x.png);
	background-repeat: repeat-y;
	height: 200px;
}
#storytopmenu {
	height: 39px;
	width: 871px;
	float: left;
	position: absolute;
	left: 0px;
	top: 31px;
	background-image: url(../images/story/menu_line.png);
	background-repeat: no-repeat;
	background-position: left bottom;
	margin-left: 30px;
	z-index: 100;
}
#container #storycontent {
	position: relative;
}
#container #storycontent #storytopmenu span {
	float: left;
	margin-top: 6px;
}



ul.stopnav {
	float: left;
	padding: 0px;
	margin-top: 6px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 80px;
	list-style-type: none;
	display: inline;
}
ul.stopnav li {
	float: left;
	position: relative; /*--Declare X and Y axis base--*/
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 20px;
	margin: 0;
}


ul.stopnav li ul.subnav {
	list-style: none;
	position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
	left: 0;
	top: 32px;
	margin: 0;
	padding: 0;
	display: none;
	float: left;
	width: 93px;
	border: 1px solid #fdd000;
	background-color: #FFF;
	
}
ul.stopnav li ul.subnav li{
	margin: 0;
	padding: 0; /*--Create bevel effect--*/
	clear: both;
	width: 93px;
	
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #fdd000;
	border-bottom-color: #fdd000;
	height: 20px;
}
html ul.stopnav li ul.subnav li a {
	float: left;
	font-size: 12px;
	color: #767676;
	padding-left: 20px;
	text-decoration: none;
	width:73px;
	height: 20px;
	line-height: 20px;	
}
html ul.stopnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
	color: #000;
	background-color: #fdd000;
}
#container #storycontent #storytopmenu #nav_txt {
	float: left;
	clear: both;
	margin-top: 5px;
	font-size: 14px;
	color: #4a4a4a;
}
#container #storycontent #title01 {
	position: absolute;
	left: 136px;
	top: 107px;
}
#container #sbox {
	height: 140px;
	width: 49px;
	position: absolute;
	left: 703px;
	top: 139px;
}
#mysqcir_container {
	background-image: url(../images/mysqCir/mysqCir1_19.png);
	background-repeat: no-repeat;
	height: 611px;
	width: 736px;
	position: absolute;
	left: 141px;
	top: 112px;
}
#mysqcir_text {
height: 120px;
width: 540px;
position: absolute;
left: 96px;
top: 452px;
font-size: 13px;
color: #6f6f6f;
text-align: left;
line-height: 18px;
}

#mysqcir_text span {
	width: auto;
	display: block;
}
#mysqcir_text dl dd {
	margin: 0px;
	padding: 0px;
}
#contectus_t1 {
	position: absolute;
	left: 399px;
	top: 138px;
	z-index: 2;
}
#contectus_t2 {
	position: absolute;
	left: 340px;
	top: 268px;
	font-size: 13px;
	line-height: 24px;
	color: #000;
	text-align: center;
	z-index: 2;
	font-family: Arial, Helvetica, sans-serif;
}
#contectus_bgbox {
	background-image: url(../images/contectus/bg_box.jpg);
	background-repeat: no-repeat;
	position: absolute;
	width: 444px;
	left: 268px;
	top: 110px;
	height: 475px;
	z-index: 1;
}
#contectus_t3 {
	position: absolute;
	left: 404px;
	top: 373px;
	z-index: 2;
}
#contectus_t4 {
	position: absolute;
	left: 388px;
	top: 420px;
	z-index: 2;
}
#contectus_t4 ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	width: 250px;
}
#contectus_t4 ul li {
	float: left;
	display: block;
	padding-right: 20px;
}
#contectus_t4 ul li a img {
	margin: 0px;
	padding: 0px;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
}
#promo1_bgbox {
	background-image: url(../images/promo/promo1_bg.png);
	background-repeat: no-repeat;
	height: 675px;
	width: 806px;
	position: absolute;
	z-index: 1;
	left: 131px;
	top: 105px;
}
#promo1_box1 {
	position: absolute;
	z-index: 2;
	left: 56px;
	top: 158px;
	border: 1px solid #c6ba84;
}
#promo1_box2 {
	position: absolute;
	z-index: 2;
	left: 400px;
	top: 158px;
	border: 1px solid #c6ba84;
}
#promo1_box3 {
	position: absolute;
	z-index: 2;
	left: 56px;
	top: 414px;
	border: 1px solid #c6ba84;
}
#promo1_box4 {
	position: absolute;
	z-index: 2;
	left: 400px;
	top: 414px;
	border: 1px solid #c6ba84;
}
#promo2_bgbox {
	background-image: url(../images/promo/promo2_bg.png);
	background-repeat: no-repeat;
	height: 676px;
	width: 803px;
	position: absolute;
	z-index: 1;
	left: 140px;
	top: 109px;
}
#promo2_text {
font-size: 16px;
line-height: 26px;
color: #626262;
width: 635px;
position: absolute;
z-index: 2;
left: 49px;
top: 175px;
letter-spacing: normal;
text-align: justify;
vertical-align: top;
word-spacing: normal;
text-indent: 20pt;
}

#story3_title {
	position: absolute;
	left: 133px;
	top: 115px;
}
#mov_box {
	position: absolute;
	left: 263px;
	top: 211px;
	z-index: 2;
}
#mov_box ul {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}
.mov_box_title_center {
	background-image: url(../images/story/story3_rc.png);
	background-repeat: repeat-x;
	height: 32px;
	font-size: 13px;
	line-height: 32px;
	color: #000;
	text-align: center;
}

.mov_box_title_right {
	float: right;
	width: 7px;
}
.mov_box_title_left {
	float: left;
	width: 7px;
}
.mov_box_left {
	float: left;
	height: 7px;
	margin-top: 12.5px;
}
.mov_box_right {
	float: right;
	margin-top: 12.5px;
}
#story3_bgbox {
	background-image: url(../images/story/story3_box.png);
	background-repeat: no-repeat;
	height: 564px;
	width: 850px;
	position: absolute;
	z-index: 1;
	left: 73px;
	top: 165px;
}
#mov_box ul li {
	margin-bottom: 30px;
}
#mov_box ul li ul li {
	margin: 0px;
	padding: 0px;
}
