/* 라벨 기본 */
.label-custom{font-weight: normal !important; color:#888888;}

/* 100% 버튼으로 변경 */
.btn-block {
    width: 100%;
    display: inline-block;
    box-sizing: border-box;
}

/* 기본버튼 */
.btn {
    background-color: white;
    color: gray;
    border: none;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    border: 1px solid gray;
}

.btn:hover {
    opacity: 0.8;
}

/* 로그인 버튼 */
.btn-login {
    background-color: #FF3399;
    color: white;
    border: none;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    border: 1px solid #FF3399;
}

.btn-login:hover {
    background-color: #E60073;
}

/* 삭제 버튼 스타일 */
.btn-del {
    background-color: #FF5733;
    color: white;
    border: none;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    border: 1px solid #FF5733;
}

.btn-del:hover {
    background-color: #FF4500;
}

/* 수정 버튼 스타일 */
.btn-edit {
    background-color: #27ae60;
    color: white;
    border: none;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    border: 1px solid #27ae60;
}

.btn-edit:hover {
    background-color: #218c4a;
}

/* 등록 버튼 스타일 */
.btn-add {
    background-color: #3498db;
    color: white;
    border: none;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    box-sizing: border-box;
    border: 1px solid #3498db;
}

.btn-add:hover {
    background-color: #1f77b7;
}

/* 검색 버튼 스타일 */
.btn-info {
    background-color: #808080;
    color: white;
    border: none;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    border: 1px solid #808080;
}

.btn-info:hover {
    background-color: #555555;
}

/* 일반 테이블 스타일 */
.table-d1 {
    border-collapse: collapse;
    width: 100%;
}

.table-d1,
.table-d1 th,
.table-d1 td {
    border: 1px solid #ddd;
}

.table-d1 th,
.table-d1 td {
    padding: 8px;
	box-sizing:border-box;
}

.table-d1 th {
    background-color: #f2f2f2;
}

/* 기본 탭 메뉴 스타일 */
.tab-menu {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 10px;
}

.tab-menu li {
    flex: 1;
    text-align: center;
    padding: 20px 0;
    cursor: pointer;
    border-radius: 10px;
    background-color: #f2f2f2;
}

.tab-menu li:hover {
    background-color: #ddd;
}

.tab-menu li.on {
    background-color: #3498db;
    color: white;
}

/* 폼 요소 공통 스타일 */
.form-element {
    margin-bottom: 15px;
}

/* 텍스트 입력 필드 스타일 */
.custom-input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    box-sizing: border-box;
}

/* 셀렉트 박스 스타일 */
.custom-select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    box-sizing: border-box;
}

/* 라디오 버튼 및 체크 박스 스타일 */
.custom-radio,
.custom-checkbox {
    width: 15px;
    height: 15px;
    vertical-align: middle;
}

/* 제출 버튼 스타일 */
.custom-button {
    background-color: #3498db;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 18px;
    cursor: pointer;
}

/* 텍스트 에어리어 스타일 */
.custom-textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    box-sizing: border-box;
}

/* 속성 css */
.bdru-5 {
    border-radius: 5px !important;
}

.bdru-10 {
    border-radius: 10px !important;
}

.h-40{height:40px !important;}
.h-50{height:50px !important;}
.h-60{height:60px !important;}
.h-70{height:70px !important;}
.h-80{height:80px !important;}

.fz-14{font-size: 14px !important;}
.fz-15{font-size: 15px !important;}
.fz-16{font-size: 16px !important;}
.fz-17{font-size: 17px !important;}
.fz-18{font-size: 18px !important;}
.fz-19{font-size: 19px !important;}
.fz-20{font-size: 20px !important;}

.tac{text-align: center !important;}

.chart{width: 100% !important; height: 100% !important;}

/* 가변사이즈 전용 css */
.tem3{grid-template-columns: 1fr !important;}
.tem6 {grid-template-columns: 1fr 1fr!important;}
.tem7 {grid-template-columns: 1fr 1fr!important;}


/* 페이징 */
.page_navi{text-align:center; margin-top: 20px;}
.page_navi > span{margin:0 14px;}
.page_navi > span > *{font-size:12px;vertical-align:middle;font-family:"Gulim"; display: inline-block; border: 1px solid #E3E3E3; padding:15px; padding-bottom: 13px; margin-left:-1px; text-align: center; font-weight: bold; color:gray;}
.page_navi > span > strong{background-color:#F5F5F4; color:black;}

/* 테이블 영역에 씀 */
.wsnw{text-align: center;white-space:nowrap;width: 1px;}

/* 메인탭 */
.main-tab{margin: 0;padding: 0;list-style: none; display:grid; gap:20px; margin-top: 20px; grid-template-columns: repeat(3,1fr);}
.main-tab li{border:1px solid #404040;padding: 40px 20px; border-radius:5px;}
.main-tab li label{font-size: 17px; font-weight: bold;}
.main-tab li .f-box{display:flex; justify-content:space-between; align-items: center;}
.main-tab li .f-box a{color:#404040}
.main-tab li .f-box .ea{color:#4472C4; font-weight: bold;}
.main-tab li .date{margin-top: 10px; color:#A6A6A6; font-weight: bold; font-size: 15px;}

.main-tab-2 li{cursor: pointer;}
.main-tab-2 li:hover{text-indent: 10px; cursor: pointer; transition: all 0.3s ease-out;}

/*가이드 박스*/

.guide-wrap{
    position: relative;
    transform: translateY(-50%);
    margin: 0 auto 0 0;
}

.guide-wrap .guide-icon {
    width: 20px;
    height: 20px;
    text-align: center;
    display: inline-block;
    border: 1px solid #000;
    border-radius: 50%;
    box-sizing: border-box;
	font-size:14px;
}

.guide-wrap .guide-info{
	position: absolute;
    width: 400px;
    background: #fff;
    padding: 15px;
    box-sizing: border-box;
    border: 1px solid #343434;
    left: calc(100% + 10px);
    font-size: 12px;
    border-radius: 7px;
	display:none;
}

.guide-wrap .guide-icon:hover + .guide-info{
	display:block;
}

.content_title {
    width: 100% !important;
    height: 60px;
    padding: 10px 20px;
    box-sizing: border-box;
    background: #f4f4f4;
    border: 1px solid #d9d9d9;
    color: #09121f;
    font-size: 20px;
    font-weight: 600;
    display: flex !important;
    align-items: center !important;
}

@media screen and (max-width: 600px) {
    #sideBar{position: absolute; left:0; top:0; height:100%; transform: translateX(-100%); transition: all 0.3s;}
    #sideBar.on{transform: translateX(0%);}
    #menuTitle{display: none !important;}
    #menuIco{display: block !important;}
    #topLocation{position: fixed !important;width:100% !important; top:0 !important;left:0 !important; box-sizing: border-box; z-index: 10000;}
    body{padding-top: 40px !important;}
}

@media screen and (min-width: 1000px) {
    .tem3{grid-template-columns:repeat(2,1fr) !important;}
    .tem6 {grid-template-columns: repeat(3, 1fr) !important;}
    .tem7 {grid-template-columns: repeat(4, 1fr) !important;}
}

@media screen and (min-width: 1400px) {
    .tem3{grid-template-columns:repeat(3,1fr) !important;}
    .tem6 {grid-template-columns: repeat(6, 1fr) !important;}
    .tem7 {grid-template-columns: repeat(7, 1fr) !important;}
}