*{margin:0;font-family: "HelveticaNeue",Helvetica,Arial, "PingFangSC", "HiraginoSansGB", "HeitiSC", "MicrosoftYaHei", "WenQuanYiMicroHei",sans-serif;}
body{background:#fcfcfc;padding:0;margin:0}
*, ::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(160px, 1fr)) !important;
grid-gap: 10px 10px !important;
}
div.colorArr{display:flex;margin:15px 10px;height:80px;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);*/
margin-bottom:6px
}
.ChinaColors div.colorArr{margin:10px 0px;border-radius:6px;box-shadow: 0px 0 0px 0 rgba(0,0,0,.15);}
div.colorArr .colors{display:flex;padding:0;flex:auto;font-size:0;}
div.colorDiv {position:relative;margin-bottom:14px}
.ChinaColors div.colorDiv{margin-bottom:22px}
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 4px;}
div.useit div.uBtn{margin:0 0px;border-radius:3px;display:flex;align-items: center;margin-right:4px}
div.useit div.uBtn img{width:22px;height:22px;cursor:pointer;margin:0 3px}
div.useit div.uBtn img:last-child{margin-left:12px}
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{padding:14px 0;text-align:center;font-size:14px;color:#666;line-height:200%;margin:30px 0 20px 0;border-top:1px solid #e8e8e8}
.footer a{color:#666}
#nav{display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
grid-gap: 6px 2px;padding-left:0px;padding-bottom:12px;padding-top:8px;}
#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:700}
#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:#80a492 !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:48px;margin-right:4px;color:#80a492;}
.navFixed{position:fixed;left:0px;top:0;width:100%;background:#fcfcfc;z-index:999;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:#80a492;border-radius:4px;*/
border-bottom: 3px solid #80a492;
}
#nav .navType:hover a,#nav .navType.SelectType:hover a{color:#80a492}
#nav .navType.SelectType a{color:#0d00dc}
#nav .SelectType{border-bottom: 3px solid #0d00dc !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:#80a492;color:#fff}
#colorType .SelectType{background:#000 !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;}
.cncolorTip{font-size:14px;line-height:160%;padding:0 10px;font-weight:300;margin-top:20px;color:#222}
.hidden{display:none !important}
/*.h2b{cursor:pointer}*/
/*.h2b:hover{color:#80a492 !important}*/
.h2b{border-top:1px solid #DDD;margin-top:12px}
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:#80a492;margin-top:30px}

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

.curColor{color:#4c8045}
.curbgColor{background:#4c8045}
.Cinfo{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:lowercase;color:#666;}
.ChinaColors .Cinfo{max-width:110px}
/*@media screen and (max-width:768px) {*/
/*#totalcolors,#aicolors{display: grid;*/
/*grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));*/
/*grid-gap: 5px 15px;}*/
/*.ChinaColors{grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;*/
/*grid-gap: 5px 15px !important;*/
/*}*/
/**/
/*#nav{display: grid;*/
/*grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));*/
/*grid-gap: 6px 2px;padding-left:5px;padding-bottom:6px;padding-top:6px;}*/
/*#colorType{display: grid;*/
/*grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));*/
/*grid-gap: 6px 2px;padding-left:10px;margin-bottom:12px;}*/
/*div.colorArr{height:62px}*/
/**/
/*}*/

.powerby{color:#888;font-size:12px;}
input.iput{border: 1px solid #888;
  padding: 8px 12px;
    padding-left: 12px;
  line-height: 24px;
  border-radius: 12px;
  width: 120px;
  text-align: center;}

/*暂时隐藏*/
.favourite{
  display: none;
}