@charset "utf-8";

@import url(https://cdn.rawgit.com/openhiun/hangul/14c0f6faa2941116bb53001d6a7dcd5e82300c3f/nanumbarungothic.css);

/***-------- 초기화 --------***/

html {}
body { margin:0;padding:0;font-size:0.75em;font-family:'Nanum Barun Gothic', sans-serif; }
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0}
h1, h2, h3, h4, h5, h6 {font-family:'Nanum Barun Gothic', sans-serif;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}
#hd ul, nav ul, #ft ul {margin:0;padding:0;list-style:none}
legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
label, input, button, select, img {vertical-align:middle}
input, button {margin:0;padding:0;font-family:'Nanum Barun Gothic', sans-serif; font-size:1em}
button {cursor:pointer}
textarea, select {font-family:'Nanum Barun Gothic', sans-serif; font-size:1em}
select {margin:0}
p {margin:0;padding:0;word-break:break-all}
hr {display:none}
/*pre {overflow-x:scroll;font-size:1.1em}*/
a:link, a:visited {color:#000;text-decoration:none}
a:hover, a:focus, a:active {color:crimson;text-decoration:none}


********SIMPLE  PADDING, MARGIN *****/

.pT0 { padding-top:0px !important; }
.pT1 { padding-top:1px !important; }
.pT2 { padding-top:2px !important; }
.pT3 { padding-top:3px !important; }
.pT4 { padding-top:4px !important; }
.pT5 { padding-top:5px !important; }
.pT6 { padding-top:6px !important; }
.pT7 { padding-top:7px !important; }
.pT8 { padding-top:8px !important; }
.pT9 { padding-top:9px !important; }
.pT10 { padding-top:10px !important; }
.pT15 { padding-top:15px !important; }
.pT20 { padding-top:20px !important; }
.pT25 { padding-top:25px !important; }
.pT30 { padding-top:30px !important; }
.pT40 { padding-top:40px !important; }
.pB0 { padding-bottom:0px !important; }
.pB1 { padding-bottom:1px !important; }
.pB2 { padding-bottom:2px !important; }
.pB3 { padding-bottom:3px !important; }
.pB4 { padding-bottom:4px !important; }
.pB5 { padding-bottom:5px !important; }
.pB6 { padding-bottom:6px !important; }
.pB7 { padding-bottom:7px !important; }
.pB8 { padding-bottom:8px !important; }
.pB9 { padding-bottom:9px !important; }
.pB10 { padding-bottom:10px !important; }
.pB15 { padding-bottom:15px !important; }
.pB20 { padding-bottom:20px !important; }
.pB25 { padding-bottom:25px !important; }
.pB30 { padding-bottom:30px !important; }
.pL0 { padding-left:0px !important; }
.pL1 { padding-left:1px !important; }
.pL2 { padding-left:2px !important; }
.pL3 { padding-left:3px !important; }
.pL4 { padding-left:4px !important; }
.pL5 { padding-left:5px !important; }
.pL6 { padding-left:6px !important; }
.pL7 { padding-left:7px !important; }
.pL8 { padding-left:8px !important; }
.pL9 { padding-left:9px !important; }
.pL10 { padding-left:10px !important; }
.pL15 { padding-left:15px !important; }
.pL20 { padding-left:20px !important; }
.pL25 { padding-left:25px !important; }
.pL30 { padding-left:30px !important; }
.pL40 { padding-left:40px !important; }
.pL50 { padding-left:50px !important; }
.pR0 { padding-right:0px !important; }
.pR1 { padding-right:1px !important; }
.pR2 { padding-right:2px !important; }
.pR3 { padding-right:3px !important; }
.pR4 { padding-right:4px !important; }
.pR5 { padding-right:5px !important; }
.pR6 { padding-right:6px !important; }
.pR7 { padding-right:7px !important; }
.pR8 { padding-right:8px !important; }
.pR9 { padding-right:9px !important; }
.pR10 { padding-right:10px !important; }
.pR15 { padding-right:15px !important; }
.pR20 { padding-right:20px !important; }
.pR25 { padding-right:25px !important; }
.pR30 { padding-right:30px !important; }
.pR40 { padding-right:40px !important; }
.pR50 { padding-right:50px !important; }

.mT0 { margin-top:0px !important; }
.mT1 { margin-top:1px !important; }
.mT2 { margin-top:2px !important; }
.mT3 { margin-top:3px !important; }
.mT4 { margin-top:4px !important; }
.mT5 { margin-top:5px !important; }
.mT6 { margin-top:6px !important; }
.mT7 { margin-top:7px !important; }
.mT8 { margin-top:8px !important; }
.mT9 { margin-top:9px !important; }
.mT10 { margin-top:10px !important; }
.mT12 { margin-top:12px !important; }
.mT15 { margin-top:15px !important; }
.mT20 { margin-top:20px !important; }
.mT23 { margin-top:23px !important; }
.mT25 { margin-top:25px !important; }
.mT30 { margin-top:30px !important; }
.mT35 { margin-top:35px !important; }
.mT40 { margin-top:40px !important; }
.mT50 { margin-top:50px !important; }
.mT65 { margin-top:65px !important; }
.mT70 { margin-top:70px !important; }
.mT100 { margin-top:100px !important; }
.mT150 { margin-top:150px !important; }
.mT200 { margin-top:200px !important; }
.mT250 { margin-top:250px !important; }
.mB0 { margin-bottom:0px !important; }
.mB1 { margin-bottom:1px !important; }
.mB2 { margin-bottom:2px !important; }
.mB3 { margin-bottom:3px !important; }
.mB4 { margin-bottom:4px !important; }
.mB5 { margin-bottom:5px !important; }
.mB6 { margin-bottom:6px !important; }
.mB7 { margin-bottom:7px !important; }
.mB8 { margin-bottom:8px !important; }
.mB9 { margin-bottom:9px !important; }
.mB10 { margin-bottom:10px !important; }
.mB15 { margin-bottom:15px !important; }
.mB20 { margin-bottom:20px !important; }
.mB23 { margin-bottom:23px !important; }
.mB25 { margin-bottom:25px !important; }
.mB30 { margin-bottom:30px !important; }
.mB35 { margin-bottom:35px !important; }
.mB40 { margin-bottom:40px !important; }
.mB45 { margin-bottom:45px !important; }
.mB50 { margin-bottom:50px !important; }
.mB60 { margin-bottom:60px !important; }
.mLm1 { margin-left:-1px !important; }
.mLm5 { margin-left:-5px !important; }
.mL0 { margin-left:0px !important; }
.mL1 { margin-left:1px !important; }
.mL2 { margin-left:2px !important; }
.mL3 { margin-left:3px !important; }
.mL4 { margin-left:4px !important; }
.mL5 { margin-left:5px !important; }
.mL6 { margin-left:6px !important; }
.mL7 { margin-left:7px !important; }
.mL8 { margin-left:8px !important; }
.mL9 { margin-left:9px !important; }
.mL10 { margin-left:10px !important; }
.mL15 { margin-left:15px !important; }
.mL18 { margin-left:18px !important; }
.mL20 { margin-left:20px !important; }
.mL25 { margin-left:25px !important; }
.mL30 { margin-left:30px !important; }
.mL35 { margin-left:35px !important; }
.mL40 { margin-left:40px !important; }
.mL50 { margin-left:50px !important; }
.mL60 { margin-left:60px !important; }
.mL194 { margin-left:194px !important; }
.mR0 { margin-right:0px !important; }
.mR1 { margin-right:1px !important; }
.mR2 { margin-right:2px !important; }
.mR3 { margin-right:3px !important; }
.mR4 { margin-right:4px !important; }
.mR5 { margin-right:5px !important; }
.mR6 { margin-right:6px !important; }
.mR7 { margin-right:7px !important; }
.mR8 { margin-right:8px !important; }
.mR9 { margin-right:9px !important; }
.mR10 { margin-right:10px !important; }
.mR15 { margin-right:15px !important; }
.mR20 { margin-right:20px !important; }
.mR25 { margin-right:25px !important; }
.mR30 { margin-right:30px !important; }

.w20 { width: 20%; display: inline-block;}
.w100 { width: 100%;}
.h100 { height: 100%;}

/*color*/
.white {color: #fff !important;}
.red {color: #f00 !important;}
.gray {color: #888 !important;}
.yellow {color: #ffcc00 !important;}
.point {color: #005884 !important; }
.green {color: #00ad34 !important;}
.dark_gray {color: #333 !important;} 
.sky {color: #33adff !important;} 
.orange {color: #ff3300 !important;}
.sitecolor {color: #006B8F !important;}

/*font size*/
.fs10 {font-size: 10px;} 
.fs12 {font-size: 12px;}
.fs13 {font-size: 13px;}
.fs14 {font-size: 14px;}
.fs15 {font-size: 15px;} 
.fs16 {font-size: 16px;} 
.fs18 {font-size: 18px;}
.fs20 {font-size: 20px;}
.fs22 {font-size: 22px;}
.fs24 {font-size: 24px;}
.fs25 {font-size: 25px;}
.fs28 {font-size: 28px;}
.fs30 {font-size: 30px;}
.fs32 {font-size: 32px;}
.fs40 {font-size: 40px;} 

/** font Weight **/
.bold400 { font-weight: 400; }
.bold500 { font-weight: 500; }
.bold600 { font-weight: 600; }
.bold700 { font-weight: 700; }
.bold800 { font-weight: 800; }
.bold900 { font-weight: 900; }


.wcenter { text-align: center; }
.strong-underline { border-bottom:3px solid #555; text-align: left; }

.lefttop-box { border:1px solid #007399; text-align: center; padding: 25px 0; background: #fff; 
               font-size: 20px; color: #007399; font-weight:600; }
.cscall-box { border:1px solid #dfdfdf; color: #3c1e1e; background-color:#fafafa; padding: 10px; 
              margin-top: 30px; text-align: center; } 
.kk-box { border:1px solid #fae100; color: #3c1e1e; background-color:#fae100; } 
.kk-box .kk-id { display:inline-block; border:1px solid #fff; color: #222; background-color:#fff; 
                 text-align: center; border-radius: 10px; height: 26px; width: 170px; 
                 vertical-align: middle; } 

.add-box { border:1px solid #dedede; color: #333; background:#f2f2f2; padding: 0px;  text-align: left; }
.totalprice-box { color: #333; background:#fff; padding: 4px 20px; text-align: right; }

.sub_left ul { padding-left: 0;}
.sub_left ul li { list-style: none; border-bottom: 1px solid #EEEEEE; font-size: 13px; padding: 5px 0;} 

.form-control option { padding: 5px; }

.badge-mono { min-width: 10px; padding:3px 7px; border-radius:10px; vertical-align: middle; background-color: #222; color: #fff; }
.badge-point { min-width: 10px; padding:3px 7px; border-radius:10px; vertical-align: middle; background-color: #007ea8; color: #fff; }

.btn-mono { color: #222; background-color: #eee; border:1px solid #aaa; padding: 20px 50px; 
            font-size: 17px; font-weight: 700; border-radius: 2px;  }
.btn-mono:focus { color: #333; background-color: #ddd; border-color: #bbb; }
.btn-mono:hover { color: #333; background-color: #ddd; border-color: #bbb; }

.btn-point { color: #fff; background-color: #007ea8; border:1px solid #007399; padding: 20px 50px; 
             font-size: 17px; font-weight: 700; border-radius: 2px; }
.btn-point:focus { color: #fff; background-color: #0092c2; border-color: #007399; }
.btn-point:hover { color: #fff; background-color: #0092c2; border-color: #007399; }

.btn-add { color: #222; background-color: #dfdfdf; border:1px solid #aaa; padding: 10px;
            font-size: 15px; font-weight: 500; border-radius: 2px;  }
.btn-add:focus { color: #cc0000; background-color: #eee; border-color: #bbb; }
.btn-add:hover { color: #cc0000; background-color: #eee; border-color: #bbb; }

.r-icon { background:#eee; color:#333; border:1px solid #aaa; border-radius:3px; }
.r-icon:focus, .r-icon:hover { background:#ddd; color:#333; border:1px solid #555; border-radius:3px; }


/******************* INP Numer Style *******************/
.cnt-inp { border: 1px solid #ccc; display: inline-flex; }
.cnt-inp, .cnt-inp * { box-sizing: border-box; }
.cnt-inp button {
  outline:none; -webkit-appearance: none; background-color: #fff; border: none; align-items: center;
  justify-content: center; width: 25px; height: 30px; cursor: pointer; margin: 0; position: relative;
}
.cnt-inp button:before, .cnt-inp button:after {
  display: inline-block; position: absolute; content: '';
  width: 10px; height: 1.5px; background-color: #555; transform: translate(-50%, -50%);
}
.cnt-inp button.plus:after { transform: translate(-50%, -50%) rotate(90deg); }
.cnt-inp input[type=text] {
  width: 30px; border: solid #ccc; border-width: 0 1px;
  font-size: 15px; height: 30px; font-weight: 400; text-align: center;
}
/*********************/