/*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-100 {padding-bottom: 100px;}
.pb-150 {padding-bottom: 150px;}

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

.sub_title {width: 100%; text-align: center; display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 25px;}
.sub_title h2 {font-size: 32px; font-weight: 700; margin-top: 70px; text-align: center;}
.sub_title .title-desc p {font-size: 20px; font-weight: 400;}

.title-md {display: inline-block; font-size: 28px; font-weight: 700; text-align: center;}
.title-md.deco {position:relative; padding-left: 30px; font-size: 24px; font-weight: 700; margin-bottom: 20px; margin-right: auto;}
.title-md.deco::before {content:""; position:absolute; left: 10px; top: 55%; width: 10px; height: 10px; background: var(--brand-color); transform:translateY(-50%);}
.title-md.deco::after {content:""; position:absolute; left: 15px; top: 41%; width: 10px; height: 10px; background:var(--brand-color2); transform:translateY(-50%); z-index: 1;}

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

.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; width: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); color:#fff; font-size: 28px; font-weight: 500; text-align: center; margin: 0; line-height: 42px;}
.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: #EBF0F7; padding: 8px 20px; color: #222; border-radius: 999px; font-size: 16px; transition: .3s ease; max-width: 180px;}
.down-btn i {margin-left: 10px; font-size: 18px;}
.down-btn:hover {background: #217AFF; color: #fff;}

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

/*회사소개*/
.company {position: relative; display: flex; align-items: end; max-width: 1920px;}
.company::before {position: absolute; content: ''; width: 1530px; height: 250px; background: #EBF0F9; left: 220px; bottom: 30px;z-index: 0;}

.cmp-img {display: flex; z-index: 1; width: 100%; max-width: 900px;}
.cmp-img img {display: block; width: 100%;}
.cmp-text {position: relative; width: 100%; max-width: 600px; margin-left: 100px;}
.cmp-head {font-size: 28px; line-height: 36px; letter-spacing: -.7px; font-weight: 600;}
.cmp-text p {margin-top: 10px;}

.cmp-copy {margin: 55px 0 15px;}
.cmp-copy h3 {color: #BCC8DA; font-size: 36px; letter-spacing: -.9px; line-height: 46px; font-weight: 900;}

.sub.contents.overview {background: url(../../images/thema/sub/ov-bg.png); background-size: cover; padding: 70px 0;}
.sub.contents.overview .inner {display: flex; flex-direction: row; flex-wrap: wrap; gap: 20px; align-items: stretch; justify-content: flex-start;}
.ov-card {flex: 0 0 calc((100% - 40px) / 3); height: 250px; box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.25); border-radius: 20px; overflow: hidden; background-size: contain; display: flex; justify-content: space-between; align-items: stretch; flex-direction: column; box-sizing: border-box; padding: 40px;}
.ov-label {color: #fff; font-size: 24px; font-weight: 600;}
.ov-desc {color: #fff; font-size: 24px; font-weight: 800; text-align: right; z-index: 1;}
.ov-desc.big {font-size: 36px;}
.ov-desc.sm {font-size: 20px;}

.ov-card.item01 {background: #1C89CC url(../../images/thema/sub/ov01.png);}
.ov-card.item02 {background: #00B7CC url(../../images/thema/sub/ov02.png);}
.ov-card.item03 {background: #626B82 url(../../images/thema/sub/ov03.png);}
.ov-card.item04 {background: #3193A9 url(../../images/thema/sub/ov04.png);}
.ov-card.item05 {background: #0553A8 url(../../images/thema/sub/ov05.png);}
.ov-card.item06 {background: #162C9A url(../../images/thema/sub/ov06.png);}

.partner {padding: 50px 0;}
.prt-text {width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 20px; margin-bottom: 70px;}
.partner h2 {font-size: 28px; font-weight: 700; text-align: center;}
.partner h3 {font-size: 20px; font-weight: 600; text-align: center; line-height: 29px;}
.partner p {width: 865px; text-align: center;}
.partner .map-box {position: relative; margin: 0 auto; max-width: 1580px;}
.partner .prt-img {width: 100%; max-width: 1580px; height: auto;}

.gp-marker {position: absolute; width: 14px; height: 14px; border-radius: 50%; background: #217AFF; transform: translate(-50%, -50%); pointer-events: none; z-index: 1;}
.gp-marker::after {content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; border-radius: 50%; transform: translate(-50%, -50%); background: rgba(132,181,255,.80); animation: gpPulse 1.8s ease-out infinite; z-index: 0;}

.gp-label {position: absolute; left: 50%; top: calc(100% + 10px); transform: translateX(-50%); color: #217AFF; font-size: 16px; font-weight: 700; letter-spacing: .4px; white-space: nowrap;}

@keyframes gpPulse {0%{transform:translate(-50%,-50%) scale(.2); opacity:.9;}70%{transform:translate(-50%,-50%) scale(6); opacity:0;}100%{transform:translate(-50%,-50%) scale(6.5); opacity:0;}}

/* 스크린샷 기준 대략 좌표(%) */
.gp-marker.canada {left: 18%; top: 27%;}
.gp-marker.usa {left: 22%; top: 35%;}
.gp-marker.mexico {left: 18%; top: 49%;}
.gp-marker.south {left: 30%; bottom: 26%;}
.gp-marker.uk {left: 45.5%; top: 28%;}
.gp-marker.spain {left: 46%; top: 42%;}
.gp-marker.poland {left: 56%; top: 29%;}
.gp-marker.turkiye {left: 58.5%; top: 43%;}
.gp-marker.iran {left: 64%; top: 45%;}
.gp-marker.russia {left: 68%; top: 27%;}
.gp-marker.china {left: 73%; top: 41%;}
.gp-marker.india {left: 69%; top: 53%;}
.gp-marker.vietnam {left: 75.5%; top: 54%;}
.gp-marker.taiwan {left: 83%; top: 49%;}
.gp-marker.japan {left: 87%; top: 42%;}

.Management .inner {gap: 50px;}
.Management .wrap {gap: 20px;}
.mag-item {width: 33.33%; padding: 40px; color: #fff; display: flex; flex-direction: column; justify-content: flex-end; min-height: 300px; border-radius: 20px; overflow: hidden; background-size: cover;}
.mag-item h2 {font-size: 28px;}
.mag-item p {font-size: 20px; font-weight: 400;}
.mag-item.item01 {background-image: url(../../images/thema/sub/mag01.png);}
.mag-item.item02 {background-image: url(../../images/thema/sub/mag02.png);}
.mag-item.item03 {background-image: url(../../images/thema/sub/mag03.png);}

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

.sub.contents.greeting .inner {justify-content: space-between; align-items: stretch;}

.sub.contents.greeting .full-img {background: url(../../images/thema/sub/greeting.jpg);}

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

/* 연혁 */

.history {width: 100%; display: flex; flex-wrap: wrap; gap: 120px; align-items: flex-start;}

.hs_thumb {flex: 0 0 520px; width: 100%; height: 400px; position: sticky; top: 120px; align-self: flex-start; isolation: isolate; overflow: hidden;}
.hs_thumb.is-fade {opacity: 0; transform: translateY(6px); transition: opacity .22s ease, transform .22s ease;}
.hs_thumb_stack {width: 100%; height: 100%; position: relative;}
.hs_thumb_pic {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .28s ease;}
.hs_thumb_pic.is-active {opacity: 1;}

.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; transition: opacity .22s ease;}
.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; display: flex; flex-direction: column;}
.hs_decade {padding: 45px 0; margin: 0 0 90px; border-top: 2px solid #222;}
.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; width: 70px; 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);}

/*CI·BI*/
.logo-top {width: 100%; background: #f7f7f7; padding: 60px 20px; display: flex; justify-content: center; align-items: center; flex-direction: column; border-radius: 20px;}
.gray-text {color: #666;}

.logo-top h2 {font-size: 20px; font-weight: 600; line-height: 29px; margin-top: 30px;}

.box-row {display: flex; justify-content: space-between;}
.logo-con {width: 100%; gap: 20px; margin-top: 50px;}
.logo-con .title-md {width: 100%; max-width: 420px; text-align: left;}

.logo-item {width: 100%; display: flex; justify-content: space-between; align-items: flex-end; flex-direction: column;}
.logo-img {display: flex; gap: 20px; margin-bottom: 20px;}
.logo-img img {border: 1px solid #eee; border-radius: 20px;}
.logo-item p {text-align: justify;}

.cs-list {display: flex; gap: 20px; justify-content: space-between; align-items: flex-start; width: 100%; flex-wrap: wrap;}
.cs-item {display: flex; flex-direction: column; gap: 8px; flex: 1;}
.cs-swatch {width: 100%; height: 100px; border-radius: 8px;}
.cs-code {white-space: nowrap; padding-left: 10px;}

.ci {margin-top: 20px;}

/*국·영문 혼용 상하조합 그리드*/
.logo-grid {width: 100%; display: flex; flex-wrap: wrap; gap: 20px;}
.logo-card {flex: 0 0 calc((100% - 20px) / 2); border: 1px solid #eee; border-radius: 20px; background: #fff; padding: 18px; display: flex; align-items: center; justify-content: center; min-height: 240px;}


/*오시는길*/
.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-tabs {margin-bottom: 50px;}
.map-tabs .nav-link {min-width: 200px; border-radius: 0; padding: 14px 24px; font-weight: 700; background: #f5f5f5; color: #999; font-size: 20px;}
.map-tabs .nav-link.active, .map-tabs .nav-link:hover {background: #0054A7; color: #fff;}

.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/map01.jpg');}
.map-bg.map02 {background-image: url('../../images/thema/sub/map02.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;}

/*RND*/
.rnd .table td:nth-child(2) {text-align: left;}
.rnd .table {margin-bottom: 50px;}

@media (min-width:1025px) {

}

@media (max-width: 1600px) {
  /*회사소개*/
  .company::before {left: 0;}

  .cmp-img {max-width: 100%; margin: 0 20px 40px;}
  .cmp-img img {max-width: 100%;}
}

@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;}

  /*CI·BI*/
  .logo-con .title-md {max-width: 250px;}
  .logo-img img {width: 50%;}
  /*찾아오시는 길*/
  .dt-info {flex-wrap: wrap;}

}

@media (max-width: 1024px) {
  /*회사소개*/
  .company::before {left: 0; bottom: 30px;}

  .cmp-img {flex-direction: column;}
  .cmp-text {margin-left: 40px;}

  .ov-card {flex: 0 0 calc((100% - 20px) / 2);}

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

  /*연혁*/
  .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;}

  /*CI·BI*/
  .cs-item {flex: 0 0 calc((100% - 20px) / 2);}
}

@media (max-width: 768px) {
  /*공통*/

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

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

  .sub_title {padding: 0 20px;}

  /*회사소개*/
  .company::before {left: 0; bottom: 30px;}
  .cmp-head {font-size: 24px;}
  .cmp-text {margin: 0 20px;}

  .ov-card {flex: 100%;}
  .ov-desc.sm {font-size: 18px;}

  .prt-text {margin-bottom: 40px;}
  .prt-text p {width: 100%;}
  .gp-label {font-size: 12px; top: calc(100% + 8px);}
  .gp-marker {width: 8px; height: 8px;}
  .gp-marker::after {width: 8px; height: 8px;}

  .Management .wrap {flex-wrap: wrap;}
  .mag-item {width: 100%;}

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

  /*주요연혁*/
  .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;}

  /*제품소개*/
  .logo-con {flex-direction: column;}

  /*찾아오시는 길*/
  .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;}


}

@media screen and (max-width: 586px){
  .logo-img, .logo-img img {width: 100%; flex-wrap: wrap;}
  .cs-item {width: 100%; flex: 100%;}
  .logo-card {flex: 100%};
}
@media screen and (max-width: 480px){
  /*회사소개*/
  .company::before {bottom: 80px;}

  /*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){
  
}