/*
    zindex 层级关系：
    弹出窗 100
    导航   50
    底部   25
    内容   默认
    
    约定规则：
    1. Contect 内边距在不同情况自行改写
*/

a {
    text-decoration: none;
}
p, h1, h2, h3, h4, h5, h6 {
    margin: 0 auto;
}
ul {
    padding: 0;
    margin: 0;
}
li {
    list-style: none;
}


.Content {
    margin: auto;
    position: relative;
    display: block;
}

.Box {
    width: 100%;
    position: relative;
}
.Box > div.Content {
    padding: 10px;
}
.InlineBlock_T,
.InlineBlock_M,
.InlineBlock_B {
    display: inline-block;
}
.InlineBlock_T {
    vertical-align: top;
}
.InlineBlock_M {
    vertical-align: middle;
}
.InlineBlock_B {
    vertical-align: bottom;
}

.TextLeft {
    text-align: left;
}
.TextRight {
    text-align: right;
}
.TextCenter {
    text-align: center;
}

/* 导航栏样式 */
/* 
    说明：
    1 网页必须存在 Nav 和 Nav-Nav 
    2 Nav-Nav 子元素需要同时包含 Switch 和 SwitchUl 才会开启 Mobile 的开关
    3 需要修改按钮样式可以重写下列样式
      .Nav ul > li a
      .Nav ul > li a:hover
    注意问题：
    1 若要使用 Right 和 Left 必须同时存在同一行，实际使用时 div 宽度问题需重写系列样式
      .Nav div.Right
      .Nav div.Left
*/
.Nav {
    position: relative;
    z-index: 50;
}
.Nav div.Right, 
.Nav div.Left {
    width: 50%;
    display: inline-block;
    vertical-align: middle;
}
.Nav div.Right {
    text-align: right;
}
.Nav div.Left {
    text-align: left;
}
.Nav div.Content {
    padding: 5px 10px;
}
.Nav p,
.Nav ul,
.Nav li {
    padding: 0 10px;
    display: inline-block;
    vertical-align: middle;
}
.Nav a {
    display: inline-block;
}
.Nav p.Switch {
    right: 20px;
    top: 0;
    bottom: 0;
    margin: auto;
    position: absolute;
    display: none;
    cursor: pointer;
    z-index: 10;
}
.Nav div.Mobile  {
    text-align: center;
}
.Nav div.Mobile ul {
    width: calc(100% - 20px);
    height: 0px;
    top: 100%;
    left: 0;
    position: absolute;
    opacity: 0;
    overflow: hidden;
    transition: 0.3s;
    z-index: -1;
}
.Nav div.Mobile li,
.Nav div.Mobile a {
    width: calc(100% - 20px);
}
.Nav div.Mobile a {
    padding: 10px;
}
.Nav div.Mobile p.Switch {
    display: block;
}
.Nav div.Mobile ul.Open {
    opacity: 1;
}



/* 默认样式 */
.Nav p.Switch_Default_001 {
    height: 30px;
    width: 30px;
    border: 1px solid #ccc;
    border-radius: 5px;
}
.Nav p.Switch_Default_001 i {
    width: calc(100% - 20px);
    height: 2px;
    left: 0;
    right: 0;
    margin: auto;
    display: block;
    position: absolute;
    background-color: #808080;
    border-radius: 10px;
}
.Nav p.Switch_Default_001 i:nth-child(1) {
    top: 7.5px;
}
.Nav p.Switch_Default_001 i:nth-child(2) {
    top: 14.5px;
}
.Nav p.Switch_Default_001 i:nth-child(3) {
    top: 21.5px;
}





/* 需要改写的样式 */

/* 最大宽度 */
.MaxWidth {
    max-width: 1180px;
}
/* 导航下拉框的高度 */
.Nav div.Mobile ul.Open {
    height: 180px;
}

/* 重写最大宽度 */
@media screen and (max-width: 600px) {
    .MobileHidden {
        display: none;
    }
}