@charset "utf-8";

:root {
    /* Color tokens */
    --color-brand-primary: #1A9AFC;
    --color-brand-secondary: #155F98;
    --color-highlight: #FF7676;
    --color-highlight-soft: #FFF5F5;
    --color-surface-primary: #FFFFFF;
    --color-surface-secondary: #F0F8FF;
    --color-surface-tertiary: #E6F0FF;
    --color-surface-muted: #F7F7F7;
    --color-surface-subtle: #FCFCFC;
    --color-surface-alt: #F8F8F8;
    --color-surface-cream: #FEF8D6;
    --color-surface-blush: #FFF8F8;
    --color-surface-mint: #F6FFE5;
    --color-surface-ice: #F2FEFF;
    --color-line-default: #C9C9C9;
    --color-line-strong: #1F1F1F;
    --color-line-light: #E9E9E9;
    --color-line-soft: #D9D9D9;
    --color-text-primary: #000000;
    --color-text-strong: #454545;
    --color-text-default: #6B6B6B;
    --color-text-muted: #848484;
    --color-text-subtle: #9B9B9B;
    --color-text-disabled: #BEBEBE;
    --color-text-negative: #FF2223;
    --color-support-success: #06C755;
    --color-support-facebook: #1877F2;
    --color-support-warning: #FFE9E9;
    --color-surface-secondary-alt: #F1F8FF;
    --color-surface-contrast: #333333;
    --color-overlay-strong: #444444;
    --color-border-accent: #B8D9FC;
    --color-text-placeholder: #999999;
    --color-text-thin: #8F8F8F;
    --color-white: #FFFFFF;

    /* Font tokens */
    --font-family-base: var(--font-main);
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-size-xxs: 10px;
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-md: 16px;
    --font-size-2md: 18px;
    --font-size-lg: 20px;
    --font-size-2lg: 22px;
    --font-size-3lg: 26px;
    --font-size-4lg: 30px;
    --font-size-3xs: 6px;
    --font-size-2xs: 8px;
    --font-size-xs-alt: 11px;
    --font-size-sm-alt: 13px;
    --font-size-lg-alt: 18px;

    /* Spacing tokens */
    --spacing-xxs: 4px;
    --spacing-xs: 6px;
    --spacing-sm: 8px;
    --spacing-md: 10px;
    --spacing-lg: 12px;
    --spacing-xl: 16px;
    --spacing-2xl: 20px;
    --spacing-3xl: 24px;
    --spacing-4xl: 30px;
    --spacing-5xl: 32px;
    --spacing-6xl: 36px;
    --spacing-7xl: 40px;
    --spacing-8xl: 60px;

    /* Radius tokens */
    --radius-xs: 4px;
    --radius-sm: 5px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 10px;
    --radius-2xl: 12px;
    --radius-3xl: 16px;
    --radius-4xl: 20px;
    --radius-pill: 48px;
    --radius-full: 50%;
}

.fs_type1 {font-size:var(--font-size-xxs) !important;}
.fs_type2 {font-size:var(--font-size-xs) !important;}
.fs_type3 {font-size:var(--font-size-sm) !important;}
.fs_type4 {font-size:var(--font-size-md) !important;}
.fs_type5 {font-size:var(--font-size-2md) !important;}

.fs_regular {font-weight:var(--font-weight-regular);}
.fs_bold {font-weight:var(--font-weight-bold);}

/* 공통 */
/* 헤더 */
header {border-bottom:1px solid var(--color-line-soft); width:100%; padding:20px 0 10px; display:flex; flex-wrap:wrap; row-gap:20px; justify-content: space-between; align-items: center;}
header .inner {width:1200px; margin:0 auto; display:flex; flex-direction: column; gap:20px;}
header .inner > div {display:flex; justify-content: space-between;}
header nav {width:1200px; display:flex; justify-content: space-between; align-items: center; position:relative;}
header nav > * {font-size:var(--font-size-lg); color:var(--color-text-default); font-weight:var(--font-weight-bold); cursor:pointer; padding:10px 0px;}
header nav .list {display:none}
header nav .search {width:24px; height:24px; background:url(/images/common/ic-search-6ccd5df1f6351d46c9bcf7474762c93b.png) no-repeat 0 0; background-size:24px 24px;}
header nav .select:after {content:''; width:14px; height:10px; background:url(/images/common/arrow-language-e4d1313ff022f5e7ce7c140e50b55e2a.png) no-repeat 0 0; background-size:14px 10px;}
header nav .select {position:absolute; left:162px; top:-56px; width:194px; font-size:var(--font-size-md); display:flex; justify-content: space-between; align-items: center; color:var(--color-text-default); font-weight:var(--font-weight-bold);}
header nav .select .ly {z-index:10; position:absolute; top:40px; left:-6px; width:calc(100% + 12px); border-radius:0 0 4px 4px; border:1px solid #E6F0FF; display:none; flex-direction: column;}
header nav .select .ly span {background:#fff; color:var(--color-text-default); cursor:pointer; padding:16px 6px; font-size:var(--font-size-md); font-weight:var(--font-weight-medium);}
header nav .select .ly span:hover{background:#E6F0FF; font-weight:var(--font-weight-bold);}
header nav .select .ly span:last-child() { border-radius:0 0 4px 4px;}

header .giftto {display:flex; width:108px; height:32px; background:url(/images/common/giftto-logo-5507c651ff83043190f8d24014d8fa30.png) no-repeat 0 0; background-size:108px 32px;}
header .sub_gnb {display:flex; gap:10px; align-items: center; justify-content: center;}
header .sub_gnb > a {font-size:var(--font-size-xxs); color:var(--color-text-subtle);}
header .sub_gnb .lang {display:flex; gap:4px;}
header .sub_gnb .lang > * {font-size:var(--font-size-xxs); font-weight:var(--font-weight-regular); color:var(--color-brand-primary); width:46px; height:16px; line-height:16px; text-align:center; border-radius:var(--radius-xs); background:var(--color-surface-tertiary); cursor:pointer;}
header .sub_gnb .lang > *.on {color:var(--color-surface-primary); background:var(--color-brand-primary); font-weight:var(--font-weight-medium)}
/* 푸터 */
footer {background:var(--color-surface-subtle); height:118px; position:relative; display:flex; align-items: center;}
footer .inner {width:1200px; margin:0 auto; display:flex; justify-content: space-between; align-items: center;}
footer .daoujapan {width:156px; height:20px; background:url(/images/common/daouJapan-logo-24310975e63b67dfa4104c4bbbe342a3.png) no-repeat 0 0; background-size:156px 20px;}
footer .footer_box {display:flex; flex-direction: column; position:relative;}
footer .footer_box .footer_gnb {display:flex; gap:18px;}
footer .footer_box .footer_gnb a {font-size:var(--font-size-xs); color:var(--color-text-disabled); font-weight:var(--font-weight-bold);}
footer .footer_box address,
footer .footer_box address span {font-size:var(--font-size-xs); color:var(--color-text-disabled); font-weight:var(--font-weight-medium); line-height:14px;}
footer .footer_box address {margin-top:10px;}
footer .footer_box address span {margin-left:32px;}
footer .footer_box .corp {margin-top:20px; font-size:var(--font-size-2xs); color:var(--color-text-disabled); font-weight:var(--font-weight-medium); line-height:10px;}
footer .authentication {width:140px; height:106px; display:flex;}
footer .authentication .mark_isms {width:140px; height:106px; background:url(/images/common/mark_isms-671eaaa14bf44e51acbc653a9f14d2e7.png) no-repeat 0 0; background-size:140px 106px;}

/* 서브타이틀 영역 */
main .title {display:flex; justify-content: space-between;}
main .title.sub {margin:60px 0 0 0; flex-direction: column;}
main .title.sub .list_option {margin:40px 0 20px 0; display:flex; gap:20px;}
main .title.sub .list_option .custom-select.typeA {width:112px;}
main .title.sub .list_option .btn-filter {width:116px; height:28px; line-height:28px; display:flex; align-items: center; gap:8px; font-size:var(--font-size-sm); font-weight:var(--font-weight-bold); color:var(--color-text-default)}
main .title.sub .list_option .btn-filter:before {content:''; width:26px; height:24px; background:url(/images/common/ic-filter-5b8637f1c7ec10b9b22f81b8db2fa02a.png) no-repeat 0 0; background-size:26px 24px;}
main .title h4 {font-size:var(--font-size-lg); font-weight:var(--font-weight-bold); color:var(--color-text-default); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; width:calc(100% - 100px);}
main .title p {font-size:var(--font-size-md); font-weight:var(--font-weight-bold); color:var(--color-text-default);}
main .title a {font-size:var(--font-size-md); font-weight:var(--font-weight-medium); color:var(--color-text-subtle)}

/* 텍스트 박스 */
.txt_guide {display:flex; gap:8px; align-items: center; border-radius:var(--radius-lg); padding:12px; background:var(--color-surface-muted); margin-top:40px;}
.txt_guide span {background:url(/images/common/ic_txt_box-3a234e55c96f9b8208aeb43c7f73cf9b.png) no-repeat 0 0; width:24px; height:24px; background-size:24px 24px;}
.txt_guide ul li {padding-left:14px; color:var(--color-text-subtle); font-size:var(--font-size-sm); line-height:17px; font-weight:var(--font-weight-regular); position:relative;}
.txt_guide ul li:before {content:''; width:3px; height:3px; background:var(--color-text-subtle); display:block; position:absolute; top:7px; left:4px;}

/* 검색 레이어 */
.ly_search {z-index:9990; position:absolute; top:124px; left:0; width:100%; background:var(--color-surface-primary); padding:20px 0; display:none;}
.ly_search .inner {display:flex; flex-direction: column; width:100%; max-width:1200px; margin:0 auto 0; gap:20px;}
.ly_search .search_box {border-radius:var(--radius-sm); height:48px; border:1px solid var(--color-brand-primary); width:100%; position:relative;}
.ly_search .search_box button {position:absolute; top:5px; left:5px; width:36px; height:36px; background:url(/images/common/ic-search-6ccd5df1f6351d46c9bcf7474762c93b.png) no-repeat 0 0; background-size:36px 36px;}
.ly_search .search_box input {width:100%; height:100%; line-height:100%; border:none; border-radius:var(--radius-sm); padding:14px 50px; font-size:var(--font-size-md); color:var(--color-text-subtle); font-weight:var(--font-weight-medium);}
.ly_search .type_box {display:flex; justify-content: space-between; align-items: center;}
.ly_search .type_box .type {display:flex;}
.ly_search .type_box .type span {cursor:pointer; height:36px; line-height:36px; padding:0 20px; font-weight:var(--font-weight-bold); border-radius:40px; background:var(--color-surface-subtle); color:var(--color-line-default);}
.ly_search .type_box .type span.on {background:var(--color-brand-primary); color:var(--color-surface-primary);}
.ly_search .type_box button {font-size:var(--font-size-md); font-weight:var(--font-weight-bold); color:#1A9AFC; padding:8px 20px;}
.ly_search .category_group {display:flex; flex-direction: column; gap:10px;}
.ly_search .category_group div {display:flex; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; gap:8px;}
.ly_search .category_group div > * {height:60px; line-height:60px; display:flex; cursor:pointer; padding:0 24px; font-size:var(--font-size-md); color:var(--color-text-subtle); font-weight:var(--font-weight-regular); border-radius:100px; background:var(--color-surface-muted); word-break:keep-all}
.ly_search .category_group div > *.on {background:var(--color-surface-secondary); color:var(--color-brand-primary); font-weight:var(--font-weight-bold);}
.ly_search .btn {display:flex; justify-content: center;}
.ly_search .btn button {width:226px; height:42px; line-height:42px; background:#1A9AFC; color:#fff; font-size:var(--font-size-md); font-weight:var(--font-weight-bold); border-radius:var(--radius-sm);}

div::-webkit-scrollbar {height:4px;}
div::-webkit-scrollbar-track {background: var(--color-surface-primary);}
div::-webkit-scrollbar-thumb {background: var(--color-line-light);}
div::-webkit-scrollbar-thumb:hover {background: var(--color-line-light);}

.swiper-scrollbar-drag {
    background: rgba(0,0,0,0.2); /* 손잡이 색 */
    border-radius: 999px;
}


.all_gnb,
.mo_gnb,
.mo_bott_menu {display:none;}

/* swiper slide */
.swiper {width: 100%; height: 100%;}

/* paging */
.pg_num_area {margin-top:30px; display:flex; align-items: center; justify-content: center; gap:12px;}
.pg_num_area > div {display:flex; align-items: center; gap:2px;}
.pg_num_area > div * {width:24px; height:24px; color:var(--color-line-default); font-size:var(--font-size-sm); font-weight:var(--font-weight-bold); border-radius:var(--radius-full); text-align:center;}
.pg_num_area > div *.on {background:var(--color-brand-primary); color:var(--color-surface-primary);}
.pg_num_area .btn_first {width:24px; height:24px; background:url(/images/common/ic_pg_first-411d1efe532b46af32a4510b355bcc02.png) no-repeat 0 0; background-size:24px 24px;}
.pg_num_area .btn_prev {width:24px; height:24px; background:url(/images/common/ic_pg_prev-d935135c5bb7a48b0aafe210b1553404.png) no-repeat 0 0; background-size:24px 24px;}
.pg_num_area .btn_next {width:24px; height:24px; background:url(/images/common/ic_pg_next-58418b5778726a17c26a7159b280a42e.png) no-repeat 0 0; background-size:24px 24px;}
.pg_num_area .btn_last {width:24px; height:24px; background:url(/images/common/ic_pg_last-fab2dbc90f878bb48ae45e5983de0db1.png) no-repeat 0 0; background-size:24px 24px;}

/* 페이지 내용없음 */
main .none_area {font-size:var(--font-size-lg-alt); font-weight:var(--font-weight-medium); color:var(--color-brand-primary); width:100%; text-align:center; padding:44px 0; border-top:1px solid var(--color-brand-primary); border-bottom:1px solid var(--color-line-default);}





@media all and (max-width:768px){

/* 공통 */
/* 헤더 */
header {z-index:9990; position:fixed; top:0; background:var(--color-surface-primary); padding:11px 20px; width:calc(100% - 40px);}
header .inner {gap:0;}
header nav {position:relative; justify-content: flex-start; width:100%;}
header nav > a {display:none}
header nav .select {margin-left:0px; width:138px; font-size:var(--font-size-xs); color:var(--color-text-default); left:46px; top:-4px; font-weight:var(--font-weight-regular)} 
header nav .select .ly {top:36px;}
header nav .select .ly span {font-size:var(--font-size-xs); font-weight:var(--font-weight-regular);}
header nav .select:after {width:7px; height:5px; background-size:7px 5px;}
header nav .search {position:absolute; top:0px; right:0px; width:28px; height:28px; background-size:28px 28px;}
header nav .list {padding:0; position:absolute; top:0px; right:0px; width:28px; height:28px; background:url(/images/common/ic-list-7388ebe0e5a940baebf2246c492ce33e.png) no-repeat 4px 0; background-size:20px 28px;}

.all_gnb.on {display:flex;}
.all_gnb {z-index:100; display:none; flex-direction: column; background:var(--color-surface-primary); height:100%; max-height:calc(100vh - 60px); overflow-y:auto; position:fixed; top:50px; left:0; width:100%;}
.all_gnb .info {height:104px; display:flex; gap:68px; justify-content: center; flex-shrink:0;}
.all_gnb .info > * {width:50px; height:58px; cursor:pointer; text-align:center; font-size:var(--font-size-xxs); font-weight:var(--font-weight-medium); line-height:12px; color:var(--color-text-subtle);}
.all_gnb .info > *:before {content:''; width:36px; height:36px; display:block; margin:23px auto 10px;}
.all_gnb .info > .btn_log:before {background:url(/images/common/ic-mo-login-a50d5af44867def27d9cf70d295cfe48.png) no-repeat 0 0; background-size:36px 36px;}
.all_gnb .info > .btn_log.off:before {background:url(/images/common/ic-mo-logout-6ac38f87010509c43be93c9b1b18e574.png) no-repeat 0 0; background-size:36px 36px;}
.all_gnb .info > .btn_cart:before {background:url(/images/common/ic-mo-cart-4ac5d8b58de03fdc1edcec228d91a0a0.png) no-repeat 0 0; background-size:36px 36px;}
.all_gnb .menu {border-top:1px solid var(--color-line-default); display:flex; flex-direction: column; flex-shrink:0;}
.all_gnb .menu > * {padding:0 21px; cursor:pointer; position:relative; height:47px; border-bottom:1px solid var(--color-line-default); font-size:var(--font-size-sm); font-weight:var(--font-weight-medium); line-height:47px; color:var(--color-text-subtle);}
.all_gnb .menu > *:after {position:absolute; top:17px; right:21px; content:''; width:6px; height:12px; display:block; background:url(/images/common/arrow3-r-mo-f057f87b38449012530798b922e50509.png) no-repeat 0 0; background-size:6px 12px;}
.all_gnb .option {display:flex; justify-content: space-between; align-items: center; padding:0 21px; height:47px; border-bottom:1px solid var(--color-line-default); flex-shrink:0;}
.all_gnb .option span {font-size:var(--font-size-sm); font-weight:var(--font-weight-medium); color:var(--color-text-subtle);}
.all_gnb .option .lang {display:flex; gap:4px;}
.all_gnb .option .lang > * {font-size:var(--font-size-xs); font-weight:var(--font-weight-regular); color:var(--color-brand-primary); width:60px; height:20px; line-height:20px; text-align:center; border-radius:var(--radius-xs); background:var(--color-surface-tertiary);}
.all_gnb .option .lang > *.on {color:var(--color-surface-primary); background:var(--color-brand-primary); font-weight:var(--font-weight-bold)}
.all_gnb .btn {display:flex; gap:4px; box-sizing:border-box; align-items: center; justify-content: center; margin-top:30px; padding-bottom:120px; flex-shrink:0;}
.all_gnb .btn > * {width:112px; height:27px; line-height:27px; border:1px solid var(--color-line-default); text-align:center; border-radius:26px; font-size:var(--font-size-sm); color:var(--color-text-subtle); font-weight:var(--font-weight-regular);}

.mo_gnb {display:block; width:28px; height:28px; background:url(/images/common/ic_mo_gnb-8a8ee9d19d6dafde10ea39ad72c30c55.png) no-repeat 0 0; background-size:28px 28px;}
.mo_bott_menu {z-index:100; position:fixed; left:0; bottom:0; background:var(--color-surface-subtle); padding:0px 0; width:100%; display:flex; gap:32px; justify-content: center; align-items: center;}
.mo_bott_menu > * {font-size:var(--font-size-xs); line-height:14px; font-weight:var(--font-weight-bold); color:var(--color-line-default); text-align:center; width:60px; height:72px; cursor:pointer;}
.mo_bott_menu > *:before {content:''; display:block; width:32px; height:32px; margin:11px auto 4px;}
.mo_bott_menu .language:before {background:url(/images/common/ic_bott_1-8054b092328730cd21d840e7be9c3473.png) no-repeat 0 0; background-size:32px 32px;}
.mo_bott_menu .language.on:before {background:url(/images/common/ic_bott_1on-6af94bd12ed6c7f0543c2d8ae3381c19.png) no-repeat 0 0; background-size:32px 32px;}
.mo_bott_menu .language {position:relative;}
.mo_bott_menu .language .ly_bott_menu {display:none;}
.mo_bott_menu .language.on {background:var(--color-surface-secondary); color:var(--color-brand-primary);}
.mo_bott_menu .language.on .ly_bott_menu {display:flex; flex-direction: column; background:var(--color-surface-primary); position:absolute; left:0px; top:-92px;}
.mo_bott_menu .language.on .ly_bott_menu > * {width:54px; height:46px; line-height:46px; font-size:var(--font-size-sm); background:var(--color-surface-secondary); color:var(--color-brand-primary); cursor:pointer;}
.mo_bott_menu .language.on .ly_bott_menu > *.on {background:var(--color-surface-tertiary);}

.mo_bott_menu .home:before {background:url(/images/common/ic_bott_2-ec4fd7b5678f9713e4fcbf0f0d46d424.png) no-repeat 0 0;  background-size:32px 32px;}
.mo_bott_menu .account:before {background:url(/images/common/ic_bott_3-f5e96e73c16794f1047a08b878be55c8.png) no-repeat 0 0;  background-size:32px 32px;}
.mo_bott_menu .cart:before {background:url(/images/common/ic_bott_4-2219e55bd27e64c50361d514c12fb3a0.png) no-repeat 0 0;  background-size:32px 32px;}

/* 서브타이틀 영역 */
main .title {display:flex; justify-content: space-between;}
main .title.sub {margin:80px 0 0 0;}
main .title.sub .list_option {width:100%; margin:30px 0 8px 0; justify-content: space-between;}
main .title.sub .list_option .custom-select.typeA {width:100px;}
main .title.sub .list_option .btn-filter {font-size:var(--font-size-xs); width:auto; height:20px; line-height:20px;}
main .title.sub .list_option .btn-filter:before {width:22px; height:18px; background-size:22px 18px;}
main .title.non {display:none;}
main .title h4 {font-size:var(--font-size-md);  width:calc(100% - 60px);}
main .title a {font-size:var(--font-size-xxs);}

/* 텍스트 박스 */
.txt_guide {border-radius:var(--radius-lg); padding:8px; margin-top:20px;}
.txt_guide span {width:20px; height:20px; background-size:20px 20px; flex:0 0 20px;}
.txt_guide ul {width:100%;}
.txt_guide ul li {padding-left:14px; font-size:var(--font-size-xs); line-height:14px;}
.txt_guide ul li:before {content:''; width:3px; height:3px; background:var(--color-text-subtle); display:block; position:absolute; top:7px; left:4px;}

/* 검색 레이어 */
.ly_search {padding:20px 18px; top:50px; position:fixed;}
.ly_search .search_box {height:44px;}
.ly_search .search_box button {width:24px; height:24px; background-size:24px 24px; top:10px; left:5px;}
.ly_search .search_box input {font-size:var(--font-size-sm); font-weight:var(--font-weight-regular); padding:14px 40px;}
.ly_search .type_box button {font-size:var(--font-size-sm); padding:5px 12px;}
.ly_search .type span {height:28px; line-height:28px; padding:0 12px; font-size:var(--font-size-sm);}
.ly_search .category_group div {flex-wrap: nowrap; }
.ly_search .category_group div > * {height:35px; line-height:35px; border-radius:30px; padding:0 12px; font-size:var(--font-size-xs);}    
.ly_search .btn button {width:154px; height:36px; line-height:36px; font-size:var(--font-size-sm);}

/* paging */
.pg_num_area {margin-top:20px; display:flex; align-items: center; justify-content: center; gap:12px;}
.pg_num_area > div * {width:20px; height:20px; line-height:20px; font-size:var(--font-size-xs);}
.pg_num_area .btn_first {width:20px; height:20px; background:url(/images/common/ic_pg_first-411d1efe532b46af32a4510b355bcc02.png) no-repeat 0 0; background-size:20px 20px;}
.pg_num_area .btn_prev {width:20px; height:20px; background:url(/images/common/ic_pg_prev-d935135c5bb7a48b0aafe210b1553404.png) no-repeat 0 0; background-size:20px 20px;}
.pg_num_area .btn_next {width:20px; height:20px; background:url(/images/common/ic_pg_next-58418b5778726a17c26a7159b280a42e.png) no-repeat 0 0; background-size:20px 20px;}
.pg_num_area .btn_last {width:20px; height:20px; background:url(/images/common/ic_pg_last-fab2dbc90f878bb48ae45e5983de0db1.png) no-repeat 0 0; background-size:20px 20px;}

/* 페이지 내용없음 */
main .none_area {font-size:var(--font-size-xs); padding:80px 0; border-top:none;}

.giftto,
.sub_gnb,
footer {display:none !important;}

body.no_scroll {overflow: hidden;}
}