a { text-decoration: none; }

#header {width: 100%; z-index: 1000; border-bottom: 0; transition: top 0.3s ease-in-out, opacity 0.3s ease-in-out; }
#header * { box-sizing: border-box; }
#header .nav { width: 1200px; margin: 0 auto; padding-top: 0 !important; overflow: hidden; }
#header .logo { position: initial; margin-left: 0; width: 174px; }
#header .searchForm { position: relative; width: auto; margin: 0 16px 0 0; z-index: 1; top: inherit; left: inherit; }

.header {width: 100%; min-width: 1200px; background-color: #005bf1; padding: 10px 40px; display: flex; align-items: center; justify-content: space-between; color: white; }
.header-layout { display: flex; align-items: center; justify-content: space-between; width: 1200px; margin: 0 auto; }

.nav-search-wrap { position: relative; height: 48px; width: 448px; background-color: #ffffff; border-radius: 24px; }
.nav-searchfield-outer { height: 48px; border-radius: 24px; margin: 0; width: 100%; left: 0; border: 0; z-index: 1; }
#nav-search-in { height: auto; width: 112px; line-height: 48px; }

.header-menu { display: flex; align-items: center; gap: 24px; }
span.top-menu { font-family: "PLRegular"; font-size: 14px; color: #ffffff; }
span.top-menu + span { font-family: "PLBold"; display: block; font-size: 15px; margin-top: 4px; color: #ffffff; cursor: pointer; }
a.menu-link { font-family: "PLRegular"; }

.hamburger-menu { margin-right: 20px; cursor: pointer; }
.account-menu input { display: none; }
.account-menu { position: relative; }
.account-menu .dropdown-content {
    display: none; flex-direction: column; line-height: 40px; position: absolute; background: #ffffff; border-radius: 5px; padding: 4px 0 8px;
    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.2); width: 216px; top: 48px; left: 50%; margin-left: -108px; z-index: 1;
}
.account-menu .dropdown-content.show { display: flex; }
.account-menu .dropdown-content::after { content: ''; position: absolute; top: -18px; right: 32px; width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-bottom: 20px solid #ffffff; }
.account-menu .mem-menu { padding: 12px 0 8px 0; }
.account-menu .mem-menu button { width: calc(100% - 32px); margin: 0 auto; }
.account-menu .mem-menu span { display: block; margin-top: 12px; text-align: center; color: #333333; font-size: 14px; border-bottom: 1px solid #eeeeee; line-height: 1; padding-bottom: 16px; }
.account-menu .mem-menu span a { color: #005bf1; text-decoration: underline; }
.account-menu .mem-menu ~ a { display: flex; position: relative; color: #333333; border-radius: 5px; width: calc(100% - 16px); margin: 0 auto; font-size: 14px; text-align: left; text-indent: 16px; }
.account-menu .mem-menu ~ a:hover { background-color: #E9ECF4;}
.account-menu button.menu-toggle { font-family: "PLRegular"; padding: 0; }
.cart-link { display: flex; margin-top: 0px; flex-direction: column; gap: 2px; }
.cart-link > div { display: flex; }
.cart-count { min-width: 32px; color: #005bf1; font-size: 13px; line-height: 22px; background-color: #ffffff; padding: 0 10px; font-family: PLBold; border-radius: 11px; margin: 0 0 0 4px; }

.custom-dropdown { width: 160px; position: relative; display: inline-block; }
.custom-select { padding-left: 20px; line-height: 48px; cursor: pointer; font-size: 15px; color: #005bf1; width: 100%; box-sizing: border-box; background: url('../../image_1/ico_arrow_dropdown_bl.svg') no-repeat right 20px center; background-size: 8px auto; }
#search_s1 { height: 48px; margin: 0; padding: 8px 0; outline: none; border: 0; box-shadow: none; width: calc(100% - 216px); }
.nav-submit-button { height: 40px; width: 40px; top: 4px; right: 8px; left: initial; }
.custom-options { display: none; position: absolute; width: 160px; border-radius: 5px; background-color: #fff; box-shadow: 0px 4px 16px rgba(0,0,0,0.2); z-index: 10; box-sizing: border-box; margin-top: 6px; }
.custom-options div { padding: 0 16px; line-height: 40px; cursor: pointer; font-size: 14px; color: #333; position: relative; }
.custom-options div:hover::after { content: ""; position: absolute; border-radius: 5px; width: calc(100% - 8px); height: calc(100% - 8px); top: 4px; left: 4px; background-color: #E9ECF4; z-index: -1; }
.custom-options.active { display: block; }

.navbar { background-color: #e9f5ff; /*margin: 68px auto 20px;*/ margin: 0 auto 20px; min-width: 1200px; }
.main-menu { width: 1200px; margin: 0 auto; padding: 0; display: flex; align-items: center; justify-content: space-between;font-size: 14px; }
.main-menu .menu-item { position: relative; display: flex; align-items: center; font-size: 14px; }
.main-menu .menu-item > a {color: #162a4a; display: block; font-size: 14px; font-family: "PLBold";}
.main-menu .menu-item > a:hover, 
.main-menu .menu-item > a:focus,
.main-menu .menu-item.dropdown-active > a { color: #005bf1; }
.main-menu .menu-item .dropdown-content {
    display: none; position: absolute; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; top: calc(100% + -4px);
    height: fit-content; overflow: auto; background: #ffffff;
}
.menu-total-wrap .go-home {display: flex; align-items: center;}
.menu-total-wrap .go-home a {display: flex; align-items: center;}

.main-menu .menu-item .dropdown-content ul {list-style-type: none; padding: 0 0 8px; margin: 0; width: max-content; max-width: 616px; background: #e0e3e7;}
.main-menu .menu-item .dropdown-content > ul {display: flex; flex-direction: row; gap: 12px; flex-wrap: wrap; padding: 20px 20px 8px; height: 100%;}
.main-menu .menu-item .dropdown-content > ul > div {display: flex; flex-direction: column; gap: 12px;}
.main-menu .menu-item .dropdown-content > ul > :last-child {margin-right: 0;}
.main-menu .menu-item .dropdown-content ul li a {color: #555555; text-decoration: none; display: block; text-align: left; padding: 6px 16px; font-size: 14px;}
.main-menu .menu-item .dropdown-content ul li a.dep2-menu {text-indent: 0; color: #333333; font-size: 17px; font-weight: 600; padding: 10px 16px 4px; margin: 8px 0 6px 0px;}
.main-menu .menu-item .dropdown-content ul li a:hover {text-decoration: underline;}
.main-menu .menu-item:hover .dropdown-content {display: flex;}
.main-menu .menu-item .dropdown-content > ul::after {content: ""; display: block; clear: both;}
.main-menu .menu-item .dropdown-content > ul .second-level-item {width: 184px; background: #ffffff; height: fit-content; border-radius: 8px; overflow: hidden;}
.main-menu .menu-item .dropdown-content > ul .second-level-item > ul {width: 100%; background: #ffffff;}
.main-menu .menu-item .dropdown-content .banner-area {text-align: left; height: 100%;}
.main-menu .menu-item .dropdown-content .banner-area > a {padding: 0;}

.menu-total-wrap {display: none; width: 174px; height: 48px; align-items: center; font-size: 16px;}
.menu-total-wrap > .menu-item a.menu-total {color: #ffffff; display: block; line-height: 68px;}
.menu-total-wrap.visible {display: block}
.menu-total-wrap .menu-item {position: relative;}
.menu-total-wrap .menu-item .dropdown-menu {top: 100%;}
.menu-total-wrap.visible:hover .dropdown-menu { display: block;}

.main-menu li a { color: #333333; display: flex; align-items: center; justify-content: space-between; padding: 15px 0; font-size: 15px; }
.main-menu > li > a:hover {color: #005bf1;}
.menu-total .svg-fill {fill: #ffffff;}

.dropdown-menu { display: none; position: absolute; top: 58px; left: 0; background-color: #ffffff; box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.2); width: 224px; z-index: 999; text-align: left; }
.dropdown-menu .first-level-item > a {color: #333; padding: 15px 20px; display: flex; margin: 0; font-weight: 500; font-size: 15px; position: relative;}
.dropdown-menu .first-level-item > a::after { 
    content: ""; display: inline-block; background: transparent; width: 4px; height: 4px; border-width: 1px 1px 0 0; 
    border-color: #333333 #333333 transparent transparent; border-style: solid; transform: rotate(45deg); right: 20px; top: 21px; position: absolute;;
}
.dropdown-menu .first-level-item > a:hover {color: #005bf1;}
.dropdown-menu .first-level-item > a:hover::after { border-color: #005bf1 #005bf1 transparent transparent; }
.dropdown-menu .first-level-item > a.hover-active {background: #e9f5ff; color: #005bf1;}
.dropdown-menu .first-level-item > a.hover-active::after { border-color: #005bf1 #005bf1 transparent transparent; }
.dropdown-menu .first-level-item:hover .sub-menu {display: flex;}
.sub-menu {position: absolute; top: 0; left: 224px; display: none; box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.2); background: #e0e3e7;}
.sub-menu .second-level {max-height: calc(100vh - 174px); padding: 24px 24px 0; margin-bottom: 12px; display: flex; gap: 12px; align-items: flex-start; overflow: auto;}
.sub-menu .second-level > div {flex: 1;}
.sub-menu .second-level .second-level-item {border-radius: 5px; background: #ffffff; margin: 12px 0; padding-bottom: 6px; break-inside: avoid; width: 192px;}
.sub-menu .second-level .second-level-item:first-child {margin: 0;}
.sub-menu .second-level .second-level-item h3 { margin: 0; }
.sub-menu .second-level .second-level-item h3 a {display: block; color: #333; font-weight: 600; font-size: 15px; position: relative; padding: 12px 16px; position: relative;}
.sub-menu .second-level .second-level-item h3 a:hover { text-decoration: underline; }
.sub-menu .second-level .second-level-item h3 a.hover-active {color: #005bf1;}
.sub-menu .second-level .second-level-item .third-level {display: block; list-style: none; margin: 0 auto;}
.sub-menu .second-level .second-level-item .third-level li {margin-bottom: 12px; padding: 0 16px;}
.sub-menu .second-level .second-level-item .third-level li a {padding: 6px 0; font-size: 14px; color: #555555;}
.sub-menu .second-level .second-level-item .third-level li a:hover {text-decoration: underline;}
.banner-area {width: 232px; padding: 20px; background: #ffffff;}
.banner-area a {line-height: 0; padding: 0;}
.banner-area a figure {margin:0}
.banner-area a figcaption h3 {margin: 20px 0 8px 0; line-height: 1.4; font-size: 17px; letter-spacing: -0.025em; color: #333333;}
.banner-area a figcaption p {margin: 0; line-height: 1.4; color: #555555;}
.banner-area a.btn-goShop {
    line-height: 40px; border: 1px solid #333333; border-radius: 100px; text-align: center; color: #333333; font-weight: 600; font-size: 15px; display: block; margin-top: 16px;
}
.banner-area a.btn-goShop:hover {border-color: #005bf1; background: #005bf1; color: #ffffff; transition: border-color 0.15s ease-in-out, background 0.15s ease-in-out;}
.menu-item:hover .dropdown-menu { display: block; }

.first-level-item > a.hover-active { color: #005bf1; }
.first-level-item > a.hover-active::after { border-color: #005bf1 #005bf1 transparent transparent; }

/* 플레이스홀더 타이핑 애니메이션 */
#search_s1 {
    position: relative;
}

#search_s1::placeholder {
    color: transparent;
}

.typing-placeholder {
    position: absolute;
    top: 50%;
    left: 160px;
    transform: translateY(-50%);
    color: #999;
    pointer-events: none;
    font-size: 15px;
    font-family: inherit;
}

.typing-cursor {
    display: inline-block;
    background-color: #333;
    width: 1px;
    height: 1.2em;
    margin-bottom: -4px;
    animation: blink 1s infinite;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}