@font-face {
    font-family: 'Pretendard';
    font-weight: 100;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/npm/pretendard/dist/web/static/woff2/Pretendard-Thin.woff2') format('woff2'),
         url('https://cdn.jsdelivr.net/npm/pretendard/dist/web/static/woff/Pretendard-Thin.woff') format('woff'),
         url('https://cdn.jsdelivr.net/npm/pretendard/dist/web/static/ttf/Pretendard-Thin.ttf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 200;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/npm/pretendard/dist/web/static/woff2/Pretendard-ExtraLight.woff2') format('woff2'),
         url('https://cdn.jsdelivr.net/npm/pretendard/dist/web/static/woff/Pretendard-ExtraLight.woff') format('woff'),
         url('https://cdn.jsdelivr.net/npm/pretendard/dist/web/static/ttf/Pretendard-ExtraLight.ttf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 300;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/npm/pretendard/dist/web/static/woff2/Pretendard-Light.woff2') format('woff2'),
         url('https://cdn.jsdelivr.net/npm/pretendard/dist/web/static/woff/Pretendard-Light.woff') format('woff'),
         url('https://cdn.jsdelivr.net/npm/pretendard/dist/web/static/ttf/Pretendard-Light.ttf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 400;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/npm/pretendard/dist/web/static/woff2/Pretendard-Regular.woff2') format('woff2'),
         url('https://cdn.jsdelivr.net/npm/pretendard/dist/web/static/woff/Pretendard-Regular.woff') format('woff'),
         url('https://cdn.jsdelivr.net/npm/pretendard/dist/web/static/ttf/Pretendard-Regular.ttf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 500;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/npm/pretendard/dist/web/static/woff2/Pretendard-Medium.woff2') format('woff2'),
         url('https://cdn.jsdelivr.net/npm/pretendard/dist/web/static/woff/Pretendard-Medium.woff') format('woff'),
         url('https://cdn.jsdelivr.net/npm/pretendard/dist/web/static/ttf/Pretendard-Medium.ttf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 600;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/npm/pretendard/dist/web/static/woff2/Pretendard-SemiBold.woff2') format('woff2'),
         url('https://cdn.jsdelivr.net/npm/pretendard/dist/web/static/woff/Pretendard-SemiBold.woff') format('woff'),
         url('https://cdn.jsdelivr.net/npm/pretendard/dist/web/static/ttf/Pretendard-SemiBold.ttf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 700;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/npm/pretendard/dist/web/static/woff2/Pretendard-Bold.woff2') format('woff2'),
         url('https://cdn.jsdelivr.net/npm/pretendard/dist/web/static/woff/Pretendard-Bold.woff') format('woff'),
         url('https://cdn.jsdelivr.net/npm/pretendard/dist/web/static/ttf/Pretendard-Bold.ttf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 800;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/npm/pretendard/dist/web/static/woff2/Pretendard-ExtraBold.woff2') format('woff2'),
         url('https://cdn.jsdelivr.net/npm/pretendard/dist/web/static/woff/Pretendard-ExtraBold.woff') format('woff'),
         url('https://cdn.jsdelivr.net/npm/pretendard/dist/web/static/ttf/Pretendard-ExtraBold.ttf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 900;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/npm/pretendard/dist/web/static/woff2/Pretendard-Black.woff2') format('woff2'),
         url('https://cdn.jsdelivr.net/npm/pretendard/dist/web/static/woff/Pretendard-Black.woff') format('woff'),
         url('https://cdn.jsdelivr.net/npm/pretendard/dist/web/static/ttf/Pretendard-Black.ttf') format('truetype');
    font-display: swap;
}

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&family=Noto+Serif+KR:wght@200;300;400;500;600;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Do+Hyeon&family=Nanum+Gothic:wght@400;700;800&family=Noto+Serif+KR:wght@200;300;400;500;600;700;900&display=swap');

/* CSS */
BODY           { BACKGROUND-COLOR : #FFFFFF;}
A:LINK         { COLOR: #424542; TEXT-DECORATION: NONE }
A:VISITED      { COLOR: #424542; TEXT-DECORATION: NONE }
A:ACTIVE       { COLOR: #424542; }
A:HOVER        { COLOR: #295584; TEXT-DECORATION: UNDERLINE }
BODY,TH,TD,DIV,LI,SELECT,input,textarea,button { FONT-SIZE: 9pt; FONT-FAMILY:"Pretendard"; COLOR: #424542; } /* ¨ù??¢´: 2013-06-20 */
FORM           { MARGIN:0; }
CAPTION        { text-align:left; font-size:12px; font-weight:bold;}
table{border-collapse:collapse; border-spacing:0} /* ?©¬¡Æ¢®: 2013-06-20 */
.container{max-width:1300px;}
.box {
	font-size: 9pt;
	font-family: "Pretendard";
	background-color: #FFFFFF;
	color: #424542; 
	border:1 solid C4CAD1;
	padding: 2 2 2 3
}

.box_lock {
	font-size: 9pt;
	font-family: "Pretendard";
	font-weight: bold;
	background-color: #FFFFFF;
	color: #008000; 
	border:1 solid FFFFFF;
	padding: 2 2 2 3
}

.cls0          { color:#FF6500; font-size:9pt; font-family:"Pretendard"; text-decoration:underline; }
a.cls0:link    { color:#FF6500; font-size:9pt; font-family:"Pretendard"; text-decoration:underline; }
a.cls0:visited { color:#FF6500; font-size:9pt; font-family:"Pretendard"; text-decoration:underline; }
a.cls0:hover   { color:#FF6500; font-size:9pt; font-family:"Pretendard"; text-decoration:underline; }

.cls1          { color:#0033CC; font-size:9pt; font-family:"Pretendard"; text-decoration:underline; }
a.cls1:link    { color:#0033CC; font-size:9pt; font-family:"Pretendard"; text-decoration:underline; }
a.cls1:visited { color:#0033CC; font-size:9pt; font-family:"Pretendard"; text-decoration:underline; }
a.cls1:hover   { color:#5573CB; font-size:9pt; font-family:"Pretendard"; text-decoration:underline; }

.r_btn {
    border-top-width: 0px; 
    border-right-width: 0px; 
    border-bottom-width: 0px; 
    border-left-width: 0px; 
    background-color: #FFFFFF;
    cursor: pointer;
}
.ctxt     { FONT-FAMILY: ¡¾¨ù¢¬©÷; FONT-SIZE: 12px; BORDER: 1px solid #9d9d9d; HEIGHT: 20px; }
.ctxtarea { FONT-FAMILY: ¡¾¨ù¢¬©÷; FONT-SIZE: 12px; BORDER: 1px solid #9d9d9d; PADDING: 10px; LINE-HEIGHT: 1.4; }

td.mini1{font-size:12px;font-family:?¢¬¢¯??¨ù;color:#003366}
td.mini2{font-size:12px;font-family:?¢¬¢¯??¨ù;color:#222222;background-color:#f7f7f7}

.ta {font-size:8pt; font-family:tahoma;}
.chk { width:15px; height:15px; padding:0; margin:0; }
/*.u, a.u:link, a.u:visited, a.u:hover, a.u:active {text-decoration:underline}*/ /* ??¡Æ?: 2013-06-20*/

table.myadmin    { border-collapse:collapse; }
table.myadmin td { border:1px solid #dbdfea; padding:3px; white-space:nowrap }

/* ?©¬¡Æ¢®: 2013-06-20 */
.c, a.c:link, a.c:visited, a.c:hover, a.c:active {color:#111111} /*black*/
.w, a.w:link, a.w:visited, a.w:hover, a.w:active {color:#ffffff} /*white*/
.o, a.o:link, a.o:visited, a.o:hover, a.o:active {color:#FF6500} /*orange*/
.r, a.r:link, a.r:visited, a.r:hover, a.r:active {color:#FF3600} /*red*/
.g, a.g:link, a.g:visited, a.g:hover, a.g:active {color:#a6a6a6} /*gray*/
.dg, a.dg:link, a.dg:visited, a.dg:hover, a.dg:active {color:#666666} /*darkgray*/
.h, a.h:link, a.h:visited, a.h:hover, a.h:active {color:#336699} /*dark-blue*/
.lh, a.lh:link, a.lh:visited, a.lh:hover, a.lh:active {color:#2862ff} /*light-blue*/
.hm, a.hm:link, a.hm:visited, a.hm:hover, a.hm:active {color:#00659C} /*medium-blue*/
.brn, a.brn:link, a.brn:visited, a.brn:hover, a.brn:active{color:#624712}/*brown*/

.b, a.b:link, a.b:visited, a.b:hover, a.b:active {font-weight:bold} /*Bold*/
.nb, a.nb:link, a.nb:visited, a.nb:hover, a.nb:active {font-weight:normal} /*Normal*/
.u, a.u:link, a.u:visited, a.u:hover, a.u:active {text-decoration:underline} /*Underline*/
.nu, a.nu:link, a.nu:visited, a.nu:hover, a.nu:active {text-decoration:none} /*None-underline*/

 /*font-size*/
.px10 {font-size:10px}
.px11 {font-size:11px}
.px12 {font-size:12px}
.px13 {font-size:13px}
.px14 {font-size:14px}
.px15 {font-size:15px}
.px16 {font-size:16px}
.px18 {font-size:18px}
.px20 {font-size:20px}
.px22 {font-size:22px}
.px24 {font-size:24px}
.px26 {font-size:26px}
.px28 {font-size:28px}
.px30 {font-size:30px}
.px32 {font-size:32px}

/* 2020-12-29 ? ??? ??*/
.table_basic th {border:0.5px solid #a6a6a6;}
.table_basic td {border:0.5px solid #a6a6a6;}

/*
a.button_empas{
	background: transparent url(../images/btn/button_empas.gif) no-repeat top right;
	color: #000000;
	cursor: pointer;
	display: inline-block;
	font-family:'Pretendard';
    font-size:12px;
	height: 22px;
	padding-right: 8px;
	position: relative;
	text-decoration: none !important;
	vertical-align: middle;
}
a.button_empas span{
	background: transparent url(../images/btn/button_empas.gif) no-repeat top left;
	color: #000000;
	display: inline-block;
	padding: 4px 0 3px 9px;
	text-decoration: none !important;
}
a.button_empas:hover{
	background-position: bottom right;
}
a.button_empas:hover span{
	background-position: bottom left;
}
*/
/* btns */
.btns {
    color: #444444;
    background: #F3F3F3;
    border: 1px #000000 solid;
    padding: 5px 10px;
    border-radius: 2px;
    font-size: 10pt;
    outline: none;
    font-family:'Pretendard';
    font-weight:500;
}

.btns:hover {
    border: 1px #C6C6C6 solid;
    box-shadow: 1px 1px 1px #EAEAEA;
    color: #333333;
    background: #F7F7F7;
}

.btns:active {
    box-shadow: inset 1px 1px 1px #DFDFDF;   
}
/* btn */
/* ???? ??? */
#mem_write{
    width:100%;
}
#mem_write td{
    font-size:16px;
    font-family:'Pretendard';
    padding:10px;
}
#mem_write input{
    width:98%;
}
/*  END */
/* HEADER */
#header {
    height: 120px;
    transition: all 0.5s;
    z-index: 997;
    transition: all 0.5s;
    padding: 20px 0;
    background: #fff;
    box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.3);
}

#header.header-scrolled,
#header.header-pages {
    height: 60px;
    padding: 10px 0;
}

#header .logo h1 {
    font-size: 36px;
    margin: 0;
    padding: 0;
    line-height: 1;
    font-weight: 400;
    letter-spacing: 3px;
    text-transform: uppercase;
}

#header .logo h1 a,
#header .logo h1 a:hover {
    color: #00366f;
    text-decoration: none;
}

#header .logo img {
    padding: 0;
    margin: 7px 0;
    max-height: 45px;
}

.main-pages {
    margin-top: 60px;
}

.main-nav,
.main-nav * {
    margin: 0;
    padding: 0;
    list-style: none;
}

.main-nav > ul > li {
    position: relative;
    white-space: nowrap;
    float: left;
}

.main-nav a {
    display: block;
    position: relative;
    color: #004289;
    padding: 10px 15px;
    transition: 0.3s;
    font-size: 18px;
    font-family: "Pretendard";
    font-weight: 500;
}

.main-nav a:hover,
.main-nav .active > a,
.main-nav li:hover > a {
    color: #007bff;
    text-decoration: none;
}

.main-nav .drop-down ul {
    display: block;
    position: absolute;
    left: 0;
    top: calc(100% + 30px);
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    padding: 10px 0;
    background: #fff;
    box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
    transition: ease all 0.3s;
}

.main-nav .drop-down:hover > ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
}

.main-nav .drop-down li {
    min-width: 180px;
    position: relative;
}

.main-nav .drop-down ul a {
    padding: 10px 20px;
    font-size: 15px;
    color: #004289;
}

.main-nav .drop-down ul a:hover,
.main-nav .drop-down ul .active > a,
.main-nav .drop-down ul li:hover > a {
    color: #007bff;
}

.main-nav .drop-down > a:after {
    font-family: 'Pretendard';
    padding-left: 10px;
}

.main-nav .drop-down .drop-down ul {
    top: 0;
    left: calc(100% - 30px);
}

.main-nav .drop-down .drop-down:hover > ul {
    opacity: 1;
    top: 0;
    left: 100%;
}

.main-nav .drop-down .drop-down > a {
    padding-right: 35px;
}

.main-nav .drop-down .drop-down > a:after {
    position: absolute;
    right: 15px;
}
/* END OF HEADER */
/* ?? ??? */
#tb{
    white-space:nowrap;
    width:100%;
}
#tb select, input{
    font-size:14px;
}
#tb th{
    padding:10px;
    font-size:14px;
    font-family:'Pretendard';
    border:1px solid #ccc;
}
#tb td{
    padding:10px;
    font-size:14px;
    font-family:'Pretendard';
    border:1px solid #ccc;
    word-break: break-all;
    white-space: normal;
}
#tb a{
    font-size:14px;
    font-family:'Pretendard';    
}
/* FOOTER */
#footer {
    padding-top:2%;
    color: #eee;
    font-size: 14px;
    width:100%;
    clear:both;
}

#footer .copyright {
    text-align: center;
    padding: 15px 0;
    color:#fff;
    font-family:'Pretendard';
    font-size:15px;
    border-top: #e0e0e0 1px solid;
}

/* PROTDUCTS */
#products{
    text-align:center;
    width:100%;
    padding:10px 0 15px 0;
}
#products a {
    position: relative;
    display: inline-block;
    margin: 5px 15px;
    outline: none;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 400;
    text-shadow: 0 0 1px rgba(255,255,255,0.3);
    font-size: 15px;
    font-family:'Pretendard';
}
#products a::after {
    display: block;
}

#products a::after {
    margin-top: 5px;
    width: 0;
    height: 4px;
    background-color: #fff;
    content: '';
    opacity: 0;
    -webkit-transition: width 0.3s, opacity 0.6s;
    -moz-transition: width 0.3s, opacity 0.6s;
    transition: width 0.3s, opacity 0.6s;
}

#products a:hover::after,
#products a:focus::after {
    opacity: 1;
    width: 100%;
}
#tb_products{
    margin:0 auto;
}
#tb_products td{
    text-align:center;
    font-size:14px;
    font-family:'Pretendard';
    padding:2px 5px;
    border:1px solid #adb5bd;
    cursor:default;
    position:relative;
}
#tb_products td:hover{
    background-color:#adb5bd;
    color:white;
}
#tb_products td .tooltip {
    color:black;
    background: #ffffe0;
    border: 1px solid #d1d1d1;
    border-radius: 3px;
    bottom: 100%;
    font-size: 14px;
    font-family:'Pretendard';
    display: block;
    opacity: 0;
    padding: 5px;
    pointer-events: none;
    position: absolute;
    z-index: 1000;
}
#tb_products td:hover .tooltip {
    opacity: 1;
    pointer-events: auto;
}

/* main css */
       /* Style the tab */
       .tab {
        overflow: hidden;
        border: 1px solid #ccc;
        background-color: #f1f1f1;
    }

    /* Style the buttons inside the tab */
    .tab button {
        background-color: inherit;
        float: left;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 14px 16px;
        transition: 0.3s;
        font-size: 17px;
        font-family:'Pretendard';
    }

    /* Change background color of buttons on hover */
    .tab button:hover {
        background-color: #ddd;
    }

    /* Create an active/current tablink class */
    .tab button.active {
        background-color: #ccc;
    }

    /* Style the tab content */
    .tabcontent {
        display: none;
        padding: 6px 12px;
        border: 1px solid #ccc;
        border-top: none;
    }
    #main_tb{
        margin:0 auto;
        width:90%;
        margin:30px;
        min-width:500px;
    }
    #main_tb th{
        padding:20px;
        text-align:center;
        font-family:'Pretendard';
        font-size:18px;
        background:#004289;
        color:white;
        border-top:1px solid gray;
        border-bottom:1px solid gray;
    }
    #main_tb td{
        padding:20px;
        text-align:center;
        font-family:'Pretendard';
        font-size:18px;
        border-top:1px solid gray;
        border-bottom:1px solid gray;
    }
/* main css*/

/* description wrap */
    #description_wrap{
        display:none;position:absolute;width:100%;background-color:rgb(0 0 0 / 61%);height:100%;background-size:cover;top:0;left:0;z-index:10;
    }
    #description_part{
        width:100%;margin:20px auto;height:auto;padding:50px;
    }
    #description_wrap table{
        background-color:white;border:1px solid black;
    }

    #side_menu{
        position: relative;
        float: left;
        width: 250px;
        font-family: 'Pretendard';
    }
    #main_content{
        width: 1000px;
        float: right;
    }
    #content_wrap{width:100%;background:#98d5e8; height:150px;}
    #side_menu h2 {display:table; width:100%; height:150px; letter-spacing: -1px; color:#fff; font-size:28px; background:#004289;margin:0;font-family:'Pretendard'; }
    #side_menu h2 span{display:table-cell; vertical-align:middle; line-height:35px; overflow:hidden; text-align: center;}
    #side_menu .side_ul{border-top:0; border-bottom:0;list-style-type:none;padding:0;}
    #side_menu .side_ul > li.on .sub_ul {display:block;}
    #side_menu .side_ul > li > a {display:block; position:relative; padding:12px 40px 12px 10px; font-size:16px; line-height:25px; font-family:'Pretendard';font-weight:500;color:#333;  background:#fff; border-bottom:1px solid #b2b7c7;}  
    #side_menu .side_ul > li.sub_menu > a::before{ content:""; position: absolute; right:10px; top:24px; width:11px; height:1px; background:#111;}
    #side_menu .side_ul > li.sub_menu > a::after{ content:""; position: absolute; right:15px; top:19px; width:1px; height:11px; background:#111;}
    #side_menu .side_ul > li.sub_menu.open > a::after,
    #side_menu .side_ul > li.sub_menu.on > a::after,
    #side_menu .side_ul > li.sub_menu > a:hover::after, 
    #side_menu .side_ul > li.sub_menu > a:focus::after, 
    #side_menu .side_ul > li.sub_menu > a:active::after {background:#fff; transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); }
    /* 2023-08-31 focus Á¦°Å*/
    /* #side_menu .side_ul > li.on > a,
    #side_menu .side_ul > li > a:hover,
    #side_menu .side_ul > li > a:focus{color:#fff; background:#007bff;} */
    #side_menu .side_ul > li.on > a,
    #side_menu .side_ul > li > a:hover{color:#fff; background:#007bff;}
    
    #side_menu .sub_ul {display:none; padding:10px; border-bottom:1px solid #b2b7c7; background:#f8f8f8;list-style-type:none;}
    #side_menu .sub_ul li a {position:relative; display:block; color:#333; padding:5px 5px 5px 10px;  line-height:22px; font-family:'Pretendard';font-size:15px;}
    #side_menu .sub_ul li a::before{content:""; position:absolute; left:0; top:15px; width:3px; height:3px; background:#666}
    #side_menu .sub_ul li:first-child a{border-top:0;} 
    #side_menu .sub_ul li a:hover, 
    #side_menu .sub_ul li a:focus, 
    #side_menu .sub_ul li a:active,
    #side_menu .sub_ul li.on a{color:#00549d;}
    
    #menu_content{
        width: 1050px;
        float: right;
    }
    div.mytest{background-color:white;position:absolute;left:1100px;top:50px;width:460px;border:1px solid black;z-index:100;}
    #view_btn{color:green;width:83px;margin-bottom:5px;}
    #main_content{position: relative;padding:30px 30px 0 0;color:#555;font-size: 14px;line-height: 1.4;}
    /* 2021-08-17 QR ÄÚµå Ãâ·Â  START */
    #qr_wrap{display:none;position:absolute;width:100%;background-color:#ccc;height:100%;min-height:900px;background-size:cover;top:0;left:0;z-index:10;padding:10%;}
    #qr_container{width:100%;background:white;border:2px solid white;}
    #qr_close{background:#004289;text-align:right;font-size:18px;padding:5px;}
    #qr_close>a{color:white;}
    #qr_contents{text-align:center;vertical-align:middle;display:flex;justify-content:flex-start;align-items:center;}
    #qr_img{padding:10px;}
    #qr_img>img{width:90%;height:auto;}
    #qr_inform{padding:10px;}
    /* 2021-08-17 QR ÄÚµå Ãâ·Â  E N D */


    @media screen and (max-width: 1300px){
        div.mytest{top:0;left:0;}        
        #sc_name{display:none;}
        .logo{display:none;}
        .main-nav{float:unset !important;}
        #content_wrap{background:white;}
        #side_menu{display:none;}
        #menu_content{width:100%;}
        #main_content{padding:0;width:100%;}
        #tb{white-space:normal;}
        #tb th {padding:2px;}
        #tb td {padding:2px;}
        #view_btn{width:auto;}
    }