h3,
 p {
     margin: 0;
     padding: 0;
 }
 
 body {
     padding: 0;
     margin: 0;
 }
 
 h3 {
     font-size: 18px;
     font-weight: normal;
     margin: 15px 0 10px;
     padding-top: 35px;
     text-align: center;
 }
 
 .timeline-box p {
     margin-bottom: 5px;
     font-size: 15px;
     color: #000000;
     text-align: center;
     margin-top: 32px;
     font-weight: bold
 }
 
 #timeline-pc {
     width: 1130px;
     margin: 50px auto;
 }
 
 .timecenter {
     position: relative;
     display: inline-block;
     height: 600px;
     width: 100%;
     font-size: 15px;
 }
 
 .timeline-box {
     width: 220px;
     height: 235px;
     box-shadow: 0 0 5px 2px rgba(135, 135, 135, 0.15);
     position: absolute;
     left: 0;
     right: 0;
     /* background-color: #FFF; */
     z-index: 1;
     opacity: 0;
     transition: 0.5s;
     transform: scaleX(0);
     padding: 10px;
     border: 3px solid rgb(14, 60, 119);
     border-radius: 20px;
     color: #FFFFFF
 }
 
 .timeline-box:nth-child(odd) {
     top: -15px;
 }
 
 .timeline-box:nth-child(even) {
     bottom: -15px;
 }
 
 .timeline-box::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
     background: #FFF;
     z-index: -1;
     background: linear-gradient(181deg, #01316f, #17437c52);
     border-radius: 15px;
 }
 
 .timeline-box::after {
     content: "";
     width: 15px;
     height: 15px;
     position: absolute;
     left: 50%;
     background-color: #0e3c77;
     transform: translateX(-50%)rotate(45deg);
     box-shadow: 0 0 5px 2px rgba(135, 135, 135, 0.15);
     z-index: -2;
 }
 
 .timeline-box:nth-child(odd)::after {
     bottom: -7.5px;
 }
 
 .timeline-box:nth-child(even)::after {
     top: -7.5px;
 }
 
 .timeline-box:nth-child(1) {
     left: -30px;
 }
 
 .timeline-box:nth-child(2) {
     left: 132px;
 }
 
 .timeline-box:nth-child(3) {
     left: 293px;
 }
 
 .timeline-box:nth-child(4) {
     left: 455px;
 }
 
 .timeline-box:nth-child(5) {
     left: 613px;
 }
 
 .timeline-box:nth-child(6) {
     left: 780px;
 }
 
 .timeline-box:nth-child(7) {
     left: 940px;
 }
 
 .timeline-box:nth-child(8) {
     left: 991px;
 }
 
 .header {
     width: 70px;
     height: 70px;
     position: absolute;
     left: 50%;
     margin-left: -35px;
     display: flex;
     justify-content: center;
     text-anchor: middle;
     /* background-color: #FFF; */
     padding: 10px;
     border-radius: 50%;
     ;
     box-sizing: border-box;
     align-items: center;
     font-size: xx-large;
     font-family: sans-serif;
     color: #00aaff;
     border-block: inherit;
     font-weight: 600;
 }
 
 .timeline-box:nth-child(odd) .header {
     top: -35px;
 }
 
 .timeline-box:nth-child(even) .header {
     bottom: -35px;
 }
 
 .header::before {
     content: "";
     position: absolute;
     left: 0;
     right: 0;
     bottom: 0;
     top: 0;
     border-radius: 50%;
     ;
     box-shadow: 0 0 5px 2px rgba(135, 135, 135, 0.15);
     z-index: -2;
 }
 
 .description {
     margin-top: 18px;
     font-weight: 500;
     letter-spacing: 2px;
     height: 185px;
     display: flex;
     flex-direction: column;
     justify-content: space-evenly;
 }
 
 .timeline_div {
     width: 980px;
     height: 90px;
     position: absolute;
     position: absolute;
     left: 0;
     right: 0;
     bottom: 0;
     top: 0;
     margin: auto;
     display: flex;
     justify-content: space-between;
 }
 
 .timeline_div div {
     width: 20px;
     height: 20px;
     border-radius: 50%;
     background: #00aaff;
     border: 5px solid #0e3c77;
 }
 
 .f-border {
     border-color: #fff;
     box-shadow: 0 0 8px rgba(0, 0, 0, .2);
 }
 
 .active-time {
     border: 5px;
     border-color: #fff;
     box-shadow: 0 0 10px 3px #0af;
 }