@charset "utf-8";
#container {position: relative;}
#container.with-left-page {display: flex; gap: var(--left-gap); max-width: 1860px; margin:0 auto; padding:0 var(--container-space);}
.left-menu {position: sticky; top: calc(var(--header-height)); width:220px; height: fit-content;}
#container.with-left-page #contArea, .one-sec-cnt {flex:1; max-width: 1500px; width: 1%; padding:0; margin: 0;}
#container.with-left-page .lnb {max-width: 100%;}
#product-filter-form {display: flex; flex-direction: column; max-height: calc(100vh - var(--header-height) - var(--lnb-height)); margin-top: var(--lnb-height); font-family:'myriad-pro', sans-serif;font-size: var(--font-size-16);}
#product-filter-form section {padding-right: 16px;}
#product-filter-form section:not(:last-child) {margin-bottom: var(--space-40);}
.filter-search h2 {padding: 11px; margin-bottom: 10px; background: var(--primary-color); color:#fff; font-weight: 700; font-size: var(--font-size-16); line-height: 1.5em; text-align: center;}
.filter-search-box {display: flex; padding-right: 20px; border: 1px solid #ddd;}
.filter-search-box .input {border: 0; flex:1; width: 1%;}
.filter-search-box button {width: 16px; border: 0; background: url('/images/bbs/icon-search.png') no-repeat center center / contain;}
.filter-slider {padding-top: 20px; margin-left: 10px;}
.slider-labels, .slider-values {display: none;}
.filter-group .noUi-horizontal .noUi-handle {width: 18px; height: 18px; border-radius: 100%; top: -9px; right: -9px; box-shadow: none; cursor: pointer;}
.filter-group .noUi-horizontal .noUi-handle:hover {background: var(--primary-color);}
.filter-group .noUi-handle:after, .filter-group .noUi-handle:before {content: none;}
.filter-group .noUi-tooltip {border: 0; padding: 0; line-height: 1em; font-size: var(--font-size-16);}
.filter-group .noUi-horizontal {height: 4px;}
#holecut-slider .noUi-connect {background: #444 !important; border-radius: 2px;}
.filter-select {overflow-y: auto;}
.filter-select::-webkit-scrollbar {width: 5px;}
.filter-select::-webkit-scrollbar-thumb {background-color: #ddd;border-radius: 10px;}
.filter-select::-webkit-scrollbar-track {background-color: transparent;}

.filter-select h2 {padding-bottom: var(--space-15); border-bottom: 1px solid #eee; font-size: var(--font-size-24); font-weight: 600; color: var(--dark-color);}
.filter-group {padding: var(--space-30) 0;}
.filter-group:not(:last-child) {border-bottom: 1px solid #eee;}
.filter-group h3 {margin-bottom: var(--space-15); font-size: var(--font-size-18); font-weight: 600; color: var(--dark-color);}
.filter-group .checkbox {width: 100%;}
.filter-group.short .checkbox {width: 49%; min-width: max-content;}

.product-search-wrap {margin-bottom:var(--space-40); margin-top:calc(var(--space-40) * -1);}

/* product view */
.page-product-view section:not(:last-child) {margin-bottom: var(--space-200);}
.prd-summary {display:flex; overflow: hidden; font-family: 'myriad-pro', sans-serif;}
.prd-image {width:36.66667%; margin-right:clamp(30px, calc(100 / var(--inner) * 100vw), 100px);}
.prd-image .img {position:relative; padding-bottom:100%; overflow:hidden;}
.prd-image .img img {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); width:auto !important; height:auto !important; max-width:100%; max-height:100%; object-fit:contain;}
.prd-image .img:after {content:""; position:absolute; top:0; left:0; right:0; bottom:0; border:1px solid rgba(0,0,0,.08);}
.prd-slider-for {position: relative; margin-bottom: 10px;}
.prd-slider-for .slick-arrow {position: absolute; z-index: 1; top: 50%; margin-top: -5px; width: 35px; height: 11px; background: url('/images/main/readmore-arrow.png') no-repeat center center / contain; border: 0; filter: brightness(.3); overflow: hidden; text-indent: -9999px;}
.prd-slider-for .slick-arrow.slick-prev {left: 20px;transform: scaleX(-1);}
.prd-slider-for .slick-arrow.slick-next {right: 20px;}
.prd-slider-nav {margin: 0 -5px;}
.prd-slider-nav .slick-slide {padding: 0 5px;}
.prd-image .prd-slider-nav .slick-slide img {opacity: .3;}
.prd-image .prd-slider-nav .slick-slide.slick-current img {opacity:1;}
.prd-image .prd-slider-nav .slick-slide.slick-current .img:after {border-color: var(--primary-color);}

.prd-info {flex:1 1 auto; min-width:0; width:1%; position:relative;}
.radio-wish {display: flex;}
.radio-wish label {width: 24px; height: 24px; background-color: transparent; background: url('/images/bbs/icon-heart.png') no-repeat center center / contain; border: 0; overflow: hidden; text-indent: -9999px; cursor: pointer;}
.radio-wish input:checked + label {background-image: url('/images/bbs/icon-heart-active.png');}
.prd-info .prd-info-category {margin-bottom: var(--space-55);}
.prd-info .prd-info-category ~ p {margin-bottom: var(--space-55); color: #878787; line-height: 1.7778em;}
.prd-info .tit {display: flex; align-items: center; gap: var(--space-35); margin-bottom: var(--space-25);}
.prd-info .tit h3 {font-size: var(--font-size-56); font-weight: 600; color: var(--dark-color); line-height: 1.2em;}
.prd-info-category {font-size: var(--font-size-24); font-weight: 600; color: #878787;}
.prd-info-category span:not(:last-child):after {content:''; display: inline-block; width: 2px; height: 20px; margin: 0 var(--space-20); background: #ddd; }
.prd-info .blueprind {width: calc(100% + 15px); max-height: 300px; overflow-y: scroll;}

.page-product-view h2 {margin-bottom: var(--space-30); font-size: var(--font-size-40); color: var(--dark-color); font-weight: 700; line-height: 1.2em; font-family: 'myriad-pro', sans-serif;}
.product-spec-cnt {display: flex; gap: var(--space-15) var(--space-40);}
.product-spec-cnt ul {flex:1; padding-right: 20px;}
.product-spec-cnt li {display: flex; font-family: 'myriad-pro', sans-serif;}
.product-spec-cnt li:not(:last-child) {margin-bottom: var(--space-15);}
.product-spec-cnt strong {min-width: 180px; color: var(--dark-color);}

@media (max-width: 700px) {
	.prd-list ul li {display:block;}
	.prd-list .image {width:100%; margin-right:0; margin-bottom:20px;}
	.prd-list .info {width:100%;}
	.prd-list .spec {margin-top:15px;}
	.prd-list .txt {-webkit-line-clamp:2; max-height:3.2em;}

	.prd-summary {margin-bottom:50px; display:block;}
	.prd-image {margin-bottom:30px; width:100%; margin-right:0;}

	.prd-info {width:100%;}
	.prd-info .tit {font-size:22px; padding-bottom:14px; margin-bottom:14px;}
	.prd-info .btns-wrap {gap:0 10px; position:relative; bottom:auto; left:auto;}
	.prd-info .txt ul dl {margin-bottom:7px;}
	.prd-info .txt ul dl dt {width:100px;}
	.prd-info .txt ul {margin-bottom:20px; max-height:100%;}

	.prd-detail {padding-bottom:25px; margin-bottom:25px;}
	.prd-detail .tit {font-size:17px; padding-bottom:10px; margin-bottom:14px;}
	.prd-detail .tit span:after {bottom:-12px;}
	.prd-info .btns-wrap .btn {height:40px;}
}

.table-wrap table {width: 100%; border-collapse: collapse; font-family: 'myriad-pro', sans-serif;  line-height: 1.5em;}

.table-wrap th, .table-wrap td {padding: var(--space-20) 5px; border: 1px solid #ddd;}
.table-wrap thead th { background: #f9f9f9; color: var(--dark-color); border-top-color: var(--dark-color);}
.table-wrap th:first-child, .table-wrap td:first-child {border-left: 0;}
.table-wrap th:last-child, .table-wrap td:last-child {border-right: 0;}
.table-wrap li:not(:last-child) {margin-bottom: var(--space-15);}
.btn-download {position: relative; display: block; width: 48px; height: 48px; margin: 0 auto; border-radius: 100%; border: 1px solid #ddd; background: #fff;}
.btn-download:after {content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 18px; height: 18px; background: url('/images/bbs/file-download.png') no-repeat center center / contain; filter: invert(1);}
.btn-download:hover {background: var(--primary-color); border-color: var(--primary-color);}
.btn-download:hover::after {filter: none;}
.sec-related .page-product-list {margin-bottom: var(--space-75);}

/* project view */
.sec-view-slide {overflow: hidden; text-align: center;}
.project-slide-items {max-width: 1100px; margin: 0 auto;}
.project-slide-item {text-align: center;}
.project-slide-items .slick-list {overflow: visible;}
.project-slide-items .slick-slide {padding: 0 var(--space-40); opacity: .3;}
.project-slide-items .slick-slide.slick-current {opacity: 1;}
.project-slide-arrow {position: absolute; display: flex; align-items: flex-end; gap: 20px; bottom: 0; padding: var(--space-35) var(--space-40); border: 0; background: unset; color: #fff; font-family: 'myriad-pro', sans-serif; z-index: 5; line-height: 1em;}
.project-slide-arrow.slide-prev {left: var(--space-40);}
.project-slide-arrow.slide-next {right: var(--space-40);}
.project-slide-arrow.slide-prev:before, .project-slide-arrow.slide-next:after {content: ''; display: block; width: 35px; height: 11px; background: url('/images/sub/slide-arrow.png') no-repeat bottom center / contain;}
.project-slide-arrow.slide-next:after {transform: scaleX(-1);}

.tit-tag {margin-bottom: var(--space-15); font-size: var(--font-size-24); font-family: 'myriad-pro', sans-serif; font-weight: 600; color: var(--primary-color);}
.page-project-view section {padding: var(--space-100) 0;}
.page-project-view .sec-tit {margin-bottom: var(--space-55);}
.page-project-view h2 {font-size: var(--font-size-32); color: var(--dark-color);}
.page-project-view .sec-view-slide {padding: 0;}
.page-project-view .sec-related {background: #f9f9f9;}
.related-list ul {display: flex; flex-wrap: wrap; gap: 15px 0; margin: calc(var(--space-20) * -1); margin-bottom: var(--space-50);}
.related-list li {width: 25%; padding: var(--space-20);}
.related-list .product-thumb:after {position: absolute; content:''; top: 0; right: 0;bottom: 0; left: 0; border: 1px solid #ddd; }
.related-tit {margin-top: var(--space-25); font-family: 'myriad-pro', sans-serif; font-weight: 700; color: var(--dark-color);}

/* the brand */
#contArea.one-page-container {position: relative; max-width: 100%; padding: 0;}
#contArea.one-page-container section .contain{display: flex; gap: var(--left-gap); max-width: 1860px;}
.one-page section {padding: var(--space-100) 0;}
.one-page section:first-child {padding-top: 0;}
.one-page-nav {z-index: 100; position: sticky; top: calc(var(--header-height) + var(--lnb-height)); left: 100%; width: fit-content; height: 0; padding-right: var(--container-space); text-align: right; color: #878787; font-family: 'myriad-pro', sans-serif; font-size: var(--font-size-16); line-height: 1.5em;}
.one-page-nav li {display: flex; align-items: center; justify-content: flex-end; gap: 10px; width: fit-content; margin-left: auto;}
.one-page-nav li.active {font-weight: 700; color: var(--dark-color); font-size: var(--font-size-18);}
.one-page-nav li:after {content:''; display: block; width: 6px; height: 6px; background: #878787;}
.one-page-nav li.active:after {background: var(--primary-color);}
.one-page-nav li:not(:last-child) {margin-bottom: var(--space-30);}
.one-page-cnt {max-width: 1200px; flex:1;}
.one-page-tag {position: relative; margin-bottom: var(--space-30); padding-left: clamp(40px, calc(120 / var(--inner) * 100vw), 120px); font-size: var(--font-size-20); font-weight: 700; color: var(--primary-color);}
.one-page-tag:before {content:''; display: block; width: clamp(30px, calc(100 / var(--inner) * 100vw), 100px); height: 1px; background: var(--primary-color); position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
.one-page-tit {margin-bottom: var(--space-75);}
.one-page-tit h3 {margin-bottom: var(--space-40); font-size: var(--font-size-56); font-weight: 300; line-height: 1.25em; color: var(--dark-color);}
.one-page-tit p {line-height: 1.8889em;}
[lang="ko"] .one-page-tit p{letter-spacing: -0.06em;}

.logo-img {text-align:center; margin-bottom: var(--space-40);}
.logo-img img {height: clamp(100px, calc(200 / var(--inner) * 100vw), 200px);}
.logo-mean {margin: var(--space-35) 0 var(--space-55);}
.logo-mean .wrap { gap: var(--space-30); text-align: left; font-size: var(--font-size-32); font-weight: 600; color: var(--primary-color); line-height: 1.2em;}
.logo-mean .wrap .group:first-child {text-align: right;}
.logo-mean .group strong {display: block; margin-bottom: var(--space-15); font-size: var(--font-size-64); font-weight: 600; line-height: 1em; color: var(--dark-color);}
/* .logo-mean .wrap ~ p {margin: var(--space-35) 0 var(--space-55);} */

#export {background: url('/images/sub/bg-brand-innovation.jpg') no-repeat center top / cover; line-height: 1.8889em;}
#export .group:not(:last-child) {margin-bottom: var(--space-150);}

#enterprise { line-height: 1.8889em;}
#enterprise .group:not(:last-child) {margin-bottom: var(--space-150);}
.innovation-map {position: relative; margin-top: 30px;}
.map-pointer {position: absolute; right: 14%; top: 44%; width: 48px; height: 48px; transform: translate(-50%, -50%);}
.map-pointer:before, .map-pointer:after {position: absolute; content:''; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; background: var(--primary-color); border-radius: 100%; animation: pointer-move 2s linear infinite forwards;}
.map-pointer:after {animation-delay: .4s;}
.map-pointer span {position: relative; z-index:1; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 100%; background: var(--primary-color);}
.map-pointer span img {width: 24px;}

@keyframes pointer-move {
	0% {transform: translate(-50%, -50%) scale(1); opacity: .5;}
	100% {transform: translate(-50%, -50%) scale(1.5); opacity: 0;}
}

#partner .group {display: flex; gap: var(--space-60); align-items: flex-end;}
#partner .group .img {width: 50%;}
#partner .group.st2 {flex-direction: column; align-items: flex-start;}
#partner .group:not(:last-child) {margin-bottom: 40px;}
#partner .group .txt {flex:1; color: var(--dark-color); font-size: var(--font-size-20); line-height: 1.6em;}
#partner h4 {margin-bottom: var(--space-30); font-weight: 500; font-size: var(--font-size-32); line-height: 1.375em;}
#partner .group.st2 .img {width: 100%;}
#partner .group.st2 .txt {display: flex; gap: var(--space-60); width: 100%;}
#partner .group.st2 h4 {width: 50%;}
#partner .group.st2 .btn-list {margin-left: 0;}
.sec-client {overflow: hidden;}
.client-slider {width: 290px;}
.client-slider .slick-list {overflow: visible;}
.client-slider .slick-slide {padding: 0 20px;}
.client-slider img {width: 100%;}

#company .group:not(:last-child) {margin-bottom: var(--space-100);}
#company .txt {margin-top: var(--space-35); line-height: 1.8889em;}
#company h4 {margin-bottom:10px; font-size: var(--font-size-24); font-weight: 600; color: var(--dark-color);}

.history-tit {margin-bottom: var(--space-75); font-size: var(--font-size-24); line-height: 1.3em;}
.history-tit h4 {margin-bottom: 10px; font-weight: 500; color: var(--dark-color); font-size: var(--font-size-32); line-height: 1.3em;}
.histroy-list {display: flex; gap:var(--space-40) 40px}
.histroy-list .wrap {flex:1;}
.history-item {display: flex; line-height: 1.6em;}
.history-item:not(:last-child) {margin-bottom: var(--space-40);}
.history-year {display: flex; align-items: center; justify-content: space-between; min-width: 75px; height: fit-content; margin-right: 20px; font-size: var(--font-size-24); font-weight: 600; color: var(--primary-color); font-family: 'myriad-pro', sans-serif;}
.history-year:after {content:''; display: block; min-width: 10px; height: 10px; border: 2px solid var(--primary-color); border-radius: 100%;}
.history-item>ul>li:not(:last-child) {margin-bottom:10px;}
.history-item>ul>li {display: flex; gap: 5px;}
.tab-cnt-group:not(:last-child) {margin-bottom: var(--space-150);}
.concept-item {display: flex; gap: 20px var(--space-100); align-items: center;}
.concept-item:not(:last-child) {margin-bottom: var(--space-40); padding-bottom: var(--space-40); border-bottom: 1px solid var(--dark-color);}
.concept-item .txt {flex:1;}
.three-ci-items {display: flex; gap: var(--space-20);}
.three-ci-items .item {flex:1;}
.slogan-tit {margin-bottom: var(--space-75); border: 1px solid #ddd; padding: var(--space-55) 20px; text-align: center; font-size: var(--font-size-24); line-height: 1.5em;}
.slogan-tit strong {display: block; font-weight: 500; font-size: var(--font-size-32); line-height: 1.3em; color: var(--dark-color);}
.slogan-tit h4 {font-size: clamp(30px, calc(100 / var(--inner) * 100vw), 100px); font-weight: 600; line-height: 1em; color: var(--third-color); font-family: 'myriad-pro', sans-serif;}
.slogan-item {display: flex;}
.slogan-item:not(:last-child) {margin-bottom: var(--space-75);}
.slogan-item h5 {min-width: 350px; font-size: var(--font-size-56); font-weight: 600; color: var(--dark-color); font-family: 'myriad-pro', sans-serif;}
.slogan-txt {flex:1;}
.slogan-txt h6 {margin-bottom: var(--space-15); font-size: var(--font-size-24); font-weight: 600; color: var(--dark-color); line-height: 1.3em;}
#technology {background: #f7f7f7 url('/images/sub/bg-technology.jpg') no-repeat right bottom / cover;}
.cert-status>ul {display: flex; gap: var(--space-75) 0; flex-wrap: wrap; margin: 0 calc(var(--space-40) * -1);}
.cert-status>ul>li {width: 50%; padding: 0 var(--space-40);}
.cert-status h4 {padding-bottom: 10px; margin-bottom: var(--space-25); font-size: var(--font-size-24); font-weight: 600; color: var(--primary-color); border-bottom: 1px solid var(--primary-color); line-height: 1.5em;}
.cert-item li {position: relative; padding-left: 20px;}
.cert-item li:before {position: absolute; left: 0; top: 12px; content: ''; display: block; width: 6px; height: 6px; border-radius: 100%; background: #ccc;}

.one-page-tag.flex-mid {gap: 30px;}
.btn-ci-download {display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 30px; border: 1px solid #ddd; border-radius: 25px; font-size: 16px; color: var(--dark-color); font-weight: 500;}
.btn-ci-download:after {content: ''; display: block; width: 18px; height: 15px; background: url('/images/sub/ci-download.png') no-repeat center center; background-size: contain;}
.btn-ci-download:hover {background: #505050; color: #fff;}
.btn-ci-download:hover:after {filter: brightness(50)}