File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
.login{
background-color: #EFF1FA;
height: 100vh;
.card{
padding-top: 30rem;
.card-body{
background-color: #fff;
margin: 0 auto;
width: 600px;
height: 450px;
padding: 5rem;
border-radius: 5rem;
display: flex;
gap: 30px;
flex-direction: column;
}
.card-title{
text-align: center;
}
.form-label{
display: flex
;
align-items: center;
font-weight: 700;
font-size: 15px;
margin-bottom: 10px;
img{margin-right: 3px;}
}
.box{margin-bottom: 30px;
button{width: 100%; background-color: #1F3F99;
img{margin-right: 10px;}
}
}
}
}
.sidemenu{
width: 350px;
margin-right: 20px;
.myinfo{
text-align: center;
padding: 25px 20px 20px 20px;
margin-bottom: 20px;
border-radius: 20px;
background: linear-gradient(to bottom, #1F3F99, #3354CE);
.name-box{
margin-bottom: 30px;
.img-area{
margin: 0 auto;
width: 165px;
.name{
font-size: 25px;
font-weight: 700;
color: #fff;
}
.info{
background-color: #0A216D;
border-radius: 100px;
display: flex;
align-items: center;
gap: 10px;
justify-content: center;
p{color: #fff; font-size: 15px;}
}
}
}
.info-box{
background-color: #fff;
border-radius: 15px;
display: flex;
justify-content: space-between;
li{text-align: center; border-right: 1px solid #E7EAF4; width: 25%;
p{font-size: 35px; font-weight: 700; margin: 20px 0;}
}
li:last-child{border: 0;}
.name{
text-align: center;
display: flex;
justify-content: center;
justify-self: center;
margin-bottom: 12px;
width: 58px;
height: 25px;
font-size: 16px;
font-weight: 700;
background-color: #999999;
color: #fff;
border-radius: 100px;
}
.name.yellow{background-color:#EDAB0C;}
.name.blue{background-color:#1D75E1;}
.name.red{background-color:#E92727;}
}
}
.myinfo.profile{
background: #fff;
.name-box{margin: 20px 0;}
.img-area{
width: 100%;
.img{
position: relative;
width: 150px; height: 190px; border: 1px solid #D7DCF1;
padding: 10px;
margin: 0 auto;
.close-btn{position: absolute; top: 0; right: 10px;}
img{height: 100%; object-fit: cover; }
}
.info{
border-top: 1px solid #9498A94D;
margin: 0 auto;
padding-top: 30px;
margin-top: 30px;
width: 240px;
background-color: transparent;
border-radius: 0;
.file {
background-color: #EFF1FA; width: 120px; border: #213F9A 1px solid ; border-radius: 10px; padding: 7px 0;
margin-top: 10px;
}
.file-label {
display: flex;
gap: 5px;
justify-content: center;
cursor: pointer;
p{color: #000;}
}
input[type="file"] {
display: none;
}
}
}
}
.myinfo.simple{
background: transparent;
.img-area{
img{width: 75px;
height: 75px;}
.info{
background-color: #DEE2F5;
p{color: #000;}
.fa-bars{
width: 2px;
height: 14px;
background-color: #213F9A1A;
}
}
.name{color: #000;}
}
h2{ background: #213F9A; color: #fff; border-radius: 10px; font-size: 17px; text-align: left; padding: 10px 15px;}
}
.menu-box{
margin-top: 20px;
li{
margin-bottom: 10px;
a{display: flex; justify-content: space-between;}
a:focus{outline: 0;}
}
}
.boxs{
background-color: #fff; border-radius: 20px; padding: 20px; margin-bottom: 20px;
.box{display: flex; justify-content: space-between; margin-bottom: 15px;
h3{text-align: center;
color: #fff;
font-size: 16px;
font-weight: 700;}
}
.img-area{margin: 0 12.5px;}
h4{
font-size: 19px;
font-weight: 700;
text-align: center;
line-height: 22px;
img{margin-right: 10px;}
margin-bottom: 15px;
}
i.fa-bars{display: block; width: 2px; height: 14px; background-color: #D7DCF1;}
.sm-box{
width: 185px;
background-color: #F4F6FD;
border-radius: 10px;
text-align: center;
h3{
background-color: #213F9A;
border-radius: 10px;
height: 35px;
line-height: 35px;
}
p{
font-size: 30px;
font-weight: 700;
}
}
.bd-box{
border: 1px solid #D7DCF1;
border-radius: 10px;
padding: 19px 40px 19px 40px;
display: flex;
align-items: center;
gap: 30px;
div{font-size: 18px;
span{font-size: 18px; font-weight: 800; margin-left:23px;}
}
}
.color-boxs{
display: flex;
justify-content: space-between;
.box{
display: block;
text-align: center;
width: 96px;
background-color: #F9F9F9;
font-size: 30px;
font-weight: 700;
border-radius: 10px;
padding-bottom: 24px;
h3{background-color: #999999; border-top-left-radius: 10px; border-top-right-radius: 10px; width: 100%; height: 33px;
line-height: 33px;
margin-bottom: 17px;}
}
.box.red{
background-color: #FEF3F3;
h3{background-color: #E92727;}
}
.box.green{
background-color: #EFF9FB;
h3{background-color: #3C97AB;}
}
}
}
.router-link-active p {
color: #213F9A; /* 원하는 색상으로 변경 */
font-weight: 700;
}
}
.content{
.pagination{
margin-top: 20px;
ul {
display: flex;
list-style: none;
padding: 0;
gap: 8px;
justify-content: center;
align-items: center;
}
li {
width: 35px;
height: 35px;
text-align: center;
line-height: 35px;
border: 1px solid #BDCBE8;
border-radius: 4px;
cursor: pointer;
background-color: #fff;
color: #333;
transition: 0.2s;
}
li:hover:not(.disabled) {
background-color: #f0f0f0;
}
li.active {
background-color: #1D75E1;
color: white;
font-weight: bold;
}
li.arrow {
font-weight: bold;
}
li.disabled {
opacity: 0.5;
cursor: not-allowed;
}
}
.title{
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
h2{font-size: 24px; font-weight: 700; display: flex; gap: 20px;
span{border: 1px solid #E92727; border-radius: 100px; color: #E92727; font-size: 15px; text-align: center; padding: 5px 20px;}
}
.sub{display: flex; align-items: center; gap: 3px;}
}
.top-content{display: flex; justify-content: space-between; gap: 40px; margin-bottom: 15px;}
.boxs{
width: 550px;
.blue-box{
background-color: #D7DCF1;
border-radius: 10px;
padding: 30px;
.box{background-color: #fff; text-align: center;
padding: 29px 0;
border-radius: 10px;
.time{font-size: 35px; font-weight: 700;}
}
.buttons{
display: flex; gap: 25px;
align-items: center;
justify-content: center;
margin-top: 10px;
i.fa-bars{display: block; width: 1px; height: 40px; background-color: #fff;}
}
}
.board{
border: 1px solid #DDDDDD; border-radius: 10px;
table{
tr{ border-bottom: 1px solid #DDDDDD;}
tr:last-child{border: 0;}
td{
border-radius: 10px;
border: 0;
text-align: center;
p{
padding: 4px 0;
border-radius: 5px;
width: 85px;
}
}
.category-service p{
background-color: #FED9AC;
}
.category-internal p{
background-color: #EFF1FA;
}
.category-government p{
background-color: #DFD4F0;
}
.status p{
border: 2px solid #AAAAAA;
border-radius: 100px;
color: #AAAAAA;
font-size: 15px;
}
.status-in-progress p{ border-color: #1D75E1; color: #1D75E1;}
.status-complete p{ color: rgb(39, 96, 55); border-color: rgb(39, 96, 55); }
}
}
}
.card{
.sch-form-wrap {
justify-self: end;
margin: 20px 0 ;
.input-group{
.form-select, .form-control{
height: 40px;
border-color: #C7CFE3;
font-size: 16px;
}
}
}
.sch-form-wrap.title-wrap{justify-content: space-between; width: 100%;
h3{
img{margin: 5px 5px 0 0;}
}
.input-group{width: auto;
.form-control{padding-right: 30px;}
.ico-sch{right: 5px;}
}
}
.tbl-wrap{
th,td{text-align: center !important; font-size: 16px !important;}
.status-approved {
color: #1D75E1;
font-weight: 700;
}
.status-pending {
color: #E92727;
font-weight: 700;
}
.expired td{
background-color: #F6F6F6; /* 연회색 배경 */
filter: grayscale(50%);
opacity: 0.6;
}
}
p.require{
text-align: right;
img{margin-top: 9px;}
}
.card-body{
form{
margin-bottom:5rem;
border: 1px solid #C7CFE3;
border-radius: 10px; overflow: hidden;}
.col-12{
width: 100%;
display: flex;
border-bottom: 1px solid #C7CFE3;
label{width: 140px ;background: #EFF1FA; font-weight: 600; font-size: 16px; text-align: center; line-height: 70px; flex-shrink: 0; position: relative;}
p.require{
position: absolute;
right: 44px;
top: 26px;
}
select, input{margin: 15px 10px; border-color: #DDDDDD; height: var(--tk-input-h-sm);}
.form-control[readonly]{background-color: #EFF1FA;}
.invalid-feedback{color: #E92727; font-size: 13px;}
.box{
margin: 15px 10px;
input{margin: 0;}
p{margin-top: 5px;}
}
}
.border-x{border: 0;}
.buttons{display: flex; gap: 10px; justify-content: end;
.btn-red{border-color: #E92727; color: #E92727; background-color: #EFF1FA;}
}
}
}
}
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
.modal-box {
background: white;
padding: 20px 30px;
border-radius: 8px;
text-align: center;
}
.modal-box button {
margin: 10px;
padding: 8px 16px;
font-size: 14px;
}
.modal-box .cancel {
background: #ccc;
}
.primary{background-color: #213F9A;}