@charset "utf-8";

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

/* Sub title  */
#page-title{}

/* SUB VISUAL */
#sub-visual{position:relative;height:100vh;}
#sub-visual .wrap-wide,
.sub-visual__inner {position: relative; height: 100%;}
.sub-visual__inner::before {filter: blur(50rem); mix-blend-mode: multiply; opacity: 0.15; position: absolute; left: 50%; top: 50%; content:''; width: 45%; height: 50%; margin-top: -20rem; border-radius: 100%; transform: translate(-50%, -50%);}
#sub-visual::before{content:"";position:absolute;left:0;top:0;z-index:1;width:100%;height:200rem;background:linear-gradient(180deg, var(--c-primary) 0%, rgba(27,54,30,0) 100%);mix-blend-mode:multiply;opacity:.3;pointer-events:none;}
.sub-visual__bg {position:absolute;top:0;left:0;width:100%;height:100%;background:#000;overflow:hidden;}
.sub-visual__bg::after {position: absolute; left:0; top:0; content:''; width: 100%; height: 100%;}
.sub-visual__bg > i,
.sub-visual__bg > video{position:absolute;top:50%;left:50%;width:105%;height:105%;background-size:cover;background-position:50% 50%; transform: translate(-50%, -50%) scale(1); transition:var(--trans-01);background-repeat:no-repeat; animation: visual-scale 10s forwards cubic-bezier(0.12, 0.4, 0.41, 0.86);}
.sub-visual__bg > video{object-fit:cover;}

.sub-visual__title .title-eng {display: block; margin-bottom: 40rem; text-transform: uppercase;}
.sub-visual__bottom {z-index: 8; position: absolute; left: 0; bottom:0; width: 100%; padding: var(--margin);}

@keyframes visual-scale{
	0%{transform: translate(-50%, -50%) scale(1.2);}
	100%{transform: translate(-50%, -50%) scale(1.05);}
}

/* sub visual-txt--bg */
body[class^="sub01_"] .sub-visual__inner::before {background: #2B3409;}
body[class^="sub02_"] .sub-visual__inner::before {background: #23110B;}
body[class^="sub03_"] .sub-visual__inner::before {background: #504330;}
body[class^="sub04_"] .sub-visual__inner::before {background: #504330;}
body:is(.notice, .notice_en, .promotion, .promotion_en) .sub-visual__inner::before {background: #1B171B;}
body[class^="sub06_"] .sub-visual__inner::before {opacity: .11; background: #111118 ;}

/* sub visual-bg::after */
body[class^="sub01_"] .sub-visual__bg::after {opacity: .2; background: #131A02;}
body[class^="sub02_"] .sub-visual__bg::after {opacity: .1; background: #1A1009;}
body[class^="sub03_"] .sub-visual__bg::after {opacity: .2; background: #343431;}
body[class^="sub04_"] .sub-visual__bg::after {opacity: .2; background: #343431;}
body:is(.notice, .notice_en, .promotion, .promotion_en) .sub-visual__bg::after {opacity: .2; background: #1B171B;}
body[class^="sub06_"] .sub-visual__bg::after {opacity: .05; background: #343846;}

/* lnb */
#lnb .select-link{width: auto;}
#lnb .select-link > ul{margin-top:5rem; padding: 17rem 0; background: var(--bg-dark); border-radius: 30rem;}
#lnb .select-link > ul a {padding: 7rem 25rem; font-size: var(--font-16);}
#lnb .depth1 .sub-menu,
#lnb .select-link__btn{display:none;}

#lnb.lnb-select .select-link__btn{display:flex;align-items:center;justify-content:space-between;min-width:180rem;height:56rem; padding:0 25rem; font-family: var(--lang-ko); font-size: var(--font-16); font-weight: 700; color:var(--w);border-radius:50rem;background:var(--op-w20);backdrop-filter:var(--backdrop);}
#lnb.lnb-select  .select-link__btn::after{content:"";position:static;right:auto;width:11rem;height:11rem;margin-left:20rem;background-color:transparent;background-size:11rem;background-position:50% 50%;background-image:url(../img/common/arrow-basic_w.svg);background-repeat:no-repeat;border-radius:0;transform:rotate(90deg);}
#lnb.lnb-select .select-link__btn.on::after{transform: rotate(270deg);}
#lnb.none-select .select-link__btn{pointer-events:none; cursor:text;}
#lnb.none-select .select-link__btn::after{opacity:0;}

#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;gap:5rem;}
#lnb.lnb-select .select-link + .select-link:has(.depth2){margin-left:0;}
#lnb .lnb-inner{display:flex;}

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

/* sub nav */
#sub-nav{position: relative; z-index:10;display:flex;align-items:center;margin-bottom:0;}
#sub-nav > *{position: relative;}
#sub-nav > *:last-child::after{display: none;}
#sub-nav .sub-home{display:block;width:15rem;height:15rem;background:url(../img/common/ic-nav-home_w.svg) no-repeat 50% 50% / contain;opacity:1;}
#sub-nav span{display:block;font-family:var(--lang-ko);font-size:var(--font-15);font-weight:600;line-height:23rem;color:var(--w);}
#sub-nav > i{display:block;opacity:1;width:2rem;height:2rem;margin:0 12rem;background-color:var(--w);border-radius:100%;}
#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-primary); color:#fff; border-color:var(--c-primary);}
#snb-title{font-weight:400;}
#snb li:not(.on) a:hover{color: var(--g-02);}

@media all and (max-width:1023px){
	#sub-visual{height:700rem;min-height:0;}
	#sub-visual::after {display: none;}
	.sub-visual__bottom {padding: 30rem 0;}
	
	#sub-nav {margin-left: 0;}
}

@media (max-width: 860px){
	#sub-visual{height:640rem;}
}

@media (max-width: 540px){
	#sub-visual{height:520rem;}
	.sub-visual__title {margin-top: -30rem;}
	.sub-visual__title .title-eng {margin-bottom: 25rem;}

	#sub-nav {padding-left: 20rem;}
	#sub-nav span{font-size:13rem;}
	#sub-nav > i{margin: 0rem 6rem;}

	.sub-visual__bottom {overflow: initial; flex-direction: column; align-items: flex-start; gap: 20rem; left: -20rem; width: calc(100% + 40rem); padding: 0;}
	#lnb{top:auto;right:auto;bottom:0rem;z-index:10;background:var(--bg-dark);}
	#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{opacity:1 !important;width: 100%; margin: 0 !important; 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{height: 60rem; padding:0rem 20rem;font-size:14rem; font-weight: 600; background: transparent; border-radius: 0;}
	#lnb.lnb-select  .select-link__btn::after{right:6rem; background-color:inherit;}
	#lnb .select-link > ul{margin-top:0; padding:0rem 0rem 15rem; border-radius:0; border-bottom-left-radius:5rem; border-bottom-right-radius:5rem;}
	#lnb .select-link > ul a{padding: 8rem 20rem;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;}
}

/* 스크롤 다운 */
.scroll-down-wrap {position: absolute; left: 50%; transform: translateX(-50%);}
a.scroll-down {z-index:10; display:flex; align-items:center; gap:10rem; font-size:var(--font-14); font-weight:600; line-height:1; font-family:var(--lang-en); color: var(--w);}
a.scroll-down span { position:relative; width:12rem; height:18rem; display:block; overflow:hidden;}
a.scroll-down span i {position: absolute;left: 0; top: 0; display:block; width:100%; height:100%; background:url(../img/common/scrolldown.svg) no-repeat 50% 50% / contain; animation:scroll_down_fall 1.8s cubic-bezier(.45,0,.25,1) infinite;}

@keyframes scroll_down_fall{
	0%{transform:translateY(-18rem); opacity:0;}
	50%{transform:translateY(0); opacity:1;}
	100%{transform:translateY(18rem); opacity:0;}
}

@media (prefers-reduced-motion: reduce){
	a.scroll-down span i{ animation:none; opacity:1; transform:none; }
}

@media all and (max-width:1023px){
	.scroll-down-wrap {position: relative; left: auto; transform: none;}
}

@media (max-width: 860px){
	.scroll-down-wrap {display: none;}
}


/* **************************************** *
 * SUB layout
* @description 서브단에서만 달라지는 header, footer 정의
 * **************************************** */
#container:has(.about-page, .history-page, .odm-page, .product-page) + #footer{margin-top: 0 !important;}
#footer{margin-top: var(--space140);}

@media (max-width:1200px){

}
@media all and (max-width:1023px){
	#container:has(.certify-item, .rnd-page) + #footer{margin-top: 0 !important;}
}

@media (max-width: 540px){

}

/* **************************************** *
 * SUB common
 * **************************************** */
.sub-content{position:relative;padding-top: max(7.2917vw, 80rem);}
.sub-content:has(.about-page, .history-page, .rnd-page, .odm-page, .product-page){padding-top: 0 !important;}
.sub-content:has(.history-page, .odm-page) {background: var(--bg-light);}

.sub-content table.table {font-size:var(--font-16); border-top:0;}
.sub-content table.table th,
.sub-content table.table td {padding:12rem 15rem; border:0; text-align:center;}
.sub-content table.table tr{border-bottom:1px solid var(--op-b05)}
.sub-content table.table th {font-weight:600; background:var(--bg-default); border-right: 1px solid var(--op-b05);}
.sub-content table.table th:last-child {border-right: 0;}
.sub-content table.table td {color:var(--b-title); border-right: 1px solid var(--op-b05);}
.sub-content table.table td:last-child {border-right: 0;}

.page-anchor__nav {gap:5rem;}
.page-anchor__nav a {display:inline-flex; align-items:center; justify-content:center; min-width:100rem; padding:13rem 22rem; border: 1px solid transparent; border-radius:100rem; background:var(--bg-light); font-size:var(--font-16); font-weight:700; color:var(--op-b40); transition: var(--trans-01); cursor: pointer;}
.page-anchor__nav a.on {color:var(--w); background:var(--c-primary);}

.wide-box {margin:0 var(--margin); padding: var(--space80) 0;}

@media (hover: hover) and (pointer: fine){
	.page-anchor__nav a:hover {color: var(--b-title); border-color: var(--op-b10); background: var(--w);}
}

@media (max-width:1200px){

}

@media all and (max-width:1023px){
	.sub-content {padding-top: var(--space140);}
	.wide-box {margin:0; border-radius: 0;}
}

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

@media (max-width: 540px){
	.sub-content {padding-top: 60rem;}

	.page-anchor__nav {flex-wrap: wrap; justify-content: center;}
	.page-anchor__nav a {min-width: 80rem; padding: 10rem 12rem; font-size: var(--font-14); text-align: center;}
}


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

 /* 호버 */
@media (hover: hover) and (pointer: fine){}

/* 회사소개 */
.about-intro {position: relative; padding: var(--space180) 0; background: url(../img/sub/about-bg.jpg) no-repeat center / cover;}
.about-intro .wrap {height: 100%;}
.about-intro__title img {width: 718rem;}
.about-intro__title h6 {margin-top: 25rem; font-size: 32rem; color: var(--c-primary);}
.about-intro__con strong {display: block; margin-bottom: 20rem; font-size: 20rem; text-transform: uppercase; color: var(--c-primary);}
.about-intro__center {width: 495rem; aspect-ratio: 495 / 410; margin: 20rem auto;}
.about-con {height: 100vh; overflow: hidden; flex-wrap: wrap;}
.about-con__img {width: 50%; height: 100%;}
.about-con__img figure {width: 100%; height: 100%;}
.about-con__txt {width: 50%; height: 100%; padding: var(--space120); background: var(--w);}
.about-con__txt h4 {margin-bottom: 42rem;}
.about-con__txt p b {display: inline-block;}
.about-con__txt p b span{text-decoration: underline; text-underline-offset: 3rem;}
.about-con__txt p {color: var(--b-title);}
.about-con__txt p + p {margin-top: 22rem;}
.about-con__txt .sign {margin-top: 50rem;}

@media (max-width:1480px){
	.about-con__txt {padding: var(--space120) var(--space80);}
}

@media (max-width:1200px){
	.about-intro__title img {width: 660rem;}
	.about-con__txt br {display: none;}
}

@media all and (max-width:1023px){
	/*화면 768에 맞춰놓고 작업*/
}

@media (max-width: 860px){
	.about-intro__center {width: 420rem;}
	.about-intro__title img {width: 580rem;}
	.about-intro__title h6 {font-size: 27rem;}

	.about-con {position: relative; height: auto;}
	.about-con__img {position: absolute; left:0; top:0; width: 100%; height: 100% !important; transform: none !important;}
	.about-con__img::after {backdrop-filter: var(--backdrop); -webkit-backdrop-filter: var(--backdrop); z-index: 1; position: absolute; left:0; top:0; content:''; width: 100%; height: 100%; background: var(--op-w90);}
	.about-con__img img {transform: none !important; transition: none !important;}
	.about-con__txt {z-index: 1; position: relative; width: 100%; height: auto; justify-content: center; padding:var(--space160) var(--margin); text-align: center; background:transparent; }
	.about-con__txt br {display: block;}
}

@media (max-width: 540px){
	.about-intro__center {width: 90%;}
	.about-intro__title img {width: 92%; margin: 0 auto;}
	.about-intro__title h6 {margin-top: 15rem; font-size: 19rem;}
	.about-intro__con strong {margin-bottom: 12rem; font-size: 15rem;}
	.about-intro__con br {display: none;}

	.about-con__txt h4 {margin-bottom: 22rem;}
	.about-con__txt br {display: none;}
	.about-con__txt p + p {margin-top: 15rem;}
	.about-con__txt .sign {margin-top: 30rem;}
}

/* 연혁 */
.history-inr > * {width: 50%; height: 100vh;}
.history-txt {position: relative; padding: max(max(7.2917vw, 80rem)) 0 max(7.2917vw, 100rem); padding-left: calc((100vw - 1520rem)/2);}
.history-txt::before {opacity: .015; position: absolute; left: 60rem; bottom: 40rem; content:'HISTORY'; font-family: var(--lang-en); font-size: 130rem; font-weight: 600; color: var(--c-primary); text-transform: uppercase;}
.history-txt h3 {margin-bottom: 23rem;}
.history-txt .tabs li:is(:not(.active)) {color: var(--op-b30); background: var(--op-b05);}
.history-con {margin-top: var(--space100);}
.history-list strong {display: block; margin-bottom: 40rem; color: var(--op-b20); text-transform: uppercase;}
.history-list__item {display: flex; gap: 80rem;}
.history-list__item:not(:last-child) dd {padding-bottom: 30rem;}
.history-list__item dt {min-width: 57rem; letter-spacing: 0;}
.history-list__item dd {position: relative; padding: 2rem 0; padding-left: 40rem; color: var(--b-title); border-left: 1px solid var(--op-b10);}
.history-list__item dd p:not(:last-child) {margin-bottom: 10rem;}
.history-list__item dd p span {min-width: 24rem; margin-right: 10rem; font-weight: 800;}
.history-list__item dd::before,
.history-list__item dd::after {position: absolute; left: -3rem; top: 10rem; content:''; width: 6rem; height: 6rem; border-radius: 100%; background: var(--c-primary);}
.history-list__item dd::before {opacity: .2; animation: historyDot 1s linear infinite alternate;}

@keyframes historyDot {
	0%{transform: scale(1);}
	100%{transform: scale(3);}
}

.history-thumb {position: relative;}
.history-thumb figure {position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: translateX(100%); transition: var(--trans-01);}
.history-page:has(.tabs > li:nth-child(1).active) .history-thumb figure:nth-child(1),
.history-page:has(.tabs > li:nth-child(2).active) .history-thumb figure:nth-child(2),
.history-page:has(.tabs > li:nth-child(3).active) .history-thumb figure:nth-child(3) {transform: translateX(0);}

@media (max-width: 1480px){
	.history-txt {padding-left: var(--margin); padding-right: var(--margin);}
	.history-txt::before {left: var(--margin);}
}

@media all and (max-width:1023px){
	.history-txt {padding: 60rem var(--margin) var(--space140);}
	.history-inr > * {width: 100%; height: auto;}
	.history-list {padding-bottom: var(--space140);}
	.history-list strong {margin-bottom: 20rem;}
	.history-list figure {height: 420rem; margin-bottom: 50rem;}
	.history-txt::before {bottom: var(--margin); font-size: 100rem;}
}

@media (max-width: 540px){
	.history-txt h3 {margin-bottom: 20rem;}
	.history-page .tabs {justify-content: flex-start;}
	.history-con {margin-top: var(--space80);}
	.history-list strong {margin-bottom: 12rem;}
	.history-list figure {height: 185rem; margin-bottom: 30rem;}
	.history-list__item {gap: 20rem;}
	.history-list__item dd::before, .history-list__item dd::after {width: 4rem; height: 4rem;}
	.history-list__item dd {padding-left: 20rem;}
	.history-list__item:not(:last-child) dd {padding-bottom: 30rem;}
	.history-list__item dd p {display: flex; line-height: 1.4;}
	.history-txt::before {font-size: 60rem; line-height: 1;}
}

/* 오시는길 */
.location-page h3 {margin-bottom: 40rem;}
.location-map {width: 100%;}
.location-map .hide,
.map_border,
.root_daum_roughmap .cont {display: none;}
.root_daum_roughmap {width: 100% !important; height: 100%;}
.root_daum_roughmap .wrap_map {height: 100% !important;}
.location-txt {flex-shrink: 0; margin-left: var(--space100); padding: 42rem 0;}
.location-txt .btn-basic {margin-top: 90rem;}
.location-txt dt {margin-bottom: 10rem;}
.location-txt dd {font-family: var(--lang-ko) !important; font-weight: 600;}
.location-txt dt,
.location-address span {min-width: 60rem; font-weight: 700; color: var(--b-title);}
.location-address {margin-top: 32rem; padding-top: 30rem; border-top: 1px solid var(--op-b10);}
.location-address p {display: flex; align-items: center; gap: 30rem;}
.location-address p:not(:last-child) {margin-bottom: 10rem;}

@media (max-width:1200px){
	.location-txt {margin-left: var(--space80);}
}
@media all and (max-width:1023px){
	.location-txt {width: 36%;}
	.location-address {margin-top: 18rem;}
	.location-address p:first-child {align-items: flex-start;}
	.location-txt {padding-top: var(--margin); padding-bottom: 0;}
	.location-txt .btn-basic {margin-top: var(--space80);}
}

@media (max-width: 860px){
	.location-page h3 {margin-bottom: var(--margin);}
	.location-con {flex-direction: column;}
	.location-map {height: 400rem;}
	.location-txt {width: 100%; margin-left: 0;}
	.location-txt .btn-basic {margin-top: var(--margin);}
}

@media (max-width: 540px){
	.location-map {height: 220rem;}
	.location-txt {padding-top: 25rem;}
	.location-txt dt,
	.location-address span {min-width: 50rem; font-size: var(--font-14);}
	.location-txt dt {margin-bottom: 8rem;}
	.location-address {padding-top: 20rem;}
	.location-address p {gap: 12rem; line-height: 1.5;}
	.location-address span {line-height: 1.45;}
	.location-address p:not(:last-child) {margin-bottom: 12rem;}
	.location-txt .btn-basic {margin-top: var(--space80);}
	
}

/* 인증서 */
@media all and (max-width:1023px){
	#container:has(.certify-item) .wide-box {padding-bottom: var(--space140);}
}

/* 생산시스템 */
.process-page h3 {margin-bottom: 25rem;}
.process-page .page-title-wrap {margin-bottom: 65rem;}
.process-page h4 {margin-bottom: 35rem;}
.process-sec {padding: var(--space80) 0;}
.process-sec:not(:last-child) {margin-bottom: var(--margin);}
.process-list {position: relative; display:flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; row-gap: 50rem; padding: 0 42rem; counter-reset:list-number;}
.process-list::before {position: absolute; left:0; top:11rem; content:''; width: 100%; height: 311rem; border-radius:0 30rem 30rem 0; border: 2rem dashed rgba(0, 0, 0, .06); border-left: 0;}
.process-page #section03 .process-list::before,
.process-page #section04 .process-list::before {height: 2rem; border-bottom: 0; border-right: 0; border-radius: 0;}

.process-list__item {counter-increment:list-number; position: relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; width: calc((100% - 260rem) / 6);}
.process-list__item::before {position: absolute; left:50%; top: 0; content:''; width: 1px; height: 50rem; background: var(--op-b05);} 
.process-list__item i {position: relative; display:inline-flex; align-items:center; justify-content:center; width: 22rem; height: 22rem; border-radius: 100%; background: var(--bg-light); margin-bottom: 23rem; transition: var(--trans-01);}
.process-list__item i::before {opacity: 0; position: absolute; left: 0; top: 0; content:''; width: 100%; height: 100%; border-radius: 100%; background: var(--c-primary); transform: scale(1.5); transition: var(--trans-01);}
.process-list__item i::after{position: relative; content:counter(list-number); font-size: 12rem; font-weight: 900; color: var(--op-b30);}
.process-list__item figure {width: 100%; aspect-ratio: 1/1; background: var(--w);}
.process-list__item p {margin-top: 14rem; font-weight: 700; color: var(--op-b30); transition: var(--trans-01);}

.process-list__arrow {display: flex; align-items: center; justify-content: center; width: 52rem; height: 100%; transition: background var(--trans-01);}
.process-list__arrow::after {filter: grayscale(1); opacity: .1; content:''; width: 22rem; height: 22rem; background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url(../img/sub/process-arrow.svg); transition: var(--trans-01);}
.process-list__arrow:nth-child(12),
.process-list__arrow:last-child {display: none;}
.process-list__arrow:nth-of-type(n+6) {transform: scaleX(-1);}

.process-page #section01 .process-list > *:nth-last-child(-n+4) {display: none;}

.process-list__item.active i {color: var(--w); background: var(--c-primary);}
.process-list__item.active i::before {opacity: 0.2;}
.process-list__item.active i::after {color: var(--w);}
.process-list__item.active p {color: var(--b-title);}
.process-list__arrow.active::after {filter: grayscale(0); opacity: 1;}

@media (hover: hover) and (pointer: fine){
	.page-anchor__nav a:hover {color: var(--b-title); border-color: var(--op-b10); background: var(--w);}
}

@media all and (max-width:1023px){
	.process-page .page-title-wrap {margin-bottom: 50rem;}
	.process-list {justify-content: flex-start;}
	.process-list::before {display: none;}
	.process-list__item::after {z-index: -1; position: absolute; left: -26rem; top: 11rem; content:''; width: calc(100% + 52rem); height: 1px; border-top: 2rem dashed var(--op-b10);}
	.process-list__item {width: calc((100% - 156rem) / 4);}
	.process-list__arrow:nth-child(8n) {display: none;}
	.process-list > * {order: initial !important;}
	.process-list__arrow:nth-of-type(n+6) {transform: scaleX(1);}
	.process-list__arrow:nth-child(12) {display: flex;}
}

@media (max-width: 860px) {
	.process-list {padding: 0;}
}

@media (max-width: 540px) {
	.process-page h3 {margin-bottom: 17rem;}
	.process-page .page-title-wrap {margin-bottom: 35rem;}
	.process-page h4 {margin-bottom: 20rem;}
	.process-sec {padding: var(--space100) 0;}
	.process-sec:not(:last-child) {margin-bottom: 0;}
	.process-list {row-gap: 32rem;}
	.process-list__arrow {width:40rem;}
	.process-list__arrow::after {width: 15rem; height: 15rem;}
	.process-list__item {width: calc((100% - 40rem) / 2);}
	.process-list__item::before {height: 40rem;}
	.process-list__item::after {left: 0; width: calc(100% + 20rem);}
	.process-list__item:nth-child(4n-1)::after {left: -20rem; width: calc(100% + 20rem);}
	.process-list__arrow:nth-child(4n) {display: none;}
	.process-list__item i {width: 18rem; height: 18rem;margin-bottom: 20rem;}
	.process-list__item i::after {font-size: 10rem; line-height: 1; font-weight: 700;}
}


/* 기술개발 */
.rnd-intro {position: relative;}
.rnd-intro__con {position: relative; width: 100%; height: 100vh; background: url(../img/sub/rnd-bg.jpg) no-repeat center / cover;}
.rnd-intro__con .wrap {height: 100%;}
.rnd-intro__title {width: 100%; text-align: center;}
.rnd-intro__copy {display: inline; white-space: nowrap;}
.rnd-intro__con::before {position: absolute; left:30rem; top:0; content:''; width: 1px; height: 100%; background: var(--op-w10);}
.rnd-intro__con .scroll-indicator {left: 30rem; bottom: var(--space80);}
.rnd-merit {overflow: hidden; position: relative; padding: var(--space140) 0;}
.rnd-merit .wrap {justify-content: center; align-items: center; height: 100%;}
.rnd-merit .wrap > i {z-index: 0; opacity: .03; pointer-events: none; position: absolute; left: 0; top: 50%; width: 100%; text-align: center; font-size: 6.3vw; font-weight: 600; letter-spacing: -0.02%; color: var(--c-primary); text-transform: uppercase; transform: translateY(-50%);}
.rnd-merit__item {overflow: hidden; -webkit-backdrop-filter: blur(8rem); backdrop-filter: blur(8rem); display: flex; flex-direction: column; justify-content: center; align-items: center; width: 420rem; aspect-ratio: 1/1; padding: 20rem; border-radius: 100%; border: 1px solid var(--c-third); background: var(--op-w80);}
.rnd-merit__item i {margin-bottom: 20rem;}
.rnd-merit__item img {width: 75rem;}
.rnd-merit__item p {margin-top: 12rem;}
.rnd-merit__bottom {margin-top: -80rem;}
.rnd-merit__bottom .rmi02 {z-index: 12;}
.rnd-merit__bottom .rnd-merit__item {margin: 0 -20rem;}
.rnd-room {margin-top: var(--space60);}
.rnd-room h4 {margin-bottom: 35rem;}
.rnd-logo {margin-top: var(--space140); padding: var(--space80) 0;}
.rnd-logo .wrap {gap: 80rem;}
.rnd-logo figure {width: 230rem;}
.rnd-logo__line {display: block; width: 1px; height: 230rem; background:var(--op-b10);}
.rnd-logo h6 {margin-bottom: 18rem;}
.rnd-logo p + p {margin-top: 15rem;}

@media all and (max-width:1023px){
	.rnd-intro__con {height: auto; padding: 270rem 0;}
	.rnd-intro__con::before,
	.rnd-intro__con .scroll-indicator {display: none;}
	.rnd-merit .wrap > i {font-size: 8vw; letter-spacing: -2%; line-height: 1.05;}
	.rnd-merit__item {width: 380rem;}
	.rnd-merit__item i {margin-bottom: 12rem;}
	.rnd-room {margin-top: 0;}
	.rnd-room h4 {margin-bottom: 30rem;}
	.rnd-room ul {grid-template-columns: 1fr 1fr;}
	.rnd-logo {padding: var(--space140) 0;}
	.rnd-logo .wrap {gap: 60rem;}
	.rnd-logo figure {flex-shrink: 0;}
	.rnd-logo__txt br {display: none;}
}

@media (max-width: 860px){
	.rnd-intro__con {height: auto; padding: 240rem 0;}
	.rnd-logo .wrap {flex-direction: column; justify-content: center;}
	.rnd-logo__line {display: none;}
	.rnd-logo figure {width: 200rem;}
	.rnd-logo__txt {text-align: center;}

}

@media (max-width: 540px){
	.rnd-intro {height: auto;}
	.rnd-intro__con {position: relative; height: auto; padding: 100rem 0;}
	.rnd-intro__title {line-height: 1.5;}
	.rnd-intro__copy {opacity: 1; visibility: visible; white-space: wrap;}
	.rnd-merit {padding: var(--space80) 0;}
	.rnd-merit .wrap > i {opacity: 1; position: relative; left: auto; top: auto; margin-bottom:var(--space80); color: var(--op-b05); transform: none;}
	.rnd-merit__item {width: 270rem;}
	.rnd-merit__item i {margin-top: -20rem;}
	.rnd-merit__item img {width: 55rem;}
	.rnd-merit__item p {margin-top: 6rem;}
	.rnd-merit__bottom {margin-top: 0; flex-direction: column;}
	.rnd-merit__bottom .rnd-merit__item {margin: 0; margin-top: -20rem;}
	.rnd-merit__bottom .rmi02 {z-index: 0;}

	.rnd-room {margin-top:30rem;}
	.rnd-room h4 {margin-bottom: 20rem;}
	.rnd-room ul {grid-template-columns: 1fr; gap: 10rem;}

	.rnd-logo figure {width: 150rem;}
	.rnd-logo .wrap {gap: 32rem;}
	.rnd-logo h6 {margin-bottom: 12rem;}
}

/* odm */
.odm-con {padding-top: max(7.2917vw, 80rem); padding-bottom: max(8.3333vw, 100rem);}
.odm-con h3 {margin-bottom: 30rem;}
.odm-con p + p {margin-top: 12rem;}
.odm-con .btn-wrap {margin-top: 40rem;}

.global-list {margin-top: var(--space100); gap: 10rem;}
.global-list__item {display: flex; flex-direction: column; justify-content: space-between; height: 180rem; padding: 25rem 20rem; padding-right: 22rem; background: var(--w); box-shadow: 10rem 10rem 20rem 0 rgba(0, 0, 0, 0.03);}
.global-list__item p {color: var(--b-title);}
.global-list__item i {width: 32rem; height: 32rem; margin-right: 9rem; border-radius: 100%; background: var(--c-third);}
.global-list__item i img {width: 15rem;}
.global-list__item div {display: flex; justify-content: flex-end; gap: 3rem;}
.global-list__item .count-num {letter-spacing: 0;}

.odm-map {position: absolute; right: -100rem; top: 20vh; width: 50%; aspect-ratio: 1/1; border-radius: 100%; background: var(--w);}
.odm-map::before {opacity: .15; position: absolute; left: 0; top: 0; content:''; width: 100%; height: 100%; border-radius: 100%; background:#C4BEAE; transform: scale(1.15); filter: blur(100rem);}
.odm-map > img {position: relative; border-radius: 100%; background-color: var(--w);}
.global-map__logo {position: absolute;left: 56%; top: 15%; display: flex; align-items: center; justify-content: center; padding:10rem 12rem; border-radius: 5rem; background: var(--c-primary);}
.global-map__logo::before {position: absolute; left: 50%; bottom: -5rem; content:''; width: 8rem; height: 8rem; background: var(--c-primary); transform: rotate(45deg) translateX(-50%);}
.global-map__logo img {width: 100rem;} 

@media all and (max-width:1480px){
	.odm-map {width: 54%;}
	.global-map__logo {left: 55%; top: 14%;}
}

@media all and (max-width:1200px){
	.odm-con {z-index: 1; position: relative;}
	.odm-con__inr {width: 70%;}
	.odm-map > img {background-color:var(--op-w40);}
	.global-map__logo {left: 54%; top: 13%;}
}

@media all and (max-width:1023px){
	.odm-con {padding-top: var(--space140);padding-bottom: var(--space160);}
	.odm-con h3 {margin-bottom: 25rem;}
	.odm-con__inr {width: 100%; text-align: center;}
	.odm-map {position: relative; right: auto; top: auto; margin: var(--space80) auto 0;}
	.global-map__logo {left: 50%; top: 11%;}
	.odm-con .btn-wrap {margin-top: var(--space80);}

	.btn-odm.tablet-block {display: none !important;}
}

@media (max-width:860px){
	.global-map__logo {left: 47%; top: 9%;}

	.btn-odm {margin-top: 30rem; padding: 10rem; animation: none;}
	.btn-odm::after {right: 20rem; top: 50%; width: 20rem; height: 20rem; border: none; border-color: none; background: url(../img/common/arrow-basic_w.svg) no-repeat center / 15rem; transform: translateY(-50%);}
	.btn-odm::before {width: 80rem; height: 80rem; border-radius: 5rem;}
	.btn-odm.tablet-block {display: flex !important;}
}

@media (max-width:540px){
	.odm-con {padding-top: 60rem;}
	.odm-con h3 {margin-bottom: 15rem;}
	.odm-con__inr br {display: none;}
	.odm-map {width: 90%; border-radius: 0; background: transparent;}
	.odm-map > img {border-radius: 100%; background-color: var(--w);}
	.global-map__logo {left: 44%; top: 6%;}
	.global-map__logo img {width: 90rem;}
	
	
	.global-list {margin-top: var(--space80); gap: 5rem;}
	.global-list__item {display: flex; flex-direction: row; justify-content: space-between; align-items: center; height: auto; padding: 22rem 15rem;}
	.global-list__item i {width: 27rem; height: 27rem;}
	.global-list__item i img {width: 12rem;}
	.global-list__item div {align-items: center;}

	.btn-odm {margin-top: 12rem; padding: 25rem 15rem; text-align: left;}
	.btn-odm::after {right: 15rem; background-size: 12rem;}
	.btn-odm::before {display: none;}
}

/* odm 팝업 */
#odm-popup-layer { z-index: 51; position: fixed; right: 50rem; bottom: 50rem; min-width: 433rem; padding: 30rem 25rem 25rem 25rem; background-color: var(--w); box-shadow: 4rem 6rem 8rem 0 var(--op-b10);}
#odm-popup-layer h6 {margin-bottom: 10rem;}
.odm-layer__list {position: relative; margin: 25rem 0; padding-top: 22rem; border-top: 1px solid var(--op-b10);}
.odm-layer__list > a {position: absolute; right: 0; bottom: 0; width: 32rem; height: 32rem; display: flex; justify-content: center; align-items: center; border-radius: 100%; background: linear-gradient(45deg, #FCB216 16.84%, #F46233 27.34%, #EE2F45 34.95%, #ED1C4D 38.68%, #8F2785 62.38%, #5757A2 82.04%);;}
.odm-layer__list li {display: flex; align-items: center;}
.odm-layer__list li:not(:last-child) {margin-bottom: 7rem;}
.odm-layer__list li i {min-width: 42rem; margin-right: 15rem; color: var(--op-b30);}
.odm-layer__map {height: 220rem; border: 1px solid var(--op-b05);}
#odm-popup-layer .btn-inquiry {display: inline-flex; align-items: center; justify-content: center; gap: 7rem; width: 100%; height: 54rem; margin-top: 10rem; font-size: var(--font-15); color: var(--w); background: var(--c-primary); transition: var(--trans-01);}
#odm-popup-layer .btn-inquiry p {font-weight: 600;}
#odm-popup-layer .btn-inquiry i {width: 17rem; height: 17rem; background: var(--w); mask: url(../img/layout/ic-inquiry.svg) no-repeat center / contain; -website-mask: url(../img/layout/ic-inquiry.svg) no-repeat center / contain; transition: var(--trans-01);}
#odm-popup-layer .btn-close {position: absolute; right: 17rem; top: 22rem; width: 40rem; height: 40rem; font-size: 0;}
#odm-popup-layer .btn-close::before,
#odm-popup-layer .btn-close::after {position: absolute; left: 50%; top: 50%; content:''; width: 20rem; height: 3rem; border-radius: 100rem; background: var(--b-title); transform-origin: center center;}
#odm-popup-layer .btn-close::before {transform: translate(-50%, -50%) rotate(45deg);}
#odm-popup-layer .btn-close::after {transform: translate(-50%, -50%) rotate(-45deg);}

@media (hover: hover) and (pointer: fine){
	#odm-popup-layer .btn-inquiry:hover {color: var(--b-title); background: var(--c-secondary);}
	#odm-popup-layer .btn-inquiry:hover i {background: var(--b-title);}
}

@media (max-width:860px){
	#odm-popup-layer {z-index: 100; left: 0; top: 0; right: auto; bottom: auto; width: 100%; height: 100%; padding: 40rem; padding-bottom: var(--space140); border: none; border-radius: 0; box-shadow: none;}
	#odm-popup-layer h6 {font-size: var(--font-35);}
	#odm-popup-layer .btn-close {right: 20rem; top: 20rem; width: 80rem; height: 80rem;}
	#odm-popup-layer .btn-close::before, #odm-popup-layer .btn-close::after {width: 29rem;}
	#odm-popup-layer .btn-inquiry {position: fixed; left: 0; bottom: 0; width: 100%; height: 70rem; margin-top: 0; border-radius: 0;}

	.odm-layer__list > a {width: 40rem; height: 40rem;}
	.odm-layer__list > a img {width: 22rem;}
	.odm-layer__map {height: 50vh;}
}

@media (max-width:540px){
	#odm-popup-layer {min-width: auto; padding:30rem 20rem;}
	#odm-popup-layer h6 {margin-bottom: 8rem;}
	#odm-popup-layer .btn-close {right: 0; top: 0; width:85rem; height: 85rem;}
	#odm-popup-layer .btn-close::before, #odm-popup-layer .btn-close::after {width: 23rem;}
	#odm-popup-layer .btn-inquiry {position: fixed; left: 0; bottom: 0; width: 100%; height: 60rem; border-radius: 0;}
}


/* 브랜드소개 */
.brand-page .page-title-wrap {margin-bottom: 60rem;}
.brand-page .page-title-wrap .wrap {padding-right: 34%;}
.brand-page .page-anchor {position: absolute; right: 0; bottom: 10rem;}
.brand-list__item {position: sticky; top: var(--margin); padding: var(--space80) 0;}
.brand-list__item:not(:last-child) {margin-bottom: var(--margin);}
.brand-list__item > .en {position: absolute; left: 30rem; top: 0; opacity: .03; font-size: var(--font-52); font-weight: 600; color: var(--b-title); text-transform: uppercase; transform-origin: left bottom; transform: rotate(90deg);}
.brand-list__inr {gap: 60rem;}
.brand-thumb {flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 445rem; aspect-ratio: 1/1; background: var(--w);}
.brand-txt {width: 100%; padding: 10rem 0;}
.brand-txt h5 {margin-bottom: 12rem;}
.brand-txt h5 a {display: inline-flex; align-items: center; margin-left: 15rem; transition: var(--trans-01);}
.brand-txt h5 a span {font-family: var(--lang-ko); text-decoration: underline; text-underline-offset: 3rem;}
.brand-txt h5 a::after {content:''; width: 14rem; height: 14rem; margin-left:10rem; margin-top: -1px; background: var(--b-title); mask:url(../img/sub/ic-link.svg) no-repeat center / contain;  transition: var(--trans-01);}
.brand-txt [data-list="tag-list"] {justify-content: flex-start;}
.brand-txt strong {display: block; margin-bottom: 6rem; margin-top: auto; font-size: 21rem; font-weight: 400; color: var(--c-primary);}
.brand-txt .btn-wrap {margin-top: 40rem;}
.brand-product {position: absolute; top: 80rem; right: 55rem;}
.brand-product em {display: inline-flex; align-items: center; margin-bottom: 12rem; color: var(--op-b20); text-transform: uppercase;}
.brand-product em::before {content:''; width: 3rem; height: 3rem; margin-right: 6rem; border-radius: 100%; background: var(--op-b20);}
.brand-product ul {gap: 5rem;}
.brand-product li {width: 100rem; border: 1px solid var(--op-b05);}

.brand-list__item:nth-child(2) {background: var(--bg-light);}
.brand-list__item:nth-child(3) {background: #F5EFD7;}
.brand-list__item:nth-child(4) {background: var(--c-primary);}
.brand-list__item:nth-child(5) {background: var(--bg-dark);}
.brand-list__item:nth-child(6) {background: var(--bg-default);}

.brand-list__item:nth-child(3) strong {color: #F8B62C;}
.brand-list__item:nth-child(3) *.btn-basic.white.v2 p {background: #F8B62C;}
.brand-list__item:nth-child(3) *.btn-basic.white.v2 i {background: #F8B62C;}

.brand-list__item:nth-child(3) [data-list="tag-list"] li {color: var(--op-b40);}

.brand-list__item:nth-child(4) [data-list="tag-list"] li,
.brand-list__item:nth-child(5) [data-list="tag-list"] li {color: var(--op-w40); border-color: var(--op-w10);}
.brand-list__item:nth-child(4) strong,
.brand-list__item:nth-child(5) strong {color: var(--c-secondary);}
.brand-list__item:nth-child(4) .brand-product em,
.brand-list__item:nth-child(5) .brand-product em {color: var(--op-w30);}
.brand-list__item:nth-child(4) .brand-product em::before,
.brand-list__item:nth-child(5) .brand-product em::before {background: var(--op-w30);}

.brand-list__item:nth-child(4) > .en,
.brand-list__item:nth-child(5) > .en {color: var(--w);}

@media (hover: hover) and (pointer: fine){
	.brand-txt h5 a:hover {color: var(--c-secondary);}
	.brand-txt h5 a:hover::after {background: var(--c-secondary);}

	.brand-list__item:nth-child(3) *.btn-basic.white.v2:hover p {color: var(--w); background: var(--c-primary);}
	.brand-list__item:nth-child(3) *.btn-basic.white.v2:hover i {background: var(--c-primary);}
	.brand-list__item:nth-child(3) *.btn-basic.white.v2:hover i::after {background-image: url(../img/layout/arrow-basic_w.svg);}
}

@media all and (max-width:1800px){
	.brand-list__inr {max-width: none; margin: 0 var(--space140);}
}

@media all and (max-width:1480px){
	.brand-list__inr {max-width: none; margin: 0 var(--space140); margin-right: var(--space180);}
	.brand-product li {width: 80rem;}
	.brand-txt br {display: none;}
}

@media all and (max-width:1200px){
	.brand-thumb {width: 350rem; aspect-ratio: auto; padding: 40rem;}
	.brand-thumb img {width: 100%;}
	.brand-txt strong {margin-top: 40rem;}
	.brand-page .page-title-wrap {margin-bottom: 40rem;}
	.brand-page .page-title-wrap .wrap {padding-right: 0;}
	.brand-page .page-anchor {position: relative; right: auto;  bottom: auto; margin-top: 50rem;}
	.brand-page .page-anchor__nav {justify-content: flex-start;}
}

@media all and (max-width:1023px){
	.brand-list__item > .en {display: none;}
	.brand-list__inr {margin:0 var(--space80); gap: 40rem;}
	.brand-thumb {width: 320rem;}
	.brand-product {position: relative; right: auto; top: auto; width: 100%; margin-top: 40rem; padding:0 var(--space80);}
	.brand-product ul {display: flex;}
}

@media (max-width:860px){
	.brand-list__item {padding: var(--margin) 0;}
	.brand-list__inr {margin: 0 var(--margin);}
	.brand-product {margin-top: var(--margin); padding: 0 var(--margin);}
}

@media (max-width:540px){
	.brand-page .page-title-wrap {margin-bottom: 25rem;}
	.brand-page .page-anchor {margin-top: 30rem;}
	.brand-list__item {position: relative;}
	.brand-list__inr {justify-content: flex-start; flex-direction: column; gap: 30rem;}
	.brand-thumb {width: 100%; height: 200rem; padding: 20rem;}
	.brand-thumb img {width: auto; height: 100%;}
	.brand-txt {padding: 0; text-align: center;}
	.brand-txt strong {margin-top: 22rem; font-size: var(--default);}
	.brand-txt .btn-wrap {margin-top: 30rem;}
	.brand-txt [data-list="tag-list"] {justify-content: center;}
	.brand-product {text-align: center; width: auto; margin: 0 var(--margin); margin-top:40rem; padding: 0; padding-top: 25rem; padding-bottom: 20rem; border-top: 1px solid var(--op-b05);}
	.brand-product ul {justify-content: center;}
	.brand-txt h5 {flex-direction: column;}
	.brand-txt h5 a {margin-left: 0; margin-top: 10rem; margin-bottom: 10rem;}
	.brand-txt h5 a::after {width: 11rem; height: 11rem; margin-top: 0; margin-left: 7rem;}

	.brand-list__item:nth-child(4) .brand-product, 
	.brand-list__item:nth-child(5) .brand-product {border-color: var(--op-w10);}
}

/* 제품 리스트 */
.product-list {display: flex;}
.product-list > * {position: relative;}
.product-list__thumb {width: 35%;}
.product-list__thumb figure {position: sticky; top: 0; height: 100vh;}
.product-list__con {width: 65%;}
.product-list__sec {padding: 0 var(--space120);}
.product-list__sec .no-contents {padding:  var(--space80) 0;}
.product-list__info {padding-top: var(--space160); padding-bottom: var(--space160);}
.product-list__info h3 {margin-bottom: 26rem;}
.product-info__subtitle {display: block; margin-bottom: 12rem; font-size: 20rem; font-weight: 400; line-height: 1.5; letter-spacing: -0.03;}
.product-info__subtitle br {display: none;}

/* span은 스타일 보기 위한 임시 작업 */
.product-list__txt span {display: block;}
.product-list__txt span:not(:last-child) {margin-bottom: 15rem;}

.product-service {display: none !important; margin-top: 90rem;}
.product-service__item i {width: 90rem; height: 90rem; margin-bottom: 25rem; border-radius: 100%; background: var(--bg-default);}
.product-service__item i img {max-width: 42rem; max-height: 42rem;}
.product-service__item strong {display: block; margin-bottom: 12rem;}

.product-inventory {padding-top: var(--space80); padding-bottom: var(--space160);}
.product-inventory h6 {margin-bottom: 22rem;}
.product-inventory__list {row-gap: 60rem;}
.product-inventory__item figure {position: relative; aspect-ratio: 344/400; margin-bottom: 16rem; background-color: var(--w);}
.product-inventory__item figure.cutout {padding: var(--margin);}
.product-inventory__item figure:not(:has(img)) {background: var(--bg-default);}
.product-inventory__item figure:not(:has(img))::after {filter: grayscale(1); opacity: .15; position: absolute; left: 50%; top: 50%; content:''; width: 60%; aspect-ratio: 204/40; background-repeat: no-repeat; background-size: contain; background-position: center center; background-image: url(../img/layout/logo.svg); transform: translate(-50%, -50%);}

.product-inventory__thumb *.btn-more {width: 100rem; height: 100rem; margin-left: -50rem; margin-top: -50rem;}
.product-inventory__thumb *.btn-more p {font-size: 12rem;}

@media all and (max-width:1280px){
	.product-list__sec {padding: var(--space160) var(--space80);}
}

@media all and (max-width:1200px){
	.product-list__sec {padding: var(--space140) var(--space80);}
	.product-service {grid-template-columns: repeat(2, 1fr);}
	.product-inventory__list {grid-template-columns: repeat(3, 1fr);}
}

@media all and (max-width:1023px){
	.product-list {flex-direction: column;}
	.product-list > * {width: 100%;}
	.product-list__thumb figure {height: 500rem;}
	.product-list__sec {padding: var(--space100) var(--margin); text-align: center;}
	.product-service {margin-top: var(--space80); text-align: left; gap:42rem;}
}

@media (max-width: 540px){
	.product-list__info h3 {margin-bottom: 20rem;}
	.product-info__subtitle {margin-bottom: 8rem; font-size: 16rem;}
	.product-list__txt br {display: none;}
	.product-list__sec {padding: var(--space100) var(--margin) var(--space140);}
	.product-list__thumb figure {height: 300rem;}
	.product-service {grid-template-columns: 1fr; gap: 30rem; text-align: center;}
	.product-service__item i {width: 70rem; height: 70rem; margin: 0 auto 18rem;}
	.product-service__item strong {margin-bottom: 10rem;}
	.product-service__item [data-list] {display: inline-block; text-align: left;}

	.product-inventory h6 {margin-bottom: 18rem;}
	.product-inventory__item figure {margin-bottom: 12rem;}
	.product-inventory__list {grid-template-columns: repeat(2, 1fr); gap: 30rem;}
}


/* 제품 뷰페이지 */
.product-view {overflow:hidden; background:var(--w);}
.product-intro {position:relative; display:flex; height:100vh; background:var(--w); overflow:hidden;}
.product-intro > * {position:relative; width:50%; height:100%;}
.product-intro__thumb {overflow:hidden;}
.product-intro__thumb figure {height:100%;}
.product-intro__thumb img {width:100%; height:100%; object-fit:cover;}
.product-intro__con {display:flex; align-items:center; justify-content:center; text-align:center; padding:var(--space140) var(--space160); padding-bottom:200rem;}
.product-intro__con-inr {position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; padding:0 40rem;}
.product-intro__brand {display:flex; align-items:center; justify-content:center; width:300rem; height:120rem; margin-bottom:28rem;}
.product-intro__brand img {max-width:100%; max-height:100%; object-fit:contain;}
.product-intro__con h3 {margin-bottom:18rem;}
.product-intro__con p {color:var(--b-title);}
.product-intro__con [data-list="tag-list"] {margin-top:var(--margin);}
.product-intro__dec {position:absolute; left:0; bottom:20rem; width:100%; opacity:.03; font-size:maX(7.3958vw, 80rem); line-height:1; letter-spacing: -3%; color:var(--b-title); text-transform:uppercase; pointer-events:none;}
.product-intro__product {position:absolute; left:50%; top:50%; z-index:3; width:510rem; height:510rem; transform:translate(-50%, -50%);}
.product-intro__product figure {width:100%; height:100%;}

.product-view__sec:is(:not(.product-mockup, .product-spec)) {padding:50rem 0 58rem; border-top:1px dashed var(--op-b10);}
.product-view__sec:is(:not(.product-mockup, .product-spec)) h4 {width: 26%; margin-bottom:25rem;}
.product-view__sec h4 {flex-shrink: 0; width: 26%; margin-bottom:25rem;}
.product-view__box {width: 74%;}
.product-view__box > p {color: var(--b-title); line-height: 1.6;}

.product-mockup {margin-top:var(--space140); margin-bottom:var(--space100);}
.product-mockup h4 {margin-bottom:8rem;}
.product-mockup > p {margin-bottom:30rem;}
.product-slider {magin-top:35rem;}
.product-slider .swiper-slide {aspect-ratio: 1/1;}
.product-slider figure {position:relative; width:100%; height:100%; background:var(--bg-light);}
.product-slider figure:not(:has(img))::after {content:''; position:absolute; left:50%; top:50%; width:65%; aspect-ratio:204/40; background:url(../img/layout/logo.svg) no-repeat center / contain; opacity:.15; transform:translate(-50%, -50%);}
.product-slider .zoom-view__btn {width: 100%; height: 100%;}
.product-slider .zoom-view__btn img {width: 100%; height: 100%;}
.product-slider .swiper-controls,
.product-slider .zoom-view__icon,
.product-slider .zoom-view__hint {display:none;}

.product-spec {margin-bottom:var(--space100); font-size: var(--default) !important; font-family: var(--lang-ko) !important;}
.product-spec table tr > * {padding: 12rem 15rem; }

.product-merit ul {display: flex; align-items: flex-start; flex-direction: column; gap: 8rem;}
.product-merit li {display: inline-flex; align-items: center; padding: 10rem 20rem; color: var(--b-title); border-radius: 100rem; border: 1px solid var(--op-b10);}
.product-merit li::before {content:''; display: block; width: 17rem; height: 17rem; margin-right: 6rem; background: url(../img/sub/ic-check.svg) no-repeat center / contain;}

.product-certify .tabs {margin-bottom: 25rem;}
.product-certify .tab__item li {text-align:center;}
.product-certify .tab__item figure {position: relative; aspect-ratio: 318/440;}
.product-certify .tab__item figure:not(:has(img)) {background:var(--bg-default);}
.product-certify .tab__item figure:not(:has(img))::after {content:''; position:absolute; left:50%; top:50%; width:65%; aspect-ratio:204/40; background:url(../img/layout/logo.svg) no-repeat center / contain; opacity:.15; transform:translate(-50%, -50%);}
.product-certify p {margin-top:18rem; color:var(--b-title);}

.product-use__list {display:flex; flex-wrap: wrap;}
.product-use__item {position:relative; width: 33.33%; text-align:center;}
.product-use__item figure {display:flex; align-items:center; justify-content:center; height:155rem; margin-bottom:20rem;}
.product-use__item figure img {max-height:100%; width: auto; height: auto; max-width: 100%; object-fit: contain;}
.product-us__txt::before {content:counter(product-use); counter-increment:product-use; display:flex; align-items:center; justify-content:center; width:22rem; height:22rem; margin:0 auto 12rem; border-radius:100%; background:var(--bg-light); font-size:12rem; font-weight:900; color:var(--op-b30); transition: var(--trans-01);}
.product-use__list {counter-reset:product-use;}
.product-use__item p {font-weight:600; line-height:27rem; color:var(--b-title);}
.product-use__notice {gap:13rem; width:100%; margin-top:48rem; padding:13rem 20rem; color: var(--bg-default);}
.product-use__notice span {display:inline-flex; align-items:center; gap:7rem; color:var(--op-b60);}
.product-use__notice span::before {content:''; width:17rem; height:17rem; background:url(../img/sub/ic-star.svg) no-repeat center / contain;}
.product-use__notice span::after {content:''; width:1rem; height:15rem; margin-left:6rem; background:var(--op-b10);}

.product-use__arrow {display: flex; align-items: center; justify-content: center; width: 100rem; height: 155rem; display: none !important;}
.product-use__arrow::after {filter: grayscale(1); opacity: .1; content:''; width: 24rem; height: 24rem; background-repeat: no-repeat; background-size: contain; background-position: center center; background-image: url(../img/sub/process-arrow.svg); transition: var(--trans-01);}

.product-use__item.active .product-us__txt::before {color: var(--w); background: var(--c-primary);}
.product-use__arrow.active::after {filter: grayscale(0); opacity: 1;} 

.product-view > .btn-wrap {gap:10rem; padding:4rem 0 150rem;}
.product-view > .btn-wrap .btn-basic {height: auto;}
.product-view > .btn-wrap .btn-basic p {min-width: 170rem; justify-content: center; padding: 20rem 25rem; font-size: var(--default);}

@media (hover: hover) and (pointer: fine){
	.product-slider figure:hover .btn-more {opacity: 1; transition-delay: 0.1s;}
	.product-slider figure:hover .btn-more::before {transform:scale(1);}
	.product-slider figure:hover .btn-more i,
	.product-slider figure:hover .btn-more p {opacity:1;}
}

@media all and (max-width:1600px){
	.product-intro__product {width: 380rem; height: 380rem;}
}

@media all and (max-width:1200px){
	.product-intro__product {display: none;}
	.product-view__sec:is(:not(.product-mockup, .product-spec)) {gap: 60rem;}
	.product-intro__con {padding: var(--space140) var(--margin);}
	.product-intro__con-inr {padding: 0;}
}

@media all and (max-width:1023px){
	.product-spec {margin: var(--space80) 0;}
	.product-view__sec {flex-direction: column; gap: 0; padding: var(--space80) 0 0; border-top: 1px dashed var(--op-b10);}
	.product-view__sec h4 {width: auto !important;}
	.product-view__box {width: 100%;}
	.product-use__item {width: calc((100% - 160rem)/3);}
	.product-use__arrow {width: 80rem;}
}

@media (max-width:860px){
	.product-intro {flex-direction: column; height: auto;}
	.product-intro > * {width: 100%;}
	.product-intro__thumb {height: 500rem;}
	.product-view__sec:is(:not(.product-mockup, .product-spec)) {gap: 0;}
	.product-intro__con {flex-direction: column; padding: var(--space100) var(--margin); text-align: center;}
	.product-view__sec:is(:not(.product-mockup, .product-spec)) {padding: var(--space80) 0;}
	.product-intro__con h3 {margin-bottom: 15rem;}
	.product-spec {margin: 0;}
	.product-intro__brand {margin-bottom: 40rem;}
	.product-intro__dec {position: relative; left: auto; bottom: auto; margin-top: var(--space80);}
	.product-mockup{margin-top: 0; margin-bottom: var(--space80);}
	.product-view__box > p br {display: none;}
	.product-use__item p {font-weight: 500; line-height: 1.5;}
}

@media (max-width: 540px){
	.product-intro__con {padding: var(--space140) var(--margin) var(--space80);}
	.product-intro__thumb {height: 300rem;}
	.product-intro__brand {width: 200rem; height: 80rem; margin-bottom: 32rem;}
	.product-intro__con [data-list="tag-list"] {margin-top: 25rem;}
	.product-view__sec:is(:not(.product-mockup, .product-spec)) h4 {margin-bottom: 15rem;}
	.product-mockup h4 {margin-bottom: 6rem;}
	.product-mockup > p {margin-bottom: 25rem;}
	.product-intro__dec {font-size:50rem;}

	.product-merit li {display: flex; width: 100%; align-items: flex-start; padding: 10rem 12rem; border-radius: 5rem;}
	.product-merit li::before {flex-shrink: 0; width: 12rem; height: 12rem; margin-top: 5rem;}
	.product-certify .tabs {justify-content: flex-start;}
	.product-certify [data-grid] {grid-template-columns: repeat(2, 1fr); gap: 30rem 20rem;}
	.product-certify p {margin-top: 12rem;}
	.product-use__list {row-gap: 30rem;}
	.product-use__item {width: calc((100% - 42rem)/2);}
	.product-use__arrow {width: 42rem;}
	.product-use__arrow:nth-child(4n) {display: none;}
	.product-use__arrow::after {width: 14rem; height: 14rem;}
	.product-us__txt::before {width: 18rem; height: 18rem; font-size: 10rem; margin-bottom: 10rem;}

	.product-view__box > p {display: flex; flex-direction: column; justify-content: center; gap: 6rem;}
	.product-use__notice {padding: 20rem;}
	.product-use__notice span {gap: 5rem;}
	.product-use__notice span::before {width: 14rem; height: 14rem;}
	.product-use__notice span::after {display: none;}
} 

/* 온라인문의 */
.cs-form-container {gap: 200rem;}
.cs-form__title {flex-shrink: 0;}
.cs-form__title h3 {position: sticky; top: 80rem;}
.cs-form-container .form-area[data-form="agree"] {padding: 10rem 0;}
.cs-form-container .form-area[data-form="agree"] em {font-weight: 700; color: var(--b-title);}
.cs-form-container .form-area[data-form="agree"] .show-btn {color: var(--b-default); text-underline-offset: 3rem;}
.cs-page .btn-wrap {margin-top: 35rem; padding-top: 40rem; text-align: right; border-top: 1px solid var(--op-b10);}

@media all and (max-width:1023px){
	.cs-form-container {gap: var(--space100);}
	.cs-form-container .cs-form .w50 {width: 100% !important;}
	.cs-form-container .form-area {margin-bottom: 0;}
}

@media (max-width: 540px){
	.cs-form-container {flex-direction: column; gap: 30rem;}
	.cs-form-container .form-area[data-form="agree"] .show-btn { margin-left: 0;}
	.cs-form-container .form-area[data-form="agree"] em {display: block; margin-bottom: 6rem;}
	.cs-form__title h3 {text-align: center;}
	.cs-page .btn-wrap {margin-top: 0; padding-top: 20rem; text-align: center;}
}