@charset "utf-8";

.sub-tab {width:fit-content; margin:0 auto var(--space-100); border:1px solid #DDDDDD; border-radius:80px; background:#F9F9F9; padding:var(--space-12);}
.sub-tab ul {justify-content:center;}
.sub-tab ul li {width:auto;}
.sub-tab ul li a {border-radius:32px; min-width:204px; padding:0 12px; height:clamp(40px, calc(64 / var(--inner) * 100vw), 64px); display:flex; align-items:center; justify-content:center; font-size:var(--font-size-18); font-weight:600; line-height:1.556em; letter-spacing:-.02em; color:#999;}
.sub-tab ul li.active a {color:#fff; background:#8FC31F;}

.s-head {position:relative; margin-bottom:var(--space-60); padding-bottom:var(--space-60); border-bottom:1px solid #ddd; font-family:var(--font-az); font-size:var(--font-size-40); font-weight:700; line-height:1.25em; letter-spacing:-.02em; color:#2C2C2C;}
.s-head::after {content:''; position:absolute; left:0; bottom:-1px; width:clamp(40px, calc(60 / var(--inner) * 100vw), 60px); height:4px; background:var(--color-primary);}

.s-tit {padding-left:clamp(25px, calc(40 / var(--inner) * 100vw), 40px); position:relative; margin-bottom:var(--space-30); font-size:var(--font-size-28); font-weight:600; line-height:1.5em; letter-spacing:-.02em; color:#2C2C2C;}
.s-tit::before {width:clamp(16px, calc(24 / var(--inner) * 100vw), 24px); height:clamp(16px, calc(24 / var(--inner) * 100vw), 24px); content:''; position:absolute; left:0; top:.3em; background:url('/images/sub/s-title.png') no-repeat center center / contain;}

.doc-cnt {padding:var(--space-60) 0; border-bottom:1px dashed #ddd;}
.doc-cnt.pt0 {padding-top:0;}
.doc-cnt:last-of-type {padding-bottom:0; border-bottom:none;}

.greeting {border-bottom:1px dashed #ddd; padding-bottom:var(--space-100);}
.greeting .image {margin-bottom:var(--space-40); overflow:hidden; border-radius:16px; height:clamp(220px, calc(430 / var(--inner) * 100vw), 430px);}
.greeting .image img {width:100%; height:100%; object-fit:cover;}
.greeting .content h3 {margin-bottom:var(--space-35); font-family:var(--font-az); font-size:var(--font-size-36); font-weight:700; line-height:1.389em; letter-spacing:-.02em; color:#2C2C2C;}
.greeting .content h3 span {color:var(--color-primary);}
.greeting .content .desc {font-size:var(--font-size-20); font-weight:400; line-height:1.6em; letter-spacing:-.02em; color:#505050;}
.greeting .content .desc strong {color:var(--color-primary);}
.greeting .content .sign {margin-top:var(--space-40); font-size:var(--font-size-20); font-weight:600; line-height:1.7em; letter-spacing:-.02em; color:#505050;}

.root_daum_roughmap_landing {width:100% !important;}
.root_daum_roughmap .wrap_map {height:clamp(250px, calc(520 / var(--inner) * 100vw), 520px) !important;}
.root_daum_roughmap .cont {display:none;}

.directions {padding-top:var(--space-100);}
.directions h2 {margin-bottom:var(--space-100); font-family:var(--font-az); font-size:var(--font-size-48); font-weight:700; line-height:1.292em; letter-spacing:-.02em; color:#2C2C2C;}
.directions .map-area {border-radius:16px; overflow:hidden;}
.directions .lead {margin-top:var(--space-60);}
.directions .lead .label {margin-bottom:var(--space-15); font-size:var(--font-size-20); font-weight:600; line-height:1.7em; letter-spacing:-.02em; color:var(--color-primary);}
.directions .lead .desc {margin-bottom:var(--space-8); font-family:var(--font-az); font-size:var(--font-size-28); font-weight:700; line-height:1.5em; letter-spacing:-.02em; color:#2C2C2C;}
.directions .lead .lot {font-size:var(--font-size-18); font-weight:400; line-height:1.778em; letter-spacing:-.02em; color:#505050;}
.directions .info {display:flex; flex-wrap:wrap; gap:0 var(--space-60); margin:var(--space-40) 0 0; border-top:1px solid #dfdfdf; border-bottom:1px solid #dfdfdf;}
.directions .info .item {padding:var(--space-25) 0;}
.directions .info .item dl {display:flex; align-items:center; gap:var(--space-15);}
.directions .info .item dt {font-size:var(--font-size-18); font-weight:600; line-height:1.7em; letter-spacing:-.03em; color:#2C2C2C;}
.directions .info .item dt svg {flex-shrink:0; display:inline-block; vertical-align:middle; margin-right:var(--space-15);}
.directions .info .item dd {flex:1; font-size:var(--font-size-20); font-weight:400; line-height:1.7em; letter-spacing:-.02em; color:#505050;}

.certi {display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-100) var(--space-60);}
.certi .item {text-align:center; min-width:0;}
.certi .item p {margin-top:var(--space-25); font-size:var(--font-size-28); font-weight:600; line-height:1.5em; letter-spacing:-.02em; text-align:center; color:#2C2C2C;}

.history {position:relative; margin-bottom:calc(var(--space-120) * -1);}
.history:before {z-index:-1; content:''; position:absolute; top:0; left:50%; width:1px; height:95.5%; background:#ddd;}
.history .banner {padding:0 20px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-20); min-height:clamp(160px, calc(320 / var(--inner) * 100vw), 320px); overflow:hidden; border-radius:16px;}
.history .banner .cnt {flex-direction:column; align-items:center; justify-content:center; gap:var(--space-20); padding:var(--space-40) var(--space-20); text-align:center;}
.history .banner .year {margin-bottom:var(--space-20); font-size:var(--font-size-58); font-weight:700; line-height:1em; letter-spacing:-.03em; color:#fff;}
.history .banner .txt {font-size:var(--font-size-24); font-weight:500; line-height:1.5em; letter-spacing:-.02em; color:rgba(255, 255, 255, 0.8);}
.history .content {padding-top:var(--space-120);}
.history .content .item {position:relative; padding-bottom:var(--space-120); display:flex; gap:0 var(--space-25);}
.history .content .item .dot {transition:.2s; position:absolute; top:.6em; flex-shrink:0; width:16px; height:16px; border-radius:50%; background:#fff; border:5px solid #ddd;}
.history .content .item .year {font-size:var(--font-size-40); font-weight:700; line-height:.9em; letter-spacing:-.02em; color:#2C2C2C;}
.history .content .item .cnt ul li {margin-bottom:var(--space-8); position:relative; font-size:var(--font-size-24); font-weight:400; line-height:1.5em; letter-spacing:-.02em; color:#505050;}
.history .content .item .cnt ul li:last-child {margin-bottom:0;}
.history .content .item .cnt ul li:before {content:''; top:.7em; position:absolute; width:4px; height:4px; border-radius:50%; background:#96BAD9;}
.history .content .item.row {margin-left:50%; padding-left:var(--space-80);}
.history .content .item.reverse {text-align:right; flex-direction:row-reverse; margin-right:50%; padding-right:var(--space-80);}
.history .content .item.row .dot {left:0; margin-left:-8px;}
.history .content .item.reverse .dot {right:0; margin-right:-8px;}
.history .content .item.row .cnt ul li {padding-left:var(--space-20);}
.history .content .item.reverse .cnt ul li {padding-right:var(--space-20);}
.history .content .item.row .cnt ul li:before {left:0;}
.history .content .item.reverse .cnt ul li:before {right:0;}
.history .content .item.active .dot {top:.45em; border-color:var(--color-primary); width:24px; height:24px; border-width:7px;}
.history .content .item.row.active .dot {margin-left:-12px;}
.history .content .item.reverse.active .dot {margin-right:-12px;}

.haccp-text {margin-bottom:var(--space-40); font-size:var(--font-size-20); font-weight:400; line-height:1.7em; letter-spacing:-.02em; color:#505050;}
.haccp-text strong {color:var(--color-primary); font-weight:600;}

.haccp-outline {margin-bottom:var(--space-100);}
.haccp-outline .flow {display:flex; align-items:stretch; justify-content:flex-start; gap:var(--space-15); margin-bottom:var(--space-40);}
.haccp-outline .flow .item {background:#F3F7FB; flex:1 0 auto; min-width:0; border-radius:16px; padding:var(--space-40) var(--space-30) var(--space-30); text-align:center;}
.haccp-outline .flow .item .sub {font-size:var(--font-size-18); font-weight:600; line-height:1.778em; letter-spacing:-.02em; color:var(--color-primary);}
.haccp-outline .flow .item .tit {margin-bottom:var(--space-25);  font-size:var(--font-size-36); font-weight:600; line-height:1.389em; letter-spacing:-.02em; color:#2C2C2C;}
.haccp-outline .flow .item .txt {font-size:var(--font-size-18); font-weight:400; line-height:1.778em; letter-spacing:-.02em; color:#505050;}
.haccp-outline .flow .arrow {display:flex; align-items:center;}
.haccp-outline .flow .arrow img {width:clamp(32px, calc(48 / var(--inner) * 100vw), 48px); height:clamp(32px, calc(48 / var(--inner) * 100vw), 48px);}
.haccp-outline .flow .item:last-child {background:var(--color-primary);}
.haccp-outline .flow .item:last-child .sub {color:#fff;}
.haccp-outline .flow .item:last-child .tit {color:#fff;}
.haccp-outline .flow .item:last-child .txt {color:#fff;}
.haccp-outline .list ul {display:flex; flex-direction:column; gap:var(--space-8);}
.haccp-outline .list li {position:relative; padding-left:var(--space-12); font-size:var(--font-size-18); font-weight:400; line-height:1.667em; letter-spacing:-.02em; color:#505050;}
.haccp-outline .list li::before {content:''; position:absolute; left:0; top:.65em; width:4px; height:4px; border-radius:50%; background:var(--color-primary);}
.haccp-outline .list li strong {font-weight:600;}

.haccp-principle {display:flex; padding:var(--space-20); border-radius:136px; background:var(--color-primary);}
.haccp-principle .item {min-width:0; margin-left:-50px; flex:1; padding:var(--space-30); border-radius:104px; text-align:center; background:#fff;}
.haccp-principle .item:first-child {margin-left:0;}
.haccp-principle .item:nth-child(even) {background:#DCE7F2;}
.haccp-principle .item .tit {font-size:var(--font-size-24); font-weight:600; line-height:1.583em; letter-spacing:-.02em; color:#2C2C2C;}
.haccp-principle .item .txt {font-size:var(--font-size-18); font-weight:600; line-height:1.778em; letter-spacing:-.02em; color:var(--color-primary);}

.haccp-food {display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--space-15);}
.haccp-food .item {padding:var(--space-15); border:1px solid #ddd; border-radius:8px; font-size:var(--font-size-20); font-weight:400; line-height:1.7em; letter-spacing:-.02em; color:#505050; text-align:center;}

.haccp-process {display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--space-15); padding:var(--space-50); border-radius:16px; background:#F9F9F9;}
.haccp-process .col {min-width:0;}
.haccp-process h4 {margin-bottom:var(--space-25); padding:var(--space-15); border-radius:40px; font-size:var(--font-size-20); font-weight:500; line-height:1.7em; letter-spacing:-.02em; color:#fff; text-align:center;}
.haccp-process .list ul {display:flex; flex-direction:column; gap:var(--space-8);}
.haccp-process .list li {padding:var(--space-15); border:1px solid #ddd; border-radius:80px; background:#fff; font-size:var(--font-size-20); font-weight:500; line-height:1.7em; letter-spacing:-.02em; color:#2C2C2C; text-align:center;}
.haccp-process .col:nth-child(1) h4 {background:#DAE6F5;}
.haccp-process .col:nth-child(2) h4 {background:#3489E3;}
.haccp-process .col:nth-child(3) h4 {background:#286AB0;}
.haccp-process .col:nth-child(4) h4 {background:#1C4878;}

.haccp-note {padding-left:24px; position:relative; font-size:var(--font-size-20); font-weight:500; line-height:1.7em; letter-spacing:-.02em; color:#505050;}
.haccp-note:before {content:''; position:absolute; left:0; top:.4em; width:16px; height:16px; background:url('/images/sub/haccp-icon-note.png') no-repeat center center / contain;}

.haccp-effect .group {margin-bottom:var(--space-60);}
.haccp-effect .group:last-child {margin-bottom:0;}
.haccp-effect .title {border-bottom:1px solid #686868; padding-bottom:var(--space-30); margin-bottom:var(--space-30);}
.haccp-effect .title h4 {display:flex; align-items:center; gap:var(--space-12); font-size:var(--font-size-24); font-weight:600; line-height:1.583em; letter-spacing:-.02em; color:#2C2C2C;}
.haccp-effect .title h4 span {display:inline-flex; flex-shrink:0; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; background:#505050; font-size:var(--font-size-14); font-weight:600; line-height:1; letter-spacing:-.02em; color:#fff;}
.haccp-effect .food {display:grid; grid-template-columns:repeat(2, 1fr); margin-top:calc(var(--space-30) * -1);}
.haccp-effect .food .item {display:flex; align-items:center; gap:0 var(--space-40); padding:var(--space-30) 0; border-bottom:1px dashed #DDDDDD;}
.haccp-effect .food .item:last-child {grid-column:span 2;}
.haccp-effect .food .item:nth-child(1),
.haccp-effect .food .item:nth-child(3) {padding-right:var(--space-40);}
.haccp-effect .food .item .img {width:140px;}
.haccp-effect .food .item .cnt {flex:1;}
.haccp-effect .food .item .tit {margin-bottom:var(--space-10); font-size:var(--font-size-20); font-weight:600; line-height:1.7em; letter-spacing:-.02em; color:#2C2C2C;}
.haccp-effect .food .item .txt {font-size:var(--font-size-18); font-weight:400; line-height:1.778em; letter-spacing:-.035em; color:#505050;}

.gmp-elements {display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-15);}
.gmp-elements .item {min-width:0; overflow:hidden; border-radius:16px; background:#F9F9F9;}
.gmp-elements .item .img {aspect-ratio:470 / 338; overflow:hidden;}
.gmp-elements .item .img img {width:100%; height:100%; object-fit:cover;}
.gmp-elements .item .cnt {padding:var(--space-40) var(--space-30) var(--space-30);}
.gmp-elements .item .tit {margin-bottom:var(--space-12); font-size:var(--font-size-24); font-weight:600; line-height:1.583em; letter-spacing:-.02em; color:#2C2C2C;}
.gmp-elements .item .tit svg {margin-right:var(--space-10);}
.gmp-elements .item .txt {font-size:var(--font-size-18); font-weight:400; line-height:1.778em; letter-spacing:-.02em; color:#505050;}

.gmp-features .card {margin-bottom:var(--space-15); border-radius:16px; background:var(--color-primary); padding:var(--space-30) var(--space-25);}
.gmp-features .card:last-child {margin-bottom:0;}
.gmp-features .card h4 {border-bottom:1px dashed rgba(255,255,255,0.32); padding-bottom:var(--space-20); margin-bottom:var(--space-20); font-size:var(--font-size-22); font-weight:600; line-height:1.636em; letter-spacing:-.02em; color:#fff;}
.gmp-features .card h4 img {margin:.25em var(--space-15) 0 0; flex-shrink:0; width:24px; height:24px; object-fit:contain;}
.gmp-features .card .list li {margin-bottom:var(--space-12); display:flex; gap:10px; font-size:var(--font-size-20); font-weight:400; line-height:1.7em; letter-spacing:-.02em; color:#fff;}
.gmp-features .card .list li:last-child {margin-bottom:0;}
.gmp-features .card .list .num {flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; min-width:44px; padding:3px var(--space-12); border-radius:500px; background:#fff; font-size:var(--font-size-16); font-weight:500; line-height:1.5em; letter-spacing:-.02em; color:var(--color-primary);}

.gmp-need {display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--space-15);}
.gmp-need .cell {position:relative; display:flex; min-height:224px; align-items:center; justify-content:center; overflow:hidden; border-radius:16px; border:1px solid #286AB0; padding:var(--space-18); text-align:center;}
.gmp-need .cell .badge {position:absolute; left:-1px; top:-1px; display:flex; width:48px; height:48px; align-items:center; justify-content:center; border-radius:0 0 16px 0; background:#286AB0; font-size:var(--font-size-18); font-weight:600; line-height:1.778em; letter-spacing:-.02em; color:#fff;}
.gmp-need .cell p {font-size:var(--font-size-22); font-weight:400; line-height:1.636em; letter-spacing:-.02em; color:#2C2C2C;}
.gmp-need .cell p strong {font-weight:700;}
.gmp-need .cell:nth-child(even) {border-color:#8FC31F;}
.gmp-need .cell:nth-child(even) .badge {background:#8FC31F;}

.gmp-expect {display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-15);}
.gmp-expect .card {border-radius:16px; background:#F9F9F9; padding:var(--space-30); min-width:0;}
.gmp-expect .label {margin-bottom:var(--space-25); font-size:var(--font-size-18); font-weight:600; line-height:1.778em; letter-spacing:-.02em; color:#8FC31F;}
.gmp-expect .tit {position:relative; z-index:1; margin-bottom:var(--space-12); font-size:var(--font-size-24); font-weight:600; line-height:1.583em; letter-spacing:-.02em; color:#2C2C2C;}
.gmp-expect .txt {position:relative; z-index:1; font-size:var(--font-size-20); font-weight:400; line-height:1.7em; letter-spacing:-.02em; color:#505050;}

.food-hero {position:relative; display:flex; min-height:clamp(280px, calc(430 / var(--inner) * 100vw), 430px); flex-direction:column; justify-content:flex-end;overflow:hidden; margin-bottom:var(--space-60); border-radius:16px; padding:var(--space-60); background:url('/images/sub/food-plan-hero.png') center center / cover no-repeat;}
.food-hero::before {content:''; position:absolute; inset:0; z-index:0; border-radius:16px; background:linear-gradient(25.8deg, rgba(0,0,0,0.5) 19.6%, rgba(0,0,0,0) 48.9%); pointer-events:none;}
.food-hero .tit {position:relative; z-index:1; margin-bottom:var(--space-15); font-size:var(--font-size-32); font-weight:600; line-height:1.4375em; letter-spacing:-.02em; color:#fff;}
.food-hero .txt {position:relative; z-index:1;font-size:var(--font-size-20); font-weight:400; line-height:1.7em; letter-spacing:-.02em; color:rgba(255,255,255,0.8);}

.food-plan {display:grid; grid-template-columns:repeat(3, 1fr);}
.food-plan .item {border-right:1px solid #dfdfdf; text-align:center;}
.food-plan .item:last-child {border-right:none;}
.food-plan .item .ico {margin-bottom:var(--space-40);}
.food-plan .item .ico img {height:clamp(60px, calc(144 / var(--inner) * 100vw), 144px);}
.food-plan .item .tit {margin-bottom:var(--space-25); font-size:var(--font-size-32); font-weight:600; line-height:1.4375em; letter-spacing:-.02em; color:#2C2C2C;}
.food-plan .item .txt {font-size:var(--font-size-18); font-weight:400; line-height:1.778em; letter-spacing:-.02em; color:#505050;}
.food-plan .item .note {margin-top:var(--space-8); font-size:var(--font-size-16); font-weight:400; line-height:1.875em; letter-spacing:-.02em; color:#999;}

.table01 table {width:100%; border-collapse:collapse; border-spacing:0; text-align:center;}
.table01 thead th {border-bottom:1px solid #ddd; font-size:var(--font-size-18); font-weight:600; line-height:1.4em; letter-spacing:-.03em; padding:var(--space-15); background:#F3F7FB; color:var(--color-primary);}
.table01 tbody td {border-bottom:1px solid #ddd; font-size:var(--font-size-18); font-weight:400; line-height:1.4em; letter-spacing:-.03em; padding:var(--space-15); color:#484848;}