@charset "utf-8";

:root {
    --intro-bg-bottom: calc(0px - 140 / 1920 * 100vw);
}

.about {overflow-x: hidden; overflow-y: visible;}

section:not(.hero) {width: 100%; padding: var(--section-padding-t) 0;}
section .inner {width: 100%; max-width: var(--inner2-width); padding: var(--inner2-padding);}


/* ──────────────────────────────────────────
   Section 1 — 회사 소개 본문
────────────────────────────────────────── */
.intro {background: linear-gradient(to bottom, #E5F5F1 0%, #E5F5F1 95%, transparent 95%, transparent 100%); text-align: center; position: relative; z-index: 1;}
.intro-bg {width: calc(100% + 80px); max-width: unset; height: auto; aspect-ratio: 2000/424; position: absolute; bottom: -140px; bottom: var(--intro-bg-bottom); left: -40px; z-index: -1; pointer-events: none;}

.intro-content {display: flex; flex-direction: column; align-items: center; gap: clamp(40px, 5rem, 80px);}

.intro-logo-line {width: 100%; display: flex; gap: clamp(0px, 0.27em, 8px); align-items: center; justify-content: center; color: var(--gray900); font-size: clamp(22px, 1.875rem, 30px); font-weight: 400; line-height: 1; letter-spacing: var(--ls);}
.intro-logo-line .logo {width: auto; height: clamp(22px, 1.875rem, 30px); aspect-ratio: 277/30;}
.intro-logo-line .txt-ha {font: inherit; white-space: nowrap;}

.intro-desc {width: 100%; color: var(--gray900); font-size: clamp(14px, 1.25rem, 20px); font-weight: 500; line-height: 2; letter-spacing: var(--ls); white-space: pre-line;}


/* ──────────────────────────────────────────
   Section 2 — 회사 정보 + 지도
────────────────────────────────────────── */
.info {background: #fff; margin-top: clamp(0px, calc(141 / var(--inner) * 100vw), 141px);}

.info-header {margin-bottom: clamp(40px, 3.75rem, 60px);}

.info-logo {margin-bottom: clamp(24px, 2.5rem, 40px);}
.info-logo img {width: auto; height: clamp(36px, 3.25rem, 52px); aspect-ratio: 315/52;}

.info-details {width: fit-content; display: flex; flex-direction: column; gap: clamp(16px, 1.5rem, 24px);}
.info-row-group {display: flex; justify-content: space-between; align-items: center; gap: clamp(16px, 1.5rem, 24px); flex-wrap: wrap;}
.info-row {display: flex; align-items: start; gap: 4px clamp(12px, 1rem, 16px);}
.info-label {font-weight: 700; color: var(--gray900); white-space: nowrap;}


.map-area {width: 100%; height: clamp(220px, calc(400 / 1280 * 100vw), 400px); overflow: hidden;}
.map-area #map {width: 100%; height: 100%;}

#map .label {margin-bottom: 120px;}
#map .label * {padding: 6px 10px; background: #fff; border: 1px solid var(--gray400); border-radius: 5px; font-size: 0.875em; font-weight: 500; line-height: 1; letter-spacing: var(--ls);}
#map .label * {
    /* triangle dimension */
    --a: 90deg; /* angle */
    --h: 0.5em; /* height */
  
    --p: 50%; /* triangle position (0%:left 100%:right) */
    --b: 1px; /* border width */
  
    clip-path: 
    polygon(0 100%,0 0,100% 0,100% 100%,
    min(100%,var(--p) + var(--h)*tan(var(--a)/2)) 100%,
    var(--p) calc(100% + var(--h)),
    max(0%  ,var(--p) - var(--h)*tan(var(--a)/2)) 100%);
    border-image: 
    fill 0//var(--h) 0
    conic-gradient(#D2D2D2 0 0); /* the border color */
    position: relative;
}
#map .label *::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: var(--b) 0;
    clip-path: 
    polygon(0 100%,0 0,100% 0,100% 100%,
    min(100% - var(--b),var(--p) + var(--h)*tan(var(--a)/2) - var(--b)*tan(45deg - var(--a)/4)) 100%,
    var(--p) calc(100% + var(--h) + var(--b)*(1 - 1/sin(var(--a)/2))),
    max(var(--b),var(--p) - var(--h)*tan(var(--a)/2) + var(--b)*tan(45deg - var(--a)/4)) 100%);
    border-image: 
    fill 0/0 var(--b)/var(--h) 0
    conic-gradient(#FFF 0 0); /* the background color */
}

#map .label .center {text-align: center;}


/* 영문 */
html:lang(en) .intro-logo-line .logo {aspect-ratio: 330/30;}
html:lang(en) .info-logo img {height: clamp(20px, 1.75rem, 28px); aspect-ratio: 330/30;}
/* //영문 */





@media (min-width:1921px){
    .intro {background: linear-gradient(to bottom, #E5F5F1 0%, #E5F5F1 780px, transparent 780px, transparent 100%);}
}
@media (max-width:480px){
    .info-row-group {flex-direction: column; align-items: flex-start;}
    .info-row {flex-direction: column; align-items: flex-start;}
}