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