main { display:flex; justify-content:center; padding:100px 0; }
main > .container { width:100%; max-width:1280px; }

main h1 { margin-top:60px; display:flex; justify-content:center; align-items:center; }
main h1 span { position:relative; font-size:40px; font-weight:500; }
main h1 span::after { content:""; position:absolute; right:10px; top:0; transform:translateX(100%) rotate( 20deg ); width:25px; height:25px; border:2px solid #FE8130; border-radius:5px; z-index:-1; }


.layout1 { width:100%; margin-top:60px; display: grid; grid-template-columns:repeat(4, 1fr); gap:20px; }
.layout1 > .frame { height:126px; border: 1px solid #ccc; border-radius:10px; }

.progress progress { width:100%; height:10px; border-radius:5px; }
.progress progress::-webkit-progress-value { background: linear-gradient(90deg, #5B80FF, #244DDB); border-radius:5px; }
.progress progress::-moz-progress-bar { background: linear-gradient(90deg, #5B80FF, #244DDB); border-radius:5px; }
.progress span { display:flex; justify-content:flex-end; font-weight:bold; }
.diskinfo { display:flex; justify-content:space-between; }
.diskinfo span { font-size:12px; color:#78A8FF; }

.layout1 svg { position:absolute; width:80px; height:80px; fill:#D9EBFF; }

.layout1 > .frame .number { margin-top:10px; display:flex; align-items:center; }
.layout1 > .frame .number > div { flex:1; display:flex; justify-content:center; align-items:center; }
.layout1 > .frame .number > div:nth-child(1) { font-size:30px; }

.layout2 { width:100%; margin-top:20px; display: grid; grid-template-columns:1fr 600px; gap:20px; }
.layout2 > .frame { height:390px; border: 1px solid #ccc; border-radius:10px; display:flex; flex-direction:column; }
.layout2 > .frame > .content { flex:1; }
.layout2 > .frame canvas { width:100%; height:100%; }

.layout3 { width:100%; margin-top:20px; display: grid; grid-template-columns:550px 1fr 1fr; gap:20px; }
.layout3 > .frame { height:250px; border: 1px solid #ccc; border-radius:10px; }

.frame { padding:14px 20px; }
.frame > h2 { color:#222; font-size:15px; font-weight:500; }

.frame .jw-tableA { margin-top:30px; }
.frame .jw-tableA th { font-weight:400; }
.frame .jw-tableA td { overflow: hidden; white-space: nowrap;  text-overflow: ellipsis;  word-break: break-all; }
.frame .jw-tableA td.center { text-align:center; }

.frame .content .notice { margin-top:10px; display:flex; flex-direction:column; gap:10px; }
.frame .content .notice li { width:100%; display:flex; }
.frame .content .notice li span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; word-break: break-word; }

.project-progress-wrap { position:relative; margin-top:20px; display:flex; align-items:center; gap:20px; }
.project-progress-wrap svg { width:180px; } 
.project-progress { position:relative; }
.project-progress .center-text { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); display:flex; justify-content:center; align-items:center; flex-direction:column; }
.project-progress .center-text .value { font-size:30px; font-weight:bold; }

.donut { width: 100%; height: 100%; transform: rotate(-90deg); }
.track { fill: none; stroke: #eee; stroke-width:5; }
.segment { fill: none; stroke-width:5; stroke-linecap: round; }
.red1 { stroke: #a00000; }
.red2 { stroke: #de5d5d; }
.legend { font-size: 14px; }
.legend li { display: flex; align-items: center; margin-bottom: 10px; }
.legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; }
.legend .red1 { background: #a00000; }
.legend .red2 { background: #de5d5d; }
.legend .gray { background: #e0e0e0; }

#graph1 { margin-top:20px; }
#graph2 { margin-top:20px; }



	
@media screen  and  (max-width : 1280px) {
	main > .container { padding-left: 20px; padding-right: 20px; }
	.layout1 { grid-template-columns:repeat(3, 1fr); }
	.layout2 { grid-template-columns:1fr; }
	.layout3 { grid-template-columns:550px 1fr; }
}

@media screen  and  (max-width : 1060px) {
	.layout1 { grid-template-columns:repeat(2, 1fr); }
	.layout3 { grid-template-columns:1fr; }
	.pc { display:none; }
	.jw-tableA .author { width:70px; font-size:12px; }
	.jw-tableA .date { width:70px; font-size:12px; }
}

@media screen  and  (max-width : 600px) {
	.layout1 { grid-template-columns:1fr; }
}

@media screen  and  (max-width : 400px) {
}