* { padding: 0; margin: 0; box-sizing: border-box; } html { font-size: 62.5%; } body { font-family: 'Roboto', sans-serif; } .right_top-up { max-width: 42.3rem; width: 100%; } .right_top-title { display: flex; justify-content: space-between; align-items: center; } .right_top-title-text { width: 17rem; font-size: 2rem; font-weight: bold; } .right_top-line { border: 0.01rem solid rgba(0, 0, 0, 15%); max-width: 33%; width: 100%; height: 0; } .right_top-content-top { display: flex; justify-content: space-between; margin-top: 3rem; } .right_top-content-sphere { text-align: center; padding: 0.6rem 0; color: #fff; background: #FD4C24; max-width: 11.7rem; width: 100%; font-size: 1.4rem; font-weight: bold; margin-bottom: 1rem; border: none; } .right-top-content-date { display: flex; align-items: center; margin-bottom: 1rem; } .date, .time { color: #a2a2a2; font-size: 1.4rem; } .date { margin-right: 2.5rem; position: relative; } .date::after { display: inline-block; width: 0.4rem; height: 0.4rem; content: ""; border: none; background: #a2a2a2; transform: rotate(45deg) translateY(-50%); position: absolute; top: 50%; right: -23%; } .right_top-content-bottom { margin-bottom: 1.5rem; } .right_top-content:last-child{ margin-bottom: 4rem; } .right_top-content-bottom-text { text-decoration: none; color: #000; font-size: 1.6rem; font-weight: bold; } .hr-line { width: 100%; border: 0.01rem solid rgba(0, 0, 0, 15%); } /* .hr-line:last-child{ display: none; */ } @media screen and (min-width: 1400px){ .right_top-line{ max-width: 47%; } } /* ========================================== */ .right_top-title-text-2 { width: 9.4rem; } .right_top-line-2 { max-width: 40%; width: 100%; } .additional { text-decoration: none; color: rgba(0, 0, 0, 30%); font-size: 1.4rem; margin-left: 2.1rem; } .right-top-content-date-2 { margin-top: 5rem; }