/**/
@import url('https://fonts.googleapis.com/css2?family=Droid+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');

* {font-family: 'Droid Serif'}
body{ overflow-x: hidden}

.txt-blue> a, .txt-blue {
    color: #857474;
}

header{color: #fff;text-align: center;padding: 2rem 0; transition: 0.3s ease;position: fixed; top: 0; left: 0; width: 100%; z-index: 2; background-color: #fff0; border-bottom: 0; transition: 0.3s ease;}
header h1 img{height: 30px; transition: 0.3s ease;}
header.fixed {color: #000;background: #fff;padding: 2rem 0 0.5rem}
header.fixed h1 img{height: 25px; transition: 0.3s ease;}
header>.mobile{display: none;}

#gnb .mobile-my .tnb{ padding: 20px 0; display:flex; border-top:1px solid #eee; margin-top: 15px }
#gnb .mobile-my .tnb a{display:inline-block; text-align:center; font-size:0.9em; padding:0 5px; width:100%; border-right:1px solid #eee; margin: 0}
#gnb .mobile-my .tnb a:last-child{border-right: 0;}
#gnb .mobile-my .tnb a i{display:block; font-size:2em; margin-bottom:10px;}

.lnb .mypage{border-radius: 0px; background-color: #eeeeee56; text-align: left; padding: 2rem 2rem; margin-bottom: 10px;}
.lnb .mypage .txt-yellow{color: #f8c500;font-size: 12px}
.lnb .mypage p{font-size: 1.15em;}
.lnb .mypage span{font-size: 0.9em;}
.lnb > ul{padding:0 1rem; margin-bottom: 20px;}
.lnb a{font-size: 1.1em; display:flex; align-items: center; justify-content: space-between; line-height: 3em; border-bottom: 1px solid #eee;}
.lnb a:after{content: "\f054"; font-family: "Font Awesome 6 Pro"; font-weight: 400; font-size: 0.8em; opacity: 0.8;}
.lnb a.active{color: #f8c500; font-weight: 600; border-bottom: 1px solid #f8c50056;}
.lnb-side{display: grid; grid-template-columns: 220px 1fr; gap: 60px;}

.tnb  a{color: rgba(65, 53, 53, 0.71);}
.tnb > a{margin-left: 6px;}
.tnb .hd_count{display: none; }
.tnb .hd_count li{line-height: 1.2em;}
.tnb > ul{margin-right: 10px;}
.tnb .mobile{display: none;}
.mobile-menu{display: none;}

@media screen and (min-width: 1200px) {
    #gnb {font-size: 1.1em;}
    #gnb .depth1 {list-style: none;padding: 0;margin: 0;display: flex;align-items: center; margin-left: -15px}
    #gnb .depth1 > li {position: relative;padding: 10px 20px;}
    #gnb .depth1 > li > a {color: rgba(65, 53, 53, 0.71);text-decoration: none;padding: 10px 0;display: block;font-size: 1.2em;font-weight: 500;position: relative; height: 40px}
    #gnb .depth1 > li > a:after{content: ""; display: block; width: 100%; height: 0px; border-radius: 0px; background-color: #f8c500; transition: all 0.3s; opacity: 0;}
    #gnb .depth1 > li:hover > a {font-weight: 600;color: #000000; padding: 0; transition: all 0.3s;}
    #gnb .depth1 > li:hover > a:after{width: 100%; height: 4px; opacity: 1; margin-top: 6px;}
    #gnb .depth2-wrapper {display: none;position: absolute;top: 80%;left: 50%;transform: translateX(-50%); z-index: 1000;}
    #gnb .depth2 {list-style: none;padding: 0;margin: 0;border-radius: 0px;border: 0;overflow: hidden;background-color: #fff;width: max-content;}
    #gnb .depth2 li a {text-decoration: none;padding: 12px 20px;white-space: nowrap;display: block;width: 100%;text-align: center;}
    .depth2 li:not(:last-child) a{border-bottom: 0;}
    #gnb .depth2 li a:hover {background-color: #eeeeee56;color: #000;font-weight: 600;}
    #gnb .mobile-my{display: none;}
}

@media screen and (max-width: 1200px) {

    header{padding: 1rem 3rem;display: flex; align-items: center}
    header>.mobile{display: flex; align-items: center; justify-content: space-between; gap: 4px; padding-top: 0px;}
    header>.mobile>a{width: 100%;}
    header h1 img{height: 25px;}
    header .inner.flex.ai-c.jc-sb  {justify-content: start; gap: 10px; padding: 0}
    header .inner.flex.ai-c.jc-sb .tnb {margin-left: auto}
    header.fixed{padding: 1rem;}

    .mobile-btn{display: block;}
    .overlay{ display: none!important;}
    .panel {flex-wrap: wrap;}
    .lnb .mypage {display: none}
    .lnb > ul {border-radius: 20px; background-color: #eeeeee56; padding: 2rem; width: 100%; margin: 0 auto}
    .lnb > ul:before {display: block;content: '마이메뉴'; font-weight: 800; margin-bottom: 10px; padding-bottom: 10px;  width: 100%;   border-bottom: 3px solid #555;}
    .lnb-side {display: flex;flex-wrap: wrap;flex-direction: column-reverse;        justify-content: start;}

    .tnb > ul{display: none!important;}
    .tnb .mobile{display: inline-block;}
    .tnb .btn-line{display: none}
    .mobile-menu{display: block;}
    .mobile-menu i{font-size: 1.8em; height: 35px; line-height: 35px; width: 30px; text-align: center; color: #1C1C1C;}

    /**/
    #gnb {position: fixed;right: -90%; top: 0;width: 90%;height: 100%;background-color: #fff;z-index: 1000;transition: right 0.3s ease-in-out; padding: 1rem; overflow-y: auto; max-width: 400px;}
    #gnb.open {right: 0; z-index: 9999; box-shadow: 0 0 30px #00000015}
    #gnb .depth1{border-bottom: 1px solid #eee;}
    #gnb .depth1 > li > a{font-size: 1.2em;font-weight: 600;border-top: 1px solid #eee; padding: 1.2rem 1rem;display: flex; align-items: center;}
    #gnb .depth2{padding:1rem; background-color: #fff0; border-radius: 0px; margin-bottom: 1rem; display: grid; grid-template-columns: 1fr 1fr; gap: 10px}#gnb .mobile-my{display: block; padding: 1rem}
    #gnb .mobile-my .btn{margin-bottom: 0;}
    #gnb .mobile-my .close-btn{font-size: 2em;color: #eee; cursor: pointer}
    #gnb .lnb{margin-top: 10px;}
    #gnb .lnb .mypage{padding-top: 10px; padding-bottom: 10px;}
    #gnb .lnb .mypage span{color: #333333}
    #gnb .lnb a{border-bottom: 0; font-size: 0.9em; line-height: 1.8em; display: flex; align-items: center;}
    #gnb .lnb a:after{content: ""; width: 1px; height: 12px; background-color: #ccc; display: inline-block; margin: 0 4px;}
    #gnb .lnb a:last-child:after{display: none;}

    .container{padding-left: 1rem; padding-right: 1rem;width: 100%}

    .fnb > .flex{display: block!important;}
    .fnb > .flex li{display: inline-block;}

    .lnb_wrapper{display: block!important;}
    .lnb_wrapper .lnb{display: none;}

}

@media screen and (max-width: 992px) {
    header {padding: 1rem;}
}

/**/
footer{color:#857474;padding: 2rem 0;background: linear-gradient(to bottom, transparent, rgba(231, 228, 228, 0.35))}
.fnb{ padding: 2rem 0; font-size: 1.1em;}
.fnb a{color:#857474;font-weight: 600;}
.copy{padding: 2rem 0;}
.copy h1{font-weight: 600; font-size: 1.1em;}
.copy ul{margin: 6px 0}
.copy li{margin-right: 10px; display: inline-block;}
.dot-list ul li:not(:last-child):after{content: ""; display: inline-block; vertical-align: middle; width: 4px; height: 4px; border-radius: 50%; background-color: #fff0; margin: 0 10px 1px}

.ft_fix_area{ position:fixed; bottom:0; border-top:1px solid #d2d3d2; background:#fff; height:70px; z-index:1; width:100%; display: none}
.ft_fix_area ul{display: flex;width: 100%}
.ft_fix_area li{ display:inline-block; width:25%; text-align:center}
.ft_fix_area li a { letter-spacing:0; font-size:13px;  color:#857474;margin: 0;}
.ft_fix_area li i {  color:#857474;display:block;font-size:20px;}
.ft_fix_area li a.active {color: #000 !important;}
.ft_fix_area li a.active i{color: #000 !important;}

@media screen and (max-width: 768px) {
    .ft_fix_area {display: flex; align-items: center; justify-content: center}
}

.sub-banner{max-width: 1600px; argin: 0 auto; border-radius: 20px; overflow: hidden; margin-bottom: 40px;}
.sub-banner a {cursor: unset;}
.sub-banner img{width: 100%;height: 100%;object-fit: cover}
.sub-banner .pc{display: block!important;}
.sub-banner .mobile{display: none!important;}

@media screen and (max-width: 1200px) {
    .sub-banner{width: 100%; height: auto;  border-radius: 0}
    .sub-banner img{border-radius: 10px}
    .sub-banner .pc{display: none!important;}
    .sub-banner .mobile{display: block!important;}
}

.banner{margin-bottom: 3rem; border-radius: 20px; overflow: hidden;}
.banner img{width: 100%;}
.banner .pc{display: block;}
.banner .mobile{display: none;}

body > section {margin-top: 100px; margin-bottom: 50px; min-height: 80vh}
body > .sub-banner.banner {margin-top: 100px}
#wrapper{margin: 100px auto 50px; max-width: 1500px;  min-height: 80vh}
.container{padding: 0;margin: 0;}
.area-top{ margin: 20px 0 40px; padding-bottom: 20px;}
.area-top h2 {font-size: 1.8em; line-height: 1em; font-weight: 600}
.area-top .location {opacity: 0.3}

@media screen and (max-width: 1200px) {
    #wrapper{margin-top: 60px;padding: 0 15px }
    body > .sub-banner.banner {margin-top: 30px }
    body > .sub-banner.banner + #wrapper{margin-top: 0px; }
    body > section {margin-top: 60px;}
    .area-top {margin-bottom: 20px}
}
/*메인*/

.main-slider{height: 600px; max-height: 600px; margin: 0 auto; position: relative; z-index:1; padding: 0px;}
.main-slider:after{height: 300px; top: 0; position: absolute; background: linear-gradient(to bottom, #00000020, #00000000); content: ''; display: block;width: 100%;z-index: 2;}
.main-slider .text{width: 100%;max-width: calc( 1500px + 10vw );position: absolute;top: 55%; left: 50%; transform: translate(-50%,-50%); z-index: 9; flex-direction: column; display: flex; row-gap: 30px; width: 100%; padding: 0 5vw; }
.main-slider .text h5 {color:#857474;font-size: 1.5em}
.main-slider .text h3 {color:#857474;font-size: 3.25em; font-weight: 700;line-height: 1.5em; letter-spacing: -1px}
.main-slider .text button {background: #fff0; border-color: #00000050; color: #00000050; border-radius: 50px}
.main-slider .text button i {margin-left: 20px}
.main-slider .main-swiper {width: 100%;height: 100%; border-radius: 0px; overflow: hidden;}
.main-slider .swiper-slide {text-align: center;font-size: 18px;background: #fff; display: flex;justify-content: center;align-items: center;}
.main-slider .swiper-slide img {;width: 100%;height: 100%;object-fit: cover;}
.main-slider .swiper-button-next,
.main-slider .swiper-button-prev{background-color: #00000010!important; border-radius: 50%; opacity: 1; box-shadow:none;width: 30px!important; height: 30px!important; top: 55%; transform: translateY(-50%); z-index: 2;}
.main-slider .swiper-button-next:after,
.main-slider .swiper-button-prev:after{color: #fff; font-size: 1em!important;}
.main-slider .swiper-button-next{right: 20px;}
.main-slider .swiper-button-prev{left: 20px;}
.main-slider .swiper-pagination-fraction{color: #00000030;}
.main-slider .pc{display: block!important;}
.main-slider .mobile{display: none!important;}

main section:not(:last-of-type){margin-bottom: 4rem}
.main-list{ margin: 40px 0 0;}
.main-list > h2 {font-size:1.85em; font-weight: 600; color: #857474; margin-bottom: 40px;}
.main-list > h6{ color: #857474;}
.main-list ul li {position: relative}
.main-list ul li .img {position: relative}
.main-list ul li .img span{position: absolute; top: 0; left: 0}
.main-list ul li .img + h6 {font-family: 'SUIT';margin: 10px 0 15px; font-weight: 400;display:inline-block;width:100%;overflow: hidden;text-overflow: ellipsis;vertical-align:middle;word-break: break-all;white-space: nowrap;}
.main-list ul li .img + h6 + p {text-align: right; font-size: 2.05em; margin-bottom: 15px;font-weight: 600; color: #857474}
.main-list ul li .img + h6 + p:before {font-family: 'SUIT'; font-size: 12px; content: '￦';font-weight: 400; color: #857474}
.main-list ul li .img {border-radius: 0px; overflow: hidden; aspect-ratio: 1/1}
.main-list ul li .img img {transition: all .3s ease}
.main-list ul li .img:hover img {scale: 1.1}

main  {padding-bottom: 50px}
main .inner:has(.grid.grid2) {margin-top: 15vh; text-align: center; color: #857474; line-height: 2.5em}
main .grid.grid2 {gap: 30px; padding: 5vh 0 15vh ; position: relative; margin-bottom: 20px}
main .grid.grid2 img {width: 100%;z-index: 1; position: relative}
main .grid.grid2 img:nth-of-type(2) {position: relative; top:50px;z-index: 0;}
main .grid.grid2:after {mix-blend-mode: luminosity;content: '';display: block;width: 30vw;height: 25vh;background: #f8f8f8;z-index: 0;position: absolute;right: -15vw;}
main .grid.grid2:before {content: '';display: block;width: 30vw;height: 35vh;background: #e1dddd;z-index: 0;position: absolute;left: -15vw;bottom: 0}
@media screen and (max-width: 992px) {
    main .grid.grid2 {gap: 5px;}
}
/**/
.grid-list ul {gap: 40px 20px;display: grid;width: 100%;box-sizing: border-box;}
.grid-list li.empty {grid-column: 1 / -1;}
.grid-list li {cursor: pointer;max-width: 100%;width: 100%;box-sizing: border-box;overflow: hidden;}
.grid-list .area-text {margin-top: 16px;padding: 0 10px;display: block;width: 100%;box-sizing: border-box;}
.grid-list .area-text .title{display:inline-block; width:100%; overflow: hidden; text-overflow: ellipsis; vertical-align:middle; white-space: nowrap;}
.grid-list .area-text .info span{display: inline-block; white-space: nowrap;}
.grid-list .area-text .exp {color: #70707070;margin-top: 6px;display: inline-block;width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;vertical-align: middle;box-sizing: border-box; /* 패딩이나 여백 포함 */display: none;}
.grid-list .area-img {aspect-ratio: 3/2;width: 100%;overflow: hidden; position: relative;}
.grid-list .area-img .fa-heart{position: absolute;right: 12px;top: 12px;}
.grid-list .more{text-align: center;}
.btn-more{width: 80px; height: 80px; color: #857474!important; border-radius: 50%; border: 2px solid #857474; text-align: center; align-items: center; display: flex; justify-content: center; font-size: 2em; margin: 60px auto;}
.btn-more:hover{transform: scale(1.2); transition: transform 0.3s ease; background-color:#f8c500; color: #fff!important; border: 0;}


@media screen and (max-width: 1200px) {
    .inner {padding: 1rem 15px}
}
@media screen and (max-width: 992px) {
    .signup .box-gray .grid2,
    .sign_form .box-gray .grid2{grid-template-columns: 1fr!important;}

    .main-slider{width: 100%;height: auto;  aspect-ratio:1/0.9;}
    .main-slider .text{row-gap: 20px; width: 100%; padding: 0 5vw; }
    .main-slider .text h5 {font-size: 1.15em}
    .main-slider .text h3 {font-size: 2.25em; font-weight: 700;line-height: 1.25em}
    .main-slider .pc{display: none!important;}
    .main-slider .mobile{display: block!important;}
    .main-slider .swiper-button-next,
    .main-slider .swiper-button-prev{display: none;}
    .main-slider .main-swiper{border-radius: 0px}
    .main-slider .main-swiper img{object-position: 70%}

    .grid-list .grid{grid-template-columns: repeat(2, 1fr);}
    .grid-list ul{gap: 20px 10px;}
    .grid-list .area-text .title{font-size: 1.3em;}
    .grid-list .area-text .info{font-size: 0.9em;}
    .grid-list .area-text .exp{margin-top: 0; font-size: 0.9em;}

    .btn-more{width: 50px; height: 50px; font-size: 1.2em; margin: 20px auto 0;}

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

}

/**/
.product-list ul li {position: relative}
.product-list ul li .img {position: relative; aspect-ratio: 1/1}
.product-list ul li .img span{position: absolute; top: 0; left: 0}
.product-list ul li .img + h6 {font-family: 'SUIT';margin: 10px 0 5px; font-weight: 600;display:inline-block;width:100%;overflow: hidden;text-overflow: ellipsis;vertical-align:middle;word-break: break-all;white-space: nowrap;}
.product-list ul li .img + h6 + p {text-align: right; font-size: 1.5em; margin-bottom: 15px;font-weight: 600; color: #f8c500}
.product-list ul li .img {border-radius: 0px; overflow: hidden}
.product-list ul li .img img {transition: all .3s ease}
.product-list ul li .img:hover img {scale: 1.1}
.product-list .category-wrap {max-width: 1500px;width: 100%;margin: 0 auto;margin-bottom: 30px;}
.product-list .category-wrap > div:first-child {padding: 15px 0; border-top: 1px solid #e2e2e2; border-bottom: 1px solid #e2e2e2; margin-bottom: 0px; font-size: 1.3em; font-weight: 600}
.product-list .category-wrap > div:last-child a:not(:last-child):after{content: ""; display: inline-block; vertical-align: middle; width: 1px; height: 8px; border-radius: 0%; background-color: #55555520; margin: 0 8px 1.5px}
.product-list .category-wrap > div:last-child a.active {font-weight: 600; color: #f8c500}
.product-list .category-wrap > div:last-child {padding: 15px;background: #f8f8f8}

.product-view .btn-back a {max-width: 1500px;display: block;width: 100%; margin: 0 auto 50px; padding: 20px 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee; font-size: 1.3em; color: #666666}
.product-view .content {min-height: 50vh}
.product-view .content > h1 {display: block;width: 100%; margin: 25px 0; padding: 20px 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee; font-size: 1.3em; color: #666666}
.product-view .content img {max-width: 100%}
.product-view .txt  {padding: 25px}
.product-view .txt > h6 {font-family: 'SUIT';display: block;width: 100%; margin-bottom: 15px ;  font-size: 2.5em; font-weight: 600; line-height: 1em}
.product-view .txt > dl {text-align: right}
.product-view .txt > dl .price {letter-spacing: -1px; display: flex;font-weight: 600; justify-content: flex-end; align-items: flex-end; gap: 10px; font-size: 1.5em}
.product-view .txt > dl .price span {font-weight: 400;font-size: 0.8em}
.product-view .fixed-btn{display:grid;grid-template-columns: auto 44px 44px; gap: 8px;}
.product-view .fixed-btn button{height: 40px; line-height: 24px; width: 100%; font-size: 1.1em; font-weight: 600;}
.product-view .fixed-btn{display: none;}
.product-view .box-line {margin: 15px 0}
.product-view .box-line p {margin-bottom: 5px; font-weight: 600; font-size: 1.05em}
.product-view .box-line * {width: 100%!important;}
.product-view .box-line input{margin-bottom: 10px;}
.product-view .box-line select:not(:last-of-type){margin-bottom: 10px;}
.product-view .total {letter-spacing: -1px; text-align: right; margin-bottom: 25px; font-size: 1.5em; padding-top: 15px}
.product-view .swiper img {width: 100%;aspect-ratio: 1/1; object-fit: cover}
.product-view .thumbSwiper {margin-top: 15px}
.product-view .thumbSwiper .swiper-wrapper {justify-content: center}
.product-view .thumbSwiper .swiper-slide-thumb-active {border: 2px solid #f8c500}
.product-view .qty-control {padding: 10px 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee; margin: 10px 0 15px; justify-items: flex-start}
.product-view .qty-control .price {margin-left: auto; font-weight: 600; letter-spacing: -1px; font-size: 1.1em}
.product-view ~ #gobtn {bottom: 7.6rem;}
.product-info .name {font-family: 'SUIT';}


.product-view .option-close{display: none; }
@media screen and (max-width: 1500px) {
    .product-view .btn-back a {padding: 20px 1rem}
}
@media screen and (max-width: 1200px) {
    .product-list .grid6{
        grid-template-columns: repeat(4, 1fr);
    }
    .product-view .txt  {padding: 15px}
    .product-list .category-wrap > div:first-child {padding: 15px}
    .product-list .category-wrap > div:last-child {padding: 15px}
}
@media screen and (max-width: 768px) {
    .product-list .grid3{
        grid-template-columns: repeat(2, 1fr);
    }
    .product-list .grid4{
        grid-template-columns: repeat(2, 1fr);
    }
    .product-list .grid6{
        grid-template-columns: repeat(2, 1fr);
    }
    .product-view .txt  {padding: 15px 0}
    .product-view .grid.grid2 {display: block}
    .product-view .fixed-btn{display:grid; position: fixed; left: 0; bottom: 0; width: 100%; background: #fff; z-index: 8; padding: 15px 15px; border-top: 1px solid #eee;}
    .product-view .fixed-area{position: fixed; left: 0; bottom: 0; width: 100%; background: #fff; z-index: 10; padding: 0 15px 15px 15px; border-top: 1px solid #eee; display: none;}
    .product-view .option-close{display: block; text-align: center; margin-bottom: 6px;}
    .product-view .box-line {max-height: 30vh; overflow: auto}
    .product-view .selected-options {max-height: 30vh; overflow: auto}
    .product-view .txt > h6 { font-size: 2em; }

}

/**/
#wrapper:has(.cart-page) ~ #gobtn {bottom: 100px}
.cart-page {position: relative; min-height: 100vh}
.cart-page .total-area .inner {position: relative; display: flex; align-items: center; justify-content: flex-end;  gap: 15px}
.cart-page .total-area {color: #fff;position: fixed; bottom: 0; left: 0; background: #000; width: 100%; padding: 15px; z-index: 3}
.cart-page .total-area i {color: #fff;}
.cart-page .total-area button {width: 30%; max-width: 300px}
.cart-page .btn-all  {display: flex; align-items:center;justify-content: space-between;width: 100%; margin-bottom: 50px; padding: 20px 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee; font-size: 1.3em; color: #666666}
.cart-page .cart-list {position: relative}
.cart-page .cart-list > li > h2 {font-size: 1.3em; line-height: 1em; white-space: nowrap; width: 100%}
.cart-page .cart-list > li > h2 b {color: #f87f01}
.cart-page .cart-list > li {position: relative; padding: 20px; border-bottom: 1px solid #c2c2c5; display: flex; align-items: center; gap: 20px}
.cart-page .cart-list > li a .img {position: relative;width: 70px}
.cart-page .cart-list > li .price{display: flex; align-items: center; gap: 20px; margin-left: auto}
.cart-page .cart-list > li .price span.txt-gray {font-size: 0.8em; font-weight: 400; letter-spacing: -1px}
.cart-page .cart-list > li .price ul{display: flex; align-items: center; gap: 20px; text-align: center}
.cart-page .cart-list > li .price ul li p:last-of-type {font-size: 1.2em; font-weight: 700}
.cart-page .cart-list > li .price ul li:last-of-type p {color: #f87f01}
.cart-page .cart-list > li .price ul li.dot:after{content: ""; display: inline-block; vertical-align: middle; width: 4px; height: 4px; border-radius: 50%; background-color: #55555520; margin: 0 6px 1px}
.cart-page .cart-list > li .txt {min-width: 200px}
.cart-page .cart-list > li .option-area {align-self: flex-start;width: 100%; max-width: 600px}
.cart-page .cart-list > li .option-list {background: #f8f8f8; padding: 2px 10px; margin: 2px; border-radius: 5px}

#togglePrice {}
#viewPrice {z-index: 3; box-shadow: 0 3px 15px #00000010;width: 80%; max-width: 300px;display: none; position: fixed; bottom: 90px; right:calc((100vw - 1500px) / 2 + 0px); ; background: #fff; border-radius: 10px; padding: 15px; border: 1px solid #eee }
#viewPrice li {padding: 10px; display: flex; align-items: center; justify-content: space-between}
#viewPrice li:last-of-type {border-radius: 10px;background: #f8f8f8}

@media screen and (max-width: 1500px) {
    #viewPrice {right:10px; }
}
@media screen and (max-width:  768px) {
    #viewPrice {right:unset; left: 10px }
    .cart-page .btn-all {margin-bottom: 25px}
    .cart-page .total-area .inner > *:not(button){font-size: 1.2em}
    .cart-page .total-area .inner {padding: 0;  gap: 10px}
    .cart-page .total-area .inner button {margin-left: auto}
    .cart-page .cart-list > li  {padding: 20px 0;display: grid;grid-template-columns: 20px 70px auto;}
    .cart-page .cart-list > li .price {width: 100%;flex-wrap: wrap; gap: 10px; grid-column: span 3}
    .cart-page .cart-list > li .price > ul {width: 100%; justify-content: center; flex-direction: column; gap: 5px}
    .cart-page .cart-list > li .price > ul li {width: 100%;display: flex;align-items: center; justify-content: space-between}
    .cart-page .cart-list > li .price > ul li.dot {display: none}
    .cart-page .cart-list > li .price > button {width: calc( 50% - 5px )}
    .cart-page .cart-list > li .option-area {grid-column: span 3;}
}

/**/
.order-page {position: relative; min-height: 100vh}
.order-page .total-area .inner {position: relative; display: flex; align-items: center; justify-content: flex-end;  gap: 15px}
.order-page .total-area {color: #fff;position: fixed; bottom: 0; left: 0; background: #000; width: 100%; padding: 15px; z-index: 3}
.order-page .total-area button {width: 30%; max-width: 300px}
.order-page .order-grid {grid-template-columns: auto 390px; display: grid; position: relative; gap: 30px}
.order-page .btn-back a {max-width: 1500px;;display: block;width: 100%; margin: 0 auto 50px; padding: 20px 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee; font-size: 1.3em; color: #666666}
.order-page div.box.box-line {margin: 15px 0 25px}
.order-page div.box.box-line h6{font-family: 'SUIT';margin: 10px 0 0px}
.order-page div.box.box-line + .box-blue {margin: -15px 0 25px; background: #f0ad4e10}
.order-page div.box.box-blue {text-align: right; display: flex; gap: 10px; justify-content: flex-end; align-items: center; background: #f0ad4e10}
.order-page div.box.box-blue h5 {font-weight: 800;color: #000;}
.order-page button {white-space: nowrap}
.order-page .item-list:not(:first-of-type) {margin-top: 20px;}
.order-page .item-list .grid {grid-template-columns: 70px auto 300px; align-items: center}
.order-page .item-list .grid h4 {font-size: 1.4em; line-height: 1.1em}
.order-page .item-list .option-list li {padding: 5px 0; display: flex;align-items: center;justify-content: space-between;}
.order-page .area-total {border-top: 1px solid #A2A2A256;margin-top: 30px;padding: 25px 0;}
.order-page .area-price dl {margin-bottom: 6px;}
.order-page .price {font-size: 1.2em;font-weight: 600;}
.order-page details {margin-bottom: 8px;}
.order-page details > summary {justify-content: center;background-color: #F8F8F8;color: #A4A4A4;padding: 5px;}
.order-page details .privacy {height: 160px; overflow: auto; padding: 10px; background: #f8f8f8}
.order-page details .provision {height: 160px; overflow: auto; padding: 10px; background: #f8f8f8}
.order-page h5.txt-blue {font-weight: 600; font-size: 1.25em}
.order-page .txt-line {white-space: nowrap}
.order-page div.memo {grid-column: span 2}
.order-page .free-bank strong {display: inline-block; min-width: 100px!important;}
.order-page .free-bank .receipt-box dl {margin-top: 10px; display: flex; align-items: center}
.order-page .free-bank .receipt-box dl dt {min-width: 100px!important;}
.order-page .free-bank .receipt-box dl dd{width: 100%;}
.order-page .free-bank > * {margin-top: 15px}
.order-page .free-bank .select {display: flex; gap: 5px; flex-wrap: wrap}
.order-page .free-bank .select label {border-radius: 50px}
.order-page .area-title {    font-family: 'SUIT'}
.order-page .box-grayline * {    font-family: 'SUIT'}
@media screen and (max-width: 1500px) {
    .order-page .btn-back a {padding: 20px 1rem}
}
@media screen and (max-width: 1200px) {
    .order-page .order-grid {display: block !important;margin-top: -50px;}
    .order-page .item-list .grid {grid-template-columns: 70px auto;}
    .order-page .item-list .grid .img {margin: 0}
    .order-page .item-list div:has(.option-list) {grid-column: span 2}
}
@media screen and (max-width:  768px) {
    .order-page .box {padding: 1rem}
    .order-page .box .grid2 {display: block}
    .order-page .box .grid3 {grid-template-columns: repeat(2, 1fr)}
    .order-page .box .grid3 div:last-child{grid-column: 1/3}
    .order-page div.memo {margin-top: 5px}
    .order-page .box label + input[type="text"] {margin-bottom: 15px}
    .order-page .box label + input[type="text"]:last-child {margin-bottom: 0px}
    .order-page .item-list .grid h4 {font-size: 1.15em}
    .order-page .total-area .inner > *:not(button){font-size: 0.8em; letter-spacing: -1px}
    .order-page .total-area .inner {padding: 0;  gap: 10px}
    .order-page .total-area .inner button {margin-left: auto; width: 50%}
    .order-page .pay-group label {line-height: 1em!important; height: 100% !important; display: flex!important; align-items: center!important; padding: 20px 0!important; ; justify-content: center}

}
#addressLayer {padding-top: 35px!important;}
#addressLayer button.btn.btn-black.w100 {margin-top: -0px}
.my-order-list a.item {}
.my-order-list a.item:not(:last-child) {margin-bottom: 5px}
.my-order-list b.pr {color: #666666}
.my-order-list b.pc {color: #f87f01}
.my-order-list b.dp {color: #000000}
.my-order-list b.di {color: #f87f01}
.my-order-list b.dc {color: #000000}
.my-order-list b.cf {color: #000000}
.my-order-list b.cc {color: #666666; text-decoration: line-through}
.my-order-list td button:not(:last-child) {margin-bottom: 5px}
.my-order-list .table td { vertical-align: top;}

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

    .my-order-list .table colgroup { display: none;}
    .my-order-list .table thead { display: none;}
    .my-order-list .table tbody tr { display: grid; border: 1px solid #eee}
    .my-order-list .table tbody tr td { border: 0}
    .my-order-list .table tbody tr td:nth-of-type(1){background: #f8f8f8}
    .my-order-list .table tbody tr td:nth-of-type(3){background: #f8f8f8}
    .my-order-list .table tbody tr td:nth-of-type(4){background: #f5f5f5}
    .my-order-list .table tbody tr td:nth-of-type(8){background: #f5f5f5}
    .my-order-list .table tbody tr td:nth-of-type(5){display: flex; justify-content: space-between}
    .my-order-list .table tbody tr td:nth-of-type(5):before {content: '상품금액 포인트사용';display: inline-block;text-align: left; width: 50px;}
    .my-order-list .table tbody tr td:nth-of-type(6){display: flex; justify-content: space-between}
    .my-order-list .table tbody tr td:nth-of-type(6):before {content: '배송비';display: inline-block;text-align: left; }
    .my-order-list .table tbody tr td:nth-of-type(7){display: flex; justify-content: space-between}
    .my-order-list .table tbody tr td:nth-of-type(7):before {content: '총 주문금액';display: inline-block;text-align: left; }
    .lnb {display: none}
}
/**/

.wish-list{ margin: 40px 0 0;}
.wish-list > h3 {font-size:1.6em; font-weight: 600; color: #232323; margin-bottom: 40px;}
.wish-list > h3 > i {background-color: #f8c500; color: #fff; border-radius: 50%; width: 22px; height: 22px; text-align: center;line-height: 22px!important; font-size: 11px;  margin-right: 4px;}
.wish-list ul li {position: relative}
.wish-list ul li .img {position: relative}
.wish-list ul li .img span{position: absolute; top: 0; left: 0}
.wish-list ul li .img + h6 {margin: 10px 0 5px; font-weight: 600;display:inline-block;width:100%;overflow: hidden;text-overflow: ellipsis;vertical-align:middle;word-break: break-all;white-space: nowrap;}
.wish-list ul li .img + h6 + p {text-align: right; font-size: 1.5em; margin-bottom: 15px;font-weight: 600; color: #f8c500}
.wish-list ul li .img {border-radius: 0px; overflow: hidden; aspect-ratio: 1/1}
.wish-list ul li .img img {transition: all .3s ease}
.wish-list ul li .img:hover img {scale: 1.1}

@media screen and (max-width: 768px) {
    .wish-list .grid4{
        grid-template-columns: repeat(2, 1fr);
    }

}