/*  폰트 지정 */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Gothic+A1&display=swap');

/* 변수 지정 */
:root {
	--main-color : #000000;
	--yellow-color : #FFC939;
	//--blue-color : #6779d3;
	--blue-color : #2196f3;
	--blue-color : #3719F3;
	--red-color : #ff6600;
	--green-color : #26b72c;
	--sky-color : #87CEEB;
	--pink-color : #ff4f99;
	--gray-color : #bbb;
	--orange-color: orange;
	--font-default-size : 16px;
	--font-lightbold : 600;
	--font-default-family: Gothic A1, sans-serif;
}

/* 색상 관련 */
.color.orange{ color:#ff6600; }
.color.red{ color:#f33f3f; }
.color.blue{ color: var(--blue-color); }
.color.yellow{ color:var(--yellow-color); }
.color.gold{ color:#ffc107; }
.color.silver{ color:#9e9e9e; }
.color.bronze{ color:#795548; }
.color.navi{ color:#3f51b5; }
.color.green{ color:#; }
.color.white{ color:#fff; }
.color.violet{ color:#6e5cfb; }
.color.pink{ color:#ff4f99; }

/* 기본 태그 설정 */
select, input, textarea{ font-size:1em; border:1px solid #ccc; box-sizing: border-box; resize:none; outline:none; vertical-align:middle; border-radius:0; box-shadow:none; }
textarea{ padding:5px; height:80px; }
select{ padding:5px; }
input[type=text], input[type=password], input[type=number], input[type=date]{ padding:6px; }
iframe{ border:none; }
xmp{ margin:0; }
ol { margin:0; list-style: none; }
ul { margin:0; list-style: none; }
a { text-decoration: none; color: initial; }

html, body { font-size: var(--font-default-size); }

hr{ background:#ddd; border:0; height:1px; }
.h00 { font-size: 4rem; font-weight: 900; }
.h0 { font-size:2rem !important; margin:0; font-weight: 800; }
h1, .h1{ font-size:1.8rem !important; margin:0; font-weight: 700; }
h2, .h2{ font-size:1.6rem !important; margin:0; font-weight: 600; }
h3, .h3{ font-size:1.4rem !important; margin:0; font-weight: 500; }
h4, .h4{ font-size:1.2rem !important; margin:0; font-weight: 400; }
h5, .h5{ font-size:1rem !important; margin:0; font-weight: 400; }
h6, .h6{ font-size:0.8rem !important; margin:0; font-weight: 400; }

.mt0{ margin-top:0px !important; }
.mt3{ margin-top:3px !important; }
.mt5{ margin-top:5px !important; }
.mt6{ margin-top:6px !important; }
.mt7{ margin-top:7px !important; }
.mt8{ margin-top:8px !important; }
.mt10{ margin-top:10px !important; }
.mt15{ margin-top:15px !important; }
.mt20{ margin-top:20px !important; }
.mt25{ margin-top:25px !important; }
.mt30{ margin-top:30px !important; }
.mt40{ margin-top:40px !important; }
.mt50{ margin-top:50px !important; }
.mt60{ margin-top:60px !important; }
.mt70{ margin-top:70px !important; }
.mt80{ margin-top:80px !important; }
.mt100{ margin-top:100px !important; }
.mb0{ margin-bottom:0px !important; }
.mb3{ margin-bottom:3px !important; }
.mb5{ margin-bottom:5px !important; }
.mb10{ margin-bottom:10px !important; }
.mb15{ margin-bottom:15px !important; }
.mb20{ margin-bottom:20px !important; }
.mb25{ margin-bottom:25px !important; }
.mb30{ margin-bottom:30px !important; }
.mb40{ margin-bottom:40px !important; }
.mb50{ margin-bottom:50px !important; }
.mb100{ margin-bottom:100px !important; }
.mb140{ margin-bottom:140px !important; }
.ml3{ margin-left:3px !important; }
.ml5{ margin-left:5px !important; }
.ml10{ margin-left:10px !important; }
.ml15{ margin-left:15px !important; }
.ml20{ margin-left:20px !important; }
.ml25{ margin-left:25px !important; }
.ml30{ margin-left:30px !important; }
.ml40{ margin-left:40px !important; }
.ml50{ margin-left:50px !important; }
.ml60{ margin-left:60px !important; }
.ml70{ margin-left:70px !important; }
.mr3{ margin-right:3px !important; }
.mr5{ margin-right:5px !important; }
.mr10{ margin-right:10px !important; }
.mr15{ margin-right:15px !important; }
.mr20{ margin-right:20px !important; }
.mr30{ margin-right:30px !important; }
.mr40{ margin-right:40px !important; }
.mr50{ margin-right:50px !important; }
.m0{ margin:0px !important; }
.border{ border:1px solid #ccc; box-sizing:border-box; }
.padding20{ padding:20px; }
.padding30{ padding:30px; }
.d_table{ display:table; }
.clear:after{ content: ''; display: block; clear: both; }
.ellipsis{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:inline-block; vertical-align:middle; width:95%; letter-spacing: -1px; }
.vertial_bar{ color:#ddd; margin:0 15px; }
.align.center{ text-align:center; }
.align.left{ text-align:left; }
.align.right{ text-align:right; }
a.common:hover { text-decoration: underline; }
.fixed { position: fixed !important; }
.relative { position: relative; }
.absolute { position: absolute; }
.through{ text-decoration:line-through; color:rgba(0, 0, 0, 0.3); }
.jconfirm.jconfirm-white .jconfirm-bg, .jconfirm.jconfirm-light .jconfirm-bg{ background:#000; opacity:0.3; }

.essential{ position:relative; }
.essential:after{ font-family: 'Font Awesome\ 5 Free'; content:'\f621'; font-weight:bold; color:#ff3d00; margin-left:3px; font-size:10px; position:absolute; top:-5px; }
th.essential:after{ top:15px; }

/*.essential:before{ font-family: 'Font Awesome\ 5 Free'; content:'\f621'; font-weight:bold; color:#ff3d00; vertical-align:top; margin-right:3px; font-size:10px; }*/
/*.essential.right:after{ font-family: 'Font Awesome\ 5 Free'; content:'\f621'; font-weight:bold; color:#ff3d00; vertical-align:top; margin-left:3px; font-size:10px; }*/

.underline{ text-decoration: underline; }
.radius{ border-radius:50%; }

/* 공통 */
.w100{ width:100% !important; }
.w20p{ width:20% !important; }
.w30p{ width:30% !important; }
.w40p{ width:40% !important; }
.w50p{ width:50% !important; }
.w55p{ width:55% !important; }
.w60p{ width:60% !important; }
.w70p{ width:70% !important; }
.w75p{ width:75% !important; }
.w80p{ width:80% !important; }
.w65px{ width:65px !important; }
.w100px{ width:100px !important; }
.w145px{ width:145px !important; }
.w250px{ width:250px !important; }
.w500px{ width:500px !important; }
.h100px{ height:100px !important; }
.h150px{ height:150px !important; }
.h200px{ height:200px !important; }
.h300px{ height:300px !important; }

.fleft{ float:left; }
.fright{ float:right; }

input, select, .button { border-radius: 5px; }
input[type='radio'] { appearance: none; width: 16px; height: 16px; background: #fff; border: 1px solid #ccc; border-radius: 50%; outline: none; cursor: pointer; }
input[type='radio']:checked { background-color: var(--blue-color); border: 3px solid #fff;  box-shadow: 0 0 0 1px var(--blue-color); }
input[type='checkbox'] { appearance:none; border: 0; }
input[type=checkbox]:before { 
	font-family: 'Font Awesome\ 5 Free'; content: '\f00c'; font-size:11px; color: transparent !important; background: #fff; line-height:15px; cursor:pointer;
	display: block; width: 15px; height: 15px;  border: 1px solid #ccc; border-radius: 5px; margin-right:2px; font-weight:bold; text-align:center;
}
input[type=checkbox]:checked:before { color: white !important; background: var(--blue-color); border: 1px solid var(--blue-color); }
input[type=checkbox] + label{ cursor:pointer; }

/* 버튼 */
.button_group{ text-align:center; margin:30px auto 0; }
.button_group .button{ padding:8px 46px; /*height:40px !important; line-height:30px;*/ margin:0 1px; }

.button{ 
	display: inline-block; border: 1px solid #cdcdcd; background: #f5f5f5; cursor: pointer; transition: background-color 0.2s ease;
	/*height: 32px; line-height: 32px;*/ padding: 6px 19px; position: relative; box-sizing:border-box; color:rgba(0,0,0,0.9); outline:none;
	line-height:normal; vertical-align:middle; font-size:13px; text-align:center; text-decoration: none !important; overflow:hidden;
}
.button.gray:before { /*width: 100%; position: absolute; top: 0; background: #fff; height: 1px; content: ""; left: 0;*/ }
.button:hover:before { /*display: none;*/ }
.button.blue{ /*border: 1px solid #4d5eb1;*/ background: var(--blue-color); color: #fff; }
.button.blue:hover{ /*border: 1px solid #4d5eb1;*/ background: var(--blue-color); color: #fff;  }
.button.blue:before { /*width: 100%; position: absolute; top: 0; height: 1px; content: ""; left: 0; background: #7b8ad9;*/ }

.button.small{ padding:3px 15px; font-size:11px; }
.button.radius{ border-radius:20px; }
.button.big{ padding:13px 48px; font-size:16px; }
.button.big.radius{ border-radius:30px; }
.button.delete{ background:#f33f3f; color:#fff; /*border:1px solid #ca1414;*/ }
.button.delete.disabled{ opacity:0.5; color:#fff !important; }
.button.add{ /*background:#795548; color:#fff;  border:1px solid #50382f;*/ }
.button.yellow{ background:var(--yellow-color); color:#000; /*border:1px solid #dfb600;*/ }
.button.cancel{ background:#ddd; color:#000; }
.button.save{ background: #111827; color:#fff; }
.button.search{ background:#2196f3; color:#fff; }
.button.select{ background:#4caf50; color:#fff; border:1px solid #5c8e27; }
.button.excel{ background:#217346; color:#fff; /*border:1px solid #1b402c;*/ }
.button.white{ background:#fff; color:#000; border:1px solid #4254b6; }
.button.white:hover{ background:#6879d3; color:#fff; border:1px solid #6879d3; transition: all 0.2s ease; }
.button.kakao{ background:#fedc00; border:1px solid #d6bb08; }
.button.naver{ background:#20bc03; border:1px solid #00a030; color:#fff; }
.button.pink{ background:#FC819E; color:#fff; }
.button.edit{ background:#333; color:#fff; }