/*
注1：配合 TanULMenu.js 使用
注2：使用 UL、LI 制作下拉菜单：菜单定位div 的名称 TanMenu01Div 要与页面文件中的名称一致
注3：使用示例如下：

<!--菜单 1-->
<div class="TanMenu01Div">
    <ul>
        <li>
            <a href="#">首页</a>
        </li>
        <li>
            <!--当前菜单项-->
            <a href="#" class="curA">师资队伍</a>
            <!--下拉菜单 -->
            <ul>
                <li>
                    <a href="#">师资队伍123</a>
                </li>
                <li>
                    <a href="#">师资队伍abc</a>
                </li>
            </ul>                
        </li>
    </ul>
</div>

*/


/*不在 大屏 上显示：手机 上需要显示*/
.pcHide {
    display: none !important;
}

/*************主菜单使用*************/

/*菜单通栏底色*/
.dlMainMenuBar {
    /*设置通栏高度，否则背景色无效
    height: 0.8rem;*/
    
    position: absolute;
    top: 0.5rem;
    
}
/*菜单定位div*/
.TanMenu01Div {
    /*position: absolute;*/
    width: 100%;
    /*行高与通栏高度相同，则文字自动上下居中*/
    line-height: 0.8rem;
}

/*主菜单栏只显示到二级子菜单栏：三级子菜单栏（第3个ul）高度为 0，不显示*/
.TanMenu01Div>ul>li>ul>li>ul {
    height: 0;
    width: 0;
    overflow: hidden;
}
/*手机菜单按钮不显示*/
.menuPhoneArray {
    display: none;
}


/*所有 ul li 共用*/
.TanMenu01Div ul, li {
    /*转换文本：每个单词以大写字母开头*/
    text-transform: capitalize;
    /*不显示前缀圆点*/
    list-style-type: none;
    padding: 0;
    margin: 0;
}
/*所有 a 共用*/
.TanMenu01Div a {
    text-decoration: none;
    position: relative;
    /*设置为 block 时，a 的宽度与 li 的宽度相同；inline-block 时 a 自动宽度
    display: block;*/
    display: inline-block;
    height: 100%;
    color: #EFEFEF;
    font-family: SourceHanSansSC-Regular;
    font-size: 0.24rem;
}


/*主菜单栏*/
.TanMenu01Div>ul {
    /*此方式，每个 li 一样宽，菜单项文字不同时，效果不好
    display: flex;
    flex-direction: row;
    justify-content: space-between;*/
    
    /*此方式，菜单项文字不同时，宽度不同
    注1：ul 使用 display: table 时，li 使用 display: table-cell ，则 li 根据文字多少自动分配宽度，均匀分布充满整行。 
    注2：ul 使用 display: block 时，全部 li 靠左挨着显示。li 使用 display: block 时 li 纵向排列。*/
    display: table;
    width: 100%;
    height: 100%;

    /*background-color: var(--jwcBlue);*/
}
/* 主菜单栏，主菜单项：页面不同，可能需要修改项 background */
.TanMenu01Div>ul>li {
    height: 100%;
    /*直接指定每个菜单项的宽度
    width: 10%;*/
    /*主菜单项：横向，根据文字多少自动分配宽度*/
    display: table-cell;
    text-align: center;
    
    /*background-color: yellow*/
}

/* 主菜单栏，主菜单项：显示竖线 
.TanMenu01Div>ul>li::after {
    content: '';
    height: 0.2rem;
    width: 0.02rem;
    background-color: white;
    float: right;
    top: 0.5rem;
    margin-top: 0.32rem;
}
.TanMenu01Div>ul>li:last-child::after {
    width: 0;
}*/

/* 主菜单栏，主菜单项：第1项、最后1项，特定设置 */
.TanMenu01Div>ul>li:first-child {
    /*text-align: left;
    background-color: #ccc;*/
}
.TanMenu01Div>ul>li:last-child {
    /*text-align: right;
    background-color: #ccc;*/
}
/* 主菜单栏，主菜单项：链链接 特定设置*/
.TanMenu01Div>ul>li>a{
    /*font-size: 0.12rem;
    color: #fff;*/
}
/* 主菜单栏，主菜单项：第1个链链接 特定设置*/
.TanMenu01Div>ul>li:first-child>a {
    /*color: red;*/
}
/* 主菜单栏，主菜单项：当前项超链接设置*/
.TanMenu01Div>ul>li>a.curA {
    /*text-shadow: 0.03rem 0.03rem 0.04rem;*/
    text-shadow: 0.0rem 0.0rem 0.06rem #fff;
}
/*主菜单项：鼠标指向样式*/
.TanMenu01Div>ul>li>a:hover {
    /*background: red;
    color: blue;*/
}
.TanMenu01Div>ul>li>a::before, .TanMenu01Div>ul>li>a::after {
    position: absolute;
    top: 0.6rem;
    width: 0%;
    height: 0.02rem;
    
    background-color: #9DAACF;
    content: "";
    transition: width 0.5s;
}
.TanMenu01Div>ul>li>a::before {
    left: 50%;
}
.TanMenu01Div>ul>li>a::after {
    right: 50%;
}
.TanMenu01Div>ul>li>a:hover::before, .TanMenu01Div>ul>li>a:hover::after {
    width: 50%;
}
/* 主菜单项：鼠标指向样式，最后1个不显示下划线*/
.TanMenu01Div>ul>li:last-child>a:hover::before, .TanMenu01Div>ul>li:last-child>a:hover::after {
    width: 0%;
}


/******下拉菜单使用******/

/*下拉菜单栏*/
.TanMenu01Div>ul>li>ul {
    /*background-color: var(--jwcBlue);
    background-color: red;*/

    /*3张图片拼接背景：左边的图片在 上方，右边的图片在 下方*/
    background-image: url("../v2023image/dlMenuBG01b.png"),url("../v2023image/dlMenuBG01a.png"),url("../v2023image/dlMenuBG01c.png");
    background-repeat: no-repeat;
    /*图片 横向、纵向 的位置*/
    background-position: right top, left top, 0rem 0.3rem;
    /*图片 宽、高 大小*/
    background-size: 0.2rem 0.3rem, 100% 0.3rem, 100% 100%;


    
    /*圆角
    border-radius: 0 0 0.2rem 0.2rem;
    opacity: 0.9;*/

    /*下拉菜单栏 为了居中，下拉动作由 js 完成*/
    display: none;

    /*子菜单纵向*/
    /*下拉 ul 使用 relative 时，宽度与主菜单项相同，显示、隐藏切换时，会影响主菜单项的宽度
    position: relative;*/
    position: absolute;
    /*默认位置 在主菜单项下方，也可以使用如下代码指定位置
    top: 0.7rem;*/
    
    /*子菜单横向：菜单栏，左右留 100，上留 50，下由 li 指定
    padding: 0.35rem 1.00rem 0rem;
    background-color: white;
    background: url(../image2022/bgmenu02.png);
    background-size: 100% 100%;*/
}

/* 子菜单项 样式 */
.TanMenu01Div>ul>li>ul>li {
    /*子菜单纵向*/
    line-height: 0.5rem;
    text-align: center;
    padding: 0rem 0.4rem;
    background-color: transparent;
    transition: 0.5s;


    /*子菜单横向
    float: left;
    width: auto;
    min-width: 1.10rem;
    height: 0.30rem;
    line-height: 0.30rem;
    margin: 0rem 0.50rem 0.25rem 0rem;*/
}

.TanMenu01Div>ul>li>ul>li:hover {
    background-color: #E4E4E4;
}

/*最后1个 主菜单项 中的 下拉子菜单栏 中的所有 子菜单项：
最后1个下拉子菜单，默认显示时不能超过主菜单栏最右边边界，
左右留空白太多子菜单项会换行。
*/
.TanMenu01Div>ul>li:last-child>ul>li {
    padding: 0rem 0.2rem;
}
.TanMenu01Div>ul>li:first-child>ul>li {
    padding: 0rem 0.25rem;
}

/*所有 下拉子菜单栏 中的 第1个 子菜单项*/
.TanMenu01Div>ul>li>ul>li:first-child {
    /*子菜单横向
    padding-left: 0rem;
    margin-top: 0rem;
    background-color: red;*/
    
    margin-top: 0.3rem;
}
/*所有 下拉子菜单栏 中的 最后1个 子菜单项*/
.TanMenu01Div>ul>li>ul>li:last-child {
    /*子菜单横向
    margin-right: 0rem;

    单行最后1个
    min-width: 0rem;
    padding-right: 0rem;*/
    
    margin-bottom: 0.1rem;
}
/*所有 下拉子菜单栏 中的 子菜单项
odd:奇数，even:偶数 ，li:nth-of-type(odd)
第xn+i个，x表示1行共几个，i表示1行中第几个（i从1开始，不加表示1行最后1个）*/
.TanMenu01Div>ul>li>ul>li:nth-child(2n+1) {
    /*子菜单横向
    clear: both;*/
}
.TanMenu01Div>ul>li>ul>li:nth-child(3n+2) {
    /*子菜单横向
    width: auto;*/
}
.TanMenu01Div>ul>li>ul>li:nth-child(2n) {
    /*子菜单横向
    min-width: 0rem;
    margin-right: 0rem;*/
}


/* 子菜单项中 a 样式 */
.TanMenu01Div>ul>li>ul>li>a {
    /*子菜单横向
    float: left;*/
    
    color: #4A4A4A;
    font-size: 0.20rem;
    transition: 0.5s;
}
/* 子菜单项中 a 鼠标指向样式 */
.TanMenu01Div>ul>li>ul>li>a:hover {
    /*color: #004fa1;
    font-weight: bold;*/
}
/* 子菜单横向：指向 下划线
.TanMenu01Div>ul>li>ul>li>a:before, .TanMenu01Div>ul>li>ul>li>a:after {
    position: absolute;
    bottom: 0.06rem;
    width: 0;
    height: 2px;
    background: #9DAACF;
    content: "";
    transition: width 0.7s
}
.TanMenu01Div>ul>li>ul>li>a:before {
    left: 50%;
}
.TanMenu01Div>ul>li>ul>li>a:after {
    right: 50%;
}
.TanMenu01Div>ul>li>ul>li>a:hover::before, .TanMenu01Div>ul>li>ul>li>a:hover::after {
    width: 50%
}*/




/*——————二级页面，左侧菜单——————*/

/*所有 UL 设置*/
.TanLeftMenuUl01,  .TanLeftMenuUl01 UL {
    /*转换文本：每个单词以大写字母开头*/
    text-transform: capitalize;
    /*不显示前缀圆点*/
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.TanLeftMenuUl01>li {
    border-bottom: 1px solid white;
}

/*二级、三级、四级、五级子菜单 a 设置*/
.TanLeftMenuUl01 a{
    line-height: 0.7rem;
    padding-left: 0.2rem;
    font-size: 0.20rem;
    color: #5B5B5B;
    transition: 0.5s;
    display: block;
    /*添加下列设置后，刚好到最右边、箭头补挤下去时，会空行：否则会与下一个重叠*/
    overflow: hidden;
}
.TanLeftMenuUl01 ul a{
    line-height: 0.5rem;
    padding-left: 0.4rem;
    font-size: 0.18rem;
}
.TanLeftMenuUl01 ul ul a{
    line-height: 0.5rem;
    padding-left: 0.6rem;
    font-size: 0.18rem;
    
}
.TanLeftMenuUl01 ul ul ul a{
    line-height: 0.5rem;
    padding-left: 0.8rem;
    font-size: 0.18rem;
    
}


/*右侧图标*/
.TanLeftMenuUl01 a::after{
    font-family: bootstrap-icons !important;
    content: "\f285";
    float: right;
    margin-right: 0.2rem;
}
.TanLeftMenuUl01 a:hover::after{
    content: "\f280";
}

/*鼠标指向 各级 a */
.TanLeftMenuUl01 a:hover{
    text-shadow: 0.0rem 0.0rem 0.01rem;
    background-color: #DCDCDC;
    /*color: var(--jwcBlue) !important;*/
}

/*当前栏目*/
.TanLeftMenuUl01 .curA {
    /*background-color: var(--jwcBlue);*/
    color: #333 !important;
    text-shadow: 0.0rem 0.0rem 0.0rem;
}
.TanLeftMenuUl01 .curA::after{
    transform:  rotate(90deg);
}