/*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, .5); 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_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: 100px;}
.sub.contents {display: flex; flex-wrap: wrap; width: 100%; min-height: 300px; padding-bottom: 70px;}

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

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

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

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

.sub.contents .title-md {position:relative; padding-left: 30px;  font-size: 24px; font-weight: 700; margin-bottom: 20px;}
.sub.contents .title-md::before {content:""; position:absolute; left: 5px; top: 41%; width: 10px; height: 10px; background: var(--brand-color); transform:translateY(-50%); z-index: 1;}
.sub.contents .title-md::after {content:""; position:absolute; left:10px; top: 55%; width: 10px; height: 10px; background:var(--brand-color2); transform:translateY(-50%);}

.sub.contents .title-md.top {position:relative; padding-left: 0; margin: 20px auto 40px;}  
.sub.contents .title-md.top::before, .sub.contents .title-md.top::after {content:""; position:absolute; width:10px; height:10px;}  
.sub.contents .title-md.top::before {top: -20px; left: calc(50% - 10px); background:var(--brand-color);}  
.sub.contents .title-md.top::after {top: -18px; left: 50%; transform:translateX(-50%); background:var(--brand-color2);}  

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

.highlight {color: var(--brand-color2); font-size: 28px; font-weight: 800;}
.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; border-radius: 20px;}
.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; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-size: 30px; font-weight: 800; text-align: center;}

.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}

/*인사말*/
.greeting .inner {justify-content: center; align-items: center;}
.greeting h3 {font-size: 24px; font-weight: 700; text-align: center; margin-bottom: 40px; color: #333;}
.greeting h4 {font-size: 20px; font-weight: 500; margin-top: 20px;}
.greeting p {color: #333; font-size: 16px; font-weight: 500; text-align: center; margin-bottom: 10px;}
.full-img.gt {background-image: url('../../images/thema/sub/greeting.png');}

/*주요연혁*/
.history .ht-list {display: flex; gap: 140px; width: 100%; margin-bottom: 70px; border-bottom: 1px solid #ccc;}
.history .ht-title {margin-left: 40px;}
.history .ht-title h3 {font-size: 36px; font-weight: 800;}
.history .ht-title h4 {font-size: 28px; font-weight: 500; color:#222;}

.history ul {padding-left:20px; margin-bottom: 70px;}
.history li {display: flex; align-items: center; margin-bottom: 15px; position: relative;}
.history li::before {content:""; position:absolute; left: -60px; top: 13px; width: 21px; height: 21px; background: var(--brand-color); border: 6px solid #D3EFFF; border-radius:50%;}
.history li::after {content: ""; position: absolute; top: 33px; bottom: -12px; left: calc(-60px + 10px); width: 1px; height: 40px; background: #ccc;}
.history li:last-child::after {display: none;}

.history .ht-year {flex:0 0 60px; font-size: 30px; font-weight: 800; color:var(--brand-color); margin-right: 35px;}
.history li span {flex:1; font-size: 16px; color:#222;}
.full-img.ht {background-image: url('../../images/thema/sub/history.png');}

/*제품소개*/
.btn-group {width: 100%; display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin: -40px auto 60px;}

.prd-group {width: 100%; border-bottom: 1px solid #ddd; margin-bottom: 60px;}
.prd-list {display: flex; align-items: flex-start; justify-content: flex-start; gap: 20px; flex-wrap: wrap;}
.prd-item {flex:0 0 calc((100% - 40px) / 3); margin-bottom: 20px;}
.prd-item .title-sm {position: relative; font-size: 20px; margin: 0 0 20px 20px;}
.prd-item .title-sm:before {position: absolute; top: 45%; left: -15px; content: ''; width: 5px; height: 5px; background: var(--brand-color); border-radius: 50%;}
.prd-img {display:flex; align-items:center; justify-content:center; background:#3a3a3a; border-radius:12px; padding:16px; height: 260px;}
.prd-img img {max-width: 100%; height: auto; display:block; max-height: 170px; transition: .3s ease;}
.prd-item:hover img {transform: scale(1.1);}

.prd-meta {margin-top: 25px; padding-left: 15px;}
.prd-meta p {font-size: 18px;}
.prd-label {background: var(--brand-color); padding: 5px 20px; margin-right: 15px; color: #fff; border-radius: 50px;}

.sub.contents .prd-item.Insulation .title-md {margin-bottom: 10px;}

.title-desc {padding-left: 30px; font-weight: 500; font-size: 20px; color: #222; margin-bottom: 25px;}

.prd-list.ins {padding-left: 0;}

.Insulation .prd-img {height: 300px;}
.Insulation .prd-img img {max-height: 190px;}

.ins-list {width: 100%; display: flex; flex-wrap: wrap; gap: 20px; margin: 0; padding: 0;}
.ins-list .ins-prd {width: calc((100% - 80px) / 5); background: #FFF; border: 1px solid #E9EEF4; border-radius: 20px; padding: 35px 27px; text-align: center; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);}

.ins-list .prd-icon {width: 86px; height: 86px; border-radius: 50%; background: #EEF6FF; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;}
.ins-list .prd-icon img {width: 40px; height: 40px; display: block;}

.ins-list .ins-prd h4 {font-size: 18px; font-weight: 700; color: #007CC3;}
.ins-list .ins-prd p {font-size: 16px; line-height: 24px; color: #666; margin: 0; text-align: justify; letter-spacing: -.4px;}

.product .table.detail thead tr:not(:first-child) th {border-top: 0;}

/*생산과정*/
.process {flex-wrap: wrap;}
.prc-item {display:flex;gap:24px;align-items:center; margin-bottom: 40px; width:100%;}
.prc-media {flex:0 0 48%;display:flex;flex-wrap:wrap;gap:16px;max-width:560px; height: 270px;}
.prc-img {overflow:hidden;max-width:560px;width:100%; max-height: 270px;}
.prc-half {flex:1 1 calc(50% - 8px);}
.prc-full {flex:1 1 100%;}
.prc-img img {display:block;width:100%;height:auto;}
.prc-info {flex:1;display:flex;flex-direction:column;gap:12px;padding-left:24px;}
.prc-title {display:flex; gap:10px; align-items:baseline; font-size:20px; font-weight:700; border-bottom:1px solid #ccc; padding-bottom:20px;}
.prc-step {color:var(--brand-color);}
.prc-name {color:#000; font-weight: 500;}

.prc-line {display:flex;align-items:flex-start;gap:28px;margin-top:4px;}
.prc-subtitle {flex:0 0 auto; font-size: 18px; font-weight:600; color:#222;}
.prc-steps {display:flex; flex-direction:column; gap:10px; counter-reset:prc;}
.prc-steps li {position:relative; padding-left: 28px; line-height:1.6;}
.prc-steps li::before {counter-increment: prc; content: counter(prc); position: absolute; left: 0; top:50%; transform:translateY(-50%); display:flex; align-items:center; justify-content:center; width: 20px; height: 20px; border-radius:50%; background:var(--brand-color); color:#fff; font-size: 11px; font-weight: 700; line-height: 1;}

.bar {width: 1px; height: 14px; background: #ccc; margin: 0 15px; display: inline-block;}

/*설비·기계 보유현황*/
.fac-group {display: flex; gap: 50px; align-items: center;}
.fac-img {width: 100%; max-width: 640px;}
.fac-group p {margin-bottom: 0;}

.fac-info .label {border-radius: 50px; background: #666; padding: 8px 30px; color: #fff;}
.fac-info h3 {font-size: 24px; font-weight: 500; margin: 25px 10px 25px 0;}
.fac-info .en-title {font-size: 16px; color: var(--brand-color2); margin-left: 10px;}
.fac-desc {padding: 30px; border-radius: 10px; line-height: 1.5; font-size: 16px; background: #F5FBFF; text-align: justify;}

.fac-wrap{display:flex; align-items:center; justify-content:space-between; gap:24px; max-width: 1280px;}
.fac-step{position: relative; flex:1 1 0; width: 278px; height: 160px; padding: 25px; border: 1px solid #4A9DFD; border-radius:10px; background:#fff; text-align:center;}
.fac-num{position: absolute; display:block; font-size:74px; line-height:1; font-weight:800; color: rgba(0, 157, 254, .1); top: 8px; left: 18px;}
.fac-wrap>:nth-child(2 of .fac-step) .fac-num{color: rgba(0, 127, 224, .1);}
.fac-wrap>:nth-child(3 of .fac-step) .fac-num{color: rgba(1, 72, 162, .1);}
.fac-wrap>:nth-child(4 of .fac-step) .fac-num{color:rgba(0, 49, 108, .1);}

.fac-step h4 {font-size:18px; font-weight:700; color:#222; margin: 10px auto 20px;}
.fac-step p {font-size:16px; color:#444; }
.fac-dot{--gap: 10px;--big:6px;--small:4px;position:relative;flex:0 0 calc(var(--gap)*2 + var(--big));height:12px;background:radial-gradient(circle at 50% 50%,#007CC3 0 calc(var(--big)/2),transparent calc(var(--big)/2)),radial-gradient(circle at calc(50% - var(--gap)) 50%,#D9D9D9 0 calc(var(--small)/2),transparent calc(var(--small)/2)),radial-gradient(circle at calc(50% + var(--gap)) 50%,#D9D9D9 0 calc(var(--small)/2),transparent calc(var(--small)/2));}

.fac-list {gap: 20px; justify-content: space-between;}
.fac-card {flex: 1; display: flex; justify-content: center; align-items: center; flex-direction: column; background: #F9F9F9; border-radius: 10px; padding: 30px 20px; gap: 15px;}
.fac-icon {background: #fff; width: 60px; height: 60px; border-radius: 50%; display: inline-flex; justify-content: center;}
.fac-icon img{display:block; object-fit:contain;}
.fac-card h3 {font-size: 18px;}
.fac-card p {font-size: 16px; text-align: center; word-break: keep-all;}

/*오시는길*/
.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; margin-bottom: 40px;}
.map-bg.map01 {background-image: url('../../images/thema/sub/map.jpg');}

.dt-info {width: 100%; display: flex; 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;}

@media (min-width:1025px) {

}

@media (max-width: 1240px) {
  /*찾아오시는 길*/
  .dt-info {flex-wrap: wrap;}
}

@media (max-width: 1024px) {
  .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;}
  
  .ins-list .ins-prd {width: calc((100% - 40px) / 3);}

}

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

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

  /*주요연혁*/
  .history .ht-list {flex-direction: column; gap: 20px;}
  .history .ht-title {margin-left: 0; text-align: center}
  .history ul {padding-left: 40px;}
  .history li::before {left: -40px;}
  .history li::after {left: calc(-40px + 10px);}

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

  /*제품소개*/
  .prd-item{flex:0 0 calc((100% - 20px) / 2); margin-bottom: 40px;}
  
  .ins-list .ins-prd {width: calc((100% - 20px) / 2);}

  /*생산과정*/
  .prc-item{flex-direction:column; align-items:flex-start;}
  .prc-media{flex:1 1 100%; max-width:100%; height:auto;}
  .prc-img{max-width:100%;}
  .prc-info{flex:1 1 100%; padding-left:0; width: 100%;}
  .prc-line{flex-direction:column; gap:10px; padding: 10px 20px;}

  /*설비·기계 보유현황*/
  .fac-img {max-width:100%;}

  .fac-info .label {padding:6px 16px;}
  .fac-info h3 {font-size:20px; margin:16px 6px;}
  .fac-info .en-title {display:block; margin:6px 0 0; font-size:14px;}
  .fac-desc {padding:18px; border-radius:10px; font-size:15px;}
  .fac-wrap {gap:12px;}
  .fac-step {flex:0 0 100%; width:100%; min-height:130px; padding:20px;}
  .fac-num {font-size:56px; top:6px; left:14px;}

  .fac-list {flex-direction: column;}

  /*찾아오시는 길*/
  .dt-info {flex-direction: column;}
  .dt-info li{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: 480px){
  /*제품소개*/
  .prd-item{flex:0 0 100%;}
  
  .ins-list .ins-prd {width: 100%;}
}

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