@charset "utf-8";

/* **************************************** *
 * SUB set
* @description 서브 비주얼 및 기본 레이아웃 세팅입니다.
 * **************************************** */

/* Sub title  */
#page-title {margin-bottom: 40rem; font-weight: 700; color: var(--b-01);}

/* SUB VISUAL */
#sub-visual{position:relative;height:100vh;}
#sub-visual .wrap-wide {display: flex; justify-content: center; align-items: center; height: 100%;}
.sub-visual__inner {text-align: center;}
#sub-visual h2 {color: var(--w); line-height: 1.3;}

.sub-visual__bg{position:absolute;top:0;left:0;width:100%;height:100%;background:#000;overflow: hidden;}
.sub-visual__bg > i{position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:50% 50%;transition:var(--trans-01);background-repeat:no-repeat;opacity: 1 !important;}

body.sub01_01 #sub-visual::after {position: absolute; left:0; bottom:0; content:''; width: 100%; height: 30%; background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #000 100%);}
body.sub01_01 .sub-visual__bg > i{background-image:url(../img/sub/sub-visual01.jpg);}
body.sub01_02 .sub-visual__bg > i{background-image:url(../img/sub/sub-visual02.jpg);}
body.sub01_03 .sub-visual__bg > i{background-image:url(../img/sub/sub-visual03.jpg);}
body.sub01_04 .sub-visual__bg > i{background-image:url(../img/sub/sub-visual04.jpg);}
body.sub01_05 .sub-visual__bg > i{background-image:url(../img/sub/sub-visual05.jpg);}
body[class^="sub02_"] .sub-visual__bg > i{background-image:url(../img/sub/sub-visual06.jpg);}
body.sub02_03 .sub-visual__bg > i{background-image:url(../img/sub/sub-visual11.jpg);}
body.sub02_04 .sub-visual__bg > i{background-image:url(../img/sub/sub-visual12.jpg);}
body.sub04_01 .sub-visual__bg > i{background-image:url(../img/sub/sub-visual13.jpg);}
body.sub04_02 .sub-visual__bg > i{background-image:url(../img/sub/sub-visual14.jpg);}
body.sub04_03 .sub-visual__bg > i{background-image:url(../img/sub/sub-visual15.jpg);}
body.sub04_04 .sub-visual__bg > i{background-image:url(../img/sub/sub-visual16.jpg);}
body.sub06_01 .sub-visual__bg > i{background-image:url(../img/sub/sub-visual18.jpg);}

/* board visual set */
/* 생성한 게시판 테이블 명 입력 */
/* 다국어시 세팅하면서 _en 붙이는 습관 들이기 */
body:is(.gallery, .gallery_en) .sub-visual__bg > i{background-image:url(../img/sub/sub-visual17.jpg);}

/* lnb */
#lnb {opacity: 1; position: fixed; width: 100%;bottom: 50rem;z-index: 10;}
#lnb .select-link{width: auto; padding: 25rem 35rem 25rem 40rem;}
#lnb .select-link:first-child::after {position: absolute; top: 50%; right: 0; content:''; width: 1px; height: 22rem; background: var(--op-w20); transform: translateY(-50%);}
#lnb .select-link > ul {-webkit-backdrop-filter: blur(7.5rem);backdrop-filter: blur(7.5rem); left: 0; bottom: 75rem; padding: 15rem 40rem; border-radius: 20rem;}
#lnb .select-link > ul li:not(:last-child) {border-bottom: 1px solid var(--op-w10);}
#lnb .depth1 .sub-menu,
#lnb .select-link__btn{display:none;}

#lnb.lnb-select .select-link__btn{display:flex; align-items:center; min-width: 165rem; color:#fff;padding-right: 40rem;}
#lnb.lnb-select .select-link__btn::after{content:"";position:absolute;right:0;width:14rem;height:14rem;background-size: contain;background-position:50% 50%;background-image:url(../img/common/arrow-basic_w.svg);background-repeat:no-repeat;border-radius:100%;transform: rotate(90deg);}
#lnb.lnb-select .select-link__btn.on::after{transform: rotate(270deg);}
#lnb.lnb-select .select-link > ul a {padding: 10rem 0;}
#lnb.none-select .select-link__btn{pointer-events:none; cursor:text;}
#lnb.none-select .select-link__btn::after{opacity:0;}
#lnb.lnb-select .select-link .depth1 + .select-link__btn {display: none;}

#lnb:not(.lnb-select) .select-link:has(.depth1){display:none; height:100rem; background:#000;}
#lnb:not(.lnb-select) .select-link > ul{opacity:1;visibility:visible;padding:0 0;background:none;flex-direction:row;flex-wrap:nowrap;flex-wrap: wrap;position: relative;}
#lnb:not(.lnb-select) .select-link > ul a{padding:0;font-size: 18rem;margin-right: 30rem; opacity: 0.5;}
#lnb:not(.lnb-select) .select-link > ul > li.on > a{opacity: 1;}
#lnb:not(.lnb-select) .select-link > ul a:hover{opacity:1;}
/*#lnb:not(.lnb-select) .select-link > ul a.on{opacity: 1;} 위의 소스 3차까지 먹이기 체크필요 */ 
#lnb:not(.lnb-select) .select-link > ul > li{width: auto;}
#lnb:not(.lnb-select):not(:has(li:nth-child(2))){display: none;} /* 2차가 하나일때 lnb 숨기기 */

#lnb.lnb-select:has(.select-link:nth-child(2)){display:flex;align-items: center;}
/* #lnb.lnb-select .select-link + .select-link:has(.depth2){margin-left:20rem;} */
#lnb .lnb-inner{-webkit-backdrop-filter: blur(7.5rem);backdrop-filter: blur(7.5rem); display:inline-flex; margin: 0 auto; border-radius:50rem; border: 1px solid var(--op-w10); background: var(--op-w20); box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.05); transition: background .3s;}

a.lnb-home{display:block; width:15rem; margin-right:20rem; background:url(../img/common/ic-nav-home_w.svg) no-repeat 50% 50%; font-size:0; min-height:100%;}

#lnb.fixed,
#lnb.fixed.active {opacity: 1; top: auto; bottom: 50rem;}
#lnb.active {opacity: 0; transition: .4s;}
#lnb.active .lnb-inner {background: var(--c-01); border-color: transparent;}

/* sub nav */
#sub-nav{display: flex; align-items: center; justify-content: center; margin-bottom: 30rem;}
#sub-nav > *{position: relative; text-transform: uppercase;}
#sub-nav > *:last-child::after{display: none;}
#sub-nav .sub-home{display: block;width: 19rem;height: 19rem; margin-top: 1px; background:url(../img/common/ic-nav-home_w.svg) no-repeat center / contain;}
#sub-nav span{color: var(--w); font-weight: 600; display: block; text-align: left;}
#sub-nav > i {position: relative; display:block; width: 12rem; height: 12rem; margin: 0 12rem;}
#sub-nav > i::after {position: absolute; left: 50%; top: 50%; content:''; width: 6rem; height: 6rem; border:solid var(--op-w30); border-width: 0 2rem 2rem 0; transform: translate(-50%, -50%) rotate(-45deg);}

#sub-nav:has(.depth02:empty) .depth01::after{display: none;}
body:has(#sub-nav span:empty) #sub-nav .depth01 ~ i{display: none;}

/* snb */
#snb{display:flex;align-items:center;}
#snb li.on a{opacity:1;}
#snb li a{display:flex;justify-content:center;align-items:center;height: 50rem;box-sizing:border-box;border: 1px solid var(--g-01);font-size:18rem;font-size:var(--font-18);transition:var(--trans-01);padding: 0rem 30rem;}
#snb li:not(:last-child) a{border-right:0;}
#snb li.on a{background:var(--c-01); color:#fff; border-color:var(--c-01);}
#snb-title{font-weight:400;}
#snb li:not(.on) a:hover{color: var(--g-02);}

@media (max-width:1200px){
	#sub-visual {height: 720rem;}
	#lnb .lnb-inner {background: var(--c-01); border-color: transparent;}
}


@media all and (max-width:1023px){
	#lnb .select-link {padding: 20rem 30rem;}
	#lnb .select-link > ul {padding: 15rem 30rem;}

	body.sub02_03 .sub-visual__bg > i {background-position: right 40% center;}
}

@media (max-width: 860px){
	#page-title {margin-bottom: 30rem;}
}

@media (max-width: 540px){
	#page-title {margin-bottom: 22rem;}

	#sub-visual{height:430rem;}
	#sub-visual h2{font-size: 30rem; word-break: keep-all;}
	#sub-visual h2 br {display: none;}
	.sub-visual__inner{margin-top: 20rem;}
	.sub-visual__title:has(.title-ko.none) .title-ko{display:block !important; margin-top:5rem; font-weight:700 !important; font-size:18rem !important;}

	body.sub02_03 .sub-visual__bg > i {background-position: right 30% center;}

	#sub-nav {margin-bottom: 20rem;}
	#sub-nav span{font-size:13rem;}
	#sub-nav .sub-home {width: 15rem; height: 15rem;}
	#sub-nav > i{margin: 0rem 7rem;}

	#lnb {bottom: 20rem;}
	#lnb.fixed,
	#lnb.fixed.active {bottom: 20rem;}
	#lnb .select-link > ul {bottom: 60rem;}
	#lnb.lnb-select .select-link {padding:15rem 25rem;}
	#lnb.lnb-select .select-link__btn{font-size:17rem;}
	#lnb .select-link:has(.depth1){display:none;}
	#lnb .select-link:has(.depth2){margin-left:0;}
	#lnb.lnb-select:not(:has(li:nth-child(2))){display: none;}
	#lnb.lnb-select .select-link:nth-child(2){margin-left:0;}
	#lnb .lnb-inner{display:block;margin:0;width:100%; box-sizing:border-box;}
	#lnb.lnb-select{width:calc(100% - 40rem);box-sizing:border-box;margin:0 20rem;transform:none !important;}
	/* #lnb.lnb-select:has(li:nth-child(2)){display:block;}	 */
	#lnb.lnb-select .select-link + .select-link:has(.depth2){margin-left:0;}
	#lnb.lnb-select .select-link{width:100%; box-sizing:border-box; margin-left:0;}
	#lnb.lnb-select .select-link__btn{padding:0rem;font-size: 14rem;}
	#lnb.lnb-select  .select-link__btn::after{right:-5rem; background-color:inherit;}
	#lnb .select-link > ul{margin-top:15rem; padding:10rem 25rem;}
	#lnb .select-link > ul a{font-weight:200;font-size:14rem;}

	#lnb:not(.lnb-select) .select-destroy li a{white-space:nowrap;}
	#lnb:not(.lnb-select) {width:100% !important; margin:0 !important; background:none;}
	#lnb:not(.lnb-select) .select-destroy{padding-left:20rem; overflow-x:scroll;}
	#lnb:not(.lnb-select) .select-destroy li:last-child{padding-right:40rem;}
	#lnb:not(.lnb-select) .select-destroy li a{opacity:0.5; color:#fff;}
	#lnb:not(.lnb-select) .select-destroy li.on a{opacity:1;}
	#lnb:not(.lnb-select) .select-destroy li + li{margin-left: 10rem;}
	#lnb:has(.select-destroy):not(.lnb-select) .select-link__btn::after{display:none;}
}

/* **************************************** *
 * SUB layout
* @description 서브단에서만 달라지는 header, footer 정의
 * **************************************** */
 body:has(.about-page){background: #000;}
 #container:has(.about-page) + #footer {backdrop-filter: blur(17rem); -webkit-backdrop-filter: blur(17rem); background: rgba(195, 195, 195, 0.18);}
 #container:has(.about-page) + #footer .footer-info__detail dl:nth-child(1) dd {color: var(--w);}
 #container:has(.about-page) + #footer .footer-info__detail dl:not(:nth-child(1)),
 #container:has(.about-page) + #footer .footer-privacy__list a,
 #container:has(.about-page) + #footer .footer-copyright {color: var(--op-w30);}
 #container:has(.about-page) + #footer .footer-privacy {border-top: 1px solid rgba(255, 255, 255, .08);}
 #container:has(.about-page) + #footer .footer-privacy__list li + li::before {background: var(--op-w20);}
#header{}
#footer{}

@media (max-width:1200px){

}
@media all and (max-width:1023px){

}

@media (max-width: 540px){

}

/* **************************************** *
 * SUB common
 * **************************************** */
.sub-content{position:relative; padding: var(--gap140) 0 var(--gap200); color: var(--b-01);}
.sub-content:has(.about-page) {padding-top: 0 !important;}
.sub-content:has(.research-page, .product-detail-page){padding: 0 !important;}

.item-thumb {position: relative; background: var(--bg-03);}
.item-thumb:not(:has(img))::after {opacity: .2; filter: grayscale(1); -webkit-filter: grayscale(1); position: absolute; left: 50%; top: 50%; content:''; width: 50%; aspect-ratio: 16/3; background: url(../img/layout/logo.svg) no-repeat center / contain; transform: translate(-50%, -50%);}

[data-list="dot"] > *::before {top: 9rem; background: var(--c-01);}

@media all and (max-width:1023px){

}

@media (max-width: 860px){
}

@media (max-width: 540px){
	.sub-content {padding: 60rem 0;}
	.sub-content:has(.research-page) {padding-top: 60rem !important;}

	.item-thumb:not(:has(img))::after {width: 40%;}

}

/* **************************************** *
 * SITE CUSTOM
 * **************************************** */

/* 회사소개 */
#content:has(.about-page) > #sub-visual {display: none !important;}

.about-title {position: absolute;display: flex;justify-content: center;align-items: center;gap: 0;height: 100vh;transition: var(--trans-01);left: 0;top: 0;width: 100%;}
.about-title h3 {gap: 460rem;}
.about-title h3 p:first-child {text-align: right;}
.about-title h3 p {letter-spacing: -3px;opacity: 0;}
.about-title__bg {position: absolute; left:0; top:0; width: 100%; height: 100vh; transform: translateY(-100%);}
.about-title__bg figure {margin: auto;}
.about-top {padding-top: 90rem;}
.about-top > img,
.about-top__con {width: calc((100% - 168rem)/2);}
.about-top__con img {height: 28rem;} 
.about-top__con h4 {margin-top: 63rem; margin-bottom: 56rem;}
.about-bottom {margin-top: 190rem;}
.about-bottom::before {filter: grayscale(1); -webkit-filter: grayscale(1); position: absolute; right: -20vw; bottom:-14vw; content:''; width: 55vw; height: 48vw; background: url(../img/sub/company-bg.png) no-repeat center / contain;}
.about-bottom p {display: block; margin-bottom: 32rem; font-weight: 300;}
.about-bottom p strong {font-weight: 700; color: var(--c-01); }
.about-bottom h6 {font-weight: 600;}
#content:has(.about-page) .sub-visual__bg {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 100vh;
}
.about-page .sub-visual__title{opacity:1;}


@media (min-width:1023px){
	.about-page .sub-visual__title{transition:none;}	
}


@media (max-width:1600px){
	.about-title h3 p {font-size: 70rem;}
}

@media (max-width:1480px){
	.about-title h3 p {font-size: 60rem;}
}

@media (max-width:1200px){
	.about-title h3 p {font-size: 50rem;}
	.about-top > img,
	.about-top__con {width: calc((100% - 120rem)/2);}
	#content:has(.about-page) #sub-visual { height: 100vh;}
}

@media all and (max-width:1023px){
	#content:has(.about-page) #sub-visual { height: 720rem;}
	#content:has(.about-page) .sub-visual__bg {
		width: 100vw;
		height: 100%;
		left: auto;
		top: auto;
		transform: none;
	}

	.about-title {height: auto; padding: var(--gap200) 0 var(--gap140);}
	.about-title h3 {flex-direction: column; gap: 0;}
	.about-title h3 p {margin:5rem 0; letter-spacing: 0; font-size: var(--font-75);}
	.about-top {flex-direction: column; justify-content: center; align-items: center; text-align: center;}
	.about-top > img {width:40%;}
	.about-top__con {width: 100%;}
	.about-top__con img {display: none;}
	.about-top__con h4 {margin-top: var(--gap140); margin-bottom: 30rem;}
	.about-top__con p br:nth-child(1),
	.about-top__con p br:nth-child(3) {display: none;}
	.about-bottom {margin-top: var(--gap80); padding-top: var(--gap80); border-top: 1px solid var(--op-w10);}
}

@media (max-width: 860px){
	.about-top > img {width: 50%;}
	.about-bottom::before {right: -15vw; bottom: -29vw; width: 70vw; height: 60vw;}
}

@media (max-width: 540px){
	.about-top .font-h7 {font-weight: 400;}
	.about-top .font-h7 br {display: none;}
	.about-bottom {margin-top: 60rem; padding-top: 60rem; word-break: keep-all; text-align: center;}
	.about-bottom::before {display: none;}
	.about-bottom br {display: none;}
	.about-bottom p {margin-bottom: 20rem}
	#content:has(.about-page) #sub-visual { height: 430rem;}
}

/* 인증특허 */
.patent-page .certify-list {gap: 60rem 42rem; margin-bottom: var(--gap140);}
.patent-page .certify-item figure {overflow: hidden; border-radius: 10rem; border: 1px solid var(--op-b10);}
.patent-page .certify-item img {width: 100%; margin: 0;}
.patent-page .certify-item strong {margin-top: 18rem; font-size:var(--font-19); line-height: 1.63; font-weight: 600; color: var(--b-01);}
#layer-src img {border-radius: 10rem !important;}

@media all and (max-width:1023px){
	.patent-page .certify-list {gap: 60rem 32rem;}
}

@media (max-width: 540px){
	.patent-page .certify-list {grid-template-columns: 1fr; gap: 32rem;}
	.patent-page .certify-item strong {margin-top: 12rem;}
}

/* 연혁 */
.history-page {position: relative;}
.history-page #page-title {margin-bottom: 0;}
.history-visual {opacity: 1 !important; position: absolute; left:0; top:0; width: 100%; height: 100%; padding: 0 45rem; transition: var(--trans-01);}
.history-visual__inr {position: sticky; top: 45rem; display: flex; flex-direction: column; justify-content: space-between; width: 100%; height: calc(100vh - 90rem); padding: 75rem; border-radius: 10rem; background: url(../img/sub/history01.jpg) no-repeat center / cover;}
.history-sect__inr {opacity: 0; position: relative; width: 50%; margin-left: auto; padding-left: 65rem; transform: translateY(100%);}
.history-item {padding: 40rem 0;}
.history-item:not(:last-child) {border-bottom: 1px solid var(--op-b10);}
.history-item .font-h4 {display: block; margin-bottom: 12rem; font-weight: 700;}
.history-desc > li {display: flex;}
.history-desc > li:not(:last-child) {margin-bottom: 10rem;}
.history-desc em {font-size: var(--font-19); font-weight: 700; min-width: 25rem; margin-right: 35rem;}
.history-desc [data-list] li {font-family: var(--lang-ko);}

@media (max-width:1480px){
	.history-visual {width: 50%; padding-right: 0;}
	.history-sect__inr {padding-left: 100rem;}
}

@media all and (max-width:1023px){
	.history-visual {position: relative; width: 100%; padding: 0;}
	.history-visual__inr {width: auto; height: auto; margin: 0 40rem; padding: 40rem;}
	.history-visual__inr h3 {margin-bottom: 50rem;}
	.history-sect__inr {opacity: 1; width: 100%; padding-left: 0; transform: translateY(0);}
	.history-sect__inr #page-title {display: none;}
	.history-desc > li:not(:last-child) {margin-bottom: 10rem;}
}

@media (max-width: 540px){
	.history-visual__inr {overflow: hidden; margin: 0 20rem; padding:30rem 20rem;}
	.history-visual__inr::before {opacity: .3; position: absolute; left:0; top:0; content:''; width: 100%; height: 100%; background: #000;}
	.history-visual__inr * {position: relative;}
	.history-visual__inr p {font-size: 18rem;}
	.history-item {padding: 30rem 0;}
	.history-item .font-h4 {margin-bottom: 12rem;}
	.history-desc em {margin-right: 15rem;}
	.history-desc > li {display: flex; align-items: center;}
	.history-desc > li:has(ul li:nth-child(2)) {align-items: flex-start;}
	.history-desc > li:has(ul li:nth-child(2)) ul {padding-top: 0;}
}

/* 부설연구소 */
.research-top__inr {position: relative; height: 100vh;}
.research-top__bg {position: relative; width: 360rem; height: 470rem; margin: 0 auto;margin-top: 120rem; border-radius: 10rem; background: url(../img/sub/research-bg.jpg) no-repeat center / cover;}
.research-top__bg::before {opacity: 0; visibility: hidden; mix-blend-mode: multiply; position: absolute; left:0; top:0; content:''; width: 100%; height: 100%; background: rgba(0, 14, 54, .5); transition: var(--trans-01);}
.research-top__bg #page-title {position: absolute; top: -35rem; width: 100%; transform: translateY(-100%);}
.research-top__bg-cover {opacity: 0; mix-blend-mode: multiply; position: absolute; left:0; top:0; content:''; width: 100%; height: 100%; background: #000E36;}
.research-top__con {opacity: 0; visibility: hidden; z-index: 1; position: absolute; top: 50%; transform: translateY(-50%); transition: var(--trans-01);}
.research-top__con em#page-title {display: block; margin-bottom: 48rem; color: var(--c-01);}
.research-top__con h4 {margin-bottom: 48rem;}
.research-top__con p {font-weight: 500;}

.research-certify {padding: var(--gap140) 0 0;}
.research-certify h4 {margin-bottom: 40rem; text-align: center;}
.research-certify__list {gap: 20rem;}
.research-certify__item {padding: 42rem; border-radius: 10rem; border: 1px solid var(--op-b10);} 
.research-certify__item .item-thumb {overflow: hidden; aspect-ratio: 3/4; border-radius: 10rem;}
.research-certify__item p {display: block; margin: 28rem 0 20rem; color: var(--b-01);}
.research-certify__item [data-list="dot"] li {display: flex; color: var(--c-default);}
.research-certify__item li em {position: relative; min-width: 103rem; margin-right: 14rem; font-weight: 600;}
.research-certify__item li em::after {position: absolute; right: 0; top: 5rem; content:''; width: 1px; height: 17rem; background: var(--op-b10);}

.research-data h4 {margin-bottom: 30rem; text-align: left;}
.research-data table.table {border-top: 1px solid var(--op-b10);}
.research-data table.table thead th {padding: 13rem 10rem; font-weight: 600; color: var(--b-03); background: var(--bg-03);}
.research-data table.table tr {border-bottom: 1px solid var(--op-b10);}
.research-data table.table tr > *:not(:last-child) {border-right: 1px solid var(--op-b10);}
.research-data table.table tr td {padding: 19rem 10rem;}
.research-data h6 {justify-content: center; align-items: flex-start; margin-top: 50rem;}
.research-data h6 strong {padding-left: 12rem; padding-right: 5rem; font-weight: 700;}
.research-data h6 i {position: relative; width: 33rem; height: 27rem; margin-top: 5rem ;}
.research-data h6 i::after {position: absolute; left:0; top:0; content:''; width: 100%; height: 100%; background: url(../img/sub/research-talk.svg) no-repeat center / contain;}
.research-data h6 i:first-child {margin-right: 24rem;}
.research-data h6 i:last-child {margin-left: 21rem;}
.research-data h6 i:last-child::after {transform: scaleX(-1) scaleY(-1);}

.research-map {margin-top: var(--gap140); border-bottom: 1px solid var(--op-b10);}
.research-map .rolling-img__box span {opacity: .03; margin: 0 50rem; line-height: 1; font-size: 200rem; font-weight: 800; letter-spacing: -2px; text-transform: uppercase;}
.research-map__inr {overflow: hidden; position: relative; height: 626rem; margin-top: 35rem;}
.research-map__inr .map {position: absolute; left:0; top:0; width: 100%; height: 100%;}
.research-map__inr .map::after {z-index: 1; position: absolute; left:0; top:0; content:''; width: 100%; height: 100%;}
.research-map__inr .root_daum_roughmap {width: 100%; height: 100%;}
.research-map__inr .root_daum_roughmap .wrap_map {height: 100%;}
.research-map__inr .map_border {display: none;}

.research-map__box {z-index: 1; position: absolute; right: 10vw; top: 50%; display: inline-block; padding: 40rem 35rem 43rem; border-radius: 10rem; background: var(--bg-01); transform: translateY(-50%);}
.research-map__box h6 {margin-bottom: 18rem;}
.research-map__box ul {margin-top: 20rem; padding-top: 24rem; border-top: 1px solid var(--op-w10);}
.research-map__box ul em {display: block; margin-bottom: 6rem; font-size: 13rem; font-weight: 600; color: var(--op-w40);}
.research-map__box ul li + li {margin-top: 18rem;}
.research-map__box::before {opacity: .2; filter: grayscale(1); -webkit-filter: grayscale(1); position: absolute; right: 35rem; bottom: 40rem; content:''; width: 70rem; height: 50rem; background: url(../img/layout/logo.svg) no-repeat left center / cover;}
 
@media (max-width:1200px){
	.research-certify__list {grid-template-columns: repeat(2, 1fr);}
	.research-map .rolling-img__box span {font-size: 160rem;}
	.research-map__box {right: 60rem;}
}

@media all and (max-width:1023px){
	.research-top__con {padding: 0 40rem;}
	.research-top__con p br {display: none;}
	.research-top__con h4 {margin-bottom: 30rem;}
	.research-data h6 {margin-top: 40rem;}
	.research-map .rolling-img__box span {margin: 0 30rem; font-size: 100rem;}
}

@media (max-width: 860px){
	.research-certify__list {grid-template-columns: 1fr;}
	.research-data h6 {margin-top: 30rem;}
	.research-data h6 i {width: 25rem; height: 20rem;}
	.research-map .rolling-img__box span {font-size: 80rem;}
	.research-map__inr {height: auto;}
	.research-map__inr .hide, 
	.root_daum_roughmap .cont {display: none;}
	.research-map__inr .root_daum_roughmap .wrap_map {height: 500rem;}
	.research-map__box {position: relative; top: auto; right: auto; width: 100%; transform: none; border-radius: 0;}
	.research-map__box h6 {font-size: 23rem;}
}

@media (max-width: 540px){
	.research-top__inr {height: auto; flex-direction: column;}
	.research-top__bg {width: 100%; height: auto; margin-top: 0; background: none; border-radius: 0;}
	.research-top__bg #page-title {position: relative; top: auto; transform: none;}
	.research-top__con {opacity: 1; visibility: visible; position: relative; top: auto; padding: 60rem 20rem; transform: none; background: url(../img/sub/research-bg.jpg) no-repeat center / cover; word-break: keep-all;}
	.research-top__con::before {opacity: .5; position: absolute; left:0; top:0; content:''; width: 100%; height: 100%; background: #000E36;}
	.research-top__con h4 {margin-bottom: 20rem;}
	.research-top__con > * {position: relative;}
	.research-top__con em#page-title {display: none; margin-bottom: 25rem;}
	.research-top__con br {display: none;}
	.research-certify h4,
	.research-data h4 {margin-bottom: 22rem;}
	.research-certify__item {padding: 20rem;}
	.research-certify__item p {margin: 25rem 0 20rem;}
	.research-certify__item [data-list="dot"] li {flex-direction: column; margin-bottom: 15rem;}
	.research-certify__item li em {margin-right: 0; margin-bottom: 5rem;}
	.research-certify__item li em::after {display: none;}
	.research-data h6 {margin-top: 27rem;}
	.research-data h6 i {width: 16rem; height: 14rem;}
	.research-data h6 i:first-child {margin-right: 15rem;}
	.research-data h6 i:last-child{margin-left: 12rem;}
	.research-map .rolling-img__box span {margin: 0 20rem; font-size: 50rem;}
	.research-map__inr {margin-top: 20rem;}
	.research-map__inr .root_daum_roughmap .wrap_map {height: 300rem;}
	.research-map__box {padding: 40rem 20rem 120rem;}
	.research-map__box h6 {font-size: 18rem;}
	.research-map__box::before {bottom: 120rem;}
}

/* 조직도 */
.chart-page #page-title {margin-bottom: 50rem !important;}
.chart {display:flex;align-items:center;text-align:center;flex-direction:column;position: relative;}
.chart__company {display:flex; flex-direction: column; justify-content:center;align-items:center;position:relative;width:150rem;height:150rem;line-height:1.2; margin: 0 auto; margin-bottom: 42rem;background: linear-gradient(133deg, #00A0DF 15.05%, #0075C9 85.61%);color:var(--w);border-radius:100%;align-content:center;text-transform: uppercase;}
.chart__company strong {display: block; margin: 10rem 0 6rem; font-size: var(--font-30); font-weight: 800;}
.chart__company::before{content:""; position:absolute; z-index:-1; width:calc(100% + 30rem); height:calc(100% + 30rem); border-radius:100%; border: 1px dashed var(--c-01); animation: chart_rotate 30s linear infinite;}

.chart__company.small{width: 100rem; height: 100rem; font-size: var(--font-19); font-weight: 600; background: var(--c-01) !important;}
.chart__company.small::before{display: none;}

.chart-wrap {position:relative;width:100%;padding-top:22rem;}
.chart-wrap + .chart-wrap {margin-top: 42rem;}
/* .chart-wrap.executive .chart-line {width: calc(32% - 12rem);} */
.chart-wrap.executive .chart-line {width: 518rem;}
.chart-line {content:"";position:absolute;top:0;left:50%;width: calc(100% - var(--chart-width) - 2rem);height:1px;background:var(--op-b10);transform: translateX(-50%);}

.executive .chart-list {display:flex; gap: 0 248rem; justify-content: center;}
.executive .chart-list li {width: calc((100% - (42rem * 4))/5); color: var(--w); background: var(--bg-02); border-radius: 100rem;}
.executive .chart-list strong {line-height: 80rem;}

.chart-list {display:grid;grid-template-columns: repeat(5, 1fr);gap:42rem; align-items: flex-start;}
.chart-list li *{display:block;}
.chart-list > li {position:relative; border-radius: 35rem; border: 1px solid var(--op-b20); background:var(--w);}
.chart-list > li::before{content:""; position:absolute; top:-22rem; left:50%; z-index:-1; width:1px; height:22rem; background:var(--op-b10);}
.chart-list > li:nth-child(3)::before {display: none;}
.chart-list > li b {margin: 10rem 0 5rem; padding:17rem 10rem; color: var(--w); font-weight: 600; border-radius: 100rem; background: var(--c-default);}
.chart-list > li p {font-family: var(--lang-ko); color: var(--c-base);}
.chart-list > li:not(:has(p:nth-child(2))) p {line-height: 70rem;}
.chart-list > li:has(p:nth-child(2)) {padding:10rem 20rem;}
.chart-list > li:has(p:nth-child(2)) p {padding: 12rem 0;}
.chart-list > li:has(p:nth-child(2)) p + p {border-top: 1px solid var(--op-b20);}
.chart__title::after{content:"";position:absolute;top: 0;left:50%;z-index:-1;width:1px;height: 90%;background:var(--br-01);}

@keyframes chart_rotate {
	 0%{transform:rotate(0);}
    100%{transform:rotate(360deg);}   
}

@media (max-width:1600px){
	.chart-wrap.executive .chart-line {width: 34.8%;}
}

@media (max-width:1480px){
	.chart-wrap.executive .chart-line {width: calc(32% + 57rem);}
}

@media (max-width:1200px){
	.chart-wrap.executive .chart-line {width:calc(39% - -2rem)}
}
@media (max-width: 1024px){
    .chart-wrap.executive .chart-line {width: calc(39% + 35rem);}
}
@media (max-width: 860px){
	.executive .chart-list li {width: calc((100% - (20rem * 4))/5);}
	.chart__company {width: 200rem; height: 200rem;}
	.chart-wrap.executive .chart-line {width: 51%;}
	/* .chart-line {width: calc(100% - var(--chart-width) - 20rem);} */
	.chart-list {gap: 20rem;}
}

@media (max-width: 540px){
	.chart-page #page-title {margin-bottom: 40rem !important;}
	.chart-wrap + .chart-wrap {margin-top: 40rem;}
	.chart__company {width: 120rem; height: 120rem; margin-bottom: 40rem; font-size: 18rem;}
	.chart__company::before {width: calc(100% + 20rem); height: calc(100% + 20rem);}
    .chart__company.small{width: 80rem; height: 80rem;}
	.chart-wrap.executive .chart-line {width: 226rem;}
	.chart__title::after {top: 0;bottom: auto;height: 402rem;}
	.executive .chart-list {gap: 0 100rem;}
	.executive .chart-list li {width: 40%;}
	.executive .chart-list strong {line-height: 50rem;}
	.chart-list > li:has(p:nth-child(2)) {padding:10rem;}
	.chart-wrap {padding-top: 30rem;}
	.chart-line {width: calc(100% - var(--chart-width) - 32rem);}
	.chart-list {grid-template-columns: repeat(2, 1fr); gap:20rem 40rem;}
	.chart-list > li:nth-child(-n+2)::before {display: block;}
	.chart-list > li::before {display: none; height: 30rem; top: -30rem;}
	.chart-list > li b {margin: 0; padding:12rem 10rem;}
}

/* 제품 리스트 */
.product-list {gap: 42rem;}
.product-list li a {overflow: hidden; position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 600rem; padding: 50rem 40rem; color: var(--w); border-radius: 10rem; word-break: keep-all;}
.product-list .item-thumb {position: absolute; left:0; top:0; width: 100%; height: 100%;}
.product-list .item-thumb > img {transition: var(--trans-01);}
.product-list strong {position: relative; padding-right: 100rem;}
.product-list p {position: relative; margin-top: 10rem; padding-right: 100rem; color: var(--w);}
.product-list .btn {position: absolute; right: 40rem; bottom: 50rem;}

.product-list li a .item-thumb:not(:has(img))::after {top: 40%;}
.product-list li a .item-thumb:not(:has(img)) + strong {color: var(--b-01);}
.product-list li a .item-thumb:not(:has(img)) + strong + p {color: var(--c-default);}

@media (hover: hover) and (pointer: fine){
	.product-list li a:hover .item-thumb > img {transform: scale(1.15);}
}

@media (max-width:1200px){
	.product-list li a {height: 460rem; padding: 40rem 30rem;}
	.product-list li a br {display: none;}
	.product-list strong,
	.product-list p {padding-right: 80rem;}
	.product-list .btn {right: 30rem; bottom: 40rem; width: 50rem; height: 50rem;}
}

@media all and (max-width:1023px){
	.product-list {grid-template-columns: repeat(2, 1fr);}
	.product-list li a  {height: 520rem;}
}

@media (max-width: 860px){
	.product-list {gap: 20rem;}
	.product-list li a  {height: 450rem;}
}

@media (max-width:540px){
	.product-list {grid-template-columns: 1fr;}
	.product-list li a  {height: 270rem; padding: 30rem 22rem;}
	.product-list .btn {right: 22rem; bottom: 30rem; width: 44rem; height: 44rem;}
	.product-list li a .item-thumb:not(:has(img))::after {top: 32%;}
}

/* 제품 상세페이지 표부분 */
.product-page:not(:has(.product-list)) #page-title {margin-bottom: 12rem;}
.product-page:not(:has(.product-list)) #page-title + span {display: block; margin-bottom: 60rem; font-size: var(--font-20); font-weight: 600; color: var(--b-02);}
.product-page table.table {border-top: 1px solid #000;}
.product-page table.table * {vertical-align: middle;}
.product-page table.table tbody th {font-weight: 700; border: none; border-right: 1px solid var(--op-b10); border-bottom: 1px solid var(--op-b10); background: var(--bg-03);}
.product-page table.table tbody th span {display: block; margin-top: 8rem; font-size: var(--font-15); font-weight: 600; color: var(--b-02);}
.product-page table.table tbody td {padding: 14rem 30rem; text-align: center; border-bottom: 1px solid var(--op-b10);}
.product-page table.table tbody td[data-table] {text-align: left; color: var(--c-default); border-left: 1px solid var(--op-b10);}
.product-page table.table tbody td[data-table="name"] {color: var(--b-01);font-weight: 600;padding-top: 30rem;padding-bottom: 20rem;}
.product-page:not(:has(.product-list)) .btn-wrap {margin-top: 80rem; justify-content: center;}
.product-page .table-logo {margin-bottom: 15rem; max-width: 200rem;}
.product-page .table-logo img { width: 100%;}

@media (max-width:1200px){
	.product-page:not(:has(.product-list)) #page-title + span {margin-bottom: 50rem;}
	.product-page .table-logo {margin-bottom: 15rem; max-width: 150rem;}
}

@media (max-width: 860px){
	.product-page:not(:has(.product-list)) #page-title {margin-bottom: 10rem;}
	.product-page:not(:has(.product-list)) #page-title + span {margin-bottom: 40rem;}
	.product-page:not(:has(.product-list)) .btn-wrap {margin-top: 60rem;}
}

@media (max-width:540px){
	.product-page:not(:has(.product-list)) #page-title {margin-bottom: 7rem;}
	.product-page:not(:has(.product-list)) #page-title + span {margin-bottom: 30rem;}
	.product-page:not(:has(.product-list)) .btn-wrap {margin-top: 40rem;}
	.product-page table.table tbody th span {font-size: 11rem;}
	.product-page .table-logo {max-width: 120rem;}
	.product-page table.table tbody td {padding: 10rem 15rem;}
	.product-page table.table tbody td[data-table="name"] {padding-top: 20rem; padding-bottom: 20rem;}
}

/* 제품 상세페이지 공통 */
.product-detail-page .tab-anchor-wrap {flex-shrink: 0; position: relative; bottom: auto; width: 153rem; padding-top: var(--gap140); text-align: left; border-right: 1px solid var(--op-b10);}
.product-detail-page .tab-anchor {position: sticky; top: var(--gap140); left:0; display: block; padding: 0; background:transparent; box-shadow: none; border-radius: 0;}
.product-detail-page .tab-anchor li + li {margin-top: 6rem;}
.product-detail-page .tab-anchor li a {position: relative; padding: 5rem 0; font-size: var(--regualr); font-weight: 400; color: var(--b-03); transition: var(--trans-01);}
.product-detail-page .tab-anchor li a::before {opacity: 0; position: absolute; left:0; top: 50%; content:''; width: 6rem; height: 6rem; border-radius: 100%; background: var(--c-01); transform: translateY(-50%); transition: var(--trans-01);}
.product-detail-page .tab-anchor li a.on {padding-left: 16rem; font-weight: 700; color: var(--b-01); background: transparent;}
.product-detail-page .tab-anchor li a.on::before {opacity: 1;}
.product-detail-page .tab-cont {width: 100%; padding-top: var(--gap140); padding-left: 167rem; padding-bottom: var(--gap200);}
.product-detail__sec:nth-child(2) {margin-top: 0; border-top: 0;}
.product-detail__sec {margin-top: var(--gap100); padding-top: var(--gap100); border-top: 1px solid var(--op-b10);}
.product-detail__sec h5 {width: 100%; padding-right: 80rem;}
.product-detail__con {flex-shrink: 0; width: 64.4%;}
.product-detail-page .btn-wrap {margin-top: var(--gap80);}

@media (max-width:1600px){
	.product-detail__con {width: 75%;}
}

@media (max-width:1200px){
	.product-detail-page .tab-cont {padding-left: 100rem;}
	.product-detail__sec {flex-direction: column;}
	.product-detail__sec h5 {margin-bottom: 22rem; padding-right: 0;}
	.product-detail__con {width: 100%;}
}

@media all and (max-width:1023px){
	.product-detail-page .tab-anchor-wrap {width: 150rem;}
	.product-detail-page .tab-cont {padding-left: 60rem;}
	.product-detail__sec h5 {margin-bottom: 20rem;}
}

@media (max-width:860px){
	.product-detail-page .tab-anchor-wrap {display: none;}
	.product-detail-page .tab-cont {padding-left: 0;}
	.product-detail-page .btn-wrap {margin-top: 60rem; justify-content: center;}
}

@media (max-width:540px){
	.product-detail__sec {margin-top: 40rem; padding-top: 40rem;}
	.product-detail-page .btn-wrap {margin-top: 40rem;}
}

/* 연료첨가제 */
.fuel-intro {padding:  var(--gap100) 80rem; border-radius: 10rem; background:#0c0c0e url(../img/sub/fuel-hero.jpg) no-repeat left center / cover;}
.fuel-intro__inr {width: 50%; margin-left: auto;}
.fuel-intro__inr h4 {margin-bottom: 40rem;}
.fuel-intro__inr strong {display: block; margin-bottom: 15rem;}
.fuel-intro__inr p {font-weight: 300;}
.fuel-intro__inr p + p {margin-top: 12rem;}

.fuel-effect strong {display: block; margin-bottom: 12rem;}
.fuel-effect p {color: var(--b-01);}
.fuel-effect p + p {margin-top: 10rem;}
.fuel-effect__list {margin: 40rem 0; padding: 20rem; gap: 20rem; border-radius: 10rem; background: var(--bg-03);}
.fuel-effect__list li {overflow: hidden; border-radius: 5rem;}
.fuel-effect__list li img {width: 100%;}
.fuel-effect__compare {position: relative; gap: 20rem; text-align: center;}
.fuel-effect__compare strong {margin-bottom: 0; padding: 17rem 10rem 15rem; color: var(--w); border-radius: 10rem 10rem 0 0;}
.fuel-effect__compare figure {padding: 0 5rem 5rem 5rem; border-radius: 0 0 10rem 10rem;}
.fuel-effect__compare figure img {border-radius: 5rem;}
.fuel-effect__compare > div:nth-child(1) strong,
.fuel-effect__compare > div:nth-child(1) figure { background: #bbb;}
.fuel-effect__compare > div:nth-child(2) strong,
.fuel-effect__compare > div:nth-child(2) figure { background: var(--c-01);}
.fuel-effect__compare > p {position: absolute; left: 50%; top: 50%; width: 140rem; height: 140rem; margin-top: 30rem; padding-top: 12rem; line-height: 1.4; font-weight: 600; color: var(--w); border-radius: 100%; background: linear-gradient(133deg, #00A0DF 15.05%, #0075C9 85.61%); box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.50); transform: translate(-50%, -50%);}

.fuel-problem .product-detail__con {gap: 47rem;}
.fuel-problem .product-detail__con figure {flex-shrink: 0; width: 360rem; border-radius: 10rem; border: 1px solid var(--op-b10);}
.fuel-problem__list {width: 100%;}
.fuel-problem__item {position: relative;}
.fuel-problem__item .font-h7 {display: block; margin-bottom: 15rem;}
.fuel-problem__item li {padding: 17rem 10rem; color: var(--c-default); border-radius: 10rem;}
.fuel-problem__item li + li {margin-top: 6rem;}
.fuel-problem__item:nth-child(1) {margin-bottom: 50rem;}
.fuel-problem__item:nth-child(1)::before {position: absolute; left: 50%; bottom: -27rem; content:''; width: 25rem; height: 33rem; background: url(../img/sub/fuel-arrow_g.svg) no-repeat center / contain; transform: translateX(-50%);}
.fuel-problem__item:nth-child(1) li {background: var(--bg-03);}
.fuel-problem__item:nth-child(2) li {color: var(--w); background: var(--bg-02);}

.fuel-merit__list {gap: 20rem;} 
.fuel-merit__list li {display: flex; flex-direction: column; justify-content: center; align-items: center; aspect-ratio: 1/1; border-radius: 10rem; border: 1px solid var(--op-b10);}
.fuel-merit__list li p {margin-top: 27rem; font-weight: 600; color: var(--b-01);}
.fuel-merit__list li img {max-height: 60rem;}

.fuel-use__list {padding: 30rem; border-radius: 300rem; background: #F0F9FF;}
.fuel-use__item {flex-shrink: 0; width: 207rem; flex-direction: column; aspect-ratio: 1/1; border-radius: 100%; border: 2rem solid var(--c-01); background: var(--w);}
.fuel-use__item em {display: block; margin-bottom: 13rem; font-size: var(--font-15); font-weight: 700; color: var(--c-01);}
.fuel-use__item p {font-weight: 600; color: var(--b-01);}
.fuel-use__arrow img {width: 25rem;}

@media (max-width:1460px){
	.fuel-intro__inr p br,
	.fuel-effect p br {display: none;}
}

@media (max-width:1200px){
	.fuel-intro {overflow: hidden; position: relative; padding: var(--gap100) 60rem; background-size: 200%;}
	.fuel-intro::before {opacity: .6; position: absolute; lefT:0; top:0; content:''; width: 100%; height: 100%; background: #000;}
	.fuel-intro__inr {position: relative; width: 100%;}
	.fuel-effect__compare > p br {display: block;}
}

@media all and (max-width:1023px){
	.fuel-intro {padding: 80rem 50rem;}
	.fuel-intro__inr h4 {margin-bottom: 30rem;}
	.fuel-problem .product-detail__con figure {width: 100%; padding: 30rem;}
	.fuel-problem .product-detail__con figure img {width: 50%; margin: 0 auto;}
	.fuel-problem .product-detail__con {flex-direction: column;}
	.fuel-use__list {padding: 20rem;}
	.fuel-use__item {width: 200rem;}
	.fuel-use__arrow img {width: 18rem;}
}

@media (max-width:860px){
	.fuel-intro {padding: 80rem 40rem; word-break: keep-all;}
	.fuel-intro::before {opacity: .7;}
	.fuel-intro br {display: none;}
}

@media (max-width:540px){
	.fuel-intro {padding: 50rem 25rem; word-break: keep-all;}
	.fuel-intro::before {opacity: .7;}
	.fuel-intro br {display: none;}
	.fuel-intro__inr h4 {margin-bottom: 22rem;}
	.fuel-intro__inr strong {margin-bottom: 10rem;}
	.fuel-intro__inr p + p {margin-top: 10rem;}

	.fuel-effect__list,
	.fuel-effect__compare {grid-template-columns: 1fr;}
	.fuel-effect__compare {gap: 180rem;}
	.fuel-effect__compare strong {padding: 12rem 10rem;}
	.fuel-effect__compare > p {margin-top: 0; box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.1);}
	.fuel-problem .product-detail__con {gap: 30rem;}
	.fuel-merit__list {gap: 10rem;}
	.fuel-use .product-detail__con {text-align: center;}
	.fuel-use__list {display: inline-flex; flex-direction: column;}
	.fuel-use__arrow img {margin: 20rem; transform: rotate(90deg);}
}

/* 윤활유제조공정 */
.lubricant-intro {overflow: hidden; position: relative; padding:  var(--gap100) 80rem; background:#18120D url(../img/sub/lubricant-hero.jpg) no-repeat center left / cover; border-radius: 10rem;}
.lubricant-intro__inr {position: relative; width: 50%; margin-left: auto;}
.lubricant-intro ul {margin-top: 40rem;}
.lubricant-intro li + li {margin-top: 6rem;}
.lubricant-intro li span {padding: 6rem 17rem; display: inline-block; font-weight: 600; border-radius: 100rem; border: 1px solid var(--op-w10); background: var(--op-w20);}

.lubricant-solution .product-detail__con .font-h7 {display: block; margin-bottom: 15rem;}
.lubricant-solution .product-detail__con > p {font-weight: 400; color: var(--b-01);}
.lubricant-solution .product-detail__con > p + p {margin-top: 5rem;}
.lubricant-solution__list {margin-top: 32rem; gap: 10rem;}
.lubricant-solution__item {display: flex; flex-direction: column; justify-content: center; align-items: center; height: 356rem; border-radius: 10rem; background: var(--bg-03);}
.lubricant-solution__item i {display: flex; align-items: center; justify-content: center; width: 100rem; height: 100rem; margin-bottom: 23rem; border-radius: 100%; background: var(--w);}
.lubricant-solution__item em {display: block; margin-bottom: 7rem; font-size: 13rem; font-weight: 700; color: var(--c-01);}
.lubricant-solution__item p {color: var(--b-01);}

@media (max-width:1200px){
	.lubricant-intro::before {opacity: .7; position: absolute; lefT:0; top:0; content:''; width: 100%; height: 100%; background: #18120D;}
	.lubricant-intro__inr {width: 100%;}
}

@media all and (max-width:1023px){
	.lubricant-intro {padding: 80rem 50rem;}
	.lubricant-intro h4 {margin-bottom: 30rem;}
	.lubricant-solution br {display: none;}
	.lubricant-solution__item {height:300rem;}
	.lubricant-solution__item i {width: 80rem; height: 80rem;}
	.lubricant-solution__item i img {max-width: 60rem; max-height: 60rem;}
}

@media (max-width:860px){
	.lubricant-intro {padding: 80rem 40rem; word-break: keep-all;}
	.lubricant-intro::before {opacity: .7;}
	.lubricant-intro br {display: none;}
}

@media (max-width:540px){
	.lubricant-intro {padding: 50rem 25rem; word-break: keep-all;}
	.product-detail-page:has(.lubricant-intro) .product-detail__sec h5 {margin-bottom: 15rem;}
	.lubricant-solution .product-detail__con .font-h7 {margin-bottom: 8rem;}
	.lubricant-solution__list {grid-template-columns: repeat(2, 1fr);}
	.lubricant-solution__item {height: 230rem; padding: 20rem; text-align: center;}
	.lubricant-solution__item i {width: 60rem; height: 60rem; margin-bottom: 20rem;}
	.lubricant-solution__item i img {max-width: 40rem; max-height: 40rem;}
	.lubricant-solution__item p {line-height: 1.4;}
}


/* eco solution 공통 */
.esg-title .font-h6 {display: block; margin-bottom: 6rem;}
.esg-title p {color: var(--b-01);}
.esg-visual {overflow: hidden; position: relative; height: 300rem; margin: 92rem 0 var(--gap100); clip-path: rect(0 100% 100% 0 round 10rem);}
.esg-visual img {position: fixed; left: 50%; top: 50%; width: 100%; transform: translate(-50%, -50%);}
.esg-list h4 {margin-bottom: 14rem;}
.esg-list > p {color: var(--b-01);}
.esg-list ul {margin-top: 60rem; gap: 20rem;}
.esg-list__item {display: flex; flex-direction: column; justify-content: center; align-items: center; height: 360rem; padding: 20rem; border-radius: 10rem; background: var(--bg-03); transition: var(--trans-01);}
.esg-list__item i {width: 80rem; height: 80rem; margin-bottom: 20rem; background-repeat: no-repeat; background-position: center center; background-size: contain; transition: var(--trans-01);}
.esg-list__item strong {transition: var(--trans-01);}
.esg-list__txt {opacity: 0; height: 0; color: var(--w); word-break: keep-all; transition: all 0.5s .1s cubic-bezier(0.215, 0.61, 0.355, 1);}
.esg-list__txt p {color: var(--w); word-break: keep-all;}

@media (hover: hover) and (pointer: fine){
	.esg-list__item:hover {background: var(--c-01);}
	.esg-list__item:hover strong {color: var(--w);}
	.esg-list__item:hover .esg-list__txt {opacity: 1; height: auto;  margin-top: 7rem;}
}

.ethical-goal {margin-top: var(--gap140);}
.ethical-goal figure {overflow: hidden; width: 50%; border-radius: 10rem;}
.ethical-goal__inr {width: 50%; padding: 30rem 0; padding-left: 130rem;}
.ethical-goal__inr h4 {margin-bottom: 14rem;}
.ethical-goal__inr > p {color: var(--b-01);}
.ethical-goal__list {margin-top: 60rem;}
.ethical-goal__list li {padding: 35rem 0;}
.ethical-goal__list li .font-h7 {display: block; margin-bottom: 5rem;}
.ethical-goal__list li:first-child {padding-top: 0;}
.ethical-goal__list li:not(:first-child) {border-top: 1px solid var(--op-b10);}

@media (max-width:1400px){
	.ethical-goal__inr {padding-left: 100rem;}
}

@media (max-width:1200px){
	.esg-visual {margin-top: 70rem; margin-bottom: var(--gap80);}
	.esg-visual img {height: 100%; object-fit: cover;}
}

@media all and (max-width:1023px){
	.ethical-goal__inr {padding-left: 80rem;}
}

@media (max-width:860px){
	.esg-list ul {grid-template-columns: repeat(2, 1fr) !important;}
	.ethical-goal {flex-direction: column;}
	.ethical-goal figure,
	.ethical-goal__inr {width: 100%;}
	.ethical-goal__inr {padding-left: 0; margin-top: 30rem;}
	.ethical-goal__list {margin-top: 40rem;}
	.esg-list__item {height: auto; padding: 40rem 20rem;}
	.esg-list__item i {width: 65rem; height: 65rem; margin-bottom: 15rem;}
}

@media (max-width:540px){
	.esg-visual {margin-top: 40rem; margin-bottom: 40rem; height: 120rem;}
	.esg-list ul {margin-top: 40rem; gap: 10rem; grid-template-columns: 1fr !important;}
	.esg-list__txt {opacity: 1; height: auto; margin-top: 10rem;}
	.esg-list__txt p {color: var(--c-default)}
	.ethical-goal__inr {margin-top: 10rem;}
}

/* 윤리경영 */
.ethical-page .esg-list__item:nth-child(1) i {background-image: url(../img/sub/ethical-ic01.svg);}
.ethical-page .esg-list__item:nth-child(2) i {background-image: url(../img/sub/ethical-ic02.svg);}
.ethical-page .esg-list__item:nth-child(3) i {background-image: url(../img/sub/ethical-ic03.svg);}
.ethical-page .esg-list__item:nth-child(4) i {background-image: url(../img/sub/ethical-ic04.svg);}
.ethical-page .esg-list__item:nth-child(5) i {background-image: url(../img/sub/ethical-ic05.svg);}
.ethical-page .esg-list__txt p br {display: none;}

@media (hover: hover) and (pointer: fine){
	.ethical-page .esg-list__item:nth-child(1):hover i {background-image: url(../img/sub/ethical-ic01-on.svg);}
	.ethical-page .esg-list__item:nth-child(2):hover i {background-image: url(../img/sub/ethical-ic02-on.svg);}
	.ethical-page .esg-list__item:nth-child(3):hover i {background-image: url(../img/sub/ethical-ic03-on.svg);}
	.ethical-page .esg-list__item:nth-child(4):hover i {background-image: url(../img/sub/ethical-ic04-on.svg);}
	.ethical-page .esg-list__item:nth-child(5):hover i {background-image: url(../img/sub/ethical-ic05-on.svg);}
}

@media (max-width:1400px){
	.ethical-page .esg-list ul {grid-template-columns: repeat(3, 1fr);}
}

/* 품질경영 */
.quality-page .esg-list__item:nth-child(1) i {background-image: url(../img/sub/quality-ic01.svg);}
.quality-page .esg-list__item:nth-child(2) i {background-image: url(../img/sub/quality-ic02.svg);}
.quality-page .esg-list__item:nth-child(3) i {background-image: url(../img/sub/quality-ic03.svg);}
.quality-page .esg-list__item:nth-child(4) i {background-image: url(../img/sub/quality-ic04.svg);}

@media (hover: hover) and (pointer: fine){
	.quality-page .esg-list__item:nth-child(1):hover i {background-image: url(../img/sub/quality-ic04-on.svg);}
	.quality-page .esg-list__item:nth-child(2):hover i {background-image: url(../img/sub/quality-ic03-on.svg);}
	.quality-page .esg-list__item:nth-child(3):hover i {background-image: url(../img/sub/quality-ic02-on.svg);}
	.quality-page .esg-list__item:nth-child(4):hover i {background-image: url(../img/sub/quality-ic01-on.svg);}
}


/* 환경경영 */
.environmental-page .esg-list__item:nth-child(1) i {background-image: url(../img/sub/environmental-ic01.svg);}
.environmental-page .esg-list__item:nth-child(2) i {background-image: url(../img/sub/environmental-ic02.svg);}
.environmental-page .esg-list__item:nth-child(3) i {background-image: url(../img/sub/environmental-ic03.svg);}
.environmental-page .esg-list__item:nth-child(4) i {background-image: url(../img/sub/environmental-ic04.svg);}

@media (hover: hover) and (pointer: fine){
	.environmental-page .esg-list__item:nth-child(1):hover i {background-image: url(../img/sub/environmental-ic04-on.svg);}
	.environmental-page .esg-list__item:nth-child(2):hover i {background-image: url(../img/sub/environmental-ic03-on.svg);}
	.environmental-page .esg-list__item:nth-child(3):hover i {background-image: url(../img/sub/environmental-ic02-on.svg);}
	.environmental-page .esg-list__item:nth-child(4):hover i {background-image: url(../img/sub/environmental-ic01-on.svg);}
}

/* 환경경영 */
.safety-page #page-title {margin-bottom:  0 !important;}
.safety-page .esg-visual {margin-top: 60rem;}
.safety-list ul {margin-top: 35rem; gap: 20rem;}
.safety-list ul li {display: flex; flex-direction: column; justify-content: center; align-items: center; height: 250rem; padding: 20rem; line-height: 1.5; word-break: keep-all; border-radius: 10rem; border: 1px solid var(--op-b10);}
.safety-list ul li:last-child br {display: none;}
.safety-list li em {display: block; margin-bottom: 10rem; font-size: var(--font-15); font-weight: 700; color: var(--c-01);}

.safety-page .esg-list {margin-top: var(--gap140);}
.safety-page .esg-list > ul {margin-top: 40rem;}
.safety-page .esg-list [data-list="dot"] {text-align: left;}
.safety-page .esg-list [data-list="dot"] *::before {background: var(--w);}
.safety-page .esg-list__item:nth-child(1) i {background-image: url(../img/sub/safety-ic01.svg);}
.safety-page .esg-list__item:nth-child(2) i {background-image: url(../img/sub/safety-ic02.svg);}
.safety-page .esg-list__item:nth-child(3) i {background-image: url(../img/sub/safety-ic03.svg);}
.safety-page .esg-list__item ul {margin-top: 5rem;}

@media (hover: hover) and (pointer: fine){
	.safety-page .esg-list__item:nth-child(1):hover i {background-image: url(../img/sub/safety-ic03-on.svg);}
	.safety-page .esg-list__item:nth-child(2):hover i {background-image: url(../img/sub/safety-ic02-on.svg);}
	.safety-page .esg-list__item:nth-child(3):hover i {background-image: url(../img/sub/safety-ic01-on.svg);}
}

@media all and (max-width:1023px){
	.safety-page .esg-visual {margin-top: 50rem;}
	.safety-list ul {grid-template-columns: repeat(2, 1fr);}
}

@media (max-width:540px){
	.safety-page .esg-visual {margin-top: 30rem;}
	.safety-list ul {grid-template-columns: 1fr; gap: 10rem; margin-top: 20rem;}
	.safety-page .esg-list [data-list="dot"] * {color: var(--c-default);}
	.safety-page .esg-list [data-list="dot"] *::before {background: var(--c-01);}
}


/* 회사소식 */
#bo_gall #gall_ul {padding-top: 0;}
.board-page .bo_cate_link {display: block; margin-bottom: 23rem; padding: 0; font-size: 15rem; font-weight: 700 !important; color: var(--c-01) !important; border-radius: 0; background: transparent;}
.board-page .gall_desc {margin-top: 0; padding: 35rem 30rem;}

#bo_gall #gall_allchk a.btn_b01 {width: 37rem; height: 37rem; justify-content: center;}

@media (max-width:860px){
	#bo_btn_top {flex-direction: column; justify-content: center; align-items: center !important; margin-top: 10rem !important;}
	#bo_cate ul {margin-bottom: 40rem;}
	#bo_cate a {line-height: 50rem;}
}

@media (max-width:540px){
	#bo_btn_top {margin-top: 0 !important;}
	#bo_cate a {line-height: 40rem; font-size: 13rem;}
	#bo_cate ul {margin-bottom: 5rem !important;}
	.bo_sch {margin-top: 20rem !important;}

	.board-page .gall_desc {padding: 25rem 20rem;}
	.board-page .bo_cate_link {margin-bottom: 15rem; font-size: 12rem;}
	.board-page .gall_date {margin-top: 20rem;}
}

/* 문의하기 */
.cs-aside,
.cs-form {width: 50%;}
.cs-aside {padding-right: 80rem;}
.cs-aside__inr {position: sticky; top: var(--gap140);}
.cs-aside__inr ul {margin-top: 52rem;}
.cs-aside__inr em {display: block; margin-bottom: 10rem; font-weight: 700; color: var(--op-b20);}
.cs-aside__inr li {margin-bottom: 25rem; font-size: var(--font-19); font-weight: 600;}
.cs-aside__inr::before {opacity: .03; filter: grayscale(1); -webkit-filter: grayscale(1); position: absolute; left:-10vw; bottom:-73rem; content:''; width: 550rem; height: 392rem; background: url(../img/layout/logo.svg) no-repeat left center / 424%; transform: translateY(100%);}

.cs-form {margin-top: 0 !important; padding-top: 0 !important; border-top: 0 !important;}
.cs-form .privacy-box {height: 200rem; padding: 25rem 20rem; font-size: var(--font-16); border-radius: 5rem; border: 1px solid var(--op-b10);}
.cs-form .privacy-box p,
.cs-form .privacy-box li {color: var(--c-default) !important;}
.cs-form .privacy-box ul {margin: 10rem 0;}
.cs-form .privacy-box ul li {margin: 5rem 0;}

.cs-form .form-area[data-form="agree"]:has(+*) {margin-bottom: 40rem;}
.cs-form .form-area {flex-direction: column; justify-content: flex-start; align-items: flex-start; margin-bottom: 60rem;}
.cs-form .form-area > em {margin-bottom: 14rem; font-size: var(--font-19);}
.cs-form .form-select select {width: 100%; max-width: none;}
.cs-page--border .cs-form .form-area input:is([type="text"], [type="password"]),
.cs-page--border .cs-form .form-select select,
.cs-page--border .cs-form .form-area textarea {border-radius: 5rem; border-color: var(--op-b10);}

.cs-form .check-box label {padding-left: 30rem;}
.cs-form .check-box [type="radio"]:not(:checked) + .checkmark,
.cs-form .check-box [type="radio"]:checked + .checkmark {top: 0; width: 20rem; height: 20rem;}
.cs-form .check-box [type="radio"]:checked + .checkmark {background: none;}
.cs-form .check-box [type="radio"]:not(:checked) + .checkmark:after,
.cs-form .check-box [type="radio"]:checked + .checkmark:after {width: 8rem; height: 8rem; background: #000; border-radius: 100%;}
.cs-form .btn-wrap {width: 100%; justify-content: flex-end;}
.cs-form .btn-wrap span {color: var(--w);}

@media all and (max-width:1023px){
	.cs-page .wrap {flex-direction: column;}
	.cs-aside { width: 100%; padding-right: 0; padding-top: 0;}
	.cs-aside__inr {position: relative; top: auto;}
	.cs-aside__inr::before {display: none;}
	.cs-aside__inr ul {margin-top: 40rem;}
	.cs-form {width: 100%; padding-top: var(--gap80) !important; margin-top: var(--gap80) !important; border-top: 1px solid var(--op-b10) !important;}
	.cs-form .btn-wrap {justify-content: center; margin-top:20rem;}
}

@media (max-width:860px){
	.cs-form {padding-top: 30rem !important; margin-top:40rem !important;}
}

@media (max-width:540px){
	.cs-aside__inr ul {margin-top: 25rem;}
	.cs-aside__inr em {margin-bottom: 6rem; font-size: 13rem;}
	.cs-aside__inr li {margin-bottom: 20rem; font-size: 14rem; font-weight: 500;}
	.cs-form {margin-top: 20rem !important; padding-top: 15rem !important;}
	.cs-form .privacy-box {height: 150rem; padding: 20rem;}
	.cs-form .btn-wrap {margin-top: 40rem;}
	.cs-form .check-box [type="radio"]:not(:checked) + .checkmark,
	.cs-form .check-box [type="radio"]:checked + .checkmark {top: 2rem;}
	.agree-check__list .check-box + .check-box {margin-left: 20rem;}
}