/* BASIC css start */
/* =========================================================
   AKKINARA HEADER
   MakeShop °ø¿ë CSS Ãæµ¹ ¹æÁö¿ë akn- Àü¿ë Ŭ·¡½º
========================================================= */

.akn-header {
    width:100%;
    background:#ffffff;
    color:#20242a;
    font-family:"Pretendard","Noto Sans KR","¸¼Àº °íµñ","Malgun Gothic",Arial,sans-serif;
}

.akn-header * {
    box-sizing:border-box;
}

.akn-wrap {
    width:1100px;
    margin:0 auto;
}

.akn-hidden {
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
    border:0 !important;
}


/* =========================================================
   TOP
========================================================= */

.akn-util {
    width:100%;
    height:35px;
    border-bottom:1px solid #eeeeee;
    background:#fafbfc;
}

.akn-util .akn-wrap {
    height:35px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.akn-util-copy {
    color:#8b9199 !important;
    font-size:12px !important;
    font-weight:400 !important;
}

.akn-util-links {
    height:35px;
    display:flex;
    align-items:center;
}

.akn-util-link {
    display:block;
    margin-left:20px;
    color:#626972 !important;
    font-size:12px !important;
    font-weight:500 !important;
    line-height:35px !important;
    text-decoration:none !important;
}

.akn-util-link:hover {
    color:#1f2937 !important;
}


/* =========================================================
   MAIN HEADER
========================================================= */

.akn-main {
    position:relative;
    width:100%;
    background:#ffffff;
    z-index:9000;
    overflow:visible;
}

.akn-main-inner {
    position:relative;
    height:116px;
}


/* =========================================================
   LOGO
========================================================= */

.akn-logo {
    position:absolute;
    left:0;
    top:50%;
    width:170px;
    transform:translateY(-50%);
}

.akn-logo-link {
    display:inline-block;
}

.akn-logo-image {
    display:block;
    max-width:165px;
    height:auto;
    border:0;
}


/* =========================================================
   SEARCH
========================================================= */

.akn-search {
    position:absolute;
    left:50%;
    top:50%;
    width:380px;
    transform:translate(-50%,-50%);
    z-index:9100;
}

.akn-search-field {
    width:380px;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
}

.akn-search-wrap {
    position:relative;
    width:380px;
}

.akn-search-box {
    position:relative;
    width:380px;
    height:50px;
    border:1px solid #d9dee7;
    border-radius:10px;
    background:#f7f9fc;
    transition:
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}

.akn-search-wrap.akn-search-active .akn-search-box {
    border-color:#9eb2dc;
    background:#ffffff;
    box-shadow:0 4px 16px rgba(63,88,132,0.10);
}

.akn-search-box .MS_search_word,
.akn-search-box input {
    display:block !important;
    width:315px !important;
    height:48px !important;
    margin:0 !important;
    padding:0 17px !important;
    border:0 !important;
    outline:0 !important;
    background:transparent !important;
    color:#20242a !important;
    font-family:"Pretendard","Noto Sans KR","¸¼Àº °íµñ",sans-serif !important;
    font-size:14px !important;
    font-weight:400 !important;
    line-height:48px !important;
    box-shadow:none !important;
}

.akn-search-button {
    position:absolute;
    right:5px;
    top:5px;
    display:flex;
    width:58px;
    height:40px;
    align-items:center;
    justify-content:center;
    border-radius:7px;
    background:#fb4f4f;
    color:#45628f !important;
    text-decoration:none !important;
    transition:background .15s ease;
}

.akn-search-button:hover {
    background:#ff7777;
}

.akn-search-button-text {
    color:#fff !important;
    font-size:13px !important;
    font-weight:700 !important;
}


/* =========================================================
   SEARCH RECOMMENDATION
========================================================= */

.akn-search-suggest {
    display:none;
    position:absolute;
    top:57px;
    left:0;
    width:380px;
    padding:22px;
    border:1px solid #e0e4ea;
    border-radius:11px;
    background:#ffffff;
    box-shadow:0 12px 34px rgba(37,45,58,0.13);
    z-index:10000;
}

.akn-search-wrap.akn-search-active .akn-search-suggest {
    display:block;
}

.akn-search-suggest-title {
    margin-bottom:14px;
    color:#20242a !important;
    font-size:14px !important;
    font-weight:700 !important;
    line-height:20px !important;
}

.akn-search-tags {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.akn-search-tags a {
    display:block;
    padding:7px 12px;
    border:1px solid #e4e7ec;
    border-radius:16px;
    background:#ffffff;
    color:#525a65 !important;
    font-size:13px !important;
    font-weight:500 !important;
    line-height:17px !important;
    text-decoration:none !important;
}

.akn-search-tags a:hover {
    border-color:#bccae2;
    background:#f4f7fc;
    color:#3f5f91 !important;
}

.akn-search-guide {
    margin-top:19px;
    padding-top:16px;
    border-top:1px solid #eeeeee;
}

.akn-search-guide-label {
    display:block;
    margin-bottom:9px;
    color:#969ca5 !important;
    font-size:12px !important;
    font-weight:500 !important;
}

.akn-search-guide a {
    display:inline-block;
    margin-right:14px;
    color:#555d67 !important;
    font-size:13px !important;
    font-weight:500 !important;
    text-decoration:none !important;
}

.akn-search-guide a:hover {
    color:#405e8c !important;
}


/* =========================================================
   RIGHT SERVICE
========================================================= */

.akn-service {
    position:absolute;
    right:0;
    top:50%;
    width:350px;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    transform:translateY(-50%);
}

.akn-service-item {
    position:relative;
    display:flex;
    height:42px;
    padding:0 11px;
    align-items:center;
    justify-content:center;
    text-decoration:none !important;
    white-space:nowrap;
}

.akn-service-item + .akn-service-item:before {
    content:"";
    position:absolute;
    left:0;
    top:14px;
    width:1px;
    height:14px;
    background:#e0e0e0;
}

.akn-service-main {
    color:#4a4f56 !important;
    font-size:13px !important;
    font-weight:600 !important;
    letter-spacing:-0.5px;
}

.akn-service-item:hover .akn-service-main {
    color:#17191c !important;
}

.akn-service-customer {
    position:relative;
    padding:0;
}

.akn-service-customer-main {
    display:flex;
    height:42px;
    padding:0 12px;
    align-items:center;
    justify-content:center;
    color:#333333 !important;
    text-decoration:none !important;
    white-space:nowrap;
}

.akn-service-sub {
    visibility:hidden;
    opacity:0;
    position:absolute;
    top:42px;
    left:50%;
    width:150px;
    padding:9px 0;
    border:1px solid #e1e4e8;
    border-radius:0 0 8px 8px;
    background:#ffffff;
    box-shadow:0 9px 22px rgba(34,42,53,0.10);
    transform:translateX(-50%) translateY(4px);
    transition:
        opacity .14s ease,
        transform .14s ease;
    z-index:11000;
}

.akn-service-customer:hover .akn-service-sub {
    visibility:visible;
    opacity:1;
    transform:translateX(-50%) translateY(0);
}

.akn-service-sub a {
    display:block;
    width:100%;
    padding:9px 16px;
    background:#ffffff;
    color:#505761 !important;
    font-size:13px !important;
    font-weight:500 !important;
    line-height:18px !important;
    text-align:left;
    text-decoration:none !important;
    white-space:nowrap;
}

.akn-service-sub a:hover {
    background:#f6f8fb;
    color:#405d8c !important;
}


/* =========================================================
   MAIN NAV
========================================================= */

.akn-nav {
    position:relative;
    width:100%;
    height:58px;
    border-top:1px solid #ededed;
    border-bottom:1px solid #d8dadd;
    background:#ffffff;
    z-index:8000;
}

.akn-nav-inner {
    position:relative;
    height:57px;
    display:flex;
    align-items:stretch;
}

.akn-nav-pages {
    position:relative;
    flex:1;
    height:57px;
    min-width:0;
}

.akn-nav-page {
    display:none;
    width:100%;
    height:57px;
    align-items:stretch;
}

.akn-nav-page.akn-nav-page-active {
    display:flex;
}

.akn-nav-page .akn-menu-item {
    flex:1;
}


/* =========================================================
   MAIN MENU ITEM
========================================================= */

.akn-menu-item {
    position:relative;
    height:57px;
}

.akn-menu-main {
    position:relative;
    display:flex;
    width:100%;
    height:57px;
    align-items:center;
    justify-content:center;
    color:#202328 !important;
    font-size:15px !important;
    font-weight:700 !important;
    letter-spacing:-0.7px;
    text-align:center;
    text-decoration:none !important;
    white-space:nowrap;
}

.akn-menu-main:after {
    content:"";
    position:absolute;
    left:50%;
    bottom:-1px;
    width:0;
    height:3px;
    background:#65799c;
    transform:translateX(-50%);
    transition:width .17s ease;
}

.akn-menu-item:hover > .akn-menu-main:after {
    width:calc(100% - 36px);
}

.akn-menu-item:hover > .akn-menu-main {
    color:#405778 !important;
}


/* =========================================================
   MORE / PREVIOUS
========================================================= */

.akn-menu-switch .akn-menu-main {
    color:#526071 !important;
}

.akn-more-arrow,
.akn-prev-arrow {
    display:inline-block;
    color:#71819a !important;
    font-family:Arial,sans-serif;
    font-size:21px !important;
    line-height:1 !important;
    font-weight:400 !important;
}

.akn-more-arrow {
    margin-left:7px;
}

.akn-prev-arrow {
    margin-right:7px;
}


/* =========================================================
   SMALL SUB MENU
========================================================= */

.akn-menu-sub {
    visibility:hidden;
    opacity:0;
    position:absolute;
    top:57px;
    left:50%;
    min-width:190px;
    padding:11px 0;
    border:1px solid #e1e4e8;
    border-radius:0 0 8px 8px;
    background:#ffffff;
    box-shadow:0 10px 24px rgba(34,42,53,0.11);
    transform:translateX(-50%) translateY(5px);
    transition:opacity .14s ease,transform .14s ease;
    z-index:9000;
}

.akn-menu-item:hover > .akn-menu-sub {
    visibility:visible;
    opacity:1;
    transform:translateX(-50%) translateY(0);
}

.akn-menu-sub a {
    display:block;
    min-width:188px;
    padding:9px 17px;
    color:#505761 !important;
    background:#ffffff;
    font-size:14px !important;
    font-weight:500 !important;
    line-height:19px !important;
    text-decoration:none !important;
    white-space:nowrap;
}

.akn-menu-sub a:hover {
    background:#f6f8fb;
    color:#405d8c !important;
}


/* =========================================================
   WIND INSTRUMENTS - 2 COLUMN
========================================================= */

.akn-menu-sub.akn-menu-sub-wide {
    display:grid;
    grid-template-columns:1fr 1fr;
    width:380px;
    min-width:380px;
    padding:11px 0;
}

.akn-menu-sub-wide .akn-menu-sub-column {
    min-width:0;
}

.akn-menu-sub-wide .akn-menu-sub-column + .akn-menu-sub-column {
    border-left:1px solid #eeeeee;
}

.akn-menu-sub-wide a {
    min-width:0;
    width:100%;
}


/* =========================================================
   ALL INSTRUMENT BUTTON
========================================================= */

.akn-menu-all {
    position:relative;
    flex:0 0 158px;
    height:57px;
}

.akn-menu-main-all {
    color:#526071 !important;
}

.akn-menu-grid-icon {
    display:block;
    width:16px;
    margin-right:8px;
}

.akn-menu-grid-icon span {
    display:block;
    width:16px;
    height:1px;
    margin:4px 0;
    background:currentColor;
}


/* =========================================================
   ALL INSTRUMENT MEGA MENU
========================================================= */

.akn-all-mega {
    visibility:hidden;
    opacity:0;
    position:absolute;
    top:57px;
    right:0;
    width:1100px;
    padding:34px 36px 39px;
    border:1px solid #dfe2e6;
    background:#ffffff;
    box-shadow:0 14px 35px rgba(32,40,50,0.12);
    transform:translateY(5px);
    transition:opacity .14s ease,transform .14s ease;
    z-index:9500;
}

.akn-menu-all:hover > .akn-all-mega {
    visibility:visible;
    opacity:1;
    transform:translateY(0);
}

.akn-all-mega-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:34px 45px;
}

.akn-all-title {
    margin-bottom:12px;
    padding-bottom:10px;
    border-bottom:1px solid #e1e3e6;
    color:#202328 !important;
    font-size:16px !important;
    font-weight:700 !important;
    line-height:22px !important;
}

.akn-all-group a {
    display:block;
    padding:4px 0;
    color:#575e67 !important;
    font-size:14px !important;
    font-weight:400 !important;
    line-height:21px !important;
    text-decoration:none !important;
}

.akn-all-group a:hover {
    color:#405d8c !important;
    font-weight:600 !important;
}


/* =========================================================
   FIXED NAV
========================================================= */

.akn-nav.akn-fixed {
    position:fixed;
    top:0;
    left:0;
    right:0;
    box-shadow:0 3px 13px rgba(0,0,0,0.08);
}

.akn-nav-space {
    display:none;
    width:100%;
    height:58px;
}

.akn-nav-space.akn-show {
    display:block;
}
/* BASIC css end */