@import url("reboot.css");
@import url("flex.css");
@import url("col.css");
@import url("spacing.css");
@import url("util.css");
@import url("font.css");
@import url("layout.css");



body{
	background: var(--gray-200);
	--point-400:var(--blue-700);
	--point-500:var(--blue-800);
	--point-600:var(--blue-900);
}

/*scrollbar*/
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: none; 
} 
::-webkit-scrollbar-thumb {
  background: #999;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #666; 
}


header{
	--nav-color: var(--point-500);
	--nav-font-color: #fff;
	--nav-roll-color: var(--teal-200);	
}
header.wh{
	--nav-color: #fff;
	--nav-font-color: #222;
	--nav-roll-color: var(--point-500);
}

/*hide*/
.hide{display: none;}
.hide-v{visibility: hidden;}
.hidden{visibility: hidden; width: 0; height: 0; display: block; overflow: hidden;}

/*show*/
.show{display: inherit;}
.show-v{visibility: visible;}


/*tab*/
.tab{font-size: .9em;}
.tab ul{display: flex;}
.tab ul li:not(:last-child){margin-right: .2em;}

.tab-a{border-bottom: var(--border-a); margin: 1em 0;}
.tab-a ul li a{border: 1px solid var(--border-color-a); border-bottom: none; padding: .1em .9em; font-size: .9em; display: block; background: var(--gray-100);} 
.tab-a ul li a.active{border-color: var(--point-500); background: var(--point-500); color: #fff;}

.tab-b{margin-bottom: .5em;}
.tab-b ul li:not(:last-child)::after{content: "|"; color: var(--gray-400); font-size: .8em;}
.tab-b ul li a{padding: .2em 1em; display: inline-block;}
.tab-b ul li a.active{background: var(--point-400); color: #fff; border-radius: 3px; box-shadow: 3px 3px 5px var(--gray-400);}


/*input*/
.input{
	display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.5;   
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid var(--border-color-a);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;    
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.input:focus {
    box-shadow: 0 0 .5rem 0.25rem rgba(13, 110, 253, 0.25);
}
.input-wrap{
	margin-bottom: .8em; 
	font-size: .9em;
	width: 100%;
}
.input-wrap .form-control,
.input-wrap .form-select,
.input-wrap .input-group .form-control{
  min-height: calc(1.5em + 0.5rem + 2px);
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  border-radius: 3px;}
.input-wrap .btn, .input-wrap .btn-group > .btn {
  --bs-btn-padding-y: 0.25rem;
  --bs-btn-padding-x: 0.5rem;
  --bs-btn-font-size: 0.875rem;
  --bs-btn-border-radius: 3px;
}
.input-wrap .form-control-xs,
.input-wrap .form-select-xs,
.input-wrap .input-group-xs .form-control{ 
  min-height: calc(1rem + 0.5rem + 2px);
  padding: 0.1rem 0.5rem;
  font-size: 0.875rem;
  border-radius: 3px;}
.input-wrap .btn-xs, 
.input-wrap .btn-group-xs > .btn {
  --bs-btn-padding-y: 0.1rem;
  --bs-btn-padding-x: 0.5rem;
  --bs-btn-font-size: 0.875rem;
  --bs-btn-border-radius: 3px;
}

.input-wrap .btn-group .input-group{flex-wrap: nowrap;}

.input-wrap > label{ margin-bottom: .2em; width: 100%;}
.input-wrap > label.star::after{content: "*"; color: var(--point-500); margin-left: 4px;}

.input-wrap-row{display: flex; gap:0.25em; align-items: center;}
.input-wrap-row > label{width:auto; word-break: keep-all; white-space: nowrap;}

.input-sm-title{padding: .2em 0; min-width: 60px;}
.form-link{color: var(--point-500); margin-top: .5em; display: block; font-weight: 500;}
.form-link:hover,
.form-link:focus{text-decoration: underline;}

.check-group label{white-space: nowrap;}
.check-group label .form-check-input{margin-right: 0.25em;}


/*.col-1{--col-fb: 100%; flex-direction: column;}
.col-2{--col-fb: 50%;}
.col-3{--col-fb: 33.333%;}
.col-4{--col-fb: 25%;}
.col-5{--col-fb: 20%;}
.col-6{--col-fb: calc(100% / 6);}*/

.fb-1{flex-basis: var(--col-fb) !important;}
.fb-2{flex-basis: calc(var(--col-fb) * 2) !important;}
.fb-3{flex-basis: calc(var(--col-fb) * 3) !important;}
.fb-4{flex-basis: calc(var(--col-fb) * 4) !important;}
.fb-5{flex-basis: calc(var(--col-fb) * 5) !important;}
.fb-6{flex-basis: calc(var(--col-fb) * 6) !important;}

.fb-01{flex-basis: calc(100% / 1) !important;}
.fb-02{flex-basis: calc(100% / 2) !important;}
.fb-03{flex-basis: calc(100% / 3) !important;}
.fb-04{flex-basis: calc(100% / 4) !important;}
.fb-05{flex-basis: calc(100% / 5) !important;}
.fb-06{flex-basis: calc(100% / 6) !important;}
.fb-07{flex-basis: calc(100% / 7) !important;}
.fb-08{flex-basis: calc(100% / 8) !important;}
.fb-09{flex-basis: calc(100% / 9) !important;}
.fb-10{flex-basis: calc(100% / 10) !important;}


/*table*/
table {
  background-color: transparent;
}
caption {
  visibility: hidden;
  width:0; 
  height: 0;
  overflow: hidden;
  display: block;
  position: absolute;
}
th {
  text-align: center;
  font-size: .9em;
}
.table {
  width: 100%;
  max-width: 100%;
  margin-bottom: 20px;
  font-size: 0.9rem;
}

.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
  padding: .5rem .4rem;
  line-height: 1.5em;;
  vertical-align: top;
  border-bottom: 1px solid #dddddd;
  text-align: center;
}
.table > thead > tr > th.text-left,
.table > tbody > tr > th.text-left,
.table > tfoot > tr > th.text-left,
.table > thead > tr > td.text-left,
.table > tbody > tr > td.text-left,
.table > tfoot > tr > td.text-left {
  text-align: left;  
}
.table > thead > tr > th.text-right,
.table > tbody > tr > th.text-right,
.table > tfoot > tr > th.text-right,
.table > thead > tr > td.text-right,
.table > tbody > tr > td.text-right,
.table > tfoot > tr > td.text-right{
  text-align: right;  
}
.table > thead > tr > th.text-center,
.table > tbody > tr > th.text-center,
.table > tfoot > tr > th.text-center,
.table > thead > tr > td.text-center,
.table > tbody > tr > td.text-center,
.table > tfoot > tr > td.text-center{
  text-align: right;  
}
.table > thead > tr > th{
	vertical-align: middle; 
	font-weight: 300;
	background: var(--gray-100)
}

.table > tbody + tbody {
  border-top: 1px solid #dddddd;
}

.table-bordered {
  border: 1px solid #dddddd;
}
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
  border: 1px solid #dddddd;
}
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td {
  border-bottom-width: 0;
}
.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: #f9f9f9;
}
.table-hover > tbody > tr:hover {
  background-color: #f5f5f5;
}

.table-vm > thead > tr > th,
.table-vm > tbody > tr > th,
.table-vm > tfoot > tr > th,
.table-vm > thead > tr > td,
.table-vm > tbody > tr > td,
.table-vm > tfoot > tr > td {
	vertical-align: middle;
}

.table > tbody > tr > td.td_title{
	font-size: 1rem; 
	font-weight: 500;
	text-align: left;
}
.table > tbody > tr > td .btn .material{font-size: 1.1em; margin-right: -4px;}
.table > tbody > tr.activeBox{border: 2px solid var(--point-500); box-sizing: border-box;}
.table > tfoot th,
.table > tfoot td{background-color:  var(--teal-100);}
.table .bg-a{background-color: var(--cyan-100);}
.table .bg-b{background-color: var(--red-100);}
.table .bg-c{background-color: var(--green-100);}
.table > tfoot td.bg-a{background-color: var(--cyan-200);}
.table > tfoot td.bg-b{background-color: var(--red-200);}
.table > tfoot td.bg-c{background-color: var(--green-200);}
.table .cate{white-space: nowrap;}
.table a{color:var(--point-500);}
.table a:not(.btn):hover{text-decoration: underline;}
.table.table-td-hover td:hover{background-color: var(--gray-200)}

.table .vm{vertical-align: middle;}


.table-a > thead > tr > th{
	border-top: 1px solid var(--gray-900);
}

table tr.active{background: var(--blue-100);}


/*width*/
.w-10{width:10% !important;}
.w-15{width:15% !important;}
.w-20{width:20% !important;}
.w-25{width:25% !important;}
.w-30{width:30% !important;}
.w-33{width:33.333% !important;}
.w-35{width:35% !important;}
.w-40{width:40% !important;}
.w-45{width:45% !important;}
.w-50{width:50% !important;}
.w-55{width:55% !important;}
.w-60{width:60% !important;}
.w-65{width:65% !important;}
.w-70{width:70% !important;}
.w-75{width:75% !important;}
.w-80{width:80% !important;}
.w-85{width:85% !important;}
.w-90{width:90% !important;}
.w-95{width:95% !important;}
.w-100{width:100% !important;}

.mw-50px{min-width:50px !important;}
.mw-100px{min-width:100px !important;}
.mw-150px{min-width:150px !important;}
.mw-200px{min-width:200px !important;}
.mw-250px{min-width:250px !important;}
.mw-300px{min-width:300px !important;}
.mw-350px{min-width:350px !important;}
.mw-400px{min-width:400px !important;}
.mw-450px{min-width:450px !important;}
.mw-500px{min-width:500px !important;}
.mw-550px{min-width:550px !important;}
.mw-600px{min-width:600px !important;}
.mw-650px{min-width:650px !important;}

.xw-50px{max-width:50px !important;}
.xw-100px{max-width:100px !important;}
.xw-150px{max-width:150px !important;}
.xw-200px{max-width:200px !important;}
.xw-250px{max-width:250px !important;}
.xw-300px{max-width:300px !important;}
.xw-350px{max-width:350px !important;}
.xw-400px{max-width:400px !important;}
.xw-450px{max-width:450px !important;}
.xw-500px{max-width:500px !important;}
.xw-550px{max-width:550px !important;}
.xw-600px{max-width:600px !important;}
.xw-650px{max-width:650px !important;}

.h-100{height: 100%;}

/*img fit*/
.img-cover{object-fit: cover; width:100%; height: 100%;}
.img-contain{object-fit: contain; width:100%; height: 100%;}

.info-txt-a{color: var(--blue-500);}
.info-txt-b{color: var(--red-500);}
.info-txt-c{color: var(--teal-600);}

/*form 높이 조정*/
form{height: 100%; width: 100%;}

/* text align */
.text-right{text-align: right !important;}
.text-left{text-align: left !important;}