/*
Theme Name:YDB[亿点伴]
Theme URI:http://www.seoyh.net/hq
Author:一点优化
Author URI:http://www.seoyh.net/
Description:这是一款打酱油的主题
Version:3.1
*/

* html {
    zoom: 1
}

*,
:after,
:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

*:after, *:before, a, h1, h2, h3, h4, h5, svg, img, input, button, textarea, .transition {
    transition: ease-in-out 0.5s;
}

blockquote,
body,
dd,
div,
dl,
dt,
fieldset,
form,
h1,
h2,
h3,
h4,
h5,
h6,
input,
li,
ol,
p,
pre,
td,
textarea,
th,
ul {
    margin: 0;
    padding: 0
}

address,
caption,
cite,
code,
dfn,
em,
th,
var {
    font-style: normal;
    font-weight: 400
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 100%;
    font-weight: 400;
    font-weight: 600;
}

html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 62.5%;
    overflow-y: scroll;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%
}

body {
    font-size: 16px;
    letter-spacing: 2px;
    font: 16px/2 "cr", Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    font-family: '微软雅黑', "宋体", "Arial Narrow", Helvetica, sans-serif;
    text-align: left;
    -webkit-text-size-adjust: none;
    background: rgb(243 245 247);
}

hr {
    width: 100%;
}

a {
    color: inherit;
    text-decoration: none
}

a:focus,
a:hover {
    text-decoration: none
}

q:after,
q:before {
    content: ''
}

abbr,
acronym,
fieldset,
img {
    border: 0
}

img {
    vertical-align: top;
    max-width: 100%;
    height: auto;
}

ol,
ul,
li {
    list-style: none;
    box-sizing: border-box;
}

ul {
	padding: 0;
	list-style: none;
}

pre {
    background: #333;
    color: #fff;
    overflow-x: auto;
    border-radius: 10px;
}

button,
textarea,
input {
    height: 100%;
    border: 0;
    outline: none;
    cursor: pointer;
    background-color: transparent;
}

/* 主体开始 */
/* 公共属性 */
:root {
    --bg-color: #000;
    --font-color: #fff;
    --font-color-blue: #4589FF;
    --max-width: 1400px;
    --coon-cnt: #111419
}

#btn>li
{width: 16px;}

#btn>.current
{width: 24px;}

#focus > #left,
#focus > #right
{width: 45px;}


.nav-right,
.foo-coon,
.nav-wrap-s{
    width: 90%;
}

.ban-coon,
.hm-cat,
.hm-art,
.hal-coon,
.hmli-coon,
.hmgt-coon,
.hmtab-coon,
.hmlt-coon,
.cat-ban,
.cat-sub,
.cat-articles,
.single-bre,
.single-coon
{    width: 80%;}

.hmtab-li
{width: 20%}

.hm-cat-li,
.hmlat-body > ul > li,
.hal-li
{width: 25%}

.hal-img,
.hmlat-img,
.hmgt-img,
.catw-img
{width: 30%}

.hmli-li,
.hmgt-li,
.sidebar-footer,
.sidfo > div > .menu > li
{width: 33.33%}

.ban-img,
.hmlt-li,
article > ul > li,
.nav-previous,
.nav-next
{width: 50%}

.hmlat-box-w,
.hmgt-con,
.catw-con,
.hal-art-title
{width: 70%;}

.ban-coon-img,
.ban-coon-img > img
{width: 90%;}

nav,
header,
.nav-left,
.banner,
.ban-wra,
.ban-img > img,
.ban-coon-cn,
.nav-wrap,
.box-shadow,
#ban-ul>li,
#ban-ul>li>img,
.ban-ul-wrapper,
.ban-coon-nr,
.home-cat,
.image,
.hm-cat-title,
.hm-cat-coon > a > img,
.home-articles,
.hmart-list,
.home-thli,
.home-gratxt,
.home-tab,
.home-letter,
.hmlat-box-text > h3,
.wp-calendar-table,
.category,/*分类*/
.catb-img > img,
.cat-h1,
/*文章页*/
.single-page,
.sb-fy-img,
.sb-fy-img > img,
.sb-fy-title,
.meta-nav,
.sb-fy-title > p,
.hm-cat-title > h2
{width: 100%;}

/* 清除浮动 */
.ban-wra::after {
    content: "";
    display: table;
    clear: both;
}

#nav li:hover ul,
.ban-coon-img > img
{height: auto}

#nav li ul
{height: 0;}

.box-shadow
{height: 1px;}


.top-line
{height: 2px;}

#btn>li,
#btn>.current
{height: 3px;}

header,
.nav-wrap-s
{    height: 90px;}

.close > .nav-wrap-s
{height: 60px;}


.logo,
.image,
.nav-left,
.logo > a,
.logo > a > img,
.ban-ul,
.ban-wra,
.ban-img > img,
#ban-ul,
#ban-ul li,
#ban-ul li img,
#focus > #left,
#focus > #right,
.hm-cat-title,
.hm-cat-coon > a > img,
.catb-img > img,
.cat-h1,
.sb-fy-img > img,
.sb-fy-title,
.sb-fy-title > p
{height: 100%;}

.catb-img,
.ban-coon-cn,
.ban-ul-wrapper
{height: 40vh;}

.single-zl,
.single-content
{min-height: 50vh;}


#focus > #left,
#focus > #right
{line-height: 100px;}

.top-line,
.ban-img > img,
.sb-fy-title,
.sb-fy-title > p
{top: 0;}


.box-shadow
{top: 90px;}

.close > .box-shadow
{top: 60px;}

.foc-l,
.foc-r,
#focus > #left,
#focus > #right,
.cat-h1
{top: 50%;}

.hm-cat,
.hm-art,
.hal-coon,
.hmli-coon,
.hmgt-coon,
.hmtab-coon,
.hmlt-coon,
.cat-articles,
.fanye-s,
.single-bre,
.single-coon,
.single-content,
.single-fy,
.single-rearti,
.single-related
{margin-top: 20px;}

.ban-coon,
footer,
.foo-coon,
.cat-ban,
.cat-sub
{margin-top: 40px;}

.close > .nav-wrap-s  .logo > a
{padding-top: 5px}

.sl-b,
.nav-login i
{padding-top: 10px;}

.logo > a,
#nav  ul  li a
{padding-top: 20px;}

.hmgt-span,
.hmlat-span
{padding-top: 10%;}

#left
{left: -50px;}

#ban-ul,
.box-shadow,
.ban-img > img,
.ban-ul-wrapper:hover #left,
.ban-ul-wrapper:hover #left > .foc-l,
.sb-fy-title,
.cat-span,
.sb-fy-title > p
{left: 0}

.hmli-arl-li a:before
{left: -3px}

#btn
{left: 50%;}

.meta-nav,
.hal-titlte > span > a,
.hmlt-title > span > a
{padding-left: 10px;}

.sl-b,
#nav  ul  li a
{padding-left: 20px;}

.ban-coon,
.hm-cat,
.hm-art,
.hal-coon,
.hmli-coon,
.hmgt-coon,
.hmtab-coon,
.hmlt-coon,
.foo-coon,
.cat-ban,
.cat-sub,
.cat-articles,
.single-bre,
.single-coon
{margin-left: auto;}

.hm-cat-ul,
.hmlat-body > ul,
.hal-ul,
.hmli-ul,
.hmlt-ul,
.foo-tools,
article
{margin-left: -20px;}

.single-fy
{margin-left: -10px;}

.nav-previous > a, 
.nav-next > a
{margin-left: 10px;}

.secondary,
.ban-ul-wrapper:hover #right,
.ban-ul-wrapper:hover #right > .foc-r,
.sb-fy-title,
.cat-span
{right: 0}

#right{right: -50px}


.sl-b,
#nav > ul > li a
{padding-right: 20px;}

.ban-coon,
.hm-cat,
.hm-art,
.hal-coon,
.hmli-coon,
.hmgt-coon,
.hmtab-coon,
.hmlt-coon,
.foo-coon,
.cat-ban,
.cat-sub,
.cat-articles,
.single-bre,
.single-coon
{margin-right: auto;}

.single-fy
{margin-right: -10px}

.hm-cat-ul,
.hmlat-body > ul,
.hal-ul,
.hmli-ul,
.hmlt-ul,
.foo-tools,
article
{margin-right: -20px;}

.nav-previous > a, 
.nav-next > a
{margin-right: 10px;}

.hmlat-box:hover .hmlat-span
{bottom: -30px;}

.box-shadow,
.hmlat-box:hover .hmlat-span,
.sb-fy-title
{bottom: 0}

#btn,
.cat-span
{bottom: 5px;}

.hal-titlte,
.hmlt-title,
.hmgt-span,
.hmlat-span,
.close > .nav-wrap-s  .logo > a
{padding-bottom: 5px;}

.ban-coon-bn,
.sl-b
{padding-bottom: 10px;}

.logo > a,
#nav > ul > li a
{padding-bottom: 20px;}

.sb-fy-img
{padding-bottom: 15%;}



.hm-cat-img,
.hmli-arl-coon > a
{padding-bottom: 35%;}




.hmtab-nr a
{padding-bottom: 50%;}


.hmgt-img > a,
.catw-img > a
{padding-bottom: 65%;}

.hal-img > a,
.hmlat-img > a
{padding-bottom: 85%;}

#btn
{margin-bottom: 1px;}


.ban-coon-bn > p
{margin-bottom: 15px}

.ban-coon-bn > h2
{margin-bottom: 30px}



.widget-cat1
{margin: 0px -10px;}



.cat-tag
{margin: 15px -10px;}

nav .sub-menu
{margin: 10px 0}

.close nav .sub-menu
{margin: auto}

#btn>li,
#btn>.current
{margin: 1px;}

.fanye-s > a
{margin: 10px}

.cat-sub h2
{margin: 0px 5px;}

.hmlt-nr
{margin: 5px 20px;}


.hmgt-ftl > a,
.hmgt-title > h2,
.hmtab-h2 > h2,
.hmtab-span > a
{padding: 10px 20px;}



.hm-cat-coon,
.hmlat-box,
.hal-nr,
.hmli-arl,
.hmgt-lic,
.hmtab-nr,
.sidfo,
.cat-wz
{margin: 20px;}

.ban-coon-nr > button
{padding: 0}

.ban-ul-wrapper:hover #left, 
.ban-ul-wrapper:hover #left > .foc-l,
.ban-ul-wrapper:hover #right, 
.ban-ul-wrapper:hover #right > .foc-r{padding: 7px;}

.hmlat-box-w,
.hmgt-con,
.cat-sub a,
.cat-tag > a,
.hal-art-title
{padding: 0 10px;}

.ban-coon-nr > button > a,
.hm-cat-title > h2 > a,
.hmli-title,
.hmli-arl-ul,
.hmtab-nr > h3 > a
{padding: 10px}

.single-zl,
.hmlt-coon,
.nav-previous > a,
.nav-next > a,
.sb-fy-title
{padding: 20px;}

.catw-con,
.fanye-s > a,
.cat-span
{padding: 0 20px;}

.ban-coon-nr
{padding: 0 35px}

.widget-cat1 a,
.widget-cat1 span
{padding: 0px 10px;}

.ban-coon,
.cat-sub a,
.fanye-s > a
{border: 1px solid #949494;}

#nav li > ul,
#btn>li,
#btn>.current,
.ban-coon,
.ban-coon-img > img,
.ban-coon-nr > button,
.ban-coon-nr > button > a,
.hm-cat-coon,
.hmlat-box,
.hal-nr,
.hmli-arl,
.hmgt-lic,
.hmtab-nr,
.cat-ban,
.cat-wz,
.cat-sub a,
.fanye-s,
.fanye-s > a,
.single-bre,
.single-zl,
.nav-previous > a, 
.nav-next > a,
.hmgt-lb,
.hmtab-lb,
.hmlt-coon,
.sl-b
{border-radius: 6px;}

.ban-coon-nr > button > a
{border-radius: 50px;}

#btn{transform: translate(-50%);}

.cat-h1
{transform: translate(0,-10%);}

.foc-l,
.foc-r,
#focus > #left,
#focus > #right
{transform: translate(0,-50%);}

.hmlat-img > a,
.hm-cat-img,
.hal-img > a,
.hmli-arl-coon > a,
.hmgt-img > a
{    transform-origin: top;}

.logo > a,
.nav-wrap,
#nav > ul > li a,
.hm-cat-img,
.hs > a,
.hal-img > a,
.hmlat-img > a,
.hmli-arl-coon > a,
.hm-cat-title > h2 a,
.hmlat-box-text > h3 a,
.hmgt-img > a,
.hmgt-ftl > a,
.hmtab-span > a,
.hmtab-nr a,
.catw-img > a,
.cat-sub a,
.catw-con > h3 > a,
.widget-cat1 a,
.nav-previous > a,
.nav-next > a,
.meta-nav,
.hal-art-title > h3 > a,
.hmgt-con-title > h3 > a,
.hmlt-nr > h3 > a
{display: block;}


nav,
#nav li ul,
.nav-wrap-s,
#btn,
#ban-ul,
.ban-coon-cn,
.hmlat-box,
.hm-cat-title,
.hm-cat-ul,
.hmlat-body > ul,
.hmlat-span,
.hal-nr,
.hal-titlte,
.hal-ul,
.hmli-ul,
.hmli-arl-li,
.hmgt-ft,
.hmgt-title,
.hmgt-ftl,
.hmgt-ul,
.hmgt-lic,
.hmgt-span,
.hmtab-title,
.hmtab-h2,
.hmtab-span,
.hmtab-ul,
.hmlt-title,
.hmlt-ul,
.hmlt-nr,
.foo-tools,
.widget-cat1 > ul > li,
.sidfo > div > .menu,
.cat-wz,
article > ul,
.cat-sub > ul,
.cat-span,
.fanye-s,
.single-fy,
.nav-left,
.sb-fy-title > p
{display: flex;}

#checkbox,
.mobile-btn
{    display: none;}

.nav-wrap-s
{    margin: 0 auto;}


{    float: left;}


.ban-coon-img > img
{    float: right;}



body,
.ban-wra,
.ban-coon,
.ban-coon-cn,
.ban-ul-wrapper,
.ban-coon-img > img,
.hmlat-img,
.hm-cat-coon,
.hm-cat-img,
.hmlat-box,
.hal-nr,
.hal-img,
.hmli-arl,
.hmli-arl-coon,
.hmgt-img,
.hmgt-lic,
.hmtab-nr,
.hmtab-nr > a,
.cat-ban,
.cat-wz,
.catw-img,
.nav-previous > a, 
.nav-next > a,
.sb-fy-img,
.hmtab-nr > h3 > a,
.hmli-arl-li > a,
.hal-art-title > h3 > a,
.hmlat-box-text > h3 > a,
.hmgt-con-title > h3 > a,
.hmlt-nr > h3 > a,
.catw-con > h3 > a,
.sl-b
{overflow: hidden;}

.hmtab-nr > h3 > a,
.hmli-arl-li > a,
.hal-art-title > h3 > a,
.hmlat-box-text > h3 > a,
.hmgt-con-title > h3 > a,
.hmlt-nr > h3 > a,
.catw-con > h3 > a,
.sl-b
{text-overflow: ellipsis;}

.close,
.top-line
{   position: fixed !important;}

body,
.nav-wrap,
.header_nav_ul,
#nav  ul  li,
#ban-ul,
.ban-wra,
.ban-coon,
.ban-coon-cn,
.ban-ul-wrapper,
.hmlat-img,
.hm-cat-coon,
.hm-cat-img,
.hmlat-box,
.hal-img,
.hal-nr,
.hmli-arl,
.hmli-arl-coon,
.hmli-arl-li a:before,
.hmgt-img,
.hmgt-lic,
.hmtab-nr,
.hmtab-nr > a,
.cat-ban,
.cat-articles,
.cat-wz,
.catw-img,
.nav-previous > a, 
.nav-next > a,
.sb-fy-img,
.catw-con
{    position: relative;}

#nav li > ul,
#btn,
.image,
.foc-l,
.foc-r,
.secondary,
.ban-img > img,
.box-shadow,
#focus > #left,
#focus > #right,
.hmli-title,
.hm-cat-title,
.hm-cat-coon > a > img,
.cat-h1,
.sb-fy-img > img,
.sb-fy-title,
.cat-span,
.sb-fy-title > p
{   position: absolute;}

.image,
.ban-img > img,
.catb-img > img,
.sb-fy-img > img,
.hm-cat-coon > a > img
{object-fit: cover;}

#btn>li,
#btn>.current,
#focus > #left,
#focus > #right
{cursor: pointer;}

#nav ul li a,
.hmtab-nr > h3 > a,
.hmli-arl-li > a,
.hal-art-title > h3 > a,
.hmlat-box-text > h3 > a,
.hmgt-con-title > h3 > a,
.hmlt-nr > h3 > a,
.catw-con > h3 > a,
.sl-b
{white-space: nowrap;}

#btn,
.hmli-title,
.hm-cat-title
{z-index: 1;}

.nav-wrap
{z-index: 9999;}

.hmgt-con-title > h3 > a
{font-size: 18px;}

.hal-titlte > h2,
.hmli-title > h2,
.hmgt-title > h2,
.hmgt-ftl > a,
.hmtab-h2 > h2,
.hmtab-span > a,
.hmlt-title > h2,
.hmlt-title > span > a,
.catw-con > h3 > a,
.meta-nav
{font-size: 20px;}

.nav-login i,
.hmlat-title > h2,
.single-title > h1,
.hm-cat-title > h2
{font-size: 26px;}

#focus > #left,
#focus > #right
{font-size: 50px;}

.ban-coon-bn > p
{font-size: 1.8rem;}

.sb-fy-title > p
{font-size: 2.8rem;}

.cat-h1,
.ban-coon-bn > h2
{font-size: 3.8rem;}

.hmlt-nr > h3
{font-weight: 400;}

.meta-nav
{font-weight: 600;}

.sb-fy-title > p
{font-weight: 900;}

button > a,
#focus > #left,
#focus > #right,
.ban-coon-bn > h2,
.ban-coon-bn > p,
.cat-h1,
.sb-fy-title,
.hm-cat-title
{color: #fff;}

#focus > #left,
#focus > #right
{background: rgba(0, 0, 0, 0.3);}

#nav li  ul
{background: rgb(255 255 255);}

.close
{background: rgba(255,255,255,.3)!important; }

.ban-coon-nr > button,
.ban-coon-nr > button > a
{background: rgb(79 109 255);}

.ban-coon-cn,
.hm-cat-title
{background: rgb(42 42 42 / 25%);}

.nav-wrap,
footer,
.fanye-s,
.cat-sub a,
.hmgt-lb,
.single-bre,
.single-zl,
.nav-previous > a,
.nav-next > a,
.hmtab-lb,
.hmlt-coon
{background: #fff;}

/*.hmlat-span*/
{background: linear-gradient(rgba(0,0,0,0),rgb(255 255 255));}



#nav li  ul
{box-shadow: 0 0.03rem 0.7rem rgba(0,0,0,0.3);}

.box-shadow
{background-color: rgb(0 30 60 / 10%);}

.close
{box-shadow: 0 0.03rem 0.7rem rgba(0,0,0,0.3); }

.hmlat-box,
.hal-nr,
.hmli-arl,
.hmgt-lic,
.hmtab-lb,
.hmtab-nr,
.cat-wz,
.hmgt-lb,
.sl-b,
.single-zl,
.nav-next a,
.nav-previous a,
footer
{    box-shadow: 0px 0px 0px 0.4px rgba(0, 0, 0, 0.2);}

.box-shadow
{box-shadow: 0 -4px rgb(255 255 255 / 30%) inset, 0 0 0 transparent, 0 2px 5px rgba(0 0 0 / 20%) inset, 0 0 0 transparent;}

.cat-h1,
.hmli-title,
.ban-coon-bn > h2,
.ban-coon-bn > p,
.hm-cat-title > h2
{text-shadow: 0.1053em 0.1053em rgba(255,255,255,.2), 0.1842em 0.1842em 0.2em rgba(0,0,0,.2);}

.sb-fy-title
{text-shadow: 0.1053em 0.1053em rgba(255,255,255,.2), 0.1842em 0.1842em 0.2em rgb(0 0 0);}


.hm-cat-img > .image
{-webkit-mask: radial-gradient(circle farthest-side at bottom,#000 33%,transparent),linear-gradient(transparent,#000);}

.hal-nr .image,
.hmlat-box .image,
.hmgt-img .image,
.catw-img .image
{-webkit-mask: radial-gradient(circle farthest-side at left, #000 33%, transparent), linear-gradient(to left, transparent, #000);}


.hmtab-nr .image,
.hmli-arl-coon .image
{    -webkit-mask: radial-gradient(circle farthest-side at bottom,#0000 33%,transparent),linear-gradient(black,#0000);}


{-webkit-mask: linear-gradient(#000 20%,rgba(0,0,0,.6) 70%) 0 0/100% 1.3em;}



.sb-fy-title
{    backdrop-filter: blur(2px); 
    -webkit-backdrop-filter: blur(2px); }

.close,
.ban-coon-cn,
.hm-cat-title
{    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px); }
    
    
#nav li  ul,
.secondary
{transition: .3s;}

#btn>li,
#btn>.current
{transition: .5s;}

.nav-wrap-s,
.box-shadow,
.close > .box-shadow,
.close > .nav-wrap-s,
#focus > #left, 
#focus > #right,
.hmlat-box:hover .hmlat-span
{transition: all 0.3s linear;}

.close,
.nav-wrap
{transition: box-shadow .3s ease;}

#ban-ul
{transition: transform 0.5s ease-in-out;}

/*头部*/
.top-line
{background: rgb(193, 63, 63);}

.hmlat-body > ul,
.hal-ul,
.hmli-ul,
.hmgt-ul,
.hmtab-ul,
.hmlt-ul,
article > ul,
.cat-sub > ul,
.fanye-s
{flex-wrap: wrap;}

#ban-ul li{
    flex-shrink: 0;
    scroll-snap-align: center;
}

nav,
.nav,
.nav-left,
.nav-wrap-s,
.hmlat-span,
.hal-titlte,
.hmli-arl-li,
.hmgt-ft,
.hmgt-span,
.hmtab-title,
.hmlt-title,
.hmlt-nr,
.widget-cat1 > ul > li,
.cat-span,
.single-fy
{justify-content: space-between;}

#btn,
.sb-fy-title > p
{justify-content: center;}

#btn{
    
    background-color: rgb(0 30 60 / 10%);
    box-shadow: 0 1px rgb(255 255 255 / 35%), 0 2px 2px rgb(0 30 60 / 10%) inset;
}



#btn>.current{
    background-color: rgb(255 255 255 / 50%);
    box-shadow: 0 1px rgb(255 255 255) inset, 0 2px 2px rgb(0 30 60 / 15%);
}


thead,
tbody,
.wp-calendar-nav,
#focus > #left,
#focus > #right,
.hmlat-title,
.cat-h1,
.single-title,
.single-span,
.sb-fy-title > p,
.hm-cat-title > h2
{text-align: center;}

nav,
.nav-left,
.nav-wrap-s,
.ban-coon-cn,
.hal-titlte,
.hmli-arl-li,
.hmlt-title,
.hm-cat-title,
.sb-fy-title > p
{align-items: center;}

footer
{border-top: 1px solid #eee;}

.hal-titlte,
.hmgt-ft,
.hmtab-title,
.hmlt-title,
.hmlt-nr
{    border-bottom: 1px solid #ccc;}

.hmtab-h2 > .active,
.hmgt-title > .active
{border-bottom: 5px solid #eee;}

#left{
  border-bottom-right-radius: 5px;
  border-top-right-radius: 5px;
}
#right{
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
}

/*----默认隐藏二级菜单----*/
#nav li > ul 
{visibility: hidden;}

#nav li > ul 
{opacity: 0;}

/*----父级Hover，子级显示----*/
#nav li:hover ul 
{visibility: visible;}

#nav li:hover ul 
{opacity: 1;}
/*----父级目录----*/
#nav > ul > li {
	display: inline-block;
}

#nav > ul > li > i {
    background: transparent;
    display: inline-block;
    border-top: 2px solid;
    outline: none;
    border-left: 2px solid;
    height: 7px;
    width: 7px;
    margin-top: 17px;
    transform: rotate(-135deg);
    top: 15px;
}

#nav > ul > li:hover > i {
    margin-top: 21px;
    transform: rotate(-315deg);
    text-shadow: 0 3px 5px rgba(0,0,0,.4);
}







.hmgt-ul,
.hmgt-ftl > a,
.hmtab-ul,
.hmtab-span > a
{
    position: absolute;
    visibility: hidden;
    opacity: 0;
    transform: translateX(-20px);
    transition: all 0.1s linear;
    z-index: 1;
}


.show{
    width: 100%;
    position: relative !important;
    visibility: unset !important;
    transform: translateX(0) !important;
    opacity: 1 !important;
    z-index: 2 !important;
}


.foo-wz{
    width: 650px;
    text-align: center;
    overflow: hidden;
    padding: 3px 15px 0 15px;
    border-radius: 20px 20px 0px 0px;
    margin: 40px auto 0px auto;
    background: rgb(255 255 255 / 0%);
    box-shadow: 0px 0px 0px rgb(0 0 0 / 30%), 0px -2px 0px hsl(0deg 0% 100% / 60%);
    border: 1px solid rgb(224 228 235 / 43%);
}

.left{
    float: left;
}

.right{
    float: right;
}

/*----媒体判断----*/

@media screen and (max-width: 1440px) {

.nav-wrap-s,
.ban-coon,
.hm-cat,
.hm-art,
.hal-coon,
.hmli-coon,
.hmgt-coon,
.hmtab-coon,
.hmlt-coon,
.foo-coon,
.cat-ban,
.cat-sub,
.cat-articles,
.single-bre,
.single-coon
{    width: 98%;}


}

@media screen and (max-width: 980px) {

.hmli-li,
article > ul > li
{width: 100%;}

.hm-cat-li,
.hmlat-body > ul > li,
.hal-li,
.hmgt-li,
.hmtab-li
{width: 50%}


.hm-cat-ul,
.foo-tools
{flex-wrap: wrap;}

}


@media screen and (max-width: 767px) {

.nav-right,
#nav ul li a
{width: 70%;}

.bars,
.navigation,
.hmgt-li,
.hmlt-li,
.sidebar-footer
{width: 100%}

.navigation
{height: 100vh;}

.nav-right,
.nav-mobile
{height: 100%}

.close > .nav-wrap-s
{height: 60px;}



.ban-coon
{margin-top: 20px;}


.ban-coon-bn > p 
{margin-bottom: 5px;}

.ban-coon-bn > h2 
{margin-bottom: 10px;}

.ban-coon-bn > h2
{font-size: 2.8rem;}


#nav > ul > li {
	display: inline;
}

nav,
.mobile-btn {
	display: block;
}

.toggle,
.nav-mobile
{display: flex;}

.bars {
    height: 4px;
    background-color: rgb(115, 129, 146);
    border-radius: 4px;
}

#bar1, #bar3 {
    width: 70%;
}

#bar2 {
    transition-duration: .8s;
}

.nav-right,
.nav-mobile
{    align-items: center;}

.nav-right,
.nav-mobile
{justify-content: flex-end;}

.navigation {
	right: -102%;
}

.navigation[mobile="on"] {
	right: -2%;
}

#nav > ul > li  i {
    right: 15px;
}

.mobile-btn
{float: right;}

.navigation
{background: #fff;}

.close .navigation
{background: rgba(255,255,255,.3)!important;}

.close .navigation
{box-shadow: 0 0.03rem 0.7rem rgba(0,0,0,0.3);}

nav,
.toggle,
.sub-menu,
.nav-right,
.navigation,
#nav li:hover ul 
{position: relative;}

.toggle {
    width: 25px;
    height: 25px;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition-duration: .5s;
}

.nav-right
{flex-wrap: wrap;}

.close .navigation
{    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);}
nav,

.close nav,
.navigation
{transition: 0.5s;}

}


@media screen and (max-width: 679px) {

.ban-coon-cn
{flex-wrap: wrap;}

.foo-wz{
    width: 98%;
}

.ban-coon-cn,
.ban-ul-wrapper
{height: 55vh;}

.left,
.right
{float: none;}

.cat-tag 
{margin: 0px -10px;}

}


@media screen and (max-width: 580px) {

.hal-li,
.hmlat-body > ul > li{
    width: 100%;
}

}

@media screen and (max-width: 520px) {

.cat-tag
{display: none}

}

@media screen and (max-width: 480px) {

.sidfo > div > .menu > li
{width: 100%;}

.sidfo > div > .menu
{flex-wrap: wrap;}


.cat-tag 
{margin: 0px -10px;}

.sidfo > div > .menu > li > .sub-menu
{padding: 0 10px;}




}