@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 100;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 300;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 400;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 500;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 700;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 900;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.otf) format('opentype');}

/* layout */
* { box-sizing:border-box; }
body, #wrap { width: 100%; height: 100%; }  
#wrap_header, #wrap_bodyer, #wrap_footer { width: 100%; margin: auto; }
#header, #bodyer, #footer { width: 100%; }
#wrap_header { height: 100%; }
#wrap_footer {  height: 50px; }
#lefter, #pager { min-height: calc( 100vh - 130px ); }

#bodyer { display: flex; }
#lefter { min-width: 220px; }
#pager { flex-grow: 1; padding: 2rem; background-color: #00000008;}

.layer, .popup { display: none; }

/* layer */
.layer, .popup { display: none; }
.layer_backdrop { position: absolute; left: 0; top: 0; right: 0; bottom: 0; 
    width: 100%; height: 100vh; background-color: rgba(0, 0, 0, 64%); }
.layer_front {   
    border: 1px solid transparent; 
    border-radius: 0px;
    /*
    -webkit-transform: translate(-50%, 0); 
    transform: translate(-50%, 0); 
    */
    box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.16);
    -webkit-box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.16);
    position: absolute; left: 280px; top: 96px; background-color: #ffffff;
    padding: 2rem 2rem 1rem 2rem;
    min-width: 1000px; min-height: 500px;
    max-width: 100%; max-height: auto;
}
#layer_1_backdrop { z-index: 510; }
#layer_1 { z-index: 515; }
#layer_2_backdrop { z-index: 520; }
#layer_2 { z-index: 525; }
#layer_3_backdrop { z-index: 530; }
#layer_3 { z-index: 535; }

.layer_close { display: flex; justify-content: flex-end; -ms-flex-align: right; }
.layer_close img { width: 18px; cursor: pointer; }

/* loader */
.loader { position: absolute; background-color: rgba(0, 0, 0, 0.125); width: 100%; height: calc(100%); top: 0; display: -ms-flexbox;
    display: flex; -ms-flex-pack: center; justify-content: center; -ms-flex-align: center; align-items: center; z-index: 2000;
}
.loader .spinner-border { width: 3rem; height: 3rem; }

/* etc */
ol, ul, dl, li { cursor: pointer; margin:0px; padding:0px; border:0px; outline:0px; list-style: none; }
a { color: inherit; text-decoration: none; }
.pointer { cursor: pointer; }

/* header */
#header_flex { display: flex; align-items: center; height: 68px; }
#header_flex > div { flex: 1; padding: 0.87rem 1.25rem; }
#header_flex > div:last-child { text-align: right; line-height: 1.5rem; }
#header_flex a { cursor: pointer; color: #000000; }

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

/* font */
.fs12 { font-size: 12px; }
.bold { font-weight: bold; }