.main .container-fluid{
    margin: 0 auto;
    padding-left: 0;
    padding-right: 0;
}
.main .container-fluid .row .col{
    padding-left: 0;
    padding-right: 0;
}
ul{
    list-style-type:none;
    margin: -.25rem 0 0;
    padding-left: 1.625rem;
}
@media (min-width:576px) and (max-width:767px){
    .main .container-fluid {
        margin-top:53px;
    }
}
@media (max-width:576px) {
    .main .container-fluid {
        margin: 0 auto;
    }
    .main .container {
        padding-top: unset !important;
    }
}
@media (max-width:767px){
    .main .container{
        margin: 1rem auto;
        padding-top: 1rem;
    }
}


.main .container .waterfall {
    width: 100%;
    margin: 0px auto;
    column-count: 3;/*欄數*/
    column-gap: 1rem;/*每欄間隔*/
 }
 .main .container .waterfall .mycard{
    box-sizing: border-box;
    margin: 0 auto 1rem;
    break-inside: avoid;/*不中斷*/
 }
 @media (max-width:1200px) {
    .main .container .waterfall {
        column-count: 2;
     }
 }
 @media (max-width:992px) {
    .main .container .waterfall {
        column-count: 2;
     }
}
@media (max-width:767px) {
    .main .container .waterfall {
        column-count: 1;
     }
}
/* @media (max-width:576px) {
    .main .container .waterfall {
        column-count: 2;
     }
}
@media (max-width:400px) {
    .main .container .waterfall {
        column-count: 1;
     }
} */
.main .container .waterfall .mycard>.card img:nth-child(1){
    object-fit:contain;
    object-position: center;
    padding:1rem 3rem;
    height: 170px;
    transition: all .3s ease-in-out;
}
.main .container .waterfall .mycard>.card img:nth-child(1):hover{
    /* object-fit:cover; */
    padding:0rem 1rem;
}
.main .container .waterfall .mycard>.card hr{
    margin-top: 0;
    margin-bottom: 0;
}
.main .container .waterfall .mycard>.card a{
    text-decoration: none;
}
.main .container .waterfall .mycard>.card a:nth-child(3){
    background-color: rgba(41, 75, 178, .1);
    color: #294BB2;
    padding: .25rem .5rem;
    transition: all .4s ease;
}
.main .container .waterfall .mycard>.card a:nth-child(3):hover{
    background-color: rgba(41, 75, 178, .4);
    color: #FFF;
}
.main .container .waterfall .mycard>.card a:nth-child(3) div{
    float:right;
    color:transparent;
}
.main .container .waterfall .mycard>.card a:nth-child(3):hover div,
.main .container .waterfall .mycard>.card a:nth-child(3):focus div{
    color: #FFF;
}
.main .container .waterfall .mycard>.card div:nth-child(4){
    padding: .25rem .5rem;
}
.main .container .waterfall .mycard>.card div:nth-child(4) p{
    margin: .5rem;
}
.main .container .waterfall .mycard>.card a:nth-child(5){
    margin: .7rem;
    padding: .25rem .5rem;
    text-align: center;
    background-color: rgba(41, 75, 178, .7);
    color: #FFF;
    transition: all .4s ease;
}
.main .container .waterfall .mycard>.card a:nth-child(5):hover{
    background-color: rgba(41, 75, 178, 1);
}
/* test */