@charset "utf-8";
/* CSS Document by JOHN WONG */

html, body{
    font-family: Microsoft yahei;
    font-size: 12px;
    color: #666;
}
input,textarea,select,button{
    font-family: Microsoft yahei;
}


.img_wrap{
    display: block;
}
.img_wrap img{
    display: block;
    width:100%;
}

.w{
    width:1200px;
    clear:both;
    margin: 0 auto;
    position:relative;
}
.half_line{
    box-sizing: border-box;
    width:49.9%;
}

.topbar{
    position: fixed;
    left:0;
    top:0;
    right:0;
    width:100%;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: #333;
    color: #ddd;
    z-index: 200;
}
.topbar a{
    display: inline-block;
    margin: 0 5px;
    color: #ddd;
}
.topbar a:hover{
    color: #fff;
}

.fl{ float:left;}
.fr{ float:right;}
.ta_l{ text-align:left; }
.ta_c{ text-align:center; }
.ta_r{ text-align:right; }

.mt_5{ margin-top: 5px;}
.mt_10{ margin-top: 10px;}
.mt_20{ margin-top: 20px;}
.mt_30{ margin-top: 30px;}
.mt_40{ margin-top: 50px;}
.mt_50{ margin-top: 50px;}

.mr_5{ margin-right: 5px; }
.mr_10{ margin-right: 10px; }

.ml_10{ margin-left: 10px; }


.mb_5{ margin-bottom: 5px;}
.mb_10{ margin-bottom: 10px;}
.mb_15{ margin-bottom: 15px;}
.mb_20{ margin-bottom: 20px;}
.mb_30{ margin-bottom: 30px;}
.mb_40{ margin-bottom: 50px;}
.mb_50{ margin-bottom: 50px;}
.mb_100{ margin-bottom: 100px;}


.pt_3{ padding-top: 3px;}
.pt_5{ padding-top: 5px;}
.pt_10{ padding-top: 10px;}
.pt_20{ padding-top: 20px;}
.pt_30{ padding-top: 30px;}
.pt_40{ padding-top: 40px;}
.pt_50{ padding-top: 50px;}
.pt_100{ padding-top: 100px;}


.pl_5{ padding-left: 5px;}
.pl_10{ padding-left: 10px;}
.pl_20{ padding-left: 20px;}
.pl_30{ padding-left: 30px;}
.pl_40{ padding-left: 40px;}
.pl_50{ padding-left: 50px;}

.pr_5{ padding-right: 5px;}
.pr_10{ padding-right: 10px;}
.pr_20{ padding-right: 20px;}
.pr_30{ padding-right: 30px;}
.pr_40{ padding-right: 40px;}
.pr_50{ padding-right: 50px;}


.f_scarlet{ color: #f40967;}
.f_e5e5e5{ color: #e5e5e5;}
.f_blue, .f_blue:hover{ color: #296da1;}
.f_666, .f_666:hover{ color: #666;}
.f_999, .f_999:hover{ color: #999;}
.f_green, .f_green:hover{ color: #4ac570;}
.f_orange, .f_orange:hover{ color: #ff9829;}
.f_red, .f_red:hover{ color: #dc0505;}

.f_12{ font-size: 12px;}




.btn_com{
	display:inline-block;
    height: 34px;
	padding:0 25px;
    border-radius:5px;
    line-height: 34px;
    box-sizing:border-box;
    text-align: center;
    border:0;
    color: #fff;
    background: #24aa98;
    font-size: 14px;
    cursor: pointer;
}
a.btn_com{
    color: #fff;
}
.btn_com:active{
    background:#2ec5b1;
}
.btn_com:hover{
    color: #fff;
}
.btn_com[disabled]{
    background: #98b2af;
    color: #9dcbc5;
}

.btn_com_line{
	width:100%;
}

.btn_c_orange{
    background-color: #e89505;
    color: #fff;
}
.btn_c_green{
    background-color: #31ac00;
    color: #fff;
}
.btn_c_blue{
    color: #fff;
    background-color: #0073de;
}
.btn_c_gray{
    background-color: #a7a7a7;
    color: #fff;
}

.btn_left{ float:left; width:50%; margin-right:5px;}



/* 公用display */
.ti2{ text-indent:2em;}
.underline{ text-decoration:underline;}
.ta_c{ text-align:center;}
.ta_r{ text-align:right;}
.ta_l{ text-align:left;}

.fl{ float:left;}
.fr{ float:right;}

.mt_5{margin-top:5px;}
.mt_10{margin-top:10px;}
.mt_20{margin-top:20px;}
.mt_30{margin-top:30px;}
.mt_40{margin-top:40px;}
.mt_50{margin-top:50px;}

.ml_5{margin-left:5px;}
.ml_10{margin-left:10px;}
.ml_20{margin-left:20px;}
.ml_25{margin-left:25px;}
.ml_30{margin-left:30px;}
.ml_40{margin-left:40px;}
.ml_50{margin-left:50px;}

.mr_5{ margin-right:5px;}
.mr_10{ margin-right:10px;}
.mr_20{ margin-right:20px;}
.mr_25{ margin-right:25px;}
.mr_30{ margin-right:30px;}
.mr_40{ margin-right:40px;}
.mr_50{ margin-right:50px;}
.mr_80{ margin-right:80px;}
.mr_100{ margin-right:100px;}

.mb_5{margin-bottom:5px;}
.mb_10{margin-bottom:10px;}
.mb_15{margin-bottom:15px;}
.mb_20{margin-bottom:20px;}
.mb_30{margin-bottom:30px;}
.mb_40{margin-bottom:40px;}
.mb_50{margin-bottom:50px;}
.mb_100{margin-bottom:100px;}

.pt_5{padding-top:5px;}
.pt_10{padding-top:10px;}
.pt_20{padding-top:20px;}
.pt_30{padding-top:30px;}
.pt_50{padding-top:50px;}
.pt_80{padding-top:80px;}
.pt_100{padding-top:100px;}

.pl_5{ padding-left:5px;}
.pl_10{ padding-left:10px;}
.pl_20{ padding-left:20px;}
.pl_30{ padding-left:30px;}
.pl_40{ padding-left:40px;}
.pl_50{ padding-left:50px;}

.pr_5{ padding-right:5px;}
.pr_10{ padding-right:10px;}
.pr_20{ padding-right:20px;}
.pr_30{ padding-right:30px;}
.pr_40{ padding-right:40px;}
.pr_30{ padding-right:50px;}


/* common font style */
.f_12{ font-size:12px;}
.f_14{ font-size:14px;}
.f_16{ font-size:16px;}
.f_18{ font-size:18px;}

.f_orange{ color:#ff3300;}
.f_yellow{ color:#ff6600;}
.f_lightblue{ color:#06c;}
.f_666666{ color:#666666;}
.f_888888{ color:#888888;}
.f_999999{ color:#999999;}
.f_gold{ color: #996600;}
.f_wine{ color: #cc3366;}
.f_red{ color: #e3021d;}
.f_grayblue, a.f_grayblue{color:#3377aa;}
.f_grayblue:hover, a.f_grayblue:hover{color:#2e90d9;}
.f_blue, a.f_blue{color:#337dc2;}
.f_lightred{ color: #f66;}

.f_bold{ font-weight:bold;}
.f_arial{ font-family:Arial, Helvetica, sans-serif;}
a.a_noline:hover{text-decoration: none;}


/*公用按钮*/

.btn_disable{ cursor:default; color:#999999;}



/* bubble popup*/
.jw_bubble_wrap{
    display: none;
    position: fixed;
    left:50%;
    top:50%;
    margin-left: -150px;
    margin-top: -50px;
    width:300px;
}
.jw_bubble{
    position: relative;
    padding: 20px;
    display: block;
    border:1px solid #aaa;
    border:1px solid rgba(0,0,0,.1);
    border-radius:5px;
    overflow: hidden;
    margin-bottom: 10px;
    background:#fff;
    background: rgba(255,255,255,.8);
}
.jw_bubble .txt{
    display: block;
    width:100%;
    line-height: 22px;
}
.jw_bubble .txt_r{
    padding-left: 25px;
    line-height: 22px;
}
.jw_bubble .ico_bubble_alert,
.jw_bubble .ico_bubble_right,
.jw_bubble .ico_bubble_wrong{
    position: absolute;
    left:20px;
    top:21px;
    width:20px;
    height: 20px;
    overflow: hidden;
    text-indent: -999px;
    background: url(../images/ico_bubble.png) no-repeat;
}
.jw_bubble .ico_bubble_right{
    background-position: 0 0;
}
.jw_bubble .ico_bubble_alert{
    background-position: -25px 0;
}
.jw_bubble .ico_bubble_wrong{
    background-position: -50px 0;
}