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

<!--菜单 1-->
<div class="TanMenu01">
    <ul class="TanMenuBar01">
        <li class="TanMenuLevel01">
            <a href="#" >首页</a>
        </li>
        <li class="TanMenuLevel01">
            <a href="#" class="curA">师资队伍
            <!--显示竖线用：外层div撑大占位，内层div使用背景色显示竖线-->
            <div><div></div></div>
            </a>
            <!--下拉菜单，子菜单横向显示时，需要计算每个的宽度 -->
            <ul class="TanMenuBar02" style="width: 280px;">
                <li class="TanMenuLevel02">
                    <a href="#" >师资队伍123</a>
                </li>
                <li class="TanMenuLevel02">
                    <a href="#" >师资队伍abc</a>
                </li>
            </ul>                
        </li>
    </ul>
</div>

*/

/*---*****主菜单使用*****---*/
.TanMenu01 {
    margin-top: 60px;
    height: 55px;
    line-height: 35px;
    
    position: relative; 
    float: right;
    z-index: 10;
}
/*所有 ul li 共用*/
.TanMenu01 ul, li {
    /*不显示前缀圆点*/
    list-style-type: none;
    padding: 0;
    margin: 0;
    text-transform: capitalize;
}
/*所有 a 共用*/
.TanMenu01 a {
    text-decoration: none;
    position:relative;
    display:block;
    height:100%;    
}

/*主菜单栏*/
.TanMenu01 .TanMenuBar01 {
    height: 100%;
    display: block;
    padding: 0px;
    margin: 0px;
    /*font-family: "宋体";*/
    font-size: 22px;
    /*font-weight: bold;*/
}

/* 页面不同，需要修改项 background */
.TanMenu01 .TanMenuLevel01 {
    height: 100%;
    /*主菜单项：横向*/
    float: left;
    margin: 0px 4px;
    /*background: #fff;
    border-left: 1px solid #fff;*/
}
.TanMenu01 .TanMenuBar01 li:first-child {
    margin-left: 0px;
    margin-right: 15px;
}
.TanMenu01 .TanMenuBar01 li:last-child {
    margin-left: 15px;
    margin-right: 0px;
}

/*主菜单项：超链接设置*/
.TanMenu01 .TanMenuLevel01 a {
    /*color: #d5e3f0;*/
}


.TanMenu01 .aColor1 {
    color: #d5e3f0;
}

.TanMenu01 .aColor2 {
    color: white;
}


/*主菜单项：当前项超链接设置*/
.TanMenu01 .TanMenuLevel01 a.curA{
    /*color: red;*/
    
    text-shadow: 0 4px 4px ;

/*
    border-bottom: 2px solid #15B0B8;
    padding-bottom: 3px;
*/

    /*font-weight: bold;*/
}
/*主菜单项：鼠标指向样式*/
.TanMenu01 .TanMenuLevel01 a:hover {
    /*background: #ca1d3e;
    color: red;
    border-bottom: none;*/

/*
    border-bottom: 2px solid #d5e3f0;
    padding-bottom: 3px;
*/

    
    /*font-weight: bold;*/
    
    /*font-size: larger;*/
}

.TanMenu01 .TanMenuBar01 .TanMenuLevel01>a:before{position:absolute;bottom:15px;left:50%;width:0;height:2px;background:white;content:"";transition:width 0.5s}
.TanMenu01 .TanMenuBar01 .TanMenuLevel01>a:after{position:absolute;right:50%;bottom:15px;width:0;height:2px;background:white;content:"";transition:width 0.5s}
.TanMenu01 .TanMenuBar01 .TanMenuLevel01>a:hover::before{width:50%}
.TanMenu01 .TanMenuBar01 .TanMenuLevel01>a:hover::after{width:50%}

/*---*****下拉菜单使用*****---*/
/*子菜单的引导横线：如无div，则不生效*/
/*
.TanMenu01 .TanMenuLevel01 div {
	display: none;
	height: 20px;
    border-top: 1px solid red;
    border-bottom: 3px solid #d5e3f0;
}
*/
/*子菜单的引导竖线：如无div，则不生效*/
/*
.TanMenu01 .TanMenuLevel01 div div {
    display: none;
    竖线宽度
	width: 0px; 
    margin: auto;
    高度与外层div相同
	height: 100%;
    background-color: red;
}
*/

/*下拉菜单栏*/
.TanMenu01 .TanMenuBar02 {
    display: none;
    position: absolute;
    top: 50px;
    font-size: 20px;
    /*菜单栏，左右留100，上留35，下由 li 指定*/
    padding: 35px 100px 0px 100px;
    background-color: white;
}

/* 子菜单项样式 */
.TanMenu01 .TanMenuLevel02 {
    /*子菜单横向*/
	float: left;
    
    /*border-top: 2px solid red;
    filter:alpha(opacity=80);
    opacity: 0.8;*/
    
    /*background: #33271E;*/
    
    min-width: 200px;
    height: 30px;
    line-height: 30px;
    /*下留35*/
    margin: 0px 0px 35px 0px;
    
}
/*第1个*/
.TanMenu01 .TanMenuBar02 li:first-child {
    margin-left: 0px;
    margin-right: 0px;
}
/*最后一个*/
.TanMenu01 .TanMenuBar02 li:last-child {
    margin-left: 0px;
    margin-right: 0px;
    
    min-width: 0px;
}
/*odd:奇数，even:偶数 ，li:nth-of-type(odd)*/
/*第2n个，n从1开始计数，子项从1开始数*/
.TanMenu01 .TanMenuBar02 li:nth-child(2n) {
    min-width: 0px;
}
.TanMenu01 .TanMenuBar02 li:nth-child(2n+1){
    clear: both;
}

/* 子菜单项中 a 样式 */
.TanMenu01 .TanMenuLevel02 a {
    float: left;
    color: #474747;
    /*border-bottom: 2px solid white;*/
}
/* 子菜单项中 a 鼠标指向样式 */
.TanMenu01 .TanMenuLevel02 a:hover {
/*
    color: #474747;
    border-bottom: 2px solid #474747;
    padding-bottom: 3px;
*/
}

.TanMenu01 .TanMenuBar02 .TanMenuLevel02>a:before{position:absolute;bottom:-5px;left:50%;width:0;height:2px;background:#474747;content:"";transition:width 0.5s}
.TanMenu01 .TanMenuBar02 .TanMenuLevel02>a:after{position:absolute;right:50%;bottom:-5px;width:0;height:2px;background:#474747;content:"";transition:width 0.5s}
.TanMenu01 .TanMenuBar02 .TanMenuLevel02>a:hover::before{width:50%}
.TanMenu01 .TanMenuBar02 .TanMenuLevel02>a:hover::after{width:50%}



.p1BT01:before{position:absolute;left:50%;bottom:-40px;width:0%;height:2px;background:#474747;content:"";transition:width 0.5s;}
.p1BT01:after{position:absolute;right:50%;bottom:-40px;width:0%;height:2px;background:#474747;content:"";transition:width 0.5s;}
.p1BT01:hover::before{width:50%}
.p1BT01:hover::after{width:50%}