/* BASIC css start */
/* =========================================================
   AKKINARA MAIN
========================================================= */

.akm-main {
    width:1100px;
    margin:0 auto;
    padding:0 0 80px;
    background:#ffffff;
    color:#222222;
    font-family:"Pretendard","Noto Sans KR","맑은 고딕","Malgun Gothic",Arial,sans-serif;
    text-align:left;
}

.akm-main * {
    box-sizing:border-box;
}


/* =========================================================
   HERO
========================================================= */

.akm-hero {
    position:relative;
    width:1100px;
    height:440px;
    overflow:hidden;
    background:#f4f4f4;
}

.akm-hero-slides {
    position:relative;
    width:100%;
    height:100%;
}

.akm-hero-slide {
    visibility:hidden;
    opacity:0;
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    transition:opacity .45s ease;
    z-index:1;
}

.akm-hero-slide-active {
    visibility:visible;
    opacity:1;
    z-index:2;
}

.akm-hero-link {
    display:block;
    width:100%;
    height:100%;
}

.akm-hero-image {
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    border:0;
}

.akm-hero-arrow {
    position:absolute;
    top:50%;
    width:42px;
    height:58px;
    margin-top:-29px;
    padding:0;
    border:0;
    background:rgba(0,0,0,.22);
    color:#ffffff;
    font-size:32px;
    font-weight:300;
    line-height:58px;
    text-align:center;
    cursor:pointer;
    z-index:10;
}

.akm-hero-arrow:hover {
    background:rgba(0,0,0,.38);
}

.akm-hero-prev {
    left:18px;
}

.akm-hero-next {
    right:18px;
}

.akm-hero-control {
    position:absolute;
    left:0;
    right:0;
    bottom:18px;
    display:flex;
    justify-content:center;
    gap:8px;
    z-index:10;
}

.akm-hero-dot {
    width:9px;
    height:9px;
    padding:0;
    overflow:hidden;
    border:0;
    border-radius:50%;
    background:rgba(255,255,255,.55);
    color:transparent;
    font-size:0;
    cursor:pointer;
}

.akm-hero-dot-active {
    width:24px;
    border-radius:6px;
    background:#ffffff;
}


/* =========================================================
   AUDIENCE
========================================================= */

.akm-audience {
    margin-top:72px;
}

.akm-audience-head {
    max-width:760px;
    margin:0 auto 31px;
    text-align:center;
}

.akm-audience-kicker {
    margin-bottom:8px;
    color:#9aa1a8;
    font-size:11px;
    font-weight:700;
    letter-spacing:1.6px;
}

.akm-audience-title {
    color:#202329;
    font-size:28px;
    font-weight:700;
    line-height:1.4;
    letter-spacing:-1.2px;
}

.akm-audience-desc {
    margin-top:12px;
    color:#787f87;
    font-size:14px;
    line-height:1.75;
    letter-spacing:-.35px;
}

.akm-audience-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
}

.akm-audience-card {
    position:relative;
    display:block;
    min-height:260px;
    padding:29px 28px 27px;
    border:1px solid #e3e6e9;
    border-radius:12px;
    background:#ffffff;
    color:#222222;
    text-decoration:none !important;
    transition:
        border-color .16s ease,
        box-shadow .16s ease,
        transform .16s ease;
}

.akm-audience-card:hover {
    border-color:#c9d0d7;
    box-shadow:0 10px 26px rgba(30,40,50,.07);
    transform:translateY(-2px);
}

.akm-audience-card-featured {
    border-color:#d6dee6;
    background:#f7f9fb;
}

.akm-audience-number {
    position:absolute;
    top:24px;
    right:25px;
    color:#e0e4e8 !important;
    font-family:Arial,sans-serif;
    font-size:28px;
    font-weight:700;
    line-height:1;
}

.akm-audience-label {
    display:block;
    padding-right:55px;
    color:#949ca5 !important;
    font-size:11px;
    font-weight:700;
    line-height:1.4;
    letter-spacing:1.2px;
}

.akm-audience-card-title {
    display:block;
    margin-top:17px;
    color:#25292e !important;
    font-size:21px;
    font-weight:700;
    line-height:1.4;
    letter-spacing:-.6px;
}

.akm-audience-text {
    display:block;
    min-height:82px;
    margin-top:13px;
    color:#727982 !important;
    font-size:13px;
    line-height:1.75;
    letter-spacing:-.3px;
    word-break:keep-all;
}

.akm-audience-more {
    display:flex;
    margin-top:22px;
    align-items:center;
    gap:7px;
    color:#4f5d6c !important;
    font-size:13px;
    font-weight:700;
}


/* =========================================================
   PRODUCT SECTION
========================================================= */

.akm-product-section {
    margin-top:88px;
}

.akm-product-section-head {
    display:flex;
    margin-bottom:30px;
    padding-bottom:18px;
    align-items:flex-end;
    justify-content:space-between;
    border-bottom:1px solid #e5e7e9;
}

.akm-product-kicker {
    margin-bottom:6px;
    color:#9ba1a8;
    font-size:12px;
    font-weight:800;
    line-height:1.4;
    letter-spacing:1.2px;
}

.akm-product-section-title {
    color:#202329;
    font-size:28px;
    font-weight:700;
    line-height:1.35;
    letter-spacing:-1px;
}

.akm-product-section-title strong {
    color:#e54848;
    font-weight:800;
}

.akm-product-section-desc {
    margin-top:8px;
    color:#858b92;
    font-size:14px;
    line-height:1.55;
}


/* =========================================================
   PRODUCT GRID
========================================================= */

.akm-product-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    column-gap:22px;
    row-gap:52px;
}

.akm-product-card {
    min-width:0;
}


/* =========================================================
   PRODUCT IMAGE
========================================================= */

.akm-product-thumb {
    position:relative;
    display:flex;
    width:100%;
    height:255px;
    padding:0;
    align-items:center;
    justify-content:center;
    overflow:hidden;

    border:0 !important;
    outline:0 !important;
    border-radius:8px;

    background:#ffffff !important;

    box-shadow:none !important;

    text-decoration:none !important;
}

.akm-product-thumb:focus,
.akm-product-thumb:active {
    border:0 !important;
    outline:0 !important;
    box-shadow:none !important;
}


/*
   중요:
   기존 width:100%; height:100% 제거.

   원본 이미지를 억지로 썸네일 박스 크기로
   확장하지 않고 원래 비율로 가운데 배치.
*/

.akm-product-thumb img {
    display:block;

    width:auto !important;
    height:auto !important;

    max-width:100% !important;
    max-height:100% !important;

    margin:0 auto !important;
    padding:0 !important;

    border:0 !important;
    outline:0 !important;

    background:#ffffff !important;

    box-shadow:none !important;

    object-fit:contain;

    vertical-align:middle;

    transition:transform .23s ease;
}

.akm-product-card:hover .akm-product-thumb img {
    transform:scale(1.025);
}


/* =========================================================
   BADGE
========================================================= */

.akm-product-badge {
    position:absolute;
    left:10px;
    top:10px;
    z-index:4;

    display:inline-flex;

    height:26px;

    padding:0 9px;

    align-items:center;
    justify-content:center;

    border-radius:4px;

    font-size:11px;
    font-weight:800;
    line-height:26px;

    letter-spacing:.3px;
}

.akm-product-badge-pick {
    background:#e54848;
    color:#ffffff !important;
}

.akm-product-badge-new {
    background:#405a74;
    color:#ffffff !important;
}


/* =========================================================
   PRODUCT INFO
========================================================= */

.akm-product-info {
    padding:17px 2px 0;
}


/*
   상품명 확대
   기존 15px -> 17px
*/

.akm-product-name {
    display:block;

    min-height:50px;

    overflow:hidden;

    color:#22262b !important;

    font-size:17px !important;
    font-weight:600 !important;

    line-height:24px !important;

    letter-spacing:-.55px;

    text-decoration:none !important;

    word-break:keep-all;
}

.akm-product-card:hover .akm-product-name {
    color:#111418 !important;
    text-decoration:none !important;
}


/* 부가설명 */

.akm-product-sub {
    min-height:21px;

    margin-top:5px;

    overflow:hidden;

    color:#7b828a !important;

    font-size:13px !important;

    line-height:20px !important;

    letter-spacing:-.3px;

    word-break:keep-all;
}


/* =========================================================
   PRICE
========================================================= */

.akm-product-price-area {
    min-height:66px;
    margin-top:11px;
}


/* 정가 */

.akm-product-oldprice {
    min-height:19px;

    color:#9da3a9 !important;

    font-size:13px !important;
    font-weight:400;

    line-height:19px;

    text-decoration:line-through;
}


/* 할인율 + 판매가 */

.akm-product-sale-line {
    display:flex;

    min-height:32px;

    margin-top:2px;

    align-items:baseline;

    gap:8px;
}

.akm-product-discount {
    display:none;

    color:#e54848 !important;

    font-size:20px !important;
    font-weight:800;

    line-height:30px;

    letter-spacing:-.5px;
}

.akm-product-price {
    color:#181b1f !important;

    font-size:20px !important;
    font-weight:800 !important;

    line-height:30px !important;

    letter-spacing:-.55px;
}

.akm-product-price-single {
    margin-top:20px;
}


/* 할인 없는 경우 */

.akm-price-no-discount .akm-product-oldprice {
    display:none;
}

.akm-price-no-discount .akm-product-discount {
    display:none !important;
}

.akm-price-no-discount .akm-product-sale-line {
    margin-top:20px;
}


/* =========================================================
   SOLD OUT
========================================================= */

.akm-product-soldout {
    display:inline-flex;

    min-height:27px;

    margin-top:18px;

    padding:0 9px;

    align-items:center;

    border:1px solid #e2e4e6;
    border-radius:4px;

    background:#f4f5f6;

    color:#777e85 !important;

    font-size:12px;
    font-weight:700;
}


/* =========================================================
   PRODUCT ICON
========================================================= */

.akm-product-icons {
    min-height:18px;
    margin-top:6px;
}

.akm-product-icons:empty {
    display:none;
}

.akm-product-icons img {
    margin-right:3px;
    border:0 !important;
    vertical-align:middle;
}


/* =========================================================
   PROMOTION
========================================================= */

.akm-promo {
    margin-top:88px;
}

.akm-promo-grid {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px;
}

.akm-promo-card {
    position:relative;

    display:block;

    width:100%;
    height:230px;

    overflow:hidden;

    border:0;
    border-radius:10px;

    background:#f4f6f8;

    text-decoration:none !important;
}

.akm-promo-image {
    display:block;

    width:100%;
    height:100%;

    border:0;

    object-fit:cover;

    transition:transform .25s ease;
}

.akm-promo-card:hover .akm-promo-image {
    transform:scale(1.015);
}

.akm-promo-placeholder {
    display:flex;

    width:100%;
    height:100%;

    align-items:center;
    justify-content:center;

    flex-direction:column;

    border:1px solid #e1e5e9;
    border-radius:10px;

    text-align:center;
}

.akm-promo-placeholder-label {
    margin-bottom:10px;

    color:#a1a8af !important;

    font-size:11px;
    font-weight:700;

    letter-spacing:1.3px;
}

.akm-promo-placeholder strong {
    color:#515960 !important;

    font-size:17px;
    font-weight:700;
}

.akm-promo-placeholder > span:last-child {
    margin-top:7px;

    color:#979ea5 !important;

    font-size:12px;
}


/* =========================================================
   GUIDE
========================================================= */

.akm-guide {
    margin-top:88px;
}

.akm-section-head {
    margin-bottom:27px;
}

.akm-section-title {
    color:#202329;

    font-size:26px;
    font-weight:700;

    line-height:1.3;

    letter-spacing:-1.1px;
}

.akm-section-desc {
    margin-top:8px;

    color:#8a8f97;

    font-size:14px;

    line-height:1.5;
}

.akm-guide-grid {
    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:18px;
}

.akm-guide-card {
    display:block;

    min-height:235px;

    padding:31px 27px;

    border-top:2px solid #34383e;

    background:#fafafa;

    text-decoration:none !important;
}

.akm-guide-category {
    display:block;

    color:#a1a5ab !important;

    font-size:11px;
    font-weight:700;

    letter-spacing:1px;
}

.akm-guide-title {
    display:block;

    margin-top:15px;

    color:#24272c !important;

    font-size:18px;
    font-weight:700;

    line-height:1.45;
}

.akm-guide-text {
    display:block;

    margin-top:13px;

    color:#777e86 !important;

    font-size:13px;

    line-height:1.8;

    letter-spacing:-.35px;
}


/* =========================================================
   SUPPORT
========================================================= */

.akm-support {
    display:grid;

    grid-template-columns:repeat(4,1fr);

    margin-top:80px;

    border-top:1px solid #e4e6e8;
    border-bottom:1px solid #e4e6e8;
}

.akm-support-item {
    position:relative;

    display:block;

    padding:27px 22px;

    color:#222222;

    text-decoration:none !important;
}

.akm-support-item + .akm-support-item:before {
    content:"";

    position:absolute;

    left:0;
    top:25px;

    width:1px;
    height:45px;

    background:#e5e7e9;
}

.akm-support-title {
    display:block;

    color:#32363b !important;

    font-size:14px;
    font-weight:700;
}

.akm-support-desc {
    display:block;

    margin-top:6px;

    color:#92979d !important;

    font-size:12px;

    line-height:18px;
}


/* =========================================================
   OLD MAKESHOP CSS SAFETY
========================================================= */

/*
   메이크샵 기존 img / a 스타일이
   썸네일에 다시 들어오는 것까지 차단
*/

.akm-main .akm-product-thumb,
.akm-main .akm-product-thumb:hover,
.akm-main .akm-product-thumb:focus {
    border:0 !important;
    outline:0 !important;
    box-shadow:none !important;
}

.akm-main .akm-product-thumb img,
.akm-main .akm-product-thumb:hover img {
    border:0 !important;
    outline:0 !important;
    box-shadow:none !important;
}
/* BASIC css end */