@charset "utf-8";
/* layout.css는 전체적인 레이아웃 스타일을 정의합니다. */ 
 
#skipToContent a {z-index:100000;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden}
#skipToContent a:focus, 
#skipToContent a:active {width:200px;height:50px;background:#21272e;color:#fff;font-size:14px;font-weight:bold;text-align:center;text-decoration:none;line-height:3.5714em}

.only-desktop {display:block;}
.only-desktop-tablet {display:block;}
.only-tablet-mobile {display:none;}
.only-tablet {display:none;}
.only-mobile {display:none;}

.contain {width:100%; max-width:1500px; margin:0 auto; padding-right:var(--space-container); padding-left:var(--space-container);}

#wrapper {position:relative; padding-top:var(--header-height);}

/* header */
#header {position:fixed; top:0; left:0; z-index:100; width:100%; height:var(--header-height); transition:.2s; background:#fff;}
#header .contain {position:relative; display:flex; align-items:center; justify-content:space-between; padding:0 var(--header-padding-x); width:100%; max-width:var(--layout-full); height:100%; margin:0 auto; z-index:2;}
.header-fixed #header {box-shadow:0 0 10px rgba(0, 0, 0, 0.1);}

.sitelogo {position:relative; z-index:2; flex-shrink:0; width:165px;}
.sitelogo a {display:block;}
.sitelogo img {display:block; width:165px; height:60px; object-fit:contain;}

#gnb {position:absolute; left:50%; z-index:2; height:100%; transform:translateX(-50%);}
#gnb>ul {display:flex; align-items:stretch; justify-content:center; gap:var(--space-80); height:100%;}
#gnb>ul>li {position:relative; display:flex; align-items:center; transition:.2s; padding:0;}
#gnb>ul>li>a {position:relative; display:flex; align-items:center; justify-content:center; height:var(--header-height); color:#121212; font-size:18px; font-weight:600; line-height:1; text-align:center;}
#gnb>ul>li:hover>a,
#gnb>ul>li.active>a {color:var(--color-primary); font-weight:800;}
#gnb .submenu {display:none; position:absolute; top:100%; left:50%; z-index:3; min-width:200px; padding:30px 20px; transform:translateX(-50%); background:rgba(210, 108, 36, 0.8); border:0; border-radius:0 0 var(--radius-lg) var(--radius-lg); text-align:center;}
#gnb .submenu.wide {min-width:220px;}
#gnb .submenu:before {content:""; position:absolute; top:-5px; left:50%; width:10px; height:10px; border-radius:50%; background:var(--color-primary); transform:translateX(-50%);}
#gnb .submenu>ul {padding:0;}
#gnb .submenu>ul>li + li {margin-top:12px;}
#gnb .submenu>ul>li>a {display:inline-block; padding:0; color:rgba(255, 255, 255, 0.8); font-size:16px; font-weight:400; line-height:1.3;}
#gnb .submenu>ul>li>a:hover {color:#fff; text-decoration:underline; text-underline-offset:2px;}
#gnb .submenu>ul>li.active>a {color:#fff; font-weight:700; text-decoration:underline; text-underline-offset:2px;}

.pull-right {position:relative; z-index:2; display:flex; align-items:center; gap:12px; flex-shrink:0;}
.top-links {display:inline-flex; align-items:center; gap:8px; flex-shrink:0;}
.top-links .link-item {position:relative; z-index:2; display:inline-flex; align-items:center; gap:10px; width:auto; min-width:0; height:42px; padding:8px 14px; border:1px solid var(--color-gng); border-radius:var(--radius-pill); flex-shrink:0; box-sizing:border-box; transition:background-color .2s ease, border-color .2s ease;}
.top-links .link-item:hover {background:var(--color-gng); border-color:transparent;}
.top-links .link-item:hover .label {color:var(--color-white);}
.top-links .link-item .brand {display:inline-flex; align-items:center; gap:6px; flex-shrink:0;}
.top-links .link-item .symbol {width:24px; height:24px; flex-shrink:0; background:url("/images/common/gng-symbol.svg") no-repeat center / contain;}
.top-links .link-item:hover .symbol {background-image:url("/images/common/gng-symbol-on.svg");}
.top-links .link-item .label {color:var(--color-gng); font-size:13px; font-weight:700; line-height:1; white-space:nowrap; transition:color .2s ease;}
.top-links .link-item .ico {width:20px; height:20px; flex-shrink:0; background:url("/images/common/gng-link.svg") no-repeat center / contain;}
.top-links .link-item:hover .ico {background-image:url("/images/common/gng-link-on.svg");}


.language {position:relative; display:inline-block;}
.language .toggle-button {display:flex; align-items:center; background:none; border:0; color:#8F8F8F; font-size:14px; font-weight:600; line-height:1.5em; text-align:left;}
.language .toggle-button .ico {width:15px;}
.language .toggle-button .txt {margin:0 8px 0 5px;}
.language .toggle-button .chevron {width:8px;}
.language .toggle-button svg {display:block; width:100%; height:auto;}
.language .toggle-layer {display:none; position:absolute; left:0; width:100%; padding:4px 0; text-align:center;}
.language .toggle-layer ul {display:grid; gap:6px;}
.language .toggle-layer a {display:block; padding:2px; color:#fff; font-size:14px; font-weight:600; line-height:1.5em; background:var(--color-primary); border-radius:40px;}
.language .toggle-layer a:hover {background:#FF2B05;}
.language.active .toggle-button .chevron {transform:scaleY(-1);}

.top-call {display:flex; flex-direction:column; justify-content:center; gap:6px; height:var(--header-height); background:var(--color-primary); color:#fff; padding:0 var(--space-30);}
.top-call .tit {display:flex; align-items:center; gap:4px; font-size:var(--font-size-14); line-height:1.2em;}
.top-call .tit:after {content:""; display:inline-block; vertical-align:middle; width:14px; height:14px; background:url('/images/common/tel-w.svg') no-repeat center center; background-size:contain;}
.top-call .num {font-size:var(--font-size-20); line-height:1.2em; letter-spacing:0;}


/* for mobile */ 
.btn-m-menu {display:none; position:relative; width:44px; height:44px; border:1px solid var(--color-border); border-radius:50%; background:var(--color-white); box-sizing:border-box; transition:border-color .2s ease, background-color .2s ease;}
.btn-m-menu:hover {border-color:var(--color-main);}
.btn-m-menu div {display:flex; flex-direction:column; justify-content:center; align-items:center; gap:4px; width:100%; height:100%;}
.btn-m-menu span {display:block; width:18px; height:2px; background:var(--color-text); transition:transform .2s ease, opacity .2s ease, background-color .2s ease;}
.btn-m-menu:hover span {background:var(--color-main);}
html.menu-opened .btn-m-menu span:nth-child(1) {transform:translateY(6px) rotate(45deg);}
html.menu-opened .btn-m-menu span:nth-child(2) {opacity:0;}
html.menu-opened .btn-m-menu span:nth-child(3) {transform:translateY(-6px) rotate(-45deg);}

.mobile-navigation {position:fixed; top:0; right:0; display:none; flex-direction:column; width:min(100%, 400px); height:100%; overflow:hidden; transition:transform .35s cubic-bezier(0.22, 1, 0.36, 1); -ms-transform:translateX(100%); transform:translateX(100%); background:var(--color-white); z-index:102;}
.mobile-navigation .home {display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:var(--header-height); height:auto; padding:0 20px; border-bottom:1px solid #f0e6dc; background:linear-gradient(180deg, #fff7f0 0%, #ffffff 100%);}
.mobile-navigation .home>a:not(.close) {display:block; flex-shrink:0;}
.mobile-navigation .home img {display:block; width:165px; height:60px; object-fit:contain; mix-blend-mode:multiply;}
.mobile-navigation .nav-menu {flex:1; overflow-y:auto; padding:0 0 20px;}
.mobile-navigation .nav-menu>ul>li {border-bottom:1px solid #f0e6dc;}
.mobile-navigation .nav-menu>ul>li>a {position:relative; display:flex; align-items:center; justify-content:space-between; padding:20px 22px; color:#241a13; font-size:17px; font-weight:700; line-height:1.2em; text-align:left; transition:color .2s ease, background-color .2s ease;}
.mobile-navigation .nav-menu>ul>li>a:hover {background:#fffaf6;}
.mobile-navigation .nav-menu>ul>li>a:after {content:""; position:static; top:auto; right:auto; flex-shrink:0; width:10px; height:10px; margin-left:12px; border-right:2px solid #8a7565; border-bottom:2px solid #8a7565; transform:rotate(45deg);}
.mobile-navigation .nav-menu>ul>li.active>a {color:var(--color-main); background:#fff7f0;}
.mobile-navigation .nav-menu>ul>li.active>a:after {transform:rotate(-135deg); border-color:var(--color-main);}
.mobile-navigation .nav-menu .submenu {display:none; position:static; top:auto; left:auto; z-index:auto; min-width:0; padding:8px 0 12px; transform:none; border-radius:0; background:#fbf7f3; color:#6e5b4d; font-size:15px; font-weight:500; line-height:1.4em; text-align:left;}
.mobile-navigation .nav-menu .submenu.wide {min-width:0;}
.mobile-navigation .nav-menu .submenu ul li {border-top:0;}
.mobile-navigation .nav-menu .submenu ul li a {display:block; padding:14px 22px 14px 34px; color:#6e5b4d; font-size:15px; font-weight:500; line-height:1.4em; transition:color .2s ease, background-color .2s ease;}
.mobile-navigation .nav-menu .submenu ul li a:hover {color:var(--color-main); background:rgba(210, 108, 36, 0.06);}
.mobile-navigation .nav-menu .submenu ul li.active a {color:var(--color-main); font-weight:700; background:rgba(210, 108, 36, 0.08);}
.mobile-navigation .close {position:relative; top:auto; right:auto; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:40px; height:40px; overflow:hidden; border:1px solid #efe4da; border-radius:50%; background:var(--color-white); text-indent:0; transition:border-color .2s ease, background-color .2s ease;}
.mobile-navigation .close:hover {border-color:var(--color-main); background:#fff7f0;}
.mobile-navigation .close:before,
.mobile-navigation .close:after {content:""; position:absolute; top:50%; left:50%; width:16px; height:2px; background:var(--color-text); border-radius:0;}
.mobile-navigation .close:before {transform:translate(-50%, -50%) rotate(45deg);}
.mobile-navigation .close:after {transform:translate(-50%, -50%) rotate(-45deg);}
.mobile-navigation .mobile-foot {flex-shrink:0; padding:20px 22px 28px; border-top:1px solid #f0e6dc; background:#fffaf6;}
.mobile-navigation .mobile-gng {display:flex; align-items:center; gap:10px; width:100%; padding:14px 16px; border:1px solid #f0c9a8; border-radius:14px; background:var(--color-white); color:#241a13; font-size:15px; font-weight:700; line-height:1.2em; text-decoration:none; transition:border-color .2s ease, background-color .2s ease;}
.mobile-navigation .mobile-gng:hover {border-color:var(--color-gng); background:#fff5f4;}
.mobile-navigation .mobile-gng .symbol {width:22px; height:22px; flex-shrink:0; background:url("/images/common/gng-symbol.svg") no-repeat center / contain;}
.mobile-navigation .mobile-gng .txt {flex:1; min-width:0;}
.mobile-navigation .mobile-gng .arrow {margin-left:auto; color:var(--color-gng); font-size:16px; line-height:1;}
.mobile-navigation .mobile-contact {margin:14px 0 0; color:#8a7565; font-size:14px; text-align:center;}
.mobile-navigation .mobile-contact a {color:var(--color-main); font-weight:700;}
.mobile-overlay {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(18, 18, 18, 0.52); z-index:101;}

html.menu-opened {overflow:hidden;}
html.menu-opened .mobile-navigation {-ms-transform:translateX(0); transform:translateX(0); box-shadow:-12px 0 40px rgba(0, 0, 0, 0.14);}
html.menu-opened .mobile-overlay {display:block;}

/* main */
#container {overflow:hidden;}
#container.page-main {background:linear-gradient(180deg, #ffe8d8 19.866%, #fff4eb 36.647%, #ffffff 75.802%);}

.main-visual {position:relative; overflow:hidden; width:100%; height:880px; background:transparent;}
.main-visual .items {position:absolute; inset:0; height:100%;}
.main-visual .item {position:absolute; overflow:hidden; width:100%; height:100%;}
.main-visual .item img {position:absolute; width:100%; height:100%; object-fit:cover; transform:scale(1.1); transition:5s linear;}
.main-visual .item .video-js,
.main-visual .item video {position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;}
.main-visual .item iframe {position:absolute; top:50%; left:50%; width:100vw; height:100vh; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%);}
/* 오버레이는 장식이다 — 클릭이 아래(링크 배너/플레이어)로 통과해야 한다.
   영상 슬라이드(MP4/WS/YT/VM)에도 같은 오버레이가 깔리므로 없으면 플레이어를 가린다. */
.main-visual .overlay {pointer-events:none;}
/* 링크 배너 — 슬라이드 전체를 덮는 클릭 영역.
   퍼블 원본에 이 규칙이 없어서 <a> 가 0×0 으로 접혀 링크가 아예 안 눌렸다(2026-09).
   문구(.caption)는 z-index 2 로 위에 있으므로, 링크가 있는 슬라이드에서는 클릭이
   문구에 막히지 않도록 pointer-events 를 꺼서 앵커로 흘려보낸다. */
.main-visual .item > a.link-area {position:absolute; inset:0; z-index:2; display:block;}
.main-visual .item > a.link-area ~ .caption {pointer-events:none;}
.main-visual .overlay {position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.12) 50%, rgba(0, 0, 0, 0.05) 100%), linear-gradient(90deg, rgba(210, 108, 36, 0.65) 0%, rgba(210, 108, 36, 0.15) 45%, rgba(210, 108, 36, 0) 70%);}
.main-visual .caption {position:absolute; top:50%; left:50%; z-index:2; width:min(var(--container), calc(100% - 40px)); padding:0; text-align:left; color:#fff; transform:translate(-50%,-50%);}
.main-visual .caption .title {margin-bottom:30px; font-size:64px; font-weight:500; line-height:1.34;}
/* 강조문구: 퍼블 원본은 <strong> 를 기준으로 잡았지만, 메인비주얼 문구는 관리자가
   백오피스에서 {강조} / {{강조}} 로 입력하고 mainVisualEmphasis() 가 각각 <span> / <strong> 으로
   변환해 출력한다 (보안상 HTML 직접 입력은 막혀 있음). 두 선택자를 같이 둬서 어느 쪽이든 굵게 나오게 한다.
   ※ 퍼블에서 layout.css 를 새로 받으면 이 span 선택자가 사라지므로 다시 넣을 것. */
.main-visual .caption .title strong,
.main-visual .caption .title span {font-weight:700;}
.main-visual .caption .desc {font-size:20px;}
.main-visual .caption .ani {transition:1.2s; transform:translate(0,30px); opacity:0; color:#fff;}
.main-visual .caption .t1 {font-size:clamp(24px, calc(60 / var(--inner) * 100vw), 60px); font-weight:700; line-height:1.3em;}
.main-visual .caption .t2 {margin-top:var(--space-20); font-size:clamp(13px, calc(18 / var(--inner) * 100vw), 18px); font-weight:400; line-height:1.44em;}
.main-visual .slick-dots {position:absolute; left:50%; bottom:60px; z-index:2; display:flex; align-items:center; gap:12px; transform:translateX(-50%);}
.main-visual .slick-dots li {margin:0; padding:0; list-style:none;}
.main-visual .slick-dots button {width:9px; height:9px; padding:0; border:0; border-radius:50%; background:rgba(255, 255, 255, 0.5); font-size:0; cursor:pointer; transition:.3s;}
.main-visual .slick-dots .slick-active button {width:32px; border-radius:4.5px; background:#fff;}
.main-visual .slick-list,
.main-visual .slick-track,
.main-visual .slick-slide {height:100%;}
.main-visual .slick-slide img {width:100%; height:100%; object-fit:cover;}
.main-visual .active img {transform:scale(1);}
.main-visual .active .caption .ani {opacity:1; transform:translate(0,0);}
.main-visual .active .caption .title {transition-delay:.3s;}
.main-visual .active .caption .desc {transition-delay:.5s;}
.main-visual .active .caption .t1 {transition-delay:.3s;}
.main-visual .active .caption .t2 {transition-delay:.5s;}
.main-visual .controls {position:absolute; bottom:55%; left:10%; z-index:10; display:flex; justify-content:center; align-items:center; color:#fff;}
.main-visual .pager {display:flex; justify-content:center; align-items:center; gap:4px; width:82px; color:rgba(255, 255, 255, 0.30); font-size:var(--font-size-20); font-weight:400; line-height:1.2em; text-align:center;}
.main-visual .pager .current {color:#fff; font-weight:700;}
.main-visual .slide-btn {display:block; width:24px; aspect-ratio:1/1; border:0; background:transparent;}
.main-visual .slide-btn svg {display:block; margin:0 auto;}

@media (min-aspect-ratio: 16/9) {
	.main-visual .item iframe {height:56.25vw;}
}
@media (max-aspect-ratio: 16/9) {
	.main-visual .item iframe {width:177.78vh;}
}

.main-about {padding:150px 0; overflow:hidden; background:transparent;}
.main-about .inner {display:flex; align-items:center; justify-content:space-between; gap:60px; width:min(1680px, calc(100% - 20px)); margin-left:0; margin-right:auto; padding-right:20px;}
.main-about .image {flex:0 1 auto; width:calc(1060px + max(0px, (100vw - 1680px) / 2)); max-width:calc(100% - 400px); height:620px; border-radius:0 var(--radius-lg) 1000px 0; overflow:hidden;}
.main-about .image img {width:100%; height:100%; object-fit:cover;}
.main-about .text {flex:1; min-width:280px;}
.main-about .head {margin-bottom:28px;}
.main-about .label {display:block; margin-bottom:16px; color:var(--color-main); font-size:16px; font-weight:600; text-transform:uppercase;}
.main-about .head .title {position:static; top:auto; width:auto; height:auto; padding:0; margin:0; background:none; color:var(--color-text); font-size:48px; font-weight:700; line-height:1;}
.main-about .body {margin-bottom:60px; color:var(--color-text-sub); font-size:18px; line-height:1.67;}

.main-marquee {overflow:hidden; padding:20px 0;}
.main-marquee .track {display:flex; gap:40px; width:max-content; animation:marquee 32s linear infinite; font-family:var(--font-display, var(--font-family)); font-size:120px; font-weight:700; line-height:1; white-space:nowrap;}
.main-marquee .track span {color:transparent; -webkit-text-stroke:2px var(--color-main);}
.main-marquee .track span.is-accent {color:var(--color-main); -webkit-text-stroke:0;}
@keyframes marquee {from {transform:translateX(-50%);} to {transform:translateX(0);}}

.main-product {padding:150px 0; overflow:hidden;}
.main-product .head {display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:40px;}
.main-product .label {display:block; margin-bottom:16px; color:var(--color-main); font-size:16px; font-weight:600; text-transform:uppercase;}
.main-product .head .title {margin-bottom:28px; color:var(--color-text); font-size:48px; font-weight:700; line-height:1;}
.main-product .desc {color:var(--color-text-sub); font-size:18px;}
.main-product .controls {display:flex; gap:12px;}
.main-product .slider {width:100%;}
.main-product .items {padding:60px 20px 0;}
.main-product .items:not(.slick-slider) {display:flex;}
.main-product .items .slick-list {overflow:visible;}
.main-product .items .item {width:400px !important; height:auto; padding:0 25px;}
.main-product .card {position:relative; height:clamp(440px, 24.6vw, 600px); padding:40px; border-radius:var(--radius-lg); overflow:hidden; display:flex !important; align-items:flex-end; align-self:flex-end; color:var(--color-white); text-decoration:none; transition:transform .35s ease, box-shadow .35s ease;}
.main-product .card:before {content:""; position:absolute; inset:0; z-index:1; border-radius:inherit; background:linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0) 45%), linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.55) 100%); transition:background .35s ease;}
.main-product .card.is-active:before,
.main-product .card:hover:before {background:linear-gradient(180deg, rgba(0, 0, 0, 0.12) 0%, rgba(105, 45, 12, 0.35) 48%, rgba(145, 62, 15, 0.95) 100%), linear-gradient(90deg, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.28));}
.main-product .card.is-active,
.main-product .card:hover {transform:translateY(-60px); box-shadow:8px 8px 15px rgba(0, 0, 0, 0.2); z-index:2;}
.main-product .card .image {position:absolute; inset:0; z-index:0;}
.main-product .card .image img {width:100%; height:100%; object-fit:cover;}
.main-product .card .body {position:relative; z-index:2; width:100%;}
.main-product .card .top {position:relative; display:flex; align-items:flex-end; justify-content:center; width:100%;}
.main-product .card.is-active .top,
.main-product .card:hover .top {align-items:flex-start; justify-content:space-between; gap:20px;}
.main-product .card .text {width:100%; text-align:center;}
.main-product .card.is-active .text,
.main-product .card:hover .text {flex:1; width:auto; text-align:left;}
.main-product .card .title {font-size:28px; font-weight:600; line-height:1;}
.main-product .card .desc {margin-top:0; max-height:0; opacity:0; overflow:hidden; color:rgba(255, 255, 255, 0.8); font-size:16px; line-height:1.62; transition:opacity .35s ease, max-height .35s ease, margin-top .35s ease;}
.main-product .card.is-active .desc,
.main-product .card:hover .desc {margin-top:20px; max-height:120px; opacity:1;}
.main-product .card.dough.is-active .title,
.main-product .card.dough:hover .title {white-space:nowrap; font-size:24px;}
.main-product .card.dough.is-active .desc,
.main-product .card.dough:hover .desc {font-size:15px; line-height:1.5;}
.main-product .card .arrow {position:absolute; right:0; bottom:0; flex-shrink:0; width:36px; height:36px; background:url("/images/main/product-card-arrow-icon.svg") no-repeat center / 10px 11px, url("/images/main/product-card-arrow.svg") no-repeat center / 36px; transform:rotate(45deg); opacity:0; visibility:hidden; transition:opacity .35s ease, visibility .35s ease;}
.main-product .card.is-active .arrow,
.main-product .card:hover .arrow {position:relative; right:auto; bottom:auto; align-self:flex-start; margin-top:2px; opacity:1; visibility:visible;}
.main-news {padding:0 0 150px;}
.main-news .head {display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:60px;}
.main-news .head .label {display:block; margin-bottom:16px; color:var(--color-main); font-size:16px; font-weight:600; text-transform:uppercase;}
.main-news .head .title {color:var(--color-text); font-size:48px; font-weight:700; line-height:1;}
.main-news .list {display:flex; flex-direction:column; gap:80px;}
.main-news .item {display:flex; align-items:center; gap:80px; text-decoration:none; color:inherit;}
.main-news .thumb {flex:0 0 500px; height:280px; border-radius:var(--radius-lg); overflow:hidden;}
.main-news .thumb img {width:100%; height:100%; object-fit:cover; transition:transform .4s ease;}
.main-news .item:hover .thumb img {transform:scale(1.05);}
.main-news .content {flex:1; min-width:0;}
.main-news .item .label {display:block; margin-bottom:24px; color:var(--color-main); font-size:16px; font-weight:600;}
.main-news .title-row {display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:24px;}
.main-news .item .title {flex:1; min-width:0; margin-bottom:0; color:var(--color-text); font-size:32px; font-weight:600; line-height:1.2; transition:color .25s ease;}
.main-news .item:hover .title {color:var(--color-main);}
.main-news .arrow {position:relative; flex-shrink:0; width:36px; height:36px; margin-top:4px; background:url("/images/main/product-card-arrow-icon.svg") no-repeat center / 10px 11px, url("/images/main/product-card-arrow.svg") no-repeat center / 36px; transform:rotate(45deg); opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease;}
.main-news .item:hover .arrow {opacity:1; visibility:visible;}
.main-news .divider {height:1px; margin-bottom:24px; background:var(--color-border);}
.main-news .text {margin-bottom:24px; color:var(--color-text-sub); font-size:18px; line-height:1.78;}
.main-news .date {color:var(--color-text-muted); font-size:14px;}
.main-cta {position:relative; margin-bottom:0; padding:120px 0; overflow:hidden; background:var(--color-main-dark) url("/images/main/sub-visual-chain.jpg") no-repeat center bottom / cover; color:var(--color-white); text-align:center;}
.main-cta .overlay {position:absolute; inset:0; background:rgba(0, 0, 0, 0.5);}
.main-cta .inner {position:relative; z-index:1;}
.main-cta .label {display:block; margin-bottom:16px; color:var(--color-main); font-size:16px; font-weight:600; text-transform:uppercase;}
.main-cta .title {margin-bottom:28px; font-size:42px; font-weight:700;}
.main-cta .desc {margin-bottom:60px; font-size:18px;}
.main-cta .buttons {display:flex; flex-wrap:wrap; justify-content:center; gap:10px;}
.main-cta .link {display:inline-flex; align-items:center; gap:8px; height:48px; padding:0 18px; border:1px solid rgba(255, 255, 255, 0.2); border-radius:var(--radius-pill); background:rgba(255, 255, 255, 0.2); backdrop-filter:blur(5px); color:var(--color-white); font-size:16px; line-height:1.625em; transition:background-color .2s ease, border-color .2s ease, color .2s ease;}
.main-cta .link:hover {background:var(--color-main); border-color:var(--color-main); color:var(--color-white); font-weight:600;}
.main-cta .link .icon {flex-shrink:0; width:28px; height:28px; background:no-repeat center / contain;}
.main-cta .link.instagram .icon {background-image:url("/images/common/cta-instagram.svg");}
.main-cta .link.blog .icon {background-image:url("/images/common/cta-blog.svg");}
.main-cta .link.youtube .icon {background-image:url("/images/common/sns-youtube.svg");}
.main-cta .link.gng-pizza .icon {background-image:url("/images/common/gng-pizza-off.svg");}
.main-cta .link.gng-pizza:hover .icon {background-image:url("/images/common/gng-pizza-on.svg");}
.main-cta .link.gng-chicken .icon {background-image:url("/images/common/gng-chicken-off.svg");}
.main-cta .link.gng-chicken:hover .icon {background-image:url("/images/common/gng-chicken-on.svg");}
.main-cta .link .arrow {flex-shrink:0; width:20px; height:20px; background:url("/images/common/cta-link-icon-off.svg") no-repeat center / 20px;}
.main-cta .link:hover .arrow {background-image:url("/images/common/cta-link-icon-on.svg");}

/* sub */
.sub-visual {position:relative; display:flex; flex-direction:column; background:#000; height:clamp(320px, calc(500 / var(--inner) * 100vw), 500px); overflow:hidden; color:#fff; text-align:center; margin:0 60px; border-radius:var(--radius-xl);}
.sub-visual:after {content:""; position:absolute; inset:0; z-index:1; background:rgba(0, 0, 0, 0.3); pointer-events:none;}
.sub-visual .bg {position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; object-position:center bottom; transition:1.5s linear; transform:scale(1.1); opacity:0;}
.sub-visual .title {position:relative; z-index:2; width:100%; height:100%; display:flex; flex-direction:column; justify-content:center; align-items:center;}
.sub-visual .title .contain {width:100%;}
.sub-visual .title h2 {font-size:clamp(28px, calc(64 / var(--inner) * 100vw), 64px); font-weight:700; line-height:1; color:#fff; white-space:nowrap;}
.sub-visual.loaded .bg {transform:scale(1); opacity:1;}

.lnb-wrap {position:absolute; left:0; bottom:44px; z-index:2; width:100%; padding:0 var(--space-container); text-align:center;}
.lnb {padding:16px; border:1px solid rgba(255, 255, 255, 0.2); border-radius:var(--radius-pill); background:rgba(255, 255, 255, 0.2); backdrop-filter:blur(5px); display:inline-block;}
.lnb .swiper-wrapper {display:flex; align-items:center; flex-wrap:nowrap;}
.lnb ul li {flex:none; width:auto;}
.lnb ul li a {display:flex; width:auto; height:auto; padding:15px 24px; border-radius:var(--radius-pill); color:var(--color-white); font-size:20px; line-height:1; transition:background-color .2s ease;}
.lnb ul li.active a {background:var(--color-main); color:var(--color-white);}

#contArea {max-width:1500px; padding:var(--space-80) var(--space-container) 0; margin:0 auto; --layout-content: var(--container);}
#contArea.wide {max-width:100%; padding-left:0; padding-right:0;}

.sub-title {margin-bottom:var(--space-60); text-align:center;}
.sub-title h2 {font-size:var(--font-size-48); line-height:1.3em; color:var(--color-text); font-weight:600;}
.sub-title.blind {margin:0 !important; padding:0 !important;}

.real-cont {min-height:300px; padding-bottom:var(--space-150);}
.real-cont:has(.oem-story__section--cta) {padding-bottom:0;}


/* footer */
#footer {position:relative; padding:48px 0; background:var(--color-main-dark); color:#fff; font-size:16px; line-height:1.5em;}
#footer a {color:inherit;}
#footer a:hover {text-decoration:underline;}
#footer address {font-style:normal;}
#footer .contain {position:relative; display:flex; align-items:flex-end; justify-content:space-between; gap:40px; width:min(var(--container), calc(100% - 40px)); max-width:none; padding:0; margin-inline:auto;}
.foot-logo {width:150px; margin-bottom:40px;}
.foot-logo img {display:block; width:150px; height:58px; object-fit:contain;}
.foot-info address {display:flex; flex-direction:column;}
.foot-info .row {display:flex; flex-wrap:wrap; align-items:flex-start; gap:28px; margin-bottom:8px; font-size:16px;}
.foot-info .row:last-of-type {margin-bottom:0;}
.foot-info .item {display:inline-flex; gap:8px;}
.foot-info .item strong {font-weight:600;}
.foot-info .label {color:rgba(255, 255, 255, 0.5);}
.foot-copyright {margin-top:40px; color:rgba(255, 255, 255, 0.3); font-size:12px;}
.foot-copyright .designed {display:inline-block;}
#footer .side {display:flex; flex-direction:column; align-items:flex-end; justify-content:space-between; min-height:100%;}
#footer .sns {display:flex; gap:10px;}
#footer .sns a {width:45px; height:45px;}
#footer .sns img {width:100%; height:100%; object-fit:contain;}
.foot-links {display:flex; gap:18px; margin-top:20px; font-size:14px;}
.foot-links a:first-child {font-weight:600;}
.foot-links a:hover {text-decoration:underline;}
.scroll-top {position:fixed; right:40px; bottom:40px; z-index:90; width:40px; height:40px; background:url("/images/common/icon-top.svg") no-repeat center / contain;}