:root {
  --green-color: #038267;
  --brown-color: #00FE02;
}
main { position: relative;}
.wrap { letter-spacing: -0.035em; line-height: 1.5;}
.inner { position: relative; max-width: 1780px; width: 95%; margin-left: auto; margin-right: auto;}
.inner.s { max-width: 1500px;}
.inner.shop { padding-top: 121px;}
.blind { position: absolute; width: 1px; height: 1px; clip: rect(0 0 0 0); overflow: hidden;}
.hide { opacity: 0; visibility: hidden;}
.flex-1 { flex:1;}
.mla { margin-left: auto;}
.flex-box { display: flex;}
.grid-box { display: grid;}
.highlight-green { color: var(--green-color);}
.no-scroll { overflow-y: hidden;}
.root_daum_roughmap, .wrap_map { width: 100% !important; height: 100% !important; position: absolute !important;}
figure { position: relative; width: 100%; height: 0; padding-bottom: 50%; margin: 0;}
figure > img,
figure > video,
figure > iframe,
figure picture img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.sbj, .desc, .title, .msg, .heading { word-break: break-word; }
.swiper-button-next:after, .swiper-button-prev:after { display: none;}
.swiper-button-next { width: 27px; height: 43px; background: url(../img/slide-arrow-right.png) no-repeat center/auto 100%; right: 0;}
.swiper-button-prev { width: 27px; height: 43px; background: url(../img/slide-arrow-left.png) no-repeat center/auto 100%; left: 0;}
.absolute { position: absolute;}
.mo { display: none;}
.wrap.main { overflow: hidden;}
@media screen and (max-width: 1240px) {
  .pc-n { display: none;}
}
@media screen and (max-width: 1024px) {
  .pc { display: none;}
  .inner.shop { padding-top: 80px;}
}
@media screen and (max-width: 767px) {
  .sbj, .desc, .title, .msg, .heading { word-break: keep-all; }
  .inner.shop { padding-top: 70px;}
  figure > img { object-fit: cover;}
  .tablet { display: none;}
  .inner { width: 90%;}
  .mo { display: block;}
  p { word-break: keep-all;}
  .swiper-button-next,
  .swiper-button-prev { background-size: auto 40%;}
}
html, body { scrollbar-gutter: stable;}

/* Floating */
.floating-container { display: none; z-index: 10; position: fixed; bottom: 50px; right: 50px; }
.floating-container.active { display: block; }
.floating-container .scroll-to a { display: block; margin: auto; width: 50px; height: 50px; background: url("../img/icon-top.png") no-repeat center / auto 100%; border-radius: 50%; transition: ease .6s; margin-top: 5px;}
.floating-container .scroll-to a.btn-kakao { background: url("../img/icon-kakao.png") no-repeat center / auto 100%;}
@media screen and (max-width: 768px) {
  .floating-container { right: 5%; bottom: 24px;}
  .floating-container .scroll-to a { margin-top: 10px;}
}


/* header */
/* header.header { position: fixed; width: 100%; z-index: 100;} */
.wrap.main #hd {position: absolute;width: 100%;height: 100svh;/* z-index: 11; */}
/* .wrap.main #hd h1 { width: 100%; height: 100vh; transition: width 0.5s;} */
/* .wrap.main #hd .hd-logo { background: url('../img/hd-logo.png') no-repeat center;} */
.wrap.main #hd .hd-wrap { height: 100%;}
.wrap.main #hd .hd-wrap .inner { height: 100%;}
.wrap.main #hd .menu-wrap { position: absolute; width: 100%; bottom: 0; z-index: 10; display: flex; justify-content: flex-end;}
.wrap.main #hd .gnb { position: static; bottom: 0; z-index: 10; width: 100%; opacity: 0;}
.wrap #hd .gnb .depth1 { display: flex; justify-content: flex-end; width: 100%; margin-left: auto;}
.wrap #hd .gnb .depth1 > li { position: relative;}
.wrap #hd .gnb .depth1 > li + li{margin-left: 30px;}
.wrap #hd .gnb .depth1 > li > a { padding: 48px 0; display: block; font-weight: 500; font-size: 17px;}
.wrap #hd .gnb .depth1 > li:first-child a { margin-left: 0 !important;}
.wrap #hd .gnb .depth1 > li .depth2 { position: absolute; top: 70%; left: 50%; transform: translateX(-50%); width: auto; max-height: 0; overflow: hidden; background: #fff;  }
.wrap.main #hd .gnb .depth1 > li .depth2 { opacity: 0; visibility: hidden;}
.wrap #hd .gnb .depth1 > li .depth2 a { padding: 4px 30px; font-size: 17px; display: block; text-align: center; text-wrap: nowrap; font-size: 14px; transition: 0.5s; color: #000;}
.wrap #hd .gnb .depth1 > li .depth2 li:first-child a{padding-top: 20px;}
.wrap #hd .gnb .depth1 > li .depth2 li:last-child a{padding-bottom: 20px;}
.wrap #hd .gnb .logo { display: none; margin-bottom: 20px; position: static; transform: none; width: fit-content;}
.wrap.main #hd.fixed .gnb .depth1 > li .depth2 { opacity: 1; visibility: visible; }
.wrap.main #hd.on .menu-wrap { background: #fff; }
.wrap.sub #hd { background: transparent; transition: background 0.5s;}
.wrap.sub #hd { position: fixed; width: 100%; z-index: 10;}
.wrap #hd h1 { top: 50px; position: absolute; z-index: 10; overflow: visible;}
.wrap #hd .logo a { position: relative; display: block;}
.wrap #hd .logo a img { width: 100px; height: 25px !important; }
.wrap #hd .logo a:after { content: ''; display: block; width: 8.6%; height: 33%; background: #000; position: absolute; right: -8.6%; top: -33%;}
.wrap #hd .hd-logo { display: block; width: 138px; height: 29px; background: url(../img/hd-logo.svg) no-repeat center/contain; }
.wrap.sub #hd .gnb { display: flex; width: 100%; justify-content: flex-end; margin-left: auto; background: transparent;}
.wrap.sub #hd .gnb .depth1 { width: 60%;}
.header-primary .hamburger-wrap { display: none; align-items: center; justify-content: flex-end;}
.wrap.sub .header-primary .hamburger-wrap { position: absolute; right: 0; top: 20px;}
.wrap.sub .header-primary .hamburger { opacity: 1;}
.header-primary .hamburger { padding: 0 0 0 16px; width: 50px; height: 50px; opacity: 0; }
.header-primary .hamburger a { overflow: hidden; display: block; position: relative; padding: 14px 0; width: 100%; height: 100%; }
.header-primary .hamburger .bar { display: flex; margin-top: 8px; width: 100%; height: 2px; }
.header-primary .hamburger .bar { transform: translateX(-6px);transition: transform linear(0 0%, 0 2.27%, 0.02 4.53%, 0.04 6.8%, 0.06 9.07%, 0.1 11.33%, 0.14 13.6%, 0.25 18.15%, 0.39 22.7%, 0.56 27.25%, 0.77 31.8%, 1 36.35%, 0.89 40.9%, 0.85 43.18%, 0.81 45.45%, 0.79 47.72%, 0.77 50%, 0.75 52.27%, 0.75 54.55%, 0.75 56.82%, 0.77 59.1%, 0.79 61.38%, 0.81 63.65%, 0.85 65.93%, 0.89 68.2%, 1 72.7%, 0.97 74.98%, 0.95 77.25%, 0.94 79.53%, 0.94 81.8%, 0.94 84.08%, 0.95 86.35%, 0.97 88.63%, 1 90.9%, 0.99 93.18%, 0.98 95.45%, 0.99 97.73%, 1 100%) .65s;}
.header-primary .hamburger .bar:first-child { margin-top: 0; }
.header-primary .hamburger .bar:nth-child(even) { transform: rotate(180deg) translateX(-6px);}
.header-primary .hamburger .bar::before, .header-primary .hamburger .bar::after { content: ''; flex: 1 0 auto; display: block; width: 100%; height: 100%; background: #000; }
.header-primary .hamburger .bar::after { margin-left: 4px; }
.wrap #hd .close { position: absolute; top: 2%; right: 0%; width: 30px; height: 30px; border: none; background: transparent; cursor: pointer; display: none;}
.wrap #hd .close span { position: absolute; top: 50%; left: 50%; width: 70%; height: 2px; background: #000; }
.wrap #hd .close span:first-child { transform: translate(-50%, -50%) rotate(45deg); }
.wrap #hd .close span:last-child { transform: translate(-50%, -50%) rotate(-45deg); }
[data-header-theme="transparent"] { color: #fff; border-bottom-color: rgba(255, 255, 255, .1); }
[data-header-theme="transparent"] .logo { filter: invert(1);}
[data-header-theme="transparent"] .hamburger a { filter: invert(1);}
[data-header-theme="transparent"] .header-language .current::before { filter: invert(1);}
[data-header-theme="transparent"] .header-hamburger span { background: #fff; }
[data-header-theme="transparent"] .header-search .input { background: rgba(255, 255, 255, .1); }
[data-header-theme="transparent"] .header-search .toggle { background-image: url('/assets/images/search-light.svg'); }
[data-header-theme="transparent"] .header-right .line { background: rgba(255, 255, 255, .4); }
[data-header-theme="transparent"][data-header-mobile-menu="opened"] .header-logo { background-image: url('/assets/images/logo.svg'); }
[data-header-theme="transparent"][data-header-mobile-menu="opened"] .header-search .toggle { background-image: url('/assets/images/search.svg'); }
.wrap.sub #hd[data-header-theme="light"] .gnb { background: #fff;}
.wrap #hd[data-header-sticky='true'] { background: #fff;}
.wrap #hd[data-header-sticky='true'] .gnb { color: #000;}
.wrap #hd[data-header-sticky='true'] .logo { filter: invert(0);}
[data-header-sticky='true'] .hamburger a { filter: invert(0);}
@media screen and (pointer: fine) {
  .wrap #hd .gnb .depth1 > li:hover .depth2 { max-height: 500px;box-shadow: 0 0 0 1px #eee;}
    .header-primary .hamburger a:hover .bar { transform: translateX(calc(-100% + 2px));}
    .header-primary .hamburger a:hover .bar:nth-child(even) { transform: rotate(180deg) translateX(calc(-100% + 2px));}
    .wrap #hd .gnb .depth1 > li .depth2 a:hover { text-decoration: under line; text-underline-offset: 5px;}
}
@media screen and (max-width: 1024px) {
  .wrap.main #hd .menu-wrap { height: 60px;}
  .wrap.main #hd .gnb, .wrap.sub #hd .gnb { overflow-y: auto;}
  .wrap #hd h1 { top: 50%; transform: translateY(-50%);}
  .header-primary { height: 60px;}
  .header-primary > .inner { height: 100%;}
  .header-primary .hamburger-wrap { display: flex;}
  .header-primary .nav { height: 100%; padding-bottom: 80px; color: #000; }
  .wrap.sub .header-primary .hamburger-wrap { top: 50%; transform: translateY(-50%);}
  .wrap.main #hd { position: fixed; top: 0; height: auto; z-index: 13;}
  .wrap.main #hd .menu-wrap { bottom: auto; top: 0; z-index: 11;}
  .wrap.main #hd .gnb,
  .wrap.sub #hd .gnb { position: fixed; bottom: auto; top: 0; right: -100%; background: #fff; width: 100%; height: 100svh; z-index: 14;}
  .wrap #hd .close { display: block;}
  .wrap #hd .gnb .inner { padding-top: 20px;}
  .wrap #hd .gnb .logo { display: block;}
  .wrap #hd .gnb .depth1 > li > a { padding: 18px 0 5px;}
  .wrap #hd .gnb .depth1 > li { margin-bottom: 13px; border-top: 1px solid #ddd;}
  .wrap #hd .gnb .depth1 > li + li{margin-left: 0;}
  .nav .depth1 > li > a.has-depth:after { content: ''; display: inline-block; width: 8px; height: 8px; border-right: 2px solid #333; border-bottom: 2px solid #333; transform: translateX(-10px) rotate(45deg); float: right; margin-top: 6px; transition: all 0.3s ease; }
  .nav .depth1 > li > a.has-depth.on:after { transform: translateX(-10px) rotate(-135deg); margin-top: 10px; }
  .wrap #hd .gnb .depth1,
  .wrap.sub #hd .gnb .depth1 { flex-direction: column; width: 100%;}
  .wrap.main #hd .gnb .depth1 > li .depth2,
  .wrap #hd .gnb .depth1 > li .depth2 { opacity: 1; visibility: visible; position: static; transform: none; max-height: fit-content; display: none; transition: none;}
  .wrap.main #hd .gnb .depth1 > li .depth2 a,
  .wrap.sub #hd .gnb .depth1 > li .depth2 a { font-size: 16px; padding: 8px 10px; text-align: left;}
}
@media screen and (max-width: 767px) {
  .wrap #hd .close { width: 40px; height: 40px; top: 1.9%; right: -2.8%;}
  .wrap #hd .close span { height: 3px;}
  .header-primary .hamburger a { padding: 9px 0;}
  .header-primary .hamburger { padding: 0 0 0 15px; width: 40px; height: 40px;}
  .header-primary .hamburger .bar { margin-top: 6px; height: 3px;}
  .wrap #hd .gnb .depth1 > li > a { font-weight: bold;}
}

/* footer */
.footer { padding: 60px 0; border-top: 1px solid #ddd; box-sizing: border-box; background: #fff;}
.footer .inner { max-width: 1600px; width: 90%;}
.footer .col { width: 50%; display: flex; flex-direction: column;}
.footer .logo {background: url('../img/footer-logo.png') no-repeat center/cover;width: 100px;height: 32px;margin-top: auto;margin-bottom: 50px;}
.footer .col .sitemap { margin-bottom: 120px;}
.footer .col .sitemap ul li {text-align: right;font-size: 18px;font-weight: 600;margin-bottom: 5px;}
.footer .col .footer-info {font-size: 15px;color: #666;margin-bottom: 41px;}
.footer .col .footer-info li { margin-bottom: 5px;}
.footer .col .footer-info.b { font-size: 34px; font-weight: bold; line-height: normal; color: #000;}
.footer .col .footer-copyright { margin-top: auto; font-size: 14px; color: #999;}
@media screen and (max-width: 768px) {
  .footer { padding: 40px 0;}
  .footer .flex-box { flex-wrap: wrap;}
  .footer .col { width: 100%;}
  .footer .logo { margin-bottom: 30px; zoom: 0.7;}
  .footer .col .sitemap { order: 2; margin-bottom: 20px; display: none;}
  .footer .col .sitemap ul li { margin-right: 20px; display: inline-block; font-size: 16px;}
  .footer .col .footer-info { margin-bottom: 30px; font-size: 13px;}
  .footer .col .footer-info.b { font-size: 13px; color: #666; font-weight: normal;}
}
/* main */
.main { position: relative;}
/* main.sub { padding-top: 121px;} */
@media screen and (max-width: 768px) {
  /* main.sub { padding-top: 60px;} */
}

/* linkbtn */
.more-link { position: relative; display: flex; justify-content: center; align-items: center; height: 50px;}
.more-link .text { position: relative; font-size: 20px; font-weight: 500; padding: 0 !important; margin: 0 !important;}
.more-link .text::before { content:''; display: block; position: absolute; bottom: 0; right: 0; width: 100%; height: 2px; background: #232323; transition: 0.5s;}
.more-link::before { content: ''; display: inline-block; width: 50px; height: 50px; border: 1px solid #ddd; box-sizing: border-box; background: url(../img/link-icon.png) no-repeat center/contain; background-size: auto; margin-right: 20px; transition: 0.5s}
.more-link:hover .text::before { width: 0%;}
.more-link:hover::before { width: 10px; height: 10px; background: #000; margin-right: 10px;}
.more-link.v2 { color: #fff;}
.more-link.v2 .text::before { background: #fff;}
.more-link.v2::before { background: url(../img/link-icon-white.png) no-repeat center;}
.more-link.v2:hover::before { background: #fff;}
@media screen and (max-width: 768px) {
  .more-link .text { font-size: 14px;}
  .more-link::before { width: 30px; height: 30px; margin-right: 10px;}
  .more-link.v2::before { background-size: 10px; background-image: url(../img/link-icon-white.png);}
}
/* intro */
.intro {position: relative; width: 95%; max-width: 1780px; height: 100svh; padding: 70px 0;transition: width 0.5s; margin: 0 auto; overflow: hidden;}
.intro > a {position: relative;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;z-index: 1;}
.intro .flex-box { width: 100%; height: 100%; flex-direction: column; justify-content: center; width: 100%;}
.intro .flex-box .col { display: flex; justify-content: space-between; position: absolute; width: 100%; opacity: 0;}
.intro .flex-box .col span { position: relative;}
.intro .flex-box .col.on .img-right { position: relative;}
.intro .flex-box .col .img-right::before {content: '';display: block;width: 33%;height: 33%;position: absolute;right: -39%;top: -33%;background: url('../img/main/intro-text5.png') no-repeat center/cover;opacity: 0;transition: opacity 0.5s;}
.intro .cv-wrap { position: absolute; top: 0; left: 0; height: 100%; overflow: hidden; padding: 70px 0; width: 100%; max-width: 1780px; margin: 0 auto;}
.intro .cv {height: 10px;opacity: 0;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);flex-direction: column;justify-content: center;width: 100%;z-index: 10;}
.intro .cv .col { display: flex; justify-content: space-between; position: absolute; width: 100%; opacity: 0;}
.intro .cv .col span { position: relative;}
.intro .cv .col.on .img-right { position: relative;}
.intro .cv .col .img-right::before {content: '';display: block;width: 33%;height: 33%;position: absolute;right: -39%;top: -33%;background: url('../img/main/intro-text5.png') no-repeat center/cover;opacity: 0;transition: opacity 0.5s;}
.intro .cv .col .img-right.on::before { opacity: 1;}
.intro .cv a {position: relative;display: block;}
.intro .cv img { max-width: none; transition: filter 0.5s;}
.intro.fixed .flex-box { opacity: 0; visibility: hidden;}
.intro .cv span {position: absolute;left: 50%;top: 50%;z-index: 1000; transform: translate(-48.3%, -47%); z-index: 13;}
.intro .cv span:after { content: ''; display: block; width: 8.6%; height: 33%; background: #000; position: absolute; right: -8.6%; top: -33%; transition: filter 0.5s;}
/* .intro .cv.on span:after { filter: invert(1);}
.intro .cv.on img { filter: invert(1);} */
.intro .flex-box.on { flex-direction: row;}
.intro .flex-box.on .col { position: relative; width: 50%; align-items: center;}
.intro .flex-box.on .col:first-child { justify-content: flex-end; }
.intro .flex-box.on .col:last-child { justify-content: flex-end; }
 @media all and (max-width: 1024px) {
   .intro .flex-box .col span { width: 12vw;}
   .intro .flex-box .col span img { width: 100%; height: 100%;}
   .intro .flex-box .col:first-child span:first-child { width: 13.5vw; }
   .intro .flex-box .col:first-child span:last-child { width: 12vw; }
   .intro .flex-box .col:last-child span:first-child { width: 12vw; }
   .intro .flex-box .col:last-child span:last-child { width: 12.5vw; }
   .intro .cv img { max-width: 100%;}
   .intro { padding: 20px 0; z-index: 12;}
 }
 @media all and (max-width: 767px) {
   .intro { width: 90%; overflow: visible;}
   .intro .cv span { width: 50%; }
   .intro .flex-box .col:first-child span:first-child {width: 13vw;}
   .intro .flex-box .col:first-child span:last-child {width: 11vw;}
   .intro .flex-box .col:last-child span:first-child {width: 11vw;}
   .intro .flex-box .col:last-child span:last-child {width: 12vw;}
 }

/* main-visual */
.main-visual { overflow: hidden; position: absolute; top: 0; left: 0; width: 100%; height: 100svh; background: url('../img/main/main-visual-bg.jpg') no-repeat top; background-size: cover; }
.main-visual.v2 { background: transparent;}
.main-visual .bg { width: 100%; height: 100%; background: #fff; position: absolute; bottom: 0; left: 0; transition: height 0.5s ease-out;}
.slide-container { z-index: -1; width: 100%; height: 100%;}
.main-visual .slick-list { width: 100%; height: 100%;}
.main-visual .slick-track { height: 100%;}
.main-visual .slide { height: 100%;}
.main-visual .slide img,
.main-visual .slide video { width: 100%; height: 100%; object-fit: cover;}
.main-visual.on .bg { height: 0%;}
@media all and (max-width: 767px) {
  .main-visual { background: url('../img/main/main-visual-bg-mo.jpg') no-repeat center/cover; }
}

/* main-standard */
.main-standard { height: 100vh;}
.main-standard .inner { height: 100%;}
.main-standard .flex-box { width: 100%; height: 100%; align-items: center; justify-content: center; flex-direction: column;}
.main-standard .rollings { display: flex; gap:0.8%; align-items: flex-end; margin-bottom: 120px; justify-content: center;}
.main-standard .rollings .col { display: flex; height: 5.86vw;}
.main-standard .rollings .col:not(:nth-child(2)) { flex-shrink: 0;}
.main-standard .rollings .col:nth-child(2) { justify-content: center; display: grid; align-items: center}
.main-standard .rollings .col:nth-child(2) span { height: 4.4vw; grid-row: 1/1; grid-column: 1/1; text-align: center;}
.main-standard .rollings .col:nth-child(2) span img { height: 1vw;}
.main-standard .rollings .col:last-child { height: 7.7vw;}
.main-standard .flex-box > .text { font-size: 35px; font-weight: 600; margin-bottom: 95px; text-align: center; line-height: 50px;}
@media screen and (max-width: 1024px) {
  .main-standard { height: 70vh;}
}
@media screen and (max-width: 768px) {
  .main-standard { height: 50vh;}
  .main-standard .rollings { margin-bottom: 50px;}
  .main-standard .rollings .col { height: 7.39vw;}
  .main-standard .rollings .col:last-child { height: 9.7vw;}
  .main-standard .flex-box > .text { font-size: 16px; line-height: 1.5; margin-bottom: 25px;}
}

/* main-feeliv */
.main-feeliv .sticky .content-page { width: 100%; height: 100vh; position: relative; transform: scaleX(0.6) translateY(20%); background: #000; color: #fff; border-radius: 30px; border-bottom: 1px solid #000;}
.main-feeliv .sticky .content-page:nth-child(1) { background: url(/theme/cream/img/main/main-huvis-bg.jpg) no-repeat center/cover; height: 100vh; text-align: center; color: #fff; display: flex; align-items: center; justify-content: center;}
.main-feeliv .sticky .content-page:nth-child(1) .text { font-size: 20px; font-weight: 600; line-height: normal; margin-bottom: 50px;}
.main-feeliv .sticky .content-page:nth-child(1) .title { font-size: 184px; font-weight: 500; line-height: normal; margin-bottom: 90px;}
.main-feeliv .sticky .content-page .img-boxs { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 60px;}
.main-feeliv .sticky .content-page .img-boxs .bg { width: 100%; height: 84%; background-position: center; background-repeat: no-repeat; background-size: cover; border-radius: 30px; transform: scaleY(0.6);}
.main-feeliv .sticky .content-page:not(:nth-child(1)) { position: absolute; transform: scaleX(0.6) translateY(100%);;}
.main-feeliv .title-boxs { padding: 20px 0;}
.main-feeliv .title-boxs h3 { width: fit-content; font-size: 184px; font-weight: 500; letter-spacing: -0.25px; position: relative; left: 50%; top: 30%; z-index: 10;}
.main-feeliv .sticky .content-page .line { position: absolute; top: 0; left: 50%; transform: translateX(-50%); height: 2px; width: 0%; background: #fff;}
@media screen and (max-width: 1024px) {
  .main-feeliv .sticky .content-page .img-boxs { height: 100vh;}

}
@media screen and (max-width: 768px) {
  .main-feeliv .sticky .content-page:nth-child(1) .img-boxs .bg { background-image: url("../img/main/main-feeliv-img1-mo.jpg");}
  .main-feeliv .sticky .content-page { transform: scaleX(0.8) translateY(20%);}
  .main-feeliv .title-boxs h3 { font-size: 120px; transform: scaleX(1.25) translateX(-50%);}
  .main-feeliv .sticky .content-page:nth-child(1) { background: url(/theme/cream/img/main/main-huvis-bg-mo.jpg) no-repeat center/cover;}
  .main-feeliv .sticky .content-page:nth-child(1) .text { font-size: 17px; margin-bottom: 10px;}
  .main-feeliv .sticky .content-page:nth-child(1) .title { font-size: 64px; margin-bottom: 20px;}
}

/* main-huvis */
.main-huvis { margin-top: -90vh; background: url(../img/main/main-huvis-bg.png) no-repeat center/cover; height: 100vh; text-align: center; color: #fff; place-content: center;}
.main-huvis .text { font-size: 24px; font-weight: 600; line-height: normal; margin-bottom: 50px;}
.main-huvis .title { font-size: 184px; font-weight: 500; line-height: normal; margin-bottom: 90px;}
@media screen and (max-width: 768px) {
  .main-huvis { margin-top: -110vh; height: 50vh; z-index: 11; position: relative;}
  .main-huvis .text { font-size: 20px; margin-bottom: 20px;}
  .main-huvis .title { font-size: 80px; margin-bottom: 20px;}
}
/* main-product */
.main-product { padding: 120px 0;}
.main-product .grid-box { grid-template-columns: 41% auto; gap: 75px;}
.main-product .grid-box .col.left { position: relative;}
.main-product .grid-box .col.left .img-box { width: 100%; height: 100%; border-radius: 10px; overflow: hidden;}
.main-product .grid-box .col.left .img-box img { width: 100%; height: 100%; object-fit: cover;}
.main-product .grid-box .col.left .text-box { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; z-index: 1; padding: 0 10px;}
.main-product .grid-box .col.left .text-box .sbj { font-size: 36px; font-weight: 600; color: #fff; margin-bottom: 25px;}
.main-product .grid-box .col.right .grid-box { grid-template-columns: repeat(3, 1fr); gap: 27px; width: 100%; height: 100%;}
.main-product .grid-box .col.right figure { margin-bottom: 25px; padding-bottom: 69%;}
.main-product .grid-box .col.right .sbj { font-size: 18px; font-weight: 500; margin-bottom: 25px;}
.main-product .grid-box .col.right .cost { position: relative; font-size: 16px; color: #aaa; margin-bottom: 10px; display: inline-block;}
.main-product .grid-box .col.right .cost::before { content: ''; display: block; position: absolute; top: 50%; left: 0; transform: translateY(-50%); height: 1px; width: 100%; background: #aaa;}
.main-product .grid-box .col.right .discounted { font-size: 18px; font-weight: 600;}
.main-product .grid-box .col.right .discounted span { display: inline-block; margin-left: 5px; color: #205c4e;}
@media screen and (max-width: 1024px) {
  .main-product .grid-box { grid-template-columns: auto;}
}
@media screen and (max-width: 768px) {
  .main-product { padding: 60px 0 0;}
  .main-product .grid-box { gap: 35px;}
  .main-product .grid-box .col.left .text-box { align-items: flex-start; }
  .main-product .grid-box .col.left .text-box .sbj { font-size: 26px; margin-bottom: 5px;}
  .main-product .grid-box .col.right .grid-box { grid-template-columns: repeat(2, 1fr);}
  .main-product .grid-box .col.right .sbj { margin-bottom: 10px;}
  .main-product .grid-box .col.right .cost { margin-bottom: 0;}
  .main-product .grid-box .col.right .discounted { font-size: 16px;}
}

/* main-store */
.main-store { position: relative;}
.main-store .content-page-top { padding: 0; background: transparent; align-items: center; height: 40vw; display: flex; justify-content: flex-start;}
.main-store .content-page-bottom { padding: 55px 0 137px;}
.main-store .content-page-top .flex-box { align-items: center; flex-wrap: wrap;}
.main-store .content-page-top .title { color: inherit; font-size: 160px; font-weight: 500; line-height: 1; margin-right: 55px;}
.main-store .content-page-top .text { color: inherit; font-size: 20px; margin-bottom: 24px; font-weight: 600;}
.main-store .content-page-top .more-link { margin-top: 30px;}
.main-store .content-page-top .more-link:hover::before { background: #000;}
.main-store .content-page-top .more-link .text::before { background: #fff;}
.main-store .content-page-top .text-box { width: 50%; height: 100%; padding: 5%; display: flex; flex-direction: column; justify-content: flex-end;}
.main-store .content-page-top .more-link::before { filter: invert(0); border-color: #000;}
.main-store .content-page-top .img-box { width: 50%; height: 100%;}
.main-store .content-page-top .img-box img { width: 100%; height: 100%; object-fit: cover; object-position: 35% center;}
@media screen and (max-width: 1240px) {
  .main-store .content-page-top .title { font-size: 130px;}
}
@media screen and (max-width: 1024px) {
  .main-store .content-page-top { height: 100vw;}
  .main-store .content-page-top .text { font-size: 17px;}
  .main-store .content-page-top .title { font-size: 100px;}
}
@media screen and (max-width: 767px) {
  .main-store .content-page-top { flex-direction: column; align-items: flex-start; height: auto;}
  .main-store .content-page-top .text-box { width: 100%; padding: 60px 5% 30px;}
  .main-store .content-page-top .text { font-size: 14px;}
  .main-store .content-page-top .title { font-size: 60px; margin-right: 15px;}
  .main-store .content-page-top .img-box { width: 100%;}
}