*, *::before, *::after {box-sizing: border-box;}
html, body {height: 100%;display: flex;flex-direction: column;margin: 0;font-size: 14px;}
.main{flex: 1 0 auto;}
/*row*/
.row{display: flex;flex-wrap: wrap;}
.row:after{display: table;content:"";clear: both;}
.row-1,.row-col-1{width:8.333333% !important;}
.row-2,.row-col-2{width:16.666667% !important;}
.row-3,.row-col-3{width:25% !important;}
.row-4,.row-col-4{width:33.333333% !important;}
.row-5,.row-col-5{width:41.666667% !important;}
.row-6,.row-col-6{width:50% !important;}
.row-7,.row-col-7{width:58.333333% !important;}
.row-8,.row-col-8{width:66.666667% !important;}
.row-9,.row-col-9{width:75% !important;}
.row-10,.row-col-10{width:83.333333% !important;}
.row-11,.row-col-11{width:91.666667% !important;}
.row-12,.row-col-12{width:100% !important;}
main.row-col-9{width:72% !important;}
aside.row-col-3{width:28% !important;}
.clear:after{
    display: table;
    content: "";
    clear: both;
}
hr {
    margin-top: 10px;
    margin-bottom: 10px;
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}
/* == Header == */
header{
  opacity: 0.99;
  border-bottom: 2px solid #69c;
  width: 100%;
  background: #0066cd;
  color: #fff;
}
header a{
  color: #fff;
}
header .center {
  position: relative;
  padding: 10px 0;
  margin: 0 auto;
  display: flex;
}
header .menu {
  display: none;
}
.comment-info{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.notice em{
    display: inline-block;
    background: #ff5b5b;
    width: 8px;
    height: 8px;
    font-style: normal;
    margin-right: 5px;
}
.notice.isread em{display:none}
header .box{border: aliceblue;padding: 5px;font-size: 20px;margin-left: 15px;position:relative;}
header .box .new_xx{position: absolute;top: 2px;right: 5px;width: 5px;height: 5px;border-radius: 5px;font-style: normal;color: red;font-size: 12px;}
header .out{padding: 5px;font-size: 20px;color: #ed2929;margin-left: 15px;}
#logohead {
  flex: 1;
  padding: 5px 10px;
}
#login-links {
  text-align: right;
}
#navbar {
    cursor: pointer;
    margin: 0;
    font-size: 13px;
    line-height: 1;
    padding: 4px 6px;
    background: #fff;
    white-space: nowrap;
    color: #333;
    border-bottom: 1px solid #eee;
}
#content {
    flex: 1 0 auto;
}
footer{
  background: #fff;
  padding: 10px;
  line-height: 2;
  color: #555;
}

.comment_list{
    margin-bottom: 10px;
}
.comment_list .head{
    padding: 10px 0;
    border-bottom: 1px solid #dfdfdf;
    margin-bottom: 5px;
}
.comment_list .reply{
    padding-top: 14px;
}
.comment_list .reply a{
    font-size: 12px;
    margin-right: 15px;
    color: #979797;
}
.comment_list .reply .rep{color: #b1daea;}
.comment_list .bock{border-bottom: 1px solid #dfdfdf;padding-bottom: 10px;margin-bottom: 10px;}
.comment_list .l{display: flex;align-items: center;}
.comment_list .l .user{
    font-size: 12px;
    color: #9b9b9b;
    margin-left: 10px;
}
.comment_list .m .cont{padding-top: 10px;font-size: 14px;}
.comment_list .m .blockquote{font-size: 12px;background: #f3f3f3;padding: 5px;margin: 0 0 10px;color: #333;line-height: 1.8;}
.comment_list .m .blockquote a{
    color: #25a4f8;
}
.comment_list .m .blockquote span{color: #1e70d7;margin-right: 5px;height: p;}
.comment_list .m img{width: 20px;margin: 0 5px 0 0;vertical-align: middle;border-radius: 3px;}
.comment_list .r{
}
.comment_list .avatar{
    height: 30px;
    width: 30px;
    display: block;
    border-radius: 5px;
}
.comment_form .put{margin-top:10px}
.comment_form .put .user{
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}
.comment_form .put .user span{
    font-size: 14px;
    color: #979797;
}
.comment_form .put .avatar{
    height: 15px;
    width: 15px;
    margin-right: 5px;
    border-radius: 5px;
    display: none;
}
.comment_form .reply_ing{
    font-size: 14px;
    color: #b1daea;
    display: none;
    margin-bottom: 8px;
}
.comment_form .reply_no{
    color: #a8a8a8 !important;
    font-size: 14px;
    margin: 4px;
}
/*page*/
.pages{
    display: -ms-flexbox;
    display: flex;
    list-style: none;
    margin-top: 10px;
    margin-bottom: 10px;
}
.pages li a{
    padding: 4px 12px;
    background: #fff;
    margin-left: -1px;
    border: 1px solid #dfdfdf;
    display: block;
} 
.pages li.active a{
    background: #dbc696;
    color: #fff;
}
.reply-kj{
    display: inline-block;
    background-color: #ff914d;
    color: #fff;
    border-radius: 3px;
    letter-spacing: 0.5px;
    padding: 8px 15px;
    
}
.sider{margin-left:25px}
@media (max-width: 640px) {
.sider{margin: 0;}
}
.top-3{color: #ff7575;}
.top-2{color:red}
.top-1{color:red}
.user-top{
    display: block;
    cursor: pointer;
    margin: 0;
    font-size: 13px;
    line-height: 1;
    padding: 10px 0;
    background: #dadada;
    white-space: nowrap;
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #4aafe3), color-stop(1, #99dcff));
    box-shadow: inset 0 1px 0 #82ddea, inset 0 -1px 2px #2fbaff;
    color: #fff;
}
.user-top a{
    padding: 3px 10px;
    display: inline-block;
    color: #fff;
}
.user-top a.active{
    color: #1e79a7;
    font-weight: bold;
}
.user-main{
    padding: 5px 0 15px;
}
.user-main a{
    color: #1e79a7;
    width: auto;
}
.user-main .button{
    display: inline-block;
    cursor: pointer;
    margin: 0;
    font-size: 13px;
    line-height: 1;
    font-weight: bold;
    padding: 4px 6px;
    border: 1px solid #5ac4ff;
    border-radius: 2px;
    white-space: nowrap;
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #4aafe3), color-stop(1, #89d7ff));
    box-shadow: inset 0 1px 0 #a5e0ff, inset 0 -1px 2px #99d8f8;
    color: #fff;
}
.user-nav{
    background: #fff;
    margin-bottom: 1px;
    margin-top: 5px;
    border-radius: inherit;
}
.user-body{
    padding: 15px;
}
.user-body .profile{
    line-height: 2;
}
.user-body .profile .avatar{
    width: 60px;
    height: 60px;
    border-radius: 5px;
}
.user-body .profile li{
    border-bottom: 1px solid #efefef;
    padding: 6px 0;
}
.user-nav a{
    padding: 6px 0;
    display: inline-block;
    margin: 0 10px;
}
.user-nav .active{border-bottom: 1px solid #4482b3;}
.post_ub{
    font-size: 14px;
    margin-top: 5px;
    cursor: pointer;
}
.subtip{
    font-size: 14px;
    color: #f71e1e;
}
.tagPostList{
  padding: 0 0px 10px;
}
.tagPostList li{
  float:left;
  padding: 2px 5px;
  margin: 0 5px 5px;
  font-size: 14px;
  color: #1ba8ac;
}
.tagPostList li.on{
  background: #e4e4e4;
  border-radius: 3px;
}
label{
  position:relative;
  margin-right: 0;
  padding-right: 0;
  cursor: pointer;
  display: inline-block;
}
label span{
  font-size: 14px;
  margin-left: 2px;
}
label input[type=radio]{
  /*clip: rect(0, 0, 0, 0);*/
  cursor: pointer;
  width: 13px;
  height: 13px;
}
/*other*/
.mx{margin:0 auto}
.inp{padding: 8px 8px;margin-bottom: 10px;border: 1px solid #ccc;border-radius: 3px;}
.popRemind{display:none;z-index:999;padding:4px;}
.popRemind .bg{z-index:-1;position:absolute;left:0;top:0;height:100%;width:100%;opacity:0.2;border-radius:4px}
.popRemind .conBox{
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(8px);
  color: rgb(255, 255, 255);
  padding: 8px 20px;
  border-radius: 40px;
  font-size: 0.85rem;
  font-weight: 500;
  z-index: 9999;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
  font-family: Inter, sans-serif;
  letter-spacing: 0.2px;
}
.popRemind .error.conBox{background: #ff8181;}
.popRemind .con{font-size:14px;color:#FFFFFF;text-align:center}
.modal-open {
  overflow: hidden;
}

.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1050;
  display: none;
  overflow: hidden;
  outline: 0;
}

.modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto;
}

.modal-dialog {
  position: relative;
  width: auto;
  margin: 0.5rem;
  pointer-events: none;
}

.modal.fade .modal-dialog {
  transition: transform 0.3s ease-out;
  transform: translate(0, -25%);
}

.modal.show .modal-dialog {
  transform: translate(0, 0);
}

.modal-dialog-centered {
  display: flex;
  align-items: center;
  min-height: calc(100% - (0.5rem * 2));
}

.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  pointer-events: auto;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0.3rem;
  outline: 0;
}
.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  background-color: #000;
}

.modal-backdrop.fade {
  opacity: 0;
}

.modal-backdrop.show {
  opacity: 0.5 !important;
}

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0.4rem 0.8rem;
  border-bottom: 1px solid #e9ecef;
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
}

.modal-header .close {
  padding: 0.5rem;
  font-size: 18px;
  margin: -0.4rem;
  border: 0;
  background: #fff;
}

.modal-title {
  margin-top: 5px;
}

.modal-body {
  position: relative;
  flex: 1 1 auto;
  padding: 15px;
}

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 10px;
  border-top: 1px solid #e9ecef;
}

.modal-footer > :not(:first-child) {
  margin-left: .25rem;
}

.modal-footer > :not(:last-child) {
  margin-right: .25rem;
}

.modal-scrollbar-measure {
  position: absolute;
  top: -9999px;
  width: 50px;
  height: 50px;
  overflow: scroll;
}
.modal-content .button{
    padding: 5px 10px;
    border-radius: 5px;
}
.modal-content .button.close{
    background: #999999;
}
@media (min-width: 576px) {
  .modal-dialog {
    max-width: 500px;
    margin: 1.75rem auto;
  }
  .modal-dialog-centered {
    min-height: calc(100% - (1.75rem * 2));
  }
  .modal-sm {
    max-width: 300px;
  }
}
.show{display:block}
.fade.show {
    opacity: 1;
}
.fade{opacity: .5;
    transition: opacity .6s;
}
/* color */
.white{background: #fff;}
.mr-5{margin-right:25px}
.mr-4{margin-right:20px}
.mr-3{margin-right:15px}
.mr-2{margin-right:10px}
.mr-1{margin-right:5px}
.ml-5{margin-left:25px}
.ml-4{margin-left:20px}
.ml-3{margin-left:15px}
.ml-2{margin-left:10px}
.ml-1{margin-left:5px}

.pr-3{padding-right:15px}
.pr-2{padding-right:10px}
.pr-1{padding-right:5px}
.pl-3{padding-left:15px}
.pl-2{padding-left:10px}
.pl-1{padding-left:5px}

.mt-3{margin-top:15px}
.mt-2{margin-top:10px}
.mt-1{margin-top:5px}
.mb-3{margin-bottom:15px}
.mb-2{margin-bottom:10px}
.mb-1{margin-bottom:5px}

.pt-3{padding-top:15px}
.pt-2{padding-top:10px}
.pt-1{padding-top:5px !important}
.pb-3{padding-bottom:15px}
.pb-2{padding-bottom:10px}
.pb-1{padding-bottom:5px !important}

.px-0{padding:0 !important}

.text-r{text-align:right}
.text-l{text-align:left}
.text-c{text-align:center}
.float-r{float:right}
.float-l{float:left}

.d-none{display:none}
.x-none{display:none;}
.thread-user-info{
    font-size: 11px;
}
.thread-user-info .avatar{
    width: 30px;
    float: left;
    margin-right: 5px;
    border-radius: 5px;
}
.thread-user-info span{
    margin-right: 10px;
    color: #a5a5a5;
}
.thread-user-info .username{
    font-size: 13px;
    font-weight: bold;
}
.block{
  padding: 15px;
  background: #fff;
  background-color: #fff;
  margin-bottom: 10px;
  box-shadow: 3px 3px 10px rgb(224 224 224 / 10%);
}
.block .head{}
.block .body{}
.block .foot{}
@media (max-width: 640px){
  .container{width:100%;}
  footer .center {padding:0 10px}
  .row>main {margin: 0 10px;}
  .row.mt-3{margin-top:0}
  .row-col-1,.row-col-2,.row-col-3,.row-col-4,.row-col-5,.row-col-6,.row-col-7,.row-col-8,.row-col-9,.row-col-10,.row-col-11,.row-col-12{width:100% !important}
  main.row-col-9{width: 100% !important;}
  aside.row-col-3{width: 100% !important;}
  header .menu{display:inline-block;width: 100px;font-size: 22px;padding: 0 10px;}
  .links{padding-left:10px}
  .m-none{display: none !important;}
  .x-none{display: block !important}
  aside{padding-left: 0 !important;}

  .login-links-click{display: inline;}
  #logohead {text-align:center}
  #login-links{    width: 100px;}
  #login-links span{font-size: 20px;padding: 5px 10px;position: relative;}
  .noticexx {display: inline;}
  .noticexx em{font-size: 12px;position: absolute;top: 2px;right: 5px;width: 5px;height: 5px;border-radius: 5px;font-style: normal;color: red;}
  #login-links ul {position: absolute;width: 120px;right: 5px;top: 50px;background: #fff;border-radius: 5px;-webkit-box-shadow: 0px 5px 30px -5px rgb(0 36 100 / 30%);padding: 8px 0;display: none;}
  #login-links ul.open{display: block;}
  #login-links ul a {font-size: 15px;margin-left: 0;display: block;text-align: left;color: #333;padding: 8px 10px;}
  #login-links ul a:hover {background: #f1f1f1;}
}