* {
  padding: 0;
  margin: 0;
}

img {
  border: 0px;
}

body {
  font-family: '微软雅黑';
  font-size: 13px;
  color: #3270AD;
  overflow: hidden;
}

html,
body {
  height: 100%;
  width: 100%;
  min-width: 800px;
}
.all-big-bg{width: 100%; height: 100%; position: absolute;z-index: -1;}
#user-center .layui-inline .layui-form-label{width:200px;}
#user-center .layui-inline .layui-input-inline{width:250px;}
.clear {
  clear: both;
}
.main_m10_p10 {margin-top: 10px; padding: 10px;}
.left {
  float: left;
}

.right {
  float: right;
}
.textleft {
  text-align: left !important;
}
.textright {
  text-align: right;
}
.textcenter {
  text-align: center;
}
.color-red {
  color: red;
}
.nolist {
  text-align: center;
}
a {
  color: #313131;
  text-decoration: none;
}
body a:hover,
.active {
  color: #eb6100;
}
.maindiv {
  width: 1200px;
  margin: 0 auto;
}

.p20 {
  padding: 20px;
}
.mt20 {
  margin-top: 20px;
}
.mt40 {
  margin-top: 40px;
}
.mt10 {
  margin-top: 10px;
}
.p10 {
  padding: 10px;
}
/* header start */
.header {
  overflow: hidden;
}
.header .toplogo {
  height: 60px;
  line-height: 60px;
  background: #fff;
}
.header .toplogo a {
  color: #444;
}
.header .toplogo .logo {
  font-size: 32px;
  font-weight: bold;
  font-family: '隶书';
}
.header .toplogo .logo img {
  height: 60px;
}
.header .toplogo .topLoginNav {
  font-size: 14px;
}

/* index */
.index .header {
  height: 100px;
  background: white;
  overflow: hidden;
}
.index .header .toplogo a {
  color: #fff;
}

.topnav {
  line-height: 50px;
  height: 50px;
  background: #3270ad;
}
.topnav a {
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
  display: block;
  padding: 0 40px;
}
.topnav a:hover,
.topnav a.active {
  color: #fff;
  background: #eb6100;
}
.topnav ul > li {
  float: left;
}

.countinfo .layui-carousel > div:before {
  content: '';
}
.countinfo .layui-carousel {
  width: 250px;
  background: none;
  overflow: hidden;
}
.countinfo .layui-carousel div {
  width: 250px;
  background: none;
}
.countinfo .layui-carousel * {
  padding: 0 !important;
}

.footer {
  background: #f5f5f5;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 50px 0;
}
.footer .footerTitle {
  font-size: 16px;
  line-height: 30px;
  font-weight: bold;
}

/* header end */

/* main  */
.mainbody {
  position: relative;
}
/* index */
.indexbanner {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-bottom: 20%;
  background: url(../images/bg1.jpg) no-repeat top center;
  min-width: 1200px;
  min-height: 300px;
}
.indexbanner > div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.indexbanner .banner {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 100;
}
.indexbanner .banner .piclist {
  position: relative;
  padding: 0;
}
.indexbanner .banner img {
  height: 100%;
  width: 100%;
}
.indexbanner .banner .shidian_info {
  position: absolute;
  width: 100%;
  top: 24%;
}
.indexbanner .banner .shidian_title {
  color: #ffffff;
  text-shadow: 4px 4px 2px #444444;
  text-align: center;
  font-weight: bold;
  font-size: 2rem;
  font-family: '微软雅黑';
}
.indexbanner .banner .shidian_comment {
  color: #fff;
  text-shadow: 4px 4px 2px #444444;
  font-size: 1rem;
  text-align: center;

  margin-top: 0.5rem;
}
@media screen and (min-width: 1600px) {
  .indexbanner .banner .shidian_title {
    font-size: 3rem;
  }
  .indexbanner .banner .shidian_comment {
    font-size: 1rem;
  }
}
.indexbanner .bannersearch {
  position: relative;
  top: 12%;
  z-index: 1000;
  text-align: center;
  width: 651px;
  height: 60px;
  vertical-align: middle;
}
.bannersearchnav {
  line-height: 40px;
  text-align: left;
  color: #fff;
  font-size: 16px;
}
.bannersearchnav a {
  color: #fff;
  margin: 5px 12px;
  text-shadow: 2px 2px 1px #444444;
}
.bannersearch .search {
  height: 50px;
  line-height: 50px;
  width: 520px;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  border: none;
  font-size: 14px;
}
.bannersearch .searchbt {
  height: 51px;
  line-height: 51px;
  width: 130px;
  margin-left: -9px;
  background: #bc3601;
  color: #fff;
  border: none;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
  font-size: 16px;
}
.bannersearch .indexWebtitle {
  color: #fff;
  font-weight: bold;
  font-size: 70px;
  margin-top: 20px;
  font-family: '隶书';
}
.bannersearch .indexWebDescribe {
  color: #fff;
  font-size: 26px;
  font-weight: bold;
  margin-top: 10px;
  font-family: '隶书';
}
/* 首页平台动态 */
.indexptdt {
  overflow: hidden;
  background: #f5f5f5;
}
.indexptdt .ptdttitle {
  width: 96px;
  height: 96px;
  font-size: 35px;
  border: 3px solid #bf0606;
  color: #bf0606;
  float: left;
  text-align: center;
  margin: 24px;
}
.indexptdt .ptdtlist {
  float: right;
  overflow: hidden;
  width: 1000px;
  height: 150px;
  font-size: 1.2rem;
  font-weight: bold;
}
.indexptdt .ptdtlist div {
  line-height: 50px;
}
.indexptdt .ptdtlist > [carousel-item] {
  margin: 24px 0px;
}
.indexptdt .ptdtlist .layui-carousel-arrow[lay-type='sub'] {
  top: 5px !important;
}
.indexptdt .ptdtlist .layui-carousel-arrow[lay-type='add'] {
  bottom: 5px !important;
}
.indexptdt .ptdtlist .layui-icon {
  font-size: 24px;
}
/* 首页按键 */
.index_main_info {
  position: relative;
}
.index_main_info .index_main_info_title {
  margin-bottom: 40px;
}
.index_main_info .index_main_info_title .text {
  font-size: 24px;
  font-weight: bold;
}
.index_main_info .index_main_info_title .text span {
  color: #e5e5e5;
  font-size: 18px;
}
.index_main_info .layui-col-md3 {
  position: relative;
}
.index_main_info .iconInfo {
  position: relative;

  color: inherit;
  cursor: pointer;
  perspective: 1000px;

  width: 250px;
  height: 250px;
  margin: 10 auto;
  border: #cfcfcf solid 1px;
  box-shadow: 2px 2px 2px #cfcfcf;
  color: #313131 !important;
  transition: All 0.4s ease-in-out;
  -webkit-transition: All 0.4s ease-in-out;
  -moz-transition: All 0.4s ease-in-out;
  -o-transition: All 0.4s ease-in-out;
}
.index_main_info .iconInfo .countinfo {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #3270ad;
  color: #fff;
  top: 0px;
  left: 0px;
}
.index_main_info .iconInfo .countinfo .counttop {
  /*height: 20px;*/
}
.index_main_info .iconInfo .countinfo p {
  line-height: 30px;
  font-size: 13px;
}
.index_main_info .iconInfo .countinfo p span {
  color: #eb6100;
  font-size: 17px;
  font-weight: bold;
}

.front,
.back {
  display: flex;
  background-position: center;
  background-size: cover;
  text-align: center;
  justify-content: center;
  align-items: center;
  position: absolute;
  height: 100%;
  width: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  transition: ease-in-out 600ms;
}
.front {
  overflow: hidden;
}
.front:before {
  position: absolute;
  display: block;
  content: '';
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.25;
  z-index: -1;
}
.iconInfo:hover .front {
  transform: rotateY(180deg);
}
.iconInfo:nth-child(even):hover .front {
  transform: rotateY(-180deg);
}

.back {
  transform: rotateY(-180deg);
}
.iconInfo:hover .back {
  transform: rotateY(0deg);
}
.iconInfo:nth-child(even) .back {
  transform: rotateY(180deg);
}
.iconInfo:nth-child(even):hover .back {
  transform: rotateY(0deg);
}

.countbutton {
  /*transform: translateZ(40px);*/
  cursor: pointer;
  /* -webkit-backface-visibility: hidden;
  backface-visibility: hidden; */
  font-weight: bold;
  color: #fff;
  padding: 0.5em 1em;
  /*border-radius: 100px;*/
  font: inherit;
  background: #eb6100; /*linear-gradient(135deg, #1a9be6, #1a57e6)*/
  border: none;
  position: relative;
  /* transform-style: preserve-3d; */
  /*transition: 300ms ease;*/
}
/*
.countbutton:before {
  transition: 300ms ease;
  position: absolute;
  display: block;
  content: '';
  transform: translateZ(-40px);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  height: calc(100% - 20px);
  width: calc(100% - 20px);
  border-radius: 100px;
  left: 10px;
  top: 16px;
  box-shadow: 0 0 10px 10px rgba(26, 87, 230, 0.25);
  background-color:rgba(26, 87, 230, 0.25);
}
*/
.countbutton:hover {
  transform: translateZ(55px);
}
.countbutton:hover:before {
  transform: translateZ(-55px);
}
.countbutton:active {
  transform: translateZ(20px);
}
.countbutton:active:before {
  transform: translateZ(-20px);
  top: 12px;
}

/*
.index_main_info .iconInfo:hover {
  transform: rotateY(360deg);
  -webkit-transform: rotateY(360deg);
  -moz-transform: rotateY(360deg);
  -o-transform: rotateY(360deg);
  -ms-transform: rotateY(360deg);
  color:#ffffff !important;
  background: #4d80b9 !important;
}

.index_main_info .iconInfo:hover i{color:#ffffff !important;}*/
.index_main_info .iconInfo .icon {
  /*margin-top:20px;*/
}
.index_main_info .iconInfo i {
  color: #4d80b9;
  font-weight: bold;
  font-size: 80px;
}
.index_main_info .iconInfo .iconTitle {
  margin-top: 20px;
  font-size: 1.2rem;
  font-weight: bold;
}
/*  news page*/
.newsdiv {
  overflow: hidden;
  width: 100%;
}
.newslist li,
.sciencelist li div {
  margin: 8px auto;
  padding: 4px 0px 20px 0px;
}
.newslist li a {
  font-size: 15px;
  line-height: 28px;
  display: inline-block;
  overflow: hidden;
  color: #1d1d1d;
}
.newslist li i,
.newslist li i {
  font-size: 12px;
}
.newslist .info {
  margin: 5px auto;
  overflow: hidden;
  line-height: 26px;
}
.newslist .info span {
  color: #7a7a7a;
  font-size: 12px;
  right: 0;
}
.newslist li a:hover {
  color: #eb6100;
}
.newslist li .description {
  color: #8a8a8a;
}
.newsattrlines {
  border-bottom: 1px solid #dddddd;
}
.newsattrdiv {
  border: 1px solid #dddddd;
  text-align: left;
  margin: 20px;
}
.newsattrdiv .borderleft {
  border-left: 1px solid #dddddd;
}
.newsattrdiv > div > div {
  line-height: 30px;
}
.newscontent td,
th {
  padding: 5px 10px;
  border: 1px solid #ddd;
}
/*  science */
.science .declaring {
  color: #3270ad;
}
.science .doing {
  color: #eb6100;
}
.filterdiv li {
  line-height: 42px;
}
.filterdiv li a {
  padding: 5px 8px;
  white-space: nowrap;
}
.filterdiv li a:hover {
  color: #ffffff;
  background: #3270ad;
}
.filterdiv li .active {
  color: #ffffff;
  background: #0a5894;
}
.filterdiv .tit {
  padding-left: 0px;
}
.filterdiv .co {
  padding-left: 0px;
}
.filterbt {
  padding: 3px 18px;
}
.layui-btn-normal {
  background: #3270ad !important;
}
.newslist .info > span {
  float: left;
}
.newslist .newscate {
  background: red;
  color: #fff;
  float: left;
  padding: 1px 8px;
}
.newslist .newsnow {
  background: #cccc77;
  color: #fff;
  float: left;
  padding: 1px 8px;
}

/*details*/
.content .newstitle {
  text-align: center;
}

/* 用户中心 */
#user-center {
  max-width: 1600px;
  display: flex;
  margin: 20px auto;
  /* background: rgb(255, 255, 255, 0.7); */
  border-radius: 10px;
  height: 70vh;
  overflow: hidden;
}
#user-center .user-side-bar {
  width: 180px;
  /* box-shadow: 4px 0 8px 0 #f1eded; */
  padding: 20px 0;
  
}
.user-content {
  flex: 1;
  background-color: #f3f5f7;
  height: fit-content;
  box-sizing: border-box;
  padding: 0 0 10px 0;
  max-height: 100%;
  overflow-x: auto;
}
.user-content::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5;}
.user-content::-webkit-scrollbar{ width: 3px; background-color: #F5F5F5;}
.user-content::-webkit-scrollbar-thumb{}

.user-side-bar .avator {
  text-align: center;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 5px solid #3270ad;
}
.user-side-bar .avator img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}
.user-side-bar .avator h3 {
  margin: 10px 0;
}
.user-side-bar .avator p {
  color: rgb(186, 188, 190);
  font-size: 14px;
}
.user-side-bar .bar-con li a {
  line-height: 50px;
  padding: 0 0 0 20px;
  border-left: 4px solid transparent;
  display: block;
}
.user-side-bar .bar-con li a.active {
  border-left-color: #3270ad;
  background-color: #bed0e5;
}
#im {
  display: flex;
  height: 100%;
}
#im .im-list {
  width: 180px;
  background-color: #e8eaeb;
  font-size: 14px;
}
#im .im-list li a {
  padding: 0 0 0 20px;
  display: block;
  line-height: 40px;
  color: #000;
}
#im .im-list li a.active {
  background-color: #bcbfc0;
}
#im .im-list li.search {
  padding: 8px;
  box-sizing: border-box;
  text-align: center;
}
#im .im-list li.search input {
  line-height: 30px;
  border-radius: 30px;
  width: 160px;
  text-indent: 20px;
  border: 1px solid rgb(201, 199, 199);
}
#im .im-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #e8eaeb;
}
#im .im-content .title {
  line-height: 50px;
  border-bottom: 1px solid #cfcdcdaf;
  background-color: #e8eaeb;
  padding-left: 20px;
  font-weight: bold;
  font-size: 16px;
  text-align: center;
  flex: 0 0 auto;
  height: 50px;
}
.im-content .input-box {
  position: relative;
  flex: 0 0 auto;
  border-bottom: 1px solid #cfcdcdaf;
  border-right: 1px solid #cfcdcdaf;
}
.im-content .input-box textarea {
  width: 95%;
  height: 30%;
  border: none;
  text-indent: 10px;
  padding: 5px;
  box-sizing: border-box;
  resize: none;
  font-size: 18px;
  height: 100px;
}
.im-content .input-box textarea:focus {
  border-color: #eeaf83;
}
.im-content .input-box .send {
  position: absolute;
  bottom: 20px;
  right: 10%;
  padding: 5px 10px;
}
.im-content .im-msg-content {
  width: 95%;
  padding: 10px 0;
  overflow-y: scroll;
  flex: 1 1 auto;
  max-height: 65vh;
  background: #ffffff;
  border-bottom: #cfcdcd 1px solid;
}
.user_center_title {
  display: none !important;
  border-left: 5px #3270ad solid;
  margin: 20px 20px 0px 20px;
  font-size: 26px;
  padding-left: 10px;
}
.cont {
  margin: 20px;
  box-sizing: border-box;
}
.cont .layui-inline {
  margin-bottom: 30px;
}

.im-msg-content .msg-item {
  display: flex;
  line-height: 26px;
  margin-bottom: 20px;
  position: relative;
  padding-top: 10px;
}
.im-msg-content .msg-item .name {
  width: 70px;
  display: inline-block;
  text-align: center;
  font-weight: 500;
  font-size: 18px;
  padding: 10px 0;
}
.im-msg-content .msg-item .time {
  position: absolute;
  left: 59%;
  transform: translateX(-50%);
  top: 100%;
  color: rgba(187, 184, 184, 0.555);
}
.im-msg-content .msg-item .status {
  width: 70px;
  padding: 10px 0;
  display: inline-block;
  text-align: left;
  font-size: 12px;
  color: green;
}
.im-msg-content .msg-item .content {
  padding: 10px;
  margin: 0 20px 0 10px;
  flex: 1;
  background-color: #fff;
  box-sizing: border-box;
}
.im-msg-content .right-word {
  flex-direction: row-reverse;
}
.im-msg-content .msg-item.right-word .status {
  text-align: right;
}
.im-msg-content .msg-item.right-word .status.red {
  color: red;
}
.layui-form-selected dl {
  z-index: 9999 !important;
}

/*项目管理*/
.addproduct .layui-form-item {
  margin-bottom: 0;
}
.subproductadd {
  background: #3270ad !important;
}
.deletelsubproduct {
  color: red;
  cursor: pointer;
}

/* page */
.Pagination a:hover,
.Pagination .active {
  background-color: #eb6100;
  border: 1px solid #eb6100;
  color: #ffffff;
}
.Pagination {
  float: right;
  height: auto;
  _height: 45px;
  line-height: 20px;
  margin-right: 15px;
  _margin-right: 5px;
  color: #565656;
  margin-top: 10px;
  _margin-top: 20px;
  clear: both;
}
.Pagination a, .Pagination span {
  font-size: 14px;
  text-decoration: none;
  display: block;
  float: left;
  border: 1px solid #ccc;
  height: 34px;
  line-height: 34px;
  margin: 0 2px;
  min-width: 24px;
  padding: 0 5px;
  text-align: center;
}
.Pagination li {
  float: left;
}

/* 专家 */
.layui-carousel > [carousel-item] > * {
  background-color: #fff;
  padding: 0 20px;
}
.pitem-train {
  width: 280px;
  height: 197px;
  position: relative;
  margin: 15px;
  overflow: hidden;
  display: inline-block;
  text-align: center;
  border: #e2dede 1px solid;
  box-shadow: 1px 1px 2px 0 #e2dede;
}
.pitem-train .img {
  width: 100%;
  height: 160px;
}
.pitem-train img {
  width: 100%;
  height: 160px;
}
.pitem-train-go {
  position: absolute;
  top: 130px;
  left: 190px;
  width: 70px;
  height: 20px;
  text-align: center;
  background: #fff;
  box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
  border-radius: 7px;
}
.pitem-train .con {
  padding: 10px;
  box-sizing: border-box;
  text-align: left;
}
.pitem {
  width: 200px;
  height: 320px;
  position: relative;
  margin: 15px;
  overflow: hidden;
  display: inline-block;
  text-align: center;
  border: #e2dede 1px solid;
  box-shadow: 1px 1px 2px 0 #e2dede;
}
.pitem .img {
  width: 100%;
  height: 160px;
}
.pitem .img img {
  height: 100%;
}
.pitem .con {
  padding: 10px;
  box-sizing: border-box;
  text-align: left;
}
.pitem .con p {
  line-height: 25px;
  font-size: 12px;
}
.pitem .con h3 {
  line-height: 40px;
}
.pitem .con .skill {
  color: #333;
  font-weight: bold;
  line-height: 18px;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  margin: 5px 0;
  font-size: 14px;
}
.pitem .mark {
  /*  position: absolute;*/
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(68, 67, 67, 0.8);
  transition: top 0.2s ease-in;
  padding: 10px;
  box-sizing: border-box;
  line-height: 20px;
  text-align: left;
}
.pitem .mark p {
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 10;
  text-indent: 20px;
  color: #fff;
}
.pitem .mark .op {
  position: absolute;
  bottom: 30px;
  left: 0;
  right: 0;
  margin: 0 auto;
  text-align: center;
}
.pitem .mark .op a {
  display: inline-block;
  padding: 10px 20px;
  box-shadow: 1px 1px 2px 0 #e2dede;
  color: #eb6100;
  border-radius: 4px;
  background-color: #fff;
}
.pitem .mark .op a:hover {
  background-color: #eb6100;
  color: #fff;
}
.pitem:hover .mark {
  top: 0;
}
.oper {
  margin: 10px 40px;
}
.search {
  height: 40px;
  border-radius: 4px;
  text-indent: 15px;
  border: 1px solid #d4d4d4;
}
.search:focus {
  border-color: #009688;
}
.pitem .professor-name {
  text-align: center;
}

/* 五等分 */
/*删格化5等份*/
.layui-col-lg2-4,
.layui-col-md2-4,
.layui-col-sm2-4,
.layui-col-xs2-4 {
  position: relative;
  display: block;
  box-sizing: border-box;
}
.layui-col-xs2-4 {
  float: left;
}
.layui-col-xs2-4 {
  width: 19.9999992%;
}
.layui-col-xs-offset2-4 {
  margin-left: 19.9999992%;
}
@media screen and (min-width: 768px) {
  .layui-col-sm2-4 {
    float: left;
  }
  .layui-col-sm2-4 {
    width: 19.9999992%;
  }
  .layui-col-sm-offset2-4 {
    margin-left: 19.9999992%;
  }
}
@media screen and (min-width: 992px) {
  .layui-col-md2-4 {
    float: left;
  }
  .layui-col-md2-4 {
    width: 19.9999992%;
  }
  .layui-col-md-offset2-4 {
    margin-left: 19.9999992%;
  }
}
@media screen and (min-width: 1200px) {
  .layui-col-lg2-4 {
    float: left;
  }
  .layui-col-lg2-4 {
    width: 19.9999992%;
  }
  .layui-col-lg-offset2-4 {
    margin-left: 19.9999992%;
  }
}

/* v2 添加 */
.my-input {
  position: relative;
  top: 5px;
  display: inline;
}
.search-input {
  border-radius: 15px;
  width: 180px;
  /* height: 30px; */
  line-height: 38px;
  outline: none;
  border: 1px solid #cccccc;
  padding: 0 30px 0 15px;
}
.my-input i.fa {
  position: absolute;
  top: 0px;
  right: 15px;
  color: #1e9fff;
  font-size: 20px;
  cursor: pointer;
}
.top_total {
  text-align: center;
  border: 2px solid blue;
  height: 80px;
  line-height: 70px;
  margin-top: 20px;
}
.top_total_font {
  font-size: 20;
  font-weight: bold;
}
.top_box {
  text-align: center;
  border: 1px solid #c4c4c4;
  padding: 20px 0;
  overflow: hidden;
  background: #f5f5f5;
}
.top_box .layui-col-space20 {
  margin: 0 20px;
}
.top_box .layui-col-space20 > div {
  padding: 0 10px;
}

/*最新用户中心框架样式*/
.user-center-table {
  min-height: 250px;
  background-color: #fff;
  margin: 0 auto;
  width: 99%;
  overflow: auto;
}
.layui-form-select .layui-input {
  padding-right: 0 !important;
}

/* 党务申请导航栏样式 */
.nav-bar {
  /* background-color: pink; */
}
.nav-bar > ul {
  display: flex;
}
.nav-bar li a {
  display: inline-block;
  text-align: center;
  /* margin-left: 20px; */
  width: 90px;
  height: 50px;
  line-height: 50px;
}
.nav-bar li a.active {
  /* color: #fff; */
  border-bottom: 4px solid #5fb878;
  background-color: #77777720;
}
.btn-group {
  padding: 0 10px;
  /* background-color: #1E9FFF; */
}
/* 跑马灯动画 */
.horse_box {
  position: absolute;
  /* margin: -1px; */
  left: -3px;
  right: -4px;
  top: -4px;
  bottom: -4px;
  height: calc(100% + 5px) !important;
}
.horse_run {
  background-image: linear-gradient(90deg, rgba(196, 233, 64, 0) 0%, rgb(23, 77, 137) 100%), linear-gradient(0deg, rgb(23, 77, 137) 0%, rgba(196, 233, 64, 0) 100%), linear-gradient(-90deg, rgba(196, 233, 64, 0) 0%, rgb(23, 77, 137) 100%),
    linear-gradient(0deg, rgba(196, 233, 64, 0) 0%, rgb(23, 77, 137) 100%);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: 100px 4px, 4px 100px, 100px 4px, 4px 100px;
  background-position: -100px 1px, calc(100% - 1px) -100px, calc(100% + 100px) calc(100% - 1px), 1px 0px;
  animation: moveLine 8s infinite linear;
  /* height: calc(100% - 2px); */
  height: 100%;
  padding: 1px;
  background-clip: content-box;
}
.horse_run_screen {
  background-image: linear-gradient(90deg, rgba(196, 233, 64, 0) 0%, rgb(23, 77, 137) 100%), linear-gradient(0deg, rgb(23, 77, 137) 0%, rgba(196, 233, 64, 0) 100%), linear-gradient(-90deg, rgba(196, 233, 64, 0) 0%, rgb(23, 77, 137) 100%),
    linear-gradient(0deg, rgba(196, 233, 64, 0) 0%, rgb(23, 77, 137) 100%);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: 100px 4px, 4px 100px, 100px 4px, 4px 100px;
  background-position: -100px 1px, calc(100% - 1px) -100px, calc(100% + 100px) calc(100% - 1px), 1px 0px;
  animation: moveLine 9s infinite linear;
  /* height: calc(100% - 2px); */
  height: 100%;
  padding: 1px;
  background-clip: content-box;
}
.horse_run_re {
  background-image: linear-gradient(90deg, rgb(23, 77, 137) 0%, rgba(196, 233, 64, 0) 100%), linear-gradient(0deg, rgba(196, 233, 64, 0) 0%, rgb(23, 77, 137) 100%), linear-gradient(-90deg, rgb(23, 77, 137) 0%, rgba(196, 233, 64, 0) 100%),
    linear-gradient(0deg, rgb(23, 77, 137) 0%, rgba(196, 233, 64, 0) 100%);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: 100px 4px, 4px 100px, 100px 4px, 4px 100px;
  background-position: -100px 1px, calc(100% - 1px) -100px, calc(100% + 100px) calc(100% - 1px), 1px 0px;
  animation: moveLine 8s infinite linear reverse;
  /* height: calc(100% - 2px); */
  height: 100%;
  padding: 1px;
  background-clip: content-box;
}
.horse_run_screen_re {
  background-image: linear-gradient(90deg, rgb(23, 77, 137) 0%, rgba(196, 233, 64, 0) 100%), linear-gradient(0deg, rgba(196, 233, 64, 0) 0%, rgb(23, 77, 137) 100%), linear-gradient(-90deg, rgb(23, 77, 137) 0%, rgba(196, 233, 64, 0) 100%),
    linear-gradient(0deg, rgb(23, 77, 137) 0%, rgba(196, 233, 64, 0) 100%);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: 100px 4px, 4px 100px, 100px 4px, 4px 100px;
  background-position: -100px 1px, calc(100% - 1px) -100px, calc(100% + 100px) calc(100% - 1px), 1px 0px;
  animation: moveLine 9s infinite linear reverse;
  /* height: calc(100% - 2px); */
  height: 100%;
  padding: 1px;
  background-clip: content-box;
}
.horse_run_screen_re_r {
  background-image: linear-gradient(90deg, rgb(23, 77, 137) 0%, rgba(196, 233, 64, 0) 100%), linear-gradient(0deg, rgba(196, 233, 64, 0) 0%, rgb(23, 77, 137) 100%), linear-gradient(-90deg, rgb(23, 77, 137) 0%, rgba(196, 233, 64, 0) 100%),
    linear-gradient(0deg, rgb(23, 77, 137) 0%, rgba(196, 233, 64, 0) 100%);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: 100px 4px, 4px 100px, 100px 4px, 4px 100px;
  background-position: -100px 1px, calc(100% - 1px) -100px, calc(100% + 100px) calc(100% - 1px), 1px 0px;
  animation: moveLine 9s infinite linear 3.15s reverse;
  /* height: calc(100% - 2px); */
  height: 100%;
  padding: 1px;
  background-clip: content-box;
}
.horse_run_d2 {
  background-image: linear-gradient(90deg, rgba(196, 233, 64, 0) 0%, rgb(23, 77, 137) 100%), linear-gradient(0deg, rgb(23, 77, 137) 0%, rgba(196, 233, 64, 0) 100%), linear-gradient(-90deg, rgba(196, 233, 64, 0) 0%, rgb(23, 77, 137) 100%),
    linear-gradient(0deg, rgba(196, 233, 64, 0) 0%, rgb(23, 77, 137) 100%);

  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: 100px 4px, 4px 100px, 100px 4px, 4px 100px;
  background-position: -100px 1px, calc(100% - 1px) -100px, calc(100% + 100px) calc(100% - 1px), 1px 0px;
  animation: moveLine 8s infinite linear 0.25s;
  /* height: calc(100% - 2px); */
  height: 100%;
  padding: 1px;
  background-clip: content-box;
}
.horse_run_d2_re {
  background-image: linear-gradient(90deg, rgb(23, 77, 137) 0%, rgba(196, 233, 64, 0) 100%), linear-gradient(0deg, rgba(196, 233, 64, 0) 0%, rgb(23, 77, 137) 100%), linear-gradient(-90deg, rgb(23, 77, 137) 0%, rgba(196, 233, 64, 0) 100%),
    linear-gradient(0deg, rgb(23, 77, 137) 0%, rgba(196, 233, 64, 0) 100%);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: 100px 4px, 4px 100px, 100px 4px, 4px 100px;
  background-position: -100px 1px, calc(100% - 1px) -100px, calc(100% + 100px) calc(100% - 1px), 1px 0px;
  animation: moveLine 8s infinite linear 0.25s reverse;
  /* height: calc(100% - 2px); */
  height: 100%;
  padding: 1px;
  background-clip: content-box;
}
.horse_run_d3 {
  background-image: linear-gradient(90deg, rgba(196, 233, 64, 0) 0%, rgb(23, 77, 137) 100%), linear-gradient(0deg, rgb(23, 77, 137) 0%, rgba(196, 233, 64, 0) 100%), linear-gradient(-90deg, rgba(196, 233, 64, 0) 0%, rgb(23, 77, 137) 100%),
    linear-gradient(0deg, rgba(196, 233, 64, 0) 0%, rgb(23, 77, 137) 100%);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: 100px 4px, 4px 100px, 100px 4px, 4px 100px;
  background-position: -100px 1px, calc(100% - 1px) -100px, calc(100% + 100px) calc(100% - 1px), 1px 0px;
  animation: moveLine 8s infinite linear 1.2s;
  /* height: calc(100% - 2px); */
  height: 100%;
  padding: 1px;
  background-clip: content-box;
}
.horse_run_16 {
  background-image: linear-gradient(90deg, rgba(196, 233, 64, 0) 0%, rgb(23, 77, 137) 100%), linear-gradient(0deg, rgb(23, 77, 137) 0%, rgba(196, 233, 64, 0) 100%), linear-gradient(-90deg, rgba(196, 233, 64, 0) 0%, rgb(23, 77, 137) 100%),
    linear-gradient(0deg, rgba(196, 233, 64, 0) 0%, rgb(23, 77, 137) 100%);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: 100px 4px, 4px 100px, 100px 4px, 4px 100px;
  background-position: -100px 1px, calc(100% - 1px) -100px, calc(100% + 100px) calc(100% - 1px), 1px 0px;
  animation: moveLine 24s infinite linear;
  /* height: calc(100% - 2px); */
  height: 100%;
  padding: 1px;
  background-clip: content-box;
}
@keyframes moveLine {
  0% {
    background-position: -100px 1px, calc(100% - 1px) -100px, calc(100% + 100px) calc(100% - 1px), 1px 0px;
  }

  5% {
    background-position: 0px 1px, calc(100% - 1px) -100px, calc(100% + 100px) calc(100% - 1px), 1px -100px;
  }

  30% {
    background-position: 100% 1px, calc(100% - 1px) -100px, calc(100% + 100px) calc(100% - 1px), 1px -100px;
  }

  35% {
    background-position: calc(100% + 100px) 1px, calc(100% - 1px) 0px, calc(100% + 100px) calc(100% - 1px), 1px -100px;
  }

  50% {
    background-position: calc(100% + 100px) 1px, calc(100% - 1px) 100%, calc(100% + 100px) calc(100% - 1px), -100px -100px;
  }

  55% {
    background-position: calc(100% + 100px) 1px, calc(100% - 1px) calc(100% + 100px), 100% calc(100% - 1px), -100px calc(100% + 100px);
  }

  80% {
    background-position: calc(100% + 100px) 1px, calc(100% - 1px) calc(100% + 100px), 0px calc(100% - 1px), 1px calc(100% + 100px);
  }

  85% {
    background-position: calc(100% + 100px) 1px, calc(100% - 1px) calc(100% + 100px), -100px calc(100% - 1px), 1px 100%;
  }

  100% {
    background-position: calc(100% + 100px) 1px, calc(100% - 1px) calc(100% + 100px), -100px calc(100% - 1px), 1px 0px;
  }
}
.top-nav-bar {
  /* display: flex; */
  /* margin-top: 10px; */
  /* padding-left: 12%; */
  /* background-color: pink; */
  background-color: #ffffff99;
}
.top-nav-bar ul {
  padding: 10px 0;
  display: flex;
  justify-content: space-evenly;
  width: 75%;
  margin: 0 auto;
}
.top-nav-bar ul li a{
  display: block;
  width: 64px;
  height: 64px;
  line-height: 64px;
  text-align: center;
  /* background-color: lightblue; */
}
.top-nav-bar .top-nav-bar-name{
  display: block;height: 36px;line-height: 36px;
}
.nav-active .top-nav-bar-name{
  color: #eb6100;
  /* background-color: #eb6100; */
}

#user-center .layui-table td,#user-center .layui-table th{
  padding: 5px 10px;
  text-align: center;
}
#user-center .details .layui-table td,#user-center .details .layui-table th{
  text-align: left;
}
.layui-btn-primary:hover{
  border-color:#eb6100 ;
}
.layui-table td a {
  margin-right: 8px;
}