/* BASIC css start */
:root {
    --cw-mont-bg01:#F8F5EF;
    --cw-mont-bg02:#FEFEFD;
    --cw-mont-color01:#B89A63;
    --cw-mont-color02:#D9D0C3;
    --cw-mont-color03:#836329;
    --cw-mont-bk:#2F2A28;
}

#container {font-family:Pretendard;  margin: 0 auto; font-weight:300; color:var(--cw-mont-bk);}
.font-serif {font-family:Noto serif CJK KR;}
.font-JP {font-family:Noto Serif CJK JP;}
.inner {width: 1100px; margin:0 auto;}
#container section {padding:80px 0;}
/* 헤드 타이틀(공통) */
.inner .head {display: flex; align-items: flex-end; justify-content: space-between; padding-bottom: 30px;}
.inner .head .head-left .sub {color: var(--cw-mont-color03); letter-spacing: 0.2em; font-size: 14px;}
.inner .head .head-left .title {font-size: 26px; font-weight: 500;}
.inner .head .head-right {}
.inner .head .head-right button {border: none; background: var(--cw-mont-color02); color: var(--cw-mont-color01); width: 32px; height: 32px; border-radius: 50px;}

.hero {padding:0 !important; text-align: center; background-color: #f1e8e1;}
.hero .inner {padding: 90px 0 0 0; position: relative;}
.hero .inner .hero_txt {position: absolute; width: 40%; left: 50%; transform: translateX(-50%);}
.hero .inner .hero_bg { width:100%;}



.tab-wrap {height: 70px; display: flex; width: 100vw; margin-left: calc(50% - 50vw); margin-bottom: 80px;}
.tab-wrap .inner {display: flex;}
.tab-wrap .inner .tab {background: var(--cw-mont-bg01); border: none; flex:1; display: flex; flex-direction: column; justify-content: center;}
.tab-wrap .inner .tab .JP {font-size:18px; font-weight:500;}
.tab-wrap .inner .tab .KR {font-size:13px;}
.tab-wrap .inner .tab.active {background: var(--cw-mont-color02);}

.feature {background: var(--cw-mont-bg01); padding-top:0 !important;}
.feature .inner .menu.active {display: grid;}
.feature .inner .menu {display: none; grid-template-columns: 45% 50%; gap:5%;}
.feature .inner .menu .img-wrap {position:relative;}
.feature .inner .menu .img-wrap img {}
.feature .inner .menu .content-wrap .cont-title .title-main span {font-size:55px; margin-right:5px;}
.feature .inner .menu .content-wrap .cont-title .title-main {font-size:18px;}
.feature .inner .menu .content-wrap .cont-title .title-sub {font-size:20px;} 
.feature .inner .menu .content-wrap .cont-desc {color: #8a8275; padding: 20px 0; line-height: 26px;}
.feature .inner .menu .content-wrap .cont-point span {font-size:14px; background: var(--cw-mont-color02); color: var(--cw-mont-color03); padding: 5px; border-radius: 50px; margin-right: 7px;}
.feature .inner .menu .content-wrap .cont-taste {padding:40px 0 20px 0;}
.feature .inner .menu .content-wrap .cont-taste ul {display: flex; flex-direction: column; padding:10px 0;}
.feature .inner .menu .content-wrap .cont-taste li {display:flex; gap:30px; padding:5px 0;}
.feature .inner .menu .content-wrap .cont-taste .label {width:80px; text-align-last: justify;}
.feature .inner .menu .content-wrap .cont-taste .dat {width:160px; text-align-last: justify; color:var(--cw-mont-color03);}
.feature .inner .menu .content-wrap .btn-primary {background: var(--cw-mont-bk); color: #fff; border: none; font-size: 18px; padding: 10px 50px; display: block; text-align: center;}
.feature .track-slider {display: flex; overflow:hidden; border-radius: 10px; }
.feature .track-slider .card-slide {width:100%; position: relative; overflow: hidden; flex:none;}
.feature .track-slider .recipe-thum {width:100%; aspect-ratio: 1;}
.feature .track-slider .recipe-thum img {width:100%; height: 100%; object-fit: cover;}
.feature .head-right {position: absolute; width: 100%; height: auto; z-index: 99; top: calc(50% - 32px);}
.feature .head-right button {position:absolute; border: none; background: #ffffff75; color: var(--cw-mont-color01); width: 32px; height: 32px; border-radius: 50px;}
.feature .head-right .prev {left:10px;}
.feature .head-right .next {right:10px;}


.recipe {background: var(--cw-mont-bg02);}
.recipe .track-slider {display: flex; gap: 14px; counter-reset: recipe; overflow:hidden;}
.recipe .track-slider .card-slide {width:calc(20% - 12px); counter-increment: recipe; position: relative; border-radius: 10px; overflow: hidden; flex:none;}
.recipe .track-slider .card-slide::before { content: counter(recipe, decimal-leading-zero); position: absolute; top: 5px; left: 5px; width: 27px; height: 27px; border-radius: 50%; display: flex; justify-content: center; align-items: center; background: var(--cw-mont-color02); font-weight: 400; font-size:12px;}
.recipe .track-slider .recipe-thum {width:100%; aspect-ratio: 1;}
.recipe .track-slider .recipe-thum img {width:100%; height: 100%; object-fit: cover;}
.recipe .track-slider .recipe-text {background: var(--cw-mont-bg01); padding: 16px;}
.recipe .track-slider .recipe-text .title {font-weight: 500; margin-bottom: 4px;}
.recipe .track-slider .recipe-text .desc {font-size: 14px; color: #8a8275; margin-bottom: 9px;}
.recipe .track-slider .recipe-text .mate span {font-size:12px; background: var(--cw-mont-color02); color: var(--cw-mont-color03); padding: 3px 9px; border-radius: 100px;}

.tip {background: var(--cw-mont-bg01);}
.tip .track-slider {display: flex; gap: 60px; overflow:hidden;}
.tip .track-slider .card-slide {width:calc(100% / 6 - 50px); position: relative; border-radius: 10px; overflow: hidden; flex:none;}
.tip .track-slider .tip-thum {width:100%; aspect-ratio: 1; border-radius: 999px; overflow: hidden; background: var(--cw-mont-bg02); border: 1px solid #eee; display:flex; justify-content:center; align-items:center;}
.tip .track-slider .tip-thum img {width:80%; height: 80%; object-fit: cover;}
.tip .track-slider .tip-text {}
.tip .track-slider .tip-text .title {font-weight: 500; margin-top: 14px; text-align: center;}

.spec {background:var(--cw-mont-bg02);}
.spec .spec-tap {display: flex; background: var(--cw-mont-color02); width: fit-content; padding: 3px; border-radius: 10px; font-size: 14px;}
.spec .spec-tap button {background: no-repeat; border: none; font-weight: 300; color: var(--cw-mont-color03); padding: 0 13px;}
.spec .spec-tap .tab.active {background: var(--cw-mont-color03); color: #fff; border-radius: 10px;}
.spec .spec-table {margin:20px 0; border: 1px solid var(--cw-mont-color02); border-radius: 10px;}
.spec .spec-table .menu {display:none;}
.spec .spec-table .menu.active {display:block;}
.spec .spec-table table {width:100%;}
.spec .spec-table tbody {}
.spec .spec-table tr {border-bottom: 1px solid var(--cw-mont-color02);}
.spec .spec-table tr:last-child {border:none;}
.spec .spec-table table tr:nth-child(even) {background:var(--cw-mont-bg01);}
.spec .spec-table td {padding:10px 10px;}
.spec .spec-table tr td:first-child {width: 120px; color: #8a8070; font-size: 12px; padding-left:30px;}

.rcmd {background: var(--cw-mont-bg01);}
.rcmd .track-slider {display: flex; gap: 10px; overflow:hidden;}
.rcmd .track-slider .card-slide {width:calc((100% / 6) - (50px / 6)); position: relative; border-radius: 10px; overflow: hidden; flex:none; border: 1px solid var(--cw-mont-color02)
;}
.rcmd .track-slider .rcmd-thum {width:100%; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--cw-mont-bg02); gap: 10px;}
.rcmd .track-slider .rcmd-thum img {width:60%; height: 60%; object-fit: cover;}
.rcmd .track-slider .rcmd-text {background: var(--cw-mont-color02); padding: 8px; text-align:center; border-top: 1px solid var(--cw-mont-color02);}
.rcmd .track-slider .rcmd-text .title {color:#fff; margin-bottom: 4px;}

.cta {background: var(--cw-mont-bk); color: #fff; padding:40px 0 !important;}
.cta .inner {display:flex; justify-content:space-between; align-items:center; gap:50px;}
.cta .inner .benefitList {display:flex; gap:2%; width:80%;}
.cta .inner .benefitItem {display:flex; align-items:center; gap:4px; width:32%;}
.cta .inner .benefitItem .icon {width:30%;}
.cta .inner .benefitItem .icon img {width:100%;}
.cta .inner .benefitItem .text {width:80%;}
.cta .inner .benefitItem .text p {font-size:14px;}
.cta .inner .benefitBtn {width:20%; background: #c5a75f; padding: 13px 0px;}
.cta .inner .benefitBtn a {display:flex; align-items:center; justify-content:center;}
.cta .notice {width:1100px; margin:24px auto 0; color:#999; border-top: 1px solid #999; padding: 50px 10px 20px 10px;}
.cta .notice li {font-size:13px;}

@media (max-width: 767.98px) {
    .inner {width:100%; padding:0 15px;}
    .feature .inner .menu.active {display:block;}
    .recipe .track-slider .card-slide {width:60%;}
    .tip .track-slider {gap:20px;}
    .tip .track-slider .card-slide {width:25%;}
    .rcmd .track-slider .card-slide {width:30%;}
    .cta .inner {display:block;}
    .cta .inner .benefitList {display:block; width:100%;}
    .cta .inner .benefitItem {width:100%; margin-bottom:12px;}
    .cta .inner .benefitItem .icon {width:15%;}
    .cta .inner .benefitBtn {width:100%; margin-top:20px;}
    .cta .notice {width:100%;}
}
/* BASIC css end */