@charset "UTF-8";

@import url("content.css");
@import url("page.css");
@import url("form.css");
@import url("board.css");
@import url("component.css");
@import url("font.css");
@import url("../../lib/css/dx.light.css");
@import url("../../lib/jquery-ui.css");



/* 공통 UI 레이아웃*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video,button,select,input
{margin: 0;padding: 0;border: 0; font-family:'Pretendard', 'D2Coding', sans-serif}

*:focus {
    box-shadow: none !important;
}

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	height: 100%;
    font-size: 13px!important;
    line-height: 20px;
}

body {
	vertical-align: baseline;
	text-decoration:none;
	color: #2C3652;
	word-break:keep-all;
    background: #fff;
    box-sizing: border-box;
    font-size: 13px!important;
    line-height: 20px;
    font-weight:400;
}

ol, ul {list-style: none;}
table {border-collapse: collapse; border-spacing: 0;}

/* a Link */
a {text-decoration: none;color: #2C3652}
a:active, a:link, a:visited {outline: 0;text-decoration: none;}
a:hover {color:#1964D5; outline: 0;text-decoration: none;  -webkit-transition-duration: 0.5s; transition-duration: 0.5s;transition: all 0.5s; cursor: pointer}

/* etc */
blockquote, q {quotes: none;}
h1, h2, h3, h4, h5 {font-style:normal; margin-top: 10px;}
img {vertical-align: middle;}
.btn.active.focus,.btn.active:focus,.btn.focus,.btn:active.focus,.btn:active:focus,.btn:focus,:active,:focus,:visited,a,a:active,a:focus,a:visited{outline:0}
em {font-style:normal; font-weight: 400}

/* layout */
.krs-wrap       {width: 100%; min-width: 1400px; overflow: auto;}
.sidebar {height: 100vh; width: 200px; position:absolute;  left:0; top:0; background: var(--main-color); }
.sidebar .side-wrap {position:fixed; height: 100vh; width: 200px;background: var(--main-color);overflow-y: auto;  overflow-x: hidden; }
/* ::-webkit-scrollbar { width: 0px; }
::-webkit-scrollbar-thumb { background-color: #244F97; } */

header  {height: 40px; background-color: #F0F1F7; border-bottom: 1px solid var(--border-line);}
.krs-container  {background-color: #fff; position: absolute; top: 0; left: 200px; right: 0;
 -moz-transition: left 0.5s ease; transition: left 0.5s ease;  min-width: 1530px; }
footer          {height: 33px; border-top: 1px solid var(--border-line); width: 100%; }

 .krs-content    {border:1px solid var(--border-line); margin:16px; padding: 5px 16px 5px 16px; min-height: calc(100vh - 134px); border-radius:0 2px 2px 2px; margin-top: -1px;  }
 /* header 40 + footer 32 + margin 32 + tab 30 */ /* 세로스로롤바가 생기지 않게 margin, padding을 16px -> 10px 로 변경합니다. */


/* 컨텐츠가 없을때 */
.krs-blank       {background: url(../images/krs_blank.svg) no-repeat center; background-size:300px;}
/*min-height: calc(100vh - 104px);*/
.krs-empty       { min-height: calc(100vh - 104px); }

.iframe-wrap iframe{ width:100%; display: block;  box-sizing: border-box; min-height: calc(100vh - 170px); }
 /* header 40 + footer 32 + margin 32  +  content padding 32  + tab 30 */


/* side 열고 닫기 */
input.btn-menu[type=checkbox] {display: none;}
input.btn-menu:checked ~ .krs-container {left:0;}
input.btn-menu:checked ~ label.hambuger {left:16px;}
label.hambuger {z-index: 2; position: absolute;top: 8px;left: 220px;-moz-transition: left 0.5s ease;transition: left 0.5s ease; cursor: pointer;
}

.logo { height: 90px; width: 200px; text-align: center; display: inline-block; }
.logo h1 {font-size: 0; background: url('../images/logo.svg') no-repeat center; width: 160px; height: 40px; margin: 0 auto; margin-top: 20px; background-size: 120px;}
.ad-banner      {height: 60px; width: calc(100% - 32px); text-align: center; margin-top:40px;}
.ad-banner  img {width: 160px; height: 80px; margin: 0 auto;}
.ad-banner .dx-gallery-wrapper  img {border-radius: 4px;}

.menu {padding-left: 16px; padding-top:8px;display: inline-block; }
.top-info {text-align: right; margin-right: 40px; float: right; }
.top-info li {display: inline-block; margin-left: 20px; padding-top: 10px;}
.top-info li i {font-size: 16px; font-weight: 300; padding-right: 4px;}

/* menu */
.side-scroll {}
.side-lnb .link {cursor: pointer;display: block;padding: 0 16px; color: #fff; position: relative; }
.side-lnb .link a{/*color: #C7D4E0;*/color: #fff; line-height: 32px;  padding-left: 24px;}
.side-lnb  a:hover{opacity: 0.8}
.side-lnb .arrow {font-size: 0;}
.side-lnb .link::after {background: url('../images/down_arrow.svg') no-repeat center; width: 16px; height: 16px; display: inline-block; position: absolute; right: 16px; top:9px; content: '';  -webkit-transition: all 0.4s ease;-o-transition: all 0.4s ease;transition: all 0.4s ease; background-size: 12px; opacity: 0.5;}
.side-lnb li.open .link::after {-webkit-transform: rotate(180deg);-ms-transform: rotate(180deg);-o-transform: rotate(180deg);transform: rotate(180deg); opacity: 1;}
.side-lnb li.open .active {color: #fff;}
.side-lnb li a.active{color: #fff;}
.side-lnb li.open .submenu {display: block; }
.side-lnb li .submenu {display: none; background: #1F4584; padding:10px 0 ; margin-bottom: 16px; }
.submenu a {display: block;/*color: #96B9DB*/color: #d7e3ef; padding:0 16px 0 38px;-webkit-transition: all 0.25s ease;-o-transition: all 0.25s ease;transition: all 0.25s ease; line-height: 22px; }
.submenu a:hover {color: #fff;}
.submenu a:before {content: '\00B7';  padding-right: 8px; font-size: 22px; vertical-align: -2px }

/* lnb icon */
.m1 {background: url('../images/menu_01.svg') no-repeat left 2px;}
.m2 {background: url('../images/menu_02.svg') no-repeat left 2px;}
.m3 {background: url('../images/menu_03.svg') no-repeat left 2px;}
.m4 {background: url('../images/menu_04.svg') no-repeat left 2px;}
.m5 {background: url('../images/menu_05.svg') no-repeat left 2px;}
.m6 {background: url('../images/menu_06.svg') no-repeat left 2px;}
.m7 {background: url('../images/menu_07.svg') no-repeat left 2px;}
.m8 {background: url('../images/menu_08.svg') no-repeat left 2px;}
.m9 {background: url('../images/menu_09.svg') no-repeat left 2px;}
.m10 {background: url('../images/menu_10.svg') no-repeat left 2px;}
.m11 {background: url('../images/menu_11.svg') no-repeat left 2px;}
.m12 {background: url('../images/menu_12.svg') no-repeat left 2px;}
.m13 {background: url('../images/menu_13.svg') no-repeat left 2px;}
.m14 {background: url('../images/menu_14.svg') no-repeat left 2px;}

footer  {padding: 0 16px; line-height: 30px;}
footer .f-01 {display: inline-block; font-size: 0.923rem}
footer .f-02 { font-size: 0.923rem; float: right;}
footer .f-02 .f-api { font-size: 0.923rem;  margin-right: 24px;}
footer .f-02 .f-api i {line-height: 20px; font-size: 1.22rem; font-weight: 500; }
footer .f-02 a.my-info { display: inline-block; background-color: #404040; width: 180px; height: 25px; line-height: 25px; text-align: center; text-decoration: none; color: white; }


header a._bcnc-btn { display: inline-block; padding: 2px 5px 2px 5px; text-align: center; text-decoration: none; cursor: pointer; border: 1px solid #525C67; background-color: #fff; border-radius: 5px; }
header a._bcnc-btn { display: inline-block; margin-left: auto; padding: 1px 5px 1px 5px; font-size: 13px; text-align: center; text-decoration: none; cursor: pointer; border: 1px solid #525C67; background-color: #fff; border-radius: 5px; }
header ._mock-bcnc-info-box { display: flex; align-items: center; position: relative; padding: 2px 5px 2px 5px; border: 1px solid #ccc; background-color: #f9f9f9; margin-right: 10px; }
header ._mock-bcnc-name { margin-right: 15px; }
header ._mock-bcnc-close-btn { position: absolute; right: 2px; cursor: pointer; background: none; border: none; font-size: 16px; color: #888; }

header .setting_btn { cursor: pointer; background: none; border: none;}


/* loading */
@-webkit-keyframes spin {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
  }
  @keyframes spin {
    0% { transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
  }
  .loading-wrap {position: absolute; width:100%;height: 100%; top:50%; left:50%; transform:translate(-50%, -50%);  margin:0 auto; opacity: 1; z-index: 9999;  }
  .loading-con {position:absolute;top:50%; left:50%; transform:translate(-50%, -50%);  margin:0 auto;
    width:200px;height: 120px; box-shadow: 0px 4px 20px 0px rgba(31, 79, 143, 0.2); border-radius: 8px; background: #fff; }
  .loading {border-radius: 50%; width: 40px;height: 40px; border: 0.25rem solid rgba(36, 79, 151, 0.2); border-top-color: #244F97; -webkit-animation: spin 1s infinite linear; animation: spin 1s infinite linear; display: block; text-align: center;margin:0 auto; margin-top: 24px; }
 .load-text {font-size:1.2rem; font-weight: 500;; color: #244F97; text-align: center; margin-top: 10px}


@media (max-width: 1280px){


}
.mr-1{
    margin-right: 1rem !important;
}
.input-biz{
    width: 70px !important;
}
.flex-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}