@charset "utf-8";
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	font-family: Arial, "微軟正黑體";
}
.center_use {
	margin:0 auto;
	width: 1024px;
	clear: both;
    z-index: 0;
}
.center_use2 {
	margin:0 auto;
	width: 1699px;
	clear: both;
    z-index: 0;
}
.center_use3 {
	margin:0 auto;
	clear: both;
	width: 1200px;
    z-index: 0;
}
.center_use4 {
	margin:0 auto;
	clear: both;
	width: 510px;
    z-index: 0;
	position: relative; 
}
.blank {
	height: 70px;
}
.blank02 {
	height: 140px;
}
*:hover {
	-o-transition:  background-color .10s linear, background-image .30s linear; 
    -webkit-transition:  background-color .10s linear, background-image .30s linear;
    -moz-transition:  background-color .10s linear, background-image .30s linear;
    transition:  background-color .10s linear, background-image .30s linear;
}






/*header*/
.login_area {
	float: right;
	margin: 15px 15px 15px 0;
	height: 40px;
	border-left: 1px #7e7e7e solid;
}
.login_txt {
	font-size: 16px;
	color: #FFF;
	line-height: 38px;
	border: 1px #7e7e7e solid;
	border-left: none;
	padding: 0 20px;
	float: right;
}
.login_txt:hover {
	color: #464646;
	background-color: #FFF;
}
.hello_txt {
    font-size: 16px;
	color: #464646;
	line-height: 38px;
	border: 1px #7e7e7e solid;
	border-left: none;
	padding: 0 5px;
	float: right;
	background-color: #7e7e7e;
}
.header {
	background-color: #464646;
	height: 70px;
	width: 100%;
	position: fixed;
	z-index: 1;
}
.header_logo img {
	width: 200px;
	height: 70px;
	float: left;
	margin-left: 15px;
}
.header_txt {
	color: #b9b9b9;
	float: right;
	font-size: 8px;
	line-height: 70px;
}
.header_txt a {
	color: #fff;
	text-decoration: none;
	padding: 0 15px;
	font-size: 16px;
}
.header_txt a:hover {
	color: #b9b9b9;
}
.header_txt2 {
	color: #b9b9b9;
	font-size: 16px;
	line-height: 70px;
	padding: 0 15px;
}
/*header end*/


.big_banner {
	background-color: #0291df;
	height: 460px;
}
.pics {
	z-index: 0;
}


/*content*/
.circle_01 {
	width: 176px;
	height: 206px;
	background-image: url(../images/circle_01b.gif);
	background-repeat: repeat;
	margin: 50px 14.4px 0 14.4px;
	float: left;
}
.circle_01:hover {
	background-image: url(../images/circle_01.gif);
}
.circle_02 {
	width: 176px;
	height: 206px;
	background-image: url(../images/circle_02b.gif);
	background-repeat: repeat;
	margin: 50px 14.4px 0 14.4px;
	float: left;
}
.circle_02:hover {
	background-image: url(../images/circle_02.gif);
	
}
.circle_03 {
	width: 176px;
	height: 206px;
	background-image: url(../images/circle_03b.gif);
	background-repeat: repeat;
	margin: 50px 14.4px 0 14.4px;
	float: left;
}
.circle_03:hover {
	background-image: url(../images/circle_03.gif);
}
.circle_04 {
	width: 176px;
	height: 206px;
	background-image: url(../images/circle_04b.gif);
	background-repeat: repeat;
	margin: 50px 14.4px 0 14.4px;
	float: left;
}
.circle_04:hover {
	background-image: url(../images/circle_04.gif);
}
.circle_05 {
	width: 176px;
	height: 206px;
	background-image: url(../images/circle_05b.gif);
	background-repeat: repeat;
	margin: 50px 14.4px 0 14.4px;
	float: left;
}
.circle_05:hover {
	background-image: url(../images/circle_05.gif);
}
.three_use {
    width: 270px;
	padding: 60px 107px 60px 0;
	float: left;
}
.three_use2 {
    width: 270px;
	padding: 60px 0;
	float: left;
}
.three_txt_l {
	font-size: 23px;
	text-align: center;
}
.three_txt_l a {
	color: #000;
	text-decoration: none;
}
.three_txt_l a:hover {
	color: #0091de;
}
.three_txt_s {
	font-size: 16px;
	text-align: left;
	line-height: 25px;
	padding-left: 22px;
}
.three_content {
	height: 300px;
}
/*content end*/


.login_left {
	float: left;
	width: 180px;
	margin: 10px;
	border-left: 1px #464646 solid;
	border-right: 1px #464646 solid;
	border-top: 6px #464646 solid;
	border-bottom: 5px #464646 solid;
}
.login_right {
	float: right;
	width: 802px;
	padding: 10px 10px 10px;
}










/*footer*/
.footer {
	height: 300px;
	background-color: #464646;
	width: 100%;
	clear: both;
}
.footer_txt {
	padding: 40px;
	width: 200px;
	font-size: 15px;
	line-height: 35px;
	color: #FFF;
	float: left;
}
.footer_txt a {
	color: #FFF;
	text-decoration: none;
}
.footer_txt a:hover {
	text-decoration: underline;
}
/*footer end*/


/*about*/
.blue_bg {
	background-color: #0183bf;
	height: 280px;
	width: 100%;
}
.about_txt {
	padding: 70px 60px;
	font-size: 16px;
	line-height: 30px;
}
.about_title {
	font-size: 24px;
	color: #0183bf;
	line-height: 40px;
}
/*about end*/


/*input*/
.contact_txt {
	padding: 70px 250px;
	font-size: 16px;
	line-height: 30px;
	clear: right;
}
.contact_txt2 {
	padding: 70px 250px 140px 250px;
	font-size: 16px;
	line-height: 30px;
	clear: right;
}
.input_bg {
	background-color: #fafafa;
	width: 100%;	
}
.input_table {
	width: 500px;
}
.input_table td {
	font-size: 16px;
	line-height: 30px;
	padding: 0 5px;
}
.input_text {
	width: 98%;
	height: 25px;
	border: 1px solid #a1a1a1;
	font-size: 16px;
	line-height: 25px;
	padding: 0 1%;
	font-family: Arial, "微軟正黑體";
	outline: none;
}
.input_text:hover {
	border: 1px solid #7bc1f7; 
}
.input_text:focus {
    border: 1px solid #7bc1f7; 
    box-shadow: 0px 0px 3px #7bc1f7; 
    -moz-box-shadow: 0px 0px 3px #7bc1f7; 
    -webkit-box-shadow: 0px 0px 3px #7bc1f7;  
}
.textarea_text {
	width: 98%;
	border: 1px solid #a1a1a1;
	font-size: 16px;
	line-height: 25px;
	padding: 0 1%;
	font-family: Arial, "微軟正黑體";
	outline: none;
}
.textarea_text:hover {
	border: 1px solid #7bc1f7; 
}
.textarea_text:focus {
    border: 1px solid #7bc1f7; 
    box-shadow: 0px 0px 3px #7bc1f7; 
    -moz-box-shadow: 0px 0px 3px #7bc1f7; 
    -webkit-box-shadow: 0px 0px 3px #7bc1f7;  
}
.btn_right {
	float: right;
	margin: 15px 28px 0 0;
}
.btn {
	background-color: #0183bf;
	padding: 6px 30px;
	color: #fff;
	font-size: 16px;
	cursor: pointer;
	line-height: 25px;
}
.btn:hover {
    background-color: #c10000;
}
/*input end*/


/*forget*/
.forget_html_txt {
	margin: -35px 30px 10px 30px;
	font-size: 16px;
	font-family: Arial, "微軟正黑體";
	line-height: 25px;
}
.forget_html_title {
	font-size: 22px;
	color: #0183bf;
}
/*forget end*/


/*account*/
.misa_txt {
	margin: -20px 0 40px 0;
	font-size: 22px;
	font-family: Arial, "微軟正黑體";
	padding: 5px 0 0 10px;
	color: #FFF;
	background-color: #ffb210;
	width: 165px;
	height: 30px;
}
.account_square {
	padding: 10px 0;
	clear: left;
	height: 40px;
}
.account_left {
	float: left;
	font-size: 16px;
	font-family: Arial, "微軟正黑體";
	height: 40px;
	line-height: 40px;
	margin-right: 20px;
}
.account_left2 {
	float: left;
	font-size: 15px;
	font-family: Arial, "微軟正黑體";
	height: 40px;
	line-height: 40px;
	color: #7d7d7d;
}
.account_right {
	float: left;
	width: 450px;
	font-size: 16px;
	font-family: Arial, "微軟正黑體";
	height: 40px;
	line-height: 40px;
	margin-right: 10px;
}
.account_right2 {
	float: left;
	width: 100px;
	font-size: 16px;
	font-family: Arial, "微軟正黑體";
	height: 40px;
	line-height: 40px;
	margin-right: 10px;
}
.account_red {
	color: #F00;
}
.account_mouth {
	float: left;
	width: 100px;
	font-size: 16px;
	font-family: Arial, "微軟正黑體";
	height: 42px;
	line-height: 42px;
	margin-right: 10px;
	border: 1px solid #cccccc;
	padding: 0 5px;
	outline: none;
}
.account_mouth:hover {
	border: 1px solid #7bc1f7; 
}
.account_mouth:focus {
    border: 1px solid #7bc1f7; 
    box-shadow: 0px 0px 3px #7bc1f7; 
    -moz-box-shadow: 0px 0px 3px #7bc1f7; 
    -webkit-box-shadow: 0px 0px 3px #7bc1f7; 
}
.account_input {
	width: 80%;
	height: 40px;
	border: 1px solid #cccccc;
	font-size: 16px;
	line-height: 40px;
	padding: 0 10%;
	outline: none;
	font-family: Arial, "微軟正黑體";
}
.account_input:hover {
	border: 1px solid #7bc1f7; 
}
.account_input:focus {
    border: 1px solid #7bc1f7; 
    box-shadow: 0px 0px 3px #7bc1f7; 
    -moz-box-shadow: 0px 0px 3px #7bc1f7; 
    -webkit-box-shadow: 0px 0px 3px #7bc1f7; 
}
.captcha a {
	font-size: 16px;
	padding: 0 5px;
    color: #0183bf;
}
.captcha a:hover {
    color: #c10000;
}
.account_many_txt {
	height: 360px;
	overflow: scroll;
	overflow-x: hidden;
	overflow-y: auto;
	margin: 10px 0;
	border: 1px solid #cccccc; 
	background-color: #f5f5f5;
	padding: 10px 15px;
}
.account_many_txt_bold {
	font-size: 20px;	
}
.account_check {
	text-align: center;
}
.account_btn {
	float: left;
	margin: 0 10px;
}
.account_btn_clear {
	height: 50px;
	clear: both;
	margin-left: 320px;
}
.btn2 {
	background-color: #7d7d7d;
	padding: 6px 30px;
	color: #fff;
	font-size: 16px;
	cursor: pointer;
	line-height: 25px;
}
.btn2:hover {
    background-color: #c10000;
}
/*account end*/


/*member*/
.member_use {
	height: 560px;
}
.member_left {
	width: 580px;
	height: 380px;
	margin: 80px 30px 0 0;
	float: left;
}
.member_right {
	width: 340px;
	height: 380px;
	margin: 80px 30px 0 0;
	float: right;
	background-color: #fafafa;
	box-shadow:3px 3px 12px #d1d1d1;
}
.member_right img {
    width: 115px;
	height: 105px;
	padding: 25px 112.5px;
}
.member_input_outside{
	margin: 0 30px 5px 30px; 
}
.member_input {
	width: 96%;
	height: 40px;
	border: 1px solid #cccccc;
	font-size: 16px;
	line-height: 40px;
	padding: 0 2%;
	outline: none;
	font-family: Arial, "微軟正黑體";
}
.member_input:hover {
	border: 1px solid #7bc1f7; 
}
.member_input:focus {
    border: 1px solid #7bc1f7; 
    box-shadow: 0px 0px 3px #7bc1f7; 
    -moz-box-shadow: 0px 0px 3px #7bc1f7; 
    -webkit-box-shadow: 0px 0px 3px #7bc1f7; 
}
.forget_txt {
	float: left;
	padding: 16px 0 0 30px;
	font-size: 16px;
	line-height: 30px;
}
.forget_txt a {
	color: #0183bf;
	text-decoration: none;
}
.forget_txt a:hover {
	text-decoration: underline;
}
.build_txt {
	float: right;
	padding: 15px 160px 0 0;
	font-size: 16px;
	line-height: 30px;
}
.build_txt a {
	color: #000;
	text-decoration: none;
}
.build_txt a:hover {
	text-decoration: underline;
}
/*member end*/


/*news*/
.news_area {
	padding: 60px 0 30px 0;
	height: 800px;
	clear: both;
}
.news_search {
	float: right;
	width: 485px;
}
.news_input {
	float: left;
	width: 300px;
	height: 35px;
	border: 1px solid #cccccc;
	font-size: 16px;
	line-height: 35px;
	padding: 0 10px;
	outline: none;
	font-family: Arial, "微軟正黑體";
	margin-right: 10px;
}
.news_input:hover {
	border: 1px solid #7bc1f7; 
}
.news_input:focus {
    border: 1px solid #7bc1f7; 
    box-shadow: 0px 0px 3px #7bc1f7; 
    -moz-box-shadow: 0px 0px 3px #7bc1f7; 
    -webkit-box-shadow: 0px 0px 3px #7bc1f7; 
}
.news_btn {
	float: left;
}
.news_table_area {
	padding: 30px 60px;
	clear: both;
}
.news_table {
	font-size: 16px;
	line-height: 50px;
}
.news_table th {
	line-height: 30px;
	background-color: #0183bf;
	color: #fff;
	font-weight: normal;
	text-align: left;
	padding: 0 10px;
}
.news_table td a {
	color: #0183bf;
	text-decoration: none;
}
.news_table td a:hover {
	text-decoration: underline;
}
.news_table td {
	padding: 0 10px;
}
.blue_line {
	height: 3px;
	background-color: #0183bf;
}

/*arrow*/
.sabrosus {
	clear: both;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	color: #79caee;
}
.sabrosus a {
	color: #a3d6ed;
	text-decoration:none;
	padding: 6px 12px;
}
.sabrosus a:hover {
	color: #c10000;
	font-weight: bold;
}
.current {
    padding: 6px 12px;
	color: #0183bf;
	font-weight: bold;
	margin-left: -5px;
}
.sabrosus_arrow {
    padding: 6px 0;
	color: #fff;
	background-color: #0183bf;
	margin-right: 5px;
}
.sabrosus_arrow a {
	color: #fff;
}
.sabrosus_arrow a:hover {
	color: #fff;
	background-color: #c10000; 
}
/*arrow end*/
/*news end*/


/*news_2nd end*/
.news_2nd_title {
	font-size: 50px;
	padding-top: 30px;
	height: 100px;
	border-bottom: 1px solid #e1e1e1;
}
.news_2nd_date {
	font-size: 16px;
	color: #0183bf;
	text-align: right;
	padding: 40px 0;
}
/*news_2nd end*/


/*success*/
.success_head {
	font-size: 50px;
	text-align: center;
	line-height: 70px;
	margin-top: 50px;
}
.success_text {
	font-size: 16px;
}
.success_text2 {
	font-size: 16px;
	line-height: 30px;
}
.gray_line {
	height: 10px;
	border-top: 1px solid #e1e1e1;
}

.website_area {
	margin: 26px;
	width: 200px;
	float: left;
	border: 1px solid #cacaca;
}
.website_area:hover {
	box-shadow: 1px 1px 15px #c4c4c4; 
    -moz-box-shadow: 1px 1px 15px #c4c4c4; 
    -webkit-box-shadow: 1px 1px 15px #c4c4c4; 
	border: 1px solid #fff;
}
.search_bar {
	border-bottom: 1px solid #cacaca;
	width: 200px;
	height: 17px;
}
.arrow_left {
	position: absolute;
	left: 20px;
	width: 60px;
	height: 110px;
	top: 570px;
}
.arrow_right {
	position: absolute;
	right: 20px;
	width: 60px;
	height: 110px;
	top: 570px;
}
/*success end*/




.out_content {
	position: absolute; 
	left: 34px; 
	top: 88px; 
	height: 690px;
	width: 483px;
	z-index: 1;
}

/*scrollbar*/
#scrollbar1 { 
    clear: both;
}
#scrollbar1 .viewport { 
	overflow: hidden;
	height: 690px;
	width: 414px;
	position: relative; 
}
#scrollbar1 .overview { 
	position: absolute; 
	left: 0; 
	top: 0; 
}
#scrollbar1 .thumb .end, #scrollbar1 .thumb {     background-color: #0183bf; 
}
#scrollbar1 .scrollbar { 
     position: relative; 
	 float: left; 
	 width: 3px; 
	 left: 480px;
	 z-index: 1
}
#scrollbar1 .track { 
     background-color: #e1e1e1; 
	 height: 100%; 
	 width: 3px; 
	 position: relative; 
}
#scrollbar1 .thumb { 
     height: 10px; 
	 width: 3px; 
	 cursor: pointer; 
	 overflow: hidden; 
	 position: absolute; 
	 top: 0; 
}
#scrollbar1 .thumb .end { 
     overflow: hidden; 
	 height: 5px; 
	 width: 10px; 
}
#scrollbar1 .disable{ 
     display: none; 
}
/*scrollbar end*/




/*function-index*/
.function_area {
	margin: 40px;
	clear: both;
	height: 206px;
}
.function_left {
	float: left;
	width: 176px;  
	height: 206px;
}
.function_right1, .function_right2, .function_right3, .function_right4, .function_right5 {
	float: right;
	font-size: 16px;
	line-height: 28px;
	padding: 0 50px 0 60px;
	width: 657px;
}
.function_right1 a {
	color: #0291df;
	text-decoration: none;
}
.function_right2 a {
	color: #ff5ab9;
	text-decoration: none;
}
.function_right3 a {
	color: #bddd00;
	text-decoration: none;
}
.function_right4 a {
	color: #c070ed;
	text-decoration: none;
}
.function_right5 a {
	color: #ffb210;
	text-decoration: none;
}
.function_right1 a:hover, .function_right2 a:hover, .function_right3 a:hover, .function_right4 a:hover, .function_right5 a:hover {
	text-decoration: underline;
}
.function_title {
	font-size: 24px;
}
.function_bg {
	background-color: #fafafa;
	padding: 60px 0;
}
.three_square {
	padding-top: 60px;
	height: 3750px;
	clear: both; 
}
.three_white_bg {
	width: 331px;
	margin: 5px;
	height: 610px;
	float: left;
	background-color: #fff;
}
.three_white_pic img {
	margin: 50px 35px 10px 35px;
	width: 260px;
	height: 200px;
}
.three_white_txt {
	font-size: 16px;
	line-height: 25px;
	padding: 0 45px;
}
.three_white_title {
	font-size: 24px;
	text-align: center;
}
/*function-index end*/


/*five-btn bar*/
.five_btn_line {
	width: 100%;
	background-color: #fff;
	border-bottom: 1px solid #e1e1e1;
	position: fixed;
	z-index: 1;
	margin-top: 70px;
}
.five_btn_outside {
    padding: 20px 140px; 
	height: 30px;
}
.five_btn_outside2 {
    padding: 20px 365px; 
	height: 30px;
}
.five_btn_outside3 {
    padding: 20px 275px; 
	height: 30px;
	clear: left;
}
.five_btn01, .five_btn02, .five_btn03, .five_btn04, .five_btn05 {
	background-color: #ebebeb;
	padding: 5px 30px;
	margin: 0 10px; 
	font-size: 16px;
	float: left;
	color: #000;
}
.five_btn01:hover {
	background-color: #0291df;
	color: #fff;
}
.five_btn02:hover {
	background-color: #ff5ab9;
	color: #fff;
}
.five_btn03:hover {
	background-color: #bddd00;
	color: #fff;
}
.five_btn04:hover {
	background-color: #c070ed;
	color: #fff;
}
.five_btn05:hover {
	background-color: #ffb210;
	color: #fff;
}
.five_btn01_in {
	background-color: #0291df;
	color: #fff;
	padding: 5px 30px;
	margin: 0 10px; 
	font-size: 16px;
	float: left;
}
.five_btn02_in {
	background-color: #ff5ab9;
	color: #fff;
	padding: 5px 30px;
	margin: 0 10px; 
	font-size: 16px;
	float: left;
}
.five_btn03_in {
	background-color: #bddd00;
	color: #fff;
	padding: 5px 30px;
	margin: 0 10px; 
	font-size: 16px;
	float: left;
}
.five_btn04_in {
	background-color: #c070ed;
	color: #fff;
	padding: 5px 30px;
	margin: 0 10px; 
	font-size: 16px;
	float: left;
}
.five_btn05_in {
	background-color: #ffb210;
	color: #fff;
	padding: 5px 30px;
	margin: 0 10px; 
	font-size: 16px;
	float: left;
}
/*five-btn bar end*/


/*function-1*/
.five_txt_line {
	height: 40px;
	border-bottom: 1px solid #e1e1e1;
}
.five_txt_area01{
	height: 520px;
	clear: both;
}
.five_txt01 {
	font-size: 16px;
	line-height: 25px;
	width: 261px;
	margin: 40px 40px 20px 40px;
	float: left;
	height: 170px; 
}
.five_txt01_big {
	font-size: 24px;
}
.five_gray_bg02 {
	width: 100%;
	height: 700px;

background: rgb(250,250,250); /* Old browsers */
background: -moz-linear-gradient(top, rgba(250,250,250,1) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(250,250,250,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(250,250,250,1) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(250,250,250,1) 0%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(250,250,250,1) 0%,rgba(255,255,255,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(250,250,250,1) 0%,rgba(255,255,255,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fafafa', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}
.five_gray_pic02 {
	background-size: 110%;
	background-repeat: no-repeat;
	padding-bottom: 160px;
	background-image: url(../images/web_vivid_02.png);
	background-position: right;
}
.five_txt02_title {
	font-size: 50px;
	line-height: 70px;
	padding: 110px 0 0 15px;
}
.five_txt02 {
	padding: 40px 0 0 15px;
	font-size: 16px;
	line-height: 25px;
	width: 230px;
}
.five_gray_bg03 {
	width: 100%;
	height: 620px;

background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(250,250,250,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(250,250,250,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(250,250,250,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(250,250,250,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(250,250,250,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(250,250,250,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fafafa',GradientType=0 ); /* IE6-9 */

}
.five_gray_pic03 {
	background-size: 90%;
	background-repeat: no-repeat;
	padding-bottom: 140px;
	background-image: url(../images/web_vivid_03.png);
	background-position: left;
}
.five_txt03_title {
	font-size: 50px;
	line-height: 70px;
	padding: 170px 15px 0 450px;
}
.five_txt03 {
	padding: 40px 15px 0 450px;
	font-size: 16px;
	line-height: 25px;
	width: 500px;
}
.five_area04 {
	padding: 80px 0;
	clear: both;
	height: 600px;
}
.five_area_left {
	float: left;
}
.five_area_right img {
	float: right;
	width: 590px;
}
.five_txt04_title {
	font-size: 50px;
	line-height: 70px;
	padding: 60px 0 0 15px;
}
.five_txt04 {
	padding: 40px 0 0 15px;
	font-size: 16px;
	line-height: 25px;
	width: 320px;
}
.five_gray_bg05{
	background-color: #fafafa;
	padding-top: 10px;
}
.five_txt_area05{
	height: 270px;
	clear: both;
}
.web_bottom {
    padding: 50px 0;
	width: 1024px; 
	height: 330px;
}
/*function-1 end*/


/*function-2*/
.five_gray_bg06 {
	width: 100%;
	height: 800px;

background: rgb(250,250,250); /* Old browsers */
background: -moz-linear-gradient(top, rgba(250,250,250,1) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(250,250,250,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(250,250,250,1) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(250,250,250,1) 0%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(250,250,250,1) 0%,rgba(255,255,255,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(250,250,250,1) 0%,rgba(255,255,255,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fafafa', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}
.five_gray_pic06 {
	background-size: 97%;
	background-repeat: no-repeat;
	padding-bottom: 140px;
	background-image: url(../images/web_activity_02.png);
	background-position: left;
}
.five_txt06_title {
	font-size: 50px;
	line-height: 70px;
	padding: 110px 0 0 600px;
}
.five_txt06 {
	padding: 40px 0 0 600px;
	font-size: 16px;
	line-height: 25px;
	width: 230px;
}

.five_area_right07 img {
	float: right;
	width: 480px;
}
.five_area07 {
	padding: 80px 0;
	clear: both;
	height: 583px;
}
.five_txt07_title {
	font-size: 50px;
	line-height: 70px;
	padding: 90px 0 0 15px;
}

.five_gray_bg08 {
	width: 100%;
	height: 1170px;

background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(250,250,250,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(250,250,250,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(250,250,250,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(250,250,250,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(250,250,250,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(250,250,250,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fafafa',GradientType=0 ); /* IE6-9 */

}
.five_gray_pic08 {
	background-size: 95%;
	background-repeat: no-repeat;
	padding-bottom: 1070px;
	background-image: url(../images/web_activity_04.png);
	background-position: right;
}
.five_txt08_title {
	font-size: 50px;
	line-height: 70px;
	padding: 120px 15px 0 160px;
}
.five_txt08 {
	padding: 40px 15px 0 160px;
	font-size: 16px;
	line-height: 25px;
	width: 500px;
}
/*function-2 end*/


/*function-3*/
.five_gray_bg09 {
	width: 100%;
	height: 1370px;
	padding-top: 60px;

background: rgb(250,250,250); /* Old browsers */
background: -moz-linear-gradient(top, rgba(250,250,250,1) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(250,250,250,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(250,250,250,1) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(250,250,250,1) 0%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(250,250,250,1) 0%,rgba(255,255,255,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(250,250,250,1) 0%,rgba(255,255,255,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fafafa', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}
.five_gray_bg10 {
	width: 100%;
	height: 800px;

background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(250,250,250,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(250,250,250,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(250,250,250,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(250,250,250,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(250,250,250,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(250,250,250,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fafafa',GradientType=0 ); /* IE6-9 */
}
.five_gray_pic10 {
	background-size: 52%;
	background-repeat: no-repeat;
	padding-bottom: 180px;
	background-image: url(../images/web_store_03.png);
	background-position: left;
}
.five_txt10_title {
	font-size: 50px;
	line-height: 70px;
	padding: 170px 15px 0 600px;
}
.five_txt10 {
	padding: 40px 15px 0 600px;
	font-size: 16px;
	line-height: 25px;
}
.five_bg11 {
	width: 100%;
	height: 800px;
}
.five_gray_pic11 {
	background-size: 100%;
	background-repeat: no-repeat;
	padding-bottom: 210px;
	background-image: url(../images/web_store_04.png);
	background-position: right;
}
.five_txt11_title {
	font-size: 50px;
	line-height: 70px;
	padding: 180px 0 0 20px;
}
.five_txt11 {
	padding: 60px 0 0 20px;
	font-size: 16px;
	line-height: 25px;
	width: 230px;
}
.five_gray_bg12 {
	background-color: #fafafa;
	height: 711px;
}
.five_txt12_title {
	font-size: 50px;
	line-height: 70px;
	padding: 120px 0 0 15px;
}
.five_txt12 {
	padding: 60px 0 0 15px;
	font-size: 16px;
	line-height: 25px;
	width: 320px;
}
.five_area12 {
	padding: 80px 0;
	clear: both;
	height: 711px;
}
.five_gray_bg13 {
	width: 100%;
	height: 1255px;

background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(250,250,250,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(250,250,250,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(250,250,250,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(250,250,250,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(250,250,250,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(250,250,250,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fafafa',GradientType=0 ); /* IE6-9 */
}
.five_txt_area13{
	height: 500px;
	clear: both;
	margin-top: -30px;
}
.success_head2 {
	font-size: 50px;
	text-align: center;
	line-height: 70px;
	margin-top: 120px;
}
.five_gray_pic13_b {
	background-repeat: no-repeat;
	background-image: url(../images/web_store_06.png);
	height: 1255px;
	background-position: bottom;
	z-index: 0;
}
/*function-3 end*/


/*function-4*/
.five_gray_pic14 {
	background-size: 120%;
	background-repeat: no-repeat;
	padding-bottom: 160px;
	background-image: url(../images/web_education_02.png);
	background-position: right;
}
.five_txt14_title {
	font-size: 50px;
	line-height: 70px;
	padding: 110px 0 0 15px;
}
.five_txt14 {
	padding: 40px 0 0 15px;
	font-size: 16px;
	line-height: 25px;
	width: 250px;
}
.five_txt_area15{
	height: 500px;
	clear: both;
	margin-top: -30px;
	padding: 0 142px;
}
.five_gray_bg15 {
	width: 100%;
	height: 890px;

background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(250,250,250,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(250,250,250,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(250,250,250,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(250,250,250,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(250,250,250,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(250,250,250,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fafafa',GradientType=0 ); /* IE6-9 */
}
.five_gray_pic15_b {
	background-repeat: no-repeat;
	height: 890px;
	background-position: bottom;
	z-index: 0;
	background-image: url(../images/web_education_03.png);
}
.five_area_left2 img {
	float: left;
	width: 560px;
	padding-top: 100px;
}
.five_area_right2 {
	float: right;
}

.five_area_left3 {
	float: left;
	width: 480px;
	margin-top: -40px;
}
.five_area_right3 img {
	float: right;
	width: 544px;
	padding-top: 100px;
}
.five_txt16 {
	padding: 20px 0 0 15px;
	font-size: 16px;
	line-height: 25px;
	width: 320px;
}
.five_area16 {
	padding: 80px 0;
	clear: both;
	height: 800px;
}
/*function-4 end*/


/*function-5*/
.five_txt_area17{
	height: 690px;
	clear: both;
}
.five_area_left4 {
	float: left;
	width: 360px;
	margin-top: -30px;
}
.five_area_right4 img {
	float: right;
	width: 560px;
}
.five_gray_bg17 {
	width: 100%;
	height: 1000px;

background: rgb(250,250,250); /* Old browsers */
background: -moz-linear-gradient(top, rgba(250,250,250,1) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(250,250,250,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(250,250,250,1) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(250,250,250,1) 0%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(250,250,250,1) 0%,rgba(255,255,255,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(250,250,250,1) 0%,rgba(255,255,255,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fafafa', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}
.five_gray_pic18 {
	background-size: 105%;
	background-repeat: no-repeat;
	padding-bottom: 180px;
	background-image: url(../images/web_community_04.png);
	background-position: left;
}
.five_gray_bg18 {
	background-color: #fafafa;
	height: 800px;
}
.five_txt_area18{
	height: 200px;
	clear: both;
	margin-top: -30px;
	padding: 0 142px;
}
.five_pic19 {
	margin-bottom: 100px;
}
.five_gray_bg20 {
	background-color: #fafafa;
	height: 1020px;
	padding-top: 60px;
}
.five_gray_pic20_b {
	background-repeat: no-repeat;
	height: 970px;
	background-position: bottom;
	z-index: 0;
	background-image: url(../images/web_community_06.png);
}
.five_area21 {
	padding: 100px 0;
	clear: both;
	height: 830px;
}
.five_gray_bg22 {
	background-color: #fafafa;
	height: 664px;
	padding: 30px 0;
}
.five_gray_pic22_b {
	background-repeat: no-repeat;
	background-image: url(../images/web_community_08.png);
	height: 694px;
	background-position: bottom;
	z-index: 0;
}
/*function-5 end*/


/*FAQ*/
.gray_dot_line {
	border-bottom: 1px dashed #cccccc; 
    margin: 20px 0 20px 0;
}
.q_square {
	height: 30px;
	width: 25px;
	font-family: Arial;
	font-size: 24px;
	line-height: 30px;
	color: #FFF;
	padding-left: 5px;
	margin-right: 15px;
	float: left;
	background-color: #0183bf;
}
.a_square {
	height: 30px;
	width: 23px;
	font-family: Arial;
	font-size: 24px;
	line-height: 30px;
	color: #FFF;
	padding-left: 7px;
	margin-right: 15px;
	float: left;
	background-color: #ffb210;
}
.q_txt {
	width: 859px;
	font-size: 16px;
	line-height: 30px;
	margin-left: 45px;
}
.qa_clear {
	clear: left;
	margin-bottom: 5px;
	line-height: 30px;
}
/*FAQ end*/


/*success*/
.case_bg {
	height:1060px;
	clear: left;
}

.case_success {
	width: 320px;
	margin: 30px 10.5px;
	float: left;
	position: relative;
}
.case_title {
	font-size: 24px;
	line-height: 24px;
	padding: 10px 0;
}
.case_pic {
	border: 1px solid #c9c9c9;
	width: 320px;
	height: 220px;
	cursor: pointer;
}
.case_gray a {
	display: none;
}
.case_pic:hover .case_gray a {
	display: block;
	border: 1px solid #c9c9c9;
	width: 320px;
	height: 220px;
	position: absolute;
	top: 44px;
	left: 0px;
	background-image: url(../images/expand.png);
	background-repeat: no-repeat;
}
/*success end*/


/*album*/
.album_bg {
	background-color: rgba(0, 0, 0, 0.7) 
}
.album_left {
	float: left;
	padding: 20px;
	color: #FFF;
	font-size: 24px;
	line-height: 24px;
}
.album_right {
	float: right;
	width: 590px;
}
.delete_pic {
	position: absolute;
	width: 25px;
	height: 25px;
	right: -35px;
	cursor: pointer;
	background: url(../images/delete.png);
	display: block;
}
.delete_pic:hover {
	background: url(../images/delete2.png);
}
.Container{
	width: 1024px;
	padding-top: 70px;
	height: 1000px;
	position: relative;
}
.image {
	width:1024px;
	height:650px;
	border: solid 1px #c6c6c6;
	text-align: center;
	overflow: hidden;
}
.image>img {
	width: 100%;
	max-width: 1024px;
}
.switch {
	background-color: #000;
	border: solid 1px #c6c6c6;
	border-top: none;
	height: 100px;
	width:1024px;
	clear: both;
}
.icon1 { 
	float:left;
	margin-top: 20px;
	margin-left: 10px;
}
.icon1 a {
	display: block;
	width: 20px;
	height: 60px;
	background-image: url(../images/arrow_s_l.png);
	background-repeat: no-repeat;
}
.icon1 a:hover {
	background: url(../images/arrow_s_l2.png);
}
.icon2 { 
	float:right;
	margin-top: 20px;
	margin-right: 20px;
}
.icon2 a {
	display: block;
	width: 20px;
	height: 60px;
	background-image: url(../images/arrow_s_r.png);
	background-repeat: no-repeat;
}
.icon2 a:hover {
	background: url(../images/arrow_s_r2.png);
}
.switch_center {
	float:left;
	width:510px;
	height:60px;
	margin: 20px 0 20px 10px ;
	overflow:hidden;
}
.switch_center ul {}
.switch_center li {
	float:left;
	margin-right:10px;
}
.switch_center li a {
	display:block;
	width:90px;
	height:58px;
	border: solid 1px #c6c6c6;	
	overflow: hidden;
}
.switch_center li a img {
	width:90px;
	height:60px;
}
.switch_center li a:hover img {
	width:100px;
	height:70px;
	
	/*opacity transition*/
	opacity: 0.7;
	
    -webkit-transition: opacity 0.3s linear;
	-moz-transition: opacity 0.3s linear;
	-o-transition: opacity 0.3s linear;
	transition: opacity 0.3s linear;
	
	/*size & xy-postion transition*/
	-webkit-transform: translate(-5px, -5px);
	-moz-transform: translate(-5px, -5px);
	-o-transform: translate(-5px, -5px);
	transform: translate(-5px, -5px);
	
	-webkit-transition: width 0.3s linear, height 0.3s linear, -webkit-transform 0.3s linear;
	-moz-transition: width 0.3s linear, height 0.3s linear, -moz-transform 0.3s linear;
	-o-transition: width 0.3s linear, height 0.3s linear, -o-transform 0.3s linear;
	transition: width 0.3s linear, height 0.3s linear, transform 0.3s linear;	
}
/*album end*/

/*sample*/
.sample_search_txt {
	height: 30px;
	width: 350px;
	border: solid 1px #0183bf;
	border-right: none;
	padding: 0 10px;
	font-size: 16px;
	line-height: 16px;
	outline:none;
	float: left;
	font-family: Arial, "微軟正黑體";
}

.sample_search_btn {
	height: 32px;
	width: 100px;
	background-color: #0183bf;
	color: #fff;
	font-size: 16px;
	cursor: pointer;
	line-height: 34px;
	float: left;
	text-align: center;
}
.sample_search_btn:hover {
    background-color: #c10000;
}
.sample_blank {
	height: 1400px;
}
.sample_outside {
	float: right;
	height: 30px;
	margin: 20px 0;
}
.sample_square {
	width: 445px;
	margin: 40px 33.5px;
	float: left;
}
.sample_txt {
	float: left;
	font-size: 20px;
	line-height: 30px;
}
.sample_btn {
	float: left;
	height: 30px;
	width: 80px;
	color: #0183bf;
	font-size: 16px;
	cursor: pointer;
	line-height: 32px;
	float: left;
	text-align: center;
	border: solid 1px #0183bf;
	margin-left: 10px;
}
.sample_btn:hover {
	color: #FFF;
	background-color: #0183bf;
	border: solid 1px #0183bf;
}
/*sample end*/




.pc_left {
	float: left;
}

.pc_right {
	float: right;
	padding: 20px 15px 20px 0;
}
.pc_left_txt {
	float: left;
	font-size: 16px;
	line-height: 32px;
}
.pc_btn {
	background-image: url(../images/computer_01.jpg);
	background-repeat: no-repeat;
	width: 80px;
	height: 70px;
	float: left;
	cursor: pointer; 
}
.pc_btn:hover {
	background-image: url(../images/computer_03.jpg);
}
.pc_btn2 {
	background-image: url(../images/computer_02.jpg);
	background-repeat: no-repeat;
	width: 80px;
	height: 70px;
	float: left;
}
.mobile_btn {
	background-image: url(../images/mobile_01.jpg);
	background-repeat: no-repeat;
	width: 80px;
	height: 70px;
	float: left;
	cursor: pointer; 
}
.mobile_btn:hover {
	background-image: url(../images/mobile_03.jpg);
}
.mobile_btn2 {
	background-image: url(../images/mobile_02.jpg);
	background-repeat: no-repeat;
	width: 80px;
	height: 70px;
	float: left;
}

.mobile_bg {
	background-image: url(../images/square_bg.jpg);
	background-repeat: repeat;	
	padding: 30px 0;
}











.CollapsiblePanelOpen .CollapsiblePanelTab .triangle {
    border-left: 6px solid #0183bf;
	border-bottom: 6px solid #464646;
	border-right: 6px solid #0183bf;
	display: inline-block;
	right: 20px;
	top:20px;
	position: absolute;
}
.CollapsiblePanelClosed .CollapsiblePanelTab .triangle {
    border-left: 6px solid #0183bf;
	border-top: 6px solid #464646;
	border-right: 6px solid #0183bf;
	display: inline-block;
	right: 20px;
	top:20px;
	position: absolute;
}