html,body{height:100%;} body.action{overflow:hidden;height: 100%;} *{line-height: 1.3;} #wrap{position:relative;min-width:1500px;min-height:100%;padding-bottom:80px;background-color:#F3F4F7; z-index: 1;} #content {min-height: auto;} .main-area{width:100%;max-width:1500px;margin:0 auto;} .main-area:after{content:"";display:block;clear:both;} .label-hidden {overflow: hidden; position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; clip:rect(0,0,0,0);} #con select {-webkit-appearance: none; -moz-appearance: none;appearance: none;} #con select::-ms-expand {display: none;} /*------------------------------------------------------------------- 분류그룹 : 메인페이지 > header > gnb-top 속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타 -------------------------------------------------------------------*/ #header {position:absolute;top:0;left:0;z-index: 99;width:100%;} /* gnb-top */ #header .gnb-top {width: 100%; height: 50px;} #header .gnb-top-box {display: -webkit-box; display: -ms-flexbox; display: -moz-box; display: flex; max-width: 1500px; width:100%; height:100%; margin:0 auto; -webkit-box-pack: justify; -moz-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center; align-items: center;} #header .gnb-top .gnb-top-box .l-con > .l-box, #header .gnb-top .gnb-top-box .r-con > .r-box {display: flex;} #header .gnb-top .gnb-top-box .l-con > .l-box > li > .label {background-color:#3D99B6; border-radius: 100px;} #header .gnb-top .gnb-top-box .l-con > .l-box > li > .label.status {background-color:#1AC1C1;} #header .gnb-top .gnb-top-box .r-con > .r-box > li > .item {margin:0 10px;} #header .gnb-top .gnb-top-box .r-con > .r-box > li > span.ip-info {position:relative;} #header .gnb-top .gnb-top-box .r-con > .r-box > li > span.ip-info::after {content:''; position:absolute; top:50%; right:-10px; width:1px; height:10px; background-color: #fff; transform: translateY(-50%);} #header .gnb-top .gnb-top-box .l-con > .l-box > li > span, #header .gnb-top .gnb-top-box .r-con > .r-box > li > span, #header .gnb-top .gnb-top-box .r-con > .r-box > li > a {display: inline-block; /*padding:2px 12px;*/ font-size:0.875rem; color:#fff;} #header .gnb-top .gnb-top-box .r-con > .r-box > li > .item.login {margin-right:0; padding-right:0;} @media screen and (max-width:1500px) { #header .gnb-top {padding:0 20px;} } /*------------------------------------------------------------------- 분류그룹 : 메인페이지 > header 속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타 -------------------------------------------------------------------*/ #header .header-wrap {height:80px; padding:0 10px; border-bottom:1px solid #E0E8F3; background-color:#ffffff; box-shadow: 0 4px 15px rgba(0,0,0,0.1);} #header .header-wrap .gnb-area{display: -webkit-box; display: -ms-flexbox; display: -moz-box;display: flex; position: relative; z-index: 1; max-width: 1500px; width:100%; height:100%; margin: 0 auto; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center; align-items: center;} #header .header-wrap #logo {display: block; -ms-flex: 0 0 auto; flex-shrink: 0;} #header .header-wrap #logo > .logo-wrap {} #header .header-wrap #logo > .logo-wrap .logo {display: block; width:100%; height:100%;} #header .header-wrap #logo > .logo-wrap .logo > .white {display: block;} #header .header-wrap #logo > .logo-wrap .logo > .black {display: none;} #header .header-wrap .gnb {display: block; height:100%; padding: 0 80px; -ms-flex: 1 0 auto; -webkit-box-flex: 1; flex-grow: 1;} #header .header-wrap .gnb .gnb-menu {display: -webkit-box; display: -ms-flexbox; display: -moz-box; display: flex; height:100%; margin: 0 -10px; justify-content: center;} #header .header-wrap .gnb .gnb-menu > li {display: -webkit-box; display: -ms-flexbox; display: -moz-box; display:block; position: relative; max-width:180px; height:100%; padding:0 10px; text-align: center; -ms-flex: 1 0 0; -webkit-box-flex: 1; flex-grow: 1; flex-basis: 0;} #header .header-wrap .gnb .gnb-menu.manager > li {max-width: 100%;} #header .header-wrap .gnb .gnb-menu > li .menu-01 {display: -webkit-box; display: -ms-flexbox; display: -moz-box; display:flex; position:relative; width:100%; height: 100%; padding: 0 5px; font-weight: 700; font-size: 1rem; color: #000; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center; align-items: center;} #header .header-wrap .gnb .gnb-menu > li .menu-01 > span {display: block; position:relative; width:100%; padding:10px 8px; border-radius: 10px; white-space: nowrap;} #header .header-wrap .gnb .gnb-menu > li .menu-01 > span::after {content:''; visibility: hidden; position:absolute; top:2px; width:9px; height:13px; background-image:url('../images/main/i_menu_img.svg'); background-repeat: no-repeat;} #header .header-wrap .gnb .gnb-menu > li .gnb-menu-02 {overflow: hidden; position:absolute; top:100%; left:0; width:100%;} #header .header-wrap .gnb .gnb-menu > li .gnb-menu-02 {visibility: hidden; opacity: 0; transition: visibility 0s 0.4s, opacity 0.4s;} #header .header-wrap .gnb .gnb-menu > li .menu-01.focus + .gnb-menu-02, #header .header-wrap .gnb .gnb-menu > li:hover .gnb-menu-02 {visibility: visible; opacity: 1; transition: visibility 0s 0s, opacity 0.4s;} #header .header-wrap .gnb .gnb-menu > li .gnb-menu-02 li {} #header .header-wrap .gnb .gnb-menu > li .gnb-menu-02 li .menu-02 {display: block; padding:10px; background-color:#007E68; color:#fff;} /*------------------------------------------------------------------- 분류그룹 : 메인페이지 > header > 사이트맵 버튼 속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타 -------------------------------------------------------------------*/ #header .header-wrap .sitemap-box {display: -webkit-box; display: -ms-flexbox; display: -moz-box;display: flex; align-items: center;} #header .header-wrap .sitemap-box .btn-menu {display: block; background-color:transparent;} #header .header-wrap .sitemap-box .btn-menu .icon {display:block; position: relative; width:20px; height:15px;} #header .header-wrap .sitemap-box .btn-menu .icon .ln {display: block; position:absolute; right:0; width:100%; height:2px; background-color: #000000;} #header .header-wrap .sitemap-box .btn-menu .icon .ln.ver1 {top: 0;} #header .header-wrap .sitemap-box .btn-menu .icon .ln.ver2 {top: calc(50% - 1.2px);} #header .header-wrap .sitemap-box .btn-menu .icon .ln.ver3 {bottom: 0;} /*------------------------------------------------------------------- @interaction -------------------------------------------------------------------*/ #header.active {} #header.active .gnb-top {background-color: #fff;} #header.active .header-wrap {height:80px; padding:0 10px; background-color:#ffffff;} #header.active .gnb-top .gnb-top-box .l-con > .l-box > li > span, #header.active .gnb-top .gnb-top-box .r-con > .r-box > li > span, #header.active .gnb-top .gnb-top-box .r-con > .r-box > li > a {display: inline-block; padding:2px 12px; font-weight: 600; font-size:0.875rem; color:#333;} #header.active .header-wrap .gnb .gnb-menu > li > a {color:#333;} #header.active .header-wrap #logo > .logo-wrap .logo > .white {display: none;} #header.active .header-wrap #logo > .logo-wrap .logo > .black {display: block;} #header .header-wrap .gnb .gnb-menu > li .gnb-menu-02 li .menu-02:focus, #header .header-wrap .gnb .gnb-menu > li .gnb-menu-02 li .menu-02:hover {background-color:#12A051;} /* #header .header-wrap .gnb .gnb-menu > li:hover .menu-01::after, #header .header-wrap .gnb .gnb-menu > li.focus .menu-01::after {content:''; position: absolute; top:80%; left:50%; width:0px; height:0px; border-right:5px solid transparent; border-top:7px solid #3D99B6; border-left:5px solid transparent; border-bottom:6px solid transparent; transform: translate(-50%, -50%);} */ #header .header-wrap .gnb .gnb-menu > li .menu-01 > span {transition: background 0.3s; } /* #header .header-wrap .gnb .gnb-menu > li .menu-01 > span::after {transition:visibility 0.3s;} */ #header .header-wrap .gnb .gnb-menu > li:focus .menu-01 > span, #header .header-wrap .gnb .gnb-menu > li:hover .menu-01 > span {background: linear-gradient(#12A051, #007E68); color:#ffffff;} /* #header .header-wrap .gnb .gnb-menu > li:focus .menu-01 > span::after, #header .header-wrap .gnb .gnb-menu > li:hover .menu-01 > span::after {visibility: visible;} */ #header .header-wrap .sitemap-box .btn-menu .icon .ln {transition: width 0.3s;} #header .header-wrap .sitemap-box .btn-menu:focus .icon .ln.ver1, #header .header-wrap .sitemap-box .btn-menu:hover .icon .ln.ver1 {width: 70%;} #header .header-wrap .sitemap-box .btn-menu:focus .icon .ln.ver3, #header .header-wrap .sitemap-box .btn-menu:hover .icon .ln.ver3 {width: 70%;} /*------------------------------------------------------------------- 분류그룹 : 메인페이지 > sitemap 속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타 -------------------------------------------------------------------*/ #siteMapModal {visibility: hidden; position: fixed; top: 0; left: 0; z-index: 200; width: 100%; height: 100%; transition: visibility 0s 0.3s;} #siteMapModal.active {visibility: visible; transition: visibility 0s 0s;} /* 닫기 버튼 */ #siteMapModal .btn-close {display: -webkit-box; display: -ms-flexbox; display: -moz-box;display: flex; font-size: 0;-webkit-box-lines: single;-moz-flex-wrap: nowrap;-ms-flex-wrap: nowrap; flex-wrap: nowrap; border: 0; background-color: transparent; cursor: pointer;} #siteMapModal .btn-close .icon {display: block; position: relative; width: 30px; height: 30px;} #siteMapModal .btn-close .icon::before, #siteMapModal .btn-close .icon::after {content:""; position: absolute; top: 50%; left: 50%; width: 100%; height: 3px; border-radius: 1.5px; background-color: #343434;} #siteMapModal .btn-close .icon::before {transform: translate(-50%, -50%) rotate(45deg);} #siteMapModal .btn-close .icon::after {transform: translate(-50%, -50%) rotate(-45deg);} /*------------------------------------------------------------------- @interaction -------------------------------------------------------------------*/ #siteMapModal .btn-close .icon::before, #siteMapModal .btn-close .icon::after {transition:transform 0.3s, background 0.3s;} #siteMapModal .btn-close:focus .icon::before, #siteMapModal .btn-close:hover .icon::before {background-color:#1AC1C1; transform:translate(-50%, -50%) rotate(60deg);} #siteMapModal .btn-close:focus .icon::after, #siteMapModal .btn-close:hover .icon::after {background-color:#1AC1C1;transform:translate(-50%, -50%) rotate(-60deg);} #sitemap {visibility: hidden; position: fixed; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.6s, transform 0.6s, visibility 0s 0.6s;} #sitemap.active {visibility: visible; opacity: 1; transition: opacity 0.6s, transform 0.6s, visibility 0s 0s;} #sitemap .con-head {display: block; height:90px; border-bottom: 1px solid #e9e9e9; background-color: #fff;} #sitemap .con-head .h-wrap { max-width: 1800px; margin: auto; display: -webkit-box; display: -ms-flexbox; display: -moz-box;display: flex; height:100%; -webkit-box-align: center; -moz-align-items: center;-ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -moz-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between;} #sitemap .con-head .h-wrap::after {display: none;} #sitemap .con-head .h-wrap .logo {display: -webkit-box; display: -ms-flexbox; display: -moz-box;display:flex; height: 65px; -webkit-box-align: center; -moz-align-items: center;-ms-flex-align: center; align-items: center;} #sitemap .con-head .h-wrap .logo > a {display: block; height:100%;} #sitemap .con-head .h-wrap .logo > a > img {display: block; max-width: unset; width: auto; height: 100%;} #sitemap .con-body {display: -webkit-box; display: -ms-flexbox; display: -moz-box;display:flex;overflow-x:hidden; height: calc(100vh - 90px); background-color: #fff; flex-direction: column;} #sitemap .con-body .menu-box {display: -webkit-box; display: -ms-flexbox; display: -moz-box;display: flex; min-width:950px;-ms-flex: 1 1 auto; flex-grow: 1;} #sitemap .con-body .menu-box .l-con-bg {display:block; width:30%; background-position:center; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size:cover; background-repeat: no-repeat; background-image: url(../images/main/img_visual01.png);} #sitemap .con-body .menu-box .l-con-bg[data-bg="0"] {background-image:url(../images/main/img_vis_01.jpg);} #sitemap .con-body .menu-box .l-con-bg[data-bg="1"] {background-image:url(../images/main/img_vis_02.jpg);} #sitemap .con-body .menu-box .l-con-bg[data-bg="2"] {background-image:url(../images/main/img_vis_03.jpg);} #sitemap .con-body .menu-box .r-con {display:block; overflow-y: auto; width:70%; padding:50px 50px 0;flex-grow: 1;} #sitemap .con-body .menu-box .r-con .sitemap-menu {display: -webkit-box; display: -ms-flexbox; display: -moz-box;display:flex;-webkit-box-lines: multiple;-moz-flex-wrap: wrap;-ms-flex-wrap: wrap; flex-wrap: wrap;} #sitemap .con-body .menu-box .r-con .sitemap-menu > li {width: 50%; margin-bottom: 30px; padding: 0 20px;} #sitemap .con-body .menu-box .r-con .sitemap-menu > li .menu-01 {display: block; max-width: 250px; width:100%; margin-bottom: auto; padding: 8px 0; font-weight: 700; font-size: 1.5rem;} #sitemap .con-body .menu-box .r-con .sitemap-menu > li .menu-01 > span {display:inline-block; position:relative;} #sitemap .con-body .menu-box .r-con .sitemap-menu > li .menu-01 > span::before {content:""; position: absolute; top: 60%; left: 0; width: 0; height: 15px; background-color: #3D99B6; opacity: 0.4;} #sitemap .con-body .menu-box .r-con .sitemap-menu > li .menu-02 {display: -webkit-box; display: -ms-flexbox; display: -moz-box;display: flex;-webkit-box-lines: multiple;-moz-flex-wrap: wrap;-ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: 10px; -ms-flex: 1 1 auto;flex-grow: 1;} #sitemap .con-body .menu-box .r-con .sitemap-menu > li .menu-02 > li {} #sitemap .con-body .menu-box .r-con .sitemap-menu > li .menu-02 > li > a {display: block; padding:7px 30px 7px 0; font-weight: 500; font-size: 1.125rem;} #sitemap .con-body .menu-box .r-con .sitemap-menu > li .menu-02 > li > a > span {color:#A9AAB6;} /*------------------------------------------------------------------- @interaction -------------------------------------------------------------------*/ #sitemap .con-body .menu-box .r-con .sitemap-menu > li .menu-01 {transition: color 0.3s;} #sitemap .con-body .menu-box .r-con .sitemap-menu > li .menu-01:focus, #sitemap .con-body .menu-box .r-con .sitemap-menu > li:hover .menu-01 {color:#405381;} #sitemap .con-body .menu-box .r-con .sitemap-menu > li .menu-01 > span::before {transition: width 0.3s;} #sitemap .con-body .menu-box .r-con .sitemap-menu > li .menu-01:focus > span::before, #sitemap .con-body .menu-box .r-con .sitemap-menu > li:hover .menu-01 > span::before {width:100%;} #sitemap .con-body .menu-box .r-con .sitemap-menu > li .menu-02 > li:focus > a > span, #sitemap .con-body .menu-box .r-con .sitemap-menu > li .menu-02 > li:hover > a > span {color:#405381} /*------------------------------------------------------------------- @메인페이지 > 선택팝업 - 공통 -------------------------------------------------------------------*/ #modalPop .popup .pop-con .pop-body {padding:20px;} #modalPop .popup .pop-con .pop-body .con-head {padding-bottom:20px; border-bottom:1px solid #e9e9e9;} #modalPop .popup .pop-con .pop-body .tit {display: block; margin:20px 0;} #modalPop .popup .pop-con .pop-body .tit span {position:relative; padding-left:15px;} #modalPop .popup .pop-con .pop-body .tit span::before {content: ''; position:absolute; top:50%; left:0; width:5px; height:5px; border-radius: 50%; background-color: #333333; transform: translateY(-50%);} #modalPop .popup .pop-con .pop-body .con-head .search-wrap {display: -webkit-box; display: -moz-box;display: -ms-flexbox; display: flex;} #modalPop .popup .pop-con .pop-body .con-head .search-wrap .search-box {display: -webkit-box; display: -moz-box;display: -ms-flexbox; display: flex;} #modalPop .popup .pop-con .pop-body .con-head .search-wrap .search-box .btn-search {padding:4px 10px;} #modalPop .popup .pop-con .pop-body .con-head .search-wrap .search-box .btn-search span {display: inline-block; width:20px; height:20px; background-image:url(../images/main/i_search.svg); background-repeat: no-repeat; background-size: cover;} #modalPop .popup .pop-con .pop-body .con-body {} #modalPop .popup .pop-con .pop-body .con-body .select-wrap {display: -webkit-box; display: -moz-box;display: -ms-flexbox; display: flex;} #modalPop .popup .pop-con .pop-body .con-body .select-wrap .l-list { -ms-flex: 1 1 auto; flex-grow: 1;} #modalPop .popup .pop-con .pop-body .con-body .select-wrap .l-list .bod-con {margin-top:0;} #modalPop .popup .pop-con .pop-body .con-body .select-wrap .l-list .bod-con .bod-table {} #modalPop .popup .pop-con .pop-body .con-body .select-wrap .l-list .bod-con .bod-table tbody {} #modalPop .popup .pop-con .pop-body .con-body .select-wrap .l-list .bod-con .bod-table tbody tr td {} #modalPop .popup .pop-con .pop-body .con-body .select-wrap .l-list .bod-con .bod-table tbody tr td label.chk {padding-left:0;} #modalPop .popup .pop-con .pop-body .con-body .select-wrap .r-list {display: -webkit-box; display: -moz-box;display: -ms-flexbox; display: flex;} #modalPop .popup .pop-con .pop-body .con-body .select-wrap .r-list .l-box {} #modalPop .popup .pop-con .pop-body .con-body .select-wrap .r-list .r-box {display: -webkit-box; display: -moz-box;display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-align-items: center;-ms-flex-align: center; align-items: center;} #modalPop .popup .pop-con .pop-body .con-body .select-wrap .r-list .r-box .btn-con {padding:10px;} #modalPop .popup .pop-con .pop-body .con-body .select-wrap .r-list .r-box .btn-con .btn-list {display: block; position:relative; width:30px; height:30px; margin:7px; border:1px solid #D7DCE5; border-radius: 50%; background-color:transparent;} #modalPop .popup .pop-con .pop-body .con-body .select-wrap .r-list .r-box .btn-con .btn-list::after {content:''; position:absolute; top:50%; left:50%; width:16px; height:16px; background-repeat: no-repeat; background-position: center; background-size: cover; transform: translate(-50%, -50%);} #modalPop .popup .pop-con .pop-body .con-body .select-wrap .r-list .r-box .btn-con .btn-list.btn-prev::after {background-image:url(../images/sub/i_prev_black.svg);} #modalPop .popup .pop-con .pop-body .con-body .select-wrap .r-list .r-box .btn-con .btn-list.btn-next::after {background-image: url(../images/sub/i_next_black.svg);} #modalPop .popup .pop-con .pop-body .con-body .select-wrap .r-list .r-box .seleted-con {overflow: auto; width:250px; height:300px; padding:10px; border:1px solid #E9E9E9; background-color: #F8F9FA;} #modalPop .popup .pop-con .pop-body .con-body .select-wrap .r-list .r-box .seleted-con .txt {padding:3px 5px; font-size:1rem; line-height: 1.5;} /*------------------------------------------------------------------- @메인페이지 > modal-popup > table 공통 -------------------------------------------------------------------*/ /* modal */ #modalPop .popup .pop-con .pop-body .pop-table {} #modalPop .popup .pop-con .pop-body .pop-table .table {overflow: hidden; max-width:760px;} #modalPop .popup .pop-con .pop-body .pop-table .table tr td {overflow-y: auto; max-width:530px;} #modalPop .popup .pop-con .pop-body .pop-table .table tr td.tit-box {background-color:#F8F9FA;} #modalPop .popup .pop-con .pop-body .pop-table .table tr td .txt {width:100%; word-break: break-all;} #modalPop .popup .pop-con .pop-body .pop-table .table tr td.tit-box .pop-tit {font-weight:600;} #modalPop .popup .pop-con .pop-body .pop-table .table tr td.tit-box .pop-tit.essential {position:relative; padding-left:10px;} #modalPop .popup .pop-con .pop-body .pop-table .table tr td.tit-box .pop-tit.essential::before {content:'*'; position:absolute; top:0; left:0; width:5px; height:5px; color:#ff0000;} #modalPop .popup .pop-con .pop-body .pop-table tbody tr .select-box .sel{width:100%;} #modalPop .popup .pop-con .pop-body .pop-table tbody tr .input-box .intxt {border-radius: 5px;} #modalPop .popup .pop-con .pop-body .pop-table tbody tr .pop-input {width:100%;} #modalPop .popup .pop-con .pop-body .txt-box {margin-top:8px; padding:5px; border-radius: 100px; background-color:#E9E9E9; text-align: center;} #modalPop .popup .pop-con .pop-body .txt-box .pop-txt {display: block; font-size:0.875rem; color:#6f6f6f;} #modalPop .popup .pop-con .pop-body .btn-box {margin: 20px auto; text-align: center;} #modalPop .popup .pop-con .pop-body .btn-box .btn {margin:0 2px;} /*------------------------------------------------------------------- 분류그룹 : 메인페이지 > snb 속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타 -------------------------------------------------------------------*/ #container {display: block;} /* side navigation bar */ #container .snb-wrap {position: fixed; overflow-x: hidden; overflow-y: auto; top: 60px; left: 0; width: 300px; height: calc(100% - 110px); border-right: 1px solid #dddddd; box-shadow: 3px 3px 8px 0 rgba(0,0,0,0.1);} #container .snb-wrap .snb {display: block; padding: 20px 0 40px;} #container .snb-wrap .snb .menu-01 {display: block;} #container .snb-wrap .snb .menu-01 > li {display: block;} #container .snb-wrap .snb .menu-01 > li .tit {display: block; padding: 20px 30px 15px; font-weight:600; font-size: 1.25rem; color: #6667ab;} #container .snb-wrap .snb .menu-01 > li .menu-02 {display: block;} #container .snb-wrap .snb .menu-01 > li .menu-02 > li {display: block;} #container .snb-wrap .snb .menu-01 > li .menu-02 > li > a {display: block; position: relative; padding: 10px 30px 10px 40px;} #container .snb-wrap .snb .menu-01 > li .menu-02 > li > a:focus, #container .snb-wrap .snb .menu-01 > li .menu-02 > li > a:hover, #container .snb-wrap .snb .menu-01 > li .menu-02 > li > a.on {font-weight:600; color: #6667ab;} #container .snb-wrap .snb .menu-01 > li .menu-02 > li > a.on::before {content:""; position: absolute; top: 50%; right: 30px; width: 6px; height: 6px; border-top: 2px solid #6667ab; border-right: 2px solid #6667ab; transform: translate(50%, -50%) rotate(45deg); box-sizing: border-box;} #container .snb-wrap .snb .menu-01 > li .menu-02 > li .menu-03 {display: block;} #container .snb-wrap .snb .menu-01 > li .menu-02 > li .menu-03 li {display: block;} #container .snb-wrap .snb .menu-01 > li .menu-02 > li .menu-03 li > a {display: block; position: relative; padding: 6px 30px 6px 55px;} #container .snb-wrap .snb .menu-01 > li .menu-02 > li .menu-03 li > a:focus, #container .snb-wrap .snb .menu-01 > li .menu-02 > li .menu-03 li > a:hover, #container .snb-wrap .snb .menu-01 > li .menu-02 > li .menu-03 li > a.on {font-weight:600; color: #6667ab;} #container .snb-wrap .snb .menu-01 > li .menu-02 > li .menu-03 li > a.on::before {content:""; position: absolute; top: 50%; right: 30px; width: 6px; height: 6px; border-top: 2px solid #6667ab; border-right: 2px solid #6667ab; transform: translate(50%, -50%) rotate(45deg); box-sizing: border-box;} /* //side navigation bar */ #content {padding: 60px 40px;} /* main page design */ #container.main #content {padding: 0; padding-top:80px;} #content .main-wrap { display: -webkit-box; display: -ms-flexbox; display: -moz-box; display:flex; text-align: center; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center; align-items: center;} #content .main-wrap .main-box {margin: 0 auto;} #content .main-wrap .main-box .logo {display: block; max-width: 200px; margin: 0 auto 20px;} #content .main-wrap .main-box .logo > a {display: block;} #content .main-wrap .main-box .tit {display: block; margin-bottom: 20px; font-weight: 700; font-size: 3rem; color: #3c3c3c;} #content .main-wrap .main-box .btn-wrap { display: -webkit-box; display: -ms-flexbox; display: -moz-box; display: flex; -webkit-box-pack: center; -moz-box-justify-content: center; -ms-flex-pack: center; justify-content: center;} #content .main-wrap .main-box .btn-wrap > li {display: block; padding: 0 20px;} #content .main-wrap .main-box .btn-wrap > li .btn-link {display: block; font-weight:700; font-size: 1.125rem;} /* //main page design */ /* content section */ #content .section {display: block; padding: 60px 0 10px;} #content .section .section-part {display: block; padding: 60px 0 10px;} #content .section .h3 + .section-part {padding: 10px 0;} #content .section .section-part .part-item {display: block; margin-bottom: 30px;} #content .section .section-part .part-item:last-child {margin-bottom: 0;} /* //content section */ /* heading titles */ .h2 {display:block; position: relative; margin-bottom: 30px; border-bottom: 1px solid #dddddd; font-weight: 700; font-size: 2.25rem; color: #000;} .h2:not(:last-child) {margin-bottom: 0;} .h3 {display:block; position: relative; margin-bottom: 20px; padding-left: 15px; font-weight: 700; font-size: 1.75rem; color: #000;} .h3::before {content:""; position: absolute; top: 15%; left: 0; width: 6px; height: 70%; background-color: #6667ab;} .h4 {display:block; position: relative; margin-bottom: 15px; padding-left: 10px; font-weight: 600; font-size: 1.5rem; color: #000;} .h4::before {content:""; position: absolute; top: 15%; left: 0; width: 7px; height: 7px; background-color: #6667ab;} .h5 {margin-bottom: 15px; font-weight: 600; font-size: 1.25rem; color: #000;} .h6 {margin-bottom: 10px; font-weight: 500; font-size: 1.125rem; color: #000;} /* //heading titles */ #content .link-txt {display: inline-block; font-size: 0.875rem; color: #0d6efd;} /* guide text */ #content .gd-txt {display: block; font-size: 0.875rem; color: #666;} /* code highlight box */ #content .code-wrap {font-family: inherit;} #content .code-wrap * {font-family: inherit;} /* //code highlight box */ /*------------------------------------------------------------------- 분류그룹 : 메인페이지 > 공통 title 속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타 -------------------------------------------------------------------*/ #container .tit-head {padding:20px 30px; border-bottom:1px solid #DFE8EE;} #container .tit-head .title {display: block; font-weight:700; font-size:1.5625rem; color:#000000;} #container .tit-head .title > .item {display: block; position:relative; padding-left:48px; word-break:break-all;} #container .tit-head .title > .item::before {content:''; position:absolute; top:calc(1.015625rem - 20px); left:0; width:40px; height:40px; border-radius: 50%; background-color:#2979C3;} #container .tit-head .title > .item::after {content:''; position:absolute; top:calc(1.015625rem - 20px); left:0; width:40px; height:40px; background-image:url('../images/main/i_user.png'); background-position: center; background-repeat: no-repeat;} #container .tit-head .title.user > .item::before {background-color:#ffffff;} #container .tit-head .title.budget > .item::after {background-image: url('../images/main/i_budget.png');} #container .tit-head .title.calc > .item::before {background-color:#1F2D6C;} #container .tit-head .title.calc > .item::after {background-image: url('../images/main/i_calculate.png');} #container .tit-head .title.survey > .item::before {background-color:#FF3D00;} #container .tit-head .title.survey.trip > .item::before {background-color:#388361;} #container .tit-head .title.survey > .item::after {background-image: url('../images/main/i_survey.png');} /*------------------------------------------------------------------- 분류그룹 : 메인페이지 > section-01 속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타 -------------------------------------------------------------------*/ #container .section-01 {display: flex; padding-top:50px;} #container .section-01 .l-con {min-width:380px;max-width:380px; margin-right:15px; border:1px solid #DFE8EE; border-radius: 10px; background-color:#112F5A; background-image:url('../images/main/i_user_bg.png'); background-repeat: no-repeat; background-position:center; background-size: cover; color:#ffffff; flex-shrink:0;} #container .section-01 .r-con {border:1px solid #DFE8EE; border-radius: 10px; background-color:#ffffff; flex-grow:1;} #container .section-01 .l-con .tit-head {border-bottom:1px solid rgba(255,255,255,0.2);} #container .section-01 .l-con .tit-head .title {color:#ffffff;} #container .section-01 .con-body {padding:30px;} #container .section-01 .l-con .con-body {} #container .section-01 .l-con .con-body .user-info {display: flex; border-bottom:1px dotted rgba(233,233,233, 0.2); justify-content: space-between; align-items: center;} #container .section-01 .l-con .con-body .user-info .l-box {flex-grow:1;} #container .section-01 .l-con .con-body .user-info .r-box {flex-shrink:0;} #container .section-01 .l-con .con-body .user-info .r-box .btn-busi {padding:4px 12px; border-radius: 5px; background-color:#2979C3; color:#ffffff; font-size:0.9375rem;} #container .section-01 .l-con .con-body .user-info .info-item {margin-bottom:10px;} #container .section-01 .l-con .con-body .user-info .name {display:block; font-weight:600; font-size:1.125rem; word-break: break-all;} #container .section-01 .l-con .con-body .user-info .author {display: inline-block; padding:6px 14px; border-radius: 100px; background-color:#66CEF6; font-weight:500; font-size:0.875rem;} #container .section-01 .l-con .con-body .user-info .cate {display: block; position:relative; padding-left:10px; font-weight:500; font-size:0.9375rem; word-break: break-all;} #container .section-01 .l-con .con-body .user-info .cate::before {content:''; position:absolute; top:calc(0.609rem - 1px); left:0; width:2px; height:2px; border-radius: 50%; background-color:#ffffff;} #container .section-01 .l-con .con-body .time-info {display: flex; margin-top:10px; padding:4px 15px; border-radius: 5px; background: linear-gradient(#0F67B6, #4044A2); justify-content: center;} #container .section-01 .l-con .con-body .time-info > span {padding-right:8px; font-weight:500; font-size:0.875rem;} #container .section-01 .l-con .con-body .time-info > span:last-child {padding-right:0;} #container .section-01 .l-con .con-body .time-info > .info-01 {position:relative; padding-left:20px;} #container .section-01 .l-con .con-body .time-info > .info-01::before {content:''; position:absolute; top:50%; left:0; width:16px; height:16px; background-image: url('../images/main/i_time.png'); background-repeat: no-repeat; background-size:cover; transform: translateY(-50%);} /*-----2023 10 20 추가-----*/ #container .section-01 .l-con .con-body .logout-info {display: flex; margin-top:25px; padding:4px 15px; border-radius: 5px; border: 2px solid #ffffff; justify-content: center; cursor: pointer;} #container .section-01 .l-con .con-body .logout-info > span {padding-right:8px; font-weight:500; font-size:0.875rem;} #container .section-01 .l-con .con-body .logout-info > span:last-child {padding-right:0;} #container .section-01 .l-con .con-body .logout-info > .info-01 {position:relative; padding-left:20px;} #container .section-01 .l-con .con-body .logout-info > .info-01::before {content:''; position:absolute; top:50%; left:0; width:16px; height:16px; background-image: url('../images/sub/i_logout.png'); background-repeat: no-repeat; background-size:cover; transform: translateY(-50%);} /*------------------------------------------------------------------- @interaction -------------------------------------------------------------------*/ #container .section-01 .l-con .con-body .user-info .r-box .btn.btn-busi {transition: background 0.3s, color 0.3s;} #container .section-01 .l-con .con-body .user-info .r-box .btn.btn-busi:focus, #container .section-01 .l-con .con-body .user-info .r-box .btn.btn-busi:hover {background-color:#ffffff;color:#000000;} /*------------------------------------------------------------------- 분류그룹 : 메인페이지 > section-01 > 외부조사원 속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타 -------------------------------------------------------------------*/ #container.investigator .section-01 .m-con { margin-right:15px; border:1px solid #DFE8EE; border-radius: 10px; background-color:#ffffff; flex-shrink:1;} /* #container.investigator .section-01 .m-con.v2 {border:1px solid #FF3D00;} */ /* #container.investigator .section-01 .m-con.v3 {border:1px solid #388361;} */ #container.investigator .section-01 .m-con .con-body .txt {display: block; max-width:250px; margin-bottom:20px; font-weight:500; font-size:0.875rem; color:#5C6C82; word-break: break-all;} #container.investigator .section-01 .m-con .con-body .date-list {display: block;} #container.investigator .section-01 .m-con .con-body .date-list > li {display: flex; margin-bottom:8px; padding:20px 50px; border-radius: 5px; background-color:#F3F4F7; align-items: center;} #container.investigator .section-01 .m-con .con-body .date-list > li .tit {display: block; position:relative; padding-right:20px; font-weight:600; font-size:1rem; color:#FF3D00; word-break: break-all;} #container.investigator .section-01 .m-con .con-body .date-list.busi-trip > li .tit {color:#388361;} #container.investigator .section-01 .m-con .con-body .date-list > li .tit::after {content:''; position:absolute; top:50%; right:0; width:1px; height:10px; background-color:#5C6C82; transform: translateY(-50%);} #container.investigator .section-01 .m-con .con-body .date-list > li .date {display: flex; padding-left:20px; font-weight:400; font-size:0.875rem; color:#5C6C82; align-items: center;} #container.investigator .section-01 .m-con .con-body .date-list > li .color {margin-right:2px; font-weight:700; font-size:1.25rem; color:#FF3D00;} #container.investigator .section-01 .m-con .con-body .date-list.busi-trip > li .color {color:#388361;} #container.investigator .section-01 .r-con {display: flex; overflow: hidden;} #container.investigator .section-01 .r-con .l-box {width:350px; border-right:1px solid #DFE8EE; background-image:url('../images/main/i_busi_bg.png'); background-repeat: no-repeat; background-position:center right 20px; flex-shrink: 0;} #container.investigator .section-01 .r-con .r-box {flex-grow: 1;} #container.investigator .section-01 .r-con .l-box .con-body {width:70%; height:100%;} #container.investigator .section-01 .r-con .l-box .tit {display: block; margin-top:30px; margin-bottom:20px; font-weight:700; font-size:1.5625rem; color:#000; word-break: break-all;} #container.investigator .section-01 .r-con .l-box .txt {display: block; width:100%; margin-bottom:40px; font-weight:500; font-size:0.875rem; color:#5C6C82;} #container.investigator .section-01 .r-con .l-box .btn-link {display: block; min-width:130px; height:30px; border-radius: 5px; background: linear-gradient(#12A051, #007E68);} #container.investigator .section-01 .r-con .l-box .btn-link > span {position:relative; padding-right:40px; font-weight:600; font-size:0.875rem; color:#ffffff;} #container.investigator .section-01 .r-con .l-box .btn-link > span::before {content:''; position:absolute; top:50%; right:0; width:18px; height:18px; background-image:url('../images/main/i_next.png'); background-repeat: no-repeat; transform: translateY(-50%);} #container.investigator .section-01 .r-con .r-box {} #container.investigator .section-01 .r-con .r-box .quick-list {display: flex; width:100%; height:100%; flex-direction:column;} #container.investigator .section-01 .r-con .r-box .quick-list > li {height:25%; border-bottom:1px solid #DFE8EE;} #container.investigator .section-01 .r-con .r-box .quick-list > li:last-child {border-bottom:0;} #container.investigator .section-01 .r-con .r-box .quick-list > li .q-item {display: flex; position:relative; height:100%; ppadding:20px; padding-left:60px; padding-right:25px; flex-direction:column; justify-content:center;} #container.investigator .section-01 .r-con .r-box .quick-list > li .q-item::before {content:''; position:absolute; top:50%; left:20px; width:26px; height:26px; background-repeat: no-repeat; background-size:cover; transform: translateY(-50%);} #container.investigator .section-01 .r-con .r-box .quick-list > li .q-item::after {content:''; position:absolute; top:50%; right:20px; width:16px; height:16px; background-image: url('../images/main/i_next_black.png'); background-repeat: no-repeat; transform: translateY(-50%);} #container.investigator .section-01 .r-con .r-box .quick-list > li .q-item .tit {display: block; font-weight:700; font-size:1rem;} #container.investigator .section-01 .r-con .r-box .quick-list > li .q-item .txt {display: block; font-weight:500; font-size:0.875rem; color:#5C6C82; word-break: break-all;} #container.investigator .section-01 .r-con .r-box .quick-list > li:nth-child(1) .q-item::before {background-image: url(../images/main/i_list_01.png); left:17px; width:30px; height:30px;} #container.investigator .section-01 .r-con .r-box .quick-list > li:nth-child(2) .q-item::before {background-image: url(../images/main/i_list_02.png);} #container.investigator .section-01 .r-con .r-box .quick-list > li:nth-child(3) .q-item::before {background-image: url(../images/main/i_list_03.png);} #container.investigator .section-01 .r-con .r-box .quick-list > li:nth-child(4) .q-item::before {background-image: url(../images/main/i_list_04.png);} /*------------------------------------------------------------------- @interaction -------------------------------------------------------------------*/ #container.investigator .section-01 .r-con .l-box .btn-link {transition:background 0.3s;} #container.investigator .section-01 .r-con .l-box .btn-link:focus, #container.investigator .section-01 .r-con .l-box .btn-link:hover {background:linear-gradient(#0d8242, #007E68);} #container.investigator .section-01 .r-con .r-box .quick-list > li .q-item::before {transition:background 0.3s;} #container.investigator .section-01 .r-con .r-box .quick-list > li {transition: background 0.3s;} #container.investigator .section-01 .r-con .r-box .quick-list > li .q-item .tit, #container.investigator .section-01 .r-con .r-box .quick-list > li .q-item .txt {transition: color 0.3s;} #container.investigator .section-01 .r-con .r-box .quick-list > li .q-item::after {transition:background 0.2s;} #container.investigator .section-01 .r-con .r-box .quick-list > li:focus, #container.investigator .section-01 .r-con .r-box .quick-list > li:hover {background: linear-gradient(45deg, #12A051 40%, #007E68);} #container.investigator .section-01 .r-con .r-box .quick-list > li:focus .q-item .tit, #container.investigator .section-01 .r-con .r-box .quick-list > li:hover .q-item .tit, #container.investigator .section-01 .r-con .r-box .quick-list > li:focus .q-item .txt, #container.investigator .section-01 .r-con .r-box .quick-list > li:hover .q-item .txt {color:#ffffff;} #container.investigator .section-01 .r-con .r-box .quick-list > li:focus .q-item::after, #container.investigator .section-01 .r-con .r-box .quick-list > li:hover .q-item::after {background-image:url('../images/main/i_next.png');} #container.investigator .section-01 .r-con .r-box .quick-list > li:nth-child(1):focus .q-item::before, #container.investigator .section-01 .r-con .r-box .quick-list > li:nth-child(1):hover .q-item::before {background-image: url(../images/main/i_list_01_on.png);} #container.investigator .section-01 .r-con .r-box .quick-list > li:nth-child(2):focus .q-item::before, #container.investigator .section-01 .r-con .r-box .quick-list > li:nth-child(2):hover .q-item::before {background-image: url(../images/main/i_list_02_on.png);} #container.investigator .section-01 .r-con .r-box .quick-list > li:nth-child(3):focus .q-item::before, #container.investigator .section-01 .r-con .r-box .quick-list > li:nth-child(3):hover .q-item::before {background-image: url(../images/main/i_list_03_on.png);} #container.investigator .section-01 .r-con .r-box .quick-list > li:nth-child(4):focus .q-item::before, #container.investigator .section-01 .r-con .r-box .quick-list > li:nth-child(4):hover .q-item::before {background-image: url(../images/main/i_list_04_on.png);} /*------------------------------------------------------------------- 분류그룹 : 메인페이지 > table 공통 속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타 -------------------------------------------------------------------*/ /* default */ .main-table {width: 100%;background-color: #fff;} .main-table caption {width: 0; height: 0; font-size: 0;} /* th */ .main-table tr th {padding: 11px 10px; border-top:1px solid #000;border-bottom: 1px solid #DFE8EE; font-weight: 600; font-size: 0.9375rem; text-align: center; color: #000; background-color: #F8F9FA;} .main-table thead.fixed, .main-table thead tr.fixed {position: sticky; top:0;} .main-table {border-collapse:separate; } .main-table thead.fixed tr, .main-table thead.fixed tr th, .main-table thead tr.fixed th {border-top:0; border-spacing:0;} .main-table thead.fixed tr th::before, .main-table thead tr.fixed th::before {content:''; position:absolute; top:0; left:0; width:100%; height:1px; background-color:#000000;} .main-table tr th.depth {border-left: 1px solid #DFE8EE; background-color: #f7f7f7;} .main-table tr th + th {border-left: 1px solid #DFE8EE;} .main-table thead tr:nth-child(n + 2) th {border-left: 1px solid #DFE8EE;} /* td */ .main-table tr td {padding: 11px 10px; border-bottom: 1px solid #DFE8EE; font-size:0.875rem; color:#5C6C82; text-align: center;} .main-table tr td.busi-name {max-width:250px;} .main-table tr td > span {word-break: break-all;} .main-table tr td.depth {border-left: 1px solid #DFE8EE;} .main-table tr th + td {border-left: 1px solid #DFE8EE;} .main-table tr td + td {border-left: 1px solid #DFE8EE;} .main-table tr td.center {text-align: center;} .main-table tr td .atxt {color:#112F5A; font-weight: 700;} /*------------------------------------------------------------------- @interaction -------------------------------------------------------------------*/ #container .main-table tbody tr {transition: background 0.3s;} #container .main-table tbody tr:focus, #container .main-table tbody tr:hover {background-color:#e9eff5;} #container .main-table tbody tr td.td-link:hover a {text-decoration: underline;} #container .main-table tbody tr td.view:focus .txt, #container .main-table tbody tr td.view:hover .txt {color:#000000; text-decoration: none;} /*------------------------------------------------------------------- 분류그룹 : 메인페이지 > section-01 속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타 -------------------------------------------------------------------*/ #container .section-01 .table-wrap.type-a {overflow:auto; max-height:250px;} /*------------------------------------------------------------------- 분류그룹 : 메인페이지 > section-02 속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타 -------------------------------------------------------------------*/ #container .section-02 {margin-top:20px; margin-bottom:50px;} #container .section-02 .calc-con {border:1px solid #DFE8EE; border-radius: 10px; background-color:#ffffff; flex-grow:1;} #container .section-02 .calc-con .table-wrap {margin:30px;} #container .section-02 .calc-con .table-wrap.main {overflow:auto; max-height:240px;} /*------------------------------------------------------------------- @메인 > 모달팝업 -------------------------------------------------------------------*/ /* modal */ /* #modalPop .popup .pop-con .pop-body .pop-table {} #modalPop .popup .pop-con .pop-body .pop-table .table {} #modalPop .popup .pop-con .pop-body .pop-table .table tr td.tit-box {background-color:#F8F9FA;} #modalPop .popup .pop-con .pop-body .pop-table tbody tr .input-box .intxt {border-radius: 5px;} #modalPop .popup .pop-con .pop-body .txt-box {margin-top:8px; padding:5px; border-radius: 100px; background-color:#E9E9E9; text-align: center;} #modalPop .popup .pop-con .pop-body .txt-box .pop-txt {display: block; font-size:0.875rem; color:#6f6f6f;} #modalPop .popup .pop-con .pop-body .btn-box {margin: 20px auto; text-align: center;} #modalPop .popup .pop-con .pop-body .btn-box .btn {margin:0 2px;} */ /*------------------------------------------------------------------- @메인 > footer -------------------------------------------------------------------*/ #footer {position:absolute;left:0;bottom:0;width:100%;height:80px;padding:10px 0 0; background-color: #000000;} #footer .foot-area {display: -webkit-box; display: -ms-flexbox; display: -moz-box; display: flex; max-width:1500px; width:100%; margin:0 auto; position: relative;} #footer .foot-area .l-con, #footer .foot-area .r-con {} #footer .foot-area .r-con {padding-left:20px;/*60px*/ -ms-flex: 1 0 auto; -webkit-box-flex: 1; flex-grow:1;} #footer .foot-area .l-con .logo {-ms-flex: 0 0 auto; flex-shrink: 0;} #footer .foot-area .r-con .foot-menu, #footer .foot-area .r-con .foot-info { display: -webkit-box; display: -ms-flexbox; display: -moz-box; display: flex; color:#ffffff;} #footer .foot-area .r-con .foot-menu > li, #footer .foot-area .r-con .foot-info > li {margin:10px 10px 0 10px; font-size:0.875rem;} #footer .foot-area .r-con .foot-info > li {margin-top:5px;} #footer .foot-area .r-con .foot-menu > li .txt {display: block; color:#ffffff;} #footer .foot-area .r-con .foot-menu > li .txt.email {color:#FABE00;} #header .gnb-top .gnb-top-box .l-con > .l-box li.busi-name {cursor: pointer;} /*------------------------------------------------------------------- @관리자/내부담당자 - 메인 2024.ksy - 추가 -------------------------------------------------------------------*/ /* header.manager_hd : 관리자 스타일 추가 */ #header.manager_hd .header-wrap #logo > .logo-wrap .logo > img {width: 100%;} #header.manager_hd .gnb-top { width: 100%; height: 45px; background-color: #000;} #header.manager_hd .gnb-top .gnb-top-box .l-con > .l-box > li > .item.ip-info > .time::after {content: ""; width: 1px; height: 12px; background-color: #fff; display: inline-block; margin: 0 15px; vertical-align: middle; opacity: 0.8;} #header.manager_hd .gnb-top .gnb-top-box .l-con > .l-box > li > span, #header.manager_hd .gnb-top-box .r-con > .r-box > li > a {font-size: 0.875rem;} #header.manager_hd .gnb-top .gnb-top-box .r-con > .r-box > li > .item.login {font-weight: 600; color: #000; background-color: #fff; border: 1px solid #fff; padding: 3px 15px; border-radius: 15px; cursor: pointer;} #header.manager_hd .gnb-top .gnb-top-box .r-con > .r-box > li > .item.login > span::before { content: ""; display: inline-block; background: url(../images/main/new/logout.png) no-repeat; width: 14px; height: 14px; margin-right: 5px; position: relative; top: 2px;} /* interaction */ #header.manager_hd .header-wrap .gnb .gnb-menu > li:hover .menu-01 > span {background: linear-gradient(#2f5a77, #1a394f); color:#ffffff;} #header.manager_hd .gnb-top .gnb-top-box .r-con > .r-box > li > .item.login:focus, #header.manager_hd .gnb-top .gnb-top-box .r-con > .r-box > li > .item.login:hover {outline: 2px solid #fff; background-color: #000; color: #fff; font-weight: 500;} #header.manager_hd .gnb-top .gnb-top-box .r-con > .r-box > li > .item.login:focus > span::before, #header.manager_hd .gnb-top .gnb-top-box .r-con > .r-box > li > .item.login:hover > span::before {background: url(../images/main/new/logout_w.png) no-repeat;} #header.manager_hd .header-wrap .gnb {padding: 0 40px;} #header.manager_hd .header-wrap { height: 100px; padding: 0 10px; background-color: #fff;} #header.manager_hd .header-wrap #logo { display: block; -ms-flex: 0 0 auto; flex-shrink: 0; width: 165px; height: 71px;} #header.manager_hd .header-wrap .gnb .gnb-menu > li .menu-01 {color: #000; font-weight: 600; font-size: 1.16rem;} #header.manager_hd .header-wrap .gnb .gnb-menu > li::after { content: ""; width: 4px; height: 4px; border-radius: 2px; background-color: #dfdfdf; display: inline-block; position: absolute; top: 50%; right: -1px;} #header.manager_hd .header-wrap .gnb .gnb-menu > li:last-child::after { content: ""; display: none;} #header.manager_hd .header-wrap .sitemap-box .btn-menu { display: block; position: relative; background-color: transparent; padding: 14px 12px; border: 1px solid #ddd; border-radius: 50%; transition: all 0.3s;} #header.manager_hd .header-wrap .sitemap-box .btn-menu .icon { display: block; position: relative; width: 19px; height: 15px;} #header.manager_hd .header-wrap .sitemap-box .btn-menu .icon .ln { display: block; position: absolute; right: 0; width: 100%; height: 3px; background-color: #000;} #header.manager_hd .header-wrap .sitemap-box .btn-menu .icon .ln.ver1 {top: 0;} #header.manager_hd .header-wrap .sitemap-box .btn-menu .icon .ln.ver2 {top: calc(50% - 1.2px);} #header.manager_hd .header-wrap .sitemap-box .btn-menu .icon .ln.ver3 {bottom: 0;} #header.manager_hd .header-wrap .gnb .gnb-menu > li .gnb-menu-02 li .menu-02 {background-color: #2f5a77;} #header.manager_hd .header-wrap .gnb .gnb-menu > li .gnb-menu-02 li .menu-02:focus, #header.manager_hd .header-wrap .gnb .gnb-menu > li .gnb-menu-02 li .menu-02:hover {background-color: #1a394f;} #header.manager_hd .header-wrap .gnb .gnb-menu > li:hover .menu-01::after, #header.manager_hd .header-wrap .gnb .gnb-menu > li.focus .menu-01::after {border-top: 7px solid #2f5a77;} /* interaction */ #header.manager_hd .header-wrap .sitemap-box .btn-menu:focus, #header.manager_hd .header-wrap .sitemap-box .btn-menu:hover {border-color: #000;} #header.manager_hd .header-wrap .sitemap-box .btn-menu .icon .ln {transition: all 0.3s;} #header.manager_hd .header-wrap .sitemap-box .btn-menu:focus .icon .ln.ver1, #header.manager_hd .header-wrap .sitemap-box .btn-menu:hover .icon .ln.ver1, #header.manager_hd .header-wrap .sitemap-box .btn-menu:focus .icon .ln.ver3, #header.manager_hd .header-wrap .sitemap-box .btn-menu:hover .icon .ln.ver3 {width: 100%;} /* 관리자 메인 공통 css */ #container #content.manager_content {padding-top: 145px;} #content.manager_content .section-wrap { max-width:1500px; margin:30px auto;} #content .label-hidden { overflow: hidden; position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; clip:rect(0,0,0,0); } /* visual_bg */ #container .visual_bg { width:100%; height: 500px; background-color: #333a44; position: absolute; overflow: hidden; z-index: -1;} #container .visual_bg::before {content: ""; background: linear-gradient( to left, #333a44, #202326 ); width: 30%; height: 230px; display: inline-block; position: absolute; bottom: 0; left: 0;} #container .visual_bg::after {content: ""; background: url(../images/main/new/bg_r.png) no-repeat center; width: 1660px; height: 960px; display: inline-block; position: absolute; top: -10%; right: -15%;} /* content_01 : 프로필, 분야, 사업현황 및 링크 3개 */ #container #content.manager_content .section-wrap .content_01 {display: flex; column-gap: 140px; width: 1500px;} #container #content.manager_content .section-wrap .content_01 > div {width:100%;} #container #content.manager_content .section-wrap .content_01 .profile_info .round_ylw {background-color: #ffc51b; font-size: 16px; line-height: 1.2; font-weight: bold; color: #222; display: inline-block; padding: 5px 20px; border-radius: 15px;} #container #content.manager_content .section-wrap .content_01 .profile_info .name_info {margin-top: 15px; color: #9a9fa5; font-size: 28px; font-weight: 500;} #container #content.manager_content .section-wrap .content_01 .profile_info .name_info > .name {color: #fff; font-weight: bold; font-size: 34px; margin-right: 4px; line-height: 1;} #container #content.manager_content .section-wrap .content_01 .business {color: #fff; font-weight: 500; font-size: 18px; margin-top: 30px;} #container #content.manager_content .section-wrap .content_01 .business ul {display: flex;} #container #content.manager_content .section-wrap .content_01 .business ul li {flex-grow: 1; display: flex; column-gap: 20px;} #container #content.manager_content .section-wrap .content_01 .business ul li::after {content: ""; display: block; clear: both;} #container #content.manager_content .section-wrap .content_01 .business ul li .title {line-height: 2.2;} #container #content.manager_content .section-wrap .content_01 .business ul li .cell-content > input.inp_cst {background-color: #333a44; color: #fff; width: 100%; min-width: 260px;} #container #content.manager_content .section-wrap .content_01 .business ul li .sel_cst { color: #fff; width: 100%; min-width: 260px; background: #333a44 url(../images/common/i_sel_w.svg) no-repeat center right 10px; background-size: 14px;} /* 링크 : 사업등록, 자료등록, 출장정산 */ #container #content.manager_content .section-wrap .content_01 .link_box ul::after {content: ""; display: block; clear: both;} #container #content.manager_content .section-wrap .content_01 .link_box ul li {overflow: hidden; width: calc(100% / 3 - 10px); border-radius: 10px; margin-right: 15px; float: left; position: relative;} #container #content.manager_content .section-wrap .content_01 .link_box ul li:last-child {margin-right: 0;} #container #content.manager_content .section-wrap .content_01 .link_box ul li a {display: inline-block; width: 100%; height: 152px; padding: 25px; background-color: #5f8caa;/*#4891c1*/ transition: 0.2s linear;} #container #content.manager_content .section-wrap .content_01 .link_box ul li a::before {content: ""; width: 120px; height: 120px; background-color: #fff; border-radius: 50%; opacity: 0.3; position: absolute; bottom: -30%; right: -12%;} #container #content.manager_content .section-wrap .content_01 .link_box ul li a::after {content: ""; background: url(../images/main/new/link_arrow.png) no-repeat center; width: 30px; height: 10px; position: absolute; bottom: 25px; right: 25px;} #container #content.manager_content .section-wrap .content_01 .link_box ul li a span {font-size: 20px; font-weight: 500; color: #fff;} #container #content.manager_content .section-wrap .content_01 .link_box ul li a img { position: absolute; left: 25px; bottom: 25px; background-size: 100%;} /* 관리자 link */ #container #content.manager_content .section-wrap .content_01 .link_box.master ul li:nth-child(1) a img { width: 48px; height: 48px;} #container #content.manager_content .section-wrap .content_01 .link_box.master ul li:nth-child(2) a img {width: 48px; height: 49px;} #container #content.manager_content .section-wrap .content_01 .link_box.master ul li:nth-child(3) a img {width: 50px; height: 46px;} /* 내부담당자 link */ #container #content.manager_content .section-wrap .content_01 .link_box.mg ul li:nth-child(1) a img {width: 50px; height: 46px;} #container #content.manager_content .section-wrap .content_01 .link_box.mg ul li:nth-child(2) a img {width: 48px; height: 48px;} #container #content.manager_content .section-wrap .content_01 .link_box.mg ul li:nth-child(3) a img {width: 48px; height: 49px;} /* interaction */ #container #content.manager_content .section-wrap .content_01 .link_box ul li a:hover {background-color: #2f5a77;} #container #content.manager_content .section-wrap .content_01 .link_box ul li a:hover::after {right: 15px; transition: 0.2s linear;} /* content_02 : 출장 정산 현황 + 그래프(전체 / 분야별) */ #container #content.manager_content .section-wrap .content_02 {padding-top: 30px; width: 1500px;} #container #content.manager_content .section-wrap .content_02::after {content: ""; display: block; clear: both;} #container #content.manager_content .section-wrap .cont-box {border: 1px solid #ddd; border-radius: 10px; background-color: #fff; float: left; margin-right: 20px;} #container #content.manager_content .section-wrap .cont-box:last-child {margin-right: 0;} #container #content.manager_content .section-wrap .cont-box .con_hd {padding: 10px 15px; border-bottom: 1px solid #ddd; position: relative;} #container #content.manager_content .section-wrap .cont-box .con_hd h2 {display: inline-block; font-size: 17px; color: #222; font-weight: bold;} #container #content.manager_content .section-wrap .cont-box .con_hd h2 > .desc {font-size: 14px; color: #909090; font-weight: 500; position: relative; top: -2px; padding-left: 16px;} #container #content.manager_content .section-wrap .cont-box .con_hd h2 > .desc::before {content: ""; width: 1px; height: 12px; background-color: #ddd; display: inline-block; margin: 0 8px; position: absolute;top: 50%; left: 0; transform: translateY(-50%);} #container #content.manager_content .section-wrap .cont-box .con_hd .txt_box {font-size: 14px; color: #222; font-weight: 600; background-color: #f1f1f1; border: 1px solid #e6e6e6; border-radius: 4px; padding: 4px 10px; position: absolute; top: 50%; right: 10px; transform: translateY(-50%); max-width: 120px; overflow: hidden; word-break: keep-all; text-overflow: ellipsis; white-space: nowrap;} #container #content.manager_content .section-wrap .cont-box .con_hd .search-box {position: absolute; top: 50%; right: 10px; transform: translateY(-50%);} #container #content.manager_content .section-wrap .cont-box .con_hd .search-box .srch-tit {margin-right: 5px; font-size: 15px; font-weight: 700; } #container #content.manager_content .section-wrap .cont-box .con_hd .search-box .sel {height: 32px; font-size: 15px; padding: 3px 34px 2px 15px;} #container #content.manager_content .section-wrap .cont-box.sec1_cont {width: 350px;} #container #content.manager_content .section-wrap .cont-box.sec2_cont {width: 760px;} #container #content.manager_content .section-wrap .cont-box.sec3_cont {width: 555px;} #container #content.manager_content .section-wrap .cont-box .con_inner {padding: 10px 15px; height: 210px; overflow: hidden;} #container #content.manager_content .section-wrap .cont-box .con_hd .plus_btn {background: #67707e url(../images/main/new/i_plus.png) no-repeat center; width: 12px; height: 12px; padding: 15px; border-radius: 4px; position: absolute; top: 50%; right: 10px; transform: translateY(-50%); transition: all 0.2s;} /* interaction */ #container #content.manager_content .section-wrap .cont-box .con_hd .plus_btn:hover {background-color: #333a44;} /* table - scroll */ #container #content.manager_content .section-wrap .cont-box .scr_box {position: relative;} #container #content.manager_content .section-wrap .cont-box .scr_box tbody{max-height: 150px; overflow-y: auto; display: block;} #container #content.manager_content .section-wrap .cont-box .scr_box tbody::-webkit-scrollbar { width: 6px; } #container #content.manager_content .section-wrap .cont-box .scr_box tbody::-webkit-scrollbar-thumb {border-radius: 10px; background-color: #333a44;} #container #content.manager_content .section-wrap .cont-box .scr_box tbody::-webkit-scrollbar-track {background: #ddd; border-radius: 10px; } #container #content.manager_content .section-wrap .cont-box tr td {padding: 4px 10px;} #container #content.manager_content .section-wrap .cont-box .scr_box thead, #container #content.manager_content .section-wrap .cont-box .scr_box tbody tr {display: table; width: 100%;} #container #content.manager_content .section-wrap .cont-box .scr_box{ table-layout: fixed; border-collapse: collapse;} #container #content.manager_content .section-wrap .cont-box .scr_box td {text-align: center;} /* 출장 정산 현황 table width 값 */ #container #content.manager_content .section-wrap .cont-box .bnsTrp thead .one {width: 100px;} #container #content.manager_content .section-wrap .cont-box .bnsTrp thead .two {width: 210px;} #container #content.manager_content .section-wrap .cont-box .bnsTrp thead .three {width: 100px;} #container #content.manager_content .section-wrap .cont-box .bnsTrp tbody .one {width: 100px;} #container #content.manager_content .section-wrap .cont-box .bnsTrp tbody .two {width: 210px;} #container #content.manager_content .section-wrap .cont-box .bnsTrp tbody .three {width: 100px;} /* 조사자별 등록 현황 table width 값 */ #container #content.manager_content .section-wrap .cont-box .register thead .one {width: 50px;} #container #content.manager_content .section-wrap .cont-box .register thead .two {width: 140px;} #container #content.manager_content .section-wrap .cont-box .register thead .three {width: 100px;} #container #content.manager_content .section-wrap .cont-box .register tbody .one {width: 50px;} #container #content.manager_content .section-wrap .cont-box .register tbody .two {width: 140px;} #container #content.manager_content .section-wrap .cont-box .register tbody .three {width: 100px;} #container #content.manager_content .section-wrap .cont-box .scr_box .bg_blue {background-color: #e8f1f7;} #container #content.manager_content .section-wrap .cont-box .scr_box .table_bdt {position: relative;} #container #content.manager_content .section-wrap .cont-box .scr_box .table_bdt::after {content: ""; border-top: 1px solid #000; position: absolute; top: 0; left: 0; z-index: 30; width: 100%;} #container #content.manager_content .section-wrap .cont-box .scr_box .sticky {position: sticky; bottom: 0; z-index: 1; background-color: #fff;} /* interaction */ #container #content.manager_content .section-wrap .cont-box .con_inner .bod-table tbody tr:hover {background-color: #e8f1f7;} /* content_03 : 사업비 정보 + 전체 원자료 입력현황 + 조사자별 등록 현황 */ #container #content.manager_content .section-wrap .content_03 {padding-top: 20px; width: 1500px;} #container #content.manager_content .section-wrap .content_03::after {content: ""; display: block; clear: both;} #container #content.manager_content .section-wrap .cont-box .project_info ul li {border-bottom: 1px dashed #ddd;} #container #content.manager_content .section-wrap .cont-box .project_info ul li:last-child {border: 0;} #container #content.manager_content .section-wrap .cont-box .project_info ul li {display: block; padding: 8px 0;} #container #content.manager_content .section-wrap .cont-box .project_info ul li::after {content: ""; display: block; clear: both;} #container #content.manager_content .section-wrap .cont-box .project_info ul li span {line-height: 1.43;} #container #content.manager_content .section-wrap .cont-box .project_info ul li .l_tit {width: calc(100% - 210px); font-size: 16px; color: #222; font-weight: 600; float: left; position: relative; margin-left: 10px;} #container #content.manager_content .section-wrap .cont-box .project_info ul li .l_tit::before {content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 4px; background-color: #adb0b4; position: absolute; top: 50%; left: -10px; transform: translateY(-50%);} #container #content.manager_content .section-wrap .cont-box .project_info ul li .r_info {color: #aaa; font-size: 15px; font-weight: 400; float: right; max-width: 200px; display: flex; align-items: center;} #container #content.manager_content .section-wrap .cont-box .project_info ul li .r_info .number {color: #ffc51b; font-size: 16px; font-weight: bold; margin-right: 10px; text-align: right; display: inline-block; width: 180px; overflow: hidden; word-break: keep-all; text-overflow: ellipsis; white-space: nowrap;} #container #content.manager_content .section-wrap .cont-box .con_inner::after {content: ""; display: block; clear: both;} #container #content.manager_content .section-wrap .cont-box .con_inner .content_l {width: 390px; margin-right: 10px; float: left;} #container #content.manager_content .section-wrap .cont-box .con_inner .content_l .scr_box tbody tr td {height: 36px;} #container #content.manager_content .section-wrap .cont-box .con_inner .content_r {width: calc(100% - 400px); height: 100%; float: left; box-sizing: border-box; overflow: hidden;} #container #content.manager_content .section-wrap .cont-box .con_inner .content_r .txt_box_02 {font-size: 14px; color: #222; font-weight: 600; background-color: #f1f1f1; border: 1px solid #e6e6e6; border-radius: 4px; padding: 4px 10px; text-align: center; overflow: hidden; word-break: keep-all; text-overflow: ellipsis; white-space: nowrap;} #container #content.manager_content .section-wrap .cont-box .con_inner .content_r .value_box {border: 1px solid #ddd; background-color: #fff; border-radius: 4px; text-align: center; padding: 10px 15px; margin-top: 10px;} #container #content.manager_content .section-wrap .cont-box .con_inner .content_r .value_box > p {font-weight: 500; padding-bottom: 6px; border-bottom: 1px dashed #ddd; line-height: 1;} #container #content.manager_content .section-wrap .cont-box .con_inner .content_r .value_box > div {padding-top: 6px;color: #aaa; font-size: 15px; font-weight: 400; text-align: right; display: flex; align-items: center;} #container #content.manager_content .section-wrap .cont-box .con_inner .content_r .value_box > div .number {color: #ffc51b; font-size: 20px; font-weight: bold; line-height: 1; text-align: center; width: 80%; display: inline-block; overflow: hidden; word-break: keep-all; text-overflow: ellipsis;white-space: nowrap;} /* footer - 웹접근성 마크 추가 */ #footer .foot-area .wa-mark {position:absolute; top:50%; right:0; width: 87px; height: 60px; transform:translateY(-50%);} #footer .foot-area .wa-mark img {width:100%;}