/*--- FreeUi Reset ---*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0; height: auto;}
p,a,div,li{white-space:normal;word-wrap:break-word;word-break:break-all; height: auto;}
a{text-decoration:none;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0);color:#2185D0;background-color : transparent;}
a[href="javascript:;"]{touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;-ms-touch-action:manipulation;-webkit-tap-highlight-color:rgba(0,0,0,0)}
img{outline:none;max-width:100%;border:none;-webkit-user-select:auto;-moz-user-select:auto;}
input,button,textarea,a{-webkit-appearance:none;font-family:"Microsoft YaHei",Tahoma,SimSun;-webkit-tap-highlight-color:rgba(0,0,0,0);outline:none}
input::-ms-clear{display:none}
input::-ms-reveal{display:none}
li,ul,ol{list-style:none}
circle{-webkit-transform:rotate(-90deg);-webkit-transform-origin:center;transform:rotate(-90deg);transform-origin:center}
html{position: relative;height:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;font-size:100px;-webkit-overflow-scrolling:touch;touch-action:manipulation;-ms-touch-action:manipulation;-webkit-tap-highlight-color:rgba(0,0,0,0);position:relative;background-color:#f3f5f9; overflow-y:scroll;}
body{font-family:"Microsoft YaHei",Tahoma,SimSun,sans-serif;position:relative;line-height:1;color:#666;font-size:14px;min-height:100%}
input{border:1px solid #d7d7d7;height:30px;line-height:30px \9;padding:0 5px;border-radius:3px;display:inline-block;vertical-align:middle;}
label{cursor:pointer;-webkit-user-select:none;-moz-user-select:none}
input[type="radio"],input[type="checkbox"]{display:inline-block;vertical-align:middle;border:none;margin-right:3px;cursor:pointer}
input[type="radio"]{-webkit-appearance:radio}
input[type="checkbox"]{-webkit-appearance:checkbox}
input:-webkit-autofill{-webkit-box-shadow:0 0 0px 1000px white inset}
textarea{resize:none;border:1px solid #d7d7d7;padding:5px;border-radius:3px;display:inline-block;vertical-align:middle;}
select{outline:none;height:32px;font-size:14px;font-family:"Microsoft YaHei",Tahoma,SimSun;border:1px solid #d7d7d7;border-radius:3px;display:inline-block;vertical-align:middle;padding:0 5px;}
input[type="radio"]:focus,input[type="checkbox"]:focus{box-shadow:none}
input::-webkit-search-cancel-button {display: none;}

/*--- 和谐 ---*/
#newBridge{display:none!important}
#mediaplayer_logo{display:none}
#mediaplayer_menu{display:none!important}

/*--- 原生加强 ---*/
::-webkit-input-placeholder { 
　　color:#999;
}
::-moz-placeholder { 
　　color:#999;
}
::-moz-placeholder { 
　　color:#999;
}
::-ms-input-placeholder { 
　　color:#999;
}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
　　color: #999;
}
input::-moz-placeholder, textarea::-moz-placeholder {
　　color:#999;
}
input::-moz-placeholder, textarea::-moz-placeholder {
　　color:#999;
}
input::-ms-input-placeholder, textarea::-ms-input-placeholder {
　　color:#999;
}
/*--- 布局 ---*/
.g-flex{
  display: -webkit-box;/* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox; /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex-wrap:wrap;
  justify-content:space-between;
  align-content:flex-start
}

.g-flex.s-row > *{
  display:block;
  text-align: center;
  -webkit-box-flex: 1;/* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 1;/* OLD - Firefox 19- */
  -webkit-flex: 1;/* Chrome */
  -ms-flex: 1; /* IE 10 */
  flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  width: auto;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: keep-all;
}
.g-flex.s-row{justify-content:space-around;-webkit-justify-content:space-around;}
.g-flex.s-row.s-left > *{ text-align:left;}


/*--- CSS方法 ---*/
.f-of_h{overflow:hidden}
.f-txtof{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;word-break:keep-all}
.f-txtof_2{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.f-txtof_3{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.f-txtof_4{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical}
.f-txt_c{text-align:center}
.f-txt_r{text-align:right}
.f-select{-webkit-user-select:auto}
.f-fl{float:left;*display:inline}
.f-fr{float:right;*display:inline}
.f-select{-webkit-user-select:auto}
.f-clear:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0}
.f-clear{*zoom:1}
.f-clear_l{clear:left}
.f-hide{display:none!important}
.f-show{display:block!important}
.f-blur{filter:blur(5px);-webkit-filter:blur(5px);-moz-filter:blur(5px);-o-filter:blur(5px);filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='5')}



/*--- 应用代码 ---*/
body{
    background-color: #d4d5e0;
  /*background-size: cover;*/
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    /*-webkit-transition: background-image 1s linear;*/
    background-image: url(../img/null.png);
  }

.g-layout{ max-width: 900px;  margin-left: auto; margin-right: auto; position: relative; }


#main{background-color:rgba(255,255,255,0.95); min-height: 400px; box-shadow: 0 4px 12px 0px rgba(0,0,0,0.15);}

.m-mxtCalc{ padding: 20px; }

.m-mxtCalc > .title{text-align: center;  font-size: 22px;color:#333; padding-top: 10px; margin-bottom: 20px;}

.m-mxtCalc > .mxt { padding: 20px 0; line-height: 1.6;}
.m-mxtCalc > .mxt span{ font-weight: bold;color:#E33636; }
.m-mxtCalc > .mxt > .bar{ background-color: #dadada; padding: 2px 10px; text-align: center;color:#333;font-size: 12px; margin-bottom: 10px;}
.m-lvList {margin-left: -10px;}
.m-lvList > li{ background-color: #fff; padding: 5px; padding-right: 10px; min-width: 60px; margin-bottom: 10px; margin-left: 10px; position: relative; box-shadow: 0 0 3px #94835a;  border-radius: 3px; line-height: 20px;}
.m-lvList > li em{ width:20px; height: 20px; background-color: #94835a; display: inline-block; text-align: center; font-size: 12px; color:#fff; border-radius: 20px; font-style: normal; margin-right: 10px;overflow: hidden;}

.m-mxtCalc > .ps{ padding: 10px 0; line-height: 1.6;}

.m-roleList { padding-top: 20px; min-height: 260px;}

.m-roleList > li > .index{ position: absolute; text-align: center;color:#ededed; 
right: 10px; bottom:5px; font-size: 30px;pointer-events: none;
}
.m-roleList > li { height: 117px; height: 90px; position: relative; box-shadow: 0 0 5px 0px rgba(0,0,0,0.15); background-color: #fff; margin-bottom: 20px;width: 250px; border-radius: 2px; padding: 10px; border-radius: 5px;}
.m-roleList > li > .icon{ cursor: pointer; background-color: #fff; float: left; height:60px; line-height: 60px; width: 60px; line-height: 60px; border-radius: 60px; text-align: center; border:2px solid #e7ce9c; margin-right: 10px;}
.m-roleList > li > .icon img{ vertical-align: middle; }
.m-roleList > li > .info { overflow: hidden;  }


.m-roleList > li > .info > .wrap{ display: block;vertical-align: middle; line-height: 1.4; width: 100%; }
.m-roleList > li > .info > .wrap > .name{ border-bottom: 2px solid #e7ce9c; color:#000; font-size: 16px; margin-bottom: 5px; color:#ddc593; padding: 4px; font-size: 16px;color:#000;}
.m-roleList > li > .info > .wrap > .name a{color:red;}
.m-roleList > li > .info > .wrap > div{ font-size: 12px;margin-bottom:4px;}
.m-roleList > li > .info > .wrap > div span{font-weight: bold;color:#E33636;}



.m-roleList::after{ content: ""; width:250px; height: 0;padding: 10px;}



i,.i-ico{ display:inline-block; vertical-align:middle; background:url(../img/dnf_ui.png) no-repeat;}


.u-btn{ display:inline-block; height:23px; line-height:23px; position:relative; background:url(../img/button/173.png) repeat-x; font-size:12px;color:#DDC593; text-align:center; font-family:SimSun; padding:0 28px;}
.u-btn > i.left,.u-btn > i.right{ width:28px; height:23px; position:absolute; top:0;}
.u-btn > i.left{ background:url(../img/button/172.png) no-repeat; left:0;}
.u-btn > i.right{background:url(../img/button/174.png) no-repeat; right:0;}

.u-btn:hover{ text-decoration:none; background:url(../img/button/176.png) repeat-x;color:#FFFFB8;}
.u-btn:hover > i.left{background:url(../img/button/175.png) no-repeat;}
.u-btn:hover  > i.right{background:url(../img/button/177.png) no-repeat;}

.u-btn:active{ text-decoration:none; background:url(../img/button/179.png) repeat-x;color:#FFFFB8;}
.u-btn:active > i.left{background:url(../img/button/178.png) no-repeat;}
.u-btn:active  > i.right{background:url(../img/button/180.png) no-repeat;}

.u-close{ display:block; position:absolute; width:10px; height:9px; background-position:-7px -21px; top:-13px;right:-3px;z-index:11;} 
.u-close:hover{ background-position:-7px -8px;}
.u-close:active{ background-position:-7px -35px;}


.u-btn2{ display:inline-block; width:56px; height:23px; line-height:23px; text-align:center; background-position:0 -116px; font-size:12px; color:#DDC593; text-shadow:1px 1px 1px #000; font-family:SimSun;}
.u-btn2:hover,.u-btn2:focus{ background-position:0 -142px; text-decoration:none;color:#FFFFB8; }
.u-btn2:active{ background-position:0 -168px;color:#FFFFB8;}

.u-btn3{ overflow:hidden; font-weight:normal; display:inline-block; width:77px; height:23px; line-height:23px; text-align:center; background-position:-75px -116px; font-size:12px; color:#DDC593; text-shadow:1px 1px 1px #000; font-family:SimSun; }
.u-btn3:hover , .u-btn3:focus { background-position:-75px  -142px; text-decoration:none;color:#FFFFB8; }
.u-btn3:active{ background-position:-75px  -168px;color:#FFFFB8;}

.u-text{ border:1px solid #94835a; border-radius:3px; height:21px; line-height:21px \9; font-size:12px; padding:0 10px; width:50px;}


.u-title{ text-align: center; font-size: 18px;color:#333; border-bottom: 1px dashed #ccc; padding-bottom: 5px; margin-bottom: 20px;}
.u-title2 { border-left:3px solid #276088; color:#333; margin-bottom: 20px; padding: 5px 10px;}