* { margin:0; padding:0; }
body { background-color:#f5f5f5; }

.framepage { box-sizing:border-box; border:0px solid #390; }
.framepage header { position:relative; background:#393D49; padding:20px; }
.framepage header h1 { font:28px/45px "微软雅黑"; color:#fff; margin:0; }
.framepage header a { position:absolute; right:25px; top:25px; padding:0 20px; font:15px/35px "微软雅黑"; color:#94979e; background:#393D49; border:1px solid #94979e; transition:all 0.3s ease 0s; border-radius:20px; }
.framepage header a:hover { color:#c4c7d2; border:1px solid #c4c7d2; }

.framepage .content { padding:20px; min-height: calc(100vh - 220px); }
.framepage .title { font:20px/35px "微软雅黑"; margin:20px; padding:10px; background:#eee; }

.framepage .section1 { position:relative; background:#fff; margin:20px; padding:12px 10px; font-size:0; border:1px solid #e9e9e9; border-radius:5px; }
.framepage .section1 h3 { font:16px/35px "微软雅黑"; color:#888; margin:0; padding:0 5px 5px; }
.framepage .section1 h3 span { color:#bbb; }
.framepage .section1 li { position:relative; display:inline-block; width:120px; margin:5px; box-sizing:border-box; border:1px solid #eee; border-radius:5px; }
.framepage .section1 li b { position:absolute; right:-8px; top:-8px; z-index:5; display:block; width:28px; height:28px; padding:2px; background:#fff; border-radius:50%; cursor:pointer; box-sizing:content-box; }
.framepage .section1 li img { width:100%; border-radius:5px; opacity:0.9; }
.framepage .section1 .btn_add { cursor:pointer; }
.framepage .section1 .btn_add:active { border:1px solid #e5e5e5; }

.framepage .section2 { position:relative; background:#fff; margin:20px; padding:10px 15px 15px; border:1px solid #e9e9e9; border-radius:5px; }
.framepage .section2 h3 { font:16px/35px "微软雅黑"; color:#888; margin:0; padding:0 0 5px; }
.framepage .section2 img { width:200px; border:1px solid #eee; border-radius:3px; cursor:pointer; }
.framepage .section2 img:active { border:1px solid #e5e5e5; }

.framepage .section3 { position:relative; background:#fff; margin:20px; padding:10px 15px 15px; border:1px solid #e9e9e9; border-radius:5px; }
.framepage .section3 h3 { font:16px/35px "微软雅黑"; color:#888; margin:0; padding:0 0 5px; }
.framepage .section3 li { position:relative; margin:10px 0; padding-right: 40px; font:16px/1.5em "微软雅黑"; word-break: break-all; }
.framepage .section3 li b { position:absolute; right:0; top:2px; z-index:5; display:block; width:20px; height:20px; cursor:pointer; }
.framepage .section3 li img { width:100%; border-radius:5px; opacity:0.9; }
.framepage .section3 .btn_add { width:100px; margin: 10px 0 0; border:1px solid #eee; border-radius:3px; cursor:pointer; }
.framepage .section3 .btn_add:active { border:1px solid #e5e5e5; }

.framepage footer { padding:20px; text-align:center; background:#f5f5f5; }
.framepage footer .copyright { font:13px/15px "微软雅黑"; color:#818692; margin:5px 0; }
.framepage footer a { display:inline-block; font:13px/1em "微软雅黑"; color:#818692; transition:all 0.2s ease 0s; }
.framepage footer a:hover { color:#47C1F4; }


.btn { position:relative; display:block; font:15px/45px "微软雅黑"; color:#fff; text-align:center; background-color:#6EC174; border:none; border-radius:5px; cursor:pointer; overflow:hidden; }
.btn:after { position:absolute; left:0; top:0; width:200%; height:200%; box-sizing:border-box; content:""; -webkit-transform:scale(0.5); transform:scale(0.5); -webkit-transform-origin: 0 0; transform-origin: 0 0; }
.btn:active:after { background:rgba(0,0,0,0.1); }

.btn.red     { background-color:#ff7777; }
.btn.blue    { background-color:#5BC0DE; }
.btn.grey    { background-color:#dddddd; }
.btn.green   { background-color:#6EC174; }
.btn.yellow  { background-color:#E9CC7F; }
.btn.disable { background-color:#dddddd !important; color:#f5f5f5 !important; }
.btn.disable:after { display:none; }



.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}



.group { margin-bottom: 20px; }
.grid-box { min-height: 36px; line-height: 36px; background: #d3dce6; }
.grid-box > div { min-height2: 100%; padding: 10px; font: 14px/22px "微软雅黑"; }
.grid-box:nth-child(2n+1) { background: #d3dce6; }
.grid-box:nth-child(2n+2) { background: #e5e9f2; }
.grid-box:nth-child(2n+1) > div { background2: #C8D1DA; }
.grid-box:nth-child(2n+2) > div { background2: #D9DDE6; }

.ui_grids h2 { margin: 0px 0 20px; font: 18px/1em "微软雅黑"; }




.elm_layout .content { background: #fff; }