@charset "utf-8"; /* doc.css는 디자인페이지 스타일을 정의합니다. */
 .root_daum_roughmap {width:100% !important; height:400px !important;} 
 .root_daum_roughmap .wrap_map {width:100% !important; height:400px !important;} 
 
 .doc-tit {position: relative; padding-left: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px ); color: #333; font-size: var(--font-size-36); line-height: 1em; letter-spacing: 0; margin-bottom: var(--space-40);} 
 .doc-tit:before {content: ""; position: absolute; top: 50%; left: 0; width: 5px; height: 83%; border-radius: 50vh; background-color: #51a5f6; transform: translateY(-50%);} 

.doc-tit {padding-bottom:var(--space-50);} 
.doc-tit h2 {padding-bottom:var(--space-20); font-weight:600; font-size: var(--font-size-40); color: var(--color-dark); line-height:1em;} 

.doc-cnt {padding:var(--header-height) 0;} 
.doc-cnt:first-child {padding-top:0;} 

.doc-sub-cnt {padding-bottom:var(--header-height) 0;} 
.doc-sub-cnt:last-child {padding-bottom:0;} 

.table-style table {width:100%; border-collapse:collapse; border-spacing:0px; border-top:2px solid #868686; line-height:1.5em;} 
.table-style table thead th {padding:13px; font-size: var(--font-size-17); border:1px solid #ddd; border-top:0; font-weight:500; background:#fafafa; color: var(--color-dark);} 
.table-style table tbody th {font-weight:500; text-align:center; border:1px solid #ddd; border-top:0;} 
.table-style table tbody td {padding:13px; text-align:center; border:1px solid #ddd; border-top:0; color: #454545;} 
.table-style tr th:first-child,
.table-style tr td:first-child {border-left:0;} 
.table-style tr th:last-child,
.table-style tr td:last-child {border-right:0;} 
.table-style span {display:inline-block;} 
.table-style .normal {font-weight:400;} 

.flex-wrap {display: flex;} 
.flex-center {display: flex; justify-content: center;} 
.flex-between {display: flex; justify-content: space-between;} 
.flex-mid {display: flex; align-items: center;} 
.flex-bottom {display: flex; align-items: flex-end;} 
.flex-column {display: flex; flex-direction: column;} 
.flex1 {flex: 1;} 
.flex1-auto {flex: 1 1 auto; width:1%; min-width:0;} 

.dot-list > li {position:relative; padding-left:10px;} 
.dot-list > li:before {content:"·"; position:absolute; top:-2px; left:0; font-weight:700; font-size:20px; color:#242424;} 
.dot-list > li strong {font-weight:600;} 

.dash-list > li {position:relative; padding-left:13px;} 
.dash-list > li:before {content:"-"; position:absolute; top:-2px; left:0;} 
.dash-list > li strong {font-weight:600;} 
.dash-list.none > li {padding-left:0;} 
.dash-list.none > li::before {display: none;} 

.pt0 {padding-top:0 !important;} 
.pb0 {padding-bottom:0 !important;} 

.mt0 {margin-top:0 !important;} 
.mb0 {margin-bottom:0 !important;} 

.txt-primary {color: var(--color-primary) !important;} 
.txt-second {color: var(--color-secondary) !important;} 
.txt-grey {color: #888888 !important;} 
.txt-wht {color: #fff !important;} 
.txt-dark {color: #242424 !important;} 

.highlight {display: inline; box-shadow: inset 0 -14px 0 #f7f5fa; border-radius: 3px;} 

.tag {padding:7px 16px; font-weight:500; font-size: var(--font-size-18); letter-spacing: 0; line-height:1em; background-color: var(--color-second); border-radius: 50vh; color: #fff; width:fit-content;} 

.bg-grey {background-color: #fafafa;} 

.greeting {display:flex; align-items: center; gap:0 var(--space-70);} 
.greeting .col-l {width:48%;} 
.greeting .col-r {flex:1;} 
.greeting .col-r .top .tit {font-size:var(--font-size-38); line-height:1.47em; font-weight:700; color:#242424;} 
.greeting .col-r .top .tit strong {color:var(--color-primary);} 
.greeting .col-r .bar {display:block; width: 74px; height: 2px; margin:var(--space-30) 0; background-color: rgb(221, 221, 221);} 
.greeting .col-r .mid p {margin-bottom:var(--space-30); line-height:1.625em;} 
.greeting .col-r .mid p strong {font-weight:600;} 
.greeting .col-r .mid p:last-child {margin-bottom:0;} 
.greeting .col-r .bot {margin-top:var(--space-60); color: #242424;} 
.greeting .col-r .bot p {font-weight:600;} 
.greeting .col-r .bot p strong {font-size: var(--font-size-18); font-weight:700;} 

/* .history */
.history .tab-contents {border: none;} 
.history .con2 {position:relative;} 
.history .con2:after {content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 2px; height: 90%; background-image: url(../images/sub/history-line.png); background-size: auto; background-repeat: repeat-y; background-position: 100% 90px; margin-top: 5px;} 
.history .con2 .row {display:flex; padding-bottom:80px; flex-direction:row-reverse;} 
.history .con2 .row:last-child {padding-bottom: 0;} 
.history .con2 .row .col {width:50%; padding-left: 50px;} 
.history .con2 .row .col .year {color: var(--color-primary); font-size: 40px; font-weight:700; margin-bottom: 30px; position:relative;} 
.history .con2 .row .col .year:before {content:''; width:26px; height:26px; background: url(/images/sub/history-dot.png) no-repeat 100%/contain; position: absolute; left: -62px; top:1px; z-index:1;} 
.history .con2 .row .col .info .wrap {display:flex;} 
.history .con2 .row .col .info .wrap ul {min-width:0; width:1%; flex:1 1 auto;} 
.history .con2 .row .col .info .wrap ul li {font-size: var(--font-size-17); line-height:1.76em;} 
.history .con2 .row:nth-child(even) {text-align:right; flex-direction: row;} 
.history .con2 .row:nth-child(even) .col {padding-left:0; padding-right:50px;} 
.history .con2 .row:nth-child(even) .col .year:before {left:auto; right: -64px;} 
.history .con2 .row:nth-child(even) .col .info .wrap {flex-direction:row-reverse;} 

/* certification */
.certification-list ul {display:flex; flex-wrap:wrap; margin:-30px -15px;} 
.certification-list ul li {width:25%; padding:30px 15px; text-align:center;} 
.certification-list ul li .img {margin-bottom:20px;} 
.certification-list ul li .tit {font-weight:500; line-height:1em;} 


/* directions */
.directions .tit {margin-bottom:var(--space-30); font-weight:700; font-size: var(--font-size-30); line-height:1em; color: var(--color-dark);} 
.directions .wrap:not(:last-child) {margin-bottom:var(--space-100);} 
.directions .flex-wrap {margin-top:var(--space-50);} 
.directions .flex-wrap > div {width:50%;} 
.directions .address-info {margin-bottom:30px;} 
.directions .address-info .comp {color:#0f2554; font-weight:500; margin-bottom:2px;} 
.directions .address-info .addr {color:#242424; font-size:20px; font-weight:500; line-height:1.33em; letter-spacing:-.03em; margin-bottom:5px;} 
.directions .address-info .etc span {display:inline-block; margin-right:16px;} 
.directions .address-info .etc span:last-child {margin-right:0;} 
.directions .contact-info {line-height:1.5em;} 
.directions .contact-info dl {display:flex; margin-bottom:var(--space-30);} 
.directions .contact-info dl:last-child {margin-bottom:0;} 
.directions .contact-info dt {width:120px; color:#242424; font-weight:500;} 
.directions .contact-info dt svg {vertical-align:middle; margin:-.2em 15px 0 0;} 
.directions .contact-info dt path {fill:#b7bdcb;} 
.directions .contact-info dd {flex:1 1 auto; min-width:0; width:1%; color:#454545;} 

.about .img {padding:var(--space-40); background-color: #f2f2f2; width:max-content; margin:0 auto var(--space-20);} 

.btn-down {display:flex; justify-content: center; align-items: center; gap: 0 16px;
    padding: var(--space-16) var(--space-130) ;
    width:fit-content;
    /* width: 360px; height: 50px; */
    line-height:1em;
     margin:0 auto; border-radius: 10px; background-color: rgb(30, 125, 181); letter-spacing: -0.01em; color: #fff;} 


/* 공장현황 */
.factory-list ul li {display:flex; margin-bottom:var(--space-100);} 
.factory-list ul li:last-child {margin-bottom:0;} 
.factory-list .thumb {width:48.333%; margin-right:var(--space-70);} 
.factory-list .thumb img {width:100%; height:100%; object-fit:cover;} 

.factory-list .info {flex:1 1 auto; min-width:0; width:1%;} 
.factory-list .tit {padding-top:var(--space-60); color:#242424; font-size:var(--font-size-38); font-weight:700; line-height:1.47em; overflow:hidden; text-overflow:ellipsis; word-break:break-all; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;} 
.factory-list .tit strong {color: var(--color-primary);} 
.factory-list .bar {display:block; margin:var(--space-30) 0; background-color: rgb(221, 221, 221); width: var(--space-70); height: 2px;} 
.factory-list .txt {line-height:1.625em; overflow:hidden; text-overflow:ellipsis; word-break:break-all; white-space:normal; display:-webkit-box; -webkit-line-clamp:7; -webkit-box-orient:vertical;} 
.factory-list ul li.none {display:block; width:100%; padding:70px 0; margin:0; text-align:center; color:#767676;} 

/* 사업분야 */
.biz .img {margin-bottom:var(--space-60);} 
.biz .img img {width:100%; height:100%; object-fit: contain;} 

.biz-detail {line-height:1.625em;} 
.biz-detail:not(:last-child) {margin-bottom:var(--space-70);} 
.biz-detail .tit {color:#2c2c2c; font-size:var(--font-size-30); line-height:1.3em; letter-spacing: -0.04em; margin-bottom:var(--space-20);} 

.biz-cate {margin-bottom:var(--space-60);}
.biz-cate ul {display:flex; flex-wrap:wrap; gap:var(--space-10);}
.biz-cate ul li {}
.biz-cate ul li a {display:block; padding:var(--space-15) var(--space-30); background-color: #f2f2f2; border-radius:30px; text-align:center; color:#505050; font-weight:500;line-height:1.5em;}
.biz-cate ul li a:hover,
.biz-cate ul li.active a {background-color:var(--color-primary); color:#fff;}

.biz-wrap {border-top:2px solid #868686; padding-top:var(--space-60);}
.biz-section:not(:last-child) {margin-bottom:var(--space-100);} 
.biz-section .title {position:relative; padding-bottom:var(--space-30); margin-bottom:var(--space-40); border-bottom:1px solid #ddd; color:#242424; font-size:var(--font-size-30); line-height:1.3em; letter-spacing: -0.03em;}
.biz-section .title:after {content:''; position:absolute; bottom:-1px; left:0; width:3.6em; height:2px; background-color:var(--color-primary);}
.biz-section .image img {border-radius:var(--border-radius-24);}
.biz-section .flex-wrap {display:flex;}
.biz-section .flex-wrap .image {width:50%;}
.biz-section .flex-wrap .content {width:50%; padding:var(--space-30) 0 0 var(--space-70);}
.biz-section .tit {color:var(--color-primary); font-size:var(--font-size-20); line-height:1.3em; letter-spacing: -0.03em; margin-bottom:var(--space-20);}

/* 실적갤러리 */
.gallery {padding:var(--space-80) 0;} 
.owl-carousel {padding-bottom:90px;} 
.owl-carousel .owl-stage {display:flex; align-items:center;} 
.owl-carousel .owl-stage:after {display:none;} 
.owl-carousel .owl-item {flex-shrink:0;} 
.center-slider {position:relative; overflow:hidden;} 
.center-slider .item {width:var(--slider-active-width); border-radius:var(--border-radius-24); margin:0 var(--space-20);} 
.center-slider .wrap {position:relative; margin-bottom:var(--space-20);} 
.center-slider .thumb {position:relative; padding-bottom:68.42%; overflow:hidden; border-radius: var(--border-radius-24);} 
.center-slider .thumb img {position:absolute; top:50%; left:0; transition:.4s ease-in-out; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); width:100%; height:auto !important; max-width:100%; min-height:100%; object-fit:cover; border-radius: var(--border-radius-24);} 
.center-slider .wrap .hover {position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); width:100%; height:100%; border-radius: var(--border-radius-24); background-color: rgba(30,125,181, 0.95); display:flex; justify-content: center; align-items: center; opacity:0; transition: .3s;} 
.center-slider .btn-more {color: #fff;} 
.center-slider .btn-more::after {background-image: url(/images/sub/arrow-sky.png); border-color: #fff;} 
.center-slider .item a:hover .hover {opacity:1;} 
.center-slider .item a:hover .btn-more:hover::after {background-image: url(/images/sub/arrow-sky.png); background-color: #fff; border-color: #fff;} 
.center-slider .item .tit {font-weight:600; font-size: var(--font-size-20); text-align:center; letter-spacing: -0.02em; color: var(--color-dark); line-height:normal;} 
.center-slider .owl-nav {position: absolute; bottom:0; left:50%; transform: translatex(-50%); display:flex; gap: 0 10px; height: 45px;} 
.center-slider .owl-nav button {position:relative; left:auto; top:auto; right:auto; bottom:auto; width:45px; height:45px; background-color: #fff !important; border: 1px solid #ddd !important; border-radius: 100%;} 
.center-slider .owl-nav button::before {content: ""; position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); font-size: 0; width:9px; height:12px; background: url(/images/sub/arrow-grey.png) no-repeat center/contain;} 
.center-slider .owl-nav button span {display:none;} 
.center-slider .owl-nav button:hover {background-color: var(--color-primary) !important; border-color: var(--color-primary) !important;} 
.center-slider .owl-nav button:hover:before {background-image: url(/images/sub/arrow-wht.png);} 
.center-slider .owl-nav button.owl-prev::before {transform: translate(-50%, -50%) rotate(-180deg);}