@charset "UTF-8";

/* intro */
.content-wrap.intro {padding-bottom: 100px;}
.intro figure {margin: 0 auto;} 
.intro .brand-structure figure {width: 1280px;}

/* logo */
.retail .brand-kv .group-logo {width: 294px;}
.logis  .brand-kv .group-logo {width: 281px;}
.networks .brand-kv .group-logo {width: 421px;}
.food .brand-kv .group-logo {width: 306px;}
.humannet .brand-kv .group-logo {width: 457px;}
.kopla .brand-kv .group-logo {width: 512px;}

.content {padding-bottom: 0;}

.brand-kv .group-logo {margin: 0 auto;}
.brand-kv .txt {text-align: center; margin-bottom: 50px;}
.brand-kv .txt .tit {font-size: 32px; margin: 20px 0 8px;}
.brand-kv .txt .desc p {letter-spacing: -.063em;}
.brand-assignment {padding-bottom: 80px; border-bottom: 1px solid #ddd;}
.brand-assignment figure {width: 471px; margin: 0 auto; padding-top: 16px;}

.group-info {width: 100%; margin-top: 100px; padding: 56px 0 70px;}
.group-info .tit {font-size: 28px; line-height: 1.29; color: #0e1518; text-align: center; margin-bottom: 55px;}
.group-info .tit .link-btn {display: inline-block; width: 36px; height: 36px; background: no-repeat right center / contain; background-image: url('/assets/image/bgf/company/group/icon_home36.png'); vertical-align: top; margin-left: 15px;}
.group-info .txt > div {padding: 0 81px;}
.group-info .txt > div dl {font-size: 0;}
.group-info .txt > div dl > * {display: inline-block; font-size: 16px; line-height: 2.13;}
.group-info .txt > div dt {width: 130px; vertical-align: top; color: #0e1518;}
.group-info .txt > div dd {width: calc(100% - 130px); color: #666;} 

/* info img */
.content-wrap.intro {padding-top: 0;}
.brand-structure .brand-title {font-size: 16px; line-height: 1.2; text-align: center;letter-spacing: -.03em; padding-bottom: 30px; color: #3bb149;}
.brand-structure .brand_map {display: flex;align-items: center; justify-content: center; margin-left: 0;}
.brand-structure .brand_map .line-box {margin: 0 0 90px; width: 1280px; height: 523px; background: url("/assets/image/bgf/eng/company/group/intro/20251219_line.png") no-repeat center; background-position-y: -50px; position: relative;}
.brand-structure .brand_map .line-box .bgf {width: 118px; height: 117px; position: absolute; top: 0; left: 580px;}
.brand-structure .brand_map .line-box .retail {width: 185px; height: 137px; position: absolute; top: 180px; left: 227px;}
.brand-structure .brand_map .line-box .ecomaterials {width: 165px; height: 137px; position: absolute; top: 180px; left: 878px;}
.brand-structure .brand_map .line-box .logis {width: 90px; height: 90px; position: absolute; top: 367px; left: 123px;}
.brand-structure .brand_map .line-box .networks {width: 90px; height: 90px; position: absolute; top: 367px; left: 223px;}
.brand-structure .brand_map .line-box .foods {width: 90px; height: 90px; position: absolute; top: 367px; left: 323px;}
.brand-structure .brand_map .line-box .humannet {width: 90px; height: 90px; position: absolute; top: 367px; left: 423px;}
.brand-structure .brand_map .line-box .ecosolution {width: 90px; height: 90px; position: absolute; top: 367px; left: 762px;}
.brand-structure .brand_map .line-box .ecocycle {width: 90px; height: 90px; position: absolute; top: 367px; left: 1062px;}
.brand-structure .brand_map .line-box .knw {width: 90px; height: 90px; position: absolute; top: 367px; left: 861px;}
.brand-structure .brand_map .line-box .fluorinekorea {width: 90px; height: 90px; position: absolute; top: 367px; left: 962px;}
.brand-structure .brand_map .line-box .daewonchemical {width: 90px; height: 90px; position: absolute; top: 367px; left: 947px;}

@media screen and (max-width: 1440px) {
	.content-wrap.intro {padding-bottom: 6.94vw;}

	.intro .brand-value-system figure {width: 57.92vw;}
	.intro .brand-structure figure {width: 88.89vw;}

	.intro .brand-kv .group-logo {width: 10.14vw;}
	.retail .brand-kv .group-logo {width: 20.42vw;}
	.logis .brand-kv .group-logo {width: 19.51vw;}
	.networks .brand-kv .group-logo {width: 29.24vw;}
	.food .brand-kv .group-logo {width: 21.25vw;}
	.humannet .brand-kv .group-logo {width: 31.74vw;}
	.eco .brand-kv .group-logo {width: 22.64vw;}
	.kopla .brand-kv .group-logo {width: 35.56vw;}

	.brand-kv .txt {margin-bottom: 3.47vw;}
	.brand-kv .txt .tit {font-size: 2.22vw; margin: 1.39vw 0 0.56vw;}
	.brand-assignment {padding-bottom: 5.56vw;}
	.brand-assignment figure {width: 32.71vw; margin: 0 auto; padding-top: 1.11vw;}

	.group-info {margin-top: 6.94vw; padding: 3.89vw 0 4.86vw;}
	.group-info .tit {font-size: 1.94vw; line-height: 1.29; margin-bottom: 3.82vw;}
	.group-info .tit .link-btn {width: 2.50vw; height: 2.50vw; margin-left: 1.04vw;}
	.group-info .txt > div {padding: 0 5.63vw;}
	.group-info .txt > div dl > * { font-size: 1.11vw; line-height: 2.13;}
	.group-info .txt > div dt {width: 9.03vw;}
	.group-info .txt > div dd {width: calc(100% - 9.03vw); } 

	/* info img */
	.content-wrap.intro {padding-top: 0;}
	.brand-structure .brand-title {font-size: 1.11vw; line-height: 1.2; letter-spacing: -0.03em; padding-bottom: 2.08vw;}
	.brand-structure .brand_map {align-items: center;}
	.brand-structure .brand_map .line-box {margin: 0 0 6.25vw; width: 88.89vw; height: 36.32vw; background: url("/assets/image/bgf/eng/company/group/intro/20251219_line.png") no-repeat 100% 100%;  background-size: cover; background-position-y: -3.47vw; }
	.brand-structure .brand_map .line-box .bgf {width: 8.19vw; height: 8.13vw;  top: 0; left: 40.28vw;}
	.brand-structure .brand_map .line-box .retail {width: 12.85vw; height: 9.51vw;  top: 12.50vw; left: 15.76vw;}
	.brand-structure .brand_map .line-box .ecomaterials {width: 11.46vw; height: 9.51vw;  top: 12.50vw; left: 60.97vw;}
	.brand-structure .brand_map .line-box .logis {width: 6.25vw; height: 6.25vw;  top: 25.49vw; left: 8.54vw;}
	.brand-structure .brand_map .line-box .networks {width: 6.25vw; height: 6.25vw;  top: 25.49vw; left: 15.49vw;}
	.brand-structure .brand_map .line-box .foods {width: 6.25vw; height: 6.25vw;  top: 25.49vw; left: 22.43vw;}
	.brand-structure .brand_map .line-box .humannet {width: 6.25vw; height: 6.25vw;  top: 25.49vw; left: 29.38vw;}
	.brand-structure .brand_map .line-box .ecosolution {width: 6.25vw; height: 6.25vw;  top: 25.49vw; left: 52.92vw;}
	.brand-structure .brand_map .line-box .ecocycle {width: 6.25vw; height: 6.25vw;  top: 25.49vw; left: 73.75vw;}
	.brand-structure .brand_map .line-box .knw {width: 6.25vw; height: 6.25vw;  top: 25.49vw; left: 59.79vw;}
	.brand-structure .brand_map .line-box .fluorinekorea {width: 6.25vw; height: 6.25vw;  top: 25.49vw; left: 66.81vw;}
	.brand-structure .brand_map .line-box .daewonchemical {width: 6.25vw; height: 6.25vw; top: 25.49vw; left: 66.15vw;}
}

@media screen and (max-width: 768px) {
	/*intro*/
	.content-wrap.intro {padding-bottom: 6.19vw;}

	/* common */
	.content-wrap {padding-top: 9.52vw;}
	.sec-tit {margin-bottom: 6.43vw; line-height: 1.1;}

	.intro .brand-kv .group-logo {width: 21.43vw;}
	.retail .brand-kv .group-logo {width: 42.62vw;}
	.logis .brand-kv .group-logo {width: 38.10vw;}
	.networks .brand-kv .group-logo {width: 57.62vw;}
	.food .brand-kv .group-logo {width: 41.90vw;}
	.humannet .brand-kv .group-logo {width: 61.43vw;}
	.eco .brand-kv .group-logo {width: 44.76vw;}
	.kopla .brand-kv .group-logo {width: 76.95vw;}

	.brand-kv .txt {text-align: center; margin-bottom: 9.52vw;}
	.brand-kv .txt .tit { font-size: 3.81vw; font-weight: 700; margin: 2.38vw 0 0.71vw; line-height: normal; letter-spacing: -0.03em;}
	.brand-kv .txt .desc p {font-weight: 400; letter-spacing: 0;}
	.brand-kv .kv-obj {height: 35.71vw; overflow: hidden;}
	.brand-kv .kv-obj img {width: auto; height: 100%; position: relative; left: 50%; transform: translateX(-50%);}
	.sec.brand-structure {margin-top: 11.90vw;}
	.sec.brand-assignment {margin: 11.90vw 4.76vw 0; padding-bottom: 13.10vw;}
	.m-full .sec.brand-assignment {margin: 11.90vw 4.76vw 0; padding-bottom: 13.10vw;}
	.sec.brand-assignment figure {width: 56.19vw; padding-top: 0;}

	.group-info {margin-top: 9.52vw; padding: 5.95vw 0 10.71vw;}
	.group-info .row {padding: 0;}
	.group-info .tit {font-size: 3.81vw; font-weight: 700; line-height: 1.29; text-align: left; margin-bottom: 2.62vw;}
	.group-info .tit .link-btn {width: 4.76vw; height: 4.76vw; margin-left: 2.38vw; background-image: url('/assets/image/bgf/company/group/icon_home36-m.png');}
	.group-info .txt > div {padding: 0;}
	.group-info .txt > div dl > * {font-size: 2.86vw; line-height: 1.5; padding: 1.67vw 0;}
	.group-info .txt > div dt {width: 23.81vw;}
	.group-info .txt > div dd {width: calc(100% - 23.81vw); } 
	.m-full .sec.brand-structure { padding: 0;}

	/* info img */
	.content-wrap.intro {padding-bottom: 6.19vw;}
	.brand-structure .brand-title {font-size: 2.08vw;font-weight: 500;padding-bottom: 4.69vw;}
	.brand-structure .brand_map .line-box {margin: 0 0 13.80vw; width: 100%; height: 102.99vw; background: url("/assets/image/bgf/eng/company/group/intro/20251219_line_mo.png") no-repeat 100% 100%; background-size: cover; background-position-y: -5.21vw;}
	.brand-structure .brand_map .line-box .bgf {width: 19.53vw; height: 19.53vw; top: 0; left: 40.23vw;}
	.brand-structure .brand_map .line-box .retail {width: 23.05vw; height: 21.22vw; top: 25.39vw; left: 16.75vw;}
	.brand-structure .brand_map .line-box .ecomaterials {width: 21.22vw; height: 21.22vw; top: 25.39vw; left: 61.03vw;}
	.brand-structure .brand_map .line-box .logis {width: 13.80vw; height: 13.80vw; top: 51.69vw; left: 13.4vw;}
	.brand-structure .brand_map .line-box .networks {width: 13.80vw; height: 13.80vw; top: 51.69vw; left: 28.85vw;}
	.brand-structure .brand_map .line-box .foods {width: 13.80vw; height: 13.80vw; top: 68.23vw; left: 13.4vw;}
	.brand-structure .brand_map .line-box .humannet {width: 13.80vw; height: 13.80vw; top: 68.23vw; left: 28.85vw;}
	.brand-structure .brand_map .line-box .ecosolution {width: 13.80vw; height: 13.80vw; top: 51.69vw; left: 56.82vw;}
	.brand-structure .brand_map .line-box .ecocycle {width: 13.80vw; height: 13.80vw; top: 51.69vw; left: 72.34vw;}
	.brand-structure .brand_map .line-box .knw {width: 13.80vw; height: 13.80vw; top: 68.23vw; left: 56.82vw;}
	.brand-structure .brand_map .line-box .fluorinekorea {width: 13.80vw; height: 13.80vw; top: 68.23vw; left: 72.34vw;}
	.brand-structure .brand_map .line-box .daewonchemical {width: 13.80vw; height: 13.80vw; top: 84.23vw; left: 36.72vw;}
}

@media screen and (max-width: 350px) {
	.group-info .txt > div dl > * {font-size: 10px;}
}

@media screen and (max-width: 320px) {
	/*intro*/
	.content-wrap.intro {padding-bottom: 20px;}

	.intro ul li h4 {font-size: 9px; }
	.intro ul li p {font-size: 8px;}

	/* common */
	.content-wrap {padding-top: 30px;}
	.sec-tit {margin-bottom: 21px;}

	.intro .brand-kv .group-logo {width: 69px;}
	.retail .brand-kv .group-logo {width: 136px;}
	.logis .brand-kv .group-logo {width: 122px;}
	.networks .brand-kv .group-logo {width: 184px;}
	.food .brand-kv .group-logo {width: 134px;}
	.humannet .brand-kv .group-logo {width: 197px;}
	.eco .brand-kv .group-logo {width: 143px;}
	.kopla .brand-kv .group-logo {width: 246px;}

	.brand-kv .txt { margin-bottom: 30px;}
	.brand-kv .txt .tit { font-size: 12px;  margin: 8px 0 2px;}
	.brand-kv .kv-obj {height: 114px;}
	.sec.brand-structure {margin-top: 38px;}
	.sec.brand-assignment {margin: 38px 15px 0; padding-bottom: 42px;}
	.sec.brand-assignment figure {width: 180px;}
	.m-full .sec.brand-assignment {margin: 38px 15px 0; padding-bottom: 42px;}

	.group-info {margin-top: 30px; padding: 19px 0 34px;}
	.group-info .tit {font-size: 12px; margin-bottom: 8px;}
	.group-info .tit .link-btn {width: 15px; height: 15px; margin-left: 8px;}
	.group-info .txt > div dl > * {font-size: 9px; padding: 5px 0;}
	.group-info .txt > div dt {width: 76px;}
	.group-info .txt > div dd {width: calc(100% - 76px); } 

	/*intro*/
	.content-wrap.intro {padding-bottom: 20px;}
	.brand-structure .brand-title {font-size: 7px;padding-bottom: 15px;}
	.brand-structure .brand_map .line-box {margin: 0 0 44px; width: 100%; height: 330px; background: url("/assets/image/bgf/eng/company/group/intro/20251219_line_mo.png") no-repeat 100% 100%; background-size: cover; background-position-y: -17px;}
	.brand-structure .brand_map .line-box .bgf {width: 62px; height: 62px; top: 0; left: 129px;}
	.brand-structure .brand_map .line-box .retail {width: 74px; height: 68px; top: 81px; left: 54px;}
	.brand-structure .brand_map .line-box .ecomaterials {width: 68px; height: 68px; top: 81px; left: 196px;}
	.brand-structure .brand_map .line-box .logis {width: 44px; height: 44px; top: 165px; left: 43px;}
	.brand-structure .brand_map .line-box .networks {width: 44px; height: 44px; top: 165px; left: 92px;}
	.brand-structure .brand_map .line-box .foods {width: 44px; height: 44px; top: 218px; left: 43px;}
	.brand-structure .brand_map .line-box .humannet {width: 44px; height: 44px; top: 218px; left: 92px;}
	.brand-structure .brand_map .line-box .ecosolution {width: 44px; height: 44px; top: 165px; left: 182px;}
	.brand-structure .brand_map .line-box .ecocycle {width: 44px; height: 44px; top: 165px; left: 231px;}
	.brand-structure .brand_map .line-box .knw {width: 44px; height: 44px; top: 218px; left: 182px;}
	.brand-structure .brand_map .line-box .fluorinekorea {width: 44px; height: 44px; top: 218px; left: 231px;}
	.brand-structure .brand_map .line-box .daewonchemical {width: 44px; height: 44px; top: 269px; left: 118px;}

}



.brand_map {
  display: flex;
  justify-content: center;
  margin-left: 50px;
  margin-bottom: 90px;
}

/* =========================
   ROOT
   ========================= */
.brand_map .tree-root {
  --line-color: #3bb149;

  /* 사이즈 기준값 */
  --root-logo-h: 117px;      /* BGF */
  --root-to-branch: 50px;

  --branch-top-pad: 26px;    /* 1차 가로선 ↔ 브랜치 로고 */
  --branch-logo-h: 137px;    /* 리테일 / 에코머터리얼즈 */
  --branch-to-children: 40px;

  --children-line-pad: 26px; /* 최하단 가로선 ↔ 자식 원 */

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--root-to-branch);
}


/* =========================
   1차 분기 (유통 / 소재)
   ========================= */
.brand_map .tree-branches {
  width: fit-content;        /* 🔑 삐져나감 방지 핵심 */
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  gap: 260px;                /* 유통 ↔ 소재 간격 */
  position: relative;
  padding-top: var(--branch-top-pad);
}


.brand_map .tree-branch {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

/* 1차 가로선 → 브랜치 로고 세로선 */
.brand_map .tree-branch > a {
  position: relative;
  z-index: 2;
}
.brand_map .tree-main {
	position: relative;
}
.brand_map .tree-main::before {
	content: "";
	position: absolute;
	bottom: calc(-1 * (100% + var(--branch-top-pad)));
	left: 50%;
	transform: translateX(-50%);
	width: 2px;
	height: var(--branch-top-pad);
	background-color: var(--line-color);
	z-index: 1;
}

/* =========================
   2차 분기 (최하단 전체 한 줄)
   ========================= */

/* 브랜치 로고 ↔ 자식 간격 + 선 자리 확보 */
.brand_map .tree-children {
  margin-top: var(--branch-to-children);
  padding-top: var(--children-line-pad);
  display: flex;
  justify-content: center;
  gap: 40px;
  position: relative;
}

/* 자식 노드 */
.brand_map .tree-child {
  position: relative;
  z-index: 2;
}

/* =========================
   이미지 사이즈 (기존 유지)
   ========================= */
.intro .brand-structure .brand_map figure {
  width: auto;
  margin: 0;
}