body {
  font-size:14px;
  color: #7c8ea6;
  text-align: center;
  margin: 0;
  font-family: 'Oswald', sans-serif;
}

.sch-style-5 .sch-cylinder {
  --r: 80px;
  width: 500px;
  height: 220px;
  background: radial-gradient(50% var(--r) at 50% var(--r), #0003 99.99%, #0000 0), radial-gradient(50% var(--r) at 50% calc(100% - var(--r)), #fff3 99.99%, #0000 0), #369;
  border-radius: 100% / calc(var(--r) * 2);
  margin: 50px auto;
  position: relative;
  overflow: hidden;
}

.sch-style-5 .sch-percent {
  --r: 80px;
  width: 500px;
  height: 158px;
  border-radius: 100% / calc(var(--r) * 2);
  margin: 0 auto;
  background-image: conic-gradient( #f55d2b 180deg, #25387a 180deg 245deg, #48bfd7 245deg 280deg, #6194a7 280deg 360deg);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
}
.sch-style-5 .sch-percent-1 {
background: #6b2911;
width: 250px;
height: 134px;
position: absolute;
bottom: 0;
right: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 63%;
border-bottom-left-radius: 0%;
}
.sch-style-5 .sch-percent-2 {
  background: #192652;
  width: 140px;
  height: 134px;
  position: absolute;
  bottom: 0;
  left: 110px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 14%;
}
.sch-style-5 .sch-percent-3 {
  background: #3a9db0;
  width: 110px;
  height: 134px;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 14%;
}
.sch-style-5 .sch-percent-number {
  font-size: 24px;
  color: #fff;
  position: absolute;
  font-weight: bold;
}
.sch-style-5 .sch-percent-number.sch-percent-number-1 {
  right: 25%;
  top: 40%;
}
.sch-style-5 .sch-percent-number.sch-percent-number-2 {
left: 38%;
top: 72%;
}
.sch-style-5 .sch-percent-number.sch-percent-number-3 {
  left: 19%;
  top: 43%;
}
.sch-style-5 .sch-percent-number.sch-percent-number-4 {
left: 35%;
top: 8%;
}
.sch-style-5 .sch-year-item .sch-year-color {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  float: left;
}
.sch-style-5 .sch-year-item.sch-year-1 .sch-year-color {
  background: #f55d2b;
}
.sch-style-5 .sch-year-item.sch-year-2 .sch-year-color {
  background: #25387a;
}
.sch-style-5 .sch-year-item.sch-year-3 .sch-year-color {
  background: #48bfd7;
}
.sch-style-5 .sch-year-item.sch-year-4 .sch-year-color {
  background: #6194a7;
}
.sch-style-5 .sch-year {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  width: 440px;
  margin: 0 auto;
  grid-gap: 20px;
}
.sch-style-5 .sch-year-number {
  font-size: 20px;
  line-height: 30px;
  color: #000;
  font-weight: bold;
}
@media (min-width: 480px) and (max-width: 639px) {
.sch-style-5 .sch-percent,.sch-style-5 .sch-cylinder {
  width: 400px;
}
.sch-style-5 .sch-percent-3 {
  width: 72px;
}
.sch-style-5 .sch-percent-2 {
  width: 129px;
  left: 71px;
}
.sch-style-5 .sch-percent-number.sch-percent-number-2 {
  left: 34%;
}
.sch-style-5 .sch-percent-1 {
  width: 200px;
}
}
@media (min-width: 375px) and (max-width: 479px) {
.sch-style-5 .sch-percent,.sch-style-5 .sch-cylinder {
  width: 300px;
}
.sch-style-5 .sch-percent-3 {
  width: 38px;
}
.sch-style-5 .sch-percent-2 {
  width: 112px;
  left: 38px;
}
.sch-style-5 .sch-percent-number.sch-percent-number-2,
.sch-style-5 .sch-percent-number.sch-percent-number-4 {
  left: 30%;
}
.sch-style-5 .sch-percent-1 {
  width: 150px;
}
.sch-style-5 .sch-year {
  width: 350px;
  grid-gap: 10px;
}
}
@media (min-width: 320px) and (max-width: 374px) {
.sch-style-5 .sch-percent,.sch-style-5 .sch-cylinder {
  width: 280px;
}
.sch-style-5 .sch-percent-3 {
  width: 32px;
}
.sch-style-5 .sch-percent-2 {
  width: 108px;
  left: 32px;
}
.sch-style-5 .sch-percent-number.sch-percent-number-2,
.sch-style-5 .sch-percent-number.sch-percent-number-4 {
  left: 28%;
}
.sch-style-5 .sch-percent-1 {
  width: 140px;
}
.sch-style-5 .sch-year {
  width: 300px;
  grid-gap: 10px;
}
.sch-style-5 .sch-year-number {
  font-size: 16px;
}
}