@charset "utf-8";
/* 서브공통 */
.gradient {background: linear-gradient(180deg, #1892CD 0%, #1F5FAF 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 700;}
.doc-title h3 {font-size: var(--font-size-40); font-weight: 600; line-height: 1.2em; color: #242424; text-align: center;}
.color-bg {background: rgba(24, 146, 205, 0.03);}

/********************* 회사소개 *********************/
/* 인사말 */
.greeting-content {position: relative; padding-bottom: var(--space-80);}
.greeting-content .greeting-img {position: absolute; top: var(--space-80); right: 0; width: clamp(400px, calc(736 / var(--inner) * 100vw), 736px); border-radius: var(--radius-24); overflow: hidden; z-index: -1;}
.greeting-content .greeting-txt-wrap {display: inline-block; padding: var(--space-80); border-radius: var(--radius-24); background: linear-gradient(133deg, rgba(255, 255, 255, 0.90) 9.64%, rgba(255, 255, 255, 0.72) 100%); box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.12); backdrop-filter: blur(10px)}
.greeting-top .label {display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-16); font-size: 14px; font-weight: 600; line-height: 1.714em; color: var(--color-primary);}
.greeting-top .label:before {content: ''; display: inline-block; width: 40px; height: 1px; background: var(--color-primary);}
.greeting-top .desc {font-size: var(--font-size-32); font-weight: 600; line-height: 1.312em; color: #242424;}
.greeting-desc {margin-bottom: var(--space-22); font-size: var(--font-size-18); line-height: 1.666em;}
.greeting-desc p {margin-bottom: var(--space-24);}
.greeting-desc p:last-child {margin-bottom: 0;}
.greeting-content .sign {font-size: var(--font-size-18); gap: var(--space-16); font-weight: 600; line-height: 1.44em; color: #242424;}

/* 회사연혁 */
.history-content {padding-bottom: var(--space-100);}
.history-img {margin-bottom: var(--space-56); border-radius: var(--radius-24); overflow: hidden;}
.history-img img {min-height: 200px; object-fit: cover;}
.history-item {display: flex; align-items: start;}
.history-item .year {position: relative; flex: 1; text-align: right; padding-right: 80px;}
.history-item .year:before {position:absolute; content:""; background:#fff; top:10px; right: -8px; width:16px; height:16px; border-radius:100%; border:4px solid #454545;}
.history-item .year h2 {font-size: var(--font-size-48); font-weight: 700; line-height: 1em;}
.history-item .year p {margin-top: var(--space-16); font-size: var(--font-size-18); font-weight: 600; line-height: 1.444em; color: #242424;}
.history-item .item-wrap {flex:1;}
.history .item {display:flex;}
.history .list {flex:1 1 auto; min-width:0; width:1%; padding:3px 0 var(--space-100) 80px; position:relative;}
.history .list:after {position:absolute; content:""; left:0; top:10px; width:1px; height:100%; background:#ddd; z-index:-1;}
.history .list > li {margin-bottom:8px; display:flex; font-size: var(--font-size-16); line-height:1.875em; letter-spacing: -.03em;}
.history .list > li:last-child {margin-bottom: 0;}
.history .list > li p {position: relative; padding-left: 14px;}
.history .list > li p:before {content: ''; display: inline-block; width: 4px; height: 4px; background: var(--color-primary); border-radius: 100%; position: absolute; top: 12px; left: 0;}
.history .list > li:last-child {margin-bottom:0;}
.history .list > li .img {margin-top: 10px; border-radius: var(--radius-16); overflow: hidden;}
.history .item:last-child .list {padding-bottom:120px;} 
.history-item:last-child .item:last-child .list {padding-bottom: 0;}
.history-item:last-child .item:last-child .list:after {display:none;}

.history .sub-list > li {margin-bottom: 4px; font-size: var(--font-size-18); line-height: 1.777em; letter-spacing: -.02em; color: #484848;}
.history .sub-list > li:last-child {margin-bottom: 0;}

/* 회사정보 */
.info-content {padding: var(--space-100) 0 var(--space-150); background: url('/images/sub/info-bg.jpg') no-repeat center center / cover;}
.company-info-item {display: flex; flex-wrap: wrap; gap: var(--space-16) var(--space-30);}
.company-info-item dl {flex: 1 1 calc(50% - calc(var(--space-30) / 2)); display: flex; align-items: center; width: 100%; margin: 0; border-radius: 500px; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); overflow: hidden;}
.company-info-item dt {display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 128px; padding: 12px 8px; border-radius: 50px; background: var(--color-primary); color: #fff; font-size: var(--font-size-18); font-weight: 600; line-height: 1.44em; text-align: center;}
.company-info-item dd {flex: 1 1 auto; min-width: 0; margin: 0; padding: 12px 20px; font-size: var(--font-size-18); font-weight: 400; line-height: 1.433em; color: #242424;}

/* 찾아오시는 길 */
.location-section {padding: var(--space-100) 0;}
.location-section:first-child {padding-top: 0;}
.location-section:last-child {padding-bottom: var(--space-150);}
.root_daum_roughmap {width: 100% !important;}
.root_daum_roughmap .wrap_map {height: 400px !important;}
.root_daum_roughmap .wrap_controllers {display: none !important;}

.lct-item {display: flex; justify-content: space-between; gap: var(--space-32);}
.lct-tit-wrap {margin-bottom: var(--space-32);}
.lct-tit {font-size: var(--font-size-32); font-weight: 700; line-height: 1.25em; color: #242424; margin-bottom: var(--space-12);}
.lct-address dd {font-size: var(--font-size-18); font-weight: 500; line-height: 1.444em;}
.lct-info-wrap .box {gap: var(--space-16);}
.lct-info {display: flex;}
.lct-info dt {display: flex; align-items: center; font-size: var(--font-size-16); font-weight: 600; line-height: 1.5em;}
.lct-info dt .icon {margin-right: var(--space-10);}
.lct-info dt:after {content: ''; display: inline-block; width: 1px; height: 14px; background: #ddd; margin: 0 var(--space-20);}
.lct-info dd {font-size: var(--font-size-16); line-height: 1.5em;}
.map-wrap {flex: 0 1 66.7%;}
.map-wrap .map1 {margin-bottom: var(--space-30); border-radius: var(--radius-24); overflow: hidden;}
.lct-img-wrap {display: flex; gap: var(--space-30); flex-wrap: wrap;}
.lct-img-wrap .img {flex: 0 1 calc(50% - calc(var(--space-30) / 2)); border-radius: var(--radius-24); overflow: hidden;}

/********************* 사업분야 *********************/
/* 사업분야 공통 */
.sub-color {color: var(--color-sub);}
.business-top {display: flex; flex-direction: column; align-items: center; gap: var(--space-24); margin-bottom: var(--space-100); text-align: center;}
.business-top:before {content: ''; display: inline-block; width: 24px; height: 24px; background: url('/images/sub/business-quote.svg') no-repeat center center / contain;}
.business-top:after {content: ''; display: inline-block; width: 24px; height: 24px; background: url('/images/sub/business-quote.svg') no-repeat center center / contain;}
.business-top-tit {font-size: var(--font-size-24); font-weight: 700; line-height: 1.33em; color: #242424; }
.business-top-desc {margin-top: var(--space-16);font-size: var(--font-size-16); line-height: 1.5em; color: #686868;}
.business-section {padding: var(--space-100) 0;}
.business-section:last-child {padding-bottom: 0;}
.business-tit {font-size: var(--font-size-40); font-weight: 600; line-height: 1.2em; color: #242424; text-align: center; margin-bottom: var(--space-60);}
.pl-item {flex: 0 1 calc(50% - calc(var(--space-32) / 2));}
.pl-item-img {border-radius: var(--radius-24); overflow: hidden;}
.pl-item-img img {width: 100%; height: 100%; object-fit: cover;}

/* 3pl */
.business-section.pl-section:last-child {padding-bottom: var(--space-150);}
/* 서비스 소개 */
.service-item {flex-shrink: 0; position: relative; width: calc(100% / 5 + 20px); aspect-ratio: 1/1; padding: var(--space-30) var(--space-10) var(--space-10) var(--space-10); background: var(--color-sub); color: #fff; border-radius: 100%; border: 6px solid rgba(255, 255, 255, 0.20); text-align: center;}
.service-item:nth-child(even) {background: var(--color-primary);}
.service-item:nth-child(2) {left: -26px;}
.service-item:nth-child(3) {left: -52px;}
.service-item:nth-child(4) {left: -78px;}
.service-item:nth-child(5) {left: -104px;}
.service-item .num {font-family: 'paperlogy'; font-size: var(--font-size-32); font-weight: 600; line-height: 1.5em; color: rgba(255, 255, 255, 0.20);}
.service-item .service-tit {display: block; margin-top: var(--space-16); font-size: var(--font-size-18); font-weight: 700; line-height: 1.444em; color: #fff;}
.service-item .service-desc {margin-top: 8px; font-size: var(--font-size-16); line-height: 1.5em; color: #fff;}

/* 전문 운영 역량 */
.ability-list {gap: var(--space-40); align-items: stretch;}
.ability-item {flex: 0 1 calc(50% - calc(var(--space-40) / 2)); display: flex; flex-direction: column;}
.ability-top {text-align: center; padding: var(--space-30); border-radius: var(--radius-24) var(--radius-24) 0 0; border-top: 4px solid var(--color-primary); background: #EFF4F9;}
.ability-item.type2 .ability-top {background: rgba(24, 146, 205, 0.06); border-top: 4px solid var(--color-sub);}
.ability-top-tit {font-size: var(--font-size-28); font-weight: 700; line-height: 1.28em;}
.ability-top-desc { margin-top: 8px;font-size: var(--font-size-16); line-height: 1.5em; color: #686868;}
.ability-cont {flex: 1; padding: 0 var(--space-30); background: #fff; border-radius: 0 0 var(--radius-24) var(--radius-24); border: 1px solid #ddd; border-top: none;}
.ability-cont .box {padding: var(--space-30) 0; border-bottom: 1px dashed #ddd;}
.ability-cont .box:last-child {border-bottom: none;}
.ability-cont .box .title {position: relative; padding-left: 25px; font-size: var(--font-size-18); font-weight: 600; line-height: 1.33em; color: #242424; }
.ability-cont .box .title:before {content: ''; display: inline-block; width: 15px; height: 24px; background: url('/images/sub/ability-arrow1.svg') no-repeat center right / 11px; position: absolute; top: 0; left: 0;}
.ability-item.type2 .ability-cont .box .title:before {background-image: url('/images/sub/ability-arrow2.svg');}
.ability-cont-list {display: flex; flex-wrap: wrap; gap: var(--space-20); margin-top: var(--space-16);}
.ability-cont-list li {flex: 0 1 calc(50% - calc(var(--space-20) / 2)); padding: var(--space-20) var(--space-10); border-radius: var(--radius-16); border: 1px solid #ddd; text-align: center;}
.ability-cont-list.risk li {flex: 1 1 calc(33.333% - 14px);}
.ability-cont-list .icon {margin-bottom: var(--space-16);}
.ability-cont-list .tit {display: block; font-size: var(--font-size-16); font-weight: 600; line-height: 1.25em; color: rgba(36, 36, 36, 0.90); margin-bottom: 8px;}
.ability-cont-list .desc {font-size: var(--font-size-14); line-height: 1.42em; color: rgba(69, 69, 69, 0.90);}
.ability-cont .round-list {display: flex; flex-wrap: wrap; gap: var(--space-10); margin-top: var(--space-16);}
.ability-cont .round-list li {display: flex; align-items: center; justify-content: center; flex: 1; padding: var(--space-10) var(--space-20); border-radius: 50px; background: #F8F8F8;text-align: center; font-size: var(--font-size-16); font-weight: 500; line-height: 1.25em;}
.ability-cont .round-list.process {gap: var(--space-16);}
.ability-cont .round-list.process li {flex:0 1 100%; display: flex; justify-content: flex-start;}
.ability-cont .round-list.process li .num {display: flex; align-items: center; font-size: var(--font-size-16); font-weight: 600; line-height: 1.25em; color: var(--color-sub);}
.ability-cont .round-list.process li .num:after {content: ''; display: inline-block; width: 1px; height: 14px; background: #ddd; margin: 0 var(--space-10);}

/* 시설전경 */
.facility-cont {display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-30);}
.facility-img {border-radius: var(--radius-16); overflow: hidden;}

/* 수입 화장품 자동화 */
.cosmetic-reform {display: flex; flex-direction: column; gap: var(--space-60); align-items: stretch;}
.cosmetic-reform.type2 {gap: var(--space-120);}
.cosmetic-box {display: flex; flex-direction: column; gap: var(--space-40); align-items: center; position: relative; width: 100%;}
.cosmetic-lead {margin: 0; width: 100%; font-size: var(--font-size-24); font-weight: 600; line-height: 1.333em; color: #242424; text-align: left;}
.cosmetic-card-wrap {position: relative; display: flex;  gap: var(--space-120); align-items: stretch; width: 100%;}
.cosmetic-card-wrap.gap30 {gap: var(--space-30);}
.cosmetic-card-wrap.gap40 {gap: var(--space-40);}
.cosmetic-card {flex: 1; position: relative; width: 100%;}
.cosmetic-card.arrow:after {content: ''; display: inline-block; width: clamp(90px, calc(134 / var(--inner) * 100vw), 134px); aspect-ratio: 134/353; background: url('/images/sub/cosmetic-arrow.svg') no-repeat center center / contain; position: absolute; top: 50%; left: 94%; transform: translate(0, -50%); z-index: -1;}
.cosmetic-card.arrow.arrow-down:after {left: 50%; top: 68%; right: unset; transform: translate(-50%, 0) rotate(90deg);}
.cosmetic-card .card-inner {height: 100%; background: #fff; border-radius: var(--radius-24); box-shadow: 0 0 12px rgba(0, 0, 0, 0.12); overflow: hidden;}
.card-inner.wide {max-width: 100%;}
.cosmetic-card-head {display: flex; align-items: center; justify-content: center; width: 100%; padding: 12px 30px; }
.cosmetic-card-head.dark {background: #454545;}
.cosmetic-card-head.navy {background: #163A63;}
.cosmetic-card-head.primary-bg {background: var(--color-primary);}
.cosmetic-card-head.sub-color-bg {background: var(--color-sub);}
.cosmetic-card-head.gradient-bg {background: linear-gradient(84.37deg, var(--color-primary) 0%, var(--color-sub) 97.71%);}
.cosmetic-card-tit {margin: 0; font-size: var(--font-size-20); font-weight: 700; line-height: 1.4em; color: #fff; text-align: center;}
.cosmetic-card-body {display: flex; flex-direction: column; gap: var(--space-30); width: 100%; padding: var(--space-30);}
[class*="cosmetic-img-rd"] {position: relative; overflow: hidden; background: #fff;}
[class*="cosmetic-img-rd"].border:after {content: ''; display: inline-block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; border: 1px solid #ddd;}
.cosmetic-img-rd20 {border-radius: var(--radius-20);}
.cosmetic-img-rd20.border:after {border-radius: var(--radius-20);}
.cosmetic-img-rd16 {border-radius: var(--radius-16);}
.cosmetic-img-rd16.border:after {border-radius: var(--radius-16);}
.cosmetic-card-list {display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none;}
.cosmetic-card-list li {position: relative; padding-left: 28px; font-size: var(--font-size-18); font-weight: 500; color: #454545; line-height: 1.33em;}
.cosmetic-card-list.primary li {font-weight: 600; color: var(--color-primary);}
.cosmetic-card-list li:before {content: ''; position: absolute; top: 2px; left: 0; width: 20px; height: 20px; background: url('/images/sub/cosmetic-check-icon1.svg') no-repeat center center / contain;}
.cosmetic-card-list.primary li:before {background-image: url('/images/sub/cosmetic-check-icon2.svg');}
.cosmetic-card-list[class*="polygon"] li {padding-left: 25px;}
.cosmetic-card-list[class*="polygon"] li:before {top: 1px; width: 15px; height: 24px; background: url('/images/sub/cosmetic-polygon.svg') no-repeat center right / 11px;}
.cosmetic-card-list.polygon2 li:before {background-image: url('/images/sub/cosmetic-polygon2.svg');}
.cosmetic-card-list.polygon3 li:before {background-image: url('/images/sub/cosmetic-polygon3.svg');}
.cosmetic-card-desc {margin: 0; width: 100%; font-size: var(--font-size-18); font-weight: 400; line-height: 1.444em; color: #454545; text-align: center;}
.cosmetic-img-list {display: flex; flex-wrap: wrap; gap: var(--space-30); }
.cosmetic-img-list .img-item {flex: 1;}
.cosmetic-img-list p {margin-top: var(--space-20);font-size: var(--font-size-18); font-weight: 600; line-height: 1.333em; color: #242424; text-align: center;}

/* 수작업 라벨링 */
.labelimg-img-list {display: flex; flex-wrap: wrap; gap: 30px;}
.labelimg-img-list .img {flex: 0 1 calc(33.3333% - 20px); border-radius: var(--radius-16); overflow: hidden;}
.labelimg-img-list .img.wide {flex: 0 1 calc(66.6666% - 10px);}

/* 수입 냉동식품 */
.frozen-img-list {display: flex; flex-wrap: wrap; gap: var(--space-30);}
.frozen-img-list .img {flex: 0 1 calc(50% - calc(var(--space-30) / 2)); border-radius: var(--radius-16); overflow: hidden;}
.frozen-ability-list .ability-item {box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.12); border-radius: var(--radius-24);}
.frozen-ability-list .ability-cont {border: none;}

.doc-brand {width: 100%; font-size: var(--font-size-18); font-weight: 500; line-height: 1.6em; color: #242424; text-align: left; }