.colorList-icon{ display: block!important;}
#index_body{ background-color: #333333;  }
.header{  }
.wrapper{ height: 100%;}
.footer{}

.color{ display: flex;   height: 100%; width: 100%; position: absolute;  }
.color-menu{   flex:1;  min-width:80px!important; max-width:450px;  height:100%;     background:#ffffff;  overflow:auto; z-index:6; -webkit-overflow-scrolling :touch; padding:0px;}
.color-content{  height:100%; flex: 4;  overflow:auto; background-image: url(/image/bk.png); position:relative;   }

.color_type{  }
.color_type h3{ text-align:center; padding:10px; background:#f1f1f1; font-size:16pt;cursor:pointer}
.color_type h3 i{ float:right;; margin-left:-100px; margin-top:3px; }
.color_type h3:hover i{ }
.color_type ul{ background:rgba(255,255,255,0.9); position:absolute; width:100%; z-index:3 ;display:none; padding:20px 0px}
.color_type ul li{ text-align:center; border-bottom:1px solid #CCCCCC;  }
.color_type ul li:last-child{ border:0px}
.color_type ul li a{ display:block; padding:10px; font-size:12pt; }


.color_list{ }
.color_list ul{text-align:left; margin: 30px auto; width:90%; text-align:center}

.color_list ul li{ vertical-align:top; display:inline-block;  width:60px; text-align:center; position:relative ; margin-bottom:10px; }
.color_list ul li a{ display:block; padding:10px 0px; position:relative; }
.color_list ul li a:hover,
.color_list ul li a:hover .color_ring div{ background:#f1f1f1!important}
.color_list ul li a:hover *{ color:#AAA}


.color_list ul li .color_name{ text-align:left; float:left;  vertical-align:middle;   margin: 10px 12px ;  }
.color_list ul li .color_name .main_name{ display:block;   font-size:14pt;line-height:80%;white-space:nowrap; margin-right:5px ;}
.color_list ul li .color_name .sub_name{ display:block;   font-size:8pt;white-space:nowrap; text-align:left; padding-top:2px;;}

.color_ring{ display:block; width:50px; height:50px; border-radius:50%;  background:#CC0000; position:relative; padding:1px; margin:0 auto; z-index:1;  }
.color_ring div{display:block; width:70%; height:70%; margin:15%; vertical-align:top;  border-radius:50%;   background:#fafafa; position:relative; z-index:2;  }
 



.color-show{  min-height:100%;display: flex; flex-direction: column;  width:100%; padding: 50px;; }


.color-top{ display: flex; align-items: flex-start;; flex: 4;   }
.color-bottom{display: flex; flex: 1; max-height: 50px  ; color:#FFFFFF;  opacity:1; width:100%;    }


.color_show_title{order:2; flex:1; width:90%; overflow: hidden;; display: flex; align-items: flex-start; justify-content: flex-end;    color:#FFFFFF;position: relative;  }
	
	.color_show_title_main{ order: 2; height:auto;  position: relative; float:right;  }
		.color_show_title_ch{  display:inline-block; white-space:nowrap; font-size:50px; line-height:100%;  letter-spacing:20px}
		.color_show_title_en{  display:inline-block; white-space:nowrap; font-size:10pt; padding:10px 0px; margin-left:10px;  background:#ffffff; color:#333333}

	.color_show_intro{  order: 1; opacity:0.75;    margin-right:10px;     line-height:180%  ; width:80%; overflow-y: auto;  display: flex; justify-content:flex-end;     }
	
	.color_show_title_intro{  min-height: 450px;;   height: calc(100% - 180px);  width: 100%; overflow-y: auto;  }


.color_data{  order:1; flex:1; max-width:80px;color:#FFFFFF;   opacity:1;      }
 
.color_line{ display:block;  width:100%;  display:none; }
.hex{white-space:nowrap;  line-height:0%; margin-bottom:20px;}

.color_data_list{ width:70px;   display:inline-block;   vertical-align:top}
.color_data_list i{ display:block; padding:10px 0px;}
.color_data_list ul{ color:#FFFFFF;  margin-bottom:10px;}
.color_data_list ul li{ border-top:1px solid #fff; text-align:center; padding:8px 0px; position:relative}

.color_data_list ul li:first-child{ border-top:0px}
.color_data_list ul li sup{ vertical-align:top; position:absolute; left:0px ; top:20px;}
.color_data_list ul li b{ font-size:20pt;}

.color_function_word{ display: inline-flex; align-items: baseline;    }
.color_function_word span{font-size:20pt; }
.color_function_word sub{ font-size:12pt;  margin-left:5px; }
.color_function{float:right; padding-top:5px; width:auto}
.color_function ul { ;}
.color_function ul li{ display:inline-block; margin-left:5px; ;}
.color_function ul li i{font-size:24pt;}
.color_function ul li a{font-size:24pt;}

.color_content{ width:100%;  min-height:100%;  background:#FFFFFF}
.color_sample{ width:100%; min-height:100%; background:#FFFFFF}


.color_hide{display:none }

@media screen and (max-width:768px) { 
	.color-menu{   flex:1;  min-width:80px!important; max-width:50px; }
	.color-show{ padding: 30px;; padding-top:80px;} 
	.colorList-icon{ float:left; margin-left:80px;} 

	.color_type{ }
	.color_type h3{ text-align:center; padding:10px 10px 0px 10px; font-size:16pt;}
	.color_type h3 i{ float:none;  margin-left:0px; margin-top:-5px; }
	.color_type ul{ background:#999999; ;padding:0px 0px}
	.color_type ul li a{ display:block;color:#FFFFFF ; padding:10px 18px; font-size:12pt; }
        
}



.color-data-width{ position: relative; display: block; width: 100%;; padding:40px;   }
.color-data-width > h2{  padding: 10px 10px;}


.color_content_menu{ position:absolute; top:0px; width:100%; z-index:1}
.color_content_menu ul{ background:rgba(255,255,255,0.5); text-align:center; padding:10px;}
.color_content_menu ul li{ display:inline-block; margin:10px 10px;}
.color_content_menu ul li a{ color:#666666; padding:10px 20px; cursor:pointer}
.color_content_menu ul li a.on{ border:1px solid #CCCCCC; color:#666666}

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

.color_content_block > h3{ padding: 10px 10px;;width:100%;  }
.color_content_block{ position:relative; width:100%; padding:20px 0%;  display: flex; flex-wrap: wrap;  } 

.color_group{ padding:0px 0px; margin: 10px; position:relative; max-width: 100%; overflow-y: auto!important;  }
.color_layer{ flex: 1;  min-width:100px;  width:auto; ; }
/* 
.color_group{ padding: 5px; display: flex; border: 1px solid #CCCCCC;}
.color_group > *{ display: flex;}
.color_2{min-width: 16.6666%; min-width: 160px;;}
.color_3{min-width: 25%; min-width: 240px}
.color_4{min-width: 33.3333%; min-width: 320px}
.color_5{min-width: 50%; min-width: 400px}

.color_6{min-width: 60%; min-width: 400px}
.color_max{min-width: 60%; min-width: 480px} */

.match_group{   }
.match_group h3{ margin:10px 0px;   }


.match_content{  width: 100%; display: flex; flex-wrap: nowrap; max-width: 100%;      }
.match_color{  position:relative;    height:80px; background:#f1f1f1 ;cursor:pointer;}
.match_color span{ position: absolute; width:100%; height:40px; background:#ffffff; bottom:0; padding:5px 10px; font-size:10pt; z-index:1; cursor:default }


.gradient_group{   max-width: 100%;    }
.gradient_group h3{ margin:10px 0px }
 
.gradient_color{  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;    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}

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

@media screen and (max-width:768px) { 
	.color-data-width{ padding:20px; margin:0px;}
        
.color_layer{    min-width:90px;  width:auto; ; }
}






.color_mockup *{ max-width:none}
.color_mockup img{ display:block; cursor:zoom-in}
	
.color_mockup .owl-dots .owl-dot span{width:8px;height:8px;margin:0px 6px;background:#CCCCCC;}
.color_mockup .owl-dots .owl-dot.active span{width:8px;height:8px;margin:0px 6px;opacity:1;background:#666666;}







.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,.bgcss_sub{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}


.mockup{ display:none;position:fixed; width:100%; height:100%;  left:0px; top:0px; z-index:20;   background:#f1f1f1 }
.mockup_close{display:block;position:absolute; width:100%; height:100%;;left:0px; top:0px; z-index:10;  cursor:zoom-out}

.mockup_content{text-align:center;display:flex;  width:100%; height:100%;   z-index:21; border:0px;  justify-content: center;align-items: center; }
.mockup_here{  width:100%!important; max-width:800px; background:#CC0000; margin:0 auto }
.mockup_here img{ display:block}


.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}



.gradient_list{}


.gradient_list{ }
.gradient_list ul{ display: flex; flex-wrap: wrap; margin: 0px auto; padding: 20px; width:100%; }

.gradient_list ul li{ vertical-align:top; display:inline-block;   padding:5px;; text-align:center; position:relative ;   width: 25%;    }
.gradient_list ul li a{ display:block; padding:0px 0px; position:relative; }
.gradient_list ul li a .color_ring{width:100%; height: auto;; padding-top: 100%; border-radius:50% ;}
 

@media screen and (max-width:1600px) { 
	
	.gradient_list ul li{  width: 33.33%;   }
}
@media screen and (max-width:1024px) { 
	
	.gradient_list ul li{  width: 50%;   }
}
	
@media screen and (max-width:768px) { 
		
	.gradient_list ul{  justify-content: center; padding: 10px;  }

	.gradient_list ul li{  width: 100%; min-width: 60px;  }
}




.color-show-content{ position: absolute; left: 0px; top: 0px;; min-height:100%;display: flex; flex-direction: column;  width:100%; padding: 50px; z-index: 3;; }
.color-show-content-close{ position: absolute; width: 100%; height: 100%;;; left: 0px; top: 0px;z-index: 2 }



.gradient-content .color_data{ background: rgba(0,0,0,0.5); min-width: 200px; padding: 10px;}

.gradient-content .color_data_list{ width: 100%;   display:inline-block;   vertical-align:top}
.gradient-content .color_data_list i{ display:block; padding:10px 0px;}
.gradient-content .color_data_list ul{ color:#000000;  margin-bottom:10px;}
.gradient-content .color_data_list ul li{ border:0px; background: #FFFFFF; margin-bottom: 5px; color: #FFFFFF; display: flex; align-items: center; justify-content: center; box-shadow: 0px 0px 15px rgba(0,0,0,0.2); text-shadow: 0px 0px 5px rgba(0,0,0,0.5);}
.gradient-content .color_data_list ul li sub{font-size: 10pt; margin-left: 5px;;; }
.gradient-content .color_data_list ul li b{ font-size:12pt;}





.color_data_direction{ padding: 0px!important; }

.color_data_direction_title{display: flex; align-items: center; justify-content: center; text-shadow: 0px 0px 5px rgba(0,0,0,0.5);  cursor: pointer;}
.color_data_direction_title i{   }
.color_data_direction_title span{  }


.color_data_direction ul {width:calc(100% + 20px);  position: absolute; z-index: 2;top:35px;left: -10px; font-size: 10pt;  display: flex; display: none; align-items: flex-start; justify-content: flex-start; flex-wrap: wrap;background: rgba(255,255,255,0.9); padding: 10px;}
.color_data_direction ul li{  border:0px; color: #666666;   display: block;  padding:6px ; text-shadow: none;width: 25%; text-align: center ;}
.color_data_direction ul li:hover{background: rgba(0,0,0,0.6); color: #FFFFFF;}
.color_data_direction ul li i{ padding: 0px; margin: 0px; cursor: pointer; ;}
.color_data_direction ul li span{  width: 60px; display: none;}
.color_data_direction ul li.on{  background: #000;; color: #FFFFFF;}




.color_data_function { border-top: 1px solid #ffffff33; margin-top: 10px; padding-top: 5px;}
.color_data_function ul {width:100%; display: flex; align-items: center; justify-content: flex-start; }
.color_data_function ul li{ border:0px; flex: 1; text-align: center;     padding:6px 0px; cursor: pointer;text-shadow: 0px 0px 5px rgba(0,0,0,0.8);   }
.color_data_function ul li i{ margin-left: 10px; margin: 0 auto;  }

.color_data_function ul li span{  display: none; }


.css{ width: 100%; height: 100%; background: rgba(0,0,0,0.8); position: fixed; z-index: 20; left: 0px; top: 0px; display: flex  ; align-items: center; justify-content: center;}
.css_close{ width: 100%; height: 100%;  position: fixed;  left: 0px; top: 0px;cursor: pointer; ;}
.css_content{ width: 90%; max-width: 800px; color: #FFFFFF;}
.css_content *{ background: #000;}
.css_content h3{ text-align: center; padding: 10px 0px;}
.css_content textarea{ background: rgba(255,255,255,1); color: #333333; width: 100%; max-width: none; font-size: 12pt; }


.color-text{ position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;;    display: flex;  flex-direction: column; display: none; z-index: 1;}
.color-text div{flex:1; width: 100% ;background: #666666;display:  flex; align-items: center; justify-content: center;;}
.color-text p{ 
        -webkit-background-clip: text; background-clip: text; color: transparent;
		font-size: 16vmin;

}

@media screen and (max-width:768px) {  
	

.color-show-content{ padding:30px ; padding-top: 80px; }
}