/**************************************************
 *
 *      wsfly base style
 *      author : wsfly.com
 *      version : v1.0.5
 *
 **************************************************/


/* 注意将 media 适配放到CSS文档最后 */
/* 默认 超小设备（手机，小于 576px） */
/* 
    min-width 表示最小即：大于等于
    max-width 表示最大即：小于等于
*/

@media (min-width: 576px) {
    /* 超小设备（手机，576px 起） */
    .container{ max-width:540px; }
}
@media (min-width: 768px) {
    /* 小型设备（平板电脑，768px 起） */
    .container{ max-width:720px; }
}
@media (min-width: 992px) {
    /* 中型设备（台式电脑，992px 起） */
    .container{ max-width:960px; }
}
@media (min-width: 1200px) {
    /* 大型设备（大台式电脑，1200px 起） */
    .container{ max-width:1140px; }
}
@media(min-width:1366px){
    /* 宽屏 */
    .container{ max-width:1270px; }
}
@media(min-width:1440px){
    /* 宽屏 */
    .container{ max-width:1370px; }
}
@media(min-width:1600px){
    /* 宽屏 */
    .container{ max-width:1470px; }
}


/* HTML TAG BEGIN */
*{ list-style:none; padding:0; margin:0; zoom:1;}
html,body{ width:100%; height:auto; line-height:22px; font-family: '微软雅黑','Trebuchet MS','Lucida Sans Unicode','Lucida Grande','Lucida Sans',Arial,sans-serif; font-size:14px;}
input{ outline:none;}
form{width:100%; height:auto;}
a{ color:Black; text-decoration:none;}
a:hover{ color:#666;}

div{}
span{}
p{}
img{border-width:0;}
input,select{ vertical-align:middle;}
select{ padding:5px;}
iframe{ border-width:0;}

h1{ line-height:2em; font-size: 2em;}
h2{ line-height:1.5em; font-size: 1.5em;}
h3{ line-height:1.17em; font-size: 1.17em;}
h4{ line-height:1em; font-size: 1em;}
h5{ line-height:0.83em; font-size: 0.83em;}
h6{ line-height:0.67em; font-size: 0.67em;}

ul,ol{ overflow:hidden;}
ul li{}
ol li{}

dt{}
dt dd{}
dt dl{}

table{ width:100%;}
table tr{}
table tr th{}
table tr td{}

/* Even Row */
table tr.Wsfly_Table_EvenRow td {background:#fcfcfc;}
/* Mouse Hover Row*/
table tr.Wsfly_Table_OverRow td {background:#cde2f6;}

/* HTML TAG End */

/* 文本对齐 */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* 文本颜色 */
.text-primary { color: #3b82f6; }
.text-success { color: #10b981; }
.text-warning { color: #f59e0b; }
.text-danger { color: #ef4444; }

/* 背景色 */
.bg-light { background-color: #f9fafb; }
.bg-success-light { background-color: #d1fae5; }
.bg-warning-light { background-color: #fef3c7; }
.bg-danger-light { background-color: #fee2e2; }

/* 边框 */
.border-top { border-top: 2px solid #e5e7eb; }
.border-bottom-none { border-bottom: none; }

/* 间距 */
.p-sm { padding: 8px; }
.p-md { padding: 16px; }
.p-lg { padding: 24px; }


/* Tables BEGIN */
.table{ width:100%; background:#f9f9f9; border:solid 1px #eee; border-right-width:0; border-bottom-width:0; border-collapse:collapse;border-spacing:0; table-layout:fixed;}
.table thead{ height:40px; background:#eee; overflow:hidden;}
.table thead th,
.table thead td{ font-weight:bold; font-size:14px; height:40px; line-height:40px; background:url('Images/tb.thead.png') repeat-x left bottom; white-space:nowrap; overflow:hidden;}
.table tbody tr{}
.table tbody tr th{ font-weight:bold; font-size:14px; border-right:solid 1px #ddd; white-space:nowrap; overflow:hidden;}
.table tbody tr td{ padding:8px; border:solid 1px #ddd; border-left-width:0; border-top-width:0; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.table tfoot{ height:40px; background:#f2f2f2; overflow:hidden;}
.table tfoot th,
.table tfoot td{ padding:8px; border:solid 1px #ddd; border-left-width:0; border-top-width:0; font-size:14px; text-align:left;}

.table2{ width:100%; background:#fff; border:solid 1px #ddd; border-right-width:0; border-bottom-width:0; border-collapse:collapse;border-spacing:0;}
.table2 thead{ height:40px; background:#f2f2f2; overflow:hidden;}
.table2 thead th,
.table2 thead td{ font-weight:bold; font-size:12px; height:40px; line-height:40px; background-color:#f2f2f2;border-right:solid 1px #ddd;}
.table2 tbody tr{}
.table2 tbody tr th{ font-weight:bold; font-size:12px; border-right:solid 1px #ddd;}
.table2 tbody tr td{ padding:4px; border:solid 1px #ddd; border-left-width:0; border-top-width:0; font-size:12px;}
.table2 tfoot{ height:30px; background:#f6f6f6; overflow:hidden;}
.table2 tfoot th,
.table2 tfoot td{ padding:8px; border:solid 1px #ddd; border-left-width:0; border-top-width:0; font-size:14px; text-align:left;}

.table3{ width:100%; background:#fff; border:solid 1px #ddd; border-right-width:0; border-bottom-width:0; border-collapse:collapse;border-spacing:0;}
.table3 thead tr th{ font-weight:bold; border:solid 1px #ddd; border-left-width:0; border-top-width:0; text-align:center; padding:4px; background:#f2f2f2;}
.table3 tbody tr{}
.table3 tbody tr th{ font-weight:bold; border:solid 1px #ddd; border-left-width:0; border-top-width:0; text-align:center;}
.table3 tbody tr td{ padding:4px; border:solid 1px #ddd; border-left-width:0; border-top-width:0; }
.table3 tfoot{ height:30px; background:#f6f6f6; overflow:hidden;}
.table3 tfoot th,
.table3 tfoot td{ padding:4px; border:solid 1px #ddd; border-left-width:0; border-top-width:0; font-size:14px; text-align:left;}

.table4{border-collapse:collapse; width:100%; background:#fff; table-layout: fixed;}
.table4 tr{box-sizing:border-box; width:100%;}
.table4 tr th,
.table4 tr td{border:1px solid #ddd; padding:8px; text-align:left; background:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; overflow:hidden;}
.table4 tr th{background-color:#f2f2f2; font-weight:bold;}
.table4 tbody tr td{ background:#fff;}
.table4 tbody tr:nth-child(2n) td{ background:rgba(224, 247, 250,0.4);}
.table4 tbody tr:hover{}
.table4 tfoot{height:30px; overflow:hidden;}
.table4 tfoot th,
.table4 tfoot td{padding:8px; border:solid 1px #eee; background:#f6f6f6 !important; border-left-width:0; border-top-width:0; font-size:14px; text-align:left;}
.table4 tfoot th{ font-weight:bold !important;}

/*
    固定表头，JS实现表头置顶
    js:Wsfly.Html.TableHeadFixed("divTable");
    <div id="divTable">
        <table class="table_fixed" >
            <thead>
                <tr>
                    <th>标题</th>
                    <th>内容</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
*/
.table_fixed{ border:solid 1px #ccc;  border-right-width:0; border-bottom-width:0; border-spacing:0; table-layout:fixed; position:relative;}
.table_fixed thead{ background:#f2f2f2;}
.table_fixed thead tr{}
.table_fixed thead tr th{ position:relative; white-space:nowrap; overflow:visible; text-overflow:ellipsis; background-color:#fff; background-clip:padding-box; height:30px; line-height:30px; border:solid 1px #ccc; border-left-width:0; border-top-width:0;  padding:0; margin:0; background:#f2f2f2;}
.table_fixed thead tr th::after {content: '';position: absolute;top: -1px;left: -1px;right: -1px;bottom: -1px;border:1px solid #ccc;transform: translate(0px, 0px); z-index:0; pointer-events:none;}
.table_fixed thead tr th.thFixed{ position:relative; z-index:2;}
.table_fixed tbody{ background:#fff;}
.table_fixed tbody tr{}
.table_fixed tbody tr td{ background:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; height:30px; line-height:30px;  border:solid 1px #ccc; border-left-width:0; border-top-width:0; padding:4px; margin:0;}
.table_fixed tbody tr:nth-child(2n) td{ background:#fbfbfb;}
.table_fixed tbody tr:hover td{ background-color:#E2F9FA;}
.table_fixed tbody tr.active td{ background-color:#E4F5FA;}
.table_fixed tfoot{ border-top:solid 3px #ccc;}
.table_fixed tfoot{ background:#fff;}
.table_fixed tfoot tr{}
.table_fixed tfoot tr td{}

/*
    固定表头、表尾，中间内容可滚动
    <table class="table-scrolled" >
        <thead>
            <tr>
                <th>品名</th>
                <th>单价</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
        <tfoot>
            <tr>
                <td>合计</td>
                <td>0</td>
            </tr>
        </tfoot>
    </table>
*/
.table-scrolled{ border:solid 1px #ccc; border-right-width:0; border-bottom-width:0; border-spacing:0; padding-right:10px; display:block;}
.table-scrolled caption{ border-bottom:solid 1px #ccc;}
.table-scrolled thead{ background:#f2f2f2;}
.table-scrolled thead tr th{ white-space:nowrap; overflow:visible; text-overflow:ellipsis; background-color:#fff; background-clip:padding-box; height:30px; line-height:30px; border:solid 1px #ccc; border-left-width:0; border-top-width:0;  padding:0; margin:0; background:#f2f2f2;}
.table-scrolled tbody { display:block;width:calc(100% + 10px);height:300px;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.table-scrolled tbody tr td{ background:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; height:30px; line-height:30px;  border:solid 1px #ccc; border-left-width:0; border-top-width:0; padding:4px; margin:0;}
.table-scrolled tbody tr:nth-child(2n) td{ background:#fbfbfb;}
.table-scrolled tbody::-webkit-scrollbar { width:10px; height:10px;}
.table-scrolled tbody::-webkit-scrollbar-thumb { border-radius:10px; box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background:#888;}
.table-scrolled tbody::-webkit-scrollbar-track { box-shadow:inset 0 0 5px rgba(0, 0, 0, 0.2); background:#ededed; border-radius:10px;}
.table-scrolled tfoot{ background:#fafafa; border-top:solid 3px #ccc; display:block;}
.table-scrolled tfoot tr td{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; height:30px; line-height:30px;  border:solid 1px #ccc; border-left-width:0; border-top-width:0; padding:4px; margin:0;}
.table-scrolled thead tr,
.table-scrolled tbody tr,
.table-scrolled tfoot tr { box-sizing:border-box;table-layout:fixed;display:table;width:100%;}


.tbHead{ height:50px; background-image:url('Images/Common/tb.thead.png');}

.TableTitle{ clear:both; height:42px; line-height:45px; font-size:16px; font-family:微软雅黑; color:#666; border-bottom:solid 1px #eee; margin-bottom:20px;}
.TableActions{ clear:both; height:42px; line-height:45px; margin-bottom:20px;}
.TableTitleRow{ overflow:hidden; zoom:1; margin-bottom:20px; }
.TableTitleRow .TableTitle{ clear:none; float:left;  margin:0;}
.TableTitleRow .TableActions{ clear:none; float:right; margin:0;} 
.TableRow{ clear:both; height: 45px; overflow:hidden; zoom:1;}
.TableRow .TableHeadCell,
.TableRow .TableCellHead{ float:left; width:120px; font-weight:bold; text-align:right; height: 41px;line-height: 41px; padding-right: 5px; font-size:14px; color:#333;}
.TableRow .TableCell{ float:left; font-weight:normal; text-align:left;line-height: 41px; padding-left: 5px; vertical-align:middle; word-break:break-all; word-wrap:break-word;}
.TableRow .TableCell select{ }
.TableRow .TableCellTips{ float:left; font-weight:normal; text-align:left; line-height:41px; padding-left: 5px; vertical-align:middle; color:Gray;}
.TableTipsRow{ height:auto; line-height:24px; color:gray; clear:both; padding-left:130px; margin-bottom:20px; margin-top:-10px; overflow:hidden; zoom:1;}

.TableRowAvg{ display:flex; justify-content:space-between; overflow:hidden; zoom:1; }
.TableRowAvg>div{ flex:1; overflow:hidden; zoom:1;}
.TableRowAvg>.TableCell2{ flex:2; overflow:hidden; zoom:1;}
.TableRowAvg>.TableCell3{ flex:3; overflow:hidden; zoom:1;}
.TableRowAvg>.TableCell4{ flex:4; overflow:hidden; zoom:1;}
.TableRowAvg>.TableCell5{ flex:5; overflow:hidden; zoom:1;}

.TB{ clear:both; overflow:hidden; zoom:1;}
.TB .TR{ position:relative; clear:both; overflow:hidden; zoom:1; padding-left:105px;  line-height:24px; min-height:24px;}
.TB .TR .TH{ position:absolute; left:0; top:0; text-align:left; line-height:24px; height:32px; padding:6px 0; width:100px; overflow:hidden; zoom:1; font-weight:bold; word-break:keep-all; text-wrap:none;}
.TB .TR .TD{ line-height:24px; padding:6px 0; overflow:hidden; zoom:1; display:block;}

.FormRows{ clear:both; overflow:hidden; zoom:1;}
.FormRows .RowTitle{ clear:both; height:40px; line-height:40px; font-size:14px; font-weight:bold; color:#888; overflow:hidden; zoom:1;}
.FormRows .RowContent{ clear:both; margin:5px 0; overflow:hidden; zoom:1;}
.FormRows .RowTips{ height:40px; line-height:40px; color:#888; padding-left:24px; background:url('Images/tag.lightbulb.png') no-repeat left center; overflow:hidden; zoom:1;}
.FormRows .RowTipsBox{ border:solid 1px #e5d29a; background:#fff5d7; height:40px; line-height:40px; text-align:center; color:#444; overflow:hidden; zoom:1;}

.FormRow{ clear:both; overflow:hidden; zoom:1;}
.FormRow .RowTitle{ clear:both; height:40px; line-height:40px; font-size:14px; font-weight:bold; color:#888; overflow:hidden; zoom:1;}
.FormRow .RowContent{ clear:both; margin:5px 0; overflow:hidden; zoom:1;}
.FormRow .RowTips{ height:40px; line-height:40px; color:#888; padding-left:24px; background:url('Images/tag.lightbulb.png') no-repeat left center; overflow:hidden; zoom:1;}
.FormRow .RowTipsBox{ border:solid 1px #e5d29a; background:#fff5d7; height:40px; line-height:40px; text-align:center; color:#444; overflow:hidden; zoom:1;}

/* 简洁现代表格 */
.modern-table { width: 100%; border-collapse: collapse; margin:0px 0; font-size: 0.9em; font-family: 'Segoe UI', sans-serif; min-width: 400px; border-radius: 8px; overflow: hidden; box-shadow: 0 0 20px rgba(0, 0, 0, 0.08); background:#fff;}
.modern-table thead tr { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #ffffff; text-align: left; }
.modern-table th { padding: 16px 20px; font-weight: 600; letter-spacing: 0.5px;}
.modern-table td { padding: 14px 20px; border-bottom: 1px solid #f0f0f0; color: #333; }
.modern-table tbody tr { transition: all 0.2s ease;}
.modern-table tbody tr:hover { background-color: #f8f9ff; transform: translateX(4px);}
.modern-table tbody tr:last-of-type { border-bottom: 2px solid #667eea;}

/* 斑马纹表格 */
.zebra-table { width: 100%;border-collapse: collapse;font-family: -apple-system, BlinkMacSystemFont, sans-serif; background:#fff;}
.zebra-table th {background-color: #4f46e5;color: white;padding: 14px 16px;text-align: left;font-weight: 600;border: none;}
.zebra-table td {padding: 12px 16px;border: none;}
.zebra-table tbody tr:nth-child(odd) {background-color: #ffffff;}
.zebra-table tbody tr:nth-child(even) {background-color: #f8fafc;}
.zebra-table tbody tr:hover {background-color: #e0e7ff;}
.zebra-table td {border-bottom: 1px solid #e2e8f0;}
.zebra-table tr:last-child td {border-bottom: 2px solid #4f46e5;}

/* 卡片式表格 - 移动端适配 */
.card-table {width: 100%;border-collapse: collapse; background:#fff;}
.card-table th {display: none; /* 移动端隐藏表头 */}
.card-table td {display: block;padding: 12px 16px;border-bottom: 1px solid #e5e7eb;position: relative;padding-left: 50%;}
.card-table td:before {content: attr(data-label);position: absolute;left: 16px;width: 45%;padding-right: 10px;white-space: nowrap;font-weight: 600;color: #6b7280;}
/* 桌面端样式 */
@media (min-width: 768px) {
    .card-table th {display: table-cell;background-color: #1e40af;color: white;padding: 16px;text-align: left;}
    .card-table td {display: table-cell;padding-left: 16px;}
    .card-table td:before {display: none;}
}
/* 卡片效果 */
.card-table tbody tr {background: white;border-radius: 8px;box-shadow: 0 2px 4px rgba(0,0,0,0.05);margin-bottom: 12px;display: block;}
@media (min-width: 768px) {
    .card-table tbody tr {display: table-row;box-shadow: none;margin-bottom: 0;}
}

/* 极简风格表格 */
.minimal-table {width: 100%;border-collapse: separate;border-spacing: 0;font-family: 'Inter', sans-serif;background:#fff;}
.minimal-table th {color: #64748b;font-weight: 600;font-size: 0.875rem;text-transform: uppercase;letter-spacing: 0.05em;padding: 8px;border-bottom: 2px solid #e2e8f0;background-color: #f8fafc;}
.minimal-table td {padding:8px;color: #334155;border-bottom: 1px solid #f1f5f9;transition: all 0.2s ease;}
.minimal-table tbody tr:hover td {background-color: #f1f5f9;color: #0f172a;}
.minimal-table td:first-child {font-weight: 500;color: #0f172a;}
.minimal-table {border-radius: 12px;overflow: hidden;border: 1px solid #e2e8f0;}

/* 深色模式表格 */
.dark-table {width: 100%;border-collapse: collapse;background-color: #1f2937;color: #f9fafb;border-radius: 8px;overflow: hidden;}
.dark-table thead {background-color: #111827;}
.dark-table th {padding: 16px 10px;text-align: left;font-weight: 600;color: #d1d5db;border-bottom: 2px solid #374151;}
.dark-table td {padding: 14px 10px;border-bottom: 1px solid #374151;}
.dark-table tbody tr:hover {background-color: #374151;}
/* 状态指示器 */
.status-badge {display: inline-block;padding: 4px 12px;border-radius: 20px;font-size: 0.875rem;font-weight: 500;}
.status-success {background-color: #065f46;color: #6ee7b7;}
.status-warning {background-color: #92400e;color: #fbbf24;}
.status-error {background-color: #7f1d1d;color: #fca5a5;}

/* 带操作的表格 */
.action-table {width: 100%;border-collapse: collapse;font-family: system-ui, sans-serif; background:#fff;}
.action-table thead {background-color: #f3f4f6;}
.action-table th {padding: 16px;text-align: left;font-weight: 600;color: #374151;border-bottom: 2px solid #d1d5db;}
.action-table td {padding: 16px;border-bottom: 1px solid #e5e7eb;vertical-align: middle;}
/* 操作按钮容器 */
.action-table .action-buttons {display: flex;gap: 8px;opacity: 0;transition: opacity 0.2s ease;}
.action-table tr:hover .action-buttons {opacity: 1;}
/* 按钮样式 */
.action-table .action-buttons .btn {padding: 6px 12px;border: none;border-radius: 6px;font-size: 0.875rem;font-weight: 500;cursor: pointer;transition: all 0.2s ease;}
.action-table .action-buttons .btn-edit {background-color: #dbeafe;color: #1d4ed8;}
.action-table .action-buttons .btn-edit:hover {background-color: #bfdbfe;}
.action-table .action-buttons .btn-delete {background-color: #fee2e2;color: #dc2626;}
.action-table .action-buttons .btn-delete:hover {background-color: #fecaca;}
.action-table .action-buttons .btn-view {background-color: #f0f9ff;color: #0369a1;}
.action-table .action-buttons .btn-view:hover {background-color: #e0f2fe;}

/* Tables END */

/* Classic BEGIN */
ul.row{}
ul.row li{ float:left;}

.txtBox{background:rgb(251, 251, 251); outline: 0px; width: 160px; height:18px; padding:3px 5px; line-height:18px; font-size: 14px; vertical-align: middle; border:solid 1px #ccc; border-color: rgb(192, 192, 192) rgb(225, 225, 225) rgb(225, 225, 225) rgb(192, 192, 192); border-radius:3px;}
.txtBox:focus{border-color: rgb(117, 199, 231); outline: 0px;}
.ValidateFail{ border:solid 1px red !important; }
.file,.select{ height:26px; width:190px; background:rgb(251, 251, 251); line-height:26px; font-size: 14px; vertical-align: middle; border:solid 1px #ccc;}
.select{ width:210px; background:#fff; padding:3px 0;}
.file{ width:420px;}

.txtLoginUser,.txtLoginPassword,.txtLoginCode{ width:100%; padding-left:30px; height:40px; line-height:40px; border:solid 1px #ccc; border-radius:5px;box-sizing: border-box; margin-bottom:10px; background:url('Images/tag.user.png') no-repeat 5px 10px; vertical-align:middle;}
.txtLoginPassword{ background-image:url('Images/tag.key.png')}
.txtLoginCode{ width:50%; background-image:url('Images/tag.eye.png')}

.BoxSize{-moz-box-sizing: border-box; /*Firefox3.5+*/-webkit-box-sizing: border-box; /*Safari3.2+*/-o-box-sizing: border-box; /*Opera9.6*/-ms-box-sizing: border-box; /*IE8*/box-sizing: border-box;}
.EmptyData{ text-align:center; font-size:16px; color:Gray; line-height:40px; padding:200px 0;}

.PageRow { overflow:hidden; zoom:1; clear:both;}
.PageRow .PageTJ{ float:left; line-height:40px; color:#666;}
.PageRow .Pagers{ float:right; }
.Pager{ clear:both; padding:10px 0; overflow:hidden; zoom:1;}

.Absolute{ position:absolute !important;}
.Relative{ position:relative !important;}

.PageTitle{ font-size:36px; line-height:60px; font-weight:700; overflow:hidden; clear:both;}
.SubTitle{ font-size:24px; line-height:40px; font-weight:500; overflow:hidden; clear:both;}

.ModuleTitleRow{padding:30px 0;text-align:center;clear:both;}
.ModuleTitleRow .ModuleTitleCN{height:60px;line-height:60px;font-size:30px;text-align:center;}
.ModuleTitleRow .ModuleTitleEN_GrayBig {width:596px;height: 42px;line-height:42px;margin:0 auto;background:url('Images/bg.title.png') no-repeat 0px 0px;font-size:16px; text-align:center; color:gray;}
.ModuleTitleRow .ModuleTitleEN_GraySmall {width:496px;height:43px;line-height:42px; margin:0 auto;background:url('Images/bg.title.png') no-repeat 0px -50px;font-size:16px; text-align:center; color:gray;}
.ModuleTitleRow .ModuleTitleEN_BlackBig {width:596px;height:42px;line-height:42px; margin:0 auto;background:url('Images/bg.title.png') no-repeat 0px -100px;font-size:16px; text-align:center;}
.ModuleTitleRow .ModuleTitleEN_BlackSmall {width:496px;height:43px;line-height:42px; margin:0 auto;background:url('Images/bg.title.png') no-repeat 0px -150px;font-size:16px; text-align:center;}
.ModuleTitleRow .ModuleIntro{ line-height:30px; color:gray; margin-top:20px;}

.WsTitleRow{ padding:30px 0; text-align:center; clear:both; overflow:hidden; zoom:1;}
.WsTitleRow .WsTitleTextCn{ height:60px;line-height:60px;font-size:30px;text-align:center; color:#000;}
.WsTitleRow .WsTitleTextEn,
.WsTitleRow_BlackBig .WsTitleTextEn{ width:600px;height:40px;line-height:40px;margin:0 auto;background:url('Images/bg.wstitle.png') no-repeat 0px 0px;font-size:16px; text-align:center; color:#333;}
.WsTitleRow_BlackSmall .WsTitleTextEn{ width:600px;height:40px;line-height:40px;margin:0 auto;background:url('Images/bg.wstitle.png') no-repeat 0px -40px;font-size:16px; text-align:center; color:#333;}
.WsTitleRow .WsTitleIntro{ line-height:30px; color:gray; margin-top:20px;}

.WsTitleRow_GrayBig .WsTitleTextCn,
.WsTitleRow_GraySmall .WsTitleTextCn{ height:60px;line-height:60px;font-size:30px;text-align:center; color:#666;}
.WsTitleRow_GrayBig .WsTitleTextEn{ width:600px;height:40px;line-height:40px;margin:0 auto;background:url('Images/bg.wstitle.png') no-repeat 0px -80px;font-size:16px; text-align:center; color:#888;}
.WsTitleRow_GraySmall .WsTitleTextEn{ width:600px;height:40px;line-height:40px;margin:0 auto;background:url('Images/bg.wstitle.png') no-repeat 0px -120px;font-size:16px; text-align:center; color:#888;}
.WsTitleRow_GrayBig .WsTitleIntro,
.WsTitleRow_GraySmall .WsTitleIntro{ line-height:30px; color:#999; margin-top:20px;}

.WsTitleRow_WhiteBig .WsTitleTextCn,
.WsTitleRow_WhiteSmall .WsTitleTextCn{ height:60px;line-height:60px;font-size:30px;text-align:center; color:#fff;}
.WsTitleRow_WhiteBig .WsTitleTextEn{ width:600px;height:40px;line-height:40px;margin:0 auto;background:url('Images/bg.wstitle.png') no-repeat 0px -160px;font-size:16px; text-align:center; color:#fff;}
.WsTitleRow_WhiteSmall .WsTitleTextEn{ width:600px;height:40px;line-height:40px;margin:0 auto;background:url('Images/bg.wstitle.png') no-repeat 0px -200px;font-size:16px; text-align:center; color:#fff;}
.WsTitleRow_WhiteBig .WsTitleIntro,
.WsTitleRow_WhiteSmall .WsTitleIntro{ line-height:30px; color:#fff; margin-top:20px;}

/*Buttons*/

/* Action Button */
.btnOk{ height:30px !important; line-height:30px; padding:0 20px; cursor:pointer; border-width:0; background:#444; font-weight:normal; color:#eee; border:solid 1px #333; font-weight:bold; text-align:center;  display:inline-block; border-radius:3px;}
.btnOk:hover{ font-weight:bold; background:#222; color:White; border-color:#333;}
.btnOk:active{ background:#000; border-color:White;}
a.btnOk,
div.btnOk,
span.btnOk{ display:inline-block; border-width:0; text-decoration:none;}

.btnAction{ height:30px !important; line-height:30px; padding:0 20px; cursor:pointer; border-width:0; background:#ccc; border:solid 1px #aaa; font-weight:bold;  display:inline-block; border-radius:3px;}
.btnAction:hover{ font-weight:bold; background:#333; color:White; border-color:#666;}
.btnAction:active{ background:#000; border-color:White;}
a.btnAction,
div.btnAction,
span.btnAction{ display:inline-block; border-width:0; text-decoration:none;}

.btnDefault{ height:30px !important; line-height:30px; padding:0 20px; cursor:pointer; border-width:0; background:#fff; border:solid 1px #ccc; font-weight:bold;  display:inline-block; border-radius:3px;}
.btnDefault:hover{ font-weight:bold; background:#333; color:White; border-color:#666;}
.btnDefault:active{ background:#000; border-color:White;}
a.btnDefault,
div.btnDefault,
span.btnDefault{ display:inline-block; border-width:1px;}

/* 基础简约按钮 */
.simple-btn {padding: 12px 28px;border: 1px solid #ddd;background: white;color: #333;font-size: 14px;font-weight: 500;border-radius: 8px;cursor: pointer;transition: all 0.3s ease;font-family: 'Inter', -apple-system, sans-serif;letter-spacing: 0.3px;  box-sizing:border-box;}
.simple-btn:hover {border-color: #666;transform: translateY(-1px);box-shadow: 0 4px 12px rgba(0,0,0,0.05);}
.simple-btn:active {transform: translateY(0);}

/* 渐变按钮 */
.gradient-btn {padding: 14px 32px;border: none;background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);color: white;font-size: 15px;font-weight: 600;border-radius: 10px;cursor: pointer;transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);letter-spacing: 0.5px;position: relative;overflow: hidden;  box-sizing:border-box;}
.gradient-btn:before {content: '';position: absolute;top: 0;left: -100%;width: 100%;height: 100%;background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);transition: 0.5s;}
.gradient-btn:hover:before {left: 100%;}
.gradient-btn:hover {transform: translateY(-2px);box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);}
.gradient-btn:active {transform: translateY(0);box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);}
/* 不同颜色的渐变按钮 */
.gradient-btn.blue {background: linear-gradient(135deg, #4776E6 0%, #8E54E9 100%);}
.gradient-btn.green {background: linear-gradient(135deg, #00b09b 0%, #96c93d 100%);}
.gradient-btn.orange {background: linear-gradient(135deg, #FF8008 0%, #FFC837 100%);}

/* 幽灵按钮 */
.ghost-btn {padding: 12px 28px;background: transparent;color: #3b82f6;border: 2px solid #3b82f6;font-size: 14px;font-weight: 600;border-radius: 8px;cursor: pointer;transition: all 0.3s ease;position: relative;overflow: hidden;  box-sizing:border-box;}
.ghost-btn:after {content: '';position: absolute;top: 50%;left: 50%;width: 0;height: 0;border-radius: 50%;background: rgba(59, 130, 246, 0.1);transform: translate(-50%, -50%);transition: width 0.3s, height 0.3s;}
.ghost-btn:hover:after {width: 200px;height: 200px;}
.ghost-btn:hover {color: #2563eb;border-color: #2563eb;}
.ghost-btn:active {transform: scale(0.98);}
/* 不同颜色的幽灵按钮 */
.ghost-btn.success {color: #10b981;border-color: #10b981;}
.ghost-btn.warning {color: #f59e0b;border-color: #f59e0b;}
.ghost-btn.danger {color: #ef4444;border-color: #ef4444;}

/* 悬浮阴影按钮 */
.float-btn {padding: 14px 30px;border: none;background: white;color: #333;font-size: 15px;font-weight: 500;border-radius: 12px;cursor: pointer;transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07); box-sizing:border-box;}
.float-btn:hover {transform: translateY(-3px);box-shadow: 0 12px 20px rgba(0, 0, 0, 0.1);}
.float-btn:active {transform: translateY(-1px);box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);}
/* 彩色版本 */
.float-btn.fullwidth{ width:100% !important; display:block;}
.float-btn.primary {background: #3b82f6;color: white;}
.float-btn.success {background: #10b981;color: white;}
.float-btn.dark {background: #1f2937;color: white;}

/* 图标按钮 */
.icon-btn {padding: 12px 24px;border: none;background: #f8fafc;color: #64748b;font-size: 18px;font-weight: 500;border-radius: 8px;cursor: pointer;transition: all 0.3s ease;display: inline-flex;align-items: center;justify-content: center;gap: 8px;  box-sizing:border-box;}
.icon-btn i {font-size: 18px;transition: transform 0.3s ease;}
.icon-btn:hover {background: #f1f5f9;color: #334155;}
.icon-btn:hover i {transform: translateX(3px);}
.icon-btn:active {background: #e2e8f0;}
/* 圆形图标按钮 */
.icon-btn-circle {width: 48px;height: 48px;padding: 0;border: none;background: white;border-radius: 50%;cursor: pointer;transition: all 0.3s ease;display: inline-flex;align-items: center;justify-content: center;box-shadow: 0 4px 12px rgba(0,0,0,0.08);}
.icon-btn-circle:hover {transform: scale(1.1);box-shadow: 0 8px 20px rgba(0,0,0,0.12);}
.icon-btn-circle:active {transform: scale(0.95);}

/* 加载状态按钮 */
.loading-btn {padding: 14px 32px;border: none;background: #3b82f6;color: white;font-size: 15px;font-weight: 600;border-radius: 8px;cursor: pointer;transition: all 0.3s ease;position: relative;overflow: hidden;  box-sizing:border-box;}
.loading-btn.loading {color: transparent;}
.loading-btn.progress {color: white !important;}
.loading-btn .spinner {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 20px;height: 20px;border: 2px solid rgba(255,255,255,0.3);border-top-color: white;border-radius: 50%;animation: spin 0.8s linear infinite;display: none;}
.loading-btn.loading .spinner {display: block;}
/* 不同颜色的加载按钮 */
.loading-btn.success {background: #10b981;}
.loading-btn.warning {background: #f59e0b;}
.loading-btn.danger {background: #ef4444;}
/* 禁用状态 */
.loading-btn:disabled {opacity: 0.6;cursor: not-allowed;}
@keyframes spin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* 开关按钮 */
.toggle-btn {display: inline-flex;align-items: center;gap: 12px;cursor: pointer;  box-sizing:border-box;}
.toggle-btn input {display: none;}
.toggle-btn .switch {width: 52px;height: 28px;background: #e5e7eb;border-radius: 14px;position: relative;transition: all 0.3s ease;}
.toggle-btn .switch:after {content: '';position: absolute;width: 24px;height: 24px;background: white;border-radius: 50%;top: 2px;left: 2px;transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);box-shadow: 0 2px 4px rgba(0,0,0,0.1);}
.toggle-btn input:checked + .switch {background: #3b82f6;}
.toggle-btn input:checked + .switch:after {transform: translateX(24px);}
.toggle-btn input:disabled + .switch {opacity: 0.5;cursor: not-allowed;}
/* 禁用状态 */
.toggle-btn input:disabled + .switch {opacity: 0.5;cursor: not-allowed;}
/* 不同颜色的开关 */
.toggle-btn.green input:checked + .switch {background: linear-gradient(135deg, #10b981, #059669);}
.toggle-btn.orange input:checked + .switch {background: linear-gradient(135deg, #f59e0b, #d97706);}
.toggle-btn.purple input:checked + .switch {background: linear-gradient(135deg, #8b5cf6, #7c3aed);}
.toggle-btn.red input:checked + .switch {background: linear-gradient(135deg, #ef4444, #dc2626);}

/* 按钮组 */
.btn-group {display: inline-flex;border-radius: 8px;overflow: hidden;box-shadow: 0 2px 8px rgba(0,0,0,0.08);  box-sizing:border-box;}
.btn-group .btn {padding: 12px 24px;border: none;background: white;color: #333;font-size: 14px;font-weight: 500;cursor: pointer;transition: all 0.3s ease;border-right: 1px solid #e5e7eb;}
.btn-group .btn:first-child{border-radius:5px 0px 0px 5px;}
.btn-group .btn:last-child {border-radius:0px 5px 5px 0px;border-right: none;}
.btn-group .btn:hover {background: #f9fafb;}
.btn-group .btn.active {background: #3b82f6;color: white;}
/* 圆形按钮组 */
.btn-group-rounded {display: inline-flex;gap: 1px;background: #e5e7eb;border-radius: 25px;padding: 4px;  box-sizing:border-box;}
.btn-group-rounded .btn {padding: 10px 24px;border: none;background: transparent;color: #64748b;font-size: 14px;font-weight: 500;cursor: pointer;border-radius: 20px;transition: all 0.3s ease;}
.btn-group-rounded .btn.active {background: white;color: #3b82f6;box-shadow: 0 2px 8px rgba(0,0,0,0.1);}
/* 3D按钮 */
.btn-3d {padding: 14px 32px;border: none;background: linear-gradient(145deg, #3b82f6, #2563eb);color: white;font-size: 15px;font-weight: 600;border-radius: 10px;cursor: pointer;transition: all 0.2s ease;position: relative;box-shadow: 0 6px 0 #1d4ed8,0 8px 10px rgba(0,0,0,0.1);  box-sizing:border-box;}
.btn-3d:hover {transform: translateY(2px);box-shadow: 0 4px 0 #1d4ed8,0 6px 8px rgba(0,0,0,0.1);}
.btn-3d:active {transform: translateY(4px);box-shadow: 0 2px 0 #1d4ed8,0 4px 6px rgba(0,0,0,0.1);}
.btn-3d.green {background: linear-gradient(145deg, #10b981, #059669);box-shadow: 0 6px 0 #047857,0 8px 10px rgba(0,0,0,0.1);}

/*基础样式*/
.select-basic {padding: 10px 15px;border: 1px solid #ddd;border-radius: 6px;background-color: white;font-size: 1rem;color: #333;width: 100%;max-width: 300px;cursor: pointer;appearance: none;background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M10.293 3.293L6 7.586 1.707 3.293A1 1 0 00.293 4.707l5 5a1 1 0 001.414 0l5-5a1 1 0 10-1.414-1.414z' fill='%23333'/%3E%3C/svg%3E");background-repeat: no-repeat;background-position: right 15px center;background-size: 12px;  box-sizing:border-box;}
.select-basic:focus {outline: none;border-color: #3498db;box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);}

/*现代简约样式*/
.select-modern {padding: 12px 20px;border: 2px solid #e0e0e0;border-radius: 8px;background-color: white;font-size: 1rem;color: #333;width: 100%;max-width: 300px;cursor: pointer;appearance: none;background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237f8c8d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat: no-repeat;background-position: right 15px center;background-size: 16px;transition: all 0.3s ease;  box-sizing:border-box;}
.select-modern:hover {border-color: #3498db;}
.select-modern:focus {outline: none;border-color: #2980b9;box-shadow: 0 0 0 3px rgba(41, 128, 185, 0.1);}

/*极简样式*/
.select-minimal {padding: 10px 0;border: none;border-bottom: 2px solid #ddd;background-color: transparent;font-size: 1rem;color: #333;width: 100%;max-width: 300px;cursor: pointer;appearance: none;background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat: no-repeat;background-position: right center;background-size: 16px;transition: border-color 0.3s ease;  box-sizing:border-box;}
.select-minimal:focus {outline: none;border-bottom-color: #3498db;}

/*圆角样式*/
.select-rounded {padding: 12px 20px;border: 1px solid #ddd;border-radius: 50px;background-color: white;font-size: 1rem;color: #333;width: 100%;max-width: 300px;cursor: pointer;appearance: none;background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237f8c8d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat: no-repeat;background-position: right 20px center;background-size: 16px;transition: all 0.3s ease;  box-sizing:border-box;}
.select-rounded:focus {outline: none;border-color: #3498db;box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);}

/*暗色主题样式*/
.select-dark {padding: 12px 20px;border: 1px solid #444;border-radius: 6px;background-color: #2c3e50;font-size: 1rem;color: #ecf0f1;width: 100%;max-width: 300px;cursor: pointer;appearance: none;background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ecf0f1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat: no-repeat;background-position: right 15px center;background-size: 16px;transition: all 0.3s ease;  box-sizing:border-box;}
.select-dark:focus {outline: none;border-color: #3498db;box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.3);}

/*无边框样式*/
.select-borderless {padding: 10px 35px 10px 15px;border: none;border-radius: 4px;background-color: #f1f8ff;font-size: 1rem;color: #333;width: 100%;max-width: 300px;cursor: pointer;appearance: none;background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233498db' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat: no-repeat;background-position: right 10px center;background-size: 16px;transition: background-color 0.3s ease;  box-sizing:border-box;}
.select-borderless:hover {background-color: #e1f0ff;}
.select-borderless:focus {outline: none;background-color: #d4e9ff;}
/*Classic END*/


/* Common BEGIN */
/*Display*/
.DN{ display:none !important;}
.DB{ display:block !important;}
/*Fonts*/
.FZ6{ font-size:6px !important;}
.FZ8{ font-size:8px !important;}
.FZ10{ font-size:10px !important;}
.FZ12{ font-size:12px !important;}
.FZ14{ font-size:14px !important;}
.FZ16{ font-size:16px !important;}
.FZ18{ font-size:18px !important;}
.FZ20{ font-size:20px !important;}
.FZ24{ font-size:24px !important;}
.FZ28{ font-size:28px !important;}
.FZ32{ font-size:32px !important;}
.FZ36{ font-size:36px !important;}
.FZ42{ font-size:42px !important;}
.FZ48{ font-size:48px !important;}
.FZ52{ font-size:52px !important;}
.FZ60{ font-size:60px !important;}

.FW100{ font-weight:100 !important;}
.FW200{ font-weight:200 !important;}
.FW300{ font-weight:300 !important;}
.FW400{ font-weight:400 !important;}
.FW500{ font-weight:500 !important;}
.FW600{ font-weight:600 !important;}
.FW700{ font-weight:700 !important;}
.FW800{ font-weight:800 !important;}
.FW900{ font-weight:900 !important;}
.FWB,.Bold{ font-weight:bold !important;}
.FWN,.NotBold{ font-weight:normal !important;}
/*Colors*/
.White{ color:White !important;}
.Black{ color:Black !important;}
.Gray{ color:Gray !important;}
.Silver{ color:Silver !important;}
.Red{ color:Red !important;}
.Blue{ color:Blue !important;}
.Green{ color:Green !important;}
.Orange{ color:Orange !important;}
.Yellow{ color:Yellow !important;}
.Purple{ color:Purple !important;}
.RedOrange{ color:#FF2E00 !important;}
.BlueLink{ color:#1692fd !important;}
.SkyBlue{ color:#00abff !important;}
.DarkRed{ color:#AF0000 !important;}

.Color0{ color:#000 !important;}
.Color1{ color:#111 !important;}
.Color2{ color:#222 !important;}
.Color3{ color:#333 !important;}
.Color4{ color:#444 !important;}
.Color5{ color:#555 !important;}
.Color6{ color:#666 !important;}
.Color7{ color:#777 !important;}
.Color8{ color:#888 !important;}
.Color9{ color:#999 !important;}
.ColorA{ color:#aaa !important;}
.ColorB{ color:#bbb !important;}
.ColorC{ color:#ccc !important;}
.ColorD{ color:#ddd !important;}
.ColorE{ color:#eee !important;}
.ColorF{ color:#fff !important;}

.BG0{ background-color:#000 !important;}
.BG1{ background-color:#111 !important;}
.BG2{ background-color:#222 !important;}
.BG3{ background-color:#333 !important;}
.BG4{ background-color:#444 !important;}
.BG5{ background-color:#555 !important;}
.BG6{ background-color:#666 !important;}
.BG7{ background-color:#777 !important;}
.BG8{ background-color:#888 !important;}
.BG9{ background-color:#999 !important;}
.BGA{ background-color:#aaa !important;}
.BGB{ background-color:#bbb !important;}
.BGC{ background-color:#ccc !important;}
.BGD{ background-color:#ddd !important;}
.BGE{ background-color:#eee !important;}
.BGF{ background-color:#fff !important;}

.BGSky{ background-color:#00a3f8 !important; }
.BGBlue{ background-color:blue !important; }
.BGOrange{ background-color:orange !important; }
.BGOrangeRed{ background-color:orangered !important; }
.BGRed{ background-color:red !important; }
.BGGreen{ background-color:green !important; }
.BGYellow{ background-color:yellow !important; }
.BGPurple{ background-color:purple !important; }

/*Width*/
.W12{ width:12px !important;}
.W24{ width:24px !important;}
.W36{ width:36px !important;}
.W40{ width:40px !important;}
.W48{ width:48px !important;}
.W50{ width:50px !important;}
.W60{ width:60px !important;}
.W70{ width:70px !important;}
.W80{ width:80px !important;}
.W90{ width:90px !important;}
.W100{ width:100px !important;}
.W110{ width:110px !important;}
.W120{ width:120px !important;}
.W130{ width:130px !important;}
.W140{ width:140px !important;}
.W150{ width:150px !important;}
.W160{ width:160px !important;}
.W165{ width:165px !important;}
.W170{ width:170px !important;}
.W180{ width:180px !important;}
.W190{ width:190px !important;}
.W200{ width:200px !important;}
.W240{ width:240px !important;}
.W250{ width:250px !important;}
.W280{ width:280px !important;}
.W300{ width:300px !important;}
.W350{ width:350px !important;}
.W400{ width:400px !important;}
.W450{ width:450px !important;}
.W500{ width:500px !important;}
.W600{ width:600px !important;}
.W700{ width:700px !important;}
.W750{ width:750px !important;}
.W800{ width:800px !important;}
.W850{ width:850px !important;}
.W900{ width:900px !important;}
.W960{ width:960px !important;}
.W980{ width:980px !important;}
.W1000{ width:1000px !important;}
.W1024{ width:1024px !important;}

.WB5{ width:5% !important;}
.WB10{ width:10% !important;}
.WB12{ width:12% !important;}
.WB12D5{ width:12.5% !important;}
.WB15{ width:15% !important;}
.WB20{ width:20% !important;}
.WB25{ width:25% !important;}
.WB30{ width:30% !important;}
.WB33{ width:33% !important;}
.WB35{ width:35% !important;}
.WB40{ width:40% !important;}
.WB45{ width:45% !important;}
.WB50{ width:50% !important;}
.WB55{ width:55% !important;}
.WB60{ width:60% !important;}
.WB65{ width:65% !important;}
.WB70{ width:70% !important;}
.WB75{ width:75% !important;}
.WB80{ width:80% !important;}
.WB85{ width:85% !important;}
.WB90{ width:90% !important;}
.WB95{ width:95% !important;}
.WB100{ width:100% !important;}
/*Height*/
.H12{ height:12px !important;}
.H24{ height:24px !important;}
.H36{ height:36px !important;}
.H40{ height:40px !important;}
.H45{ height:45px !important;}
.H48{ height:48px !important;}
.H50{ height:50px !important;}
.H60{ height:60px !important;}
.H70{ height:70px !important;}
.H80{ height:80px !important;}
.H90{ height:90px !important;}
.H100{ height:100px !important;}
.H128{ height:128px !important;}
.H140{ height:140px !important;}
.H150{ height:150px !important;}
.H160{ height:160px !important;}
.H170{ height:170px !important;}
.H180{ height:180px !important;}
.H200{ height:200px !important;}
.H240{ height:240px !important;}
.H250{ height:250px !important;}
.H280{ height:280px !important;}
.H300{ height:300px !important;}
.H350{ height:350px !important;}
.H400{ height:400px !important;}
.H450{ height:450px !important;}
.H500{ height:500px !important;}
.H550{ height:550px !important;}
.H600{ height:600px !important;}
.H650{ height:650px !important;}
.H700{ height:700px !important;}
.H750{ height:750px !important;}
.H800{ height:800px !important;}
.H850{ height:850px !important;}
.H900{ height:900px !important;}
.H950{ height:950px !important;}
.H1000{ height:1000px !important;}

.WA100{ width:100% !important;}
.HA100{ height:100% !important;}
.HAT{ height:auto !important;}
.OHA{ overflow:auto !important;}

/*Line Height*/
.LH10{ line-height:10px !important;}
.LH20{ line-height:20px !important;}
.LH30{ line-height:30px !important;}
.LH40{ line-height:40px !important;}
.LH50{ line-height:50px !important;}
.LH60{ line-height:60px !important;}
.LH70{ line-height:70px !important;}
.LH80{ line-height:80px !important;}
.LH90{ line-height:90px !important;}
.LH100{ line-height:100px !important;}

/*Float*/
.FL{ float:left !important;}
.FR{ float:right !important;}
.CB{ float:none !important; clear:both !important;}
.TC{ text-align:center!important;}
.TL{ text-align:left !important;}
.TR{ text-align:right !important;}
.VT{ vertical-align:top !important;}
.VM{ vertical-align:middle !important;}
.VB{ vertical-align:bottom !important;}

/*Margin*/
.MTC,
.MAC{ margin:0 auto;}

.MT0{ margin-top:0px !important;}
.ML0{ margin-left:0px !important;}
.MR0{ margin-right:0px !important;}
.MB0{ margin-bottom:0px !important;}
.MLR0{ margin:0 0px !important;}
.MTB0{ margin:0px 0 !important;}
.MA0{ margin:0px !important;}

.MT5{ margin-top:5px !important;}
.ML5{ margin-left:5px !important;}
.MR5{ margin-right:5px !important;}
.MB5{ margin-bottom:5px !important;}
.MLR5{ margin:0 5px !important;}
.MTB5{ margin:5px 0 !important;}
.MA5{ margin:5px !important;}

.MT10{ margin-top:10px !important;}
.ML10{ margin-left:10px !important;}
.MR10{ margin-right:10px !important;}
.MB10{ margin-bottom:10px !important;}
.MLR10{ margin:0 10px !important;}
.MTB10{ margin:10px 0 !important;}
.MA10{ margin:10px !important;}

.MT20{ margin-top:20px !important;}
.ML20{ margin-left:20px !important;}
.MR20{ margin-right:20px !important;}
.MB20{ margin-bottom:20px !important;}
.MLR20{ margin:0 20px !important;}
.MTB20{ margin:20px 0 !important;}
.MA20{ margin:20px !important;}

.MT30{ margin-top:30px !important;}
.ML30{ margin-left:30px !important;}
.MR30{ margin-right:30px !important;}
.MB30{ margin-bottom:30px !important;}
.MLR30{ margin:0 30px !important;}
.MTB30{ margin:30px 0 !important;}
.MA30{ margin:30px !important;}

.MT40{ margin-top:40px !important;}
.ML40{ margin-left:40px !important;}
.MR40{ margin-right:40px !important;}
.MB40{ margin-bottom:40px !important;}
.MLR40{ margin:0 40px !important;}
.MTB40{ margin:40px 0 !important;}
.MA40{ margin:40px !important;}

.MT50{ margin-top:50px !important;}
.ML50{ margin-left:50px !important;}
.MR50{ margin-right:50px !important;}
.MB50{ margin-bottom:50px !important;}
.MLR50{ margin:0 50px !important;}
.MTB50{ margin:50px 0 !important;}
.MA50{ margin:50px !important;}

.MT60{ margin-top:60px !important;}
.ML60{ margin-left:60px !important;}
.MR60{ margin-right:60px !important;}
.MB60{ margin-bottom:60px !important;}
.MLR60{ margin:0 60px !important;}
.MTB60{ margin:60px 0 !important;}
.MA60{ margin:60px !important;}

.MT70{ margin-top:70px !important;}
.ML70{ margin-left:70px !important;}
.MR70{ margin-right:70px !important;}
.MB70{ margin-bottom:70px !important;}
.MLR70{ margin:0 70px !important;}
.MTB70{ margin:70px 0 !important;}
.MA70{ margin:70px !important;}

.MT80{ margin-top:80px !important;}
.ML80{ margin-left:80px !important;}
.MR80{ margin-right:80px !important;}
.MB80{ margin-bottom:80px !important;}
.MLR80{ margin:0 80px !important;}
.MTB80{ margin:80px 0 !important;}
.MA80{ margin:80px !important;}

.MT90{ margin-top:90px !important;}
.ML90{ margin-left:90px !important;}
.MR90{ margin-right:90px !important;}
.MB90{ margin-bottom:90px !important;}
.MLR90{ margin:0 90px !important;}
.MTB90{ margin:90px 0 !important;}
.MA90{ margin:90px !important;}

.MT100{ margin-top:100px !important;}
.ML100{ margin-left:100px !important;}
.MR100{ margin-right:100px !important;}
.MB100{ margin-bottom:100px !important;}
.MLR100{ margin:0 100px !important;}
.MTB100{ margin:100px 0 !important;}
.MA100{ margin:100px !important;}


/*Padding*/
.PT0{ padding-top:0px !important;}
.PL0{ padding-left:0px !important;}
.PR0{ padding-right:0px !important;}
.PB0{ padding-bottom:0px !important;}
.PLR0{ padding:0px 0px !important;}
.PTB0{ padding:0px 0px !important;}
.PA0{ padding:0px !important;}

.PT5{ padding-top:5px !important;}
.PL5{ padding-left:5px !important;}
.PR5{ padding-right:5px !important;}
.PB5{ padding-bottom:5px !important;}
.PLR5{ padding:0 5px !important;}
.PTB5{ padding:5px 0 !important;}
.PA5{ padding:5px !important;}

.PT10{ padding-top:10px !important;}
.PL10{ padding-left:10px !important;}
.PR10{ padding-right:10px !important;}
.PB10{ padding-bottom:10px !important;}
.PLR10{ padding:0 10px !important;}
.PTB10{ padding:10px 0 !important;}
.PA10{ padding:10px !important;}

.PT20{ padding-top:20px !important;}
.PL20{ padding-left:20px !important;}
.PR20{ padding-right:20px !important;}
.PB20{ padding-bottom:20px !important;}
.PLR20{ padding:0 20px !important;}
.PTB20{ padding:20px 0 !important;}
.PA20{ padding:20px !important;}

.PT30{ padding-top:30px !important;}
.PL30{ padding-left:30px !important;}
.PR30{ padding-right:30px !important;}
.PB30{ padding-bottom:30px !important;}
.PLR30{ padding:0 30px !important;}
.PTB30{ padding:30px 0 !important;}
.PA30{ padding:30px !important;}

.PT40{ padding-top:40px !important;}
.PL40{ padding-left:40px !important;}
.PR40{ padding-right:40px !important;}
.PB40{ padding-bottom:40px !important;}
.PLR40{ padding:0 40px !important;}
.PTB40{ padding:40px 0 !important;}
.PA40{ padding:40px !important;}

.PT50{ padding-top:50px !important;}
.PL50{ padding-left:50px !important;}
.PR50{ padding-right:50px !important;}
.PB50{ padding-bottom:50px !important;}
.PLR50{ padding:0 50px !important;}
.PTB50{ padding:50px 0 !important;}
.PA50{ padding:50px !important;}

.PT60{ padding-top:60px !important;}
.PL60{ padding-left:60px !important;}
.PR60{ padding-right:60px !important;}
.PB60{ padding-bottom:60px !important;}
.PLR60{ padding:0 60px !important;}
.PTB60{ padding:60px 0 !important;}
.PA60{ padding:60px !important;}

.PT70{ padding-top:70px !important;}
.PL70{ padding-left:70px !important;}
.PR70{ padding-right:70px !important;}
.PB70{ padding-bottom:70px !important;}
.PLR70{ padding:0 70px !important;}
.PTB70{ padding:70px 0 !important;}
.PA70{ padding:70px !important;}

.PT80{ padding-top:80px !important;}
.PL80{ padding-left:80px !important;}
.PR80{ padding-right:80px !important;}
.PB80{ padding-bottom:80px !important;}
.PLR80{ padding:0 80px !important;}
.PTB80{ padding:80px 0 !important;}
.PA80{ padding:80px !important;}

.PT90{ padding-top:90px !important;}
.PL90{ padding-left:90px !important;}
.PR90{ padding-right:90px !important;}
.PB90{ padding-bottom:90px !important;}
.PLR90{ padding:0 90px !important;}
.PTB90{ padding:90px 0 !important;}
.PA90{ padding:90px !important;}

.PT100{ padding-top:100px !important;}
.PL100{ padding-left:100px !important;}
.PR100{ padding-right:100px !important;}
.PB100{ padding-bottom:100px !important;}
.PLR100{ padding:0 100px !important;}
.PTB100{ padding:100px 0 !important;}
.PA100{ padding:100px !important;}

/*Overflow*/
.OH{ overflow:hidden !important;}
.OA{ overflow:auto !important;}
.SR{ overflow:hidden !important; overflow-y:auto;}
.SB{ overflow:hidden !important; overflow-x:auto;}

/*Border*/
.BD{ border:solid 1px #ccc;}
.BDB{ border-bottom:solid 1px #ccc;}
.BDD{ border-bottom:dotted 1px #ccc;}
.BDLine{ clear:both; height:1px; width:100%; overflow:hidden; background:#aaa; border-bottom:solid 1px #eee;}
/* Common END */

/*Nowrap*/
.Nowrap{ white-space:nowrap; word-spacing:normal;}
/*Input Box*/
.txtBox{background: rgb(251, 251, 251); border-width: 1px; border-style: solid; outline: 0px; padding: 5px; width: 270px; font-size: 14px; vertical-align: middle; border-color: rgb(192, 192, 192) rgb(225, 225, 225) rgb(225, 225, 225) rgb(192, 192, 192); font-weight:normal; font-size:14px;}
.txtBox:focus{border-color: rgb(117, 199, 231); outline: 0px;}
.input-tips{ clear:both; color:Gray; line-height:14px; height:20px; overflow:hidden; padding-left:70px; padding-bottom:3px;}
.label{color: black;float: left;font-size: 14px;height: 41px;line-height: 41px;padding-right: 5px;text-align: right;width: 60px;}
/*Long Input Box*/
.input-bg{display: inline-block;height: 48px;padding-left: 10px;position: relative;width: 222px;zoom: 1; background: url('Images/tag.Input.gif') -249px -3px no-repeat; float:left;}
.input-bg input{background: 0;border: medium none;font: 14px/25px arial,simsun;height: 25px;outline: 0;padding: 10px 3px;_padding-top: 8px;width: 205px; color:Gray;vertical-align: middle;}
.input-bg-focus{ background-position:-249px -53px;}
/*Short Input Box*/
.input-short{background: url('Images/tag.Input.gif') no-repeat -487px -50px;display: inline-block;height: 50px;padding-left: 10px;width: 80px; float:left;  box-sizing:border-box;}
.input-short input{background: 0;border: medium none;color: #999;font: 16px/25px arial,simsun;height: 25px;_height: 23px;outline: medium none;padding: 10px 0;width: 70px;}
.input-short-focus{ background-position: -487px -3px;}

.input-modern {width: 100%;max-width: 400px;padding: 14px 16px;font-size: 16px;font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;border: 1.5px solid #e1e5e9;border-radius: 10px;background-color: #fff;color: #333;transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);outline: none;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);  box-sizing:border-box;}
.input-modern:focus {border-color: #4d90fe;box-shadow: 0 0 0 3px rgba(77, 144, 254, 0.15), 0 2px 8px rgba(77, 144, 254, 0.1);transform: translateY(-1px);}
.input-modern::placeholder {color: #9aa6b2;}

/*
  <div class="input-float-container">
    <input type="text" id="float-input" class="input-float" required>
    <label for="float-input" class="float-label">用户名</label>
    <div class="float-underline"></div>
  </div>
*/
.input-float-container {position: relative;width: 100%;max-width: 400px;margin-top: 24px;  box-sizing:border-box;}
.input-float {width: 100%;padding: 20px 0 8px 0;font-size: 16px;border: none;border-bottom: 2px solid #ddd;background-color: transparent;color: #333;outline: none;transition: border-color 0.3s;}
.float-label {position: absolute;top: 18px;left: 0;font-size: 16px;color: #999;pointer-events: none;transition: all 0.3s ease;}
.float-underline {position: absolute;bottom: 0;left: 0;width: 0;height: 2px;background-color: #4d90fe;transition: width 0.4s ease;}
.input-float:focus + .float-label,.input-float:not(:placeholder-shown) + .float-label {top: 0;font-size: 13px;color: #4d90fe;}
.input-float:focus ~ .float-underline {width: 100%;}
.input-float:focus {border-bottom-color: transparent;}

/*
    <div class="input-inset-container">
        <input type="text" class="input-inset" placeholder="搜索...">
        <span class="search-icon">🔍</span>
    </div>
*/
.input-inset-container {position: relative;width: 100%;  box-sizing:border-box;}
.input-inset-container .input-inset {width: 100%;max-width: 400px;padding: 16px 20px 16px 48px;font-size: 16px;font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;border: none;border-radius: 50px;background-color: #f5f7fa;color: #333;box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.08);transition: all 0.3s ease;outline: none;}
.input-inset-container .input-inset:focus {background-color: #fff;box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.08),0 0 0 3px rgba(77, 144, 254, 0.2),0 5px 15px rgba(0, 0, 0, 0.05);}
.input-inset-container .search-icon {position: absolute;left: 20px;top: 50%;transform: translateY(-50%);color: #9aa6b2;pointer-events: none;}
.input-inset-container .input-inset:focus + .search-icon {color: #4d90fe;}

.input-gradient{width: 100%;max-width: 400px;padding: 16px;font-size: 16px;font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;background-color: #fff;color: #333;border: double 2px transparent;border-radius: 10px;background-image: linear-gradient(white, white), linear-gradient(135deg, #4d90fe, #8a2be2);background-origin: border-box;background-clip: padding-box, border-box;transition: all 0.4s ease;outline: none;  box-sizing:border-box;}
.input-gradient:focus {box-shadow: 0 5px 20px rgba(77, 144, 254, 0.15);transform: translateY(-2px);background-image: linear-gradient(white, white), linear-gradient(135deg, #2d7bf6, #7a1cd9);}
.input-gradient::placeholder {color: #aaa;}

.input-minimal {width: 100%;max-width: 400px;padding: 14px 0;font-size: 16px;font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;border: none;border-bottom: 1px solid #ddd;background-color: transparent;color: #333;outline: none;transition: all 0.3s ease;  box-sizing:border-box;}
.input-minimal:focus {border-bottom-color: #333;border-bottom-width: 2px;padding-bottom: 13px;}
.input-minimal::placeholder {color: #bbb;transition: color 0.3s;}
.input-minimal:focus::placeholder {color: #ddd;}

/*
<div class="material-container">
    <input type="text" id="material-input" class="input-material" required>
    <label for="material-input" class="material-label">材料设计输入框</label>
    <span class="material-highlight"></span>
</div>
*/
.material-container{position: relative;width: 100%;max-width: 400px;margin-top: 30px;  box-sizing:border-box;}
.material-container .input-material {width: 100%;padding: 18px 0 8px 0;font-size: 16px;border: none;border-bottom: 1px solid #ddd;background-color: transparent;color: #333;outline: none;transition: border-color 0.3s;}
.material-container .material-label {position: absolute;top: 18px;left: 0;font-size: 16px;color: #999;pointer-events: none;transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);transform-origin: left top;}
.material-container .material-highlight {position: absolute;bottom: 0;left: 50%;width: 0;height: 2px;background-color: #4d90fe;transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);}
.material-container .input-material:focus ~ .material-label,
.material-container .input-material:not(:placeholder-shown) ~ .material-label {top: 0;font-size: 13px;color: #4d90fe;transform: translateY(-10px) scale(0.85);}
.material-container .input-material:focus ~ .material-highlight {width: 100%;left: 0;}

.input-state {width: 100%;max-width: 400px; padding: 14px 48px 14px 16px;font-size: 16px;border: 1.5px solid #e1e5e9;border-radius: 8px;background-color: #fff;color: #333;outline: none;transition: all 0.3s ease;position: relative;  box-sizing:border-box;}
.input-state:focus {box-shadow: 0 0 0 3px rgba(77, 144, 254, 0.1);}
.input-state.success {border-color: #28a745;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2328a745' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");background-repeat: no-repeat;background-position: calc(100% - 16px) center;}
.input-state.error {border-color: #dc3545;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23dc3545' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");background-repeat: no-repeat;background-position: calc(100% - 16px) center;}
.input-state.warning {border-color: #ffc107;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ffc107' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'%3E%3C/path%3E%3Cline x1='12' y1='9' x2='12' y2='13'%3E%3C/line%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'%3E%3C/line%3E%3C/svg%3E");background-repeat: no-repeat;background-position: calc(100% - 16px) center;}

/*
<div class="input-with-icon">
    <input id="txtCode" type="text" placeholder="请输入验证码" />
    <a href="javascript:$('#txtCode').val('');$('#txtCode').focus();" class="btn" title="清空"><i class="fa fa-close"></i></a>
</div>
*/
.input-with-icon {position: relative;width: 300px;  box-sizing:border-box;}
.input-with-icon input {width: 100%;padding: 12px 50px 12px 16px; font-size: 16px;border: 2px solid #e1e5e9;border-radius: 8px;outline: none;transition: all 0.3s;box-sizing: border-box;}
.input-with-icon input:focus {border-color: #4d90fe;box-shadow: 0 0 0 3px rgba(77, 144, 254, 0.1);}
.input-with-icon .btn {position: absolute;right: 12px;top: 50%;transform: translateY(-50%);background: none;border: none;font-size: 20px;color: #666;cursor: pointer;padding: 4px;border-radius: 4px;transition: all 0.2s;}
.input-with-icon .btn:hover {color: #4d90fe;background-color: rgba(77, 144, 254, 0.1);}
.input-with-icon .input-with-bg {width: 300px;padding: 12px 45px 12px 16px;font-size: 16px;border: 2px solid #e1e5e9;border-radius: 8px;background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23666" stroke-width="2"><path d="M23 4v6h-6M1 20v-6h6"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></svg>');background-repeat: no-repeat;background-position: right 12px center; background-size: 20px;outline: none;}
.input-with-icon .input-with-bg:focus {border-color: #4d90fe;background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%234d90fe" stroke-width="2"><path d="M23 4v6h-6M1 20v-6h6"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></svg>');}

.FontContent,
.TextContent{ text-indent:2em !important; line-height:1.7em !important; padding:20px;}
.FontContent p,
.TextContent p{ line-height:1.7em !important; margin-bottom:15px;}
.FontContent *,
.TextContent *{ font-size:14px !important;}

.OpacityTextBox{ position:relative; overflow:hidden; zoom:1; width:100%; height:100%;}
.OpacityTextBox .OpacityBG{ width:100%; height:100%; position:absolute; background:#000; filter:alpha(opacity=50); opacity:0.5; left:0; top:0; z-index:1;}
.OpacityTextBox .OpacityText{ color:White; padding:10px; position:absolute; z-index:2;}

/*Background None*/
.NBG,.nbg{ background-image:none !important;}
.BrowserTips{ padding:30px 0; text-align:center; font-size:18px; background:darkorange; color:#fff; position:absolute; left:0; bottom:0; position:fixed; width:100%; z-index:9999; filter:alpha(opacity=90); opacity:0.9;}

/* 
    User Head 
    <div class="UH UH50"><img src="" alt="" /></div>
*/

.FloatUserBox{ position:fixed; overflow:hidden; zoom:1; right:50px; top:100px;}
.UH{ overflow:hidden; zoom:1; position:relative; margin:0 auto;}
.UH .Sex{ position:absolute; left:50%; bottom:10px; width:10px; height:10px; border:solid 1px #fff; overflow:hidden; zoom:1; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px;}
.UH .SexMan{ background:#1E90FF;}
.UH .SexLady{ background:#FF4040;}
.UH img{ width:100%;}
.UName{ text-align:center; padding-top:10px; font-weight:bold; font-size:14px; color:#444;}
.UH15{ width:60px; height:60px; -moz-border-radius:30px; -webkit-border-radius:30px; border-radius:30px;}
.UH20{ width:20px; height:20px; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px;}
.UH30{ width:30px; height:30px; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px;}
.UH50{ width:50px; height:50px; -moz-border-radius:25px; -webkit-border-radius:25px; border-radius:25px;}
.UH60{ width:60px; height:60px; -moz-border-radius:30px; -webkit-border-radius:30px; border-radius:30px;}
.UH80{ width:80px; height:80px; -moz-border-radius:40px; -webkit-border-radius:40px; border-radius:40px;}
.UH100{ width:100px; height:100px; -moz-border-radius:50px; -webkit-border-radius:50px; border-radius:50px;}
.UH150{ width:150px; height:150px; -moz-border-radius:75px; -webkit-border-radius:75px; border-radius:75px;}
.UH200{ width:200px; height:200px; -moz-border-radius:100px; -webkit-border-radius:100px; border-radius:100px;}
.UH250{ width:250px; height:250px; -moz-border-radius:125px; -webkit-border-radius:125px; border-radius:125px;}
.UH300{ width:300px; height:300px; -moz-border-radius:150px; -webkit-border-radius:150px; border-radius:150px;}


/*Effect BEGIN*/
/*Shadow*/
.Shadow
{
    -moz-box-shadow:3px 3px 4px #000;
    -webkit-box-shadow:3px 3px 4px #000;
    box-shadow:3px 3px 4px #000;
    -ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=4,Direction=135,Color='#000000'";
    filter:progid:DXImageTransform.Microsoft.Shadow(Strength=4,Direction=135,Color='#000000');
}
.TextShadow { text-shadow:0.1em 0.1em 0.2em #000;}
/*Ellipsis*/
.Ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/*Alpha*/
.Alpha{ -moz-opacity:0.5; -khtml-opacity: 0.5; filter:alpha(opacity=50); opacity:0.5; background-color:#000;}
.Alpha3{ -moz-opacity:0.3; -khtml-opacity: 0.3; filter:alpha(opacity=30); opacity:0.3; background-color:#000;}
.Alpha8{ -moz-opacity:0.8; -khtml-opacity: 0.8; filter:alpha(opacity=80); opacity:0.8; background-color:#000;}
.ColorGray{-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray; }
.ColorNormal{-webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -ms-filter: grayscale(0%); -o-filter: grayscale(0%); filter: grayscale(100%); filter: normal; }

/*Radius*/
.Radius50{-moz-border-radius:50px; -webkit-border-radius:50px; border-radius:50px; width:100px; height:100px; border:1px solid #ccc; overflow:hidden; zoom:1;}
.Radius100{-moz-border-radius:100px; -webkit-border-radius:100px; border-radius:100px; width:200px; height:200px; border:1px solid #ccc; overflow:hidden; zoom:1;}

/*Gradient*/
.LineGradient{
    background: #000000;
    background: -moz-linear-gradient(top,  #000000 0%, #ffffff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#ffffff));
    background: -webkit-linear-gradient(top,  #000000 0%,#ffffff 100%);
    background: -o-linear-gradient(top,  #000000 0%,#ffffff 100%);
    background: -ms-linear-gradient(top,  #000000 0%,#ffffff 100%);
    background: linear-gradient(to bottom,  #000000 0%,#ffffff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=0);
}
:root .LineGradient{filter:none;}
.RadialGradient{
    background: #000000;
    background: -moz-radial-gradient(center,  #000000 0%, #ffffff 50%);
    background: -webkit-gradient(radial, left center, left center, color-stop(0%,#000000), color-stop(50%,#ffffff));
    background: -webkit-radial-gradient(center,  #000000 0%,#ffffff 50%);
    background: -o-radial-gradient(center,  #000000 0%,#ffffff 50%);
    background: -ms-radial-gradient(center,  #000000 0%,#ffffff 50%);
    background: radial-gradient(center,  #000000 0%,#ffffff 50%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=1);
}
:root .RadialGradient{filter:none;}

/*Effect END*/

/*Return Top*/
.TagToTop{ width:57px; height:57px; overflow:hidden; background:url('Images/tag.totop.gif') no-repeat center top; position:absolute; left:50%; margin-left:600px; z-index:99; opacity:0.5; cursor:pointer;}
.TagToTop:hover{ background-position:center bottom; opacity:0.7;}
.TagToTop:active{ background-position:center bottom; opacity:1;}

/*Cusors*/
.Hand{ cursor:pointer;}

/*Loading*/
.Loading{ background-image:url('Images/tag.Loading.gif'); background-position:center; background-repeat:no-repeat;}
.Loading1{ background-image:url('Images/tag.Loading.1.gif'); background-position:center; background-repeat:no-repeat;}
.Loading2{ background-image:url('Images/tag.Loading.2.gif'); background-position:center; background-repeat:no-repeat;}
.Loading3{ background-image:url('Images/tag.Loading.3.gif'); background-position:center; background-repeat:no-repeat;}
.FloatBox{ position:absolute; border:solid 1px #ccc; background-color:#eee; padding:10px; text-align:center; display:none;}

/*Tips*/
.Tips{ padding-left:40px; line-height:42px; height:40px; overflow:hidden; color:#5b5b59; background:#edfcb7 url('Images/tag.Tips.png') no-repeat; border:solid 1px #a1ca19; margin-bottom:10px;}
.Tips span{ font-weight:bold; font-size:12px;}
.TipsSuccess{ background-position:0 0;}
.TipsError{ background-position:0 -40px; background-color:#fbcac0; border-color:#ed6148;}
.TipsWarning{ background-position:0 -80px; background-color:#ffe9ad; border-color:#f9ba28;}
.TipsInfo{ background-position:0 -120px; background-color:#d1e4f3; border-color:#5c98cf;}

/*Wsfly Ads*/
.WsflyAds{ width:auto; height:auto; overflow:hidden; zoom:1; margin:0 auto;}
.WsflyAds .WsflyAdsImg{ width:100%;}

/*Wsfly Audio*/
.WsflyAudio{ background:#000; border-radius:5px; overflow:hidden; zoom:1;}
.WsflyAudio audio{ background:#000; }

/*Scroll Box*/
.Wsfly-ScrollBox{ width:500px; height:300px; overflow:hidden; zoom:1; border:solid 1px #ddd;}
.Wsfly-ScrollBox .ScrollBoxTitle{ height:40px; overflow:hidden; background:#eee; font-size:14px; font-weight:600; padding:0 10px; line-height:40px;  border-bottom:solid 1px #ddd;}
.Wsfly-ScrollBox .ScrollBoxList{ float:left; width:480px; height:260px; overflow:hidden; zoom:1;}
.Wsfly-ScrollBox .ContentInnerBox{ padding:10px; color:#555;}

/*Scroll Bar*/
.Scroll{ float:left; width:20px; height:100%; position:relative;}
.Scroll .ScrollLine{ height:100%; width:2px; background:#ddd; margin:0 auto;}
.Scroll .ScrollBar{ width:10px; height:40px; overflow:hidden; position:absolute; left:5px; top:0; cursor:pointer; background:#333; border-radius:5px;}

/*ScrollBar Style 1*/
.ScrollStyle1::-webkit-scrollbar { width:10px; height:10px;}
.ScrollStyle1::-webkit-scrollbar-thumb { border-radius:10px; box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background:#535353;}
.ScrollStyle1::-webkit-scrollbar-track { box-shadow:inset 0 0 5px rgba(0, 0, 0, 0.2); background:#ededed; border-radius:10px;}

/*ScrollBar Style 2*/
.ScrollStyle2::-webkit-scrollbar { width:10px; height:10px;}
.ScrollStyle2::-webkit-scrollbar-thumb { border-radius:10px; background-color:skyblue; background-image: -webkit-linear-gradient(45deg,rgba(255, 255, 255, 0.2) 25%,transparent 25%,transparent 50%,rgba(255, 255, 255, 0.2) 50%,rgba(255, 255, 255, 0.2) 75%,transparent 75%,transparent);}
.ScrollStyle2::-webkit-scrollbar-track { box-shadow:inset 0 0 5px rgba(0, 0, 0, 0.2); background:#ededed; border-radius:10px;}

.scrollbar::-webkit-scrollbar { width:10px; height:10px;}
.scrollbar::-webkit-scrollbar-thumb { border-radius:10px; box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background:#888;}
.scrollbar::-webkit-scrollbar-track { box-shadow:inset 0 0 5px rgba(0, 0, 0, 0.2); background:#ededed; border-radius:10px;}

.scrollbarline::-webkit-scrollbar { width:3px; height:3px;}
.scrollbarline::-webkit-scrollbar-thumb { border-radius:10px; box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background:#fff;}
.scrollbarline::-webkit-scrollbar-track { box-shadow:inset 0 0 5px rgba(0, 0, 0, 0.2); background-color:transparent; border-radius:0px;}

/*UL Tabs*/
.ULHTabs{ overflow:hidden; zoom:1;}
.ULHTabs .ULHTabHD{ height:31px; border-bottom:solid 1px #ccc; overflow:visible; padding:0 20px; margin:10px 0 0 0;}
.ULHTabs .ULHTabHD li{ display:inline-block; border:solid 1px #ccc; border-bottom-width:0; padding:0px 20px; line-height:30px; margin-right:2px; background:#fff; float:left; color:#666; cursor:pointer; border-radius:5px 5px 0 0;}
.ULHTabs .ULHTabHD li:hover{ color:#444;}
.ULHTabs .ULHTabHD li.Current{ height:31px; background:#fff; font-weight:bold; color:#333;}
.ULHTabs .ULHTabCT{ width:100%; height:300px; overflow:auto; zoom:1; background:#fff;}
.ULHTabs .ULHTabCT .ULHTabCTBox{ overflow:hidden; zoom:1;}

/*UL Steps*/
.ULSteps{ height:30px; border:solid 1px #ddd; background:#fff; overflow:hidden;}
.ULSteps li{ float:left; height:30px; line-height:30px; padding:0 40px 0 20px; color:#999; background:#fff url('Images/tag.Steps.png') no-repeat right top;}
.ULSteps li.Over{ color:Green;}
.ULSteps li.Prev{ background:#fff url('Images/tag.Steps.png') no-repeat right bottom;}
.ULSteps li.Current{ color:#333; font-weight:bold; color:Green; background:#eee url('Images/tag.Steps.png') no-repeat right center; padding-right:45px;}
.ULSteps li.Title{ font-size:12px; color:Gray; background:none; border-right:solid 1px #ddd; padding-right:20px;}

/*Paging Simple*/
.PagesIndexStats_Simple{ padding:10px; clear:both; overflow:hidden; text-align:left;}
.PagesIndexBox_Simple{ padding:10px; clear:both; overflow:hidden; text-align:right;}
.PagesIndexBox_Simple .PageIndexItem,.CurrentPageIndex{ padding:4px 10px; border:solid 1px #ddd; margin:0 2px; background:#eee; border-radius:20px;}
.PagesIndexBox_Simple .PageIndexItem:hover{ background-color:orange; color:#fff; font-weight:normal; border:solid 1px transparent;}
.PagesIndexBox_Simple .CurrentPageIndex{ background-color:orangered; color:#fff; font-weight:bold; border:solid 1px transparent;}
.PagesBox_Simple{ clear:both; overflow:hidden; zoom:1;}
.PagesBox_Simple .PagesIndexStats_Simple{ float:left; clear:none;}
.PagesBox_Simple .PagesIndexBox_Simple{ float:right; clear:none;}

/*Paging*/
.PagesIndexBox_Stats{ line-height:37px; padding:10px 0; text-align:center;}
.PagesIndexBox_Wsfly{ clear:both; padding:20px; text-align:center;}
.PagesIndexBox_Wsfly a{ display:inline-block;height:37px;width:37px;text-align:center;line-height:37px; background:url('Images/Page.Wsfly.png') no-repeat left top; position:relative; text-decoration:none;color:#7f7f7f;font-size:14px;font-weight:bold;margin:0 5px;}
.PagesIndexBox_Wsfly a.Selected,
.PagesIndexBox_Wsfly a.Selected:hover{background:url('Images/Page.Wsfly.png') no-repeat left -111px;color:#fff; cursor:default;}
.PagesIndexBox_Wsfly a.Selected:hover{color:#fff;}
.PagesIndexBox_Wsfly b{ display:inline-block;line-height:37px;margin:0 5px;}
.PagesIndexBox_Wsfly a:hover{background:url('Images/Page.Wsfly.png') no-repeat left -37px;}
.PagesIndexBox_Wsfly a.Down{background:url('Images/Page.Wsfly.png') no-repeat left -74px;}
.PagesIndexBox_Wsfly b{cursor:pointer;width:0;height:0;border-width:6px;border-style:solid;font-size:0;line-height:0;border-color:#f8f8f8 #4e4e4e #f8f8f8 #f8f8f8; position:absolute;left:9px;top:12px;}
.PagesIndexBox_Wsfly b{cursor:pointer;width:0;height:0;border-width:6px;border-style:solid;font-size:0;line-height:0;border-color:#f8f8f8 #f8f8f8 #f8f8f8 #4e4e4e; position:absolute;left:16px;top:12px;}

.PagesIndexBox_Wsfly a.PageDisabled{background:url('Images/Page.Wsfly.png') no-repeat left -148px;color:#c1c1c1; cursor:default;}
.PagesIndexBox_Wsfly a.PageNext.PageDisabled b{border-color:#eee #eee #eee #c1c1c1; cursor:default;}
.PagesIndexBox_Wsfly a.PagePrev.PageDisabled b{border-color:#eee #c1c1c1 #eee #eee; cursor:default;}

/*Marquee Up Down*/
.MarqueeUpDown{position:relative;width:100%;height:100%;overflow:hidden;}
.MarqueeUpDown img{border:0px;display:block;}
.MarqueeUpDown dd{margin:0px;padding:0px;}

/*Marquee Left Right*/
.MarqueeLeftRight {position:relative;width:100%;overflow:hidden;}
.MarqueeLeftRight img {border:0px;}
.MarqueeLeftRight dl, .MarqueeLeftRight dt,.MarqueeLeftRight dd,.MarqueeLeftRight a {float:left;margin:0;padding:0;}
.MarqueeLeftRight dl{width:1000%;height:100%;}

/*Marquee Text*/
.MarqueeText,.MarqueeText li {margin:0;padding:0;list-style:none;}
.MarqueeText {position:relative;height:100%;width:100%;overflow:hidden;}
.MarqueeText a {display:block;padding:5px;text-decoration:none;white-space: nowrap;color:#000;}
.MarqueeText a:hover{background: #efefda;color:#3bcdfe}

/*Slideplayer*/
/*Picture Size：1920 x 450*/
.Slideplayer{ overflow:hidden; zoom:1; position:relative;}

.Slideplayer .SlideplayerList{ width:100%; height:100%; position:relative; z-index:1;}
.Slideplayer .SlideplayerList .ulMarquee{width:100%; height:450px; margin-top:0px; overflow:hidden; position:relative;}
.Slideplayer .SlideplayerList .ulMarquee li{ float:left; position:relative; width:100%; height:100%;}
.Slideplayer .SlideplayerList .ulMarquee li img{ position:absolute; left:50%; margin-left:-960px;}

.Slideplayer .SlideplayerAc{ width:100%; height:70px; overflow:hidden; zoom:1; position:absolute; top:50%; margin-top:-35px; z-index:2;}
.Slideplayer .SlideplayerAc .ArrowLeft,
.Slideplayer .SlideplayerAc .ArrowRight{ width:70px; height:70px; overflow:hidden; position:absolute; left:10px; margin-left:0px; background:url('Images/tag.Arrow.png'); cursor:pointer; filter:alpha(opacity=50); opacity:0.5;}
.Slideplayer .SlideplayerAc .ArrowLeft:hover,
.Slideplayer .SlideplayerAc .ArrowRight:hover{ filter:alpha(opacity=100); opacity:1;}
.Slideplayer .SlideplayerAc .ArrowRight{ left:auto; right:10px; background-position:0 -70px;}

.Slideplayer .SlideplayerRemote{ margin:0 auto; height:16px; position:absolute; z-index:3; left:50%; margin-left:-40px; top:100%; margin-top:-30px;}
.Slideplayer .SlideplayerRemote ul{}
.Slideplayer .SlideplayerRemote li{ float:left; width:16px; height:16px; border-radius:25px; background:#000; margin:0 2px; cursor:pointer; border:solid 2px #eee; opacity:0.5;}
.Slideplayer .SlideplayerRemote li:hover{ background:#3eaddb; opacity:1;}
.Slideplayer .SlideplayerRemote li.Current{ background:#3eaddb; opacity:1;}

/*Arraw*/
.Arraw-Left,
.Arraw-Right,
.Arraw-Top,
.Arraw-Down{ padding-left:20px !important; line-height:30px; background-image:url('../Images/arrow_Gray.gif'); background-repeat:no-repeat; }

.Arraw-Left{background-position:0 -125px;}
.Arraw-Right{background-position:0 -5px;}
.Arraw-Top{background-position:0 -45px;}
.Arraw-Down{background-position:0 -85px;}





/*Float Service BEGIN*/
/*Float Side*/
.FloatService{ position:fixed; top:100px; left:auto; bottom:auto; right:0px;  width:auto; height:auto; overflow:hidden; background:url('Images/Online.Service.gif') no-repeat; font-size:12px; 
                /*IE6*/
                _position:absolute;
                _top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop + 100 + "px" : document.body.scrollTop + 80 + "px");}
.FloatService .FloatService_Bar{ float:left; width:50px; height:200px;}
.FloatService .FloatService_List{ float:left;  width:120px; height:400px; overflow:hidden; display:none;}
.FloatService .FloatService_List ul{ list-style:none; margin:0; padding:0; margin:20px 0 0 14px; width:90px; height:360px; overflow:hidden; zoom:1;}
.FloatService .FloatService_List ul li{ height:24px; line-height:24px; overflow:hidden; text-align:left; white-space:normal; word-break:break-word; text-align:center; line-height:30px;}

/*Float Center*/
.FloatInvite{ position:fixed; top:50%; left:50%; margin-top:-107px; margin-left:-204px; width:408px; height:214px; overflow:hidden; background:url('Images/Online.Invite.gif') no-repeat; 
                /*IE6*/
                _position:absolute;
                _top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop + document.documentElement.clientHeight/2 +50 + "px" : document.body.scrollTop + document.documentElement.clientHeight/2 +50 + "px");
            }
.FloatInvite .FloatInvite_Close{ width:16px; height:16px; overflow:hidden; position:absolute; left:auto; top:5px; bottom:auto; right:5px; cursor:pointer;}
.FloatInvite .FloatInvite_Ok{ width:86px; height:30px; overflow:hidden; position:absolute; left:auto; bottom:auto; bottom:15px; right:105px; cursor:pointer;}
.FloatInvite .FloatInvite_Cancel{ width:86px; height:30px; overflow:hidden; position:absolute; left:auto; top:auto; bottom:15px; right:15px; cursor:pointer;}

/*Float QQ*/
.RightFloatQQ{ width:77px; padding:5px; background:#f2f2f2; border:solid 1px #fff; border-radius:5px; overflow:hidden; filter:alpha(opacity=50); opacity:0.5;}
.RightFloatQQ .RightFloatTitle{ font-weight:bold; font-size:12px; text-align:center; line-height:40px;}
.RightFloatQQ .QQGroupName{ font-weight:bold; line-height:30px; text-align:center; clear:both; font-size:12px;}
.RightFloatQQ .RightQQItem{ clear:both; padding:2px 0; width:100%; overflow:hidden;}
.RightFloatQQ .RightWXItem{ clear:both; padding:2px 0; width:100%; overflow:hidden; text-align:center; font-size:12px; color:#999;}
.RightFloatQQ .RightWXItem img{ width:50px; height:50px;}
.RightFloatQQ .RightFloatQQTag{ width:40px; height:40px; overflow:hidden; zoom:1; cursor:pointer; display:none; background:url('Images/tag.Service.png') no-repeat center center; filter:alpha(opacity=50); opacity:0.5;}

/*Float Service END*/


/*Progress Bar BEGIN*/
.Wsfly_Process{ position:relative; width:100%; height:35px; overflow:hidden; zoom:1;}
.Wsfly_Process .Wsfly_ProcessBG{ background:#eee; border:solid 0px #eee; border-radius:10px; width:100%; height:15px; overflow:hidden; zoom:1; position:relative;}
.Wsfly_Process .Wsfly_ProcessBG .Wsfly_CurrentProcess{ background:#333; border:solid 0px #eee; border-radius:10px; width:0%; height:15px; overflow:hidden; zoom:1; position:relative; z-index:2;}
.Wsfly_Process .Wsfly_ProcessBG .Wsfly_CurrentProcess .Wsfly_ProcessTextBox{ color:white; text-align:right; font-size:12px; line-height:15px; padding:0 10px;}
.Wsfly_Process .Wsfly_ProcessBG .Wsfly_ProcessNextLevelVal{ position:absolute; right:0px; top:0px; color:#333; line-height:15px; height:15px; z-index:1; padding:0 5px; color:#aaa;}
.Wsfly_Process .Wsfly_ProcessLevels{ clear:both; height:15px; line-height:15px; overflow:hidden; zoom:1; padding:3px 5px 0px 5px;}
.Wsfly_Process .Wsfly_ProcessLevels .Wsfly_ProcessCurrentLevel{ float:left; font-size:12px; color:#888;}
.Wsfly_Process .Wsfly_ProcessLevels .Wsfly_ProcessNextLevel{ float:right; font-size:12px;}
/*Progress Bar END=*/


/*Dialog BEGIN*/
.Wsfly_Dialog{ position:absolute; left:50%; top:50%; width:300px; height:300px; overflow:hidden; background:#fcfcfc; border:solid 1px #ccc; z-index:99999;}
.Wsfly_Dialog .Wsfly_Dialog_Top{ height:30px; line-height:30px; overflow:hidden; background:url('Images/top.Dialog.png') repeat-x; padding:10px 10px;}
.Wsfly_Dialog .Wsfly_Dialog_Top .Wsfly_Dialog_Title{ float:left; font-size:14px; font-weight:bold; color:#666;}
.Wsfly_Dialog .Wsfly_Dialog_Top .Wsfly_Dialog_Close{ float:right; cursor:pointer; overflow:hidden; width:24px; height:24px; background:url('Images/Common/tag.Close.png') no-repeat;}
.Wsfly_Dialog .Wsfly_Dialog_Content{ height:auto; overflow:hidden; padding:10px; zoom:1;}
.Wsfly_Dialog_Lock{ position:absolute; left:0; top:0; background:#000; width:100%;height:100%; overflow:hidden; display:block; filter:alpha(opacity=80);opacity:0.8;}
/*Dialog END=*/


/* Share To WeiXin */
.ShareListBG,
.ShareListBar{ overflow:hidden; position:fixed; left:0; bottom:0; width:100%; height:50px; overflow:visible; z-index:99997;}
.ShareListBG{ filter:alpha(opacity=90); opacity:0.9; z-index:99996; background:#ddd; border-top:solid 1px #bbb;}
.ShareListBar ul{ text-align:center; overflow:hidden; zoom:1; list-style:none; padding:0; margin:0; padding:13px 0;}
.ShareListBar ul li{ display:inline-block; font-size:12px; cursor:pointer; height:24px; line-height:24px; margin-right:10px;}
.ShareListBar ul li.Title{ cursor:default;}
.ShareListBar .ShareToWX{ padding-left:35px; background:url("Images/tag.wx.png") no-repeat left top;}

.ShareCoverBG,
.ShareCoverCT{ width:100%; height:100%; overflow:hidden; position:fixed; left:0; top:0; z-index:99999; display:none;}
.ShareCoverBG{ z-index:99998; background:#000;  filter:alpha(opacity=80); opacity:0.8;}
.ShareCoverCT{ background:url("Images/bg.ShareWX.png") no-repeat right top;}

/*Document Share*/
.ShareDocument{ border:solid 1px #ccc; width:100%; height:40px; overflow:hidden; clear:both; margin-top:10px;}
.ShareDocument span{ cursor:pointer; width:24px; height:24px; line-height:24px; overflow:hidden; margin:8px 4px; display:block; float:left; background:url('Images/tag.Share.Logos.gif');}
.ShareDocument span.sina{ background-position:0 -24px;}
.ShareDocument span.qzone{ background-position:0 -48px;}
.ShareDocument span.qweibo{ background-position:0 -72px;}
.ShareDocument span.qpengyou{ background-position:0 -96px;}
    
.ShareDocument span.renren{ background-position:0 -144px;}
.ShareDocument span.douban{ background-position:0 -168px;}
.ShareDocument span.msn{ background-position:0 -192px;}
.ShareDocument span.mop{ background-position:0 -216px;}

/*文字颜色 BEGIN*/
/* 金色色系 */
.gold {background: linear-gradient(135deg, #bf953f, #fcf6ba, #b38728);background-clip: text;-webkit-background-clip: text;color: transparent;}
.gold-light {background: linear-gradient(120deg, #e6c27a, #fff2b5, #e6c27a);background-clip: text;-webkit-background-clip: text;color: transparent;}
.gold-dark {background: linear-gradient(45deg, #8a6125, #d4af37, #c59b27);background-clip: text;-webkit-background-clip: text;color: transparent;}
.gold-stroke {background: linear-gradient(135deg, #d4af37, #fff2b5, #d4af37);background-clip: text;-webkit-background-clip: text;color: transparent;-webkit-text-stroke: 1px rgba(212, 175, 55, 0.5);}
.rose-gold {background: linear-gradient(135deg, #e8b7b7, #f5d0c5, #e8a9a9); background-clip: text; -webkit-background-clip: text; color: transparent;}
.silver {background: linear-gradient(135deg, #b0b0b0, #e8e8e8, #a0a0a0); background-clip: text; -webkit-background-clip: text; color: transparent;}
.bronze {background: linear-gradient(135deg, #a5673f, #d4936a, #8b5a2b); background-clip: text; -webkit-background-clip: text; color: transparent;}

/* 自然色系 */
.fire-red {background: linear-gradient(135deg, #ff3b2f, #ff8c42, #ff2e00); background-clip: text; -webkit-background-clip: text; color: transparent;}
.ocean-blue {background: linear-gradient(135deg, #0052d4, #4364f7, #6fb1fc); background-clip: text; -webkit-background-clip: text; color: transparent;}
.emerald {background: linear-gradient(135deg, #0f9b4e, #2ecc71, #0a8043); background-clip: text; -webkit-background-clip: text; color: transparent;}
.violet {background: linear-gradient(135deg, #8e2de2, #c471ed, #5b0e9e); background-clip: text; -webkit-background-clip: text; color: transparent;}
.sakura {background: linear-gradient(135deg, #ffb7c5, #ff85a1, #ff6b8b); background-clip: text; -webkit-background-clip: text; color: transparent;}
.sunrise {background: linear-gradient(135deg, #ff7e5f, #feb47b, #ff9966); background-clip: text; -webkit-background-clip: text; color: transparent;}

/* 霓虹色系 */
.neon-cyan {background: linear-gradient(135deg, #00f5ff, #00b8ff, #00d4ff); background-clip: text; -webkit-background-clip: text; color: transparent; text-shadow: 0 0 5px rgba(0, 245, 255, 0.3);}
.neon-pink {background: linear-gradient(135deg, #ff007f, #ff44aa, #ff00aa); background-clip: text; -webkit-background-clip: text; color: transparent; text-shadow: 0 0 5px rgba(255, 0, 127, 0.3);}
.neon-green {background: linear-gradient(135deg, #39ff14, #7fff00, #2ecc2e); background-clip: text; -webkit-background-clip: text; color: transparent; text-shadow: 0 0 5px rgba(57, 255, 20, 0.3);}

/* 高级渐变 */
.aurora {background: linear-gradient(135deg, #00b4db, #0083b0, #00c6fb, #005c8a); background-clip: text; -webkit-background-clip: text; color: transparent; background-size: 200% 200%; animation: aurora-shift 3s ease infinite;}
@keyframes aurora-shift {0% {background-position: 0% 50%;} 50% {background-position: 100% 50%;} 100% {background-position: 0% 50%;}}
.sunset {background: linear-gradient(135deg, #f12711, #f5af19, #ff8c00); background-clip: text; -webkit-background-clip: text; color: transparent;}
.galaxy {background: linear-gradient(135deg, #2b0b5e, #6b2fa0, #a45ee5, #3a1c71); background-clip: text; -webkit-background-clip: text; color: transparent;}
.strawberry-cream {background: linear-gradient(135deg, #ff6b8b, #ffb7c5, #ff8da1); background-clip: text; -webkit-background-clip: text; color: transparent;}
.mint-soda {background: linear-gradient(135deg, #00b09b, #96c93d, #2ecc71); background-clip: text; -webkit-background-clip: text; color: transparent;}

/* 纯色 + 描边 */
.stroke-dark {background: linear-gradient(135deg, #ffffff, #f0f0f0); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-stroke: 1px rgba(0, 0, 0, 0.8);}
.stroke-light {background: linear-gradient(135deg, #1a1a2e, #16213e); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.8);}
.stroke-gold-only {-webkit-text-stroke: 1.5px #d4af37; color: transparent;}
.stroke-neon {-webkit-text-stroke: 1.5px #00f5ff; color: transparent; text-shadow: 0 0 3px rgba(0, 245, 255, 0.5);}

/* 柔光渐变 */
.soft-purple {background: linear-gradient(120deg, #c7b9ff, #e8d5ff, #b8a9ff); background-clip: text; -webkit-background-clip: text; color: transparent;}
.soft-blue {background: linear-gradient(120deg, #a8d8ff, #cceeff, #90caf9); background-clip: text; -webkit-background-clip: text; color: transparent;}
.soft-pink {background: linear-gradient(120deg, #ffd1dc, #ffe4e9, #ffc0cb); background-clip: text; -webkit-background-clip: text; color: transparent;}
.soft-green {background: linear-gradient(120deg, #c8e6d9, #e0f2e9, #b2dfc8); background-clip: text; -webkit-background-clip: text; color: transparent;}
/*文字颜色 END*/

/*Background Music*/
.BGMusic{ position:fixed; right:20px; bottom:20px;}
.BGMusic .on,.BGMusic .off{ width: 48px;height: 48px; background-size: 100% 100%; cursor:pointer;}
.BGMusic .on{ background: url('Images/tag.Music.On.png') no-repeat 0 0; -webkit-animation: rotating 1.2s linear infinite; animation: rotating 1.2s linear infinite;}
.BGMusic .off{ background: url('images/tag.Music.Off.png') no-repeat 0 0;}
@-webkit-keyframes rotating {
	from{
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
    	transform: rotate(0deg);
	}
	to{
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
@keyframes rotating {
    from{
        -webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to{
        -webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}