448 lines
17 KiB
CSS
448 lines
17 KiB
CSS
@charset "UTF-8";
|
|
|
|
/*웹폰트******************************************************************/
|
|
|
|
|
|
@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
|
|
@import url(https://fonts.googleapis.com/css?family=Roboto:100,300,500,500,700,900);
|
|
|
|
/*스크롤바 Explorer******************************************************/
|
|
html {
|
|
scrollbar-3dLight-Color:#efefef;
|
|
scrollbar-arrow-color:#efefef; /*스크롤바 양끝 화살표 색상*/
|
|
scrollbar-base-color:#efefef;
|
|
scrollbar-Face-Color:#1697bf; /*스크롤바 색상*/
|
|
scrollbar-Track-Color:#efefef; /*스크롤바 양끝 화살표와 메인스크롤바를 제외한 색상*/
|
|
scrollbar-DarkShadow-Color:#efefef;
|
|
scrollbar-Highlight-Color:#efefef;
|
|
scrollbar-Shadow-Color:#efefef;
|
|
}
|
|
|
|
/*스크롤바 chrome*********************************************************/
|
|
/* SCROLL */
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background-color: transparent;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
border-radius: 3px;
|
|
background-color: #ccc;
|
|
}
|
|
|
|
::-webkit-scrollbar-button {
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
/*초기화*/
|
|
|
|
body, h1, h2, h3, h4, h5, h6, p, ul, li, dl, dd, div, a, address, small, img, input,span,iframe, form, tr, td, table, fieldset, select, header, tbody, frame {margin:0; padding:0;}
|
|
h1, h2, h3, h4, h5, h6 {font-weight: 500;}
|
|
ul li {list-style:none;}
|
|
ul li {list-style:none;}
|
|
a {text-decoration: none;}
|
|
address {font-style: normal;}
|
|
button {border: none;}
|
|
.hidden {position: absolute; top: -9999px;}
|
|
img {border:0;}
|
|
textarea {resize:none;}
|
|
/********************************공통*******************************/
|
|
|
|
body {font-family: 'Noto Sans KR', sans-serif; background: #fff; width: 100%; position:relative;}
|
|
|
|
.fullSizeText {
|
|
width:99.9%;
|
|
height:99%;
|
|
}
|
|
/*인풋타입텍스트 아웃라인 안보이게 처리 */
|
|
.input_sub_title>input[type="text"]{width:99%;height:100%;border:1px solid #ccc;}
|
|
|
|
|
|
/* 컨텐츠 팝업 페이지 상단 타이틀 */
|
|
.plm_menu_named {width:100% !important; background: #FFFFFF; border-bottom: 1px solid #d4d4d4;height:33px;}
|
|
.plm_menu_named h2 {margin: 0 auto; height:33px; color:000; font-size: 13px; line-height: 33px;
|
|
width:30%;float: left;margin-left:5px;}
|
|
.plm_menu_named h2 span {height: 35px; padding-left: 0px; background-size:contain;}
|
|
|
|
/*팝업 메인 기본 div */
|
|
#Popupcontainer{width: 98%; font-size:13px; background: #fff; border-radius: 5px; border: 1px solid #ccc; margin:7px;}
|
|
|
|
/* 팝업 상단 전체 감싸는 보더 및 파란타이틀 */
|
|
#EntirePopupFormWrap {width: 97.5%; padding:0; margin: 5px auto 0; font-size:13px; background: #fff; border-radius:0 0 5px 5px; border:1px solid #cccccc;}
|
|
#EntirePopupFormWrap>.form_popup_title {width: 100%; border-bottom: 1px solid #cccccc; height:30px; background:/* 컬러변경 */forestgreen; line-height: 30px; }
|
|
/*파란타이틀 글씨디자인 */#EntirePopupFormWrap>.form_popup_title span {margin-left:10px; color: #fff; font-weight: 500;}
|
|
/*팝업파란타이틀 */
|
|
#bluePopupFormWrap {width: 100%; font-size:13px; background: #fff;}
|
|
#bluePopupFormWrap>.form_popup_title {width: 100%; border-bottom: 1px solid #cccccc; height:30px; color: #fff; background:/* 컬러변경 */ forestgreen; line-height: 30px; font-weight: 500; }
|
|
#businessPopupFormWrap>.blue_popup_title {width: 100%; border-bottom: 1px solid #cccccc; height:30px; color: #fff; background:/* 컬러변경 */ forestgreen; line-height: 30px; font-weight: 500; }
|
|
|
|
/* 보더있는 테이블디자인 */
|
|
.plm_table_wrap1 {width:100%; clear:both; }
|
|
.plm_table1 {width:99.9%; table-layout: fixed; border-collapse: collapse; background: #fff; text-align: center; font-size: 13px; }
|
|
.plm_table1 td {height: 26px; border:1px solid #ccc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
|
|
|
|
.plm_table1 td a {color: blue; padding-bottom: 2px; line-height: 23px;}
|
|
.plm_table1 td select {width:95%;}
|
|
.plm_table1 td input[type="button"] {margin: 0 auto;}
|
|
.plm_table1 td input[type="text"] {width:100%; height:100%; border:0; }
|
|
.plm_table1 td input[type="number"] {width:99%; height:100%; border:0; }
|
|
.plm_table1 thead {font-weight: 500; }
|
|
.plm_table1 .plm_thead {background: #6f7477;
|
|
background-image: -webkit-linear-gradient(#7e8183, #83adcf);
|
|
background-image: -o-linear-gradient(#7e8183, #83adcf);
|
|
background-image: linear-gradient(#7e8183, #6f7477);
|
|
background-repeat: no-repeat;
|
|
border-top:1px solid #767a7c;}
|
|
|
|
.plm_table1 .plm_thead td {border: 1px solid aaa; color:#fff;}
|
|
|
|
|
|
/*사이 간격 있는 팝업 테이블 디자인 */
|
|
.pmsPopuptable {width:99%; margin: 2px auto 0; table-layout:fixed; position:relative; z-index:0;}
|
|
.pmsPopuptable tr {height:22px; }
|
|
.pmsPopuptable td {height:20px; font-size: 12px; word-wrap: break-word;}
|
|
.pmsPopuptable td a {word-wrap: break-word;}
|
|
.pmsPopuptable td p {width:90%; height:22px; border: 1px solid #ccc; border-radius: 2px;}
|
|
.pmsPopuptable label {text-align: right; font-weight: 500; height: 25px; font-size: 12px; padding-left: 10px; }
|
|
.pmsPopuptable select {width:99%; height:22px; border: 1px solid #ccc; border-radius: 2px; background: #fff;}
|
|
.pmsPopuptable>input[type="text"] {width:99%; height:22px; border: 1px solid #ccc; border-radius: 2px; }
|
|
.pmsPopuptable input[type="number"] {width:99%; height:22px; border: 1px solid #ccc; border-radius: 2px;}
|
|
.pmsPopuptable input[type="checkbox"] {margin-top: 5px; vertical-align: sub;}
|
|
.pmsPopuptable button {float:right;margin-right:5px; }
|
|
|
|
/*사이 간격 없는 팝업 테이블 디자인 */
|
|
.Popuptable {width:100%; text-align:center;border-collapse:collapse; border-spacing:0;}
|
|
.Popuptable tr {height:40px;}
|
|
.Popuptable label{ font-size: 12px;}
|
|
.Popuptable span {font-size:30px;}
|
|
|
|
|
|
.Popuptable_h {width:100%; text-align:center;border-collapse:collapse; border-spacing:0;}
|
|
.Popuptable_h tr {height:15px;}
|
|
.Popuptable_h label{ font-size: 12px;}
|
|
.Popuptable_h span {font-size:30px;}
|
|
.input_title_line>span {font-size:20px;}
|
|
|
|
/* 팝업 결재란 테이블 */
|
|
.Popuptable_A {width:40%;border-collapse:collapse; border-radius:5px; border-style : hidden;
|
|
box-shadow : 0 0 0 1px #ccc;background:white; height:91px; margin: 2px 5px 0 0; table-layout:fixed; position:relative; z-index:0;}
|
|
.Popuptable_A tr {height:22px; }
|
|
.Popuptable_A td {height:20px; font-size: 12px; word-wrap: break-word;}
|
|
|
|
|
|
/*보더라인 없는 테이블 스타일 */
|
|
.input_title {background-color:#e4e7ec; border-radius: 0 0px 0 0; height:1px !important; }
|
|
.input_sub_title {/* background-color:#dae5e8; */ border-radius: 0 0 0 0;}
|
|
|
|
/*보더라인 있는 테이블 스타일 (이스타일을 적용할때 칸과 칸사이의간격을 없애려면 테이블 클래스 스타일에 "border-collapse:collapse; border-spacing:0;"를 추가한다 */
|
|
.input_title_line {border:1px solid #ccc;background-color:#e4e7ec;height:1px !important; }
|
|
.input_title_line_c {border:1px solid #ccc;background-color:#cfe2d7;height:1px !important; }
|
|
.input_sub_title_line {border:1px solid #ccc; }
|
|
.input_sub_title_dashed {border-top:1px dashed #ccc; border-right:1px solid #ccc; height:5px;}
|
|
|
|
input[type="text"]{padding-left:4px;}
|
|
|
|
/* 작은팝업창 작은 제목 */
|
|
.plmtable_name {width: 100% !important;
|
|
background: #FFFFFF;
|
|
border-bottom: 1px solid #d4d4d4;
|
|
height: 33px;}
|
|
|
|
.plmtable_name>h2{ margin: 0 auto;
|
|
height: 33px;
|
|
color: 000;
|
|
font-size: 13px;
|
|
line-height: 33px;
|
|
width: 30%;
|
|
float: left;
|
|
margin-left: 5px;}
|
|
|
|
|
|
|
|
/*스크롤 테이블 디자인 */
|
|
.project_form_in_table {width:93%; border-collapse:collapse; table-layout:fixed;}
|
|
|
|
.PmsPopuptable_fixhead {width:100%; margin-top:0;}
|
|
.pmsPopuptable_th {width:99.15%; margin-left:6px; table-layout:fixed; position:relative; z-index:0;margin-top:10px;border-collapse:collapse; border-spacing:0;}
|
|
.pmsPopuptable_th tr{height:22px; }
|
|
.pmsPopuptable_th label {text-align: right; font-weight: 500; height: 25px; font-size: 12px; padding-left: 10px; }
|
|
|
|
.PmsPopuptable_scroll_hover {background-color:#fff; width:100%; position:relative; }
|
|
|
|
.PmsPopuptable_scroll {height:300px; margin-left:6px; overflow-y:auto; margin-top:0;}
|
|
.pmsPopuptable_td {width:99.6%; border-collapse:collapse; border-spacing:0;text-align:center;}
|
|
.pmsPopuptable_td tr{height:22px; border:1px solid #ccc; }
|
|
.pmsPopuptable_td th{ background-color:#e4e7ec;}
|
|
.pmsPopuptable_td label {text-align: right; font-weight: 500; height: 25px; font-size:12px; }
|
|
|
|
|
|
.table_title {background-color:#ccc; height:1px !important; text-align:center; border:1px solid #ccc; }
|
|
.table_sub_title {text-align:center; border-left:1px solid #ccc;border-bottom:1px solid #ccc; }
|
|
.table_sub_title_d {text-align:center; border-left:1px solid #ccc;border-bottom:1px solid #ccc; border-right:1px solid #ccc;}
|
|
|
|
.table_sub_title_fix {position:sticky;top:-1px; background-color:#e4e7ec;text-align:center; border:1px solid #ccc;}
|
|
.table_sub_title_fix2 {position:sticky;top:20px; background-color:#e4e7ec;text-align:center; border:1px solid #ccc; }
|
|
|
|
|
|
/*스크롤 테이블 마감라인*/
|
|
.line {margin-left:6.7px; margin-top:-1px; width:99%; border-top:1px solid #ccc;}
|
|
|
|
/* 스크롤 디자인(호버시 나타남)*/
|
|
.PmsPopuptable_scroll::-w5ebkit-scrollbar,
|
|
.PmsPopuptable_scroll::-webkit-scrollbar-thumb {
|
|
overflow:visible;
|
|
|
|
}
|
|
.PmsPopuptable_scroll_PC {width:100%; overflow-y: scroll; clear:both; background: #fff;}
|
|
.PmsPopuptable_scroll_PC::-webkit-scrollbar-thumb {background: rgba(0,0,0,.2); }
|
|
|
|
.PmsPopuptable_scroll_PC::-w5ebkit-scrollbar,
|
|
.PmsPopuptable_scroll_PC::-webkit-scrollbar-thumb {
|
|
overflow:visible;
|
|
|
|
}
|
|
.PmsPopuptable_scroll_PC::-webkit-scrollbar-thumb {background: rgba(0,0,0,.2); }
|
|
.cover-bar{
|
|
width:6px;
|
|
height:100%;
|
|
position:absolute;
|
|
top:0;
|
|
right:0;
|
|
-webkit-transition: all .5s;
|
|
opacity: 1;
|
|
background-color:#fff;
|
|
}
|
|
|
|
.PmsPopuptable_scroll_hover:hover .cover-bar {
|
|
opacity: 0;
|
|
display:none;
|
|
-webkit-transition: all .5s;
|
|
|
|
}
|
|
/* 첨부파일 스크롤 목록 */
|
|
.fileListscrollThead {width:100% !important; border-collapse:collapse; text-align:center; }
|
|
.fileListscrollThead td {background: #8e9194; height:20px !important; color:#fff; border:1px solid #ccc; }
|
|
|
|
.fileListscrollThead_x {width:100% !important; border-collapse:collapse; text-align:center; }
|
|
.fileListscrollThead_x td {background: #6f7477;height:20px !important; color:#fff; border-right:1px solid #ccc;}
|
|
|
|
.fileListscrollTbody {width:100%;border-collapse:collapse; text-align:center; }
|
|
.fileListscrollTbody td {border: 1px solid #ccc; height:15px ! important; font-size:13px;}
|
|
|
|
.fileListscrollTbody tbody tr:hover {background-color:#f5f8fa;} /* table hover시 컬러 */
|
|
.fileListscrollTbody tr:hover .none {background-color:#fff;} /* rowspan일경우 클래스 td.none 추가 */
|
|
|
|
.fileListscrollTbody td {height: 26px; border-bottom: 1px solid #ccc; border-left:1px solid #ccc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
|
|
.fileListscrollTbody td:last-child {border-right: 1px solid #ccc;}
|
|
.fileListscrollTbody td a {color: blue; padding-bottom: 2px; line-height: 23px}.fileListscrollTbody td select {width:95%;}
|
|
.fileListscrollTbody td input[type="button"] {margin: 0 auto;}
|
|
.fileListscrollTbody td>input[type="text"] {width:100%; height:100%; border:0; }
|
|
.fileListscrollTbody td input[type="number"] {width:99%; height:100%; border:0; }
|
|
/*스크롤 테이블 끝 */
|
|
|
|
|
|
|
|
|
|
/*버튼디자인*/
|
|
.pop_btns {height:20px; border-radius: 3px; background: #e7eaee; /* color:#0d58c8; */ color:#38426b; cursor: pointer;
|
|
font-size: 12px; border: 1px solid #ccc; padding:3px 10px; font-weight:700; transition-duration: 0.2s;}
|
|
.plus_btns {height:20px; width:30px; border-radius: 3px; background: #e7eaee; /* color:#0d58c8; */ color:#38426b; cursor: pointer;
|
|
font-size: 12px; border: 1px solid #ccc; padding:3px 10px; font-weight:700; transition-duration: 0.2s;}
|
|
|
|
/*드랍존 영역 디자인*/
|
|
#dropzone2{border:2px solid #3292A2;width:98%;height:50px;color:#92AAB0;text-align:center;font-size:12px;padding-top:5px;}
|
|
.dropzone2{border:2px solid #3292A2;width:98%;height:50px;color:#92AAB0;text-align:center;font-size:12px;padding-top:5px;}
|
|
|
|
/*새로운 드랍존 영역디자인*/
|
|
.dropzonebox {position:relative;width:101%;}
|
|
.new_dropzone {border:3px solid #333860;border-right:0;width:78%;height:150px;color:#868687;text-align:center;font-size:22px;margin:5px 0 5px 3px;float:left;}
|
|
.DZbgimg {background-image:url("/images/dregndrop1.png");background-size:100% 100%; width:70px; height:70px; margin-top:30px;margin-left:45%;}
|
|
|
|
.new_dropzone_sc{position:relative;
|
|
border:3px solid #333860;border-left:2px solid #ccc;
|
|
width:19.5%;height:150px;
|
|
text-align:center;font-size:15px;
|
|
margin:5px 0 5px 0;float:left;margin-right:3px;
|
|
color:#868687;background-color:f7f7f7;}
|
|
|
|
.loader_back,
|
|
.loader_back:after {
|
|
border-radius: 50%;
|
|
width: 8em;
|
|
height: 8em;
|
|
}
|
|
.loader_back {
|
|
display:block;
|
|
margin: 20px auto;
|
|
font-size: 10px;
|
|
position: relative;
|
|
text-indent: -9999em;
|
|
border-top: 0.9em solid rgba(255, 255, 255, 1);
|
|
border-right: 0.9em solid rgba(255, 255, 255, 1);
|
|
border-bottom: 0.9em solid rgba(255, 255, 255, 1);
|
|
border-left: 0.9em solid rgba(255, 255, 255, 1);}
|
|
|
|
.loader,
|
|
.loader:after {
|
|
border-radius: 50%;
|
|
width: 8em;
|
|
height: 8em;
|
|
}
|
|
.loader {display:none;
|
|
margin: 20px auto;
|
|
font-size: 10px;
|
|
position:relative;
|
|
text-indent: -9999em;
|
|
border-top: 0.9em solid rgba(255, 255, 255, 1);
|
|
border-right: 0.9em solid rgba(255, 255, 255, 1);
|
|
border-bottom: 0.9em solid rgba(255, 255, 255, 1);
|
|
border-left: 0.9em solid #333860;
|
|
-webkit-transform: translateZ(0);
|
|
-ms-transform: translateZ(0);
|
|
transform: translateZ(0);
|
|
-webkit-animation: load8 1.5s infinite linear;
|
|
animation: load8 1.5s infinite linear;
|
|
}
|
|
@-webkit-keyframes load8 {
|
|
0% {
|
|
-webkit-transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
-webkit-transform: rotate(360deg);
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
@keyframes load8 {
|
|
0% {
|
|
-webkit-transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
-webkit-transform: rotate(360deg);
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.dropzoneDB {position:absolute;top:71px;left:87%;color:#868687; z-index:3;}
|
|
.dropzonefile {position:absolute;top:125px;left:87%;color:#868687;font-weight:500; font-size:20px;z-index:4;}
|
|
/* 원가관리 팝업박스 테두리 */
|
|
.boxline1 {width: 24.05%; margin: -2px 0 0 41.65%; position: absolute; z-index: 2; border: solid 2px #4b4e4f;}
|
|
.boxline2 {width: 22.2%; margin: -2px 0 0 66.3%; position: absolute; z-index: 2; border: solid 2px #4b4e4f;}
|
|
.boxline3 {width: 23.5%; height: 2px; margin: -2px 0 0 40.7%; position: absolute; border-bottom: solid 3px #4b4e4f;}
|
|
.boxline4 {width: 21.6%; height: 2px; margin: -2px 0 0 64.6%; position: absolute; border-bottom: solid 3px #4b4e4f;}
|
|
|
|
|
|
|
|
|
|
|
|
/* 시계디자인 */
|
|
|
|
|
|
.widget {position:relative;}
|
|
.clockcontainer{width:100%;
|
|
display:flex;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
height:172px;
|
|
background-color: #f9f9f9;
|
|
}
|
|
|
|
.clock{
|
|
width:150px;
|
|
height:150px;
|
|
display:flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: url("../images/clock.png");
|
|
background-size: cover;
|
|
border: 4px solid #f9f9f9;
|
|
box-shadow: 0 -15px 15px rgba(255,255,255,0.05),
|
|
inset 0 -15px 15px rgba(255,255,255,0.05),
|
|
0 -5px 15px rgba(0,0,0,0.3),
|
|
inset 0 15px 15px rgba(0,0,0,0.3);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.clock:before {
|
|
content: '';
|
|
position: absolute;
|
|
width:10px;
|
|
height:10px;
|
|
background:#7f7f7f;
|
|
border-radius: 50%;
|
|
z-index : 10;
|
|
}
|
|
|
|
.clock .hour,
|
|
.clock .min,
|
|
.clock .sec{
|
|
position: absolute;
|
|
}
|
|
|
|
.clock .hour .hr{
|
|
width : 90px;
|
|
height :90px;
|
|
}
|
|
|
|
.clock .min .mn{
|
|
width : 105px;
|
|
height : 105px;
|
|
}
|
|
|
|
.clock .sec .sc{
|
|
width : 130px;
|
|
height : 130px;
|
|
}
|
|
|
|
.hr, .mn, .sc{
|
|
display:flex;
|
|
justify-content: center;
|
|
/* position: absolute; */
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.hr:before{
|
|
content: '';
|
|
position: absolute;
|
|
width:5px;
|
|
height:43px;
|
|
background:#ff105e;
|
|
z-index : 10;
|
|
border-radius: 6px 6px 0 0;
|
|
}
|
|
|
|
.mn:before{
|
|
content: '';
|
|
position: absolute;
|
|
width:3.5px;
|
|
height:55px;
|
|
background:#ff105e;
|
|
z-index : 10;
|
|
border-radius: 6px 6px 0 0;
|
|
}
|
|
|
|
.sc:before{
|
|
content: '';
|
|
position: absolute;
|
|
width:1.5px;
|
|
height:65px;
|
|
background:#7f7f7f;
|
|
z-index : 10;
|
|
border-radius: 6px 6px 0 0;
|
|
}
|
|
|
|
.worldtime {width:100%; height:50px;margin-left:10%;}
|
|
.display {width:100%; height:20px; color:#7f7f7f; font-size:12px;}
|
|
.box {padding:3px 40px 3px 55px; font-size:12px;opacity:0.5;}
|
|
|
|
|
|
|
|
/* 시계디자인 끝 */
|
|
|
|
|
|
|
|
|
|
|
|
/* css end */ |