@charset "utf-8";
@import url("http://fonts.googleapis.com/css?family=Open+Sans:400,300,700");
@import url("https://fonts.googleapis.com/earlyaccess/notosanskr.css");
@font-face{
font-family: 'NanumSquare';
src:url('https://www.noroopaint.com/i/asset/fonts/NanumSquareR.eot');
src:url('https://www.noroopaint.com/i/asset/fonts/NanumSquareR.eot?#iefix') format('embedded-opentype'),
    url('https://www.noroopaint.com/i/asset/fonts/NanumSquareR.woff') format('woff'),
    url('https://www.noroopaint.com/i/asset/fonts/NanumSquareR.ttf') format('truetype')}
@font-face{font-family: 'NanumSquareBold';
src:url('https://www.noroopaint.com/i/asset/fonts/NanumSquareB.eot');
src:url('https://www.noroopaint.com/i/asset/fonts/NanumSquareB.eot?#iefix') format('embedded-opentype'),
    url('https://www.noroopaint.com/i/asset/fonts/NanumSquareB.woff') format('woff'),
    url('https://www.noroopaint.com/i/asset/fonts/NanumSquareB.ttf') format('truetype')}
@font-face{font-family: 'NanumSquareExtraBold';
src:url('https://www.noroopaint.com/i/asset/fonts/NanumSquareEB.eot');
src:url('https://www.noroopaint.com/i/asset/fonts/NanumSquareEB.eot?#iefix') format('embedded-opentype'),
    url('https://www.noroopaint.com/i/asset/fonts/NanumSquareEB.woff') format('woff'),
    url('https://www.noroopaint.com/i/asset/fonts/NanumSquareEB.ttf') format('truetype')}


/* common */
html, body, div, ul, li, h1, h2, a, span, strong, b, i, form, input, p, dl, dt, dd{margin:0;padding:0;border:none 0;font-size:16.5px;letter-spacing:-1px;line-height:20px;color:#222;font-family:'NanumSquareBold','나눔스퀘어 Bold','NanumSquare','나눔스퀘어','Noto Sans KR','Malgun Gothic','malgungothic','맑은고딕','맑은 고딕','나눔고딕','MS Gothic','Arial','Apple SD Gothic Neo','AppleSDGothicNeo','Dotum','돋움'}
div, ul, li, h1, h2, a, span, strong, b, i, input, p, dl, dt, dd{box-sizing:border-box}
a, a:active, a:link, a:visited, a:hover{text-decoration:none;color:inherit;cursor:pointer}
ul, li{list-style-type:none}
body{width:100%;height:100%;background-color:#fff}
input{padding:0 10px;text-align:left}
input::placeholder{opacity:1}
input::-webkit-input-placeholder{opacity:1}
input:-moz-placeholder{opacity:1}
input::-moz-placeholder{opacity:1}
input:-ms-input-placeholder{opacity:1}


/* font size */
#colChart h1, #colChart h1 strong
{font-size:20px}

#colChart h2
{font-size:18.5px}

#colChart .colInfo span, #colChart .colInfo strong, #colChart .colInfo b
{font-size:16px}

#colChart .colImg .txtH span, #colChart .colImg .txt span
{font-size:15.5px}

#colChart .colSelect span, #colChart .colSelect strong, #colChart .colSelect b
{font-size:15px}

#colChart .note, #colChart .note dd, #colChart .note b
{font-size:14.75px}



/* line-height */
#colChart .colInfo span, #colChart .colInfo strong, #colChart .colInfo b
{line-height:21px}

#colChart .colSelect span, #colChart .colSelect strong, #colChart .colSelect b
{line-height:19px}


/* font weight */
b, strong{font-weight:normal}


/* bold - bagic */
#colChart .colTab li.on a,
#colChart .colReset:hover, #colChart .colCopy:hover
{font-family:'NanumSquareBold','나눔스퀘어 Bold','NanumSquare','나눔스퀘어','Noto Sans KR','Malgun Gothic','malgungothic','맑은고딕','맑은 고딕','나눔고딕','MS Gothic','Arial','Apple SD Gothic Neo','AppleSDGothicNeo','Dotum','돋움'}


/* normal */
input::placeholder{font-family:'NanumSquare','나눔스퀘어','Noto Sans KR','Malgun Gothic','malgungothic','맑은고딕','맑은 고딕','나눔고딕','MS Gothic','Arial','Apple SD Gothic Neo','AppleSDGothicNeo','Dotum','돋움'}
input::-webkit-input-placeholder{font-family:'NanumSquare','나눔스퀘어','Noto Sans KR','Malgun Gothic','malgungothic','맑은고딕','맑은 고딕','나눔고딕','MS Gothic','Arial','Apple SD Gothic Neo','AppleSDGothicNeo','Dotum','돋움'}
input:-moz-placeholder{font-family:'NanumSquare','나눔스퀘어','Noto Sans KR','Malgun Gothic','malgungothic','맑은고딕','맑은 고딕','나눔고딕','MS Gothic','Arial','Apple SD Gothic Neo','AppleSDGothicNeo','Dotum','돋움'}
input::-moz-placeholder{font-family:'NanumSquare','나눔스퀘어','Noto Sans KR','Malgun Gothic','malgungothic','맑은고딕','맑은 고딕','나눔고딕','MS Gothic','Arial','Apple SD Gothic Neo','AppleSDGothicNeo','Dotum','돋움'}
input:-ms-input-placeholder{font-family:'NanumSquare','나눔스퀘어','Noto Sans KR','Malgun Gothic','malgungothic','맑은고딕','맑은 고딕','나눔고딕','MS Gothic','Arial','Apple SD Gothic Neo','AppleSDGothicNeo','Dotum','돋움'}

#colChart #colSearch,
#colChart .colTab li a,
#colChart .colReset, #colChart .colCopy,
#colChart .colReset:hover, #colChart .colCopy:hover,
#colChart .colImg .txtH span, #colChart .colImg .txtW span,
#colChart .colSum,
#colChart .result b,
#colChart .note, #colChart .note dd, #colChart .note b
{font-family:'NanumSquare','나눔스퀘어','Noto Sans KR','Malgun Gothic','malgungothic','맑은고딕','맑은 고딕','나눔고딕','MS Gothic','Arial','Apple SD Gothic Neo','AppleSDGothicNeo','Dotum','돋움'}


/* bordest */
#colChart h1,
#colChart h2
{font-family:'NanumSquareExtraBold','나눔스퀘어 ExtraBold','NanumSquare','나눔스퀘어','Noto Sans KR','Malgun Gothic','malgungothic','맑은고딕','맑은 고딕','나눔고딕','MS Gothic','Arial','Apple SD Gothic Neo','AppleSDGothicNeo','Dotum','돋움'}


/* eng, num fonts */
input,
#colChart li.l2 input,
#colChart .colCalc input,
#colChart .colInfo span, #colChart .colInfo strong, #colChart .colInfo b,
#colChart .colSelect span, #colChart .colSelect strong, #colChart .colSelect b,
#colChart .calc strong, #colChart .calc b, #colChart .result span, #colChart .result strong
{font-family:'Open Sans','Verdana','NanumSquare','나눔스퀘어','Noto Sans KR','Malgun Gothic','malgungothic','맑은고딕','맑은 고딕','나눔고딕','MS Gothic','Arial','Apple SD Gothic Neo','AppleSDGothicNeo','Dotum','돋움'}


/* color */
#colChart h1, #colChart h2,
#colChart .colInfo span, #colChart .colInfo span strong, #colChart .colInfo span b,
#colChart .result span
{color:#222}

input::placeholder{color:#a0a0a0}
input::-webkit-input-placeholder{color:#a0a0a0}
input:-moz-placeholder{color:#a0a0a0}
input::-moz-placeholder{color:#a0a0a0}
input:-ms-input-placeholder{color:#a0a0a0}

#colChart .colTab li a,
#colChart .colReset, #colChart .colCopy,
#colChart .colCalc .calc strong,
#colChart .result strong,
#colChart .note, #colChart .note dd, #colChart .note b
{color:#a0a0a0}

#colChart h1 strong,
#colChart .colReset:hover, #colChart .colCopy:hover,
#colChart .colImg .txtH span, #colChart .colImg .txtW span,
#colChart .result b
{color:#5bb41f}


/* border - bagic */
input,
#colChart #colList,
#colChart li.l2 .colView ul,
#colChart .colReset i, #colChart .colCopy i,
#colChart .colSelect li
{border:1px solid #e2e2e2}


/* border radius */
#colChart li.l2 .colView ul,
#colChart .colSelect li,
#colChart .colImg .box,
#colChart .colCalc input,
#colChart .colSum,
#colChart .result
{border-radius:5px}

#colChart #colList .colWrap li,
#colChart .colReset i, #colChart .colCopy i
{border-radius:2px}

#colChart li.l2 input
{border-radius:5px 0 0 5px}

#colChart #colSearch
{border-radius:0 5px 5px 0}

#colChart .colTab li a
{border-radius:15px 15px 0 0}


/* box heights */
#colChart .colTab li a
{height:40px}

input, #colChart #colSearch,
#colChart .colCalc .calc b, #colChart .colCalc .calc strong, #colChart .colCalc input, #colChart .colSum
{height:40px;line-height:40px}


/* headline */
#no-fouc{opacity:0}
#colChart{content:'';display:block;clear:both;width:100%;max-width:1200px;margin:0 auto;padding:5px 10px;overflow:hidden}
#colChart > ul > li{display:block;margin-top:40px}
#colChart h1 strong{display:inline-block;margin-right:3px}
#colChart li.l1 h2{margin-bottom:10px}


/* tab */
#colChart .colTab{display:block;width:100%}
#colChart .colTab::after{content:'';display:block;clear:both}
#colChart .colTab li{display:table;width:100%;max-width:210px;float:left}
#colChart .colTab li + li{margin-left:1px}
#colChart .colTab.third li{width:calc(33.33% - 0.67px)}
#colChart .colTab.fourth li{width:calc(25% - 0.75px)}
#colChart .colTab.fifth li{width:calc(20% - 0.8px)}
#colChart .colTab.sixth li{width:calc(16.6% - 0.833px)}
#colChart .colTab.seventh li{width:calc(14.285% - 0.857px)}
#colChart .colTab li a{display:table-cell;width:100%;padding-top:2px;background:#f7f7f7;text-align:center;vertical-align:middle}
#colChart .colTab li a:hover{color:#777;background:#f0f0f0}
#colChart .colTab li.on a, #colChart .colTab li.on a:hover{color:#fff;background:#5bb41f}


/* color chart */
#colChart #colList{width:100%;height:445px;overflow-y:auto}
#colChart #colList::after{content:'';display:block;clear:both}
#colChart #colList .colWrap{float:left;margin-right:1px}
#colChart #colList .colWrap a{display:block;width:58px;height:58px;margin-bottom:1px}
#colChart #colList .colWrap a.point{display:block;border:1px solid #fff}


/* search*/
#colChart li.l2 > ul{display:table;width:100%;margin-top:10px}
#colChart li.l2 > ul > li{display:table-cell}
#colChart li.l2 > ul > li:first-child{width:50%;padding-right:10px}
#colChart li.l2 > ul > li:last-child{padding-left:10px}
#colChart li.l2 .input{width:100%}
#colChart li.l2 .input::after{content:'';display:block;clear:both}
#colChart li.l2 input{float:left;width:calc(100% - 120px);border-right:0}
#colChart #colSearch{display:block;float:left;width:120px;color:#fff;background:#5bb41f;text-align:center}


/* color chip */
#colChart li.l2 .colView{height:100%;min-height:80px;vertical-align:top}
#colChart li.l2 .colView ul{display:table;width:100%;min-height:105px;overflow:hidden}
#colChart .colChip, #colChart .colInfo{display:table-cell}
#colChart .colChip{position:relative}
/* logo image */
#colChart .colChip i{position:absolute;left:15px;bottom:10px;width:100px;height:50px;opacity:0.2;background-repeat:no-repeat;background-position:center;background-size:100px auto}
#colChart .colChip i.noroo{background-image:url('/i/asset/images/logo_01_w.png')}
#colChart .colChip i.pantone{background-image:url('/i/asset/images/logo_02_w.png')}
#colChart .colChip i.dulux{background-image:url('/i/asset/images/logo_03_w.png')}
/* color brane name code */
#colChart .colInfo{position:relative;width:50%;min-width:182px;border-left:1px solid #e2e2e2}
#colChart .colInfo span{padding:10px 5px 10px 10px}
#colChart .colInfo span, #colChart .colInfo span strong, #colChart .colInfo span b{display:block}
/* view all colors */
#colChart .colReset, #colChart .colCopy{display:block;width:100%;height:30px;line-height:28px;padding-left:10px;border-top:1px dotted #e2e2e2}
#colChart .colReset i, #colChart .colCopy i{display:inline-block;width:17px;height:17px;margin-left:5px;background-image:url('/i/asset/images/icon_02.png');background-repeat:no-repeat;background-position:center;background-size:15px;vertical-align:middle}
#colChart .colCopy i{background-image:url('/i/asset/images/icon_04.png')}


/* color selected */
#colChart .colSelect{margin-top:10px}
#colChart .colSelect::after{content:'';display:block;clear:both}
#colChart .colSelect li{position:relative;display:block;float:left;width:calc(25% - 7.5px);overflow:hidden}
#colChart .colSelect li + li{margin-left:10px}
#colChart .colSelect li:nth-child(4){display:block}
#colChart .colSelect li:nth-child(5){display:none}
#colChart .colSelect li > span{min-height:78px;padding:10px 5px 10px 10px;border-top:1px solid #e2e2e2}
#colChart .colBg{height:97px}
#colChart .colClose{position:absolute;top:0;right:0;display:block;width:30px;height:30px;opacity:0.7;background:url('/i/asset/images/icon_03.png') no-repeat center;background-size:10px}
#colChart .colSelect span, #colChart .colSelect span strong, #colChart .colSelect span b{display:block}


/* calc */
#colChart .colCalc{position:relative;display:table;width:100%;margin-top:10px}
#colChart .colCalc li{display:table-cell}
#colChart .colCalc li:last-child{padding-left:10px}
/* calc image */
#colChart .colCalc .colImg{position:relative;width:145px}
#colChart .colCalc .colImg p{position:absolute}
#colChart .colImg .box{top:0;left:0;width:97px;height:97px;border:2px dotted #ddd}
#colChart .colImg .dotH, #colChart .colImg .txtH{top:2px;height:93px}
#colChart .colImg .dotW, #colChart .colImg .txtW{left:2px;width:93px}
#colChart .colImg .dotH{left:106px;width:2px;border-left:1px dotted #5bb41f}
#colChart .colImg .dotW{top:106px;height:2px;border-top:1px dotted #5bb41f}
#colChart .colImg .txtH{top:2px;left:114px}
#colChart .colImg .txtW{top:112px;left:2px}
#colChart .colCalc .colImg p span{display:block}
#colChart .colImg .txtH span{line-height:93px}
#colChart .colImg .txtW span{text-align:center}
/* calculator */
#colChart .colCalc .calc{text-align:center}
#colChart .colCalc .calc b,
#colChart .colCalc .calc strong,
#colChart .colCalc input,
#colChart .colSum
{display:inline-block;text-align:center}
#colChart .colCalc .calc b,
#colChart .colCalc .calc strong{width:25px}
#colChart .colSum{margin-left:10px;color:#fff;background:#5bb41f}
#colChart .colCalc input,
#colChart .colSum{width:150px}
/* result */
#colChart .result{margin-top:10px;padding:15px 5px;background:#f7f7f7;text-align:center}
#colChart .result strong{display:inline-block;margin:0 3px}
#colChart .result span{display:inline-block;min-width:70px;height:25px;padding:0 10px;border-bottom:1px solid #e2e2e2;text-align:center;vertical-align:middle}
#colChart .result p{display:inline-block}


/* note */
#colChart .note{width:100%;margin-top:10px}
#colChart span.note{display:block;text-align:right}
#colChart dl.note{display:table}
#colChart .note dd{display:table-cell;text-align:left}
#colChart .note dd:first-child{width:10px;padding-top:2px;vertical-align:top}
#colChart .note dd b{display:inline-block}
#colChart dl.note + dl{margin-top:0}
#colChart li.l1 dl.note{display:none}


/* pantone */
#colChart h1.tBox, #colChart h1.tBox strong{font-size:26px}
#colChart h1.tBox{max-width:430px;height:50px;line-height:50px;margin:auto;color:#fff;background:#000;text-align:center}
#colChart h1.tBox strong{font-family:'NanumSquare','나눔스퀘어','Noto Sans KR','Malgun Gothic','malgungothic','맑은고딕','맑은 고딕','나눔고딕','MS Gothic','Arial','Apple SD Gothic Neo','AppleSDGothicNeo','Dotum','돋움';color:#fff}


/* media screen - font */
@media all and (max-width:750px) {
  html, body, div, ul, li, h1, h2, a, span, strong, b, i, form, input, p, dl, dt, dd{font-size:15.5px;line-height:19px}
  #colChart h1, #colChart h1 strong{font-size:19px}
  #colChart h1.tBox, #colChart h1.tBox strong{font-size:23.5px}
  #colChart h2{font-size:17.5px}
  #colChart .colInfo span, #colChart .colInfo strong, #colChart .colInfo b{font-size:15px}
  #colChart .colReset, #colChart .colCopy, #colChart .colImg .txtH span, #colChart .colImg .txt span{font-size:14.5px}
  #colChart .colSelect span, #colChart .colSelect strong, #colChart .colSelect b, #colChart .note, #colChart .note dd, #colChart .note b{font-size:14px}
  #colChart .colInfo span, #colChart .colInfo strong, #colChart .colInfo b, #colChart .result span{line-height:20px}
  #colChart .colSelect span, #colChart .colSelect strong, #colChart .colSelect b{line-height:18px}
}
@media all and (max-width:600px) {
  html, body, div, ul, li, h1, h2, a, span, strong, b, i, form, input, p, dl, dt, dd{font-size:14.5px;line-height:18px}
  #colChart h1, #colChart h1 strong{font-size:18px}
  #colChart h1.tBox, #colChart h1.tBox strong{font-size:21px}
  #colChart h2{font-size:16.5px}
  #colChart .colInfo span, #colChart .colInfo strong, #colChart .colInfo b{font-size:14px}
  #colChart .colReset, #colChart .colCopy, #colChart .colImg .txtH span, #colChart .colImg .txt span{font-size:13.5px;line-height:17.5px}
  #colChart .colSelect span, #colChart .colSelect strong, #colChart .colSelect b{font-size:13px}
  #colChart .note, #colChart .note dd, #colChart .note b{font-size:13px;line-height:17.5px}
  #colChart .colInfo span, #colChart .colInfo strong, #colChart .colInfo b, #colChart .result span{line-height:19px}
  #colChart .colSelect span, #colChart .colSelect strong, #colChart .colSelect b{line-height:17px}
}
@media all and (max-width:450px) {
  html, body, div, ul, li, h1, h2, a, span, strong, b, i, form, input, p, dl, dt, dd{font-size:13.5px;line-height:17px}
  #colChart h1, #colChart h1 strong{font-size:17px}
  #colChart h1.tBox, #colChart h1.tBox strong{font-size:18.5px}
  #colChart h2{font-size:15.5px}
  #colChart .colInfo span, #colChart .colInfo strong, #colChart .colInfo b{font-size:13px}
  #colChart .colReset, #colChart .colCopy, #colChart .colImg .txtH span, #colChart .colImg .txt span{font-size:12.5px;line-height:16.5px}
  #colChart .note, #colChart .note dd, #colChart .note b{font-size:12px;line-height:16.5px}
  #colChart .colSelect span, #colChart .colSelect strong, #colChart .colSelect b{font-size:12px}
  #colChart .colInfo span, #colChart .colInfo strong, #colChart .colInfo b, #colChart .result span{line-height:18px}
  #colChart .colSelect span, #colChart .colSelect strong, #colChart .colSelect b{line-height:16px}
}


/* media screen - space */
@media all and (max-width:625px) {
  #colChart h1.tBox{width:80%;height:45px;line-height:45px}
  #colChart .colTab li{max-width:160px}
  #colChart .colReset, #colChart .colCopy{height:35px;line-height:35px}
  #colChart #colList{height:360px}
  #colChart #colList .colWrap a{width:54px;height:54px}
}
@media all and (max-width:600px) {
  #colChart h1.tBox{height:40px;line-height:40px}
  #colChart .colTab li{max-width:130px}
  #colChart .colTab li a{height:35px;border-radius:10px 10px 0 0}
  #colChart li.l2 input, #colChart #colSearch, #colChart .colCalc .calc b, #colChart .colCalc .calc strong, #colChart .colCalc input, #colChart .colSum{height:35px;line-height:35px}
  #colChart > ul > li{margin-top:35px}
  #colChart .result span{min-width:50px;min-height:20px}
  #colChart #colList{height:392px}
  #colChart #colList .colWrap a{width:50px;height:50px}
}
@media all and (max-width:450px) {
  #colChart li.l1 h2{margin-bottom:5px}
  #colChart h1.tBox{height:35px;line-height:35px}
  #colChart .colTab li{max-width:100px}
  #colChart .colTab li a{height:30px;border-radius:5px 5px 0 0}
  #colChart li.l2 input, #colChart #colSearch, #colChart .colReset, #colChart .colCopy, #colChart .colCalc .calc b, #colChart .colCalc .calc strong, #colChart .colCalc input, #colChart .colSum{height:30px;line-height:28px}
  #colChart > ul > li{margin-top:30px}
  #colChart li.l2 > ul, #colChart .colSelect, #colChart .colCalc, #colChart .result, #colChart .note{margin-top:5px}
  #colChart #colList{height:357px}
  #colChart #colList .colWrap a{width:46px;height:46px}
}


/* media screen - now color chip */
@media all and (max-width:750px) {
  #colChart .colInfo{min-width:170px}
}
@media all and (max-width:700px) {
  #colChart li.l2 > ul > li:first-child{width:45%;padding-right:5px}
   /* search */
  #colChart #colSearch{width:100px}
  /* chip */
  #colChart li.l2 > ul > li:last-child{padding-left:5px}
  #colChart li.l2 input{width:calc(100% - 100px)}
}
@media all and (max-width:625px) {
  #colChart li.l2 > ul > li:first-child{width:50%;padding-right:3.5px}
  /* search */
  #colChart li.l2 input{width:calc(100% - 57px)}
  #colChart #colSearch{width:57px;text-indent:-9999px;background:url('/i/asset/images/icon_01.png') no-repeat center #5bb41f;background-size:17px}
  /* chip */
  #colChart li.l2 > ul > li:last-child{padding-left:3.5px}
  #colChart li.l2 .colView ul, #colChart .colChip, #colChart .colInfo{display:block;height:115px;min-height:auto;border:0}
  #colChart li.l2 .colView ul{position:relative}
  #colChart .colChip, #colChart .colInfo{width:100%;min-width:auto;padding:0;border-radius:5px}
  #colChart .colChip{height:calc(100% - 10px)}
  #colChart .colChip i{display:none}
  #colChart .colInfo{position:absolute;top:0;border:1px solid #e2e2e2;overflow:hidden}
  #colChart .colInfo span{position:absolute;top:10px;left:15px;padding:0}
  #colChart .colInfo span, #colChart .colInfo span strong, #colChart .colInfo span b{color:rgba(0,0,0,.85)}
  /* chip button */
  #colChart .colReset, #colChart .colCopy{width:50%;padding:0;border-top:1px solid #e2e2e2;background:#fff;text-align:center}
  #colChart .colReset{left:0;position: absolute;bottom:0}
  #colChart .colCopy{right:0;position: absolute;bottom:0;}
}
@media all and (max-width:600px) {
  #colChart li.l2 .colView ul, #colChart .colInfo{height:112px}
}
@media all and (max-width:450px) {
  #colChart li.l2 .colView ul, #colChart .colInfo{height:105px}
  #colChart .colInfo span{left:10px}
}
@media all and (max-width:420px) {
  #colChart li.l2 .colView ul, #colChart .colInfo{height:95px}
  #colChart li.l2 > ul, #colChart li.l2 > ul > li{display:block}
  #colChart li.l2 > ul > li:first-child, #colChart li.l2 > ul > li:last-child{width:100%;padding:0}
  #colChart li.l2 > ul > li:last-child{margin-top:5px}
  #colChart li.l2 .colView ul{border:1px solid #e2e2e2;border-radius:5px}
  #colChart .colChip, #colChart .colInfo{border:0;border-radius:0}
  #colChart .colChip{width:50%}
  #colChart .colInfo{right:0}
  #colChart .colInfo span{top:5px;left:auto;right:0;width:50%;padding-left:15px}
}


/* media screen - selected colors */
@media all and (max-width:750px) {
  #colChart .colSelect li > span{min-height:75px}
  #colChart .colBg{height:94px}
}
@media all and (max-width:600px) {
  #colChart .colSelect li > span{min-height:72px}
  #colChart .colBg{height:90px}
}
@media all and (max-width:500px) {
  #colChart .colSelect li > span{min-height:62px;padding:5px 2px 5px 5px}
  #colChart .colBg{height:78px}
}
@media all and (max-width:450px) {
  #colChart .colSelect li > span{min-height:59px}
  #colChart .colBg{height:74px}
}


/* media screen - select color length */
@media all and (min-width:950px) {
  #colChart .colSelect li{width:calc(20% - 8px)}
  #colChart .colSelect li:nth-child(5){display:block}
}
@media all and (max-width:710px) {
  #colChart .colSelect li{width:calc(33.33% - 3.34px)}
  #colChart .colSelect li + li{margin-left:5px}
  #colChart .colSelect li:nth-child(4), #colChart .colSelect li:nth-child(5){display:none}
}
@media all and (max-width:500px) {
  #colChart .colSelect li{width:calc(33.33% - 2px)}
  #colChart .colSelect li + li{margin-left:3px}
}
@media all and (max-width:335px) {
  #colChart .colSelect li{width:calc(50% - 1.5px)}
  #colChart .colSelect li:nth-child(3){display:none}
}


/* media screen - calc */
@media all and (max-width:750px) {
  #colChart .colCalc .calc::after{content:'';display:block;clear:both}
  #colChart .colCalc .calc b, #colChart .colCalc .calc strong{width:20px;float:left}
  #colChart .colCalc input, #colChart .colSum{width:calc(33.33% - 23.34px);float:left}
  #colChart .result b{display:inline-block;margin-bottom:10px}
}
@media all and (max-width:600px) {
  #colChart .result{padding:15px 5px 5px}
  #colChart .result b{margin-bottom:7px}
}
@media all and (max-width:450px) {
  #colChart .colCalc .calc b{display:none}
  #colChart .colCalc input, #colChart .colSum{width:calc(33.33% - 10px);float:left}
  #colChart span.note{display:none}
}

@media all and (max-width:800px) {
  #colChart .result p{display:block}
  #colChart .note dd b{display:inline-block}
}
@media all and (max-width:650px) {
  #colChart .note dd b{display:inline}
}
@media all and (max-width:600px) {
  #colChart .result p{display:inline-block}
}
@media all and (max-width:580px) {
  #colChart .result p{display:block}
  #colChart .note dd b{display:inline-block}
}
@media all and (max-width:470px) {
  #colChart .note dd b{display:inline}
}
@media all and (max-width:440px) {
  #colChart .result p{display:inline-block}
}
@media all and (max-width:425px) {
  #colChart .result p{display:block}
}


/* media screen - calc image */
@media all and (max-width:750px) {
  #colChart .colCalc .colImg{position:relative;width:124px}
  #colChart .colImg .box{width:78px;height:78px}
  #colChart .colImg .dotH, #colChart .colImg .txtH{height:74px}
  #colChart .colImg .dotW, #colChart .colImg .txtW{width:74px}
  #colChart .colImg .dotH{left:86px}
  #colChart .colImg .dotW{top:86px}
  #colChart .colImg .txtH{left:94px}
  #colChart .colImg .txtW{top:89px}
  #colChart .colImg .txtH span{line-height:74px}
}
@media all and (max-width:700px) {
  #colChart .colCalc .colImg{position:relative;width:113px}
  #colChart .colImg .box{width:67px;height:67px}
  #colChart .colImg .dotH, #colChart .colImg .txtH{height:63px}
  #colChart .colImg .dotW, #colChart .colImg .txtW{width:63px}
  #colChart .colImg .dotH{left:75px}
  #colChart .colImg .dotW{top:75px}
  #colChart .colImg .txtH{left:83px}
  #colChart .colImg .txtW{top:78px}
  #colChart .colImg .txtH span{line-height:63px}
}
@media all and (max-width:590px) {
  #colChart .colCalc .colImg{position:relative;width:124px}
  #colChart .colImg .box{width:78px;height:78px}
  #colChart .colImg .dotH, #colChart .colImg .txtH{height:74px}
  #colChart .colImg .dotW, #colChart .colImg .txtW{width:74px}
  #colChart .colImg .dotH{left:86px}
  #colChart .colImg .dotW{top:86px}
  #colChart .colImg .txtH{left:94px}
  #colChart .colImg .txtW{top:89px}
  #colChart .colImg .txtH span{line-height:74px}
}
@media all and (max-width:445px) {
  #colChart .colCalc .colImg{position:relative;width:90px}
  #colChart .colImg .box{width:45px;height:45px}
  #colChart .colImg .dotH, #colChart .colImg .txtH{height:35px;top:5px}
  #colChart .colImg .dotW, #colChart .colImg .txtW{width:35px;left:5px}
  #colChart .colImg .dotH{left:50px}
  #colChart .colImg .dotW{top:48px}
  #colChart .colImg .txtH{left:54px}
  #colChart .colImg .txtW{top:52px}
  #colChart .colImg .txtH span{line-height:35px}
  /* result */
  #colChart .colCalc li:last-child{padding-left:0}
  #colChart .colCalc .calc{margin-top:10px}
  #colChart .result{position:absolute;top:70px;left:0;right:0;padding:10px}
}
@media all and (max-width:425px) {
  #colChart .result{top:65px}
}



/* media screen - calc notice */
@media all and (max-width:580px) {
  #colChart .colCalc dl.note{width:calc(100% + 134px);margin-left:-134px}
}
@media all and (max-width:445px) {
  #colChart .colCalc dl.note{width:calc(100% + 90px);margin:90px 0 0 -90px}
  #colChart .colCalc dl.note + dl{margin-top:5px}
  #colChart .colCalc .note dd b{display:inline}
}
@media all and (max-width:425px) {
  #colChart .colCalc dl.note{margin:110px 0 0 -90px}
}