/* 禁止双击选中文本 */
Accordion *{
    user-select:   none;
    -moz-user-select:   none;
}
Accordion {
    display: block;
    padding: 0;
}
Accordion Menus {
    display: block;
    line-height: 45px;
    position: relative;
    width: 100%;
    color: #777;
    height: 45px;
    overflow:hidden;
    transition: height 0.35s ease-in-out;
}
Accordion Menus Titles icon{
    float: left; 
    font-size: 22px;
    margin-right: 12px;
}
Accordion Menus Titles .DropDownIcon {
    float: right;
    font-size: 13px;
    transform: rotate(90deg);
    transition: transform .2s;
}
Accordion Menus:not([open]) Titles .DropDownIcon {
    transform: rotate(0deg);
}
Accordion Menus Titles {
    /* 容器缩小到文字大小 */
    display: block;
    width: 100%;
    height: 45px;
    line-height: 45px;
    cursor: pointer;
    transition: all .3s ease 0s;
    padding-left: 15px;
    padding-right: 15px;
    border-left: 3px solid transparent;
}
Accordion Menus Titles:hover {
    background-color: rgba(0,0,0,.03)
}
Accordion Menus Options{
    display: block;
    cursor: pointer;
    line-height: 45px;
    padding-left: 18px;
    padding-right: 18px;
    transition: all .3s ease 0s;
} 
Accordion Menus Options:hover,/*鼠标经过样式*/
Accordion Menus Options:focus{/*点击后样式保持*/
    background-color: rgba(0,0,0,.02)
}
Accordion Menus Options icon{
    color: rgba(0,0,0,.3);
    font-size: 15px;
    margin-left: 10px;
    margin-right: 15px;
    transition: all .3s ease 0s;
} 
Accordion Menus Options:hover icon,/*鼠标经过样式*/
Accordion Menus Options:focus icon{/*点击后样式保持*/
    margin-left: 15px;
    margin-right: 10px;
}
Accordion Menus[open] Titles {
    background-color: rgba(0,0,0,.05)
}
/*------------------------------------------------------------------------------------------------------------------------
  Title ：样式定义
  Digest：在基础样式上设置更多风格的样式
/------------------------------------------------------------------------------------------------------------------------*/
Accordion.Dark Menus {
    color: rgba(255,255,255,.4);
}
Accordion.Dark Menus Titles:hover {
    color: rgba(255,255,255,.7);
}
Accordion.Dark Menus[open] Titles {
    color: rgba(255,255,255,.7);
    /*border-radius: 8px;*/
    background-image: linear-gradient(90deg, rgba(59,125,221,.12), rgba(255,255,255,0));
    background-color: rgba(0,0,0,0);
    border-left: 3px solid #3b7ddd;
}
Accordion.Dark Menus Options icon{
    color: rgba(255,255,255,.4);
} 
Accordion.Dark Menus Options[open],
Accordion.Dark Menus Options:hover,/*鼠标经过样式*/
Accordion.Dark Menus Options:focus{/*点击后样式保持*/
    background-color: rgba(0,0,0,.03);
    color: #3b7ddd;
} 

.Animation-Rotate{
  display: inline-block;
	animation: Rotate .5s linear infinite;  /*开始动画后无限循环，用来控制rotate*/
}
		
@keyframes Rotate{
0%{transform: rotate(0);}
100%{transform: rotate(360deg);}
}
::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}
 
::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb {
  border-radius: 999px;
  border: 5px solid transparent;
}
 
::-webkit-scrollbar-track {
  box-shadow: 1px 1px 5px rgba(0,0,0,.2) inset;
}
 
::-webkit-scrollbar-thumb {
  min-height: 20px;
  background-clip: content-box;
  box-shadow: 0 0 0 5px rgba(0,0,0,.2) inset;
}
 
::-webkit-scrollbar-corner {
	background: transparent;
}
	
body{
    width: 100%;
    font-family: "微软雅黑";/*全局字体设置为 微软雅黑*/
    font-size: 15px;/*全局字体设置为15px*/
    margin: 0;
    padding: 0;
    overflow-x: hidden;/*隐藏横向滚动条*/
    position: relative;
}
	
	a{
		text-decoration:none;/*去除标签下划线*/
		color: inherit;/*a标签从父元素继承颜色*/
	}
	a:link    {text-decoration:none;}
    a:visited {text-decoration:none;}
    a:hover   {text-decoration:none;}
    a:active  {text-decoration:none;}
    a{/*去除手机端点击a标签出现背景颜色问题*/
		outline:none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
   }

	
	code{
		font-family: "微软雅黑";
		font-size: 12px;
		color: #C7254E;
		background-color: #F9F2F4;
		border-radius: 3px;
		padding: 1px 5px;
		margin: 0 5px;
	}

.Clearfix{ overflow: auto; height:1%}

/*文本对齐--------------------------------------------------------------------------------------------------------------*/
.TextAlignCenter{ text-align: center}
.TextAlignLeft{ text-align: left}
.TextAlignRight{ text-align: right}
/*浮动--------------------------------------------------------------------------------------------------------------*/
.FloatRight{float: right;}
.FloatLeft{float: left;}
.FloatNone{float: none;}/*默认值。元素不浮动，并会显示在其在文本中出现的位置。*/
.FloatInherit{float: inherit;}/*规定应该从父元素继承 float 属性的值。*/
/*倒圆角--------------------------------------------------------------------------------------------------------------*/
.Radius{ border-radius: 4px; }
.Radius3{ border-radius: 3px; }
.Radius5{ border-radius: 5px; }
.Radius8{ border-radius: 8px; }
/*全圆角或胶囊--------------------------------------------------------------------------------------------------------------*/
.Capsule{ border-radius: 5000px; }
/*文本全大写--------------------------------------------------------------------------------------------------------------*/
.FontUppercase{
	text-transform: uppercase
}


Button,input,submin {
    border: 0;
    outline: none;
    margin: 0;
    font-size: 15px;
    font-family: "微软雅黑";
}
.Button, 
 Button {
    background-color: var(--DefaultColor);
    color: #FFF;
    height: 40px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    padding: 0px 20px;
    transition: all .2s ease;
    cursor: pointer;
    user-select: none; /*取消双击选中文字*/
}
a.Button{
  margin-top: -1px;
}

/*鼠标经过样式*/
.Button:hover, 
 Button:hover {
    box-shadow: 0px 20px 150px rgba(0, 0, 0, 0.15) inset; /*用于实现按钮hover颜色渐变*/
    transition: all .2s ease;
}
/*点击按钮样式*/
.Button:active,
 Button:active {
	box-shadow:0px 20px 150px rgba(0, 0, 0, 0) inset;/*按钮点击后恢复hover前按钮颜色*/
	transition: all 0s ease;/*恢复颜色的动作时长*/
	content: '';
}
/**************************************************************************************************************************************************
  Name   ：按钮外型
  Explain：设置按钮的边角
**************************************************************************************************************************************************/
/*扁平化按钮*/
.Button.Delayering,
 Button.Delayering{
    border-radius: 0;
}
/*胶囊形-------------------------------------------------------------------------------------------------------------------*/
.Button.Capsule,
 Button.Capsule{
    border-radius: 10000px;
}
/*椭圆形-------------------------------------------------------------------------------------------------------------------*/
.Button.Ellipse,
 Button.Ellipse{
    border-radius: 50%;
}
/*平行四边形----------------------------------------------------------------------------------------------------------------*/
.Button.Parallelogram,
 Button.Parallelogram{
    float: left;
    margin-left: 3px;
    margin-right: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    transform: skewX(-45deg);
}
.Button.Parallelogram > *,
 Button.Parallelogram > *{
    transform: skewX(45deg);
}
/*平行四边形-反向 ---------------------------------------------------------------------------------------------------------*/
.Button.Parallelogram.Inversion,
 Button.Parallelogram.Inversion{
    transform: skewX(45deg)!important;
}

.Button.Parallelogram.Inversion > *,
 Button.Parallelogram.Inversion > *{
    transform: skewX(-45deg);
}

/*单调的按钮-------------------------------------------------------------------------------------------------------------------*/
.Button.Monotonous,
 Button.Monotonous{
    color: #666;
    background-color: transparent;
}

/**************************************************************************************************************************************************
  Name   ：块级按钮
  Explain：
**************************************************************************************************************************************************/
.Button icon,
 Button icon{
     margin-right: 5px;
}
/**************************************************************************************************************************************************
  Name   ：块级按钮
  Explain：
**************************************************************************************************************************************************/
.Button.Block,
 Button.Block{
     width: 100%;
     display: block;
}
/**************************************************************************************************************************************************
  Name   ：激活状态
  Explain：
**************************************************************************************************************************************************/
.Button.Active,
 Button.Active{
     box-shadow: 0px 20px 150px rgba(0, 0, 0, 0.15) inset;
}
/**************************************************************************************************************************************************
  Name   ：禁用状态
  Explain：
**************************************************************************************************************************************************/
.Button[disabled],
 Button[disabled]{
     cursor: not-allowed;
     opacity: .5;
     box-shadow: 0px 20px 150px rgba(0, 0, 0, 0) inset;
}
/**************************************************************************************************************************************************
  Name   ：按钮尺寸
  Explain：
**************************************************************************************************************************************************/
.Button.XS,
 Button.XS{
    font-size: 80%;
    padding: 1px 3px;
    height: auto;
}
.Button.SM,
 Button.SM{
    font-size: 90%;
    padding: 4px 8px;
    height: auto;
}
.Button.LG,
 Button.LG{
    font-size: 120%;
    padding: 15px 20px;
    height: auto;
}
.Button.XL,
 Button.XL{
    font-size: 150%;
    padding: 20px 30px;
    height: auto;
}



/**************************************************************************************************************************************************
  Name   ：按钮组
  Explain：
**************************************************************************************************************************************************/
ButtonGroup{
    display: inline-flex;
    border-radius: 5px;
    overflow: hidden;
    justify-content: flex-start;
}
ButtonGroup Button{
	  margin: 0;
    border-radius: 0;
}
/**************************************************************************************************************************************************
  Name   ：胶囊形按钮组
  Explain：
**************************************************************************************************************************************************/
ButtonGroup.Capsule{
    border-radius: 300px;
}
ButtonGroup.Capsule Button:first-child{
    padding-left: 30px;
}
ButtonGroup.Capsule Button:last-child{
    padding-right: 30px;
}

/**************************************************************************************************************************************************
  Name   ：扁平化按钮组
  Explain：
**************************************************************************************************************************************************/
ButtonGroup.Delayering{
    border-radius: 0;
}
















.Button.Outline,
 Button.Outline{
    background-color: transparent!important;
    border: 1px solid;
}
.Button.Outline:hover,
 Button.Outline:hover{
    color: #FFF!important;
    box-shadow: 0px 20px 150px rgba(0, 0, 0, 0) inset; /*用于实现按钮hover颜色渐变*/
}
a.Button.Outline{
    padding: 10px 20px 8px 20px;
}

:root {
  /* 尼罗蓝 */
  --NILEBLUE: #4080d9; --NILEBLUE2: #7AA6E7; --NILEBLUE3: #9AB9EE; --NILEBLUE4: #BACFF5; --NILEBLUE5: #CBDFFF;
  /* 紫罗兰 */
  --VIOLET: #646CBE; --VIOLET2: #878CC5; --VIOLET3: #A5A9D4; --VIOLET4: #C3C6E2; --VIOLET5: #E1E2F1;
  /* 葡萄柚 */
  --GRAPEFRUIT: #ED5565; --GRAPEFRUIT2: #F07A82; --GRAPEFRUIT3: #F39E9F; --GRAPEFRUIT4: #F6C3BC; --GRAPEFRUIT5: #F9E8EA;
  /* 向日葵 */
  --SUNFLOWER: #FFCE54; --SUNFLOWER2: #FFD97F; --SUNFLOWER3: #FFE4A9; --SUNFLOWER4: #FFEFBF; --SUNFLOWER5: #FFFAD6;
  /* 草坪 */
  --GRASS: #A0D468; --GRASS2: #B8DA87; --GRASS3: #CFE0A5; --GRASS4: #DFEEC9; --GRASS5: #F1F9E8;
  /* 薄荷 */
  --MINT: #48CFAD; --MINT2: #8FDFD0; --MINT3: #C5ECE9; --MINT4: #DCF3F2; --MINT5: #F1FAFA;
  /* 水色 */
  --AQUA: #4FC1E9; --AQUA2: #73CEE0; --AQUA3: #97DAE7; --AQUA4: #BADFF0; --AQUA5: #DDF4FA;
  /* 薰衣草 */
  --LAVENDER: #AC92EC; --LAVENDER2: #BFA7ED; --LAVENDER3: #D2BBEF; --LAVENDER4: #E5D0F1; --LAVENDER5: #F8E6F8;
  /* 粉红玫瑰 */
  --PINKROSE: #EC87C0; --PINKROSE2: #F0A3CB; --PINKROSE3: #F4BED6; --PINKROSE4: #F8DAE1; --PINKROSE5: #FCECF5;
  /* 香橙 */
  --ORANGE: #FF9E54; --ORANGE2: #FFB378; --ORANGE3: #FFC99D; --ORANGE4: #FFE0C2; --ORANGE5: #FFF7E8;
  /* 星空灰 */
  --DARKNIGHT: #282C37; --DARKNIGHT2: #4A5062; --DARKNIGHT3: #6D7385; --DARKNIGHT4: #9196A8; --DARKNIGHT5: #B5B9CB;
}

/* 定义通用变量 */
 /* 尼罗蓝 */
.BackgroundNILEBLUE { background-color: var(--NILEBLUE); }
.BackgroundNILEBLUE2 { background-color: var(--NILEBLUE2); }
.BackgroundNILEBLUE3 { background-color: var(--NILEBLUE3); }
.BackgroundNILEBLUE4 { background-color: var(--NILEBLUE4); }
.BackgroundNILEBLUE5 { background-color: var(--NILEBLUE5); }

.FontNILEBLUE { color: var(--NILEBLUE); }
.FontNILEBLUE2 { color: var(--NILEBLUE2); }
.FontNILEBLUE3 { color: var(--NILEBLUE3); }
.FontNILEBLUE4 { color: var(--NILEBLUE4); }
.FontNILEBLUE5 { color: var(--NILEBLUE5); }

.BorderNILEBLUE { border-color: var(--NILEBLUE); }
.BorderNILEBLUE2 { border-color: var(--NILEBLUE2); }
.BorderNILEBLUE3 { border-color: var(--NILEBLUE3); }
.BorderNILEBLUE4 { border-color: var(--NILEBLUE4); }
.BorderNILEBLUE5 { border-color: var(--NILEBLUE5); }

/* 紫罗兰 */
.BackgroundVIOLET { background-color: var(--VIOLET); }
.BackgroundVIOLET2 { background-color: var(--VIOLET2); }
.BackgroundVIOLET3 { background-color: var(--VIOLET3); }
.BackgroundVIOLET4 { background-color: var(--VIOLET4); }
.BackgroundVIOLET5 { background-color: var(--VIOLET5); }

.FontVIOLET { color: var(--VIOLET); }
.FontVIOLET2 { color: var(--VIOLET2); }
.FontVIOLET3 { color: var(--VIOLET3); }
.FontVIOLET4 { color: var(--VIOLET4); }
.FontVIOLET5 { color: var(--VIOLET5); }

.BorderVIOLET { border-color: var(--VIOLET); }
.BorderVIOLET2 { border-color: var(--VIOLET2); }
.BorderVIOLET3 { border-color: var(--VIOLET3); }
.BorderVIOLET4 { border-color: var(--VIOLET4); }
.BorderVIOLET5 { border-color: var(--VIOLET5); }

/* 葡萄柚 */
.BackgroundGRAPEFRUIT { background-color: var(--GRAPEFRUIT); }
.BackgroundGRAPEFRUIT2 { background-color: var(--GRAPEFRUIT2); }
.BackgroundGRAPEFRUIT3 { background-color: var(--GRAPEFRUIT3); }
.BackgroundGRAPEFRUIT4 { background-color: var(--GRAPEFRUIT4); }
.BackgroundGRAPEFRUIT5 { background-color: var(--GRAPEFRUIT5); }

.FontGRAPEFRUIT { color: var(--GRAPEFRUIT); }
.FontGRAPEFRUIT2 { color: var(--GRAPEFRUIT2); }
.FontGRAPEFRUIT3 { color: var(--GRAPEFRUIT3); }
.FontGRAPEFRUIT4 { color: var(--GRAPEFRUIT4); }
.FontGRAPEFRUIT5 { color: var(--GRAPEFRUIT5); }

.BorderGRAPEFRUIT { border-color: var(--GRAPEFRUIT); }
.BorderGRAPEFRUIT2 { border-color: var(--GRAPEFRUIT2); }
.BorderGRAPEFRUIT3 { border-color: var(--GRAPEFRUIT3); }
.BorderGRAPEFRUIT4 { border-color: var(--GRAPEFRUIT4); }
.BorderGRAPEFRUIT5 { border-color: var(--GRAPEFRUIT5); }

/* 向日葵 */
.BackgroundSUNFLOWER { background-color: var(--SUNFLOWER); }
.BackgroundSUNFLOWER2 { background-color: var(--SUNFLOWER2); }
.BackgroundSUNFLOWER3 { background-color: var(--SUNFLOWER3); }
.BackgroundSUNFLOWER4 { background-color: var(--SUNFLOWER4); }
.BackgroundSUNFLOWER5 { background-color: var(--SUNFLOWER5); }

.FontSUNFLOWER { color: var(--SUNFLOWER); }
.FontSUNFLOWER2 { color: var(--SUNFLOWER2); }
.FontSUNFLOWER3 { color: var(--SUNFLOWER3); }
.FontSUNFLOWER4 { color: var(--SUNFLOWER4); }
.FontSUNFLOWER5 { color: var(--SUNFLOWER5); }

.BorderSUNFLOWER { border-color: var(--SUNFLOWER); }
.BorderSUNFLOWER2 { border-color: var(--SUNFLOWER2); }
.BorderSUNFLOWER3 { border-color: var(--SUNFLOWER3); }
.BorderSUNFLOWER4 { border-color: var(--SUNFLOWER4); }
.BorderSUNFLOWER5 { border-color: var(--SUNFLOWER5); }

/* 草坪 */
.BackgroundGRASS { background-color: var(--GRASS); }
.BackgroundGRASS2 { background-color: var(--GRASS2); }
.BackgroundGRASS3 { background-color: var(--GRASS3); }
.BackgroundGRASS4 { background-color: var(--GRASS4); }
.BackgroundGRASS5 { background-color: var(--GRASS5); }

.FontGRASS { color: var(--GRASS); }
.FontGRASS2 { color: var(--GRASS2); }
.FontGRASS3 { color: var(--GRASS3); }
.FontGRASS4 { color: var(--GRASS4); }
.FontGRASS5 { color: var(--GRASS5); }

.BorderGRASS { border-color: var(--GRASS); }
.BorderGRASS2 { border-color: var(--GRASS2); }
.BorderGRASS3 { border-color: var(--GRASS3); }
.BorderGRASS4 { border-color: var(--GRASS4); }
.BorderGRASS5 { border-color: var(--GRASS5); }

/* 薄荷 */
.BackgroundMINT { background-color: var(--MINT); }
.BackgroundMINT2 { background-color: var(--MINT2); }
.BackgroundMINT3 { background-color: var(--MINT3); }
.BackgroundMINT4 { background-color: var(--MINT4); }
.BackgroundMINT5 { background-color: var(--MINT5); }

.FontMINT { color: var(--MINT); }
.FontMINT2 { color: var(--MINT2); }
.FontMINT3 { color: var(--MINT3); }
.FontMINT4 { color: var(--MINT4); }
.FontMINT5 { color: var(--MINT5); }

.BorderMINT { border-color: var(--MINT); }
.BorderMINT2 { border-color: var(--MINT2); }
.BorderMINT3 { border-color: var(--MINT3); }
.BorderMINT4 { border-color: var(--MINT4); }
.BorderMINT5 { border-color: var(--MINT5); }

/* 水色 */
.BackgroundAQUA { background-color: var(--AQUA); }
.BackgroundAQUA2 { background-color: var(--AQUA2); }
.BackgroundAQUA3 { background-color: var(--AQUA3); }
.BackgroundAQUA4 { background-color: var(--AQUA4); }
.BackgroundAQUA5 { background-color: var(--AQUA5); }

.FontAQUA { color: var(--AQUA); }
.FontAQUA2 { color: var(--AQUA2); }
.FontAQUA3 { color: var(--AQUA3); }
.FontAQUA4 { color: var(--AQUA4); }
.FontAQUA5 { color: var(--AQUA5); }

.BorderAQUA { border-color: var(--AQUA); }
.BorderAQUA2 { border-color: var(--AQUA2); }
.BorderAQUA3 { border-color: var(--AQUA3); }
.BorderAQUA4 { border-color: var(--AQUA4); }
.BorderAQUA5 { border-color: var(--AQUA5); }

/* 薰衣草 */
.BackgroundLAVENDER { background-color: var(--LAVENDER); }
.BackgroundLAVENDER2 { background-color: var(--LAVENDER2); }
.BackgroundLAVENDER3 { background-color: var(--LAVENDER3); }
.BackgroundLAVENDER4 { background-color: var(--LAVENDER4); }
.BackgroundLAVENDER5 { background-color: var(--LAVENDER5); }

.FontLAVENDER { color: var(--LAVENDER); }
.FontLAVENDER2 { color: var(--LAVENDER2); }
.FontLAVENDER3 { color: var(--LAVENDER3); }
.FontLAVENDER4 { color: var(--LAVENDER4); }
.FontLAVENDER5 { color: var(--LAVENDER5); }

.BorderLAVENDER { border-color: var(--LAVENDER); }
.BorderLAVENDER2 { border-color: var(--LAVENDER2); }
.BorderLAVENDER3 { border-color: var(--LAVENDER3); }
.BorderLAVENDER4 { border-color: var(--LAVENDER4); }
.BorderLAVENDER5 { border-color: var(--LAVENDER5); }

/* 粉红玫瑰 */
.BackgroundPINKROSE { background-color: var(--PINKROSE); }
.BackgroundPINKROSE2 { background-color: var(--PINKROSE2); }
.BackgroundPINKROSE3 { background-color: var(--PINKROSE3); }
.BackgroundPINKROSE4 { background-color: var(--PINKROSE4); }
.BackgroundPINKROSE5 { background-color: var(--PINKROSE5); }

.FontPINKROSE { color: var(--PINKROSE); }
.FontPINKROSE2 { color: var(--PINKROSE2); }
.FontPINKROSE3 { color: var(--PINKROSE3); }
.FontPINKROSE4 { color: var(--PINKROSE4); }
.FontPINKROSE5 { color: var(--PINKROSE5); }

.BorderPINKROSE { border-color: var(--PINKROSE); }
.BorderPINKROSE2 { border-color: var(--PINKROSE2); }
.BorderPINKROSE3 { border-color: var(--PINKROSE3); }
.BorderPINKROSE4 { border-color: var(--PINKROSE4); }
.BorderPINKROSE5 { border-color: var(--PINKROSE5); }

/* 香橙 */
.BackgroundORANGE { background-color: var(--ORANGE); }
.BackgroundORANGE2 { background-color: var(--ORANGE2); }
.BackgroundORANGE3 { background-color: var(--ORANGE3); }
.BackgroundORANGE4 { background-color: var(--ORANGE4); }
.BackgroundORANGE5 { background-color: var(--ORANGE5); }

.FontORANGE { color: var(--ORANGE); }
.FontORANGE2 { color: var(--ORANGE2); }
.FontORANGE3 { color: var(--ORANGE3); }
.FontORANGE4 { color: var(--ORANGE4); }
.FontORANGE5 { color: var(--ORANGE5); }

.BorderORANGE { border-color: var(--ORANGE); }
.BorderORANGE2 { border-color: var(--ORANGE2); }
.BorderORANGE3 { border-color: var(--ORANGE3); }
.BorderORANGE4 { border-color: var(--ORANGE4); }
.BorderORANGE5 { border-color: var(--ORANGE5); }

/* 星空灰 */
.BackgroundDARKNIGHT { background-color: var(--DARKNIGHT); }
.BackgroundDARKNIGHT2 { background-color: var(--DARKNIGHT2); }
.BackgroundDARKNIGHT3 { background-color: var(--DARKNIGHT3); }
.BackgroundDARKNIGHT4 { background-color: var(--DARKNIGHT4); }
.BackgroundDARKNIGHT5 { background-color: var(--DARKNIGHT5); }

.FontDARKNIGHT { color: var(--DARKNIGHT); }
.FontDARKNIGHT2 { color: var(--DARKNIGHT2); }
.FontDARKNIGHT3 { color: var(--DARKNIGHT3); }
.FontDARKNIGHT4 { color: var(--DARKNIGHT4); }
.FontDARKNIGHT5 { color: var(--DARKNIGHT5); }

.BorderDARKNIGHT { border-color: var(--DARKNIGHT); }
.BorderDARKNIGHT2 { border-color: var(--DARKNIGHT2); }
.BorderDARKNIGHT3 { border-color: var(--DARKNIGHT3); }
.BorderDARKNIGHT4 { border-color: var(--DARKNIGHT4); }
.BorderDARKNIGHT5 { border-color: var(--DARKNIGHT5); }
:root {
    /* 主题颜色 */
    --DefaultColor: #4080d9;
    /* 尼罗蓝 */
    --NILEBLUE: #4080d9;
    --NILEBLUE_Light: #DBE7F8;
    /* 葡萄柚 */
    --GRAPEFRUIT: #ED5565;
    --GRAPEFRUIT_Light: #FCE9EB;
    /* 向日葵 */
    --SUNFLOWER: #FFCE54;
    --SUNFLOWER_Light: #FFF8E8;
    /* 草坪 */
    --GRASS: #A0D468;
    --GRASS_Light: #F0F8E7;
    /* 薄荷 */
    --MINT: #48CFAD;
    --MINT_Light: #E3F7F2;
    /* 水色 */
    --AQUA: #4FC1E9;
    --AQUA_Light: #E4F5FB;
    /* 薰衣草 */
    --LAVENDER: #AC92EC;
    --LAVENDER_Light: #F2EEFC;
    /* 粉红玫瑰 */
    --PINKROSE: #EC87C0;
    --PINKROSE_Light: #FCECF5;
    /* 香橙 */
    --ORANGE: #FF9E54;
    --ORANGE_Light: #FFF0E4;
    /* 浅灰色 */
    --LIGHTGRAY: #F5F7FA;
    --LIGHTGRAY_Light: #F5F7FA;
    /* 中灰色 */
    --MEDIUMGRAY: #CCD1D9;
    --MEDIUMGRAY_Light: #F5F7FA;
    /* 深灰色 */
    --DARKGRAY: #656D78;
    --DARKGRAY_Light: #CCD1D9;
}
/*尼罗蓝----------------------------------------------------------------------------------------*/
/*隐逸：一种背景颜色不显眼、低调且不易被察觉的配色*/
.NILEBLUE.Palette1 { background-color: var(--NILEBLUE_Light); color: var(--NILEBLUE); border-color: var(--NILEBLUE_Light);}
/*线条：一种背景颜色不显眼、文本颜色和边框颜色突出的配色*/
.NILEBLUE.Palette2 { background-color: var(--NILEBLUE_Light); color: var(--NILEBLUE); border-color: var(--NILEBLUE);}

.BackNILEBLUE { background-color: var(--NILEBLUE);} /*背景色*/
.FontNILEBLUE { color: var(--NILEBLUE);} /*字体色*/
.BorderNILEBLUE { border-color: var(--NILEBLUE) !important;} /*边框色*/

/*葡萄柚----------------------------------------------------------------------------------------*/
.GRAPEFRUIT.Palette1 { background-color: var(--GRAPEFRUIT_Light); color: var(--GRAPEFRUIT); border-color: var(--GRAPEFRUIT_Light);}
.GRAPEFRUIT.Palette2 { background-color: var(--GRAPEFRUIT_Light); color: var(--GRAPEFRUIT); border-color: var(--GRAPEFRUIT);}
.BackGRAPEFRUIT { background-color: var(--GRAPEFRUIT);} /*背景色*/
.FontGRAPEFRUIT { color: var(--GRAPEFRUIT);} /*字体色*/
.BorderGRAPEFRUIT { border-color: var(--GRAPEFRUIT) !important;} /*边框色*/

/*向日葵----------------------------------------------------------------------------------------*/
.SUNFLOWER.Palette1 { background-color: var(--SUNFLOWER_Light); color: var(--SUNFLOWER); border-color: var(--SUNFLOWER_Light);} 
.SUNFLOWER.Palette2 { background-color: var(--SUNFLOWER_Light); color: var(--SUNFLOWER); border-color: var(--SUNFLOWER);} 
.BackSUNFLOWER { background-color: var(--SUNFLOWER);} /*背景色*/
.FontSUNFLOWER { color: var(--SUNFLOWER);} /*字体色*/
.BorderSUNFLOWER { border-color: var(--SUNFLOWER) !important;} /*边框色*/

/*草坪----------------------------------------------------------------------------------------*/
.GRASS.Palette1 { background-color: var(--GRASS_Light); color: var(--GRASS); border-color: var(--GRASS_Light);} 
.GRASS.Palette2 { background-color: var(--GRASS_Light); color: var(--GRASS); border-color: var(--GRASS);} 
.BackGRASS { background-color: var(--GRASS); } /*背景色*/
.FontGRASS { color: var(--GRASS); } /*字体色*/
.BorderGRASS { border-color: var(--GRASS) !important; } /*边框色*/

/*薄荷----------------------------------------------------------------------------------------*/
.MINT.Palette1 { background-color: var(--MINT_Light); color: var(--MINT); border-color: var(--MINT_Light);} 
.MINT.Palette2 { background-color: var(--MINT_Light); color: var(--MINT); border-color: var(--MINT);} 
.BackMINT { background-color: var(--MINT);} /*背景色*/
.FontMINT { color: var(--MINT);} /*字体色*/
.BorderMINT { border-color: var(--MINT) !important;} /*边框色*/

/*水色----------------------------------------------------------------------------------------*/
.AQUA.Palette1 { background-color: var(--AQUA_Light); color: var(--AQUA); border-color: var(--AQUA_Light);}
.AQUA.Palette2 { background-color: var(--AQUA_Light); color: var(--AQUA); border-color: var(--AQUA);}
.BackAQUA { background-color: var(--AQUA);} /*背景色*/
.FontAQUA { color: var(--AQUA);} /*字体色*/
.BorderAQUA { border-color: var(--AQUA) !important;} /*边框色*/

/*薰衣草----------------------------------------------------------------------------------------*/
.LAVENDER.Palette1 {  background-color: var(--LAVENDER_Light); color: var(--LAVENDER); border-color: var(--LAVENDER_Light);}
.LAVENDER.Palette2 {  background-color: var(--LAVENDER_Light); color: var(--LAVENDER); border-color: var(--LAVENDER);}
.BackLAVENDER { background-color: var(--LAVENDER);} /*背景色*/
.FontLAVENDER { color: var(--LAVENDER);} /*字体色*/
.BorderLAVENDER { border-color: var(--LAVENDER) !important;} /*边框色*/

/*粉红玫瑰----------------------------------------------------------------------------------------*/
.PINKROSE.Palette1 { background-color: var(--PINKROSE_Light); color: var(--PINKROSE); border-color: var(--PINKROSE_Light);}
.PINKROSE.Palette2 { background-color: var(--PINKROSE_Light); color: var(--PINKROSE); border-color: var(--PINKROSE);}
.BackPINKROSE { background-color: var(--PINKROSE);} /*背景色*/
.FontPINKROSE { color: var(--PINKROSE);} /*字体色*/
.BorderPINKROSE { border-color: var(--PINKROSE) !important;} /*边框色*/

/*香橙----------------------------------------------------------------------------------------*/
.ORANGE.Palette1 { background-color: var(--ORANGE_Light); color: var(--ORANGE); border-color: var(--ORANGE_Light);}
.ORANGE.Palette2 { background-color: var(--ORANGE_Light); color: var(--ORANGE); border-color: var(--ORANGE);}
.BackORANGE { background-color: var(--ORANGE);} /*背景色*/
.FontORANGE { color: var(--ORANGE);} /*字体色*/
.BorderORANGE { border-color: var(--ORANGE) !important;} /*边框色*/

/*浅灰色----------------------------------------------------------------------------------------*/
.LIGHTGRAY.Palette1 { background-color: var(--LIGHTGRAY_Light); color: var(--MEDIUMGRAY); border-color: var(--LIGHTGRAY_Light);}
.LIGHTGRAY.Palette2 { background-color: var(--LIGHTGRAY_Light); color: var(--MEDIUMGRAY); border-color: var(--MEDIUMGRAY);}
.BackLIGHTGRAY { background-color: var(--LIGHTGRAY);} /*背景色*/
.FontLIGHTGRAY { color: var(--LIGHTGRAY);} /*字体色*/
.BorderLIGHTGRAY { border-color: var(--LIGHTGRAY) !important;} /*边框色*/

/*中灰色----------------------------------------------------------------------------------------*/
.MEDIUMGRAY.Palette1 { background-color: var(--MEDIUMGRAY_Light); color: var(--DARKGRAY); border-color: var(--MEDIUMGRAY_Light);}
.MEDIUMGRAY.Palette2 { background-color: var(--MEDIUMGRAY_Light); color: var(--DARKGRAY); border-color: var(--MEDIUMGRAY);}
.BackMEDIUMGRAY { background-color: var(--MEDIUMGRAY);} /*背景色*/
.FontMEDIUMGRAY { color: var(--MEDIUMGRAY);} /*字体色*/
.BorderMEDIUMGRAY { border-color: var(--MEDIUMGRAY) !important;} /*边框色*/

/*深灰色----------------------------------------------------------------------------------------*/
.DARKGRAY.Palette1 { background-color: var(--DARKGRAY_Light); color: var(--DARKGRAY); border-color: var(--DARKGRAY_Light);}
.DARKGRAY.Palette2 { background-color: var(--DARKGRAY_Light); color: var(--DARKGRAY); border-color: var(--DARKGRAY);}
.BackDARKGRAY { background-color: var(--DARKGRAY);} /*背景色*/
.FontDARKGRAY { color: var(--DARKGRAY);} /*字体色*/
.BorderDARKGRAY { border-color: var(--DARKGRAY) !important;} /*边框色*/
/* 下拉按钮样式 */
Dropdown button {
    padding-left: 12px;
    padding-right: 12px;
    border: none;
    cursor: pointer;
}
Dropdown button icon{
   /* margin-left: 5px;*/
}

/* 容器 需要定位下拉内容 */
Dropdown {
    position: relative;
    display: inline-block;
}

/* 下拉内容 (默认隐藏) */
Dropdown ul {
    display: none;
    margin-top: 3px;
    padding: 0;
    position: absolute;
    background-color: #fff;
    min-width: 20px;
    border-radius: 5px;
    overflow: hidden; 
    box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.1);
    border: 1px solid #ddd;
    z-index: 10;
}

/* 下拉菜单选项 */
Dropdown ul li {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    list-style:none;
    white-space:nowrap;
    cursor: pointer;
}
/* 禁用 */
Dropdown ul li.Disabled {
    color: #bbb;
    cursor: not-allowed;
}
Dropdown ul li.Disabled:hover {
    background-color: transparent;
}

/* 鼠标移上去后修改下拉菜单链接颜色 */
Dropdown ul li:hover {
    background-color: #f1f1f1
}

Dropdown ul Titles {
    font-size: 80%;
    color: #999;
    padding: 8px 16px;
    display: block;
    white-space:nowrap;
    cursor: default;
}
Dropdown ul hr {
    margin: 0;
    height: 1px;
    background-color: #DDD;
    border: none;
}

/*打开下拉菜单*/
Dropdown.Open ul{
    display: block;
}

/* 当下拉内容显示后修改下拉按钮的背景颜色 */
Dropdown:hover Dropdown button {
    background-color: #3e8e41;
}


Dropdown.Right ul{
    right: 0;
}
.Form Group,
Form Group {
	position: relative;
    display: flex;
    wrap: no-wrap;
	line-height: 40px;
    /*background-color: aquamarine;*/
}
.Form Group Button,
Form Group Button{
    white-space: nowrap;
}
/*表单按钮元素设置------------------------------------------*/
/*设置按钮之间的间距*/
.Form Group Button + Button,
Form Group Button + Button{
    margin-left: 15px;
}
/*按钮元素类型为重填（reset）的样式*/
.Form Group Button[type="reset"],
Form Group Button[type="reset"]{
    background-color: #eee;
	color: #999
}
/*鼠标经过样式*/
.Form Group Button[type="reset"]:hover,
Form Group Button[type="reset"]:hover{
	color: #555
}
/*表单标签元素设置------------------------------------------*/
.Form Group Labels,
Form Group Labels {
    flex: 1; /*这里设置为占比1，填充满剩余空间*/
    line-height: 40px;
    white-space: nowrap;
    color: #555;
    width: 100%;
	padding: 0;
}
.Form input,
Form input, 
.Form textarea,
Form textarea {
    border-radius: 5px;
    width: 100%;
    border: 1px solid #DDD;
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 0.75rem;
    font-family: "微软雅黑";
    transition: 0.3s;
}
.Form input,
Form input {
	position: relative;
    height: 40px;
    padding: 0 10px;
}
.Form textarea,
Form textarea {
    outline: none;
    padding: 10px;
    font-size: 15px;
}
/*禁用属性的表单样式*/
.Form input:disabled,
Form input:disabled,
.Form textarea:disabled,
Form textarea:disabled {
    cursor: not-allowed;
}
/*placeholder表单样式*/
input::placeholder, 
textarea::placeholder {
    color: #bbb;
}

/*获得输入焦点时*/
.Form input:focus,
Form input:focus, 
.Form textarea:focus,
Form textarea:focus {
    border: 1px solid #ccc;
	box-shadow: 0 0 0 2px rgba(0, 0, 0, .06);
}

/***************************************************************************************************************************************************
  Name   ：复选框样式
  Explain：
**************************************************************************************************************************************************/
Form Group input[type='checkbox'],
.Form Group input[type='checkbox']{
	margin-top: 8px;
	margin-right: 8px;
}

Form input[type='checkbox'],
.Form input[type='checkbox'] {
  --primary-color: var(--DefaultColor);
  --secondary-color: #fff;
  --primary-hover-color: #4096ff;
  /* checkbox */
  --checkbox-diameter: 23px;
  --checkbox-border-radius: 5px;
  --checkbox-border-color: #d9d9d9;
  --checkbox-border-width: 1px;
  --checkbox-border-style: solid;
  /* checkmark */
  --checkmark-size: 1.2;
}

Form input[type='checkbox'], .Form input[type='checkbox'], 
Form input[type='checkbox'] *, .Form input[type='checkbox'] *, 
Form input[type='checkbox'] *::before, .Form input[type='checkbox'] *::before, 
Form input[type='checkbox'] *::after, .Form input[type='checkbox'] *::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

Form input[type='checkbox'],.Form input[type='checkbox'] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: var(--checkbox-diameter);
  height: var(--checkbox-diameter);
  border-radius: var(--checkbox-border-radius);
  background: var(--secondary-color);
  border: var(--checkbox-border-width) var(--checkbox-border-style) var(--checkbox-border-color);
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  cursor: pointer;
  position: relative;
}

Form input[type='checkbox']::after,.Form input[type='checkbox']::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-box-shadow: 0 0 0 calc(var(--checkbox-diameter) / 2.5) var(--primary-color);
  box-shadow: 0 0 0 calc(var(--checkbox-diameter) / 2.5) var(--primary-color);
  border-radius: inherit;
  opacity: 0;
  -webkit-transition: all 0.5s cubic-bezier(0.12, 0.4, 0.29, 1.46);
  -o-transition: all 0.5s cubic-bezier(0.12, 0.4, 0.29, 1.46);
  transition: all 0.5s cubic-bezier(0.12, 0.4, 0.29, 1.46);
}

Form input[type='checkbox']::before,.Form input[type='checkbox']::before {
  top: 45%;
  left: 50%;
  content: "";
  position: absolute;
  width: 6px;
  height: 9px;
  border-right: 2px solid var(--secondary-color);
  border-bottom: 2px solid var(--secondary-color);
  -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(0);
  -ms-transform: translate(-50%, -50%) rotate(45deg) scale(0);
  transform: translate(-50%, -50%) rotate(45deg) scale(0);
  opacity: 0;
  -webkit-transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6),opacity 0.1s;
  -o-transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6),opacity 0.1s;
  transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6),opacity 0.1s;
}


Form input[type='checkbox']:hover,.Form input[type='checkbox']:hover {
  border-color: var(--primary-color);
}

Form input[type='checkbox']:checked,.Form input[type='checkbox']:checked {
  background: var(--primary-color);
  border-color: transparent;
}

Form input[type='checkbox']:checked::before,.Form input[type='checkbox']:checked::before {
  opacity: 1;
  -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(var(--checkmark-size));
  -ms-transform: translate(-50%, -50%) rotate(45deg) scale(var(--checkmark-size));
  transform: translate(-50%, -50%) rotate(45deg) scale(var(--checkmark-size));
  -webkit-transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
  -o-transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
  transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
}

Form input[type='checkbox']:active:not(:checked)::after,.Form input[type='checkbox']:active:not(:checked)::after {
  -webkit-transition: none;
  -o-transition: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  transition: none;
  opacity: 1;
}

Form input[type='checkbox']:disabled,.Form input[type='checkbox']:disabled {
  opacity: 0.5;
  cursor: not-allowed; /* 改变光标样式以表明元素不可用 */
  background-color: #eee;
}


/***************************************************************************************************************************************************
  Name   ：单选框样式
  Explain：
**************************************************************************************************************************************************/
Form Group input[type='radio'],.Form Group input[type='radio']{
	margin-top: 8px;
	margin-right: 8px;
}

Form input[type='radio'],.Form input[type='radio'] {
  --primary-color: var(--DefaultColor);
  --secondary-color: #fff;
  --primary-hover-color: #4096ff;
  /* radio */
  --radio-diameter: 24px;
  --radio-border-radius: 50%;
  --radio-border-color: #d9d9d9;
  --radio-border-width: 1px;
  --radio-border-style: solid;
  /* dot */
  --dot-size: calc(var(--radio-diameter) / 2.5);
}

Form input[type='radio'],.Form input[type='radio'], 
Form input[type='radio'] *,.Form input[type='radio'] *, 
Form input[type='radio'] *::before,.Form input[type='radio'] *::before, 
Form input[type='radio'] *::after,.Form input[type='radio'] *::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

Form input[type='radio'],.Form input[type='radio'] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: var(--radio-diameter);
  height: var(--radio-diameter);
  border-radius: var(--radio-border-radius);
  background: var(--secondary-color);
  border: var(--radio-border-width) var(--radio-border-style) var(--radio-border-color);
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  cursor: pointer;
  position: relative;
}

/* 用于表示选中状态的小圆点 */
Form input[type='radio']::after,.Form input[type='radio']::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: 50%;
  background-color: var(--secondary-color);
  opacity: 0;
  -webkit-transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
  -o-transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
  transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
}

/* actions */

Form input[type='radio']:hover,.Form input[type='radio']:hover {
  border-color: var(--primary-color);
}

Form input[type='radio']:checked,.Form input[type='radio']:checked {
  background: var(--primary-color);
  border-color: transparent;
}

Form input[type='radio']:checked::after,.Form input[type='radio']:checked::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

Form input[type='radio']:active:not(:checked)::after,.Form input[type='radio']:active:not(:checked)::after {
  transition: none;
  opacity: 1;
}

Form input[type='radio']:disabled,.Form input[type='radio']:disabled {
  opacity: 0.5;
  cursor: not-allowed; /* 改变光标样式以表明元素不可用 */
  background-color: #eee;
}

.NoPass {
    position: relative;
    border-color: var(--GRAPEFRUIT);
    border-radius: 5px 0px 5px 5px;
    background-image: url("data:image/svg+xml,%3Csvg width='30px' height='30px' viewBox='0 0 30 30' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate%28-128.000000, -59.000000%29' fill='%23F44336'%3E%3Cpolygon points='157.848404 61.9920213 145.980053 73.8603723 157.848404 85.7287234 154.856383 88.7207447 142.988032 76.8523936 131.119681 88.7207447 128.12766 85.7287234 139.996011 73.8603723 128.12766 61.9920213 131.119681 59 142.988032 70.8683511 154.856383 59'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
}	
NoPassText{
    border-radius: 4px 4px 0px 0px;
    background-color: var(--GRAPEFRUIT);
    color: #FFF;
    position: absolute;
    line-height: 15px;
    font-size: 11px;
    right: 0;
    top: -15px;
    padding: 0 5px;
}
.Pass {
    border-color: mediumseagreen;
    background-image: url("data:image/svg+xml,%3Csvg width='45px' height='34px' viewBox='0 0 45 34' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate%28-56.000000, -59.000000%29' fill='%232EEC96'%3E%3Cpolygon points='70.1468531 85.8671329 97.013986 59 100.58042 62.5664336 70.1468531 93 56 78.8531469 59.5664336 75.2867133'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
}

Selects {
    position: relative;
    width: 100%;
}
Selects Button {
    position: relative;
    padding: 0;
    margin-top: -40px;
    width: 40px;
    float: right;
    border-radius: 0px 5px 5px 0px;
    background-color: #f5f5f5;
    color: #888;
    border: 1px solid #ddd;
}
Selects Button:hover {
    box-shadow: 0px 20px 150px rgba(0, 0, 0, 0.06) inset; /*用于实现按钮hover颜色渐变*/
}
Selects Button icon {
    margin: 0;
}
Selects OptionsList {
    display: none;
    position: absolute;
    border-radius: 5PX;
    width: 100%;
	margin-top: 44px;
    left: 0;
    background-color: #FFF;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
	z-index: 2;
	padding: 6px 0px;
}
Selects OptionsList hr {
    border: none; /* 移除默认的边框 */  
    border-top: 1px solid #ddd; /* 设置顶部边框为1像素宽度的实线，颜色为黑色 */  
    height: 0; /* 确保元素的高度为0，这样只显示边框 */ }

Selects OptionsList Options {
    display: block;
    line-height: 40px;
    cursor: pointer;
    padding: 0 15px;
	margin: 2px 8px;
	border-radius: 5px;
	transition: all .2s;
}
Selects OptionsList Options[Selected] {
    background-color: #F1F3F7
}
Selects OptionsList Options[Selected]:active {
    content: "1";
}
Selects OptionsList Options:hover {
    background-color: #F1F3F7
}
/*列表向上显示*/
Selects.ShowUp OptionsList{
    bottom: 44px;
	box-shadow: 3px 0 10px rgba(0, 0, 0, 0.15)!important;
}
/*列表高度限制*/
Selects.Scroll OptionsList{
    max-height: 215px;
	overflow-y: auto;
}

body{
    font-family:"微软雅黑";
}
/*禁止文本自动换行，在一行内显示所有文本。*/
.TextNowrap{
    white-space: nowrap; 
} 

html{
	font-family:sans-serif;
	font-size:100%;
	line-height:1;
	-ms-text-size-adjust:100%;
	-webkit-text-size-adjust:100%;
	-webkit-font-SMoothing:antialiased;
	-moz-osx-font-SMoothing:grayscale;
	box-sizing:border-box
	}
*,:before,:after{
    box-sizing:inherit
}

.Row,Row {margin:0 auto}
.Row:before,Row:before,
.Row:after,Row:after {
    content:''; display:table
}
.Row:after,Row:after {
    clear:both
}

/*Row下的所有格子均左对齐*/
.Row [class*="XS-"], Row [class*="XS-"], 
.Row [class*="SM-"], Row [class*="SM-"], 
.Row [class*="MD-"], Row [class*="MD-"], 
.Row [class*="LG-"], Row [class*="LG-"], 
.Row [class*="XL-"],Row [class*="XL-"]{
    float:left
}

/*可用类*/
.Hidden{display: none!important;}/*隐藏*/

/*网格间距设置
=======================================================================================================================================================*/
Row.Space-1  {margin:-.5px}  Row.Space-1>*  {padding:.5px}
Row.Space-3  {margin:-1.5px} Row.Space-3>*  {padding:1.5px}
Row.Space-5  {margin:-2.5px} Row.Space-5>*  {padding:2.5px}
Row.Space-8  {margin:-4px}   Row.Space-8>*  {padding:4px}
Row.Space-10 {margin:-5px}   Row.Space-10>* {padding:5px}
Row.Space-12 {margin:-6px}   Row.Space-12>* {padding:6px}
Row.Space-15 {margin:-7.5px} Row.Space-15>* {padding:7.5px}
Row.Space-18 {margin:-9px}   Row.Space-18>* {padding:9px}
Row.Space-20 {margin:-10px}  Row.Space-20>* {padding:10px}
Row.Space-22 {margin:-11px}  Row.Space-22>* {padding:11px}
Row.Space-28 {margin:-14px}  Row.Space-28>* {padding:14px}
Row.Space-30 {margin:-15px}  Row.Space-30>* {padding:15px}
Row.Space-40 {margin:-20px}  Row.Space-40>* {padding:20px}
Row.Space-50 {margin:-25px}  Row.Space-50>* {padding:25px}
Row.Space-60 {margin:-30px}  Row.Space-60>* {padding:30px}
Row.Space-70 {margin:-35px}  Row.Space-70>* {padding:35px}
Row.Space-80 {margin:-40px}  Row.Space-80>* {padding:40px}

/*网格属性
=======================================================================================================================================================*/
@media only all and (max-width: 479px) {/*手机竖放时*/
.XS-0 {display:none}/*超小屏幕-手机*/
.XS-1,.XS-2,.XS-3,.XS-4,.XS-5,.XS-6,.XS-7,.XS-8,.XS-9,.XS-10,.XS-11,.XS-12,.XS-13,.XS-14,.XS-15,.XS-16,.XS-17,.XS-18,.XS-18,.XS-20,.XS-21,.XS-22,.XS-23,.XS-24 {display:inline-block}
.XS-1 {width: 4.16666666666667%} 
.XS-2 {width: 8.33333333333333%} 
.XS-3 {width: 12.5%} 
.XS-4 {width: 16.6666666666667%} 
.XS-5 {width: 20.8333333333333%} 
.XS-6 {width: 25%} 
.XS-7 {width: 29.1666666666667%} 
.XS-8 {width: 33.3333333333333%} 
.XS-9 {width: 37.5%} 
.XS-10 {width: 41.6666666666667%} 
.XS-11 {width: 45.8333333333333%} 
.XS-12 {width: 50%} 
.XS-13 {width: 54.1666666666667%} 
.XS-14 {width: 58.3333333333333%} 
.XS-15 {width: 62.5%} 
.XS-16 {width: 66.6666666666667%} 
.XS-17 {width: 70.8333333333333%} 
.XS-18 {width: 75%} 
.XS-19 {width: 79.1666666666667%} 
.XS-20 {width: 83.3333333333333%} 
.XS-21 {width: 87.5%} 
.XS-22 {width: 91.6666666666667%} 
.XS-23 {width: 95.8333333333334%} 
.XS-24 {width: 100%} 
/*XS偏移*/
.XS-Offset-1 {margin-left: 4.16666666666667%} 
.XS-Offset-2 {margin-left: 8.33333333333333%} 
.XS-Offset-3 {margin-left: 12.5%} 
.XS-Offset-4 {margin-left: 16.6666666666667%} 
.XS-Offset-5 {margin-left: 20.8333333333333%} 
.XS-Offset-6 {margin-left: 25%} 
.XS-Offset-7 {margin-left: 29.1666666666667%} 
.XS-Offset-8 {margin-left: 33.3333333333333%} 
.XS-Offset-9 {margin-left: 37.5%} 
.XS-Offset-10 {margin-left: 41.6666666666667%} 
.XS-Offset-11 {margin-left: 45.8333333333333%} 
.XS-Offset-12 {margin-left: 50%} 
.XS-Offset-13 {margin-left: 54.1666666666667%} 
.XS-Offset-14 {margin-left: 58.3333333333333%} 
.XS-Offset-15 {margin-left: 62.5%} 
.XS-Offset-16 {margin-left: 66.6666666666667%} 
.XS-Offset-17 {margin-left: 70.8333333333333%} 
.XS-Offset-18 {margin-left: 75%} 
.XS-Offset-19 {margin-left: 79.1666666666667%} 
.XS-Offset-20 {margin-left: 83.3333333333333%} 
.XS-Offset-21 {margin-left: 87.5%} 
.XS-Offset-22 {margin-left: 91.6666666666667%} 
.XS-Offset-23 {margin-left: 95.8333333333334%} 
.XS-Offset-24 {margin-left: 100%} 

/*可用类*/
.Hidden-XS{display: none!important;}/*隐藏*/	
	
/*消除间距*/
.Eliminat-Space-XS {margin-left: 0!important; margin-right: 0!important;}  .Eliminat-Space-XS>* {padding-left: 0!important; padding-right: 0!important;}
}

@media only all and (min-width: 480px) and (max-width: 767px) {/*手机横放以及平板竖放时：*/
.SM-0 {display:none}
.SM-1,.SM-2,.SM-3,.SM-4,.SM-5,.SM-6,.SM-7,.SM-8,.SM-9,.SM-10,.SM-11,.SM-12,.SM-13,.SM-14,.SM-15,.SM-16,.SM-17,.SM-18,.SM-18,.SM-20,.SM-21,.SM-22,.SM-23,.SM-24 {display:inline-block}
.SM-1 {width: 4.16666666666667%} 
.SM-2 {width: 8.33333333333333%} 
.SM-3 {width: 12.5%} 
.SM-4 {width: 16.6666666666667%} 
.SM-5 {width: 20.8333333333333%} 
.SM-6 {width: 25%} 
.SM-7 {width: 29.1666666666667%} 
.SM-8 {width: 33.3333333333333%} 
.SM-9 {width: 37.5%} 
.SM-10 {width: 41.6666666666667%} 
.SM-11 {width: 45.8333333333333%} 
.SM-12 {width: 50%} 
.SM-13 {width: 54.1666666666667%} 
.SM-14 {width: 58.3333333333333%} 
.SM-15 {width: 62.5%} 
.SM-16 {width: 66.6666666666667%} 
.SM-17 {width: 70.8333333333333%} 
.SM-18 {width: 75%} 
.SM-19 {width: 79.1666666666667%} 
.SM-20 {width: 83.3333333333333%} 
.SM-21 {width: 87.5%} 
.SM-22 {width: 91.6666666666667%} 
.SM-23 {width: 95.8333333333334%} 
.SM-24 {width: 100%} 
/*SM偏移*/
.SM-Offset-1 {margin-left: 4.16666666666667%} 
.SM-Offset-2 {margin-left: 8.33333333333333%} 
.SM-Offset-3 {margin-left: 12.5%} 
.SM-Offset-4 {margin-left: 16.6666666666667%} 
.SM-Offset-5 {margin-left: 20.8333333333333%} 
.SM-Offset-6 {margin-left: 25%} 
.SM-Offset-7 {margin-left: 29.1666666666667%} 
.SM-Offset-8 {margin-left: 33.3333333333333%} 
.SM-Offset-9 {margin-left: 37.5%} 
.SM-Offset-10 {margin-left: 41.6666666666667%} 
.SM-Offset-11 {margin-left: 45.8333333333333%} 
.SM-Offset-12 {margin-left: 50%} 
.SM-Offset-13 {margin-left: 54.1666666666667%} 
.SM-Offset-14 {margin-left: 58.3333333333333%} 
.SM-Offset-15 {margin-left: 62.5%} 
.SM-Offset-16 {margin-left: 66.6666666666667%} 
.SM-Offset-17 {margin-left: 70.8333333333333%} 
.SM-Offset-18 {margin-left: 75%} 
.SM-Offset-19 {margin-left: 79.1666666666667%} 
.SM-Offset-20 {margin-left: 83.3333333333333%} 
.SM-Offset-21 {margin-left: 87.5%} 
.SM-Offset-22 {margin-left: 91.6666666666667%} 
.SM-Offset-23 {margin-left: 95.8333333333334%} 
.SM-Offset-24 {margin-left: 100%} 
	
/*可用类*/
.Hidden-SM{display: none!important;}/*隐藏*/
	
/*消除间距*/
.Eliminat-Space-SM {margin-left: 0; margin-right: 0;}  .Eliminat-Space-SM>* {padding-left: 0; padding-right: 0;}

}

@media only all and (min-width: 768px) and (max-width: 1430px) {/*平板横放时*/
.MD-0 {display:none}
.MD-1,.MD-2,.MD-3,.MD-4,.MD-5,.MD-6,.MD-7,.MD-8,.MD-9,.MD-10,.MD-11,.MD-12,.MD-13,.MD-14,.MD-15,.MD-16,.MD-17,.MD-18,.MD-18,.MD-20,.MD-21,.MD-22,.MD-23,.MD-24 {display:inline-block}
.MD-1 {width: 4.16666666666667%} 
.MD-2 {width: 8.33333333333333%} 
.MD-3 {width: 12.5%} 
.MD-4 {width: 16.6666666666667%} 
.MD-5 {width: 20.8333333333333%} 
.MD-6 {width: 25%} 
.MD-7 {width: 29.1666666666667%} 
.MD-8 {width: 33.3333333333333%} 
.MD-9 {width: 37.5%} 
.MD-10 {width: 41.6666666666667%} 
.MD-11 {width: 45.8333333333333%} 
.MD-12 {width: 50%} 
.MD-13 {width: 54.1666666666667%} 
.MD-14 {width: 58.3333333333333%} 
.MD-15 {width: 62.5%} 
.MD-16 {width: 66.6666666666667%} 
.MD-17 {width: 70.8333333333333%} 
.MD-18 {width: 75%} 
.MD-19 {width: 79.1666666666667%} 
.MD-20 {width: 83.3333333333333%} 
.MD-21 {width: 87.5%} 
.MD-22 {width: 91.6666666666667%} 
.MD-23 {width: 95.8333333333334%} 
.MD-24 {width: 100%} 
/*MD偏移*/
.MD-Offset-1 {margin-left: 4.16666666666667%} 
.MD-Offset-2 {margin-left: 8.33333333333333%} 
.MD-Offset-3 {margin-left: 12.5%} 
.MD-Offset-4 {margin-left: 16.6666666666667%} 
.MD-Offset-5 {margin-left: 20.8333333333333%} 
.MD-Offset-6 {margin-left: 25%} 
.MD-Offset-7 {margin-left: 29.1666666666667%} 
.MD-Offset-8 {margin-left: 33.3333333333333%} 
.MD-Offset-9 {margin-left: 37.5%} 
.MD-Offset-10 {margin-left: 41.6666666666667%} 
.MD-Offset-11 {margin-left: 45.8333333333333%} 
.MD-Offset-12 {margin-left: 50%} 
.MD-Offset-13 {margin-left: 54.1666666666667%} 
.MD-Offset-14 {margin-left: 58.3333333333333%} 
.MD-Offset-15 {margin-left: 62.5%} 
.MD-Offset-16 {margin-left: 66.6666666666667%} 
.MD-Offset-17 {margin-left: 70.8333333333333%} 
.MD-Offset-18 {margin-left: 75%} 
.MD-Offset-19 {margin-left: 79.1666666666667%} 
.MD-Offset-20 {margin-left: 83.3333333333333%} 
.MD-Offset-21 {margin-left: 87.5%} 
.MD-Offset-22 {margin-left: 91.6666666666667%} 
.MD-Offset-23 {margin-left: 95.8333333333334%} 
.MD-Offset-24 {margin-left: 100%} 
	
/*可用类*/
.Hidden-MD{display: none!important;}/*隐藏*/
	
/*消除间距*/
.Eliminat-Space-MD {margin:0px!important;}  .Eliminat-Space-MD>* {padding:0px!important;}

}

@media only all and (min-width: 1431px) and (max-width: 1919px) {/*大型屏幕*/
.LG-0 {display:none}
.LG-1,.LG-2,.LG-3,.LG-4,.LG-5,.LG-6,.LG-7,.LG-8,.LG-9,.LG-10,.LG-11,.LG-12,.LG-13,.LG-14,.LG-15,.LG-16,.LG-17,.LG-18,.LG-18,.LG-20,.LG-21,.LG-22,.LG-23,.LG-24 {display:inline-block}
.LG-1 {width: 4.16666666666667%} 
.LG-2 {width: 8.33333333333333%} 
.LG-3 {width: 12.5%}
.LG-4 {width: 16.6666666666667%} 
.LG-5 {width: 20.8333333333333%} 
.LG-6 {width: 25%} 
.LG-7 {width: 29.1666666666667%} 
.LG-8 {width: 33.3333333333333%} 
.LG-9 {width: 37.5%} 
.LG-10 {width: 41.6666666666667%} 
.LG-11 {width: 45.8333333333333%} 
.LG-12 {width: 50%} 
.LG-13 {width: 54.1666666666667%} 
.LG-14 {width: 58.3333333333333%} 
.LG-15 {width: 62.5%} 
.LG-16 {width: 66.6666666666667%} 
.LG-17 {width: 70.8333333333333%} 
.LG-18 {width: 75%} 
.LG-19 {width: 79.1666666666667%} 
.LG-20 {width: 83.3333333333333%} 
.LG-21 {width: 87.5%} 
.LG-22 {width: 91.6666666666667%} 
.LG-23 {width: 95.8333333333334%} 
.LG-24 {width: 100%} 
/*LG偏移*/
.LG-Offset-1 {margin-left: 4.16666666666667%} 
.LG-Offset-2 {margin-left: 8.33333333333333%} 
.LG-Offset-3 {margin-left: 12.5%} 
.LG-Offset-4 {margin-left: 16.6666666666667%} 
.LG-Offset-5 {margin-left: 20.8333333333333%} 
.LG-Offset-6 {margin-left: 25%} 
.LG-Offset-7 {margin-left: 29.1666666666667%} 
.LG-Offset-8 {margin-left: 33.3333333333333%} 
.LG-Offset-9 {margin-left: 37.5%} 
.LG-Offset-10 {margin-left: 41.6666666666667%} 
.LG-Offset-11 {margin-left: 45.8333333333333%} 
.LG-Offset-12 {margin-left: 50%} 
.LG-Offset-13 {margin-left: 54.1666666666667%} 
.LG-Offset-14 {margin-left: 58.3333333333333%} 
.LG-Offset-15 {margin-left: 62.5%} 
.LG-Offset-16 {margin-left: 66.6666666666667%} 
.LG-Offset-17 {margin-left: 70.8333333333333%} 
.LG-Offset-18 {margin-left: 75%} 
.LG-Offset-19 {margin-left: 79.1666666666667%} 
.LG-Offset-20 {margin-left: 83.3333333333333%} 
.LG-Offset-21 {margin-left: 87.5%} 
.LG-Offset-22 {margin-left: 91.6666666666667%} 
.LG-Offset-23 {margin-left: 95.8333333333334%} 
.LG-Offset-24 {margin-left: 100%} 

/*可用类*/
.Hidden-LG{display: none!important;}/*隐藏*/	
	
/*消除间距*/
.Eliminat-Space-LG {margin-left: 0!important; margin-right: 0!important;}  .Eliminat-Space-LG>* {padding-left: 0!important; padding-right: 0!important;}
}

@media only all and (min-width: 1900px) and (max-width: 3000px) {
.XL-0 {display:none}
.XL-1,.XL-2,.XL-3,.XL-4,.XL-5,.XL-6,.XL-7,.XL-8,.XL-9,.XL-10,.XL-11,.XL-12,.XL-13,.XL-14,.XL-15,.XL-16,.XL-17,.XL-18,.XL-18,.XL-20,.XL-21,.XL-22,.XL-23,.XL-24 {display:inline-block}
.XL-1 {width: 4.16666666666667%} 
.XL-2 {width: 8.33333333333333%} 
.XL-3 {width: 12.5%} 
.XL-4 {width: 16.6666666666667%} 
.XL-5 {width: 20.8333333333333%} 
.XL-6 {width: 25%} 
.XL-7 {width: 29.1666666666667%} 
.XL-8 {width: 33.3333333333333%} 
.XL-9 {width: 37.5%} 
.XL-10 {width: 41.6666666666667%} 
.XL-11 {width: 45.8333333333333%} 
.XL-12 {width: 50%} 
.XL-13 {width: 54.1666666666667%} 
.XL-14 {width: 58.3333333333333%} 
.XL-15 {width: 62.5%} 
.XL-16 {width: 66.6666666666667%} 
.XL-17 {width: 70.8333333333333%} 
.XL-18 {width: 75%} 
.XL-19 {width: 79.1666666666667%} 
.XL-20 {width: 83.3333333333333%} 
.XL-21 {width: 87.5%} 
.XL-22 {width: 91.6666666666667%} 
.XL-23 {width: 95.8333333333334%} 
.XL-24 {width: 100%} 
/*XL偏移*/
.XL-Offset-1 {margin-left: 4.16666666666667%} 
.XL-Offset-2 {margin-left: 8.33333333333333%} 
.XL-Offset-3 {margin-left: 12.5%} 
.XL-Offset-4 {margin-left: 16.6666666666667%} 
.XL-Offset-5 {margin-left: 20.8333333333333%} 
.XL-Offset-6 {margin-left: 25%} 
.XL-Offset-7 {margin-left: 29.1666666666667%} 
.XL-Offset-8 {margin-left: 33.3333333333333%} 
.XL-Offset-9 {margin-left: 37.5%} 
.XL-Offset-10 {margin-left: 41.6666666666667%} 
.XL-Offset-11 {margin-left: 45.8333333333333%} 
.XL-Offset-12 {margin-left: 50%} 
.XL-Offset-13 {margin-left: 54.1666666666667%} 
.XL-Offset-14 {margin-left: 58.3333333333333%} 
.XL-Offset-15 {margin-left: 62.5%} 
.XL-Offset-16 {margin-left: 66.6666666666667%} 
.XL-Offset-17 {margin-left: 70.8333333333333%} 
.XL-Offset-18 {margin-left: 75%} 
.XL-Offset-19 {margin-left: 79.1666666666667%} 
.XL-Offset-20 {margin-left: 83.3333333333333%} 
.XL-Offset-21 {margin-left: 87.5%} 
.XL-Offset-22 {margin-left: 91.6666666666667%} 
.XL-Offset-23 {margin-left: 95.8333333333334%} 
.XL-Offset-24 {margin-left: 100%} 
	
/*可用类*/
.Hidden-XL{display: none!important;}/*隐藏*/
	
/*消除间距*/ 
.Eliminat-Space-XL {margin:0px!important;}  .Eliminat-Space-XL>* {padding:0px!important;}
	
}
/* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
@font-face {
  font-family: 'iconfont';  /* Project id 853635 */
  src: url('ASSETS/FONTS/iconfont.woff2') format('woff2'),
       url('ASSETS/FONTS/iconfont.woff') format('woff'),
       url('ASSETS/FONTS/iconfont.ttf') format('truetype');
}

icon{
  font-family:"iconfont" !important;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/*标签
===================================================================================================================================================*/
Labels{
    display: inline-block;
    padding: 3px 10px 3px 10px;
	font-size: 90%;
	line-height: 100%;
    border-radius: 5px;
	color: #aaa;
	position: relative;
}
Labels.Border{
	padding: 2px 9px 2px 9px;
    border-style: solid;
	border-width: 1px;
}
Labels.Capsule{
    border-radius: 1000px;
}
/*以下CSS只有在第一个类名，且是以Back开头的类名才能生效*/
Labels[class^="Back"] {
    color: #FFF;
}
Modal {  
  display: none; /* 隐藏模态框 */  
  justify-content: center;
  align-items: center;
  position: fixed; /* 固定位置 */  
  left: 0;  
  top: 0;  
  width: 100%; /* 宽度全屏 */  
  height: 100%; /* 高度全屏 */  
  background-color: rgba(0, 0, 0, 0.6); /* 半透明背景 */
  z-index: 100;
  overflow: hidden;
}  
      
Modal[open] {
  display: flex;
}  
  
Modal>Content { 
    display: block;
    background-color: #FFF;  
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #888;  
    width: 30%; /* 宽度80% */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);  
    overflow: hidden;
    border-radius: 5px; 
    position: relative;
    transform: translateY(0);  
    transition: transform .3s ease-in-out; 
}  
Modal Close{
        color: rgba(0,0,0,.5);
        position: absolute;
        right: 12px;
        top: 12px;
        font-size: 23px;
        background-color: rgba(0,0,0,.03);
        padding: 6px;
        border-radius: 5px;
        cursor: pointer;
        user-select: none;
        transition: all .2s; 
		z-index: 1;
}
Modal Close:hover{
    color: crimson;
}
Modal>Content>Titles{
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: #eee;
    font-size: 16px;
    line-height: 60px;
    padding-left: 15px;
    padding-right: 15px;
    user-select: none;
}
Modal>Content>Titles>icon{
    margin-right: 7px;
}
Modal>Content>Bodies{
    display: block;
    padding: 15px;
}
Modal>Content>Footer{
    display: block;
    padding: 15px;
    border-top: 1px solid #ddd;
}

Modal>Content>Footer.Right{
    text-align: right;
}

Modal>Content>Footer>Button{
    margin-left: 5px;
	margin-right: 5px;
}
Modal>Content>Footer>Button:first-child{
    margin-left: 0px;
}
Modal>Content>Footer.Right>Button:last-child{
    margin-right: 0px;
}


/*全屏样式*/
.FullScreen{
    background-color: #FFF
}
.FullScreen Content{
    width: 100%;
    padding-top: 50px;
	background-color: transparent;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0); 
    border: 0;  
}
.FullScreen Close{
    position: absolute;
    top: 10px;
    right: 10px;
}

/*子导航
===================================================================================================================================================*/
Subnav{
    display: block;
}
Subnav Menus{
    display: block;
    padding: 5px 10px;
    line-height: 30px;
    transition: all .3s;
	cursor: pointer;
}
Subnav Menus:hover,
Subnav Menus.Active
{
    background-color: rgba(0,0,0,.03);
    padding-left: 15px;
}
    Notification{
        position: fixed;
        z-index: 110000; /* 确保通知栏显示在其他内容之上 */ 
        /* 禁止选中文本 */ 
        -webkit-user-select: none; /* Safari */  
        -moz-user-select: none;    /* Firefox */  
        -ms-user-select: none;     /* IE10+/Edge */  
        user-select: none;         /* 标准语法 */ 
    }
    Notification.TopCenter{
        top: 0;
        left: 50%;
        text-align: center;
        transform: translateX(-50%);
    }
    Notification.TopLeft{
        top: 0;
        left: 10px;
    }
    
    Notification.TopRight{
        top: 0;
        right: 10px;
        text-align: right
    }
    Notification.TopCenter>Content,
    Notification.TopLeft>Content,
    Notification.TopRight>Content{
        animation: slideDown 0.5s ease-out forwards; 
    }
    
    Notification.BottomCenter{
        bottom: -30px;
        left: 50%;
        text-align: center;
        transform: translateX(-50%);
    }

    Notification.BottomLeft{
        bottom: -30px;
        left: 10px;
    }
    
    Notification.BottomRight{
        bottom: -30px;
        right: 10px;
        text-align: right
    }
    Notification.BottomCenter>Content,
    Notification.BottomLeft>Content,
    Notification.BottomRight>Content{
        animation: slideUp 0.5s ease-out forwards; 
    }
    
    Notification>Content{
        padding: 10px 15px;
        margin-top: 10px;
        border-radius: 5px; 
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); 
    }
    
    @keyframes slideDown {  
        from {  
            transform: translateY(-100%);  
            opacity: 0;  
        }  
        to {  
            transform: translateY(0);  
            opacity: 1;  
        }  
    }
    @keyframes slideUp {  
        from {  
            transform: translateY(0);  
            opacity: 0;  
        }  
        to {  
            transform: translateY(-100%);  
            opacity: 1;  
        }  
    }

        Pagination {
            display: flex;
            flex-direction: row;
            height: 40px;
            -webkit-user-select: none; /* Safari */  
            -moz-user-select: none; /* Firefox */  
            -ms-user-select: none; /* IE10+/Edge */  
            user-select: none; /* Standard syntax */ 
}
        Pagination PageInfo {
			display: flex;
            justify-content: center; /* 水平居中 */
            align-items: center;     /* 垂直居中 */
			margin-left: 5px;
			margin-right: 5px;

        }
        Pagination PageItem {
            display: flex;
            flex-direction: row;
        }
        Pagination Pages {
            border: 1px solid #DDD;
            width: 40px;
            height: 100%;
            display: flex;
            justify-content: center; /* 水平居中 */
            align-items: center;     /* 垂直居中 */
            margin-left: 5px;
            margin-right: 5px;
            border-radius: 3px;
        }
        Pagination Pages:hover {
            cursor: pointer;
            background-color: rgba(0,0,0,.1);
        }
        Pagination Pages.Active {
            background-color: var(--DefaultColor);
            color: #FFF;
            border: 0;
        }
Panel {
    display: block;
    background-color: #FFF;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, .05);
}
Panel > Titles {
    display: block;
    font-size: 16px;
    padding: 20px 20px;
    border-bottom: 1px solid #DDD;
}
Panel > Container {
	height: 100%;
    display: block;
    padding: 20px 20px;
    color: #777
}
Panel.Style-1 {
    background-color: transparent;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0);
}
Panel.Style-1 > Titles {
    font-size: 19px;
    border-bottom: 0;
    color: #444;
}
Panel.Style-1 > Container {
    background-color: #FFF;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, .05);
    border-radius: 3px;
    padding: 20px;
}
	Progresses{
		display: block;
		width: 100%;
		height: 5px;
		background-color: #f3f3f3; /* 设置背景色 */ 
		border-radius: 3px; /* 设置边框圆角 */
		box-shadow: 0 0 1px #ddd; /* 设置阴影效果 */
        /*overflow: hidden;*/
	}
	Progresses Bar{
		display: block;
		position: relative;
		width: 0%;
        height: 100%;
		text-align: center;
        background-color: var(--DefaultColor);
        border-radius: 3px; /* 设置边框圆角 */
        background-size: 20px 20px;
        animation-delay: .1s;
	}
	Progresses Bar Label{
		position: absolute; 
		padding: 2px 8px;
		border-radius: 100px;
		top: 50%;  
		transform: translateY(-50%);  
		font-size: 70%;
		color: #FFF;
	}
    
/*进度条加载动画*/
@-webkit-keyframes animate-positive{
    0% { width:0;}
}
@keyframes animate-positive{
    0% { width:0;}
}
/**************************************************************************************************************************************************
  Name   ：斑纹效果
  Explain：设置进度条斑纹效果
**************************************************************************************************************************************************/
/*静态斑纹*/
Progresses.Striped Bar{
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%);}	
/*动画斑纹*/	
Progresses.Animated.Striped Bar{
    animation: process .6s infinite linear;
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%);}	
/*斑纹动画效果*/
@keyframes process {
    from {
        background-position: 20px 0
    }

    to {
        background-position: 0 0
    }
}
/**************************************************************************************************************************************************
  Name   ：抹角样式
  Explain：设置进度条斑纹效果
**************************************************************************************************************************************************/
/*扁平化*/	
Progresses.Delayering,
Progresses.Delayering Bar{
    border-radius: 0;
}	
/*胶囊形*/	
Progresses.Capsule,
Progresses.Capsule Bar{
     border-radius: 10000px;
}	
ProgressCircle {
    --percent: 0; /* 百分数 */
    --size: 0px; /* 尺寸大小 */
    --border-width: 5px; /* 环宽（粗细） */
    --color: var(--DefaultColor); /* 主色 */
    --inactive-color: #eee; /* 辅助色 */
    display:inline-block;
    position: relative;
    width: var(--size);
    height: var(--size);
    border-radius: 300%;
	opacity:0;
	transition: opacity 400ms ease-in-out 0s;
}
/* 百分数文本 */
ProgressCircle::before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    counter-reset: progress var(--percent);
    content: counter(progress) '%';
    white-space: nowrap;
    font-size: 25px;
}

/* SVG 容器 */
ProgressCircle > svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
/* 进度条圆环 */
ProgressCircle circle {
    --r: calc((var(--size) - var(--border-width)) / 2);
    cx: calc(var(--size) / 2);
    cy: calc(var(--size) / 2);
    r: var(--r);
    fill: none;
    stroke-width: var(--border-width);
    stroke-linecap: round;
    transition: stroke-dasharray 800ms linear, stroke .3s;
}
ProgressCircle circle:nth-child(2) {
    stroke-dasharray: calc(2 * 3.1415 * var(--r) * (var(--percent) / 100)), 1000
}
/* 优化：进度为0时隐藏进度条 */
/*ProgressCircle {opacity: var(--percent);}*/
@charset "utf-8";
/* CSS Document */
Search{
    /*padding: 3px;*/
    display: flex;
    flex-direction: row;
    height: 40px;
}
Search input::placeholder {
    /*color: #bbb;  在表单的CSS里面已经定义*/
}
Search input{
	width: 100%;
    flex-grow: 1;
    border-right: 0;
    padding-left: 13px;
    padding-right: 13px;
    border-top: 1px solid;
    border-bottom: 1px solid;
    border-left: 1px solid;
    border-color: #ddd;
    border-top-left-radius: inherit;
    border-bottom-left-radius: inherit;
}
Search > button{
    background-color: var(--DefaultColor);
	flex-shrink: 0;
    color: #fff;
    border: 0;
    border-radius: 0;
    line-height: 100%;
    cursor: pointer;
    transition: all .3s ease;
    border-top-right-radius: inherit;
    border-bottom-right-radius: inherit;

}
Search > button:hover{
    box-shadow:0px 20px 150px rgba(0, 0, 0, 0.2) inset;/*用于实现按钮hover颜色渐变*/
    transition: all .3s ease;
}
Search > input,
Search > button{
    height: 100%!important;
}
Search input:focus {
    outline: none;
}
/***************************************************************************************************************************************************
  Name   ：风格样式
  Explain：搜索框的风格样式
**************************************************************************************************************************************************/
Search.Style1{
    border-radius: 1000px;
    border: 1px solid #ddd;
}
Search.Style1 input{
    border: 0;
}
Search.Style1 button{
    padding-top: 8px;
    font-size: 20px;
    color: #CCC;
    background-color: transparent;
}
Search.Style1 button:hover{
    color: #555;
    box-shadow:0px 20px 150px rgba(0, 0, 0, 0) inset;/*用于实现按钮hover颜色渐变*/
}

/*表格整体属性
===========================================================================================================================================================*/
Table {
	width: 100%;
	max-width: 100%;
	margin-bottom: 5px;
	border-spacing: 0; 
	border-collapse: collapse; 
	background-color: transparent;
}

/*首行字体设置
===========================================================================================================================================================*/
Table thead{ 
	font-size:16px; 
	border-bottom: 2px solid #ddd;
}
Table thead th{
	font-weight:inherit; 
	text-align: inherit;
}


/*列表字体设置
===========================================================================================================================================================*/
Table tbody{ font-size:14px;}

/*排序按钮
===========================================================================================================================================================*/
Table thead tr td i{ color:#CCC; cursor: pointer; transition:background-color 0.25s linear,color 0.25s linear;}
Table thead tr td i:hover{ color:#333;}

/*行高及边框调整
===========================================================================================================================================================*/
Table thead tr th,
Table tbody tr th,
Table tfoot tr th,
Table thead tr td,
Table tbody tr td,
Table tfoot tr td {
	padding: 11px;
	line-height: 1.4em;
	border-top: 1px solid #ddd;
}

/*行高及边框调整 - 紧缩表格
===========================================================================================================================================================*/
Table.Condensed thead tr th,
Table.Condensed tbody tr th,
Table.Condensed tfoot tr th,
Table.Condensed thead tr td,
Table.Condensed tbody tr td,
Table.Condensed tfoot tr td {
	padding: 11px;
	line-height: .5;
	vertical-align: top;
	border-top: 1px solid #ddd;
}

/*首行顶边不显示
===========================================================================================================================================================*/
Table > caption + thead > tr:first-child > th,
Table > colgroup + thead > tr:first-child > th,
Table > thead:first-child > tr:first-child > th,
Table > caption + thead > tr:first-child > td,
Table > colgroup + thead > tr:first-child > td,
Table > thead:first-child > tr:first-child > td {
  border-top: 0;
}
Table > tbody + tbody {
  border-top: 2px solid #ddd;
}

.Table-bordered {
  border: 1px solid #ddd;
}
.Table-bordered > thead > tr > th,
.Table-bordered > tbody > tr > th,
.Table-bordered > tfoot > tr > th,
.Table-bordered > thead > tr > td,
.Table-bordered > tbody > tr > td,
.Table-bordered > tfoot > tr > td {
  border: 1px solid #ddd;
}
.Table-bordered > thead > tr > th,
.Table-bordered > thead > tr > td {
  border-bottom-width: 2px;
}
.Table-striped > tbody > tr:nth-of-type(odd) {
  background-color: #f9f9f9;
}

/*滚动表格
===========================================================================================================================================================*/
Table.Scroll,
Table.Scroll tbody {
    display: block;
    height: calc(100% - 1.8em);
}

Table.Scroll tbody {
    overflow-y: scroll;
}

Table.Scroll thead,
Table.Scroll tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}
Table.Scroll thead {
    width: calc(100% - 1em)
}
/*行鼠标切换颜色
===========================================================================================================================================================*/
.Table-hover > tbody > tr:hover {
  box-shadow:0px 20px 150px rgba(0, 0, 0, 0.03) inset;/*用于实现hover颜色渐变*/
  transition: all .1s ease;
}




Table.Style1{
	padding-left: 16px; 
	margin-left: -8px;
	border-spacing: 0px 5px!important; /* 水平间距是10px，垂直间距是0 */
	border-collapse: initial;
}
Table.Style1 tbody tr{
	position: relative;
}
Table.Style1 tbody tr td{
	border-top: 0px solid #000!important;
	background-color: #FFF;
}
Table.Style1 tbody tr td::before{
	top: 0;
	left: -8px;
	height: 100%;
	position: absolute;
    background-color: inherit;
	content: "";
	padding: 5px;
	border-radius: 5px 0px 0px 5px;
}
Table.Style1 tbody tr td::after{
	top: 0;
	right: -8px;
	height: 100%;
	position: absolute;
    background-color: inherit;
	content: "";
	padding: 5px;
	border-radius: 0px 5px 5px 0;
}
	Tabs{
		display: block;
	}
	Tabs>Group{
		display: block;
		width: 100%;
		height: 40px;
		line-height: 40px;
		border-bottom: 1px solid;
		border-color: #ddd;
		margin-bottom: 10px;
        -webkit-user-select: none; /* Safari */  
        -moz-user-select: none; /* Firefox */  
        -ms-user-select: none; /* IE10+/Edge */  
        user-select: none; /* 标准语法 */ 
	}
	Tabs>Group>Tab{
		display: inline-block;
		padding: 0 10px;
		cursor: pointer;
    }
	Tabs>Group>Tab.Active{
		border-bottom: 3px solid;
		border-color: var(--DefaultColor);
	}
    Tabs>Content{  
      display: none; 
	  
    }
    Tabs>Content.Active{  
      display: block; 
    }

.Tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.Tooltip TooltipContent{
    display: none;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 5px 8px;
    border-radius: 5px;
    white-space: nowrap;
    z-index: 1000;
}
.Tooltip:hover TooltipContent{
    display: block;
}

/*字体大小
===========================================================================================================================================================*/
h1,h2,h3,h4,h5,h6,p{font-weight:500; margin: 0}

p {font-size:15px; line-height: 1.82em; letter-spacing:1px;}/*~15px*/
h1{font-size:36px; line-height:45px;}/*36px*/
h2{font-size:30px; line-height:40px;}/*30px*/
h3{font-size:24px; line-height:30px;}/*24px*/
h4{font-size:18px}/*18px*/
h5{font-size:15px}/*14px*/
h6{font-size:12px}/*12px*/

.h1{font-size:36px}/*36px*/
.h2{font-size:30px}/*30px*/
.h3{font-size:24px}/*24px*/
.h4{font-size:18px}/*18px*/
.h5{font-size:15px}/*14px*/
.h6{font-size:12px}/*12px*/


h1 small,h2 small,h3 small,h4 small,h5 small,h6  small{ color:#999999; font-weight: 300}
h1 small,h2 small,h3 small{font-size:65%}
h4 small,h5 small,h6 small{font-size:75%}

/*中心内容
===========================================================================================================================================================*/
.Lead{font-size: 18px; line-height: 26px; font-weight: 200;}

/*文本对齐方式
===========================================================================================================================================================*/
.Align-Left,
.Text-Left/*兼容旧版*/
{text-align: left;}
.Align-Center,
.Text-Center/*兼容旧版*/
{text-align: center;}
.Align-Right,
.Text-Right/*兼容旧版*/
{text-align: right;}

/*控制字体超出变成省略号===========================================================================================================================================================*/
.Omit{
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}

.Omit2{
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;	
}

.Omit3{
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;	
}

.Omit4{
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:4;
-webkit-box-orient:vertical;	
}

.Omit5{
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:5;
-webkit-box-orient:vertical;	
}

.Omit6{
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:6;
-webkit-box-orient:vertical;	
}

.Omit7{
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:7;
-webkit-box-orient:vertical;	
}

.Omit8{
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:8;
-webkit-box-orient:vertical;	
}
/*文本强调
===========================================================================================================================================================*/
mark   { background-color: #FFC107;}/*文本背景高亮*/
del    {text-decoration-color: #E84C3D;}/*删除文本的线条颜色定义为红色*/
ins    {text-decoration-color: #4CAF50;}/*更新文本的线条颜色定义为绿色*/

/*改变大小写
===========================================================================================================================================================*/
.Text-lowercase/*兼容旧版*/,.Text-Lowercase{text-transform: uppercase}/*全大写*/
.Text-uppercase/*兼容旧版*/,.Text-Uppercase{text-transform: lowercase}/*全小写*/
.Text-capitalize/*兼容旧版*/,.Text-Capitalize{text-transform: capitalize}/*首字母大写*/

Upload {
	width: 100%;
	max-width: 100%;
    display: flex;
	flex-direction: row;
    position: relative;
	border-radius: 5px;
}

Upload label {
    display: inline-block;
	white-space: nowrap;
    background-color: var(--DefaultColor);
    color: white;
	padding-left: 10px;
	border-radius: 5px 0 0 5px;
	padding-right: 10px;
	font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

Upload label:hover {
    box-shadow: 0px 20px 150px rgba(0, 0, 0, 0.15) inset; /*用于实现按钮hover颜色渐变*/
    transition: all .2s ease;
}

Upload Info{
	position: relative;
	align-self: flex-start;
	width: 100%;
	height: 40px;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	border-top: 1px solid #DDD;
	border-right: 1px solid #DDD;
	border-bottom: 1px solid #DDD;
	border-radius: 0 5px 5px 0;
	overflow: hidden;
}

Upload .file-input {
    display: none;
}

Upload .file-name {
	max-width: 80%;
    font-size: 13px;
	padding-left: 8px;
	height: 35px;
    color: #333;
	white-space: nowrap;       /* 强制文本在一行内显示 */
    overflow: hidden;          /* 隐藏超出容器的内容 */
    text-overflow: ellipsis;   /* 当文本溢出时显示省略号 */
}

Upload .progressContainer {
    margin-top: 1px;
	overflow: hidden;
}

Upload progress {
    width: 100%;
    height: 3px;
    appearance: none; /* 移除默认样式 */
    -webkit-appearance: none; /* 移除WebKit浏览器默认样式 */
    background-color: #f3f3f3; /* 背景颜色 */
    overflow: hidden;
}

Upload progress::-webkit-progress-bar {
    background-color: #f3f3f3; /* 背景颜色 */
}

/* WebKit浏览器中的渐变效果 */
Upload progress::-webkit-progress-value {
    background: linear-gradient(to right, #4caf50, #ffeb3b); /* 渐变颜色 */
    border-radius: 10px; /* 圆角 */
}

Upload .progressText {
    position: absolute;
    right: 10px;
    top: 0px;
    font-size: 12px;
}