
/* MJ | DIV TAG CLASS CSS */

/*::-webkit-scrollbar { -webkit-appearance: none; }
::-webkit-scrollbar:vertical { width: 0.5rem; }
::-webkit-scrollbar:horizontal { height: 0.5rem; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.5); border-radius: 1rem; }
::-webkit-scrollbar-track { background: rgba(0,0,0,0); }*/

/* 테이블 */
div.table { font-size: 1.5rem; text-align: center; overflow: hidden; }
div.thead { display: flex; align-items: center; font-weight: 500; color: #777; }
div.th { flex: 1; }
div.tbody { overflow-x: hidden; overflow-y: overlay; }
div.tr { display: flex; align-items: center; border-bottom: 1px solid #bbb; }
div.tr:hover { background: #F7F4F4; } 
div.tr.selected { background: #F7F4F4; color: #df3f5c; font-weight: 500; }
div.td { flex: 1; display: flex; justify-content: center; align-items: center; height: 3.6rem; overflow: hidden; }

/* 얇은 헤더 테이블 */
div.thin_header div.thead { height: 2.0rem; border-left: 1px solid transparent; border-right: 1px solid transparent; }
div.thin_header div.th:not(:last-child) { border-right: 1px solid transparent; }
div.thin_header div.tbody { height: calc(100% - 2.0rem); border-radius: 0.3rem; border: 1px solid #bbb; }
div.thin_header div.td:not(:nth-last-of-type(1)) { border-right: 1px solid #bbb; }

/* 헤더 강조 테이블 */
div.color_header div.thead { height: 3.6rem; border-top: 1px solid transparent; border-bottom: 2px solid #bbb; /*background: #F4F4F4;*/ color: #777; }
div.color_header div.tbody { /*height: calc(100% - 3.6rem);*/ border: none; border-radius: 0; }
div.color_header div.tr { cursor: pointer; }
div.color_header div.tr:hover { background: #F7F4F4; color: #df3f5c; }
div.color_header div.td { border-right: none; }

div.popup_container { display: none; position: relative; width: 100%; height:100%; position: fixed; left: 0; top: 0; z-index: 999; background: rgba(0, 0, 0, 0.5); }
div.popup_container * { box-sizing: border-box; }
div.popup_wrapper { 
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
	display: grid; grid-template: min-content minmax(0, 1fr) min-content / minmax(0, 1fr); grid-gap: 2rem; 
	border-radius: 0.5rem; background: #FFF; padding: 2rem 4rem; 
}

div.popup_header { position: relative; padding: 0; }
div.popup_header img.close_btn { position: absolute; right: 4rem; top: 0; transform: translateX(100%); display: block; width: 2.4rem; height: 2.4rem; }
div.popup_header div.flex-row-center > img { display: block; width: 5rem; min-width: 3.6rem; margin: 0 0.5rem 0 0; }
div.popup_header div.flex-row-center > h5 { font-size: 2.5rem; font-weight: 700; line-height: 1; letter-spacing: 2px; margin: 0; color: #000; }
div.popup_main { position:relative; width: 100%; height: 100%; padding: 0; overflow-x: hidden; overflow-y: overlay; }
div.popup_footer { display:flex; flex-flow:row wrap; justify-content:center; align-items:center; gap: 1rem;}
/* MJ | DIV TAG CLASS CSS END */