@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:380px; 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 {     position: fixed;
    left: 0;
    bottom: 0;
    height: 39px;
    width: 100%;
    border-top: 1px solid #ddd;
    background: #eee;
    text-align: center;
    line-height: 40px;}

/** 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:#F7F7F7 url(../images/7457.jpg) no-repeat center 0;background-size: 100% 100%;height: calc(100vh - 140px); }
.school { padding:20px 20px 40px; width:920px; min-height:350px; _height:350px; background:#fff url(../images/bg_hq.png) no-repeat right bottom; border-radius:10px; box-shadow:0 3px 6px 0 rgba(0,0,0,0.2);}
.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:10px; line-height:25px; text-indent:2em;}
.sch-school { margin-bottom:15px; width:300px; overflow:hidden;}
.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:15px; left:695px; display:block; width:210px; height:50px; background:url(../images/btn_selfpay.png) no-repeat 0 0; text-indent:-9999em;}
.sch-selfpay a.btn-selfpay:hover { background-position:0 -55px;}
.sch-selfpay a.btn-cxpay { position:absolute; top:75px; left:695px; display:block; width:210px; height:50px; background:url(../images/btn_selfpay.png) no-repeat 0 -110px; text-indent:-9999em;}
.sch-selfpay a.btn-cxpay:hover { background-position:0 -165px;}
.sch-selfpay a.btn-wepay { position:absolute; top:135px; left:695px; display:block; width:210px; height:50px; background:url(../images/btn_selfpay.png) no-repeat 0 -220px; text-indent:-9999em;}
.sch-selfpay a.btn-wepay:hover { background-position:0 -275px;}

/** sub-search **/
.sub-search { position:relative; margin-bottom:20px; padding-right:70px; border-top:1px solid #999; border-bottom:1px solid #ddd; background:#eee;}
.sub-search .mod-search-ft { position:absolute; top:10px; right:10px;}
.sub-search .mod-search-btn { width:60px; height:24px; border:1px solid #069; background:#08c; color:#fff; font-size:12px; font-weight:bold; cursor:pointer; border-radius:2px;}
.sub-search ul { border-bottom:1px solid #fff;}
.sub-search ul li { float:left; margin-bottom:-1px; overflow:hidden; height:24px; padding:10px 0 10px 10px; border-bottom:1px solid #fff; line-height:24px;}
.sub-search .col1 { width:200px;}
.sub-search .col2 { width:410px;}
.sub-search .lab { display:inline-block; line-height:24px;}
.sub-search .col1 .lab,
.sub-search .col2 .lab { float:left; width:60px; text-align:right;}
.sub-search .txt { padding:2px 4px; width:120px; height:18px; border:1px solid #ccc; border-top-color:#999; line-height:18px; font-size:12px; vertical-align:top; border-radius:2px;}

/** 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; font:18px/30px '\5FAE\8F6F\96C5\9ED1', '\9ED1\4F53';}
.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 .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 input{ vertical-align:middle; margin-right:5px;}

.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;  }
.log-box-out { position:absolute; top:110px; right:20px; background:#fff; width:380px; height:340px; opacity:.3; filter:Alpha(Opacity=30); border-radius:8px;}
.log-box { position:absolute; top:120px; right:30px; width:360px; height:320px; 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;padding-left: 15px; text-align:left; 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:100px;}
.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 { float:right; margin-right: 15px;   width:272px; height:37px;line-height:37px; border:0 none;   vertical-align:middle; cursor:pointer;background-color: #d6083b;color: #fff;text-align: center;border-radius: 2px;}
.log-ft { margin:0 10px; padding:15px 0; border-top:1px dashed #ddd; text-align:center;}
.log-form li a:nth-child(1) { float:right; margin-right: 20px; }
/* --------------------
		module
-------------------- */

/** formlist **/
.input-hover { border-color:#8DB2FC !important;}
.formlist li { padding:10px 0 10px 130px; overflow:hidden; zoom:1; border-bottom:1px dotted #eee;}
.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:-130px; display:inline-block; width:120px; height:28px; font-size:13px; 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 { padding:1px; height:28px; border:1px solid #ccc; border-color:#aaa #ddd #ddd #aaa; vertical-align:middle; border-radius:2px;}
.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; pasch-orderdding: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-submit,
a.btn-cancel:hover { display:inline-block; height:30px; color:#404040; line-height:30px; vertical-align:middle; text-decoration:none; border-radius:2px;}
a.btn-submit,
a.btn-submit:hover { display:inline-block; height:30px; color:#fff; line-height:30px; vertical-align:middle; text-decoration:none; border-radius:2px;}

/** 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);}


/** school_build **/
.school_build { width:920px; min-height:350px; _height:350px; background:#fff url(../images/bg_hq.png) no-repeat right bottom; border-radius:10px; box-shadow:0 3px 6px 0 rgba(0,0,0,0.2);}
.school_build .tit{padding:10px 20px; border-bottom:1px solid #ebebeb;}
.school_build .con{padding:60px 20px 0; margin:0 auto; background:url(../images/build_bg.png) repeat-x;border-bottom-left-radius:10px;border-bottom-right-radius:10px;}
.build-img{ display:block; margin:0 auto;}

.login-bg {
    background: url(../images/big-bg.png) no-repeat;
    background-size: cover;
    width: 100%;
    height: 100vh;
    min-width: 1100px;
}

.zhaoshang-inside {
    width: 1100px;
    height: 600px;
    position: relative;
    top: 50%;
    left:50%;
    transform: translate(-50%,-50%);
    background: url(../images/in-bg.png) no-repeat;
    background-size: 100% 100%;
}

.zhaoshang-right {
    width: 400px;
    height: 100%;
    float: right;
    position: relative;
}

.right-form {
    width: 300px;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 30%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    z-index: 9999;
}

.zhaoshang-title {
    font-size: 36px;
    color:#333;
}

.right-form input{
  border:none;
  width: calc(100% - 50px);
  height: 40px;
  line-height: 40px;
  font-size: 14px;
}

.right-form .form-group {
    border-bottom: 1px solid #edeef3;
    padding: 10px 0;
    position: relative;
}

.right-form .form-group label img {
    width: 24px;
    height: 24px;
    vertical-align: middle;
}
.right-form .form-group label {
    width: 40px;
    text-align: center;
    box-sizing: border-box;
    margin-bottom: 0;
    display: inline-block;
}

.zhaoshang-btn {
    background: #E63636;
    color:#fff;
    text-align: center;
    height: 40px;
    line-height: 40px;
    border-radius: 30px;
    font-size: 14px;
    border: none;
    display: block;
    width: 100%;
    margin-top: 30px;
}

.change-code {
    position: absolute;
    right: 0;
    top:15px;
    width: 80px;
    height: 30px;
    display: block;
}
.change-code img {
    width: 100%;
    height: 100%;
}

.forget-password {
    display: inline-block;
    width: 100%;
    text-align: center;
    margin: 0 auto;
    color:#08c;
    margin-top: 30px;
}
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill{
     -webkit-box-shadow: 0 0 0px 1000px #fff inset;
 }