@charset "UTF-8";
*{margin:0;font-family: "HelveticaNeue",Helvetica,Arial, "PingFangSC", "HiraginoSansGB", "HeitiSC", "MicrosoftYaHei", "WenQuanYiMicroHei",sans-serif;}
body{background:#ffffff;padding:0;margin:0;overflow-x:hidden}
*, ::after, ::before {
box-sizing: border-box;
outline: none;
-webkit-overflow-scrolling: touch;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-touch-callout: none;
/*-webkit-appearance: none;*/
/*-moz-appearance: none;*/
/*appearance: none;*/
/*-webkit-user-select: none;*/
/*-moz-user-select: none;*/
/*-ms-user-select: none;*/
/*user-select: none;*/
}
a {
text-decoration: none;color:#333}
#wrap{
margin: 0 auto;
/*width: 100%;*/
padding: 0 24px;
position: relative;
text-align: left;margin-top:20px
}
#wrap h2{font-size:18px;padding-left:10px;color:#444;line-height:60px;position:relative}
#totalcolors,#aicolors{display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-gap: 10px 15px;}
.ChinaColors{grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
grid-gap: 10px 15px !important;
}
div.colorArr{display:flex;margin:15px 10px;height:124px;border-radius:8px;overflow: hidden;box-shadow: inset rgba(0, 0, 0, 0.05) -1px 1px,inset rgba(0, 0, 0, 0.05) 0 -1px;cursor:pointer;
box-shadow: 1px 0 8px 0 rgba(0,0,0,.15);
}
div.colorArr .colors{display:flex;padding:0;flex:auto;font-size:0;}
div.colorDiv {position:relative;margin-bottom:30px}
div.useit{ margin:0px 0px;font-size: 14px;
display: flex;color:#444;
position:absolute;right:0px;align-items: center; justify-content: center;}
div.useit div{padding:2px 6px;}
div.useit div.uBtn{margin:0 8px;border-radius:3px;display:flex;align-items: center; }
div.useit div.uBtn img{width:24px;height:24px;cursor:pointer;margin:0 3px}
div.colorArr .colors:hover{animation: changeStyle .2s linear 1 alternate forwards;
animation-fill-mode:none;font-size:14px;align-items: center; justify-content: center;font-weight:700;
-webkit-animation: changeStyle .2s linear 1 alternate forwards}
@keyframes changeStyle {
0% {width: 0px;opacity:0}
100% {width: 80px;opacity:1}
}

@-webkit-keyframes changeStyle {
0% {width: 0px;opacity:0}
100% {width: 80px;opacity:1}
}
.footer{text-align:left;font-size:14px;color:#666;line-height:200%;margin:30px 0 20px 0;
width: 100%;
padding: 14px 20px;border-top:1px solid #aaa
}
.footer a{color:#666}
#nav{display: grid;
grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
grid-gap: 6px 2px;padding-left:10px;padding-bottom:12px;padding-top:12px;}
#nav .navType{display:flex;width:96px;line-height:24px;background:none;border-radius:0px;padding:0px 0px;text-align:center;justify-content: center;font-size:14px;align-items:center;border-bottom: 3px solid transparent;font-weight:400}
#nav .navType a{width:100%;padding:0px 0px;display:flex;align-items:center;justify-content: center;color:#444;font-size:14px !important}
#nav .navType a img{margin-right:6px}
#nav .logo{background:none !important;justify-content:left !important;color:#0064ff !important;
/*background: linear-gradient(to right, red, yellow, lime, aqua, blue, fuchsia) 0 / 5em;*/
/*    background-clip: text;*/
/*    -webkit-background-clip: text;*/
/*    -webkit-text-fill-color: transparent;*/
border-bottom: 3px solid transparent !important
}
#nav .logo img{max-height:38px;margin-right:4px;color:#2259c7}
.navFixed{position:fixed;left:0px;top:0;width:100%;background:rgba(255,255,255,.6);backdrop-filter:blur(5px);z-index:10000;padding-top:10px;padding-left:34px !important;padding-right:34px !important;
box-shadow: 0px 0 5px 0 rgba(0,0,0,.2);
}
#nav .navType:hover{
/*background:#0064ff;border-radius:4px;*/
border-bottom: 3px solid #0064ff;
}
#nav .navType:hover a,#nav .navType.SelectType:hover a{color:#0064ff}
#nav .navType.SelectType a{color:#0064ff}
#nav .SelectType{border-bottom: 3px solid #0064ff !important}
#colorType{display: grid;
grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
grid-gap: 6px 2px;padding-left:10px;margin-bottom:12px;}
#colorType .colorType{display:flex;width:52px;line-height:24px;background:#ececec;border-radius:4px;padding:6px 0px;text-align:center;cursor:pointer;justify-content: center;font-size:14px}
#colorType .colorType:hover{background:#0064ff;color:#fff}
#colorType .SelectType{background:#0064ff !important;color:#fff}
.jscolor{border:none;border:2px solid #888;padding:8px 12px;line-height:24px;border-radius:12px;width:120px;text-align:center;cursor:crosshair}
.colorname{display:none !important;display:flex;align-items:center;font-size:14px;width:32px;justify-content:center;padding:0 8px;border-left:1px solid rgba(255,255,255,.2)}
div.colorArr:hover .colorname{display:block !important;display:flex !important;}
.viewCode{font-size:14px !important;align-items: center; justify-content: center;font-weight:700;}
/*.viewCode:hover{animation:none !important;}*/
.JQ{font-weight:700;font-size:17px}
.cncolorTip{font-size:14px;line-height:160%;padding:0 10px;font-weight:400;margin-top:20px;color:#222}
.hidden{display:none !important}
/*.h2b{cursor:pointer}*/
/*.h2b:hover{color:#0064ff !important}*/
h2#Pages{cursor:pointer !important;text-align:center;line-height:50px;width:calc(100vw - 48px);
/*background:rgba(255,255,255,0.7);*/
/*box-shadow: 0 8px 10px 1px rgba(0,0,0,.06),0 3px 14px 2px rgba(0,0,0,.05),0 5px 5px -3px rgba(0,0,0,.01);*/
font-size:14px !important;color:#0064ff}

h2#Pages:hover{color:#99bcac}

.curColor{color:#4c8045}
.curbgColor{background:#4c8045}
.Cinfo{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .top-scroll-bar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999;
  display: none;
  width: 0;
  height: 3px;
  background:#2259c7;
  }
  #f2j,#j2f{color:#2259c7}