@charset "utf-8";
/* CSS Document */
/*Reset Start*/
/*YuI*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {padding:0;margin:0; font-size:15px;}
body{ background:#ffd736; font: normal 13px/140% Arial, "微軟正黑體";line-height:140%;color:#333;}
table {}
fieldset,img {border:0;}
address,caption,cite,code,dfn,em,strong,th,var {font-weight: normal;font-style:normal;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6 {font-weight:normal;font-size:100%;}
q:before,q:after {content:'';}
abbr,acronym { border:0;}
a{ color:#fff; text-decoration:none;}
a:hover{ color: #f2b421; text-decoration: none;}
img { border: none; vertical-align:middle;}
.clr { clear: both;}
.btn{ text-align:center; margin:10px 0;}
.btn li{ margin-bottom:10px; list-style:none;}
.fL{ float:left;}
.fR{ float:right;}


/*Reset End*/
.bg{background:#ffd736 url(../images/visual_bg.jpg) 0 -8px repeat-x; height:100%; min-width: 960px;}
.bg2{background:#ffd736; min-width: 960px;}
.pagesize{width: 960px; margin:0 auto;/* background:#ffd736*/}

.header{}
.menu { display: none;}
.tophd{ height: 60px; position: relative;}
.tophd ul{ position: absolute; right: 0px; top: 14px;}
.tophd li{ float: left;padding-right: 20px; background:url(../images/nav_top_line.png) right 0 no-repeat; margin-right: 20px;}
.tophd li.last{ background: none; margin-right: 0px; padding-right: 0;}
.tophd li.n01{ padding-top:24px; padding-left:5px;}
.visual{padding-top:20px;}
.visual .phone{ background:url(../images/phone_bg.png) no-repeat; width:274px; height:620px; margin:0 35px 0 1px; float:left; position:relative;}
.visual .phone .pic{ width:232px; height:412px; position:absolute; top:82px; left:21px; overflow: hidden;}
.visual .phone .pic li{ float: left;}
.visual .phone .stage{ position:absolute; top:530px; left:187px; cursor: pointer;}
.visual .phone .mask{ width:232px; height:412px; position:absolute; top:82px; left:21px;}
.visual .phone .page{ position:absolute; bottom: 20px; left: 0px; width:274px; text-align: center;}
.visual .phone .page a{ background:url(../images/page.png) no-repeat; display: inline-block; width: 8px; height: 8px; margin: 0 2px; }
.visual .phone .page a.selected{ background:url(../images/page_on.png) no-repeat;}
.visual .phone .page a span{ display: none;}
.visual .video{ width:640px; float:left; position: relative;}
.visual .video .mov{ position:relative; }
#mov_list { overflow: hidden; width: 640px; height: 360px;}
#mov_list li{ float: left; width: 640px; height: 360px;}
.mov #bt_left { position:absolute; left: -30px; top: 160px; background:url(../images/bt_left.png) no-repeat; width: 26px; height: 38px; cursor: pointer;}
.mov #bt_right { position:absolute; right: -30px; top: 160px; background:url(../images/bt_right.png) no-repeat; width: 26px; height: 38px; cursor: pointer;}
.visual .video .app_store{ bottom:10px; width:640px; padding:20px 0 0;}
.visual .video .app_store a.btnA{ margin-right:20px; }
.visual .video .app_store .iconApp{width:184px; height:auto;}
.visual .video .app_store .dlapp{ width:320px; height:auto;}
.visual .video .app_store .dlapp .qrcode { margin-right: 5px;}
.visual .video .app_store .ver{ font-family:"微軟正黑體"; font-size:24px; color:#000; height:24px; padding:10px 5px 10px 5px; line-height:24px;}
.visual .video .app_store .dl{ font-family:Arial, Helvetica, sans-serif; font-size:24px; color:#7b7b7b; height:24px; padding:10px 5px 10px 5px; line-height:24px;}
.visual .video .app_store .app{ height:60px; width:183px; display:block;}
.app_pic{ display:none;}

/*banner*/
.banner{ position:relative; margin-bottom:20px; display:none;}
.banner .bn{ width:960px; height:240px;}
.banner .page{ position:absolute; top:250px; left:440px; width:70px;}
.banner .page li{ width:8px; height:7px; margin-right:5px; float:left;}
.popup_overlay{ width: 100%; position: absolute; top:0; left: 0; background-color: #000; opacity:0.5;-moz-opacity:0.5;-khtml-opacity: 0.5; filter:alpha(opacity=50); z-index: 9999;}
.popup_box { width: 600px; position: absolute;z-index: 10000;}
.popup_close { background:url(../images/icon_close.png) no-repeat; width: 80px; height: 80px; position: absolute; top: -40px; right: -40px; cursor: pointer;}

/*角色介紹*/
.role{ margin: 0 auto;}
.role h2{ height:100px;padding-left:0;}
.bottomArea{ margin-top:815px; position: relative;}
.bottomArea .dl_appstore{ width:760px; float:left;}
.bottomArea .cc_man{ position: absolute; right: 0px; bottom: 0;}
.bottomArea .app_store{ width:640px; padding:0px 0 20px;}
.bottomArea .app_store a.btnA{ margin-right:20px; }
.bottomArea .app_store .iconApp{width:184px; height:auto;}
.bottomArea .app_store .dlapp{ width:320px; height:auto;}
.bottomArea .app_store .dlapp .qrcode { margin-right: 5px;}
.bottomArea .app_store .ver{ font-family:"微軟正黑體"; font-size:24px; color:#000; height:24px; padding:10px 5px 10px 5px; line-height:24px;}
.bottomArea .app_store .dl{ font-family:Arial, Helvetica, sans-serif; font-size:24px; color:#7b7b7b; height:24px; padding:10px 5px 10px 5px; line-height:24px;}
.bottomArea .app_store .app{ height:60px; width:183px; display:block;}


.role .intro{ position:relative;}
.role .intro .role_01{ width:480px; height:275px; position:absolute; top:0; left:0;}
.role .intro .role_02{ width:480px; height:275px; position:absolute; top:0; left:480px;}
.role .intro .role_03{ width:480px; height:275px; position:absolute; top:180px; left:0;}
.role .intro .role_04{ width:480px; height:275px; position:absolute; top:180px; left:480px;}
.role .intro .role_05{ width:480px; height:275px; position:absolute; top:360px; left:0;}
.role .intro .role_06{ width:480px; height:275px; position:absolute; top:360px; left:480px;}
.role .intro .role_07{ width:480px; height:275px; position:absolute; top:540px; left:0;}
.role .intro .role_08{ width:480px; height:275px; position:absolute; top:540px; left:480px;}
.role .intro .pic{ width:205px; height:275px; margin-right:5px;float:left;}
.role .intro .txt{ width:270px; float:left; padding-top:120px;}
.role .intro .txt h3{ margin-bottom:10px;font-size:40px; font-weight:bold; line-height:100%; color:#000;}
.role .intro .txt p{ font-size:15px; line-height:140%;}

.ft{background:#fff; padding:0px 0; height: 45px;}
.ft .link{ width:980px; margin:0 auto; position:relative;}
.ft .link ul{ position:absolute; top: 0px; right: 0;}
.ft .link li{ float: left; padding-right: 20px; background:url(../images/nav_top_line.png) right center no-repeat; margin-right: 20px;}
.ft .link li a{ padding: 10px 0; display: block;}
.ft .link li.last{ padding-right: 0px; background: none; margin-right: 0px;}
.ft .link .logo { width: 115px; height: 41px; position: absolute; left: 0; top: 2px; background: url(../images/copyright_logo.png) no-repeat;}

.wrapper { 
	position: relative;
	max-width: 960px;
	padding: 0;
	margin: 0 auto;
	height: 280px;
}

.mobile{ display: none;}
.formsArea { padding: 20px 0; float: left; width: 640px; }
.formsArea h2{ margin-bottom: 20px;}
.formsArea .from { min-height: 350px; margin-bottom: 20px; color: #a66905;}
.formsArea .from h3 { background-color: #C30; color: #fff; padding: 3px 0px; text-align: center;}
.formsArea .from th { font-size: 20px; line-height: 140%; border-bottom: 1px solid #ebebeb; padding: 10px 0 10px 50px; font-weight: bold;}
.formsArea .from td { font-size: 18px; line-height: 140%; border-bottom: 1px solid #ebebeb; padding: 10px 0; font-weight: bold; color: #79561d;}
.formsArea .from p { padding-top: 10px; font-size: 16px; font-weight: normal;color: #79561d;}
.formsArea .txt_title { font-weight: bold;}
.formsArea .cost1 { color: #79561d; margin-right: 10px;}
.formsArea .cost2 { font-size: 26px; color: #79561d; line-height: 140%;}
.formsArea .bt { text-align: center; margin: 30px 0;}
.formsArea .bt input{ width: 260px; height: 40px; color: #fff; background-color: #d18508; border: none; font: normal 20px/140% Arial, "微軟正黑體"; letter-spacing: 2px; font-weight: bold; cursor: pointer;}
.formsArea .tab table{ background-color: #000;}
.formsArea .tab th{ text-align: center; background-color: #ffc545; padding: 10px 0px;}
.formsArea .tab td{ background-color: #fff; padding: 10px 10px;}
.styled-select {background: #ffd737 url(../images/new_arrow.png) no-repeat right; width: 270px;height: 30px;overflow: hidden;}
.styled-select select {
   background: transparent; width: 290px; padding: 5px; font: normal 16px/140% Arial, "微軟正黑體"; border: 0;
   height: 30px;-webkit-appearance: none;
}
.formsArea .input_txt {
   background-color: #ffd737; width: 260px; padding: 0 5px; font: normal 16px/140% Arial, "微軟正黑體"; border: 0;
   height: 30px;
}
.loginArea { position: relative;}
.login_bt { position: absolute; bottom: 25px; right: 0;}
.login_info { position: absolute; bottom: 5px; right: 0;}
.login_info .pic{ float: left; border-radius: 33px; width: 65px; height: 65px;overflow:hidden; margin-right: 5px;}
.login_info .info{ float: left;padding-top: 15px;}
.login_info .info .logout{ display: block; padding-top: 5px;}
.login_info .info .logout a{ color: #888;}
.home { position: absolute; top: 10px; left: 0; width: 40px;}
.home img{ width: 100%; height: auto;}


.ruleArea{ background-color: #fff; padding: 20px; -webkit-border-radius: 10px;-moz-border-radius: 10px; border-radius: 10px; margin-bottom: 5px;}
.ruleArea h2{ margin: 0 0 20px;}
.ruleArea h3{ margin: 0 0 10px;font-size: 20px; line-height: 140%; color: #a66905; border-top: 1px solid #a66905; padding-top: 10px;}
.ruleArea p{ margin: 0 0 10px; font-size: 16px; line-height: 140%;}
.ruleArea ol{ list-style: decimal; margin-left: 20px; font-size: 16px; line-height: 140%;}
.ruleArea li{ margin-bottom: 10px;}

.promise { padding: 0 0 0 50px;}
.promise .title{font-size: 20px; line-height: 140%; font-weight: bold; float: left; padding: 5px 0;}
.promise ul{ padding-left: 180px;}
.promise li{font-size: 20px; line-height: 140%; padding: 5px 0;}