@charset "utf-8";
/*폰트*/
@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 100;
    src: local('Noto Sans Thin'), local('NotoSans-Thin'),
    url(font/google/NotoSansKR-Thin.eot),
    url(font/google/NotoSansKR-Thin.eot?#iefix) format('embedded-opentype'),
    url(font/google/NotoSansKR-Thin.woff) format('woff'),
    url(font/google/NotoSansKR-Thin.otf) format('opentype');
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 300;
    src: local('Noto Sans Light'), local('NotoSans-Light'),
    url(font/google/NotoSansKR-Light.eot),
    url(font/google/NotoSansKR-Light.eot?#iefix) format('embedded-opentype'),
    url(font/google/NotoSansKR-Light.woff) format('woff'),
    url(font/google/NotoSansKR-Light.otf) format('opentype');
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 400;
    src: local('Noto Sans Regular'), local('NotoSans-Regular'),
    url(font/google/NotoSansKR-Regular.eot),
    url(font/google/NotoSansKR-Regular.eot?#iefix) format('embedded-opentype'),
    url(font/google/NotoSansKR-Regular.woff) format('woff'),
    url(font/google/NotoSansKR-Regular.otf) format('opentype');
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 500;
    src: local('Noto Sans Medium'), local('NotoSans-Medium'),
    url(font/google/NotoSansKR-Medium.eot),
    url(font/google/NotoSansKR-Medium.eot?#iefix) format('embedded-opentype'),
    url(font/google/NotoSansKR-Medium.woff) format('woff'),
    url(font/google/NotoSansKR-Medium.otf) format('opentype');
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 700;
    src: local('Noto Sans Bold'), local('NotoSans-Bold'),
    url(font/google/NotoSansKR-Bold.eot),
    url(font/google/NotoSansKR-Bold.eot?#iefix) format('embedded-opentype'),
    url(font/google/NotoSansKR-Bold.woff) format('woff'),
    url(font/google/NotoSansKR-Bold.otf) format('opentype');
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;

    font-weight: 900;
    src: local('Noto Sans Black'), local('NotoSans-Black'),
    url(font/google/NotoSansKR-Black.eot),
    url(font/google/NotoSansKR-Black.eot?#iefix) format('embedded-opentype'),
    url(font/google/NotoSansKR-Black.woff) format('woff'),
    url(font/google/NotoSansKR-Black.otf) format('opentype');
}

/* 사이트 공통 스타일 */
*,*:after,*:before { box-sizing: border-box; vertical-align: top; }
html { font-size: 62.5%; text-shadow: 1px 1px 1px rgba(0,0,0,0.004); }
html, body { width:100%; height:100%; color:#3a3a3a; min-width: 1300px; }
body { font-family: Noto Sans KR,'Sans-serif'; font-size:13px; color:#3a3a3a; letter-spacing: -0.5px; background-color: #fff; text-rendering: auto; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
a { text-decoration:none; color:#3a3a3a; }
::selection {background:#0017C1; color:#FFF; text-shadow:none; }
::-moz-selection {background:#0017C1; color:#FFF; text-shadow:none; }
::-webkit-selection {background:#0017C1; color:#FFF; text-shadow:none; } 
input:-ms-input-placeholder { color: #acacac; }
input::-webkit-input-placeholder { color: #acacac; } 
input::-moz-placeholder { color: #acacac; }
textarea:-ms-input-placeholder { color: #acacac; }
textarea::-webkit-input-placeholder { color: #acacac; } 
textarea::-moz-placeholder { color: #acacac; }

/*폼 요소*/
input, textarea,option, button { font-family: 'Noto Sans KR','Sans-serif'; font-size: 16px; color:#3a3a3a; letter-spacing:-1px; }
input[type=text],input[type=password],textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
select { font-family: 'Noto Sans KR', 'Sans-serif'; font-size:16px; color:#3a3a3a; letter-spacing: -1px; width: 150px; height: 30px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; }
textarea:focus { outline: none; }
button:focus { outline: none; }
input:focus { outline: none; }
select:focus { outline: none; }

/*숨김처리*/
.blind { position:absolute; font-size:0; line-height:0; height:0; }

/*테스트*/
.testBorder { border:1px solid red !important; }
.testBg { background-color:yellow !important; }

/*클리어픽스*/
.clearfix:after { display: block; height: 0; clear: both; content: ''; }

/*헤더*/

.view-container { position: relative; overflow: hidden; height: 100%; width: 100%; overflow-y: scroll;  }
.view-container .t-bar { width:50%; background: #fff; box-shadow: 0 0.313rem 0.75rem rgb(7,9,25,0.05), 0 0.126rem 0.15rem rgb(7,9,25,0.05); position: fixed; width: 100%; top: 0; right:0; width: calc(100% - 230px); z-index: 3; padding: 20px;}

.view-container .t-bar .right-tool-area { float: right; }
.view-container .t-bar .right-tool-area .board-tool { display: inline-block; }
.view-container .t-bar .right-tool-area .log-out-btn { display: inline-block; width: 90px; line-height: 55px; border-left: 1px solid #efefef; color: #767676; text-align: center; }
.view-container .t-bar .right-tool-area .log-out-btn img { vertical-align: middle; margin-top:3px;}

.view-container .t-bar .right-tool-area ul.board-tool > li { display: inline-block; margin-right: 20px; position: relative; }
.view-container .t-bar .right-tool-area ul.board-tool > li:after { position: absolute; content: ''; width: 1px; background:  #d0d0d0; height: 10px; top:22px; right: -11px;  }
.view-container .t-bar .right-tool-area ul.board-tool > li:last-child:after { display: none;  }
.view-container .t-bar .right-tool-area ul.board-tool > li > a { color: #767676; }
.view-container .t-bar .right-tool-area ul.board-tool > li > a:hover { color: #333; }
.view-container .t-bar .right-tool-area ul.board-tool > li > a > i.down { font-size: 11px; margin-left: 5px; position: relative; top: 4px;}
.view-container .t-bar .right-tool-area ul.board-tool > li ul.depth-02 {display: none; position:absolute; top: calc(100% + 10px); left: 50%; margin-left: -65px; background: #fff; padding: 5px 0; width: 130px; border-radius: 2px; box-shadow: 0 0.1rem 0.75rem rgb(7,9,25,0.1), 0 0.126rem 0.15rem rgb(7,9,25,0.1);}
.view-container .t-bar .right-tool-area ul.board-tool > li.on ul.depth-02 { display: block; }
.view-container .t-bar .right-tool-area ul.board-tool > li ul.depth-02 li a { padding: 5px 15px; display: block; color: #666; }
.view-container .t-bar .right-tool-area ul.board-tool > li ul.depth-02 li:hover a { background: #f5f5f5; color: #000; }
.view-container .t-bar .right-tool-area ul.board-tool > li ul.depth-02 li a i { margin-right: 7px; position: relative; top: 4px; }
.view-container .t-bar .right-tool-area ul.board-tool > li ul.depth-02 li.logout {margin-top: 5px; border-top: 1px solid #e3e3e3; }
.view-container .t-bar .right-tool-area ul.board-tool > li ul.depth-02 li.logout a { padding: 5px 15px; margin-top: 5px;}
.view-container .t-bar .right-tool-area ul.board-tool > li ul.depth-02 li:first-child a i { margin-right: 4px; font-size: 12px;}

/* 콘텐츠 네비게이션 */
.view-container .t-bar .top-navi {float:left; }
.view-container .t-bar .top-navi>ul { display: inline-block; }
.view-container .t-bar .top-navi>ul>li { display: inline-block; margin-right: 30px; position: relative; }
.view-container .t-bar .top-navi>ul>li:after { position: absolute; width: 8px; height: 14px; content: ''; background: url(../../img/common/top_navi_ico.png) no-repeat; top: 8px; right: -20px; }
.view-container .t-bar .top-navi>ul>li:last-child:after,
.view-container .t-bar .top-navi>ul>li:nth-last-child(2):after { display: none; }
.view-container .t-bar .top-navi>ul>li:nth-last-child(2) { margin-right:15px; }
.view-container .t-bar .top-navi>ul>li.project-home a { font-size: 13px; font-weight: 400; background:#e1e5ef; border-radius: 20px; padding: 3px 15px; color:#454d5f; }
.view-container .t-bar .top-navi>ul>li.project-home a i {font-size:11px; position: relative; top: 9px; margin-right: 5px;}
.view-container .t-bar .top-navi>ul>li.project-home a:hover {background: #d0d6e2; -webkit-transition:background .2s;-moz-transition:background .2s;-ms-transition:background .2s;-o-transition:background .2s;transition:background .2s;}
.view-container .t-bar .top-navi>ul>li>a { font-size: 14px; font-weight: 600; color: #404040;  }
.view-container .t-bar .top-navi>ul>li:nth-last-child(2) a { font-weight: 600; }
.view-container .t-bar .top-navi>ul>li:last-child a { margin-right: 0; }
.view-container .t-bar .top-navi .normal-btn { margin-right: 0; }

/* 레프트메뉴 */
.view-container .l-bar .logo-area { border-bottom: 1px solid #1d2c42; width: 100%; text-align: center; }
.view-container .l-bar .logo-area h1 { display: block; height: 100%; width:100%;}
.view-container .l-bar .logo-area h1 a { display: block; height: 100%; width:100%; padding: 20px 0; }
.view-container .l-bar .logo-area h1 a img { width: 130px; }

.view-container .l-bar { width: 230px; background: #0f143a; height: 100%; text-align: center; position: fixed; left: 0; top:0; z-index: 3; }
.view-container .l-bar > ul > li { display: block; width: 100%; text-align: left; border-bottom: 1px solid #1d2c42;}
.view-container .l-bar > ul > li > a:hover,
/*.view-container .l-bar > ul > li.select > a { color: #fff;}*/
.view-container .l-bar > ul > li > a {position: relative;  display: block; padding: 10px; color:#858896; font-size: 12px; cursor: default; }
.view-container .l-bar > ul > li > a h2 { font-size: 12px; display: inline-block; font-weight: 500; }
.view-container .l-bar > ul > li ul.depth-02 li a { color: #858896; padding: 10px 10px 10px 25px; display: block; font-size: 13px; position: relative; }
.view-container .l-bar > ul > li ul.depth-02 li a i { position: relative; top: 4px; margin-right: 10px; font-size: 12px;}
.view-container .l-bar > ul > li ul.depth-02 li a i.chevron-right { position: absolute; top: 50%; margin-top: -5px; margin-right: 0; right: 15px; font-size: 10px; }
.view-container .l-bar > ul > li ul.depth-02 li:hover a,
.view-container .l-bar > ul > li ul.depth-02 li.select a { background: rgba(255,255,255,0.08); color: #fff;}
.view-container .l-bar > ul > li.select ul.depth-02 { display: block; }


.view-container .back-bar { position: fixed; width: 124px; height: 100%; top: 0; left: 0; z-index: 2; background: #474145;  }

.view-container .foot { position: fixed; width: 124px; height: 25px; bottom: 0; left: 0; z-index: 3; text-align: center; background: #08101b; line-height: 25px; }
.view-container .foot span { color: #AAAAAA; font-size: 11px; font-weight: 100; letter-spacing: 0; font-family: 'Arial'; display: block; }

.view-container .content-container { padding-left: 230px; background: #F0F0F0; min-height: 100%; padding-top: 55px; position: relative; }
.view-container .content-container .content-content { padding: 30px; padding-right: 0; }

/* Tool */

.back-btn { width: 36px; height: 36px; display: inline-block; border-radius: 3px; transition: background 0.15s ease-in; position: relative; margin-top: 2px; margin-right: 30px; }
.back-btn:hover { background: #f2f2f2; }
.back-btn:after { position: absolute; content: ''; width: 1px; height: 15px; background: #dcdcdc; top: 9px; right: -10px;  }
.back-btn .ico { background: url(../../img/common/tool_ico.png) no-repeat; display: block; width: 17px; height: 17px; background-position: -6px -5px; margin: 0 auto; margin-top: 8px; }

.searching-box { width: 480px; height: 40px; display: inline-block; position: relative; border-bottom: 1px solid #f2f2f2; }
.searching-box:hover { border-color: #dcdcdc; }
.searching-box input[type=text] { height: 40px; width: 100%; outline: 0; font-size: 15px;  border-style: none; background-color: #f2f2f2; padding-left: 45px; color: #585858; border-radius: 3px; transition: background 0.2s ease-in; }
.searching-box .search-ico { width: 17px; height: 17px; background: url(../../img/common/tool_ico.png); background-position: -27px -5px; position: absolute; z-index: 2; top: 12px; left: 15px; }
.searching-box input[type=text]:focus { background-color: transparent; }

.card-length { overflow: hidden; height: 36px; display: inline-block; width: 72px;  }
.card-length li { width: 36px; height: 36px; float: left; }
.card-length li a { display: block; width: 36px; height: 36px; border: 1px solid #dcdcdc; text-align: center; }
.card-length li:last-child a { border-left: none; }
.card-length li a .ico { width: 12px; background: url(../../img/common/tool_ico.png) no-repeat; display: inline-block; }
.card-length li .short .ico { background-position: -6px -25px; height: 12px; margin-top: 11px; }
.card-length li .long .ico { background-position: -27px -25px; height: 12px; margin-top: 12px; margin-right: 1px; }
.card-length .select .short .ico { background-position: -6px -42px; height: 12px; margin-top: 11px; }
.card-length .select .long .ico { background-position: -27px -42px; height: 12px; margin-top: 12px; margin-right: 1px; }

.priority-select { display: inline-block; }
.priority-select li { display: inline-block; line-height: 36px; font-size: 13px; margin-right: 16px; position: relative;}
.priority-select li:after { position: absolute; width: 1px; height: 12px; content: ''; background: #dcdcdc; top: 12px; right: -9px;  }
.priority-select li:last-child { margin-right: 0; }
.priority-select li:last-child:after { display: none;  }
.priority-select li  a { color: #bdbdbd; font-weight: 400; }
.priority-select li:hover  a { color: #585858; font-weight: 600; transition: color .3s; }
.priority-select .select  a { color: #585858; font-weight: 600; }

/* vertic table */
.vertic-table { position: relative; width: 100%; }
.vertic-table table { width: 100%; border-top: 1px solid #e3e3e3; font-size: 14px;}
.vertic-table table tr { border-bottom: 1px solid #e3e3e3; }
.vertic-table table tr th { font-weight: 600; vertical-align:middle; background: #f0f0f0; padding: 0 20px; }
.vertic-table table tr td { padding: 7px 10px; height: 48px; vertical-align: middle;}

/* boarder table */
.board-table { position: relative; width: 100%; }
.board-table table { width: 100%; table-layout: fixed;}
.board-table table thead tr { border-top: 1px solid #e3e3e3; border-bottom: 2px solid #e3e3e3; }
.board-table table thead tr th { text-align: center; padding: 7px 2px; vertical-align: middle; font-weight: 600; font-size: 13px; word-break: break-all; }
.board-table table tbody tr:nth-child(2n-1) { background: #fafafa; }
.board-table table tbody tr td { text-align: center; padding: 7px 2px; vertical-align: middle; font-size: 13px; word-break: break-all; border-bottom: 1px solid #e3e3e3; color: #555; font-weight: 300; }
.board-table table tbody tr td a.link { color: #3a6ebd; font-weight: 400; }
.board-table table tbody tr td a.link:hover { text-decoration: underline; }
.board-table table tbody tr td.ellipsis { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.board-table table tr td.txt-left,
.board-table table tr th.txt-left { text-align: left; }
.board-table table tr.empty td { height: 200px; font-size: 13px; color: #888;}
.board-table table tr.empty td i { display: block; font-size: 24px; margin-bottom: 10px; color: #a9a9a9; }

/* 게시글 토탈 */
.board-table .total { margin-bottom: 13px; font-size: 14px; }
.board-table .total span { font-weight: 600; }
.required { display: inline-block; font-size: 10px; color: #E60000; margin-left: 4px; position: relative; top: 3px; }

/* default 버튼 */
.normal-btn { width: 110px; height: 36px; line-height: 36px; border-radius: 3px; background: #0017C1; display: inline-block; text-align: center; font-size: 15px; color: #fff; font-weight: 400; margin-right: 25px; transition: box-shadow .15s ease; }
.normal-btn:hover { box-shadow: 1px 2px 4px 0px rgba(0, 0, 0, 0.2); }
.default-btn.small-btn { width: auto; height: 27px; line-height: 24px; border-radius: 3px; font-size: 13px; padding: 0 15px;}
.default-btn { padding: 0 30px; height: 30px; line-height: 27px; border: 1px solid #dcdcdc; display: inline-block; font-size: 12px; color: #797979; font-weight: 400; border-radius: 3px; -webkit-transition: background .3s, border .3s;-moz-transition:background .3s, border .3s;-ms-transition:background .3s, border .3s;-o-transition:background .3s, border .3s;transition:background .3s, border .3s;}
.default-btn:hover {background:#fafafa;}
.default-btn.bttn-fill {background:#0017C1; color:#fff; border-color: #0017c1}
.default-btn.bttn-fill:hover {background:#03159e; border-color: #03159e}
.default-btn i { position: relative; top: 8px; margin-right: 5px; }


/* 이메일 폼 */
.email-form input[type="text"].text-input { width: 150px; }
.email-form span.unit { font-size: 13px; color: #999; padding: 0 3px; line-height: 30px; }

/* 버튼정렬 */
.btn-align-wrap { position: relative; text-align: center; margin-top: 20px;}
.btn-align-wrap:after { content: ''; display: block; clear: both; }
.btn-align-wrap .btn-align { display: inline-block; }
.btn-align-wrap .btn-align a { margin: 0 5px; }
.btn-align-wrap .btn-align.btn-left { float: left; }
.btn-align-wrap .btn-align.btn-right { float: right; }


/* 색상 컴포넌트 */
.f2-bg { background: #fff; border-color: #d1d4d7; color: #8B8B8B; transition: background .25s ease; }
.f2-bg:hover { background: #f2f2f2; }
.blue-bg { background: #001ad9; border-color: #001ad9; color: #fff; transition: background .25s ease; }
.blue-bg:hover { background: #0017C1; border-color: #0017C1; }
.blue-border-bg { background: #fff; border-color: #001ad9; color: #001ad9; }
.blue-border-bg:hover { background: #f8f8f8; }
.green-bg { background: #399d03; border-color: #399d03; color: #fff; transition: background .25s ease; }
.green-bg:hover { background: #368e06; border-color: #368e06; }
.red-bg { background: #811818; border-color: #811818; color: #fff; transition: background .25s ease; }
.red-bg:hover { background: #751313; border-color: #751313; }
.orange-bg { background: #d05d00; border-color: #d05d00; color: #fff; transition: background .25s ease; }
.orange-bg:hover { background: #C15600; border-color: #C15600; }
.skygray-bg { background: #72798c; border-color: #72798c; color: #fff; transition: background .25s ease; }
.skygray-bg:hover { background: #6A7184; border-color: #6A7184; }
.navy-bg { background: #0f143a; border-color: #0f143a; color: #fff; transition: background .25s ease; }
.navy-bg:hover { background: #050821; border-color: #050821; }
.green-border-bg { background: #fff; border-color: #399d03; color: #399d03; }
.green-border-bg:hover { background: #f8f8f8; }
.red-border-bg { background: #fff; border-color: #811818; color: #811818; }
.red-border-bg:hover { background: #f8f8f8; }
.orange-border-bg { background: #fff; border-color: #d05d00; color: #d05d00; }
.orange-border-bg:hover { background: #f8f8f8; }
.navy-border-bg { background: #fff; border-color: #0f143a; color: #0f143a; }
.navy-border-bg:hover { background: #f8f8f8; }

/* checkbox */
.check { display: inline-block; margin-right: 10px; }
.check input[type=checkbox] { display: none; }
.check input[type=checkbox] + label { letter-spacing: 0; font-size: 13px; padding-left: 20px; position: relative; }
.check input[type=checkbox] + label:before { width: 15px; height: 15px; position: absolute; content: ''; display: block; background: url(../../img/common/check.png) no-repeat; background-size: 15px; height: 15px;top: 2px; left: 0; }
.check input[type=checkbox]:checked + label:before { background: url(../../img/common/check.png) no-repeat; background-size: 15px; height: 15px; background-position: 0 -15px; }

/* radio */
.check-radio { display: inline-block; margin-right: 10px;}
.check-radio input[type=radio] { display: none; }
.check-radio input[type=radio] + label { letter-spacing: 0; font-size: 13px; padding-left: 20px; position: relative; }
.check-radio input[type=radio] + label:before { width: 15px; height: 15px; position: absolute; content: ''; display: block; background: url(../../img/common/radio.png) no-repeat; background-size: 15px; height: 15px;top: 2px; left: 0; }
.check-radio input[type=radio]:checked + label:before { background: url(../../img/common/radio.png) no-repeat; background-size: 15px; height: 15px; background-position: 0 -15px; }

/* 텍스트 인풋 */
input[type=text].text-input { height: 33px; background: #fff; border-style: none; border-radius: 3px; width: 370px; outline: 0; padding-left: 10px; color: #585858; border-radius: 3px; transition: background 0.1s ease; letter-spacing: 0; font-size: 12px;border: 1px solid #ddd; }
input[type=text].text-input:hover { border-color: #bbb; }
input[type=text].text-input.s-width { width: 80px; }
input[type=text].text-input.l-width { width: 100%; }

/* 캘린더 인풋 */
.date-select-wrap { display: inline-block; }
.date-select-wrap .unit { font-size: 12px; color: #999; margin: 0 5px; position: relative; top: 4px; }
.date-select { display: inline-block; position: relative; }
.date-select .calendar-btn { position: absolute; display: block; width: 14px; height: 20px; top: 4px; right: 10px; opacity: 0.5; z-index: 1; transition: opacity .2s ease; }
.date-select .calendar-btn:hover { opacity: 1; }
.date-select .calendar-btn i { position: relative; top: 6px; }
.normal-txt-input { height: 33px; border: 1px solid #dee3eb; border-radius: 3px; outline: 0; font-size: 12px; transition: border-color .2s ease, box-shadow .2s ease; padding: 0 30px 0 10px; line-height: 31px; font-weight: 300; color: #2d2d2d; width: 140px;}
.normal-txt-input:focus,
.normal-txt-input:active,
.normal-txt-input:hover { border-color: #bbb; }
/* 페이징 */
.paging { text-align: center; margin-top: 20px; }
.paging ul { display: inline-block; }
.paging ul li { display: inline-block; width: 25px; height: 25px; }
.paging ul li a { display: block; width: 100%; height: 100%; border-radius: 3px; text-align: center; line-height: 24px; font-size: 12px; letter-spacing: 0; transition: background 0.2s ease; border-radius: 50%;}
.paging ul li a:hover { background: #f0f0f0; }
.paging ul li a i {line-height: 25px;}
.paging ul li a img { margin-top: 12px; }
.paging ul li.select a { background: #0f143a; color: #fff; font-weight: bold; }
.paging ul li.select a:hover { background: #0f143a; }


/* 탭메뉴 */
.page-tab {margin-bottom:20px;}
.page-tab ul { position:relative; overflow: hidden; height: 32px; font-size:14px; z-index: 1;}
.page-tab ul:after {content:''; position:absolute; width:100%; height:1px; background:#001ad9; bottom:0; left:0; z-index: -1;}
.page-tab ul li {position:relative; display: inline-block; height:32px; }
.page-tab ul li a {min-width:80px; display: block; line-height: 30px; border:1px solid #dee3eb; border-right:none; border-bottom:1px solid #001ad9; text-align: center; background:#dee3eb; padding:0 15px; font-size:1.3rem; border-radius: 5px 5px 0 0; }
.page-tab ul li:last-child a { border-right: 1px solid #dee3eb; }
.page-tab ul li.select a {background:#fff; border-bottom-color: #fff; border:1px solid #001ad9; border-bottom:1px solid #fff; color: #001ad9; }

/* float */
.float-l { float: left !important; }
.float-r { float: right !important; }
.mg-bt10 { margin-bottom: 10px !important; }

/* 셀렉트 박스  */
.selectbox { position: relative; border-style: none; z-index: 1; display: inline-block; border: 1px solid #ddd; height: 33px; width: 150px; border-radius: 3px; cursor: pointer; background: #fff; }
.selectbox:hover { border-color: #ccc; }
.selectbox:before { content: ""; position: absolute; top: 48%; right: 10px; width: 0; height: 0; margin-top: -1px; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 4px solid #797a7c; cursor: pointer; }
.selectbox select { width: 100%; line-height: normal; font-family: inherit; border: 0; font-size: 13px; filter: alpha(opacity=0); -webkit-appearance: none; -moz-appearance: none; appearance: none; margin-left: 0; height: 100%; cursor: pointer; color: #333; padding: 5px 20px 5px 10px;}
.selectbox select option { font-size: 14px; }

/* 셀렉트+인풋 검색 ui */
.search-wrap { float: right; }
.search-wrap .search-wrap { border-radius: 3px 0 0 3px; }
.search-wrap input[type=text].text-input { border-radius: 0; width: 350px; background: #f0f0f0; border-color: #f5f5f5; float: left;}
.search-wrap a.default-btn { border-radius: 0 3px 3px 0; height: 33px; line-height: 31px; float: left; padding: 0 15px;}
.search-wrap a.default-btn i { margin-right: 0; top: 10px; }

/* 팝업레이어 */
.pop-up-layer { position: fixed; z-index: 1002; width: 100%; height: 100%; background-color: rgba(0,0,0,0.3); top: 0; left: 0; }
.pop-up-layer .pop-up { width: 480px; background: #fff; border-radius: 5px; box-shadow:3px 6px 15px 6px rgba(0, 0, 0, 0.15); position: fixed; left: 50%; top: 50%; padding: 30px; padding-bottom: 90px; min-width: 300px; transform: translate(-50%,-50%);}
.pop-up-layer .pop-up .pop-up-title { font-size: 18px; font-weight: 500; margin-bottom: 25px; display: block; }
.pop-up-layer .pop-up .input-area { display: block; margin-bottom: 25px; }
.pop-up-layer .pop-up .input-area:last-child { margin-bottom: 0; }
.pop-up-layer .pop-up .input-area .input-name { font-size: 15px; color: #8a8a8a; display: block; width: 100%; margin-bottom: 5px;  }
.pop-up-layer .pop-up .input-area input[type=text],
.pop-up-layer .pop-up .input-area input[type=password] { height: 33px; background: #fff; border-style: none; border-radius: 3px; width: 100%; outline: 0; padding-left: 10px; color: #585858; border-radius: 3px; transition: background 0.1s ease; letter-spacing: 0; font-size: 13px;border: 1px solid #ddd; }
.pop-up-layer .pop-up .input-area input[type=text]:focus,
.pop-up-layer .pop-up .input-area input[type=password]:focus,
.pop-up-layer .pop-up .input-area input[type=text]:hover,
.pop-up-layer .pop-up .input-area input[type=password]:hover { border-color: #bbb; }
.pop-up-layer .pop-up .input-area input:disabled { background: #f0f0f0; }
.pop-up-layer .pop-up .input-area input:disabled:hover { border-color: #ddd; }
.pop-up-layer .pop-up .input-area textarea { background: #fff; border-style: none; border-radius: 3px; width: 100%; outline: 0; color: #585858; border-radius: 3px; transition: background 0.1s ease; letter-spacing: 0; font-size: 13px;border: 1px solid #ddd; resize: none; padding: 10px; height: 200px; }
.pop-up-layer .pop-up .input-area textarea:focus,
.pop-up-layer .pop-up .input-area textarea:hover { border-color: #bbb; }
.pop-up-layer .pop-up .input-area .selectbox { width: 100%; }

.alarm { font-size: 12.5px; color: #e44a49; margin-top: 10px; display: block; line-height: 12px; }
.alarm i { margin-right: 3px; }

.pop-up-layer .pop-up .btn-area, 
.pop-up-layer .pop-up .btn-align-wrap { position: absolute; right: 30px; bottom: 30px; width: calc(100% - 60px); text-align: right;}
.pop-up-layer .pop-up .btn-area a:last-child { margin-left: 5px; }

.pop-up-layer .pop-up .pop-close-btn { position: absolute; top: 15px; right: 30px; font-size: 15px; }

.pop-up-layer .pop-up .table-area .table-box { max-height: 225px; overflow-y: scroll; overflow-x: hidden; border-radius: 3px; }
.pop-up-layer .pop-up .table-area table { width: 420px!important; }
.pop-up-layer .pop-up .table-area table thead tr { height: 32px; border-bottom: 2px solid #e3e3e3; border-top:1px solid #e3e3e3;}
.pop-up-layer .pop-up .table-area table thead tr th { vertical-align: middle; font-weight: bold; font-size: 14px; word-break: break-all;  }
.pop-up-layer .pop-up .table-area table thead tr th:first-child { padding-left: 3%; }
.pop-up-layer .pop-up .table-area table thead tr .scenario-name { width: 60%; }
.pop-up-layer .pop-up .table-area table thead tr .date{ width: 35%; }

.pop-up-layer .pop-up .table-area table tbody tr { height: 35px; }
.pop-up-layer .pop-up .table-area table tbody tr:nth-child(2n-1) { background: #fafafa; }

.pop-up-layer .pop-up .table-area table tbody tr td { vertical-align: middle; font-size: 13px; word-break: break-all; border-bottom:1px solid #e3e3e3;}
.pop-up-layer .pop-up .table-area table tbody tr td:first-child { padding-left: 3%; }
.pop-up-layer .pop-up .table-area table tbody tr .scenario-name { max-width: 310px;  }
.pop-up-layer .pop-up .table-area table tbody tr .scenario-name span { display: inline-block; width: 90%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }


.pop-up-layer .select-area { margin-bottom: 15px; font-size: 14px; color: #585858; }
.pop-up-layer .select-area .selector { position: relative; }
.pop-up-layer .select-area .selector .select-btn  { height: 25px; display: inline-block; }
.pop-up-layer .select-area .selector .select-btn .selecting { padding-right: 25px; font-weight: bold; position: relative; }
.pop-up-layer .select-area .selector .select-btn .selecting:after { position: absolute; content: ''; width: 0; height: 0; border-top: 4px solid #acacac; border-left: 4px solid transparent; border-right: 4px solid transparent; top: 8px; right: 8px;  }

.pop-up-layer .select-area .selector .detail-selector { position: absolute; background: #fff; width: 160px; left: -60px; top: 35px; border-radius: 10px; box-shadow: 3px 6px 15px 6px rgba(0, 0, 0, 0.15); overflow: hidden; overflow-y: scroll; max-height: 220px; -ms-overflow-style: none;}
.pop-up-layer .select-area .selector .detail-selector ul li { height: 40px; line-height: 40px; font-size: 13px; border-bottom:1px solid #dcdcdc; }
.pop-up-layer .select-area .selector .detail-selector ul li:last-child { border-bottom: none; }
.pop-up-layer .select-area .selector .detail-selector ul li a { display: block; padding: 0 10px; transition:  background 0.15s ease-in; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pop-up-layer .select-area .selector .detail-selector ul .select a { background: #f8f8f8; font-weight: bold; }
.pop-up-layer .select-area .selector .detail-selector ul li a:hover { background: #f8f8f8; color: rgba(0,0,0,1.00); }

/* 툴팁 */
.content-container .tool-tip { position: absolute; z-index: 3; top: 60px; left: 15px; }
.content-container .tool-tip .tool-tip-content { padding: 10px; border: 1px solid #0017c1; font-family: 'Dotum','Arial'; font-size: 11px; background: #0017c1; color: #f8f8f8; text-align: center; position: relative; border-radius: 3px; cursor: default; -webkit-box-shadow: 1px 1px 3px 1px rgba(50, 50, 50, 0.3); -moz-box-shadow: 1px 1px 3px 1px rgba(50, 50, 50, 0.3); box-shadow: 1px 1px 3px 1px rgba(50, 50, 50, 0.3); line-height: 15px; white-space: pre-wrap; }
.content-container .tool-tip .tool-tip-content:before { width: 0; height: 0; content:''; position: absolute; border-bottom: 5px solid  #0017c1; border-left: 5px solid transparent; border-right: 5px solid transparent; top: -6px; left: 10%; margin-left: -5px; z-index: 4; }


/* i 버튼 */
.txt-modify-btn { position: relative;line-height: 50px; margin-left:11px; color:#adb0b7; cursor: pointer; font-size:13px; }
.txt-modify-btn:hover {color:#153a4e; }
.txt-modify-btn:hover:after {content: ''; position: absolute; top:10px; left:-7px; border-radius: 50px; width: 28px; height: 28px; background:rgba(0, 0, 0, 0.05);}

.complete-btn { position: relative;line-height: 50px; margin-left:11px; color:#adb0b7; cursor: pointer; font-size:13px; }
.complete-btn:hover { color: #153a4e;}
.complete-btn:hover:after {content: ''; position: absolute; top:10px; left:-7px; border-radius: 50px; width: 28px; height: 28px; background:rgba(0, 0, 0, 0.05);}

.close-btn { position: relative;line-height: 50px; margin-left:11px; color:#adb0b7; cursor: pointer; font-size:13px; }
.close-btn:hover { color: #153a4e;}
.close-btn:hover:after {content: ''; position: absolute; top:10px; left:-9px; border-radius: 50px; width: 28px; height: 28px; background:rgba(0, 0, 0, 0.05);}

.star-btn { position: absolute; top: -10px; left:10px; }

.right-btn {position: absolute; top:18px; right:18px; font-size:15px; color: #153a4e;cursor: pointer;}
.right-btn:hover:after {content: ''; position: absolute; top:-7px; left:-11px; border-radius: 50px; width: 28px; height: 28px; background:rgba(0, 0, 0, 0.05);}

/* 박스 서브메뉴 */
.btn-wrap {z-index: 2; width:160px; position: absolute; top:45px; right:15px; box-shadow: 3px 6px 15px 6px rgba(0, 0, 0, 0.15); background:#fff; border-radius: 10px; overflow:hidden;}
.btn-wrap .md-menu {position: relative; width: 100%;}
.btn-wrap .md-menu ul {width:100%; padding:0;}
.btn-wrap .md-menu ul li {line-height: 40px; font-size:13px; border-bottom:1px solid #dcdcdc; padding:0 15px; width:100%;-webkit-transition: background .3s;-moz-transition: background .3s;-ms-transition: background .3s;-o-transition: background .3s;transition: background .3s;}
.btn-wrap .md-menu ul li:hover {background:#f2f2f2;}
.btn-wrap .md-menu ul li a {display: block; width:100%; height:100%;color: #505050;}
.btn-wrap .md-menu ul li i{ line-height: 42px; margin-right:7px}

.user-tool-area .input-area .login .login-btn { background: #001ad9; font-weight: 500; box-shadow: 0 5px 10px 0px rgba(0,0,0,0.0); transition: background .25s ease,box-shadow .25s ease; border: none; display: block; width: 100%; margin-top: 50px; color: #fff; height: 55px; border-radius: 30px; line-height: 55px; font-weight: 400; outline: 0; }
.user-tool-area .input-area .login .login-btn:hover { background: #0017C1; box-shadow: 0 5px 10px 0px rgba(0,0,0,0.3); }

.info-input input[type=text],
.info-input input[type=password],
.info-input textarea { height: 33px; background: #fff; border-style: none; border-radius: 3px; width: 370px; outline: 0; padding-left: 10px; color: #585858; border-radius: 3px; transition: background 0.1s ease; letter-spacing: 0; font-size: 12px;border: 1px solid #ddd; }
.info-input textarea { resize: none;padding: 10px; height: 200px; }
.info-input input[type=text]:hover,
.info-input input[type=password]:hover,
.info-input textarea:hover { border-color: #bbb; }


.view-container .content-container .content-content { position: relative; }
.view-container .content-container .content-content .content-wrap { width: 100%; padding-right: 20px; }
.view-container .content-container .content-content .content-wrap .subject-title { font-size: 17px; color: #404040; font-weight: 600; margin-bottom: 15px; }
.view-container .content-container .content-content .content-wrap .info-area {padding: 25px; background: #fff; overflow-y: auto; border-radius: 2px; border: 1px solid #dee3eb; }
.view-container .content-container .content-content .content-wrap .info-area .info-input .subject { font-size: 14px; font-weight: 400; color: #585858; min-width: 130px; display: inline-block; line-height: 33px; }


/* 검색 조건 */
.search-list .board-table { margin-top: 10px; }
.search-list .board-table table tbody tr td a.link i { position: relative; top: 4px; margin-right: 2px; font-size: 11px;}
.search-list .btn-align-wrap.tool-btn .btn-align a { margin-left: 0; margin-right: 3px; padding: 0 12px; height: 25px; line-height: 23px;}
.search-list .btn-align-wrap.tool-btn .btn-align a.disabled { opacity: .5; cursor: no-drop; }
.search-list .btn-align-wrap.tool-btn .btn-align a.disabled:hover { background: #fff; }
.search-list .btn-align-wrap.tool-btn .btn-align a i { font-size: 10px; top: 6px; }
.search-list .check { margin-right: 0; }
.search-filter .input-check-wrap .check,
.search-filter .input-check-wrap .check-radio { position: relative; top: 4px; }
.search-filter .input-check-wrap .info-input { display: inline-block; }
.search-filter .input-check-wrap .date-select-wrap { margin-right: 10px; }


/* 토글 버튼 */
.normal-toggle-btn { display: inline-block; height: 28px; }
.normal-toggle-btn input[type=checkbox] { display: none; }
.normal-toggle-btn .toggle-label { letter-spacing: -0.5px; color: #999; font-size: 13px; padding-left: 35px; position: relative; height: 28px; line-height: 28px; transition: color 0.3s ease; }
.normal-toggle-btn .toggle-label:before { position: absolute; content:''; background: #dcdcdc; width: 30px; height: 6px; left: 0; top: 50%; margin-top: -3px; border-radius: 3px; z-index: 1; }
.normal-toggle-btn .toggle-label:after { position: absolute; content:''; width: 12px; height: 12px; border-radius: 50%; left: 0; top: 50%; margin-top: -6px; z-index: 2; transition: left 0.3s ease,background 0.3s ease; background: #8A8A8A; }
.normal-toggle-btn input[type=checkbox]:checked + .toggle-label { color: #00addb; font-weight: 600; }
.normal-toggle-btn input[type=checkbox]:checked + .toggle-label:after { left: 18px; background: #00addb; }


/* 수집 상태 애니메이션 */
.sc-status .circle { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-top: 7px; margin-right: 2px; }
.sc-status .stats { font-weight: 500; line-height: 21px; font-size: 13px; letter-spacing: -1px; }
.complete .circle { background: #56e06f; }
.complete .stats { color: #56e06f; }
.ready .stats { color: #727272; }
.ready .circle { background: #727272; }
.loader .stats { color: #03a9f4; }
.loader .circle { position: relative; background-color: #03a9f4; width: 10px; height: 10px; margin-top: 6px; margin-right: 0; }
.loader .circle:after { content: ''; position: absolute; border-radius: 50%; top: 50%; left: 50%; border: 0px solid white; transform: translate(-50%, -50%); animation: status-loading 1s ease forwards infinite; }
.error .stats { color: #FF686A; }
.error .circle { position: relative; background: #FF686A; animation: error .7s ease forwards infinite; opacity: 1;}
@keyframes status-loading {
  0% { border: 0px solid white; }
  20% { border: 2px solid white; width: 0%; height: 0%; }
  100% { border: 2px solid white; width: 100%; height: 100%; }
}
@keyframes error {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}