@charset "UTF-8";

@media all and (max-width:480px){
    
    .time-box{margin: 0 0 10px 0}
    
    .article-area h4{font-size: 24px}
    .article-area h4 span{
        line-height: 34px;
        letter-spacing: -0.4px;
    }
    
}
@media all and (min-width:481px) and (max-width:767px){
    
    .time-box{margin: 0 0 10px 0}
    
    .article-area h4{font-size: 24px}
    .article-area h4 span{
        line-height: 34px;
        letter-spacing: -0.4px;
    }
    
}
@media all and (min-width:768px) and (max-width:1024px){
    
    article ul li{margin: 20px 0;float: left;width: 50%}

    .time-box{margin: 0 0 10px 0}
    
    .article-area h4{font-size: 24px}
    .article-area h4 span{
        line-height: 34px;
        letter-spacing: -0.4px;
    }
    
}
@media all and (min-width:1025px) and (max-width:1280px){
    
    article ul li{margin: 20px 0;float: left;width: 33.3%}

    .time-box{margin: 0 auto}
    
    .article-area h4{font-size: 26px}
    .article-area h4 span{
        line-height: 38px;
        letter-spacing: -0.4px;
    }
    
}
@media all and (min-width:1281px){
    
    article ul li{margin: 20px 0;float: left;width: 33.3%}

    .time-box{margin: 0 auto}
    
    .article-area h4{font-size: 26px;margin: 0 0 10px 0}
    .article-area h4 span{
        line-height: 38px;
        letter-spacing: -0.4px;
    }
}

/*common*/
figure{width: 100%}
figure img{width: 100%;display: inline-block}

em{color: #9cfeff}

.time-box {background: #201f35;text-align: center;width: 120px;height: 35px}
.time-box time{color: #fff;display: inline-block;line-height: 35px;letter-spacing: -.065em;font-weight: 700}

/*list-top*/
.list-top{border-bottom: 2px solid #232323;padding: 30px 0 5px 0;overflow: hidden;margin: 0 0 20px 0}
.list-top h3{float: left}
.list-top h3 span{display: inline-block;width: 330px}
.list-top h3 span img{width: 100% !important}

.more{border: 1px solid #ccc;border-radius: 40px;width: 100px;margin: 0 auto;display: block;text-align: center;background: #222;color: #fff;font-size: 14px;padding: 8px 0}
.more:hover{cursor: pointer;transition: 0.7s;background: #fff;color: #222}

article{width: 100%;overflow: hidden;padding: 20px 0 0 0}
.article-area{border-bottom: 1px solid #dddddd;padding: 0 0 20px 0}
h4{font-weight: 700;text-align: center;margin: 0 0 30px 0}
h4 span{
    font-size: 30px;
    line-height: 34px;
    letter-spacing: -.065em;
}
.article-area h4 span{letter-spacing: -.065em}

article ul li{margin: 20px 0}
article ul li > div{border: 1px solid #ccc;border-radius: 20px;padding: 20px 15px;width: 85%;margin: 0 auto;height: 500px;position: relative}
article ul li > div figure{width: 100%;height: 300px;overflow: hidden;border: 1px dashed #ccc}
article ul li > div figure img{width: 100%}
article ul li > div a{position: absolute;bottom: 20px;width: 90%}

article ul li > div .headline{text-align: center;margin: 20px 0 10px 0}
article ul li > div .headline span{
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.065em;
    line-height: 24px;
}
article ul li > div .description span{
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -.065em;
    margin: 0 30px 0 0;
}