@font-face {
  font-family: 'bootstrap';/*声明字体名称，可自行设置，应用的时候对应即可*/
  src: url('bootstrap-themes.ttf?lep7lm') format('truetype'),
      url('bootstrap-themes.woff2?lep7lm') format('woff2');
  font-weight: normal;
  font-style: normal;
 }
.flex{display: flex; flex-direction: row;}
.flex-between{justify-content: space-between;}
.flex-center{justify-content: center;}
.container{width: 800px; background:white; margin: 0 auto;padding:0;border-radius:5px;}
  .navbar .container, footer .container, body > .container{
    background:none;
  }
.navbar>.container .navbar-brand{margin-left: 0}

.container:before{content: '';display: none;}
.navbar-right{margin-right:0!important;}

a{text-shadow: none;color:#111}
html{height:100%;}
body{font-size:14px;font-family:'微软雅黑';height:100%;color:black;}
input{outline:none} 
input.form-control,input.form-control[readonly]{
  outline:none;
  box-shadow:inset 2px 2px 3px #ccc;
  border-color:#999;
  background-color:#ddd;
  color:black;
  background-color:white;
}
input.form-control:focus{outline:none;box-shadow:none;border-color:#999;}
input:after{outline:none;}
input:before{outline:none;}
.bg-success{background-color:#111!important;}
.bg-danger{background-color:#111!important;}
.text-white{color:white;}
.text-danger{color:#f00;}
.text-warning{color:#f60;}

.navbar-toggle .icon-bar{background:#ccc;}
@media screen and (max-width: 500px) {
  .navbar-collapse{background:#111;}
}

body{
  background:#111;
}

.input-group-addon{background:white;}
.input-group .form-control, .input-group-addon, .input-group-btn{height:36px;}
.navbar{margin-bottom:0;height:80px;background:none;}
.nav > li > a{margin:0 6px;padding:5px;height:56px;line-height:56px;font-size:14px;font-weight:bold;color: #fff;text-shadow: none;text-decoration:none;}
  .nav > li > a:hover{background:none;color:#ff0;}
  .navtrans .nav > li > a{color:white;}
  .navtrans .nav > li > a:hover{color:#ccc;}
  .navtrans .mobile .nav > li > a{color:#000;}
  .navtrans .mobile .nav > li > a:hover{color:#333;}

.bd-navbar{background:#099;}
.navbar-brand{height:60px;width:150px;background:url(../images/logo.png) center center no-repeat;margin-top:5px;text-indent:1000px;overflow:hidden;background-size:150px 60px;letter-spacing:10000px;white-space:nowrap;}
.navbar-light .navbar-brand:hover{color:black;}
.navbar-light{
  background: rgba(250,250,250,1);
  border-bottom:1px solid #eee;
}
.navbar-nav a{
  text-shadow:1px 1px 0 rgba(255,255,255,0);
  color:#000;
}

.logo-icon1{display:block;width:32.5px;height:25px;background:url(../images/icon.png);background-size:cover;}
.logo-icon{display:block;width:160px;height:30px;background:url(../images/logo.png);background-size:cover;}
.btn-navbar li{line-height:2.4;}
.navbar-light .navbar-nav .nav-link{color:#000;
    padding-right: 1rem;
    padding-left: 1rem;
    font-size:16px;
    font-weight:bold;
}
.navbar-light .navbar-nav .nav-link span.fa{font-size:12px;margin-left:5px;}
.navbar .btn{font-size:14px;}
.navbar-light .navbar-nav .nav-link.active{color:#000;}
.navbar-light .navbar-nav .nav-link:visited{color:#000;}
.navbar-light .navbar-nav .nav-link:hover{color:#f30;}
.navbar-light .navbar-nav .nav-link:active{color:#000;}
  .navtrans .navbar-light{background:rgba(255,255,255,0);border-bottom:0;}
  .navtrans .navbar-light .navbar-nav .nav-link{color:white;}
  .navtrans .navbar-light .navbar-brand{color:white;}

.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.bg-white.navtrans .navbar-light .nav-link{
  color:#000;
}



.index-sec1{}
  .index-sec1 h1{padding-top:160px;color:white;}
.index-sec2{background:url(../images/bg2.jpg) center no-repeat;background-size:cover;color:white;}
  .index-sec2 h1{padding-top:130px;color:white;}
  .index-sec2 .zhixing-desc{margin-top:20px;color:#ddd;}
  .index-sec2 .btns{margin-top:20px;}
  .index-sec2 .btns a{display:inline-block;height:50px;line-height:50px;border-radius:25px;padding:0 35px;border:1px solid #ccc;margin-right:10px;background:rgba(0,0,0,.7);color:#fff;}
  .index-sec2 .btns a.b1{background:#f60;color:white;border-color:#f60;}
.index-sec3{background:url(../images/bg3.jpg) center no-repeat;background-size:cover;}
  .index-sec3 h1{padding-top:160px;color:white;}
  .index-sec3 .btns{margin-top:20px;}
  .index-sec3 .btns a{display:inline-block;height:50px;line-height:50px;border-radius:25px;padding:0 35px;border:1px solid #ccc;margin-right:10px;background:rgba(0,0,0,.7);color:#fff;}
  .index-sec3 .btns a.b1{background:#099;color:white;border-color:#099;}
  .index-sec3 .btns a.b2{background:#f60;color:white;border-color:#f60;}
.index-sec4{background:url(../images/bg5.jpg) center no-repeat;background-size:cover;}

.section{color:#000;}
.secmain{position:relative}


  .box-items{margin-top:20px;color:white;}
    .box-items .item{display:inline-block;vertical-align:top;width:190px;height:120px;border-radius:10px;background:rgba(255,255,255,.2);padding:20px;}
    .box-items .item h5{margin:0 0 10px;text-align:center;line-height:70px;}
    .box-items .item p{font-size:14px;opacity:0;text-align:center;}

.login_bg{background:url(../images/bg2.jpg) center no-repeat;background-size:100;}
.nav-fix{height:130px;}
.login-form{width:300px;margin:100px auto 300px;padding:15px;border-radius:10px;}
.signup-form{width:290px;padding:100px 0;margin:auto;border-radius:10px;}
  .input-group-text{background:#fff;}
  .input-group .form-control{}

.lib-index{
  margin-top:20px;
  width:30%;
  border:1px solid #ccc;
  float:left;
  margin-right:2%;
}
.lib-index dt{
  padding:15px;
  background:#f4f6f8;
  transition: background-color .3s,color .3s;
}
.lib-index dt span.fa{
  height:50px;width:50px;background:white;
  line-height:50px;text-align:center;
  color:#3483d5;margin-right:10px;border-radius:5px;
}
.lib-index dd{
  padding:15px;
  height:150px;
  overflow:hidden;
}
.lib-index:hover dt{
  background:#1669bd;
  color:white;
}

.lib-index a{
  display:inline-block;border-radius:5px;
  height:40px;line-height:40px;margin-right:12px;margin-bottom:10px;
  color:#333;width:45%;margin-right:4%;text-align:center;border:1px solid #eee;
}
.lib-index a span{margin-right:5px;}
.lib-index a:hover{
  background:#3b316e;
  border-color:#ddd;
  color:white;
  text-decoration:none;
}

.lib-container{padding-top:15px;overflow:hidden;white-space:nowrap;}
  .lib-container .items{white-space:normal;}
  .lib-container .intro{white-space:normal;}
  .lib-container h1{white-space:normal;}
.lib-nav{position:fixed;z-index:1001;width:150px;top:75px;bottom:0;left:calc(50% - 570px - 170px);}
  .lib-nav-item{padding:10px 0;color:#fff;border-radius:10px;background:#333;text-align:center;margin:0 0 5px;font-size:16px;cursor:pointer;position:relative;}
  .lib-nav-item.active{font-weight:bold;background:#f90;color:white;}
  .lib-nav-item .fa{position:absolute;top:10px;right:10px;font-size:8px;text-shadow:1px 1px 0 #000;}
.lib-main{}
  .lib-main .section{background:white;color:#000;}
  .lib-main .section h1{margin:0 0 15px;line-height:24px;font-size:24px;color:#000;}
  .lib-main .section .intro{font-size:20px;margin:30px 0;line-height:30px;overflow:hidden;color:#666;}
  .lib-main .section .items{text-align:left;}
  .lib-main .section .items a{position:relative;display:inline-block;vertical-align:top;position:relative;text-decoration: none;width:23%;height:70px;margin:0 7px 7px 0;background:#00c4a1;color:white;border-radius:5px;}
    .lib-main .section .hero .items a span.f{float:left;margin:13px 15px 0 15px;height:45px;width:45px;border-radius:50%;color:#00c4a1;background:white;text-align:center;line-height:45px;font-size:35px;}
    .lib-main .section .hero .items a span.n{display:block;font-size:18px;margin:10px 0 0px;    line-height: 26px;}
    .lib-main .section .hero .items a span.i{font-size:12px;color:#eee;}
    .lib-main .section .hero .items a span.fa{position:absolute;top:5px;left:5px;font-size:8px;color:#ff9;text-shadow:1px 1px 0 #000;}
    .lib-main .section .items a .spinner-border{width:1rem;height:1rem;border-width:.2rem;vertical-align:middle;position:absolute;right:15px;top:15px;visibility:hidden;}
  .lib-main .section .hero a{opacity:0;}
  .lib-main .section .hero .items a:hover{text-decoration:none;background:#00dbb4;}
  .lib-main .section .lib .items a{background:#159dc9;color:#fff;}
  .lib-main .section .lib .items a:hover{background:#11afe3;}
    .lib-main .section .lib .items a span.f{float:left;margin:13px 15px 0 15px;height:45px;width:45px;border-radius:50%;color:#4f9be8;background:white;text-align:center;line-height:45px;font-size:35px;}
    .lib-main .section .lib .items a span.n{display:block;font-size:18px;margin:10px 0 0px;line-height: 26px;}
    .lib-main .section .lib .items a span.i{font-size:12px;color:#eee;display:block;}
    .lib-main .section .lib .items a span.fa-lock{position:absolute;top:5px;left:5px;font-size:8px;color:#ff6;text-shadow:1px 1px 0 #000;}

  .section .navi{font-size:24px;}
    .section .navi a{color:#000;}
    .section .navi a:hover{color:#f60;text-decoration:none;}
    .section .navi span.fa{color:#999;}

.form-navbar {
  position: relative;
  font-family: "bootstrap-themes"; }
  .form-navbar:before {
    position: absolute;
    left: 5px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    color: #cccccc; }
    @media (min-width: 992px) {
      .form-navbar:before {
        z-index: 1; } }
    @media (max-width: 991px) {
      .form-navbar:before {
        left: 25px; } }
  @media (max-width: 991px) {
    .form-navbar {
      padding: 20px 15px;
      margin-left: -15px;
      margin-right: -15px;
      border-top: 1px solid #E5E9EF;
      border-bottom: 1px solid #E5E9EF; } }
  .form-navbar .form-control, .form-navbar .input-text,
  .form-navbar #user_login,
  .form-navbar #user_pass, .form-navbar .wc-stripe-elements-field {
    border-color: #EDF0F5;
    padding-left: 30px;
    height: 35px;
    -webkit-transition: 250ms;
    transition: 250ms; }
    .form-navbar .form-control:-moz-placeholder, .form-navbar .input-text:-moz-placeholder,
    .form-navbar #user_login:-moz-placeholder,
    .form-navbar #user_pass:-moz-placeholder, .form-navbar .wc-stripe-elements-field:-moz-placeholder {
      color: #838E95;
      font-size: 16px; }
    .form-navbar .form-control::-moz-placeholder, .form-navbar .input-text::-moz-placeholder,
    .form-navbar #user_login::-moz-placeholder,
    .form-navbar #user_pass::-moz-placeholder, .form-navbar .wc-stripe-elements-field::-moz-placeholder {
      color: #838E95;
      font-size: 16px; }
    .form-navbar .form-control:-ms-input-placeholder, .form-navbar .input-text:-ms-input-placeholder,
    .form-navbar #user_login:-ms-input-placeholder,
    .form-navbar #user_pass:-ms-input-placeholder, .form-navbar .wc-stripe-elements-field:-ms-input-placeholder {
      color: #838E95;
      font-size: 16px; }
    .form-navbar .form-control::-webkit-input-placeholder, .form-navbar .input-text::-webkit-input-placeholder,
    .form-navbar #user_login::-webkit-input-placeholder,
    .form-navbar #user_pass::-webkit-input-placeholder, .form-navbar .wc-stripe-elements-field::-webkit-input-placeholder {
      color: #838E95;
      font-size: 16px; }
    @media (min-width: 992px) {
      .form-navbar .form-control, .form-navbar .input-text,
      .form-navbar #user_login,
      .form-navbar #user_pass, .form-navbar .wc-stripe-elements-field {
        position: relative;
        z-index: 10;
        border-color: transparent !important;
        width: 30px;
        background: transparent !important;
        padding-right: 0; }
        .form-navbar .form-control:focus, .form-navbar .input-text:focus,
        .form-navbar #user_login:focus,
        .form-navbar #user_pass:focus, .form-navbar .wc-stripe-elements-field:focus {
          width: 260px;
          padding-right: 0.75rem; } }
    @media (max-width: 991px) {
      .form-navbar .form-control, .form-navbar .input-text,
      .form-navbar #user_login,
      .form-navbar #user_pass, .form-navbar .wc-stripe-elements-field {
        width: 100%;
        display: block;
        background: #EDF0F5; } }


.hero {
  min-height: 400px;
  position: relative;
  z-index: 10;
  color: #ffffff;
   }
  @media (max-width: 991px) {
    .hero {
      min-height: 280px; } }


.user-menu{
  height:40px;
  padding-left:30px;
  }
  .user-menu a{display:inline-block;height:35px;line-height:35px;margin-bottom:2px;text-align:center;color:#white;font-weight:bold;margin-right:15px;}
  .user-menu a:hover{text-decoration: none;color:#111}
  .user-menu a.active{color:#111;}
  .btn-block{
    background:#222;
    border-color:#000;
  }


.user-box{margin:0 auto;color:#000!important;margin-top:30px;min-height:500px;width:500px;}
  .user-box h5{font-size:12px;margin:0 0 10px;}
  .user-box .row{margin-top:15px;}
  .user-box .form-control{width:50%;}

.permission-items{border:solid #eee;border-width:1px 0 0 0;font-size:14px;}
  .permission-items thead td{background:#f9f9f9;font-weight:bold;}
  .permission-items td{padding:5px;border:solid #eee;border-width:0 0 1px 0;}
  .permission-item td.name{font-weight:bold;font-size:16px;font-weight:bold;}
  .permission-item span.fa{font-size:10px;vertical-align: super;color:#f60;}
  .permission-item span.unlock{font-size:10px;vertical-align: super;line-height:14px;height:14px;padding:0 5px;border-radius:3px;background:#066;color:white;}
  tr.permission-item span.fa-check-circle{font-size:20px;vertical-align: middle;}

  .permission-item.unlock{background:#066;color:white;}
  .permission-item a{}
  .permission-item span.btn-light,.permission-item span.btn-light:hover,.permission-item span.btn-light:active{color:#aaa!important;color:#f2f2f2!important;}

  .row0 td{background:#f1faf8;}


table.log-table{border-top:1px solid #eee;}
  table.log-table th{border-bottom:1px solid #eee;padding:5px;font-size:12px;background:#f9f9f9;}
  table.log-table td{border-bottom:1px solid #eee;padding:5px;font-size:12px;}


.buy-page{position:fixed;top:0;bottom:0;left:0;right:0;z-index:9999;background:rgba(0,0,0,.5);}
    .buy-box{position:fixed;top:150px;bottom:150px;width:800px;background:white;margin:auto;left:0;right:0;}
    .buy-box .fa-close{float:right;margin-top:10px;margin-right:10px;}

.article{margin-bottom:20px;background:#f9f9f9;border-radius:10px;padding:20px;}
  .article h1 a{color:#000;}
  .article .date{color:#999;}


.form-navbar:before {
  content: '\e805'; 
  font-family: 'bootstrap';
}

.navtrans .form-navbar:before{
  color:white;
}

.navtrans .form-navbar .form-control{color:white;}

footer{border-top:0 solid rgba(255,255,255,0.1);margin-top:20px;padding:15px 0;color:#fff;text-align:center;}
  footer a{color:#fff;}

  footer ul{ padding-left: 20px; color: #fff;}

.acnav{list-style:none;padding-left:0;}
  .acnav li{margin:0 0 2px;padding-left:65px;}
  .acnav a{display:block;height:30px;line-height:30px;text-align:center;background:#fff;font-weight:bold;color:#333;font-size:18px;}
  .acnav a:hover{background:#06c;color:white;text-decoration: none;}


.permission-table{border:solid #ddd;border-width:0 0 1px 1px;}
.permission-table td,.permission-table th{border:solid #ddd;border-width:1px 1px 0 0;padding:5px;font-size:12px;}
.permission-table th{background:#f8f8f8;}


.tab-head{padding:15px 0 0 15px;}
  .tab-head span{display:inline-block;margin-right:10px;height:34px;line-height:34px;border-radius:17px;padding:0 20px;background:#dfdfdf;font-weight:bold;cursor:pointer;}
  .tab-head span.active{background:#f30;color:white;}


.detail-desc{position:relative;margin-top:50px;}
.detail-desc .item{position:absolute;color:#ffc;font-size:60px;margin-top:70px;opacity:0;}

.valid-btn a{display:inline-block;margin:0 5px;height:30px;line-height:30px;padding:0 20px;border-radius:15px;background:#ccc;color:#333;}
  .valid-btn a:hover{background:#666;color:white;}
  .valid-btn a.active{background:#f30;color:white;}


.index{
  background:url(../images/lib.png);
}
.index-logo{width:333px;height:100px;background:url(../images/index_logo.png);margin:0 auto 20px;}
  .search{width:400px;margin:0 auto;text-align:right;border:1px solid #777;height:44px;}
  .search input[type=text]{height:40px;width:300px;border:none;font-size:18px;}
  .search input[type=submit]{height:42px;width:90px;background:#f60;color:white;border:0;font-size:18px;}
  .search.mobile{width:300px;}
  .search.mobile input[type=text]{width:200px;}


  .index-lib-item{display:inline-block;width:30%;height:35px;line-height:35px;overflow:hidden;background:#f6f6f6;color:#666;text-align:center;}

  .tool{width:45%;height:50px;line-height:50px;border:1px solid #ccc;display:inline-block;color:#666;padding-left:10px;}
    .tool span{display:inline-block;height:35px;width:35px;background-size:35px 35px;vertical-align: middle;}
    span.icon-chrome{background-image:url(../images/icon_opera.png);}
    span.icon-plugin{background-image:url(../images/icon_plugin.png);}


  .promotions{margin:0;list-style:none;padding:0;}
    .promotions span{display:inline-block;width:15px;height:15px;border-radius:50%;background:#eee;text-align:center;line-height:15px;margin-right:8px;font-size:10px;font-family:'arial black';}
    .promotions span.n1{background:#f66;color:white;}
    .promotions span.n2{background:#9cc;color:white;}
    .promotions span.n3{background:#c9c;color:white;}
    .promotions li{margin:5px 0 0;}
    .promotions a{color:#555;}

.wrap{display:flex;flex-direction:row;height:100%;}
  .sidebar-nav{height: 40px;}
    .nav-head{height:56px;border-bottom:1px solid #033f4D;}
    .nav-logo{width:160px;height:40px;margin:5px 0 0 20px;background:url(../images/logo1.png);background-size:100%;display:inline-block}

    .nav-body{}
      .nav-body ul{list-style:none;margin:0;padding:0 0 0;}
      .nav-body li{float: left;margin-right: 15px;}
      .nav-body li a{color:#000;font-weight: bold;display:block;height:40px;line-height:40px;}
      .nav-body li a:hover{text-decoration: none;}
      .nav-body li a:hover b{color:#2E95FF;}
      .nav-body li a.active b{color:#2E95FF;}
      .nav-body li a span{position:absolute;right:20px;top:15px;}
      .nav-body li a i{display:inline-block;margin-right:20px;width:20px;text-align:center;}
      .nav-body li a b{}

  .main{flex:1;display:flex;flex-direction:column;padding:10px 0;}
    .main-head{height:56px;border-bottom:1px solid #eee;display:flex;flex-direction:row;justify-content:space-between;background:white;}
      .main-head form{width:300px;height:40px;border-radius:20px;background:#eee;display:flex;flex-direction:row;justify-content:space-between;margin:8px 0 0 20px;}
      .main-head form input[type=text]{margin-left:20px;background:none;border:0;}
      .main-head form input[type=submit]{margin:3px 3px 0 0;height:34px;border-radius:17px;background:#fff;color:#000;border:0;padding:0 17px;}

      .main-head .menu{height:56px;margin-right:20px;}
        .main-head .menu span,.main-head .menu a{display:inline-block;height:46px;line-height:46px;margin:5px 0 0 20px;font-size:14px;font-weight:bold;color:#555;}
        .main-head .menu a:hover{color:#888;}

    .main-body{}
      .main-box{
        display:flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        margin:0 10px 50px 0;
      }
      .sub-cat-title{
        width:100%;
        box-sizing: border-box;
        padding-left:10px;

      }
      .sub-cat-title-m{
        color:#000;
      }
      .main-box div.item{
        width:48%;
        margin-right:4%;
        height:30px;line-height:30px;border-bottom:1px dashed rgba(255,255,255,0.2);
        display:flex;
        justify-content: space-between;
        box-sizing:border-box;
        padding-left:10px;
      }
      .main-box div.item:nth-child(2n+1){
        margin-right:0;
      }
      .main-box div.item >a{
          white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;

      }

      .btn-xs{
        line-height:1.2;
      }
      .full-text{
        color:#a39acf;
        background:#ccc7e4;
        border-radius:5px;
        padding: 1px 5px;
        font-size: 12px;
        line-height: 1.2;
        display:inline-block;
        margin-right:10px;
        }
      .fa-star{
        color:rgba(255,255,255,0.5);
        margin-left:10px;
      }

      @media screen and (max-width: 600px) {
        .full-text{display:none;}
        .container{
          width:100%;
        }
        .main-box div.item{
          width:100%;
          margin-right:0;
        }
        .container-fluid>.navbar-collapse, .container-fluid>.navbar-header, .container>.navbar-collapse, .container>.navbar-header{
          margin-left:0!important;
          margin-right:0!important;
        }
      }

      .main-box tr:hover td{background:#ffc;}

      .lib-account-go{height:30px;line-height:30px;border-radius:15px;border:1px solid #888;background:#0cc;color:white;display:inline-block;padding:0 20px;margin:5px 10px 5px 0;cursor:pointer;}
        .lib-account-go:hover{}

      td.lock-status .fa-lock{color:#f30;}
      td.lock-status .fa-unlock{color:#00a82f;}
      .gobtn{cursor:pointer;}



  .pop-accounts{z-index:9999;position:fixed;top:0;bottom:0;left:0;right:0;background:rgba(0,0,0,.7);}
    .pop-accounts-con{position:fixed;top:50px;left:0;right:0;margin:auto;background:#ffc;max-width:95%;border:1px solid #999;height:auto;}
    @media screen and (min-width: 400px) {
        .pop-accounts-con{width:380px;top:70px;}
    }
    @media screen and (min-width: 1000px) {
        .pop-accounts-con{width:700px;top:250px;}
    }
    .pop-accounts-con-main{padding:10px;}
    .pop-accounts-name{padding:10px;border-bottom:1px solid #eee;font-size:14px;font-weight:bold;text-align:center;}
      .pop-accounts-name .close{font-size:12px;color:#039;}
      .pop-accounts-name i{color:#f00}
    .pop-accounts-con p{margin-bottom:15px;color:#f00;font-weight:bold;text-align:center;}
    .btns-list{text-align:center;}
    .pop-accounts-con a{display:inline-block;height:40px;line-height:40px;color:#021A4D;font-weight:bold;border-radius:3px;text-align:center;margin:0 30px 0 0;}
    .pop-accounts-con a:hover{text-decoration: underline;color:#f30;}



.sub-cats{margin:0 20px;height:30px;}
  .sub-cats a{display:inline-block;margin-right:10px;height:30px;line-height:30px;padding:0 20px;border-radius:15px;background:#00c6dd;color:white;font-weight:bold;}
  .sub-cats a.cur{background:white;color:#00c6dd;}

  .sub-cat-title-m{font-size:16px;color:#555;font-weight:bold;margin:0 0 10px;}
  .sub-cat-desc{margin:0 0 10px;background:#dfdcef;color:#6b6393;border-radius:3px;padding:5px;}

.buy-html h5{font-size:16px;font-weight:bold;margin:0 0 10px;}

.user-flex{display:flex;border:1px solid #ccc;overflow:hidden;min-height:400px;margin-top:10px;}
    .user-flex-left{width:200px;background:#f0f0f0;padding-bottom:1000px;margin-bottom:-1000px;}
    .user-flex-right{width:calc(100% - 200px);}


.login{
  padding: 15px;
  width: 290px;
  margin: 100px 0;
}
.login h5{margin-top: 0;}

.welcome{
  min-height:400px;
  color:#ff0;
  font-size:18px;
}
.welcome h5{
  font-size:30px;
}

.input-group.verify .input-group-addon:last-child{
  padding: 2px 3px 2px 0;
  border-color:#bbb;
}
.input-group.verify input{
  border-right: 0;
}


.main-box div.item >a.lib-item-lock{
  color:#888;
}


.layer{
  position:fixed;
  top:0;
  bottom:0;
  right:0;
  left:0;
  z-index:9999;
  background:rgba(0,0,0, 0.5);
}

  .pop-box{
    position:absolute;
    top:50px;
    left:20px;
    right:20px;
    bottom:50px;
    border-radius:5px;
    border:1px solid #555;
    background:white;
    margin:auto;
  }
    @media screen and (min-width: 720px) {
      .pop-box{
        top:150px;
        bottom:150px;
        width:500px;
        max-height:300px;
        }
    }
    .pop-box-header{
      height:30px;
      border-top-left-radius:6px;
      border-top-right-radius:6px;
      background:#ddd;
      position:relative;
    }
      .pop-box-header h5{
        margin:0;
        text-align:center;
        height:30px;
        line-height:30px;
      }
      .layer .fa-close{
        color:blue;
        position:absolute;top:5px;right:5px;
        font-size:15px;
      }
    .pop-box-main{
      padding:10px;
    }

    .pop-box-main a{
      color:#f30;
      margin-right:15px;
    }


  .fa-close:hover{
  cursor:pointer;
  color:red;
}

.top-category{
  border-radius:0!important;
  background:white;
} 
  .top-category-title{
    border-radius:0!important;
    background:#555!important;
  } 
  #app >.container{
    background:none;
  }