/*sub_visual*/
.sub_top {position: relative; width: 100%; height: 400px; display: flex; justify-content: center; align-items: center; margin: 0 auto; background-position: center; background-repeat: no-repeat; background-size: cover;}
.sub_top::after {content: ''; width: 100%; height: 100%; position: absolute; background: rgba(0, 0, 0, .2); top: 0; left: 0; z-index: 1;}
.sub_top.sub_top1 {background-image: url(../../images/thema/sub/sub_top/sub_top1.png);}
.sub_top.sub_top2 {background-image: url(../../images/thema/sub/sub_top/sub_top2.png);}
.sub_top.sub_top3 {background-image: url(../../images/thema/sub/sub_top/sub_top3.png);}
.sub_top.sub_top4 {background-image: url(../../images/thema/sub/sub_top/sub_top4.png);}
.sub_top.sub_top5 {background-image: url(../../images/thema/sub/sub_top/sub_top5.png);}

.sub_top_title {text-align: center; line-height: 1.3; z-index: 2;}
.sub_top_title h2 {margin-top: 70px; color: #fff; font-size: 46px; margin-bottom: 15px;}
.sub_top_title h3 {color: #fff; font-size: 18px; font-weight: 400;}

/*공통*/
.sub {margin-top: 50px;}
.sub.contents {display: flex; flex-wrap: wrap; width: 100%; min-height: 300px; padding-bottom: 100px;}

.sub.contents.full-bg {padding: 70px 0;}
.sub.contents.full-bg.gray {background: #FBFBFB;}

/*여백*/
.mt-50 {margin-top: 50px;}
.mb-150 {margin-bottom: 150px;}
.pb-150 {padding-bottom: 150px;}

.sub.contents .inner {flex-direction: column;}

.sub_title {width: 100%;}
.sub_title h2 {font-size: 32px; font-weight: 700; margin-top: 70px; text-align: center;}

.wrap {width: 100%; max-width: 1280px; box-sizing: border-box; display: flex;}
.wrap_img {background-size: cover; background-position: center; background-repeat: no-repeat;}
.wrap_text p {font-size: 16px; font-weight: 400; text-align: justify; margin-top: 20px; word-break: break-all;}

.img_box {width: 100%; display: flex; justify-content: center; align-items: center; background: #fff; border: 1px solid #ccc; border-radius: 20px; padding: 100px;}

.ht-color {color: var(--brand-color)}

.full-img {background-size: cover; background-position: center; background-repeat: no-repeat; width: 100%; height: 300px; position: relative; margin-bottom: 40px;}
.full-img span {position: absolute; bottom: 6%; left: 3%; color: rgba(255, 255, 255, .5); letter-spacing: 16.8px; font-size: 28px; font-weight: 800;}
.full-img h2 {position:absolute; right:40px; bottom:30px; color:#fff; font-size: 68px; font-weight:900; text-align:right; margin: 0;}
.full-img h3 {position:absolute; width: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); color:#fff; font-size: 26px; font-weight: 700; margin: 0; text-align: center; line-height: 1.4;}

.down-btn {background: #00316C; padding: 10px 20px; color: #fff; border-radius: 5px; font-size: 16px; transition: .3s ease; margin: -40px 0 60px auto;}
.down-btn i {margin-left: 10px; font-size: 18px;}
.down-btn:hover {background: #1a2b3d}

.title-dash {width: 60px; height: 1px; background: #222; margin-bottom: 30px;}

.row {width: 100%; max-width: 1280px; margin-right: 0 !important; margin-left: 0 !important;}

/*CEO 인사말*/
.sub.contents.greeting {background: linear-gradient(to bottom, transparent 0, transparent calc(100% - 360px), #FBFBFB calc(100% - 360px), #FBFBFB 100%);}

.sub.contents.greeting .inner {justify-content: space-between; align-items: stretch; flex-direction: row; gap: 40px;}

.greeting h3 {font-size: 20px; font-weight: 600; margin-bottom: 50px; color: #333; word-break: keep-all;}
.greeting p {color: #333; font-size: 16px; font-weight: 400; text-align: justify; margin-bottom: 10px;}

/*회사개요*/
.ov-wrap {gap: 20px; flex-wrap: wrap; width: 100%;}
.ov-group {width: 52%; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px;}
.overview .ov-group .ov-card {flex:0 0 calc((100% - 20px) / 2);}
.overview .ov-card {background:#F8F8F8; padding: 30px; display:flex; gap:20px; align-items: center;}

.overview .ov-card.is-big {width: 22%; display:flex; flex-direction:column; justify-content: space-between; align-items: flex-start; padding: 50px 40px;}
.overview .ov-card.is-big .ov-label {margin-bottom:0;}

.overview .ov-label {font-size:16px; font-weight:500; color:#444;}
.overview .ov-value {font-size:26px; font-weight:800; color:#222;}
.overview .ov-unit {font-size:14px; font-weight:400; color:#777; }

.overview .ov-icon {flex:0 0 60px; height: 60px; align-items:center; justify-content:center;}
.overview .ov-icon img {width: 60px; height: 60px; display:block; object-fit:contain;}

.overview .ov-text {display:flex; flex-direction:column;}
.overview .ov-list {display:flex; flex-direction:column; margin: 0; text-align:left; align-items: flex-start; padding: 0; gap: 8px;}
.overview .ov-list li {font-size:24px; font-weight:500; line-height:1.4; color: #fff;}
.overview .ov-card.is-big {background:#2f3136;}
.overview .ov-card.is-big .ov-label {color: #fff; font-size: 26px; font-weight: 400;}
.overview .ov-card.is-big .ov-value {color:#fff; font-size: 50px;}

.overview .ov-card.is-plant {width: 22%; background: url(../../images/thema/sub/ov-bg.png); background-size: cover; align-items:flex-start; text-align:left; justify-content:flex-start; padding: 30px;}
.overview .ov-card.is-plant .ov-label {font-size:16px;}

.overview .ov-area {width:100%; background:#fafafa; padding:40px 20px; text-align:center; margin-top: 20px;}
.overview .ov-area-line {display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:10px;  margin-top: 20px;}
.overview .ov-area-line p {font-size: 20px; font-weight:700; color:#222;}
.overview .ov-dash {background:#999; width: 1px; height: 12px; font-weight:400;}

/* 연혁 */
#sub1_1 ~ .sub.contents .sub_title h2::after {content:none; display:none;}
.history {width: 100%; display:flex; flex-wrap:wrap; gap:120px;}

.hs_thumb {flex:0 0 520px; width: 100%; height:550px; position:relative; left:0; isolation:isolate; overflow:hidden;}
.hs_thumb::after {content:""; position:absolute; bottom:0; left:0; right:0; height:40%; background:linear-gradient(180deg, rgba(0,0,0,0) 20.31%, #0054A7 100%); z-index:3; pointer-events:none;}
.hs_thumb img {display:block; width:100%; height:550px; object-fit:cover; position:relative; z-index:1;}
.hs_desc {position:absolute; bottom:50px; left:50px; color:#fff; z-index:4;}
.hs_desc h2 {font-size: 36px; font-weight: 800;}
.hs_desc p {font-size: 20px; font-weight: 700;}

.hs_text {flex:1; border-top:2px solid #222; padding:45px 0;}
.hs_text .hs_year {font-size:40px; font-weight:900; color:var(--brand-color); margin-bottom:15px;}
.hs_list_group {margin-bottom:30px; border-bottom:1px solid #ccc;}
.hs_month {display:flex; margin-bottom:10px;}
.hs_month strong {display:inline-block; font-size:20px; font-weight:800; padding-left:20px; color:#222; margin-bottom:10px;}
.hs_month:last-child {margin-bottom: 20px;}
.hs_item_list {padding-left: 40px; margin-bottom: 0;}
.hs_item {position:relative; font-size:16px; line-height:1.6; color:#333; margin:3px 10px 10px 0;}
.hs_item::before {content:"·"; position:absolute; left:-14px; top:0; color:var(--brand-color);}

/*오시는길*/
.root_daum_roughmap .wrap_controllers, .root_daum_roughmap .cont .section.lst {display: none;}
.map-wrap, .map-wrap .root_daum_roughmap, .map-wrap .root_daum_roughmap_landing {width:100% !important; max-width:100% !important; border-radius: 20px;}
.root_daum_roughmap {border: none;}

.map-bg {width: 100%; height: 450px; background-position: center; background-size:cover; background-repeat: no-repeat; border-radius: 20px;}
.map-bg.map01 {background-image: url('../../images/thema/sub/map.jpg');}

.dt-info {width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 40px !important; border-top: 2px solid var(--brand-color); border-bottom: 1px solid #ccc; padding: 10px 30px; background: #fff;}
.dt-info li {flex: 0 0 auto; display: flex; align-items: center; gap: 20px; font-size: 18px; font-weight: 400; color: #666; padding: 8px 0;}
.dt-info i {font-size: 22px; color: var(--brand-color); flex-shrink: 0;}
.dt-info span {flex-shrink: 0;}
.dt-info strong {color: #222;}

/*제품소개*/
.full-img.prd01 {background: url(../../images/thema/sub/product/prd01/full.jpg);}
.full-img.prd02 {background: url(../../images/thema/sub/product/prd01/full02.jpg);}
.full-img.prd03 {background: url(../../images/thema/sub/product/prd02/full.jpg);}
.full-img.prd04 {background: url(../../images/thema/sub/product/prd02/full02.jpg);}
.full-img.prd05 {background: url(../../images/thema/sub/product/prd04/full.jpg);}

.sub.contents.product .inner.prd-row {display: flex; align-items: center; gap: 110px; flex-direction: row;}

.product .prd-list {width: 100%; display:flex; flex-wrap:wrap; gap:20px; align-items:flex-start;}
.product .prd-item {background:#fff; border:1px solid #e5e5e5;}

.product .prd-list.prd-col2 .prd-item {flex:0 0 calc((100% - 20px) / 2);}
.product .prd-list.prd-col3 .prd-item {flex:0 0 calc((100% - 40px) / 3);}
.product .prd-list.prd-col4 .prd-item {flex:0 0 calc((100% - 60px) / 4);}

.product .prd-img {height:200px; display:flex; align-items:center; justify-content:center; padding:20px;}
.product .prd-img img {max-width:100%; max-height:160px; height:auto; display:block;}
.product .prd-name {margin-top: auto; background:var(--brand-color); color:#fff; border: 1px solid var(--brand-color, #0054A7); font-size:18px; font-weight:700; text-align:center; padding:14px 10px; line-height:1.2;}

/*공장*/
.pac {width: 100%; display:flex; flex-wrap:wrap; margin-top: 40px; border-top:2px solid var(--brand-color); border-bottom:1px solid #ccc; background:#fff;}
.pac li {flex:0 0 25%; display:flex; align-items:center; gap:18px; padding:16px 20px; font-size:18px; font-weight:400; color:#666; box-sizing:border-box;}
.pac li.pac-wide {flex:0 0 100%; border-left:0; border-bottom:1px solid #ccc;}
.pac i {font-size:22px; color:var(--brand-color); flex-shrink:0;}
.pac span {flex-shrink:0;}
.pac strong {margin-left:auto; font-weight:600; color:#222; text-align:right; white-space:nowrap;}
.pac li:not(.pac-wide):nth-child(2) {flex: 0 0 33%;}
.pac li:not(.pac-wide):nth-child(3),
.pac li:not(.pac-wide):nth-child(4),
.pac li:not(.pac-wide):nth-child(5) {flex: 0 0 22%;}

.pac li.pac-wide {align-items: center;}
.pac li.pac-wide span {margin-top: 2px;}
.pac li.pac-wide {white-space: normal;}

/*지속가능경영*/
.full-img.esg01 {background: url(../../images/thema/sub/esg01.png);}
.full-img.esg02 {background: url(../../images/thema/sub/esg02.png);}

.esg-desc {font-size: 20px; font-weight: 500; text-align: center; color: #222;}

.esg-box {width: 100%; display:flex; gap:60px; padding:50px 60px; border:1px solid #e5e5e5; background:#fff; margin-top: 40px; position: relative;}
.esg-box::after {position:absolute; top: 0; left: 0; content: ''; width: 410px; height: 4px;}
.esg-box.env::after {background: #33A640;}
.esg-box.soc::after {background: #1A80DF;}
.esg-box.gov::after {background: #DF831A;}

.esg-left {flex:0 0 350px; display:flex; justify-content:space-between; align-items:flex-end; flex-direction: column;}

.esg-num {font-size: 40px; font-weight:700; color:#e5e5e5; margin-right:10px;}
.esg-title {display: flex; align-items: center; width: 100%; font-size: 30px; font-weight:700; color:#33A640; margin-bottom:30px;}
.esg-title.soc {color: #1A80DF;}
.esg-title.gov {color: #DF831A;}

.esg-right {flex:1;}
.esg-goal {position: relative; font-size: 20px; font-weight: 500; color:#222; margin-bottom:20px; margin-left: 20px; line-height: 1.3;}
.esg-goal::after {content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width: 2px; height: 18px; background: #5E7587; margin-left: -10px;}

.esg-list {padding-left: 18px; margin-bottom: 0;}
.esg-list li {font-size: 16px; line-height: 1.6; color:#555; margin-bottom: 5px;}
.esg-list li strong {position: relative; font-weight:600; color:#222; padding-left:14px; display: flex;}
.esg-list li strong::before, .she-group .esg-list li::before, .esg-list.gray li::before {content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:6px; height:6px; background:#5E7587; border-radius:50%;}

/*안전보건환경*/
.she-head {text-align:center; font-size:28px; font-weight:700; color:#222; margin:60px 0 24px;}
.she-tab-btns {display:flex; justify-content:center; gap:16px; margin-bottom:34px;}
.she-tab-btns .nav-link {background:#f7f7f7; color:#888; font-size:20px; font-weight:600; padding:10px 20px; min-width:250px; text-align:center; border-radius:999px; border:2px solid transparent;}
.she-tab-btns .nav-link.active {background:#fff; color:#1A80DF; border-color:#1A80DF;}

.she-top {width: 100%; display:flex; gap:60px; padding:38px 50px; border:1px solid #ccc; background:#fff;}
.she-top-left {flex:0 0 280px; display:flex; align-items:flex-start;}
.she-title {font-size: 30px; font-weight:700; color:var(--brand-color2); margin:0;}
.she-top-right {flex:1;}

.she-group {display:flex; flex-wrap:wrap; gap:20px; margin-top:24px;}
.she-card {flex:0 0 calc((100% - 20px) / 2); border:1px solid #ccc; background:#fafafa; padding:34px 38px; position:relative;}
.she-no {display:flex; font-size:40px; font-weight:800; color:#d6d6d6; margin-right:10px;}
.she-card-title {display:flex; align-items:center; font-size:20px; font-weight:800; color:#444; margin-bottom: 0;}

.she-group .esg-list li {position: relative; padding-left:15px; margin-left:50px;}

.esg-desc.m, .esg-desc.s {font-weight: 400; text-align: left;}
.esg-desc.m {font-size: 20px;}
.esg-desc.s {font-size: 16px; margin-left: 20px;}

.esg-list.gray {background: #fafafa; padding: 30px; margin: 20px 0 0 20px;}
.esg-list.gray li {position: relative; padding-left: 15px;}

.esg-target {border-top: 1px solid #ccc; margin-top: 20px; padding: 20px 0;}
.target-title {font-size: 20px; font-weight: 500;}

.target-list {padding: 20px 0; display: flex; gap: 20px;}
.target-item {width: 25%; background: #fafafa; display: flex; align-items: center; justify-content: center; flex-direction: column; font-weight: 600; font-size: 16px; padding: 40px 0; gap: 20px; text-align: center; letter-spacing: -.4px;}

.target-prt {display: flex; gap: 50px; }
.target-prt .esg-list li {position: relative; padding-left: 15px;}
.target-prt .esg-list li::before {content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:6px; height:6px; background:#5E7587; border-radius:50%;}

@media (min-width:1025px) {

}

@media (max-width: 1240px) {
  /*CEO인사말*/
  .sub.contents.greeting .inner {flex-direction: column;}

  /*회사개요*/
  .overview .ov-card.is-big {width: 100%; flex-direction: row; padding: 20px 40px;}
  .ov-group {width: 100%;}
  .overview .ov-card.is-plant {justify-content: space-between;}
  .overview .ov-card.is-plant .ov-label {font-size: 24px;}

  /*제품소개*/
  .sub.contents.product .inner.prd-row {gap: 50px; flex-direction: column;}

  /*찾아오시는 길*/
  .dt-info {flex-wrap: wrap;}

  /*공장*/
  .pac li:not(.pac-wide):nth-child(2), .pac li:not(.pac-wide):nth-child(3), .pac li:not(.pac-wide):nth-child(4), .pac li:not(.pac-wide):nth-child(5) {flex: 100%; border-bottom: 1px solid #ccc;}
  .pac li:not(.pac-wide):nth-child(5) {border-bottom: none;}
  .pac li:nth-child(4) {border-bottom: none;}

  /*esg*/
  .she-top {flex-direction: column; gap: 20px;}
  .she-top-left {flex: 100%;}
}

@media (max-width: 1024px) {
  .greeting h3 {margin-bottom: 20px;}

  /*연혁*/
  .hs_thumb {flex: 100%;}

  .fac-wrap {flex-wrap:wrap; gap:16px; justify-content: center;}
  .fac-step {flex:0 0 calc(50% - 8px);}
  .fac-dot {display: none;}
  .facility .wrap {flex-direction:column; gap:24px;}
  .fac-img {width: 100%; max-width: 480px;}
  .fac-info {text-align: center;}

  /*지속가능경영*/
  .esg-box {flex-wrap: wrap; flex-direction: column; padding: 40px 20px;}
  .she-group .esg-list li {margin-left: 10px;}

}

@media (max-width: 768px) {
  /*공통*/
  .down-btn {margin: -20px auto 40px;}

  .sub_top_title {padding: 20px;}
  .sub_top_title h2 {font-size: 40px;}

  .full-img h3 {font-size: 20px;}

  /*CEO인사말*/
  .sub.contents.greeting {background: linear-gradient(to bottom, transparent 0, transparent calc(100% - 540px), #FBFBFB calc(100% - 540px), #FBFBFB 100%);}

  /*회사개요*/
  .overview .ov-group .ov-card {flex: 100%; justify-content: space-between;}
  .overview .ov-label {text-align: right;}
  .ov-area .ov-label {text-align: center;}

  /*주요연혁*/
  .history .ht-list {flex-direction: column; gap: 20px;}
  .history .ht-title {margin-left: 0; text-align: center}

  .history li::after {left: calc(-40px + 10px);}

  .history .ht-year {margin-right: 20px;}

  /*제품소개*/
  .full-img h2 {font-size: 36px;}

  /*찾아오시는 길*/
  .dt-info {flex-direction: column;}
  .dt-info li, .dt-info td {width:100%; font-size:16px; gap:8px; padding:10px 0; align-items:flex-start;}
  .dt-info i {font-size:17px;}
  .dt-info span {display:inline-block; width:80px; margin-right:0;}

  /*esg*/
  .she-top {padding: 30px;}
  .esg-goal {margin-left: 10px;}
  .she-card {flex: 100%; padding: 30px;}
  .esg-list {padding-left: 0;}
  .esg-desc.m, .esg-desc.s {margin-left: 0;}
  .esg-list.gray {margin: 20px 0 0 0;}

  .target-list {flex-wrap: wrap;}
  .target-item {width: 48%;}

  .target-prt {flex-direction: column; gap: 20px;}
}

@media screen and (max-width: 586px){
  .product .prd-list.prd-col2 .prd-item {flex: 100%;}
  .product .prd-list.prd-col3 .prd-item {flex: 100%;}
  .product .prd-list.prd-col4 .prd-item {flex: 100%;}

    /*esg*/
  .target-item {width: 100%;}
}
@media screen and (max-width: 480px){
  /*CEO인사말*/
  .sub.contents.greeting {background: linear-gradient(to bottom, transparent 0, transparent calc(100% - 680px), #FBFBFB calc(100% - 680px), #FBFBFB 100%);}

  /*제품소개*/
  .full-img h2 {font-size: 28px;}
  .prd-item{flex:0 0 100%;}


}

@media screen and (max-width: 370px){
  
}