@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Krona+One');

#m_prod h2.tit {
    margin: 70px 0 30px;
    text-align: center;
}

#m_prod h2.tit a {
    font-family: var(--ff-GMM);
    font-size: 1.6em;
    font-weight: normal;
    color: #888;
}

#m_prod h2.tit a strong {
    font-family: var(--ff-GMB);
    font-weight: normal;
    color: #000;
    text-transform: uppercase;
}

#m_prod_wrap {
    padding: 5px;
    background: #f2f2f2 url('./img/m_prod_bg.gif') repeat;
}

#m_prod_li {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 5px;
}

#m_prod_li li {
    position: relative;
    border: 1px solid #fff;
    text-align: left;
    background: #fff;
    overflow: hidden;
    cursor: pointer;
}

#m_prod_li li,
#m_prod_li li * {
    transition: all .2s;
}

#m_prod_li li:hover {
    border: 1px solid #ffaa00;
}

#m_prod_li li span {
    display: block;
}

#m_prod_li li span.cate {
    padding: 15px 15px 0 15px;
    font-family: inherit;
    font-weight: 300;
    font-size: .85em;
    color: #268bbe;
}

#m_prod_li li span.tit {
    padding: 10px 15px 15px 15px;
    font-family: inherit;
    font-size: 1.35em;
    font-weight: 500;
    width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
    overflow: hidden;
    transition: all .2s;
}

#m_prod_li li:hover span.tit {
    color: #268bbe;
}

#m_prod_li li span.img {
    overflow: hidden;
    background: #ffaa00;
}

#m_prod_li li span.img img {
    width: 100%;
    transform: scale(1);
}

#m_prod_li li:hover span.img img {
    opacity: .5;
    transform: scale(1.1);
}

#m_prod_li li span.cont {
    padding: 15px;
    font-size: .9em;
    line-height: 1.4em;
    text-align: left;
    background: #fff;
    opacity: 1;
}

#m_prod_li li:hover span.cont {
    color: #ccc;
}

@media (max-width:1024px) {
    #m_prod_li {
        grid-template-columns: repeat(2, 1fr);
    }

    #m_prod_li li span.tit {
        font-size: 1.15em;
    }
}

@media (max-width:768px) {
    #m_prod_li li span.tit {
        font-size: 1.05em;
    }

    #m_prod h2.tit a {
        font-size: 1.35em;
    }
}