@charset "utf-8";

/*
* File       : layout.css
* Author     : B-WORKER
* Dependency : css/reset.css
*
 * SUMMARY:
 * 레이아웃 관련만 선언합니다.
 *
 * 01) GLOBAL BODY
 * 02) HEADER
 * 03) FOOTER
 * 04) SCROLL TOP
 * 05) 404
*/

/* **************************************** *
 * GLOBAL
 * **************************************** */
body{overflow-x:hidden;overflow-y:overlay;}
body.scroll-hide{overflow-y:hidden;}
body.scroll-hide #header{position: fixed;}
body::after{content:"";position: fixed;opacity:1;top:0;left:0;z-index:9999;width:100%;height:100%;background:#fff;transition: all 0.7s ease;}
body:has(#main)::after{display: none;}
body.motion-on::after{opacity:0; visibility:hidden;}

/*body.fixed{overflow:hidden; top:0; right:0; bottom:0; left:0; width:100%; height:100%;}*/

/* scroll set */
::selection{background: #631288c7;color:#fff;}

/* 스크롤바 커스텀 */
*::-webkit-scrollbar{width:16rem;background-color:#ebebeb;}
*::-webkit-scrollbar-thumb:hover{background-color: #a7a7a7;}
::-webkit-scrollbar-thumb{background-color:#C1C1C1;}

@media (max-width:860px){
	*::-webkit-scrollbar{display:none !important; width:0; height:0;}
}

/* **************************************** *
 * HEADER
 * **************************************** */
#header{position:fixed; z-index:51; width:100%; padding:20rem 0; background:transparent; transition:padding .4s, transform .4s;}
#header.hide{transform:translateY(-100%) !important;}
#header h1{font-size:0;}
#header:has(#site-map.active){position:fixed;}

.header-inner{position:relative; display:flex; justify-content:space-between; align-items:center; backdrop-filter:blur(5rem); -webkit-backdrop-filter:blur(5rem); background:rgba(3,7,16,.2); border:1px solid rgba(255,255,255,.1); border-radius:7rem; padding:18rem 20rem; transition:background .4s, border-color .4s;}

#logo{position:relative; z-index:81; flex-shrink:0;}
#logo a{display:block; width:51rem; height:42rem; background-size:contain; background-position:50% 50%; background-repeat:no-repeat; background-image:url(../img/layout/logo_w.svg);}
#logo img{height:42rem;}

/* 헤더 우측 유틸 영역 */
.header-util{display:flex; align-items:center; gap:10rem; flex-shrink:0;}
.header-util__btns{display:flex; align-items:center; gap:5rem;}

/* 카달로그 다운로드 버튼 */
.header-catalog{display:flex; align-items:center; gap:7rem; height: 42rem; padding: 10rem 20rem; background:#E7F6F6; border-radius:4rem; transition:var(--trans-04); text-decoration:none;}
.header-catalog__icon {display:block; width:14rem; height:14rem; background: var(--b-title); mask-image:url(../img/layout/ic-download.svg); mask-repeat: no-repeat; mask-position: center center; mask-size: contain; transition: var(--trans-01);}
.header-catalog span {font-size:14rem; font-weight:500; line-height:1.428; letter-spacing:-0.02em; color:var(--b-title); white-space:nowrap; transition: var(--trans-01);}

@media (hover:hover) and (pointer:fine){
	.header-catalog:hover {background: var(--c-primary) !important; box-shadow: 0 0 30px 0 rgba(48, 223, 216, 0.20);}
	.header-catalog:hover .header-catalog__icon {background: var(--w) !important;}
	.header-catalog:hover span {color: var(--w) !important;}
}

/* global btn */
.lang-menu{gap:10rem;}
.lang-menu a{opacity: 0.5 !important;color:#fff;font-weight: 800;}
.lang-menu li.on a{opacity: 1 !important;}
.lang-menu .select-link{width: 60rem; height: 42rem;}
.lang-menu img{height:24rem;}
.lang-menu i{display:none;}
.lang-menu .select-link__btn::after{display:none;}
.lang-menu .select-link__btn{display:flex; justify-content:center; width: 100%; height: 100%;}
.lang-menu .select-link > ul{margin-top: 0; border-radius: 4rem;}
.lang-menu .select-link > ul a{padding:3rem 15rem; font-size:13rem; text-align:center;}
.lnag-menu__icon{min-width: 16rem;height: 16rem;background-position:50% 50%;background-image:url(../img/common/ic-lang_w.svg);background-repeat:no-repeat;background-size:contain;}

/* basic gnb */
.gnb-container{display:inline-block;}
.gnb-full-cover{position:absolute; opacity:0; visibility:hidden; top:0; left:0; z-index:-1; width:100%; height:100%; background:#fff; box-shadow:15rem 20rem 29rem 0rem rgba(0, 0, 0, 0.23); transition:var(--trans-01);}

#gnb{display:flex; align-items:center; gap:40rem; position:absolute; inset:0; margin:auto; width:fit-content; height:fit-content;}
#gnb .gnb-item{position:relative;}
#gnb .gnb-item > a{display:inline-block; font-family:var(--lang-en); font-weight:300; color:var(--w); font-size:var(--font-15); letter-spacing:-0.02em; line-height:1.533; white-space:nowrap; transition:var(--trans-01);}
#gnb:not(.gnb-full):not(.gnb-inline) .gnb-item > a{padding: 35rem 0;}
#gnb .gnb-item .sub-menu > li.on > a{color:var(--c-primary) !important; font-weight:600 !important;}
#gnb .gnb-item > a.on{color:var(--c-primary) !important;}

.sub-menu-depth{display: none;} /* 3차메뉴 숨김 */
.btn_close{opacity:0; font-size:0;}

/* header on */
#header:is(.color-on, .on) .header-inner{max-width: none; margin: 0 20rem; background:var(--op-w90); border:1px solid rgba(55, 155, 151, 0.20);}
#header:is(.color-on, .on) #logo a{background-image:url(../img/layout/logo.svg);}
#header:is(.color-on, .on) .lang-menu a{color:#aaa;}
#header:is(.color-on, .on) .lang-menu li.on a{color:var(--c-primary);}
#header:is(.color-on, .on) .lnag-menu__icon{background-image:url(../img/common/ic-lang.svg);}
#header:is(.color-on, .on) .lang-menu i{color: var(--b-01);}
#header:is(.color-on, .on) #gnb .gnb-item > a{color:var(--b-title); font-weight: 500;}
#header:is(.color-on, .on) .header-catalog {background: var(--bg-dark);}
#header:is(.color-on, .on) .header-catalog__icon {background: var(--w);}
#header:is(.color-on, .on) .header-catalog span {color: var(--w);}
#header:is(.color-on, .on) .gnb-full-btn {background:var(--w);}


/* **************************************** *
 * MOBILE MENU
 * **************************************** */
.gnb-mobile-btn{display:none; position:relative; z-index:80; padding:10rem 0rem; cursor:pointer;}
.gnb-mobile-btn span{display:block; position:relative; width:100%; height:3px; background:#fff; transition:all 0.4s ease;}
.gnb-mobile-btn .inner{display:grid;width: 32rem;height: 11rem;align-content:space-between;}
.gnb-mobile{position:fixed;opacity:0;visibility:hidden;overflow:hidden;top:0;right: 0;width:100%;height:100vh;background:#fff;transition:all 0.3s ease;overflow-y: scroll;}
.gnb-mobile:has(.menu--st01){max-width: 550rem;}
.gnb-mobile-btn.active span:nth-child(1){top: 8rem;transform:rotate(45deg);}
.gnb-mobile-btn.active span:nth-child(2){transform:rotate(-45deg);}
.gnb-mobile-btn.active span{background:#222;}
.gnb-mobile.active{opacity:1; visibility:visible;}
.gnb-mobile-menu .gnb-item > a{display:inline-flex;align-items:center;position:relative;font-weight:700;font-size:27rem;color: var(--b-01);}
.gnb-mobile-menu{position:absolute;top:20vh;width:100%;box-sizing:border-box;padding:0rem 30rem;text-align:center;overflow: auto;}
.gnb-mobile-menu .gnb-item:not(:first-child){margin-top: 30rem;}
.gnb-mobile-menu .sub-menu{display:none; margin-top:22rem;}
.gnb-mobile-menu .sub-menu li a.on{color: var(--c-primary);}
.gnb-mobile-menu .gnb-item.active{padding-bottom:15rem;}
.gnb-mobile-menu .sub-menu li a{font-size:18rem;display: block;}
.gnb-mobile-menu .sub-menu li:not(:first-child){margin-top:12rem;}
.gnb-mobile-menu .gnb-item:has(li:nth-child(2)){}
.gnb-mobile-menu .gnb-item > a::after{content:"";display:none;position:absolute;right: -30rem;width: 26rem;height: 26rem;background: url(../img/board/arrow-select.svg) no-repeat 50% 50%;background-size: 16rem;}
.gnb-mobile-menu .gnb-item.active:has(li:nth-child(2)) > a::after{transform: rotate(180deg);}
.gnb-mobile-menu .gnb-item:has(li:nth-child(2)) > a::after{display:block;}
.gnb-mobile__copy{position:absolute; opacity:0.3; bottom:30rem; width:100%; font-weight:800; text-align:center;}
.gnb-mobile-menu .gnb-item{opacity:0; transition:all 0.7s ease; transform:translateY(30rem);}
.gnb-mobile.active  .gnb-item{opacity:1; transform:translateY(0rem);}
.gnb-mobile.active  .gnb-item:nth-child(1){transition-delay:100ms;}
.gnb-mobile.active  .gnb-item:nth-child(2){transition-delay:200ms;}
.gnb-mobile.active  .gnb-item:nth-child(3){transition-delay:300ms;}
.gnb-mobile.active  .gnb-item:nth-child(4){transition-delay:400ms;}
.gnb-mobile.active  .gnb-item:nth-child(5){transition-delay:500ms;}
.gnb-mobile.active  .gnb-item:nth-child(6){transition-delay:600ms;}
.gnb-mobile.active  .gnb-item:nth-child(7){transition-delay:700ms;}
.gnb-mobile.active  .gnb-item:nth-child(8){transition-delay:800ms;}

/* st 1 */
.gnb-mobile-menu.menu--st01{top:auto; bottom:0; height:calc(100% - 100rem); border-top:1px solid #f3f3f3; text-align:left;}
.gnb-mobile-menu.menu--st01::before{content:""; position:absolute; top:0; right:0; width:50%; height:100%; background:#f7f7f7;}
.gnb-mobile-menu.menu--st01 .gnb-item{width:50%;}
.gnb-mobile-menu.menu--st01 .sub-menu{position:absolute; top:0; left:100%; width:100%; box-sizing:border-box; margin-top:0;}
.gnb-mobile-menu.menu--st01 .gnb-item.active{padding:0;}
.gnb-mobile-menu.menu--st01 .gnb-item > a{font-size:20rem;}
.gnb-mobile-menu.menu--st01 .gnb-item:nth-child(1){margin-top:40rem;}
.gnb-mobile-menu.menu--st01 .gnb-item > a{display:flex;}
.gnb-mobile-menu.menu--st01 .gnb-item > a::after{right:25rem; width:12rem; height:12rem; transform:rotate(-90deg) !important;}
.gnb-mobile-menu.menu--st01 .gnb-item:not(:first-child){margin-top:23rem;}
.gnb-mobile-menu.menu--st01 .gnb-item.active > a{color:var(--c-primary);}
.gnb-mobile-menu.menu--st01 .gnb-item.active > a::after{background-image:url(../img/common/arrow-basic_c.svg);}
.gnb-mobile-menu.menu--st01 .sub-menu.active{opacity:1; visibility:visible; transform:translateY(0rem);}
.gnb-mobile-menu.menu--st01 .sub-menu{display:block; opacity:0; visibility:hidden; transition:var(--trans-01); transform:translateY(15rem);}

@media (max-width:1480px){
	#gnb .gnb-item > a{}
}

@media (max-width:1200px){
	.header-inner {height: 80rem;}
	#gnb {position: relative;}
	#gnb:not(.gnb-full):not(.gnb-inline) .gnb-item > a {padding: 35rem 0;}
}

@media (min-width: 1024px){
	#gnb .gnb-item .sub-menu{display:none;position:absolute;opacity:0;visibility:hidden;top: 92rem;left:50%;padding:8rem 17rem;background:var(--bg-dark); border-radius: 5rem; border: 1px solid var(--op-w10); box-shadow:15rem 20rem 29rem 0rem rgba(0, 0, 0, 0.23);transition:all 0.4s ease-out;transition-property: opacity, transform, visibility;transition-delay:0s, 0s, 0s;transform: translate(-50%, -20rem);}
	#gnb .gnb-item .sub-menu{display:block; min-width: 120rem; transition-delay:0.1s;}
	#gnb .gnb-item .sub-menu > li > a{display:block;position:relative; font-family: var(--lang-ko); padding:10rem 0rem; border-top:1rem solid var(--op-w10); font-size: var(--font-15); color:var(--op-w50);text-align:center;transition:var(--trans-01);}
	#gnb .gnb-item .sub-menu > li > a:hover{color: var(--w);}
	#gnb .gnb-item .sub-menu > li:first-child > a{border-top-width:0rem;}
	#gnb .gnb-item.active .sub-menu{opacity:1;visibility:visible;z-index:10;transition-delay:0s, 0s, 0s;transform: translate(-50%, 0);}

	#header:is(.color-on, .on) #gnb .gnb-item .sub-menu {background: var(--w); border-color: var(--br-default);}
	#header:is(.color-on, .on) #gnb .gnb-item .sub-menu > li > a {color: var(--op-b50);border-color: var(--br-default);}
	#header:is(.color-on, .on) #gnb .gnb-item .sub-menu > li > a:hover{color: var(--b-title);}
}

@media all and (max-width:1023px){
	#header{padding: 30rem 0;}
	#header .gnb-full-cover,
	#header::before{display:none;}
	#header:not(:has(.gnb-mobile-menu.menu--st01)).color-on #logo a{background-size:100%; background-image:url(../img/layout/logo.svg);}
	.header-inner {height: auto; padding: 15rem; padding-left: 17rem;}

	.gnb-container-wrap{display:none;}
	.gnb-mobile-btn{display:block;}
	.gnb-mobile-btn.active .inner{width:35rem;}
	.gnb-mobile-btn.active{top: -4rem;}

	.gnb-mobile-menu .gnb-item:has(li:nth-child(2)) > a{margin-left: -13rem;}
	.gnb-mobile-menu.menu--st01 .gnb-item:has(li:nth-child(2)) > a{margin-left:0;}
	.gnb-mobile-menu.menu--st01 .sub-menu li a{display:block; padding:4rem 20rem; font-size:16rem;}

	.sub-menu-depth{display:none;}

	.lang-menu .select-link{width:50rem;}
}

@media (max-width: 540px){
	#header{padding: 20rem 0;}
	#header:is(.color-on, .on) .header-inner {margin: 0 10rem;}
	#header.color-on #logo a, .scroll-hide #logo a{background-image: url(../img/layout/logo.svg) !important;}
	.header-util {gap: 0;}
	.header-inner {padding: 10rem; padding-left: 12rem;}
	.header-inner.wrap {margin: 0 10rem;}
	#logo a{width: 40rem;height:35rem;}

	.gnb-mobile-menu{top:19vh;padding-bottom: 7vh;}
	.gnb-mobile-btn .inner{width: 26rem;height: 11rem;}
	.gnb-mobile-btn.active .inner{width:26rem;}
	.gnb-mobile-btn.active span:nth-child(1){top: 8rem;}
	.gnb-mobile-menu .gnb-item:not(:first-child){margin-top: 19rem;}
	.gnb-mobile-menu .gnb-item > a{font-weight: 700;font-size:21rem;}
	.gnb-mobile-menu .gnb-item > a::after{width: 18rem;height: 18rem;background-size: 12rem;margin-left: 8rem;right: -23rem;}
	.gnb-mobile-menu .sub-menu li a{font-size:16rem;}
	.gnb-mobile-menu .sub-menu li:not(:first-child){margin-top: 12rem;}
	.gnb-mobile-menu .sub-menu{display:none; margin-top:18rem;}

	.gnb-mobile-menu.menu--st01{height: calc(100% - 80rem); padding:0rem 20rem;}
	.gnb-mobile-menu.menu--st01 .gnb-item > a{font-size:16rem;}
	.gnb-mobile-menu.menu--st01 .gnb-item > a::after{right:20rem; width:10rem; height:10rem;}
	.gnb-mobile-menu.menu--st01 .sub-menu li a{padding:2rem 18rem; font-size:14rem;}
	.gnb-mobile-menu.menu--st01 .gnb-item:nth-child(1){margin-top:25rem;}

	.lang-menu{right: 30rem;margin-top: -1rem;}
	.lang-menu .select-link{width:50rem;}
	.lang-menu .select-link > ul{margin-top:7rem; padding:7rem 0rem;}
	.lnag-menu__icon{margin-right: 7rem;min-width:15rem;height:15rem;}
	.lang-menu .select-link > ul a{font-size:12rem;}
	.lang-menu i{font-size: 12rem;}
}

/* **************************************** *
 * full page gnb site map
 * **************************************** */
 #site-map{position:fixed;opacity:0;visibility:hidden;top:0;left:0;z-index:51;width:100%;height:100vh;transition: none;transition-delay:0.1s;}
  #site-map::before {backdrop-filter: blur(15rem); -webkit-backdrop-filter: blur(15rem); position: fixed; left:0; top:0; content:''; width: 100%; height: 100%; background: var(--op-b50);}
 #site-map.active{opacity:1;visibility:visible;transition-delay:0s;transition: all 0.5s ease;}
 #site-map.active .gnb-item{opacity:1;transform:translateY(0rem);transition: all 0.7s ease;}
 #site-map.active .gnb-item:nth-child(1){transition-delay:100ms;}
 #site-map.active .gnb-item:nth-child(2){transition-delay:200ms;}
 #site-map.active .gnb-item:nth-child(3){transition-delay:300ms;}
 #site-map.active .gnb-item:nth-child(4){transition-delay:400ms;}
 #site-map.active .gnb-item:nth-child(5){transition-delay:500ms;}
 #site-map.active .gnb-item:nth-child(6){transition-delay:600ms;}
 #site-map.active .gnb-item:nth-child(7){transition-delay:700ms;}
 #site-map.active .gnb-item:nth-child(8){transition-delay:800ms;}

#site-map:has(.non-full) .site-map-inner{width:100%; margin:0; padding:30rem; background:var(--w); max-width:610rem;}

 .site-map-inner{position: absolute; right: 20rem; top: 20rem; min-width: 610rem; padding: 30rem; border-radius: 10rem; background: var(--w); box-shadow: 20rem 20rem 40rem 0 var(--op-b20);}
 .site-map__logo {width: 52rem; height: 42rem; margin-bottom: 40rem; background: url(../img/layout/logo.svg) no-repeat center / contain;}
 .site-map-list .gnb-item {padding: 20rem 0;}
 .site-map-list .gnb-item:not(:last-child) {border-bottom: 1px solid var(--br-default);}
 .site-map-list .gnb-item > a{font-family: var(--lang-en); font-weight:700; font-size:34rem; color: var(--b-title); letter-spacing: -0.04em;}
 .site-map-list.site-map--colum{display:grid; width:100%; text-align:center; grid-template-columns:repeat(6, 1fr);}
 .site-map-list.site-map--colum .sub-menu li:not(:first-child){margin-top:13rem;}
 .site-map-list.site-map--colum .sub-menu{margin-top:30rem;}
 .site-map-list.site-map--row{display:grid;}
 .site-map-list.site-map--row :is(.gnb-item, .sub-menu){display:flex; justify-content: space-between; align-items:center;}
 .site-map-list.site-map--row .sub-menu{margin-left:30rem; justify-content: flex-end;}
 .site-map-list .sub-menu a {font-family: var(--lang-ko); padding: 10rem; text-transform: uppercase; color: var(--op-b40); transition:var(--trans-01);}
 .site-map-list .sub-menu a:hover,
 .site-map-list .sub-menu a.on{color:var(--b-title); font-weight: 500;}
 /* .site-map-list.site-map--row.row-drap .gnb-item{display:flex; align-items:flex-start; flex-direction:column;}
 .site-map-list.site-map--row.row-drap .gnb-item .sub-menu{display:none; margin-top:15rem; margin-left:0;} */
 .site-map-list .gnb-item{opacity:0;transform:translateY(30rem);}

 .site-map-list.row-drap .gnb-item > a.active{color: var(--c-secondary);}
.site-map__cancle{position:absolute; top:40rem; right:40rem;}

.gnb-full-btn-wrap{position:relative; z-index:100;}
.gnb-full-btn{display:flex; align-items:center; flex-direction:row; gap:10rem; height: 42rem; padding: 10rem 20rem; border:1px solid rgba(55, 155, 151, 0.50); border-radius:4rem; cursor:pointer; transition:var(--trans-04);}
.gnb-full-icon {position: relative; width: 17rem; height: 17rem;}
.gnb-full-icon > span{position: absolute; left:50%; top:4rem; display:block; width:100%; height:1px; background:var(--c-primary); transform:translateX(-50%); opacity:1; transition:var(--trans-01);}
.gnb-full-icon > span:last-child {top: auto; bottom: 6rem;}
.gnb-full-btn .text{justify-content: center; font-family:var(--lang-en); font-size:var(--font-13); font-weight:300; color:var(--c-primary); letter-spacing:-0.02em; line-height:1.538;}
.gnb-full-btn .text::after{content:"MENU"; display:inline; margin-top:0; transition: var(--trans-01);}
.site-map__btn {position: absolute; top: 30rem; right: 30rem; display: flex; justify-content: center; align-items: center; min-width: 42rem; height: 42rem; border:1px solid var(--br-default); border-radius:4rem; cursor:pointer; transition:var(--trans-04);}
.site-map__btn .text::after{content:"CLOSE"; display: none;}
.site-map__btn .gnb-full-icon > span {position: absolute; left:50%; top: 50%; bottom: auto; width:100%; height:1px; background: var(--b-title);}
.site-map__btn .gnb-full-icon > span:nth-child(1) {transform: translate(-50%, -50%) rotate(45deg);}
.site-map__btn .gnb-full-icon > span:nth-child(2) {transform: translate(-50%, -50%) rotate(-45deg);}
#header:has(#site-map.active):not(:has(.non-full)) #logo a{background-image:url(../img/layout/logo.svg);}
#header.on {padding: 20rem 0;}
#header.on .gnb-full-btn{border-color:rgba(55,155,151,.3);}
.site-map__copyright {padding: 10rem 0; color: var(--op-b20);}

@media (hover: hover) and (pointer: fine){
	.gnb-full-btn:hover {background: var(--c-primary) !important; border-color: transparent !important;}
	.gnb-full-btn:hover .text::after {color: var(--w) !important;}
	.gnb-full-btn:hover .gnb-full-icon > span {background: var(--w) !important;}

	.site-map-list .gnb-item:hover > a {color: var(--c-secondary);}
	.site-map__btn:hover {border-color:transparent; background: var(--c-primary);}
	.site-map__btn:hover .gnb-full-icon > span {background: var(--w);}
}

@media (max-width:1023px){
	.gnb-full-btn-wrap{display: none;}
	.gnb-full-btn-wrap.mob{display:block;}
	body:has(.gnb-full-btn-wrap.mob) .gnb-mobile-btn{display:none;}
	.site-map-list, .site-map-list a, .sub-menu, .sub-menu > li a { width: 100%;  display: block;}
	.site-map-list.site-map--row.row-drap .sub-menu {display: flex !important;}
}

@media (max-width:860px){
	#site-map {padding: 20rem;}
	.site-map-inner {position: relative; right: auto; top: auto; display: flex; flex-direction: column; height: 100%;}
	.site-map__copyright {margin-top: auto;}
}

@media (max-width:540px){
	#header.on {padding: 10rem 0;}
	#site-map {padding: 10rem;}
	.site-map-inner {min-width: auto; padding: 20rem; height: calc(100vh - 20rem);}
	.site-map__logo {width: 47rem; height: 40rem; margin-bottom: 15rem;}
	.site-map__btn {top: 15rem; right: 15rem;}
	.site-map-list .gnb-item {flex-direction: column; gap:3rem;}
	.site-map-list .gnb-item > a{font-size: 24rem;}
	.site-map-list.site-map--row .sub-menu{justify-content: flex-start; margin-left: 0; gap: 20rem;}
	.site-map-list .sub-menu a {padding: 0;}
	.gnb-full-btn {width: 42rem; padding: 0; gap: 0; justify-content: center;}
	.gnb-full-btn .text {display: none;}
	.gnb-full-btn-wrap:has(.gnb-full-btn.active) {right: 20rem; top: 23rem;}
	.site-map-list .sub-menu a {font-size: 14rem;}
}

/* **************************************** *
 * footer
 * **************************************** */
#footer{position:relative; z-index:50; background:var(--b-title); color:var(--w);}

/* 상단 메인 영역 */
.footer-inner{padding-top:var(--space80);}

/* 좌측 */
.footet-left{display:flex; flex-direction:column;}
.footer-logo {margin-bottom:40rem;}
.footer-logo img{width:79rem;}
.footer-address {display:flex; flex-direction:column; gap:5rem;}
.footer-address dl{display:flex; align-items:center; gap:7rem;}
.footer-address dt{color:var(--op-w30); font-size: var(--font-13); text-transform:uppercase;}
.footer-address dd{font-size:var(--font-15); line-height:1.8; color:var(--w);}

/* GNB */
.footer-gnb {width: 50%;}
.footer-gnb .gnb-item:not(:last-child) {margin-bottom: 28rem;}
.footer-gnb .gnb-item a{font-family:var(--lang-en); font-size:25rem; line-height:1.2; letter-spacing:-0.04em; color:var(--w); text-decoration:none; transition:var(--trans-04);}
.footer-gnb .sub-menu {display: none;}

@media (hover:hover) and (pointer:fine){
	.footer-gnb a:hover{color:var(--c-primary);}
}

/* 우측 유틸 */
.footer-util{display:flex; align-items:center; gap:5rem;}
.footer-catalog{display:flex; align-items:center; gap:10rem; height:60rem; padding:0 20rem; backdrop-filter:blur(10rem); -webkit-backdrop-filter:blur(10rem); background:var(--op-w10); border:1px solid var(--op-w10); border-radius:5rem; cursor:pointer;}
.footer-catalog__icon{display:block; width:14rem; height:14rem; mask:url(../img/board/ic-download_w.svg) no-repeat 50% 50% / contain; background: var(--w); flex-shrink:0; transition: var(--trans-01);}
.footer-catalog span{font-size:var(--font-15); line-height:1.333; font-weight:500; letter-spacing:-0.02em; white-space:nowrap;}

/* 하단 바 (SNS | policy | copyright) */
.footer-bottom{display:flex; align-items:flex-end; justify-content:space-between; padding-bottom: 30rem; margin-top:86rem;}
.footer-sns{display:flex; align-items:center; gap:5rem;}
.footer-sns__icon{display:flex; justify-content:center; align-items:center; width:40rem; height:40rem; border:1px solid var(--op-w20); border-radius:5rem; transition: var(--trans-01);}
.footer-sns__icon img {width: 100%;}
.footer-policy{display:flex; align-items:center; gap:40rem; width: 50%; margin-left: auto; padding-left: 0rem;}
.footer-policy a{font-size:var(--font-15); line-height:1.8; color:var(--w); text-decoration:none; transition:var(--trans-04);}
.footer-copyright {position: absolute; right: 0; bottom: 35rem; font-size:var(--font-13); line-height:1.461; text-transform:uppercase; color:var(--op-w30) !important; white-space:nowrap;}

@media (hover:hover) and (pointer:fine){
	.footer-gnb a:hover{color:var(--c-primary);}
	.footer-policy a:hover{opacity:.6;}
	.footer-catalog:hover .footer-catalog__icon {background: var(--b-title);}
	.footer-sns__icon:hover {border-color: var(--c-primary); box-shadow: var(--glow);}
}

@media (max-width:1023px){
	.header-catalog{display:none;}
	.footer-inner{flex-wrap:wrap; gap:50rem;}
	.footer-gnb {width: auto; text-align: right; padding-top: 100rem;}
	.footer-gnb .gnb-item:not(:last-child) {margin-bottom: 17rem;}
	.footer-gnb a{font-size:18rem;}
	.footer-util{width:100%; padding-top:24rem; border-top:1px solid var(--op-w10);}
	.footer-bottom{align-items: center; justify-content: flex-start; gap: 30rem; margin-top: 50rem;}
	.footer-policy {width: auto;user-select: none; margin-left: 0; gap: 25rem;} 
	.footer-copyright{position: relative; right: auto; bottom: auto; margin-left: auto;}
}

@media (max-width:860px){
	.footer-gnb {display: none;}
	.footer-bottom {flex-wrap: wrap; gap: 20rem;}
	.footer-policy {margin-left: auto;}
	.footer-policy a {color: var(--op-w30); font-weight: 500;}
	.footer-copyright {width: 100%;}
}

@media (max-width:540px){
	.footer-inner{padding:40rem 0 0; gap:30rem;}
	.footer-logo{margin-top: 7rem; margin-bottom:40rem;}
	.footer-logo img{width:47rem;}
	.footer-gnb a{font-size:16rem;}
	.footer-address {gap: 3rem;}
	.footer-catalog.btn-basic {height: 50rem; gap: 8rem; padding: 12rem 15rem;}
	.footer-catalog span{font-size:var(--font-13);}
	.footer-catalog__icon {width: 12rem; height: 12rem;}
	.footer-bottom{flex-direction:column; align-items:flex-start; gap:10rem; padding-bottom:40rem;}
	.footer-policy{flex-wrap: wrap; margin-left: 0; margin-top: 10rem; gap:8rem 20rem;}
	.footer-policy a {color: var(--op-w50);}
	.footer-copyright {margin-top:5rem;}
}

/* **************************************** *
 * SCROLL TOP
 * **************************************** */
.btn-top-wrap{z-index: 1; position: absolute;top: 80rem;right:0;display: inline-flex; gap: 5rem; transition: var(--trans-01);}
a.btn-top{display:flex; justify-content:center; align-items:center; width:60rem; height:60rem; background:var(--c-primary); border-radius:5rem; box-shadow:0 0 15rem var(--glow); text-decoration:none; flex-shrink:0;}
a.btn-top .arrow-basic{background: var(--w); mask-image: url(../img/layout/btn-top.svg);}

@media (max-width:540px){
	.btn-top-wrap {top: 40rem;}

	a.btn-top{width:50rem; height:50rem;}
}