Q&A 채택되면 더 이상 답글을 달 수가 없나 보네요 ^^;;

몰랐습니다
예전에 달았던거 같기도 하...  기억이 잘 안납니다
답글에 대한 답글은 달수가 있는데 원본에 대한 추가 답글은 달수가 없는거 같던데 


여하튼 CSS관련 웹퍼블리싱 올리셨던데
@skqhdjk2 님이 볼지 안볼지는 모르겠지만   심심해서 한번 손 대봤습니다
물론 내부에 들어간 DOM 코드는 원본 참고를 안해서 DIV명칭이 틀립니다 참고만 하시면 됩니다


질문 주소 : https://sir.kr/questions/563529?vpage=1#answer_563533


<style>

/* 패널 */
.pannel_div{
    display:flex;
    justify-content:center;
    align-items:center;
    width:1500px;
    height:300px;
    background:#bfddfa;
}


/* 이동 버튼 */
.move_bt_left,
.move_bt_right{
    display:flex;
    justify-content:center;
    align-items:center;
    width:100px;
    height:250px;
    font-size:30px;
    font-family:cursive;
    font-weight:bold;
    color:#2d2c32;
}


/* 콘텐츠 영역 */
.content{
    display:flex;
    justify-content:center;
    align-items:center;
    width:1000px;
    height:250px;
}


/* 카드 박스 */
.roundBox{
    position:relative;
    top:-15px;
    margin:0 10px;
    min-width:150px;
    width:150px;
    height:125px;
    border-top-left-radius:25px;
    border-top-right-radius:25px;
    border-bottom-right-radius:25px;
    background:#fff;
}


.roundBox:before{
    position:absolute;
    content:'';
    left:0;
    bottom:-40px;
    width:110px;
    height:50px;
    border-bottom-left-radius:25px;
    border-bottom-right-radius:25px;
    background:#fff;
}


.roundBox:after{
    position:absolute;
    content:'';
    right:20px;
    bottom:-20px;
    width:32px;
    height:32px;
    background:#fff;
}


/* 번호 원 */
.bottomRoundDiv{
    position:absolute;
    right:-7px;
    bottom:-47px;
    z-index:5;
    display:flex;
    justify-content:center;
    align-items:center;
    width:38px;
    height:38px;
    border-radius:50%;
    border:5px solid #bfddfa;
    background:#fff;
    font-size:22px;
    font-family:cursive;
    font-weight:bold;
    color:#2d2c32;
}


/* 중앙 아이콘 */
.centerDiv{
    position:relative;
    z-index:1;
    top:40px;
    left:33px;
    display:flex;
    justify-content:center;
    align-items:center;
    width:80px;
    height:80px;
    border-radius:50%;
    background:#f2f2f2;
    font-size:35px;
}


/* 하단 텍스트 */
.bottomDiv{
    position:relative;
    z-index:1;
    top:55px;
    left:10px;
    width:87px;
    height:20px;
    border-radius:20px;
    color:#fff;
    font-size:13px;
    text-align:center;
}



.chk1{    background:#0066cc;}
.chk2{    background:#dfdfdf;}
.chk3{    background:#ffae88;}
.chk4{    background:#0066cc;}
.chk5{    background:#4da6ff;}

</style>

<div class="pannel_div">
    <div class="move_bt_left">
    <
    </div>
    <div class="content"> 
    
    
        <div class="roundBox">  
            <div class="centerDiv"> 
            🧑‍🤝‍🧑
            </div>
            <div class="bottomDiv chk1"> 
            모집중
            </div>
            <div class="bottomRoundDiv"> 
            >
            </div>
        </div>
        
        
        
        <div class="roundBox">  
            <div class="centerDiv"> 
            🧑
            </div>
            <div class="bottomDiv chk2"> 
            대기중
            </div>
            <div class="bottomRoundDiv"> 
            >
            </div>
        </div>    
        
            
        <div class="roundBox">  
            <div class="centerDiv"> 
            🛠️
            </div>
            <div class="bottomDiv chk3"> 
            진행중
            </div>
            <div class="bottomRoundDiv"> 
            >
            </div>
        </div>
        
        
        <div class="roundBox">  
            <div class="centerDiv"> 
            🧑‍🤝‍🧑
            </div>
            <div class="bottomDiv chk4"> 
            진행중
            </div>
            <div class="bottomRoundDiv"> 
            >
            </div>
        </div>
        
        
        <div class="roundBox">  
            <div class="centerDiv"> 
            🚀
            </div>
            <div class="bottomDiv chk5"> 
            진행중
            </div>
            <div class="bottomRoundDiv"> 
            >
            </div>
        </div>
        
        
        
    
    </div>
    <div class="move_bt_right">
    >
    </div>
</div>