@charset "UTF-8";

html{font-size:14px;}
html, body{
  font-family:"Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  font-size:1rem; font-weight:400; line-height:1.6; color:#333;
  background-color:#f5f5f5;
}
img{max-width:100%; height:auto; transition:all .5s;}

.col-gutters-10 {margin-right:-10px; margin-left:-10px;}
.col-gutters-10 > .col,
.col-gutters-10 > [class*="col-"]{padding-right:10px; padding-left:10px;}
.ellipsis{overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.list-none{list-style:none; margin:0; padding:0;}
a{color:#444; text-decoration:none; transition:all .4s;}
a:active,a:hover{color:#215E95; text-decoration:none;}
.fonts1{font-size:.95rem;}
.fonts2{font-size:.9rem;}
.fonts3{font-size:.85rem;}
.mb-6{margin-bottom:2.5rem !important;}
.mb-01{margin-bottom:-1px;}
.flex-grow-1{flex-grow:1;}
.text-gray{color:#bbb !important;}
.form-control{border-radius:2px;}
.form-control:focus{border-color:#215E95; box-shadow:none;}
.cursor-pointer{cursor:pointer;}
.hover-gray:hover{background-color:#f8f8f8;}

.owl-theme .owl-controls{margin-top:-25px;}
.site-navbar{background:#fff; width:100%; white-space:nowrap;}
.header-box{display:flex; width:100%; justify-content:space-between; align-items:center;}
.logo{height:100%;}
.logo img{max-height:80px;}
.user-login{display:flex; justify-content:flex-end; align-items:center;}
.user-login .headpic .pic{display:flex; justify-content:flex-end; align-items:center; margin-right:.5rem; width:3rem; height:3rem; overflow:hidden; border-radius:50%;}
.user-login .headpic img{max-height:3rem;}
.user-login .dropdown-menu{margin-top:-1px; padding:0;}
.user-login .dropdown-item{padding:.3rem 1.5rem;}
.nav-box{width:100%; background-color:#215E95; border-bottom:1px #ddd solid;}
.stuckMenu .nav-box{background-color:#fefefe;}
.site-navbar .nav{width:100%; display:flex; justify-content:space-between; flex-wrap:nowrap;}
.site-navbar .nav li{position:relative; z-index:99; font-size:1rem; overflow:visible; flex-grow:1; text-align:center;}
.site-navbar .nav li a{display: block; height:3rem; padding: 0 1.2rem; line-height:3rem; color:#fff;}
.site-navbar .nav li a:hover,
.site-navbar .nav li:hover > a,
.site-navbar .nav li.active > a{color:#FFF; background-color:#3B81BF;}
.site-navbar .nav li.focus > a{ color:#FFF; background-color:#f1f1f1;}
.site-navbar .nav li .dropdown{position:absolute; top:100%; left:50%; display:none; transform:translateX(-50%); min-width:100%; background-color:#fff; border:1px #eee solid; border-left-color:#215E95;}
.site-navbar .nav li .dropdown .item{padding:.5rem 1rem; height:auto; font-size:1rem; line-height:1.2; text-align:center; color:#215E95;}
.site-navbar .nav li .dropdown .item:hover{color:#FFF; background-color:#3B81BF;}
.site-navbar .nav li:hover .dropdown{display:block; background-color:#fff; background-color:rgba(242,245,248,.9); box-shadow:0 .5rem .5rem rgba(0,0,0,.4);}
.nav-logo{position:absolute; right:0.8rem; top:.5rem; display:none; padding:.25rem .5rem; background-color:#fff;}
.nav-logo span{width:2rem; height:.25rem; background:#333; display:block; margin-top:.3rem; margin-bottom:.3rem;}
.mobile-nav{height:100%; background:#242424; position:fixed; right:-15rem; top:0; width:11rem; overflow:hidden; display:none ;}
.mobile-nav ul{padding:1rem 0;}
.mobile-nav a{ display: block; border-bottom:1px #666 solid; height:3rem; line-height:3rem; padding-left:1rem; color:#fff; padding:0 2rem;}
.mobile-nav li.active a,
.mobile-nav li a:hover,
.mobile-nav a:active{ background:#fff; color:#242424;}

.titbar{display:flex; justify-content:space-between; align-items:center; background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAOCAYAAAAbvf3sAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAC9JREFUeNpiZEAAQST2e1zijAyogKAmJmJNRtbAQIomRlJtYCTHhtFQGvhQAggwAJCBGUbPbfWRAAAAAElFTkSuQmCC') repeat-x; background-position:0 50%;}
.titbar .title{padding:.5rem 1rem; font-size:1.4rem; background-color:#f5f5f5;}
.titbar .more{padding:.5rem 0 .5rem 1rem; font-family:'Orbitron', sans-serif; font-size:.5rem; background-color:#f5f5f5;}
.titbar2{display:flex; justify-content:space-between; align-items:center;}
.titbar2 .title{padding:.5rem 1rem; border-bottom:2px #215E95 solid;}
.index-box .index-news{font-size:.95rem;}
.index-box .list-focus{padding:1.5rem 1.5rem .2rem; height:100%; background-color:#fff; border:1px solid #ededed;}
.index-box .list-focus .item{margin-bottom:1rem;}
.index-box .list-focus .img{display:flex; margin-right:1rem; width:100%; overflow:hidden; align-items:center; box-shadow:2px 2px 3px rgba(0,0,0,.15);}
.index-box .list-focus .img img{width:100%; animation:fadein1 3s;}
.index-box .list-focus a:hover .img{box-shadow:2px 2px 3px rgba(39, 110, 81, 0.25);}
.index-box .list-focus a:hover img{transform:scale(1.1);}
.index-box .list-focus .tit{padding-top:.5rem;}
.index-box .list-focus .hr{padding-bottom:1rem; height:1px; border-top:1px #ccc dotted;}
.index-box .list-focus .item2{margin-bottom:.8rem;}
.index-box .list-focus .title{display:block;}
.index-box .list-focus .title span{display:inline-block; margin-top:-2px; margin-right:.6rem; width:.35rem; height:.35rem; vertical-align:middle; background-color:#ccc;}
.index-box .list-focus .title:hover span{background-color:#215E95;}
.index-box .list-focus.focus2{padding:1.1rem 1rem;}
.index-box .list-focus.focus2 .item2{margin-bottom:.7rem;}
.index-box .list-focus.focus2 .title span{margin-top:0; margin-right:.8rem; height:auto; width:2.6rem; color:#777; vertical-align:top; border-right:none; background-color:transparent;}

.course-box .item{display:block; margin-bottom:.85rem; background-color:#fff; font-size:.95rem;}
.course-box .item .img{display:flex; margin-right:1rem; width:100%; overflow:hidden; align-items:center;}
.course-box .item .img img{width:100%; animation:fadein1 3s;}
.course-box .item:hover img{transform:scale(1.1);}
.course-box .item .tit{text-align:center; font-weight:bold;}
.course-box .item .desc{display:flex; justify-content:space-between; font-size:.9rem;}

.teacher-box .item{position:relative; display:block; margin-bottom:.85rem; background-color:#fff; font-size:.95rem;}
.teacher-box .item .img{display:flex; margin-right:1rem; width:100%; overflow:hidden; align-items:center; box-shadow:2px 2px 3px rgba(0,0,0,.15);}
.teacher-box .item .img img{width:100%; animation:fadein1 3s;}
.teacher-box .item:hover img{transform:scale(1.1);}
.teacher-box .item .desc{position:absolute; bottom:0; left:0; right:0; padding:.3rem .1rem; display:flex; flex-direction:column; justify-content:center; align-items:center; color:#f1f1f1; background-color:#eee; background-color:rgba(0,0,0,.45);}
.teacher-box .item .desc .tit{height:1.5rem; line-height:1.5rem; text-align:center;}
.teacher-box .item .desc .tags{display:none; margin-top:.5em; font-size:.85rem;}
.teacher-box .item:hover .desc{top:0; height:100%;}
.teacher-box .item:hover .tags{display:block;}

.search-bar{padding:1rem 0; background-color:#fff;}
.search-bar .cates{display:flex; width:100%; font-size:.95rem;}
.search-bar .cates .catelabel{width:3.5rem; flex-shrink:0;}
.search-bar .cates .catelabel.active a{color:#215E95; font-weight:bold;}
.search-bar .cates li{display:inline-block; padding-right:1.5rem; font-size:.95rem; white-space:nowrap;}
.search-bar .cates li.first{margin-right:.5rem;}
.search-bar .cates li.active a{color:#215E95; font-weight:bold;}

.news-box{padding:1rem; font-size:.95rem; background-color:#fff;}
.news-item .item{margin-top:.5rem; padding-top:.5rem; padding-bottom:1rem; border-bottom:1px #ddd dotted;}
.news-item .item img{opacity:.8;}
.news-item .item a:hover img{opacity:1;}
.news-item .item .pic{float:left; padding-right:1rem; width:100px;}
.news-item .item .pic span{display:inline-block; max-height:86px; overflow:hidden;}
.news-item.list .item .pic{float:left; padding-right:1rem; width:200px;}
.news-item.list .item .pic span{display:inline-block; max-height:146px; overflow:hidden;}
.news-item .item .tit{display:table-cell; width:1000px;}
.news-item .item .item-t{padding-bottom:.3rem; font-size:1rem; line-height:1.6rem; font-weight:normal;}
.news-item.list .item .item-t{display:block; border-bottom:1px #f0f0f0 solid;}
.news-item .item .dates{display:inline-block; margin-left:.5rem; padding-left:1rem; font-size:.8rem; line-height:.8rem; color:#999; white-space:nowrap; border-left:2px #f5c6c6 solid;}
.news-item .item .name-t{margin-top:.2rem; margin-bottom:.5rem; color:#888; font-size:.8rem;}
.news-item .item .name-t a{color:#f13a3a;}
.news-item .item .item-desc{color:#777;}
.news-hot-box{padding:1rem .5rem; font-size:.95rem;}
.news-hot-box li{display:flex; margin-bottom:.8rem; width:100%; align-items:flex-start;}
.news-hot-box li .badge{flex-shrink:0; margin-right:.8rem; padding:0; width:1.5rem; height:1.5rem; font-size:.95rem; line-height:1.5rem; font-weight:normal; background-color:#f7e0e0; text-align:center; border-radius:50%;}
.news-hot-box li a{}
.news-hot-box li:first-child .badge{background-color:#ff6600;}
.news-hot-box li:nth-child(2) .badge{background-color:#ff9900;}
.news-hot-box li:nth-child(3) .badge{background-color:#ffcc00;}

.news-content .news-view-content img{height:auto !important;}

.course-view-header{padding:3rem 0; background-color:#fff;}
.course-view-header .img{position:relative; display:flex; justify-content:center; align-items:center; overflow:hidden;}
.course-view-header .img span{}
.course-view-header .img img{width:100%;}
.course-view-header .cons{padding:.5rem; display:flex; width:100%; height:100%; flex-direction:column; justify-content:space-between;}
.course-view-header .tit{margin-bottom:.8rem; padding-bottom:.6rem; font-size:1.5rem; border-bottom:1px #ccc solid; white-space:nowrap;}
.course-view-header .sec{flex-grow:2; display:flex; flex-direction:column; justify-content:space-around; font-size:.9rem;}
.course-view-header .hits{color:#999; font-size:.95rem;}
.course-view-header .hits span{display:inline-block; margin-right:1rem;}
.course-view-header .desc{margin-bottom:.4rem;}
.course-view-header .foot .ab-btn a{margin:0; padding:0 2rem; width:auto; height:2.6rem; font-size:1.2rem; line-height:2.6rem; color:#fff; background-color:#007bff; border-radius:.5rem;}

.course-view-header.video{padding:0; background-color:#222;}
.course-view-header.video .videos{display:flex; align-items:stretch;}
.course-view-header.video .videos #player-container-id{width:100%;}
.course-view-header .headtit{padding:.5rem 1rem; font-size:1.2rem; border-bottom:1px #bbb solid;}
.course-view-header .items{height:100%; color:#bbb;}
.course-view-header .items{position:relative; font-size:.95rem;}
.course-view-header .items .items-body{overflow-y:auto;}
.course-view-header .items .toggleitems{position:absolute; top:0; left:0; bottom:0; display:flex; align-items:center; width:.6rem; height:100%;}
.course-view-header .items .toggleitems span{display:inline-block; width:100%; height:3rem; line-height:3rem; background-color:#2a2a2a; cursor:pointer;}
.course-view-header .items .item.open{padding-bottom:1rem;}
.course-view-header .items .item .item-p{padding:.3rem .2rem;}
.course-view-header .items .item .item-p.active{background-color:#555;}
.course-view-header .items .item .item-p:hover{background-color:#333; cursor:pointer;}
.course-view-header .items .no{margin-right:.5rem; width:1.5rem; flex-shrink:0; text-align:right;}
.course-view-header .items .children{display:none; padding:.3rem 0;}
.course-view-header .items .children.active{display:block;}
.course-view-header .items .item .item-c{position:relative; padding:.3rem .2rem .3rem 2rem;}
.course-view-header .items .item .item-c.active{background-color:#555;}
.course-view-header .items .item .item-c:hover{background-color:#333; cursor:pointer;}
.course-view-header .items .item .item-c .tit{position:absolute; top:0; bottom:0; left:2.5rem; right:.5rem; padding-top:.36rem; font-size:.85rem; border-bottom:none;}
.course-view-header .items .children .progress{flex-grow:2; height:1.4rem; font-size:.8rem; background-color:#444;}
.course-view-header .items .children .progress-bar.bg-rate{background-color:#0077c7;}
.course-view-header .items .children .percentage{width:2.5rem; flex-basis:1; flex-shrink:1; text-align:right;}
.course-v-title{padding:1rem 0; background-color:#444;}
.course-v-title .title{font-size:1.2rem; color:#ccc;}
.course-v-title .title .t{color:#999;}
.course-v-note{padding:1rem 0; background-color:#444;}
.note-edit-box{padding:.3rem; color:#ccc; font-size:.85rem; border:1px #999 solid; border-radius:.3rem;}
.note-edit-box .form-control{padding:0; color:#ccc; font-size:.85rem; overflow-y:hidden; background-color:transparent; border:none; box-shadow:none;}
.note-edit-box .btn{font-size:.95rem;}

.course-view-box{padding:2rem 0 3rem; background-color:#f8f8f8;}
.course-view-box .nav-tabs{}
.course-view-box .nav-tabs .nav-item{padding-left:2rem; padding-right:2rem;}
.course-view-box .nav-tabs .nav-item.show .nav-link, .course-view-box .nav-tabs .nav-link.active{border-color:transparent; border-bottom-width:2px; border-bottom-color:#215E95;}
.course-view-box .nav-tabs .nav-item:hover{border-top-color:transparent; border-left-color:transparent; border-right-color:transparent;}
.course-view-box .news-content{background-color:#fff;}
.course-view-box .titbar2{border-bottom:1px #ccc solid;}
.course-view-box .titbar2 .title{margin-bottom:-1px;}
.course-view-box .content{padding:2rem;}
.course-view-box .course-slide{}
.course-view-box .course-slide .item{margin-top:.2rem; margin-bottom:.6rem; padding:1rem;}
.course-view-box .item-box{padding-top:1rem; padding-bottom:3rem; font-size:.95rem;}
.course-view-box .item-box .item.open{padding-bottom:1rem;}
.course-view-box .item-box .item .item-p{padding:.5rem 1rem;}
.course-view-box .item-box .item .item-p:hover{background-color:#f5f5f5; cursor:pointer;}
.course-view-box .item-box .no{margin-right:1rem; width:2rem; flex-shrink:0; text-align:right;}
.course-view-box .item-box .children{display:none; padding:.5rem 0;}
.course-view-box .item-box .item .item-c{position:relative; padding:.3rem 1rem .3rem 4rem;}
.course-view-box .item-box .item .item-c:hover{background-color:#f5f5f5; cursor:pointer;}
.course-view-box .item-box .item .item-c .tit{position:absolute; top:0; bottom:0; left:4.5rem; right:5rem; padding-top:.36rem;}
.course-view-box .item-box .children .progress{flex-grow:2; height:1.4rem; font-size:.8rem;}
.course-view-box .item-box .children .progress-bar{background-color:#66ccff;}
.course-view-box .item-box .children .percentage{width:3.5rem; flex-shrink:1; text-align:right;}

.course-view-box.items {}
.course-view-box.items .item-box .item .item-c .tit{position:static;}

.teacher-box.index{margin:3rem 0 5rem;}
.teacher-box .titbar3 .title{background-color:#f5f5f5;}
.teacher-box .item{position:relative; display:block; margin-bottom:.85rem; background-color:#fff; font-size:.95rem;}
.teacher-box .item .img{display:flex; margin-right:1rem; width:100%; overflow:hidden; align-items:center; box-shadow:2px 2px 3px rgba(0,0,0,.15);}
.teacher-box .item .img img{width:100%; animation:fadein1 3s;}
.teacher-box .item:hover img{transform:scale(1.1);}
.teacher-box .item .desc{position:absolute; bottom:0; left:0; right:0; padding:.3rem .1rem; display:flex; flex-direction:column; justify-content:center; align-items:center; color:#f1f1f1; background-color:#eee; background-color:rgba(0,0,0,.45);}
.teacher-box .item .desc .tit{height:1.5rem; line-height:1.5rem; text-align:center;}
.teacher-box .item .desc .tags{display:none; margin-top:.5em; font-size:.85rem;}
.teacher-box .item:hover .desc{top:0; height:100%;}
.teacher-box .item:hover .tags{display:block;}

.exam-checkbox{width:2rem; flex-shrink:0;}
.exam-checkbox input[type='radio']{display:none;}
.exam-checkbox input[type='radio']+label{display:inline-block; margin-top:.3rem; margin-bottom:0; width:1rem; height:1rem; border-radius:50%; border:4px solid #eee; background-color:#eee; box-shadow:0 0 0 1px rgba(0,0,0,0.3);}
.exam-checkbox input[type='radio']:checked+label {border-color:#fff; background-color:#0069d9;}
.exam-checkbox input[type='checkbox']{display:none;}
.exam-checkbox input[type='checkbox']+label{position:relative; display:inline-block; margin-top:.3rem; margin-bottom:0; width:1rem; height:1rem; border-radius:2px; border:4px solid #eee; background-color:#eee; box-shadow:0 0 0 1px rgba(0,0,0,0.3);}
.exam-checkbox input[type='checkbox']:checked+label:after{position:absolute; top:-.65rem; left:-.2rem; right:0; bottom:.3rem; content:"\2714"; font-size:1.2rem; border-width:0; color:#0069d9; background-color:transparent;}
.exam-countdown{color:#f13a3a;}
.question-nums{margin-left:.65rem;}
.question-noaswer{color:#444;}
.question-aswer{color:#3B81BF;}
.question-nums-list{max-height:300px; overflow:auto;}
.question-nums-list li{display:inline-block; width:2.1rem; height:2rem; margin:.25rem;}
.question-nums-list li a{display:block; text-align:center; line-height:2rem; border:1px #555 solid; border-radius:50%;}
.question-nums-list li.active a,
.question-nums-list li a:hover{color:#fff; background-color:#3B81BF;}
.exam_mask{position:fixed; top:0; bottom:0; left:0; right:0; z-index:999999; display:none; justify-content:center; align-items:center; background-color:#eee; background-color:rgba(0,0,0,.25);}
.exam_mask .tips{display:inline-block; padding:1rem 2rem; font-size:1.2rem; color:#F13A3A; text-align:center; background-color:rgba(255,255,255,.65); border-radius:.25rem;}

.about-banner{background-repeat:no-repeat; background-size:cover;}
.about-box{background-color:#fff;}
.about-cates{padding:0 0 3rem; height:100%; background-color:#f5f5f5;}
.about-cates .item a{display:block; padding:1rem 1rem; border-bottom:1px #999 dashed;}
.about-cates .item a:hover{background-color:#ccc;}
.about-cates .item.active a{color:#fff; background-color:#215E95;}
.about-view{padding:1rem 2rem 3rem;}
.about-view .content{margin-top:2rem;}

.comment-box .content,
.note-box .content{padding:.7rem 0;}
.comment-box .cons{flex-grow:1;}
.comment-box .img{padding-right:.6rem; width:5rem;}

.captcha-msg{display:none; font-size:.8rem; color:#F13A3A;}
.captcha-msg.success{color:green;}

.footer{background:#2c2e2e; color:#8b939d; font-size:0.875rem;}
.foot-nav{padding:1rem; background-color:#3d3f3e;}
.b-nav{text-align:center;}
.b-nav a{display: inline-block; padding:0 .8rem; color:#f1f1f1;}
.b-nav a:hover{ color:#D80808;}
.foot-container{display:flex; justify-content:space-between;}
.foot-container .foot-qrcode{display:flex; flex-grow:0; width:180px; text-align:center;}
.foot-container .foot-qrcode div{display:flex; padding:1rem; align-items:center;}
.foot-links{padding:1rem 0; text-align:center;}
.foot-links i{color:#f13a3a;}
.foot-links a{display:inline-block; margin-right:1rem; font-size:.85rem; white-space:nowrap; color:#aaa;}
.foot-links a:hover{color:#F13A3A;}
.foot-copyright{padding-bottom:2rem; text-align:center;}

.message-item{margin-bottom:10px; padding:10px 15px; border-bottom:1px #ddd dotted;}
.message-item ._icon{float:left; padding:5px; width:50px; height:35px;}
.message-item ._icon.msg_q{background:url(../img/msg_q.jpg) no-repeat;}
.message-item ._icon.msg_a{background:url(../img/msg_a.jpg) no-repeat;}
.message-item ._content{display:table-cell; font-size:14px;}
.message-item ._content span.name{margin-bottom:10px; font-weight:bold; color:#296ea9;}
.message-item ._content p{margin:0;}
.message-item ._content .content{padding:0px;}
.message-item ._content .content.content-q{color:#666;}
.message-item ._content .reply{padding:10px 10px 10px 15px; background:#f8f8f8; border-top:1px dotted #ccc;}
#messageForm, #messageForm .form-control{font-size:.85rem;}
#messageForm .col-xs-4{padding-left:5px; padding-right:5px;}
.message-query-title{margin-bottom:10px; padding:8px 10px; font-size:16px; background:#eee; background:rgba(255,255,255,.6);}
.message-query-title p{margin:0;}

.message-float-box{position:fixed; right:5px; bottom:5px; z-index:99999; width:56px; text-align:center; cursor:pointer; background:#fff; border-radius:0px;
  box-shadow: 0 0 10px 0 rgba(0,0,0,.5);
  animation-timing-function: ease-in-out;
  animation-name:breath;
  animation-duration: 2700ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-name: breathe;
  -webkit-animation-duration: 2700ms;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
}
.message-float-box.mini{right:1px; bottom:60px; padding:8px 5px; width:30px; background-color:#296ea9; color:#fff; line-height:18px;}
.message-float-box .message-mini{display:none;}
.message-float-box .message-mini .icon{padding-bottom:6px;}
.message-float-box.mini .message-mini{display:block;}
.message-float-box .msg-close{position:absolute; top:-10px; right:-2px; font-size:18px; color:#777;}
.message-float-box .header{height:40px; line-height:40px; font-size:.9rem; color:#fff; background:#296ea9;}
.message-float-box .content{font-size:.9rem;}
.message-float-box .content p{margin-bottom:0;}
.message-float-box .content > div{padding:8px 5px; color:#666; border-bottom:1px #ccc solid;}
.message-float-box .content > div:last-child{padding-bottom:10px;}
.message-float-box .content > div.hover:hover{color:#296ea9; background-color:#f5f5f5;}
.message-float-box.mini .msg-close,
.message-float-box.mini .header,
.message-float-box.mini .content{display:none;}

.site-gotop{position:fixed; display:none; bottom:10px; right:10px; width:40px; height:40px; font-size:30px; line-height:35px; border:1px #fff solid; border-radius: 40px; background: #000; color: #FFF; text-align: center; cursor: pointer;}
.site-gotop:hover,
.site-gotop:focus{color:#F13A3A;}

@keyframes fadein0 {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes fadein1 {
    from { opacity: .2; }
    to   { opacity: 1; }
}
@keyframes slideUp {
    from { height: 100%; }
    to   { height: 0; }
}

@media (max-width: 600px) {
  .nav-logo{padding:.6rem;}
  .news-item.list .item .pic{width:100px;}
}

@media (max-width: 500px) {
  .news-item .item .item-desc{display:none;}
}

@media (max-width: 767.98px) {
  .site-navbar .nav-box{display:none;}
  .nav-logo{display:block; top:.2rem;}
  .header-box{padding-right:3.5rem;}
  .header-box{display:block; border-bottom:1px #f5f5f5 solid;}
  .user-login{margin-right:-3rem; padding-bottom:1rem;}
}

@media (max-width: 991.98px) {
  .container {
      max-width:100%;
  }
}

@media (min-width: 576px) {
  
}