/* BASIC css start */
body {
    min-width:1200px;
}

#mask {
    display:none;
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index:200;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.6);
}


/* ==================================================
   다찾다 자동완성
================================================== */

.search-auto-complete-list {
    display:none;
    position:absolute;
    top:40px;
    left:0;
    z-index:1;
    border:1px solid #ddd;
    border-top:1px solid #000;
    background:#fff;
    line-height:14px;
}

.search-auto-complete-list ul {
    width:202px;
    padding:4px 0 6px;
    border-bottom:1px solid #ddd;
}

.search-auto-complete-list ul li {
    text-align:left;
}

.search-auto-complete-list ul li.on {
    background:#f3f3f3;
}

.search-auto-complete-list ul li a {
    display:block;
    padding:8px 14px 7px;
    color:#000;
    background:none;
    font-family:'dotum';
    font-size:12px;
    letter-spacing:-1px;
}

.search-auto-complete-list ul li a strong {
    color:#ab3e41;
}

.search-auto-complete-list ul li a:hover {
    background:#f2f2f2;
}

.search-auto-complete-list ul li a:hover span {
    border-bottom:1px solid #000;
}

.search-auto-complete-list .search-list-close {
    display:block;
    padding:10px 11px;
    color:#999;
    font-size:11px;
    text-align:right;
}


/* ==================================================
   다찾다 검색 파인더
================================================== */

#allfinder-layer {
    position:fixed;
    top:50px;
    right:110px;
    z-index:9999;
    width:1000px;
    overflow:hidden;
    zoom:1;
}

#allfinder-layer .finder-body {
    display:none;
    position:relative;
    z-index:1;
    width:998px;
    max-height:800px;
    padding:35px 40px 5px;
    overflow-x:hidden;
    overflow-y:auto;
    border:1px solid #666;
    background:#fff;
    box-sizing:border-box;
}

#allfinder-layer .finder-body .finder-close {
    position:absolute;
    top:15px;
    right:10px;
    color:#000;
    font-size:24px;
}

#allfinder-ctr {
    position:fixed;
    top:50px;
    right:0;
    z-index:10000;
    width:103px;
    height:86px;
}

#allfinder-ctr a {
    display:block;
    width:100%;
    height:100%;
    border:none;
    outline:none;
    background:url('/images/common/allfinder_ctrl_pc.png') no-repeat right top;
    font-size:0;
}

.all-finder-layer .finder-body .finder-tbl table {
    border:1px solid #ccc;
    border-top:1px solid #000;
}

.all-finder-layer .finder-body .finder-tbl th,
.all-finder-layer .finder-body .finder-tbl td {
    height:40px;
    border-top:1px solid #e5e5e5;
    color:#000;
    font-family:'Malgun Gothic';
    font-size:13px;
}

.all-finder-layer .finder-body .finder-tbl tr:first-child th,
.all-finder-layer .finder-body .finder-tbl tr:first-child td {
    border-top:none;
}

.all-finder-layer .finder-body .finder-tbl th {
    padding:5px 0;
    background:#f4f4f4;
    text-align:left;
    vertical-align:top;
}

.all-finder-layer .finder-body .finder-tbl th .txt-l {
    position:relative;
    height:34px;
    margin:3px 0;
    padding:0 20px;
    line-height:34px;
}

.all-finder-layer .finder-body .finder-tbl th .txt-l .fa {
    position:absolute;
    top:50%;
    right:15px;
    margin-top:-6px;
}

.all-finder-layer .finder-body .finder-tbl th .txt-l .finder-tooltip-btn {
    display:inline-block;
    width:20px;
    height:20px;
    border:1px solid #cecece;
    border-radius:20px;
    outline:none;
    background:#fff;
    color:#666;
    font-size:11px;
    line-height:22px;
    text-align:center;
}

.all-finder-layer .finder-body .finder-tbl th .txt-l .finder-comm-layer {
    display:none;
    position:absolute;
    top:33px;
    left:52px;
    z-index:1;
    width:270px;
    padding:0 20px 18px;
    border:1px solid #000;
    background:#fff;
    color:#000;
    font-weight:normal;
    text-align:left;
}

.all-finder-layer .finder-body .finder-tbl th .txt-l .finder-comm-layer .finder-btn-close {
    display:inline-block;
    position:absolute;
    top:14px;
    right:20px;
    margin:0;
    outline:none;
    color:#000;
    font-size:21px;
}

.all-finder-layer .finder-body .finder-tbl th .txt-l .finder-comm-layer .finder-layer-tit {
    padding:18px 0;
    border-bottom:1px solid #e5e5e5;
    font-size:15px;
    font-weight:bold;
    line-height:15px;
}

.all-finder-layer .finder-body .finder-tbl th .txt-l .finder-comm-layer .finder-layer-cnt {
    padding-top:16px;
    font-size:13px;
    line-height:1.5;
}

.all-finder-layer .finder-body .finder-tbl td {
    padding:5px 10px;
}

.all-finder-layer .finder-body .txt-input {
    height:21px;
    padding:0 5px;
    font-family:'Malgun Gothic';
    font-size:13px;
    line-height:21px;
}

.all-finder-layer .finder-body .finder-category {
    height:40px;
    overflow:hidden;
}

.all-finder-layer .finder-body .finder-category.open {
    height:100%;
    overflow:visible;
}

.all-finder-layer .finder-body tr.finder-child-category {
    display:none;
}

.all-finder-layer .finder-body tr.finder-child-category th,
.all-finder-layer .finder-body tr.finder-child-category td {
    border-top:none;
}

.all-finder-layer .finder-body tr.finder-child-category td {
    background:#fbfbfb;
}

.all-finder-layer .finder-body tr.finder-child-category td .finder-category2 .finder-cate2 {
    display:inline-block;
    margin:3px 5px 3px 0;
    padding:5px 10px;
    color:#9a9a9a;
    line-height:22px;
    vertical-align:top;
    word-break:break-all;
    cursor:pointer;
}

.all-finder-layer .finder-body tr.finder-child-category td .finder-category2 .finder-cate2 .fa-check {
    display:none;
}

.all-finder-layer .finder-body tr.finder-child-category td .finder-category2 .finder-cate2.on {
    border:0;
    border-radius:0;
    box-shadow:none;
    color:#000;
    font-weight:bold;
}

.all-finder-layer .finder-body tr.finder-child-category td .finder-category2 .finder-cate2.on .fa-check {
    display:inline-block;
    margin-right:3px;
}

.all-finder-layer .finder-body .finder-color {
    padding-left:10px;
}

.all-finder-layer .finder-body .finder-price .finder-price-input {
    display:inline-block;
    padding-top:5px;
}

.all-finder-layer .finder-body .finder-price .finder-price-input label {
    display:inline-block;
    width:110px;
    padding:0 10px;
    border:1px solid #ccc;
    border-radius:3px;
    color:#666;
}

.all-finder-layer .finder-body .finder-price .finder-price-input label .txt-input {
    display:inline-block;
    width:90px;
    height:29px;
    padding:0;
    border:none;
    background:none;
    color:#333;
    line-height:29px;
    text-align:right;
}

.all-finder-layer .finder-body .finder-search {
    position:relative;
    padding-left:5px;
}

.all-finder-layer .finder-body .finder-search label {
    display:inline-block;
    width:320px;
    padding:0 10px;
    border:1px solid #ccc;
    border-radius:3px;
}

.all-finder-layer .finder-body .finder-search label .txt-input {
    display:block;
    width:100%;
    height:29px;
    padding:0;
    border:none;
    background:none;
    color:#333;
    line-height:29px;
    text-align:left;
}

.all-finder-layer .finder-body .finder-btn-c {
    padding:30px 0;
    text-align:center;
}

.all-finder-layer .finder-body .finder-btn-c a.reset {
    display:inline-block;
    width:140px;
    height:60px;
    margin-right:15px;
    border:none;
    border-radius:3px;
    background:#999;
    color:#fff;
    font-family:'Malgun Gothic';
    font-size:18px;
    font-weight:bold;
    line-height:57px;
    letter-spacing:1px;
}

.all-finder-layer .finder-body .finder-btn-c button {
    display:inline-block;
    height:60px;
    padding:0 30px;
    border:none;
    border-radius:3px;
    background:#000;
    color:#fff;
    font-family:'Malgun Gothic';
    font-size:18px;
    font-weight:bold;
    line-height:57px;
    letter-spacing:-.5px;
    cursor:pointer;
}

.all-finder-layer .finder-body .finder-btn-c button span.ico-search {
    display:inline-block;
    visibility:visible;
    width:16px;
    height:15px;
    margin-top:-4px;
    margin-right:10px;
    background:url('/images/common/btn_h15_search.png') no-repeat 0 0;
    vertical-align:middle;
}

.all-finder-layer .finder-body .finder-btn-c button span.finder-count {
    display:inline-block;
    visibility:visible;
    height:60px;
    color:#ffd800;
    font-size:23px;
}

.all-finder-layer .finder-body .finder-btn-c button span.finder-count-toggle {
    display:none;
    visibility:visible;
}

.all-finder-layer .finder-body .finder-options {
    display:inline-block;
    margin:3px 5px 3px 0;
    padding:5px 10px;
    border:1px solid #fff;
    line-height:22px;
    vertical-align:top;
    word-break:break-all;
    cursor:pointer;
}

.all-finder-layer .finder-body .finder-options.on {
    border:1px solid #000;
    border-radius:20px;
    box-shadow:2px 2px 3px #d2d2d2;
    font-weight:bold;
}

.all-finder-layer .finder-body .finder-option-color em {
    display:inline-block;
    width:22px;
    height:22px;
    border-radius:20px;
    font-size:0;
    vertical-align:top;
}

.all-finder-layer .finder-body .finder-option-color.color-picker {
    width:22px;
    height:22px;
    padding:0;
    border:none;
}

.all-finder-layer .finder-body .finder-option-color.color-picker.on {
    border:none;
}

.all-finder-layer .finder-body .finder-option-color.color-picker .fa-check {
    display:none;
    width:22px;
    height:22px;
    margin-top:-17px;
    color:#fff;
    text-align:center;
}

.all-finder-layer .finder-body .finder-option-color.color-picker.on .fa-check {
    display:block;
}

.all-finder-layer .finder-body .finder-option-color.color-picker.on.finder-option-color-white .fa-check {
    color:#000;
}

.all-finder-layer .finder-body .finder-option-color.finder-option-color-black em {
    background-color:#000;
}

.all-finder-layer .finder-body .finder-option-color.finder-option-color-white em {
    width:20px;
    height:20px;
    border:1px solid #e5e5e5;
    background-color:#fff;
}

.all-finder-layer .finder-body .finder-option-color.finder-option-color-gray em {
    background-color:#808080;
}

.all-finder-layer .finder-body .finder-option-color.finder-option-color-beige em {
    background-color:#e5d0b2;
}

.all-finder-layer .finder-body .finder-option-color.finder-option-color-brown em {
    background-color:#aa6810;
}

.all-finder-layer .finder-body .finder-option-color.finder-option-color-navy em {
    background-color:#425583;
}

.all-finder-layer .finder-body .finder-option-color.finder-option-color-blue em {
    background-color:#0000ff;
}

.all-finder-layer .finder-body .finder-option-color.finder-option-color-light-blue em {
    background-color:#62acff;
}

.all-finder-layer .finder-body .finder-option-color.finder-option-color-red em {
    background-color:#ff0000;
}

.all-finder-layer .finder-body .finder-option-color.finder-option-color-orange em {
    background-color:#ffa500;
}

.all-finder-layer .finder-body .finder-option-color.finder-option-color-yellow em {
    background-color:#ffff00;
}

.all-finder-layer .finder-body .finder-option-color.finder-option-color-pink em {
    background-color:#ffc0cb;
}

.all-finder-layer .finder-body .finder-option-color.finder-option-color-purple em {
    background-color:#800080;
}

.all-finder-layer .finder-body .finder-option-color.finder-option-color-jaju em {
    background-color:#a63f7f;
}

.all-finder-layer .finder-body .finder-option-color.finder-option-color-khaki em {
    background-color:#2f5e2f;
}

.all-finder-layer .finder-body .finder-option-color.finder-option-color-green em {
    background-color:#008000;
}

.all-finder-layer .finder-body .finder-option-color.finder-option-color-light-green em {
    background-color:#72dd95;
}

.all-finder-layer .finder-body .finder-option-color.finder-option-color-silver em {
    background-color:#dfdfdf;
}

.all-finder-layer .finder-body .finder-option-color.finder-option-color-gold em {
    background-color:#cfbc4e;
}

.all-finder-layer .finder-body .finder-option-color.finder-option-color-apricot em {
    background-color:#fbceb1;
}

.all-finder-layer .finder-body .search-auto-complete-list {
    display:none;
    position:absolute;
    top:30px;
    left:5px;
    z-index:1;
    border:1px solid #ddd;
    background:#fff;
    line-height:14px;
}

.all-finder-layer .finder-body .search-auto-complete-list ul {
    width:340px;
    padding:4px 0 6px;
    border-bottom:1px solid #ddd;
}

.all-finder-layer .finder-body .search-auto-complete-list ul li {
    text-align:left;
}

.all-finder-layer .finder-body .search-auto-complete-list ul li.on {
    background:#f3f3f3;
}

.all-finder-layer .finder-body .search-auto-complete-list ul li a {
    display:block;
    padding:8px 14px 7px;
    background:none;
    color:#000;
    font-family:'dotum';
    font-size:12px;
    letter-spacing:-1px;
}

.all-finder-layer .finder-body .search-auto-complete-list ul li a strong {
    color:#ab3e41;
}

.all-finder-layer .finder-body .search-auto-complete-list ul li a:hover {
    background:#f2f2f2;
}

.all-finder-layer .finder-body .search-auto-complete-list ul li a:hover span {
    border-bottom:1px solid #000;
}

.all-finder-layer .finder-body .search-auto-complete-list .search-list-close {
    display:block;
    padding:10px 11px;
    color:#999;
    font-size:11px;
    text-align:right;
}

.all-finder-layer .finder-body .finder-search-data .finder-options {
    border:1px solid #e5e5e5;
    box-shadow:none;
}

.all-finder-layer .finder-body .finder-search-data .finder-options .fa-close {
    margin-left:10px;
    color:#999;
}


/* ==================================================
   상단 신규회원 띠배너
================================================== */

.top_banner {
    position:relative;
    z-index:120;
    width:100%;
    min-width:1200px;
    overflow:hidden;
    background:#ce8f94;
}

.top_banner .inner {
    position:relative;
    width:100%;
    max-width:none;
    height:52px;
    margin:0;
    overflow:hidden;
    background:
        linear-gradient(
            90deg,
            #c77f86 0%,
            #dfa5a9 35%,
            #d5959a 65%,
            #c77f86 100%
        );
}

.top_banner .inner:before {
    content:'';
    position:absolute;
    top:-60px;
    left:-180px;
    width:120px;
    height:170px;
    background:rgba(255,255,255,.18);
    transform:skewX(-25deg);
    animation:topBannerShine 6s ease-in-out infinite;
    pointer-events:none;
}

.top_banner_link {
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    width:100%;
    height:52px;
    padding:0 30px;
    color:#fff;
    font-family:'Pretendard', sans-serif;
    text-decoration:none;
    box-sizing:border-box;
    transition:
        background-color .25s ease,
        letter-spacing .25s ease;
}

.top_banner_link:hover {
    color:#fff;
    background:rgba(91,28,38,.08);
}

.top_banner .promo-badge {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:23px;
    padding:0 10px;
    border:1px solid rgba(255,255,255,.85);
    border-radius:30px;
    background:rgba(255,255,255,.96);
    color:#bd7178;
    font-family:'Montserrat', sans-serif;
    font-size:9px;
    font-weight:700;
    line-height:23px;
    letter-spacing:1.1px;
    box-sizing:border-box;
}

.top_banner .promo-copy {
    display:flex;
    align-items:center;
    gap:9px;
    min-width:0;
}

.top_banner .promo-copy strong {
    color:#fff;
    font-size:14px;
    font-weight:650;
    line-height:20px;
    letter-spacing:.1px;
}

.top_banner .promo-copy em {
    position:relative;
    padding-left:10px;
    color:rgba(255,255,255,.84);
    font-size:11px;
    font-style:normal;
    font-weight:400;
    line-height:18px;
}

.top_banner .promo-copy em:before {
    content:'';
    position:absolute;
    top:50%;
    left:0;
    width:1px;
    height:11px;
    background:rgba(255,255,255,.45);
    transform:translateY(-50%);
}

.top_banner .promo-arrow {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:25px;
    height:25px;
    border:1px solid rgba(255,255,255,.55);
    border-radius:50%;
    color:#fff;
    font-family:'Montserrat', sans-serif;
    font-size:14px;
    line-height:25px;
    transition:
        transform .25s ease,
        background-color .25s ease;
}

.top_banner_link:hover .promo-arrow {
    background:rgba(255,255,255,.15);
    transform:translateX(5px);
}

@keyframes topBannerShine {
    0% {
        left:-180px;
        opacity:0;
    }

    15% {
        opacity:1;
    }

    45% {
        left:calc(100% + 180px);
        opacity:0;
    }

    100% {
        left:calc(100% + 180px);
        opacity:0;
    }
}


/* ==================================================
   헤더
================================================== */

header .header {
    transition:
        box-shadow .3s ease,
        background-color .3s ease;
}

header.fixed .header {
    position:fixed;
    top:0;
    z-index:100;
    width:100%;
    background:#fff;
    box-shadow:0 -5px 10px 5px rgba(0,0,0,.2);
}

header .inner {
    position:relative;
    max-width:1500px;
    margin:0 auto;
}

header .inner .logo {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    -webkit-transform:translate(-50%, -50%);
}

header .inner > ul {
    display:inline-block;
}

header .inner > ul > li {
    display:inline-block;
    position:relative;
    margin-left:20px;
}

header .inner > ul > li > a {
    display:block;
    font-size:16px;
    font-weight:500;
    line-height:100px;
}

header .inner > ul > li a {
    transition:all .5s ease;
    -webkit-transition:all .5s ease;
}

header .inner > ul > li a:hover {
    opacity:.5;
}

header .inner ul.depth01 {
    position:absolute;
    top:120px;
    left:50%;
    z-index:10;
    visibility:hidden;
    padding:10px 0;
    border:1px solid #dcdcdc;
    border-radius:10px;
    background-color:rgba(255,255,255,.9);
    opacity:0;
    box-sizing:border-box;
    transform:translateX(-50%);
    transition:all .3s ease;
}

header .inner ul.depth01.on {
    top:100px;
    visibility:visible;
    opacity:1;
}

header .inner ul.depth01:before {
    content:'';
    position:absolute;
    top:-7px;
    left:50%;
    display:inline-block;
    width:10px;
    height:10px;
    margin-left:-5.5px;
    border:1px solid #dcdcdc;
    border-width:0 0 1px 1px;
    background-color:rgba(255,255,255,.9);
    transform:rotate(135deg);
}

header .inner ul.depth01 li {
    width:132px;
    padding:7px 0;
    text-align:center;
}

header .inner ul.depth01 li a {
    display:inline-block;
    font-size:14px;
    word-break:break-all;
}

header .inner ul.depth01 li .menu_arrow {
    display:inline-block;
    padding-left:5px;
    opacity:0;
}

header .inner ul.depth01 li:hover > .menu_arrow {
    opacity:1;
}

header .inner ul.depth01 > li {
    position:relative;
}

header .inner ul.depth01 ul {
    visibility:hidden;
    padding:10px 0;
    border:1px solid #dcdcdc;
    border-radius:10px;
    background-color:rgba(255,255,255,.9);
    opacity:0;
    box-sizing:border-box;
    transition:all .3s ease;
}

header .inner ul.depth01 ul.on {
    visibility:visible;
    opacity:1;
}

header .inner ul.depth02 {
    position:absolute;
    top:-10px;
    right:-140px;
}

header .inner ul.depth03 {
    position:absolute;
    top:0;
    right:-140px;
}

header .inner .right_menu {
    float:right;
}

header .inner .right_menu li a {
    font-family:'Montserrat', sans-serif;
}

header .inner .right_menu li a b {
    padding-left:5px;
    color:#ce7777;
}

header .inner .left_menu li:first-child {
    margin-left:0;
}


/* ==================================================
   비교적 작은 PC 화면
================================================== */

@media screen and (max-width:1350px) {
    .top_banner .promo-copy strong {
        font-size:13px;
    }

    .top_banner .promo-copy em {
        font-size:10px;
    }

    header .inner {
        width:calc(100% - 80px);
    }
}


/* 움직임 최소화 설정 사용자
================================================== */

@media (prefers-reduced-motion:reduce) {
    .top_banner .inner:before {
        animation:none;
    }

    .top_banner_link,
    .top_banner .promo-arrow {
        transition:none;
    }
}
/* BASIC css end */