@charset "UTF-8";
/* ================================
 * Basic font-face, size, color setting 영문 Roboto, 한글 NotoSansKR
 * ================================ */
@import url(https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css);

body,input,select,textarea,button {
    font-family:'Roboto', 'NotoSansKR', sans-serif;
    font-size: 13.5px;  font-weight: 400;
    /*220809수정*/
    color: #60636c;
}

button {font-weight: 500;}


/* font */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    src: local('Roboto-Light');
    src: url('/web_resources/fonts_ver2/Roboto-Light.eot'),
    url('/web_resources/fonts_ver2/Roboto-Light.eot?#iefix') format('embedded-opentype'),
    url('/web_resources/fonts_ver2/Roboto-Light.woff') format('woff'),
    url('/web_resources/fonts_ver2/Roboto-Light.woff2') format('woff2');
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: local('Roboto-Regular');
    src: url('/web_resources/fonts_ver2/Roboto-Regular.eot'),
    url('/web_resources/fonts_ver2/Roboto-Regular.eot?#iefix') format('embedded-opentype'),
    url('/web_resources/fonts_ver2/Roboto-Regular.woff') format('woff'),
    url('/web_resources/fonts_ver2/Roboto-Regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    src: local('Roboto-Medium');
    src: url('/web_resources/fonts_ver2/Roboto-Medium.eot'),
    url('/web_resources/fonts_ver2/Roboto-Medium.eot?#iefix') format('embedded-opentype'),
    url('/web_resources/fonts_ver2/Roboto-Medium.woff') format('woff'),
    url('/web_resources/fonts_ver2/Roboto-Medium.woff2') format('woff2');
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    src: local('Roboto-Bold');
    src: url('/web_resources/fonts_ver2/Roboto-Bold.eot'),
    url('/web_resources/fonts_ver2/Roboto-Bold.eot?#iefix') format('embedded-opentype'),
    url('/web_resources/fonts_ver2/Roboto-Bold.woff') format('woff'),
    url('/web_resources/fonts_ver2/Roboto-Bold.woff2') format('woff2');
}



@font-face {
    font-family: 'NotoSansKR';
    font-style: normal;
    font-weight: 400;
    src: local('NotoSansKR-Regular');
    src: local('Noto Sans');
    src: local('NotoSans');

    src: url('/web_resources/fonts_ver2/NotoSansKR-Regular.woff2') format('woff2'),
    url('/web_resources/fonts_ver2/NotoSansKR-Regular.woff') format('woff'),
    url('/web_resources/fonts_ver2/NotoSansKR-Regular.eot'),
    url('/web_resources/fonts_ver2/NotoSansKR-Regular.eot?#iefix') format('embedded-opentype');
}

@font-face {
    font-family: 'NotoSansKR';
    font-style: normal;
    font-weight: 500;
    src: local('NotoSansKR-Medium');
    src: url('/web_resources/fonts_ver2/NotoSansKR-Medium.eot'),
    url('/web_resources/fonts_ver2/NotoSansKR-Medium.eot?#iefix') format('embedded-opentype'),
    url('/web_resources/fonts_ver2/NotoSansKR-Medium.woff') format('woff'),
    url('/web_resources/fonts_ver2/NotoSansKR-Medium.woff2') format('woff2');
}

@font-face {
    font-family: 'NotoSansKR';
    font-style: normal;
    font-weight: 700;
    src: local('NotoSansKR-Bold');
    src: url('/web_resources/fonts_ver2/NotoSansKR-Bold.eot'),
    url('/web_resources/fonts_ver2/NotoSansKR-Bold.eot?#iefix') format('embedded-opentype'),
    url('/web_resources/fonts_ver2/NotoSansKR-Bold.woff') format('woff'),
    url('/web_resources/fonts_ver2/NotoSansKR-Bold.woff2') format('woff2');
}

@font-face {
    font-family: 'paybooc-ExtraBold';
    src: local('paybooc-ExtraBold.eot');
    src: url('/web_resources/fonts_ver2/paybooc-ExtraBold.eot'),
    url('/web_resources/fonts_ver2/paybooc-ExtraBold.eot?#iefix') format('embedded-opentype'),
    url('/web_resources/fonts_ver2/paybooc-ExtraBold.woff') format('woff'),
    url('/web_resources/fonts_ver2/paybooc-ExtraBold.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'paybooc-Bold';
    src: local('paybooc-Bold.eot');
    src: url('/web_resources/fonts_ver2/paybooc-Bold.eot'),
    url('/web_resources/fonts_ver2/paybooc-Bold.eot?#iefix') format('embedded-opentype'),
    url('/web_resources/fonts_ver2/paybooc-Bold.woff') format('woff'),
    url('/web_resources/fonts_ver2/paybooc-Bold.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'paybooc-Medium';
    src: local('paybooc-Medium.eot');
    src: url('/web_resources/fonts_ver2/paybooc-Medium.eot'),
    url('/web_resources/fonts_ver2/paybooc-Medium.eot?#iefix') format('embedded-opentype'),
    url('/web_resources/fonts_ver2/paybooc-Medium.woff') format('woff'),
    url('/web_resources/fonts_ver2/paybooc-Medium.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'NanumSquare';
    src: local('NanumSquareB.eot');
    src: url('/web_resources/fonts_ver2/NanumSquareB.eot'),
    url('/web_resources/fonts_ver2/NanumSquareB.woff?#iefix') format('embedded-opentype'),
    url('/web_resources/fonts_ver2/NanumSquareB.woff') format('woff'),
    url('/web_resources/fonts_ver2/NanumSquareB.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}



/*220809    폰트 추가 */


@font-face {
    font-family: 'paybooc-Light';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07@1.0/paybooc-Light.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'paybooc-Medium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07@1.0/paybooc-Medium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}




/*

@font-face {
    font-family: 'paybooc-Medium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07@1.0/paybooc-Medium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
*/



.fo_pm{ font-family: 'paybooc-Medium';}
.fo_pb{ font-family: 'paybooc-Bold';}




/* ==========
 * 이미지 ICON
 * ========== */
.img_icon {
    display: inline-block;
    height: 28px;
    width: 28px;
    border-radius: 100%;
    background: #F2F3F5;
    color: #a9aec2;
    text-align: center;
}

.img_icon .fa {
    line-height: 28px;
}

/* img_icon 버튼형으로 쓰일때 */
.img_icon.btn {
    cursor: pointer;
}

.img_icon.com {
    background: #596dbb;
    color: #fff;
}

.img_icon.mod {
    background: #00AD94;
    color: #fff;
}


/* ================================
 * width, height
 * ================================ */
.w6{width: 6%;}
.w10{width: 10%  !important;  }
.w12{width: 12%  !important;  }
.w15{width: 15%  !important;  }
.w18{width: 18%  !important;  }
.w20{width: 20%  !important;  }
.w25{width: 25%  !important;  }
.w30{width: 30%  !important;  }
.w33{width: 33% !important;}
.w34{width: 34%  !important;  }
.w35{width: 35%  !important;  }
.w40{width: 40% !important;}
.w44{width: 44%!important;}
.w48{width:48% !important;}
.w50{width:50% !important;}
.w53{width:53% !important;}
.w54{width:54% !important;}
.w55{width:55% !important;}
.w56{width:56% !important;}
.w60{width:60% !important;}
.w65{width:65% !important;}
.w68{width:68% !important;}
.w70{width:70% !important;}
.w80{width:80% !important;}
.w85{width:85%;}
.w88 {width: 88% !important;}
.w90{width:90% !important;}
.w95 {width: 95% !important;}
.w100{width:100% !important;
}
.w36x {width: 36px !important;}
.w45x{ width: 45px !important;}
.w50x {width: 50px;}
.w60x {width: 60px;}
.w65x {width: 65px;}
.w70x {width: 70px;}
.w80x {width: 80px;}
.w86x {width: 86px;}
.w90x {width: 90px;}
.w100x {width: 100px;}
.w110x {width: 110px;}
.w115x {width: 115px;}
.w120x {width: 120px !important;}
.w130x {width: 130px !important;}
.w133x {width: 133px !important;}
.w135x {width: 135px;}
.w140x {width: 140px !important;}
.w150x {width: 150px !important;}
.w153x {width: 153px;}
.w155x {width: 155px;}
.w160x {width: 160px !important;}
.w180x {width: 180px;}
.w200x {width: 200px; }
.w250x {width: 250px; }
.w280x {width: 280px; }
.w400 {width: 400px;}
.w700 {width: 700px;}
.w1300 {width:1300px !important;}
.he17{height: 17px;}
.he18{height: 18px;}
.he19{height: 19px;}
.he20x{height: 20px !important;}
.he22x{height: 22px !important;}
.he24x{height: 24px !important;}
.he25x{height: 25px !important;}
.he30x{height: 30px !important;}
.he32x{height: 32px !important;}
.he34x{height: 34px !important;}
.he36x{height: 36px !important;}
.he40x{height: 40px !important;}
.he75x{height: 75px !important;}
.he76x{height: 76px !important;}
.he80x{height: 80px !important;}
.he100x{height: 100px !important;}
.he140x{height: 140px !important;}
.he170x{height: 170px !important;}
.he100p {height: 100% !important;}

/* ================================
 * margin, padding
 * ================================ */
.mg0 {margin: 0 !important;
}
.mgr2{margin-right: 2px !important; }
.mgr4{margin-right: 4px !important; }
.mgr5{margin-right: 5px !important; }

.mr6{margin-right: 6px;}
.mgr7{margin-right: 7px !important; }
.mgr8{margin-right: 8px !important; }
.mgr10{margin-right: 10px !important; }
.mgr12{margin-right: 12px !important; }
.mgr15{margin-right: 15px !important; }
.mgr16{margin-right: 16px !important; }
.mgr20{margin-right: 20px !important; }
.mgr24{margin-right: 24px !important; }
.mgr30{margin-right: 30px !important; }
.mgr32{margin-right: 32px !important; }
.ml10{margin-left: 10px;}
.ml20{margin-left: 20px;}
.ml40{margin-left: 40px;}
.mgl2{margin-left: 2px !important;}
.mgl3{margin-left: 3px !important;}
.mgl4{margin-left: 4px !important;}
.mgl5{margin-left: 5px !important;}
.mgl7{margin-left: 7px !important; }
.mgl8{margin-left: 8px !important;}
.mgl10{margin-left: 10px !important; }
.mgl12{margin-left: 12px !important; }
.mgl15{margin-left: 15px !important; }
.mgl16{margin-left: 16px !important; }
.mgl20{margin-left: 20px !important; }
.mgl24{margin-left: 24px !important; }
.mgl25{margin-left: 25px !important; }
.mgl32{margin-left: 32px !important; }
.mgl35{margin-left: 35px !important; }
.mgt2 {margin-top: 2px !important;}
.mgt3 {margin-top: 3px !important;}
.mgt4 {margin-top: 4px !important;}
.mgt5 {margin-top: 5px !important;}
.mgt6 {margin-top: 6px !important;}
.mgt8 {margin-top: 8px !important;}
.mgt10 {margin-top: 10px !important;}
.mgt12 {margin-top: 12px !important;}
.mt13{margin-top: 13px;}
.mgt15 {margin-top: 15px !important;}
.mgt16 {margin-top: 16px !important;}
.mt17{margin-top: 17px;}
.mt20{margin-top: 20px;}
.mgt24 {margin-top: 24px !important;}
.mt25{margin-top: 25px;}
.mt30{margin-top: 30px;}
.mgt32 {margin-top: 32px !important;}




/*확인해봐야함*/
.mr4{margin-right: 4px;}
.mt4{margin-top: 4px;}
.mt6{margin-top: 6px;}
.mt8{margin-top: 8px;}
.mb10{margin-bottom: 10px;}
.mr7{margin-right: 7px;}
.mr5{margin-right: 5px;}
.mr16{margin-right: 16px;}


.mb3{margin-bottom: 3px;}
.mb5{margin-bottom: 5px;}
.mgb8 {margin-bottom: 8px !important;}
.mgb10 {margin-bottom: 10px !important;}
.mgb12 {margin-bottom: 12px !important;}
.mgb15 {margin-bottom: 15px !important;}
.mgb16 {margin-bottom: 16px !important;}
.mb20  {margin-bottom: 20px;}
.mgb24 {margin-bottom: 24px !important;}
.mgb30 {margin-bottom: 30px !important;}
.mgb32 {margin-bottom: 32px !important;}

.pad0  {padding: 0 !important;}
.padt5 {padding-top: 5px !important;}
.padt10 {padding-top: 10px !important;}
.padt12 {padding-top: 12px !important;}
.padt15 {padding-top: 15px !important;}
.padt16 {padding-top: 16px !important;}
.padt20 {padding-top: 20px !important;}
.padt24 {padding-top: 24px !important;}
.padl4 {padding-left: 4px;}
.padl6 {padding-left: 6px;}
.padl7 {padding-left: 7px;}
.padl8 {padding-left: 8px;}
.padl10 {padding-left: 10px;}
.padl15 {padding-left: 15px;}
.padl16 {padding-left: 16px;}
.padr4 {padding-right: 4px;}
.padr6 {padding-right: 6px;}
.padr7 {padding-right: 7px;}
.padr8 {padding-right: 8px;}
.padr10 {padding-right: 10px;}
.padr15 {padding-right: 15px;}
.padr16 {padding-right: 16px;}

.padr20{padding-right: 20px;}
.pdb16{padding-bottom: 16px;}
.pdb17{padding-bottom: 17px;}
.pd8{padding: 8px;}
.pd24{padding: 24px;}

/* ================================
 * display, position, float, text-align
 * ================================ */
.dp_i-b {display: inline-block;}
.dp_flex {display: flex;}
.fr {float: right;}
.fl {float: left;}
.txt-l {text-align: left !important;}
.txt-r {text-align: right !important;}
.txt-c {text-align: center !important;}
.center-all {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.cen{
    position: absolute;
    left: 50%;
    top: 10;
    transform: translate(-50%, -50%);
}
.hide {
    line-height:0;
    font-size:1px;
    overflow:hidden;
}
select::-ms-expand {
    display: none; /* IE 10, 11 */
}


.none_show {
    display: none !important;
}
/* ================================
 * scroll(overflow)
 * ================================ */
.y-scroll {overflow-y: auto;}
.x-scroll {overflow-x: auto;}
.scroll {overflow: auto;}
.p-sticky {position: sticky; top: 0; z-index: 99;}

/* ================
 * font(text) 설정
 * ================ */
.txtred {color: red; font-style: normal;}
.tix_point {color: #FD397A;}
.po {color: #F45C3E;}
.fontb {font-weight: bold;}
.fs16{font-size: 16px;}
.fs11 {font-size: 11px;}
.fs20 {font-size: 20px;}

/* ================
 * 기타 설정
 * ================ */
.border0 {border: 0 !important;}


/* ================================
 * 공통 button style
 * ================================ */

.btn_warp {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    vertical-align: middle;

}

.btn_add {
    text-align: center;
    padding: 10px;
    border-radius: 10px 25px;
}

.btn_add:hover {
    background: rgba(39, 100, 247, 0.25);
    padding: 10px 25px;
    border-radius: 20px;
}

.btn_s {
    background-color: #2764f7;
    padding: 0 0.8em;
    border-radius: 6px;
    color: #fff;
}

.btn_s1 {
    background: rgba(39, 100, 247, 0.15);
    padding: 0 0.8em;
    border-radius: 6px;
}

.btn_s1:hover {
    background: rgba(39, 100, 247, 0.35);
    padding: 0 0.8em;
    border-radius: 6px;
    color: #FFF;
}

.btn-st1 {
    background: #4E5983;
    color: #fff;
    padding: 0 0.8em;
    border-radius: 6px;
    margin-bottom: 70px;
}

.btn-st1:hover {
    background: #334596;
    transition: .25s;
}


.btn-st2 {
    background: #8796be;
    color: #fff;
    padding: 0 0.8em;
    border-radius: 6px;
}

.btn-st2:hover {
    background: #5a6e9b;
    transition: .15s;
}

.btn-st3 {
    background: #A016E6;
    color: #fff;
    padding: 0 0.8em;
    border-radius: 6px;
}

.btn-st3:hover {
    background: #B92FFF;
    transition: .25s;
}

.btn-st4 {
    background: #1CC69F;
    color: #fff;
    padding: 0 0.8em;
    border-radius: 6px;
}

.btn-st4:hover {
    background: #3CDEB9;
    transition: .25s;
}

.btn-st5 {
    background: rgba(78, 89, 131, 0.15);
    padding: 0 0.8em;
    border-radius: 6px;
}

.btn-st5:hover {
    background: rgba(78, 89, 131, 0.3);
    transition: .25s;
}

.btn-st6 {
    background: #F0F0F8;
    color: #4C5C77;
    padding: 0 0.8em;
    border-radius: 6px;
}

.btn-st6:hover {
    background: #e4e4ef;
    transition: .15s;
}


.btn_search {
    background: #4E5983;
    color: #fff;
    padding: 0 0.8em;
    border-radius: 6px;
    font-weight: 600;
}

.btn_excel {
    background: #fff;
    color: #2e7d32;
    border: 1px solid #92c294;
    padding: 0 0.8em;
    border-radius: 6px;
}

.btn_excel:hover {
    background: #DEEFDF;
    border: 1px solid #2e7d32;
    transition: .25s;
}

button .fa {
    opacity: 0.6;
}

/*220829  추가  */
button {
    background-color: transparent;
}

/* 첨부파일 */
.attach-file {
    padding: 8px 12px 4px 12px !important;
}

.attach-file .filename {
    display: inline-block;
    float: left;
    padding: 0 8px;
    margin-right: 4px;
    margin-bottom: 4px;
    height: 30px;
    line-height: 30px;
    border-radius: 6px;
    background: #E2E7F7;
    font-weight: 700;
}

.attach-file .filename:last-child {
    margin-right: 0;
}

/* ================================
 * 공통 속성
 * ================================ */

/*차트많이 보이게  접기 전체 0904 추가*/
.container_1 {
    display: flex;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background: #131418;
}

.contents-area {
    display: inline-block;
    position: relative;
    height: 100%;
    width: calc(100% - 240px); /* 사이드 접힘 전 컨텐츠영역 크기*/
    vertical-align: top;
    font-size: 14px;
}

.subtxt {
    font-size: 0.7em;
    font-weight: 400;
    opacity: 0.5;
}

/* ============
 * 토글 toggle -- 2021-09-27
 * ============ */
.toggle + span {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 24px;
    border-radius: 24px;
    background: #dedede;
    box-shadow: 0 0 3px inset rgba(0, 0, 0, 0.05);
    cursor: pointer;
}

.toggle + span:after {
    content: "";
    float: left;
    display: block;
    margin: 3px;
    height: 18px;
    width: 18px;
    border-radius: 18px;
    background: #fff;
}

.toggle:checked + span {
    background: #00AD94;
}

.toggle:checked + span:after {
    float: right;
}

/* 토글 Big-size 추가 - 2021-10-07 */
.toggle.big + span {
    width: 56px;
    height: 32px;
    border-radius: 32px;
}

.toggle.big + span:after {
    margin: 4px;
    height: 24px;
    width: 24px;
    border-radius: 24px;
}



/* 줄바꿈 / 왼쪽정렬 */
.td_txtover {white-space: normal; line-height: 1.6em; text-align: left;}


.hidden {
    display: none !important;
}
.icon_menu{
    height: 19px;
    margin-top: 14px;
}