File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
/* layout 공통 */
/* grid */
.main-grid {
height: 100%;
display: grid;
grid-template-columns: 0.9fr 0.9fr 1.1fr 1.1fr;
grid-template-rows: 1fr 0.1fr 0.1fr;
gap: 1rem;
}
.main-grid-guardian{
height: 100%;
display: grid;
grid-template-columns: 0.9fr 0.9fr 1.1fr 1.1fr;
grid-template-rows: 0.5fr 0.1fr;
gap: 1rem;
}
.main-grid-government {
height: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 0.1fr 0.5fr 0.3fr 0.3fr 0.3fr;
gap: 1rem;
}
.main-grid-agency {
height: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 0.1fr 0.5fr 0.5fr 0.5fr 0.5fr 0.5fr 0.5fr;
gap: 1rem;
}
.main-grid-government-2 {
height: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 0.1fr 1fr;
gap: 1rem;
}
.main-grid-hospital {
height: 100%;
display: grid;
grid-template-columns: 0.5fr 1fr 0.5fr 1fr;
grid-template-rows: 0.1fr 1fr 1fr;
gap: 1rem;
}
.statistics-grid{
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 2rem;
}
.combine-left {
grid-column: 1/3;
}
.combine-left2 {
grid-column: 1/2;
}
.combine-left-government {
grid-column: 2/4;
}
.combine-left-government2 {
grid-column: 1/4;
}
.combine-right {
grid-column: 3/4;
}
.combine-right2 {
grid-column: 3/5;
}
.combine-right3 {
grid-column: 2/3;
}
.combine-right-government {
grid-column: 4/5;
grid-row: 2/4;
}
.combine-right-government2 {
grid-column: 4/5;
grid-row: 4/6;
}
.combine-top-government {
grid-row: 1/3;
}
.combine-all-government {
grid-row: 1/2;
}
.combine-middle-government {
grid-row: 2/4;
}
.combine-bottom-government {
grid-row: 2/3;
}
.combine-bottom-government2 {
grid-row: 2/5;
}
.combine-bottom-government3 {
grid-row: 3/4;
}
.combine-bottom-government5 {
grid-row: 5/8;
}
.combine-bottom-government6 {
grid-row: 4/6;
}
.combine-bottom-government7 {
grid-row: 6/8;
}
/* flex */
.flex {
display: flex;
justify-content: space-between;
align-items: center;
}
.flex-align-start {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.flex-align-column {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.flex-center-column {
display: flex;
flex-direction: column;
justify-content: center;
}
.flex-start {
display: flex;
justify-content: flex-start;
align-items: center;
}
.flex-center {
display: flex;
justify-content: center;
align-items: center;
}
.flex-end {
display: flex;
justify-content: flex-end;
align-items: center;
}
.flex10 {
flex: 0 0 9.5%;
}
.flex15 {
flex: 0 0 14.5%;
}
.flex20 {
flex: 0 0 19.5%;
}
.flex25 {
flex: 0 0 24.5%;
}
.flex30 {
flex: 0 0 29.5%;
}
.flex40 {
flex: 0 0 39.5%;
}
.flex45 {
flex: 0 0 44.5%;
}
.flex50 {
flex: 0 0 49.5%;
}
.flex60 {
flex: 0 0 59.5%;
}
.flex70 {
flex: 0 0 69.5%;
}
.flex80 {
flex: 0 0 79.5%;
}
.flex85 {
flex: 0 0 84.5%;
}
.flex90 {
flex: 0 0 89.5%;
}
.flex100 {
flex: 0 0 100%;
}
/* width 공통 */
.width100 {
width: 100%;
}
.width90 {
max-width: 90%;
height: 100%;
margin: auto;
}
.width80 {
max-width: 80%;
height: 100%;
margin: auto;
}
/* box 공통 */
.row {
max-width: 100%;
height: 100%;
}
.content-box {
padding: 1.5rem;
border-radius: 0.5rem;
border: 1px solid #eeeeee;
background: #ffffff;
box-shadow: 1px 1px 5px 2px rgba(238, 238, 238, 0.5);
}
.main-main{background: #f0ebe352;}
/*체크박스 크기*/
.checkCon {
width: 50%;
}
/* button 공통 */
.btn-wrap {
margin-top: 4rem;
}
.btn-100 {
width: 100%;
border: 0;
color: #fff;
font-size: 1.6rem;
font-weight: 800;
padding: 0.5rem 1.5rem;
padding: 1rem;
margin-right: 1rem;
}
.btn-large {
width: 150px;
border: 0;
color: #fff;
font-size: 1.6rem;
font-weight: 800;
padding: 0.5rem 1.5rem;
padding: 1rem;
margin-right: 1rem;
}
.btn-small {
border: 0;
color: #fff;
font-size: 1.5rem;
font-weight: 800;
border-radius: 0.5rem;
padding: 0.5rem 1.5rem;
margin-right: 1rem;
}
.btn-large:last-child,
.btn-small:last-child {
margin-right: 0;
}
/* button color */
.green-btn {
background: #7D9D9C;
}
.beige-btn {
background: #e4dccf;
}
.gray-btn {
background: #cccccc;
}
/* margin */
.margin-bottom {
margin-bottom: 1rem;
}
.margin-bottom2 {
margin-bottom: 2rem;
}
.margin-bottom5 {
margin-bottom: 5rem;
}
.margin-bottom10 {
margin-bottom: 10rem;
}
hr{border-top: 1px solid #d1e4e3; margin-top: 2rem}
/* background */
.bg-1{background-image: linear-gradient(to right top, #fff1eb 0%, #f3f6f7 100%);}
.bg-2{background-image: linear-gradient(to left top, #f1f7fa 0%, #fff1eb 100%);}