@charset "utf-8";

.color_code .color_top > * {vertical-align:middle;}
.color_code .color_top p:before {content:'#'; position:absolute; z-index:1; top:50%; left:0; font-size:70px; font-weight:600; transform:translateY(-50%);}
.color_code .color_top p {display:inline-block; position:relative; width:326px; height:84px; padding-left:45px;}
.color_code .color_top .color_inp {display:inline-block; width:100%; height:100%; color:#000; padding:0; font-size:70px; font-weight:600; border:0; background:transparent;}
.color_code ul {margin-top:60px; margin-bottom:72px;}
.color_code ul li {display:inline-block; margin-right:22px; vertical-align:top;}
.color_code ul li:last-child {margin-right:0;}
.color_code ul li input {width:220px; height:48px; padding:0 16px; color:#666; cursor:pointer; font-weight:600; border-radius:8px; border:0; background:#fff url(../../images/ico/ico_copy.svg) no-repeat center right 18px;}
.color_code ul li > strong {display:block; margin-bottom:12px; color:#666; font-size:13px;}
.color_code ul li.bf_hsh p {position:relative;}
.color_code ul li.bf_hsh p:before {content:"#"; position:absolute; top:14px; left:16px; color:#666; font-weight:600;}
.color_code ul li.complement .comple_con {display:flex; border-radius:8px; overflow:hidden;}
.color_code ul li.complement .comple_con > div {width:172px;}
.color_code ul li.complement input {width:100%; padding:0; color:#fff; text-align:center; cursor:pointer; background:transparent;}

.color_code .hsl_grabox .hsl_tit {margin-bottom:16px; font-size:18px; font-weight:700;}
.color_code .hsl_grabox .hsl_gra + .hsl_tit {margin-top:60px;}
.color_code .hsl_grabox .hsl_gra {display:flex; margin:0 -2px;}
.color_code .hsl_grabox .hsl_gra input {width:100%; height:64px; border-radius:8px; text-indent:-9999px; border:0; cursor:pointer;}
.color_code .hsl_grabox .hsl_gra > div {padding:0 2px;}
.color_code .hsl_grabox .hsl_gra > div p {margin-top:16px; color:#7A838B; font-size:13px; font-weight:600;}

/* Coloris plugin */
.color_code .clr-field {display:inline-block; position:relative; width:420px;}
.color_code .clr-field button {right:0; width:80px; height:80px;}

.clr-picker {width:350px; padding:20px; margin-top:-84px; margin-left:422px;}
.clr-picker .clr-gradient {height:266px;}

/****************************************************************************************************************************************************************************************************************************************************/
@media all and (max-width:1199px){
	.color_code ul {display:flex;}
	.color_code ul li.complement .comple_con > div {width:auto; flex-grow:1;}
	.color_code ul li input {width:200px;}
}

@media all and (max-width:980px){
	.color_code ul {display:block;}
	.color_code ul li {display:block; margin-right:0;}
	.color_code ul li + li {margin-top:30px;}
	.color_code ul li input {width:100%;}
	
	/* Coloris plugin */
	.clr-picker {width:340px; margin-left:0; margin-top:16px;}
	.clr-picker .clr-gradient {height:200px;}
}

@media all and (max-width:640px){
	.color_code .color_top {display:flex; justify-content:space-between; align-items:center;}
	.color_code .color_top .color_inp {font-size:60px;}
	.color_code ul {margin-top:30px;}
	.color_code ul li + li {margin-top:20px;}
	.color_code ul li input {height:40px; background-size:14px;}
	
	.color_code .clr-field {width:100%;}
	.color_code .clr-field button {flex-shrink:0; width:70px; height:70px;}
	
	.color_code .hsl_grabox .hsl_tit {font-size:16px;}
	.color_code .hsl_grabox .hsl_gra {display:block; margin:0;}
	.color_code .hsl_grabox .hsl_gra > div {position:relative; padding:0;}
	.color_code .hsl_grabox .hsl_gra > div + div {margin-top:14px;}
	.color_code .hsl_grabox .hsl_gra > div p {margin-top:4px;}
	.color_code .hsl_grabox .hsl_gra input {height:40px;}
	
	/* Coloris plugin */
	.clr-picker {left:inherit !important; right:24px !important; width:282px; padding:16px;}
	.clr-picker .clr-gradient {height:160px;}
}

@media all and (max-width:480px){
	.color_code .color_top .color_inp {font-size:50px;}
	
	/* Coloris plugin */
	.color_code .clr-field button {width:50px; height:50px;}
}