.color-data-width{ width: 90%; margin:  0 auto;;}
.color-result{   margin-top: 60px; background: #FFFFFF;}

.colorSet{ position:relative; top:0px; position: fixed;   text-align:center; width:100%; z-index:2;    }
.colorSetBk{  background:rgba(0,0,0,0.5);padding:5px; display: flex; align-items: center; justify-content: center; }

.colorInfo{  padding:15px 0px 10px 10px;;}
.colorInfo input{ background:rgba(0,0,0,0.8); color:#ffffff; text-align:center; border:0px; padding:5px 10px; width:150px; border-radius:5px; font-size:14pt; }

.colorize{   position:relative; cursor: pointer;  vertical-align:top; padding-top:15px;  margin-left: 10px; }
.colorize i{  font-size:26pt; color:#FFFFFF;  }

    .color_content_block{ position:relative; width:100%; padding:50px 0%}
    .color_content_block h2{ margin-bottom:20px;}
    .color_content_block hr{ margin-bottom:20px}

    
	.match_group{ position:relative; display:inline-block; vertical-align:top; margin-right:20px; max-width: 100%;  }

	.match_group h3{ margin:10px 0px; ; }
	.match_content{ background: #000000; width: 100%; display: flex; flex-wrap: nowrap; max-width: 100%;     overflow-y:auto;  }
	
	.match_color{flex:1; position:relative;  min-width:100px; height:80px; background:#f1f1f1 ;cursor:pointer}
	
	.match_color span{ position: absolute; width:100%; height:40px; background:#ffffff; bottom:0; padding:5px; font-size:10pt; z-index:1; cursor:default }
	.match_group a{ position:relative;  float:left;padding:10px; display:none;  }
	
	
		
	.gradient_group{ position:relative; display:inline-block; vertical-align:top; margin:5px 0px;margin-right:20px;max-width: 100%;  overflow-y: auto!important;   }
	.gradient_group h3{ margin:10px 0px }
	
	.gradient_color{ min-width:80px;  width:auto; ;  display:inline-block; display:flex; flex-wrap: nowrap; height:80px; background-image:linear-gradient(90deg ,#006699 ,#ffffff); cursor:pointer; border-bottom: 1px solid #000;   }

	.gradient_color span{ display:inline-block;   width:100px;flex:1; text-align:center; height:40px; background:#FFFFFF; margin-top:40px; padding:5px 5px; font-size:10pt; cursor:default;  white-space: nowrap; }
	.gradient_color span:first-child{ text-align:left}
	.gradient_color span:last-child{ text-align:right}
	.gradient_group a{ position:relative;display:inline-block; vertical-align:top;;padding:10px; display:none; background: #000;}

    span.on{ font-weight:bolder; text-decoration:overline } 
 






	@media screen and (max-width:768px) {
 
		.colorSet{ padding-top:  50px; }
				
		.colorInfo{  padding:5px 0px 5px 10px;;} 
 
		.colorize{   padding-top:10px; margin-left: 5px;   }
		.colorize i{  font-size:20pt;  }
		.color-result{   margin-top: 80px;}
	}







	
.bgshow{ display:block;position:fixed; width:100%; height:100%;  left:0px; top:0px; z-index:20; display:none}
.bgshow_close{display:block;position:absolute; width:100%; height:100%; ;left:0px; top:0px;}

.bgshow_content{text-align:center; position:absolute;width:100%; margin:0 auto; height:auto; color:#FFFFFF; z-index:21; border:0px; bottom:5%;}
.bgshow_content h3{ text-shadow:0 0 2px rgba(0,0,0,0.2); margin-bottom:5px}
.bgcss{text-align:center; padding:10px 20px 0px 20px;   width:90%; max-width:600px; margin:0 auto; height:80px; border:0px; background:rgba(0,0,0,0.1); color:#FFFFFF;}
.bgshow_hide{ display:block; margin: 0 auto; cursor:pointer; font-size:26pt; margin-top:5px; opacity:0.5}
.bgshow_hide:hover{  opacity:0.8}

 

.functionBar{ margin-bottom:5px }
.functionBar i{ padding:5px; border-radius:50%; cursor:pointer; text-shadow:0 0 5px rgba(0,0,0,0.5)}

.degSet{}
.degSet.on{ background:rgba(255,255,255,0.5); border:1px solid #ffffff}