@charset "utf-8";

p {
    margin-bottom: 0;
}
ul {
    padding-left: 0;
    margin-bottom: 0;
}

body {
    max-width: 100vw;
}
section {
    /*margin-bottom: 7.5rem;*/
    margin-bottom: 10.5rem;
}

.inner1920 {
    max-width: 1920px;
    width: 100%;
}

.gap80 {
    gap: 5rem;
}

#header {
    position: sticky !important;
}

#header:after {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 25px;
    background: #0E614F;
}

@media screen and (max-width: 767px) {
    .content {
        max-width: 93.75vw;
        margin: 0 auto;
    }
}

/********************************/

.product_list ul li {
    text-align: center;
}

.pdSection {
    margin-top: 3rem;
}

.pdSection .title {
    margin-bottom: 1.25rem;
}

.pdSection .title p {
    color: var(--www-woodberrycoffee-com-lunar-green, var(--color-grey-22, #373a36));
    text-align: center;

    /* www.woodberrycoffee.com/Semantic/Link upper */
    font-family: var(--font-family-Font-1, 'Times New Roman');
    font-size: 0.75rem;
    font-style: normal;
    font-weight: var(--font-weight-400, 400);
    line-height: var(--line-height-20_4, 20.4px); /* 170% */
    letter-spacing: var(--letter-spacing-1_2, 1.2px);
    text-transform: uppercase;
    margin-bottom: 1.25rem;
}

.pdSection .title h3 {
    color: var(--www-woodberrycoffee-com-lunar-green, var(--color-grey-22, #373a36));
    text-align: center;

    /* www.woodberrycoffee.com/Semantic/Heading 2 upper */
    font-family: 'Amiri';
    font-size: 1.75rem;
    font-style: normal;
    font-weight: var(--font-weight-400, 400);
    line-height: var(--line-height-39_2, 39.2px); /* 140% */
    letter-spacing: var(--letter-spacing-2_8, 2.8px);
    text-transform: uppercase;
}

.pdSection .imgBox {
    width: 100%;
    aspect-ratio: 1/ 1;
    text-align: center;

background: #FFF;
}

.pdSection .imgBox img {
    width: 100%;
   height: 100%;
   aspect-ratio: 1 / 1;

   object-fit: contain;
}

.pdSection .imgChangeBox img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    object-fit: cover; /* Ensures images cover the area without distortion */
    z-index: 0; /* Default z-index for all images */
    opacity: 0; /* Hidden by default */
    transition: opacity 0.3s ease-in-out; /* Smooth transition for opacity */
}
.pdSection .imgChangeBox img.active {
    z-index: 2; /* Z-index for the active image */
    opacity: 1; /* Make the active image visible */
}
.pdTitleDiv {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    min-height: 5rem;
}

.pdTitleDiv p {
    color: var(--www-woodberrycoffee-com-lunar-green, var(--color-grey-22, #373a36));
    text-align: center;

    /* www.woodberrycoffee.com/Semantic/Link upper */
    font-size: var(--font-size-17, 17px);
    font-style: normal;
    font-weight: var(--font-weight-400, 400);
    line-height: var(--line-height-20_4, 20.4px); /* 170% */
    letter-spacing: var(--letter-spacing-1_2, 1.2px);
    text-transform: uppercase;
    /* margin: 0.25rem 0; */
    margin-top: 20px;
}
.pdTitleDiv .buttonBox {
    margin-top: 1.75rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
}
.pdTitleDiv .buttonBox button {
    width: 1.5rem;
    height: 1.5rem;
    border: 0;
}

/*************************************/

.con01.section {
    padding: 0;
}

.con01 {
    display: flex;
    justify-content: end;
}

.con01 .bgGreen {
    border-radius: 999px 8px 8px 999px;
    border: 1px solid rgba(14, 97, 79, 0.4);
    /* background: linear-gradient(90deg, #105842 60%, #34a784 100%); */
    background-color: #105842;
    padding: 5rem;
    padding-left: 10rem;
}

.con01 .bgGreen .image img {
    border-radius: 999px 8px 8px 999px;
    padding-left: 5rem;
    width: 100%;
}
.con01 .bgGreen h4 {
    color: #fff;
    font-family: Amiri;
    font-size: 2.25rem;
    font-style: normal;
    font-weight: 700;
    line-height: 130%; /* 46.8px */
    letter-spacing: -0.18px;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
}
.con01 .bgGreen p {
    color: #fff;
    font-family: Pretendard;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%; /* 24px */
    letter-spacing: 0.16px;
    margin-bottom: 2.5rem;
}
.con01 .bgGreen button {
    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.1),
        0px 1px 8px 0px rgba(0, 0, 0, 0.1); */
    backdrop-filter: blur(6px);
    color: var(--Korumori_Pri-100, #edf7f5);
    font-family: Pretendard;
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: 100%; /* 16px */
    border: none;
    padding: 0.875rem 1.26rem;
    display: flex;
    align-items: center;
}

/**************************************/

.con03.section {
    padding: 0;
}

.con03 {
    display: flex;
    justify-content: end;
}

.con03 .bgBrown {
    border-radius: 8px 999px 999px 8px;
    border: 1px solid rgba(14, 97, 79, 0.4);
    /* background: linear-gradient(90deg, #ebcdb2 0%, #bd997a 40%); */
    background-color: #bd997a;
    padding: 5rem;
}

.con03 .bgBrown .image img {
    border-radius: 8px 999px 999px 8px;
    padding-right: 5rem;
    width: 100%;
}
.con03 .bgBrown h4 {
    color: #fff;
    font-family: Amiri;
    font-size: clamp(28px, 3.2vw, 36px);
    font-style: normal;
    font-weight: 700;
    line-height: 130%; /* 46.8px */
    letter-spacing: -0.18px;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
    text-align: end;
}
.con03 .bgBrown p {
    color: #fff;
    font-family: Pretendard;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%; /* 24px */
    letter-spacing: 0.16px;
    margin-bottom: 2.5rem;
    text-align: end;
}
.con03 .bgBrown a {
    display: flex;
    justify-content: end;
}
.con03 .bgBrown button {
    border-radius: 100px;
    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.1),
        0px 1px 8px 0px rgba(0, 0, 0, 0.1); */
    backdrop-filter: blur(6px);
    color: var(--Korumori_Pri-100, #edf7f5);
    font-family: Pretendard;
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: 100%; /* 16px */
    border: none;
    padding: 0.875rem 1.26rem;
    display: flex;
    align-items: center;
    justify-content: end;
}

/*****************************************************/

.about01 div {
    background-image: url(/img/about01.png);
}
.about02 div {
    background-image: url(/img/about02.png);
}
.about03 div {
    background-image: url(/img/about03.png);
    background-position: center center; /* ✅ 이미지의 중심이 기준 */
    background-size: cover; /* ✅ 좌우 꽉 차게, 비율 유지하면서 잘림 허용 */
    background-repeat: no-repeat;
}

.about div {
    min-height: 29.25rem;
    background-size: cover;
}
.about h1 {
    color: #fff;
    font-family: Amiri;
    font-size: 4.25rem;
    font-style: normal;
    font-weight: 700;
    line-height: 130%; /* 88.4px */
    letter-spacing: -0.34px;
    text-align: center;
    text-transform: uppercase;
}
.about h6 {
    color: #fff;
    font-family: Pretendard;
    font-size: 1.75rem;
    font-style: normal;
    font-weight: 600;
    line-height: 150%; /* 42px */
    letter-spacing: 0.28px;
    text-align: center;
}
.about p {
    color: #333;
    text-align: center;
    font-family: Pretendard;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 30px */
    letter-spacing: 0.2px;
    margin-top: 4.5rem;
    margin-bottom: 9rem;
}

/*****************************************************/

.con045 .bgDiv {
    background-image: url(/img/middleBanner.png);
    padding: 10rem 0;
    background-size: cover;
    background-position: center;
}
.con045 .bgDiv h4 {
    color: #fff;
    font-family: Amiri;
    font-size: 2.25rem;
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 36px */
    letter-spacing: -0.18px;
    text-transform: uppercase;
}
.con045 .bgDiv p {
    color: #fff;
    font-family: Pretendard;
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: 150%; /* 24px */
    letter-spacing: 0.16px;
}

/*****************************************************/

.con0475 .prod_inner > div {
    flex-shrink: 1;
}
.con0475 .prod_inner > div img {
    width: 100%;
}
.con0475 .prod_inner > div h5 {
    color: #333;
    font-family: Pretendard;
    font-size: 1.75rem;
    font-style: normal;
    font-weight: 600;
    line-height: 150%; /* 42px */
    letter-spacing: 0.14px;
    text-transform: capitalize;
    margin-bottom: 1.25rem;
}
.con0475 .prod_inner > div p {
    color: #333;
    font-family: Pretendard;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 24px */
    letter-spacing: 0.16px;
}
.con0475 .prod_inner > div p:first-child {
    margin-bottom: 1.5rem;
}

/*****************************************************/

.con075 .prod_inner > div {
    flex-shrink: 1;
}
.con075 .prod_inner > div img {
    width: 100%;
}
.con075 .prod_inner > div h5 {
    color: #333;
    font-family: Pretendard;
    font-size: 1.75rem;
    font-style: normal;
    font-weight: 600;
    line-height: 150%; /* 42px */
    letter-spacing: 0.14px;
    text-transform: capitalize;
    margin-bottom: 1.25rem;
}
.con075 .prod_inner > div p {
    color: #333;
    font-family: Pretendard;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 24px */
    letter-spacing: 0.16px;
}


/*****************************************************/
.con0775 .prod_inner > div {
    flex-shrink: 1;
}
.con0775 .prod_inner > div img {
    width: 100%;
}
.con0775 .prod_inner > div h5 {
    color: #333;
    font-family: Pretendard;
    font-size: 1.75rem;
    font-style: normal;
    font-weight: 600;
    line-height: 150%; /* 42px */
    letter-spacing: 0.14px;
    text-transform: capitalize;
    margin-bottom: 1.25rem;
}
.con0775 .prod_inner > div p {
    color: #333;
    font-family: Pretendard;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 24px */
    letter-spacing: 0.16px;
}


/*****************************************************/

.con09 {
    /*margin-top: 7.5rem;*/
    margin-top: 10rem;
}

.con09 .prod_inner > div {
    flex-shrink: 1;
}
.con09 .prod_inner > div img {
    width: 100%;
}
.con09 .prod_inner > div h5 {
    color: #333;
    font-family: Pretendard;
    font-size: 1.75rem;
    font-style: normal;
    font-weight: 600;
    line-height: 150%; /* 42px */
    letter-spacing: 0.14px;
    text-transform: capitalize;
    margin-bottom: 1.25rem;
}
.con09 .prod_inner > div p {
    color: #333;
    font-family: Pretendard;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 24px */
    letter-spacing: 0.16px;
}



/*****************************************************/


.sus01 div {
    background: url(/img/sus01_new.png) no-repeat center / cover;
}
.sus02 div {
    background: url(/img/sus02_new.png) no-repeat center / cover;
}
.sus03 div {
    background: url(/img/sus03_new.png) no-repeat center / cover;
}

.sus div {
    min-height: 29.25rem;
    background-size: cover;
}
.sus h1 {
    color: #fff;
    font-family: Amiri;
    font-size: 4.25rem;
    font-style: normal;
    font-weight: 700;
    line-height: 130%; /* 88.4px */
    letter-spacing: -0.34px;
    text-align: center;
    text-transform: uppercase;
}
.sus h6 {
    color: #fff;
    font-family: Pretendard;
    font-size: 1.75rem;
    font-style: normal;
    font-weight: 600;
    line-height: 150%; /* 42px */
    letter-spacing: 0.28px;
    text-align: center;
}
.sus p {
    color: #333;
    text-align: center;
    font-family: Pretendard;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 30px */
    letter-spacing: 0.2px;
    margin-top: 4.5rem;
    margin-bottom: 9rem;
}

/*****************************************************/

.location {
    max-width: 1400px;
    margin: 0 auto;
    margin-top: 7.5rem;
    margin-bottom: 7.5rem;
}

.location .title {
    margin-bottom: 2.5rem;
}
.location .title h3 {
    color: #333;
    text-align: center;
    font-family: Amiri;
    font-size: 2.25rem;
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 36px */
    letter-spacing: -0.18px;
    text-transform: capitalize;
    margin: 0.5rem 0;
}
.location .title h6 {
    color: #333;
    text-align: center;
    font-family: Pretendard;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 100%; /* 16px */
    letter-spacing: 0.16px;
    margin-bottom: 0;
}
.location .title p {
    color: #333;
    text-align: center;
    font-family: Pretendard;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 20.8px */
    letter-spacing: 0.32px;
    margin-bottom: 0;
}

.location h1 {
    color: #333;
    font-family: 'Crimson Text';
    font-size: 2.25rem;
    font-style: normal;
    font-weight: 600;
    line-height: 100%; /* 36px */
    letter-spacing: 0.18px;
    text-transform: capitalize;
    margin-bottom: 2.5rem;
}
.location h1 span {
    color: #333;
    font-family: Pretendard;
    font-size: 2.25rem;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: 0.18px;
}
.location .d-flex p {
    color: #333;
    font-family: Pretendard;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 24px */
    letter-spacing: 0.16px;
    margin-bottom: 1.25rem;
}
.location .d-flex a {
    color: #333;
    font-family: Pretendard;
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: 150%;
    letter-spacing: 0.16px;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
    margin-top: 1rem;
}

/***********************************************/
.dropdown ul {
    
}
/***********************************************/

.footer_copy {
    text-indent: -1.5rem;
}

@media all and (max-width:768px) {
    
.con03 .bgBrown h4 br,
.con0475 .prod_inner > div h5 br
 {
    display: none;
}

}