/*
<div.eachActivity_style01 >
    <a.imgList >
        <img.pic > <img.pic >  // with width and height in px
    </a >
    <div.right >
        <a.caption />
        <span.date />
        <p.description />
    </div >
</div >
*/

.eachActivity_style01 {
    box-sizing: border-box;
    border-top: none 0;
    border-left: none 0;
    border-right: none 0;
    border-bottom: solid 1px #cccccc;
    padding: 1rem;
    overflow: hidden;
    display : flex;
    flex-direction : row;
    justify-content : flex-start;
    align-items : flex-start;
}

    .eachActivity_style01 .imgList {
        display: flex;
        flex-grow: 0;
        flex-shrink: 1;
        margin-right : 1rem;
    }

        .eachActivity_style01 .imgList .pic {
            margin: 0 1rem 0 0;
            min-width: 150px;
            /*max-width : 100%;*/
            height: auto;
        }

    .eachActivity_style01 .right
    {
        flex-grow : 1;
        flex-shrink : 1;
    }

    .eachActivity_style01 .caption {
        font-weight: bolder;
    }

.eachActivity_style01 .date
{
    margin : 0 0 0 4rem;
    font-size : 80%;
}

.eachActivity_style01 .description
{

}

@media (max-width: 480px) {
    .eachActivity_style01 .date {
        margin: 0;
        font-size: 80%;
        display : block;
    }
    .eachActivity_style01 {
        display: block;
    }
}

@media (min-width: 481px) and (max-width: 767px) {
}

@media (min-width: 768px) and (max-width: 979px) {
}

@media (min-width: 980px) and (max-width:1199px) {
}

@media (min-width: 1200px) and (max-width:1919px) {
}

@media (min-width: 1920px) {
}