@charset "utf-8";

.sub-content {position: relative; padding: 10rem 0; overflow-x: hidden;}

/* 서브 타이틀 */
.subtitle {margin-bottom: 8rem;}
.subtitle small {display: block; margin-bottom: 1.5rem; color: var(--col-theme); font-size: 1.8rem; font-weight: 700;}
.sub-content h3 {font-size: 4.8rem; font-weight: 700;}
.sub-content h4 {font-size: 4.2rem; font-weight: 700;}

@media (max-width: 992px) {
    .sub-content h3 {font-size: 3.2rem;}
    .sub-content h4 {font-size: 3rem;}
}
@media (max-width: 768px) {
    .sub-content {padding-top: 5rem; padding-bottom: 10rem;}
}



/* ============================================================
/* 공통 */
/* ============================================================ */
/* 상단 타이틀 - 대표 인사말, 연혁 */
.top-area {display: flex; flex-direction: column; justify-content: center; height: 37rem; padding: 10rem; background-size: cover; background-position: center; background-repeat: no-repeat; color: #fff; overflow: hidden;}
.greeting .top-area h3 {font-weight: 300; line-height: 1.35;}

.greeting .top-area {background-image: url("../img/page/top01.png"); border-radius: 10rem 30rem 0 0;}
.history .top-area {background-image: url("../img/page/top02.png"); border-radius: 20rem 20rem 0 0; text-align: center;}

@media (max-width: 1200px) {
    .top-area {padding: 6rem 4rem;}
    .greeting .top-area {border-radius: 5rem 15rem 0 0;}
    .history .top-area {border-radius: 10rem 10rem 0 0;}
}
@media (max-width: 992px) {
    .top-area {height: 24rem; }
}
@media (max-width: 576px) {
    .greeting .top-area,
    .history .top-area {padding: 6rem 2rem; border-radius: 3rem 3rem 0 0;}
}


/* 하단 정보 - 회사 개요, 직영 소개 */
.btm-info dl {position: relative; display: flex; align-items: center; gap: 3rem; margin-top: 7rem; padding: 3rem 5.4rem; background: #fff; border-top: 2px solid var(--col-bk); border-bottom: 1px solid var(--col-bd-gray);}
.btm-info dl::before {content: ""; flex: 0 0 auto; display: block; width: 7.4rem; aspect-ratio: 1; background-color: var(--col-theme); background-position: center; background-size: auto; background-repeat: no-repeat; border-radius: 50%;}
.btm-info dt {font-size: 2.4rem; font-weight: 700;}
.btm-info dd {font-size: 2rem; font-weight: 300;}

.outline .btm-info dl::before {background-image: url("../img/map_wt.svg");}
.branch .btm-info dl::before {background-image: url("../img/mail_wt.svg");}

@media (max-width: 768px) {
    .btm-info dl {flex-direction: column; align-items: flex-start; gap: 1rem; padding: 3rem 2rem;}
    .btm-info dl::before {margin: 0 auto;}
}


/* 카드 3개 - F&B 컨셉 */
.img-list {display: flex; gap: 2rem; margin-bottom: 16rem; padding-bottom: 7.2rem;}
.img-list > li {flex: 1 0 0; display: flex; flex-direction: column; justify-content: flex-end; height: 50rem; padding: 4rem 5rem; background-position: center; background-size: cover; background-repeat: no-repeat; border-radius: 1rem; color: #fff; font-size: 3.2rem; font-weight: 700; overflow: hidden;}
.img-list > li p {margin-top: 2rem; font-size: 1.6rem; line-height: 1.65;}
.img-list > li:nth-child(2) {transform: translateY(3.6rem);}
.img-list > li:nth-child(3) {transform: translateY(7.2rem);}

.img-list.coffee > li:nth-child(1) {background-image: url("../img/page/coffee01.png");}
.img-list.coffee > li:nth-child(2) {background-image: url("../img/page/coffee02.png");}
.img-list.coffee > li:nth-child(3) {background-image: url("../img/page/coffee03.png");}

.img-list.bakery > li:nth-child(1) {background-image: url("../img/page/bakery01.png");}
.img-list.bakery > li:nth-child(2) {background-image: url("../img/page/bakery02.png");}
.img-list.bakery > li:nth-child(3) {background-image: url("../img/page/bakery03.png");}

.img-list.system > li:nth-child(1) {background-image: url("../img/page/system01.png");}
.img-list.system > li:nth-child(2) {background-image: url("../img/page/system02.png");}
.img-list.system > li:nth-child(3) {background-image: url("../img/page/system03.png");}

@media (max-width: 992px) {
    .img-list {margin-bottom: 14rem;}
    .img-list > li {height: 36rem; padding: 4rem 3rem; font-size: 2.6rem;}
}
@media (max-width: 768px) {
    .img-list {flex-direction: column; align-items: center; gap: 5rem; margin-bottom: 7rem;}
    .img-list > li {flex: 1 0 auto; width: 100%; height: 23rem;}
    .img-list > li:nth-child(2),
    .img-list > li:nth-child(3) {transform: translateY(0);}
}
@media (max-width: 576px) {
    .recipe .img-list > li {padding: 0;}
}



/* ============================================================
/* 회사 개요 */
/* ============================================================ */
.outline .subtitle h3 {max-width: 70rem;}
.company-banner {padding: 12rem 0; background: var(--col-theme); color: #fff;}
.company-banner .container {display: flex; justify-content: space-between; align-items: center; gap: 2rem;}
.company-banner p {max-width: 37rem; font-size: 2.4rem; line-height: 1.75;}
.company-banner .logo {width: 40rem; aspect-ratio: 398/119; background:url(../img/logo/com_logo.png) right center/contain no-repeat;}
@media (max-width: 992px) {
    .company-banner .logo {width: 20rem;}
}
@media (max-width: 768px) {
    .company-banner .container {flex-direction: column; gap: 5rem;}
}
@media (max-width: 576px) {
    .company-banner p {font-size: 2rem;}
}


.company-txt {padding: 3.6rem 0;}
.company-txt p {max-width: 96rem; font-size: 2rem; font-weight: 300; line-height: 1.75;}
.company-txt p + p {margin-top: 4rem;}

.location {padding: 6rem 0 7.2rem; background: #F9F9F9;}
.location h4 {margin-bottom: 4.2rem;}

.map-container {position: relative; width: 100%; padding-top: 36.25%; overflow: hidden;}
.map-container .root_daum_roughmap {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.map-container .root_daum_roughmap .wrap_map {height: 100%;}
@media (max-width: 768px) {
    .map-container {padding-top: 56.25%;}
}



/* ============================================================
/* 대표 인사말 */
/* ============================================================ */
.greeting-txt {padding: 4rem 4.2rem;}
.greeting-txt p {font-size: 2rem; line-height: 1.85;}
.greeting-txt p + p {margin-top: 4rem;}

.signature {margin-top: 10rem; text-align: right;}
.signature span {display: block; font-size: 2rem;}
.signature p {font-family: "Italianno", cursive; font-size: 8rem;}

@media (max-width: 992px) {
    .greeting-txt {padding: 3rem 2rem;}
}
@media (max-width: 576px) {
    .signature p {font-size: 6rem;}
}



/* ============================================================
/* 연혁 */
/* ============================================================ */
.history-list {margin-top: 5.2rem;}
.history-list ol {border-top: 2px solid var(--col-bk);}
.history-list ol > li {display: flex; align-items: center; gap: 13rem; padding: 5rem 10rem; border-bottom: 1px solid var(--col-bd-gray);}
.history-list ol > li:nth-child(odd) {background: #FAFAFA;}
.history-list .year {flex: 0 0 auto; color: var(--col-theme); font-size: 5.6rem; font-weight: 800;}
@media (max-width: 1200px) {
    .history-list ol > li {padding: 4rem 3rem;}
    .history-list .year {font-size: 3.6rem;}
}
@media (max-width: 992px) {
    .history-list ol > li {gap: 3rem;}
}
@media (max-width: 768px) {
    .history-list .year {font-size: 2.6rem;}
}
@media (max-width: 576px) {
    .history-list ol > li {flex-direction: column; align-items: flex-start; padding: 4rem 2rem;}
}



/* ============================================================
/* Chief Mate */
/* ============================================================ */
.card-item {display: flex; justify-content: center; gap: 2.6rem; margin-top: 17rem;}
.card-item > div {flex: 1 0 0; min-height: 84rem; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5.5rem; padding: 8.4rem 7.6rem; border-radius: 6rem; overflow: hidden;}
.card-item .left {transform: translateY(-10rem); background: url("../img/page/mate_bg.png") center/cover no-repeat;}
.card-item .right {justify-content: flex-start; align-items: flex-start; background: var(--col-theme); color: #fff;}

.card-item .logo {width: 100%; max-width: 76%; aspect-ratio: 570/100; background: url("../img/logo/horiz_wt.png") center/contain no-repeat;}
.card-item h4 {max-width: 33rem;}
.card-item p {font-size: 2rem; font-weight: 500; line-height: 1.75;}
.card-item p + p {margin-top: 4rem;}

@media (max-width: 1200px) {
    .card-item > div {min-height: auto; padding: 8.4rem 4.6rem;}
}
@media (max-width: 992px) {
    .card-item {flex-direction: column; margin-top: 7.2rem;}
    .card-item > div {flex: auto; padding: 6rem 4rem; border-radius: 3rem;}
    .card-item .left {transform: translateY(0);}
    .card-item .logo {max-width: 45%;}
}
@media (max-width: 768px) {
    .card-item .logo {max-width: 76%;}
}


.shop-item {margin-top: 18rem;}
.shop-item h3 {text-align: center;}
.shop-item ul {display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 7.2rem;}
.shop-item ul li {flex: 0 0 auto; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; width: calc(33.33% - 1rem); aspect-ratio: 507/456; padding: 4.4rem; background-size: cover; background-position: center; background-repeat: no-repeat; border-radius: 3rem; color: #fff; font-size: 4.2rem; font-weight: 600; overflow: hidden;}
.shop-item ul li:nth-child(1) {background-image: url("../img/page/shop01.png");}
.shop-item ul li:nth-child(2) {background-image: url("../img/page/shop02.png");}
.shop-item ul li:nth-child(3) {background-image: url("../img/page/shop03.png");}
.shop-item ul li:nth-child(4) {background-image: url("../img/page/shop04.png");}
.shop-item ul li:nth-child(5) {background-image: url("../img/page/shop05.png");}
.shop-item ul li:nth-child(6) {background-image: url("../img/page/shop06.png");}
@media (max-width: 1200px) {
    .shop-item ul li {font-size: 2.7rem;}
}
@media (max-width: 992px) {
    .shop-item ul li {padding: 2.6rem;}
}
@media (max-width: 768px) {
    .shop-item ul li {width: calc(50% - 0.5rem);}
}
@media (max-width: 576px) {
    .shop-item ul li {width: 100%;}
}


.farm-banner {display: flex; flex-direction: column; justify-content: flex-end; height: 56rem; margin-top: 18rem; padding: 7.2rem 0; background: url("../img/page/farm_bg.png") center/cover no-repeat; color: #fff;}
.farm-banner h4 {position: relative; margin-bottom: 2rem; z-index: 1;}
.farm-banner h4::before {content: "Symbiosis"; position: absolute; bottom: -2rem; left: 0; color: rgba(255,255,255,0.2); font-size: 380%; z-index: -1;}
.farm-banner p {font-size: 2.2rem; line-height: 1.75;}
@media (max-width: 768px) {
    .farm-banner {height: 46rem;}
    .farm-banner h4::before {bottom: 1rem; font-size: 230%;}
    .farm-banner p {font-size: 1.6rem;}
}


.farm-txt {padding: 10rem 0 7.4rem; text-align: center;}
.farm-txt h4 {font-weight: 400;}
.farm-txt p {color: #555; max-width: 89rem; margin: 3.8rem auto 0; font-size: 2rem; line-height: 1.65;}
@media (max-width: 992px) {
    .farm-txt p {font-size: 1.6rem;}
}


.farm-list {padding: 9rem 0; background: #F2F5F4;}
.farm-list ol {display: flex; gap: 2rem; counter-reset: number 0;}
.farm-list ol li {flex: 1 0 auto; position: relative; display: flex; justify-content: center; align-items: center; text-align: center; width: calc(25% - 2rem); aspect-ratio: 370/221; padding: 0 5rem; border-radius: 5em 0 0 0; background: var(--col-theme); color: #fff; font-size: 2.6rem; font-weight: 500;}
.farm-list ol li::before {counter-increment: number 1; content: counter(number); position: absolute; top: 0; left: 0; color: var(--col-theme); font-size: 2rem; font-weight: 600;}
@media (max-width: 1200px) {
    .farm-list ol li {font-size: 2rem;}
}
@media (max-width: 992px) {
    .farm-list ol {flex-wrap: wrap;}
    .farm-list ol li {width: calc(50% - 2rem); aspect-ratio: auto; padding: 7rem 2rem;}
}
@media (max-width: 576px) {
    .farm-list ol li {width: 100%;}
}



/* ============================================================
/* CI */
/* ============================================================ */
.ci-container h3 {margin-bottom: 3rem;}

.ci-container .txt p {font-size: 2.4rem; font-weight: 300; line-height: 1.65;}
.ci-container .txt p + p {margin-top: 4rem;}

.ci-container ol {counter-reset: number 0; display: flex; gap: 2rem; margin-top: 6rem;}
.ci-container ol li {flex: 1 0 0; position: relative; height: 34rem; padding: 2.8rem 3rem; border: 1px solid var(--col-bd-gray); background-position: center; background-repeat: no-repeat;}
.ci-container ol li::before {counter-increment: number 1; content: counter(number); position: absolute; top: 2.8rem; left: 3rem; font-size: 1.8rem;}
.ci-container ol li:nth-child(1) {background-size: 17rem; background-image: url("../img/page/ci_item_01.png");}
.ci-container ol li:nth-child(2) {background-size: 20rem; background-image: url("../img/page/ci_item_02.png");}
.ci-container ol li:nth-child(3) {background-size: 14rem; background-image: url("../img/logo/verti_bk.png");}

.ci-container .color-box {height: 18rem; margin-top: 3.2rem; padding: 5.4rem 6.4rem; background: var(--col-theme); color: #fff; font-size: 2rem; font-weight: 300;}
.ci-container .color-box b {display: block; margin-bottom: 1rem; font-size: 160%;}

@media (max-width: 992px) {
    .ci-container .txt p {font-size: 1.8rem;}
    .ci-container ol li {height: 28rem;}
    .ci-container .color-box {height: auto; padding: 4.8rem 4.5rem; font-size: 1.6rem;}
}
@media (max-width: 768px) {
    .ci-container ol {flex-direction: column;}
    .ci-container ol li {flex: 1 0 auto;}
}



/* ============================================================
/* 직영 소개 */
/* ============================================================ */
.branch h4 {text-align: center; font-weight: 400;}
.branch p {max-width: 114rem; margin: 3.2rem auto 0; text-align: center; font-size: 2rem; line-height: 1.5;}
.branch ul {display: flex; flex-wrap: wrap; gap: 8rem 2rem; margin-top: 5.5rem;}
.branch ul li {width: calc(33.33% - 1.4rem); font-size: 2.4rem; font-weight: 700;}
.branch ul li small {display: block; margin-bottom: 0.8rem; color: #888; font-size: 1.6rem; font-weight: 300;}

.branch ul li .img {width: 100%; aspect-ratio: 500/290; margin-bottom: 1.2rem; background-size: cover; background-position: center; background-repeat: no-repeat;}
.branch ul li:nth-child(1) .img {background-image: url("../img/page/branch01.png");}
.branch ul li:nth-child(2) .img {background-image: url("../img/page/branch02.png");}
.branch ul li:nth-child(3) .img {background-image: url("../img/page/branch03.png");}
.branch ul li:nth-child(4) .img {background-image: url("../img/page/branch04.png");}
.branch ul li:nth-child(5) .img {background-image: url("../img/page/branch05.png");}
.branch ul li:nth-child(6) .img {background-image: url("../img/page/branch06.png");}
@media (max-width: 768px) {
    .branch ul li {width: calc(50% - 1rem);}
}
@media (max-width: 576px) {
    .branch ul li {width: 100%;}
}



/* ============================================================
/* F&B 컨셉 */
/* ============================================================ */
.concept h4 {max-width: 78rem; margin: 0 auto; text-align: center; font-weight: 400;}
.concept p {margin-top: 4rem; text-align: center; font-size: 2rem; line-height: 1.5;}

.circle-wrap {max-width: 1176px; margin: 6rem auto;}

@media (max-width: 992px) {
    .circle-wrap {margin: 4rem auto;}
}
@media (max-width: 768px) {
    .circle-wrap {position: relative; height: 354px;}
    .circle-wrap img {position: absolute; left: 50%; transform: translateX(-50%); max-width: 620px;}
}



/* ============================================================
/* F&B 음료 레시피 */
/* ============================================================ */
.recipe {background: url("../img/page/recipe_bg.png") center calc(100% - 11rem)/100% auto no-repeat;}
.brand-banner {display: flex; margin-bottom: 7.4rem;}
@media (max-width: 576px) {
    .brand-banner {flex-direction: column;}
}

.recipe h4 {max-width: 78rem; margin: 0 auto; text-align: center; font-weight: 400;}
.recipe p {max-width: 60rem; margin: 4rem auto 0; text-align: center; font-size: 2rem; line-height: 1.5;}
.recipe .img-list > li {height: auto;}
@media (max-width: 768px) {
    .recipe .img-list > li {max-width: 625px;}
}

.roast-list {display: flex; gap: 2.3rem; margin-top: 10rem; padding-bottom: 30rem;}
.roast-list > li {flex: 0 0 auto; width: calc(33.33% - 1.5rem); padding: 6rem 0 8.5rem; border-radius: 2rem; color: #fff; text-align: center; font-size: 1.6rem; overflow: hidden;}
.roast-list .dark {background-color: #1E3932;}
.roast-list .light {background-color: #473429;}
.roast-list > li h6 {margin-top: 2.4rem; padding: 0 1rem; font-size: 200%; font-weight: 700;}
.roast-list > li div {margin: 3rem 0 4.2rem; padding: 2.4rem 0; background: #fff; font-size: 130%; font-weight: 700;}
.roast-list .dark div {color: #1E3932;}
.roast-list .light div {color: #473429;}
.roast-list > li > p {padding: 0 2rem; font-size: inherit;}

@media (max-width: 1200px) {
    .roast-list > li {width: calc(50% - 1.5rem);}
}
@media (max-width: 768px) {
    .roast-list > li h6 {font-size: 150%;}
}
@media (max-width: 576px) {
    .roast-list {flex-direction: column; padding-bottom: 0;}
    .roast-list > li {width: 100%;}
}



/* ============================================================
/* 관리 시스템 */
/* ============================================================ */
.system .title h4 {max-width: 90rem; margin: 0 auto; text-align: center; font-weight: 400;}
.system .title p {max-width: 90rem; margin: 4rem auto 0; text-align: center; font-size: 2rem; line-height: 1.5;}
.system ul {margin-top: 8.6rem;}