body {font-family:PretendardR;}

.pageOutWrap {overflow:hidden;}

.contentWrap {width:100%; max-width:1200px; margin:0 auto;}

main {width:100%; max-width:1920px; margin:0 auto;}

button {
    appearance: none;
    -webkit-appearance: none;

    border: none;
    background: none;
    padding: 0;
    margin: 0;

    font: inherit;
    color: inherit;

    cursor: pointer;
}

/*
    ************************************** 헤더 ***************************************
*/
header {height:100px; background-color:#7b0412;}
header .contentWrap {display:flex; justify-content:space-between; align-items:center; height:100%;}

header .logo {font-size:0;}

header nav {display:flex; align-items:center; font-size:22px; color:#ffffff;}
header nav a {color:#ffffff !important;}
header nav .divider {width:2px; height:13px; background-color:rgba(255,255,255,0.7); margin:0 40px;}

header nav .btnTel {display:flex; align-items:center; gap:14px; padding:8px 20px; border-radius:30px; border:solid 1px #ffffff; margin-left:45px;}

header .btnShowMMenu {display:none;}

header nav#mobileMenu {display:none;}

/*
    ************************************* 메인 비주얼 ***************************************
*/
.mainVisual {height:700px; background-image:url("../images/mainVisual.jpg"); background-size:cover; background-position:center;}
.mainVisual .contentWrap {display: flex; justify-content: space-between; align-items: center; height:100%;}

.mainVisual .visualContent {display: flex; justify-content:space-between; align-items:flex-end; width:100%;}
.mainVisual .visualText h1 {font-size:60px; color:#ffffff; font-family:"NotoSerifSB"; font-weight:normal;}

.mainVisual .visualText h1 .strongText {display:block; font-family:"NotoSerifSB"; background: linear-gradient(to right, #edbc96 0%, #fcefe1 52%, #edbc96 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.mainVisual .visualText h1 .subText{display: block; font-size: 30px; line-height: 50px; margin-top: 50px;}

.mainVisual .visualText .buttonWrap {display: flex; align-items: center; margin-top:50px;}
.mainVisual .visualText .buttonWrap .cl_baseButton{width: 330px;}

/*
    ************************************* 베스트 ***************************************
*/
.best {padding:110px 0; background-color:#fbf6ed;}
.best .textRed{color: #7b0412 !important;}
.best .buttonWrap{display: flex; justify-content: center;gap: 5px; margin-bottom: 60px;}
.best .buttonWrap .cl_baseButton.tab{background-color: #ffffff; color: #7b0412 !important; cursor: pointer;}
.best .buttonWrap .cl_baseButton.tab.on{background-color: #7b0412; color: #ffffff !important;}
.best .bestList {
    display:none;
    justify-content: center;
    grid-template-columns: repeat(3, 330px);
    gap:30px;
    margin-bottom: 65px;
}
.best .bestList.on{display: grid;}
.best .bestList .item {
    position: relative;
    border-radius: 26px;
    display: flex;
    flex-direction: column;
    padding: 15px;
    background: #FFFFFF;
    border: 1px solid #ede6d9;
    box-sizing: border-box;
    box-shadow: 3px 0px 10px -10px #00000080;
}
.best .bestList .item .icon{position: absolute; top: 5px; left: 3px;}
.best .bestList .item .thumb {display:block; width:100%;}
.best .bestList .item .textWrap{padding: 15px 0px 20px 0px; border-bottom: 2px solid #953641; text-align: center;}
.best .bestList .item .textWrap .mainText{font-family: "NotoSerifB"; font-size: 32px; line-height: 36px; margin-bottom: 18px;}
.best .bestList .item .textWrap .subText{font-family: "PretendardR"; font-size: 17px; line-height: 23px;}
.best .bestList .item .textWrap .subText .bold{font-family: "PretendardB";}
.best .bestList .item .infoWrap{display: flex; justify-content: space-between; padding: 15px 0px 0px 5px;}
.best .bestList .item .infoWrap .originPrice{
    font-family: "NotoSerifM";
    font-size: 18px;
    line-height: 24px;
    color: #a6a6a6;
    text-decoration-line: line-through;
    margin-bottom: 10px;
    white-space: nowrap;
}
.best .bestList .item .infoWrap .salePrice{font-family: "NotoSerifB"; font-size: 30px; line-height: 38px; color: #191919; white-space: nowrap;}
.best .bestList .item .infoWrap .badgeWrap{display: flex; gap: 5px; margin-bottom: 15px;}
.best .bestList .item .infoWrap .badgeWrap .badge{
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "NotoSansR";
    font-size: 16px;
    color: #FFFFFF;
    width: 60px;
    height: 22px;
    text-align: center;
    align-content: center;
}
.best .bestList .item .infoWrap .badgeWrap .badge.bgbeige{background: #fff8e0;}
.best .bestList .item .infoWrap .badgeWrap .badge.bgbeige2{background: #f5dbc0;}
.best .bestList .item .infoWrap .badgeWrap .badge.bgGreen{background: #01af4e;}
.best .bestList .item .infoWrap .badgeWrap .badge.bgBlack{background: #191919;}
.best .bestList .item .infoWrap .badgeWrap .badge.bgBlue{background: #3f99e3;}
.best .bestList .item .infoWrap .badgeWrap .badge.bgPink{background: #ffe5e7;}
.best .bestList .item .infoWrap .gram{
    font-family: "NotoSerifM";
    font-size: 24px;
    line-height: 38px;
    color: #191919;
    text-align: right;
}

.best .bestList .item .boxWrap{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-bottom: 20px;
}
.best .bestList .item .boxWrap .box{
    font-family: "PrentendardR";
    font-size: 16px;
    line-height: 18px;
    text-align: center;
    align-content: center;
    border-radius: 6px;
    border: 1px solid #7b0412;
    box-sizing: border-box;
    width: calc(100% / 4);
    height: 45px;
}
.best .bestList .item .textWrap .descText{font-family: "PretendardB"; font-size: 17px;}

.best .buttonWrap .btnLink.cl_baseButton{width: 380px;}


/*
    ************************************* 왜 남다르게 맛있을까요? ***************************************
*/
.whyDelicious {padding:110px 0; background-color:#6a030e;}
.whyDelicious .cl_sectionTitle .descText{color: #FFFFFF;}
.whyDelicious .cl_sectionTitle .subText {color:#ffffff; letter-spacing: 15px; margin-right:-15px;}
.whyDelicious .cl_sectionTitle .mainText {color:#ffffff; margin-top: 30px;}

.whyDelicious .whyDeliciousListWrap{width: 100%; border-radius: 26px; background: #FFFFFF; overflow: hidden;}
.whyDelicious .whyDeliciousListWrap .whyDeliciousListTitle{
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "NotoSerifB";
    font-size: 24px;
    color: #FFFFFF;
    text-align: center;
    background: #191919;
    padding: 20px 0px;
    box-sizing: border-box;
    height: 60px;
}

.whyDelicious .whyDeliciousList {display: flex; justify-content: center; padding: 30px 0px;}
.whyDelicious .whyDeliciousList .item {
    display:flex;
    flex-direction: column;
    align-items: center;
    padding: 0px 20px;
    border-right: 2px solid #dddddd;
}
.whyDelicious .whyDeliciousList .item:last-child{border-right: none;}
.whyDelicious .whyDeliciousList .item .subText{
    font-family: "NotoSerifSB";
    font-size: 16px;
    line-height: 32px;
    color: #191919;
    margin-bottom: 20px;
}
.whyDelicious .whyDeliciousList .item .icon{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    height: 80px;
}
.whyDelicious .whyDeliciousList .item .textWrap {display:flex; flex-direction:column; align-items: center; text-align: center;}
.whyDelicious .whyDeliciousList .item .textWrap .title {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "PretendardB";
    font-size:22px;
    color:#7b0412;
    width: 120px;
    height: 27px;
    background: #fff5e1;
    margin-bottom: 15px;
    white-space: nowrap;
}
.whyDelicious .whyDeliciousList .item .textWrap .desc {
    font-family: "PretendardR";
    font-size:18px;
    line-height: 22px;
    color:#191919;
    white-space: nowrap;
}

/*
    ************************************* CheckPoint01 ***************************************
*/
section .cl_sectionTitle .subText {font-size: 40px; color: #191919; margin-bottom: 30px;}
section .cl_sectionTitle .mainText {font-size: 55px; line-height: 1;}
section .bold{font-family: "PretendardB";}

.checkPoint01 {padding:110px 0; background-color: #fbf6ed;}

.checkPoint01 .comparisonWrap{display: flex; flex-direction: column; align-items: center;}
.checkPoint01 .comparisonWrap .comparisonTop{
    font-family: "NotoSansR";
    font-size: 26px;
    line-height: 39px;
    color: #191919;
    text-align: center;
    margin-bottom: 35px;
}
.checkPoint01 .comparisonWrap .comparisonBottom{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.checkPoint01 .comparisonWrap .comparisonBottom .item{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-family: "NotoSansM";
    font-size: 26px;
    color: #191919;
    text-align: center;
    background-color: #ffffff;
    border: 1px solid #ede6d9;
    padding: 10px;
    height: 315px;
    box-sizing: border-box;
    box-shadow: 3px 0px 10px -10px #00000080;
}
.checkPoint01 .comparisonWrap .comparisonBottom .item:before{
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 50px;
    top: -50px;
    background-color: #7d7b76;
}
.checkPoint01 .comparisonWrap .comparisonBottom .item:after{
    content: "";
    position: absolute;
    width: 140px;
    height: 2px;
    top: -50px;
    background-color: #7d7b76;
}
.checkPoint01 .comparisonWrap .comparisonBottom .item:first-child:after{left: 50%;}
.checkPoint01 .comparisonWrap .comparisonBottom .item:last-child:after{right: 50%;}
.checkPoint01 .comparisonWrap .comparisonBottom .item.bgRed{
    font-family: "NotoSansM";
    font-size: 32px;
    color: #ffffff;
    background-color: #7b0412;
    border: 1px solid #7b0412;
}
.checkPoint01 .comparisonWrap .comparisonBottom .item .title{height: 50px;align-content: center;}

.checkPoint01 .fieldListBox {display:flex; align-items: flex-start; padding:45px 0; border-radius:20px; box-shadow: 3px 3px 18px rgba(0,0,0,0.08); background-color:#ffffff;}
.checkPoint01 .fieldListBox .item {position:relative; flex:1; text-align: center;}
.checkPoint01 .fieldListBox .item:after {content:""; position:absolute; top:20px; right:0; width:1px; height:290px; background-color:#f6f3ec;}
.checkPoint01 .fieldListBox .item:last-child:after {display:none;}
.checkPoint01 .fieldListBox .item .icon {font-size:0; margin-bottom:20px;}
.checkPoint01 .fieldListBox .item .title {font-size:24px; color:#282828; font-family:PretendardB; margin-bottom:25px;}
.checkPoint01 .fieldListBox .item .desc {font-size:17px; color:#282828; font-family:PretendardR;}



.checkPoint01 .fieldListWrap_m {display:none; grid-template-columns: repeat(4, 1fr); grid-auto-rows: auto; gap:8px 5px;}
.checkPoint01 .fieldListWrap_m .item {text-align:center; padding:15px 5px; box-sizing: border-box; border-radius:20px; box-shadow: 0 0 18px rgba(0,0,0,0.08); background-color:#ffffff;}
.checkPoint01 .fieldListWrap_m .item .icon {font-size:0; text-align:center; margin-bottom:10px;}
.checkPoint01 .fieldListWrap_m .item .icon img {width:80%;}
.checkPoint01 .fieldListWrap_m .item .title {font-size:12px; color:#282828; font-family:PretendardB;}



/*
    ************************************* CheckPoint02 ***************************************
*/
.checkPoint02 {padding:110px 0; background: url("../images/checkPoint02_bg.png") no-repeat center; background-size: cover}
.checkPoint02 .imgWrap img{display: block;margin: 0 auto;}

/*
    ************************************* CheckPoint03 ***************************************
*/
.checkPoint03 {padding:110px 0; background-color: #fbf6ed}
.checkPoint03 .imgWrap img{display: block;margin: 0 auto;}

/*
    ************************************* CheckPoint03 ***************************************
*/
.checkPoint04 {padding:110px 0; background: url("../images/checkPoint04_bg.png") no-repeat center; background-size: cover}

.checkPoint04 .processWrap{display: flex; align-items: flex-start; justify-content: center; gap: 10px;}
.checkPoint04 .processWrap>div{display: flex; flex-direction: column; align-items: center; position: relative;}
.checkPoint04 .processWrap .icon{display: flex;}
.checkPoint04 .processWrap .box{
    font-family: "PretendardR";
    font-size: 26px;
    color: #191919;
    text-align: center;
    align-content: center;
    width: 225px;
    height: 65px;
    background-color: #FFFFFF;
    border: 1px solid #876f5b;
    border-radius: 11px;
    box-sizing: border-box;
    margin-top: 3px;
    margin-bottom: 4px;
}
.checkPoint04 .processWrap .rightWrap .box.title{background-color: #7b0412;}
.checkPoint04 .processWrap .rightWrap .box{border: 1px solid #7b0412;}
.checkPoint04 .processWrap .rightWrap .box.tallSize{font-family: "PretendardB"; font-size: 26px; color: #7b0412; height: 300px;}
.checkPoint04 .processWrap .rightWrap .box:last-child{color: #ffffff; background-color: #7b0412;}
.checkPoint04 .processWrap .box:first-child{margin-top: 0px;}
.checkPoint04 .processWrap .box:last-child{margin-bottom: 0px;}
.checkPoint04 .processWrap .box.title{font-family: "PretendardB"; font-size: 30px; color: #FFFFFF; background-color: #876f5b;}
.checkPoint04 .processWrap .text{
    font-family: "NanumMjB";
    font-style: oblique;
    font-size: 41px;
    white-space: nowrap;
    top: 310px;
    flex-direction: row;
    height: 100%;
    margin-right: 10px;
}
.checkPoint04 .processWrap .text .largeSize{font-size: 50px;}
.checkPoint04 .processWrap .circle{
    position: absolute;
    top: 370px;
    left: -80px;
    font-family: "NanumMjB";
    font-size: 28px;
    color: #ffffff;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-style: italic;
    background-color: #876f5b;
    width: 100px;
    height: 100px;
    border-radius: 100px;
    z-index: 2;
}
.checkPoint04 .processWrap .circle:before{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #876f5b;
    width: 120px;
    height: 120px;
    border-radius: 100px;
    opacity: 0.3;
    z-index: -1;
}
.checkPoint04 .processWrap .circle:after{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 165px;
    border: 1px solid #876f5b;
    border-right: none;
    z-index: -1;
}

/*
    ************************************* CheckPoint05 ***************************************
*/
.checkPoint05 {padding:110px 0; background-color: #fbf6ed}
.checkPoint05 .imgWrap img{display: block; margin: 0 auto;}
.checkPoint05 .boxWrap{display: flex; justify-content: center; gap: 10px; margin-bottom: 60px;}
.checkPoint05 .boxWrap .cl_baseButton{
    font-family: "PretendardR";
    font-size: 32px;
    color: #191919;
    display: flex;
    justify-content: flex-start;
    width: 400px;
    height: 70px;
    background-color: #ede7dc;
    border: none;
    padding: 10px;
    box-sizing: border-box;
}
.checkPoint05 .boxWrap .cl_baseButton span{width: calc(100% - 54px); text-align: center;}


/*
    ************************************* CheckPoint06 ***************************************
*/
.checkPoint06 {padding:110px 0; background-color: #22140d; background-image:url("../images/checkPoint06_bg.jpg"); background-size:cover; background-position:center; }
.checkPoint06 .contentWrap{display: flex; align-items: center; justify-content: space-between;}
.checkPoint06 .contentWrap .cl_sectionTitle{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 0px;
}
.checkPoint06 .contentWrap .cl_sectionComment{font-family: "PretendardL"; text-align: left;}
.checkPoint06 .contentWrap .imgWrap{margin-right: 107px;}

/*
    ************************************* 간편실속 ***************************************
*/
.simplePractical  {padding:110px 0; background-image:url("../images/simplePractical_bg.jpg"); background-size:cover; background-position:center; }
.simplePractical .imgWrap{margin-bottom: 50px;}
.simplePractical .imgWrap img{display: block; margin: 0 auto;}
.simplePractical .boxWrap{display: flex; align-items: center; justify-content: center; gap: 6px;}
.simplePractical .boxWrap .box{
    font-family: "PretendardR";
    font-size: 28px;
    color: #191919;
    line-height: 34px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 233px;
    height: 90px;
    background: #f0e8e0;
    box-sizing: border-box;
    border-radius: 14px;
}
.simplePractical .boxWrap .box .bold{font-family: "PretendardB";}
.simplePractical .boxWrap .icon{
    font-family: "PretendardR";
    font-size: 28px;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    background: #7b0412;
    border-radius: 100px;
}

/*
    ************************************* 만족도평점 ***************************************
*/
.review {padding:110px 0; background-color: #090909}
.review .contentWrap{max-width: unset;}
.review .cl_sectionTitle{position: relative;}
.review .cl_sectionTitle .mainText{line-height: unset;}
.review .cl_sectionTitle .reviewDeco{position: absolute; left: 50%; transform: translateX(-50%); bottom: 0px;}
.review .cl_sectionTitle .mainText.textWhite{margin-bottom: 60px;}
.review .cl_sectionTitle .mainText.textGold{font-size: 64px;}
.review .cl_sectionTitle .mainText.textGold.largeSize{font-size: 106px;}

.swiper {width: 100%;height: 100%;}
.swiper-slide {display: flex; justify-content: center; align-items: center;}

.review .swiper-slide{width: 290px;}

.review .swiper-slide .item{
    display: flex;
    flex-direction: column;
    background: #ffffff;
    box-sizing: border-box;
    border-radius: 17px;
    width: 290px;
    height: 425px;
}

.review .item .itemHeader{display: flex; align-items: center; justify-content: space-between; padding: 15px;}
.review .item .itemHeader .nickName{font-family: "NotoSansM"; font-size: 18px; color: #191919;}
.review .item .imgWrap{margin-bottom: 30px; padding: 0px 15px;}
.review .item .textWrap{
    font-family: "NotoSansR";
    font-size: 18px;
    color: #191919;
    text-align: center;
    white-space: nowrap;
    height: 100%;
    align-content: center;
    padding-bottom: 25px;
}
.review .item .textWrap .bold{font-family: "NotoSansB"; background-color: #ffe5a6;}

/*
    ************************************* 추천 ***************************************
*/
.recommend {padding:110px 0; background-color: #fbf6ed}

.recommend .contentWrap{max-width: unset;}
.recommend .recommendList {display: flex; justify-content: center; gap: 40px;}
.recommend .recommendList .item{
    display: flex;
    align-items: center;
    flex-direction: column;
    background: #ffffff;
    border-radius: 26px;
    border: 1px solid #ede6d9;
    width: 330px;
    box-sizing: border-box;
    box-shadow: 3px 0px 10px -10px #00000080;
}
.recommend .recommendList .item .imgWrap{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 263px;
    background: #f8f4ed;
}
.recommend .recommendList .item .textWrap{
    padding: 35px 50px;
    border-top: 1px solid #ede6d9;
    width: 100%;
    box-sizing: border-box;
}
.recommend .recommendList .item .mainText{
    font-family: "PretendardB";
    font-size: 26px;
    line-height: 38px;
    color: #191919;
    text-align: center;
    border-bottom: 1px solid #ede6d9;
    padding-bottom: 25px;
}

.recommend .recommendList .item .subText{
    font-family: "PretendardR";
    font-size: 23px;
    line-height: 35px;
    color: #191919;
    text-align: center;
    padding-top: 25px;
    white-space: nowrap;
}

/*
    ************************************* 구매하러 가기 ***************************************
*/
.buyNow {padding:110px 0; background-color: #69030e}

.buyNow .contentWrap{max-width: unset;}
.buyNow .cl_sectionTitle .mainText{line-height: 75px;}
.buyNow .buyNowSwiper{position: relative;margin-bottom: 70px;}
.buyNow .swiper-slide{width: 431px !important;}
.buyNowSwiper .swiper-slide {opacity: 0.4;transition: opacity 0.3s ease;}
.buyNowSwiper .swiper-slide-active,
.buyNowSwiper .swiper-slide-prev,
.buyNowSwiper .swiper-slide-next {opacity: 1;}
.buyNow .swiper-slide img{width: 100%;}
.buyNow .swiperOpacityArea{
    width: 262px;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    background: #69030e;
    z-index: 2;
    opacity: 0.5;
}
.buyNow .swiperOpacityArea.right{left: unset; right: 0px;}
.buyNow .buttonWrap{display: flex; align-items: center; justify-content: center;}
.buyNow .buttonWrap .cl_baseButton{font-family: "PretendardB"; width: 380px; color: #0d0d0d !important;}

/*
    ************************************* 푸터 ***************************************
*/
footer {padding-bottom: 120px;}
footer .footerInfo {padding:70px 0 60px 0; background-color:#202020;}
footer .footerInfo .termsButtonWrap {display:flex; align-items: center; gap:30px; font-size:20px; color:#282828; font-family:PrentendardM; line-height:1; margin-bottom:25px;}
footer .footerInfo .termsButtonWrap a{font-family: "PretendardM"; font-size: 20px; color: #ffffff;}
footer .footerInfo .termsButtonWrap .divider {width:2px; height:15px; background-color:#e3ded4;}
/* 개인정보처리방침은 다른 약관과 구분되게 강조한다 (개인정보 보호법 권고) */
footer .footerInfo .termsButtonWrap a.privacyLink {font-family:"PretendardB"; color:#eec386;}
footer .footerInfo .addressWrap {display:flex; justify-content: space-between; align-items: center; font-size:18px; color:#ffffff; font-family:"PretendardR"; line-height:29px;}
footer .footerInfo .addressWrap .space {padding-left:15px;}
footer .footerInfo .addressWrap .footerLogo {position:relative; top:-20px;}

footer .fixbar {position:fixed; bottom:0; left:0; z-index:100; width:100%; padding:25px 0; background-color:#eec386;}
footer .fixbar .contentWrap {display:flex; justify-content: space-between; align-items: center;}

footer .fixbar .cl_baseButton.bgWhite{border: 1px solid #7b0412;}
footer .fixbar .cl_baseButton.bgRed{border: none;}















@media (max-width:1400px) {
    .contentWrap {padding: 0 20px; box-sizing: border-box;}


    /*
        ************************************** 헤더 ***************************************
    */
    header {height: 80px;}
    header .logo img {height: 40px;}
    header nav {font-size: 18px;}
    header nav .divider {height: 10px;margin: 0 20px;}
    header nav .btnTel {padding: 8px 20px; margin-left: 30px;}
    header nav .btnTel img {height: 24px;}


    /*
        ************************************* 메인 비주얼 ***************************************
    */
    .mainVisual {height: 800px;}
    .mainVisual .visualText h1 {font-size: 50px; line-height: 1.3;}
    .mainVisual .visualText h1 .strongText {font-size: 60px; margin-top: 30px;}
    .mainVisual .visualText .buttonWrap {gap: 10px; margin-top: 66px;}


    /*
        ************************************* 베스트 ***************************************
    */
    .best {padding: 120px 0;}
    .best .bestList {grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; gap: 20px;}
    .best .bestList .item .overInfo {gap: 15px;}
    .best .bestList .item .overInfo .engText {font-size: 22px;}
    .best .bestList .item .overInfo .korText {font-size: 18px;}


    /*
        ************************************* 왜 남다르게 맛있을까요? ***************************************
    */
    .whyDelicious {padding: 120px 0;}
    section .cl_sectionTitle .mainText {font-size: 40px; margin-top: 20px;}
    section .cl_sectionTitle .subText {font-size: 20px; margin-bottom: 25px;}
    .whyDelicious .cl_sectionTitle .subText {letter-spacing: 12px;}
    .whyDelicious .whyDeliciousList {padding: 20px 0px;}
    .whyDelicious .whyDeliciousList .item {width: calc(100% / 6); padding: 0px 10px;}
    .whyDelicious .whyDeliciousList .item .icon {width: 90px;}
    .whyDelicious .whyDeliciousList .item .textWrap .title {font-size: 22px;}
    .whyDelicious .whyDeliciousList .item .textWrap .desc {font-size: 14px;}


    /*
        ************************************* checkPoint01 ***************************************
    */
    .checkPoint01 {padding: 120px 0;}
    .checkPoint01 .comparisonWrap{width: 100%;}
    .checkPoint01 .comparisonWrap .comparisonBottom{width: 100%;}
    .checkPoint01 .comparisonWrap .comparisonBottom .item {width: calc(100% / 2); height: auto;}
    .checkPoint01 .comparisonWrap .item .title {font-size: 18px;}
    .checkPoint01 .comparisonWrap .item .desc {font-size: 15px;}


    /*
        ************************************* checkPoint02 ***************************************
    */
    .checkPoint02 {padding: 120px 0;}
    .checkPoint02 .imgWrap img {width: 100%;}

    /*
        ************************************* checkPoint03 ***************************************
    */
    .checkPoint03 {padding: 120px 0;}
    .checkPoint03 .imgWrap img {width: 100%;}

    /*
        ************************************* checkPoint05 ***************************************
    */
    .checkPoint05 {padding: 120px 0;}
    .checkPoint05 .imgWrap img {width: 100%;}

    /*
        ************************************* checkPoint06 ***************************************
    */
    .checkPoint06 {padding: 120px 0; background: url("../images/checkPoint06_bgTb.jpg") no-repeat; background-position: 0% 70%; background-size: cover;}
    .checkPoint06 .contentWrap {flex-direction: column;}
    .checkPoint06 .contentWrap .cl_sectionTitle {align-items: center; margin-bottom: 50px;}
    section.checkPoint06 .cl_sectionTitle .subText {font-size: 36px; margin-bottom: unset;}
    .checkPoint06 .contentWrap .cl_sectionComment {text-align: center;}
    .checkPoint06 .contentWrap .imgWrap {margin-right: unset;}

    /*
        ************************************* 만족도평점 ***************************************
    */
    .review .contentWrap {padding: 0;}
    section.review .cl_sectionTitle .subText {font-size: 40px; margin-bottom: 30px;}
    section.review .cl_sectionTitle .mainText {font-size: 55px; margin-bottom: 0px;}
    .review .cl_sectionTitle .mainText.textGold {font-size: 64px;}
    .review .cl_sectionTitle .mainText.textGold .largeSize {font-size: 106px;}

    /*
        ************************************* 간편실속 ***************************************
    */
    .simplePractical .boxWrap .box {font-size: 24px; color: #191919; line-height: 28px; width: 200px; height: 80px;}

    /*
        ************************************* 구매하러 가기 ***************************************
    */
    .buyNow .contentWrap {padding: 0;}

    /*
     ************************************* 푸터 ***************************************
     */
    footer {padding-bottom: 115px;}
}


@media (max-width:980px) {
    /*
        ************************************** 헤더 ***************************************
    */
    body {padding-top:64px;}
    header {position:fixed; top:0; left:0; z-index:100; width:100%; height:64px;}

    header .logo img {height:22px;}

    header nav {display:none;}

    header .btnShowMMenu {display:block;}
    header .btnShowMMenu > img {display:block; height:26px;}



    /*
        *** 모바일 메뉴
    */
    header nav#mobileMenu {
        position: fixed;
        top: 75px;
        right: 20px;
        z-index: 100;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap:12px;
        font-size:16px;
        border-radius: 8px;
        padding: 20px;
        background-color: #7b0412;
        transform:translateX(120%);
        transition:all 0.3s ease-out;
    }
    header nav#mobileMenu.on {transform: translateX(0); transition:all 0.3s ease-out;}

    header nav#mobileMenu a{display: flex; justify-content: space-between; align-items: center; width: 100%;}
    header nav#mobileMenu a .icon{width: 6px; height: 10px;}
    header nav#mobileMenu .divider {width:100%; height:1px; opacity:0.3; margin:0; background-color:#ffffff;}
    header nav#mobileMenu .btnTel {width: auto; gap:10px; padding:5px 10px; border-radius:5px; margin-left:0;}


    /*
        ************************************* 메인 비주얼 ***************************************
    */
    .mainVisual {height:564px; background-image:url("../images/mainVisual_m.jpg"); background-position: center;}
    .mainVisual .contentWrap {align-items: flex-start;}
    .mainVisual .visualContent {justify-content: center; margin-top: 60px;}

    .mainVisual .visualText h1 {font-size:28px; line-height:1.3; text-align: center;}
    .mainVisual .visualText h1 .strongText {font-size:28px; margin-top:15px;}
    .mainVisual .visualText h1 .subText {font-size: 20px; line-height: 35px; margin-top: 25px;}

    .mainVisual .visualText .buttonWrap{justify-content: center; margin-top: 25px;}
    .mainVisual .visualText .buttonWrap .cl_baseButton{width: 200px; gap: 15px;}

    .mainVisual .infoIconWrap {grid-template-columns: repeat(3, 92px); grid-auto-rows: 95px; gap:12px;}
    .mainVisual .infoIconWrap .item {gap:10px; font-size:12px;}
    .mainVisual .infoIconWrap .item > img {zoom:0.5;}



    /*
        ************************************* 베스트 ***************************************
    */
    .best {padding:60px 0;}

    section .cl_sectionTitle .subText {font-size: 13px;margin-bottom: 15px;}
    section .cl_sectionTitle .mainText {font-size: 25px;line-height: 1.2;}
    section .cl_sectionComment {line-height: 1.6;}
    .cl_sectionTitle .descText {line-height: 1.2;}

    .best .buttonWrap {margin-bottom: 30px;}
    .best .buttonWrap .cl_baseButton.tab {width: 150px;}
    .best .bestList {grid-template-columns: repeat(2, 1fr); gap:10px; margin-bottom: 30px;}
    .best .bestList .item {border-radius: 13px; padding: 8px;}
    .best .bestList .item .icon{width: 40px;}
    .best .bestList .item .textWrap .mainText {font-size: 16px; line-height: 18px; margin-bottom: 10px;}
    .best .bestList .item .textWrap .subText {font-size: 10px; line-height: 1.2;}
    .best .bestList .item .infoWrap .originPrice {font-size: 10px; line-height: 1.2; margin-bottom: 5px;}
    .best .bestList .item .infoWrap .salePrice {font-size: 16px; line-height: 1.2;}
    .best .bestList .item .infoWrap .badgeWrap {margin-bottom: 10px;}
    .best .bestList .item .infoWrap .badgeWrap .badge {font-size: 10px; width: 30px; height: 11px;}
    .best .bestList .item .infoWrap {padding: 7px 0px 0px 2px;}
    .best .bestList .item .infoWrap .gram {font-size: 12px; line-height: 1.2;}
    .best .bestList .item .textWrap {padding: 7px 0px 10px 0px;}
    .best .bestList .item .boxWrap{margin-bottom: 10px;}
    .best .bestList .item .boxWrap .box {font-size: 8px; line-height: 1.2; height: 25px;}
    .best .bestList .item .textWrap .descText{font-size: 8px;}
    .best .bestList .item .infoWrap .badgeWrap .badge {font-size: 7px;}
    .best .buttonWrap.marginNon{margin-bottom: 0;}
    .best .buttonWrap .btnLink.cl_baseButton {width: 190px; border: none;}


    /*
        ************************************* 왜 남다르게 맛있을까요? ***************************************
    */
    .whyDelicious {padding:60px 0;}
    .whyDelicious .cl_sectionTitle .mainText {margin-top: 15px;}
    .whyDelicious .whyDeliciousListWrap .whyDeliciousListTitle {font-size: 12px; padding: 10px 0px; height: 30px;}
    .whyDelicious .whyDeliciousList {display: grid; grid-template-columns: repeat(3, 2fr); grid-auto-rows: auto; padding: 0;}
    .whyDelicious .whyDeliciousList .item {width: auto; padding: 30px 5px; border-bottom: 2px solid #dddddd;}
    .whyDelicious .whyDeliciousList .item:nth-child(4),
    .whyDelicious .whyDeliciousList .item:nth-child(5),
    .whyDelicious .whyDeliciousList .item:nth-child(6){border-bottom: none;}
    .whyDelicious .whyDeliciousList .item .subText {font-size: 8px; line-height: 1.2; margin-bottom: 10px;}
    .whyDelicious .whyDeliciousList .item .textWrap .title {font-size: 11px; width: 60px; height: 14px; margin-bottom: 8px;}
    .whyDelicious .whyDeliciousList .item .icon {margin-bottom: 10px; width: 40px; height: 40px;}
    .whyDelicious .whyDeliciousList .item .icon img{width: 100%;}
    .whyDelicious .whyDeliciousList .item .textWrap .desc {font-size: 9px; line-height: 1.2;}



    /*
        ************************************* CheckPoint01 ***************************************
    */
    .checkPoint01 {padding:60px 0;}
    section .cl_sectionTitle .subText {font-size: 20px; margin-bottom: 15px;}
    section .cl_sectionTitle .mainText {margin-top: 10px;}
    .cl_sectionTitle .cl_baseButton.typeRound {font-size: 14px; width: 120px; height: 30px; margin-bottom: 15px;}
    .checkPoint01 .comparisonWrap .comparisonTop {
        font-size: 13px;
        line-height: 1.2;
        padding: 0 10px;
        margin-bottom: 15px;
        background-color: #fbf6ed;
        z-index: 1;
    }
    .checkPoint01 .comparisonWrap .comparisonBottom {gap: 15px;}
    .checkPoint01 .comparisonWrap .comparisonBottom .item:before {
        content: "";
        position: absolute;
        left: 25px;
        transform: unset;
        width: 2px;
        height: 25px;
        top: -25px;
        background-color: #7d7b76;
    }
    .checkPoint01 .comparisonWrap .comparisonBottom .item.bgRed:before{left: unset; right: 25px;}
    .checkPoint01 .comparisonWrap .comparisonBottom .item:after {content: ""; position: absolute;width: 100%; height: 2px; top: -25px; background-color: #7d7b76; z-index: 0;}
    .checkPoint01 .comparisonWrap .comparisonBottom .item:first-child:after {left: 25px;}
    .checkPoint01 .comparisonWrap .comparisonBottom .item:last-child:after {right: 25px;}
    .checkPoint01 .comparisonWrap .comparisonBottom .item .title {font-size: 13px; height: 25px;}
    .checkPoint01 .comparisonWrap .comparisonBottom .item.bgRed .title {font-size: 16px;}
    /*
        ************************************* CheckPoint02 ***************************************
    */
    .checkPoint02 {padding:60px 0;}

    .checkPoint02 .renderingBox {flex-direction:column-reverse; margin-bottom:25px;}
    .checkPoint02 .renderingBox .titleCell {padding:8px 17px;}
    .checkPoint02 .renderingBox .titleCell .title {font-size:15px; margin-bottom:0;}
    .checkPoint02 .renderingBox .titleCell .decoText {display:none;}
    .checkPoint02 .renderingBox .titleCell .thumb {bottom:15px; left:auto; right:15px;}
    .checkPoint02 .renderingBox .titleCell .thumb img {width:45vw;}
    .checkPoint02 .renderingBox .renderImgCell {width:100%;}

    .checkPoint02 .renderingBoxWrap .renderingBox:nth-child(2) .title {text-align: right;}
    .checkPoint02 .renderingBoxWrap .renderingBox:nth-child(2) .titleCell .thumb {left:15px; right:auto;}


    /*
        ************************************* CheckPoint03 ***************************************
    */
    .checkPoint03 {padding:60px 0;}

    /*
        ************************************* CheckPoint04 ***************************************
    */
    .checkPoint04 {padding:60px 0;}
    .checkPoint04 .processWrap .box.title {font-size: 15px;}
    .checkPoint04 .processWrap .box {font-size: 13px; width: 115px; height: 35px; margin-top: 2px; margin-bottom: 2px;}
    .checkPoint04 .processWrap .rightWrap .box.tallSize {font-size: 13px; height: 170px;}
    .checkPoint04 .processWrap .text {font-size: 20px; top: 200px;}
    .checkPoint04 .processWrap .text .largeSize {font-size: 25px;}
    .checkPoint04 .processWrap .circle {top: 245px; left: -36px; font-size: 14px; width: 50px; height: 50px;}
    .checkPoint04 .processWrap .circle:before {content: ""; width: 60px; height: 60px;}
    .checkPoint04 .processWrap .circle:after {content: ""; width: 11px; height: 90px;}

    /*
        ************************************* CheckPoint05 ***************************************
    */
    .checkPoint05 {padding:60px 0;}
    .checkPoint05 .boxWrap {flex-direction: column-reverse; align-items: center;gap: 10px; margin-bottom: 30px;}
    .checkPoint05 .boxWrap .cl_baseButton {font-size: 16px; width: 200px; height: 35px; padding: 5px;}
    .checkPoint05 .boxWrap .cl_baseButton img{width: 27px; height: 27px;}
        /*
            ************************************* CheckPoint05 ***************************************
        */
    .checkPoint06 {padding:60px 0; background: url("../images/checkPoint06_bgTb.jpg") no-repeat center; background-size: cover;}
    section.checkPoint06 .cl_sectionTitle .subText {font-size: 20px;}
    section.checkPoint06 .cl_sectionTitle .mainText {font-size: 25px;}
    .checkPoint06 .contentWrap .imgWrap {width: 100%; padding: 0px 25px; box-sizing: border-box;}
    .checkPoint06 .contentWrap .imgWrap img{width: 100%;}

    /*
        ************************************* simplePractical ***************************************
    */
    .simplePractical {padding:70px 0;}
    .simplePractical .imgWrap {width: 100%; margin-bottom: 25px;}
    .simplePractical .imgWrap img{width: 100%;}
    .simplePractical .boxWrap .box {font-size: 12px; line-height: 14px; width: 100px; height: 40px;}
    .simplePractical .boxWrap .icon {font-size: 14px; width: 12px; height: 12px;}

    /*
        ************************************* review ***************************************
    */
    .review {padding:60px 0;}
    .review .cl_sectionTitle .reviewDeco {width: 181px;}
    section.review .cl_sectionTitle .subText {font-size: 20px; margin-bottom: 15px;}
    .review .cl_sectionTitle .mainText.textGold .largeSize {font-size: 54px;}
    section.review .cl_sectionTitle .mainText.textWhite {font-size: 28px; margin-bottom: 0px;}
    .review .cl_sectionTitle .mainText.textGold {font-size: 32px;}
    .review .swiper-slide {width: 145px;}
    .review .swiper-slide .item {width: 145px; height: 210px;}
    .review .item .itemHeader {display: flex; align-items: center; justify-content: space-between; padding: 7px;}
    .review .item .itemHeader .nickName {font-size: 9px;}
    .review .item .itemHeader img{width: 50%;}
    .review .item .imgWrap {margin-bottom: 15px; padding: 0px 7px;}
    .review .item .imgWrap img{width: 100%;}
    .review .item .textWrap {font-size: 9px; padding-bottom: 13px;}

    /*
        ************************************* recommend ***************************************
    */
    .recommend {padding:70px 0;}
    .recommend .recommendList {display: grid; grid-template-columns: repeat(2, 2fr); gap: 10px; width: 100%;}
    .recommend .recommendList .item {width: 100%;}
    .recommend .recommendList .item:first-child .imgWrap{width: 100%; height: 100%; min-height: 127px;}
    .recommend .recommendList .item:first-child .imgWrap img{width: 70%; min-width: 125px; min-height: 125px;}
    .recommend .recommendList .item .imgWrap{height: auto;}
    .recommend .recommendList .item .imgWrap img{width: 100%; height: auto;}
    .recommend .recommendList .item .textWrap {padding: 18px 25px;}
    .recommend .recommendList .item .mainText {font-size: 13px; line-height: 1.2; padding-bottom: 13px;}
    .recommend .recommendList .item .subText {font-size: 11px; line-height: 1.2; padding-top: 13px;}

    /*
        ************************************* buyNow ***************************************
    */
    .buyNow {padding:40px 0;}
    .buyNow .cl_sectionTitle .mainText {line-height: 35px;}
    .buyNow .buyNowSwiper {margin-bottom: 35px;}
    .buyNow .swiper-slide {width: calc(100% / 2) !important;}
    .buyNow .buttonWrap .cl_baseButton {width: 190px;}


    /*
        ************************************* 푸터 ***************************************
    */
    footer {padding-bottom:137px;}
    footer .footerInfo {padding:30px 0;}
    footer .footerInfo .termsButtonWrap {gap:10px; font-size:13px; margin-bottom:15px; justify-content: center;}
    footer .footerInfo .termsButtonWrap a {font-size: 10px;}
    footer .footerInfo .termsButtonWrap .divider {width:2px; height:12px;}

    footer .footerInfo .addressWrap {justify-content: center; font-size:9px; text-align: center; line-height: 1.4;}
    footer .footerInfo .addressWrap .space {padding-left:10px;}
    footer .footerInfo .addressWrap .footerLogo {top:10px;}
    footer .footerInfo .addressWrap .footerLogo img {width:85px;}

    footer .fixbar {padding: 20px 0 10px 0;}
    footer .fixbar .contentWrap{display: flex; flex-direction: column; gap: 15px;}
    footer .fixbar .contentWrap .buttonCell{display: flex; gap: 10px; width: 100%;}
    footer .fixbar .contentWrap .buttonCell .cl_baseButton {width: 100%;}
}