body { margin:0px; padding:8px; font-size:16px; line-height:160%; font-family:Arial, Helvetica, sans-serif; color:#000; }
table { empty-cells: show; border-collapse: collapse; }
ul, ul li { list-style: none; }
ul, ul li, p, h1, th, td { padding: 0; margin: 0;}
em, cite, i { font-style: normal; }
a { text-decoration:none; color:#000; }
.main { max-width:600px; width: 100%; margin:30px auto; }
input, .btn { height: 44px; border-radius:8px; border:1px solid #aaa; float:left; margin-left: 1%; color:#555; font-size:16px; box-sizing: border-box; outline: 0; }
input:hover, input:focus { border-color: #f60; }
table { width:100%; }
input { padding:10px; box-shadow:2px 2px 4px rgba(0,0,0,.1) inset; }
.btn { width: 20%; line-height: 42px; padding: 0px; text-align: center; background:linear-gradient(#ffffff, #e6e6e6); cursor: pointer; }
.btn:hover { background:#f3f3f3; color:#f60; }
.input_color { width:54%; margin-left: 0px; }
.input_opacity { width:24%; }
.reset { width: 120px; margin: 0px auto 30px; display: block; float: none;}
.colorbox { max-width:600px; width: 100%; margin: 0px auto 10px; border-radius: 10px; background: url('bg.jpg') 50% 50% no-repeat; background-size: cover; overflow: hidden; }
.colorbg { margin: 10%; padding: 5% 0%; border-radius: 0px; text-align: center; font-family: 'Microsoft YaHei','Hiragino Sans GB','STHeiti','Tahoma','SimHei','sans-serif'; }
.colorbg h1 { height: 50px; line-height: 50px; margin-bottom: 20px; font-size: 26px; cursor: pointer; display: inline-block; }
.colorbg ul { width: 84%; margin: 0px auto; overflow: hidden; }
.colorbg li { float: left; width: 25%; font-size: 20px; overflow: hidden; }
.colorbg li * { display: block; height: 30px; line-height: 30px; }
.colorbg li i { font-weight: bold; margin-bottom: 10px; }
.colornum { max-width:600px; width: 100%; margin: 0px auto 20px; text-align: center; font-size: 12px;}
.colornum span { margin: 0px 10px; display: inline-block; }