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

/* Banner
======================================================================================== */
.banner{ position:relative; width:100%;}
.b_setupBox{ position:relative;}
.b_setupBox .container{ margin:0 auto;}
.b_setupBox .setup{ position:absolute; top: -12em; left:23.8%; z-index:100;width: 250px; height:38px;
-webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;
background-color: rgba(255, 255, 255, 0.4); padding:1em 1.5em; box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3);border: 1px solid #000;border: 1px solid rgba(0, 0, 0, 0.1);}
.setup .qut{ margin:0.8em 0 0 0; overflow:hidden;}
.setup .setup_box a.blue_button{-webkit-border-radius:6px; -moz-border-radius: 6px; border-radius: 6px; letter-spacing:1px; font-size:1.3em;}
.setup p{ font-size:1.5em; letter-spacing:0.25em; padding:5px 0; color:#ff7200; text-align:center;}
/* 2 bottons */
.setup_towspace { position:absolute; top: -12em; left:23.8%; z-index:100;}
.b_setupBox .setup_tow{width: 150px; height:38px;
-webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;
background-color: rgba(255, 255, 255, 0.4); padding:1em 1.5em; box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3);border: 1px solid #000;border: 1px solid rgba(0, 0, 0, 0.1); display:inline-block; margin-right: 15px;}
.setup_tow .qut{ margin:0.8em 0 0 0; overflow:hidden;}
.setup_tow .setup_box_tow a.blue_button{-webkit-border-radius:6px; -moz-border-radius: 6px; border-radius: 6px; letter-spacing:1px; font-size:1.3em;}
.setup_tow p{ font-size:1.5em; letter-spacing:0.25em; padding:5px 0; color:#ff7200; text-align:center;}
.qut ul li{ float:left; margin:0 1em 0 0;}
.qut ul li a{ color:#333;}
.qut ul li a:hover{ text-decoration:underline;}
.small_banner { width: 200px; height: 200px; position: absolute; z-index: 150; right: 500px; top: 50px;}

/* service
======================================================================================== */
.service{ height:100px; padding:1em 0; border-top:1px solid #DCDCDC;}
.service .ser_list{ float:left; width:63%;}
.service .ser_list ul li{ width:14%; float:left; margin:0 0.4em; }
.service .ser_list ul li a{ background:url(../images/service_list.png) no-repeat;padding:5.2em 0 0 0; display:block; font-size:1.15em; text-align:center;}
.service .ser_list ul li a:hover{ text-decoration:none; color:#227BBB; background:url(../images/service_list.png) no-repeat;}
.service .ser_list ul li.list_1 a{background-position: -380px 0; }
.service .ser_list ul li.list_2 a{background-position: -943px 0; }
.service .ser_list ul li.list_3 a{background-position: -850px 0; }
.service .ser_list ul li.list_4 a{background-position: -1120px 0; }
.service .ser_list ul li.list_5 a{background-position: -760px 0; }
.service .ser_list ul li.list_6 a{background-position: -665px 0; }
.service .ser_list ul li.list_1 a:hover{background-position: -380px -103px; }
.service .ser_list ul li.list_2 a:hover{background-position: -943px -104px; }
.service .ser_list ul li.list_3 a:hover{background-position: -850px -103px; }
.service .ser_list ul li.list_4 a:hover{background-position: -1120px -103px; }
.service .ser_list ul li.list_5 a:hover{background-position: -760px -102px; }
.service .ser_list ul li.list_6 a:hover{background-position: -665px -102px; }
.news{ padding: 0; width:37%; float:right;}
.news h3{ color:#227BBB; line-height:2em; font-size:1.1em; text-align:left;}
.news ul li{background-image:url(../images/announcement_icon.png); background-position:-4px 0;background-repeat:no-repeat; padding:0.1em 0 0.4em 4.5em;}
.news ul li.new{ background-image:url(../images/news_icon.png); background-position:-8px 0;}
.news ul li.system{background-image:url(../images/system_icon.png); background-position:-4px 0;}
.news ul li.maintain{ background:url(../images/maintain_icon.png) -8px 0 no-repeat;}
.news ul li span{ display:inline-block; color:#333; margin: 0 0.6em 0 0;}
.news ul li a{ font-size:1em;}
.news a.more{ display:block; text-align:right; padding-right:1.4em; background-position:355px 0px;}
/* explain
======================================================================================== */
.explain{overflow:hidden;}
.explain .ex{ float:left; width:22%; padding:0 3em 0 0;}
.explain .ex3{ padding:0 0 0 0;}
.explain .ex4{ padding:0 0 0 3em;}
.explain .ex .img a{ background-image:url(../images/explain.png); background-position:0px 0px; display:block; background-repeat:no-repeat; width:150px; height:130px; margin:0 0 0 3.5em;}
.explain .ex_bot .img a { background-image:url(../images/explain2.png);}
.explain .ex1 .img a{ background-position:-225px 0px;}
.explain .ex2 .img a{ background-position:-450px 0px;}
.explain .ex3 .img a{ background-position:-675px 0px;}
.explain .ex4 .img a{ background-image:url(../images/explain_app.png);}
.explain .ex h3 a{ text-align:center; font-size:1.5em; color: #227BBB; line-height:2.5em; display:block;}
.explain .ex p{ font-size:1.1em; min-height:50px; line-height:1.6em;}
.explain .ex a.more{ float:right;background-position:63px 0px; padding-right:2em; font-size:0.9em;}
/* paypage
======================================================================================== */
.paypage{ overflow:hidden; margin-top:2.5em;}
.paypage h2{ text-align:center; margin-bottom:0.5em;}
.pay_img, .pay_info{ float:left; width:53%;}
.pay_img{ background-image:url(../images/paypage.png); background-repeat:no-repeat; background-position: 4em 1em; height:350px; width:45%;}
.paypage .payment{ background-image:url(../images/paypage_icon.png); background-repeat:no-repeat; background-position:0 18px; padding-left:35px;margin: 10px 0; overflow:hidden; }
.payment h4 {margin: 20px 0 5px 0;font-size: 1.4em;font-weight: normal;text-shadow: none;color: #227BBB;}
.payment_text {float: left;}
.payment_icon_1, .payment_icon_2, .payment_icon_3, .payment_icon_4 {float: right;}
.payment_icon_1, .payment_icon_2, .payment_icon_3 {width: 270px;height: 70px;}
.paypage .payment_icon_1 {background: url(../images/paypage_1.png) no-repeat;}
.paypage .payment_icon_2 {background: url(../images/payment_icon_2.png) no-repeat;}
.paypage .payment_icon_3 {background: url(../images/paypage_2.png) no-repeat;}
.paypage .payment_icon_4 {width: 230px;height: 70px;background: url(../images/paypage_3.png) no-repeat;}
.paypage a.more{background-position: 63px 0px;padding-right: 2em;font-size: 0.9em; float:right; margin-bottom:10px;}
/* ads
======================================================================================== */
.ads{ margin-bottom:0;}
.ads ul li {height: 175px; margin-top:10px;padding: 0;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;position: relative;}
/* success
======================================================================================== */
.success .suc{ float:left; width:20%;}
.success .suc_inner{ border:1px solid #CCC; border-bottom:none; overflow:hidden; margin-top:2em;}
.suc_inner .suc ul li{ border-right:1px solid #CCC; border-bottom:1px solid #CCC; height:100px; }
.suc_inner .last ul li{ border-right:none;}
.suc_inner .suc ul li.col_2{ height:200px;}
.suc_inner .suc ul li.col_3{ height:99px;}
.suc_inner .suc ul li img{ text-align:center; padding:1em 0 0 1em;}
.suc_inner .suc ul li img.big{ padding:4em 0 0 1.8em;}
.suc_inner .suc ul li img.big_1{ padding:0.5em 0 0 0.4em;}
.suc_inner .suc ul li img.s1{ padding:2.3em 0 0 2em;}
.suc_inner .suc ul li img.s2{ padding:1.5em 0 0 2em;}
.success a.more{ margin:-25px 0 0 0; background-position: 80px -1px; float:right; padding-right:2em;}

/* clients
======================================================================================== */
.clients{ margin-top:2.5em;}
.clients .container { position:relative;}
.clients .cli{ float:left; border-left:1px solid #CCC; width:19.8%; padding:0.5em 0 0 0; min-height:155px;}
.clients .cli h3{ color:#227BBB; line-height:2em; padding: 0 0 0.3em 0.5em; text-align:left;}
.clients .cli li{ padding:0 1em; line-height:2em; font-size:0.9em;}
.clients .cli li a{ font-size:1.1em;}
.clients .last{ border-right: 1px solid #CCC;}
.clients p a.more{ background-position: 80px 0; padding-right:2em; float:right; margin-top:-25px;}

/* overlay  ========================================================================================
*/
.overlay {position: fixed;top: 0;right: 0;bottom: 0;left: 0;background: #FFF;opacity: 0.5;z-index: 200;}
.window {padding:2.5% 3%;background: #FFF;border: 1px solid #000;z-index: 300;}
.width_30, .width_50, .width_55, .warn{position: absolute;}
.width_30 {width: 30%;right: 32%;left: 32%;margin-top: 120px;}
.width_50 {width: 50%;right: 22%;left: 22%;margin-top: 200px;}
.width_55 {width: 55%;right: 25%;left: 20%;}
.width_98 {width: 98%;right: 1%;left: 1%;}
.close_btn {position: absolute;top: 15px;right: 15px;}
.close_btn_5s { position:absolute; top:15px; right:15px;}
.font_m{font-size:14px !important;}
.font_l{font-size:21px !important;}
.margin_t10{margin-top:10px !important;}
.margin_t20{margin-top:20px !important;}
.margin_t30{margin-top:30px !important;}
.pd50{padding:50px !important;}
.warn{margin-top: 120px; width:26%; right: 36.5%;left: 35.5%;}
.w200{width:200px;}
.align_c{text-align:center;}
.btns{margin: 30px auto auto; padding:8px 0;}
@media screen and (max-width: 1280px) {
	.warn{margin-top: 100px; width:350px; right: 36.5%;left: 33.5%;}
}
/* messenger  ========================================================================================
*/
.mesngr, .mesngr2{ z-index:999; position: fixed;bottom: 0px;right: 20px; width:250px;}
.mesngr{height:45px;}
.mesngr2{height:160px;}
a.msgr_none, .msgr_login{padding:0.9em; display:block; font-weight:bold; font-size:15px;text-decoration:none; border-top-left-radius:8px; border-top-right-radius:8px;}
a.msgr_none{background-color:#ddd; color:#444;}
a.msgr_none:hover{background-color:#227bbb; color:#fff;}
a.msgr_login{background-color:#227bbb; color:#fff;}
.msgr_cont{background-color:#fff; padding:15px; font-size:14px; border:#227bbb 2px solid;}

.help_box {
	position: absolute;
	top:-100px;
	left:50px;
	background-color: rgba(255, 255, 255, 0.8);
	background: rgba(255, 255, 255, 0.8);
	border: 4px solid #227bbb;
	border-radius:10px;
	padding:0.5em 1.4em;
}
.help_box:after, .help_box:before {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.help_box:after {
	border-color: rgba(255, 255, 255, 0);
	border-top-color: #fff;
	border-width: 12px;
	margin-left: -12px;
}
.help_box:before {
	border-color: rgba(34, 123, 187, 0);
	border-top-color: #227bbb;
	border-width: 18px;
	margin-left: -18px;
}
.help_box > p{text-align:center; font-size:22px; font-weight:bold;}
.help_box a.go_login{ display:block; text-align:center;}

.msgr_none span.arrow_t, .msgr_login span.arrow_b, .go_top span.arrow_b{display:block; width:18px; height:15px; float:right;}
.msgr_none span.arrow_t, .msgr_login span.arrow_t{background:url(../images/arr_t.png) no-repeat;}
.msgr_none span.arrow_b, .msgr_login span.arrow_b{background:url(../images/arr_b.png) no-repeat;}