@charset "utf-8";
html:has(.header.open),body:has(.header.open) {overflow-y: hidden;}
.inner {width: calc(100% - 100px); margin-inline: auto; max-width: 1520px;}
.inner.s-inner {max-width: 748px;}

/* 필요한 섹션(ex.스티키가 들어가는 섹션)에만 따로  overflow: unset; 추가하세요 */
.container {padding-top: var(--header-banner-height);}
.container > section {width: 100%; margin-bottom: var(--space-120);}
.container > section.bg-color {background-color: var(--color-bg2);}
.container > section.bg-color .inner {padding-block: var(--space-60);}
.container > section .inner:not(.sticky-wrap){display: flex; flex-direction: column; row-gap: var(--fs-48);}
.container > section .swiper-container {width: 100%;}
.container > section .grid-content {display: grid !important; grid-template-columns: 200px 1fr; column-gap: var(--space-60);}
.container > section .grid-content > * {min-width:0;}

.logo {display: flex; align-items: center; justify-content: center;}
.logo.white img {-webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1);}

.header-banner {height: 44px !important; background-color: var(--grayscale9);}
.header-banner .header-banner-content {padding: 10px; display: flex; align-items: center; justify-content: center;}
.header-banner .header-banner-content .banner-label {padding-right: var(--fs-12); margin-right: var(--fs-12); position: relative;}
.header-banner .header-banner-content .banner-label::after {content: ''; width: 1px; height: var(--fs-16); position: absolute; top: 50%; right: 0; transform: translate(-50%,-50%); background-color: var(--color-white);}
.header-banner .header-banner-content .body-small {color: var(--color-white);}

.header {z-index: 999; position: fixed; top: 0; left: 0; width: 100%; transition: background-color 0.2s;}
.header .inner {max-width: 1720px; padding-block: var(--fs-12); display: flex; align-items: center; justify-content: space-between;}
.header .gnb ul {display: flex; align-items: center; column-gap: 48px;}
.header .gnb ul a {position: relative; transition: color 0.2s; padding: var(--fs-12) var(--fs-16); font-size: var(--fs-16); font-weight: 500; line-height: 1.5; color: var(--grayscale9);}
.header .gnb ul a::after {transition: width 0.2s; content: ''; position: absolute; left: 0; bottom: 0; display: block; width: 0; height: 2px; background-color: var(--color-static3);}
.footer .logo,
.header .logo {height: var(--fs-30);}
.footer .logo a,
.header .logo a {height: 100%;}
.footer .logo img,
.header .logo img {transition: filter 0.2s; height: 100%;}

html:has(.search-section.open) .header,
.header:hover,
.header.on,
.header.open {background-color: #fff;}
.header .gnb ul .active a::after,
.header .gnb ul a:hover::after {width: 100%;}

.header .all-menu-btn {width: var(--fs-36); height: var(--fs-36); position:relative;}
.header .all-menu-btn span,
.header .all-menu-btn span:before,
.header .all-menu-btn span:after {display:block; position:absolute; left:0; width: var(--fs-20); height:2px; border-radius:2px; background-color: var(--grayscale9); transition:all .3s;}
.header .all-menu-btn span {left:calc(var(--fs-12) / 2); top:50%; transform:translate(0,-50%);}
.header .all-menu-btn span:before,
.header .all-menu-btn span:after {content:''; transform:translate(0,-50%);}
.header .all-menu-btn span:before {top:-4px;}
.header .all-menu-btn span:after {top:7px;}
.header .all-menu-btn.open span {background:transparent !important;}
.header .all-menu-btn.open span:before {top:0; transform:translate(0,-50%) rotate(45deg);}
.header .all-menu-btn.open span:after {top:0; transform:translate(0,-50%) rotate(-45deg);}
.header .all-menu-btn:hover span,
.header .all-menu-btn:hover span:before,
.header .all-menu-btn:hover span:after {background-color: var(--grayscale6);}

.header .header-left {display: flex; align-items: center; column-gap: var(--fs-32);}

.header.open .all-menu {transform: translateX(100%); overflow-y: auto;}
.header .all-menu {scrollbar-color: var(--color-static3) #fff; z-index: 999; width:100%; max-width: 456px; height:calc(100vh - var(--header-height)); position:fixed; top:var(--header-height); right:100%; overflow-y:auto; background-color:var(--color-white); transition:transform .2s;}
.header .all-menu nav {width:100%; height:100%;}
.header .all-menu .all-menu-display,
.header .all-menu .all-menu-mypage,
.header .all-menu .all-menu-support {display: none;}
.header .all-menu-depth1 {width:100%; min-height:100%; position:relative; display:flex; flex-direction:column; background-color:var(--color-bg1);}
.header .all-menu-item {width: 33%; position:static;}
.header .all-menu-depth1-btn {width: 100%; padding: var(--fs-18) var(--fs-20); border:0; background-color:transparent; color:var(--grayscale6); text-align:left; transition:color .2s, background-color .2s;}
.header .all-menu-item.active .all-menu-depth1-btn {background-color: var(--color-white);}
.header .all-menu-item.active .all-menu-depth1-btn,
.header .all-menu-depth1-btn:hover {color:var(--grayscale9);}
.header .all-menu-depth1-btn:hover {background-color: rgb(var(--rgb-white) / 60%);}
.header .all-menu-depth2 {scrollbar-color: var(--color-bg2) #fff; width:67%; height:100%; padding-top:0; position:absolute; top:0; left:33%; display:none; flex-direction:column; overflow-y:auto; background-color:var(--color-white);}
.header .all-menu-item.active .all-menu-depth2 {display:flex;}
.header .all-menu-depth2 li a {width:100%; padding: var(--fs-18) var(--fs-20); display:flex; align-items:center; justify-content:space-between;}
.header .all-menu-depth2 li a span {color:var(--grayscale7); transition:color .2s;}
.header .all-menu-depth2 li a:hover span {color: var(--grayscale9);}
.header .all-menu-depth2 li.active a span {color: var(--grayscale11);}
.header .all-menu-depth2 .arrow {width:var(--fs-24); height:var(--fs-24);}
.header + .all-menu-bg {visibility:hidden; opacity:0; width:100%; height:calc(100vh - var(--header-height)); position:fixed; top:var(--header-height); left:0; z-index:998; background-color:rgb(var(--rgb-black) / 50%); transition:visibility .3s, opacity .3s; pointer-events:none;}
.header.open + .all-menu-bg {visibility:visible; opacity:1; pointer-events:auto;}
/* 액티브 된게 없으면 첫번째 항목의 것을 보여주기 */
.header .all-menu-depth1:not(:has(.all-menu-item.active)) > .all-menu-item:nth-child(1) > .all-menu-depth1-btn{background-color: var(--color-white); color: var(--grayscale9);}
.header .all-menu-depth1:not(:has(.all-menu-item.active)) > .all-menu-item:nth-child(1) > .all-menu-depth2 {display: block;}

.footer {padding-block: 76px 70px; background-color: var(--grayscale9);}
.footer .footer-content {display: flex; align-items: flex-start; justify-content: space-between; column-gap: var(--fs-60);}
.footer .footer-info {display: flex; flex-direction: column; align-items: flex-start;}
.footer .footer-logo {height: var(--fs-24); margin-bottom: 36px;}
.footer .footer-logo img {height: 100%;}
.footer .footer-policy-list {margin-bottom: var(--fs-12); display: flex; align-items: center;}
.footer .footer-policy-list li {display: flex; align-items: center;}
.footer .footer-policy-list li:not(:last-child)::after {content: ''; width: 1px; height: var(--fs-14); margin-inline: var(--fs-12); background-color: rgb(var(--rgb-white) / 35%);}
.footer .footer-policy-list a {font-size: var(--fs-14); line-height: 1.5; color: rgb(var(--rgb-white) / 75%); transition: color 0.2s;}
.footer .footer-policy-list a:hover {color: var(--color-white);}
.footer .footer-company {display: flex; flex-direction: column; row-gap: 8px;}
.footer .footer-company p {display: flex; align-items: center; flex-wrap: wrap; font-size: var(--fs-14); line-height: 1.5; color: rgb(var(--rgb-white) / 75%);}
.footer .footer-company span {display: flex; align-items: center;}
.footer .footer-company span:not(:last-child)::after {content: ''; width: 1px; height: var(--fs-14); margin-inline: var(--fs-12); background-color: rgb(var(--rgb-white) / 35%);}
.footer .footer-copyright {margin-top: var(--fs-24); font-size: var(--fs-14); line-height: 1.5; color: rgb(var(--rgb-white) / 60%);}
.footer .footer-nav {display: grid; grid-template-columns: repeat(3, minmax(110px, 1fr)); column-gap: 76px;}
.footer .footer-menu {min-width: 110px;}
.footer .footer-title {display: block; margin-bottom: var(--fs-20); font-size: var(--fs-14); font-weight: 600; line-height: 1.5; color: rgb(var(--rgb-white) / 85%);}
.footer .footer-menu ul {display: flex; flex-direction: column; row-gap: var(--fs-14);}
.footer .footer-menu a {font-size: var(--fs-14); line-height: 1.5; color: rgb(var(--rgb-white) / 70%); transition: color 0.2s;}
.footer .footer-menu a:hover {color: var(--color-white);}

html:has(.search-section.open), body:has(.search-section.open) {overflow:hidden;}

/* 서치섹션 */
.search-inner {max-width:640px;}
.search-section + .search-section-bg {visibility:hidden; opacity:0; width:100%; height:calc(100vh - var(--header-height)); position:fixed; top:var(--header-height); left:0; z-index:996; background-color:rgb(var(--rgb-black) / 50%); transition:visibility .3s, opacity .3s; pointer-events:none;}
.search-section.open + .search-section-bg {visibility:visible; opacity:1; pointer-events:auto;}
.search-section {max-height: calc(100vh - var(--header-height)); overflow-y: auto; display: none; padding-block: var(--fs-40); z-index: 997; width:100%; height: fit-content; margin:0; position:fixed; top: var(--header-height); left:0; overflow-y:auto; background-color:var(--color-white); transition:visibility 0.25s, opacity 0.25s;}
.search-section .search-close-btn {margin-left: auto; width: var(--fs-40); height: var(--fs-40);}
.search-section .search-form {width:100%;}
.search-section .search-content {margin-top:var(--fs-32); flex-direction: column;}
.search-section .search-block {width:100%; padding-inline: var(--fs-20);}
.search-section .search-block-top {display:flex; align-items:center; justify-content:space-between;}
.search-section .search-title {font-size:var(--fs-16); font-weight:500; line-height:1.5; color:var(--grayscale9);}
.search-section .search-delete-all {font-size:var(--fs-14); line-height:1.5; color:var(--grayscale6); transition:color 0.2s;}
.search-section .search-delete-all:hover {color:var(--grayscale9);}
.search-section .recent-search-list {margin-top: var(--fs-20); display:flex; flex-direction:column; row-gap: var(--fs-12);}
.search-section .recent-search-item {display:flex; align-items:center; justify-content:space-between;}
.search-section .recent-search-item a {font-size:var(--fs-16); line-height:1.5; color:var(--grayscale8); transition:color 0.2s;}
.search-section .recent-search-item a:hover {color:var(--grayscale6);}
.search-section .recent-search-empty {margin-top: var(--fs-20); font-size:var(--fs-16); line-height:1.5; color:var(--grayscale7);}
.search-section .recent-search-list:empty + .recent-search-empty {display:block;}
.recommend-search-block {width: 100%; margin-top: var(--fs-30); padding-top:var(--fs-30); border-top:1px solid var(--grayscale4);}
.recommend-search-block .recommend-search-list {margin-top: var(--fs-20); display:flex; flex-direction:column; row-gap: var(--fs-12);}
.recommend-search-block .recommend-search-list a {font-size:var(--fs-16); color: var(--grayscale8); line-height:1.5; color:var(--grayscale8); transition:color 0.2s;}
.recommend-search-block .recommend-search-list a:hover {color:var(--grayscale6);}

@media screen and (min-width:1025px) {
    .header .gnb {transform:none !important;}
    .header .gnb-handle {display: none;}
}

@media screen and (max-width:1440px) {
    .inner {width: calc(100% - 80px);}
}

@media screen and (max-width:1024px) {
    .inner {width: calc(100% - 64px);}
    .footer {padding-block: var(--space-60);}
    .footer .footer-content {flex-direction: column; row-gap: var(--fs-48);}
    .footer .footer-nav {width: 100%; column-gap: var(--fs-40);}

    .header .inner {position: relative;}
    .header .all-menu {right: unset; left: 100%;}
    .header.open .all-menu {transform: translateX(-100%);}
    .header .btn-wrap {padding-right: calc(var(--fs-36) + var(--fs-20));}
    .header .btn-wrap .ico-btn {width: 28px; height: 28px;}
    .header .all-menu-btn {position: absolute; top: 50%; right: 0; transform: translateY(-50%); z-index: 10;}
    .header .gnb {display: none;}
    .header .all-menu {padding: 20px 16px 0; display: flex; flex-direction: column; row-gap: var(--fs-20);}
    .header .all-menu nav {height: fit-content; display: flex; flex-direction: column;}
    .header .all-menu nav:not(.all-menu-display)::before {content: attr(data-title); font-size: 14px; color: var(--color-static3); line-height: 1.5; padding-bottom: 12px; border-bottom: 1px solid var(--color-border1); width: 100%; display: block;}
    .header .all-menu .all-menu-display {display: block;}
    .header .all-menu .all-menu-display ul {display: flex; flex-wrap: wrap; border-top: 1px solid var(--color-border1); border-left: 1px solid var(--color-border1);}
    .header .all-menu .all-menu-display li {flex: 1 1 0;}
    .header .all-menu .all-menu-display ul:has(li:nth-child(4)) li {flex-basis: 50%;}
    .header .all-menu .all-menu-display a {text-align: center; width: 100%; transition: all 0.2s; font-size: var(--fs-16); font-weight: 500; line-height: 1.5; color: var(--grayscale9); padding-block: 12px; border-right: 1px solid var(--color-border1); border-bottom: 1px solid var(--color-border1);}
    .header .all-menu .all-menu-display a:hover {color: var(--color-static3);}
    .header .all-menu .all-menu-display .active a {background-color: var(--color-bg1); color: var(--color-static3);}
    .header .all-menu .all-menu-category {flex: 1;}
    .header .all-menu .all-menu-category .all-menu-depth1 {margin-inline: -16px; width: calc(100% + 32px); min-height: unset; height: 100%;}
}

@media screen and (max-width:768px) {
    .inner {width: calc(100% - 48px);}
    .footer {padding-block: var(--fs-48);}
    .footer .footer-logo {margin-bottom: var(--fs-28);}
    .footer .footer-policy-list {flex-wrap: wrap; row-gap: 8px;}
    .footer .footer-company p {align-items: flex-start; flex-direction: column; row-gap: 4px;}
    .footer .footer-company span:not(:last-child)::after {display: none;}
    .footer .footer-nav {grid-template-columns: repeat(3, 1fr); column-gap: var(--fs-20);}
    .search-section {padding-block: var(--fs-20);}
    .search-section .search-inner {width:calc(100% - 48px); margin-top: var(--fs-16);}
    .search-section .search-close-btn {position: unset;}
}

@media screen and (max-width: 500px) {
    .header .btn-wrap {column-gap: 20px;}
    .header .btn-wrap .mypage-btn {display: none;}
    .header .all-menu {padding: 20px 16px;}
    .header .all-menu .all-menu-mypage,
    .header .all-menu .all-menu-support {display: block;}
    .header .all-menu .all-menu-mypage ul,
    .header .all-menu .all-menu-support ul {margin-top: 20px; display: flex; flex-direction: column; row-gap: var(--fs-30);}
    .header .all-menu .all-menu-mypage a,
    .header .all-menu .all-menu-support a {transition: color 0.2s; padding-inline: 10px; margin-inline: -10px; width: 100%; font-size: var(--fs-16); font-weight: 500; color: var(--grayscale7);}
    .header .all-menu .all-menu-mypage a:hover,
    .header .all-menu .all-menu-support a:hover {color: var(--grayscale11);}

    .inner {width: calc(100% - 32px);}
    .footer .footer-nav {grid-template-columns: repeat(2, 1fr); row-gap: var(--fs-40);}
    .footer .footer-menu:last-child {grid-column: 1 / -1;}
    .search-section .search-inner {width:calc(100% - var(--fs-32));}
    .search-section .search-input-wrap {height:52px; padding-inline:var(--fs-16) 12px;}
    
}

@media screen and (max-width:375px) {
    .footer .logo, .header .logo {height: 20px;}
    .header .btn-wrap {column-gap: 10px; padding-right: calc(var(--fs-36) + 10px);}
    .inner {width: calc(100% - 24px);}
    .header .all-menu .all-menu-display ul {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--color-border1); border-left: 1px solid var(--color-border1);}
    .header .all-menu .all-menu-display li:last-child:nth-child(odd) {grid-column: 1 / -1;}
    .header .all-menu .all-menu-display a {text-align: center; width: 100%; padding-block: 12px; border-right: 1px solid var(--color-border1); border-bottom: 1px solid var(--color-border1);}
    .footer .footer-nav {grid-template-columns: repeat(1, 1fr); row-gap: var(--fs-40);}
}

/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */