@charset "utf-8";

/* reset */
* {margin: 0;padding: 0; box-sizing: border-box;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, tbody, tfoot, thead, tr, th, td{margin:0;padding:0;}
h1, h2, h3, h4, h5, h6 {font-weight: 700; font-size: inherit;}
a {color: inherit; text-decoration: inherit;}
img {vertical-align: middle;}
a img {border: none;}
li {list-style: none;}
address, em, i {font-style: normal;}
a:focus {outline: none}
button:focus {outline: none}

body{font-family: 'Pretendard',sans-serif; font-size: 16px;position: relative;}
.en{font-family: "Tamburins Original Regular";font-weight: normal;}
.en2 {font-family: "Playfair Display", serif;}
.en3 { font-family: "Tiro Bangla", serif; font-weight: 400; font-style: normal;font-style: italic; }
.wrap{background: #000;position: relative;}
.wrap.on{filter: blur(5px);}

.goTop {position: fixed;bottom: 30px;right: 30px;cursor: pointer;text-align: center;width: 50px;height: 50px;font-weight:300;display: none;opacity: 0;  transition: opacity 0.3s ease;border-radius: 50%;background: url(../img/arrowwhite.png) no-repeat center rgba(0, 0, 0, 0.2);transform: rotate(270deg);background-size: 20px;}
.goTop.on {display: block;opacity: 1;}


header{position: fixed;z-index: 5;background: rgba(0,0,0,0.0);width: 100%;transition: all 0.4s;}
header.on{position: fixed;z-index: 5;background: rgba(0,0,0,0.9);width: 100%;transition: all 0.4s;}
header .innerheader{width: 90%;margin: 0 auto;display: flex;justify-content: space-between;padding: 10px 0;color: #fff;text-align: center;align-items: center;transition: all 0.3s;}
header .innerheader{width: 90%;margin: 0 auto;display: flex;justify-content: space-between;padding: 10px 0;color: #fff;text-align: center;align-items: center;transition: all 0.3s;}
.button{border: #000 1px solid;padding: 8px 16px;border-radius: 50px;color: #000;font-size: 18px;width: 165px;margin: 0 auto;transition: all 0.3s;display: flex;align-items: center;justify-content: center;text-align: center;}
header .innerheader nav .menubar {display:none}
header .innerheader nav .menuwrap {display:none}

.button img{display: inline-block;padding-bottom: 3px;padding-left: 2px;}



header .innerheader .logo{width: 70px;}
header .innerheader .logo img{width: 100%;}
header .innerheader .list{display: flex;justify-content: space-between;font-size: 16px;margin-left: 100px;min-width: 500px;width: 35%;}
header .innerheader .list li a{padding-bottom: 5px;position: relative;}
header .innerheader .list li a:after{content: '';background: #fff;height: 1px;width: 0;position: absolute;left: 0;bottom: -3px;opacity: 0;transition: all 0.3s;}
header .innerheader .list li a:hover:after{opacity: 1;width: 100%;}
header .innerheader nav{display: flex;justify-content: space-between;width: 170px;}

.searchPage{position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.8); z-index: 10;opacity: 0;transition: all 0.3s;visibility: hidden;}
.searchPage.on{opacity: 1;visibility: visible;}
.searchPage .top{width: 90%;display: flex;justify-content:space-between;color: #fff;margin: 50px auto 0;align-items: center;}
.searchPage .top .title{font-size: 100px;}
.searchPage .top .close{display: block; padding: 8px 16px;border: 1px solid #fff;border-radius: 50px;}
.searchPage .center{display: flex;width: 600px;color: #fff;justify-content: space-between;margin: 270px auto 0;border-bottom: 1px solid #fff;padding-bottom: 20px;font-size: 18px;}
.searchPage .center .searchInput{color: #e1e1e1; background: transparent;border: none;outline: none;font-size: 18px;}
.searchPage .center .searchBtn { background: none;border: none; color: #fff;cursor: pointer;font-size: 18px;}

.cartPage{width: 570px;height: 100vh;position: fixed;right: -700px;top: 0;z-index: 15;background: #fff;transition: all 0.5s;opacity: 0;font-family:'Pretendard',sans-serif ;}
.cartPage.on{right: 0;opacity: 1;}
.cartPage .cartInner{padding: 60px 50px;box-sizing: border-box;position: relative;height: 100vh;}
.cartPage .cartInner .title{font-size: 30px;margin-bottom: 50px;display: flex;justify-content: space-between;}
.cartPage .cartInner .title span{cursor: pointer;}
.cartPage .cartInner .box{display: flex;padding: 30px 0;}
.cartPage .cartInner .box.a{border-bottom: 1px solid #000;}
.cartPage .cartInner .box .left{width: 180px;}
.cartPage .cartInner .box .left img{width: 100%;object-fit: cover;height: 100%;}
.cartPage .cartInner .box .right{margin-left: 20px;}
.cartPage .cartInner .box .right .top{display: flex;justify-content: space-between;width: 290px;}
.cartPage .cartInner .box .right .top .product{font-size: 16px;font-family:'Pretendard',sans-serif ;}
.cartPage .cartInner .box .right .top .no{width: 20px;cursor: pointer;}
.cartPage .cartInner .box .right .top .no img{width:100%;opacity: 0.3;}
.cartPage .cartInner .box .right .bottom .won{margin-top: 80px;margin-bottom: 10px;font-family:'Pretendard',sans-serif ;}
.cartPage .cartInner .box .right .bottom .num{cursor: pointer;width: 60px;display: inline-block;}
.cartPage .cartInner .box .right .bottom .numset .delete{opacity: 0;}
.cartPage .cartInner .total{display: flex;justify-content: space-between;font-size: 16px;font-family:'Pretendard',sans-serif ;padding: 30px 5px 5px 5px;}
.cartPage .cartInner .del{padding: 8px;display: flex;justify-content: space-between;font-size: 16px;font-family:'Pretendard',sans-serif ;border-bottom: 1px solid #eee;}
.cartPage .cartInner .shopping{padding: 8px;display: flex;justify-content: space-between;font-size: 18px;font-family:'Pretendard',sans-serif ;}

.cartPage .cartInner .purBtn{padding: 20px;background: #000;color: #fff;border-radius: 5px;font-size: 16px;font-family:'Pretendard',sans-serif ;cursor: pointer;margin-top: 160px;display: block;text-align: center;position: absolute;width: 83%;bottom: 20px;}
.cartPage .cartInner .purBtn2{display: none;width: 100%;padding: 20px;background: #000;color: #fff;border-radius: 5px;font-size: 16px;font-family:'Pretendard',sans-serif ;cursor: pointer;margin-top: 160px;text-align: center;}

.dimmed {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.5); z-index: 10;opacity: 0;visibility: hidden;transition: opacity 0.3s;}
.dimmed.on { opacity: 1;visibility: visible;}
.set{position: relative;}
.lang{color: #fff;position: absolute;z-index: 20;top: 30px;left: 50%;transform: translateX(-50%);opacity: 0;transition: all 0.3s}
.lang ul{padding: 2px 10px;border: 1px solid #dadada;border-radius: 10px;background: #fff;}
.lang ul li{padding: 5px 10px;font-size: 14px;color: #999;}
.lang ul li:first-child{color: #1d1d1d;border-bottom: 1px solid #dadada;}
.lang ul li:last-child{border: none;}
.lang ul li:hover{color: #1d1d1d;transition: all 0.5s;}

.lang.on{opacity: 1;}

/* visual */
.visual { height: 150vh; position: relative; overflow: hidden;  width: 100%; }
.visual .visual-main { width: 100%; height: 100%; background: url(../img/visual-bg-gra.png) no-repeat center/cover; position: absolute; z-index: 1; transform: translateY(400px) scale(1.5);opacity: 0;animation: bgEnter 2s ease-out forwards; }
@keyframes bgEnter {
  0% {transform: translateY(400px) scale(1.5);opacity: 1; }
  30% {transform: translateY(0) scale(1.5);opacity: 1; }
  100% {transform: translateY(0) scale(1);opacity: 1; }
}
.visual .txt { color: #fff; position: absolute; z-index: 2; text-align: center; width: 100%;top: 0;left: 0;}
.visual .txt .title { margin-top: 140px; font-size: 240px; white-space: nowrap;font-weight: 100;letter-spacing: -15px;}
.visual .txt .title .word1{display: inline-block; padding-right: 50px;} 
.visual .txt .title .word2{display: inline-block;}
.visual .txt .title .word1 .word{display: inline-block; opacity: 0; animation: imgup 2s ease forwards; animation-delay: calc(0.3s * var(--char-index));}
.visual .txt .title .word2 .word{display: inline-block; opacity: 0; animation: imgup 2.3s ease forwards; animation-delay: calc(0.3s * var(--char-index));}


.visual .txt .sub { display: flex; gap: 12px; justify-content: center; align-items: flex-end; margin: 10px 0 15px; }
.visual .txt .sub .sub1 { font-size: 72px; }
.visual .txt .sub .sub2 { font-size: 48px; font-style: italic; }
.visual .txt .sub .sub3 { font-size: 72px; }
.visual .txt .des { font-size: 32px; line-height: 36px; margin-top: 32%; }


.visual .txt .sub .sub1 .word{display: inline-block; opacity: 0; animation: imgup 2.5s ease forwards; animation-delay: calc(0.3s * var(--char-index));}
.visual .txt .sub .sub2 .word{display: inline-block; opacity: 0; animation: imgup 3s ease forwards; animation-delay: calc(0.3s * var(--char-index));}
.visual .txt .sub .sub3 .word{display: inline-block; opacity: 0; animation: imgup 3.3s ease forwards; animation-delay: calc(0.3s * var(--char-index));}

.visbutton { position: absolute;top: 50%;;left: 50%;transform: translateX(-50%);animation: imgup2 3.6s;}

.visual .txt .visbutton a img {  transition: all 0.4s; }
.visual .txt .visbutton a:hover img {transform: rotate(-90deg);transition: all 0.4s;}






/* about */
.about{width: 100%;position: relative;height: 150vh;overflow: hidden;background: #000;}
.about .slash{text-align: center;margin-top: 150px;}
.about .about-main .about-title{font-size: 128px;color: #fff;text-align: center;}
.about .about-main.motion .about-title .char{  display: inline-block;
  animation: slideFadeUp 0.6s ease-out both;
  animation-delay: calc(20ms * var(--char-index));}
  @keyframes slideFadeUp {
    0% { opacity: 0;transform: translateY(80%); } 
    100% { opacity: 1;transform: translateY(0);}
  }
.about .aboutTxt{position: absolute;top: 70%;left: 50%;transform: translateX(-50%);font-size: 48px;color: #fff;  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);}
.about .aboutImg {height: 150vh;}
.about .aboutImg .ellipse{position: absolute;top: 60%;left: 50%;transform: translate(-50%,-50%);  animation: drift 8s ease-in-out infinite;opacity: 0.8;}
  .about .aboutImg .ellipse.a{  animation: driftLayer 10s ease-in-out infinite; opacity: 0.8;filter: blur(1px);}
  @keyframes drift {
    0%   { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
    25%  { transform: translate(-48%, -52%) rotate(2deg) scale(1.05); }
    50%  { transform: translate(-51%, -48%) rotate(-3deg) scale(1.2); }
    75%  { transform: translate(-49%, -50%) rotate(2deg) scale(1.02); }
    100% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
  }
  @keyframes driftLayer {
    0%   { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
    25%  { transform: translate(-52%, -48%) rotate(-3deg) scale(0.98); }
    50%  { transform: translate(-47%, -51%) rotate(2deg) scale(1.03); }
    75%  { transform: translate(-53%, -49%) rotate(-2deg) scale(0.99); }
    100% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
  }

.about .aboutImg .aboutImg:hover{  filter: brightness(1.2) contrast(1.1);
  transition: filter 0.5s ease;}
  .about .aboutImg .aboutImg {
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.96);
    transition: filter 0.5s ease;
  }
  @keyframes scale {
    0% {
      transform: translate(-50%, -50%) scale(1);
    }
    30% {
      transform: translate(-50%, -50%) scale(1.1);
    }
    100% {
      transform: translate(-50%, -50%) scale(1);
    }
  }

.about .about-main.motion .button{border: #fff 1px solid;padding: 8px 16px;border-radius: 50px;color: #fff;font-size: 18px;width: 165px;margin: 0 auto;transition: all 0.3s;position: absolute;bottom: 7%;left: 50%;transform: translate(-50%,30%); opacity: 0;
  animation: fadeUp 0.8s ease-out 1s forwards;}

  
@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0) translateX(-50%);
  }
}
.about .about-main.motion .aboutTxt .char{ display: inline-block;
  opacity: 0;
  animation: typeIn 0.2s ease forwards;
  animation-delay: calc(0.06s * var(--char-index));}

.about .about-main.motion .button{overflow:hidden;transition:color 0.6s ease;}
.about .about-main.motion .button::before{content:'';position:absolute;bottom:0;left:0;width:100%;height:0;background:#fff;transition:height 0.6s cubic-bezier(0.4,0,0.2,1);z-index:-1;}
.about .about-main.motion .button:hover{color:#000;}.about .about-main.motion .button:hover::before{height:100%;}
.about .about-main.motion .button:hover img{filter: invert(1);}


.bestProduct {width: 100%;background: #fff;}
.bestProduct .inner {width: 90%;margin: 0 auto;padding-top: 180px;box-sizing: border-box;overflow: hidden;}
.bestProduct .inner .top {display: flex;justify-content: space-between;text-align: center;}
.bestProduct .inner.motion .top .title{font-size: 72px;}
.bestProduct .inner .top .button{font-size:18px;margin-right:50px;margin-top:30px;position:relative;overflow:hidden;transition:color 0.6s ease;}
.bestProduct .inner .top .button::before{content:'';position:absolute;bottom:0;left:0;width:100%;height:0;background:#000; transition:height 0.6s cubic-bezier(0.4,0,0.2,1);z-index:0;}
.bestProduct .inner .top .button:hover{color:#fff;}
.bestProduct .inner .top .button:hover a {color: #fff; position: relative; z-index: 0;}
.bestProduct .inner .top .button:hover::before{height:100%;} 
.bestProduct .inner .top .button:hover img{filter:invert(1);}




.bestProduct .inner .contents {width: 100%;margin-top: 130px;}
.bestProduct .inner .contents ul {display: flex;justify-content: space-between;flex-wrap: wrap;width: 100%;}
.bestProduct .inner .contents ul li.blank {opacity: 0;}
.bestProduct .inner .contents ul li {margin-bottom: 70px;width: 24%;position: relative;transform: translateY(100px);opacity: 0;}

.bestProduct .inner .contents ul li:nth-child(8) {transform: translateY(0);opacity: 0;}
.bestProduct .inner .contents ul li:hover .bag {opacity: 1;transition: all 0.4s;}
.bestProduct .inner .contents ul li .bag {position: absolute;top: 20px;right: 20px;opacity: 0;transition: all 0.4s;}
.bestProduct .inner .contents ul li.man:hover a img:last-child {filter: none;}
.bestProduct .inner .contents ul li a img {width: 100%;transition: all 0.4s;}
.bestProduct .inner .contents ul li .name {margin-top: 10px;font-weight: 500;font-size: 16px;}
.bestProduct .inner .contents ul li .subText{margin-top: 5px;font-size: 14px;font-weight: normal;color: #666666;}
.bestProduct .inner .contents ul li .price{margin-top: 10px;font-size: 16px;font-weight: 500}
.bestProduct .inner .contents ul li video{object-fit: cover;width: 100%;}
.bestProduct .inner .contents ul li a img {width: 100%;transition: all 0.4s;}
.bestProduct .inner .contents ul li a img {position: relative;}
.bestProduct .inner .contents ul li a .package {position: absolute;top: 0;left: 0;opacity: 0;}
.bestProduct .inner .contents ul li:hover .package {opacity: 1;}
.bestProduct .inner .contents ul li .bag:hover {cursor: pointer;scale: 1.1;}


@keyframes imgup{
  0%{transform: translateY(300px); opacity: 0;}
  50%{ opacity: 0;}
  100%{transform: translateY(0px); opacity: 1;}
}
@keyframes imgup2{
  0%{transform: translateY(300px) translateX(-50%); opacity: 0;}
  50%{ opacity: 0;transform: translateX(-50%);}
  100%{transform: translateY(0px) translateX(-50%); opacity: 1;}
}

@keyframes slidedown{
  0%{transform: translateY(-30px);opacity: 0;}
  40%{transform: translateY(-30px);opacity: 0;}
}
.bestProduct .inner.motion .top .char { display: inline-block;
  animation: slidedown 0.6s cubic-bezier(.5, 0, .5, 1) both;
  animation-delay: calc(20ms * var(--char-index));
}
.stores .inner.motion .top .char { display: inline-block;
  animation: slidedown 0.6s cubic-bezier(.5, 0, .5, 1) both;
  animation-delay: calc(20ms * var(--char-index));
}


@keyframes opacity{
  0%{ opacity: 0;}
  60%{opacity: 0;}
  100%{opacity: 1;}
}
.bestProduct .inner.motion .top .button{animation:  opacity 0.8s;transition: all 0.5s;}
.stores .inner.motion .top .button{animation:  opacity 0.8s;transition: all 0.5s;}


/* stores */
.stores {width: 100%;padding-bottom: 100px;background: #fff;}
.stores .inner {width: 90%;margin: 0 auto;padding-top: 300px;box-sizing: border-box;}
.stores .inner .top {display: flex;justify-content: space-between;text-align: center;margin-bottom: 100px;}
.stores .inner .top .title{font-size: 72px;}

.stores .inner .btn{display: flex;}
/* .stores .inner .btn .button {font-size: 18px;position: relative; margin:0 auto 80px;width: 180px;}
.stores .inner .btn .button .arrow {display: inline-block;margin-left: 5px;}
.stores .inner .btn .button:hover{background: #1d1d1d; color:#fff;border: none;}
.stores .inner .btn .button:hover img{filter: invert(1);} */

.stores .inner .btn .button{font-size:18px;position:relative;margin:0 auto 80px;width:180px;overflow:hidden;transition:color 0.6s ease;}
.stores .inner .btn .button .arrow{display:inline-block;margin-left:5px;position:relative;z-index:2;}
.stores .inner .btn .button::before{content:'';position:absolute;bottom:0;left:0;width:100%;height:0;background:#000;transition:height 0.6s cubic-bezier(0.4,0,0.2,1);z-index:1;}
.stores .inner .btn .button:hover{color:#fff;}
.stores .inner .btn .button:hover a {color: #fff; position: relative; z-index: 1000;}
.stores .inner .btn .button:hover::before{height:100%;}
.stores .inner .btn .button:hover img{filter:invert(1);}

.stores .inner.motion .subtitle {font-size: 36px;text-align: center;margin-bottom: 100px;}

.stores .inner .swiper.slideBox {width: 100%;position: relative;}
.stores .inner .swiper.slideBox .swiper-wrapper .swiper-slide {width: 120%}
.stores .inner .swiper.slideBox .swiper-wrapper .swiper-slide a .img {width: 100%;position: relative;margin-bottom: 30px;transition:all 0.4s;}
.stores .inner .swiper.slideBox .swiper-wrapper .swiper-slide a .img .mainImg {width: 100%;object-fit: cover;transition: all 0.4s;;height: 400px}
.stores .inner .swiper.slideBox .swiper-wrapper .swiper-slide a .img .hoverText {position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);color: #fff;text-align: center;opacity: 0;transition: all 0.4s;width: 100%;display: flex;justify-content: center;align-items: center;}
.stores .inner .swiper.slideBox .swiper-wrapper .swiper-slide a .img .hoverText .text {font-family: 'Tamburins Original Regular';font-size: 30px;}
.stores .inner .swiper.slideBox .swiper-wrapper .swiper-slide a .img .hoverText .arrow {display: inline-block;margin-left: 10px;border: 1px solid #fff;border-radius: 50%;padding: 10px 8px;margin-top: 8px;}
.stores .inner .swiper.slideBox .swiper-wrapper .swiper-slide a .img .hoverText .arrow img {width: 100%;height: 100%;object-fit: cover;}

.stores .inner .swiper.slideBox .swiper-wrapper .swiper-slide .bottomText {display: flex;justify-content: space-between;}
.stores .inner .swiper.slideBox .swiper-wrapper .swiper-slide .bottomText .storeName {font-size: 18px;font-weight: 500;}
.stores .inner .swiper.slideBox .swiper-wrapper .swiper-slide .bottomText span {display: block;font-size: 14px;text-align: right;}

@keyframes typeIn {
  from { opacity: 0; }
  to {opacity: 1; }
}
.stores .inner.motion .subtitle .char{ display: inline-block;
  opacity: 0;
  animation: typeIn 0.1s ease forwards;
  animation-delay: calc(0.03s * var(--char-index));}

/* img hover 효과 */
.stores .inner .swiper.slideBox .swiper-wrapper .swiper-slide a .img:hover .mainImg{filter: brightness(50%);transition: all 0.4s;}
.stores .inner .swiper.slideBox .swiper-wrapper .swiper-slide a .img:hover .hoverText {opacity: 1;transition:all 0.4s;transform: translate(-50%,-50%);z-index: 2;}

/* 슬라이드 흐리게 + 크기 조절 */
.swiper-slide {
  transform: scale(0.9);
  transition: all 0.4s;
  opacity: 0.4;
  color: transparent;
}

.swiper-slide-prev,
.swiper-slide-next {
  transform: scale(0.9);
  opacity: 0.6;
}

.swiper-slide-active {
  transform: scale(1.2); /* 가운데 슬라이드 더 크게 */
  opacity: 1;
  z-index: 10;
  color: #1d1d1d;
}

/* philosophy */
.philosophy {width: 100%;height: 100vh;background: #fff;}
.philosophy .inner {width: 100%;height: 100%;position: relative;margin: 0 auto;}
.philosophy .inner .mainText {font-size: 72px;text-transform: uppercase;text-align: center;padding: 400px 200px;}

.philosophy .inner .eggImg {position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 30%;}
.philosophy .inner .eggImg .egg1 {width: 100%;object-fit: contain;position: absolute;top: 50%;left: -10%;transform: translateY(-50%)}
.philosophy .inner .eggImg .egg2 {width: 92%;object-fit: contain;position: absolute;top: 50%;left: 9.5%;transform: translateY(8%)}

.footerWrap{position: relative;height: 100vh;width: 100%;background: #fff;}
.footerWrap .bg{width: 100%;position: absolute;bottom: 0;left: 0;}
.footerWrap .bg img{width: 100%;}
.footerWrap .footerInner{position: absolute;top: 58%;left: 50%;transform: translateX(-50%);width: 90%;color: #18130c;}
.footerWrap .footerInner .brandName{font-size: 100px;letter-spacing: -2px;text-shadow: 2px 2px 2px rgba(0,0,0,0.5);color: #848483;margin-bottom: 10px;font-weight: normal;}
.footerWrap .footerInner .center{display: flex;justify-content: space-between;padding: 20px 0;align-items: flex-end;line-height: 1.6;border-bottom: 1px solid #57442a;margin: 0 20px;}
.footerWrap .footerInner .center .footerRight{display: flex;}
.footerWrap .footerInner .center .footerRight .add{margin-right: 40px;}
.footerWrap .footerInner .center .footerRight .sns li a:hover{color: #fff;}
.footerWrap .footerInner .tam{text-align: center;padding-top: 10px;}


/*반응형 태블릿 */
@media screen and (max-width:1024px) {
  /* 헤더 */
  header .innerheader {padding: 0;height: 70px;width: 95%;}
  header .innerheader .list {display: none}
  header .innerheader nav a:nth-child(3){display: none;}
  header .innerheader .set {display:none}
  header .innerheader .logo{width: 50px;}
  header .innerheader nav {width: 110px;}
/* 헤더 햄버거 메뉴 */
  header .innerheader nav .menubar {display:block;text-align: right;border: none;background: none;cursor: pointer;}

  header .innerheader nav .menuwrap {width: 390px;height: 100vh;background: #fff;color: black;position: fixed;right: -700px;top: 0;z-index: 15;padding-top: 40px;transition:all 0.4s;opacity:0;display: block;overflow: hidden;} 
  header .innerheader nav .menuwrap.on {right: 0;opacity: 1;}


  header .innerheader nav .menuwrap .category {display: flex;justify-content: space-between;padding: 0 25px 20px 25px;font-size: 24px}
  header .innerheader nav .menuwrap .closebtn {background: none;border: none;cursor: pointer;}
  header .innerheader nav .menuwrap .closebtn img {display: block;width: 100%;}
  header .innerheader nav .menuwrap .text {text-align: left;height:100vh;width: 100%; overflow-y: auto;padding-bottom: 100px;scrollbar-width: none;}
  header .innerheader nav .menuwrap .text .menuBusiness {font-size: 16px;color: #111;font-weight:600;padding: 15px 15px 15px;border-bottom: 1px solid #eee;display: flex;justify-content: space-between;}
  header .innerheader nav .menuwrap .text .menuBusiness.shop {border-top: 1px solid #eee;margin-top: 50px;}
  header .innerheader nav .menuwrap .text .menuBusiness span {transform: rotate(0deg);}
  header .innerheader nav .menuwrap .text .menuBusiness span.up {transform: rotate(180deg);}
  header .innerheader nav .menuwrap .bottomMenu {margin-top: 20px;color: #666;font-size: 16px;}
  header .innerheader nav .menuwrap .bottomMenu a {display: block;margin-bottom: 15px;padding-left: 15px;}

  header .innerheader nav .menuwrap .text .hideSubmenu p:hover {color: #1d1d1d;transition: all 0.4s;}
 
 
  /* 메뉴열었다닫기 */
  header .innerheader nav .menuwrap .text .hideSubmenu p{font-size: 16px;color: #8c8c8c;padding: 15px 15px 15px;border-bottom: 1px solid #eee;}

  /* 서브메뉴숨기기 */
  header .innerheader nav .menuwrap .text .hideSubmenu {display:none;}
  header .innerheader nav .menuwrap .text .hideSubmenu.hide {display: block;}

  .wrap.on{filter: none;}
  .cartPage .cartInner .title{margin-bottom: 10px;}
/* visual */
.visual{height: 130vh;}
.visual .txt .title {font-size: 120px; letter-spacing: -6px;}
.visual .txt .sub {display: block;}
.visual .txt .sub .sub1 {font-size: 50px; margin-right: 50px; display: inline;}
.visual .txt .sub .sub2 {font-size: 38px; margin-right: 50px;}
.visual .txt .sub .sub3 {font-size: 50px;}
.visual .txt .des { font-size: 20px; line-height: 36px; margin-top: 45%;}
.visbutton{margin-top: 3%;}

/* about */
.about{height: 100vh;}
.about{width: 100%;position: relative;height: 150vh;overflow: hidden;background: #000;}
.about .slash{margin: 100px auto 20px; width: 70px;}
.about .about-main .about-title{font-size: 70px;color: #fff;text-align: center;}
.about .aboutTxt{font-size: 33px;}
.about .aboutImg .aboutImg{width: 70%; top: 80%}
.about .aboutImg .aboutImg img{width: 100%;}
.about .about-main.motion .button{font-size: 14px; width: 150px; padding: 10px 8px;}

  /* Best Product */
  .bestProduct .inner .top {margin-bottom:10px;}
  .bestProduct .inner.motion .top .title{font-size: 60px;}
  .bestProduct .inner .top .button{font-size: 14px; width: 150px; padding: 10px 8px;}
  .bestProduct .inner .top .button .arrow {margin-left: 5px;}
  .bestProduct .inner .contents ul li {margin-bottom: -70px; width: 24%;}
  .bestProduct .inner .contents ul li .subText{margin-top: 5px;font-size: 12px;font-weight: normal;color: #666666;}
  .bestProduct .inner .contents ul li .price{margin-top: 10px;font-size: 16px;font-weight: 500}
  
/* stores */
.stores .inner .top .title {font-size: 70px;}
.stores .inner.motion .subtitle {font-size: 30px;}
.stores .inner .top .button{font-size: 14px; width: 160px; padding: 10px 8px;}
.stores .inner .swiper.slideBox .swiper-wrapper .swiper-slide a .img .hoverText .text {font-size: 28px;}
.stores .inner .swiper.slideBox .swiper-wrapper .swiper-slide .bottomText .storeName {font-size: 15px;width: 50%;}
.stores .inner .swiper.slideBox .swiper-wrapper .swiper-slide .bottomText .adress{width: 60%; font-size: 14px; text-align: right;}
.stores .inner .swiper.slideBox .swiper-wrapper .swiper-slide .bottomText span{ font-size: 12px;}
.stores .inner .swiper.slideBox .swiper-wrapper .swiper-slide .bottomText span:nth-child(1){margin-top: 10px;}

/* philosophy*/
.philosophy {width: 100%;height: 90vh;background: #fff;}
.philosophy .inner {width: 100%;height: 100%;position: relative;margin: 0 auto;}
.philosophy .inner .mainText {font-size: 62px;text-transform: uppercase;text-align: center;padding: 255px 200px;}
.philosophy .inner .eggImg {top:65%}
.philosophy .inner .eggImg .egg2 {left:9.8%}

/* footer*/
.footerWrap{height: 80vh;}
.footerWrap .footerInner{position: absolute;top: 60%;left: 50%;transform: translateX(-50%); width: 90%;color: #18130c;}
.footerWrap .footerInner .brandName{font-size: 50px;}
.footerWrap .footerInner .center{font-size: 12px;}
.footerWrap .footerInner .tam{font-size: 12px;}

}



@media screen and (max-width:760px){
  .searchPage .top .title{font-size: 50px;}
  .searchPage .top .close{font-size: 16px;padding: 8px 16px}
  .searchPage .center{width: 400px;}
  .searchPage .center .searchInput{font-size: 16px;}
  .searchPage .center .searchBtn{font-size: 16px;}
  .cartPage{width: 373px;}
  .cartPage .cartInner{padding: 40px 10px;}
  .cartPage .cartInner .title{justify-content: space-between;font-size: 24px;margin-bottom: 20px;}
  .cartPage .cartInner .box .right .top .no{display: none;}
  .cartPage .cartInner .box .right{width: 200px;}
  .cartPage .cartInner .box .right .top .product{font-size: 14px;}
  .cartPage .cartInner .box .right .bottom .won{margin-top: 10px;margin-bottom: 60px;font-family:'Pretendard',sans-serif ;}
  .cartPage .cartInner .box .right .bottom .numset{display: flex;justify-content: space-between;}
  .cartPage .cartInner .box .right .bottom .numset .delete{font-size: 12px;border-bottom: 1px solid #999;cursor: pointer;opacity: 1;}
  .cartPage .cartInner .total{display: none}
.cartPage .cartInner .del{display: none;}
.cartPage .cartInner .shopping{display: none;}
.cartPage .cartInner .purBtn{display: none;}
.cartPage .cartInner .purBtn2{display: block;position: absolute;width: 95%;bottom: 20px;}


/* visual */
.visual{height: 130vh;}
.visual .txt .title {font-size: 98px; letter-spacing: -4px;}
.visual .txt .sub {display: block;}
.visual .txt .sub .sub1 {font-size: 32px; margin-right: 30px; display: inline;}
.visual .txt .sub .sub2 {font-size: 26px; margin-right: 30px;}
.visual .txt .sub .sub3 {font-size: 32px;}
.visual .txt .des {font-size: 16px; line-height: 30px; margin-top:60%;}



/* about */
.about{height: 110vh;}
.about .slash{margin: 100px auto 20px; width: 40px; height: auto;}
.about .slash img{width: 100%;}
.about .about-main .about-title{font-size: 40px;color: #fff;text-align: center;}
.about .aboutImg {height: 90vh;}

.about .aboutTxt{font-size: 20px; top:82%}
.about .about-main.motion .button{font-size: 14px; width: 150px; padding: 10px 8px;}
.about .aboutImg .ellipse{position: absolute; top: 50%; left: 50%; width:250%; align-items: center; }
.about .aboutImg .ellipse img{width: 100%; height: auto;}
.about .aboutImg .ellipse.a{width: 250%;}
.about .aboutImg .ellipse img {width: 100%; height: auto;}

/* BestProduct */
.bestProduct .inner.motion .top .title{font-size: 40px;}
.bestProduct .inner .top .button{font-size:14px; width: 150px; padding: 10px 8px;}
.bestProduct .inner .contents {width: 100%; margin-top: 130px;}
.bestProduct .inner .contents ul {display: flex;justify-content: space-between;flex-wrap: wrap;width: 100%;}
.bestProduct .inner .contents ul li:nth-child(1) {display: block; width: 100%;}
.bestProduct .inner .contents ul li:nth-child(2) {display: none}
.bestProduct .inner .contents ul li {width: 49%; padding-bottom:100px; display: flex ;flex-direction: column;}
.bestProduct .inner .contents ul li.blank{display: none;}
.bestProduct .inner .contents ul li:last-child {display: none; width: 0;}
.bestProduct .inner .contents ul li .name {margin-top: 15px;font-size: 20px;}
.bestProduct .inner .contents ul li .subText{margin-top: 5px;font-size: 16px;}
.bestProduct .inner .contents ul li .price{margin-top: 10px;font-size: 20px;}

/* stores */
.stores .inner .top{text-align: center; font-size: 40px;}
.stores .inner .top .title{font-size: 40px;}
.stores .inner.motion .subtitle {font-size: 22px; text-align: center;}
.stores .inner .btn .button {font-size: 14px; width: 150px; padding: 10px 8px;}
.stores .inner .swiper.slideBox .swiper-wrapper .swiper-slide a .img .hoverText .arrow {display:none}
.stores .inner .swiper.slideBox .swiper-wrapper .swiper-slide .bottomText{display: none;}

/* philosophy*/
.philosophy {height: 90vh;}
.philosophy .inner .mainText {font-size: 40px;}


/* footer*/
.footerWrap{height: 50vh;}
.footerWrap .bg{width: 100%;position: absolute;bottom: 0;left: 0;}
.footerWrap .footerInner{position: absolute;top: 55%;left: 50%;transform: translateX(-50%); width: 90%;color: #18130c;}
.footerWrap .footerInner .brandName{font-size: 50px;}
.footerWrap .footerInner .center{font-size: 12px;}
.footerWrap .footerInner .tam{font-size: 12px;}
}

@media screen and (max-width:390px){
  header .innerheader nav .menuwrap {width: 390px;}
  header .innerheader {height: 50px;}
  header .innerheader nav {width: 100px;}
  header .innerheader nav .menuwrap .bottomMenu a {padding-left: 25px;}
  header .innerheader nav .menuwrap .text .menuBusiness {padding: 15px 25px 15px;}
  header .innerheader nav .menuwrap .category { padding: 0 25px 20px 25px;}
  header .innerheader nav .menuwrap .text .hideSubmenu p{padding: 15px 25px 15px;}
  .wrap.on{filter: none;}
  .searchPage .top .title{font-size: 30px;}
  .searchPage .top .close{font-size: 16px;padding: 4px 16px}
  .searchPage .center{width: 330px;}
  .searchPage .center .searchInput{font-size: 16px;}
  .searchPage .center .searchBtn{font-size: 16px;}
  .cartPage{width: 390px;}
  .cartPage .cartInner{padding: 40px 30px;}
  .cartPage .cartInner .title{justify-content: space-between;font-size: 24px;margin-bottom: 20px;}
  .cartPage .cartInner .box .right .top .no{display: none;}
  .cartPage .cartInner .box .right{width: 200px;}
  .cartPage .cartInner .box .right .top .product{font-size: 14px;}
  .cartPage .cartInner .box .right .bottom .won{margin-top: 10px;margin-bottom: 60px;font-family:'Pretendard',sans-serif ;}
  .cartPage .cartInner .box .right .bottom .numset{display: flex;justify-content: space-between;}
  .cartPage .cartInner .box .right .bottom .numset .delete{font-size: 12px;border-bottom: 1px solid #999;cursor: pointer;opacity: 1;}
  .cartPage .cartInner .total{display: none}
.cartPage .cartInner .del{display: none;}
.cartPage .cartInner .shopping{display: none;}
.cartPage .cartInner .purBtn{display: none;}
.cartPage .cartInner .purBtn2{display: block;width: 330px;margin: 0 auto;}


  /* visual */
  .visual{height: 130vh;}
  .visual .txt .title{ margin-top: 140px; font-size:40px; white-space: nowrap;letter-spacing: 0px;}
  .visbutton { position: absolute;top: 25%;left: 50%;transform: translateX(-50%);animation: imgup2 3.6s;}
  .visual .txt .sub {display: block;}
  .visual .txt .sub .sub1 {font-size: 20px; margin-right: 12px; display: inline;}
  .visual .txt .sub .sub2 {font-size: 16px; margin-right: 12px;}
  .visual .txt .sub .sub3 {font-size: 20px;}
  .visual .txt .des {font-size: 16px; line-height: 30px;width: 95%;margin: 350px auto;animation: typeIn 5s ease forwards;}
  .visual .txt .des br {display: none;}
  .visual .txt .title .word1 {padding-right: 10px;}
  
  /* about */
  .about{height: 100vh;}
  .about .slash{margin: 100px auto 20px; width: 30px; height: auto;}
  .about .slash img{width: 100%;}
  .about .about-main .about-title{font-size: 30px;color: #fff;text-align: center;}
  .about .aboutImg {height: 90vh;}
  .about .aboutImg .aboutImg{width: 100%; top: 80%;}
  .about .aboutImg .aboutImg img{width: 100%;}
  .about .aboutImg .ellipse{position: absolute; top: 50%; left: 50%; width:250%; align-items: center; }
  .about .aboutImg .ellipse img{width: 100%; height: auto;}
  .about .aboutImg .ellipse.a{width: 250%;}
  .about .aboutImg .ellipse img {width: 100%; height: auto;}
  .about .aboutTxt{font-size: 15px; top:75%; width: 100%;left: 70%;}
  .about .about-main.motion .button{font-size: 12px; width: 130px; padding: 10px 8px;}

/* BestProduct */
.bestProduct .inner{padding-top:100px;}
.bestProduct .inner.motion .top{align-items: center; }
.bestProduct .inner.motion .top .title{font-size: 30px;}
.bestProduct .inner .top .button{font-size:12px; width: 130px; padding: 10px 8px; margin: 0;}
.bestProduct .inner .contents {width: 100%; margin-top: 50px;}
.bestProduct .inner .contents ul {display: flex; justify-content: space-between; flex-wrap: wrap; width: 100%;}
.bestProduct .inner .contents ul li:nth-child(1) {display: block; width: 100%;}
.bestProduct .inner .contents ul li:nth-child(2) {display: none}
.bestProduct .inner .contents ul li:last-child {display: none; width: 0;}
.bestProduct .inner .contents ul li.blank{display: none;}
.bestProduct .inner .contents ul li {width: 49%; padding-bottom:100px; display: flex ;flex-direction: column;}
.bestProduct .inner .contents ul li .name {margin-top: 15px;font-size: 15px;}
.bestProduct .inner .contents ul li .subText{margin-top: 5px;font-size: 12px;}
.bestProduct .inner .contents ul li .price{margin-top: 10px;font-size: 15px;}


/* store */
.stores .inner{padding-top: 120px;}
.stores .inner .top{text-align: center; font-size: 24px; margin-bottom: 50px;display: block;}
.stores .inner.motion .title{font-size: 30px;}
.stores .inner.motion .subtitle {font-size: 16px;text-align: center;margin-bottom: 0;}
.stores .inner .btn .button {font-size: 12px; width: 140px; padding: 10px;margin: 50px auto 60px;}
.stores .inner .swiper.slideBox .swiper-wrapper .swiper-slide a .img .hoverText .text{font-size: 20px;}
.stores .inner .swiper.slideBox .swiper-wrapper .swiper-slide a .img .hoverText .arrow {display:none}
.stores .inner .swiper.slideBox .swiper-wrapper .swiper-slide .bottomText{display: none;}

/* philosophy 모바일*/
.philosophy {height: 300px;}
.philosophy .inner {display: flex;align-items: center;justify-content: center;}
.philosophy .inner .mainText {font-size: 24px;padding: 0px;}
.philosophy .inner .eggImg {top:20%;width: 70px;}

/* footer모바일 */
.footerWrap {height: 250px;}
.footerWrap .bg{width: 100%;position: absolute;bottom: 0;left: 0;height: 250px;}
.footerWrap .bg img{height: 100%;width: 100%;object-fit:cover;}
.footerWrap .footerInner{top:85px}
.footerWrap .footerInner .brandName{font-size: 30px;letter-spacing: -2px;text-shadow: 2px 2px 2px rgba(0,0,0,0.2);color: #848483;margin-bottom: 10px;font-weight: normal;}
.footerWrap .footerInner .center{display: flex;justify-content: space-between;padding: 20px 0; align-items: flex-end; line-height: 1.6; border-bottom: 1px solid #57442a;margin: 0 10px; font-size: 10px; width: 90%;}
.footerWrap .footerInner .center .footerRight .add{display: none;}
.footerWrap .footerInner .tam{font-size: 10px;}

.goTop {position: fixed;bottom: 15px;right: 15px;cursor: pointer;text-align: center;width: 30px;height: 30px;font-weight:300;display: none;opacity: 0;  transition: opacity 0.3s ease;border-radius: 50%;background: url(../img/arrowwhite.png) no-repeat center rgba(0, 0, 0, 0.2);transform: rotate(270deg);background-size: 20px;}
.goTop.on {display: block;opacity: 1;}

}



@media screen and (max-width:389px){
  header .innerheader nav .menuwrap {width: 280px;}
  .cartPage{width: 307px;}
}