*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%; /* 防止iOS横屏时字体放大 */
  text-size-adjust: 100%;
}
body {
  background-color: #f5f7fa;
  color: #333;
  line-height: 1.5;
  font-size: 14px;
}
:root {
  --xm-color-green: #15c377;/*绿色毒刺*/
  --xm-color-red: #FF2805;;/*红色警戒*/
  --xm-color-blue: #1890ff;/*蓝色妖姬*/
  --xm-color-black: #000000;/*黑色沉默*/
  --xm-radius:5px;/*圆角大小*/
  --xm-color:#1890ff;/*默认颜色*/
  --box-shadow:0px 4px 8px rgba(255,255,255,.2);
}

a{
  color:#333;
  -webkit-transition: color .3s;
  -moz-transition: color .3s;
  -o-transition: color .3s;
  transition: color .3s;
}
a:hover {
  color: var(--xm-color-blue);
}
p {
    margin: 2px;
}
h1 {
    margin-bottom: 2px;text-align:center;
}
::-moz-selection {
    background: var(--xm-color);
    color: #fff;
}
::selection {
    background: var(--xm-color);
    color: #fff;
}
::-webkit-scrollbar{
   display:none;
}
::-webkit-scrollbar-track {
    background: #222;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 2px;
}
img{
  max-width:100%;
}
.layui-card{
  border-radius: var(--xm-radius);
  border: none !important;
  background-color:#ffffff;
  box-shadow: var(--box-shadow) !important;
 }
.layui-text :where(a:not(.layui-btn)){
  color:#333
}
.layui-text :where(a:not(.layui-btn):hover){
  text-decoration:none !important;
}
.layui-tabs,
.layui-elem-quote,
.layui-table,
iframe,
.layui-unselect.layui-form-select dl,
.layui-btn,
.layui-input,.layui-textarea {
	border-radius: var(--xm-radius) !important;
	box-shadow: var(--box-shadow) !important;
}
.layui-btn-primary:hover,
.layui-form-select:hover .layui-input:focus,
.layui-input:focus,
.layui-textarea:focus {
	border-color: var(--xm-color-blue) !important;
	color: #333333;
    box-shadow:0 0 0 .5px var(--xm-color)
}
.layui-form-danger+.layui-form-select .layui-input,.layui-form-danger:focus{
 border-color:var(--xm-color-red)!important;
 box-shadow:0 0 0 3px rgba(255,87,34,.08)
}
.layui-input-wrap .layui-input:focus+.layui-input-split,
.layui-form-checked,.layui-form-checked:hover{
    border-color:var(--xm-color)
}
.layui-laypage .layui-laypage-curr .layui-laypage-em,.layui-form-checked span,.layui-form-checked:hover span{
   background-color:var(--xm-color);
}
.layui-tabs li:hover,
.layui-tabs .layui-this,
.layui-form-select dl dd.layui-this{
  color:var(--xm-color);
}

.layui-form-onswitch{
    border-color:var(--xm-color);
    background-color:var(--xm-color)
}
.layui-nav-itemed>a{
 color:var(--xm-color) !important;
}
.layui-tab-brief>.layui-tab-title .layui-this,
.layui-form-checked i,.layui-form-checked:hover i,
.layui-form-radio:hover *,.layui-form-radioed,.layui-form-radioed>i{
    color:var(--xm-color);
}
.layui-form-checkbox span{
 height:auto;
}
.layui-form-checkbox[lay-skin=primary]{
  max-height:18px;
}
.layui-form-checkbox[lay-skin=primary] span{
    background:0 0;
    color:#000000;
}
.layui-form-checkbox[lay-skin=primary]:hover i{
    border-color:var(--xm-color);
    color:#fff
}
.layui-form-checked[lay-skin=primary] i{
    border-color:var(--xm-color)!important;
    background-color:var(--xm-color);
    color:#fff
}
.layui-nav-tree .layui-nav-child dd.layui-this,.layui-nav-tree .layui-nav-child dd.layui-this a,.layui-nav-tree .layui-this,.layui-nav-tree .layui-this>a,.layui-nav-tree .layui-this>a:hover,
.layui-form-select dl dd:hover {
	background-color: var(--xm-color);
	color: #fff;
	transition: .1s all;
}
.layui-tab-brief>.layui-tab-more li.layui-this:after,.layui-tab-brief>.layui-tab-title .layui-this:after{
    border:none;
    border-radius:0;
    border-bottom:2px solid var(--xm-color);
}
.layui-fixbar{
bottom:100px;
}
.layui-fixbar li{
  height:35px;width:35px;line-height:38px;
  border-radius:10%;
}
.layui-fixbar .layui-fixbar-top{
  font-size:30px;
}
.dhsort {
white-space: nowrap;
overflow: hidden;
overflow-x: scroll;
-webkit-backface-visibility: hidden;
-webkit-overflow-scrolling: touch;
text-align: justify;
}
.layui-layer {
	box-shadow: none !important;
	border-radius: var(--xm-radius) !important;
}
.layui-layer-msg {
	border: none !important;
	box-shadow: 0px 0px 5px 1px rgba(10, 10, 10, .32) !important;
}
.layui-layer.layui-layer-page .layui-layer-btn{
/* margin-top:-25px;*/
}
.layui-layer.layui-layer-page .layui-layer-content{
  margin-bottom:-10px;
}
.layui-layer-btn *{border-color: #E6E3E6;border-radius: var(--xm-radius) !important;}
.layui-layer-tips .layui-layer-content{line-height:1.6;padding:6px;border-radius:var(--xm-radius);background-color:var(--xm-color)!important;}
.layui-layer-tips i.layui-layer-TipsB,.layui-layer-tips i.layui-layer-TipsT{
    border-right-color:var(--xm-color)!important;
}
.layui-layer-tips i.layui-layer-TipsL,.layui-layer-tips i.layui-layer-TipsR{
    border-bottom-color:var(--xm-color)!important;
}

.layui-nav-tree.layui-bg-gray .layui-nav-child dd.layui-this,.layui-nav-tree.layui-bg-gray .layui-nav-child dd.layui-this a,.layui-nav-tree.layui-bg-gray .layui-this,.layui-nav-tree.layui-bg-gray .layui-this>a{
    background:var(--xm-color)!important;
    color:black!important;
    font-weight:800
}
.layui-nav-tree.layui-bg-gray .layui-nav-bar{
    background-color:var(--xm-color)
}
.xm-disabled{pointer-events: none !important;opacity: 0.8; cursor: not-allowed;}
.xm-text-green { color: var(--xm-color-green) !important }
.xm-bg-green{background-color:var(--xm-color-green)!important;color:#fff!important;}
.xm-text-blue{	color: var(--xm-color-blue) !important }
body .xm-layer-blue .layui-layer-title,
body .xm-layer-blue .layui-layer-btn0,
.xm-bg-blue{ background-color:var(--xm-color-blue)!important;color:#fff!important}
.xm-text-red {color: var(--xm-color-red) !important }
body .xm-layer-red .layui-layer-title,
body .xm-layer-red .layui-layer-btn0,
.xm-bg-red{ background-color:var(--xm-color-red)!important; color:#fff!important}
.xm-text-dark {	color: var(--xm-color-black) !important }
body .xm-layer-dark .layui-layer-setwin span,
body .xm-layer-dark .layui-layer-title,
body .xm-layer-dark .layui-layer-btn0,
.xm-bg-dark{ background:var(--xm-color-black)!important;color:#fff!important;border:none }
.xm-bg-hui{ background-color:#eee!important; color:#000!important}
.xm-text{color:var(--xm-text-color,#000)!important}
.xm-bg{ background-color:var(--xm-bg-color,#fff)!important; color:var(--xm-text-color,#000)!important}
.xm-text-right{float:right;}
.xm-text-center{text-align:center!important}
.xm-text-xmo {font-weight: bold;background: linear-gradient(45deg, #ff0080, #ff8c00, #ffd700, #32cd32, #00bfff, #8a2be2);background-size: 400% 400%;color: transparent;-webkit-background-clip: text;background-clip: text;animation: xmtextc 3s ease-in-out infinite;}
.xm-bg-xmo {background: linear-gradient(45deg, #ff0080, #ff8c00, #ffd700, #32cd32, #00bfff, #8a2be2);background-size: 400% 400%;background-size: 1915%;color: white !important;animation: xmtextc 8s ease-in-out infinite;}
@keyframes xmtextc{
  0%{background-position: 0% 50%;}
  50% {background-position: 100% 50%;}
  100% {background-position: 0% 50%;}
}
.xm-bg-1 { background-color: #FF1493!important;color:#fff!important; }
.xm-bg-2 { background-color: #00BFFF!important;color:#fff!important; }
.xm-bg-3 { background-color: #00FA9A!important;color:#fff!important; }
.xm-bg-4 { background-color: #9400D3!important;color:#fff!important; }
.xm-bg-5 { background-color: #FFD700!important;color:#fff!important; }
.xm-bg-6 { background-color: #FF4500!important;color:#fff!important; }
.xm-bg-7 { background-color: #FF8C00!important;color:#fff!important; }
.xm-bg-8 { background-color: #00FFFF!important;color:#fff!important; }
.xm-bg-9 { background-color: #FF00FF!important;color:#fff!important; }
.xm-bg-10 { background-color: #32CD32!important;color:#fff!important; }
.xm-text-1 { color: #FF1493!important; }
.xm-text-2 { color: #00BFFF!important; }
.xm-text-3 { color: #00FA9A!important; }
.xm-text-4 { color: #9400D3!important; }
.xm-text-5 { color: #FFD700!important; }
.xm-text-6 { color: #FF4500!important; }
.xm-text-7 { color: #FF8C00!important; }
.xm-text-8 { color: #00FFFF!important; }
.xm-text-9 { color: #FF00FF!important; }
.xm-text-10 { color: #32CD32!important; }
.xm-header {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    padding: 0 20px;
    color: #000;       
    height:50px;
    background-color:#fff;
    box-shadow: 0 2px 1px rgba(0, 0, 0, 0.1);
    z-index:20;
}
.xm-header .logo {
    display: flex;
    align-items: center;
    font-size: 10px;
    font-weight: bold;
    width:auto;
    white-space: nowrap;
    overflow: hidden;
}
.logo-icon {
    width: 32px;
    height: 32px;
    background-color:var(--xm-color-blue);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    padding:10px;
    color: white;
    font-size: 16px;
}
.xm-header .nav-right {
    margin-left: auto;
    margin-right:-10px;
    display: flex;
    align-items: center;
}

.xm-header .nav-item {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 0 12px;
    color: white;
    white-space: nowrap;

}
.xm-header .nav-item li {
   margin:10px;
}
.xm-header .xm-search {
    width:100%;
    max-width:200px;
    position: relative;
}
.xm-header .xm-search input {
    width: 100%;
    max-width:160px;
    height: 32px;
    padding: 0 30px 0 12px;
    border: 1px solid #e0e0e0;
    border-radius: 16px;
    font-size: 12px;
    outline: none;
    background-color: #f8f9fa;
    @media screen and (min-width: 767px) {
     max-width:300px;
    }    
    
}
.xm-header .xm-search button {
    position: absolute;
    right: 6px;
    top: 3px;
    width: 26px;
    height: 26px;
    background-color:var(--xm-color-blue);
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
}
.xm-header .xm-nav button{
    margin-left:10px;
    width: 28px;
    height: 28px;
    background-color:var(--xm-color-blue);
    border: none;
    border-radius: 10%;
    color: white;
    cursor: pointer;
}

.xm-nav-tabs {
     position: sticky;
     top:50px;
     z-index:1;
     background: white;
     padding: 0 15px;
     display: flex;
     overflow-x: auto;
     scrollbar-width: none;
     border-bottom: 1px solid #e0e0e0;
}
.xm-nav-tabs .item-tab {
    padding: 10px 12px;
    font-size: 12px;
    color: #666;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
}
.xm-nav-tabs .item-tab.active {
    color: #1E88E5;
    font-weight: 500;
}

.xm-nav-tabs .item-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 12px;
    right: 12px;
    height: 2px;
    background: #1E88E5;
}
.xm-footer {
  background: white;
  padding: 15px;
  text-align: center;
  font-size: 11px;
  color: #666;
  border-top: 1px solid #e0e0e0;
}

.xm-site{
  display:block;
  background: #eee;
  padding:4px;
  /*margin:4px;*/
  border-radius:6px;
  white-space: nowrap;
  display: flex;
  align-items: center;
}
.xm-site .icon{
  width:35px;
  height:35px;
  background-color:#e0e0e0;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  color: white;
  font-size: 1.5em;
}
.xm-site .icon svg{
 margin:-0.2px;
 border-radius:6px!important;
}
.xm-site .info{
   display: flex;
   flex-direction: column;
   flex-grow: 1;
  width: calc(100% - 100px);
}
.xm-site .info .name,
.xm-site .info .desc {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.xm-site .info .name {
  font-size: 1.2em;
}
.xm-site .info .desc {
  color:#959595;
  font-size:0.6em;
}
.xm-site:hover{
  font-weight: bold;
  color:var(--xm-color-red) !important;
  background: #eee;
}
.xm-site:hover .icon{
  color:#fff;
}
.xm-site.top {
  display: flex;
  flex-direction: column;
  padding:4px 10px;
  background: #fff;
}

.xm-site.top .icon{
  margin-left:8px;
  width:1.8em;
  height:1.8em;  
  font-size:2em;
}
.xm-site.top .info{
  font-size: 12px;
  width: 100%;
  margin-top:4px;
  text-align: center;
}
.xm-site.top .info .name{
  text-overflow: clip;
}
.xm-site.max .icon{
  width:1.8em;
  height:1.8em;
  font-size:2em;
}
.xm-site.max .info .name{
  font-size:18px;
}
.xm-site.max .info .desc{
  font-size:13px;
}
.xm-site.min .icon{
  width:1.5em;
  height:1.5em;
  font-size:1.2em;
}

.xm-site.mp{
  padding:15px;
  margin:0px;
  background: linear-gradient(135deg, #5429c4 0%, #9d4edd 70%, #b86bff 100%);
  position: relative;
  color:#fff !important;
}
.xm-site.mp::before {
   content: "";position: absolute;top: 0;left: 0;right: 0;bottom: 0;
   background: repeating-linear-gradient(-55deg,transparent,transparent 20px,rgba(255, 255, 255, 0.1) 20px,rgba(255, 255, 255, 0.1) 40px);
}
.xm-site.mp .icon{
  width:3em;
  height:3em;
  border-radius:50%;
  font-size:2.2em;
}
.xm-site.mp .info .name{
  font-size:2.4em;
}
.xm-site.mp .info .desc{
  white-space: normal;
  font-size:1em;
  color:#fff;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
/*点击*/
.xm-site.rank .icon{
  width:1.5em;
  height:1.5em;
  font-size:1em;
}
.xm-site.rank .info .name{
  width: calc(100% - 0.8em);
}
.xm-site.rank .count {
  position: absolute;
  right:10px;
  float:right;
  color:var(--xm-color-blue)
}
.xm-site.top .info .desc,
.xm-site.rank .info .desc,
.xm-site.min .info .desc{
 display:none;
}