/* ******************** product ******************** */
#contents { margin-top: 110px; padding: 100px 0; border-bottom: 1px solid #ececec; text-align: center; }
.title { margin-bottom: 80px; font-weight: 600; font-size: 40px; }
.recipe ul { display: flex; justify-content: space-between; flex-wrap: wrap; }
.recipe li { position: relative; flex: 0 0 23%; }
.recipe li:hover img { transform: scale(1.1, 1.1); }
.recipe li img { width: 100%; transition: all 0.6s; }
.list { overflow: hidden; }
.text1 { margin: 10px 0 50px; font-size: 16px; font-weight: 500; font-family: 'Noto Sans KR', sans-serif; }
span.vegan { position: absolute; right: 0; top: 0; padding: 5px 8px; border-bottom-left-radius: 10px; background: rgba(160,181,141,.8); color: #fff; font-size: 1.2rem; font-weight: 500; }
span.ovo { position: absolute; right: 0; top: 0; padding: 5px 8px; border-bottom-left-radius: 10px; background: rgba(227,210,104,.8); color: #fff; font-size: 1.2rem; font-weight: 500; }

/* sbox */
.sbox { margin-bottom: 40px; text-align: right; color: #333; font-size: 12px; }
input { line-height:24px; padding: 2px 4px; border: 1px solid #ddd; outline: none; }
select { outline: none; }
.date { padding: 4px; border: 1px solid #ddd; }
.tit { padding: 4px; border: 1px solid #ddd; }
.box1 { width: 150px; height: 27px; border: 1px solid #ddd; }
.sbox a { border: 1px solid #ddd; padding: 5px 10px 5px; font-size: 12px; font-weight: 500; }

/* -----page----- */
.page { margin: 100px 0 0; }
.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) {
    #contents { margin-top: 60px; }
    .recipe li { flex: 0 0 32%; }
    .text1 { font-size: 15px; }
    span.vegan { padding: 3px 5px; font-size: 22px; }
    span.ovo { padding: 3px 5px; font-size: 22px; }
}

/* Mobile1 */
@media all and (max-width:760px) {
    .recipe li { flex: 0 0 48%; }
    .text1 { font-size: 18px; }
    span.vegan { padding: 3px 5px; font-size: 20px; }
    span.ovo { padding: 3px 5px; font-size: 20px; }
}

/* Mobile2 */
@media all and (max-width:430px) {
    .recipe li { flex: 0 0 100%; }
    .text1 { font-size: 20px; }
    .sbox { text-align: center; }
}