/* ******************** index ******************** */
/* -----banner----- */
.banner { margin-top: 110px; }
.banner img { width: 100%; }
.mbanner { display: none; }
.banner .swiper-pagination-bullet { width: 8px; height: 8px; border-radius: 50%; background: var(--swiper-pagination-bullet-inactive-color, #a0b58d); }

/* -----section(PRODUCT)----- */
section { margin: 100px 0; text-align: center; }
h1 { font-size: 46px; font-weight: 500; }
.bar { width: 30px; height: 2px; margin: 15px auto; background: #333; }
h3 { font-size: 16px; font-weight: normal; }

.product { margin-top: 50px; }
.product.swiper { padding: 0 60px; } /* 클래스선언사이에 공백없이 선언*/
.product, .recipe { --swiper-theme-color: #555; --swiper-navigation-size: 36px; }        /* button속성 */
.product .swiper-button-prev, .product .swiper-rtl .swiper-button-next { left: 0px; right: auto; top: 0; width: 40px; height: 400px; background: #fff; }
.product .swiper-button-next, .product .swiper-rtl .swiper-button-prev { right: 0px; left: auto; top: 0; width: 40px; height: 400px; background: #fff; }

.item { display: inline-block; text-align: center; width: 20%; margin-right: 1%; }
.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; }
/* .over i { display: none; } */
.item>div:hover .over { opacity: 1; }
.over i { display: inline-block; width: 50px; height: 50px; margin-top: 40%; padding-top: 9px; border-radius: 50%; background: #a0b58d; font-size: 2.3rem; font-weight: 100; color: #fff; }

.info p { color: #333; font-size: 15px; 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; }

/* -----subbanner----- */
.subbanner { text-align: center; background: #eee; padding: 30px 0; }
.subbanner h1 { font-size: 2.2rem; font-weight: normal; font-family: 'Noto Sans KR', sans-serif; }

/* -----section(RECIPE)----- */
.recipe { margin-top: 100px; }
.recipe .re_left { position: relative; float: left; width: 50%; }
.re_left>div { position: relative; width: 85%; }
.re_left>div span { position: absolute; right: -9%; bottom: 0; margin-right: 0; padding: 0 26px 10px 30px; border-top-left-radius: 10px; font-size: 2rem; font-weight: 500; background: rgba(160,181,141,0.8); color: #fff; }
.re_left>div span.ovo { position: absolute; right: -9%; bottom: 0; margin-right: 0; padding: 0 26px 10px 30px; font-size: 2rem; font-weight: 500; background: rgba(227,210,104,.8); color: #fff; }
.recipe .re_left img { width: 100%; margin-left: 9%; }
.recipe .swiper-button-prev, .recipe .swiper-rtl .swiper-button-next { left: 0px; right: auto; }
.recipe .swiper-button-next, .recipe .swiper-rtl .swiper-button-prev { right: 50%; left: auto; }

.recipe .re_right { float: right; width: 45%; height: 400px; margin-top: 3%; text-align: left; background: #fff; }
.re_right h1 { line-height: 1.4; }
.re_right h3 { font-size: 18px; }
.re_right p.text2 { margin: 20px 0 0px 0; }
.btn { display: inline-block; background: #333; margin-top: 20%; }
.more { display: inline-block; padding: 10px 40px; color: #fff; font-size: 1rem; transition: box-shadow 0.4s ease-out; }
.more:hover { color: #fff; box-shadow: inset 276px 0 0 0 #a0b58d; }

/* -----contents1(REVIEW)----- */
.conwrap { background: #f5f5f5; }
#contents1 { margin-top: 100px;  }
#contents1 .inner { padding: 80px 0 70px; }
.l_con { float: left; width: 75%; }
.review { display: inline-block; text-align: center; width: 23%; margin-right: 1%; background: #fff; box-shadow: 3px 3px 5px rgba(0,0,0,0.1); }
.review:last-child { margin-right: 0; }
.review img { width: 100%; height: 194px; border-radius: 2%; }
.review .icon { position: absolute; right: 3%; bottom: 43%; width: 20px; height: 20px; }
.review>div { position: relative; }
.review>div:hover .rev { opacity: 1; }
.rev { position: absolute; left: 0%; top: 0%; width: 100%; height: 100%; background: rgba(0,0,0,0.6); opacity: 0; transition: opacity 0.7s ease; }
.rev a { display: inline-block; margin-top: 44%; color: #fff; font-size: 1rem; font-weight: 700; }
.rev i { display: inline-block; font-size: 1.3rem; font-weight: 100; color: #fff; }
.rev a:hover { color: #a0b58d; }
.rev a:hover i { color: #a0b58d; }
.let { padding: 0 7px; }
.text3 { line-height: 2; color: #000; font-size: 1rem; text-align: left; font-weight: 700; }
.pid { text-align: left; color: #718096; padding-bottom: 25px; }

.r_con { float: right; width: 25%; margin-top: 7%; text-align: right; }
.r_con .btn { margin-top: 10%; }

#mcontents2 { display: none; }

/* -----contents2(PARTNER)----- */
/* #contents2 { background: #f5f5f5; } */
#contents2 .inner { padding: 70px 0 80px; }
.p_l { float: left; width: 30%; }
.p_l h1 { font-size: 46px; font-weight: 500; }
.p_l h3 { margin: 20px 0 30px 0; font-size: 16px; font-weight: normal; }

.p_r { float: right; width: 65%; text-align: center; }
.p_r li { float: left; width: 24.2%; margin-right: 1%; background: #fff; transition: transform 0.6s; }
.p_r li:hover { transform: translateY(-10px); }
.p_r li:last-child { margin-right: 0%; }
.p_r li img { width: 100%; }
.p_r li p { margin: 10px 0 50px; font-size: 16px; font-weight: bold; }
.p_r .mbtn { display: none; }

/* ＊＊＊＊＊＊＊＊＊＊ 반응형 ＊＊＊＊＊＊＊＊＊＊ */
/* Tablet */
@media all and (max-width:1024px) {
    /* -----banner----- */
    .banner { display: none; }
    .mbanner { display: inline-block; width: 100%; margin-top: 60px; }
    .mbanner img { width: 100%; }
    .mbanner .swiper-pagination-bullet { width: 8px; height: 8px; border-radius: 50%; background: var(--swiper-pagination-bullet-inactive-color, #a0b58d); }

    /* -----section(PRODUCT)----- */
    section { margin: 80px auto; text-align: center; }
    .product { margin-top: 30px; }
    .item { width: 44%; }
    .item:nth-child(2n) { margin-right: 0; }

    .pro_btn { display: block; width: 160px; margin: 150px auto 0; background: #333; }
    .pro_btn .more { display: inline-block; padding: 10px 40px; color: #fff; font-size: 1rem; transition: box-shadow 0.4s ease-out; }
    .pro_btn .more:hover { color: #fff; box-shadow: inset 276px 0 0 0 #a0b58d; }
    .over { display: none; }
    .info p.text1 { margin: 10px 0; }

    /* -----section(RECIPE)----- */
    .recipe { margin-top: 60px; }
    .recipe .re_left { width: 100%; }

    .recipe .re_right { width: 100%; margin-top: 5%; padding: 0 7%; }
    .re_right p.text2 { margin: 20px 0 100px 0; }
    .btn { display: block; width: 173px; margin: 0 auto; }

    .recipe .swiper-button-prev, .recipe .swiper-rtl .swiper-button-next { left: 0px; right: auto; }
    .recipe .swiper-button-next, .recipe .swiper-rtl .swiper-button-prev { right: 0%; left: auto; }
    .recipe .swiper-button-next, .recipe .swiper-button-prev { top: 25%; }
    
    /* -----mcontents1(Mobile REVIEW)----- */
    #contents1 { display: none; }
    #mcontents2 { display: inline-block; }
    #mcontents2 .inner { padding: 80px 0 0; }

    .t_con { width: 100%; text-align: center; }
    .t_con h1 { font-size: 46px; font-weight: 500; }
    .t_con h3 { margin: 20px 0 30px 0; font-size: 16px; font-weight: normal; }
    .t_con .btn { display: none; }

    .b_con { float: right; width: 65%; text-align: center; }
    .b_con li { position: relative; float: left; width: 23.8%; margin-right: 1.5%; background: #fff; transition: transform 0.6s; box-shadow: 3px 3px 5px rgba(0,0,0,0.1); }
    .b_con li:hover { transform: translateY(-10px); }
    .b_con li:last-child { margin-right: 0%; }
    .b_con li img { width: 100%; height: 194px; border-radius: 2%; }
    .b_con .icon { position: absolute; right: 3%; bottom: 40%; width: 20px; height: 20px; }
    .b_con li p { margin: 6px 0 0px; font-size: 12px; text-overflow: ellipsis; }
    .b_con .pid { padding-bottom: 20px; margin: 0; }
    .b_con { width: 100%; margin-top: 10%; text-align: center; }
    .b_con .mbtn { display: block; width: 173px; margin: 80px auto 0; background: #333; }
    .b_con .more { display: inline-block; padding: 10px 40px; color: #fff; font-size: 1rem; transition: box-shadow 0.4s ease-out; }
    .b_con .more:hover { color: #fff; box-shadow: inset 276px 0 0 0 #a0b58d; }
    

    /* -----contents2(PARTNER)----- */
    #contents2 .inner { padding: 70px 0 80px; }
    .p_l { width: 100%; text-align: center; }
    .p_l h3 { margin: 20px auto 30px; width: 462px; }
    .p_l .btn { display: none; }

    .p_r { width: 100%; margin-top: 3%; text-align: center; }
    .p_r .mbtn { display: block; width: 188px; margin: 80px auto 0; background: #333; }
    .p_r .more { display: inline-block; padding: 10px 40px; color: #fff; font-size: 1rem; transition: box-shadow 0.4s ease-out; }
    .p_r .more:hover { color: #fff; box-shadow: inset 276px 0 0 0 #a0b58d; }


}

/* Mobile1 */
@media all and (max-width:770px) {
    /* -----section(PRODUCT)----- */
    .product { margin-top: 30px; }
    .item { width: 83%; margin-right: 0; }

    .pro_btn { margin: 70px auto 0; }

    /* -----subbanner----- */
    .subbanner { padding: 20px 0; }
    .subbanner h1 { font-size: 1.6rem; }

    /* -----section(RECIPE)----- */
    .recipe { margin-top: 60px; }
    .swiper-slide { background: #fff; }
    .recipe .re_left { width: 100%; }
    .recipe .re_left img { width: 90%; margin-left: 14%; }
    .re_left>div span { right: -4%; padding: 0 8px 8px 11px; font-size: 30px; }
    .re_left>div span.ovo { right: -4%; }
    .re_right h2 { font-size: 18px; }
    .re_right h1 { line-height: 1.5; font-size: 31px; }
    .recipe .re_right { margin-top: 5%; height: 282px; }
    .recipe .swiper-button-prev, .recipe .swiper-button-next { top: 25%; }
    .recipe .swiper-button-prev, .recipe .swiper-rtl .swiper-button-next { left: 20px; right: auto; }
    .recipe .swiper-button-next, .recipe .swiper-rtl .swiper-button-prev { right: 20px; left: auto; }

    .recipe .re_right { padding: 0 12%; }
    /* .btn { margin-left: 22%; } */

    /* -----contents1(REVIEW)----- */
    .b_con li { width: 48%; margin-right: 4%; }
    .b_con li:nth-child(3) { margin-right: 0; }
    .b_con li:nth-child(2n) { display: none; }
    .b_con li p { font-size: 13px; }


    /* -----contents2(PARTNER)----- */
    .p_l h3 { width: 95%; }

    .p_r { width: 100%; margin-top: 3%; text-align: center; }
    .p_r .mbtn { margin: 60px auto 0; }
    .p_r li { width: 32%; }
    .p_r li:nth-child(3) { margin-right: 0; }
    .p_r li:last-child { display: none; }
}

/* Mobile2 */
@media all and (max-width:430px) {
    /* -----section(PRODUCT)----- */
    .item { width: 77%; }
    .item img { width: 100%; }
    .product .left { line-height: 7; }
    .product .right { line-height: 7; }


    /* -----subbanner----- */
    .subbanner h1 { font-size: 1.2rem; }

    /* -----section(RECIPE)----- */
    .recipe { margin-top: 60px; }
    .recipe .licon { font-size: 30px; }
    .recipe .ricon { font-size: 30px; }
    .recipe .re_left img { width: 90%; margin-left: 14%; }
    .recipe .re_left { width: 100%; }
    .re_left>div span { right: -4%; padding: 0 8px 6px 11px; font-size: 22px; }
    .re_right h2 { font-size: 15px; }
    .re_right h1 { line-height: 1.5; font-size: 20px; }
    .re_right h3 { font-size: 16px; }
    .re_right p.text2 { font-size: 11px; }
    .recipe .re_right { margin-top: 5%; padding: 0 12%; }
    .recipe .swiper-button-prev, .recipe .swiper-rtl .swiper-button-next { left: 0px; right: auto; }
    .recipe .swiper-button-next, .recipe .swiper-rtl .swiper-button-prev { right: 0px; left: auto; }

    /* -----contents1(REVIEW)----- */
    .b_con .icon { bottom: 43%; }
    .b_con li { width: 49%; margin-right: 2%; }
    .b_con li:nth-child(3) { margin-right: 0; }
    .b_con li:nth-child(2n) { display: none; }

    /* -----contents2(PARTNER)----- */
    .p_r li { width: 48%; margin-right: 4%; }
    .p_r li:nth-child(2) { margin-right: 0; }
    .p_r li:nth-child(3) { display: none; }
    
}