@charset "utf-8";
/* doc.css는 디자인페이지 스타일을 정의합니다. */

/* 공통 */
.sub-heading {margin-bottom:var(--space-40); text-align:center;}
.sub-heading h2 {font-size:var(--font-size-36); font-weight:500; line-height:1.3em; color:#242424;}
.sub-heading p {margin-top:var(--space-20); font-size:var(--font-size-18); line-height:1.3em; color:#454545;}

.sub-sec {margin-bottom:var(--space-150);}
.sub-sec:last-child {margin-bottom:0;}

.sub-tab {margin-bottom:var(--space-50);}
.sub-tab ul {display:flex; gap:var(--space-20); justify-content:center;}
.sub-tab ul li a {display:block; text-align:center; border:1px solid #888; border-radius:100px; background:#fff; padding:var(--space-15) var(--space-30); font-size:var(--font-size-20); line-height:1.2em; color:#888; transition:.2s;}

.sub-tab ul li a:hover {color:var(--color-primary); border-color:var(--color-primary);}
.sub-tab ul li.active a {color:#242424 !important; background:var(--color-primary) !important; border-color:var(--color-primary) !important;}

/* ABOUT */
.company-overview table {width:100%; border-collapse:collapse; border-spacing:0px; border-top:2px solid #505050; font-size:var(--font-size-18); line-height:1.5em;}
.company-overview table th {padding:var(--space-24) var(--space-20); border-bottom:1px solid #ddd; font-weight:500; color:#454545; text-align:left;}
.company-overview table td {padding:var(--space-24) var(--space-20); border-bottom:1px solid #ddd; color:#505050; text-align:left;}

.biz-area {display:grid; grid-template-columns:repeat(5, 1fr); gap:var(--space-20);}
.biz-area .box {border:1px solid #ddd; padding:var(--space-60) var(--space-16); text-align:center;}
.biz-area .box .icon {position:relative; width:50px; height:50px; margin:0 auto var(--space-20);}
.biz-area .box .icon:before {content:""; position:absolute; width:24px; height:24px; background:var(--color-primary); border-radius:100%; opacity:0.32;}
.biz-area .box .icon img {position:relative; z-index:2; display:block; width:100%; height:100%;}
.biz-area .box h3 {margin-bottom:var(--space-30); font-size:var(--font-size-18); font-weight:500; line-height:1.3em; color:#505050;}
.biz-area .box p {font-size:var(--font-size-16); line-height:1.3em; color:#9A9A9A; margin:0 1em;}
.biz-area .box.n1 .icon:before {top:10%; left:-20%;}
.biz-area .box.n2 .icon:before {top:36%; right:0;}
.biz-area .box.n3 .icon:before {top:32%; right:-15%;}
.biz-area .box.n4 .icon:before {top:70%; left:-10%;}
.biz-area .box.n5 .icon:before {top:14%; right:-8%;}

.certificates {display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-50) var(--space-30);}
.certificates .item {text-align:center;}
.certificates .item .image {position:relative; aspect-ratio:380/530; width:100%; margin-bottom:var(--space-20);}
.certificates .item .image img {display:block; width:100%; height:100%; object-fit:contain;}
.certificates .item .image:after{content:""; display:block; width:100%; height:100%; border:1px solid #ddd; position:absolute; top:0; left:0; z-index:1; pointer-events:none;}
.certificates .item .text {font-size:var(--font-size-18); line-height:1.5em; color:#505050;}

.export {position:relative; aspect-ratio:1200/541; background:url('/images/sub/worldmap.png') no-repeat center center / contain;}
.export .marker {position:absolute; cursor:pointer;}
.export .marker .pin {position:absolute; bottom:30px; left:0; -webkit-transform:translateX(-50%); transform:translateX(-50%); width:clamp(24px, calc(64 / var(--inner) * 100vw), 64px); aspect-ratio:64/90;}
.export .marker .pin img {display:block; animation:UpDown .9s linear infinite alternate;}
.export .marker .country {position:absolute; bottom:8px; left:0; -webkit-transform:translateX(-50%); transform:translateX(-50%); width:50px; border:1px solid #ddd; border-radius:8px; font-size:12px; font-weight:500; line-height:16px; letter-spacing:0; color:#363636; text-align:center; transition:.2s;}
.export .marker .circle {position:absolute; top:-7px; left:-7px; width:14px; height:14px; background:url('/images/sub/export-dot.svg') no-repeat center center / contain; transition:.2s;}
.export .marker .flag {position:absolute; top:-4px; left:-35px; width:70px; padding:10px; border-radius:8px; background:#FFF; box-shadow:0 4px 2px 0 rgba(0, 0, 0, 0.18); transition:.2s; opacity:0; pointer-events:none;}
.export .marker .flag img {display:block;}
.export .marker:hover {z-index:1;}
.export .marker:hover .country {color:var(--color-primary); border-color:var(--color-primary); background:#fff;}
.export .marker:hover .circle {opacity:0;}
.export .marker:hover .flag {opacity:1;}
.export [data-aos=fade-up] {transform: translate3d(0, 30px, 0);}

@keyframes UpDown{
	0%{transform:translateY(0);}
	100%{transform:translateY(-8px);}
}
.export .marker.are {top:43.44%; left:21.83%;}
.export .marker.aus {top:81.33%; left:39.67%;}
.export .marker.bhr {top:52.13%; left:26.17%;}
.export .marker.blr {top:30.31%; left:25.83%;}
.export .marker.can {top:23.84%; left:69.67%;}
.export .marker.chn {top:37.89%; left:32.92%;}
.export .marker.civ {top:57.67%; left:3.33%;}
.export .marker.deu {top:24.4%; left:23.08%;}
.export .marker.egy {top:51.76%; left:12.58%;}
.export .marker.fra {top:36.78%; left:11%;}
.export .marker.hkg {top:42.51%; left:35.58%;}
.export .marker.idn {top:69.13%; left:36.42%;}
.export .marker.irq {top:47.32%; left:17%;}
.export .marker.jpn {top:38.08%; left:43.83%;}
.export .marker.kaz {top:23.48%; left:31.08%;}
.export .marker.ken {top:70.61%; left:14.58%;}
.export .marker.khm {top:58.41%; left:34.33%;}
.export .marker.kor {top:41.59%; left:40.92%;}
.export .marker.lbn {top:41.4%; left:14.75%;}
.export .marker.ltu {top:17.19%; left:29.25%;}
.export .marker.mex {top:53.23%; left:77%;}
.export .marker.mng {top:31.61%; left:36.08%;}
.export .marker.mys {top:65.06%; left:33.17%;}
.export .marker.nld {top:26.43%; left:15.83%;}
.export .marker.omn {top:54.9%; left:18.67%;}
.export .marker.phl {top:54.9%; left:35.92%;}
.export .marker.pol {top:30.68%; left:19.75%;}
.export .marker.qat {top:49.54%; left:22.33%;}
.export .marker.rus {top:24.58%; left:35.33%;}
.export .marker.sau {top:38.82%; left:19.58%;}
.export .marker.sgp {top:62.29%; left:38.17%;}
.export .marker.twn {top:48.98%; left:35.33%;}
.export .marker.tza {top:63.77%; left:14.75%;}
.export .marker.tur {top:35.3%; left:15.33%;}
.export .marker.ukr {top:32.16%; left:30.25%;}
.export .marker.usa {top:37.52%; left:76.92%;}
.export .marker.uzb {top:39.37%; left:26.75%;}
.export .marker.vnm {top:51.02%; left:31.67%;}

.contact-info {display:flex; flex-direction:column; gap:var(--space-30); color:#505050; font-size:var(--font-size-18); line-height:1.66em;}
.contact-info .item {display:flex; align-items:center; gap:var(--space-20); padding:var(--space-30); background:#FAFAFA;}
.contact-info .item .text {flex:1 1 auto; min-width:0; width:1%; display:flex; align-items:center; gap:var(--space-20);  font-weight:600;}
.contact-info .item .text:before {content:""; display:block; width:40px; aspect-ratio:1/1; background:url('/images/sub/contact-marker.svg') no-repeat center center / contain;}
.contact-info .item .text p {flex:1 1 auto; min-width:0; width:1%;}
.contact-info .item .mail {min-width:clamp(240px, calc(265 / var(--inner) * 100vw), 265px); display:flex; align-items:center; justify-content:center; gap:var(--space-10); background:#fff; padding:var(--space-15) var(--space-20); border-radius:100px; font-size:var(--font-size-18); line-height:1.66em; color:#505050; text-align:center; border: 1px solid #DDD;}
.contact-info .item .mail:before {content:""; display:block; width:18px; aspect-ratio:1/1; background:url('/images/sub/contact-email.svg') no-repeat center center / contain;}
.contact-info .item .mail:hover {color:#242424; border-color:var(--color-primary);}

.inquiry-header {text-align:center; margin-bottom:var(--space-40); margin-top:var(--space-150);}
.inquiry-header h3 {font-size:var(--font-size-36); font-weight:600; line-height:1.3em; color:#242424;}
.inquiry-header p {margin-top:var(--space-20); font-size:var(--font-size-18); line-height:1.3em; color:#454545;}

.inquiry-form {padding:clamp(30px, calc(50 / 1200 * 100vw), 50px); border-radius:8px; border:1px solid #ddd; background:#fafafa;}
.inquiry-form .form-wrap {display:grid; grid-template-columns:repeat(3, 1fr); gap:30px var(--space-25);}
.inquiry-form .form-group {position:relative; display:flex; flex-direction:column; gap:var(--space-16);}
.inquiry-form .form-group.full {grid-column: 1 / -1;}
.inquiry-form .label {display:block;  font-size:var(--font-size-18); font-weight:600; line-height:1.66em; color:#505050;}
.inquiry-form .required {color:#FFA600;}
.inquiry-form .input {display:block; width:100%; height:clamp(44px, calc(50 / var(--inner) * 100vw), 50px); border-radius:8px; transition:.2s; outline:none;}
.inquiry-form .input:focus {border-color:var(--color-primary); box-shadow:0 0 10px 0 rgba(0, 0, 0, 0.2); transform:translate(0,-2px);}
.inquiry-form textarea.input {height:clamp(120px, calc(250 / 1200 * 100vw), 250px); resize:none;}
.inquiry-form .form-submit {text-align:center; margin-top:var(--space-40);}
.inquiry-form .btn-submit {display:inline-block; min-width:157px; min-height:54px; padding:var(--space-16) var(--space-30); background:#ffdb00; border:0; border-radius:8px; color:#242424; cursor:pointer; transition:.2s; font-size:var(--font-size-20); font-weight:500; line-height:1.2em;}
.inquiry-form .btn-submit:hover {box-shadow:0 0 10px 0 rgba(0, 0, 0, 0.2); transform:translate(0,-2px);}
.inquiry-form .captcha-wrap {display:flex; align-items:center; gap:var(--space-16); height:clamp(44px, calc(50 / var(--inner) * 100vw), 50px);}
.inquiry-form .captcha-wrap img {border-radius:8px; width:auto; height:clamp(44px, calc(50 / var(--inner) * 100vw), 50px);}
.inquiry-form .captcha-wrap .input {flex:1;}

.directions-map {margin-bottom:var(--space-40);}
.directions-map iframe {display:block; width:100% !important; height:clamp(250px, calc(450 / 1200 * 100vw), 450px) !important;}

.directions-info {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-60);}
.directions-info .left .comp {margin-bottom:var(--space-10); font-size:var(--font-size-16); font-weight:700; line-height:1.3em; color:var(--color-primary);}
.directions-info .left .addr {font-size:var(--font-size-20); font-weight:500; line-height:1.3em; color:#242424;}
.directions-info .right {display:flex; flex-direction:column; gap:var(--space-20);}
.directions-info .right dl {display:flex; gap:var(--space-20);}
.directions-info .right dl dt {display:flex; min-width:115px; align-items:center; gap:10px; font-weight:500; line-height:1.5em; color:#242424;}
.directions-info .right dl dd {line-height:1.5em; color:#505050;}
.directions-info .right dl dd a:hover {text-decoration:underline;}

/* Business */
.partners {display:grid; grid-template-columns:repeat(5, 1fr); gap:var(--space-30) var(--space-40);}
.partners .item {aspect-ratio:208/80; display:flex; align-items:center; justify-content:center; background:#fff;}
.partners .item img {display:block; width:100%; height:100%; object-fit:contain;}