@keyframes wobble-vertical-on-hover{16.65%{-webkit-transform:translateY(8px);transform:translateY(8px)}33.3%{-webkit-transform:translateY(-6px);transform:translateY(-6px)}49.95%{-webkit-transform:translateY(4px);transform:translateY(4px)}66.6%{-webkit-transform:translateY(-2px);transform:translateY(-2px)}83.25%{-webkit-transform:translateY(1px);transform:translateY(1px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes wobble-vertical-on-hover2{0%,20%,100%{-webkit-transform:translateY(0);transform:translateY(0)}10%{-webkit-transform:translateY(8px);transform:translateY(8px)}}@-webkit-keyframes bHover{0%{background-color:rgba(0,0,0,0)}100%{background-color:hsla(0,0%,100%,.2)}}@keyframes bHover{0%{background-color:rgba(0,0,0,0)}100%{background-color:hsla(0,0%,100%,.2)}}@-webkit-keyframes pop-on-hover{50%{-webkit-transform:scale(1.2);transform:scale(1.2)}}@keyframes pop-on-hover{50%{-webkit-transform:scale(1.2);transform:scale(1.2)}}@-webkit-keyframes pagerEffect{0%{opacity:.3}40%{opacity:.5;box-shadow:0 0 0 2px hsla(0,0%,100%,.1),0 0 10px 10px #333,0 0 0 10px hsla(0,0%,100%,.5)}100%{box-shadow:0 0 0 2px hsla(0,0%,100%,.1),0 0 10px 10px #333,0 0 0 10px hsla(0,0%,100%,.5);-webkit-transform:scale(1.5);opacity:0}}@-webkit-keyframes scrollDown{0%{opacity:1;top:29%}15%{opacity:1;top:50%}50%{opacity:0;top:50%}100%{opacity:0;top:29%}}@keyframes timeLine{0%{width:0%}100%{width:100%}}@keyframes txtBracket{0%,100%{opacity:0}50%{opacity:1}}@keyframes txtChange{0%,20%,100%{transform:translate3d(0, -37%, 0)}25%,45%{transform:translate3d(0, -12%, 0)}50%,70%{transform:translate3d(0, 13%, 0)}75%,95%{transform:translate3d(0, 38%, 0)}}@-webkit-keyframes loading{0%{-webkit-transform:scale(0);opacity:0}50%{opacity:1}100%{-webkit-transform:scale(1);opacity:0}}@keyframes FadeText{from{opacity:.1}to{opacity:1}}:root{--best-wid: 120%}.mainTit{color:#121212;font-size:clamp(28px,4vw,56px);line-height:1.5;font-family:"MontserratMedium"}.mainCont{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-ms-flex-direction:column;flex-direction:column;gap:clamp(50px,10vw,180px);margin-top:clamp(40px,6vw,80px);margin-bottom:var(--insta-gap)}.mainSlide{width:100%;height:98vh;background:#d3d3d3}.mainSlide .swiper-wrapper .swiper-slide{background-position:center bottom;background-size:cover}.mainSlide .swiper-wrapper .swiper-slide.vis01{background-image:url("/images/Eonevolution/Homepage/main/mainVis01.jpg")}.mainSlide .swiper-wrapper .swiper-slide.vis02{background-image:url("/images/Eonevolution/Homepage/main/mainVis02.jpg")}.mainSlide .swiper-wrapper .swiper-slide.vis03{background-image:url("/images/Eonevolution/Homepage/main/mainVis03.png")}.mainSlide .swiper-wrapper .swiper-slide::after{content:"";position:absolute;bottom:-1px;left:0;width:100%;height:20%;background:linear-gradient(to top, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%);pointer-events:none}.mainSlide .swiper-wrapper .swiper-button-next i,.mainSlide .swiper-wrapper .swiper-button-prev i{color:#bbb;font-size:clamp(40px,5vw,65px);-webkit-transition:all .5s;-moz-transition:all .5s;-ms-transition:all .5s;-o-transition:all .5s;transition:all .5s}.mainSlide .swiper-wrapper .swiper-button-next:after,.mainSlide .swiper-wrapper .swiper-button-prev:after{display:none}.mainSlide .swiper-wrapper .swiper-button-next:hover i,.mainSlide .swiper-wrapper .swiper-button-prev:hover i{color:#777}.mainSlide .swiper-button-prev{left:clamp(10px,2vw,40px) !important;top:50% !important}.mainSlide .swiper-button-next{right:clamp(10px,2vw,40px) !important;top:50% !important}.mainBest{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-ms-flex-direction:column;flex-direction:column;gap:clamp(50px,10vw,120px)}.mainBest .titWrap{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:clamp(20px,2.5vw,40px)}.mainBest .titWrap .mainTit{text-align:center}.mainBest .titWrap .bestBtn{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:clamp(20px,3vw,40px);border:1px solid #222;color:#222;font-size:clamp(14px,1.2vw,17px);width:fit-content;padding:clamp(4px,.5vw,6px) clamp(4px,.5vw,6px) clamp(4px,.5vw,6px) clamp(14px,1.5vw,20px);border-radius:9999px;overflow:hidden;position:relative;transition:color .4s ease,border-color .4s ease;text-decoration:none}.mainBest .titWrap .bestBtn::before{content:"";position:absolute;inset:0;background:#222;border-radius:9999px;transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(0.77, 0, 0.18, 1);z-index:0}.mainBest .titWrap .bestBtn:hover::before{transform:scaleX(1)}.mainBest .titWrap .bestBtn:hover{color:#fff}.mainBest .titWrap .bestBtn span{position:relative;z-index:1;transition:letter-spacing .3s ease}.mainBest .titWrap .bestBtn:hover span{letter-spacing:.04em}.mainBest .titWrap .bestBtn .iconWrap{width:clamp(30px,3vw,40px);height:clamp(30px,3vw,40px);border-radius:50%;background:#222;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:relative;z-index:1;overflow:hidden;flex-shrink:0;transition:background .4s ease}.mainBest .titWrap .bestBtn .iconWrap i{color:#fff;position:absolute;transition:transform .35s cubic-bezier(0.77, 0, 0.18, 1),opacity .25s ease}.mainBest .titWrap .bestBtn .iconWrap i.iconMain{transform:translateX(0);opacity:1}.mainBest .titWrap .bestBtn .iconWrap i.iconClone{transform:translateX(-140%);opacity:0}.mainBest .titWrap .bestBtn:hover .iconWrap{background:#fff}.mainBest .titWrap .bestBtn:hover .iconWrap i{color:#222}.mainBest .titWrap .bestBtn:hover .iconWrap .iconMain{transform:translateX(140%);opacity:0}.mainBest .titWrap .bestBtn:hover .iconWrap .iconClone{transform:translateX(0);opacity:1}.mainBest .bestWrap{width:100%;overflow:hidden}.mainBest .bestWrap .bestCont{overflow:hidden;width:var(--best-wid);margin-left:calc((var(--best-wid) - 100%)/2*-1)}.mainBest .bestWrap .bestCont .swiper-wrapper .swiper-slide{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-ms-flex-direction:column;flex-direction:column;gap:clamp(12px,2vw,20px)}.mainBest .bestWrap .bestCont .swiper-wrapper .swiper-slide .imgBox{position:relative;background:#f7f7f7;border-radius:12px;width:100%;height:max-content;aspect-ratio:1/1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-moz-box-shadow:0px 2px 2px 1px rgba(0,0,0,.05);-webkit-box-shadow:0px 2px 2px 1px rgba(0,0,0,.05);box-shadow:0px 2px 2px 1px rgba(0,0,0,.05);cursor:none}.mainBest .bestWrap .bestCont .swiper-wrapper .swiper-slide .imgBox>a{position:absolute;top:clamp(10px,1.2vw,15px);right:clamp(10px,1.2vw,15px);z-index:5;background:#fff;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:clamp(20px,2vw,25px);height:clamp(20px,2vw,25px);border-radius:50%;-moz-box-shadow:0px 2px 2px 1px rgba(0,0,0,.05);-webkit-box-shadow:0px 2px 2px 1px rgba(0,0,0,.05);box-shadow:0px 2px 2px 1px rgba(0,0,0,.05);-webkit-transition:all .5s;-moz-transition:all .5s;-ms-transition:all .5s;-o-transition:all .5s;transition:all .5s}.mainBest .bestWrap .bestCont .swiper-wrapper .swiper-slide .imgBox>a i{color:#777;font-size:clamp(11px,1vw,13px)}.mainBest .bestWrap .bestCont .swiper-wrapper .swiper-slide .imgBox>a:hover{background:#222}.mainBest .bestWrap .bestCont .swiper-wrapper .swiper-slide .imgBox>a:hover i{color:#fff}.mainBest .bestWrap .bestCont .swiper-wrapper .swiper-slide .imgBox>img{max-height:68%}.mainBest .bestWrap .bestCont .swiper-wrapper .swiper-slide .imgBox .customCursor{position:absolute;width:clamp(80px,8vw,120px);height:clamp(80px,8vw,120px);border-radius:50%;background:rgba(183,187,174,.5);backdrop-filter:blur(8px);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;pointer-events:none;opacity:0;transform:translate(-50%, -50%);transition:opacity .2s ease;z-index:10}.mainBest .bestWrap .bestCont .swiper-wrapper .swiper-slide .imgBox .customCursor span{color:#fff;font-size:clamp(12px,1.2vw,15px);white-space:nowrap;font-family:"MontserratMedium"}.mainBest .bestWrap .bestCont .swiper-wrapper .swiper-slide .imgBox:hover .customCursor{opacity:1}.mainBest .bestWrap .bestCont .swiper-wrapper .swiper-slide .txtBox{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-ms-flex-direction:column;flex-direction:column;gap:clamp(8px,1.5vw,25px);padding:0 clamp(6px,1vw,10px)}.mainBest .bestWrap .bestCont .swiper-wrapper .swiper-slide .txtBox .name{color:#9a9a9a;font-size:clamp(14px,1.2vw,17px);font-family:"PretendardLight"}.mainBest .bestWrap .bestCont .swiper-wrapper .swiper-slide .txtBox .detail{display:none}.mainBest .bestWrap .bestCont .swiper-wrapper .swiper-slide.isCenterSlide .imgBox{aspect-ratio:4/5;-moz-box-shadow:0px 2px 5px 4px rgba(0,0,0,.05);-webkit-box-shadow:0px 2px 5px 4px rgba(0,0,0,.05);box-shadow:0px 2px 5px 4px rgba(0,0,0,.05)}.mainBest .bestWrap .bestCont .swiper-wrapper .swiper-slide.isCenterSlide .txtBox{align-items:center;margin-top:clamp(10px,2vw,30px)}.mainBest .bestWrap .bestCont .swiper-wrapper .swiper-slide.isCenterSlide .txtBox .name{white-space:normal;line-height:20px;max-height:20px;word-break:break-all;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;color:#000;font-size:clamp(16px,1.8vw,22px);font-family:"PretendardMedium"}.mainBest .bestWrap .bestCont .swiper-wrapper .swiper-slide.isCenterSlide .txtBox .detail{display:flex;color:#777;font-size:clamp(13px,1.2vw,16px);text-align:center;white-space:normal;line-height:1.8;max-height:5.4;word-break:break-all;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.mainBest .bestWrap .swiperProgress{display:flex;align-items:center;gap:clamp(8px,1.5vw,16px);width:clamp(200px,30vw,350px);margin:clamp(40px,6vw,70px) auto 0}.mainBest .bestWrap .swiperProgress .currentNum,.mainBest .bestWrap .swiperProgress .totalNum{font-size:clamp(12px,1.2vw,14px);font-weight:700;min-width:2ch;color:#111}.mainBest .bestWrap .swiperProgress .totalNum{color:#ccc}.mainBest .bestWrap .swiperProgress .totalNum.isLast{color:#111}.mainBest .bestWrap .swiperProgress .progressBar{flex:1;height:2px;background-color:#e0e0e0;border-radius:2px;overflow:hidden}.mainBest .bestWrap .swiperProgress .progressBar .progressFill{height:100%;width:0%;background-color:#111;border-radius:2px;transition:width .4s ease}.mainIngredient{position:relative;width:100vw;height:100vh;overflow:hidden}.mainIngredient .bgSlide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .9s ease;will-change:opacity}.mainIngredient .bgSlide.isActive{opacity:1}.mainIngredient .bgSlide[data-tab="0"]{background-image:url("/images/Eonevolution/Homepage/main/mainIngre01.png")}.mainIngredient .bgSlide[data-tab="1"]{background-image:url("/images/Eonevolution/Homepage/main/mainIngre02.png")}.mainIngredient .bgSlide[data-tab="2"]{background-image:url("/images/Eonevolution/Homepage/main/mainIngre03.png")}.mainIngredient .tabNav{position:absolute;top:0;left:0;right:0;z-index:10;display:flex;justify-content:center;padding-top:clamp(16px,2.5vw,28px);gap:0}.mainIngredient .tabNav .tabBtn{background:none;border:none;color:hsla(0,0%,100%,.7);font-family:"MontserratMedium",serif;font-size:clamp(11px,1.2vw,15px);padding:clamp(6px,.8vw,8px) clamp(16px,2.5vw,32px) clamp(12px,1.5vw,16px);position:relative;transition:color .3s ease;white-space:nowrap}.mainIngredient .tabNav .tabBtn::after{content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:0;height:1px;background:hsla(0,0%,100%,.9);transition:width .4s ease}.mainIngredient .tabNav .tabBtn.isActive{color:#fff}.mainIngredient .tabNav .tabBtn.isActive::after{width:calc(100% - 32px)}.mainIngredient .tabNav .tabBtn:hover{color:#fff}.mainIngredient .tabNav .tabDivider{color:hsla(0,0%,100%,.35);font-size:clamp(11px,1vw,13px);display:flex;align-items:center;padding-bottom:8px;user-select:none}.mainIngredient .heroContent{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 clamp(16px,3vw,24px)}.mainIngredient .heroContent .contentPanel{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;transform:translateY(12px);transition:opacity .7s ease .15s,transform .7s ease .15s;pointer-events:none;padding:0 10px;box-sizing:border-box}.mainIngredient .heroContent .contentPanel.isActive{opacity:1;transform:translateY(0);pointer-events:auto}.mainIngredient .heroContent .contentPanel .heroTitle{font-family:"MontserratSemiBold",serif;font-size:clamp(36px,6vw,76px);font-weight:500;color:#fff;letter-spacing:.02em;line-height:1.1;margin-bottom:clamp(16px,2.5vw,28px);text-shadow:0 2px 32px rgba(0,0,0,.12)}.mainIngredient .heroContent .contentPanel .heroDesc{font-size:clamp(13px,1.6vw,18px);color:hsla(0,0%,100%,.92);line-height:1.85;margin-bottom:clamp(28px,4vw,44px)}.mainIngredient .heroContent .contentPanel .btnGroup{display:flex;align-items:center;gap:clamp(14px,2vw,22px);background:hsla(0,0%,100%,.4);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:100px;overflow:hidden;padding:clamp(6px,.8vw,8px) clamp(12px,1.5vw,16px) clamp(6px,.8vw,8px) clamp(6px,.8vw,8px);margin-top:clamp(10px,2vw,30px);transition:background .3s ease,box-shadow .3s ease}.mainIngredient .heroContent .contentPanel .btnGroup:hover{background:hsla(0,0%,100%,.58);box-shadow:0 0 0 1px hsla(0,0%,100%,.4),0 8px 32px hsla(0,0%,100%,.1)}.mainIngredient .heroContent .contentPanel .btnGroup:hover .naturalism{box-shadow:0 2px 12px rgba(0,0,0,.1)}.mainIngredient .heroContent .contentPanel .btnGroup .naturalism{background:#fff;border-radius:100px;padding:clamp(14px,1.8vw,20px);font-family:"MontserratMedium",serif;font-size:clamp(13px,1.2vw,16px);color:#848484;transition:box-shadow .3s ease}.mainIngredient .heroContent .contentPanel .btnGroup>a{color:#fff;font-size:clamp(13px,1.2vw,16px)}.mainBrand{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-ms-flex-direction:column;flex-direction:column;gap:clamp(50px,7vw,80px);width:min(74%,1400px);margin:0 auto}.mainBrand .titWrap{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-ms-flex-direction:column;flex-direction:column;gap:clamp(30px,5vw,70px)}.mainBrand .titWrap .txtCont{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-ms-flex-direction:column;flex-direction:column;gap:clamp(10px,2vw,35px)}.mainBrand .titWrap .txtCont .koTit{color:#222;font-size:clamp(22px,3vw,34px);line-height:1.5;font-family:"PretendardExtraLight"}.mainBrand .titWrap .txtCont .en{color:#999;font-size:clamp(12px,1.2vw,16px);line-height:1.7;font-family:"MontserratLight";text-transform:capitalize}.mainBrand .baWrap{width:100%;max-height:85vh;overflow:hidden;border-radius:12px}.mainBrand .baWrap .baContainer{position:relative;cursor:ew-resize;user-select:none;touch-action:none}.mainBrand .baWrap .baContainer img{display:block;width:100%;height:auto;pointer-events:none}.mainBrand .baWrap .baContainer .baAfter{position:absolute;inset:0;overflow:hidden}.mainBrand .baWrap .baContainer .baAfter img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}.mainBrand .baWrap .baContainer .baDivider{position:absolute;top:0;width:1px;height:100%;background:hsla(0,0%,100%,.5);transform:translateX(-50%);pointer-events:none;z-index:10}.mainBrand .baWrap .baContainer .baHandle{position:absolute;top:50%;width:clamp(40px,5vw,90px);height:clamp(40px,5vw,90px);border-radius:50%;background:hsla(0,0%,100%,.5);transform:translate(-50%, calc(-50% - clamp(40px, 5vw, 90px) / 2));display:flex;align-items:center;justify-content:center;z-index:11;backdrop-filter:blur(12px)}.mainBrand .baWrap .baContainer .baHandle .handleIcon{font-size:clamp(14px,1.5vw,18px);color:#fff;line-height:1}.mainBrand .baWrap .baContainer .baLabel{position:absolute;top:clamp(10px,2%,16px);padding:clamp(4px,.8%,6px) clamp(10px,1.5%,14px);font-size:clamp(10px,1.1vw,12px);letter-spacing:.06em;color:#fff;background:rgba(0,0,0,.2);border-radius:20px;pointer-events:none;z-index:12}.mainBrand .baWrap .baContainer .baLabel.labelBefore{left:clamp(10px,2%,16px)}.mainBrand .baWrap .baContainer .baLabel.labelAfter{right:clamp(10px,2%,16px)}.mainBrand .theWrap{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;gap:clamp(30px,8vw,100px)}.mainBrand .theWrap .titBox{background:#000;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;gap:clamp(12px,2vw,25px);border-radius:10px;width:clamp(180px,18vw,260px);height:clamp(160px,16vw,240px)}.mainBrand .theWrap .titBox p{color:#fff;font-size:clamp(15px,1.6vw,20px);line-height:1.7;font-family:"MontserratMedium";text-align:center}.mainBrand .theWrap .theRowBox{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-ms-flex-direction:column;flex-direction:column;flex:1;border-top:1px solid #000}.mainBrand .theWrap .theRowBox .row{border-bottom:1px solid #eee;padding:clamp(30px,4vw,50px) clamp(10px,5vw,80px);display:-webkit-box;display:-ms-flexbox;display:flex;gap:clamp(10px,3vw,40px)}.mainBrand .theWrap .theRowBox .row .theTit{min-width:clamp(120px,14vw,180px);color:#121212;font-size:clamp(15px,1.5vw,20px);font-family:"MontserratMedium"}.mainBrand .theWrap .theRowBox .row .theDesc{color:#999;font-size:clamp(14px,1.4vw,18px)}
