@charset "utf-8";

._tx{font-weight: 300;letter-spacing: -1px;}
._tx p{font-size: 24px;line-height: 1.5;margin-bottom: 30px;}
._tx p:last-of-type{margin-bottom: 0;}
 ._img{overflow: hidden;border-radius:80px ;}
 ._img img{display: block;font-size: 0;}
.st{font-size: 40px;margin-bottom: 20px;}
@media screen and (max-width:1024px) {
._tx p{font-size: 21px;line-height: 1.35;margin-bottom: 20px;}
.st{font-size: 30px;margin-bottom: 20px;}
 ._img{border-radius:45px ;}
}

/* 11.BRANDSTORY ***************************************/
.brandLogo::before{display: block;margin: 0 auto;content: '';width: 234px;height: 234px;margin-bottom: 45px;background:  url(../img/cont/bs_logo.png) center 0 no-repeat; }
.brandLogo{text-align: center;position: relative;/* padding-top: 280px;background:  url(../img/cont/bs_logo.png) center 0 no-repeat; */margin-bottom: 105px;}
.brandLogo p{font-family: 'Cafe24Shiningstar';font-size: 50px;font-weight: 400;margin-bottom: 25px;}

:lang(ar) .brandLogo p{font-size: 30px;margin-bottom: 25px;}
.brandLogo h3{font-family:'Gmarket Sans' ;font-size: 50px;font-weight: 700;color: #7a2628;}
.brandQuotes{display: flex;justify-content: space-between;align-items: center;}
.brandQuotes ._img{overflow: hidden;border-radius:80px ;}
.brandQuotes ._img img{display: block;font-size: 0;}
.brandQuotes ._tx{text-align: center;font-weight: 300;letter-spacing: -1px;}
.brandQuotes ._tx p{font-size: 23px;line-height: 1.5;margin-bottom: 70px;}
.brandQuotes ._tx p:last-of-type{margin-bottom: 0;}
.brandQuotes .quot{font-size: 40px;line-height: 1.5;}
.brandQuotes .quot .mark{display: block;font-family: 'Gmarket Sans';font-size: 90px;font-weight: 300;line-height: 0.5;}
.brandQuotes .quot .mark:last-of-type{position: relative;top: 70px;}
.brandQuotes.mb80{margin-bottom: 80px;}
.brandQuotes.mb20{margin-bottom: 20px;}
.brandQuotes ._img,
.brandQuotes ._tx{width: 45.3125%;}
.brandDish{padding-top: 150px;}

@media screen and (max-width:1280px) {
.brandLogo{margin-bottom: 75px;}
.brandLogo h3{font-size: 40px;}
.brandQuotes .quot{font-size: 35px;line-height: 1.3;}
.brandQuotes .quot .mark{font-size: 70px;line-height: 0.2;}
.brandQuotes ._img{border-radius:45px }
.brandQuotes ._tx p{font-size: 20px;margin-bottom: 50px;}
.brandQuotes ._img,
.brandQuotes ._tx{width: 48.3125%;}
}
@media screen and (max-width:1024px) {
.brandLogo::before{background-size:auto 100%;height: 180px;margin-bottom: 35px;}
.brandLogo{margin-bottom: 55px;}
.brandLogo p{font-size: 40px;}
.brandDish{padding-top: 100px;}
}
@media screen and (max-width:1000px) {
.brandQuotes.long{flex-direction: column;flex-direction: column-reverse;padding-top: 60px;}
.brandQuotes.long ._img{width: 60%;margin-bottom: 30px;}
.brandQuotes.long ._tx{width:auto}
.brandQuotes ._tx p{margin-bottom: 30px;}
}
@media screen and (max-width:820px) {
.brandQuotes .quot{font-size: 27px;}
}
@media screen and (max-width:520px) {
.brandQuotes{flex-direction: column;}
.brandQuotes .quot .mark{display: none;}
.brandQuotes.long ._img,
.brandQuotes ._img{width: 90%;margin-bottom: 30px;}
.brandQuotes ._tx{width:auto}
.brandQuotes.mb80{margin-bottom: 60px;}
.brandQuotes.mb20{flex-direction: column-reverse;}
}
/* 12. VERTICAL FARM ***************************************/

.st1{font-size: 60px;line-height: 1.1;margin-bottom: 70px;font-weight: 200;letter-spacing: -1px;}
.st1 span{display: block;}
.st1 b{font-weight: 800;}
.vfWrap{display: flex;justify-content: space-between;margin-bottom: 50px;}
.vfWrap ._img{width: calc(620/1280 * 100%);text-align: center;}
.vfWrap ._img img{margin: 0 auto;}
.vfWrap ._tx{width: calc(580/1280 * 100%);}
.vfWrap .gray{font-size: 80px;color: #f6f6f7;font-family:'Gmarket Sans' ;font-weight: 700;margin-bottom: 150px;padding-top: 20px;}
.vfSlide{padding-top: 50px;margin-bottom: 160px;position: relative;}
.vfSlide #cafeSwiper{max-width: 1280px;margin: 0 auto;overflow: visible;position: relative;}
.vfSlide #cafeSwiper img{font-size: 0;display: block;max-width: 100%;}
.vfSlide #cafeSwiper .swiper{border-radius:80px ;}

.vfSlide #cafeSwiper  .swiper-button-next,
.vfSlide #cafeSwiper  .swiper-button-prev{z-index: 100;width: 60px;height: 60px;background-color: #fff;border-radius:50% ;box-shadow:1px 1px 17px 0 rgba(0,0,0,0.25);}
.vfSlide #cafeSwiper  .swiper-button-next::after,
.vfSlide #cafeSwiper  .swiper-button-prev::after{font-weight: 800;font-size: 0;content: '';padding: 0;text-align: center; border-style: solid;border-color: #7d2729;border-width:3px 3px 0 0;padding:6px;transform: rotate(45deg);position: absolute;top: 50%;left: 50%;transition:.25s ease-out;margin: -8px 0 0 -10px;}
.vfSlide #cafeSwiper  .swiper-button-prev::after{border-width:0 0 3px 3px;margin: -8px 0 0 -6px; }
.vfSlide #cafeSwiper  .swiper-button-next{ right: var(--swiper-navigation-sides-offset,-30px);left: auto}
.vfSlide #cafeSwiper  .swiper-button-prev{ left: var(--swiper-navigation-sides-offset,-30px);right: auto}
.vfSlide #cafeSwiper .swiper-slide img{ -webkit-transform: scale(1.1); transform: scale(1.1); -webkit-transition: opacity 1s ease, -webkit-transform 2s linear; transition: opacity 1s ease, -webkit-transform 2s linear; transition: transform 2s linear, opacity 1s ease; transition: transform 2s linear, opacity 1s ease, -webkit-transform 2s linear; opacity: 0; }
.vfSlide #cafeSwiper .swiper-slide.swiper-slide-active img{ -webkit-transform: scale(1); transform: scale(1); opacity: 1; }

@media screen and (max-width:1200px) {
.st1{font-size: 50px;margin-bottom: 40px;}
.vfWrap .gray{margin-bottom: 100px;font-size: 70px;}
.vfWrap ._tx p{font-size: 21px;}
.vfSlide #cafeSwiper{max-width: 100%;width: auto;bottom:auto;}
.vfSlide #cafeSwiper .swiper{border-radius:50px;}
}

@media screen and (max-width:1024px) {
.vfWrap .gray{margin-bottom: 60px;font-size: 50px;}
.vfWrap ._tx p{font-size: 19px;}
.vfSlide{padding-top: 40px;margin-bottom: 100px;}
}
@media screen and (max-width:850px) {
.vfWrap{flex-direction: column;padding: 0 2%;}
.vfWrap ._img,
.vfWrap ._tx{width: auto;}
.vfWrap .gray{margin-bottom: 30px;font-size: 40px;}
.st1{font-size: 40px;margin-bottom: 40px;}
.vfWrap ._tx{padding-bottom: 30px;}
.vfSlide {margin-left: -2.7%;margin-right: -2.7%;}
.vfSlide #cafeSwiper .swiper-button-next{right: calc(50% - 70px);}
.vfSlide #cafeSwiper .swiper-button-prev{left:  calc(50% - 70px);}
.vfSlide #cafeSwiper .swiper-button-next,
.vfSlide #cafeSwiper .swiper-button-prev{display: block;top: auto;bottom: -70px;margin-top: 0;}
.vfSlide #cafeSwiper{width: 100%;bottom: auto}
.vfSlide #cafeSwiper .swiper{border-radius:0;}
}
@media screen and (max-width:510px) {
.vfWrap ._img.vflogo img{max-width: 40%;margin-top: 30px;}
._img.vfdoor {border-radius:0;position: relative;}
._img.vfdoor img{max-width: 160%;position: relative;left: 50%;transform:translateX(-50%)}
.vfSlide #cafeSwiper .swiper{height:calc(560/500 * 100vw) ;height: auto;}
.vfSlide #cafeSwiper img{max-width: 100%;height: auto;position: relative;top: auto;left: auto;transform:translateX(0)}
.vfSlide #cafeSwiper .swiper-slide img{ -webkit-transform: scale(1.1) translateX(0); transform: scale(1.1) translateX(0); -webkit-transition: opacity 1s ease, -webkit-transform 2s linear; transition: opacity 1s ease, -webkit-transform 2s linear; transition: transform 2s linear, opacity 1s ease; transition: transform 2s linear, opacity 1s ease, -webkit-transform 2s linear; opacity: 0; }
.vfSlide #cafeSwiper .swiper-slide.swiper-slide-active img{ -webkit-transform: scale(1) translateX(0); transform: scale(1) translateX(0); opacity: 1; }
}
/*13..*/
.biLst{display: flex;flex-wrap: wrap;justify-content: space-between;}
.biLst dl{flex:0 0 calc(580/1280 * 100%);margin-bottom: 50px;}
.biLst dt{position: relative;display: flex;align-items: center;justify-content: space-between;margin-bottom: 15px;}
.biLst dt b{display: block;padding-bottom: 5px;font-weight: 700;font-size: 24px;}
.biLst dt em{height: 1px;background-color: #bbb;flex:1;margin-left: 10px;}
.biLst dd{display: flex;justify-content: center;align-items: center;border: 1px dotted #ddd;height: 250px;}
.biLst dd img{display: block;}

@media screen and (max-width:1280px) {
.biLst dl{flex:0 0 47.5%;margin-bottom: 50px;}
.biLst dd{border: 0;}
}
@media screen and (max-width:850px) {
.biLst{display: block;}
.biLst dd{height: auto;padding: 25px;}
.biLst dt b{font-size: 21px;}
}

/* 20. MENU ***************************************/
.menuTop{position: relative;padding-right: 56.5%;overflow: visible;padding-bottom: 45px;margin-bottom: 110px;}
.menuTle{font-size: 30px;line-height: 1.1;font-weight: 800;margin-bottom: 30px;}
.menuDesc{font-size: 18px;line-height: 1.4;font-weight: 300;letter-spacing: 0;text-align: justify;}
.menuImg{position: absolute;bottom: 0;left: 51.5625%;}
.menuImg img{font-size: 0;display: block;}

.menuLst{overflow: hidden;max-width: 1280px;margin: 0 auto;}
.menuLst ul{display: flex;flex-wrap: wrap;gap:3.61%;flex-direction: row;margin-right: -3.61%;}
.menuLst li{flex:0 0 21.43%;min-height: 200px;margin-bottom: 75px;}
.menuLst li img{display: block;opacity: 0.91;transition:.15s ease-out;}
.menuLst li a{display: block;}
.menuLst li .nm{padding-top: 35px;padding-bottom: 7px;display: block;font-size: 26px;}
.menuLst li .nm_e{font-size: 18px;opacity: .5;font-style: normal;}
.menuLst li .nm_s{padding-top: 25px;font-size: 20px;font-weight: 300;display: block;word-break: break-all;overflow: hidden;line-height: 1.2;display: -webkit-box; text-overflow: ellipsis;-webkit-box-orient: vertical; -webkit-line-clamp: 2;height:calc(1em * 1.2 * 2);}
.menuLst li .nm_img{display: block;position: relative;overflow: hidden;transition:.05s;background-color: #666; height: 0;padding-top: 100%;}
.menuLst li .nm_img img{object-fit: cover;width: 100%;height: 100%;position: absolute;top: 50%;left: 50%;transform:translate(-50%,-50%)}
.menuLst li .nm_img .flg{font-style: normal;color: #fff;display: inline-block;font-weight: bold;line-height: 33px;padding: 0 10px;background-color: #d8235c;position: absolute;top: 0;left: 0;letter-spacing: 0;z-index: 1;}
.menuLst li .nm_img:hover{border-radius:0 28px 28px 28px;}
.menuLst li .nm_img::before{display: block;content: '';position: absolute;top: 0;left: 0;bottom: 0;right: 0;border: 10px solid #d8235c;border-radius:0 28px 28px 28px;transition:.35s ease-out;opacity: 0;z-index: 1;}
.menuLst li .nm_img:hover::before{border-radius:0 28px 28px 28px;opacity: 1;}
.menuLst li .nm_img:hover img{opacity: 1;}
.menuTab{display: flex;position: relative;margin-bottom: 30px;}
.menuTab::after{display:block;content: '';height: 1px;position: absolute;background-color: #e0e0e0;left: 0;right: 0;bottom: 0;z-index: 0;}
.menuTab a{display:block;padding: 0 18px;line-height: 55px;position: relative;font-size: 20px;font-weight: 300;color: #555;}
.menuTab li.on a{font-weight: bold;color: #000;}
.menuTab li.on a::after{display:block;content: '';height: 3px;position: absolute;background-color: #000;left: 15px;right: 15px;bottom: 0;z-index: 2;}
.menuTab li:first-child a{padding-left: 0;}
.menuTab li:first-child.on a::after{left: 0;}
.menuView{padding-top: 100px;}
.vNav{text-align: center;margin-bottom: 5px;position: relative;}
.vNav h3{font-size: 40px;font-weight: 800;margin-bottom: 25px;}
.vNav p{font-size: 20px;}
.vNav a.btn{display: block;position: absolute;bottom: 0;right: 0;border-bottom: 2px solid #000;padding: 8px 0 ;}
.menuView .vfSlide #cafeSwiper .swiper{border-radius:0;}
.menuView .vfSlide #cafeSwiper .swiper .swiper-slide a{display: flex;align-items: center;justify-content: center;height: 600px;background-color: #f0f0f0;}
.menuView .vfSlide #cafeSwiper .swiper .swiper-slide a img{align-self: stretch;max-width: initial}
@media screen and (max-width:1280px) {
.menuTop{padding-bottom: 20px;}
.menuImg{top: -240px;}
.menuImg img{max-width: initial;height: 100%;}
}
@media screen and (max-width:1024px) {
.menuTop{padding-bottom: 0;margin-bottom: 80px;padding-right: 35%;}
.menuImg{top: -200px;left: 69%;}
.menuTle{font-size: 25px;}
.menuDesc{font-size: 17px;}
.menuLst li{flex:0 0 29.73%;margin-bottom: 50px;}
.menuLst li img{width: 100%;}
.menuLst li .nm{padding-top: 20px;padding-bottom: 5px;font-size: 22px;}
.menuLst li .nm_e{font-size: 15px;}
.menuLst li .nm_s{padding-top: 16px;font-size: 17px;}
}
@media screen and (max-width:850px) {

.menuView .vfSlide #cafeSwiper .swiper .swiper-slide a{height:420px;}
.menuView .vfSlide #cafeSwiper .swiper-button-next, .menuView .vfSlide #cafeSwiper .swiper-button-prev{bottom: -30px;}
}
@media screen and (max-width:680px) {

.menuLst ul{gap:2%;flex-direction: row;margin-right: -2%;}
.menuLst li{flex:0 0 48%;margin-bottom: 30px;}
.menuLst li .nm_img .flg{line-height: 24px;padding: 0 6px;font-size: 13px;}
.menuLst li .nm_img:hover{border-radius:0 ;}
.menuLst li .nm_img::before{border: 5px solid #d8235c;border-radius:0;}
.menuLst li .nm_img:hover::before{border-radius:0;}
.menuLst li .nm_s{font-size: 16px;padding-top: 10px;}

.menuView{padding-top:50px;}
.vNav{text-align: left;}
.vNav h3{font-size: 35px;margin-bottom: 20px;}
.vNav p{font-size: 16px;}
.vNav a.btn{bottom: auto;top: 0;font-size: 0.9em;}
}
@media screen and (max-width:510px) {
.menuLst ul{margin-right: 0;display: block;}
.menuImg{display: none;}
.menuTop{padding-right: 0;margin-bottom: 30px;}
.menuTle{font-size: 22px;margin-bottom: 30px;}
.menuDesc{font-size: 16px;text-align: left;}
.menuView .vfSlide #cafeSwiper .swiper .swiper-slide a{height:300px;}

}
@media screen and (max-width:380px) {
.menuTab{margin-bottom: 20px;}
.menuTab a{padding: 0 15px;line-height: 45px;font-size: 18px;}
}

.storeGuide{display: flex;justify-content: space-between;margin-bottom: 80px;gap:80px}
.storeGuide ._tx p{padding-bottom: 10px;}
.storeGuide ._img {flex:0 0 50%;background-color: #f7f7f7;border-radius:75px;display: flex;align-items: center;justify-content: center;}
.storeGuide ._img .brandLogo{margin-bottom: 0;}
.storeBtm{border-radius:75px;overflow: hidden;background-color: #d8235c; color: #fff;justify-content: space-between;flex-direction: row;display: flex;}
.storeBtm img{display: block;max-width: 100%;}
.storeBtm>div{flex:0 0 50%;}
.storeBtm .text{display: flex;flex-direction: column;justify-content: space-between;padding: 100px;box-sizing: border-box;}
.storeBtm .text a{display: block;font-size: 40px;font-weight: 600;position: relative;}
.storeBtm .text a em{display: block;height: 34px;width: 60px;position: relative;margin-top: 40px;}
.storeBtm .text a em::before{content:'';display: block;position: absolute;width: 100%;left: 0;top: 50%;margin-top: -1px;background-color: #fff;height:2px;}
.storeBtm .text a em::after{content:'';display: block;border-style: solid;border-color: #fff;border-width:2px 2px 0 0;padding:10px;transform: rotate(45deg);position: absolute;top: 50%;right: 2px;transition:.25s ease-out;margin: -11px 0 0 0;}
.storeBtm dt{font-size: 22px;font-weight: 600;margin-bottom: 10px;}
.storeBtm dd{font-size: 18px;font-weight: 300;}
@media screen and (max-width:1024px) {
.storeGuide{margin-bottom: 50px;}
.storeGuide ._tx p{font-size: 17px;}
.storeGuide ._img,
.storeBtm {border-radius:30px;}
.storeBtm .text{padding: 5%;}
.storeBtm .text a{font-size: 30px;}
}
@media screen and (max-width:660px) {
.storeGuide{display: block;}
.storeGuide ._img{padding: 30px 0;margin-top: 20px;}
.storeBtm{display: block;}
.storeBtm .text a{margin-bottom: 30px;}
.storeBtm .text a em{width: 40px;position: absolute;top: 10px;right: 0;margin-top: 0}
}
@media screen and (max-width:350px) {
.storeGuide ._tx p:first-of-type br{display: none;}
}

.conTp{padding: 150px 0 60px;text-align: center;position: relative;}
.conTp em{font-style: normal;display: block;font-size: 22px;opacity: .45;font-family: 'Montserrat', sans-serif;font-weight: 700;}
.conTp p{font-size: 48px;line-height: 1.1;padding-bottom: 40px;padding-top: 60px;}
.conTp p b{display: block;font-weight: 800;}


@media screen and (max-width:1280px) {
.conTp{padding: 90px 0 40px;}
}
@media screen and (max-width:1200px) {
.conTp p.long{font-size: 36px;padding-bottom: 20px;padding-top: 20px;}
}
@media screen and (max-width:1024px) {
.conTp p{font-size: 36px;padding-bottom: 20px;padding-top: 20px;}
}
@media screen and (max-width:850px) {
.conTp p.long{font-size: calc(16px + (36 - 16) * ((100vw - 300px) / (850 - 300)));}
}
@media screen and (max-width:600px) {
.conTp p{font-size: calc(30px + (36 - 30) * ((100vw - 320px) / (600 - 320)));}
}