/**
* topnav.css  ?????¡°?¨C????????¡±¡§ing
*/

.HeadNav{ width: 100%; background: #fff;}
#TopNav{min-height: 46px; background: #fff;  padding: 0 40px 0 20px;}
#TopNav{zoom:1}
#topnav_rt{ float:right;}
.topnav-lf-item{margin-left: 26px;}
.topnav-rt-item {margin-right: 26px;}

.cid_topnav{ height: 46px;}
.topnavul{padding:0; padding-left:4px;}
.topnavul li{ float:left;list-style-type:none;}
.topnavul li a{ display:block; height:46px; line-height:46px;  position:relative;}
.topnavul li ul{ display:none}
.topnavul a{ font-size:16px; text-decoration:none; color:#333 !important;}
.topnavul a:hover{ color:#0082FC !important;}
.topnavul .active a, a.active{color:#0082FC !important;}
.children{
    position:absolute; background:#fff; padding:6px !important;
    box-shadow: 0 2px 8px -1px rgba(100,100,100,0.3);
    border-radius: 4px; z-index:999;
    margin-left: -30px;
}
.children li{ float:none !important; margin:0 !important;}
.children li a{display:block; padding:0 20px; text-align:left; font-size:14px;  height:36px !important; line-height:36px !important; border-radius: 6px; }
.children li a:hover{background: #F7FBFF;}
.topnavul li .topnav-i-arrow{
    display: inline-block; margin-left:5px; width:10px; height:10px;
    background:url(ico_down.png); background-size:100% auto;
    overflow:hidden; -webkit-transition:all 0.4s ease 0s;-moz-transition:all 0.4s ease 0s;-ms-transition:all 0.4s ease 0s;transition:all 0.4s ease 0s;
}
.topnavul li.hover .topnav-i-arrow{transform-origin:5px 5px;-webkit-transform: rotate(45deg);-moz-transform: rotate(180deg);transform: rotate(180deg);}

#topnav_index{display:inline; height:46px; line-height:46px;  float:left;}
#topnav_0 a{ padding: 0;}

/*dz*/
#Quater_headtop,#Quater_bar,.page_header{ height:50px !important;}
.Quater_user_info{ padding:8px 0 0 6px !important; margin-left:0 !important;}
.Quater_user_info .user-link{ top:50px !important;}
#Quater_bar{ border-bottom:none !important;}

/*¨¦¡ª???¡±¨¨???????¡®??¡§?¡è?¨¦?¡§*/
.page_header .page_title{ height:50px !important;}
.wendatil{ padding:10px 0 14px 52px !important;;}
.page_header .page_title .pgrtif{padding-top: 9px;}
.asktopht{ height:8px !important;}
.page_header .forctlist{ padding-top:10px !important;}
.page_header .newforumnav2 { padding-top:8px !important;}
.boardnav{ margin-top:-10px;}

/*??????&?¡±¡§??¡¤*/
#Quater_headtop .rttopnav{ position:relative;}
#Quater_headtop a:hover{ color:#0082fc;}
#Quater_headtop .Quater_user{ float:right;}

/*??????*/
.searchform ul{
    display:flex;
    justify-content:space-between;
    align-items: center;
}
#comsearch_box{width:100%; position:relative; z-index: 299;margin: 0 auto; }
#comsearch.iptcur{ border:1px solid #0082fc; background:#fff;}
#comsearch{
    background:#EEF3FA;
    margin:8px auto 0 auto;
    border:1px solid #EEF3FA;
    height:32px;
    position:relative;z-index:11;
    color:999;
    border-radius:20px;
    box-sizing: border-box;
}
#comsearch.flash_ts{
    transition:all .2s;
}
#comsearch li{ overflow:hidden;}
.bdcsMain{flex:1; float:none;}

.sou_txt{
    width:100%;
    height:30px;
    line-height:30px;
    background:none;
    border:0; padding:0 14px;
    color:#666;font-size:14px;float:left;outline:none; border-radius:20px; overflow:hidden;
}
.comsearch_search{
    width:48px;
    display: flex;
    align-items: center;
    text-align: center;
    flex-direction: column;
    justify-content: space-around;
    border-radius: 0px 20px 20px 0px;
}
#comsearch_search{
    display:block; width:48px; height:30px;font-size:0;line-height:30px;cursor:pointer;
    text-align:center;
    background:none;
    border:0;outline:0;
}
.topanv_ssico{ color:#617288;}
#comsearch.iptcur .topanv_ssico { color:#0082fc;}
#comsearch_search:hover {opacity: 1;}

.mymsg{position:relative; padding:8px 8px 0 0; cursor:pointer; margin-right: 10px;}
.mymsg i{ position:absolute; width:8px; height:8px; left:13px; top:8px; background:#FF3D23; border:none; border-radius:100px;}

.Quater_user_info .avatar img{ width: 32px; height: 32px; border-radius: 100px;}
.sqmsg{transition: opacity 0.3s ease 0s, transform 0.3s ease 0s, -webkit-transform 0.3s ease 0s; }
.sqmsg.asksm{opacity: 0;transform: scale(0);}

/* ?¡­?????¨C???? */
.Quater_user a{ color:#8496ab;}
.Quater_user a:hover{ color: #0082fc; text-decoration: none; }
#search-box{ box-sizing:border-box; width:100% !important;}
#search-box::placeholder {
    color: #8496AB !important;
}


/*3.1*/
.el-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.el-col-8 {
}
.topsearch{
    width:40%;
}
.active_btn{
    background-color: #0082fc;
}
.active_btn .topanv_ssico{ color:#fff !important;}


/* login-btn */
.topnav_loginbtn {
    border-radius: 20px;
    font-size: 14px;
    color: #fff !important;
    padding: 5px 20px;
    background: linear-gradient(270deg, #0082FC 0%, #00BBFE 100%);
}
.topnav_loginbtn:hover {
    color: #fff;
    background: linear-gradient(60deg, #0070d8,#0082FC, #00BBFE,#0ec4fc, #0082FC, #0070d8);
    background-size: 400% 400%;
    animation: gradientBG 4s ease infinite;
}

@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/*?¡°???¡±???-?¡ã??¡À????*/
@media screen and (max-width: 1500px){
    .topsearch {
        width: 40% !important;
    }
}

@media screen and (max-width: 1300px){
    .topsearch {
        width: 30% !important;
    }
}
/*app-qrcode*/
.topnav-app-box{
    padding-right:18px;
    position:relative;
    color:#333;
}
.topnav-app-box:hover .topnav-qrcode{display: block;}

.topnav-app-head{
    display:flex;
    height:46px;
    align-items: center;
    font-size:16px;
}
.topnav-appicon{
    width:18px;
    height:20px;
    margin-top:3px;
    margin-right:3px;
    background:url('https://bbs.fanruan.com/api/nav/m-phone.svg');
    background-size:auto 20px;
}

.topnav-qrcode{
    display:none;
    position:absolute;
    width:220px;
    height: 262px;
    background-color:#fff;
    border-radius: 4px;
    margin-left:-60px;
    box-shadow: 0px 2px 16px 0px rgba(38,38,38,0.20);
    z-index:99;
    border: 1px solid #e4e7ed;
}
.topnav-qrcode .img-qrcode{
    display:block;
    width:162px;
    height:162px;
    margin:0 auto;
}
.topnav-qrcode .top-txt{
    display:flex;
    align-items: center;
    justify-content: center;
    font-size:14px;
    padding-top:8px;
}
.topnav-qrcode .top-txt span{
    margin-right:12px;
}
.topnav-qrcode .top-txt a{
    height:40px;
    line-height:40px;
    font-size:14px; color:#8C8C8C !important;
}

.foot-txt-gift{
    display:flex;
    align-items: center;
    justify-content: center;
}
.foot-txt-gift .qiandao-img-gift{
    display:inline-block;
    width:24px;
    height:24px;
    background:url('https://bbs.fanruan.com/static/img/icon_fundction_gift.png');
    background-size:24px auto;
    margin-right:8px;
}

.foot-txt-gift a{
    color:#FF7A45 !important;
    font-size:14px;
}
.foot-txt-gift a:hover{
    font-size:14px; color:#FF7A45 !important;
}
.topnav-qrcode::before{width:0px; height:0px; border:solid 8px; border-color:transparent transparent #e4e7ed transparent; overflow:hidden; z-index:9; position:absolute;top:-16px;left:50%; margin-left:-10px;content:" "}
.topnav-qrcode::after{width:0px; height:0px; border:solid 7px; border-color:transparent transparent #fff transparent; overflow:hidden; z-index:9; position:absolute;top:-14px;left:50%; margin-left:-9px;content:" "}