@charset "UTF-8";

@font-face {font-family: 'Pretendard'; font-weight: 100; font-style: normal; font-display: swap; src: url('../font/Pretendard-Thin.woff2') format('woff2')}
@font-face {font-family: 'Pretendard'; font-weight: 200; font-style: normal; font-display: swap; src: url('../font/Pretendard-ExtraLight.woff2') format('woff2')}
@font-face {font-family: 'Pretendard'; font-weight: 300; font-style: normal; font-display: swap; src: url('../font/Pretendard-Light.woff2') format('woff2')}
@font-face {font-family: 'Pretendard'; font-weight: 400; font-style: normal; font-display: swap; src: url('../font/Pretendard-Regular.woff2') format('woff2')}
@font-face {font-family: 'Pretendard'; font-weight: 500; font-style: normal; font-display: swap; src: url('../font/Pretendard-Medium.woff2') format('woff2')}
@font-face {font-family: 'Pretendard'; font-weight: 600; font-style: normal; font-display: swap; src: url('../font/Pretendard-SemiBold.woff2') format('woff2')}
@font-face {font-family: 'Pretendard'; font-weight: 700; font-style: normal; font-display: swap; src: url('../font/Pretendard-Bold.woff2') format('woff2')}
@font-face {font-family: 'Pretendard'; font-weight: 800; font-style: normal; font-display: swap; src: url('../font/Pretendard-ExtraBold.woff2') format('woff2')}
@font-face {font-family: 'Pretendard'; font-weight: 900; font-style: normal; font-display: swap; src: url('../font/Pretendard-Black.woff2') format('woff2')}

/* reset.css (Modern CSS Reset by Andy Bell) */
*, *::before, *::after {box-sizing: border-box;}

ul,ol,li {list-style: none; padding:0; margin:0;}

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {margin: 0;}

ul[role='list'], ol[role='list'] {list-style: none;}

html:focus-within {scroll-behavior: smooth;}

html {min-width: 780px;}

body {min-height: 100vh; min-width: 780px; text-rendering: optimizeSpeed; line-height: 1.5; overflow-x: auto;}

a:not([class]) {text-decoration-skip-ink: auto;}

img, picture {max-width: 100%; display: block;}

input, button, textarea, select {font: inherit;}

/* 버튼 & 인풋 버튼 스타일 제거 */
button, input[type="button"], input[type="submit"], input[type="reset"] {appearance: none; -webkit-appearance: none; border: none; background: none; padding: 0; margin: 0; font: inherit; color: inherit; line-height: inherit; cursor: pointer;}
a {text-decoration: none; color: inherit;}

body {font-family: 'Pretendard'; font-weight: 500;}


/* 레이아웃 */
#wrap {position: relative; overflow: hidden; min-width: 780px;}
#page-content {padding-top:80px;}
#page-content {min-width: 780px;}
#page-content > .inner-wrap {padding-bottom:40px;}
.inner-wrap {max-width: 1340px; margin:0 auto; width: 100%; padding:0 27px; min-width: 780px;}

#header {position: fixed; top:0; left:0; width:100%; z-index: 1000; background-color: #fff;}
#header .inner-wrap {max-width: 1340px; margin:0 auto; width: 100%; padding:0 27px; min-width: 0;}
#header .header-wrap {display: flex; width: 100%; justify-content: space-between; height: 80px; align-items: center;}
#header .header-wrap .header-brand a {display: flex; text-decoration: none; color: #808080;}
#header .header-wrap .header-brand a img {margin-right: 12px;}
#header .header-wrap .header-control {display: flex; align-items: center;}
#header .header-wrap .header-control .quicklink {display: flex; align-items: center; text-decoration: none; color: #1a1a1a; font-weight: 600;}
#header .header-wrap .header-control .quicklink img {margin-left: 8px;}
#header .header-wrap .header-control .separator {background-color: #b3b3b3; width: 1px; height: 20px; margin:0 20px;}
#header .search-area-close {display: none;}
#header .search-area {width:100%; 
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px) scaleY(0.3);
    transform-origin: top;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}
#header .search-area.on {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scaleY(1);
}
#header .right-menu {padding:30px 27px; position: fixed; top: 0; right: -450px; width: 450px; height: 100vh; background: #fff; box-shadow: -2px 0 8px rgba(0, 0, 0, 0.2); transition: right 0.3s ease; z-index: 1000; display: flex; flex-direction: column;}
#header .right-menu.active {right: 0; display: flex;}
#header .nav-wrap {display: flex; flex-direction: column; height: 100%; flex: 1; min-height: 0;}
#header .nav-wrap .nav-top {display: flex; justify-content: end; flex-shrink: 0;}
#header .nav-wrap .nav-menu {width: 100%; flex: 1; overflow-y: auto; overflow-x: hidden; min-height: 0;}
#header .nav-wrap .nav-bottom {display: flex; width: 100%; align-items: end; flex-shrink: 0;}
.dimmed {background-color: rgba(0, 0, 0, 0.5); display: none; position: fixed; left:0; top:0; width:100%; height:100vh;}
#header .right-menu .right-menu-nav {margin-top:60px;}
#header .right-menu .right-menu-nav .depth1 > li {padding-right: 10px;}
#header .right-menu .right-menu-nav .depth1 > li a {display: flex; width: 100%; font-size: 20px; align-items: center; height: 40px; justify-content: space-between; color: #1a1a1a; font-weight: 600;}
#header .right-menu .right-menu-nav .depth1 > li + li {margin-top:20px;}
#header .right-menu .right-menu-nav .depth1 > li.active a img {transform: rotate(-180deg);}
#header .right-menu .right-menu-nav .depth1 > li.active.closed a img {transform: rotate(0deg);}
#header .right-menu .right-menu-nav .depth1 > li > .depth2 {margin-top:12px; background-color: #f4f4f4; padding:24px 20px; border-radius:12px;}
#header .right-menu .right-menu-nav .depth1 > li > .depth2 > li + li {margin-top:24px;}
#header .right-menu .right-menu-nav .depth1 > li > .depth2 > li > a {height: 21px; color: #4d4d4d; font-size: 18px; font-weight:500;}

/* 활성화된 메뉴 스타일 */
#header .right-menu .right-menu-nav .depth1 > li.active > a {color: #004b93; font-weight: 700;}

#header .right-menu .right-menu-nav .depth1 > li > .depth2 > li.active > a {color: #004b93; font-weight: 600;}
#header .nav-wrap .nav-bottom ul {width: 100%; padding-top:20px; border-top: 1px solid #b3b3b3;}
#header .nav-wrap .nav-bottom ul li {width: 100%;}
#header .nav-wrap .nav-bottom ul li + li {margin-top:10px;}
#header .nav-wrap .nav-bottom ul li a {color: #808080; font-size: 18px; font-weight: 600; display: flex; justify-content: space-between; width: 100%; align-items: center;}

#header .header-brand {display: flex; gap: 12px;}
#header .change-indicator .brand_text {display: none;}
#header .change-indicator .page-indicator {display: flex;margin-left: 24px;}
#header .change-indicator.search-page .brand_text {display: block;}
#header .change-indicator.search-page .page-indicator {display: none;}

/* 홈화면에서 인디케이터 숨기기 및 디지털 카탈로그 텍스트 표시 */
#header .change-indicator.main .page-indicator {display: none !important;}
#header .change-indicator.main .page-indicator > li {display: none !important;}
#header .change-indicator.main .page-indicator .indicator-select-box {display: none !important;}
#header .change-indicator.main .brand_text {display: block !important;}

#header .change-indicator .page-indicator > li {position: relative; display: flex;}
#header .change-indicator .page-indicator > li .select-btn {display: flex; white-space: nowrap; align-items: center;}
#header .change-indicator .page-indicator > li .select-btn span {max-width: 15ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block;}
#header .change-indicator .page-indicator > li .select-btn img {margin-left:3px;}
#header .change-indicator .page-indicator > li.open .select-btn img {transform: rotate(-180deg);}
#header .change-indicator .page-indicator > li + li::before {content:'/'; display:inline-block; margin:0 12px; color: #666; font-weight: 300;}
#header .change-indicator .page-indicator .indicator-select-box {display: none; position: absolute; top: calc(100% + 20px); left: 50%; transform: translateX(-50%); min-width: 220px; background: #ffffff; border-radius: 12px; padding: 10px 12px; box-shadow: 0 8px 20px rgba(25, 25, 25, 0.2); z-index: 1000; display: none; transition: opacity 180ms ease, transform 180ms ease; opacity: 1; padding:6px 0;}
#header .change-indicator .page-indicator .indicator-select-box::before {content: ""; position: absolute; top: -8px; left: 50%; transform: translateX(-50%); width: 14px; height: 14px; background: #ffffff; transform-origin: center; transform: translateX(-50%) rotate(45deg); box-shadow: -2px -1px 2px rgba(25,25,25,0.1); z-index: -1;}
#header .change-indicator .page-indicator .indicator-select-box > ul > li button {width:100%; text-align: left; padding:10px 12px; font-size: 17px; color: #333; font-weight: 500;}
#header .change-indicator .page-indicator .indicator-select-box > ul > li button span {max-width: 15ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block;}
#header .change-indicator .page-indicator .indicator-select-box > ul > li button.active {color: #004b93; font-weight: 600;}

#header .search-area {padding-bottom: 70px; border-top:1px solid #f4f4f4; padding-top:40px;}
#header .search-area .search-inner {max-width: 638px; margin:0 auto; width:100%; 
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: 0.05s;
}
#header .search-area.on .search-inner {
    opacity: 1;
    transform: translateY(0);
}
#header .search-area .search-input {position: relative;}
#header .search-area .search-input input {padding:0 20px; background-color: #f1f1f1; border:none; border-radius: 12px; height: 60px; width: 100%;}
#header .search-area .search-input input::placeholder {color: #b3b3b3;}
#header .search-area .search-input button {position: absolute; right:20px; top:50%; transform: translateY(-50%);}
#header .search-area .search-input button img {opacity: 0.65;}

#header .search-area .recent-search {margin-top: 30px; 
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: 0.1s;
}
#header .search-area.on .recent-search {
    opacity: 1;
    transform: translateY(0);
}
#header .search-area .recent-search .recent-title {display: flex; margin-bottom: 20px; align-items: center; justify-content: space-between;}
#header .search-area .recent-search .recent-title b {color: #1a1a1a; font-size: 18px;}
#header .search-area .recent-search .recent-title button {color: #808080; font-size: 18px; font-weight:500;}
#header .search-area .recent-search .history-none {color: #b3b3b3; font-size: 16px; font-weight:500;}
#header .search-area .recent-search .history-list {display: flex; gap: 10px;}
#header .search-area .recent-search .history-list li {}
#header .search-area .recent-search .history-list li a {display: inline-flex; height: 39px; align-items: center; border:1px solid #dadada; border-radius:18px; padding:0 16px; padding-right: 5px;} 
#header .search-area .recent-search .history-list li a button img {width: 32px; opacity: 0.6;}

#header .search-area .popular-searches {margin-top:50px; 
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: 0.15s;
}
#header .search-area.on .popular-searches {
    opacity: 1;
    transform: translateY(0);
}
#header .search-area .popular-searches .popular-title { margin-bottom: 20px;}
#header .search-area .popular-searches .popular-title b {color: #1a1a1a; font-size: 18px;}
#header .search-area .popular-searches ol {display: grid; grid-template-columns: 1fr 1fr; gap:5px; grid-template-rows: repeat(5, 40px);}
#header .search-area .popular-searches ol li {height: 21px; color: #4d4d4d; font-size:18px; font-weight: 600;}
#header .search-area .popular-searches ol li span {margin-right: 14px;}
#header .search-area .popular-searches ol li a {}
#header .search-area .popular-searches ol:nth-child(-n+5):nth-child(odd) {grid-column: 1; grid-row: span 1;}
#header .search-area .popular-searches ol:nth-child(-n+5):nth-child(even) {grid-column: 1; grid-row: span 1;}
#header .search-area .popular-searches ol:nth-child(n+6):nth-child(odd) {grid-column: 2; grid-row: span 1;}
#header .search-area .popular-searches ol:nth-child(n+6):nth-child(even) {grid-column: 2; grid-row: span 1;}