@charset "utf-8";

/* mv */
.mv_txt_box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    justify-content: center;
}

.mv_txt_box h1 {
    color: #FFF;
    text-align: center;
    font-family: 'Amiri';
    font-size: 5.25rem;
    font-style: normal;
    font-weight: 600;
    line-height: 100%;
    /* 92px */
    text-transform: uppercase;
}

.mv_txt_box p {
    color: #FFF;
    text-align: center;
    font-size: 1.75rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-transform: uppercase;
}

.main_visual {
    aspect-ratio: 1 / 0.48125;
    position: relative;
    /* margin-top: 155px; */
}


.main_visual .inner {
    width: 100%;
    height: 100%;
}

/* con01 */

body {
    background: #FAFAFA;
}

.con01.section {
    padding: 120px 0 120px 120px;
}

.con01_section_wrapper {
    padding: 80px;
    border-radius: 999px 8px 8px 999px;
    border: 1px solid rgba(14, 97, 79, 0.40);
    background: linear-gradient(90deg, #105842 60%, #34A784 100%);

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: left;
    gap: 80px;
}

.radius_img {
    aspect-ratio: 1 / 0.6666;
    border-radius: 999px 8px 8px 999px;
    max-width: 735px;
    width: 100%;
}

.con_txt h3 {
    color: #FFF;
    font-family: "Crimson Text";
    font-size: 2rem;
    font-style: normal;
    font-weight: 600;
    line-height: 130%;
    /* 46.8px */
    letter-spacing: -0.18px;
    text-transform: uppercase;
}

.con_txt>p {
    color: #FFF;
    font-family: Pretendard;
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: 150%;
    /* 24px */
    letter-spacing: 0.16px;
}

.coffee_btn {
    border-radius: 100px;
    display: inline-flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    padding: 14px 21px;
}

.coffee_btn p {
    color: var(--Korumori_Pri-100, #EDF7F5);
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: 100%;
    /* 16px */
}

.coffee_btn.yellow {
    border-radius: 100px;
    background: rgba(189, 153, 122, 0.85);
    box-shadow: 3px 3px 0.5px -3.5px #FFF inset, 2px 2px 0.5px -2px #262626 inset, -2px -2px 0.5px -2px #262626 inset, 0px 0px 0px 1px #A6A6A6 inset, 0px 0px 8px 0px #F2F2F2 inset, 0px 0px 2px 0px rgba(0, 0, 0, 0.10), 0px 1px 8px 0px rgba(0, 0, 0, 0.10);
    backdrop-filter: blur(6px);
}

/* con02 */

.product_tit h4 {
    color: var(--color-grey-22, #373A36);
    text-align: center;
    font-size: 2rem;
    font-style: normal;
    font-weight: 600;
    line-height: 100%;
    /* 36px */
    letter-spacing: -0.36px;
}

.product_tit p {
    color: var(--www-woodberrycoffee-com-lunar-green, var(--color-grey-22, #373A36));
    text-align: center;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 110%;
    /* 17.6px */
    letter-spacing: 0.32px;
    margin-top: 12px;
}

.prod_wrapper_yo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 36px;
    width: 100%;
}

.product_list {
    width: 100%;
}

.product_list ul {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    width: 100%;
    flex-wrap: wrap;
}

.product_list ul li {
    width: calc(25% - 30px);
}

.product_list ul li p {
    color: #333;
    text-align: center;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 600;
    line-height: 100%;
    /* 20px */
    margin-top: 18px;
}

.badge_box ul {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 9px;
    width: 100%;
}

.badge_box ul li {
    border-radius: 50px;
    background: var(--Korumori_Pri-100, #EDF7F5);
    padding: 6px 12px;
    width: fit-content;
    text-align: center;
    color: #00BC70;

    /* Caption-12 */
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 400;
    line-height: 110%;
    /* 13.2px */
    letter-spacing: 0.24px;
}

/* con03 */
.con01.con03.section {
    padding: 120px 120px 120px 0;
}

.con03 .con01_section_wrapper {
    padding: 80px;
    border-radius: 8px 999px 999px 8px;

    border: 1px solid rgba(14, 97, 79, 0.40);
    background: linear-gradient(90deg, #EBCDB2 0%, #BD997A 40%);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: right;
    gap: 80px;
}

.con03 .radius_img {
    border-radius: 8px 999px 999px 8px;
}

.coffee_btn.green {
    background: rgba(16, 88, 66, 0.85);
    box-shadow: 3px 3px 0.5px -3.5px #FFF inset, 2px 2px 0.5px -2px #262626 inset, -2px -2px 0.5px -2px #262626 inset, 0px 0px 0px 1px #A6A6A6 inset, 0px 0px 8px 0px #F2F2F2 inset, 0px 0px 2px 0px rgba(0, 0, 0, 0.10), 0px 1px 8px 0px rgba(0, 0, 0, 0.10);
    backdrop-filter: blur(6px);
}

@media all and (max-width: 768px) {
    .mv_txt_box h1 {
        font-size: 50px;
    }

    .mv_txt_box p {
        font-size: 20px;
    }
}


/* 20250718 추가 */
.gap_cus_tom {
    gap: 60px;
    flex-wrap: wrap !important;
    justify-content: unset !important;
    align-items: center !important;
}

.gap_cus_tom li {
    width: calc(25% - 45px);
}

@media all and (max-width: 1000px) {
    .gap_cus_tom {
        gap: 30px;
    }

    .gap_cus_tom li {
        width: calc(33.333% - 20px);
    }
}

@media all and (max-width: 768px) {
     .gap_cus_tom li {
        width: calc(50% - 15px);
    }

    .yellow_btn_yo {
        margin-left: auto;
    }
    .con01 .bgGreen {
        padding-right: 30px !important;
    }
    .con03 .bgBrown {
        padding-left: 30px !important;
    }
    .con03 .bgBrown h4,
    .con03 .bgBrown p
     {
        text-align: unset !important;
    }
    .green_btn_yo {
        margin-right: auto;
    }
}