itsm_ysm/bin/main/static/css/layout.css.bak
2025-08-11 18:05:26 +09:00

458 lines
42 KiB
CSS

@charset "utf-8";
#wrap {width:100%;margin:0 auto;}
.row::after {content:""; display:block; clear:both;}
.cell {float:left; box-sizing:border-box;}
/* header */
.header_wrap {position: relative; width:100%; background:#fff;}
.header_wrap .header-inner {position:relative; width:1240px; min-width: 1240px; height:100%; margin:0 auto;}
.header_wrap .header-top {width: 100%; height: 65px; margin: 0 auto; background:#fff;}
.header_wrap .header-top > .inner {position: relative; width: 1200px; height: 65px; margin: 0 auto;}
/* util */
.header_wrap .header-top .util {float:right; height:65px; margin-top:16px; right:0; display: inline-block;}
.header_wrap .header-top .util li {position: relative; display: inline-block; vertical-align: middle; height:28px; line-height:28px; color:#666; font-size:13px;margin-left: 20px;}
.header_wrap .header-top .util li > img {vertical-align: top;}
.header_wrap .header-top .util li > a {font-size:13px; color:#333;}
.header_wrap .header-top .util li .name {display: inline-block; padding-left:18px; margin-right: 4px;color:#108abf;font-weight:500;}
.header_wrap .header-top .util li .name:before {position:absolute; content:''; display:block; background: url('../images/main/ico_user.png') 0 0 no-repeat;left:0;top:7px;width:14px;height:14px;}
.header_wrap .header-top .util li .logout {display: inline-block; padding-left:18px; margin-right: 14px;}
.header_wrap .header-top .util li .logout:hover {color:#108abf;}
.header_wrap .header-top .util li .logout:before {position:absolute; content:''; display:block; background: url('../images/main/ico_logout.png') 0 0 no-repeat;left:0;top:7px;width:14px;height:14px;}
.header_wrap .logo {position:relative; display:inline-block; height:35px;width:211px;top:13px;left:0px;cursor:pointer; text-indent: -9999px; background:url(../images/main/logo.png) 0 center no-repeat;}
/* gnb */
.header_wrap .wrap-nav {width: 100%;min-width: 1240px;height:55px;background:#1c3d88; border-top:1px solid #e6e8eb;border-bottom:1px solid #e6e8eb;}
.header_wrap .wrap-nav:after {display:block;clear:both;content:''}
.header_wrap .wrap-nav .gnb {width:auto; height:55px; margin:0 auto;overflow:hidden; position:relative; display: flex; -webkt-display: flex; -moz-display: flex;}
.header_wrap .wrap-nav .gnb > li {position:relative; float: left; height:55px;}
.header_wrap .wrap-nav .gnb > li + li {margin-left:60px;}
.header_wrap .wrap-nav .gnb > li > a {position:relative; font-size:19px;font-weight:600;color:#fff;height:55px;line-height:53px;display: block; box-sizing:border-box;}
.header_wrap .wrap-nav .gnb > li > a:after {content:""; display:block; clear:both; width: 1px; height: 14px; background-color: #ccc; position: absolute; top: 18px; left:-28px; margin-top:0;}
.header_wrap .wrap-nav .gnb > li:first-child > a:after {display: none;}
.header_wrap .wrap-nav .gnb > li > a:hover {color:#4066cb;text-decoration:none;}
/* 전체메뉴 */
.header_wrap .all_btn {position:absolute; top:0; right:0;}
.header_wrap .all_btn:after {clear:both; display:block; content:"";}
.header_wrap .all_btn button:first-child {margin-left:0;}
.header_wrap .all_btn .toggle-menu {width:50px; height:55px; background:url("../images/main/btn_hamb.png") no-repeat center center; background-size:25px 20px; position:relative; top:0; font-size:0;}
.allMenu {display:none; width:100%; height:500px; position:fixed; top:65px; right:0; z-index:6; background-color:#fff; padding:0; text-align: left; z-index:99; margin:0 auto;}
.allMenu:before {content:''; position:fixed; width:100%; height:100%; left:0; top:500px; bottom:0; background:rgba(0, 0, 0, 0.5); z-index:0;}
.allMenu .user-wrap {width:100%; height:55px; padding-left:30px; position:relative; background:#1569aa; z-index:99; margin: 0 auto; text-align: center;}
.allMenu .user-wrap .menu-inner {position:relative; width:1240px; max-width: 1240px; height:100%; margin:0 auto;}
.allMenu .user-wrap .menu-logo {position: relative; display:inline-block; margin-left: -130px; padding:0; width:230px; height:100%; background:url('../images/main/logo_w.png') no-repeat 0;}
.allMenu .user-wrap .logo-txt {position: absolute; top:10px; font-size:23px; color:#fff; font-weight: 500;}
.allMenu .m-gnb {display:block; width:100%; max-width:1240px; margin:0 auto; padding:40px 0 0 0; z-index:99;}
.allMenu .m-gnb ul {overflow:hidden; }
.allMenu .m-gnb ul li a {position:relative; font-size:15px; color:#111; font-weight: 500; }
.allMenu .m-gnb ul li a:focus {text-decoration:none;}
.allMenu .m-gnb ul li a:only-child:after {display:none;}
.allMenu .m-gnb > ul > li {float:left; width:18%; min-height:0px; margin: 0 15px 30px 0;}
.allMenu .m-gnb > ul > li > a {display:block; padding:12px 0; font-size:20px; color:#108abf; font-weight: 500; text-align: center;border:1px dashed #108abf;}
.allMenu .m-gnb > ul > li > a:hover {color:#108abf; text-decoration:none;}
.allMenu .m-gnb > ul > li > a .link {display:inline-block; width:12px; height:12px; margin-left:3px; background-size:100%;}
.allMenu .m-gnb > ul > li.curr > a,
.allMenu .m-gnb > ul > li > a:hover {text-decoration:none;}
.allMenu .m-gnb ul.depth-2 {overflow:hidden; padding-bottom:0px; margin-top:10px;}
.allMenu .m-gnb ul.depth-2 > li > a {display:block; font-size:15px; font-weight:400; line-height:30px; color:#444; padding-left:12px;}
.allMenu .m-gnb ul.depth-2 > li > a:before {content:''; position:absolute; top:15px; left:0; width:6px; height:1px; background-color:#777;}
.allMenu .m-gnb ul.depth-2 > li > a:hover {color:#108abf; text-decoration:none;}
.allMenu .gnb-close {position:absolute; margin:0; top:0; right:25px; right:18.5%;z-index:99;}
.allMenu .gnb-close button {width:50px; height:50px; display:block; background:url("../images/main/btn_close.png") no-repeat center; background-size:21px 21px; text-indent:-9999px;}
/* Layout */
#container {position:relative; width:100%; margin:0 auto; background-color: #f3f4f8;}
#container:after {clear: both;content: "";display: block;}
.inner {position: relative; width: 1240px; margin: 0 auto; box-sizing: border-box; padding: 10px 0 50px;}
#container .side_Wrap {position:relative; float:left; width:220px;}
#container .body_wrap {float: right; width: calc(100% - 230px);}
#container .body_wrap .content {width:100%; margin:0 auto; padding: 20px 25px 30px; border: 1px solid #e0e0e0; background-color: #fff;}
.side_Wrap h2 {overflow: hidden; display: flex; align-items: center; justify-content: center; width: 100%; height: 98px; font-size: 23px; font-weight: normal; line-height: 1; color: #fff; background: #1f74ca; border-radius: 28px 0 0 0; box-sizing: border-box;}
/* lnb menu */
#lnb {float: left; width: 100%;}
#lm {width: 100%;}
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {margin: 0;padding: 0;border: 0;list-style: none;line-height: 1;display: block;letter-spacing:-0.8px;color:#4f5157;position: relative;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;text-decoration: none;cursor: pointer;}
#cssmenu {width: 100%;}
#cssmenu ul ul {display: none;}
.align-right {float: right;}
.holder {background:none}
.holder::after, .holder::before {display: block;position: absolute;content: "";right: 15px;z-index: 10;background:none}
.holder::after {top: 15px;background:none}
.holder::before {top: 15px;}
#cssmenu > ul > li > a {display: block; position: relative; padding: 15px 15px; font-size: 15px;font-weight: 500;color: #4f5157; border: 1px solid #ddd; border-top: 0; background:#fff;}
#cssmenu > ul > li > a:before {content:""; display:block; position:absolute; top:50%; right:20px; margin-top:-7px; width:13px; height:13px; background-image:url(../images/common/ico_lnb_1dh.png); background-repeat:no-repeat; transition: all 0s ease 0s }
#cssmenu > ul > li > a:hover:before {background-image:url(../images/common/ico_lnb_1dh_hover.png);}
#cssmenu > ul > li > a:last-child {border-bottom: none;}
#cssmenu > ul > li > a:hover {color: #617ba1; text-decoration:underline;}
#cssmenu > ul > li.active > a,
#cssmenu > ul > li.open > a {display: block; position: relative; color: #fff; border: 0; background: #617ba1;}
#cssmenu > ul > li.open > a:before {content:""; display:block; position:absolute; top:50%; right:20px; margin-top:-7px; width:13px; height:13px; background:#617ba1 url(../images/common/ico_lnb_1dh_on.png); background-repeat:no-repeat; transition: all 0s ease 0s }
#cssmenu ul ul {background:#f7f9fc;border: 1px solid #ddd;border-top: 0; padding: 7px 0 10px;}
#cssmenu ul ul li a {position: relative; display: block; padding: 8px 0 8px 25px; font-size:14px; font-weight:500; color:#424242 !important; letter-spacing:-0.6px; font-weight: normal;}
#cssmenu ul ul li a:before {display:block; position:absolute; top:14px; left:15px; width:4px; height:4px; background-color:#a9a9ab; content:'';}
#cssmenu ul ul li a.on {color: #617ba1 !important; font-weight: normal;}
#cssmenu ul ul li a.on:before {display:block; position:absolute; top:14px; left:15px; width:4px; height:4px; background-color:#617ba1; content:'';}
#cssmenu > ul > li.open > ul {display:block;}
#cssmenu ul ul li:hover a,
#cssmenu ul ul li.open a,
#cssmenu ul ul li.active a {position: relative; display: block; color: #108abf !important;}
#cssmenu ul ul li:hover a:before,#cssmenu ul ul li.open a:before,#cssmenu ul ul li.active a:before {content:''; display:block; position:absolute; top:14px; left:15px; width:4px; height:4px; background-color:#617ba1;}
#cssmenu ul ul li.active a:after, #cssmenu ul ul li.open a:after, #cssmenu ul ul li a:hover:after {border-color: none;}
/* footer */
#footer {width:100%;background:#636676; clear:both; height:70px; bottom:0;}
#footer .box {position: relative; width:1240px; margin:0 auto; overflow:hidden;}
#footer .box p.fLogo {float:left; padding:20px 40px 20px 0;}
#footer .box address {color:#cececf; font-size:14px; margin-top:15px; text-transform:uppercase; text-align:left;}
#footer .box p.copy {color:#cececf; font-size:13px; text-align:left;}
#footer .box .menu {position: absolute; top: 25px; right: 0;}
#footer .box .menu li {display:inline-block;}
#footer .box .menu li:not(:last-child) {position:relative; margin-right:1.2em;}
#footer .box .menu li:not(:last-child):after {content:""; position:absolute; top:6px; right:-0.8em; width:1px; height:8px; background-color:#8b8a8a;}
#footer .box .menu li a {color:#dfdfdf; font-size:14px;}
#footer .box .menu li a:hover {color:#77a5f9;}
/* location */
.location {position:relative; width:100%; height:23px; display: block; box-sizing:border-box; vertical-align: top;}
.location .route_navi {position:absolute; top: 0; right:0;}
.location .route_navi li {float: left; line-height:26px; font-size: 14px; color:#666; font-weight:normal; letter-spacing:-0.05em; padding:0 10px 0 15px; background: url('../images/common/route_arrow.png') no-repeat 0 8px;}
.location .route_navi li .home {display: inline-block; background: url('../images/common/icon_home.png') no-repeat 0 0; padding: 0; width: 17px; height:15px; font-size:0; text-indent:-9999px;}
.location .route_navi li.home a span {float: left;font-size: 0; height: 0;line-height: 0; position: absolute;visibility: hidden;width: 0;}
.location .route_navi li:last-child {line-height: 26px; color:#333; font-weight:500; padding-right: 0;}
.location .route_navi li:first-child {background:none;}
/* title */
.main_tit {position:relative; width:100%; box-sizing:border-box;}
.main_tit h3 {display:block; padding:0 0 15px; color:#222; font-size:30px; font-weight:500;}
.content h4 {font-size:20px; margin:10px 0 10px; color: #444; font-weight:500; letter-spacing:-0.05em;}
.content h4:before {display: inline-block; content: ""; width:5px; height:16px; margin-right:7px; background:#617ba1; vertical-align:middle; margin-top:-5px;}
/* search */
.search_wrap {position: relative; display: block; margin:0 auto 20px; padding: 14px 40px; box-sizing: border-box; text-align:center; background-color: #f2f4f7; border: 1px solid #eee;}
.search_wrap .form_group {display: inline-block; width: 60%; margin-left: auto; margin-right: auto;}
.form_group {position: relative; white-space: nowrap; display: inline-block;/*display: table;*/}
.search_wrap .inline {margin-bottom:10px;display: inline;white-space: nowrap;float: left;text-align: left;position: relative;}
.search_wrap .form-label {display: inline-block; color: #444; font-size: 14px; font-weight:500; letter-spacing: -0.4px; padding: 0 10px 0 20px;}
.search_wrap input[type=text], .search_wrap input[type=search], .search_wrap select {height: 32px;}
.search_wrap select {width:120px;}
.search_wrap input[type="text"] {width: 300px;}
.search_wrap .search_btn {width:80px; height:32px; color:#fff; font-size:15px; border:0px; background-color:#305597;}
.search_wrap .essential {color: #fb5666; font-size: 15px; line-height: 12px; vertical-align: middle;}
.search_wrap .datepicker {width:100%;}
.search_wrap label {vertical-align: middle;}
.btn_calendar {display:inline-block;width: 16px; height: 17px; background: #fff url(../images/common/ico_calendar.png) no-repeat 94% 50%; cursor: pointer;padding-right: 16px;}
.btn_calendar span {display:inline-block; text-indent:-10000px;}
.ui-draggable, .ui-droppable {background-position: top;}/*달력관련*/
/* Button style */
.button, .button a {display:inline-block;cursor:pointer;color:inherit;text-align:center;overflow:visible;background:#fff; padding:0;text-decoration: none !important;vertical-align:middle;white-space:nowrap;margin:0;}
.button:hover {font-weight: normal;}
.button.btn_small {display:inline-block; padding:0px 16px !important;border:1px solid #1b263c;background-color:#1b263c;color:#fff;font-size:14.5px;font-weight:500;height: 38px;line-height: 36px;vertical-align:middle;cursor: pointer;}
.button.btn_small:hover {border:1px solid #101829;background-color:#101829;color:#fff;}
/* button style */
.btn-Area {width:100%;justify-content:space-between;margin-top:20px;display: flex; -webkt-display: flex; -moz-display: flex;}
.pagination + .btn-Area {margin-top:20px;}
.btn-Area button {height:40px; line-height:38px; border:1px solid #ccc; font-size:15px;font-weight:500;padding:0 20px;border-radius:0;text-align:center;min-width:60px;}
.btn-Area.bt-sm button {min-width:30px}
.btn-Area > div:first-child button {margin-right:2px;}
.btn-Area > div > div + div {margin-top:5px;}
.btn-Area > div + div > button,.btn-Area > div + div > button + button {margin-right:0px;}
.btn-Area > div + div > button + button {margin-left:2px;}
.listToparea .l-sorting button,.btn-Area.top-sm button, .btn-Area.bt-sm button,.btn-Area.top-sm .btn-ico-sms {height:30px;line-height:28px;font-size:13px;font-weight:500;padding:0 10px;min-width:30px}
.listToparea .l-sorting button,.top-sm button {background-color:#fff; border:1px solid #ddd; color:#333;}
.listToparea .l-sorting button:hover,.top-sm button:hover {background-color:#fff; border:1px solid #a3a3a3;}
.btn-Area .btn-primary {background-color:#4066cb; border:1px solid #4066cb; color:#fff;}
.btn-Area .btn-primary:hover {background-color:#2449aa; border:1px solid #2449aa;}
.btn-Area .btn-normal {background-color:#fff; border:1px solid #ccc; color:#333;}
.btn-Area .btn-normal:hover {background-color:#f3f8ff; border:1px solid #9f9f9f;}
.btn-Area .btn-secondary{background-color:#42506e;border:1px solid #42506e;color:#fff;}
.btn-Area .btn-secondary:hover{background-color:#172035;border:1px solid #172035;}
.btn-Area .btn-tertiary{background-color:#f3f3f3;border:1px solid #ddd;color:#333;}
.btn-Area .btn-tertiary:hover{border-color:#a3a3a3;}
.btn-Area .btn-excel {background-color:#107c41;border:1px solid #107c41;color:#fff;}
.btn-Area .btn-excel:hover {background-color:#0d6937;border-color:#0d6937;}
.btn-Area .btn-emps01 {background-color:#fff;border:1px solid #4066cb;color:#4066cb;}
.btn-Area .btn-emps02 {background-color:#fff;border:1px solid #fd5827;color:#fd5827;}
.btn-Area .btn-emps01:hover {background-color:#f5f9ff;}
.btn-Area .btn-emps02:hover {background-color:#fff8f6;}
.add-btn {align-items:stretch;}
.add-btn .form-control:first-child {flex:1}
.add-btn .btn-ico {width:34px; height:32px; border:1px solid #bbb;background:#f5f5f5;color:#666;padding:0;line-height:30px;margin-left:3px;}
.add-btn .form-control:disabled + .btn-ico,.add-btn .form-control:disabled + .btn-ico + .btn-ico {opacity:.5;}
.add-btn .i-search {top:-1px;position:relative;width:32px;height:32px; background: url('../images/common/search_i_b.png') center center no-repeat; background-size:16px auto;}
.add-btn .i-search:hover {top:-1px;position:relative;width:32px;height:32px; background: #7d7d7d url('../images/common/search_i_w.png') center center no-repeat; background-size:16px auto;}
.add-btn:hover .form-control:disabled,.add-btn:hover .form-control:disabled + .btn-ico,.add-btn:hover .form-control:disabled + .btn-ico + .btn-ico {opacity:1;}
.add-btn.disabled:hover .form-control:disabled + .btn-ico {opacity:.5;background-color:#fff;border:1px solid #ff0000;cursor:default;}
td .form-control + button, .form-control + button + button + button, .form-control + button + button {margin-left: 5px;}
td .btn-ico {display: inline-block; background-color: transparent; border: 0; text-align: Center;}
td .form_group {display: inline-block; position: relative; width: 100%; box-sizing: border-box;}
td .form-control + .add-btn {width:100%;display:inline-block;vertical-align:middle;}
.inlineBox {align-items: center;display: flex; -webkt-display: flex; -moz-display: flex;}
.btn-ico span {display:inline-block;vertical-align:middle;text-indent:-999999em!important;font-size:0!important;line-height:0!important;}
/* in btn */
.btn {display:block; height:32px; line-height:30px; font-size:13px; font-weight:400; padding:0 8px;}
.table .btn, .tbl_form .btn {height:32px; line-height:30px;}
.modify .btn {height:32px; line-height:30px;}
.btn.btn-form,.tbl_form .btn.btn-copy,.fileSelectBox .fileinput-button,.inlineBox.rv .fileinput-button {background:#f5f5f5;border:1px solid #bbb;color:#555;}
.btn.btn-form:hover,.tbl_form .btn.btn-copy:hover,td .inlineBox > button:hover,.fileSelectBox .fileinput-button:hover {background:#7d7d7d;border:1px solid #7d7d7d;color:#fff;}
.inlineBox.rv .fileinput-button .btn.btn-form {background:transparent;border:0px solid #bbb;}
.inlineBox.rv .fileinput-button .btn.btn-form:hover {background:#7d7d7d;border:1px solid #7d7d7d;color:#fff!important;}
/* 첨부파일 */
.rv {flex-direction: row-reverse;}
.uploader li {justify-content:space-between;align-items:center;}
.uploaderTop div *,.uploader li * {font-size:13px;}
.uploaderTop {padding-bottom:5px;}
.fileinput-button {position:relative; overflow:hidden; display:block; margin-top:5px;}
.fileinput-button:hover {background:#ededed;}
.fileinput-button * {font-size:13px!important;}
.fileinput-button .btn-addfile {display:inline-block;vertical-align:middle;width:75px;height:32px;line-height:30px;background:transparent;color:#333;padding:0 10px;cursor:pointer;text-align:Center;}
.fileinput-button > input {position:absolute;top:0px;right:0;margin:0;opacity:0;-ms-filter:'alpha(opacity=0)';font-size:21px!important;width:500px;direction:ltr;cursor:pointer;}
.uploaderTop .btn-delAll, .uploaderTop .tx-result {margin-left:10px;position:relative;top:3px;}
.tableStyle .uploaderTop .btn-delAll {color:#333;background:transparent;border:0;height:16px;line-height:16px;}
.tableStyle .uploaderTop .btn-delAll:hover {text-decoration:underline;background:transparent;border:0;}
.uploaderTop .tx-result, .uploaderTop .filesize strong {color:#3683c3;}
.uploaderTop .filesize {position:Relative;top:5px;}
.fileinput-button.selcimg {width:80px;height:32px;line-height:30px;margin-top:0;}
.fileinput-button.selcimg .btn-addfile {width:80px;padding:0 0px}
.inlineBox .fileinput-button + .form-control {margin-left:5px;}
.uploader li {justify-content: space-between; align-items: center;}
.uploader li {padding:1px 0 2px;}
.uploader li > * {padding:0 10px}
.uploader li div {display: flex; -webkt-display: flex; -moz-display: flex;}
.uploader div, .uploader li > span {height: 18px; line-height: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.uploader .header h6 + h6 {border-left:1px solid #fff;}
.uploader .header h6 {font-weight:normal;height:21px;line-height:21px;}
.uploader .header h6:first-child, .uploader li > div {flex:1;}
.uploader .header h6 + h6, .uploader li > span {width:20%;text-align:right;}
.uploader .header + li,.uploader li:first-child {margin-top:8px;}
.uploader .header {background:#e7e7e7;color:#333;padding:0 0;margin-top:0px!important;}
.inlineBox.rv .fileinput-button {cursor:pointer;margin-top:0;}
.inlineBox.rv .fileinput-button:hover span {color:#fff;}
.fileSelectBox .fileinput-button + .form-control {margin-left:0;flex:1;}
.fileSelectBox .fileinput-button {word-break:keep-all;-ms-word-break:keep-all;width:70px;cursor:pointer;white-space:nowrap;margin-left:5px;height:32px;}
.fileSelectBox .fileinput-button .btn-normal,.fileSelectBox .fileinput-button .btn-normal:hover {background:transparent;border:0;}
.fileSelectBox + .uploader {border: 0; margin-bottom: 5px;}
.uploader div,.uploader li > span,.downloader li > a{height:18px;line-height:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.uploader div button, .uploader div i, .downloader li a > i{text-indent:-999999em!important;font-size:0!important;line-height:0!important;}
.uploader div button{display:block;width:18px;height:18px;background:url(../images/common/ico-close-xs.png) center no-repeat;border:0;padding:0;margin-right:3px;margin-left:-2px;opacity:.6;}
.uploader div button:hover{opacity:1;}
.uploader div i, .downloader li a > i{display:block; width:18px; height:18px; margin-right:7px;background-position:center;background-repeat:no-repeat;}
.progress + .uploader,.fileSelectBox + .uploader{border:0;margin-bottom:5px;}
.uploader.scroll-Y {border:1px solid #e1e1e1;padding-bottom:7px;margin-bottom:5px;}
.uploader.scroll-Y {height:135px;}
.progress + .uploader li > div,.fileSelectBox + .uploader li > div{padding:0 5px;}
/* 파일종류별 아이콘 */
.tbl_form td .btn-dfile[class^='ico'] {display:inline-block;height:20px;width:20px;vertical-align:middle;background-position:center;background-repeat:no-repeat;text-indent:-999999em!important;font-size:0!important;line-height:0!important;}
.tbl_form td .btn-dfile:hover {text-decoration:underline!important;}
.btn-dfile > i[class^='ico-'] {display:inline-block;height:20px;width:20px;vertical-align:middle;margin-right:3px;background-position:center;background-repeat:no-repeat;text-indent:-999999em!important;font-size:0!important;line-height:0!important;}
.ico-zip {background-image:url(../images/common/ico-zip.png);}
.ico-hwp {background-image:url(../images/common/ico-hwp.png);}
.ico-pdf {background-image:url(../images/common/ico-pdf.png);}
.ico-ppt {background-image:url(../images/common/ico-ppt.png);}
.ico-excel {background-image:url(../images/common/ico-excel.png);}
.ico-img{background-image:url(../images/common/ico-img.png);}
.ico-ai{background-image:url(../images/common/ico-ai.png);}
.ico-etc{background-image:url(../images/common/ico-etc.png);}
.uploader li.emptyfile{justify-content:center;flex:1;flex-direction:column;height:97px;}
.uploader li.emptyfile p{text-align:Center;line-height:28px;}
.uploader li.emptyfile p:before{content:'';display:inline-block;position:relative;top:-4px;margin-right:10px;width:20px;height:28px;vertical-align:middle;background:url(../images/common/ico-mouse.png) center no-repeat;}
/* table info */
.tbl_info {width:100%; position:relative; height:35px; line-height:35px; display: inline-block; margin-bottom:5px;}
.tbl_info:after {content:''; display:block; clear:both;}
.tbl_info .fl ul li {display:inline-block;font-size: 13.5px; font-weight: normal; color: #333; padding-top: 7px;}
.tbl_info .fl ul li.line {display:inline-block; clear: both;content: ""; width:1px; height:11px; vertical-align: middle; background-color: #ccc; margin:-1px 5px 0 5px;}
.tbl_info .fl ul li .txt_total {color:#f43636; padding:0 2px 0 4px; font-weight: 500;}
.tbl_info .fl ul li .txt_present {color:#f43636; padding:0 2px 0 4px;}
.tbl_info .sel_box {display: inline-block; position: absolute; right: 0;}
.tbl_info .sel_box select {border:0; outline: none; font-size:14px; color:#333; padding:0 30px 0 5px; width:100%; height:32px; line-height:30px; border:1px solid #ddd; cursor: pointer; background: #fff url(../images/main/ico_select.png) no-repeat right 10px center; background-size: 7px 4px;}
/* paging */
.pagination {position: relative; display: block; text-align:center; margin: 25px auto 0;}
.pagination li {display: inline-block;}
.pagination li a {display: inline-block; vertical-align: middle; text-decoration: none; color: #333; font-size:14px; width:32px; height: 32px; line-height:30px; letter-spacing:-2px; text-align:center;border: solid 1px #ddd; background: #fff;}
.pagination li a.first_page {text-indent:-9999px; border: 1px solid #ddd; background:url('../images/common/ico_page_first.png') no-repeat 50% 50%;font-size:0; width:32px;height:32px; box-sizing: border-box;}
.pagination li a.pre_page {text-indent:-9999px; border: 1px solid #ddd; background:url('../images/common/ico_page_pre.png') no-repeat 50% 50%;font-size:0; width:32px;height:32px; margin-right:5px;box-sizing: border-box;}
.pagination li a.next_page {text-indent:-9999px; border: 1px solid #ddd; background:url('../images/common/ico_page_next.png') no-repeat 50% 50%;font-size:0; width:32px;height:32px; margin-left:5px; box-sizing: border-box;}
.pagination li a.end_page {text-indent:-9999px; border: 1px solid #ddd; background:url('../images/common/ico_page_last.png') no-repeat 50% 50%;font-size:0; width:32px;height:32px; box-sizing: border-box;}
.pagination li a:hover,
.pagination li span:hover,
.pagination li a:focus,
.pagination li span:focus {color: #333; background-color: #fff; border-color: #595959;}
.pagination .active a,
.pagination .active span,
.pagination .active a:hover,
.pagination .active span:hover,
.pagination .active a:focus,
.pagination .active span:focus {z-index: 2; color: #fff; background-color: #595959; border-color: #595959; cursor: default;}
.pagination li a.on {z-index: 2; color: #fff;font-weight:500; background-color: #595959; border-color: #595959; cursor: default;}
/* 테이블 리스트 */
.tbl_list {position:relative; width:100%;}
.table-x-scrollable {overflow-x: scroll;}
.table {width: 100%; table-layout: fixed; border-top: 2px solid #305597; background-color: #fff; margin-bottom:15px;}
.table thead th {border-bottom: 1px solid #cbccd3;}
.table thead th, .table tbody th {height:40px; padding:10px 10px; vertical-align: middle; font-size:14px; font-weight:500; color:#333; text-align:center; background: #f3f8ff;}
.table tbody td {height:38px; padding:8px 10px; vertical-align:middle; font-size:13px; color:#333; font-weight: 300; text-align:center; border-bottom: 1px solid #ddd; word-break: break-all; white-space: normal;}
.table thead th + th, .table td + td, .table th + td, .table tbody th + th, .table tbody td + th {border-left: 1px solid #ddd;}
.table tbody td a {text-align:left; overflow: hidden; white-space: nowrap;text-overflow: ellipsis;-o-text-overflow: ellipsis;-ms-text-overflow: ellipsis; font-weight: 300; display:block;}
.table tbody td a:hover {color:#000; text-decoration: underline;}
.essential {display:inline-block; color:#f93c4e; font-size: 17px; line-height: 18px; vertical-align: text-top; padding:0 0 0 3px;}
/* View/Form table */
.tbl_view {position:relative; width:100%;}
.tbl_form {width:100%; border:0; border-top: 2px solid #305597; background-color: #fff; border-bottom: 0; table-layout:fixed; border-collapse: separate; margin-bottom:20px;}
.tbl_form thead th + th, .tbl_form td + td, .tbl_form th + td, .tbl_form tbody th + th, .tbl_form tbody td + th {border-left: 1px solid #ddd;}
.tbl_form th, .tbl_form td {vertical-align: middle;}
.tbl_form th {padding:8px 10px 8px 20px; height: 40px; text-align:left; border-bottom: 1px solid #ddd; background:#f3f8ff; font-size:14px; font-weight:400; color:#333; letter-spacing:-0.5px;}
.tbl_form td {padding:8px 10px; height: 40px; text-align:left; font-size:14px; color:#333; border-bottom: 1px solid #ddd;word-break: break-all;-ms-word-break: break-all;}
.tbl_form td label {vertical-align:top;padding-right:10px;}
.tbl_form input[type="text"] {}
.tbl_form td input[type='text'], .tbl_form td input[type='password'] {width: 100%;}
.tbl_form select {width:auto;}
.tbl_form textarea {width:100%; min-height: 80px;}
.tbl_form td img {vertical-align:middle;}
.tbl_form td .form_inline {display: inline-block; float: left; box-sizing: border-box;}
.tbl_form td .form_group {display: inline-block; position: relative; width: 100%; box-sizing: border-box;}
.tbl_form td .form_group input[type='text'], .tbl_form td .form_group input[type='password'] {width: 100%;}
.tbl_form td .form_group em {display: inline-block;padding-left: 8px;padding-right: 8px;font-size: 15px;}
.tbl_form td .form_inline .label, .tbl_form td .form_group .label {display: inline-block;vertical-align:middle; color:#333; font-size:15px;font-weight:500;}
.tbl_form th.blank_bg, .tbl_form td.blank_bg {border-left: none;border-right: none; background:#fff; height:5px;}
.text_note {display: inline-block;font-size:12px;color:#f77777;line-height:16px;background:url('../images/common/ico_info.png') no-repeat 0 50%;padding-left:18px;}
.tbl_form button.ico_btn_search {display:inline-block;width: 26px;height: 24px;background: url('../images/common/ico_td_search.png') no-repeat 0 0; margin-left: 2px;text-indent:-9999px;font-size:0;cursor:pointer;}
.tbl_form .datepicker {width:100%;}
.tbl_form .date_group {display:inline-block;position:relative;}
.tbl_form .date_group i {display:inline-block;width:16px;color:#000;text-align:center;font-size:13px;}
button.ico_btn_search {display:inline-block;width: 26px;height: 24px;background: url('../images/common/ico_td_search.png') no-repeat 0 0; margin-left: 2px;text-indent:-9999px;font-size:0;cursor:pointer;}
button.ico_btn_search:hover {display:inline-block;width: 26px;height: 24px;background: url('../images/common/ico_td_search_ov.png') no-repeat 0 0; margin-left: 2px;text-indent:-9999px;font-size:0;cursor:pointer;}
.table input.text_amount, .tbl_form input.text_amount {text-align: right;padding-right: 5px !important;box-sizing: border-box; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;-o-box-sizing: border-box;}
.table select.form-control.year {width:30%;}
td .form-control + label.txt {margin:0 3px;word-break:keep-all;-ms-word-break:keep-all;}
.table select.form-control.month {width:20%; min-width:45px;}
td .form-control.time {width:55px!important;min-width:50px;}
.infotxt {display: inline-block; line-height: 16px; font-size: 12px; font-weight: 300; padding-top: 6px;}
/* login */
.logback {width:100%;height:100%;background-image:url('../images/main/login_bg.gif'); background-size:100% 1000px;left: 0;top: 0;position: fixed;background: #f4f5f8;}
.logback h1 {top:0;height:48px;line-height:48px;margin-top: 8%;text-align:center;display:block;}
.logback h3 {top:0;height:50px;line-height:24px;padding-top: 20px;text-align:center;display:block;font-size:16px;font-weight:400;color:#555;margin:0 auto;}
.logback .login_box {margin:0 auto;width:560px; height:auto;clear:both;margin-top:2%;background:#fff;-webkit-border-radius: 12px;-moz-border-radius: 12px;-khtml-border-radius: 12px;border-radius:12px; box-shadow: 0px 1px 10px #c4c6cc; -moz-box-shadow: 0px 1px 10px #c4c6cc; -webkit-box-shadow: 0px 1px 10px #c4c6cc;}
.logback .login_box:after {content:""; clear:both; display:block}
.logback .login_box .loginWrap {width:70%; margin:0 auto;text-align:center;padding:55px 0;}
.loginWrap .input_wrap {width:100%;text-align:center;clear:both;}
.loginWrap .input_wrap input[type=text], .loginWrap .input_wrap input[type=password] {text-indent:10px;-webkit-border-radius: 5px;-moz-border-radius: 5px;-khtml-border-radius: 5px;border-radius:5px;}
.loginWrap .input_wrap input::placeholder {color:#b6b6b6 !important;}
.loginWrap .input_wrap .txt_id {width:100%; height:50px; font-size:16px; border:1px solid #ddd; margin-bottom:10px;}
.loginWrap .input_wrap .txt_pw {width:100%; height:50px; font-size:16px; border:1px solid #ddd;}
.loginWrap .input_wrap .save_id {float:left; color:#333; padding:25px 0;}
.loginWrap .input_wrap .save_id input[type=checkbox] + label {cursor: pointer; position: relative; font-size: 14px; padding-left: 30px;}
.loginWrap .input_wrap .save_id input[type=checkbox]+ label:before { content: ""; display: inline-block; width: 19px; height: 19px; margin-right: 20px; position: absolute; left: 0; top: 0px; background-color: #fff; border:solid 1px #ccc; border-radius: 19px;}
.loginWrap .input_wrap .save_id input[type=checkbox]:checked + label:before { content: "\2713"; font-size: 15px; font-weight:800; color: #fff; background:#4066cb; border:solid 1px #4066cb;line-height:19px;}
.input_wrap .btn_login {display:inline-block;width:100%;height:65px;line-height:65px; margin-bottom:10px; background:#4066cb; color:#fff; text-align:center; font-weight:400; font-size:18px; border-radius: 6px;}
.input_wrap .btn_login:hover {background:#2449aa2023-02-13;}
.hidden {font-size: 0; width:0 !important; height: 0; line-height: 0; overflow: hidden; visibility: hidden; width: 0; position:absolute;}
/* index */
.main_img {width: 100%; height: 280px; max-width: 1240px; margin: 0 auto 40px; position: relative; display: block; box-sizing: border-box; padding:30px 20px 30px 100px;border-radius: 28px 0 28px 0; background: #4066cb url('../images/main/main_img.png') no-repeat 97% 100%;}
.main_img .l_txt {display:block;padding-top:40px; font-size: 37px; font-weight:500; color: #fff; line-height:1.8em}
.main_img .m_txt {display:block;width: 100%; font-size: 22px; font-weight:400; color: #bfdfed; }
/* 오늘의 할일, 업무공지 */
.week_news_wrap {padding:0;width:100%;max-width: 1200px;margin: 0 auto; box-sizing: border-box;}
.week_news {overflow: hidden; width:100%; height:300px; padding:20px 30px; background: #fff; box-sizing: border-box; border-radius: 20px; box-shadow: 0px 1px 10px #d8dadf; -moz-box-shadow: 0px 1px 10px #d8dadf; -webkit-box-shadow: 0px 1px 10px #d8dadf;}
.week_news h1 {position: relative;display: inline-block;width:100%;margin-bottom:15px; font-size: 23px;height: 36px;color:#222046;font-weight:600; }
.week_news h3 {float:right;position: relative;display: inline-block;font-size: 15px;color:#333;font-weight:500;margin-top:-5px;margin-right:-5px;background:url('../images/main/ico_m_bul.gif') no-repeat 0 48%;padding-left:10px;}
.week_news h1 a.btn_more {float:right;position: relative; display:inline-block; padding:6px 0 0; width:16px; height:16px; background:url('../images/main/ico_more.png') no-repeat 0 0; margin-top: 7px; font-size:0; text-indent:-9999px;}
.week_news h1 a.btn_more:hover {color:#333;}
.week_news h3 select {min-width:80px;height:34px !important;border: 1px solid #dadce1 !important;margin-left:4px;}
.week_news .news_list {width:100%; position: relative;}
.week_news .news_list li {line-height: 34px; position: relative; float:left; width:100%; display: flex; flex-wrap: wrap; justify-content: space-between;}
.week_news .news_list li:last-child {border-bottom: 0;}
.week_news .news_list li + li {margin-top: 9px;}
.week_news .news_list li a {display:block; position: relative; padding-left:13px; padding-right: 20px; font-size: 17px;}
.week_news .news_list li a:before {content: ""; position: absolute; left: 0; top: 50%; width: 4px; height: 4px; margin-top: -2px; background-color: #6e6e6e; border-radius: 100%;}
.week_news .news_list li a .work_tit {float:left; display:inline-block; max-width: 290px; color:#333; font-size:18px; font-weight:400; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis;}
.week_news .news_list li a .noti_tit {float:left; display:inline-block; max-width: 290px; color:#333; font-size:18px; font-weight:400; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis;}
.week_news .news_list li a .noti_tit:hover {color:#000;}
.week_news .news_list li a .ico_new {font-size:8px; color:#fff; width:17px; height:17px; background-color: #ff4e50; border-radius: 50%; font-weight: 400; display:inline-block; text-align: center; line-height: 15px; margin-left: 5px; vertical-align: middle; position: absolute; right:0; top:50%; transform: translateY(-50%);}
.week_news .news_list li .r_txt {float: right; line-height: 32px; color:#777; font-size:17px; }
.week_news .news_list li .w_name {color:#444; padding-right:20px;}
.week_news .news_list li .not_noti {float:left; display:inline-block; width: 100%; color:#888; font-size:17px; font-weight:400; text-align:center;}
/* 스크롤 */
#scrollstyle::-webkit-scrollbar-track {border-radius: 0;background-color: #f5f5f5;}
#scrollstyle::-webkit-scrollbar {width: 8px; background-color: #f5f5f5;}
#scrollstyle::-webkit-scrollbar-thumb {border-radius: 0; background-color: #ccc;}
#scrollstyle-x::-webkit-scrollbar-track {border-radius: 0;background-color: #f5f5f5;}
#scrollstyle-x::-webkit-scrollbar {height: 8px; background-color: #f5f5f5;}
#scrollstyle-x::-webkit-scrollbar-thumb {border-radius: 0; background-color: #ccc;}
/*----------- 레이어팝업 -----------*/
[class^='sp-layer-popup'],.ydp-mlayer-popup {position:absolute;top:0;left:0;z-index:999999;width:100%;height:100%}
[class^='sp-layer-popup'] .wrap-layer-bg,.ydp-mlayer-popup .wrap-layer-bg {position:fixed;z-index:110;width:100%;height:100%;background-color:#333;opacity:0.7}
[class^='sp-layer-popup'] .popupbox,.ydp-mlayer-popup .popupbox {position:fixed;top:50%;left:50%;z-index:120;border:1px solid #ddd;background-color:#fff;box-sizing:border-box;border-radius:0;}
[class^='sp-layer-popup'] .popupbox section {position:relative;padding:25px}
.popupbox {position:fixed;top:50%;left:50%;z-index:120;background-color:#fff;box-sizing:border-box}
.popupbox section {position:relative;padding:25px}
/* 팝업상세 */
.ydp-mlayer-popup .popupbox {border:0; border-radius: 5px; border: 5px solid #2646a6}
.popupbox .pb-head {height: 75px; background-color: #2646a6;}
.popupbox .pb-head h2 b {color:#fff; font-size:24px; font-weight:500; line-height:68px; margin-left:30px;}
.popupbox .pb-head .btn-close-setting {display:block; position:absolute; top:30px; right:35px;z-index:125;width:16px;height:16px;background: url(../images/common/ico_pop_close.png)no-repeat; text-indent: -9999px;}
.popupbox .pb-body {position: relative; padding: 25px 30px 5px; background-color: #fff;}
.popupbox .pb-body article {margin-left:0px;}
.popupbox .pb-body h3 {font-size:20px; color:#474d5c; padding:10px 0 15px;}
.popupbox .pb-body .keyword_add_wrap {position: relative; display: inline-block; vertical-align:top; padding-bottom:20px; border-bottom:1px solid #e0e0e0;}
.popupbox .pb-body .keyword_add_wrap a {float:left; display: block; margin:0 8px 8px 0;}
.ydp-mlayer-popup li label span {font-size:15px; color:#282828;}
.ydp-mlayer-popup .btn-Area {padding-top:15px;text-align:center; bottom:0; display:flex;-webkt-display:flex;-moz-display:flex;justify-content:center;border-top:1px dashed #ccc; height:70px; width:100%; margin:0 auto;}
.ydp-mlayer-popup .btn-Area button {height:50px;line-height:48px; border-radius: 50px; font-size:18px;font-weight:500;padding:0 12px;text-align:center;min-width:50px;}
.ydp-mlayer-popup .btn-Area button + button {margin-left:5px}
.ydp-mlayer-popup .btn-Area .btn-save {width:100px; color:#fff; background:#eb4c97;}
.ydp-mlayer-popup .btn-Area .btn-save:hover {color:#fff;background:#e2428d;}
.ydp-mlayer-popup .btn-Area .btn-cancel {width:100px; color:#fff; background:#474d5c;}
.ydp-mlayer-popup .btn-Area .btn-cancel:hover {color:#fff; background:#3e4452;}
/* modal 팝업 */
.dim-layer {display: none; position: fixed; _position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000;}
.dim-layer .dimBg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: .5; filter: alpha(opacity=50);}
.dim-layer .pop-layer {display: block;position: absolute;}
.pop-layer {display: none; position: fixed; top: 50%; left: 50%; width: auto; height: auto; background-color: #4066cb; z-index: 1000 !important; padding:2px;}
.modal-md {width: 760px;}
.modal-mini {width: 500px;}
.modal-content {position:relative;background-color:#fff;-webkit-background-clip: padding-box;background-clip: padding-box; outline: 0;}
.modal-header {width:100%;height:65px;background-color:#4066cb;}
.modal-header:after {content:''; display:block; clear:both;}
.modal-header .close {margin-top: -2px;}
.modal-header .pop_close {float: right;margin-right: 30px;}
.modal-header .pop_close a {display: block; background: url('../images/common/ico_pop_close.png')no-repeat; width:16px;height:16px;font-size: 0;margin-top: 30px;}
.modal-header .pop_title {text-align:left; font-size:24px; font-weight:500; color:#fff;line-height: 65px; text-indent: 30px;display: inline-block;}
.modal-body {position: relative; padding: 20px 30px 20px;background-color:#fff;}
.modal-body h3 {font-size:20px; color:#474d5c; padding:10px 0 15px;}
.modal-body .keyword_add_wrap {position: relative; display: inline-block; vertical-align:top; padding-bottom:20px; border-bottom:1px solid #e0e0e0;}
.modal-body .keyword_add_wrap a {float:left; display: block; margin:0 8px 8px 0;}
.modal-footer {padding: 15px 0 15px; text-align: center;border-top: 1px solid #ccc;}
.modal-footer .btn + .btn {margin-bottom: 0; margin-left: 3px;}
.modal-footer .btn-group .btn + .btn {margin-left: -1px;}
.modal-footer .btn-block + .btn-block {margin-left: 0;}
.button.btn_pop_cancel {font-size:15px;color:#333; font-weight:500; background:#fff; border:1px solid #ccc;min-width:80px; padding:0 20px; height:40px; line-height:38px;}
.button.btn_pop_cancel:hover {background-color: #f3f8ff;border: 1px solid #9f9f9f;}
.button.btn_pop_save {font-size:15px;color:#fff; font-weight:500; background:#4066cb; min-width:80px; padding:0 20px; height:40px; line-height: 38px; }
.button.btn_pop_save:hover {color:#fff;background:#2449aa;}