@charset "UTF-8";
/* common */
.section {min-height: 100vh; background-repeat: no-repeat; background-position: center; background-size: cover; position: relative;}
.section.h1080 .ly_inner {min-height: 100vh; height: auto;}
.section .bg {background-repeat: no-repeat; background-position: center; background-size: cover;}
.heading {--mg: -.135em; position: relative; font-weight: var(--fw-lt); text-transform: uppercase; margin: var(--mg) 0;}
.heading.lg {font-size: calc((110 / var(--base)) * 1rem); line-height: 1;}
.heading .dot::after {content: ""; display: inline-block; width: var(--size17); aspect-ratio: 1; border: 3px solid currentColor; border-radius: 50%; vertical-align: top; margin-left: var(--size11); transform: translateY(var(--size14));}
.heading.md {font-size: var(--vw100); line-height: .9;}
.heading.sm {font-size: var(--size30); line-height: .72;}
.sec_header .desc {font-size: calc(var(--vw100) * .26); line-height: 1; font-weight: var(--fw-md);}
.sec_header * + .heading.md {margin-top: calc(var(--vw100) * .26);}

/* nav */
.ly_navigation {position: fixed; left: 0; bottom: 0; width: 100%; height: 100vh; z-index: 100; pointer-events: none;}
.ly_navigation.fixed {position: absolute;}
.ly_navigation .ly_inner {display: grid; align-items: center; justify-content: end;}
.nav_list {pointer-events: auto; display: flex; flex-direction: column; align-items: flex-end;}
.nav_link {--ibg: transparent; --ibd: var(--color-deep2); display: inline-flex; justify-content: flex-end; align-items: center; font-size: var(--size12); line-height: var(--size24); color: var(--color-deep); gap: var(--size10); transition: color .2s;}
.nav_link::after {content: ""; display: block; width: var(--size12); aspect-ratio: 1; border: 2px solid var(--ibd); background: var(--ibg); border-radius: 50%;}
.nav_link:is(:hover, :focus-visible, .active) {--ibg: currentColor; --ibd: transparent; color: var(--color-light);}

/* .scroll_desc {position: absolute; right: var(--gl-pdd); bottom: 0; font-size: var(--size12); letter-spacing: .05em; color: var(--color-light); font-weight: var(--fw-bd); text-align: right; padding-bottom: var(--size24); padding-right: var(--size11);}
.scroll_desc::after {--rgb: 255,255,255; content: ""; position: absolute; right: 0; top: 0; width: 1px; height: 100%; background: linear-gradient(0deg, rgba(var(--rgb),0) 0%, rgba(var(--rgb),1) 55%, rgba(var(--rgb),1) 100%);} */
.scroll_desc {position: absolute; left: 0; bottom: var(--size24); width: 100%; text-align: center; font-size: var(--size12); letter-spacing: .05em; color: var(--color-light); font-weight: var(--fw-semi);}
.btn_sound {position: absolute; right: var(--gl-pdd); bottom: var(--size40); width: calc((56 / var(--base)) * 1rem); aspect-ratio: 1; background: rgba(137,137,107, 0.2) url('../../images/icon/ico_sound_off.png') no-repeat center/contain; border-radius: 50%;}
.btn_sound.soundOn {background-image: url('../../images/icon/ico_sound_on.png');}

/* main */
.sec_main .ly_inner {text-align: center; display: flex; justify-content: center; align-items: flex-end; padding-bottom: calc((145 / var(--hbase)) * var(--vh));}
.sec_main .txt_md {--mg: -.25em; margin: var(--mg) 0;}
.sec_main * + .txt_md {margin-top: calc(var(--size40) + var(--mg));}
.sec_main .bl_video_bg::after {content: ""; position: absolute; inset: 0; z-index: 0; background: rgba(0,0,0,0.2); pointer-events: none;}

/* Our Story */
.sec_story {background: #fff;}
.sec_story .row {position: relative; z-index: 1; height: 100vh;}
.sec_story .row .inner {height: 100vh; position: absolute; left: 0; top: 0; width: 100%;}
.sec_story .row.fixed .inner {position: fixed;}
.sec_story .row.end .inner {top: auto; bottom: 0;}
.sec_story .row1 {padding-top: 300vh;}
.sec_story .row1 .inner {--pt: 283; padding-top: calc((var(--pt) / var(--hbase)) * var(--vh));}
.sec_story .row1 .txt_area {padding: 0 var(--pdd);}
.sec_story .row1 * + .txt_lg {margin-top: calc((71 / var(--base)) * 1rem);}
.sec_story .row1 * + .txt_sm {margin-top: calc((41 / var(--base)) * 1rem);}
.sec_story .row1 * + .txt_md {margin-top: calc((68 / var(--base)) * 1rem);}
.sec_story .row2 .ly_inner {display: flex; align-items: flex-end; padding-bottom: calc((110 / var(--hbase)) * var(--vh));}
.sec_story .row2 .txt_area {padding-left: var(--pdd-lg);}
.sec_story .row2 .txt_md {--mg: -.1em; margin: var(--mg) 0;}
.sec_story .bg {position: absolute; left: 0; bottom: 0; width: 100%; height: calc(var(--vh1080) * 2); background-image: url('../../images/img/sec_stroy_bg.jpg');}

@media (max-height: 899.99px) {
	.sec_story .row1 .inner {--pt: 183;}
}

@media (min-width: 1921px) {
	.sec_story .row1 {padding-top: 280vh;}
}


/* Unique Value */
.sec_value {overflow: hidden;}
.sec_value .ly_inner {--pt: 10.2%; --head: max(calc((535 / var(--wbase)) * var(--vw)), 285px); display: grid; grid-template-areas: ". header cont"; grid-template-columns: var(--size40) var(--head) auto; height: 100vh; padding-top: var(--pt); overflow: hidden;}
.sec_value .sec_header {--pr: max(calc((80 / var(--wbase)) * var(--vw)), 42px); grid-area: header; text-align: right; padding-right: var(--pr);}
.sec_value .value_content {grid-area: cont;}
.sec_value .pager {position: absolute; left: var(--gl-pdd); top: 0; height: 100%; display: flex; flex-direction: column; justify-content: center;}
.sec_value .pager span {--bg: var(--color-deep); display: flex; align-items: center; width: var(--size15); height: var(--size19); cursor: pointer;}
.sec_value .pager span::after {content: ""; display: block; width: 100%; height: 3px; background: var(--bg);}
.sec_value .pager span.active {--bg: var(--color-primary);}
.value_content {display: flex; position: relative; /* overflow: hidden; */}
.value_content .item {--size: calc(var(--vw100) * 7.51); width: 100vw; --d: .2s; --delay: var(--d);}
.value_content .item:not(:first-child) {position: absolute; inset: 0;}
.value_content .item:not(.on) {opacity: 0; pointer-events: none;}
.value_content .bl_video {width: var(--size); margin-bottom: calc((56 / var(--base)) * 1rem); --delay: var(--d);}
.value_content .info {position: absolute; z-index: 10; left: 100%; bottom: 2.76em; font-size:calc(var(--vw100) * .25); font-weight: var(--fw-semi); letter-spacing: 0.05em; white-space: nowrap; margin-left: -2.56em; --delay: calc(var(--d) + .6s);}
.value_content .cont {width: var(--size); transform: translateX(var(--size6));}
.value_content .cont.wide {width: calc(var(--size) * 1.1);}
.value_content .tit {font-size: var(--size35); font-weight: var(--fw-bd); margin-bottom: var(--size27); --delay: calc(var(--d) + .2s);}
.value_content .txt_md {line-height: var(--size30); font-weight: var(--fw-lt); --delay: calc(var(--d) + .4s); letter-spacing: -0.01em;}
.value_content .anim {--dist: 150px; --dur: 0.8s; opacity: 0;}
.value_content .anim.on {animation-name: slideUp, fadeIn; animation-duration: var(--dur), var(--dur); animation-delay: var(--delay), var(--delay); animation-timing-function: var(--easing-out2), ease; animation-fill-mode: both, both;}
.value_content .info.on {animation-name: slideLeft, fadeIn; animation-duration: var(--dur), var(--dur); animation-delay: var(--delay), var(--delay); animation-timing-function: var(--easing-out2), ease; animation-fill-mode: both, both;}

@media (min-height: 1080px) {
	.sec_value .ly_inner {padding-top: calc(var(--pt) * 1.35);}
}

/* Product */
.sec_product {background: var(--color-primary);}
.sec_product .ly_inner {padding-top: calc(var(--vh1080) * 0.1712963);}
.sec_product h3.heading {color: var(--color-bg); text-align: center; margin-bottom: var(--size33);}

.product_list {width: 100%; max-width: var(--max1520); margin-inline: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));}
.product_list .item a {--op: 0; --rot: -90deg; aspect-ratio: 1/0.84211; background: var(--color-bg); display: grid; grid-template-areas: "item"; position: relative; overflow: hidden; box-shadow: inset 1px 1px 0 0 var(--color-primary);}
.product_list .item a:is(:hover, :focus-visible) {--op: 1; --rot: 0deg;}
.product_list .item a::before,
.product_list .item a::after {content: ""; position: absolute; inset: 0; pointer-events: none; opacity: var(--op);}
.product_list .item a::before {background: rgba(0,0,0,.5); z-index: 10; transition: opacity var(--trans);}
.product_list .item a::after {background: url('../../images/icon/ico_more.svg') no-repeat center/71px; z-index: 15; transition: opacity var(--trans), transform .3s var(--easing-out); will-change: transform; transform: rotate(var(--rot));}
.product_list .item img {grid-area: item; position: absolute; inset: 0; width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain;}
.product_list .item .name {grid-area: item; font-size: 1rem; line-height: .8; font-weight: var(--fw-lt); color: var(--color-primary); text-transform: uppercase; padding: 10.53%;}

.productDetail .modal_content {max-width: var(--max1520); transform: translateY(5%); overflow-x: auto;}
.productDetail .modal_body {--imgw: calc(var(--vw100b) * 3.7); width: 100%; max-width: var(--max1520); height: calc((640 / var(--base)) * 1rem); display: grid; grid-template-areas: "img cont btns"; grid-template-columns: var(--imgw) auto var(--vw100); background: #fff; }

@media (max-width: 1199.99px) {
	.productDetail .modal_body {--imgw: 0;}
}

.productDetail .visual {grid-area: img; overflow: hidden; position: relative; font-size: var(--vw100b);}
.productDetail .visual img {position: absolute; inset: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; --scl: 1.2; --dur: 2s; transform-origin: center 10%; filter: brightness(0.2);}
.productDetail .visual img.on {transform: scale(var(--scl)); animation: zoomIn var(--dur) var(--easing-out2) both;}
.productDetail .content {grid-area: cont; max-height: 100%; overflow-y: auto; padding: var(--size70) 0; opacity: 0; --dur: 1s;}
.productDetail .content.on {animation: fadeIn var(--dur) var(--easing-out2) both;}
.productDetail .btns {grid-area: btns; display: grid; grid-template-columns: 100%; grid-template-rows: var(--vw100) repeat(2, 1fr); overflow: hidden;}
.productDetail .btns .el_btn {--z: 0; --bd: var(--color-bg); --bgz: var(--size22); --op: 1; background-repeat: no-repeat; background-position: center; background-size: var(--bgz) auto; position: relative; z-index: var(--z); border-bottom: 1px solid var(--bd); border-left: 1px solid var(--bd); margin-bottom: -1px;}
.productDetail .btns .el_btn:is(:hover, :focus-visible) {--z: 1; --bd: var(--color-primary); --bg: var(--color-primary);}
.productDetail .btns .el_btn::after {content: ""; position: absolute; inset: 0; background-repeat: no-repeat; background-position: center; background-size: var(--bgz) auto; opacity: var(--op);}
.productDetail .btns [data-control="close"]::after {background-image: url('../../images/icon/ico_colse.svg'); --bgz: 1rem;}
.productDetail .btns [data-control="prev"]::after {background-image: url('../../images/icon/ico_arr_prev.svg');}
.productDetail .btns [data-control="next"]::after {background-image: url('../../images/icon/ico_arr_next.svg');}
.productDetail .btns .el_btn:disabled {--op: .4;}
.productDetail .pager {display: flex; justify-content: flex-end; align-items: flex-end; color: var(--color-primary); font-weight: var(--fw-lt); line-height: 1; padding: var(--size23) 0; gap: var(--size12);}
.productDetail .pager .total {font-size: var(--size30); line-height: .7;}
.productDetail .pager .current {font-size: var(--size50); line-height: .7;}



[class*="product_detail_"] {display: grid; color: var(--color-bg); padding-left: calc(var(--vw100) * .57); padding-right: calc(var(--vw100) * .3);}
.product_detail_sink {--col: 963; --col1: calc((327 / var(--col)) * 100%); --col2: calc((103 / var(--col)) * 100%); --col5: calc((150 / var(--col)) * 100%); grid-template-areas: "img img spec spec info" "header acc acc acc info"; grid-template-columns: var(--col1) var(--col2) auto auto var(--col5);  grid-template-rows: calc((268 / var(--base)) * 1rem) auto; height: 100%;}

@media (min-width: 1200px) {
	.product_detail_sink {--col1: calc(var(--vw100b) * 3.27); --col2: calc(var(--vw100b) * 1.03); --col5: calc(var(--vw100b) * 1.5);}
}

.product_detail_sink .header {grid-area: header; display: flex; flex-direction: column;}
.product_detail_sink .image {grid-area: img; filter: drop-shadow(var(--size15) var(--size30) var(--size30) rgba(7,0,2,.5));}
.product_detail_sink .image img {--wrem: calc((var(--w) / var(--base)) * 1rem); --wper: calc(var(--w)/430 * 100%); width: min(var(--wrem), var(--wper));}
.product_detail_sink .spec {grid-area: spec;}
.product_detail_sink .acc {grid-area: acc;}
.product_detail_sink .info {grid-area: info; display: flex; justify-content: center; padding-top: var(--size16);}

.product_detail_sink .heading .logo {width: calc((205 / var(--base)) * 1rem);}
.product_detail_sink .heading strong {display: block; font-size: var(--size60); line-height: .6; margin-top: 0.26667em;;}
.product_detail_sink .header .el_btn {margin-top: auto;}

@media (min-width: 1200px) {
	.product_detail_sink .heading .logo {width: calc(var(--vw100) * 2.05);}
	.product_detail_sink .heading strong {font-size: calc(var(--vw100) * .6);}
	.product_detail_sink .header .el_btn {width: calc(var(--vw100) * 2.46); font-size: calc(var(--vw100) * .18); padding: 0 calc(var(--vw100) * .25); gap: calc(var(--vw100) * 0.09);}
	.product_detail_sink .header .el_btn c-icon {--size: calc(var(--vw100) * .33);}
}

.product_detail_sink .spec_list {line-height: var(--size30); display: grid; grid-template-columns: min-content auto; font-weight: var(--fw-semi); column-gap: var(--size40);}
.product_detail_sink .spec_list dt {grid-column: 1/2; white-space: nowrap;}
.product_detail_sink .spec_list dt::before,
.product_detail_sink .subTit::before {content: ""; display: inline-block; width: var(--size8); aspect-ratio: 1; border: 1px solid currentColor; border-radius: 50%; vertical-align: middle; margin-top: calc(var(--size8) * -0.5); margin-right: var(--size14);}
.product_detail_sink .spec_list dt .sub {font-size: var(--size16);}
.product_detail_sink .spec_list dd {grid-column: 2/-1;}
.product_detail_sink .subTit {font-weight: var(--fw-semi); line-height: .72; margin-bottom: var(--size23);}
.product_detail_sink .subTit::before {margin-right: var(--size8);}

.product_detail_sink .acc_list {--wrem: calc((456 / var(--base)) * 1rem); --wper: calc(456/486 * 100%); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(var(--wrem), var(--wper)); gap: var(--size9);}
.product_detail_sink .acc_list .img {--rto: 1/0.8973; margin-bottom: var(--size14);}
.product_detail_sink :where(.acc_list, .info_list) .name {--mg: -.22em; font-size: var(--size16); font-weight: var(--fw-md); text-align: center; margin: var(--mg) 0;}
.product_detail_sink :where(.acc_list, .info_list) .name .sub {font-size: var(--size14);}

.product_detail_sink .info_list {display: flex; flex-direction: column; text-align: center; gap: var(--size34);}
.product_detail_sink .info_list .img {--wper: calc(90/150 * 100%); width: min(var(--size90), var(--wper)); --rto: 1; margin-inline: auto; margin-bottom: var(--size6);}
.product_detail_sink .info_list .name {--mg: -.2em; line-height: var(--size18);}

@media (min-width: 1200px) {
	.product_detail_sink .spec_list {column-gap: calc(var(--vw100) * 0.4);}
}

.product_detail_acc {grid-template-areas: "header" "cont"; grid-template-rows: min-content auto; padding: var(--size9) calc(var(--vw100b) * .8) 0; margin-bottom: calc(var(--size18) * -1); gap: var(--size73);}
.product_detail_acc .header {grid-area: header;}
.product_detail_acc .acc_content {grid-area: cont;}

.product_detail_acc .heading {text-align: left;}
.product_detail_acc .heading .logo {width: calc((153 / var(--base)) * 1rem); height: var(--size15);}
.product_detail_acc .heading strong {display: block; font-size: var(--size40); line-height: .75; margin-top: 0;}
.product_detail_acc .acc_list {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "img" "name" "spec" "desc"; grid-template-rows: min-content min-content min-content auto; column-gap: var(--size70); text-align: center;}
.product_detail_acc .acc_list .item {grid-row: 1/-1; display: grid; grid-template-rows: subgrid;} 
.product_detail_acc .acc_list .img {--sc: 1; grid-area: img; background: var(--color-bg); aspect-ratio: 1; width: 100%; max-width: calc((250 / var(--base)) * 1rem); margin-bottom: var(--size21); overflow: visible;}
.product_detail_acc .acc_list .img img {pointer-events: none; transform: scale(var(--sc));}
.product_detail_acc .acc_list .name {grid-area: name; font-size: var(--size30); line-height: .75; font-weight: var(--fw-bd);}
.product_detail_acc .acc_list .spec {grid-area: spec; font-size: var(--size20); line-height: .8; font-weight: var(--fw-semi); margin-top: var(--size9);}
.product_detail_acc .acc_list .desc {grid-area: desc; font-size: calc((16.51 / var(--base)) * 1rem); line-height: 1.24955; font-weight: var(--fw-md); margin-top: var(--size17);}

@media (min-width: 1200px) {
	.product_detail_acc .acc_list {column-gap: calc(var(--vw100b) * .7);} 
	.product_detail_acc .acc_list .name {font-size: calc(var(--vw100c) * .3);} 
	.product_detail_acc .acc_list .spec {font-size: calc(var(--vw100c) * .2);} 
	.product_detail_acc .acc_list .desc {font-size: calc(var(--vw100c) * .1651);} 
}