/* ******************** product ******************** */
#contetns { margin-top: 110px; padding: 100px 0; border-bottom: 1px solid #ececec; text-align: left; }
.title { margin-bottom: 80px; font-weight: 600; font-size: 40px; text-align: center; }
.item { display: inline-block; width: 23.2%; height: 500px; margin-right: 2%; transition: transform 0.6s; text-align: center; }
.item:hover { transform: translateY(-10px); }
.item:nth-child(4n) { margin-right: 0; }
.item:last-child { margin-right: 0; }
.item>div { position: relative; }
.item img { width: 100%; }
.over { position: absolute; left: 0%; top: 0%; width: 100%; height: 100%; background: rgba(255,255,255,0.7); opacity: 0; transition: opacity 0.5s ease; }
.item>div:hover .over { opacity: 1; }
.over i { display: inline-block; width: 50px; height: 50px; margin-top: 42%; padding-top: 9px; border-radius: 50%; background: #a0b58d; font-size: 2.3rem; font-weight: 100; color: #fff; }
.info p { color: #333; font-size: 16px; font-weight: 500; }
.info p.text1 { margin: 40px 0 10px 0; font-family: 'Noto Sans KR', sans-serif; }
.info span.won { margin-right: 15px; color: #ccc; text-decoration: line-through; }
.info span.vegan { margin-right: 15px; padding: 0 1px 1px 4px; color: #fff; background: #a0b58d; font-size: 14px; font-weight: 500; text-align: center; }
.info span.pesco { margin-right: 15px; padding: 0 1px 1px 4px; color: #fff; background: #694d82; font-size: 14px; font-weight: 500; text-align: center; }
.info span.lacto { margin-right: 15px; padding: 0 1px 1px 4px; color: #fff; background: #8e9ad1; font-size: 14px; font-weight: 500; text-align: center; }

/* -----page----- */
.page { margin: 100px 0 0; text-align: center; }
.page ul { display: inline-block; }
.page li { display: inline-block; padding: 5px 10px; }
.page li.before { border: 1px solid #d5d5d5; }
.page li.before a { font-weight: bold; color: #333; }
.page li.next { border: 1px solid #d5d5d5; }
.page li.next a { font-weight: bold; color: #333; }
.page li a { font-size: 18px; text-align: center; font-family: 'Noto Sans KR', sans-serif; color: #999; }


/* ＊＊＊＊＊＊＊＊＊＊ 반응형 ＊＊＊＊＊＊＊＊＊＊ */
/* Tablet */
@media all and (max-width:1024px) {
    #contetns { margin-top: 60px; }
    .item { width: 47.2%; height: 500px; margin-right: 5%; }
    .item:nth-child(2n) { margin-right: 0; }
    .info p.text1 { font-size: 15px; }
}

/* Mobile1 */
@media all and (max-width:760px) {
    .title { margin-bottom: 0; }
    .item { width: 100%; height: 500px; margin-right: 0%; }
    .item:first-child { margin-top: 0; }
}

/* Mobile2 */
@media all and (max-width:430px) {
    #contetns { padding: 100px 0; }
    .item { height: 400px; margin-top: 10%; }
}