@charset "utf-8";
/* CSS Document */

/* reset */
@charset "utf-8";

* { margin: 0; padding: 0; }
body { -webkit-text-size-adjust: none; background: #f4f4f4; min-width: 320px; margin: 0; padding: 0; font-family: "microsoft yahei", Verdana, Arial, Helvetica, sans-serif; font-size: 1em; }
table { border-collapse: collapse; border-spacing: 0; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }
ul, ol, li { list-style: none; }
a { text-decoration: none; color: #303030; }
img a { border: 0; vertical-align: middle; }
.fl { float: left; }
.fr { float: right; }
.clear { clear: both; }
.clear:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { *zoom:1;
}
.tl { text-align: left; }
.tc { text-align: center; }
.tr { text-align: right; }
em, i { font-style: normal; }
img { border: none; }
input, img { vertical-align: middle; }
.none { display: none; }
.no-spacing { margin: 0; padding: 0; }
.margin-center { margin: 0 auto; text-align: center; }
header { display: block; z-index: 20; height: 44px; }
/* header */
header .oheader { width: 100%; background: rgba(247,247,247,.9); height: 44px; line-height: 44px; box-shadow: 0 1px 0 rgba(0,0,0,.2); z-index: 15; position: relative; }
header .oheader { position: fixed; top: 0; left: 0; z-index: 1001; }
header .oheader h1 { height: 44px; line-height: 44px; text-align: center; color: #5b5b5d; font-weight: bold; text-shadow: 0 1px 0 #fff; font-size: 18px; }
header .oheader .h_back_btn { position: absolute; left: 10px; top: 7px; }
header .oheader .h_back_btn a { display: block; background: url(../images/common/back_btn.png) no-repeat; background-size: 50px 30px; width: 50px; height: 30px; line-height: 30px; color: #333; font-size: 14px; text-indent: 20px;
    white-space:nowrap;}
header .oheader .h_cate_btn2 { position: absolute; left: 20px; top: 0; }
header .oheader .h_r_btn { position: absolute; right: 10px; top: 0; }
header .oheader .h_r_btn a { color: #333; font-size: 14px; }
/* footer */
footer { width: 320px; margin: 20px auto; }
footer .app_download { width: 320px; height: 62px; position: relative; background: #fff; border-top: 2px solid #dedede; font-size: 12px; }
footer .app_download a { width: 320px; height: 62px; display: block; }
footer .app_download h1 { position: absolute; bottom: 0px; left: 0px; }
footer .app_download h1 img { width: 46px; height: 57px; }
footer .app_download h2 { position: absolute; top: 13px; left: 70px; color: #313131; font-weight: bold; font-size: 15px; }
footer .app_download h3 { position: absolute; top: 30px; left: 70px; color: #313131; font-size: 15px; }
footer .app_download h4 { position: absolute; top: 17px; left: 215px; width: 82px; height: 26px; line-height: 25px; text-align: center; background: #434343; border-radius: 35px; -webkit-border-radius: 35px; box-shadow: 0 2px 0 #171515; color: #fff; }
footer .gotop { float: right; position: relative; margin-top: 5px; margin-right: 10px; }
footer .gotop a { display: block; background: url(../images/common/back2top.png) no-repeat; width: 45px; height: 45px; background-size: 45px 45px; }
footer nav { text-align: center; color: #909090; margin-top: 5px; font-size: 14px; }
footer nav a { color: #7e7e7e; font-size: 14px; }
footer nav a.on { color: #909090; }
footer nav span { margin: 0 6px; font-weight: normal; }
footer p { text-align: center; font-size: 12px; color: #7e7e7e; margin-top: 3px; }
/* paegside */
.panel { z-index: 1; }
.ui-panel.ui-panel-push { z-index: 200; }
.ui-panel-dismiss { position: absolute; z-index: 1000; height: 100%; top: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
.ui-panel-animate { -webkit-transition: -webkit-transform 350ms ease; }
.ui-panel.ui-panel-right { right: 0; }
.ui-panel { width: 83%; top: 0; padding-left: 0px; background: #f4f4f4; color: #ffffff; box-shadow: 3px 0 3px rgba(0,0,0,.3); }
.ui-panel { position: absolute; display: block; }
.panel_ui_cont { position: relative; }
.panel dl { text-indent: 9px; }
.panel dl dd { height: 42px; line-height: 42px; border-bottom: 1px solid #bfbfbf; }
.panel dl dd a { color: #333; display: block; height: 42px; line-height: 42px; font-size: 16px; position: relative; }
.panel dl dd a span { width: 9px; height: 16px; display: none; position: absolute; top: 11px; right: 9px; background: url(../images/common/sidepanel_arrow.png) no-repeat; background-size: 9px 16px; }
.panel dl dd a i { position: relative; top: -7px; margin-left: 5px; font-size: 12px; color: #e30e1f; }
.panel dl dd.sidebar_cart { position: relative; }
.panel dl dd.sidebar_cart b { position: absolute; top: 11px; left: 110px; display: block; font-size: 14px; padding: 0 6px; height: 20px; line-height: 20px; border-radius: 10px; background: #fe495a; color: #fff; text-align: center; text-indent: 0; font-weight: normal; }
.panel dl dd a img { position: relative; top: -2px; margin-right: 8px; }
.panel dl dd.dblue a { color: #008eef; font-weight: bold; }
.panel dl dd:last-child { border-bottom: none; padding-bottom: 10px; box-shadow: none; }
.panel dl dt { height: 30px; line-height: 30px; background: #c4c4c4; color: #fff; font-size: 14px; position: relative; margin-top: -1px; }
.panel dl dt span { position: absolute; right: 10px; font-size: 14px; }
.panel dl dt span a { color: #008eef; }
.panel .panel_top { position: absolute; top: -43px; left: 0; height: 42px; width: 100%; line-height: 42px; background: #f4f4f4; border-bottom: 1px solid #bfbfbf; text-indent: 9px; font-size: 16px; }
.panel .panel_top a { display: block; color: #333; height: 42px; line-height: 42px; position: relative; }
.panel .panel_top a span { width: 9px; height: 16px; display: none; position: absolute; top: 11px; right: 9px; background: url(../images/common/sidepanel_arrow.png) no-repeat; background-size: 9px 16px; }
.panel .panel_top a img { position: relative; top: -2px; margin-right: 8px; }
.panel .panel_cont { margin-top: 43px; margin-bottom: 52px; }
.panel .panel_bottom { position: absolute; bottom: -52px; background: #fff; height: 52px; width: 100%; box-shadow: 0px -1px 1px rgba(0,0,0,.2); }
.panel .panel_bottom_cont { height: 46px; line-height: 46px; width: 232px; margin: 0 auto; position: relative; }
.panel .panel_bottom_cont a { color: #626262; font-size: 14px; width: 114px; height: 34px; line-height: 34px; margin-top: 6px; display: inline-block; text-align: center; border: 1px solid #aaa; position: relative; background: #fff; font-weight: bold; }
.panel .panel_bottom_cont a.al { border-top-left-radius: 5px; border-bottom-left-radius: 5px; }
.panel .panel_bottom_cont a.ar { border-top-right-radius: 5px; border-bottom-right-radius: 5px; margin-left: -1px; }
.panel .panel_bottom_cont a.on { background: #b5b5b5; color: #fff; }
.panel .panel_bottom_cont a:after { content: " "; display: block; position: absolute; bottom: -2px; left: 0; height: 1px; width: 114px; border-bottom: 1px solid rgba(255,255,255,.1); }
.panel .panel_bottom_cont a.ar:after { border-bottom-left-radius: 5px; }
.panel .panel_bottom_cont a.al:after { border-bottom-right-radius: 5px; }
/* paegside new */
.panel_new { z-index: 1; }
.ui-panel.ui-panel-push { z-index: 200; }
.ui-panel-dismiss { position: absolute; z-index: 1000; height: 100%; top: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
.ui-panel-animate { -webkit-transition: -webkit-transform 350ms ease; }
.ui-panel.ui-panel-right { right: 0; }
.panel_new.ui-panel { width: 250px; top: 0; padding-left: 0px; background: #f4f4f4; color: #ffffff; box-shadow: 3px 0 3px rgba(0,0,0,.3); }
.panel_new.ui-panel { position: absolute; display: block; }
.panel_new .panel_ui_cont { position: relative; }
.panel_new .panel_cont .panel_cont_inner { padding-bottom: 40px; }
.panel_new .panel_list {}
.panel_new .panel_list ul li { float: left; margin-top: 10px; margin-left: 5px; font-size: 12px; text-align: center; width: 56px; height: 70px; }
.panel_new .panel_list ul li a { display: block; width: 56px; height: 70px; }
.panel_new .panel_list ul li .ft { display: block; width: 48px; height: 48px; margin: 0 auto; background: #eee; border: 1px solid #ded8d8; border-radius: 5px; }
.panel_new .panel_list ul li .ft img { margin-top: 4px; }
.panel_new .panel_list ul li .fb { margin-top: 3px; }
.panel_new .panel_list2 { margin-top: 10px; margin-bottom: 20px; font-size: 16px; text-indent: 10px; border-top: 1px solid #bfbfbf; }
.panel_new .panel_list2 ul:after { content:' '; display: block; height: 0; line-height: 0; clear: both; visibility: hidden; }
.panel_new .panel_list2 li { position: relative; float: left; width: 50%; height: 35px; line-height: 35px; border-bottom: 1px solid #bfbfbf; }
.panel_new .panel_list2 li:after { position: absolute; right: 0px; top: 0; content:' '; display: block; height: 36px; line-height: 36px; border-right: 1px solid #bfbfbf; z-index: 5; }
.panel_new .panel_list2 li a { height: 35px; display: block; text-align: center; }
.panel_new .panel_log { margin-top: 8px; height: 30px; line-height: 30px; font-size: 14px; background: #c4c4c4; }
.panel_new .panel_log h2 { float: left; margin-left: 10px; color: #fff; }
.panel_new .panel_log a { display: block; }
.panel_new .panel_log .fr { float: right; margin-right: 10px; color: #001eff; }
/* black_layer */
.black_layer { width: 100%; height: 100%; position: fixed; background: #000; opacity: 0.5; z-index: 200; display: none }
.white_layer { width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: #000; opacity: 0.4; z-index: 202; display: none }
/* main */
.main .cont { width: 100%; height: 100%; min-height: 480px; background: #f4f4f4; z-index: 201; position: relative;/* -webkit-box-shadow: -3px 0 3px rgba(0,0,0,.3); */ }
/* sidebar_btn */
.side_tgl_btn { position: fixed; bottom: 15px; left: 10px; z-index: 1000; }
.side_tgl_btn a { display: block; background: url(../images/common/side_state_btn.png) no-repeat; width: 47px; height: 47px; background-size: 47px 47px; opacity: .9; }
.side_tgl_btn a.on { background: url(../images/common/side_state_btn.png) no-repeat; background-size: 47px 47px; }
/* select_area */
.panel_area { position: fixed; top: 0; left: 0; width: 100%; z-index: 2203; display: none; }
#selectArea { height: 100%; background-color: #f4f4f4; }
#selectArea dl { }
#selectArea dd { height: 42px; line-height: 42px; background: #f4f4f4; color: #313131; text-indent: 10px; border-bottom: 1px solid #e5e5e5; }
#selectArea dd a { display: block; height: 42px; }
#selectArea dt { height: 26px; line-height: 26px; background: #c9c9c9; color: #fff; text-indent: 10px; }
@media screen and (min-width: 355px) {
    .panel_new.ui-panel { width: 280px; }
    .panel_new .panel_banner img { width: 280px!important; }
    .panel_new .panel_list ul li { margin-left: 11px; }
    footer { width: 360px; }
    footer .app_download { width: 360px; }
    footer .app_download a { width: 360px; }
    footer .app_download h1 { left: 0px; }
    footer .app_download h2 { left: 95px; }
    footer .app_download h3 { left: 95px; }
    footer .app_download h4 { left: 230px; }
}





/*lazyload*/
/*.lazyload,
.lazyloading {
    display:inline-block;
    background:url(http://cdnimg.ocj.com.cn/common/theme/v1/images/imglogo.png) 50% 50% no-repeat; background-size:auto 70px;
}
.lazyloaded {
    background:none;
}*/


/*底部广告模块*/
.hHtmlAdvertisement{ position:fixed; bottom:0px; width: 100%; display: none;
    height: auto; background-image: url("/common/mobile_phone/cssimage/indeximg/htmlguangao.png"); background-position: center top; background-size:auto 100%; z-index:999; }
.hHtmlAdvertisement img{width:100%; height:auto;}
.hclosetip{float: right; width: 13px; height: auto; line-height: normal; margin-top: 4px;}
.hcompappDonwbox{height: 87px; border-bottom: 1px dashed #727272; padding: 0 12px;
    width:calc(100% - 24px);
    width:-webkit-calc(100% - 24px);
    width:-moz-calc(100% - 24px);}
.hcompInfo{text-align: center; padding: 10px 0; color: #ffffff; font-size: 12px;}
.happdownLoad{position: absolute; width: 73px; top: 33px; right: 12px; height: auto;}
.happLogo{width: 57px; height: 57px; float: left; display: inline; margin-top: 19px;}
.happLogoIntro{float: left; display: inline; color: #ffffff; font-size: 15px; margin-left: 10px; line-height: 20px; margin-top: 28px;}
/*底部广告模块－－－end*/

/*新增分享功能*/
.oheader .OHeadShare { position: absolute; right: 10px; top: 10px; line-height: 0px; }
.oheader .OHeadShare img { width: 60px; }
.oheader .OHeadRule{ position: fixed; right: 0px; top: 20%; width: 25px; }
.oheader .OHeadRule img{ width: 25px; }

/*sj-20160527 新建、重置密码安全级样式*/
.tbl-txt{font-size:14px;}
.tbl-txt input{padding:0 5px; height:22px; line-height:22px; margin-bottom:6px;}
.pw-strength {clear: both;position: relative;top: 8px;width: 180px;}
.pw-bar{background: url(/common/images/img_pwd_1.png) no-repeat; position:relative; top:1px;height: 14px;overflow: hidden;width: 179px;}
.pw-bar-on{background:  url(/common/images/img_pwd_2.png) no-repeat; width:0px; height:14px;position: absolute;top: 1px;left: 2px;transition: width .5s ease-in;-moz-transition: width .5s ease-in;-webkit-transition: width .5s ease-in;-o-transition: width .5s ease-in;}
.pw-weak .pw-defule{ width:0px;}
.pw-weak .pw-bar-on {width: 60px;}
.pw-medium .pw-bar-on {width: 120px;}
.pw-strong .pw-bar-on {width: 179px;}
.pw-txt {padding-top: 2px;width: 180px;overflow: hidden;}
.pw-txt span {color: #707070;float: left;font-size: 12px;text-align: center;width: 58px;}

/*sj-20160722 新增头部信息栏样式（建设银行-蓝色）*/
/*sj-20160722 新增头部信息栏样式（建设银行-蓝色）*/
.headBlue .oheader{ background-color: #09b6f2; }
.headBlue .oheader h1{ color: #fff; text-shadow: none; }
.headBlue .oheader .hMore{ position: relative; display: inline-block; }
.headBlue .oheader .hMore i{ position: absolute; display: inline-block; top: 20px; right: -20px; width: 10px; height: 7px; background: url(/common/html5/images/user/order_more2.png) no-repeat; background-size: 10px 7px;  -webkit-transform: rotate(180deg); }
.headBlue .oheader .hOther{ position: relative; display: inline-block; }
.headBlue .oheader .hOther a{ position: absolute; width: auto; right: -40px; top: 0; font-size: 12px; line-height: 44px; color: #fff; }
.headBlue .oheader h1 a{ width: auto; margin-left: 10px; color: #fff; font-weight: normal; font-size: 12px; }
.headBlue .oheader .h_back_btn{ left: 13px; }
.headBlue .oheader .h_back_btn a{ color: #fff; background: url(/common/html5/images/common/back_btn2.png) no-repeat; background-size: 50px 30px; }