button, .button { cursor: pointer; border: 0px solid #000; border-radius: 3px; padding: 7px 10px;  }
button:hover, .button:hover { transition: all 0.3s; background-color: #000; color: #fff; }
button:active, .button:active { background-color: #777; color: #fff; }

button.flat, .button.flat { box-shadow: 0px 0px 0px; }
button.shadow, .button.shadow { box-shadow: 0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2); }
button.icon, .button_icon { display: inline-block; border-radius: 50%; width: 34px; height: 34px; box-sizing: border-box; padding: 5px 5px;  }
button.mini { padding: 0px 5px 1px 5px; border-radius: 3px; }
button.round { border-radius: 13px; }
button[disabled] { background-color: rgba(0,0,0,.2) !important; color: #fff !important;}

h1 { font-size: 1.6rem; font-weight: 700; }
h2 { font-size: 1.4rem; font-weight: 700; }
h3 { font-size: 1.2rem; font-weight: 700; }
h4 { font-size: 1.1rem; font-weight: 700; }
h5 { font-size: 1.0rem; font-weight: 700; }
h6 { font-size: 0.9rem; font-weight: 700; margin: 0px; }

table.basic { width: 100%; }
table.basic th { border-bottom: 1px solid #000; font-size: .8rem; padding: 5px; }
table.basic td { border-bottom: 1px dotted #aaa; font-size: .9rem; padding: 10px; }

.ta_center { text-align: center; }
.ta_left { text-align: left; }
.ta_right { text-align: right; }

/* 편집 폼 */
form.basic { display: block; margin: 10px;}

form.basic input[type=text],form.basic input[type=password] { border: 1px solid #ccc; border-radius: 0px; padding: 2px 7px;}
form.basic input[type=text]:focus ,form.basic input[type=password]:focus ,form.basic textarea:focus,textarea:focus,form.basic select:focus { box-shadow: 0px 0px 1px rgba(0,10,250,.0); outline:none; border-color: #a64cff; color: #37a; }

form.basic select { border: 1px solid #ccc; padding: 2px 5px 2px 5px; border-radius: 4px; }
form.basic textarea { border: 1px solid #ccc; border-radius: 4px; padding: 3px 7px; vertical-align: top; }

form.basic input[type=radio],form.basic input[type=checkbox] { vertical-align: text-bottom !important; margin-top: 6px; }
form.basic td>label { padding-right: 10px; }

form.basic input[type='button'], form.basic input[type='submit']
{ border-radius: 2px; padding: 10px 15px; border: 0px solid #000; min-width: 80px; box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12); cursor: pointer; }

form.basic input[type='button']:focus, form.basic input[type='submit']:focus { outline:none; }

form.basic input[type='button']:hover, form.basic input[type='submit']:hover { background-color: #555; }
form.basic input[type='button']:active, form.basic input[type='submit']:active { background-color: #000; box-shadow: 1px 1px 3px rgba(0,0,0,0.7);  }

form.basic ul { clear: both; background-color: #eee; overflow: auto; padding: 0px; border-top: 1px solid #eee; border-left: 1px solid #eee; box-sizing: border-box;}
form.basic li { float: left; width: 100%; display: block; box-sizing: border-box; vertical-align: top; margin-bottom: 1px; background-color: #fff; border-right: 1px solid #eee; min-height: 46px; padding: 10px 0px; } 
form.basic li.col2 { width: 50%; } 
form.basic li.col3 { width: 33.3%; } 
form.basic li.col4 { width: 25%; } 
form.basic li>label:first-child { display: inline-block; width: 70px; text-align: right; padding: 0px 10px 0px 0px; color: #006cd9; border-right: 1px dotted #ccc; margin-right: 10px;} 
form.basic li>label:first-child b { color: #d90000; font-weight: normal; margin-right: 10px; }
form.basic li>label { font-weight: normal; margin-right: 10px; }
form.basic li>span { font-weight: normal; padding-left: 10px; color: #999999; }/* 아이콘 */

/* form class style */
:root{
	--color_formline : #ccc;
}
	
.htmleditor button { box-shadow: 0px 0px 0px; }

form.normal { 
	--name-font-size: 0.8rem;
	--value-font-size: 0.9rem;
	--guide-font-size: 0.9rem;
	--line-height : 55px;
	--data-bg-active-color : #eaf5ff;
	--min-label-width : 80px;
	--focus-bg : rgba(190,220,255,.2)
 }
 
form.normal div.form_line p { float: left; border-width: 0px 0px 0px 1px !important; border-style: dotted; border-color: var(--color_formline); font-size: var(--value-font-size); width: calc(100% - var(--min-label-width)); padding: 10px; border-right: 1px solid var(--color_formline);  }
form.normal div.form_line p:last-child { border-right: 0px solid var(--color_formline); }
 
form.normal div.form_line { clear: both; overflow: auto; border-bottom: 1px solid var(--color_formline); }
form.normal div.form_hidden { display: none; }

form.normal .half { width: calc(50% - var(--min-label-width)) !important; }

form.normal div.form_line:last-child { border-bottom: 0px solid #F00; }
form.normal div.form_line label.el { float: left; width: var(--min-label-width); padding: 10px 10px 5px 5px; text-align: right; font-size: var(--name-font-size); color: #999; }

form.normal div.form_line input[type=text], form.normal div.form_line textarea, form.normal div.form_el,form.normal div.form_line select { float: left; border-width: 0px 0px 0px 1px; border-style: dotted; border-color: var(--color_formline); font-size: var(--value-font-size); }

form.normal div.form_el { float: left; width: calc(100% - var(--min-label-width)); padding: 15px 10px; border-right: 1px solid #000; }
form.normal div.form_el:last-child { border-right: 0px solid var(--color_formline); }
form.normal div.form_el label{ padding-right: 10px; }

form.normal div.form_line p.value { float: left; width: calc(100% - var(--min-label-width)); padding: 10px; border-right: 1px solid var(--color_formline); margin: 0px; font-size: var(--value-font-size); border-left: 1px dotted var(--color_formline); }
form.normal div.form_line p.value:last-child { border-right: 0px solid var(--color_formline); }

form.normal div.form_line input[type=text] { width: calc(100% - var(--min-label-width)); padding: 10px; border-right: 1px solid var(--color_formline); }
form.normal div.form_line input[type=text]:last-child { border-right: 0px solid var(--color_formline); }
form.normal div.form_line input[type=text]:focus { background-color: var(--focus-bg); }

form.normal div.form_line textarea { width: calc(100% - var(--min-label-width)); padding: 10px; border-right: 1px solid #000; }
form.normal div.form_line textarea:last-child { border-right: 0px solid var(--color_formline); }
form.normal div.form_line textarea:focus { background-color: var(--focus-bg); }

form.normal div.form_line input[type=radio] { }
form.normal div.form_line input[type=checkbox] { }

form.normal div.form_line select { width: calc(100% - var(--min-label-width)); padding: 10px; border-right: 1px solid var(--color_formline); }
form.normal div.form_line select:last-child { border-right: 0px solid var(--color_formline); }
form.normal div.form_line select:focus { background-color: var(--focus-bg); }

form.normal ul.el_list {  }
form.normal ul.el_list li { display: inline-block; padding: 5px; margin: 0px 5px 5px 0px; border: 1px solid #777; background-color: #f1f1f1; color: #777; border-radius: 7px; font-size: .8rem; }

form.normal ul.el_list li i { vertical-align: top; }

form input[type=submit],form input[type=button] { background-color: #d9d9d9; }

/* 편집 화면 테이블 */
table.edit { width: 100%; background-color: #ddd; border-top: 2px solid #000; }
table.edit th{ width: 100px; background-color: #fff; padding: 5px 0px; font-size: 0.8rem; }
table.edit td{ background-color: #fff; font-size: 0.8rem; padding: 0px; }

table.edit input[type=text]{ width: 100%; border: 0px; padding: 10px 10px; box-sizing: border-box;}
table.edit input[type=text]:focus { background-color: #eee; }
table.edit input[type=text]:focus { background-color: #eee; }
input::placeholder {  color: #90c0f0; }
table.edit input[type=radio]{ margin: 0px 5px 0px 10px; padding: 10px 0px;}
table.edit textarea{ width: 100%; border: 0px; padding: 5px; }
table.edit select{ border: 0px; padding: 8px 5px;}

/* 간단 탭 */
ul.tab_simple { clear: both; overflow: auto; margin-bottom: 55px; border-bottom: 2px solid #eee; }
ul.tab_simple li { float: left; padding: 5px 15px; border-bottom: 2px solid transparent; font-size: 1rem; font-family: sans-serif; color: #999; }
ul.tab_simple li.selected { border-bottom: 2px solid #000; font-weight: 700; color: #000; }
ul.tab_simple li:hover { background-color: #f2f2f2; }


/* 메뉴 */
header>div{ width: 220px; }
ul#top_logo { padding: 17px 0px 13px 15px; height: 60px; background-color: #1C8FFA; }
ul#top_logo li.logo_name { font-family: 'NanumSquareRoundB','Noto Sans KR', sans-serif; font-size: 1.6rem; font-weight: 600;}

ul#top_user { clear: both; overflow: auto; padding: 15px 10px; color: #fff; background-color: #0C2F6A;  }
ul#top_user li { float: left; padding: 5px 5px 0px 0px; }
ul#top_user li.user_icon { }
ul#top_user li.user_name { padding-top: 4px; }

ul#top_menu { margin : 0px; padding: 0px; width: 100%;  }
ul#top_menu li { cursor: pointer; color: #9999a1; padding: 5px 10px; margin-top: 10px;}
ul#top_menu li.menu { border-bottom: 0px solid transparent; font-family: 'NanumBarunGothic'; height: 50px;}
ul#top_menu li.select { background-color: rgba(0,0,0,.2); color: #fff; }
ul#top_menu li.select>i { color: #54adc0; }
ul#top_menu a { display: block; color: #aaa; }
ul#top_menu a:hover { background-color: #000; color: #fff; }
ul#top_menu a i.arrow { color: transparent; }
ul#top_menu a.select { background-color: rgba(0,0,0,.2); color: #fff; }
ul#top_menu a.select i.arrow { color: inherit; }

ul#top_menu .submenu { background-color: rgba(0,0,0,.15); border: 1px solid rgba(0,0,0,.2); margin-bottom: 10px;}
ul#top_menu .submenu {  }
ul#top_menu .submenu a { display: block; padding: 5px 5px 5px 44px; }
ul#top_menu .submenu a:hover { background-color: #000; color: #fff; }