@charset "utf-8";
/*
*@Description:	bocpay main css
*@Author:	cb340081631
*@Update:	2013-06-27
*/

/*	
*	boc-red:	#9e1b32		#be0f34		#d6083b
*	boc-gray:	#828a8f		#c4c7c8		#d1d4d3
*/

/* --------------------
		page
-------------------- */
.fixNav { position:fixed; _position:absolute; top:0; z-index:6000; position:relative;}

/** topbar **/
#topbar { height:50px; background:#404040 url(../images/sp_sch_topbar.png) repeat-x 0 0; color:#eee;}
#topbar .wrapper { overflow:hidden; zoom:1;}
.top-link { float:left;}
.top-link li { float:left;}
.top-link li a { color:#ddd; font-size:14px;}
.logo-epay,
.logo-bocpay { display:block; width:307px; height:50px; background:url(../images/sp_sch_topbar.png) no-repeat 0 -50px; text-indent:-9999em;}
.logo-bocpay { width:130px; background-position:0 -100px;}
.top-menu { float:right; padding-top:13px;}
.top-menu li { float:left; margin-left:10px; _display:inline; font-size:13px;}
.top-menu li span,
.top-menu li a { display:inline-block; padding:0 10px; height:24px; color:#ddd; line-height:24px; border-radius:3px;}
.top-menu li a { background:#666; }
.top-menu li a:hover { background:#d6083b; color:#fff; text-decoration:none;}

.top-menu li a.btn-login { padding:0 15px; border-bottom:1px solid #111; background:#be0f34; color:#fdd;}
 { background:#be0f34; color:#fff; text-decoration:none;}
.top-menu li a.btn-register { padding:0 15px; border-bottom:1px solid #111; background:#be0f34; color:#fdd; font-size:13px;}
.top-menu li a.btn-login:hover,
.top-menu li a.btn-register:hover { background:#d6083b; color:#fff; text-decoration:none;}

/** footer **/
#footer { padding:15px 0; background:#e5e5e5; color:#404040; line-height:20px; text-align:center;}

/** container **/
#content .wrapper { padding:10px 0;}
.main { float:left; width:700px;}
.side { float:right; width:245px;}
.building { margin:0 auto; width:600px; height:500px; background:url(../images/pic_building.jpg) no-repeat center 50px; text-indent:-9999em;}

/** totop **/
.toTop { position:fixed; bottom:70px; right:50px; display:none; overflow:hidden; width:36px; height:36px; border:none; background:url(../images/btn_totop.png) no-repeat 0 0; text-indent:-9999em; cursor:pointer;}
.toTopHover { float:left; display:block; overflow:hidden; width:36px; height:36px; background:url(../images/btn_totop.png) no-repeat 0 0; opacity:0; -moz-opacity:0; filter:alpha(opacity=0);}
.toTop:active,
.toTop:focus { outline:none;}

/* --------------------
		global
-------------------- */

.g-box { padding:10px 19px 20px; min-height:500px; border:1px solid #ddd; background:#fff;}
.error { margin:50px auto 0; width:500px; height:200px; background:url(../images/pic_error.png) no-repeat 0 0; text-indent:-9999em;}

/* --------------------
		app_school
-------------------- */
.bg_school { padding:50px 0; background: url(../images/bg_school.jpg) no-repeat center bottom #D7E9F7; min-height:550px;}
.school { padding:20px 20px 40px; width:920px; min-height:350px; _height:350px; background:#fff; opacity:1; border-radius:10px; box-shadow:0 3px 6px 0 rgba(0,0,0,0.2);}
.school p{ text-indent:2em; line-height:23px; font-size:13px;}
.school p img{ margin:10px 30px; width:400px; height:400px; float:left;}
.school h3{ text-align:center; font-size:16px; line-height:30px;}
.sch-main { float:left; width:590px;}
.sch-side { float:right; width:310px;}

/** sch-fsc **/
.sch-fsc { margin-bottom:15px; width:920px; overflow:hidden;}
.sch-fsc .sch-coll { float:left; width:590px;}
.sch-fsc .sch-colr { float:right; width:310px; overflow:hidden;}

.sch-intro { font-size:14px;}
.sch-intro .tit { position:relative; padding:0 10px 0 15px; height:40px; border-left:4px solid #d6083b; background:#eee; font:20px/40px '\5FAE\8F6F\96C5\9ED1', '\9ED1\4F53'; line-height:40px;}
.sch-intro .con { padding:0 10px; line-height:25px; text-indent:2em;}
.sch-school { margin-bottom:15px; width:300px;overflow:hidden; border:5px solid #e5e5e5;}
.sch-to ul { width:330px;}
.sch-to ul li { float:left; margin-right:20px; _display:inline;}
.sch-to ul li a { display:block; width:145px; height:60px; background:#fff url(../images/btn_to.png) no-repeat 0 0; text-indent:-9999em;}.sch-to ul li a:hover { background-position:0 -60px;}
.sch-to ul li a.to-register { background-position:-145px 0;}
.sch-to ul li a.to-register:hover { background-position:-145px -60px;}

.sch-selfpay { position:relative; width:100%; height:200px; background:#fff url(../images/bg_selfpay.jpg) no-repeat 0 0;}
.sch-selfpay a.btn-selfpay { position:absolute; top:80px; left:675px; display:block; width:230px; height:70px; background:url(../images/btn_selfpay.png) no-repeat 0 0; text-indent:-9999em;}
.sch-selfpay a.btn-selfpay:hover { background-position:0 -70px;}

/** sch-project **/
.sch-project { margin-top:15px; width:920px; overflow:hidden;}
.sch-project .tit { position:relative; padding:0 10px 0 15px; height:40px; border-left:3px solid #be0f34; background:#eee; font:20px/40px '\5FAE\8F6F\96C5\9ED1', '\9ED1\4F53'; line-height:40px;}
.sch-project ul { margin-top:-1px; margin-left:-15px; width:980px;}
.sch-project ul li { float:left; padding:20px 15px 20px 15px; width:285px; border-right:1px dotted #ddd; border-top:1px dotted #ddd;}
.sch-project ul .name { margin-top:10px; height:40px; font-size:14px; line-height:20px;}
.sch-project ul .time { margin-top:10px; height:30px; padding:0 10px; border-left:3px solid #08c; background:#eee; line-height:30px;}

/** sch-page **/
.sch-title { margin-bottom:20px; padding:5px 0 20px; border-bottom:1px solid #ddd;}
.sch-title h1 { padding:0 10px; border-left:4px solid #d6083b; font:24px/26px '\5FAE\8F6F\96C5\9ED1', '\9ED1\4F53';}

.sch-order .sub-tit { margin-bottom:10px; height:30px; font:18px/30px '\5FAE\8F6F\96C5\9ED1', '\9ED1\4F53';}
.sch-order .sub-tit span{font-size:12px; color:#666;}
.sch-order .sub-tit2 { margin-bottom:10px; height:30px; font:12px/30px '\5FAE\8F6F\96C5\9ED1', '\9ED1\4F53'; color:#666;}
.sch-order table { margin-bottom:20px; width:100%; word-break:break-all; text-align:center; font-size:13px;}
.sch-order th { padding:8px 10px; border:1px solid #ddd; border-top-color:#999; background:#eee; font-weight:700;}
.sch-order td { padding:15px; border:1px solid #ddd; background:#fff;}
.sch-order td.tit{width:20%;background:#eee; }
.sch-order .che { position:relative; top:-2px; vertical-align:middle;}
.sch-order .labf { margin-left:5px;}
.sch-order td .money { color:#d6083b;}
.sch-order td .amount { color:#d6083b; font-weight:700; font-size:18px;}
.sch-order tfoot td { padding:15px 100px;}

.sch-order .order-pay { margin-bottom:20px;}
.sch-order .order-pay li { float:left; margin-right:20px; _display:inline; border:1px solid #ccc; background:#eee;}
.sch-order .order-pay .rad { float:left; margin:25px 8px 0; cursor:pointer;}
.sch-order .order-pay .labf { float:left; display:block; padding:10px; width:200px; height:50px; background-color:#fff; background-image:url(../images/sp_bank.png); background-repeat:no-repeat; cursor:pointer; text-indent:-9999em;}
.pic-boc { background-position:center 10px;}
.pic-union { background-position:center -80px;}

.sch-order .order-submit { padding:20px 0; border-top:1px dashed #ddd; text-align:center;}

/** login & register **/
.reg-agreement { margin:10px 0 0 130px; padding:14px; display:none; width:640px; height:200px; overflow-x:hidden; overflow-y:scroll; border:1px solid #ccc; background:#fff;}

.feedback { position:relative; margin:0 auto; padding:50px 0 100px 140px; width:500px; min-height:150px;}
.feedback i { position:absolute; top:45px; left:0; display:block; width:120px; height:120px; background:url(../images/ico_feedback.png) no-repeat 0 0; text-indent:-9999em;}
.feedback .tit { margin-bottom:10px; color:#d6083b; font:300 24px/1.5 "\5FAE\8F6F\96C5\9ED1", "\9ED1\4F53";}
.feedback .info li { margin-bottom:10px; font-size:14px; color:#666;}
.feedback .info li a { color:#08c;}
.feedback .ico-success { background-position:0 0;}
.feedback .ico-error { background-position:0 -120px;}

.log-page { position:relative; margin:0 auto; width:960px;}
.log-page .log-bg { display:inline-block; width:450px; height:400px; background:url(../images/bg_log.jpg) no-repeat 0 0;}
.log-box-out { position:absolute; top:0; right:50px; background:#fff; width:380px; height:380px; opacity:.3; filter:Alpha(Opacity=30); border-radius:8px;}
.log-box { position:absolute; top:10px; right:60px; width:360px; height:360px; background:#fff; border-radius:5px;}
.log-box a { color:#08c;}
.log-box a:hover { color:#d6083b; text-decoration:underline;}
.log-box .hd { padding:19px; border-bottom:1px solid #ddd;}
.log-box .hd h1 { padding-left:10px; height:20px; border-left:4px solid #d6083b; font:300 20px/20px "\5FAE\8F6F\96C5\9ED1", "\9ED1\4F53";}
.log-box .bd { padding:5px 19px;}
.log-form { padding:15px 10px 0;}
.log-form li { margin-bottom:15px; padding-left:90px; overflow:hidden; zoom:1;}
.log-form .lab { float:left; margin-left:-90px; display:inline-block; width:80px; font-size:13px; text-align:right; line-height:30px; vertical-align:middle;}
.log-form .txt,
.log-form .txts { margin-right:10px; padding:5px; width:180px; height:18px; border:1px solid #ccc; border-color:#999 #ccc #ccc #999; background:#fff url(../images/sprite_main.png) no-repeat -120px -370px; font-size:13px; line-height:18px; vertical-align:middle; border-radius:2px;}
.log-form .txts { width:60px;}
.log-form img { margin-right:5px; width:70px; height:30px; vertical-align:middle;}
.log-form .che { margin-top:-2px; margin-right:5px; vertical-align:middle;}
.log-form .btn-login { margin-right:10px; width:90px; height:37px; border:0 none; background:url(../images/btn_to.png) no-repeat 0 -120px; vertical-align:middle; cursor:pointer;}
.log-ft { margin:0 10px; padding:15px 0; border-top:1px dashed #ddd; text-align:center;}

/* --------------------
		module
-------------------- */

/** formlist **/
.input-hover { border-color:#8DB2FC !important;}
.formlist li { padding:10px 0 10px 160px; overflow:hidden; zoom:1; border-bottom:1px dotted #eee; line-height:28px; font-size:14px;}
.formlist li.proConWrap{padding:10px 0 10px 10px; display:none;}
.formlist li.proConWrap .proCon h4{margin-bottom: 10px;height: 30px;font: 18px/30px '\5FAE\8F6F\96C5\9ED1', '\9ED1\4F53'; font-weight:normal;}
.formlist li.proConWrap .proCon h4 span{font-size:12px;    color: #d6083b; margin-left:20px;}
.formlist li.proConWrap .proTxt label{width:32%; display:inline-block; padding:10px 0;}
.formlist li .radTxt{ padding:0 50px 0 5px;}
.formlist li.half { float:left; width:330px; clear:none;}
.formlist li .hint { color:#999;}
.formlist li a { color:#08c;}
.formlist li a.refresh { margin-left:10px;}
.formlist li em { margin-left:5px; display:inline-block; color:#999;}
.formlist .lab { float:left; margin-left:-160px; display:inline-block; width:150px; height:28px; font-size:14px; text-align:right; line-height:28px;}
.formlist .lab em { margin-right:3px; color:#f00;}
.formlist .con { float:left; display:inline-block; width:100%;}
.formlist .txt,
.formlist .txts,
.formlist .txtl { padding:4px; width:180px; height:18px; border:1px solid #ddd; border-color:#aaa #ddd #ddd #aaa; line-height:18px;  vertical-align:middle; border-radius:2px;}
.formlist .txts { width:70px;}
.formlist .txtl { width:300px;}
.formlist .txta { padding:4px; width:400px; height:100px; border:1px solid #ddd; border-color: #aaa #ddd #ddd #aaa; line-height:18px; border-radius:2px;}
.formlist .date { background:#fff url(../images/icon-calendar.png) right 3px no-repeat; cursor:pointer; }
.formlist .sel,.formlist .sels { padding:1px; height:28px; border:1px solid #ccc; border-color:#aaa #ddd #ddd #aaa; vertical-align:middle; border-radius:2px;}
.formlist .sels{width:300px}
.formlist .labf { margin-right:20px; vertical-align:middle;}
.formlist .rad,
.formlist .che { margin-right:5px; position:relative; top:-2px; cursor:pointer; vertical-align:middle;}
.formlist .fil { width:300px; height:28px; line-height:28px; vertical-align:top; border-radius:2px;}
.formlist a.btn-sms { margin-left:10px; padding:0 10px; display:inline-block; height:26px; border:1px solid #C4DBE3; background:#f2f5f5; color:#08c; font-size:12px; line-height:26px; cursor:pointer; vertical-align:middle; border-radius:2px;}
.formlist a.btn-sms:hover { border-color:#08c; background:#4ac; color:#fff; text-decoration:none;}
.formlist input.btn-sms { margin-left:10px; padding:0 10px; height:26px; border:1px solid #C4DBE3; background:#f2f5f5; color:#08c; font-size:12px; cursor:pointer; vertical-align:middle; border-radius:2px; overflow:visible;}

.btn-cancel,
.btn-submit { margin-right:10px; padding:0 25px; height:32px; border:1px solid #06c; background:#08c; color:#fff; font-size:13px; font-weight:700; vertical-align:middle; cursor:pointer; border-radius:2px;}
.btn-cancel { border:1px solid #aaa; background:#e5e5e5; color:#404040; font-weight:normal;}
a.btn-cancel,
a.btn-cancel:hover { display:inline-block; height:30px; color:#404040; line-height:30px; vertical-align:middle; text-decoration:none; border-radius:2px;}
.formlist li a.btn-cancel{border-color: #2094ce;}
.formlist li a.btn-cancel:hover{color:#00a3f4}
/** paging **/
.paging { padding:20px 0; overflow:hidden; zoom:1;}
.paging .paging-in,
.paging .num { float:right;}
.paging a,
.paging span { float:left; margin-left:4px; padding:0 8px; display:inline-block; height:22px; border:1px solid #828a8f; background:#fff; color:#404040; line-height:22px; border-radius:2px;}
.paging a:hover { border-bottom-color:#d6083b; color:#d6083b; text-decoration:none;}
.paging span { border-color:#fff; background:#fff;}
.paging .cur { border-color:#d6083b; background:#be0f34; color:#fff;}
.paging .unuse { border-color:#ccc; background:#fff; color:#999;}

/** step **/
.step { padding-bottom:20px; width:100%; overflow:hidden; zoom:1;}
.step li { float:left; display:block;}
.step li span { padding-left:10px; display:block; background:url(../images/bg_step.png) no-repeat left 0;}
.step li em { padding-right:10px; display:block; height:30px; background:url(../images/bg_step.png) no-repeat right -30px; line-height:30px; color:#888; text-align:center; font-size:14px;}
.step .first { background-position:left -30px; }
.step .last em { background-position:right 0; }
.step li.curr span { background-position:left -60px; }
.step li.curr em { background-position:right -90px; color:#933; }
.step li.curr .first { position:relative; background-position:left -90px; }
.step li.curr .last em { background-position:right -60px; }
.step-two li { width:50%;}
.step-three li { width:33.3%; }
.step-four li { width:25%;}

/* --------------------
		js - module
-------------------- */

/** mod-formlist **/
.mod-formlist { margin-bottom:20px;}
.mod-formlist li { padding:12px 0 12px 120px; overflow:hidden; zoom:1; border-bottom:1px dotted #e5e5e5; line-height:26px;}
.mod-formlist li.half { float:left; width:265px;}
.mod-formlist .lab { float:left; margin-left:-120px; display:inline-block; width:110px; text-align:right;}
.mod-formlist .lab em { color:#d00;}
.mod-formlist .txts,
.mod-formlist .txtl,
.mod-formlist .txt { padding:3px 4px; width:160px; height:18px; border:1px solid #ddd; border-color:#aaa #ddd #ddd #aaa; line-height:18px; border-radius:2px;}
.mod-formlist .txts { width:80px;}
.mod-formlist .txtl { width:400px;}
.mod-formlist .txta { padding:3px 4px; width:400px; height:100px; border:1px solid #ddd; border-color: #aaa #ddd #ddd #aaa; line-height:18px; vertical-align:top; border-radius:2px;}
.mod-formlist .sel{ padding:1px; height:24px; border:1px solid #ccc; border-color:#aaa #ddd #ddd #aaa; vertical-align:middle; border-radius:2px;}
.mod-formlist .fil { width:300px; height:24px; font-size:12px; line-height:24px; vertical-align:top; cursor:pointer;}
.mod-formlist .filpic img { margin-bottom:10px; display:block; padding:6px; border:1px solid #ddd; background:#fff;}
.mod-formlist .labf { margin-right:20px;}
.mod-formlist .rad,
.mod-formlist .che { margin-right:5px; position:relative; top:-2px; vertical-align:middle;}
.mod-formlist .hint { margin-left:10px; color:#999;}
.mod-formlist a.btn-sms { margin-left:10px; padding:0 10px; display:inline-block; height:24px; border:1px solid #C4DBE3; background:#f2f5f5; color:#08c; line-height:24px; cursor:pointer; vertical-align:top; border-radius:2px;}
.mod-formlist a.btn-sms:hover { border-color:#08c; background:#4ac; color:#fff; text-decoration:none;}
.mod-formlist .btn-cancel,
.mod-formlist .btn-smt { margin-right:10px; padding:0 20px; height:28px; border:1px solid #06c; background:#08c; color:#fff; font-size:13px; font-weight:bold; vertical-align:middle; cursor:pointer; border-radius:2px;}
.mod-formlist .btn-cancel { border:1px solid #aaa; background:#e5e5e5; color:#404040; font-weight:normal;}
.mod-formlist a.btn-cancel,
.mod-formlist a.btn-cancel:hover { display:inline-block; height:26px; color:#404040; line-height:26px; vertical-align:middle; text-decoration:none; border-radius:2px;}


/** dialog **/
.ui-dialog { position:absolute; background:#fff; box-shadow:0 0 5px rgba(0,0,0,0.5);}
.ui-dialog-titlebar { position:relative; padding-left:10px; border-left:5px solid #d81400; background:#333; height:40px;}
.ui-dialog-title { color:#fff; font:16px/40px "\5FAE\8F6F\96C5\9ED1","\9ED1\4F53";} 
.ui-dialog-titlebar-close { position:absolute; top:0px; right:0; display:block; width:40px; height:40px; overflow:hidden; background:#444 url(../image/sprite_frame.png) no-repeat 0 -140px; color:#999; text-align:center; line-height:40px; cursor:pointer;}
.ui-dialog-titlebar-close:hover { background-color:#555; background-position:-40px -140px; color:#fff; text-decoration:none;}
.ui-draggable .ui-dialog-titlebar { cursor:move;}
.ui-dialog-buttonpane { border-top:1px dotted #ddd; background:#f2f2f2; text-align:right;}
.ui-dialog-buttonset { padding:10px 20px;}
.ui-dialog-buttonset .ui-button { width:90px; height:30px; border:0; background:#f80; color:#fff; font:14px/30px "\5FAE\8F6F\96C5\9ED1", Arial, "\5B8B\4F53"; line-height:30px; cursor:pointer;}
.ui-dialog-buttonset .ui-state-hover { background:#f60;}
.ui-widget-overlay { position:absolute; top:0; left:0; background:#333 url(../images/bg_mask.png) repeat left top; opacity:.5; filter:Alpha(Opacity=50);}

.sch-select li{width:50%; float:left; margin-top:20px;}
.sch-select li a{ display:block; margin-right:20px; border-width:3px; border-style:solid; text-align:center; border-radius:5px; font-family:microsoft Yahei;font-size:24px; line-height:42px; padding:20px 0;}
.sch-select li a:hover{text-decoration:none}
.sch-select li a strong{font-weight:normal; display:block}
.sch-select li a span{ display:inline-block; color:#fff; padding:0 15px; margin-top:5px;}
.sch-select li.orange a{border-color:#ebad32; background:#efefe7;}
.sch-select li.orange a:hover{background:#ede4c9}
.sch-select li.green a{border-color:#b8c841; background:#e8f0e8;}
.sch-select li.green a:hover{background:#e1eacc}
.sch-select li.purple a{border-color:#5d6e9c; background:#e0e8f1;}
.sch-select li.purple a:hover{background:#d5d9e5}
.sch-select li.yellow a{border-color:#009b8d; background:#d7edf0;}
.sch-select li.yellow a:hover{background:#bee5e2}
.sch-select li.red{width:100%}
.sch-select li.red a{border-color:#f3334f; background:#fde4e8;}
.sch-select li.red a:hover{background:#fec9d1}
.sch-select li.orange a span{background:#ebad32}
.sch-select li.green a span{background:#b8c841}
.sch-select li.purple a span{background:#5d6e9c}
.sch-select li.yellow a span{background:#009b8d}
.sch-select li.red a span{background:#f3334f}