/*
    zindex 层级关系：
    弹出窗 100
    导航   50
    底部   25
    内容   默认

    常用颜色
    背景  rgba(135, 135, 135, 0.25)
    背景  rgba(235, 200, 210, 0.50)
    背景  rgba(25, 100, 205, 0.50)
    主色  rgba(25, 100, 205, 1.00)
    主色  rgba(51, 51, 51, 1.00)
    
    约定规则：
    1. Contect 内边距在不同情况自行改写
*/

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    font-size: 0;
    font-family: Arial, 'Microsoft YaHei';
    overflow: auto;
}

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


.BG_Theme_01 {
    background-image: linear-gradient(45deg, rgba(235, 200, 210, 1.00) 0%, rgba(25, 100, 205, 0.50) 100%);
    background-image: -o-linear-gradient(45deg, rgba(235, 200, 210, 1.00) 0%, rgba(25, 100, 205, 0.50) 100%);
    background-image: -moz-linear-gradient(45deg, rgba(235, 200, 210, 1.00) 0%, rgba(25, 100, 205, 0.50) 100%);
    background-image: -webkit-linear-gradient(45deg, rgba(235, 200, 210, 1.00) 0%, rgba(25, 100, 205, 0.50) 100%);
}
.Btn_Theme_01 {
    padding: 5px 20px;
    position: relative;
    overflow: hidden;
}
.Btn_Theme_01 {
    color: rgba(51, 51, 51, 1.00);
    transition: 0.3s;
}
.Btn_Theme_01:hover {
    background-color: rgba(255, 255, 255, 0.50);
}
.Btn_Theme_01.Chose {
    background-color: rgba(255, 255, 255, 1.00);
}
.Color_Theme_01 {
    color: rgba(25, 100, 205, 1.00);
}
.Border_Theme_01 {
    border-radius: 0;
    border-image: linear-gradient(45deg, rgba(235, 200, 210, 1.00) 0%, rgba(25, 100, 205, 0.50) 100%) 1 1;
    transition: 0.3s;
}
.Border_Theme_01:focus {
    box-shadow: 3px 3px 10px -5px rgba(235, 200, 210, 1.00) inset, -3px -3px 10px -5px rgba(25, 100, 205, 0.50) inset;
}
hr.Border_Theme_01 {
    border-width: 0 0 1px 0;
}
button.Border_Theme_01 {

}

.MarginBottom_5 {
    margin-bottom: 5px;
}
.MarginBottom_10 {
    margin-bottom: 10px;
}
.MarginBottom_20,
.SplitLine {
    margin-bottom: 20px;
}
.SplitLine {
    height: 1px;
}

/* 重写 表单 元素 */
input,
textarea {
    width: calc(100% - 10px);
    padding: 5px;
    box-sizing: content-box;
    border-width: 1px;
    border-color: rgba(51, 51, 51, 1.00);
    border-style: solid;
    border-radius: 5px;
    outline: none;
    font-family: Arial, 'Microsoft YaHei';
    color: rgba(51, 51, 51, 1.00);
}
textarea {
    min-height: 100px;
    resize: vertical;
}
button {
    padding: 5px 10px;
    background: rgba(255, 255, 255, 0);
    border-width: 1px;
    border-color: rgba(153, 153, 153, 1.00);
    border-style: solid;
    border-radius: 5px;
    outline: none;
    color: rgba(51, 51, 51, 1.00);
    cursor: pointer;
}
button:hover {
    background-color: rgba(51, 51, 51, 0.05);
}
button:active {
    background-color: rgba(51, 51, 51, 0.15);
}

.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;
}

.FontSize_14 {
    font-size: 14px;
}
.FontSize_16 {
    font-size: 16px;
}
.FontSize_18 {
    font-size: 18px;
}
.FontSize_24 {
    font-size: 24px;
}
.FontSize_36 {
    font-size: 36px;
}
.FontSize_48 {
    font-size: 48px;
}


/* 导航栏样式 */
/* 
    说明：
    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 p,
.Nav ul,
.Nav li {
    padding: 0;
    display: inline-block;
    vertical-align: middle;
}
.Nav p {
    padding: 0 10px;
}
.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 rgba(51, 51, 51, 1.00);
    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: rgba(51, 51, 51, 1.00);
    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;
    }
}