/*.sub__content-wrap {padding: 70px 0 170px;}*/ .sub__content-wrap {padding: 70px 0 100px;} /* .sub__content-wrap .inner {display: flex;} .sub__content {width: calc(100% - 369px); margin-left: 100px;} */ @media only screen and (max-width:1150px) { } @media only screen and (max-width:768px) { .sub__content-wrap {padding: 30px 0 70px;} } /* sub top menu title */ .menu-title {display: flex; align-items: center; justify-content: center; height: 361px; background: url('../../../../images/egovframework/com/front/sub_bg_01.png') no-repeat center; background-size: cover;} .menu-title p {font-family: 'NanumSquare'; font-weight: 800; font-size: 60px; color: #fff;} /* left menu */ .left-menu {width: 269px;} .left-menu .title {padding: 25px 25px 0; font-family: 'NanumSquare'; font-weight: 800; font-size: 30px; color: #222;} .left-menu > ul {margin-top: 35px; border-top: 2px solid #222;} .left-menu > ul > li {position: relative; border-bottom: 1px solid #dfdfdf; font-family: 'NanumSquare'; font-weight: 400; font-size: 18px; color: #666;} .left-menu > ul > li:before {content: ''; display: inline-block; position: absolute; top: 48%; left: 9px; transform: translateY(-50%); width: 4px; height: 4px; background: #dfdfdf;} .left-menu > ul > li.on, .left-menu > ul > li:hover {border-bottom-color: #30b3af; font-weight: 800; color: #30b3af;} .left-menu > ul > li.on:before, .left-menu > ul > li:hover:before {background: #30b3af;} .left-menu > ul > li.on:after, .left-menu > ul > li:hover:after {content: ''; display: inline-block; position: absolute; top: 50%; right: 8px; transform: translateY(-50%); width: 26px; height: 16px; background: url('../../../../images/egovframework/com/front/icon_left_menu_on.png') no-repeat center;} .left-menu > ul > li > a {display: inline-block; width: 100%; padding: 25px 23px; box-sizing: border-box;} /* private Pop */ /*.-provatePop .sub__content-wrap {height:100%;width:100%;padding: 40px 0 0;} .-provatePop .login-wrap.-pop {position: relative;top: 0;left: 0;transform: none;padding: 0;border-radius:0;background: none;} .-provatePop .login-wrap.-pop .top-text {margin-top: 14px;margin-bottom: 20px;} .-provatePop .login-wrap .identity_verification {margin-top:0;border-radius: 0 0 8px 8px;} .-provatePop .btn_login {margin-top:0;border-radius: 8px;} .-provatePop input[type="password"] {height:60px;margin:0 auto;border-radius: 8px;} .-provatePop .login-form {margin-top: 40px;}*/ /* sub menu title */ .sub__menu-title {display: flex; align-items: center; justify-content: center; width: 100%; height: 361px;} /* .sub__menu-title.type1 {background: url('../../../../images/egovframework/com/front/sub/sub_menu_title_01.png')no-repeat center; background-size: cover;} */ .sub__menu-title.type2 {background: url('../../../../images/egovframework/com/front/sub/sub_menu_title_02.png')no-repeat center; background-size: cover;} .sub__menu-title.type3 {background: url('../../../../images/egovframework/com/front/sub/sub_menu_title_03.png')no-repeat center; background-size: cover;} .sub__menu-title.type4 {background: url('../../../../images/egovframework/com/front/sub/sub_menu_title_04.png')no-repeat center; background-size: cover;} .sub__menu-title.type5 {background: url('../../../../images/egovframework/com/front/sub/sub_menu_title_05.png')no-repeat center; background-size: cover;} /* .sub__menu-title.type6 {background: url('../../../../images/egovframework/com/front/sub/sub_menu_title_06.png')no-repeat center; background-size: cover;} */ .sub__menu-title.type7 {background: url('../../../../images/egovframework/com/front/sub/sub_menu_title_07.png')no-repeat center; background-size: cover;} .sub__menu-title.type8 {background: url('../../../../images/egovframework/com/front/sub/sub_menu_title_08.png')no-repeat center; background-size: cover;} .sub__menu-title > p {font-family: 'NanumSquare'; font-weight: 800; font-size: 60px; color: #fff;} @media only screen and (max-width:1150px) { .sub__menu-title {height: 200px;} .sub__menu-title > p {font-size: 45px;} } @media only screen and (max-width:768px) { .sub__menu-title {height: 120px;} .sub__menu-title > p {font-size: 30px;} } /* sub navi */ .sub__navi-wrap {font-size: 0; border-top: 1px solid #f4f4f4; border-bottom: 1px solid #f4f4f4;} .sub__navi {display: flex; align-items: center; width: 1600px; margin: 0 auto;} .sub__navi .home {display: inline-block; width: 45px; padding: 27px 0; vertical-align: middle;} .sub__navi .home:before {display: none;} .sub__navi .home:after {display: none;} .sub__navi .select-box {display: inline-block; position: relative; width: 200px; background: url("../../../../images/egovframework/com/sub/select_arrow.png") no-repeat right 20px center; font-size: 16px; color: #888; box-sizing: border-box; vertical-align: middle;} .sub__navi .select-box:before {content: ''; display: inline-block; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 1px; height: 24px; background: #e1e1e1;} .sub__navi .select-box:last-child:after {content: ''; display: inline-block; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 1px; height: 24px; background: #e1e1e1;} .sub__navi .select-box > a {display: inline-block; width: 100%; height: 100%; padding: 28px 20px; box-sizing: border-box;} .sub__navi .select-box .sub_navi_list {display: none; position: absolute; top: 70px; width: 100%; border: 1px solid #e4e4e4; background: #fff; border-top: 0; z-index: 2; box-shadow: 3px 4px 10px rgba(0, 0, 0, 0.1);} .sub__navi .select-box .sub_navi_list a {display: inline-block; width: 100%; height: 100%; padding: 20px; border-top: 1px solid #e4e4e4; box-sizing: border-box;} .sub__navi > .state .right {margin-left: auto;} .sub__navi .share {display: inline-block; vertical-align: middle;} .sub__navi .print {display: inline-block; position: relative; width: 26px; margin-left: 27px; padding-left: 26px; text-align: center; vertical-align: middle;} .sub__navi .print:before {content: ''; display: inline-block; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 1px; height: 26px; background: #e5e5e5;} @media only screen and (max-width:1600px) { .sub__navi {width: 100%; padding: 0 50px; box-sizing: border-box;} } @media only screen and (max-width:1150px) { .sub__navi {display: none;} } @media only screen and (max-width:768px) { } /* tab menu */ .tab__menu-wrap {margin-bottom: 40px;} .tab__menu-wrap a {display: inline-block; padding-bottom: 16px; font-family: 'NanumSquare'; font-weight: 600; font-size: 18px; color: #222; letter-spacing: -0.025em;} .tab__menu-wrap a:not(:first-child) {position: relative; margin-left: 63px;} .tab__menu-wrap a:not(:first-child):before {content: ''; display: inline-block; position: absolute; top: 5px; left: -33px; width: 4px; height: 4px; border-radius: 100%; background: #999;} .tab__menu-wrap a.on {border-bottom: 2px solid #306bcb; font-weight: 900; color: #306bcb;} .tab__menu-wrap a:hover {font-weight: 700; color: #306bcb;} @media only screen and (max-width:1150px) { } @media only screen and (max-width:1024px) { } @media only screen and (max-width:768px) { .tab__menu-wrap {margin-bottom: 20px;} .tab__menu-wrap a {padding-bottom: 10px; font-size: 16px;} .tab__menu-wrap a:not(:first-child) {margin-left: 25px;} .tab__menu-wrap a:not(:first-child):before {left: -16px;} } /* 컨텐츠 공통 */ .top-title {font-weight: 700; font-size: 40px; color: #222; text-align: center;} .top-text {margin-top: 25px; font-size: 20px; line-height: 24px; color: #222; text-align: center;} .sub-text {margin-top: 30px;font-size: 16px;line-height: 30px;color: #333;border-top: 1px solid #222;border-bottom: 1px solid #222;padding: 18px 15px;} .sub-text .sub {margin-top: -9px;color: #666;text-indent: 10px;} .sub-title {font-weight: 700; font-size: 30px; color: #222; margin-top:40px;} @media only screen and (max-width:1024px) { } @media only screen and (max-width:768px) { .top-title {font-size: 24px;} } .popup-content-table td, .popup-content-table th { font-size: 1rem !important; } .popup-content-table .btn { font-size: 1rem !important; height: 2rem; } section[data-role-section]:not(._on) {display:none;} .content-title {font-family: 'SUIT'; font-weight: 700; font-size: 24px; color: #222; letter-spacing: -0.025em;} .content-title.type1 {position: relative; padding-top: 25px;} .content-title.type1:before {content: ''; display: inline-block; position: absolute; top: 0; left: 0; width: 23px; height: 4px; background: #344C64;} .content-title.type1:not(:first-child) {margin-top: 65px;} .content-title.type1.with-button{display: flex; align-items: center; justify-content: space-between;} ._underInfo .content-title.type1 {margin-top:65px;} .tabSection .content-title.type1 {margin-top: 40px;} .content-title.type2 {font-size: 36px;} .content-title.type3 {font-size: 40px;} .content-title .miniText {float: right;font-size: 14px;font-weight: 400;color: #999;margin-top: 13px;} .content-title .miniText2 {float: right;font-size: 15px;font-weight: 400;color: #999;margin-top: 7px;} .content-title.has-button, .content-title.has-button-select {display: flex; justify-content: space-between; align-items: center;} .content-title.has-button > div {font-family: 'SUIT'; font-weight: 700; font-size: 24px; color: #222; letter-spacing: -0.025em; display: flex; align-items: center;} .content-title.has-button-select > div { font-family: 'SUIT'; font-weight: 700; font-size: 24px; color: #222; letter-spacing: -0.025em; display: flex; justify-content: space-between; align-items: center; width: 90%; } .content-title.has-button-select > div button {height:40px;} .content-title.has-button-select > div > div {display: flex; align-items: center; justify-content: center;} .content-title.has-button-select .period-select {width: 200px; margin-left: 10px; height: 40px;} .content-subtitle {margin-top: 15px; position:relative;} .content-subtitle.type1.with-button > span {display:flex;align-items:flex-end;} .content-subtitle .tabMenu {} .content-subtitle .tabMenu .tabBtn {font-size:20px;font-family: inherit;} .content-subtitle .tabMenu .tabBtn:not(._on) {color:#999;} .content-subtitle .tabMenu .tabBtn + .tabBtn {margin-left: 20px;position:relative;} .content-subtitle .tabMenu .tabBtn + .tabBtn:before {content:'|';position:absolute;left:-15px;top:1px;} .content-subtitle .searchWrap {display:flex;gap:10px;position:relative;} .content-subtitle .searchWrap.-sectorLine {padding-right: 20px;} .content-subtitle .searchWrap.-sectorLine:after {content:'|';position:absolute;right: 3px;top: 10px;} .content-subtitle .searchWrap date {width:200px;} .content-subtitle .searchWrap input[type="date"].btnAddTr {height:34px;font-size: 13px;} .content-subtitle .tabOption {position:absolute;right:0;bottom:0;display:flex;} .content-subtitle .tabOption .current {color:#240750;font-size:15px;font-weight: 400;} .content-subtitle .tabOption .ex {color:#666;font-size:15px;font-weight: 400} .content__sub-title {margin-top: 20px; font-family: 'SUIT'; font-weight: 600; font-size: 18px; line-height: 27px; color: #222; letter-spacing: -0.025em;} @media only screen and (max-width:1024px) { } @media only screen and (max-width:768px) { .content-title {font-size: 18px;} .content-title.type1 {padding-top: 15px;} .content-title.type1:before {height: 2px;} .content-title.type1:not(:first-child) {margin-top: 30px;} .content-title.type2 {font-size: 18px;} .content-title.type3 {font-size: 18px;} .content__sub-title {margin-top: 15px; font-size: 16px; line-height: 22px;} } .content__sub-title {margin-top: 20px; font-family: 'SUIT'; font-weight: 600; font-size: 18px; line-height: 27px; color: #222; letter-spacing: -0.025em;} .bullet-list {margin-top: 25px;} .bullet-list li {display: flex; font-family: 'SUIT'; font-weight: 500; font-size: 18px; color: #222; line-height: 27px; letter-spacing: -0.025em;} .bullet-list .bullet {display: inline-block; margin-right: 3px;} @media only screen and (max-width:1024px) { } @media only screen and (max-width:768px) { .bullet-list {margin-top: 15px;} .bullet-list li {font-size: 14px; line-height: 20px;} } .dot-list {} .dot-list li {position: relative; padding-left: 17px; font-family: 'NanumSquare'; font-size: 22px; line-height: 32px; color: #222;} .dot-list li:before {content: ''; display: inline-block; position: absolute; top: 11px; left: 0; width: 6px; height: 6px; border-radius: 100%; background: #222;} .dot-list li + li {margin-top: 10px;} @media only screen and (max-width:1150px) { .dot-list li {font-size: 20px; line-height: 26px;} } @media only screen and (max-width:1024px) { } @media only screen and (max-width:768px) { .dot-list li {padding-left: 12px; font-size: 14px; line-height: 20px;} .dot-list li:before {top: 7px; width: 3px; height: 3px;} } .tabWrap {border-bottom:3px solid #222} .tabWrap > .tabInner {display:flex;justify-content:flex-start;align-items: flex-end;} .tabWrap > .tabInner > a {padding: 20px 40px;border: 1px solid #dbdbdb;border-bottom: 0;border-radius: 8px 8px 0 0;font-size: 20px;color:#666;} .tabWrap > .tabInner > a._on {border: 3px solid #222;color:#222;border-bottom: 0;margin-bottom: -3px;background: #fff;padding: 25px 40px;} .tabWrap > .tabInner > a + a {margin-left:10px;} .tabWrap.secondTab {padding: 40px 0 0;} .tabWrap.secondTab > .tabInner {} .tabWrap.secondTab > .tabInner > a {font-size: 16px;} .tabWrap.secondTab > .tabInner > a._on {margin-bottom: -3px;} .tabWrap.secondTab > .tabInner > a + a {} .hiddenTr {display:none;} .btnAddTr { font-size: 13px; margin: 0 0 0 10px; height: 34px;vertical-align: middle; } .btnAddRow { font-size: 13px; margin: 0 0 0 10px; height: 34px;vertical-align: middle; } .btnAddRow:disabled { filter: none; opacity: 0.5; cursor: not-allowed; display: none; } .btnRemoveRow { font-size: 13px; margin: 0 0 0 10px; height: 34px;vertical-align: middle; } .btnExecuteSave { font-size: 13px; margin: 0 0 0 10px; height: 34px;vertical-align: middle; } #btnShowBudgetHis { display: inline-flex; align-items: center; justify-content: center; width: 140px; height: 60px; border-radius: 5px; font-family: 'SUIT'; font-weight: 600; font-size: 20px; letter-spacing: -0.05em; box-sizing: border-box; } .btnShowHis { font-size: 13px; margin: 0 0 0 10px; height: 34px;vertical-align: middle; } .btnSaveEz { font-size: 13px; margin: 0; vertical-align: middle; position: absolute; right: 2%; top: 21%; height: 43px; width: 170px; } .dtree > .dTreeNode + .dTreeNode {margin-top:4px;} .tabSection {display:none;} .tabSection._on {display:block;} .tabSectionSub {display:none;} .tabSectionSub._on {display:block;} .tabSectionThr {display:none;} .tabSectionThr._on {display:block;} .content__table-wrap {overflow-x: auto; margin-top: 30px;} .content__table-wrap.-noOverflow {overflow:inherit} .content__table-wrap table {width: 100%; border-top: 1px solid #222; font-family: 'SUIT'; font-weight: 600; font-size: 18px; color: #444; letter-spacing: -0.05em;} .content__table-wrap.-taskTable table {width:auto;} .content__table-wrap.-taskTable table .-empty {background:#aaa;} .content__table-wrap thead tr {background: #f7f7f7;} .content__table-wrap thead th {} .content__table-wrap thead td {font-size:16px;} .content__table-wrap tr {border-bottom: 1px solid #dbdbdb;} .content__table-wrap tr[data-flag="-early"] {background:#fff;color:#999;} .content__table-wrap tr[data-flag="-end"] {background:#fff;color:#999;position:relative;} .content__table-wrap tr[data-flag="-end"] td:before {content: '';position: absolute;top: 37px;left: 0;height: 1px;width: 100%;background: #bdbdbd;} .content__table-wrap tr[data-flag="-delay"] {background:#f5f5f5;} .content__table-wrap tr[data-flag="-delay"] td:last-child {color:#f00;font-weight:700;} .content__table-wrap tr[data-flag="-inset"] {background:#fff;} .content__table-wrap tbody th {background: #f7f7f7; border-right: 1px solid #dbdbdb;} .content__table-wrap tfoot tr {border-top:3px solid #dbdbdb;} .content__table-wrap tbody {border-bottom:1px solid #222;} /*.content__table-wrap tbody th {background: #fff; border-right: 1px solid #dbdbdb;}*/ .content__table-wrap th {padding: 27px; text-align: left; vertical-align: middle;} .content__table-wrap td {padding: 27px; line-height: 22px; vertical-align: middle;} .content__table-wrap td textarea {height: 176px;} .content__table-wrap b {color: #ff7b2a;} .content__table-wrap span.comment {display: block;font-size: .9rem;color: #888;margin-top:3px;} .content__table-wrap span.comment:before {content:"<";} .content__table-wrap span.comment:after {content:">";} .content__table-wrap tbody tr.labor-cost-detail td {cursor:pointer;} .content__table-wrap tbody.btb-black tr:first-child {border-top: 1px solid #555555;} .content__table-wrap tbody.btb-black tr:last-child {border-bottom: 1px solid #555555;} .content__table-wrap tfoot.btb-black tr {border-top: 3px solid #555555; border-bottom: 1px solid #555555;} .content__table-wrap tbody.btb-black {white-space: normal; overflow-wrap: break-word;} .content__table-wrap tbody.btb-black.dashboard td {text-align:center;} .content__table-wrap tbody.bodyStyle.-bt tr:first-child {border-top: 1px solid #555555;} .content__table-wrap tbody.bodyStyle.-bb tr:first-child {border-bottom: 1px solid #555555;} .content__table-wrap tbody.bodyStyle.-black tr:last-child {border-bottom: 1px solid #555555;} .content__table-wrap tfoot.bodyStyle.-black tr {border-top: 3px solid #555555; border-bottom: 1px solid #555555;} .content__table-wrap table.type1 {font-family: 'NanumSquare'; font-weight: 400; color: #222;} .content__table-wrap table.type1 thead th {text-align:center;padding: 12px 20px;font-size: 16px;border:1px solid #dbdbdb;border-top:0;border-collapse: collapse;} .content__table-wrap table.type1 thead tr th:first-child {border-left:0;} .content__table-wrap table.type1 thead th + th {position:relative;border-right:0;} /* .content__table-wrap table.type1 thead th + th:after {content:'';position:absolute;top:1px;;left:0;height:calc(100% - 2px);width:1px;background:#dbdbdb;} */ .content__table-wrap table.type1 th {padding: 29px 20px; font-size: 1rem;} /* .content__table-wrap table.type1 th.rootCate {border-right:1px solid #dbdbdb;} */ .content__table-wrap table.type1 .firstTh {text-align:center;font-size: 15px;} .content__table-wrap table.type1 .firstTh button {margin-top: 10px;text-align: center;height: 40px;font-size: 15px;width: 100%;max-width: 140px;} .content__table-wrap table.type1 .secondTh {border-left:1px solid #dbdbdb;font-size:16px;word-break: keep-all;} .content__table-wrap table.type1 td {padding: 12px 20px;} .content__table-wrap table.type1 .sort {font-size: 1rem; margin-right:5px;} .content__table-wrap table.type1 .flexTitle {font-size:14px;color:#222;margin-bottom:20px;display:none;} /*반응형*/ .content__table-wrap table.type1 .flexWrap {display:flex;gap: 30px;align-items:center} .content__table-wrap table.type1.-static {position:relative;padding:4px 20px;} .content__table-wrap table.type1.-static + .-static:before {content:'';position:absolute;top: 50%;left:0;height: 75%;width: 2px;background: #dbdbdb;transform: translate(0, -50%);} .content__table-wrap table.type1 .flexWrap + .flexWrap {margin-top:16px;} .content__table-wrap table.type1 .flexWrap input[data-role-adress="zip"] {width:110px;} .content__table-wrap table.type1 .flexWrap input[data-role-adress="addr"] {width:280px;} .content__table-wrap table.type1 .flexWrap input[data-role-adress="addr2"] {width:100%;} .content__table-wrap table.type1 .flexWrap.-address {} .content__table-wrap table.type1 .flexWrap.-address dl {width:100%;} .content__table-wrap table.type1 .flexWrap.-address dd {display:flex;gap: 15px;} .content__table-wrap table.type1 .flexWrap.-address dd + dd {margin-top:10px;} .content__table-wrap table.type1 .innerFlex {display:flex;width: 100%;align-items: center;position:relative;} .content__table-wrap table.type1 .-fc {justify-content:center;} .content__table-wrap table.type1 .-tac {text-align:center;} .content__table-wrap table.type1 .innerFlex .-fix {width:100%;} .content__table-wrap table.type1 .innerFlex > dt {min-width: 100px;padding-right: 15px;} .content__table-wrap table.type1 .innerFlex > dt + dd {padding-left: 10px;box-sizing: border-box;} .content__table-wrap table.type1 input.-w10p {width:10%;} .content__table-wrap table.type1 input.-w60 {width:60px;} .content__table-wrap table.type1 input.-tac {text-align:center;} .content__table-wrap table.type1 input.-tal {text-align:left;} .content__table-wrap table.type1 input.-tar {text-align:right;} .content__table-wrap table.type2 {font-family: 'NanumSquare'; font-weight: 400; color: #222;} .content__table-wrap table.type2 thead th {text-align:center;padding: 10px 20px;font-size: 16px;border:1px solid #dbdbdb;border-top:0;border-collapse: collapse;} .content__table-wrap table.type2 thead tr:first-child th:first-child {border-left:0;} .content__table-wrap table.type2 thead th + th{border-right:0;} .content__table-wrap table.-researchInsertTb td {padding:10px 10px; text-align:center; height:45px; border:1px solid #dbdbdb; border-top:0;} [data-role-section="chart"] .content__table-wrap table.-researchInsertTb td {padding:0;height:72px;} .content__table-wrap table.-researchInsertTb td.-left {text-align:left;} .content__table-wrap table.-researchInsertTb td:first-child {border-left:0;padding:0 10px;} .content__table-wrap table.-researchInsertTb td + td{border-right:0;} .content__table-wrap table.-researchInsertTb td [data-role-status="1"]:after {content:"대기";color:#666;} .content__table-wrap table.-researchInsertTb td [data-role-status="2"]:after {content:"진행중";color:#f0f;} .content__table-wrap table.-researchInsertTb td [data-role-status="3"]:after {content:"완료";color:#aa0;} .content__table-wrap table.-researchInsertTb td [data-role-status="4"]:after {content:"지연";color:#f00;} .content__table-wrap table.-researchInsertTb td.attachFileColumn.no-click {font-size: 1.5rem} .content__table-wrap table.-researchInsertTb td a {display: flex;align-items: center;} .content__table-wrap table.-researchInsertTb td .inputPerWrap {position: relative;display: flex;align-items: center;justify-content: space-between;} .content__table-wrap table.-researchInsertTb td .inputPerWrap input {padding: 0 12px 0 12px;width:calc(100% - 18px);text-align:center;} .content__table-wrap table.-researchInsertTb td .inputPerWrap .per {} .content__table-wrap table.-researchInsertTb td .inner {display:block;width:100%;height:70%;} .content__table-wrap table.-researchInsertTb td.-start .inner, .content__table-wrap table.-researchInsertTb td.-start ~ td .inner {background:#eee;} .content__table-wrap table.-researchInsertTb td.-start .inner {border-radius:8px 0 0 8px;} .content__table-wrap table.-researchInsertTb td.-end ~ td .inner {background:transparent !important;} .content__table-wrap table.-researchInsertTb td.-end .inner {border-radius:0 8px 8px 0;} .content__table-wrap table.-researchInsertTb td.-start.-end .inner {border-radius:8px;} .content__table-wrap table.-researchInsertTb td ._grid {position:absolute;top:20px;text-align:center;height: 30px;z-index:1;} .content__table-wrap table.-researchInsertTb td ._grid .current {color:#240750;font-size:15px;font-weight: 900;} .content__table-wrap table.-researchInsertTb td ._grid .ex {color:#666;font-size:15px;font-weight: 900;} .content__table-wrap table.-researchInsertTb td ._grid p {position:relative;width:100%;height:3px;background:#fff;z-index:1;} .content__table-wrap table.-researchInsertTb td ._grid .bar {position:absolute;left:0;height:100%;background: linear-gradient(300deg, #240750 70%, #14458d);border-radius:0 10px 10px 0;margin-top: 5px;} .content__table-wrap table.-researchInsertTb td ._grid .bg {position:absolute;left:0;top: -8px;height:100%;background: #f6e2fb;border-radius:10px;z-index:-1;padding: 10px 0;} .content__table-wrap table.-researchInsertTb td ._grid[data-role-grid="100"] {color:#aaa;} .content__table-wrap table.-researchInsertTb td ._grid[data-role-grid="100"] span {border-radius: 0;background:#aaa;} .content__table-wrap table.-researchInsertTb tr {position:relative;} .content__table-wrap table.-researchInsertTb tr[data-role-depth="1"] { background: #ffffff; } .content__table-wrap table.-researchInsertTb tr[data-role-depth="2"] { background: #f5f5f5; } .content__table-wrap table.-researchInsertTb tr[data-role-depth="3"] { background: #ebebeb; } .content__table-wrap table.-researchInsertTb tr[data-role-depth="4"] { background: #e5e5e5; } .content__table-wrap table.-researchInsertTb tr[data-role-depth="5"] { background: #dfdfdf; } .content__table-wrap table.-researchInsertTb tr[data-role-depth="6"] { background: #d9d9d9; } .content__table-wrap table.-researchInsertTb tr[data-role-depth="7"] { background: #d3d3d3; } .content__table-wrap table.-researchInsertTb tr[data-role-depth="8"] { background: #cdcdcd; } .content__table-wrap table.-researchInsertTb tr[data-role-depth="9"] { background: #c7c7c7; } .content__table-wrap table.-researchInsertTb tr[data-role-depth="10"] { background: #c0c0c0; } .content__table-wrap table.-researchInsertTb tr > td span.ico { position: absolute; top: 40%; left: -4px; height: 18px; } .content__table-wrap table.-researchInsertTb#milestoneChartTable tr > td span.ico { top: 30%; } .content__table-wrap table.-researchInsertTb tr[data-role-depth="1"] > td span.ico {width:0;} .content__table-wrap table.-researchInsertTb tr[data-role-depth="2"] > td span.ico {background: url(../../../../images/egovframework/com/front/gantchart_step1.png) no-repeat center center / cover;width: 18px;} .content__table-wrap table.-researchInsertTb tr[data-role-depth="3"] > td span.ico {background: url(../../../../images/egovframework/com/front/gantchart_step2.png) no-repeat center center / cover;width: 22px;} .content__table-wrap table.-researchInsertTb tr[data-role-depth="4"] > td span.ico {background: url(../../../../images/egovframework/com/front/gantchart_step3.png) no-repeat center center / cover;width: 26px;} .content__table-wrap table.-researchInsertTb tr[data-role-depth="5"] > td span.ico {background: url(../../../../images/egovframework/com/front/gantchart_step4.png) no-repeat center center / cover;width: 30px;} .content__table-wrap table.-researchInsertTb tr[data-role-depth="6"] > td span.ico {background: url(../../../../images/egovframework/com/front/gantchart_step5.png) no-repeat center center / cover;width: 34px;} .content__table-wrap table.-researchInsertTb {font-size:16px;} .content__table-wrap table.-researchInsertTb th, .content__table-wrap table.-researchInsertTb td {padding:10px 7px; overflow-wrap: break-word; white-space: normal;} input[type="date"]::-webkit-clear-button, input[type="date"]::-webkit-inner-spin-button { display: none; } /*.content__table-wrap table.type2 td:hover{background:#f2f2f2;}*/ .content__table-wrap .estimate-attach {height: 200px; border: 1px solid #dbdbdb; align-content: center; padding: 10px; font-size: 20px;} .content-section {display:none; scroll-margin-top: 220px; } .content-section.on {display:block;} .modalSet[data-role-modal="gantChartInsertModal"] {height: 94vh; position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;z-index:1001;border:1px solid #666;box-sizing: border-box;font-size: 15px;display:none;} .modalSet[data-role-modal="gantChartInsertModal"]._on {display:block;} .modalSet[data-role-modal="gantChartInsertModal"] *::-webkit-scrollbar {width:8px;} .modalSet[data-role-modal="gantChartInsertModal"] *::-webkit-scrollbar-thumb {background-color: #666;} .modalSet[data-role-modal="gantChartInsertModal"] *::-webkit-scrollbar-track {background-color: #eee;} .modalSet[data-role-modal="gantChartInsertModal"] .modal-header {background: linear-gradient(to right, #344C64, #240750);display: flex;justify-content: space-between;align-items:center;height:50px;padding:0 20px;} .modalSet[data-role-modal="gantChartInsertModal"] .modal-header .modal-title {color:#fff;font-size:18px;font-weight:700;} .modalSet[data-role-modal="gantChartInsertModal"] .modal-header .btn-close {color:#fff;font-size:21px;} .modalSet[data-role-modal="gantChartInsertModal"] .innerModal {display:flex;justify-content: space-between;gap:20px;padding:0 20px;position:relative;} .modalSet[data-role-modal="gantChartInsertModal"] .innerModal .cateModal {width:300px;margin:20px 0;padding:0 10px;box-sizing:border-box;border:1px solid #999; height: 77vh;overflow-y: auto;} .modalSet[data-role-modal="gantChartInsertModal"] .innerModal .cateModal p {line-height:20px;padding-top:5px;padding-bottom:5px;} .modalSet[data-role-modal="gantChartInsertModal"] .innerModal .cateModal > p {padding-top:15px;} .modalSet[data-role-modal="gantChartInsertModal"] .innerModal .cateModal [data-role-depth="1"] span.ico {} .modalSet[data-role-modal="gantChartInsertModal"] .innerModal .cateModal [data-role-depth="2"] span.ico {background: url(../../../../images/egovframework/com/front/gantchart_1d.png) no-repeat center center / cover;display: inline-block;width: 17px;height: 17px;} .modalSet[data-role-modal="gantChartInsertModal"] .innerModal .cateModal [data-role-depth="3"] span.ico {margin-left:5px;background: url(../../../../images/egovframework/com/front/gantchart_2d.png) no-repeat center center / cover;display: inline-block;width: 17px;height: 17px;} .modalSet[data-role-modal="gantChartInsertModal"] .innerModal .cateModal [data-role-depth="4"] span.ico {margin-left:10px;background: url(../../../../images/egovframework/com/front/gantchart_3d.png) no-repeat center center / cover;display: inline-block;width: 17px;height: 17px;} .modalSet[data-role-modal="gantChartInsertModal"] .innerModal .dtree_control .right a + a {margin-left:4px;padding-left:10px;position:relative;} .modalSet[data-role-modal="gantChartInsertModal"] .innerModal .dtree_control .right a + a:after {content:'|';position:absolute;left:0;top:0;} .modalSet > div.innerModal > div.left > div.dtree_control.float {margin-top: 3.6vh;} .modalSet[data-role-modal="gantChartInsertModal"] .innerModal .newTreeModal {position:absolute;top:45px;left:20px;background:#fff;z-index:1;transition:all .2s;} .modalSet[data-role-modal="gantChartInsertModal"] .innerModal .dummyCate {height: 600px;} .modalSet[data-role-modal="gantChartInsertModal"] .innerModal .dummyCate._on {width:720px;} .modalSet[data-role-modal="gantChartInsertModal"] .innerModal .dummyCate .topOption {position: absolute;top:-15px;left:0;width: 100%;display: flex;justify-content: space-between;padding: 0;box-sizing: border-box;background: #fff;z-indeX:1;} .modalSet[data-role-modal="gantChartInsertModal"] .innerModal .dummyCate .closeModal {} .modalSet[data-role-modal="gantChartInsertModal"] .innerModal .dummyCate .right {} .modalSet[data-role-modal="gantChartInsertModal"] .innerModal .dummyCate .right a + a {margin-left:4px;padding-left:10px;position:relative;} .modalSet[data-role-modal="gantChartInsertModal"] .innerModal .dummyCate .right a + a:after {content:'|';position:absolute;left:0;top:0;} .modalSet[data-role-modal="gantChartInsertModal"] .innerModal .inputModal {width:400px;padding:1vh 0;} .modalSet[data-role-modal="gantChartInsertModal"] .innerModal .inputModal table {width:100%;} .modalSet[data-role-modal="gantChartInsertModal"] .innerModal .inputModal tr {color:#222;} .modalSet[data-role-modal="gantChartInsertModal"] .innerModal .inputModal tr + tr {border-top:1px solid #ddd;} .modalSet[data-role-modal="gantChartInsertModal"] .innerModal .inputModal tr th {text-align:left;height:6vh;line-height:6vh;vertical-align: middle;} .modalSet[data-role-modal="gantChartInsertModal"] .innerModal .inputModal tr td {width:100%;padding:10px 0;} .modalSet[data-role-modal="gantChartInsertModal"] .innerModal .inputModal tr td .tdInner {width:100%;display:flex;justify-content: space-between;align-items: center;} .modalSet[data-role-modal="gantChartInsertModal"] .innerModal .inputModal tr td .tdInner .fileupload_box {width:100%;text-align:right;} .modalSet[data-role-modal="gantChartInsertModal"] .innerModal .inputModal tr td .tdInner textarea {height:7vh;padding:10px;font-size:15px;resize: none} .modalSet[data-role-modal="gantChartInsertModal"] .innerModal .inputModal tr td .tdInner textarea.milestone_modal_textarea:read-only { background: #f5f5f5; } .modalSet[data-role-modal="gantChartInsertModal"] .innerModal .inputModal tr td .tdInner label {font-size:15px;} .modalSet[data-role-modal="gantChartInsertModal"] .innerModal .inputModal tr td .tdInner .labelWrap {width:calc(50% - 10px);} .modalSet[data-role-modal="gantChartInsertModal"] .innerModal .inputModal tr td .tdInner .labelWrap + .labelWrap:before {content: "";width: 9px;height: 1px;position: absolute;background: #f00;left: -14px;top: 50%;transform: translate(0, -50%);} .modalSet[data-role-modal="gantChartInsertModal"] .innerModal .inputModal tr td input[type='text'] {width:100%;height: 5vh;padding:0 10px;font-size:15px;} .modalSet[data-role-modal="gantChartInsertModal"] .innerModal .inputModal tr td input[type='number'] {width:calc(50% - 10px);height: 5vh;padding: 0 10px;border: 1px solid #bebebe;border-radius: 5px;background: #fff;font-family: 'NanumSquare';font-weight: 400;font-size: 15px;color: #222;box-sizing: border-box;} .modalSet[data-role-modal="gantChartInsertModal"] .innerModal .inputModal tr td input[type='date'] {width:100%;height: 5vh;padding:0 10px;font-size:15px;} .modalSet[data-role-modal="gantChartInsertModal"] .innerModal .inputModal tr td .labelWrap input._active:not(.hold) ~ label {left:10px;} .modalSet[data-role-modal="gantChartInsertModal"] .innerModal .inputModal tr td .labelWrap input.milestone_modal_date:disabled { background: #f5f5f5; } .modalSet[data-role-modal="gantChartInsertModal"] .innerModal .inputModal .innerTableWrap {margin-top:10px;height:12vh;overflow-y:auto; margin-bottom: 1vh} .modalSet[data-role-modal="gantChartInsertModal"] .innerModal .inputModal .innerTable {} .modalSet[data-role-modal="gantChartInsertModal"] .innerModal .inputModal .innerTable tr {border-top:1px solid #cadfdf;} .modalSet[data-role-modal="gantChartInsertModal"] .innerModal .inputModal .innerTable th:nth-child(4), .modalSet[data-role-modal="gantChartInsertModal"] .innerModal .inputModal .innerTable td:nth-child(4) {display:none;} .modalSet[data-role-modal="gantChartInsertModal"] .innerModal .inputModal .innerTable th {background:#cadfdf;text-align:center;height: 4vh; line-height: 4vh; } .modalSet[data-role-modal="gantChartInsertModal"] .innerModal .inputModal .innerTable td {text-align:center;} .modalSet[data-role-modal="gantChartInsertModal"] .innerModal .inputModal .innerTable td:nth-child(2) {text-align:left;position:relative;} .modalSet[data-role-modal="gantChartInsertModal"] .innerModal .inputModal .innerTable td:nth-child(2) img {position:absolute;left:10px;top:7px;width: 18px;vertical-align: middle;} .modalSet[data-role-modal="gantChartInsertModal"] .innerModal .inputModal .innerTable td:nth-child(2) a {padding-left: 30px;display: block;width: 100%;word-break: break-all;box-sizing: border-box;} .modalSet[data-role-modal="gantChartInsertModal"] .innerModal .inputModal .innerTable td #btnDel {text-indent:-999px;display: inline-block;width: 10px;background:url(../../../../images/egovframework/com/front/close_popup.png) no-repeat center center/contain;} .modalSet[data-role-modal="gantChartInsertModal"] .innerModal .btnWarp {display:flex;justify-content:space-between;} .modalSet[data-role-modal="gantChartInsertModal"] .innerModal .btnWarp > span {display:flex;} .content__table-wrap table.type1.budget-summary-table {border-collapse: inherit;} .content__table-wrap table.type1.budget-summary-table th {font-size:15px;border:1px solid #dbdbdb;} .content__table-wrap table.type1.budget-summary-table td {padding: 48px 20px 12px 20px;position:relative;} .content__table-wrap table.type1.budget-summary-table td .labelWrap:after {content:'';position:absolute;top:-40px;left:100%;font-size:13px;color: #999;white-space:nowrap;} .content__table-wrap table.type1.budget-summary-table td[data-role-sector="sector_1"] .labelWrap:after {content:'당초예산';} .content__table-wrap table.type1.budget-summary-table td[data-role-sector="sector_4"] .labelWrap:after {content:'수정예산';left: 50%;transform: translateX(-50%);} .content__table-wrap table.type1.budget-summary-table td[data-role-sector="sector_7"] .labelWrap:after {content:'집행관리 1차년도';left: 50%;transform: translateX(-50%);} .content__table-wrap table.type1.budget-summary-table td[data-role-sector="sector_10"] .labelWrap:after {content:'집행관리 2차년도';left: 50%;transform: translateX(-50%);} .content__table-wrap table.type1.budget-summary-table td[data-role-sector="sector_13"] .labelWrap:after {content:'집행관리 합계';left: 50%;transform: translateX(-50%);} .content__table-wrap table.type1.budget-summary-table td[data-role-sector="sector_2"] {border-right:1px solid #dbdbdb;} .content__table-wrap table.type1.budget-summary-table td[data-role-sector="sector_5"] {border-right:1px solid #dbdbdb;} .content__table-wrap table.type1.budget-summary-table td[data-role-sector="sector_8"] {border-right:1px solid #dbdbdb;} .content__table-wrap table.type1.budget-summary-table td[data-role-sector="sector_11"] {border-right:1px solid #dbdbdb;} .content__table-wrap table.type1.budget-summary-table .-stick {position:sticky;border-right:1px solid #dbdbdb;background: #f7f7f7;} .content__table-wrap table.type1.budget-summary-table .-stick.-bgWhite {background:#fff;border-top:1px solid #dbdbdb;padding: 12px 20px;} .content__table-wrap table.type1.budget-summary-table .-stick[data-role-depth="1"] {left:0;z-index:99;} .content__table-wrap table.type1.budget-summary-table .-stick[data-role-depth="2"] {left:85px;z-index:98;} .content__table-wrap table.type1.budget-summary-table .-stick[data-role-depth="3"] {left:230px;z-index:97;} .content__table-wrap table.type1.budget-summary-table .-stick[data-role-depth="4"] {left:345px;z-index:96;} .content__table-wrap table.type1.budget-summary-table .-stick[data-role-depth="5"] {left:445px;z-index:95;} .budget-summary-table .labelWrap input._hold ~ label, .budget-summary-table .labelWrap select._hold ~ label, .budget-summary-table .labelWrap textarea._hold ~ label {top: -10px;left: 50%;transform: translate(-50%, -50%);background:transparent;font-size:13px;border:0;color:#222;} .content__table-wrap table.type1.budget-summary-table textarea, .content__table-wrap table.type1.budget-summary-table input[type="text"], .content__table-wrap table.type1.budget-summary-table input[type="number"], .content__table-wrap table.type1.budget-summary-table input[type="password"] {height: 40px;} @media only screen and (max-width:1150px) { .mobile-table colgroup {display: none;} .mobile-table tbody, .mobile-table tr, .mobile-table th, .mobile-table td {display: block; width: 100%; box-sizing: border-box;} .mobile-table table.type1 th {padding: 20px;} .mobile-table table.type1 td {padding: 20px;} } @media only screen and (max-width:1024px) { } @media only screen and (max-width:768px) { .content__table-wrap table {font-size: 16px;} .content__table-wrap thead th {padding: 10px 15px;} .content__table-wrap td {padding: 10px 15px; line-height: 20px;} } .content__box-wrap {display: flex; flex-direction: column; align-items: center; justify-content: center; height: 320px; margin-top: 30px; border: 1px solid #dbdbdb; border-radius: 5px; background: #f7f7f7;} .content__box-wrap > p {margin-top: 30px; font-family: 'SUIT'; font-weight: 600; font-size: 18px; color: #444; line-height: 24px;} @media only screen and (max-width:1024px) { } @media only screen and (max-width:768px) { .content__box-wrap {height: auto; min-height: 150px; margin-top: 15px; padding: 20px;} .content__box-wrap > p {margin-top: 20px; font-size: 16px; line-height: 20px;} } .labelWrap {position:relative;width:100%} .labelWrap label {position: absolute;top: 50%;left: 12px;transform: translate(0, -50%);transition:all .2s;color:#999;} .labelWrap input._active:not(.hold) ~ label, .labelWrap textarea._active:not(.hold) ~ label {top:0;left:18px;border-left:3px solid #fff;border-right:3px solid #fff;background:#fff;font-size:15px;color:#222;} .labelWrap input._hold ~ label, .labelWrap select._hold ~ label, .labelWrap textarea._hold ~ label {top:0;left:18px;border-left:3px solid #fff;border-right:3px solid #fff;background:#fff;font-size:15px;color:#999;} .labelWrap textarea {overflow: hidden; resize: none;} .-totalList .content__table-wrap .labelWrap input._hold ~ label {display:none;} .-totalList .content__table-wrap table.type1 td {padding: 12px 14px;} .-totalList .content__table-wrap table.type1 td input[type="text"] {height:44px;} /* .content__table-wrap .labelWrap input:disabled {background:#f5f5f5;} */ /* .content__table-wrap .labelWrap input:focus ~ label {color:#f00;} */ /* .content__table-wrap .labelWrap input:invalid ~ label {color:#999;} */ .-researchInsertTb ._number {text-align:right;} .-researchInsertTb .-payWrap {position:relative;} .-researchInsertTb .-payWrap:after {content:'원';position:absolute;right: 10px;top:50%;transform:translate(0,-50%);} .-researchInsertTb .-payWrap input {width:100%;padding:0 32px 0 20px;} .-researchInsertTb .-payWrap input:disabled {background: #fafafa;} .-researchInsertTb .-perWrap {position:relative;} .-researchInsertTb .-perWrap:after {content:'%';position:absolute;right: 10px;top:50%;transform:translate(0,-50%);} .-researchInsertTb .-perWrap input {width:100%;padding:0 32px 0 20px;} .-researchInsertTb .-perWrap input:disabled {background: #fafafa;} .researchInfoRadio .research-list-radio {display: flex; justify-content: center; align-items: center;} .researchInfoRadio .research-list-radio:not(:first-child) {margin-left: 45px;} .tabSection .insertForm {padding: 10px 20px;border: 1px solid #666;background: #344C64;font-size: 14px;border-radius: 5px;font-family: 'SUIT';font-weight: 600;color: #fff;float: right;margin-bottom: 10px;} @media(max-width:1000px){ .content__table-wrap table.type1 td.-static .flexWrap {flex-wrap:wrap;} } .layerWrap {display:none;position:fixed;top:50%;;left:50%;transform:translate(-50%,-50%);background:#fff;width:100%;max-width:1000px;z-index:1000;box-shadow:2px 2px 10px rgba(0,0,0,.3);border-radius:10px;} .layerWrap._on {display:block;} .content__table-wrap .layerWrap th {padding:10px 15px;} /*.layerWrap input[type="text"] {height: 40px;} .layerWrap select {height: 40px;}*/ .layerWrap textarea {height: 80px;} .layerWrap .layerInner {padding:30px 20px 20px;box-sizing:border-box;} .layerWrap .layerInner ul {max-height: 60vh; overflow-y: auto; padding: 7.5px 7.5px; display: flex; flex-wrap: wrap;} .layerWrap .layerInner ul::-webkit-scrollbar {width: 10px; /* 스크롤바 너비 */} .layerWrap .layerInner ul::-webkit-scrollbar-track {background: #f1f1f1;/* 트랙 배경색 */ border-radius: 10px; /* 둥근 모서리 */} .layerWrap .layerInner ul::-webkit-scrollbar-thumb {background-color: #888;/* 스크롤바 색상 */ border-radius: 10px; /* 둥근 모서리 */} .layerWrap .layerInner ul::-webkit-scrollbar-thumb:hover {background-color: #555;/* 호버 시 색상 */} .layerWrap h2 {font-size:24px;font-weight:700;padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid #eee;} .layerWrap li + li {margin-top:12px;} .layerWrap .btnWrap {display:flex;justify-content:center;gap:20px;margin-top:20px;} .layerWrap .btnWrap .btn {padding:4px 5px;background:#f0f0f0;font-size:18px;color:#222;font-weight:700;} .layerWrap .btnWrap .btn.-active {background:#240750;color:#fff;border:2px solid #240750;} .layerWrap .btnWrap .btn.-save {background: #344C64;color:#fff;} .layerWrap .btnWrap .btn.-cancel {background:#fff;color:#344C64;border:2px solid #344C64;} .layerWrap2 {position:absolute;top:50%;;left:50%;transform:translate(-50%,-50%);background:#fff;height: 100%;width:100%;max-width:1000px;} .layerWrap2._on {display:block;} .content__table-wrap .layerWrap2 th {padding:10px 15px;} .layerWrap2 textarea {height: 80px;} .layerWrap2 .layerInner {padding:30px 20px 20px;box-sizing:border-box;} .layerWrap2 .layerInner ul {max-height: 500px; overflow-y: auto; padding: 7.5px 7.5px;} .layerWrap2 .layerInner ul::-webkit-scrollbar {width: 10px; /* 스크롤바 너비 */} .layerWrap2 .layerInner ul::-webkit-scrollbar-track {background: #f1f1f1;/* 트랙 배경색 */ border-radius: 10px; /* 둥근 모서리 */} .layerWrap2 .layerInner ul::-webkit-scrollbar-thumb {background-color: #888;/* 스크롤바 색상 */ border-radius: 10px; /* 둥근 모서리 */} .layerWrap2 .layerInner ul::-webkit-scrollbar-thumb:hover {background-color: #555;/* 호버 시 색상 */} .layerWrap2 h2 {font-size:24px;font-weight:700;padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid #eee;} .layerWrap2 li + li {margin-top:12px;} .layerWrap2 .btnWrap {display:flex;justify-content:center;gap:20px;margin-top:20px;} .layerWrap2 .btnWrap .btn {padding:4px 5px;background:#f0f0f0;font-size:18px;color:#222;font-weight:700;} .layerWrap2 .btnWrap .btn.-active {background:#240750;color:#fff;border:2px solid #240750;} .layerWrap2 .btnWrap .btn.-save {background: #344C64;color:#fff;} .layerWrap2 .btnWrap .btn.-cancel {background:#fff;color:#344C64;border:2px solid #344C64;} .content__box-wrap {display: flex; flex-direction: column; align-items: center; justify-content: center; height: 320px; margin-top: 30px; border: 1px solid #dbdbdb; border-radius: 5px; background: #f7f7f7;} .content__box-wrap > p {margin-top: 30px; font-family: 'SUIT'; font-weight: 600; font-size: 18px; color: #444; line-height: 24px;} .input-wrap {display: flex; align-items: center; gap: 10px;} .email-wrap {} .email-wrap select, .email-wrap input[type="text"] {width: calc( (100% - 45px) / 3 );} .email-wrap > span {font-family: 'NanumSquare'; font-weight: 400; font-size: 16px; color: #666;} .tel-wrap {} .tel-wrap input[type="text"] {width: calc( (100% - 63px) / 3 );} .tel-wrap > span {font-family: 'NanumSquare'; font-weight: 400; font-size: 31px; color: #666;} @media only screen and (max-width:1024px) { } @media only screen and (max-width:768px) { } @media only screen and (max-width:480px) { } .address-wrap {flex-wrap: wrap;} .files__list {margin-top: 5px;display: flex;flex-wrap: wrap;gap: 20px;align-items: center;padding: 10px 0;} .files__list li + li {margin-top: 5px;} .files__list a {font-family: 'NanumSquare'; font-weight: 400; font-size: 18px; color: #444; letter-spacing: -0.05em;} .files__list a img {vertical-align: middle;} .files__list a span {text-decoration: underline; vertical-align: middle;} .files__list .fileWrapLi + .fileWrapLi {margin-top: 0;} .files__list .fileWrap {display: flex;align-items: center;gap: 10px;} .files__list .fileWrap a span {position:relative;} .files__list .fileWrap a span::after {content:'';position:absolute;bottom:-7px;left:0;width:0;height:2px;background:transparent;transition:all .2s ease-in-out;} .files__list .fileWrap a:hover span::after {background:#666;width:100%;} .files__list .fileWrap a span {text-decoration:none;} .files__list .fileWrap a img {margin-left:10px;border-radius: 4px;padding: 5px;border: 1px solid #d1d1d1;background: #f7f7f7;color: #fff;} @media only screen and (max-width:1024px) { } @media only screen and (max-width:768px) { .files__list a {margin-top: 10px; font-size: 14px;} } /* 로그인 */ .login-wrap {width: 500px; margin: 0 auto; text-align: center;} .login-form {display: flex; flex-direction: column; gap: 20px; margin-top: 45px;} .login-form > input {height: 70px; padding: 24px 30px; border: 1px solid #cecece; font-size: 22px; color: #666; box-sizing: border-box;} .login-form > input::placeholder {font-family: 'SUIT'; font-size: 22px; color: #666;} .login-wrap .login__or {position: relative; margin-top: 18px; font-size: 18px; color: #666;} .login-wrap .login__or:before {content: ''; display: inline-block; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: calc( (100% - 110px) / 2 ); height: 1px; background: #cecece;} .login-wrap .login__or:after {content: ''; display: inline-block; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: calc( (100% - 110px) / 2 ); height: 1px; background: #cecece;} .login-wrap .login__or span {display: inline-block; width: 110px;} .login-wrap .identity_verification {width: 100%; height: 70px; margin-top: 27px; border-radius: 0; font-weight: 500; font-size: 22px;} .member__link-wrap {font-size: 0; margin-top: 2rem} .member__link-wrap > a {display: inline-block; position: relative; font-size: 18px; color: #666666;} .member__link-wrap > a:not(:first-child) {margin-left: 15px; padding-left: 16px;} .member__link-wrap > a:not(:first-child):before {content: ''; display: inline-block; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 1px; height: 14px; background: #cecece;} @media only screen and (max-width:1024px) { } @media only screen and (max-width:768px) { .login-wrap {width: 100%;} .login-form > input {height: 50px; padding: 10px 25px; font-size: 18px;} .login-form > input::placeholder {font-size: 18px;} .login-wrap .identity_verification {height: 50px;} .member__link-wrap > a {font-size: 14px;} } @media only screen and (max-width:480px) { .login-form > input {font-size: 16px;} .login-form > input::placeholder {font-size: 16px;} .login-wrap .identity_verification {font-size: 18px;} .member__link-wrap > a {font-size: 14px;} } /* 회원가입 */ .join__member-inner {margin-top: 65px;} .join__member-list {display: flex; align-items: center; justify-content: center;} .join__member-list > div:not(:first-child) {position: relative; margin-left: 65px; padding-left: 75px;} .join__member-list > div:not(:first-child):before {content: ''; display: inline-block; position: absolute; top: 40px; left: 0; width: 9px; height: 17px; background: url('../../../../images/egovframework/com/front/sub/join_arrow.png') no-repeat center;} .join__member-list .img-wrap {display: flex; align-items: center; justify-content: center; position: relative; width: 100px; height: 100px; border-radius: 100%; background: #f5f5f5;} .join__member-list .img-wrap .number {display: inline-flex; align-items: center; justify-content: center; position: absolute; top: 0; left: 0; width: 32px; height: 32px; border-radius: 100%; background: #999; font-family: 'SUIT'; font-weight: 900; font-size: 18px; color: #fff;} .join__member-list div:first-child .img-wrap img {margin-left: 10px;} .join__member-list > div > p {margin-top: 15px; font-family: 'SUIT'; font-weight: 500; font-size: 16px; color: #666; letter-spacing: -0.025em; text-align: center;} .join__member-list > div.on .img-wrap {background: #d7f1f0;} .join__member-list > div.on .img-wrap .number {background: #344C64;} .join__member-list > div.on > p {font-weight: 700; color: #222;} .join__member-wrap .checkbox-wrap {padding-bottom: 30px; border-bottom: 1px solid #dbdbdb;} .join__member-wrap .checkbox-wrap label > span {font-family: 'SUIT'; font-weight: 600; font-size: 16px; color: #222; line-height: 22px;} .join__complete-wrap {margin-top: 120px; text-align: center;} .join__complete-wrap > .title {margin-top: 50px; font-family: 'SUIT'; font-weight: 500; font-size: 50px; color: #222;} .join__complete-wrap > .title strong {font-weight: 700;} .join__complete-wrap > .text {margin-top: 35px; font-family: 'SUIT'; font-weight: 500; font-size: 28px; color: #222; line-height: 42px; letter-spacing: -0.05em;} .join__complete-wrap .btn_login {max-width: 400px; margin-top: 80px;} .join__member-inner .id-wrap input {max-width: calc(100% - 135px);} @media only screen and (max-width:1150px) { .join__member-wrap .content__table-wrap colgroup {display: none;} .join__member-wrap .content__table-wrap tbody, .join__member-wrap .content__table-wrap tr, .join__member-wrap .content__table-wrap th, .join__member-wrap .content__table-wrap td {display: block; width: 100%; box-sizing: border-box;} .join__member-wrap .content__table-wrap table.type1 th {padding: 20px;} .join__member-wrap .content__table-wrap table.type1 td {padding: 20px;} .join__member-wrap .address-wrap #address1 {width: calc(100% - 135px); max-width: 100% !important;} } @media only screen and (max-width:1024px) { .join__member-list > div:not(:first-child) {margin-left: 45px; padding-left: 55px;} } @media only screen and (max-width:768px) { .join__member-inner {margin-top: 35px;} .join__member-list > div:not(:first-child) {margin-left: 30px; padding-left: 30px;} .join__member-list > div:not(:first-child):before {top: 23px;} .join__member-list .img-wrap {width: 60px; height: 60px;} .join__member-list .img-wrap .number {top: -4px; left: -1px; width: 22px; height: 22px; font-size: 12px;} .join__member-list div:nth-child(1) .img-wrap img {width: 30px; margin-left: 5px;} .join__member-list div:nth-child(2) .img-wrap img {width: 28px;} .join__member-list div:nth-child(3) .img-wrap img {height: 35px;} .join__member-list div:nth-child(4) .img-wrap img {width: 30px;} .join__member-list > div > p {display: none;} .join__complete-wrap {margin-top: 50px;} .join__complete-wrap > .title {margin-top: 30px; font-size: 30px;} .join__complete-wrap > .text {margin-top: 20px; font-size: 24px; line-height: 30px;} .join__complete-wrap .btn_login {max-width: 100%; margin-top: 40px;} } @media only screen and (max-width:480px) { .join__member-list > div:not(:first-child) {margin-left: 15px; padding-left: 15px;} .join__complete-wrap > img {width: 50px;} .join__complete-wrap > .title {font-size: 20px;} .join__complete-wrap > .text {font-size: 16px; line-height: 22px;} .join__member-inner .id-wrap input {max-width: calc(100% - 95px);} .join__member-inner .id-wrap .btn_address {width: 85px;} } /* layer popup */ .layer-popup {display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.7); z-index: 99999;} .layer-popup .layer {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 550px; padding: 40px; border-radius: 10px; background: #fff; box-sizing: border-box;} .layer-popup .layer.center {text-align: center;} .layer-popup .layer > .title {font-family: 'NanumSquare'; font-weight: 800; font-size: 28px; line-height: 32px; color: #222;} .layer-popup .layer > .text {margin-top: 20px; font-family: 'NanumSquare'; font-weight: 600; font-size: 16px; line-height: 20px; color: #222;} .layer-popup .input-list {font-size: 0;} .layer-popup .input-list li:first-child {margin-top: 45px;} .layer-popup .input-list li + li {margin-top: 35px;} .layer-popup .input-list label {display: block; margin-bottom: 12px; font-family: 'NanumSquare'; font-weight: 700; font-size: 16px; color: #222;} .layer-popup .input-list input {width: 100%;} .layer-popup .layer > .btn-wrap {margin-top: 50px;} .layer-popup .popup_close {position: absolute; top: 30px; right: 30px;} .layer-popup .closeBtn {position: absolute; top: 30px; right: 30px;} .layer-popup .content__table-wrap {margin-top: 45px;} .layer-popup .content__table-wrap th {padding: 15px 27px; font-weight: 600; font-size: 16px;} .layer-popup .content__table-wrap td {padding: 15px 27px; font-weight: 600; font-size: 16px;} .layer-popup .content__table-wrap td input {height: 40px;} .password-popup .birth__date input, .password-popup .birth__date select {width: calc( (100% - 22px) / 3 ); vertical-align: middle;} .password-popup .birth__date select {margin-left: 11px;} .password-popup .phone_number input {width: calc( (100% - 68px) / 3 ); vertical-align: middle;} .password-popup .phone_number > span {display: inline-block; margin: 0 11px; font-size: 28px; vertical-align: middle;} .password-popup .layer > .btn-wrap .btn {width: 100%; height: 52px; font-size: 16px;} .password-popup .layer > .btn-wrap .btn + .btn {margin-top: 20px;} .password-popup .btn + .btn {margin-left: 0;} .password__check-popup {} .password__check-popup .layer > .title {margin-top: 25px;} .password__check-popup .layer > .text {margin-top: 20px;} .change_password .layer > .title {text-align: center;} .change_password .layer > .title span {display: inline-block; padding-left: 60px; background: url('../../../../images/egovframework/com/front/sub/icon_change_password.png') no-repeat top left; line-height: 45px;} /* 나의 강의실 */ .study__list-content {margin-bottom: 40px; font-family: 'NanumSquare'; font-weight: 700;} .study__list-content.type2 {margin-top: 50px;} .study__list-content .title {font-size: 36px; color: #222; letter-spacing: -0.05em;} .study__list-content .content-inner {display: flex; align-items: center;} .study__list-content .text {font-size: 18px; line-height: 22px; color: #222; letter-spacing: -0.05em;} .study__list-content .text > span.type1 {color: #30b3af; text-decoration: underline;} .study__list-content .text > span.type2 {color: #306bcb; text-decoration: underline;} .study__list-current {display: flex; align-items: center; gap: 50px; margin-left: auto;} .study-current {display: flex; align-items: center;} .study-current > p {font-size: 18px; letter-spacing: -0.05em;} .study-current > .current {display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; margin-left: 32px; border: 1px solid; border-radius: 100%; background: #fff; font-size: 22px; letter-spacing: -0.05em;} .study-current.type1 {} .study-current.type1 > p {color: #30b3af;} .study-current.type1 > .current {border-color: #30b3af; color: #30b3af; box-shadow: 0 0 0 11px #eaf7f7;} .study-current.type2 {} .study-current.type2 > p {color: #fc5e05;} .study-current.type2 > .current {border-color: #fc5e05; color: #fc5e05; box-shadow: 0 0 0 11px #ffefe6;} .study-current.type3 {} .study-current.type3 > p {color: #999;} .study-current.type3 > .current {border-color: #999; color: #999; box-shadow: 0 0 0 11px #f5f5f5;} .study-current.type4 {} .study-current.type4 > p {color: #306bcb;} .study-current.type4 > .current {border-color: #306bcb; color: #306bcb; box-shadow: 0 0 0 11px #eaf0fa;} .content-head {font-family: 'NanumSquare'; text-align: center;} .content__head-inner {display: inline-block; text-align: left;} .study__list-content .content__head-inner {padding: 15px 0 15px 103px;background: url('../../../../images/egovframework/com/front/sub/icon_sub_09_02.png') no-repeat center left; background-size: auto 100%;} .content__head-inner > .tit {font-weight: 700; font-size: 30px; color: #222; letter-spacing: -0.05em;} .content__head-inner > .tit span {color: #3cb6b2;} .content__head-inner > .txt {margin-top: 15px; font-size: 16px; color: #666; letter-spacing: -0.05em;} .study__list-wrap table .btn {width: 100%; max-width: 90px; height: 40px;} .study__list-wrap .btn-restudy {background: #999; font-size: 18px; color: #fff;} .study__list-wrap .btn-restudy.on {background: #306bcb;} @media only screen and (max-width:1330px) { .study__list-current {margin-left: 30px;} } @media only screen and (max-width:1200px) { .study__list-content .content-inner {margin-top: 30px; flex-direction: column; align-items: flex-start;} .study__list-current {justify-content: space-between; gap: 0; width: 100%; margin: 30px 0 0;} } @media only screen and (max-width:768px) { .study__list-content {margin-bottom: 20px;} .study__list-content.type2 {margin-bottom: 25px;} .study__list-content .content-inner {margin-top: 20px;} .study__list-content .text {font-size: 16px; line-height: 20px;} .study-current > p {font-size: 14px;} .study-current > .current {width: 35px; height: 35px; margin-left: 15px; font-size: 16px;} .study-current.type1 > .current {box-shadow: 0 0 0 6px #eaf7f7;} .study-current.type2 > .current {box-shadow: 0 0 0 6px #ffefe6;} .study-current.type3 > .current {box-shadow: 0 0 0 6px #f5f5f5;} .study-current.type4 > .current {box-shadow: 0 0 0 6px #eaf0fa;} .content__head-inner > .tit {font-size: 20px;} .content__head-inner > .txt {margin-top: 10px; font-size: 14px; line-height: 18px;} } @media only screen and (max-width:480px) { .study__list-content .content__head-inner {padding: 15px 0 15px 63px; background-size: 52px;} } /* 사업소개 */ .edu__info-wrap {display: flex; align-items: center; gap: 60px; margin: 75px 0 145px;} .edu__info-wrap .left {width: calc(100% - 431px);} .edu__info-wrap .left li {display: flex; align-items: center; gap: 40px;} .edu__info-wrap .left li + li {margin-top: 50px;} .edu__info-wrap .title {display: inline-flex; align-items: center; justify-content: center; width: 260px; height: 80px; border: 1px solid; border-radius: 10px; font-family: 'NanumSquare'; font-weight: 700; font-size: 22px; box-sizing: border-box;} .edu__info-wrap li:nth-child(1) .title {border-color: #fc5e05; color: #fc5e05; box-shadow: 5px 4px 0 rgba(252, 94, 5, 0.15);} .edu__info-wrap li:nth-child(2) .title {border-color: #306bcb; color: #306bcb; box-shadow: 5px 4px 0 rgba(48, 107, 203, 0.15);} .edu__info-wrap li:nth-child(3) .title {border-color: #30b3af; color: #30b3af; box-shadow: 5px 4px 0 rgba(48, 179, 175, 0.15);} .edu__info-wrap li:nth-child(4) .title {border-color: #19114d; color: #19114d; box-shadow: 5px 4px 0 rgba(11, 38, 89, 0.15);} .edu__info-wrap li:nth-child(5) .title {border-color: #222; color: #222; box-shadow: 5px 4px 0 rgba(34, 34, 34, 0.15);} .edu__info-wrap .text {width: calc(100% - 240px); font-family: 'NanumSquare'; font-size: 22px; line-height: 26px; color: #222; letter-spacing: -0.05em;} .edu__info-wrap .right {width: 371px;} .edu__info-wrap .edu__info {display: flex; align-items: center; justify-content: center; position: relative; width: 371px; height: 371px; border-radius: 100%; background: #30b3af url('../../../../images/egovframework/com/front/sub/edu_info_arrow_02.png') no-repeat center left; box-shadow: 0 0 0 32px rgba(46, 179, 175, 0.1); font-family: 'NanumSquare'; font-weight: 700; font-size: 30px; color: #fff; letter-spacing: -0.05em;} .edu__info-wrap .edu__info:before {content: ''; display: inline-block; position: absolute; top: 50%; left: -167px; transform: translateY(-50%); width: 135px; height: 37px; background: url('../../../../images/egovframework/com/front/sub/edu_info_arrow_01.png') no-repeat center;} .edu__course-wrap {display: flex; gap: 80px; margin-top: 225px;} .edu__course-wrap > div {position: relative; width: calc( (100% - 160px) / 3 ); border: 1px solid; border-radius: 7px; box-sizing: border-box;} .edu__course-wrap > div .title {padding: 27px 54px; border-radius: 7px 7px 0 0; font-family: 'NanumSquare'; font-weight: 700; font-size: 24px; line-height: 34px; color: #fff;} .edu__course-wrap > div .text {padding: 30px 40px; font-family: 'NanumSquare'; font-size: 22px; line-height: 32px; color: #222;} .edu__course-wrap > div:not(:first-child):before {content: ''; display: inline-block; position: absolute; top: 50%; left: -49px; transform: translateY(-50%); width: 15px; height: 13px; background: url('../../../../images/egovframework/com/front/sub/edu_course_arrow.png') no-repeat center;} .edu__course-wrap > div:after {content: ''; display: inline-block; position: absolute; top: -150px; left: 50%; transform: translateX(-50%); width: 130px; height: 155px;} .edu__course-wrap > div:nth-child(1) {border-color: #306bcb;} .edu__course-wrap > div:nth-child(1) .title {background: #306bcb;} .edu__course-wrap > div:nth-child(1):after {background: url('../../../../images/egovframework/com/front/sub/edu_bg_01.png') no-repeat center;} .edu__course-wrap > div:nth-child(2) {border-color: #19114d;} .edu__course-wrap > div:nth-child(2) .title {background: #19114d;} .edu__course-wrap > div:nth-child(2):after {background: url('../../../../images/egovframework/com/front/sub/edu_bg_02.png') no-repeat center;} .edu__course-wrap > div:nth-child(3) {border-color: #fc5e05;} .edu__course-wrap > div:nth-child(3) .title {background: #fc5e05;} .edu__course-wrap > div:nth-child(3):after {background: url('../../../../images/egovframework/com/front/sub/edu_bg_03.png') no-repeat center;} @media only screen and (max-width:1550px) { .edu__info-wrap .left {width: calc(100% - 361px);} .edu__info-wrap .title {width: 160px;} .edu__info-wrap .text {width: calc(100% - 200px);} .edu__info-wrap .right {width: 271px;} .edu__info-wrap .edu__info {width: 271px; height: 271px;} } @media only screen and (max-width:1150px) { .edu__course-wrap {gap: 60px;} .edu__course-wrap > div {width: calc( (100% - 120px) / 3 );} .edu__course-wrap > div .title {padding: 20px 30px; font-size: 20px; line-height: 26px;} .edu__course-wrap > div .text {padding: 20px 30px; font-size: 18px; line-height: 24px;} } @media only screen and (max-width:1024px) { .edu__info-wrap {flex-direction: column; margin: 35px 0 95px;} .edu__info-wrap .left {width: 100%;} .edu__info-wrap .right {width: 100%; margin-top: 135px; text-align: center;} .edu__info-wrap .edu__info {transform: rotate(90deg);} .edu__info-wrap .edu__info span {transform: rotate(-90deg);} .edu__course-wrap {flex-direction: column; margin-top: 35px;} .edu__course-wrap > div {width: 100%;} .edu__course-wrap > div:not(:first-child):before {top: -35px; left: 50%; transform: translate(-50%, 0) rotate(90deg);} .edu__course-wrap > div:nth-child(1):after, .edu__course-wrap > div:nth-child(2):after, .edu__course-wrap > div:nth-child(3):after {display: none;} } @media only screen and (max-width:768px) { .edu__info-wrap {margin: 25px 0 65px;} .edu__info-wrap .left li {display: block;} .edu__info-wrap .title {width: 100%; height: 40px; font-size: 18px;} .edu__info-wrap .text {width: 100%; margin-top: 15px; font-size: 16px; line-height: 20px; text-align: center;} .edu__info-wrap .right {display: flex; align-items: center; justify-content: center; margin-top: 85px;} .edu__info-wrap .edu__info {width: 171px; height: 171px; font-size: 22px; box-shadow: 0 0 0 22px rgba(46, 179, 175, 0.1);} .edu__info-wrap .edu__info:before {left: -100px; width: 80px; background-position: bottom right; background-size: cover;} .edu__course-wrap {gap: 30px;} .edu__course-wrap > div:not(:first-child):before {top: -22px; width: 10px; background-size: 100%;} .edu__course-wrap > div .title {padding: 15px; font-size: 18px; line-height: 22px;} .edu__course-wrap > div .text {padding: 15px; font-size: 16px; line-height: 24px;} } /* 위치안내 */ .map-wrap {margin-top: 75px;} .map-info {} .map-info > p {display: flex; align-items: center; gap: 20px; font-family: 'NanumSquare'; font-weight: 700; font-size: 18px;} .map-info > p + p {margin-top: 15px;} .map-info > p > .tit {width: 130px; padding-left: 35px; color: #222; box-sizing: border-box;} .map-info > p:nth-child(1) > .tit {background: url('../../../../images/egovframework/com/front/sub/icon_map_01.png') no-repeat center left;} .map-info > p:nth-child(2) > .tit {background: url('../../../../images/egovframework/com/front/sub/icon_map_02.png') no-repeat center left;} .map-info > p:nth-child(3) > .tit {background: url('../../../../images/egovframework/com/front/sub/icon_map_03.png') no-repeat center left;} .map-info > p > .txt {width: calc(100% - 150px); color: #666;} .map__img-wrap {display: flex; gap: 18px; margin-top: 75px;} .map__img-wrap > div {border: 1px solid #e5e5e5; box-sizing: border-box;} .map__img-wrap > div.left {width: calc(100% - 398px);} .map__img-wrap > div.right {max-width: 380px;} /* .map__img-wrap img {max-width: 100%;} */ .map-channel {padding: 80px 0 65px; border-bottom: 1px solid #ddd;} .map-channel.type1 {padding-top: 95px;} .map-channel:last-child {border-bottom: none;} .map-channel .title {position: relative; padding-left: 80px; font-family: 'NanumSquare'; font-weight: 900; font-size: 28px; color: #306bcb;} .map-channel .title:before {content: ''; display: inline-block; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 70px; height: 70px;} .map-channel.type1 .title:before {background: url('../../../../images/egovframework/com/front/sub/map_bg_01.png') no-repeat center;} .map-channel.type2 .title:before {background: url('../../../../images/egovframework/com/front/sub/map_bg_02.png') no-repeat center;} .map-channel.type3 .title:before {background: url('../../../../images/egovframework/com/front/sub/map_bg_03.png') no-repeat center;} .map-channel .dot-list {margin-top: 45px;} .map-channel .dot-list li {font-weight: 900} .map-channel .dot-list li + li {margin-top: 5px;} .map-channel .dot-list li b {color: #30b3af;} @media only screen and (max-width:1150px) { } @media only screen and (max-width:1024px) { .map-wrap {margin-top: 35px;} .map__img-wrap {display: block; margin-top: 35px;} .map__img-wrap > div.left {width: 100%;} .map__img-wrap > div.right {max-width: 50%; margin: 0 auto;} } @media only screen and (max-width:768px) { .map-wrap {margin-top: 20px;} .map__img-wrap {margin-top: 20px;} .map-info > p {display: block; font-size: 16px;} .map-info > p > span {display: inline-block;} .map-info > p > .tit {width: 100%;} .map-info > p:nth-child(1) > .tit {background-position: top -3px left;} .map-info > p:nth-child(2) > .tit {background-position: top -3px left;} .map-info > p:nth-child(3) > .tit {background-position: top -3px left;} .map-info > p > .txt {width: 100%; margin-top: 10px; font-size: 14px;} .map-channel {padding: 20px 0 25px;} .map-channel.type1 {padding-top: 45px;} .map-channel .title {padding-left: 45px; font-size: 18px;} .map-channel .title:before {width: 35px; height: 35px;} .map-channel.type1 .title:before {background-size: 100%;} .map-channel.type2 .title:before {background-size: 100%;} .map-channel.type3 .title:before {background-size: 100%;} .map-channel .dot-list {margin-top: 20px;} } /* 공지사항 */ .notice__list-wrap {margin-top: -70px;} @media only screen and (max-width:1150px) { .notice__list-wrap {margin-top: 0;} } /* 시험응시 */ .study__popup-wrap {overflow: hidden; position: relative;} .study__popup-wrap .header {display: flex; align-items: center; padding: 18px 12px 18px 10px; background: #fff;} .study__popup-wrap .header .progress-wrap {margin-left: 50px;} .study__popup-wrap .header .progress-wrap span {font-weight: 600; font-size: 16px; color: #444; letter-spacing: -0.025em;} .study__popup-wrap .header .progress-wrap progress {width: 300px; margin: 0 20px; appearance: none; vertical-align: middle;} .study__popup-wrap .header .progress-wrap progress::-webkit-progress-bar {background: #f0f0f0; border-radius: 12px; border: 1px solid #e3e3e3; height: 12px; width: 300px; overflow: hidden;} .study__popup-wrap .header .progress-wrap progress::-webkit-progress-value {background: #193962; border-radius: 0px; height: 12px; /* width: 48px; */} .study__popup-wrap .header .study__popup-close {display: inline-flex; align-items: center; justify-content: center; position: static; width: 110px; height: 36px; margin-left: auto; border-radius: 30px; background: #193962;} .study__popup-wrap .header .study__popup-close span {display: inline-block; padding-left: 25px; background: url('../../../../images/egovframework/com/front/popup_close.png') no-repeat center left; font-weight: 500; font-size: 16px; color: #fff; letter-spacing: -0.025em;} .study__popup-wrap .content {display: flex; align-items: center; justify-content: center; width: 100%; /*height: 612px;*/ height: calc(100vh - 150px); background: #f9f9f9; box-sizing: border-box;} .study__popup-wrap .content > div {overflow-y: auto; max-height: 100%; padding: 60px; box-sizing: border-box;} .study__popup-wrap .content > div.textFrame {height: 100%;background: #fff;width: 100%;top: 0;left: 0;position: absolute;z-index: 1;overflow-y: inherit;} .study__popup-wrap .bottom {display: flex; align-items: center;position:relative;} .study__popup-wrap .bottom .btnNextMovie {position: absolute;top: -80px;right: 10px;border: 1px solid #405565;background: linear-gradient(to bottom, #0691fc 48%, #193962 52%);color: #fff;border-radius: 10px;padding: 20px 25px;font-size: 20px;transition:all .2s;z-index: 1;} .study__popup-wrap .bottom .btnNextMovie.-hide {top: 80px;} .study__popup-wrap .index_open {display: inline-flex; align-items: center; justify-content: center; width: 125px; height: 56px; background: #000; box-sizing: border-box;} .study__popup-wrap .index_open.on {background: #0691fc;} .study__popup-wrap .index_open span {display: inline-block; padding-left: 28px; background: url('../../../../images/egovframework/com/front/index_bg.png') no-repeat top 2px left; font-weight: 600; font-size: 18px; color: #fff;} .study__popup-wrap .bottom-inner {display: inline-flex; align-items: center; justify-content: center; width: calc(100% - 125px); height: 56px; background: #2d2d2d; box-sizing: border-box;} .study__popup-wrap .bottom .progress-wrap {height: 24px;} .study__popup-wrap .bottom .progress-wrap progress {width: 300px; appearance: none;} .study__popup-wrap .bottom .progress-wrap progress::-webkit-progress-bar {background: #fff; border-radius: 12px; height: 10px; width: 300px; overflow: hidden;} .study__popup-wrap .bottom .progress-wrap progress::-webkit-progress-value {background: #0691fc; border-radius: 0px; height: 10px; /* width: 48px; */} .study__popup-wrap .time-wrap {margin: 0 22px; font-weight: 500; font-size: 14px; color: #fff;} .study__popup-wrap .control-wrap {display: inline-flex; align-items: center; gap: 18px;cursor:pointer;} .study__popup-wrap .bottom .paging-wrap {display: inline-flex; align-items: center; margin: 0 0 0 30px;} .study__popup-wrap .bottom .paging-wrap p {margin: 0 15px; font-weight: 600; font-size: 18px; color: #fff;} .study__popup-wrap .bottom .paging-wrap p .current {color: #0691fc;} .index__list-wrap {display: none; position: absolute; bottom: 56px; width: 362px; max-height: 571px; z-index: 1;} .index__list-wrap:after {content: ''; display: inline-block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #0691fc; z-index: -1;} .index__list-wrap .inner {overflow-y: auto; width: 100%; max-height: 571px; padding: 0 20px 15px; box-sizing: border-box; } .index__list-wrap .inner > li {padding: 15px 0;} .index__list-wrap .inner > li._on {} .index__list-wrap .inner > li.-chapter {border-top: 1px solid #39a6fa;border-bottom: 1px solid #39a6fa;margin: 0 -12px;padding: 25px 0;} .index__list-wrap .inner > li:last-child {padding-bottom: 0; border-bottom: none;} .index__list-wrap .title {padding: 0 10px 0 55px; background: url('../../../../images/egovframework/com/front/index_title_bg.png') no-repeat center left 18px; font-weight: 600; font-size: 20px; color: #fff; line-height: 23px; letter-spacing: -0.025em;} .index__list-wrap .index__list {margin-top: 22px;} .index__list-wrap .-index:nth-of-type(n+2) {padding: 0 0 15px;} .index__list-wrap .-chapter + .-index {padding: 15px 0;} .index__list-wrap .-index a {display: inline-block; width: 100%; padding: 11px 20px; font-size: 18px; color: #fff; letter-spacing: -0.025em; box-sizing: border-box;} .index__list-wrap .-index a:hover, .index__list-wrap .index a.on {background: #fff; color: #0691fc;} .index__list-wrap .-index._on a {color: #0691fc;background: #fff;} .index__list-wrap .-index .num {display: inline-block; width: 20px; margin-right: 6px; font-size: 16px;} .index__list-wrap .index_close {display: inline-flex; align-items: center; justify-content: center; position: absolute; top: 0; right: -46px; width: 46px; height: 46px; background: #000;} input[type="range"] {overflow: hidden; position: relative; width: 80px; border-radius: 40px; background: transparent; color: #0691fc; --thumb-width: 4px; --thumb-height: 16px; --track-height: 12px; --track-color: #666; --clip-edges: 0.125em;} input[type="range"]:active {cursor: grabbing;} input[type="range"]:disabled {filter: grayscale(1); opacity: 0.3; cursor: not-allowed;} input[type="range"], input[type="range"]::-webkit-slider-runnable-track, input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; transition: all ease 100ms; height: var(--thumb-height); } input[type="range"]::-webkit-slider-runnable-track, input[type="range"]::-webkit-slider-thumb {position: relative;} input[type="range"]::-webkit-slider-thumb { --thumb-radius: calc((var(--thumb-height) * 0.5) - 1px); --clip-top: calc((var(--thumb-height) - var(--track-height)) * 0.5 - 0.5px); --clip-bottom: calc(var(--thumb-height) - var(--clip-top)); --clip-further: calc(100% + 1px); --box-fill: calc(-100vmax - var(--thumb-width, var(--thumb-height))) 0 0 100vmax currentColor; width: var(--thumb-width, var(--thumb-height)); background: #fff; box-shadow: var(--box-fill); border-radius: var(--thumb-width, var(--thumb-height)); /* filter: brightness(100%); */ clip-path: polygon( 100% -1px, var(--clip-edges) -1px, 0 var(--clip-top), -100vmax var(--clip-top), -100vmax var(--clip-bottom), 0 var(--clip-bottom), var(--clip-edges) 100%, var(--clip-further) var(--clip-further) ); } input[type="range"]:active::-webkit-slider-thumb {cursor: grabbing;} input[type="range"]::-webkit-slider-runnable-track {background: linear-gradient(var(--track-color) 0 0) scroll no-repeat center / 100% calc(var(--track-height) + 1px);} input[type="range"]:disabled::-webkit-slider-thumb {cursor: not-allowed;} input[type="range"], input[type="range"]::-moz-range-track, input[type="range"]::-moz-range-thumb {appearance: none; transition: all ease 100ms; height: var(--thumb-height);} input[type="range"]::-moz-range-track, input[type="range"]::-moz-range-thumb, input[type="range"]::-moz-range-progress {background: #fff;} input[type="range"]::-moz-range-thumb {background: #fff; border: 0; width: var(--thumb-width, var(--thumb-height)); border-radius: var(--thumb-width, var(--thumb-height)); cursor: grab;} input[type="range"]:active::-moz-range-thumb {cursor: grabbing;} input[type="range"]::-moz-range-track {width: 100%; background: var(--track-color);} input[type="range"]::-moz-range-progress {appearance: none; background: currentColor; transition-delay: 30ms;} input[type="range"]::-moz-range-track, input[type="range"]::-moz-range-progress {height: calc(var(--track-height) + 1px); border-radius: var(--track-height);} input[type="range"]::-moz-range-thumb, input[type="range"]::-moz-range-progress {filter: brightness(100%);} input[type="range"]:disabled::-moz-range-thumb {cursor: not-allowed;} [data-role-style="exam"].textFrame {display:none;} [data-role-style="exam"].textFrame._on {display:block;} [data-role-style="exam"] .content {position: absolute;top: 0;lefT: 0;width: 100%;height: 100%;overflow-y: auto;} [data-role-style="exam"] .content-title {display: flex;align-items: center;justify-content: center;overflow-y: inherit;width: 100%;height: 80px;background: url(../../../../images/egovframework/com/front/quiz_title_bg.png) center no-repeat;background-size: cover;font-family: 'NanumSquare';font-weight: 900;font-size: 46px;color: #fff;letter-spacing: 0;padding: 0 !important;position: absolute;top: 0;left: 0;} [data-role-style="exam"] .quiz-wrap {position: absolute;top: 80px;left: 0;width: 100%;height: calc(100% - 73px);} [data-role-style="exam"] .quiz-util {margin-top: 0;padding: 0 !important;position: absolute;bottom: 32px;left: 0;width: 100%;} [data-role-style="exam"] .quiz__table-wrap {height: 350px;} /* 시험응시 팝업 */ .study__popup-wrap.layer-popup {display: none; position: fixed;} .study__popup-wrap .layer {overflow: hidden; width: 85%; max-width: 1400px; height: 913px; padding: 0;} .study__popup-wrap.layer-popup .header {padding: 36px 12px 10px 10px;} .study__popup-wrap.layer-popup .content {flex-direction: column; height: calc(100% - 175px);} .study__popup-wrap.layer-popup .content > div {padding: 54px 60px;} .study__popup-wrap.layer-popup .content > .content-title {display: flex; align-items: center; justify-content: center; overflow-y: inherit; width: 100%; height: auto; padding: 35px 0; background: url('../../../../images/egovframework/com/front/quiz_title_bg.png') center no-repeat; background-size: cover; font-family: 'NanumSquare'; font-weight: 900; font-size: 46px; color: #fff; letter-spacing: 0;} .study__popup-wrap.layer-popup .quiz-wrap {max-width: 100%;height:100%;} .study__popup-wrap.test_end_popup {} .study__popup-wrap.test_end_popup .quiz-result {margin-bottom: 45px; font-family: 'NanumSquare'; font-weight: 700; font-size: 26px; line-height: 54px; text-align: center;} .study__popup-wrap.test_end_popup .quiz-result strong {font-size: 44px;display:block;} .study__popup-wrap.test_end_popup .quiz-result strong + strong {font-size: 27px;} .study__popup-wrap.test_end_popup b {color: #73cac8;} @media only screen and (max-width:1150px) { .study__popup-wrap .logo {width: 200px;} .study__popup-wrap .layer {width: 90%; height: 75vh;} .study__popup-wrap.layer-popup .header {padding: 18px 12px 18px 10px;} .study__popup-wrap.layer-popup .header .logo {width: 200px;} .study__popup-wrap.layer-popup .content {height: calc(100% - 76px);} .study__popup-wrap.layer-popup .content > .content-title {height: 120px; padding: 40px;} .study__popup-wrap.layer-popup .content > div {padding: 30px;} .study__popup-wrap .header .progress-wrap {width: calc(100% - 370px);} .study__popup-wrap .header .progress-wrap progress {width: calc(100% - 130px);} .study__popup-wrap .header .progress-wrap progress::-webkit-progress-bar {border-radius: 12px; height: 12px; width: 100%;} .study__popup-wrap .header .progress-wrap progress::-webkit-progress-value {background: #193962; border-radius: 0px; height: 12px; /* width: 48px; */} .study__popup-wrap .header .study__popup-close {width: 80px;} .study__popup-wrap .header .study__popup-close span {font-size: 14px;} .study__popup-wrap .content > div {padding: 30px;} .study__popup-wrap .index_open {width: 55px;} .study__popup-wrap .index_open span {width: 16px; height: 15px; padding: 0; font-size: 0; background-size: 100%;} .study__popup-wrap .bottom-inner {width: calc(100% - 55px);} .study__popup-wrap .bottom .progress-wrap progress {width: 150px;} .study__popup-wrap .bottom .progress-wrap progress::-webkit-progress-bar {width: 150px;} .study__popup-wrap .bottom .paging-wrap {margin-left: 15px;} .study__popup-wrap .bottom .paging-wrap img {width: 8px;} .study__popup-wrap .bottom .paging-wrap p {margin: 0 5px; font-size: 14px;} .quiz__table-wrap {font-size: 18px; line-height: 24px;height: auto;overflow-y:inherit;} } @media only screen and (max-width:768px) { .study__popup-wrap.layer-popup .content > .content-title {padding: 30px; font-size: 24px;} .quiz__table-wrap colgroup col:first-child {width: 90px !important;} .quiz__table-wrap th {padding: 15px;} .quiz__table-wrap th b {font-size: 12px;} .quiz__table-wrap td {padding: 15px;} .study__popup-wrap .header .progress-wrap {width: calc(100% - 290px); margin-left: 30px;} .study__popup-wrap .header .progress-wrap progress {width: calc(100% - 102px); margin: 0 10px;} .study__popup-wrap .header .progress-wrap span {font-size: 14px;} .study__popup-wrap .header .study__popup-close {width: 40px;} .study__popup-wrap .header .study__popup-close span {width: 11px; height: 10px; padding: 0; font-size: 0;} .index__list-wrap {width: 80%;} .index__list-wrap .inner {max-height: 300px;} .index__list-wrap .title {padding: 0 10px 0 35px; background-position: center left; font-size: 18px; line-height: 22px;} .index__list-wrap .index__list {margin-top: 20px;} .index__list-wrap .index a {padding: 10px 10px 10px 0; font-size: 16px; line-height: 20px;} .study__popup-wrap .bottom .progress-wrap progress {width: 100px;} .study__popup-wrap .bottom .progress-wrap progress::-webkit-progress-bar {width: 100px;} .study__popup-wrap .time-wrap {margin: 0 15px 0 5px;} .study__popup-wrap .control-wrap {gap: 10px;} } @media only screen and (max-width:480px) { .study__popup-wrap .logo {width: 150px;} .study__popup-wrap.layer-popup .header .logo {width: 150px;} } /* 만족도 조사 */ .study__popup-wrap.research_popup .content > .content-title {background-image: url('../../../../images/egovframework/com/front/sub/research_title_bg.png');} .research-wrap {padding: 45px 30px; border: 1px solid #bebebe; border-radius: 7px; background: #fff;} .research-wrap + .research-wrap {margin-top: 40px;} .research-wrap > .title {position: relative; margin-bottom: 25px; padding-left: 84px; font-family: 'SUIT'; font-weight: 700; font-size: 28px; color: #222; line-height: 32px;} .research-wrap > .title > .q_number {display: inline-flex; align-items: center; justify-content: center; position: absolute; top: -15px; left: 0; width: 63px; height: 63px; border-radius: 100%; background: #30b3af; font-weight: 900; font-size: 26px; color: #fff;} .research-wrap > .title > b {display: block; margin-top: 5px; font-size: 16px; color: #ff7b2a;} /*.research-wrap > ul {overflow-y: auto; max-height: 300px; padding-left: 84px;}*/ .research-wrap textarea {width: calc(100% - 84px) !important; margin-left: 84px;} .research-wrap > ul > li:first-child .checkbox-wrap {margin-top: 0; padding-top: 7px;} .research-wrap > ul > li:not(:first-child) .radio-wrap {margin-top: 25px;} @media only screen and (max-width:768px) { .research-wrap {padding: 20px 15px;} .research-wrap + .research-wrap {margin-top: 20px;} .research-wrap > .title > .q_number {top: 0; width: 43px; height: 43px; font-size: 14px;} .research-wrap > .title {margin-bottom: 15px; padding-left: 64px; font-size: 18px; line-height: 24px;} .research-wrap > .title > b {font-size: 14px;} .research-wrap > ul {padding-left: 0;} .research-wrap > ul > li:not(:first-child) .radio-wrap {margin-top: 15px;} .research-wrap textarea {width: 100% !important; margin: 0;} } /* 수료증 */ .certificate-wrap {} .certificate-wrap .img-wrap {text-align: center;} .error_wrap {display: flex;align-items: center;justify-content: center;text-align: center;height: calc(100vh - 277px);position: relative;max-width: 600px;margin: 0 auto;} .error_wrap h1 {font-size: 100px;font-weight: bold;position: relative;margin: -8vh 0 0;padding: 0;color: #9cfdfb;} .error_wrap h1:after { content: attr(data-h1); position: absolute; top: 0; left: 0; right: 0; color: transparent; /* webkit only for graceful degradation to IE */ background: -webkit-repeating-linear-gradient(-45deg, #344C64, #240750, #27b0ad, #2b5a9e, #b98acc, #69a6ce, #9b59b6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-size: 400%; text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.25); animation: animateTextBackground 10s ease-in-out infinite; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; } .error_wrap h2 {font-size: 26px;margin-top: 40px;color: #6b4d99;font-weight: bold;line-height: 26px;max-width: 600px;position: relative;} .error_wrap h2:after {content: attr(data-h2);position: absolute;top: 0;left: 0;right: 0;color: transparent;text-shadow: 0px 1px 2px rgba(255, 255, 255, 0.5);-webkit-background-clip: text;-moz-background-clip: text;background-clip: text;} .error_wrap h3 {font-size: 20px;margin-top: 10px;color: #535353;font-weight: 400;line-height: 20px;max-width: 600px;position: relative;white-space: nowrap;} .error_wrap [type="button"] {padding: 10px 20px;border-radius: 5px;background: linear-gradient(to right, #344C64, #240750);color: #fff;font-size: 15px;margin-top: 30px;font-family: 'NanumSquare';} @keyframes animateTextBackground { 0% {background-position: 0 0;} 25% {background-position: 100% 0;} 50% {background-position: 100% 100%;} 75% {background-position: 0 100%;} 100% {background-position: 0 0;} } /* 동영상 레이어 팝업 */ .movieDom {width: 1200px;position: fixed;top: 30px;left: 53px;z-index: 1001;box-shadow:6px 6px 10px rgba(0,0,0,.3);} .movieDom .header {justify-content:space-between;} .movieDom .header .headerContent {width:calc(100% - 270px);display: flex;align-items: center;justify-content: space-between;position: relative;margin: 0 auto;} .movieDom .study__popup-wrap {} .movieDom .study__popup-wrap .movieDomNav {position:relative;background: #2d2d2d;padding: 10px 15px;color: #fff;display: flex;align-items: center;justify-content: space-between;cursor: pointer;} .movieDom .study__popup-wrap .movieDomNav:after {position: absolute;content: '';right: 0;height: 0;width: 5%;background: #2d2d2d;z-index: 1;border-left: 44px solid #2d2d2d;border-top: 0px solid transparent;border-bottom: 44px solid #222;} .movieDom .study__popup-wrap .movieDomNav span {position:relative;z-index:2;} .movieDom .study__popup-wrap .header .progress-wrap {width: calc(100% - 30px);} .movieDom .study__popup-wrap .header .popup-close {display: inline-flex;align-items: center;justify-content: center;width: 110px;height: 36px;margin-left: auto;border-radius: 30px;background: #193962;} .movieDom .study__popup-wrap .header .popup-close span {display: inline-block;padding-left: 25px;background: url(../../../../images/egovframework/com/admin/popup_close.png) no-repeat center left;font-weight: 500;font-size: 16px;color: #fff;letter-spacing: -0.025em;} .movieDom .study__popup-wrap .content {position:relative;width:100%;height:0;padding-top:56.25%;overflow: inherit;} .movieDom .study__popup-wrap .content[data-role-type="video"]:before {content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:transparent;z-index: 1;} .movieDom .study__popup-wrap .content video {position:absolute;width:100%;height:100%;top:0;left:0;} .movieDom .index__list-wrap {left: 0;} .movieDom .playerTooltip {width:100%;display:flex;justify-content: space-between;align-items: center;padding: 0 20px;} .movieDom .playerTooltip .playerTooltipLeft {position: relative;display: flex;align-items: center;} .movieDom .playerTooltip .playerTooltipLeft.-hidden:after {content: '';position: absolute;left: 0;top: 0;height: 100%;width: 100%;background: #2d2d2d;} .movieDom .playerTooltip .playerTooltipRight {display: flex;align-items: center;} .movieDom .study__popup-wrap .bottom .progress-wrap input[type=range] {width: 300px;appearance: none;height: 10px;background: #fff;padding: 0;margin: 0;color: #0691fc;--thumb-width: 0px;--thumb-height: 0px;--track-height: 10px;--track-color: #fff;--clip-edges: 0.125em;} .movieDom .study__popup-wrap .bottom .progress-wrap input[type=range]:disabled {filter: none;opacity: 1;cursor: not-allowed;} .movieDom .study__popup-wrap .bottom .progress-wrap {display:flex;align-items:center;} /* 간트 차트 */ .gantt-chart { display: flex; flex-direction: column; width: 100%; } .gantt-chart + .gantt-chart {margin-top:50px;} .gantt-chart .yearsTitle {font-size:21px;margin-bottom: 12px;} .gantt-row { display: flex; align-items: center; border-bottom: 1px solid #ddd; position: relative; height: 80px; } .gantt-row:nth-of-type(1) { border-top: 1px solid #ddd; } .gantt-bar-container ul.-chart li:nth-child(odd) {background-color:#eee;} .gantt-bar-container ul.-chart li:nth-child(even) {background-color:#f5f5f5;} /* .gantt-bar-container ul li[data-checker="start"] {background-color:#999;} .gantt-bar-container ul li[data-checker="end"] {background-color:#f00;} */ .gantt-row:last-child { border-bottom: 1px solid #ddd; } .gantt-label { width: 200px; padding: 0 10px; text-align: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .gantt-bar { position: absolute; height: 20px; background-color: #7fb3d5; color: white; text-align: center; line-height: 20px; font-size: 12px; top: 50%; transform:translate(0,-50%); } .gantt-bar.-startBar {border-radius:8px 0 0 8px;} .gantt-bar.-endBar {border-radius:0 8px 8px 0;} .gantt-bar.-startBar.-endBar {border-radius:8px;} .gantt-bar-container { flex: 1; display: flex; position: relative; } .gantt-bar-container ul {display: flex;width: 100%;justify-content: space-between;} .gantt-bar-container ul li {flex-grow:1;height: 50px;line-height: 50px;text-align: center;} .gantt-bar-container ul li + li {border-left:1px solid #eee;} .gantt-bar .ganttTip {position: absolute;left: 50%;top: 100%;transform:translate(-50%,0);background: #fff;border: 2px solid #344C64;color: #344C64;font-weight: 700;min-width: 100px;min-height: 28px;line-height: 28px;border-radius: 0 0 8px 8px;padding: 0 10px;white-space:nowrap;} .timeline { display: flex; justify-content: space-between; position: absolute; top: 0; left: 200px; right: 0; height: 100%; border-left: 1px dashed #ddd; } .timeline span { position: relative; font-size: 12px; text-align: center; } .scrollContainer { overflow-x: scroll; cursor: grab; } .scrollContainer.active { cursor: grabbing; } .scrollContainer table { min-width: 2500px; } .scrollContainer input { cursor: inherit; } .scrollContainer::-webkit-scrollbar {height: 11px;} .scrollContainer::-webkit-scrollbar-track {background: #f1f1f1; border-radius: 10px;} .scrollContainer::-webkit-scrollbar-thumb {background-color: #888; border-radius: 10px;} .scrollContainer::-webkit-scrollbar-thumb:hover {background-color: #555;} body > div.sub__layout-wrap > div > div.dashboard { padding-top: 9vh; } #budgetDetailForm ul li {width: 100%;} .layerWrap-inst-his {max-height: 35vw; overflow-y: auto; padding: 7.5px 7.5px;} .layerWrap-inst-his::-webkit-scrollbar {width: 10px; /* 스크롤바 너비 */} .layerWrap-inst-his::-webkit-scrollbar-track {background: #f1f1f1;/* 트랙 배경색 */ border-radius: 10px; /* 둥근 모서리 */} .layerWrap-inst-his::-webkit-scrollbar-thumb {background-color: #888;/* 스크롤바 색상 */ border-radius: 10px; /* 둥근 모서리 */} .layerWrap-inst-his::-webkit-scrollbar-thumb:hover {background-color: #555;/* 호버 시 색상 */} .layerWrap-excel-upload {max-height: 35vw; overflow-y: auto; padding: 7.5px 7.5px;} .ellipsis{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;} .pop_wrap.on, .index_pop.on { visibility: visible; opacity: 1; } .index_pop::before { content: ""; position: fixed; z-index: 1000; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0; visibility: hidden; transition: opacity 0.2s; } .index_pop.on::before { opacity: 0.65; visibility: visible; } .expandable-cell { position: relative; } .expandable-cell::before { content: '▶'; position: absolute; left: 0; top: -20%; transform: translateY(90%); background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 3px; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; font-size: 9px; cursor: pointer; z-index: 20; } .expandable-cell[data-expanded="true"]::before { content: '▼'; } .editable-row .has-edit-btn { position: relative; } .editable-row .has-edit-btn::after { content: '🖋️'; position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; font-size: 10px; background: rgba(255, 255, 255, 0.9); border: 1px solid #ddd; border-radius: 3px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; transition: all 0.2s ease; } .editable-row .has-edit-btn::after:hover { background: #e3f2fd; border-color: #2196f3; transform: scale(1.1); } /* 자식행과 부모행 구분 */ .child-row .has-edit-btn::after { background: rgba(248, 249, 250, 0.9); } .child-row .has-edit-btn::after:hover { background: #e8f5e8; border-color: #4caf50; } .child-row { background-color: #c8e4ff52 !important; border-left: 3px solid #007bff; } .child-row td:first-child { padding-left: 30px; position: relative; } .child-row td:first-child::before { content: '└'; position: absolute; left: 10px; color: #6c757d; font-size: 12px; } #content_wrap > div.sub__content-wrap > form > div > div > div > div.qna__comment-wrap > div.qna__comment > table > tbody > tr:nth-child(2) > td > div.file-upload-container{ display: block; } .file-upload-container { display: flex; align-items: center; justify-content: center; } .file-upload-btn { background: none; border: none; font-size: 16px; cursor: pointer; padding: 2px; border-radius: 3px; transition: background-color 0.2s; } .file-upload-btn:hover { background-color: #f0f0f0; } .file-upload-btn.file-uploaded { display: flex; align-items: center; gap: 2px; } .temp-edit-row { background-color: #fff5ea !important; border-left: 3px solid #efa739 !important; } /* 편집 행 내 input 스타일 */ .temp-edit-row .form-control { background-color: #ffffff; border: 1px solid #e8d7bd; border-radius: 4px; } .temp-edit-row .form-control:focus { border-color: #e8d7bd; box-shadow: 0 0 0 0.2rem rgba(255, 165, 0, 0.25); } .file-remove { font-size: 12px; margin-left: 2px; } /* 임시 행 삭제 버튼 (가상 요소) */ .temp-edit-row.has-delete-btn { position: relative; } .temp-edit-row.has-delete-btn::after { content: '❌'; position: absolute; right: 1px; top: 20%; transform: translateY(-50%); cursor: pointer; font-size: 9px; background: white; border: 1px solid #ddd; border-radius: 50%; width: 12px; height: 12px; display: flex; align-items: center; justify-content: center; z-index: 10; } .temp-edit-row.has-delete-btn::after:hover { background: #ffebee; border-color: #f44336; } tr.temp-edit-row.edit-row-style.has-delete-btn > td { position:relative; } input[type="text"].date-input-hidden { position: relative; width: 85%; height: 90%; opacity: 0; top: 0; left: 0; cursor: pointer; z-index: 2; } .date-display { position: absolute; width: 80%; height: 45px; padding: 0 0; border: 1px solid #e8d7bd; border-radius: 4px; background: #fff; font-size: 1rem; color: #222; box-sizing: border-box; z-index: 1; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; text-align: center; align-items: center; justify-content: center; } .child-row-last-border { border-bottom: 3px double #9f9f9f !important; } @media only screen and (max-width:1290px){ .movieDom {top:0;left:0;} .movieDom .study__popup-wrap .movieDomNav {display:none;} } @media only screen and (max-width:1150px){ .movieDom {width:100%;} } @media only screen and (max-width:900px) { .movieDom .study__popup-wrap .bottom .progress-wrap input[type=range] {width: 200px;} .study__popup-wrap .header .progress-wrap progress {width: calc(100% - 240px);} } @media only screen and (max-width:800px) { .movieDom .study__popup-wrap .bottom .progress-wrap input[type=range] {width: 140px;} .study__popup-wrap .header .progress-wrap progress {width: calc(100% - 134px);} } @media only screen and (max-width:680px) { .volumeChange {display:none;} .study__popup-wrap .time-wrap {position: absolute;left: 0;top: 0;display: flex;font-size: 10px;} .movieDom .study__popup-wrap .bottom .progress-wrap {margin-top: 8px;} .movieDom .header img {height: 30px;} .movieDom .study__popup-wrap .header .popup-close span {font-size:13px;} .movieDom .study__popup-wrap .header .progress-wrap {display:none;} .movieDom .header .headerContent {width: 100%;} } /* 범례 컨테이너 스타일 */ .tabOption .chart-legend { display: flex; gap: 15px; align-items: center; height: 100%; } .legend-item { display: flex; align-items: center; gap: 6px; } .legend-color { width: 28px; height: 15px; border-radius: 3px; display: inline-block; border: 1px solid #ddd; } .legend-color.-actual { background: linear-gradient(270deg, #68ada8, #344C64); height: 5px; } .legend-color.-expected { background: #d1daff; } .legend-label { font-size: 14px; color: #333; } /* 마일스톤 추가 */ .sticky-table-wrap { background: #fff; width: 100%; max-width: 1600px; margin: 0 auto; transition: box-shadow 0.3s, top 0.3s, opacity 0.3s; z-index: 50; border-radius: 8px 8px 0 0; position: relative; opacity: 1; } .sticky-table-wrap.is-fixed { position: fixed; background: #fff; left: 50%; transform: translateX(-50%); top: 191px; box-shadow: 0 4px 22px 0 rgba(40,60,120,0.10); width: 96%; opacity: 0.97; } .sticky-table-wrap.fixed-show { opacity: 0; top: 220px; } .sticky-table-wrap.is-fixed.fixed-show { opacity: 0.97; top: 191px; transition: top 0.3s, opacity 0.3s; } .sticky-table-wrap.fixed-hide { opacity: 0; top: 220px; pointer-events: none; } .tab-nav-wrap { width: 100%; margin-top: 0; } .tab-nav { display: flex; border-bottom: 2px solid #e2e5ee; position: relative; background: none; justify-content: left; } .tab-btn { background: none; border: none; outline: none !important; font-size: 18px; padding: 16px 30px 12px 30px; cursor: pointer; color: #555; transition: color 0.15s; position: relative; } .tab-btn.active { color: #344C64; font-weight: bold; } .tab-active-bar { position: absolute; bottom: 0; left: 0; height: 3px; background: #344C64; transition: all 0.2s; width: 0; } .tab-content-wrap { background: rgba(250, 251, 255, 0.92); border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; border: 1px solid #e2e5ee; border-top: none; padding: 36px 26px 26px 26px; margin: 0 auto; } .tab-content { display: none; } .tab-content.active { display: block; } .goalCard { border: 1px solid #b2b2b2 !important; border-radius: 13px; margin: 20px 0 10px; box-shadow: 0 1px 8px 0 rgba(40,60,120,0.015); background: #f9fafc; overflow: auto; } .goalCard th, .goalCard td { padding: 10px 13px !important; line-height: 18px; vertical-align: middle; font-size: 15px; } .goalCard th { padding: 10px 20px !important; background: #f5f6fa; font-weight: bold; height: 36px; font-size:16px; } .goalCard .goal-detail-flex { gap: 10px !important; } .goal-action{ display: flex;gap:10px;align-items: end;margin-top:12px;margin-bottom:6px;justify-content: flex-end; } .content__table-wrap.sticky-table-wrap.is-fixed table th { padding: 16px 20px; } .milestone-subtab-bar { display: flex; gap: 0px; border-bottom: 2px solid #e2e5ee; margin-bottom: 23px; padding-bottom: 8px; background: #f9faff; } .milestone-subtab-btn { background: none; border: none; outline: none; color: #888; font-size: 16px; font-weight: 400; padding: 11px 30px 9px 30px; margin: 0; border-radius: 16px 16px 0 0; transition: color 0.18s, background 0.18s; position: relative; cursor: pointer; z-index: 1; } .milestone-subtab-btn.active { color: #344C64; background: #fff; font-weight: 700; border-bottom: 2px solid #344C64; box-shadow: 0 6px 22px 0 rgba(40,60,120,0.05); z-index: 10; } .milestone-subtab-btn:not(.active):hover { color: #3344AA; background: #f1f4fc; } #milestone-year-select-wrap { margin-left: auto; align-items: flex-end; display: flex; height: 100%; width: 150px; } #milestoneTable { font-size: 14px; } #milestoneTable td, #milestoneTable th { padding: 10px 10px; } #milestoneTable tr td:first-child { padding: 10px 10px 10px 20px; } #milestoneTable textarea { height: 55px; overflow: auto; padding: 0; scrollbar-width: none; background: none; border: none; outline: none; line-height: 17px; font-size: 14px; } .btn.icon-btn { width: 100%; } #milestoneTable input { height: 55px; padding: 0; background: none; border: none; outline: none; } #milestoneTable .date-range-wrap input { text-align: center; } #milestoneTable .date-range-wrap textarea { text-align: center; place-content: center; /*line-height: 25px;*/ } #milestoneTable td.status-planned { background:#e8f4ff !important; } #milestoneTable td.status-inprogress { background:#c5f7d3 !important; } #milestoneTable td.status-delayed { background:#fff5d1 !important; } #milestoneTable td.status-dropped { background:#ffd6db !important; } #milestoneTable td.status-completed { background:#e6f7db !important; } #milestoneTable .stts-select { border:none; background:transparent; font-weight:bold; min-width:60px; outline: none; text-align: center; padding: 0; } .goalCard .goal-side-column .small-text-area { height: 65px; overflow: auto; padding: 10px 10px; } #milestoneChartTable th, #milestoneChartTable td { height: 20px; padding: 6px 0; } #milestoneChartTable .chart-bar-flex-container{ display:flex;width:100%;height:100%;align-items: center; } #milestoneChartTable .chart-bar { flex:1;height:10px; position: relative; z-index: 2; } #milestoneChartTable .chart-bar-flex-container { display: flex; position: relative; height: 14px; } #milestoneChartTable .chart-goal-bar.filled { background-color: #d1daff; opacity: 0.85; } #milestoneChartTable .chart-goal-bar { flex:1;height:26px; z-index: 1; } .chart-bar-first { border-radius: 3px 0 0 3px; } .chart-bar-last { border-radius: 0 3px 3px 0; } .chart-bar-first.chart-bar-last { border-radius: 3px; } .chart-goal-bar-first.chart-goal-bar-last { border-radius: 5px; } .chart-goal-bar-first { border-radius: 5px 0 0 5px; } .chart-goal-bar-last { border-radius: 0 5px 5px 0; } #milestoneChartTable .chart-bar-goal-flex { display: flex; position: absolute; pointer-events: none; top: -6px; left: 0; width: 100%; height: 100%; z-index: 1; } #milestoneChartTable tr.clickable-tr:hover { filter: brightness(0.92); } /* 선명한 색상/진한-연한 구분 */ #milestoneChartTable .chart-bar.status-planned { background: #344C64; } #milestoneChartTable .chart-bar.status-inprogress { background: #3bb06b; } #milestoneChartTable .chart-bar.status-delayed { background: #f2ba2f; } #milestoneChartTable .chart-bar.status-dropped { background: #d75a64; } #milestoneChartTable .chart-bar.status-completed { background: #56db1e; } /* 연한(미달성) */ #milestoneChartTable .chart-bar.lighter.status-planned { background: #68ada8; } #milestoneChartTable .chart-bar.lighter.status-inprogress { background: #c5f7d3; } #milestoneChartTable .chart-bar.lighter.status-delayed { background: #faedcd; } #milestoneChartTable .chart-bar.lighter.status-dropped { background: #fdc0c7; } #milestoneChartTable .chart-bar.lighter.status-completed { background: #d4fdcf; } .milestone-th { position: relative; } .milestone-th-text { flex: 1; text-align: center; } .milestone-btn-add-file { background: none; border: none; padding: 0 6px; margin-left: auto; cursor: pointer; position: absolute; right: 10px; /* 우측 붙이기 */ top: 50%; transform: translateY(-50%); display: flex; align-items: center; } .milestone-btn-add-file:focus { outline: none; } .milestone-icon-plus { display: inline-block; vertical-align: middle; } .milestone__report__wrap ul { display: flex; flex-wrap: nowrap; padding: 0; margin: 2px; list-style: none; width: 100%; flex-direction: column; align-items: center; } .milestone__report__file { display: flex; font-family: 'SUIT'; font-weight: 500; font-size: 18px; color: #666; line-height: 22px; text-decoration: underline; width: 90%; justify-content: space-between; } .milestone__report__file a { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; padding: 3px 0; } .milestone__report__filename { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; } .milestone__nodata { text-align: center; color: #888; background: #fafbfc; font-size: 1em; padding: 30px 0; } .content__table-wrap table#milestoneHistoryTable td {text-align: center;} .gallery-carousel-container { position: relative; width: 100%; max-width: 1200px; margin: 2rem auto; padding: 40px 60px; background: #f5f7fa; border-radius: 20px; } .gallery-carousel-container .gallery-swiper-instance { width: 100%; padding-bottom: 50px; } /* 갤러리 슬라이드 카드 스타일 */ .gallery-carousel-container .gallery-swiper-instance .swiper-slide { background: #c4ccd4; border-radius: 6px; overflow: hidden; cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease; height: auto; } .gallery-carousel-container .gallery-swiper-instance .swiper-slide:hover { transform: scale(1.02); box-shadow: 0 4px 12px rgba(0,0,0,0.15); } .gallery-carousel-container .gallery-swiper-instance .swiper-slide img { width: 100%; height: 100%; object-fit: cover; max-height: 670px; display: block; } .gallery-carousel-container .gallery-swiper-instance .swiper-slide .no-image { width: 100%; height: 300px; display: flex; align-items: center; justify-content: center; background: #d0d5dc; color: #888; font-size: 14px; } .gallery-like-btn { position: absolute; top: 15px; right: 15px; display: flex; align-items: center; gap: 5px; padding: 8px 12px; background: rgba(255, 255, 255, 0.9); border-radius: 20px; cursor: pointer; transition: all 0.3s ease; z-index: 10; box-shadow: 0 2px 8px rgba(0,0,0,0.15); } .gallery-like-btn:hover { background: rgba(255, 255, 255, 1); transform: scale(1.05); } .gallery-like-btn .like-icon { font-size: 18px; color: #ccc; transition: color 0.3s ease; } .gallery-like-btn.on .like-icon { color: #ff2563; } .gallery-like-btn .like-count { font-size: 14px; font-weight: 600; color: #666; } .gallery-like-btn.on .like-count { color: #ff2563; } .gallery-carousel-container .gallery-slide-info { padding: 16px; background: #fff; } .gallery-carousel-container .gallery-slide-info .title { font-size: 16px; font-weight: 600; color: #333; margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gallery-carousel-container .gallery-slide-info .meta { display: flex; justify-content: space-between; font-size: 13px; color: #888; } /* 갤러리 전용 네비게이션 버튼 */ .gallery-carousel-container .swiper-button-prev.gallery-nav-btn, .gallery-carousel-container .swiper-button-next.gallery-nav-btn { width: 50px; height: 50px; background: #fff; border-radius: 50%; box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: all 0.3s ease; } .gallery-carousel-container .swiper-button-prev.gallery-nav-btn:hover, .gallery-carousel-container .swiper-button-next.gallery-nav-btn:hover { background: #f0f0f0; box-shadow: 0 4px 12px rgba(0,0,0,0.15); } .gallery-carousel-container .swiper-button-prev.gallery-nav-btn:after, .gallery-carousel-container .swiper-button-next.gallery-nav-btn:after { font-size: 18px; color: #333; font-weight: bold; } .gallery-carousel-container .swiper-button-prev.gallery-nav-btn { left: 10px; } .gallery-carousel-container .swiper-button-next.gallery-nav-btn { right: 10px; } /* 갤러리 전용 페이지네이션 */ .gallery-carousel-container .swiper-pagination.gallery-pagination { bottom: 10px !important; } .gallery-carousel-container .swiper-pagination.gallery-pagination .swiper-pagination-bullet { width: 10px; height: 10px; background: #ccc; opacity: 1; transition: all 0.3s ease; } .gallery-carousel-container .swiper-pagination.gallery-pagination .swiper-pagination-bullet-active { background: #3344AA; width: 24px; border-radius: 5px; } .gallery-empty { text-align: center; padding: 80px 20px; color: #888; font-size: 16px; } .gallery-empty p { margin: 0; } /* ==================== 갤러리 상세 - 이미지 캐러셀 ==================== */ .image-carousel-container { position: relative; width: 100%; max-width: 800px; margin: 20px auto; padding: 20px; background: #f9f9f9; border-radius: 12px; } .image-carousel-container .image-swiper-instance { width: 100%; padding-bottom: 50px; } .image-carousel-container .image-swiper-instance .swiper-slide { display: flex; flex-direction: column; align-items: center; background: #fff; border-radius: 8px; overflow: hidden; } .image-carousel-container .image-swiper-instance .swiper-slide img { width: 100%; max-height: 600px; object-fit: contain; cursor: pointer; transition: transform 0.3s ease; } .image-carousel-container .image-swiper-instance .swiper-slide img:hover { transform: scale(1.02); } .image-carousel-container .image-filename { margin-top: 10px; padding: 8px; font-size: 13px; color: #666; text-align: center; background: #f0f0f0; border-radius: 4px; width: 100%; } /* 이미지 캐러셀 네비게이션 */ .image-carousel-container .swiper-button-prev.image-nav-btn, .image-carousel-container .swiper-button-next.image-nav-btn { width: 40px; height: 40px; background: rgba(255, 255, 255, 0.9); border-radius: 50%; box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: all 0.3s ease; } .image-carousel-container .swiper-button-prev.image-nav-btn:hover, .image-carousel-container .swiper-button-next.image-nav-btn:hover { background: #fff; } .image-carousel-container .swiper-button-prev.image-nav-btn:after, .image-carousel-container .swiper-button-next.image-nav-btn:after { font-size: 16px; color: #333; font-weight: bold; } /* 이미지 캐러셀 페이지네이션 */ .image-carousel-container .swiper-pagination.image-pagination { bottom: 10px !important; } .image-carousel-container .swiper-pagination.image-pagination .swiper-pagination-bullet { width: 8px; height: 8px; background: #ccc; opacity: 1; } .image-carousel-container .swiper-pagination.image-pagination .swiper-pagination-bullet-active { background: #3344AA; width: 20px; border-radius: 4px; } /* ==================== 좋아요 버튼 (상세 페이지용) ==================== */ .view__info .tit.gallery-like { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 20px; cursor: pointer; transition: all 0.3s ease; background: #f0f0f0; } .view__info .tit.gallery-like:hover { background: #e0e0e0; } .view__info .tit.gallery-like .like-icon { font-size: 18px; color: #ccc; transition: color 0.3s ease; } .view__info .tit.gallery-like.on { background: #ffe5ef; } .view__info .tit.gallery-like.on .like-icon { color: #ff2563; } .view__info .tit.gallery-like.on + span { color: #ff2563; font-weight: 600; } /* Director's Message 스타일 */ .director-message { line-height: 1.8; font-size: 16px; color: #333; white-space: pre-line; } .director-signature { text-align: right; margin-top: 40px; line-height: 1.6; } /* About KCABP 이미지 갤러리 스타일 */ .about-image-wrap { margin: 10px auto 100px; width: 70vw; max-width: 710px; } .about-image-wrap img { width: 100%; height: auto; display: block; border-radius: 8px; } .about-image-title { margin-top: 12px; font-size: 16px; font-weight: 600; color: #344C64; text-align: center; }