* {
    margin:0;
    padding:0;
    box-sizing: border-box;
}
body {
    background:rgb(9, 100, 160);
}
#container {
    width:320px;        
    margin:50px auto;
}
.card {
    position:relative;    
    width:300px;
    height:500px;
    margin:20px 10px;
    border:1px solid #0f0f0f33;
    background-color:#ffffff;      
}
.words {
    position:absolute;    
    left:10px;
    top:300px;
    padding:10px;
    text-align:center;   
}

@media screen and (min-width:768px) and (max-width:1439px) {
    #container {
        width:570px;        
        margin:50px auto;
    }
    .card {
        position:relative;    
        width:550px;
        height:250px;
        margin:20px 10px;
        border:1px solid #0f0f0f33;
        background-color:#ffffff;      
    }
    .words {
        position:absolute;    
        left:310px;
        top:50px;
        text-align:center;
        width:200px;          
    }
}

@media screen and (min-width:1440px) {
    #container {
        width:1140px;
        margin:50px auto;
    }    
    .card {
        position:relative;
        float:left;  /* 카드를 가로로 배치 */
        width:550px;
        height:250px;
        margin:10px;
        border:1px solid #0f0f0f33;
        background-color:#ffffff;      
    }
    .words {
        position:absolute;    
        left:310px;
        top:50px;
        text-align:center;
        width:200px;          
    }
}