.statusContainer { position: relative; width: 100%; height: auto; background: url(../images/map_2.png); background-position: 50% 150%; background-repeat: no-repeat; background-size: contain; } .statusContainer > ol { position: absolute; top: 30px; right: 20px; display: none; } .statusContainer > ol > li { float: left; } .statusContainer > ol > li > a { padding: 10px; text-align: center; font-size: 30px; font-weight: 900; color: #333; background-color: #ddd; } .statusContainer > p { position: relative; width: 100%; margin: 80px auto 0; text-align: center; font-size: 23px; font-weight: 600; color: #000; } .statusContainer > p:after { position: absolute; bottom: -25px; left: 50%; width: 100px; margin-left: -50px; height: 5px; background-color: #000; content: ""; } .statusContainer > .status { margin-top: 100px; width: 100%; } .statusContainer > .status > .inner { position: relative; width: 1200px; margin: 0 auto 20px; border-top: 2px solid #ddd; } .statusContainer > .status > .inner:last-child { margin-bottom: 100px; } .statusContainer > .status > .inner > .since { position: absolute; top: 20px; left: 50px; font-size: 35px; font-weight: 600; color: #0061a9; content: "2018"; } .statusContainer > .status > .inner > ul { padding-top: 20px; padding-left: 350px; width: 800px; margin: 0 auto; text-align: left; font-size: 17px; } .statusContainer > .status > .inner > ul > li { padding: 20px 0 10px; border-bottom: 1px dashed #ccc; line-height: 1.7em; } .statusContainer > .status > .inner > ul > li > dl > dd > ul > li { float: left; } .statusContainer > .status > .inner > ul > li > dl > dd > ul > li:last-child { margin-left: 10px; } .statusContainer > .status > .inner > ul > li:last-child { border-bottom: 0; } @media screen and (max-width: 768px) { .statusContainer { width: 100%; height: auto; background: url(../images/map_2.png); background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; } .statusContainer > ol { display: block; } .statusContainer > p { position: relative; width: 100%; margin: 80px auto 0; text-align: center; font-size: 23px; font-weight: 600; color: #000; } .statusContainer > p:after { position: absolute; bottom: -25px; left: 50%; width: 50px; margin-left: -25px; height: 3px; background-color: #000; content: ""; } .statusContainer > .status { margin-top: 100px; width: 100%; } .statusContainer > .status > .inner { position: relative; width: 100%; margin: 0 auto 20px; border-top: 2px solid #ddd; } .statusContainer > .status > .inner:last-child { margin-bottom: 100px; } .statusContainer > .status > .inner > .since { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); font-size: 50px; font-weight: 600; color: #0061a9; content: "2018"; } .statusContainer > .status > .inner > ul { padding-top: 70px; padding-left: 0px; width: 100%; margin: 0 auto; text-align: left; font-size: 15px; } .statusContainer > .status > .inner > ul > li { padding: 20px; border-bottom: 1px dashed #ccc; line-height: 1.5em; } .statusContainer > .status > .inner > ul > li > dl > dd { padding: 10px 0; line-height: 1.3em; } .statusContainer > .status > .inner > ul > li > dl > dd w { display: none; } .statusContainer > .status > .inner > ul > li:last-child { border-bottom: 0; } } /*# sourceMappingURL=status.css.map */