@charset "utf-8";

.sub-tab {margin-bottom:var(--space-40);}
.sub-tab ul {display:flex;}
.sub-tab ul li {width:auto; margin-right:var(--space-25); flex:1;}
.sub-tab ul li a {background:#eee; padding:0 var(--space-30); height:clamp(40px, calc(48 / var(--inner) * 100vw), 48px); font-weight:400; color:#999; display:flex; align-items:center; justify-content:center; text-align:center;}
.sub-tab ul li.active a {color:#fff; background:var(--color-primary);}

.company-intro {margin-bottom:var(--space-90); text-align:center;}
.company-intro .text {font-size:var(--font-size-24); font-weight:400; letter-spacing:-.03em; line-height:1.5em;}
.company-intro h3 {font-size:var(--font-size-60); font-weight:700; letter-spacing:-.03em; line-height:1.3em; color:var(--color-primary);}
.company-intro .bar {margin:var(--space-10) auto var(--space-20); width:2px; height:40px; background:#b9bbd8;}
.company-intro .banner {padding:20px; display:flex; align-items:center; justify-content:center; text-align:center; min-height:300px; background:url('/images/sub/company-banner.jpg') no-repeat center center / cover;}
.company-intro .banner p {color:#fff;}

.company-tit {margin-bottom:var(--space-50); text-align:center; font-weight:400; font-size:var(--font-size-32); letter-spacing:-.03em; line-height:1.3em;}

.company-value {margin-bottom:var(--space-90);}
.company-value .items {display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--space-30);}
.company-value .items .ico {text-align:center;}
.company-value .items .ico img {height:clamp(48px, calc(76 / var(--inner) * 100vw), 76px);}
.company-value .items .bar {margin:var(--space-20) auto;  width:2px; height:24px; background:#b9bbd8;}
.company-value .items .label {text-align:center; border-radius:20px; font-size:var(--font-size-20); font-weight:700; letter-spacing:-.03em; line-height:40px; background:var(--color-primary); color:#fff;}
.company-value .items .tit {margin:var(--space-35) 0 var(--space-10); text-align:center; font-size:var(--font-size-18); font-weight:700; letter-spacing:-.03em; line-height:1.4em; color:#454545;}
.company-value .items .txt ul li {color:#454545; padding-left:.8em; text-indent:-.8em; letter-spacing:-.04em;}

.company-service {padding:var(--space-120) 0 var(--space-190); background:#f9f9f9;}
.company-service .items {display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-40); text-align:center;}
.company-service .items .ico img {height:clamp(48px, calc(75 / var(--inner) * 100vw), 75px);}
.company-service .items .cnt {margin-top:var(--space-40); padding-top:var(--space-35); border-top:1px solid #aaa;}
.company-service .items .cnt dl dt {margin-bottom:var(--space-5); font-size:var(--font-size-18); font-weight:700; letter-spacing:-.03em; line-height:1.4em; color:var(--color-primary);}
.company-service .items .cnt dl dd {color:#454545;}

.brand-gate {display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--space-40); text-align:center;}
.brand-gate .item .tit {margin:var(--space-15) 0; font-size:var(--font-size-24); font-weight:700; letter-spacing:-.03em; line-height:1.4em;}
.brand-gate .item .txt-1 {font-weight:700; letter-spacing:-.03em; line-height:1.6em; color:#454545;}
.brand-gate .item .txt-2 {font-weight:400; letter-spacing:-.03em; line-height:1.6em; color:#454545;}

.brand-intro {padding:var(--space-90) 0 var(--space-80); text-align:center;}
.brand-intro .txt-1 {margin-bottom:var(--space-40); font-family:var(--font-chosun); font-size:var(--font-size-50); font-weight:300; letter-spacing:-.03em; line-height:1.3em; color:#633a11;}
.brand-intro .txt-2 {color:#454545;}
.brand-intro.type2 .txt-1 {font-family:'Pretendard', sans-serif; font-weight:700; color:#e291cd;}

.brand-tit {margin-bottom:var(--space-35); text-align:center; font-family:var(--font-chosun); font-size:var(--font-size-30); font-weight:400; letter-spacing:-.03em; line-height:1.4em; color:#633a11;}
.brand-tit.type2 {font-family:'Pretendard', sans-serif; color:#e291cd; font-weight:600;}

.philosophy {margin-bottom:var(--space-90);}
.philosophy .item {margin-bottom:var(--space-20); border-radius:60px; overflow:hidden; display:flex; align-items:stretch;}
.philosophy .item:last-child {margin-bottom:0;}
.philosophy .item .num {display:flex; align-items:center; justify-content:center; width:25%; color:#fff; background:#242424; font-size:var(--font-size-30); font-weight:600; letter-spacing:-.03em; line-height:1.4em;}
.philosophy .item .text {padding:var(--space-25) var(--space-40); flex:1; background:#a96726; color:#fff;}
.philosophy .item .text h4 {margin-bottom:var(--space-5); font-size:var(--font-size-24); font-weight:600; letter-spacing:-.03em; line-height:1.4em;}
.philosophy .item .text p {font-size:var(--font-size-18); font-weight:400; letter-spacing:-.03em;}
.philosophy.type2 .text {background:#c2185b;}

.core-product {display:flex; justify-content:center; text-align:center; gap:0 var(--space-25);}
.core-product .item h4 {margin:var(--space-25) 0 var(--space-5); font-size:var(--font-size-20); font-weight:600; letter-spacing:-.03em; line-height:1.4em;}
.core-product .item p {font-weight:500; letter-spacing:-.03em; color:#454545;}

.history-tab {margin-bottom:var(--space-55);}
.history-tab ul {display:flex;}
.history-tab ul li {flex:1;}
.history-tab ul li a {padding-bottom:var(--space-15); border-bottom:3px solid #ddd; font-size:var(--font-size-28); font-weight:700; letter-spacing:-.03em; line-height:1.4em; display:flex; align-items:center; justify-content:center; text-align:center;}
.history-tab ul li.active a {border-bottom-color:var(--color-primary);}

.history-content {position:relative;}
.history-content .progress-container {z-index:-1; position:absolute; left:19px; top:80px; bottom:65px; width:2px; background:#ddd;}
.history-content .progress-bar {width:100%; background:var(--color-primary); height:0;}
.history-content .item {display:flex; align-items:center; gap:0 var(--space-55); margin-bottom:var(--space-20);}
.history-content .item .dot {width:40px; height:40px; background:url('/images/sub/history-dot.png') no-repeat center center / contain;}
.history-content .item:last-child {margin-bottom:0;}
.history-content .item .content {flex:1; padding:35px 40px; border-radius:16px; box-shadow:0 0 16px rgba(0,0,0,.15); overflow:hidden;}
.history-content .item .content h3 {margin-bottom:3px; font-size:28px; font-weight:700; letter-spacing:-.03em; line-height:1.4em; color:var(--color-primary);}
.history-content .item .content .txt ul li {font-size:16px; color:#454545;}

.location-tab {margin-bottom:var(--space-40);}
.location-tab ul {display:flex; justify-content:center; gap:0 var(--space-20);}
.location-tab ul li a {border-radius:8px; background:#eee; padding:0 var(--space-30); height:clamp(40px, calc(48 / var(--inner) * 100vw), 48px); font-size:var(--font-size-18); font-weight:500; color:#999; display:flex; align-items:center; justify-content:center; text-align:center;}
.location-tab ul li.active a {color:#fff; background:var(--color-primary);}

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

.location-info {margin-top:var(--space-35); display:flex; align-items:flex-end; justify-content:space-between;}
.location-info .title p {font-weight:600; color:var(--color-primary);}
.location-info .title h3 {font-size:var(--font-size-32); font-weight:700; letter-spacing:-.03em; line-height:1.4em;}
.location-info .items {display:flex;}
.location-info .items .item {padding:0 var(--space-25); border-right:1px solid #ddd;}
.location-info .items .item:last-child {border-right:0;}
.location-info .items .item dl {display:flex; line-height:1.3em;}
.location-info .items .item dl dt {display:flex; align-items:center; gap:0 var(--space-15); margin-right:var(--space-20);}

.oem-intro {margin-bottom:var(--space-80);}
.oem-intro .inner {display:flex; align-items:center;}
.oem-intro .title {width:41%;}
.oem-intro .title p {margin-bottom:var(--space-15); font-size:var(--font-size-18); font-weight:600; letter-spacing:-.03em; line-height:1.4em; color:var(--color-primary);}
.oem-intro .title h3 {font-size:var(--font-size-32); font-weight:400; letter-spacing:-.03em; line-height:1.25em;}
.oem-intro .content {flex:1;}
.oem-intro .content p {color:#454545;}
.oem-intro.type2 .title {width:58%;}

.oem-tit {margin-bottom:var(--space-25); line-height:1.4em; font-size:var(--font-size-40); font-weight:700; letter-spacing:-.03em; color:var(--color-primary);}
.oem-tit .bar {display:inline-block; width:1px; height:15px; background:#ddd; margin:0 var(--space-10);}
.oem-tit small {line-height:1.4em; display:inline-block; font-size:var(--font-size-16); font-weight:400; letter-spacing:-.03em; color:#686868;}

.oem-process .process .items {display:flex; flex-wrap:wrap;}

.customer {padding:var(--space-80) 0; background:#f9f9f9;}
.customer h3 {margin-bottom:var(--space-30); font-size:var(--font-size-40); font-weight:700; letter-spacing:-.03em; line-height:1.4em;}
.customer .items {text-align:center; display:grid; grid-template-columns:repeat(5, 1fr); gap:var(--space-20);}

.inquiry-info {padding-top:var(--space-80);}
.inquiry-info h3 {margin-bottom:var(--space-45); font-size:var(--font-size-32); font-weight:700; letter-spacing:-.03em; line-height:1.4em; text-align:center;}
.inquiry-info .items {text-align:center; display:flex; justify-content:center;}
.inquiry-info .items .item {padding:0 var(--space-50);}
.inquiry-info .items .ico img {height:clamp(48px, calc(126 / var(--inner) * 100vw), 126px);}
.inquiry-info .items h4 {margin:var(--space-10) 0 var(--space-5);font-size:var(--font-size-18); font-weight:700; letter-spacing:-.03em; line-height:1.4em; color:var(--color-primary);}
.inquiry-info .items p {color:#454545;}
.inquiry-info .button {display:block; text-align:center; margin:var(--space-55) auto 0; width:clamp(120px, calc(160 / var(--inner) * 100vw), 160px); line-height:clamp(40px, calc(50 / var(--inner) * 100vw), 50px); background:#000; color:#fff;}

.qc .text {margin-bottom:var(--space-40); background:#f8f8f8; padding:var(--space-25); text-align:center;}
.qc .text h4 {margin-bottom:var(--space-10); font-size:var(--font-size-20); font-weight:700; letter-spacing:-.03em; line-height:1.4em;}
.qc .text h4 span {color:var(--color-primary);}
.qc .items {display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-40);}
.qc .items .item {border:1px solid #ddd; padding:var(--space-40) var(--space-20) var(--space-35) var(--space-40);}
.qc .items .item h5 {margin:var(--space-30) 0 var(--space-10); font-size:var(--font-size-20); font-weight:700; letter-spacing:-.03em; line-height:1.4em;}

.facilities-picture {margin-bottom:var(--space-80); display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--space-20);}
.facilities-picture .img {aspect-ratio:276/134;}
.facilities-picture .img img {width: 100%; height: 100%; object-fit:cover;}

.formulation h3 {margin-bottom:var(--space-35); font-size:var(--font-size-28); font-weight:700; letter-spacing:-.03em; line-height:1.4em;}
.formulation .tab-area {margin-bottom:var(--space-60);}
.formulation .tab-area ul {display:flex;}
.formulation .tab-area ul li {border-bottom:1px solid var(--color-primary); border-top:1px solid #ddd; border-right:1px solid #ddd; position:relative; flex:1;}
.formulation .tab-area ul li:first-child {border-left:1px solid #ddd;}
.formulation .tab-area ul li a {display:flex; align-items:center; justify-content:center; text-align:center; height:clamp(40px, calc(60 / var(--inner) * 100vw), 60px); color:#505050; line-height:1.33em; letter-spacing:-.03em;}
.formulation .tab-area ul li.active {border-bottom:0;}
.formulation .tab-area ul li.active:before {content:''; position:absolute; left:-1px; bottom:-1px; right:-1px; top:-1px; pointer-events:none; border:2px solid var(--color-primary); border-bottom:0;}
.formulation .title {padding-bottom:var(--space-35); text-align:center;} 
.formulation .title h4 {margin-bottom:var(--space-5); font-size:var(--font-size-32); font-weight:700; letter-spacing:-.03em; line-height:1.4em;}
.formulation .title p {font-size:var(--font-size-18); font-weight:400; letter-spacing:-.03em; line-height:1.4em; color:#454545;}
/* .formulation .image {text-align:center;} */
.formulation .slider {position: relative;}
.formulation .slider .items {margin:0 calc(var(--space-15) * -1);}
.formulation .slider .item {padding: 0 var(--space-15);}
.formulation .slider .item .img { aspect-ratio:1; }
.formulation .slider .item .img img {width:100%; height:100%; object-fit:cover; }
.formulation .slider .item p { margin-top:var(--space-15); font-weight:600; letter-spacing:-0.03em; line-height:1.5em; color:#454545; text-align:center;}
.formulation .slider .slick-arrow {position: absolute; top: 50%; transform: translateY(-50%); width: 23px; height: 41px; display: block; border:0; font-size: 0; background-size: contain; background-repeat: no-repeat; background-position: 50% 50%; background-color: transparent;}
.formulation .slider .slick-prev {left:calc(var(--space-70) * -1); background-image: url('/images/sub/formulation-prev.png');} 
.formulation .slider .slick-next {right:calc(var(--space-70) * -1); background-image: url('/images/sub/formulation-next.png');} 

.inquiry-banner {margin-bottom:var(--space-80); text-align:center;}
.inquiry-banner h3 {margin-bottom:var(--space-75); font-size:var(--font-size-32); font-weight:400; letter-spacing:-.03em; line-height:1.3em;}
.inquiry-banner .bnr {padding:20px; position:relative; background:url('/images/sub/inquiry-bnr.jpg') no-repeat center center / cover; min-height:267px; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#fff;}
.inquiry-banner .bnr .bar {position:absolute; left:50%; top:-40px; width:1px; height:80px; background:linear-gradient(to bottom, var(--color-primary) 50%, #fff 50%);}
.inquiry-banner .bnr h4 {margin-bottom:var(--space-10); font-size:var(--font-size-24); font-weight:700; letter-spacing:-.03em; line-height:1.4em;}

.oem-process {margin-bottom:var(--space-80);}
.oem-process .text-box {margin-bottom:var(--space-40); padding:var(--space-25); background:#f8f8f8; text-align:center;}
.oem-process .text-box p {font-size:var(--font-size-20); font-weight:400; letter-spacing:-.03em; line-height:1.5em;}
.oem-process .text-box p strong {color:var(--color-primary);}
.oem-process .process .items {display:flex; flex-wrap:wrap; justify-content:center; margin:-20px;}
.oem-process .process .items .item {position:relative; padding:20px; width:16.66%;}
.oem-process .process .items .item:after {content:''; position:absolute; right:0; bottom:35px; margin-right:-5px; width:10px; height:14px; background:url('/images/sub/oem-arrow.png') no-repeat center center / contain;}
.oem-process .process .flip {aspect-ratio:1; position:relative; perspective:1000px; transform-style:preserve-3d;}
.oem-process .process .flip .cnt {width:100%; height:100%;/*backface-visibility:hidden;*/ transform-style:preserve-3d; transition:all .6s ease-in-out; border-radius:100%; border:1px solid var(--color-primary);}
.oem-process .process .flip .cnt .ico {width:60%; max-width:80px;}
.oem-process .process .flip .front {display:flex; align-items:center; justify-content:center;}
.oem-process .process .flip .back {display:flex; align-items:center;justify-content:center; position:absolute; left:0; top:0; width:100%; height:100% ; transform:rotateX(0) rotateY(-180deg);}
.oem-process .process .flip:hover .front {transform:rotateX(0) rotateY(180deg);}
.oem-process .process .flip:hover .back {transform:none;}
.oem-process .process .text {margin-top:20px; padding:10px 5px; font-size:16px; font-weight:500; line-height:1.33em; color:#fff; text-align:center; background:var(--color-primary); border-radius:20px;}
.oem-process .process .desc {font-size:16px; margin-top:var(--space-15); color:#454545; text-align:center;}
.oem-process .process .items .item:nth-child(6):after {display:none;}
.oem-process .process .items .item:last-child:after {display:none;}
.oem-process .process .items .item:nth-child(even) .cnt {border-color:#d5867f;}
.oem-process .process .items .item:nth-child(even) .text {background:#d5867f;}
.oem-process .process.type2 {max-width:1000px; margin-left:auto; margin-right:auto;}
.oem-process .process.type2 .items .item {width:20%;}
.oem-process .process.type2 .items .item:after {bottom:105px;}

.quality-intro {margin-bottom:var(--space-40); padding:var(--space-75) 0; background:#f6f6f6; text-align:center;}
.quality-intro h3 {margin-bottom:var(--space-20); font-size:var(--font-size-32); font-weight:700; letter-spacing:-.03em; line-height:1.4em;}
.quality-intro p {color:#454545;}
.quality-intro p span {color:var(--color-primary);}

.brand-visual {overflow:hidden; aspect-ratio:1920 / 980; }
.brand-visual img {height:100%; width:100%; object-fit:cover; }

.brand-intro-v2 {padding:var(--space-100) 0;}
.brand-intro-v2 .contain {display: flex; align-items:center; justify-content:center; gap:0 var(--space-80);}
.brand-intro-v2 .ico { flex-shrink:0; }
.brand-intro-v2 .text h3 {margin-bottom:var(--space-40); font-size:var(--font-size-36); font-weight:700; letter-spacing:-0.03em; line-height:1.15em; color:#242424;}
.brand-intro-v2 .text p { margin-top:var(--space-40);font-size:var(--font-size-18); font-weight:400; letter-spacing:-0.03em; line-height:1.5em; color:#454545; }

.brand-image {margin-bottom:var(--space-100);}

.brand-desc {margin-bottom:var(--space-130);}
.brand-desc .slider {position: relative;}
.brand-desc .item {margin-bottom:var(--space-60); display:flex;}
.brand-desc .item:last-child {margin-bottom:0;}
.brand-desc .item .tit {width:30%; padding-right: 30px; position: relative; padding-left:var(--space-40); font-size:var(--font-size-24); font-weight:600; letter-spacing:-0.03em; line-height:1.4em; color:#242424; }
.brand-desc .item .tit::before {position: absolute; left:var(--space-10); top:.4em; content:''; width:clamp(8px, calc(12 / var(--inner) * 100vw), 12px); height:clamp(8px, calc(12 / var(--inner) * 100vw), 12px); border-radius:50%; background:#242424; }
.brand-desc .item .cnt {flex:1;}
.brand-desc .item .cnt .txt {font-size:var(--font-size-18); font-weight:400; letter-spacing:-0.03em; line-height:1.5em; color:#454545; }
.brand-desc .item .cnt .img {margin-top:var(--space-40); aspect-ratio:976 / 460; overflow:hidden;}

.brand-slider { padding:var(--space-100) 0; background:#f2f2f2; }
.brand-slider .slider {position: relative;}
.brand-slider h3 {text-align:center; margin-bottom:var(--space-40); font-size:var(--font-size-28); font-weight: 700; letter-spacing:-.03em; line-height: 1.33em;}
.brand-slider .items {margin:0 calc(var(--space-20) * -1);}
.brand-slider .item {padding: 0 var(--space-20);}
.brand-slider .item .img { aspect-ratio:1; }
.brand-slider .item .img img {width:100%; height:100%; object-fit:cover; }
.brand-slider .item p { margin-top:var(--space-15); font-size:var(--font-size-20); font-weight:600; letter-spacing:-0.03em; line-height:1.5em; color:#000; text-align:center;}
.brand-slider .slick-arrow {position: absolute; top: 50%; transform: translateY(-50%); width: 30px; height: 60px; display: block; border:0; font-size: 0; background-size: contain; background-repeat: no-repeat; background-position: 50% 50%; background-color: transparent;}
.brand-slider .slick-prev {left:calc(var(--space-70) * -1); background-image: url('/images/sub/brand-prev.png');} 
.brand-slider .slick-next {right:calc(var(--space-70) * -1); background-image: url('/images/sub/brand-next.png');}