@charset "UTF-8";
::-webkit-scrollbar {
    width: 10px;
    height: 10px
}

::-webkit-scrollbar-button:vertical {
    display: none
}

::-webkit-scrollbar-track:vertical {
    background-color: black
}

::-webkit-scrollbar-track-piece {
    background: #FFF
}

::-webkit-scrollbar-thumb:vertical {
    background-color: rgba(0,0,0,0.5);
    border-radius: 3px
}

::-webkit-scrollbar-thumb:vertical:hover {
   background-color: rgba(0,0,0,0.7);
}

::-webkit-scrollbar-corner:vertical {
    background-color: #535353
}

::-webkit-scrollbar-resizer:vertical {
    background-color: #FF6E00
}





html,body,div,
form,object,iframe,p,table,tr,th,td,ul,li,dl,dt,dd,
h1,h2,h3,h4,h5,h6,
button,input,span,em,s,b,u,a,img,textarea{ margin:0; padding:0}
input,select,label,img,button,textarea{ vertical-align:middle;font-family:\5B8B\4F53, Arial, Helvetica, sans-serif; font-size:12px;outline: none;}
img{border:none}
s,u{text-decoration:none}
em,i{font-style:normal}
ul,li{ list-style:none}
table{ border-collapse:collapse;border-spacing:0}
.cle{zoom:1;}
.cle:after{ clear:both; overflow:hidden;zoom:1; height:0px; content: "."; display: block;}
.none{ display:none}
.block{ display:block}
/*html{ overflow-y:scroll; overflow-x:auto}*/
body{font-family:\5B8B\4F53, Arial, Helvetica, sans-serif;font-size:14px; background:#fff; color:#333; line-height:normal;padding-bottom:32px;min-height: 350px;}


a {color:#333; text-decoration:none;cursor: pointer}

.fn-left{float: left;}
.fn-right{float: right;}

input[type=checkbox],input[type=radio]{border:1px solid rgba(221, 221, 221,1);
-webkit-appearance: none;
display: inline-block;
width: 14px;
height: 14px; outline: none;vertical-align: middle; background: #fff; margin-top: 0px;}
input[type=radio]{ border-radius: 50%; position: relative; border:1px solid #1fb2f5; border/*\**/: none\9;}
input[type=radio]:after{ width: 4px; height: 4px; background:#1fb2f5; content: ""; position: absolute; left: 50%; top: 50%; margin: -2px 0 0 -2px; display: none;border-radius: 50%;}
input[type=checkbox]:checked{ background:url(../img/checked.png) no-repeat;border-color: #45a5fd !important;outline: none;}
input[type=radio]:checked{border-color: #1fb2f5;outline: none;}
input[type=radio]:checked:after{ display: block;}

/*custom*/
.fn-text-left{ text-align: left;}
.fn-text-right{ text-align: right;}
.fn-text-center{ text-align: center;}
.fn-font-16{ font-size: 16px}
.fn-font-12{ font-size: 12px}
.fn-font-14{ font-size: 14px;}
.fn-font-18{ font-size: 18px;}
.fn-font-20{ font-size: 20px;}
.fn-font-24{ font-size: 24px;}
.fn-font-30{ font-size: 30px;}
.fn-font-40{ font-size: 40px;}
.fn-text-weak{opacity: 0.6;filter:alpha(opacity=60);-moz-opacity:0.6;}
.fn-font-bold{ font-weight: bold;}
.fn-font-nobold{ font-weight: normal;}

.fa.fn-font-16{ font-size: 16px}
.fa.fn-font-12{ font-size: 12px}
.fa.fn-font-14{ font-size: 14px;}
.fa.fn-font-18{ font-size: 18px;}
.fa.fn-font-20{ font-size: 20px;}
.fa.fn-font-24{ font-size: 24px;}
.fa.fn-font-30{ font-size: 30px;}
.fa.fn-font-40{ font-size: 40px;}

.t-c{text-align: center;}
.t-l{text-align: left;}
.t-r{text-align: right;}

a.fn-color-gray,.fn-color-gray{ color: #999999}
.fn-color-6{ color: #666}
.fn-color-3{ color: #333;}
.fn-color-1{ color: #3c94ff}
.fn-color-orange{ color: #f78c68}
.fn-color-red{color: #ff0000;}
.fn-color-y{ color: #FBA652;}
.fn-color-green{ color: #4cc3a5;}
.fn-color-blue{color: #3781d8}
.fn-color-89a4{color: #8999a4;}


.bg-white{background-color: #fff;}
.bg-gray{background-color: #f7f7f7;}

/*padding*/
.pd5{padding: 5px;}
.pd10{padding: 10px}
.pd20{padding: 20px;}

.pd-l-5{padding-left: 5px}
.pd-r-5{padding-right: 5px}
.pd-t-5{padding-top: 5px}
.pd-b-5{padding-bottom: 5px}

.pd-l-10{padding-left: 10px}
.pd-r-10{padding-right: 10px}
.pd-t-10{padding-top: 10px}
.pd-b-10{padding-bottom: 10px}

.pd-l-20{padding-left: 20px}
.pd-r-20{padding-right: 20px}
.pd-t-20{padding-top: 20px}
.pd-b-20{padding-bottom: 20px}

.pd-l-30{padding-left: 30px}

/*margin*/
.mg5{margin: 5px;}
.mg10{margin: 10px}
.mg-center{margin: 0 auto;}

.mg-l-5{margin-left: 5px}
.mg-r-5{margin-right: 5px}
.mg-t-5{margin-top: 5px}
.mg-b-5{margin-bottom: 5px}

.mg-l-10{margin-left: 10px}
.mg-r-10{margin-right: 10px}
.mg-t-10{margin-top: 10px}
.mg-b-10{margin-bottom: 10px}

.mg-l-20{margin-left: 20px}
.mg-r-20{margin-right: 20px}
.mg-t-20{margin-top: 20px}
.mg-b-20{margin-bottom: 20px}

.split{height:10px;width:100%; display:block;}


/*button styles*/
.hs-ui-btn { height: 32px; border-width: 1px; border-style: solid; cursor: pointer; border-radius: 2px; padding: 0 20px; font-size: 14px; overflow: visible; text-decoration: none; display: inline-block; vertical-align: middle; }

.hs-ui-btn[disabled] { background: #f1f1f1 !important; border-color: #f1f1f1 !important; color: #999 !important; cursor: not-allowed; }

button.hs-ui-btn { height: 32px; }

button.hs-ui-btn.disabled { background: #c0cad2; border-color: #c0cad2; cursor: default; }

.hs-ui-btn:active { box-shadow: 0 0 1px rgba(0, 0, 0, 0.2) inset; }

a.hs-ui-btn { line-height: 30px; height: 30px; }

.hs-ui-btn:hover { text-decoration: none; }

.hs-ui-btn-small { height: 26px; padding: 0 10px; font-size: 12px; }

button.hs-ui-btn-small { height: 26px; }

a.hs-ui-btn-small { line-height: 24px; height: 24px; }

.hs-ui-btn-long { padding: 0 30px; }

.hs-border-btn { border: 1px solid #afb5c4; color: #2880eb; background: transparent; border-radius: 3px; }

.hs-border-btn:hover { background: #f1f1f1; color: #666; }

.hs-border-btn.blue { border-color: #5093e1; color: #5093e1; height: 25px; }

.hs-gray-btn { background: #8e979e; border-color: #8e979e; color: #fff; }

.hs-default-btn { background: #fff; border-color: #ccc; color: #666; }

.hs-default-btn:hover { color: #238de7; border-color: #49a6fc; }

.hs-default-btn:active { color: #238de7; border-color: #238de7; }

.hs-blue-btn { background: #0099fa; border-color: #5b9be7; color: #fff; }

.hs-blue-btn:hover { background: #66b2fe; }

.hs-blue-btn:active { background: #3a86e4; }

.hs-red-btn { background: #ff5a51; border-color: #fd3118; color: #fff; }

.hs-red-btn:hover { background: #ff7e79; }

.hs-red-btn:active { background: #ff4b3f; }

.hs-green-btn { background: #4cc3a5; border-color: #4cc3a5; color: #fff; }

.hs-green-btn:hover { background: #30AB8C; border-color: #30AB8C; }

.hs-green-btn:active { background: #30AB8C; border-color: #30AB8C; }

.hs-orange-btn { background: #f78c68; border-color: #f78c68; color: #fff; }

.hs-orange-btn:hover { background: #F37044; border-color: #F37044; }

.hs-orange-btn:active { background: #F37044; border-color: #F37044; }

.hs-border-blue-btn { background: #fff; border: 1px solid #0099fa; color: #0099fa; }

.hs-border-blue-btn:hover { background: #0099fa; color: #fff; }

.hs-border-blue-btn:active { background: #0099fa; }

.hs-not-available-btn { background: #fff; border-color: #cecece; color: #cecece; }

.hs-not-available-btn:hover { color: #cecece; border-color: #cecece; }

.hs-not-available-btn:active { border-color: #cecece; color: #cecece; }

select{min-width: 174px;
    border: 1px solid #c6ced4;
    background: #fff;
    height: 28px;
    line-height: 28px;}

label>input[type=radio]{ position: relative; top: -2px;margin-right: 5px;}

input[type=text],input[type=date]{border: 1px solid #c6ced4;
    background: #fff;
    vertical-align: middle;
    -webkit-transition: border-color .3s;
    -o-transition: border-color .3s;
    transition: border-color .3s;
    font-size: 12px;}
input[type=text]:focus{border-color: #218ef3}

.c-progress-bar {
    background: #e6e6e6;
    overflow: hidden;
    border-radius: 100px;
    display: inline-block;
    width: 123px;
    height: 12px;
    margin-left: 5px;

}
.c-progress-bar i{display:inline-block; vertical-align: top; background:#218ef3;height: 12px; width: 0px; overflow: hidden;-webkit-animation:mymove .5s forwards; -webkit-transform-origin: 0px 0px;-moz-transform-origin: 0px 0px;
-ms-transform-origin: 0px 0px;
-o-transform-origin: 0px 0px;
transform-origin: 0px 0px; border-radius:100px 0  0 100px;}


.flow-list{ background:#f8f8f8;min-height: 200px;  border-radius: 2px; }
.flow-list>li{ float: left; width: 33.33%;padding-top: 35px;color: #999999;position: relative;}
 .num{background: url(icons.png) no-repeat; width: 32px; height: 32px; margin: 0 auto; display: block; line-height: 0px; font-size: 0px;}
 .num2{background-position: -144px 0px}
 .num3{background-position: -231px 0px}
.flow-title{font-size: 16px; text-align: center; display: block;padding: 22px 0 16px 0}

.detail-text{padding-bottom: 10px;text-align: center;}
.pre-time{margin-left: 50px;}

#flow-area{    max-width: 820px; margin: 0 auto;margin-top: 20px;}


.flow-list>li.running {color: #218ef3}
.flow-list>li.ok{color: #25ae60}
.flow-list>li.running .detail-text{text-align: left;margin-left: 50px; }

.flow-list>li.running  .num{background-position-y:-37px;}

.points{ position: absolute; right: -116px; top:48px;}
.points i{background: url(icons.png) no-repeat 0 -159px; width: 16px; float: left; height: 6px;}

.flow-list>li.running .points i.running{background-position: 0px -184px;}
.flow-list>li.ok .points i{background-position: 0px -212px;}

.flow-list>li.ok .num{background-position:0 -101px;}

.area{/*border-bottom: 1px solid #ddd;*/padding: 20px 0;}
.area .label-item{display: inline-block; width: 80px; text-align: left;padding-left: 10px;}

.area li{margin-bottom: 10px; float: left}

.actions{/*position: absolute; left: 0px; top: 0px;bottom: 0px; border-right: 1px solid #ddd; *//*padding-right: 10px;padding-left: 10px;*/    max-width: 820px;
    margin: 0 auto;}
.index{max-width: 820px;margin: 0 auto; margin-top: 20px;}
.mobileheader{background: #218ef3;color: #fff; height: 45px; line-height: 45px; padding:0 15px;font-size: 16px; position: fixed; top: 0px; left: 0px; right: 0px;text-align: center;z-index: 999}

.add-btn{position: fixed;color: #fff; font-size: 14px;height: 30px;line-height: 30px;padding: 0 10px;bottom: 5px;right: 3px;background: #0A6ECA;z-index: 999;}
.caidan{position: absolute;display: none;right:0;bottom: 30px;width: 105px;background:#218EF3;}
.caidan li{line-height: 32px;border-bottom: 1px dashed #ccc;}
.caidan li a{color: #fff;padding-left: 10px;display: block}
.back-btn{float: left;color: #fff; font-size: 14px;display: inline-block;padding-right:10px;}
.aboutuscon{padding:10px;line-height: 25px;}
.aboutuscon p{margin-bottom: 10px;}
.aboutuscon .cons li{height: 40px;border-bottom: 1px solid #E6E4E4;position: relative;padding:10px;line-height: 20px;font-size: 14px;}

.aboutuscon .cons li a{display: block;background: none;color: #333;padding: 0;height: 100%;}
.aboutuscon .cons li span.brown{position: absolute;right: 10px;bottom: 0;line-height:30px;}
.aboutuscon .cons li a img{width: 18px!important;}
.aboutuscon p.page{ border-top: 1px solid #ccc;padding-right: 10px;}

.aboutuscon h2.catTitle{font-size: 14px;border-bottom: 1px solid #ccc;padding:5px 10px;margin: 10px 0;}
.aboutuscon h2.catTitle a{float: right;font-size: 12px;font-weight: normal}

.dicTitle li{width: 20px;text-align:center;float: left;display: inline-block;padding:3px 6px;margin-right: 5px;border: 1px solid #ccc;background: #f0f7fe;font-weight: bold;font-size: 16px;margin-bottom: 5px;}
.dicTitle li.ton{color: #fff;background: #f27135}
.dicContent{display: none;padding: 20px 0;}
.dicContent strong{color: #2e5096;}

.zhengwen{word-wrap:break-word}

.faqlist{}
.faqlist li{border-bottom:1px dashed #ccc;padding:10px;}
.faqlist .faqTitle{display: block;color: #2e5096;}
.faqlist .faqCons{display: none;line-height:20px;font-size: 12px!important;color: #666!important;padding: 10px;background: #F5F5F5;}
.zhengwen img,.zhengwen table,.aboutuscon img,.aboutuscon table,.faqlist .faqCons img,.faqlist .faqCons table{width: 100%!important;}

.titlelist{width: 100%;}
.titlelist li{margin-bottom: 5px;font-size: 16px;}
.titlelist li a{display: block;padding:10px;background: #195499;color: #fff;line-height: 20px;}

@-webkit-keyframes mymove 
{
from   {-webkit-transform: scale(0.0001,1); }
to{-webkit-transform:scale(1,1);    }
}

@-webkit-keyframes scale{
    from   {-webkit-transform: scale(1.5,1.5) rotate(30deg); }
    to {-webkit-transform:scale(1,1) rotate(30deg);}
}

#page{ padding-top: 10px; text-align: right; }
#flow-name{color: #2A7EDA}
.short-url{display: inline-block;max-width: 245px; word-break: break-all;color: #25ae60}
.c-time{margin-left: 5px;}
.c-url{/*text-align: left;margin-left: 52px;*/}

.logined .list li:hover .none{display: inline;color: #999;margin-left: 10px}

.flow-list>li.ok .not-join{display: none}
.flow-list>li.running .not-join{display: none}
#out{float: right;}
#out i{margin-right: 10px;font-size: 14px;margin-left: 5px;}

input[name=url]{width: 435px;}


@media screen and (max-width: 768px) and (min-width: 320px){
  .index{margin-top:0}
  .list{padding: 10px;}
  .flow-list>li{float: none;width: auto;padding-top: 10px;}
  .points {display: none}
  .flow-area-name{padding: 0 10px}
  input[name=url]{ width: 167px }
}