@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');
@font-face {
    font-family: 'ONE-Mobile-Title';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/ONE-Mobile-Title.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
  font-family: 'TmonMonsori';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/TmonMonsori.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
    /* font-family: 'NanumSquareNeoLight'; */
    font-family: 'NanumSquareNeo';
    font-weight: 300;
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-aLt.eot);
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-aLt.eot?#iefix) format("embedded-opentype"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-aLt.woff) format("woff"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-aLt.ttf) format("truetype");
}

@font-face {
    font-family: 'NanumSquareNeo';
    font-weight: 400;
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-bRg.eot);
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-bRg.eot?#iefix) format("embedded-opentype"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-bRg.woff) format("woff"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-bRg.ttf) format("truetype");
}

@font-face {
    /* font-family: 'NanumSquareNeoBold'; */
    font-family: 'NanumSquareNeo';    
    font-weight: 700;
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-cBd.eot);
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-cBd.eot?#iefix) format("embedded-opentype"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-cBd.woff) format("woff"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-cBd.ttf) format("truetype");
}

@font-face {
    /* font-family: 'NanumSquareNeoExtraBold'; */
    font-family: 'NanumSquareNeo';
    font-weight: 800;
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-dEb.eot);
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-dEb.eot?#iefix) format("embedded-opentype"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-dEb.woff) format("woff"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-dEb.ttf) format("truetype");
}

@font-face {
    /* font-family: 'NanumSquareNeoHeavy'; */
    font-family: 'NanumSquareNeo';
    font-weight: 900;
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-eHv.eot);
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-eHv.eot?#iefix) format("embedded-opentype"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-eHv.woff) format("woff"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-eHv.ttf) format("truetype");
}

@font-face {
    font-family: 'NanumSquareNeoVariable';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeo-Variable.eot);
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeo-Variable.eot?#iefix) format("embedded-opentype"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeo-Variable.woff) format("woff"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeo-Variable.ttf) format("truetype");
}
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200..900&display=swap');

* { 
	font-family: 'NanumSquareNeo','Pretendard','Montserrat','s-core-dream','Poppins','Noto Sans KR', 'Malgun Gothic', sans-serif;
}

/* Reset */
html,body{height:100%;/*line-height:18px;*/}
body,section,article,aside,nav,div,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select,a {
  margin:0;padding:0;box-sizing:border-box;
}

body, th, td, div, p, li, dt, dd, input, textarea, select, button, a, h1,h2,h3,h4,h5,h6, span,strong,em {
  color:#222; 
  font-family: 'NanumSquareNeo','Pretendard','Montserrat','s-core-dream','Poppins', sans-serif;
}
body {-webkit-text-size-adjust:none; font-size: 1.6rem; } /* 뷰표트 변환시 폰트크기 자동확대 방지 */

fieldset, img, area {border:0 none;vertical-align:top;}
ul, ol {list-style:none;}

hr {display:none;}
a:link, a:visited, a:active {color:#3c3c3b;text-decoration:none;box-sizing:border-box;}
a:hover {color:#3c3c3b;text-decoration:none;}

caption, th {text-align:left;font-weight:normal;}
legend, caption {overflow:hidden;left:0;top:-5000px;width:0;height:0;font-size:0;line-height:0;display:none;}

button,label{cursor:pointer;}
button {display:inline-block;border:0;vertical-align:top;}
/* button img{left:-3px;*left:auto} */
button * {position:relative;}
button span {z-index:-1;}
/* textarea{*margin:-1px 0;resize:none;} */
em,address{font-style:normal}

table {width:100%;}
table, table th, table td {border-collapse:collapse;border-spacing:0;}
table td a {text-decoration:underline;}

/*
a:active {outline:none;}
a {outline:none;}
a {selector-dummy: expression(this.hideFocus=true);}
*/
/* Common */
.cfx:after{display:block;clear:both;content:"";}
.cfx{zoom:1;overflow:hidden;}

.overh {overflow:hidden;clear:both;}
.clear{display:block; float:none; clear:both; height:0; width:100%; font-size:0 !important; line-height:0 !important; overflow:hidden; margin:0 !important; padding:0 !important;}
.blind {position:absolute;left:0;top:0;width:0;height:0;overflow:hidden;font-size:0;line-height:0;visibility:hidden;}

.vt {vertical-align:top;}
.vm {vertical-align:middle;}
.fl {float:left;}
.fr {float:right;}
.tl {text-align:left !important;}
.tr {text-align:right;}
.tc {text-align:center !important;}
.spacing {letter-spacing:normal !important;}

.bgn {background:0 !important;}

.hide {display:none;}
.show {display:block;}

/* placeholder */
input::placeholder {
  color: #b6b6b6;
}

input[type="text"], button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
		  outline: none;
}

input[type="text"]:hover,
input[type="text"]:focus {
  border-color: #007bff;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
  outline: none;
}

/* html { 
  height: 100%; overflow: hidden; overflow-y: auto; 
  font-size: 10px; 
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
  -webkit-box-sizing: border-box; 
  box-sizing: border-box; 
  -webkit-text-size-adjust: none; 
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none; 
} */

 * { box-sizing: border-box; }
*::after, *::before { box-sizing: border-box; }
html,body,h1,h2,h3,h4,h5,h6,div,p,blockquote,pre,code,address,ul,ol,li,menu,nav,section,article,aside,dl,dt,dd,table,thead,tbody,tfoot,label,caption,th,td,form,fieldset,legend,hr,input,button,textarea,object,figure,figcaption { padding: 0; margin: 0; }
html,body { width: 100%; }
html { height: 100%; overflow: hidden; overflow-y: auto; font-size: 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-text-size-adjust: none; -moz-text-size-adjust: none;-ms-text-size-adjust: none; }
body { min-width: 360px; width: 100%; background: #fff; word-break: keep-all; word-wrap: break-word; font-size: 1.6rem; line-height: 1; -webkit-text-size-adjust: none; }
body,input,select,textarea,button { border: none; font-family: 'SUIT', sans-serif; color: #222; }
ul,ol,li { list-style: none; }
table { width: 100%; border-spacing: 0; border-collapse: collapse; }
img,fieldset { max-width: 100%; height: auto; border: 0; vertical-align: top; }
address,cite,code,em,i { font-weight: normal; font-style: normal; }
label,img,input,select,textarea,button { vertical-align: middle; }
.hide,caption,legend { overflow: hidden; font-size: 1px; line-height: 0; }
hr { display: none; }
main,header,section,nav,footer,aside,article,figure { display: block; }
a { color: #222; text-decoration: none; }
label { display: inline-block; cursor: pointer; }
button,input[type="submit"] { cursor: pointer; }
button { background-color: transparent; }
sub,sup { position: relative; font-size: 75%; line-height: 0; }
 
.clear { clear: both; }
.clear::after { display: block; content: ""; clear: both; }

#skip { position: relative; z-index: 9999; }
#skip a { position: absolute; top: -40px; left: 0; width: 100%; padding: 5px 0; background-color: #00A287; font-size: 16px; color: #fff; line-height: 30px; text-align: center; transition: all 0.4s; }
#skip a:hover, #skip a:focus, #skip a:active { top: 0; text-decoration: none; }

.video {
  width: 100%;
  max-width: 1050px;
  margin: 30px auto;
  border-radius: 30px;
  padding: 30px 0px;
  /*
  background-color: #f0f0f0;
  box-sizing: border-box;
  box-shadow: 0px 8px 33px #999;
  */
}

.video-container {
  position: relative;
  width: 100%;
  height: auto;
  padding-top: 50%;
}


.video-container iframe {
  z-index: 1;
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 100%;
}


.area-btn {
    display: inline-block;
    margin: 5px 0;
    padding: .5em .75em;
    border-radius: 5px;
    box-sizing: content-box;
    -moz-box-sizing: content-box;
    background: transparent;
    outline: 0;
    vertical-align: middle;
    font-family: : inherit;
    font-size: 18px;
    text-decoration: none;
    white-space: nowrap;
    /*cursor: pointer;*/
}

/* 버튼 고정 사이즈 */
.area-btn.bigsmall {
	padding: 4px 12px;
	font-size: 11px;
	line-height: 15px;
	margin:0px 5px;
}

.area-btn.small {
	height: 25px;
	padding: 0 .75em;
	font-size: 11px;
	line-height: 25px;
}

.area-btn.middle {
	height: 33px;
	padding: 3px 20px;
	font-size: 12px;
	line-height: 26px;
	text-align:center;
	vertical-align:middle;
}

.area-btn.default {
	height: 35px;
	padding: 0 .75em;
	font-size: 12px;
	line-height: 35px;
}

.area-btn.large {
	height: 46px;
	padding: 0 1em;
	font-size: 14px;
	font-weight: 600;
	line-height: 46px;
}

.area-btn.big {
	width:94%;
	height: 86px;
	padding: 0 1em;
	font-size: 22px;
	font-weight: 600;
	line-height: 86px;
}

.area-btn.login {
	width:97px;
	height: 97px;
	padding: 0px 10px 0;
	font-size: 18px;
	font-weight: bold;

	line-height: 10px;
	font-family: "나눔고딕", "Nanum Gothic", "verdana" , sans-serif;
	position:relative !important;
	left:0; top:0;
}

/* 버튼 스타일 */
.area-btn.black,
.area-btn.black:link,
.area-btn.black:visited {
	color: #fff!important;
	border: 1px solid #353535;
	border-bottom-color: #353535;
	box-shadow: 0 2px 2px rgba(0,0,0,0.04);
	background: #1f1f1f;
	background: linear-gradient(to bottom, #000 40%, #1f1f1f 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000', endColorstr='#f6f6f6', GradientType=0 );/*IE*/
}

.area-btn.black:focus,
.area-btn.black:hover {
	background: #3f3f3f;
	background: linear-gradient(to bottom, #000 0%, #1f1f1f 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000', endColorstr='#ffffff', GradientType=0 );/*IE*/
}

.area-btn.black:active,
.area-btn.black.active {
	text-shadow: 0 1px 0px #fff;
	border-color: #2f2f2f;
	border-top-color: #000;
	background: #f4f4f4;
	box-shadow: none
}

.area-btn.gray,
.area-btn.gray:link,
.area-btn.gray:visited {
	color: #666!important;
	border: 1px solid #ebebeb;
	border-bottom-color: #c6c6c6;
	box-shadow: 0 2px 2px rgba(0,0,0,0.04);
	background: #dbdbdb;
	background: linear-gradient(to bottom, #ffffff 40%, #f6f6f6 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6', GradientType=0 );/*IE*/
}

.area-btn.gray:focus,
.area-btn.gray:hover {
	background: #d2d2d2;
	background: linear-gradient(to bottom, #fafafa 0%, #fff 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fafafa', endColorstr='#ffffff', GradientType=0 );/*IE*/
}

.area-btn.gray:active,
.area-btn.gray.active {
	text-shadow: 0 1px 0px #fff;
	border-color: #dfdfdf;
	border-top-color: #ddd;
	background: #f4f4f4;
	box-shadow: none
}


.area-btn.white,
.area-btn.white:link,
.area-btn.white:visited {
	color: #666!important;
	border: 1px solid #ebebeb;
	border-bottom-color: #c6c6c6;
	box-shadow: 0 2px 2px rgba(0,0,0,0.04);
	background: #fff;
	background: linear-gradient(to bottom, #ffffff 40%, #f6f6f6 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6', GradientType=0 );/*IE*/
}

.area-btn.white:focus,
.area-btn.white:hover {
	background: #f4f4f4;
	background: linear-gradient(to bottom, #fafafa 0%, #fff 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fafafa', endColorstr='#ffffff', GradientType=0 );/*IE*/
}

.area-btn.white:active,
.area-btn.white.active {
	text-shadow: 0 1px 0px #fff;
	border-color: #ebebeb;
	border-top-color: #ddd;
	background: #f4f4f4;
	box-shadow: none
}

.area-btn.blue,
.area-btn.blue:link,
.area-btn.blue:visited {
	color: #fff!important;
	text-shadow: 0 1px 0px #135fa4;
	border: 1px solid #135fa4;
	border-top-color: #2d9acf;
	box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.22);
	background: #3aaee7;
	background: linear-gradient(to bottom, #3aaee7 0%, #1a80d9 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3aaee7', endColorstr='#1a80d9', GradientType=0 );/*IE*/
}

.area-btn.blue:hover {
	background: #50bae9;
	background: linear-gradient(to bottom, #50bae9 0%, #3392de 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#50bae9', endColorstr='#3392de', GradientType=0 );/*IE*/
}

.area-btn.blue:active,
.area-btn.blue.active {
	border-color: #2585d9;
	border-top-color: #0f4678;
	background: #2d90e7;
	box-shadow: none
}

.area-btn.green,
.area-btn.green:link,
.area-btn.green:visited {
	color: #fff!important;
	text-shadow: 0 1px 0px #135fa4;
	border: 1px solid #368321;
	border-top-color: #439f2a;
	box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.22);
	background: #76ac41;
	background: linear-gradient(to bottom, #76ac41 0%, #489215 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#76ac41', endColorstr='#489215', GradientType=0 );/*IE*/
}

.area-btn.green:hover {
	background: #4c9b16;
	background: linear-gradient(to bottom, #7ab243 0%, #4c9b16 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7ab243', endColorstr='#4c9b16', GradientType=0 );/*IE*/
}

.area-btn.green:active,
.area-btn.green.active {
	border-color: #6c9d3c;
	border-top-color: #368321;
	background: #4c9b16;
	box-shadow: none;
	text-shadow: none;
}

.area-btn.yellow,
.area-btn.yellow:link,
.area-btn.yellow:visited {
	color: #000!important;
	text-shadow: 0 1px 0 #fcda7c;
	border: 1px solid #dfac23;
	border-bottom: 1px solid #c06f01;
	box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.10);
	background: #f5a802;
	background: linear-gradient(to bottom, #fcd054 0%, #f5a802 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcd054', endColorstr='#f5a802', GradientType=0 );/*IE*/
}

.area-btn.yellow:hover {
	background: #ffb618;
	background: linear-gradient(to bottom, #ffdc78 0%, #ffb618 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffdc78', endColorstr='ffb618', GradientType=0 );/*IE*/
}

.area-btn.yellow:active,
.area-btn.yellow.active {
	border-color: #efa80d;
	border-top-color: #cf8e00;
	background: #ffb618;
	box-shadow: none;
	text-shadow: none;
}

.area-btn.red,
.area-btn.red:link,
.area-btn.red:visited {
	color: #fff!important;
	text-shadow: 0 1px 0 #991e1a;
	border: 1px solid #991e1a;
	border-top: 1px solid #c06f01;
	box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.20);
	background: #b22520;
	background: linear-gradient(to bottom, #e8605a 0%, #b22520 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8605a', endColorstr='#b22520', GradientType=0 );/*IE*/
}

.area-btn.red:hover {
	background: #ca3631;
	background: linear-gradient(to bottom, #f17771 0%, #ca3631 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffdc78', endColorstr='ffb618', GradientType=0 );/*IE*/
}

.area-btn.red:active,
.area-btn.red.active {
	border-color: #a0211d;
	border-top-color: #7f1b17;
	background: #b22520;
	box-shadow: none;
	text-shadow: none;
}


.area-btn.orange,
.area-btn.orange:link,
.area-btn.orange:visited {
	color: #fff!important;
	text-shadow: 0 1px 0 #bb5e00;
	border: 1px solid #bb5e00;
	border-top: 1px solid #e37200;
	box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.20);
	background: #ea7500;
	background: linear-gradient(to bottom, #ff8000 0%, #e37200 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff8000', endColorstr='#e37200', GradientType=0 );/*IE*/
}

.area-btn.orange:hover {
	background: #df7000;
	background: linear-gradient(to bottom, #f17771 0%, #df7000 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffdc78', endColorstr='e37200', GradientType=0 );/*IE*/
}

.area-btn.orange:active,
.area-btn.orange.active {
	border-color: #d06800;
	border-top-color: #994d00;
	background: #e37200;
	box-shadow: none;
	text-shadow: none;
}

.area-btn.k-plate,
.area-btn.k-plate:link,
.area-btn.k-plate:visited {
	color: #666!important;
	border: 1px solid #c3c3c3;
	border-top-color: #d9d9d9;
	box-shadow: 0 1px 1px rgba(0, 0, 0, .1), inset -1px -1px 0 #fff;
	background: #fff;
	background: linear-gradient(to bottom, #fdfdfd 0%, #f8f8f8 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdfdfd', endColorstr='#f8f8f8', GradientType=0 );
}

.area-btn.k-plate:focus,
.area-btn.k-plate:hover {
	background: #f4f4f4;
	background: linear-gradient(to bottom, #fafafa 0%, #fff 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fafafa', endColorstr='#ffffff', GradientType=0 );/*IE*/
}

.area-btn.k-plate:active,
.area-btn.k-plate.active {
	text-shadow: 0 1px 0px #fff;
	border-color: #ebebeb;
	border-top-color: #ddd;
	background: #f4f4f4;
	box-shadow: none
}

.area-btn.soap,
.area-btn.soap:link,
.area-btn.soap:visited {
	padding: .45em .75em .75em .75em;
	color:#888!important;
	text-shadow:0 1px 0 #fafafa;
	border-style: solid;
	border-width: 1px;
	border-top-color: #f2f2f2;
	border-left-color: #dfdfdf;
	border-right-color: #dfdfdf;
	border-bottom-color: #ccc;
	box-shadow:
	0 .2em .3em rgba(0,0,0,.1),
	inset 0 -0.3em 0 #ddd,
	inset 0 -0.33em 0 #f1f1f1;
	background: #e9e9e9;
	background: linear-gradient(to bottom, #fafafa 0%, #e9e9e9 80%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#fafafa, endColorstr=#e9e9e9);
}

.area-btn.soap.small {
	height: 25px;
	padding: 0 .75em;
	font-size: 11px;
	line-height: 22px;
}

.area-btn.soap.default {
	height: 35px;
	padding: 0 .75em;
	font-size: 12px;
	line-height: 32px;
}

.area-btn.soap.large {
	height: 46px;
	padding: 0 1em;
	font-size: 18px;
	font-weight: 600;
	line-height: 42px;
}

.area-btn.soap.big {
	height: 86px;
	padding: 0 1em;
	font-size: 18px;
	font-weight: 600;
	line-height: 82px;
}

.en-01 { font-family: verdana, Helvetica, Arial, sans-serif; }
.kr-01 { font-family: "나눔고딕", "NotoSansKR Regular", sans-serif !important; font-weight:700; }


.input {border-radius: 10px;height:35px;margin:3px 0px;font-family: "나눔고딕", "Nanum Gothic", sans-serif;padding-left:10px;font-weight:300; vertical-align:middle;border:1px solid #d2d2d2;}
.input2 {height:22px;width:20%;font-size:1.0em; font-family: "나눔고딕", "Nanum Gothic", sans-serif;padding-left:5px;font-weight:bold; border:1px solid #d2d2d2;}
.input3 {height:25px;font-size:0.9em; font-family: "나눔고딕", "Nanum Gothic", sans-serif;padding-left:5px;font-weight:bold; border:1px solid #d2d2d2;}
.input4 {height:25px;width:50%;font-size:1.0em; font-family: "나눔고딕", "Nanum Gothic", sans-serif;padding-left:5px;font-weight:bold;}
.input5 {height:25px;width:100px;font-size:1.0em; font-family: "나눔고딕", "Nanum Gothic", sans-serif;padding-left:5px;font-weight:bold;}

/* with */
.w10p { width:10%;}
.w20p { width:20%;}
.w30p { width:30%;}
.w40p { width:40%;}
.w50p { width:50%;}
.w60p { width:60%;}
.w70p { width:70%;}
.w80p { width:80%;}
.w90p { width:90%;}
.w95p { width:95%;}
.w100p { width:100%;}

.w10 { width:10px;}
.w20 { width:20px;}
.w30 { width:30px;}
.w40 { width:40px;}
.w50 { width:50px;}
.w60 { width:60px;}
.w70 { width:70px;}
.w80 { width:80px;}
.w90 { width:90px;}
.w100 { width:100px;}
.w120 { width:120px;}
.w140 { width:140px;}
.w150 { width:150px;}
.w160 { width:160px;}
.w170 { width:170px;}
.w180 { width:180px;}
.w200 { width:200px;}
.w210 { width:210px;}
.w220 { width:220px;}
.w240 { width:240px;}
.w250 { width:250px;}
.w260 { width:260px;}
.w270 { width:270px;}
.w280 { width:280px;}
.w300 { width:300px;}
.w400 { width:400px;}

.h24 {height:24px;}
.h26 {height:26px;}
.h30 {height:30px;}
.h34 {height:34px;}
.h35 {height:35px;}
.h36 {height:36px;}
.h37 {height:37px;}
.h38 {height:38px;}
.h40 {height:40px;}
.h50 {height:50px;}
.h100 {height:100px;}
.h200 {height:200px;}