@charset "UTF-8";
/**********************************************
 * @Object      头部样式
 * @Authors     Foxs
 * @Link        http://www.yehuli.vip
***********************************************/
/*公共头部*/
.header-section{width: var(--pagesWidth);min-width: var(--MinWidth);max-width: var(--MaxWidth);margin:0px auto;padding: 10px 10px;}
.header-section .header-info{width: 100%;padding: 50px 50px 40px 50px;background-color: var(--ThemeColor,#2c2c2c);border-radius: 10px;position: relative;display: flex;flex-direction: column;align-items: center;}
.header-section .header-info .logo{color: #fff;}
.header-section .header-info .logo i{font-size: 70px;}
.header-section .header-info .webname{display: flex;flex-direction: column;align-items: center;padding: 15px 0px 20px 0px}
.header-section .header-info .webname .name{color: #fff;font-size: 20px;font-family: 'ali-fangyuan';letter-spacing: 2px;font-weight: bold;margin-bottom: 15px;}
.header-section .header-info .webname .slogan{font-size: 12px;color: #fff;background-color: var(--MatchColor,#db4646);padding: 4px 10px;border-radius: 3px;letter-spacing: 1px;}
.header-section .header-info .navs{display: flex;align-items: center;justify-content: center;padding: 10px 20px}
.header-section .header-info .navs a{padding: 5px 5px;font-size: 12px;text-decoration: none;color:#ddd;transition: all 0.5s;letter-spacing: 1px;margin: 0px 8px;cursor: pointer;}
.header-section .header-info .navs a:hover,
.header-section .header-info .navs a.item-on{color:var(--MatchColor,#db4646) ;border-radius: 3px;font-weight: bold;}

/*首页头部*/
.header-section .header-info .search{display: flex;align-items: stretch;width: 100%;max-width: 350px;}
.header-section .header-info .search .type{width: auto;padding: 12px 10px;background-color: #ffffff;position: relative;flex-shrink: 0;border-top-left-radius: 5px;border-bottom-left-radius: 5px;border-right: 1px solid #2c2c2c}
.header-section .header-info .search .type .it-default{cursor: pointer;}
.header-section .header-info .search .type .it{display: flex;align-items: center;color: #333;padding: 0px 5px;cursor: pointer;}
.header-section .header-info .search .type .it .ico i{font-size: 14px;}
.header-section .header-info .search .type .it .text{padding-left: 5px;}
/*笨猫搜索*/
.header-section .header-info .search .type .it-default[search-ident="benmao"] .ico i,
.header-section .header-info .search .type .it-benmao .ico i{color: #333}
/*百度搜索*/
.header-section .header-info .search .type .it-default[search-ident="baidu"] .ico i,
.header-section .header-info .search .type .it-baidu .ico i{color: #4e6ef2}
/*头条搜索*/
.header-section .header-info .search .type .it-default[search-ident="toutiao"] .ico i,
.header-section .header-info .search .type .it-toutiao .ico i{color: #e97556}
/*知乎搜索*/
.header-section .header-info .search .type .it-default[search-ident="zhihu"] .ico i,
.header-section .header-info .search .type .it-zhihu .ico i{color: #4e6ef2}
/*360搜索*/
.header-section .header-info .search .type .it-default[search-ident="360"] .ico i,
.header-section .header-info .search .type .it-360 .ico i{color: green}
/*天猫商城*/
.header-section .header-info .search .type .it-default[search-ident="tianmao"] .ico i,
.header-section .header-info .search .type .it-tianmao .ico i{color: #E51C23}
/*淘宝商城*/
.header-section .header-info .search .type .it-default[search-ident="taobao"] .ico i,
.header-section .header-info .search .type .it-taobao .ico i{color: #ff5c00}
.header-section .header-info .search .type .items{position: absolute;top: 45px;left: 0px;right: 0px;padding: 10px 0px;background-color: #fff;border-radius: 3px;display: flex;flex-direction: column;align-items: center;display: none;}
.header-section .header-info .search .type:focus .items{display: flex;}

.header-section .header-info .search .type .items .it{padding: 10px 0px}
.header-section .header-info .search .input{width: 100%;max-width: 250px;background-color: #ffffff;padding:8px}
.header-section .header-info .search .input input{padding:5px 10px;border: 0px;width: 100%;background-color: #ffffff;outline: none;color:#aaa}
.header-section .header-info .search .input input:focus{color:#666;background-color: #f0f0f0}
.header-section .header-info .search .type .items::before{
    content: '';
    top: -17px;
    left: 49px;
    height: 0;
    width: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #fff;
    position: absolute;
    z-index: 9;
}
.header-section .header-info .search .btn{display: flex;align-items: center;padding: 0px 20px;background-color: #fff;border-left: 1px solid #2c2c2c;font-size: 14px;flex-shrink: 0;border-radius: 0px;border-top-right-radius: 5px;border-bottom-right-radius: 5px}
.header-section .header-info .search .btn .ico i{transition: all 0.3s;color: #333}
.header-section .header-info .search .btn .ico:hover i{font-weight: bold;color: #333}
.header-section .header-info .search .btn .text{font-size: 14px;color:#333;margin-left: 3px}

@media screen and (max-width:768px){
    .container-section{width: 100%;min-width: 100%;max-width: 100%;padding-bottom: 70px;}
    .container-section{background-color: var(--BackColor,#f0f0f0);}
    .header-section{width: 100%;min-width: 100%;max-width: 100%;padding: 0px}
    .header-section .header-info{border-radius: 0px;}
    .header-section .header-info{margin-top: 0px;padding: 50px 10px;}
    .header-section .header-info .navs{padding: 10px 5px}
    .header-section .header-info .navs a{margin: 0px 3px}
    .header-section .header-info .index-navtab{display: none;}
    .header-section .header-info .search input{text-align: center;}
}


.header-section .userlogin{position: absolute;top: 30px;right: 20px;}
.header-section .userlogin .reg-or-login{padding:5px 10px;cursor: pointer;transition: all 0.5s ease 0s;display: flex;align-items: center;background-color:var(--MatchColor,#db4646);color: #fff;border-radius: 20px;text-decoration: none}
.header-section .userlogin .reg-or-login .text{padding-left: 5px;font-weight: bold;font-size: 12px;}
.header-section .userlogin .reg-or-login .ico i{font-size: 14px;}
.header-section .userlogin .reg-or-login.item-show{display: flex;}
.header-section .userlogin .reg-or-login.item-hide{display: none;}
.header-section .userlogin .userself{display: block;cursor: pointer;position: relative;padding-bottom: 30px;padding-right: 0px;}
.header-section .userlogin .userself .userinfo{display: flex;align-items: center;padding:0px 10px;}
.header-section .userlogin .userself .userinfo .headimg{display: block;width: 30px;overflow: hidden;}
.header-section .userlogin .userself .userinfo .headimg img{width: 30px;height: 30px;border-radius: 50%;border:3px solid #fff;}
.header-section .userlogin .userself .userinfo-slide{position: absolute;top: 47px;left: 0px;background-color: #fff;padding:20px 10px;width: 100%;display: none;border-radius: 10px;transition: all 0.5s;box-shadow: 0px 0px 10px #333;}
.header-section .userlogin .userself .userinfo-slide .nickname{font-size: 14px;color: #333;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;text-align: center;font-weight: bold;}
.header-section .userlogin .userself .userinfo-slide .viptitle{display: flex;justify-content: center;margin-top: 10px}
.header-section .userlogin .userself .userinfo-slide .viptitle .vipinfo{font-size: 12px;padding:3px 10px;background-color:var(--MatchColor,#db4646);color:#fff;margin-right: 5px;border-radius: 5px;font-weight: bold;}
.header-section .userlogin .userself .userinfo-slide .viptitle .vipinfo i{font-size: 14px;margin-right: 5px}
.header-section .userlogin .userself .userinfo-slide .viptime{display: block;padding: 10px 0px;font-size: 12px;color: #aaa;text-align: center;}
.header-section .userlogin .userself .userinfo-slide .viptime b{padding: 0px 5px;font-size: 12px;color: red}
.header-section .userlogin .userself .userinfo-slide .header-user-btns{display: flex;flex-direction: column;align-items: center;}
.header-section .userlogin .userself .userinfo-slide .header-user-btns .btn-item{padding: 8px 20px;font-size: 14px;background-color: #eee;color: #666;margin: 10px 0px;border-radius: 5px;transition: all 0.3s;}
.header-section .userlogin .userself .userinfo-slide .header-user-btns .btn-item:hover{background-color: var(--MatchColor,#db4646);color: #fff}
.header-section .userlogin .userself .userinfo-slide::before {
    content: '';
    top: -10px;
    left: 15px;
    height: 0;
    width: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #fff;
    position: absolute;line-height: 30px;
    z-index: 9;
}
.header-section .userlogin .userself:focus .userinfo-slide{display:block;}
.header-section .userlogin .userself:hover .userinfo-slide{display:block;}

.header-section .userlogin .userself .buyvip{display: flex;align-items: center;background-color:var(--MatchColor,#db4646);padding: 5px 30px;border-radius: 5px;margin-left: 5px;}
.header-section .userlogin .userself .buyvip .text{font-size: 12px;color: #ffe8aa;font-weight: bold;padding-left: 5px;}
.header-section .userlogin .userself .buyvip .ico i{color: #ffd391;}
.header-section .userlogin .userself.item-show{display: flex;}
.header-section .userlogin .userself.item-hide{display: none;}

@media screen and (max-width:768px){
    .header-section .userlogin{display: none;}
}
/*悬浮头部*/
.fixed-header{position: fixed;top: 0px;left: 0px;right: 0px;z-index: 999;padding: 0px;
    background-color: var(--ThemeColor,#2c2c2c);width: 100%;max-width: 100%;
    box-shadow: 0px 0px 10px #333;
    display: none;
}
.fixed-header .top-navtab{background-color: #eee;padding: 0px 15px;}
.fixed-header .top-navtab .navitems{
    width: var(--pageWidth);min-width: var(--MinWidth);max-width: var(--MaxWidth);
    height: auto;
    margin:0px auto;
    display: flex;align-items: center;
}
.fixed-header .top-navtab .navitems .logo{width:30px;height: 30px;display: flex;flex-direction: column;align-items: center;justify-content: center;background-color: #fff;flex-shrink: 0}
.fixed-header .top-navtab .navitems .search{width:30px;height: 30px;display: flex;flex-direction: column;align-items: center;justify-content: center;background-color: #fff;flex-shrink: 0}
.fixed-header .top-navtab .navitems .topnavs{width:100%;white-space: nowrap;overflow-x: scroll;overflow-y: hidden;text-align: justify;}
.fixed-header .top-navtab .navitems .topnavs::-webkit-scrollbar {display: none;}
.fixed-header .top-navtab .navitems a{display: inline-block;padding: 8px 4px;margin: 0px 5px;font-size: 12px;transition: color 0.5s;cursor: pointer;text-decoration: none;cursor: pointer;}
.fixed-header .top-navtab .navitems a:hover{color:var(--MatchColor,#db4646);text-decoration: none;font-weight: bold;}
.fixed-header .top-navtab .navitems a.item-on{color:var(--MatchColor,#db4646);font-weight: bold;}


.fixed-header .header-info{
    display: flex;align-items: center;justify-content: space-between;flex-direction: row;
    padding:10px 15px;
    border-top-right-radius: 0px;border-top-left-radius: 0px;
    width: var(--pageWidth);min-width: var(--MinWidth);margin:0px auto;max-width: var(--MaxWidth);
}
.fixed-header .header-info .left{width: 100%;display: flex;align-items: center;flex-shrink: 1;}
.fixed-header .header-info .left .logo{color: #fff;margin-right: 10px;}
.fixed-header .header-info .left .logo i{font-size: 60px;}
.fixed-header .header-info .left .webname{padding: 0px;align-items: flex-start;}
.fixed-header .header-info .left .webname .name{font-family: 'ali-fangyuan';margin-bottom: 10px;}
.fixed-header .header-info .left .webname .slogan{font-family: 'ali-fangyuan';}
.fixed-header .header-info .left .navs{margin-top: 0px;}
.fixed-header .header-info .left .navs a{margin: 0px 5px;}
.fixed-header .header-info .left .search{margin-top: 0px;padding: 5px 0px;margin-left: 30px;}
.fixed-header .header-info .search .type .items{box-shadow: 0px 0px 5px #ddd;}
.fixed-header .header-info .search .type .items::before{
    top: -23px;
}
.fixed-header .header-info .right{flex-shrink: 0;}
.fixed-header .header-info .right .cates{width: 50px;height: 100%;align-items: center;justify-content: center;display: none;color: #fff}
.fixed-header .header-info .right .userlogin{position: static;}
.fixed-header .header-info .right .userlogin .userself{padding-bottom: 10px;padding-top: 10px;}

@media screen and (max-width:768px){
    .fixed-header{box-shadow: none;}
    .fixed-header .header-info{width: 100%;min-width: 100%;max-width: 100%;padding: 5px;}
    .fixed-header .header-info .navs{padding:0px 5px;display: none}
    .fixed-header .header-info .left{padding-right: 0px;margin-right: 0px}
    .fixed-header .header-info .left .logo{display: none}
    .fixed-header .header-info .left .logo i{font-size: 24px;}
    .fixed-header .header-info .left .webname{align-items: center;display: none}
    .fixed-header .header-info .left .webname .name{font-size: 16px;margin-bottom: 0px;}
    .fixed-header .header-info .left .webname .slogan{padding: 2px;display: none}
    .fixed-header .header-info .left .search{max-width: 600px;margin-left: 0px;}
    .fixed-header .header-info .right{display: flex;justify-content: flex-end;display: none}
    .fixed-header .header-info .right .cates{display: block;width:20px}

    /*顶部导航*/
    .fixed-header .top-navtab{padding:0px 5px 0px 5px;background-color: #fff;}
    .fixed-header .top-navtab .navitems{width:100%;min-width: 100%;max-width: 100%}
    .fixed-header .top-navtab .navitems a{padding:10px 5px;margin:0px 5px;}
}