@charset "utf-8";

/* Open Sans */
@import url("http://fonts.googleapis.com/css?family=Open+Sans:400,300,700");

/* NanumBarunGothic */
@font-face{
 font-family:'NanumBarunGothic';
 src:url(/color/iframe/new/font/NanumBarunGothicWeb.eot);
 src:url(/color/iframe/new/font/NanumBarunGothicWeb.eot?#iefix) format('embedded-opentype'),
      url(/color/iframe/new/font/NanumBarunGothicWeb.woff) format('woff'),
      url(/color/iframe/new/font/NanumBarunGothicWeb.ttf) format('truetype');
}
@font-face{
 font-family:'NanumBareunGothicLight';
 src:url(/color/iframe/new/font/NanumBarunGothicWebLight.eot);
 src:url(/color/iframe/new/font/NanumBarunGothicWebLight.eot?#iefix) format('embedded-opentype'),
      url(/color/iframe/new/font/NanumBarunGothicWebLight.woff) format('woff'),
      url(/color/iframe/new/font/NanumBarunGothicWebLight.ttf) format('truetype');
}
@font-face{
 font-family:'NanumBarunGothicBold';
 src:url(/color/iframe/new/font/NanumBarunGothicWebBold.eot);
 src:url(/color/iframe/new/font/NanumBarunGothicWebBold.eot?#iefix) format('embedded-opentype'),
      url(/color/iframe/new/font/NanumBarunGothicWebBold.woff) format('woff'),
      url(/color/iframe/new/font/NanumBarunGothicWebBold.ttf) format('truetype');
}

/* NanumSquare */
@font-face{
 font-family:'NanumSquare';
 src:url(/color/iframe/new/font/NanumSquareR.eot);
 src:url(/color/iframe/new/font/NanumSquareR.eot?#iefix) format('embedded-opentype'),
      url(/color/iframe/new/font/NanumSquareR.woff) format('woff'),
      url(/color/iframe/new/font/NanumSquareR.ttf) format('truetype');
}
@font-face{
 font-family:'NanumSquare Light';
 src:url(/color/iframe/new/font/NanumSquareL.eot);
 src:url(/color/iframe/new/font/NanumSquareL.eot?#iefix) format('embedded-opentype'),
      url(/color/iframe/new/font/NanumSquareL.woff) format('woff'),
      url(/color/iframe/new/font/NanumSquareL.ttf) format('truetype');
}
@font-face{
 font-family:'NanumSquareBold';
 src:url(/color/iframe/new/font/NanumSquareB.eot);
 src:url(/color/iframe/new/font/NanumSquareB.eot?#iefix) format('embedded-opentype'),
      url(/color/iframe/new/font/NanumSquareB.woff) format('woff'),
      url(/color/iframe/new/font/NanumSquareB.ttf) format('truetype');
}
@font-face{
 font-family:'NanumSquare ExtraBold';
 src:url(/color/iframe/new/font/NanumSquareEB.eot);
 src:url(/color/iframe/new/font/NanumSquareEB.eot?#iefix) format('embedded-opentype'),
      url(/color/iframe/new/font/NanumSquareEB.woff) format('woff'),
      url(/color/iframe/new/font/NanumSquareEB.ttf) format('truetype');
}


/* bagic */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,
address, big, cite, code, del, dfn, em, font, img, ins,
q, s, samp, small, strike, strong, sub, sup, tt, var, b,
u, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td
{margin:0;padding:0;border:none 0}
body{width:100%;height:100%;background-color:#fff}
body, h1, h2, h3, h4, h5, dl, dt, dd, th, td, div, p, li,
form, fieldset, select, legend, input, label, textarea
{font-family:'NanumSquare';font-size:14px;letter-spacing:-0.7px;color:#333}
h1, h2, h3, h4, h5, h6{}
img, fieldset, iframe{border:0 none}
table, div{border-collapse:collapse}
select, textarea{border:1px solid #e2e2e2;background:#fff;vertical-align:middle}
textarea{overflow:auto}
select, input, img, li{vertical-align:middle;text-align:left}
address, caption, cite, code, dfn, em, th, var{font-style:normal}
ul, li, ol{list-style-type:none}
legend,  caption{display:none}
hr{border-collapse:collapse;display:none}
section, nav, article, aside, hgroup, header, footer{display:block}
a{color:inherit}
a:link,a:visited{text-decoration:none;color:inherit}
a:hover{text-decoration:none;cursor:pointer}
b,strong,em,i{font-style:normal}
input{height:35px;padding:0 10px;border:1px solid #e2e2e2;vertical-align:middle}
ul,li,h2,h3,a,div,input,span,b{font-weight:normal;box-sizing:border-box}

.mt0{margin-top:0px !important}
.mr20{margin-right:20px !important}

/* color chart */
body > #icolorchart{display:block;width:100%;overflow:auto}
body > #icolorchart > li{padding:0}
#icolorchart h3{position:relative;display:block;width:100%;margin:25px 0 10px;padding-top:14px;font-size:18px;font-family:'NanumSquareBold';background:url(/color/iframe/new/images/img_03.jpg) no-repeat top left}
#icolorchart h3 > b{color:#65b330}
#icolorchart h3 > span{position:absolute;top:0;right:0;font-size:12px;font-family:'NanumSquare';color:#777}
#icolorchart h3 > a{position:absolute;top:7px;right:0}

#icolorchart ul.tab{display:block;width:100%}
#icolorchart ul.tab::after{content:'';display:block;clear:both}
#icolorchart ul.tab li{position:relative;width:calc(100% / 4 - 1px);height:35px;float:left;margin-right:1px}
#icolorchart ul.tab.fifth li{position:relative;width:calc(100% / 5 - 1px)}
#icolorchart ul.tab li a{display:block;position:absolute;bottom:1px;width:100%;height:35px;line-height:35px;border-radius:10px 10px 0 0;font-family:'Open Sans', 'Verdana', 'NanumSquare';color:#777;letter-spacing:0;background:#f7f7f7;text-align:center;}
#icolorchart ul.tab li a span{font-size:12px;}
#icolorchart ul.tab li.on a{bottom:0;border-radius:10px 10px 0 0;color:#fff;background:#65b330}

#icolorchart #color_content{width:100%;margin-top:-1px;padding:2px;border:1px solid #e2e2e2}
#icolorchart .list_wrap{width:100%;height:260px;overflow-y:auto}
#icolorchart .list_wrap.h230{height:230px}
#icolorchart .list_wrap::after{content:'';display:block;clear:both}
#icolorchart .chip_list{float:left;margin-right:1px}
#icolorchart .chip_list a{display:block;width:35px;height:35px;margin-bottom:1px}

#icolorchart .search{display:table;width:100%;border:1px solid #e2e2e2}
#icolorchart .search li{display:table-cell}
#icolorchart .search li:last-child{width:420px;padding:14px 22px 7px;vertical-align:middle}
@media all and (max-width:1020px) {#icolorchart .search li:last-child{width:40%}}

#icolorchart .search li > div{width:100%}
#icolorchart .search input{float:left;width:calc(100% - 90px)}
#icolorchart .search .btn_search{float:right;display:block;width:90px;height:35px;line-height:35px;font-family:'NanumSquareBold';letter-spacing:0.3px;color:#fff;background:#65b330;text-align:center}
#icolorchart .search div.group{padding:20px 22px 14px}
#icolorchart .search div.input{margin-bottom:7px}
#icolorchart .search div.input::after{content:'';display:block;clear:both}
#icolorchart .colorView{background:#f7f7f7;text-align:center;vertical-align:top}
#icolorchart .colorView span{display:inline-block;margin-top:10px;font-family:'Open Sans', 'Verdana', 'NanumSquare', 'Verdana', 'NanumSquare';font-size:13px;line-height:15px}
#icolorchart .colorView span b,#icolorchart .colorView span strong{display:block;font-weight:normal}

#icolorchart .color_chip{position:relative;width:100%;height:70px;border:1px solid #e2e2e2}
#icolorchart .color_chip p{position:absolute;right:0;bottom:0;width:100px;height:50px;opacity:0.2}
#icolorchart .color_chip p.noroo{background:url(/color/iframe/new/images/logo_01_w.png) no-repeat center}
#icolorchart .color_chip p.pantone{background:url(/color/iframe/new/images/logo_02_w.png) no-repeat center}
#icolorchart .color_chip p.dulux{background:url(/color/iframe/new/images/logo_03_w.png) no-repeat center}

#icolorchart .guide dl{display:block}
#icolorchart .guide dl + dl{margin-top:3px}
#icolorchart .guide dt{display:inline-block;padding:3px 20px 3px 10px;font-size:12px;color:#eee;background:url(/color/iframe/new/images/img_02.png) no-repeat center right;background-size:auto 100%;}
#icolorchart .guide dd{display:inline-block;padding:3px 20px 3px 0;font-size:12px;color:#777;background:#f7f7f7}
#icolorchart .guide dd b{font-size:13px;color:#333}

#icolorchart .select_color{display:block;width:100%}
#icolorchart .select_color::after{content:'';display:block;clear:both}
#icolorchart .select_color li{position:relative;display:block;width:calc(100% / 5 - 16px);float:left;margin-left:20px;text-align:center;vertical-align:top}
#icolorchart .select_color li:first-child{margin-left:0}
#icolorchart .select_color .color{width:100%;height:70px;border:1px solid #e2e2e2;cursor:pointer}
#icolorchart .select_color li #recent_close{position:absolute;top:3px;right:7px;display:block;width:20px;height:20px;background:url(/color/iframe/new/images/icon_x_01.png) no-repeat center;background-size:10px}
#icolorchart .select_color span{display:inline-block;margin-top:7px;font-family:'Open Sans', 'Verdana', 'NanumSquare', 'Verdana', 'NanumSquare';font-size:12px;line-height:14px;color:#555}
#icolorchart .select_color span b,#icolorchart .select_color span strong{display:block;font-weight:normal}

#icolorchart .calc{display:table;width:100%}
#icolorchart .calc li{display:table-cell}
#icolorchart .calc li:last-child{width:calc(100% - 155px)}
#icolorchart .calc .img{width:155px;height:128px;background:url(/color/iframe/new/images/img_01_w.jpg) no-repeat top center}
#icolorchart .calc div{text-align:center}
#icolorchart .calc li b{display:inline-block;margin:0 10px;color:#aaa}
#icolorchart .calc input{width:100px;margin:0 5px;font-family:'Open Sans', 'Verdana', 'NanumSquare';font-size:14px;text-align:right}
#icolorchart .calc .sum_btn{display:inline-block;height:35px;line-height:35px;margin-left:20px;padding:0 22px;font-family:'NanumSquareBold';color:#fff;background:#555;vertical-align:middle}
#icolorchart .calc .result{display:block;margin:10px 0;color:#65b330}
#icolorchart .calc .result span{display:inline-block;min-width:30%;;height:35px;line-height:35px;margin:0 5px;padding:0 15px;font-family:'Open Sans', 'Verdana', 'NanumSquare';letter-spacing:0;color:#333;background:#f7f7f7;text-align:center;vertical-align:middle}
#icolorchart .calc .result b{margin:0;font-family:'Open Sans', 'Verdana', 'NanumSquare';letter-spacing:0}

#icolorchart span.info{font-family:'Open Sans', 'Verdana', 'NanumSquare';font-size:13px;color:#d73e5a;display:inline-block;padding:3px 10px;border:1px solid #e2e2e2;letter-spacing:0}
#icolorchart .notice{display:block}
#icolorchart .notice span{display:block;width:100%;min-width:400px;font-size:12px;line-height:14px;color:#aaa}
#icolorchart .notice span + span{margin-top:4px}
#icolorchart .calc .notice{padding:0 20px}
#icolorchart .calc .notice span{text-align:left}
#icolorchart .group .notice{margin-top:10px}