/* 헤더 */
#header { position: fixed; top: 0; z-index: 50; transform: translateY(-100%); width: 100%; height: 5.6rem; border-bottom: 1px solid transparent; background: transparent; transition: background .3s, border-color .3s; } 
#header.white { background: transparent; border-color: transparent; } 
#header.line { border-color: var(--border-color); background: var(--white); } 
#header .gnb { display: flex; align-items: center; justify-content: space-between; padding: 0 1.6rem; width: 100%; height: 100%; } 
#header .gnb .logo a { display: flex; width: 6.4rem; height: 3.2rem; } 
#header .gnb .logo svg { width: 100%; height: 100%; } 
#header .gnb .logo svg path { transition: .3s; } 
#header.white .gnb .logo svg path { fill: var(--white); } 
#header.line .gnb .logo svg path { fill: var(--black); } 
#header .gnb .btn-menu { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 2.8rem; height: 2.8rem; border: none; background: none; } 
#header .gnb .btn-menu::before { content: ""; width: 100%; height: 100%; background: url("../icons/ico_menu.svg") no-repeat center / cover; transition: filter .3s; } 
#header .gnb .btn-menu .line { display: none; } 
#header.white .gnb .btn-menu::before { filter: invert(1); } 

/* 사이드 바 */
.side-nav { position: fixed; top: 0; right: 0; z-index: 51; opacity: 0; visibility: hidden; width: 100%; height: 100%; background: rgba(var(--black-rgb), .4); transition: opacity .3s, visibility .3s; } 
.side-nav.active { opacity: 1; visibility: visible; } 
.side-nav .side-wrap { display: flex; flex-direction: column; gap: 6rem; position: absolute; top: 0; right: 0; transform: translateX(100%); padding: 0 1.6rem; width: 100%; max-width: 28rem; height: 100%; background: var(--primary); transition: transform .3s; } 
.side-nav.active .side-wrap { transform: translateX(0); } 
.side-nav .side-header { display: flex; align-items: center; justify-content: space-between; height: 5.6rem; } 
.side-nav .side-header .sns-wrap { display: flex; align-items: center; gap: .4rem; } 
.side-nav .side-header .sns-wrap a { width: 3.2rem; height: 3.2rem; } 
.side-nav .side-header .sns-wrap a img { width: 100%; height: 100%; object-fit: cover; } 
.side-nav .side-header .btn-menu-close { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: none; background: none; } 
.side-nav .side-header .btn-menu-close::before { content:""; width: 100%; height: 100%; background: url("../icons/ico_close.svg") no-repeat center / cover; } 
.side-nav .side-body { flex: 1; } 
.side-nav .side-body li:not(:last-child) { border-bottom: 1px solid rgba(var(--white-rgb), .13); } 
.side-nav .side-body a { display: block; padding: 1.6rem 0; font-weight: 600; color: var(--white); } 
.side-nav .side-body li:first-child a { padding-top: 0; } 
.side-nav .side-body li:last-child a { padding-bottom: 0; } 
.side-nav .side-footer { position: relative; padding: 2rem 0 4rem; } 
.side-nav .side-footer > strong { color: var(--white); font-weight: 800; } 
.side-nav .side-footer dl { display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 1.2rem; margin-top: .8rem; } 
.side-nav .side-footer dt { font-weight: var(--fw-bold); } 
.side-nav .side-footer dd { margin: 0; } 
.side-nav .side-footer dt, .side-nav .side-footer a { color: var(--white); } 

/* 플로팅 메뉴 */
.floating { display: flex; align-items: center; justify-content: flex-start; gap: 0.8rem; position: fixed; left: 0; right: 0; bottom: 2rem; z-index: 49; transform: translateY(150%); margin: auto; padding: 0 1.6rem; width: 100%; } 
.floating .sns-wrap { display: flex; align-items: center; gap: 0.4rem; padding: 0.6rem 0.8rem; background: rgba(var(--black-rgb), .2); backdrop-filter: blur(.7rem); border-radius: 10rem; } 
.floating .sns-wrap a { width: 4rem; height: 4rem; } 
.floating .sns-wrap a img { width: 100%; height: 100%; } 
.floating .btnset { min-width: 13.2rem; height: 5.2rem; box-shadow: 0 0 1rem 0 rgba(186,186,186,.25); border: 2px solid transparent; } 
.floating .btnset i { display: flex; align-items: center; justify-content: center; } 
.floating .btnset strong { display: flex; align-items: flex-end; gap: 0.2rem; } 
.floating .btnset b { font-family: var(--ff-en5); font-weight: var(--fw-bold); } 
.floating .btnset span { transform: translateY(-.2rem); font-size: 1.4rem; line-height: 2.4rem; font-weight: var(--fw-regular); } 
.floating .scroll-btn { display: none; } 

/* 푸터 */
#footer { display: flex; align-items: center; padding: 0 1.6rem; width: 100%; min-height: 4.4rem; background: var(--black); } 
#footer small { color: var(--white); font-family: var(--ff-ko5); } 

/* 팝업 */
.pop-area { display: none; align-items: center; justify-content: center; position: fixed; top: 0; left: 0; z-index: 99; opacity: 0; padding: 0 4rem; width: 100%; height: 100dvh; background: rgba(var(--black-rgb), .5); } 
.pop-area .pop-cont { width: 100%; max-width: 42rem; } 
.pop-area .pop-header { display: flex; align-items: center; justify-content: flex-end; gap: .8rem; } 
.pop-area .pop-header .checkset .checkset-label { padding-left: 2.8rem; color: var(--white); } 
.pop-area .pop-header .checkset .checkset-label::before { background: transparent; } 
.pop-area .pop-header .pop-close { display: flex; align-items: center; justify-content: center; width: 3.6rem; height: 3.6rem; border: none; border-radius: 50%; background: var(--primary); color: var(--white); font-size: 1.4rem; } 
.pop-area .pop-body { margin-top: .8rem; width: 100%; } 
.pop-area .pop-body img { width: 100%; object-fit: contain; } 

@media (min-width: 992px) { 
 #header { height: 9.4rem; } 
 #header .gnb { padding: 0 8rem; } 
 #header .gnb .logo a { width: 10.8rem; height: 6.2rem; } 
 #header .gnb .btn-menu { align-items: flex-end; gap: 0.8rem; padding: 0 0.76rem; width: 4.6rem; height: 4.6rem; } 
 #header .gnb .btn-menu::before { content: none; } 
 #header .gnb .btn-menu .line { display: block; width: 100%; height: 0.2rem; background: var(--black); border-radius: 10rem; transition: background .3s; } 
 #header .gnb .btn-menu .line:nth-child(3) { width: 2.3rem; transition: width .3s; } 
 #header .gnb .btn-menu:hover .line:nth-child(3) { width: 100%; } 
 #header.white .gnb .btn-menu .line { background: var(--white); } 
 
.floating { justify-content: flex-end; transform: translateY(170%); padding: 0 8rem; } 
.floating .sns-wrap { padding: 0.8rem; } 
.floating .sns-wrap a { width: 4.8rem; height: 4.8rem; } 
.floating .btnset { min-width: 1.64rem; height: 6.4rem; box-shadow: 0 0 2rem 0 rgba(186, 186, 186, .25); } 
.floating .btnset:hover { background: var(--white); border-color: #0F2F62; } 
.floating .btnset span { font-size: 1.6rem; line-height: 2.6rem; } 
.floating .scroll-btn { display: flex; align-items: center; justify-content: center; position: relative; margin-left: 0.8rem; width: 6.4rem; height: 6.4rem; background: var(--black); border: none; border-radius: 50%; transition: transform .4s, box-shadow .4s; } 
.floating .scroll-btn:hover { box-shadow: 0 0 2rem rgba(186, 186, 186, .25); } 
.floating .scroll-btn::before { content: ""; position: absolute; transform: scale(0); width: 100%; height: 100%; border-radius: 50%; background: var(--white); transition: transform .4s, background .4s; } 
.floating .scroll-btn:hover::before { transform: scale(1.02); } 
.floating .scroll-btn::after { content: ""; position: relative; width: 4rem; height: 4rem; background: url("../icons/ico_arrow_w.svg"); transition: filter .3s; } 
.floating .scroll-btn:hover::after { filter: invert(1); } 
.floating .scroll-btn.up { transform: rotate(180deg); } 

.side-nav .side-wrap { gap: 8rem; padding: 0 4rem; max-width: 68rem; } 
.side-nav .side-header { height: 9.4rem; } 
.side-nav .side-header .sns-wrap a { width: 4.8rem; height: 4.8rem; } 
.side-nav .side-header .btn-menu-close { width: 3.6rem; height: 3.6rem; } 
.side-nav .side-body a { padding: 2.4rem 0; line-height: 3.8rem; } 
.side-nav .side-footer { padding-bottom: 6rem; } 
.side-nav .side-footer > strong { font-size: 2.4rem; line-height: 3.4rem; } 
.side-nav .side-footer dl { margin-top: 1.6rem; gap: 0.8rem 1.6rem; } 
.side-nav .side-footer dt, .side-nav .side-footer a { font-size: 2rem; line-height: 3rem; } 

.pop-area .pop-header { gap: 1.6rem; } 
.pop-area .pop-header .checkset .checkset-label { padding-left: 3.2rem; } 
.pop-area .pop-header .pop-close { width: 4rem; height: 4rem; font-size: 1.6rem; } 
.pop-area .pop-body { margin-top: 1.2rem; } 

 #footer { padding: 0 8rem; min-height: 6.6rem; } 
 }