@charset "utf-8";
/* CSS Document */

body { background:url(../images/bg_re.jpg); margin:0; font-family: Arial, Verdana, sans-serif; color:#3a3f56;}
a { text-decoration:none; }
a:active { color:#3a3f56; }

.s13 { font-size:13px;}
.s14 { font-size:14px;}
.s15 { font-size:15px;}

.bg_tp { background:url(../images/bg_tp.jpg) repeat-x bottom #3a3f56; }
.bg_tp_c { background:#3a3f56; }

/* menu */ 
.menu { background:url(../images/alpha_60.png);}
.menu a { color:#3a3f56; font-size:14px;  padding:6px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
.menu a:hover { color:#fff; background:#25bdad; padding:6px;  }

.w980 { width:980px; margin:0 auto; clear:both; overflow:auto; overflow-x:hidden; overflow-y:hidden; }

/* contact */
.area_2 { margin:16px auto; }
.area_2 .a2_lt { float:left; background:#dcdcdc; width:215px; height:255px; padding:35px 15px 10px 20px; font-size:24px; position:relative; }
.area_2 .a2_lt a { display:block; font-size:15px; margin-top:10px; }
.area_2 .a2_lt a:hover { color:#25bdad; text-decoration:underline; }
.area_2 .a2_rt { height:300px; float:left; background:#fff; width:730px; }
.area_2 .a2_rt .img_bg { border:1px solid #d2d2d2; border-bottom:none; width:318px; height:199px; font-weight:bold; position:relative; }
.area_2 .a2_rt .img_bg span { display:block; position:absolute; bottom:10px; left:20px; font-weight:normal; width:200px;}
.area_2 .a2_rt .tit_bg { display:block; background:url(../images/a2_tit_bg.jpg) 275px no-repeat #c9cc38; font-size:30px; height:42px; color:#fff; padding:5px 5px 5px 20px; }
.area_2 .a2_rt .tit_bg:hover { color:#333; background:url(../images/a2_tit_bg_over.jpg) 275px no-repeat #c9cc38;  }

.area_2 .more_case { display:block; width:195px; background:#888; padding:5px 7px; text-align:right; color:#fff; position:absolute; bottom:25px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }


/* contact */
.area_3 { display:block; margin-bottom:16px; border:0; height:150px; font-size:28px; color:#717171; 
		  background:url(../images/img_mail.jpg) 825px 25px no-repeat #fff;  }
.area_3 .tit { margin:30px 40px;}
.area_3 .mail { font-size:18px; text-decoration:underline; line-height:1.7em; }

/* 內頁共用 */
.content { background:#fff; margin:0 auto 20px; padding:10px 40px; font-size:18px; }
.content h3 { margin:0; font-size:36px; padding:20px 0 5px; line-height:1.2em; }
.content p { padding:0; margin:10px 0 25px; line-height:1.5em; }
.content p.p2, .content div.p2 { font-size:15px;  }

.cr1 { color:#ac4d00; }
.hr_line { background:url(../images/hr.jpg) no-repeat center; height:80px; }

/* about */
.about_a1_lt, .about_a1_rt { font-size:13px; width:420px; height:500px;  }
.about_a1_lt { background:url(../images/about_p1.jpg) no-repeat; }
.about_a1_rt { background:url(../images/about_p2.jpg) no-repeat right; } 

.about_a2 { background:url(../images/about_p3.jpg) no-repeat left; height:350px; padding:50px 25px 0 400px; }
.about_a3 { background:url(../images/about_p4.jpg) no-repeat right; height:350px; padding:50px 380px 0 10px; }
.about_a4 { background:url(../images/about_p5.jpg) no-repeat left; height:350px; padding:50px 25px 0 400px; }
.about_a5 { background:url(../images/about_p6.jpg) no-repeat right; height:350px; padding:10px 400px 60px 10px; }

/* api sdk */
.api_sdk { background:url(../images/api_sdk_p1.jpg) no-repeat bottom right #fff; font-size:15px; line-height:1.8em; }
.api_sdk div, .app_qpkg div { margin-bottom:50px; margin-left:20px;}
.api_sdk h4, .app_qpkg h4 { font-size:24px; margin:0; font-weight:normal; line-height:1.8em; }
.api_sdk ul { margin:10px 0 0; padding:0; line-height:1.8em; }
.api_sdk li , .toolchain li { list-style:none; background:url(../images/ico_dt.gif) no-repeat 3px 13px; padding-left:17px; }
#api_sdk_btn { background:url(../images/api_sdk_btn.png) no-repeat center; color:#fff; font-size:18px;
				font-weight:bold; display: none; position: absolute; width:180px; height:160px; padding:20px 10px; text-align:center;}
#api_sdk_btn:hover { background:url(../images/api_sdk_btn_over.png) no-repeat center; color:#333; }

/* app qpkg 
.app_qpkg  { background:url(../images/a1_bg1n.jpg) no-repeat bottom right #fff; font-size:18px; line-height:1.8em; }
*/
.app_qpkg .btn { display:block; background:#25bdad; padding:20px; font-size:21px; line-height:40px; height:40px; width:340px; float:left; text-align:center; margin:20px; color:#fff; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;}
.app_qpkg .btn:hover {  background:#0c9788; }

/* toolchain */
.toolchain { background:url(../images/a1_bg5.jpg) no-repeat bottom right #fff; font-size:18px;  min-height:600px; line-height:1.8em; }
.toolchain a { text-decoration:underline; }
.toolchain h4 { font-size:24px; margin:40px 0 10px; }
.toolchain ul { margin:0; padding:0; }

/* DEMO */
.demo_tab { height:45px; margin-top:20px; }
span.tab_btn { background:#c9cb39; display:block; width:auto; font-size:16px; font-weight:bold; float:left; margin-left:3px; color:#333; }
span.tab_btn a { color:#fff;}
span.tab_btn a:hover { color:#000;}
span.tab_btn span { display:block; }
.tab_btn .lt { background:url(../images/demo_tab_lt.png) left no-repeat; }
.tab_btn .rt { background:url(../images/demo_tab_rt.png) right no-repeat; padding:0 25px 0; height:45px; line-height:45px; vertical-align:middle; }
.demo_info { line-height:1.9em;}
.demo_info .rt_img { border:1px solid #f0f0f0; }
.demo ul { margin:0; padding:0; }
.demo li { list-style:none; background:url(../images/ico_dt.gif) no-repeat 3px 13px; padding-left:17px; margin:15px 0 25px; line-height:1.8em; }
.demo ol { margin:5px 0 0; padding:0; }
.demo h4 { color:#267b3a; font-size:24px; }
.demo2 div { margin-top:60px; }
.demo2 td { font-size:15px;}
.p5 .txt_01 { color:#1965b0; font-size:28px; font-weight:bold; }
.p5 .txt_02 { color:#fe4200; font-size:15px; white-space:nowrap; }
.p5 .txt_03 { color:#1965b0; font-size:13px; }
.p5 table { margin-bottom:30px;}

/* DEMO-MENU */
span.txt_btn2 { display:block; width:auto; font-size:18px; font-weight:bold; float:left;}
span.txt_btn2 span { display:block; cursor:pointer; float:left; height:30px;  }
.txt_btn2 .lt { background:url(../images/btn2_lt.png) left no-repeat; width:15px; }
.txt_btn2 .rt { background:url(../images/btn2_rt.png) right no-repeat; width:35px; }
.txt_btn2 .ct { background:#c9cb39; line-height:32px; vertical-align:middle;  }
.demo_menu:hover .rt { background:url(../images/btn2_rt_on.png) right no-repeat;}
.demo_menu:hover .ct { color:#333;}

.demo_menu { float:right; position:relative; color:#fff; }
.demo_menu #demo_m { display:none; position:absolute;  top:-5px; right:-18px; }  /* all：top:-535px; */
.demo_menu:hover #demo_m { display:block; }
.demo_m_bg { background:#c9cc38; padding:10px;color:#fff; width:190px; margin:40px 20px 150px 180px; border:1px solid #fff; }
.demo_m_txt { padding:4px; line-height:1.4em; text-align:left; color:#494b00; }
.demo_m_txt:hover { background:#9fa30f; color:#fff;  }
.demo_m_txt:active { color:#fff; }


/* 頁尾 */
.footer { background:#3a3f56; height:80px; color:#fff; text-align:center; font-size:13px; line-height:80px; }
.bt_w980 { width:980px; margin:0 auto; clear:both;}

/* 語系 */

.bt_lag { float:right; position:relative; color:#FFF; }
.bt_lag #lag { display:none; position:absolute; top:-265px; left:-196px;  }  /* all：top:-535px; */
.bt_lag:hover #lag { display:block; }
.lag_bg { background:#c9cc38; padding:10px;color:#fff; width:150px; margin:140px 12px 50px 150px; border:1px solid #fff; }
.lag_txt { padding:4px; line-height:1.4em; text-align:left; color:#494b00;}
.lag_txt:hover { background:#9fa30f; color:#fff;  }
.lag_txt:active { color:#fff; }