body {-webkit-text-size-adjust : none; /* 크롬, 사파리, 오페라 신버전 */ -ms-text-size-adjust : none; /* IE */ -moz-text-size-adjust : none; /* 파이어폭스 */ -o-text-size-adjust : none; /* 오페라 구버전 */ text-size-adjust: none; height:100%; overflow: auto; /* background-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; background-position: initial; */ } /* 헬로우바 */ .helloBar_wrap { width: 100%; background-color: #222; color: #fff; font-size: 15px; height: 50px; line-height: 50px; text-align: center; } .helloBar_wrap span { color: #FF6B00; font-weight: 700; } /* 메인 본문영역 */ .gnb_view_area { margin-top: 48px; } /* GNB */ .snbSwiper { box-sizing: border-box; background: #ffffff; width: 100%; } .swiper-slide { width: 33%; } .swiper-slide > a { display: block; text-align: center; } .swiper-slide .gnb_list { padding: 16px 5px 8px 5px; box-sizing: border-box; position: relative; display: inline-block; height: 47px; white-space: nowrap; font-size: 1rem; line-height: 1em; color: #222; } .on .gnb_list { color: #FF6B00; font-weight: bold; width: 100%; } .on .gnb_list:after { content: ''; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: #FF6B00; } /* 231018 사이드 메뉴 */ .sidenav { height: calc(100svh - 52px); width: 100%; max-width: 480px; position: fixed; z-index: 9999; top: 0; overflow-y: hidden; overflow-x: hidden; transition: 0.5s; padding-top: 0; line-height: 150%; letter-spacing: -0.3px; background-color: #fff; display: none; } .sidenav.open { display: block; } .sidenav .nick { display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100px; float: left; } .sidenav .sidenav-wrapper { overflow-y: scroll; overflow-x: hidden; height: calc(100svh - 52px); } .sidenav .sidenav-wrapper::-webkit-scrollbar { display: none; } .sidenav .sidenav-wrapper::-webkit-scrollbar { width: 6px; } .sidenav .sidenav-wrapper::-webkit-scrollbar-thumb { height: 17%; background-color: #eaeaea; border-radius: 10px; } .sidenav .sidenav-wrapper::-webkit-scrollbar-track { background-color: #f6f6f6; } .sidenav .logo { display: flex; align-items: center; justify-content: space-between; position: relative; max-width: 480px; height: 48px; padding: 0 20px; border-bottom: solid 1px #fff; box-sizing: border-box; background-color: #fff; } .sidenav .logo .logo-wrapper { display: flex; } .sidenav .logo .logo-wrapper .logo-img { margin: 0; padding: 0; line-height: 1; } .sidenav .logo .logo-wrapper .logo-img img { width: 84px; height: 100%; display: inline-block; cursor: pointer; background-position: center center; } .sidenav .logo a.close { display: block; } .sidenav .logo a.close span { background: url(/images/common/btn_close.png) center center no-repeat; background-size: 15px; width: 15px; height: 15px; } .sidenav .login { background-color: #FF6B00; height: 46px; box-sizing: border-box; display: flex; align-items: center; display: none; } .sidenav .login a { color: #fff; display: block; width: 100%; padding: 0 20px 16px 20px; } .sidenav .login a.sidenav-login { font-size: 16px; position: relative; padding-right: 24px; font-weight: 500; } .sidenav .login a.sidenav-login p { position: relative; padding-right: 24px; display: inline-block; } .sidenav .login a.sidenav-login p::after { content: ''; position: absolute; top: 50%; right: 0; background: url(/images/common/next_arrow_white.svg) center center no-repeat; background-size: 16px; width: 16px; height: 16px; transform: translate(0,-50%); margin-top: 2px; } .sidenav .login a.sidenav-name { font-size: 16px; } .sidenav .login a.sidenav-name p { font-weight: 400; position: relative; padding-right: 24px; display: inline-block; } .sidenav .login a.sidenav-name p::after { content: ''; position: absolute; top: 50%; right: 0; background: url(/images/common/next_arrow_white.svg) center center no-repeat; background-size: 16px; width: 16px; height: 16px; transform: translate(0,-50%); margin-top: 2px; } .sidenav .login a.sidenav-name p span { font-weight: 700; } .sidenav .cate-menu { background-color: #fff; margin: 0px 20px 16px 20px; } .sidenav .cate-menu ul {width: 100%; display: flex; flex-wrap: wrap; margin-top: 30px;} .sidenav .cate-menu ul li { width: 50%; box-sizing: border-box; } .sidenav .cate-menu ul li a { display: flex; align-items: center; padding: 2px 12px; box-sizing: border-box; } .sidenav .cate-menu ul li a .cate-icon-img {width: 46px; height: 46px; background-color: #FFF1ED; border-radius: 9px; display: flex; justify-content: center; align-items: center; } .sidenav .cate-menu ul li a .cate-icon-img img { width: 100%; } .sidenav .cate-menu ul li a .cate-icon-name { } .sidenav .cate-menu ul li a .cate-icon-name span { } .sidenav .cate-menu ul li a .cate-icon-name span { margin-left: 8px; font-size: 18px; font-weight: 400; position: relative; z-index: 1; } .sidenav .cate-menu ul li a .cate-icon-name span.best::after { content: ''; display: inline-block; z-index: -1; position: absolute; background-color: #FFDFCD; width: 110%; height: 10px; left: -2px; bottom: -1px; } .sidenav .new-cate {position: relative; border: 1px solid #FF8159; border-radius: 8px; margin: 30px 0px 24px 0px; padding: 8px 0px; box-sizing: border-box;} .sidenav .new-cate > span {position: absolute; background-color: #FF6B00; padding: 4px 8px; border-radius: 2px; overflow: hidden; color: #fff; font-size: clamp(10px, 2.78vw, 13px); line-height: 100%; top: -10px; left: 20px;} .sidenav .new-cate ul {width: 100%; display: flex; flex-wrap: wrap; margin-top: 0;} .sidenav .new-cate ul li {width: 50%; box-sizing: border-box;} .sidenav .new-cate ul li a {display: flex; align-items: center; padding: 4px 12px 4px 11px; box-sizing: border-box;} .sidenav .new-cate ul li a .cate-icon-img {width: 46px; height: 46px; background-color: #fff; border-radius: 9px; display: flex; justify-content: center; align-items: center;} .sidenav .new-cate ul li a .cate-icon-img img {width: 100%; height: 100%;} .sidenav .new-cate ul li a .cate-icon-name {} .sidenav .new-cate ul li a .cate-icon-name span {margin-left: 8px; font-size: 18px; font-weight: 400;} @media screen and (max-width: 345px){ .sidenav .new-cate > span {left: 18px;} .sidenav .cate-menu ul li a {padding: 2px 5px;} .sidenav .new-cate ul li a {padding: 4px 5px;} } .sidenav .tabs {padding-bottom: 40px; background-color: #ffffff; width: 100%; max-width: 480px; margin: 0 auto;} .sidenav .tab_item {width: calc(100%/2); height: 50px; line-height: 50px; font-size: 16px; font-weight: 500; text-align: center; color: #222; display: block; float: left; text-align: center; transition: all 0.2s ease; cursor: pointer; border-bottom: 1px solid #eee;} .sidenav input[name="tab_item"] { display: none;} .sidenav .tabs input:checked + .tab_item {color: #222; border-bottom: solid 3px #FF6B00;} .sidenav .sidenav-bn { overflow: hidden; } .sidenav .sidenav-bn .sidenav-bn-swiper { position: relative; padding-bottom: 20px; } .sidenav .sidenav-bn .sidenav-bn-swiper .swiper-wrapper { } .sidenav .sidenav-bn .sidenav-bn-swiper .swiper-wrapper .swiper-slide { } .sidenav .sidenav-bn .sidenav-bn-swiper .swiper-wrapper .swiper-slide .bn-bg { padding: 5% 0; display: flex; align-items: center; justify-content: space-between; } .sidenav .sidenav-bn .sidenav-bn-swiper .swiper-wrapper .swiper-slide:nth-of-type(1) .bn-bg { background-color: #FFEFF2; } .sidenav .sidenav-bn .sidenav-bn-swiper .swiper-wrapper .swiper-slide:nth-of-type(2) .bn-bg { background-color: #FFF9E9; } .sidenav .sidenav-bn .sidenav-bn-swiper .swiper-wrapper .swiper-slide:nth-of-type(3) .bn-bg { background-color: #F8FFE9; } .sidenav .sidenav-bn .sidenav-bn-swiper .swiper-wrapper .swiper-slide:nth-of-type(4) .bn-bg { background-color: #ECFEFF; } .sidenav .sidenav-bn .sidenav-bn-swiper .swiper-wrapper .swiper-slide:nth-of-type(5) .bn-bg { background-color: #EAEDFF; } .sidenav .sidenav-bn .sidenav-bn-swiper .swiper-wrapper .swiper-slide:nth-of-type(6) .bn-bg { background-color: #FFEFF2; } .sidenav .sidenav-bn .sidenav-bn-swiper .swiper-wrapper .swiper-slide:nth-of-type(7) .bn-bg { background-color: #FFF9E9; } .sidenav .sidenav-bn .sidenav-bn-swiper .swiper-wrapper .swiper-slide:nth-of-type(8) .bn-bg { background-color: #F8FFE9; } .sidenav .sidenav-bn .sidenav-bn-swiper .swiper-wrapper .swiper-slide:nth-of-type(9) .bn-bg { background-color: #ECFEFF; } .sidenav .sidenav-bn .sidenav-bn-swiper .swiper-wrapper .swiper-slide:nth-of-type(10) .bn-bg { background-color: #EAEDFF; } .sidenav .sidenav-bn .sidenav-bn-swiper .swiper-wrapper .swiper-slide:nth-of-type(11) .bn-bg { background-color: #FFEFF2; } .sidenav .sidenav-bn .sidenav-bn-swiper .swiper-wrapper .swiper-slide:nth-of-type(12) .bn-bg { background-color: #FFF9E9; } .sidenav .sidenav-bn .sidenav-bn-swiper .swiper-wrapper .swiper-slide:nth-of-type(13) .bn-bg { background-color: #F8FFE9; } .sidenav .sidenav-bn .sidenav-bn-swiper .swiper-wrapper .swiper-slide:nth-of-type(14) .bn-bg { background-color: #ECFEFF; } .sidenav .sidenav-bn .sidenav-bn-swiper .swiper-wrapper .swiper-slide:nth-of-type(15) .bn-bg { background-color: #EAEDFF; } .sidenav .sidenav-bn .sidenav-bn-swiper .swiper-wrapper .swiper-slide:nth-of-type(16) .bn-bg { background-color: #FFEFF2; } .sidenav .sidenav-bn .sidenav-bn-swiper .swiper-wrapper .swiper-slide:nth-of-type(17) .bn-bg { background-color: #FFF9E9; } .sidenav .sidenav-bn .sidenav-bn-swiper .swiper-wrapper .swiper-slide:nth-of-type(18) .bn-bg { background-color: #F8FFE9; } .sidenav .sidenav-bn .sidenav-bn-swiper .swiper-wrapper .swiper-slide:nth-of-type(19) .bn-bg { background-color: #ECFEFF; } .sidenav .sidenav-bn .sidenav-bn-swiper .swiper-wrapper .swiper-slide:nth-of-type(20) .bn-bg { background-color: #EAEDFF; } .sidenav .sidenav-bn .sidenav-bn-swiper .swiper-wrapper .swiper-slide .bn-bg .bn-txt { margin-left: 6%; margin-right: 5%; width: 50%; } .sidenav .sidenav-bn .sidenav-bn-swiper .swiper-wrapper .swiper-slide .bn-bg .bn-txt em { font-size: clamp(1.3rem, 4vw, 1.6rem); font-weight: 500; line-height: 130%; word-break: keep-all; overflow: hidden; } .sidenav .sidenav-bn .sidenav-bn-swiper .swiper-wrapper .swiper-slide .bn-bg .bn-txt p { font-size: clamp(0.5rem, 4vw, 1.1rem); font-weight: 500; margin-top: 6px; line-height: 150%; letter-spacing: -0.21px; color: #555; } .sidenav .sidenav-bn .sidenav-bn-swiper .swiper-wrapper .swiper-slide .bn-bg .bn-img { aspect-ratio: 16 / 11; border-radius: 8px; overflow: hidden; margin-right: 5%; width: 40%; } .sidenav .sidenav-bn .sidenav-bn-swiper .swiper-wrapper .swiper-slide .bn-bg .bn-img img { width: 100%; height: 100%; object-fit: cover; object-position: right; border-radius: 8px; } .sidenav .sidenav-bn .sidenav-bn-swiper .swiper-pagination { line-height: 0; bottom: 0; } .sidenav .sidenav-bn .sidenav-bn-swiper .swiper-pagination .swiper-pagination-bullet { margin: 0 3px; } .sidenav .sidenav-bn .sidenav-bn-swiper .swiper-pagination .swiper-pagination-bullet-active { background-color: #FF6B00; width: 16px; border-radius: 10px; } .sidenav .my-menu { padding: 36px 20px; } .sidenav .my-menu ul { display: flex; justify-content: space-between; } .sidenav .my-menu ul li { position: relative; width: calc(100% / 4); display: flex; align-items: center; justify-content: center; } .sidenav .my-menu ul li a { display: block; position: relative; text-align: center; } .sidenav .my-menu ul li a::before { content: ''; display: block; width: 56px; height: 56px; margin: 0 auto 6px auto; background-color: #F5F5F5; border-radius: 50%; } .sidenav .my-menu ul li:nth-of-type(1) a::before { background: url(/images/common/order.svg) no-repeat center center / 28px auto #F5F5F5; } .sidenav .my-menu ul li:nth-of-type(2) a::before { background: url(/images/common/cart.svg) no-repeat center center / 28px auto #F5F5F5; } .sidenav .my-menu ul li:nth-of-type(3) a::before { background: url(/images/common/coupon.svg) no-repeat center center / 28px auto #F5F5F5; } .sidenav .my-menu ul li:nth-of-type(4) a::before { background: url(/images/common/qna.svg) no-repeat center center / 28px auto #F5F5F5; } .sidenav .my-menu ul li a span.menu-name { font-size: 14px; font-weight: 400; letter-spacing: -0.21px; } .sidenav .my-menu ul li a span.count { position: absolute; left: 38px; top: -5px; background-color: #FF6B00; color: #fff; padding: 4px 6px; line-height: 100%; border-radius: 20px; font-size: 12px; font-weight: 500; } .sidenav .my-menu ul li a span.no-count { position: absolute; left: 38px; top: -5px; background-color: #949494; color: #fff; padding: 4px 6px; line-height: 100%; border-radius: 20px; font-size: 12px; font-weight: 500; } .sidenav .sub-bn { position: relative; max-width: 480px; padding: 0px 20px; overflow: hidden; } .sidenav .sub-bn .sidenav-bn2-swiper { position: relative; } .sidenav .sub-bn .sidenav-bn2-swiper .swiper-wrapper { } .sidenav .sub-bn .sidenav-bn2-swiper .swiper-wrapper .swiper-slide { } .sidenav .sub-bn .sidenav-bn2-swiper .swiper-wrapper .swiper-slide a.bn-event { margin: 0; } .sidenav .sub-bn .sidenav-bn2-swiper .swiper-wrapper .swiper-slide a.bn-event img { display: block; width: 100%; } .sidenav .sub-bn .sidenav-bn2-swiper .swiper-pagination { line-height: 0; bottom: 0; } .sidenav .sub-bn .sidenav-bn2-swiper .swiper-pagination .swiper-pagination-bullet { margin: 0 3px; } .sidenav .sub-bn .sidenav-bn2-swiper .swiper-pagination .swiper-pagination-bullet-active { background-color: #FF6B00; width: 16px; border-radius: 10px; } .sidenav .slide-item { margin: 25px 0; text-align: left; } .sidenav .slide-item em { font-size: 19px; font-weight: 500; letter-spacing: -0.285px; margin-left: 20px; } .sidenav .slide-item .add_product_swiper { margin-top: 5px; margin-right: 20px; overflow: visible; } .sidenav .slide-item .add_product_swiper .swiper-wrapper { align-items: baseline; flex-direction: row; } .sidenav .slide-item .add_product_swiper .swiper-wrapper .add_product_item { } .sidenav .slide-item .add_product_swiper .swiper-wrapper .add_product_item:nth-child(n+11):nth-child(-n+20) { margin-top: 15px; } .sidenav .slide-item .add_product_swiper .swiper-wrapper .add_product_item a { } .sidenav .slide-item .add_product_swiper .swiper-wrapper .add_product_item a img { max-width: 100%; border-radius: 8px; } .sidenav .slide-item .add_product_swiper .swiper-wrapper .add_product_item a video { max-width: 100%; border-radius: 8px; } .sidenav .slide-item .add_product_swiper .swiper-wrapper .add_product_item a .add_product_item_info .tit { font-size: 14px; line-height: 140%; margin: 3px 0 5px 0; font-weight: 400; white-space: normal; overflow: hidden; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-align: left; } .sidenav .slide-item .add_product_swiper .swiper-wrapper .add_product_item a .add_product_item_info .price-wrapper { display: inline-block; line-height: 1; display: flex; position: relative; letter-spacing: -0.21px; } .sidenav .slide-item .add_product_swiper .swiper-wrapper .add_product_item a .add_product_item_info .price-wrapper .price { display: inline-block; font-size: 14px; font-weight: 700; letter-spacing: -0.21px; white-space: nowrap; color: #FF6B00; } .review-area { display: inline-block; color: #a8a8a8; font-size: 13px; float: left; margin-top: 8px; } .review-area .review-area-wrap { width: auto; } .review-area .review-area-wrap p { float: left; } .review-area .review-area-wrap p:first-child { padding-right: 5px; } .review-area .review-area-wrap p.rate { display: flex; } .review-area .review-area-wrap p em.star { display: inline-block; background-image: url("/image/common/star.png"); width: 15px; height: 15px; background-size: contain; margin: 1px; } .review-area .review-area-wrap span { color: #727272; position: relative; padding-left: 16px; font-size: 12px; } .review-area .review-area-wrap span.white { color: #fff; position: relative; padding-left: 16px; font-size: 12px; } .review-area .review-area-wrap span::before { content: ''; display: block; background-image: url("/images/common/ico_review.svg"); width: 14px; height: 14px; position: absolute; left: 0; top: 50%; transform: translate(0, -50%); margin-top: 1px; } .cart-in-btn { width: 25px; height: 25px; border-radius: 50%; background-color: #f5f5f5; display: flex; align-items: center; justify-content: center; position: absolute; right: 0; bottom: 0; } .cart-in-btn > img { width: 15px; height: 15px; margin-right: 0; } .cate-thumb-txt .prod-title { font-size: 14px; line-height: 1.3; margin: 10px 0 10px 0; font-weight: 400; white-space: normal; overflow: hidden; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; line-height: 150%; } .prod-price-wrap { position: absolute; bottom: 0; width: 100%; } .price-wrapper { line-height: 150%; display: flex; align-items: baseline; position: relative; letter-spacing: -0.21px;} .price-wrapper .price { display: inline-block; font-size: 14px; font-weight: 700; letter-spacing: -0.5px; white-space: nowrap; } .price-wrapper .dc-rate {font-size: 14px; font-weight: 700; color: #FF6B00; display: inline-block; margin-right: 8px;} .right_info_box .tit { color: #222; font-size: 14px; line-height: 150%; margin: 5px 0 10px 0; font-weight: 400; white-space: normal; overflow: hidden; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; } .right_info_box .right_price_wrap { letter-spacing: -0.21px; } .right_info_box .right_price_wrap .sell_pri { font-size: 14px; font-weight: 700; margin: 8px 0 2px 0; display: flex; } .right_info_box .right_price_wrap .sell_pri span { display: inline-block; letter-spacing: -0.5px; white-space: nowrap; } .right_info_box .right_price_wrap .sell_pri span:first-child { color: #FF6B00; margin-right: 8px; } .right_info_box .right_price_wrap .cart-in {border-radius: 50%; background-color: rgba(255,255,255,0.5); width: 36px; height: 36px; position: absolute; right: 6px; bottom: 6px; display: flex; align-items: center; justify-content: center; border: 1px solid #eee;} .right_info_box .right_price_wrap .cart-in > img {width: 24px; height: 24px;} /* 메인 배너 */ .main-banner { width: auto; position: relative; } .main-banner .container { } .main-banner .section-body { } .main-banner .magazine-list { margin: 0 auto; } .main-banner .magazine-list .main-swiper { position: relative; overflow: hidden; aspect-ratio: 18 / 11; } .main-banner .magazine-list .main-swiper .swiper-wrapper { } .main-banner .magazine-list .main-swiper .swiper-wrapper .swiper-slide { width: 100%; opacity: 1; transition: transform .3s ease; flex-shrink: 0; width: 100%; height: 100%; position: relative; transition-property: transform; } .main-banner .magazine-list .main-swiper .swiper-wrapper .swiper-slide .magazine-list-item { position: relative; overflow: hidden; } .main-banner .magazine-list .main-swiper .swiper-wrapper .swiper-slide .magazine-list-item .img { background: 50% 50% no-repeat; background-size: cover; background-color: #fff; overflow: hidden; position: relative; aspect-ratio: 18 / 11; } .main-banner .magazine-list .main-swiper .swiper-wrapper .swiper-slide .magazine-list-item .slide-txt { position: absolute; top: 50%; left: 0; transform: translate(0,-50%); color: #fff; padding: 0 20px; width: 60%; } .main-banner .magazine-list .main-swiper .swiper-wrapper .swiper-slide .magazine-list-item .slide-txt .main-txt { display: block; font-size: 26px; font-weight: 700; margin-bottom: 10px; color: #fff; line-height: 1.3; letter-spacing: -0.75px; overflow: hidden; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .main-banner .magazine-list .main-swiper .swiper-wrapper .swiper-slide .magazine-list-item .slide-txt .sub-txt { font-size: 16px; font-weight: 300; letter-spacing: -0.75px; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .main-banner .magazine-list .main-swiper .main-swiper-pagination { display: inline-block; position: absolute; bottom: 20px; right: 20px; width: auto; left: auto; color: #fff; z-index: 1; background: rgba(0, 0, 0, 0.40); font-size: 12px; padding: 4px 12px; border-radius: 25px; display: inline-flex; justify-content: flex-end; align-items: center; } .main-banner .magazine-list .main-swiper .main-swiper-pagination .swiper-pagination-current { font-weight: 500; margin-right: 2px; } .main-banner .magazine-list .main-swiper .main-swiper-pagination .swiper-pagination-total { margin-left: 2px; } .main-banner .magazine-list .main-swiper .swiper-wrapper .swiper-slide .magazine-list-item .slide-txt { right: 0; } .main-banner .magazine-list .main-swiper .swiper-wrapper .swiper-slide .magazine-list-item.left .slide-txt { right: 0; } .main-banner .magazine-list .main-swiper .swiper-wrapper .swiper-slide .magazine-list-item.right .slide-txt { right: 0; text-align: right; } .main-banner .magazine-list .main-swiper .swiper-wrapper .swiper-slide .magazine-list-item.center .slide-txt { right: 0; text-align: center; } .main-banner .magazine-list .main-swiper .swiper-wrapper .swiper-slide .magazine-list-item.right .bg { position: absolute; bottom: 0; right: 0; width: 100%; height: 100%; opacity: 0.3; background: linear-gradient(90deg, rgba(255,255,255,0), black); } .main-banner .magazine-list .main-swiper .swiper-wrapper .swiper-slide .magazine-list-item.left .bg { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; opacity: 0.3; background: linear-gradient(270deg, rgba(255,255,255,0), black); } .main-banner .magazine-list .main-swiper .swiper-wrapper .swiper-slide .magazine-list-item.center .bg { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; opacity: 0.3; background: linear-gradient(to right, rgba(255,255,255,0) 0%, black 50%, rgba(255,255,255,0) 100%); } @media screen and (max-width: 360px) {.main-banner .magazine-list .main-swiper { aspect-ratio: 18 / 11; } .main-banner .magazine-list .main-swiper .swiper-wrapper .swiper-slide .magazine-list-item .img { aspect-ratio: 18 / 11; } .main-banner .magazine-list .main-swiper .swiper-wrapper .swiper-slide .magazine-list-item .slide-txt .main-txt { font-size: 24px; } .main-banner .magazine-list .main-swiper .swiper-wrapper .swiper-slide .magazine-list-item .slide-txt .sub-txt { font-size: 14px; } } /* 카테고리 */ .category-wrapper {position: relative; padding: 0 20px 22px 20px; height: auto; min-height: 100%;} .category-wrapper:has(.new-cate) {padding-bottom:0;} .category-wrapper + .category-wrapper {padding-bottom: 22px;} .category-wrapper > ul {display: flex; justify-content: space-between; flex-wrap: wrap;} .category-wrapper > ul li {position: relative; width: calc(100% / 5); display: flex; justify-content: center; margin-top: 20px;} .category-wrapper > ul li a {display: block; position: relative; text-align: center;} .category-wrapper > ul li span.menu-img {content: ''; display: block; width: 56px; height: 56px; margin: 0 auto 10px auto; background-size: 100% 100%; border-radius: 12px; background-repeat: no-repeat; background-position: center center; background-color: #FF4747;} .category-wrapper > ul li a span.menu-name {font-size: 13px; font-weight: 400; letter-spacing: -0.25px;} .category-wrapper > ul li a span.count {position: absolute; left: 38px; top: -5px; background-color: #F92E12; color: #fff; padding: 4px 6px; line-height: 100%; border-radius: 20px; font-size: 12px; font-weight: 500;} .category-wrapper > ul li a span.no-count {position: absolute; left: 38px; top: -5px; background-color: #949494; color: #fff; padding: 4px 6px; line-height: 100%; border-radius: 20px; font-size: 12px; font-weight: 500;} .category-bottom-line {margin: 0; width: 100%; height: 8px; background-color: #eee; padding: 0; border: 0;} .category-slide-item .main_swiper {width: 56px; height: 56px; border-radius: 12px; overflow: hidden; margin: 0 auto 10px auto;} .category-slide-item .main_swiper .swiper-wrapper .swiper-slide img {display: block; width: 100%; height: 100%; object-fit: cover;} .category-slide-item .sub_swiper {height: 19px; overflow: hidden;} .category-slide-item .sub_swiper .swiper-wrapper .swiper-slide span {font-size: 13px;} .category-slide-item span.hot {position: absolute; left: 38px; top: -5px; background-color: #F92E12; color: #fff; padding: 4px 6px; line-height: 100%; border-radius: 20px; font-size: 12px; font-weight: 500; z-index: 1; overflow: hidden;} .category-slide-item span.hot:before {position: absolute; content: ''; display: inline-block; top: -180px; left: 0; width: 30px; height: 100%; background-color: #fff; animation: shiny-btn1 4s ease-in-out infinite;} .category-wrapper .new-cate {position: relative; border: 1px solid #FF8159; border-radius: 8px; padding: 0px; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; margin-top: 32px; overflow: hidden;} .category-wrapper .new-cate .new-cate-tit {width: 25%; padding: 8px 8px 8px 24px; position: absolute;} .category-wrapper .new-cate .new-cate-tit::after {content: ''; width: 1px; height: 80%; background-color: #FFDFCD; background-size: 1px 80%; position: absolute; right: 0; top: 50%; transform: translateY(-50%);} .category-wrapper .new-cate .new-cate-tit span {background: url(https://img.monfood.co.kr/images/common/symbol_gif.gif) no-repeat 0 0 / contain;display: block;width: 40px;height: 40px;position: absolute;top: -44px;} .category-wrapper .new-cate .new-cate-tit p {font-size: 13px; font-weight: 700; color: #FF6B00; letter-spacing: -0.195px; line-height: 130%;} .category-wrapper .new-cate ul {display: flex; gap: 0px; width: 100%; justify-content: right; flex-wrap: inherit; padding: 10px 0} .category-wrapper .new-cate ul li {position: relative; width: calc(100% / 5); display: flex; justify-content: center; margin-top: 0;} .category-wrapper .new-cate ul li a {display: block; position: relative; text-align: center;} .category-wrapper .new-cate ul li a span.menu-img {content: ''; display: block; width: 56px; height: 56px; margin: 0 auto 3px auto; background-size: 100% 100%; border-radius: 12px; background-repeat: no-repeat; background-position: center center; background-color: #fff;} .category-wrapper .new-cate ul li:nth-child(1) a span.menu-img {background-image: url(https://img.monfood.co.kr/uploads/category/2024/0827/f299d26a28da0fb1ac50c1d7611621bd.png);} .category-wrapper .new-cate ul li:nth-child(2) a span.menu-img {background-image: url(https://img.monfood.co.kr/uploads/category/2024/0827/5de8b918b13249a44bb96fecf3c41efc.png);} .category-wrapper .new-cate ul li:nth-child(3) a span.menu-img {background-image: url(https://img.monfood.co.kr/uploads/category/2024/0827/0ee57e016bb6a5c6918ab13069fc0e53.png);} .category-wrapper .new-cate ul li a span.menu-name {font-size: 13px; font-weight: 400; letter-spacing: -0.25px; line-height: 150%;} .category-wrapper .game_kiki_area {width: 40%; box-sizing: border-box; position: absolute; left:0; top: 0; background: #f7f7f7; height: 100px;} .category-wrapper .game_kiki a {box-sizing: border-box; display: flex; height: 100px; align-items: center; justify-content: center; padding: 8px 4px; } .category-wrapper .game_kiki_area .game_icon {width: 60px; height: 60px; border-radius: 8px; margin-right: 8px;} .category-wrapper .game_kiki_area .badge {display: inline-block; margin-bottom: 4px; background: #000; color: #fff; padding: 3px 6px 5px; font-weight: 700; border-radius: 2px; font-size: 11px; } .category-wrapper .game_kiki_area .event_cont {font-size: 11px; color: #555; font-weight: 500; line-height: 135%} .category-wrapper .game_kiki_area .event_cont strong {color: #ff6b00; font-weight: 700; font-size: 13px;} .category-wrapper .comment_wrap {position: absolute; top: -9px; right: 20px; z-index: 1; width: calc(60% - 22px); text-align: center} .category-wrapper .comment {background: #ff6b00; border-radius: 2px; padding: 2px 8px 4px; color: #fff; font-size: 11px; } @keyframes shiny-btn1 { 0% {-webkit-transform: scale(0) rotate(135deg); opacity: 0;} 80% {-webkit-transform: scale(0) rotate(135deg); opacity: 0.5;} 81% {-webkit-transform: scale(4) rotate(135deg); opacity: 1;} 100% {-webkit-transform: scale(50) rotate(135deg); opacity: 0;} } @media screen and (max-width: 400px){ .category-wrapper .game_kiki_area .game_icon {width: 54px; height: 54px;} .category-wrapper {padding: 0 12px 20px 12px;} /* .category-wrapper .new-cate ul li a span.menu-img {width: 52px; height: 52px;} */ } @media screen and (max-width: 365px){ .category-wrapper > ul li a::before {width: 52px; height: 52px; background-size: 35px auto;} .category-wrapper > ul li a span.count {padding: 3px 5px;} .category-wrapper > ul li a span.no-count {padding: 3px 5px;} .category-slide-item span.hot {padding: 3px 5px;} .category-wrapper .new-cate .new-cate-tit {width: 25%; line-height: 130%; padding: 8px 8px 8px 24px;} /* .category-wrapper .new-cate ul {width: 60%;} */ .category-wrapper .game_kiki_area .game_icon {width: 50px; height: 50px;} .category-wrapper .game_kiki_area .badge {font-size: 9px;} .category-wrapper .game_kiki_area .event_cont {font-size: 9px;} .category-wrapper .game_kiki_area .event_cont strong {font-size: 11px;} .category-wrapper .comment {font-size: 10px;} } @media screen and (max-width: 340px){ .category-slide-item .sub_swiper .swiper-wrapper .swiper-slide span {font-size: 12px;} .category-wrapper > ul li a span.menu-name {font-size: 12px;} .category-wrapper > ul li a::before {width: 48px; height: 48px;} .category-wrapper > ul li a span.count {padding: 2px 4px;} .category-wrapper > ul li a span.no-count {padding: 2px 4px;} .category-slide-item span.hot {padding: 2px 4px;} .category-wrapper .new-cate .new-cate-tit {padding: 8px 8px 8px 24px;} .category-wrapper .new-cate .new-cate-tit span {left: 24px;} /* .category-wrapper .new-cate ul {width: 65%;} */ } /* 섹션별로 더보기 버튼 */ .swiper-wrapper .swiper-more { height: 150px; display: flex; flex-direction: column; justify-content: center; align-items: center; } .swiper-wrapper .swiper-more a.main_more_btn { display: flex; flex-direction: column; justify-content: center; align-items: center; } .swiper-wrapper .swiper-more a.main_more_btn > div { width: 40px; height: 40px; background-color: #F5F5F5; position: relative; border-radius: 50%; } .swiper-wrapper .swiper-more a.main_more_btn > div > img { width: 24px; height: 24px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .swiper-wrapper .swiper-more a.main_more_btn > span { font-size: 14px; color: #222; margin-top: 8px; } /* 섹션 타이틀 */ section .section-title-wrapper { position: relative; margin: 32px 20px 16px 20px; line-height: 1.5; word-break: keep-all; } section .section-title-wrapper > h2 { width: 90%; font-size: 15px; font-weight: 400; letter-spacing: -0.225px; } section .section-title-wrapper > p { width: 90%; font-size: 19px; font-weight: 700; letter-spacing: -0.285px; } section .section-title-wrapper > a { position: absolute; right: 0; top: 50%; width: 24px; height: 24px; transform: translate(0,-50%); } section .section-title-wrapper > a img { width: 100%; } /* 베스트 / 실시간 HOT 상품 */ section.best-hot-now {position: relative; min-height: 494px; background-position: center center; background-repeat: no-repeat; background-size: cover; color: #fff; padding-bottom: 10px; overflow: hidden; box-sizing: border-box;} section.best-hot-now::after {content: ''; position: absolute; left: 0; top: 0; width: 100%; height:100%;background: rgba(0, 0, 0, 0.7);} section.best-hot-now .section-title-wrapper {z-index: 1;} section.best-hot-now .right_info_box .tit {color: #fff;} section.best-hot-now .right_info_box .view-count {color: #fff; font-size: 13px; margin-top: 10px;} section.best-hot-now .right_info_box .cart-in {border-radius: 50%; background-color: rgba(255,255,255,0.5); width: 36px; height: 36px; position: absolute; right: 0px; bottom: 0px; display: flex; align-items: center; justify-content: center;} section.best-hot-now .right_info_box .cart-in > img {width: 24px; height: 24px;} section.best-hot-now.best-wrapper .best-thumb-wrapper {margin-left: 20px; margin-top: 4px; width: 270px; min-height: 339px;} section.best-hot-now.best-wrapper .swiper_best_pagination {margin-top: 40px; position: relative; z-index: 1;} section.best-hot-now.best-wrapper .swiper_best_pagination .swiper-pagination-bullet {background-color: #fff; opacity: 0.7;} section.best-hot-now.best-wrapper .swiper_best_pagination .swiper-pagination-bullet-active {background-color: #fff; width: 24px; opacity: 1;} section.best-hot-now.best-wrapper .best-thumb-wrapper {margin-left: 35px; margin-top: 4px; width: 270px; min-height: 339px;} section.best-hot-now.best-wrapper .section-title-wrapper > h2 {font-size: 14px; font-weight: 400;} section.best-hot-now.best-wrapper .section-title-wrapper > p {font-size: 18px; font-weight: 700;} /* 오늘의 타임특가 */ .today-timesale {} .today-timesale .timesale-swiper {margin: 0 20px;} .today-timesale .timesale-swiper .swiper-wrapper {} .today-timesale .timesale-swiper .swiper-wrapper .swiper-slide {background-position: center; background-size: cover; width: 80%; height: 100%;} .today-timesale .timesale-swiper .swiper-wrapper .swiper-slide > a {display: block;} .today-timesale .timesale-swiper .swiper-wrapper .swiper-slide > a .timesale-img {position: relative;} .today-timesale .timesale-swiper .swiper-wrapper .swiper-slide > a .timesale-img .timesale-item-img {width: 100%; border-radius: 8px; overflow: hidden; aspect-ratio: 16/10; object-fit: cover;} .today-timesale .timesale-swiper .swiper-wrapper .swiper-slide > a .timesale-img .timesale-icon {position: absolute; left: 7px; top: 7px; width: 56px; height: auto; z-index: 1; display: none; image-rendering:-webkit-optimize-contrast; transform:translateZ(0); backface-visibility:hidden; image-rendering: crisp-edges;} .today-timesale .timesale-swiper .swiper-wrapper .swiper-slide > a .timesale-img .time {position: absolute; width: 110px; height: 22px; background-color: #fff; border-radius: 12px; top: 17px; left: 24px; display: flex; align-items: center; justify-content: end; display: none;} .today-timesale .timesale-swiper .swiper-wrapper .swiper-slide > a .timesale-img .time span {font-size: 12px; line-height: 100%; padding: 0 10px; font-weight: 400;} .today-timesale .timesale-swiper .swiper-wrapper .swiper-slide > a .timesale-img .soon {position: absolute; width: 100%; height: calc(100% - 2px); top: 0; left: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.5); border-radius: 8px; color: #fff; flex-direction: column; opacity: 0;} .today-timesale .timesale-swiper .swiper-wrapper .swiper-slide.swiper-slide-active > a .timesale-img .soon {position: absolute; animation: soon 0.5s ease; opacity: 1;} @keyframes soon { 0% {opacity: 0;} 100% {opacity: 1;} } .today-timesale .timesale-swiper .swiper-wrapper .swiper-slide > a .timesale-img .soon > span {font-size: 16px; font-weight: 700; line-height: 150%; letter-spacing: -0.24px;} .today-timesale .timesale-swiper .swiper-wrapper .swiper-slide > a .timesale-img .soon > span:nth-of-type(2) {font-weight: 500; font-size: 18px;} .today-timesale .timesale-swiper .swiper-wrapper .swiper-slide > a .timesale-img .soon > .notify {background-color: #000; padding: 6px 12px; border-radius: 14px; margin-top: 16px; border: 0;} .today-timesale .timesale-swiper .swiper-wrapper .swiper-slide > a .timesale-img .soon > .notify span {font-size: 12px; font-weight: 400; color: #fff; position: relative; padding-left: 20px;} .today-timesale .timesale-swiper .swiper-wrapper .swiper-slide > a .timesale-img .soon > .notify span::before {content: ''; background: url(/images/common/notify.svg) 0 0 no-repeat; width: 16px; height: 100%; background-size: 16px; position: absolute; left: 0; top: 1px;} .today-timesale .timesale-swiper .swiper-wrapper .swiper-slide > a .timesale-img .saved {padding: 6px 8px; background: rgba(0, 0, 0, 0.65); display: flex; align-items: center; justify-content: center; color: #fff; position: absolute; right: 5px; bottom: 5px; border-radius: 13px; opacity: 0;} .today-timesale .timesale-swiper .swiper-wrapper .swiper-slide.swiper-slide-active > a .timesale-img .saved {position: absolute; animation: soon 0.5s ease; opacity: 1;} .today-timesale .timesale-swiper .swiper-wrapper .swiper-slide > a .timesale-img .saved span {font-size: 12px; font-weight: 500; line-height: 100%; position: relative; padding-left: 24px;} .today-timesale .timesale-swiper .swiper-wrapper .swiper-slide > a .timesale-img .saved span::before {content: ''; background: url(/images/common/time_point.png) 0 0 no-repeat; width: 18px; height: 18px; background-size: 18px; position: absolute; left: 0; top: 50%; transform: translate(0, -50%);} .today-timesale .timesale-swiper .swiper-wrapper .swiper-slide > a .timesale-info {opacity: 0; text-align: left; margin-top: 12px;} .today-timesale .timesale-swiper .swiper-wrapper .swiper-slide > a .timesale-info p {line-height: 150%; font-weight: 400; font-size: 14px; color: #222;} .today-timesale .timesale-swiper .swiper-wrapper .swiper-slide > a .timesale-info .timesale-price {font-size: 14px; line-height: 150%; margin-top: 4px;} .today-timesale .timesale-swiper .swiper-wrapper .swiper-slide > a .timesale-info .timesale-price span:nth-of-type(1) {color: #FF6B00; font-weight: 700;} .today-timesale .timesale-swiper .swiper-wrapper .swiper-slide > a .timesale-info .timesale-price span:nth-of-type(2) {font-weight: 700;} .today-timesale .timesale-swiper .swiper-wrapper .swiper-slide.swiper-slide-active > a .timesale-info {opacity: 1;} .today-timesale .timesale-swiper .swiper-wrapper .swiper-slide.swiper-slide-active > a .timesale-img .timesale-icon {display: block;} .today-timesale .timesale-swiper .swiper-wrapper .swiper-slide.swiper-slide-active > a .timesale-img .time {display: flex;} .today-timesale .swiper-3d .swiper-slide-shadow-left {height: auto; aspect-ratio: 16/10; border-radius: 8px; background: rgba(0,0,0,0.3);} .today-timesale .swiper-3d .swiper-slide-shadow-right {height: auto; aspect-ratio: 16/10; border-radius: 8px; background: rgba(0,0,0,0.3);} .today-timesale a.today-timesale-more {border: 1px solid #D9D9D9; border-radius: 4px; padding: 10px 0; display: flex; align-items: center; justify-content: center; margin: 0 20px; margin-top: 20px;cursor:pointer;} .today-timesale a.today-timesale-more span {line-height: 150%; font-size: 14px; font-weight: 400; letter-spacing: -0.21px; position: relative; padding-right: 20px;} .today-timesale a.today-timesale-more span::after {content: ''; background: url(/images/common/btn_arrow_right.svg) 0 0 no-repeat; width: 16px; height: 100%; background-size: 16px; position: absolute; right: 0; margin-top: 3px;} @media screen and (max-width: 380px) { .today-timesale .timesale-swiper .swiper-wrapper .swiper-slide > a .timesale-img .soon > span {font-size: 14px;} .today-timesale .timesale-swiper .swiper-wrapper .swiper-slide > a .timesale-img .soon > span:nth-of-type(2) {font-size: 16px;} .today-timesale .timesale-swiper .swiper-wrapper .swiper-slide > a .timesale-img .soon > .notify {margin-top: 8px;} } /* 재구매 타이틀 */ section.cate-wrapper { position: relative; clear: both; } section.cate-wrapper .section-title-wrapper { position: relative; margin: 32px 20px 16px 20px; line-height: 1.5; } section.cate-wrapper .section-title-wrapper > h2 { font-size: 14px; font-weight: 400; } section.cate-wrapper .section-title-wrapper > p { font-size: 18px; font-weight: 700; color: #222; } section.cate-wrapper .section-title-wrapper > a { position: absolute; right: 0; top: 50%; width: 24px; height: 24px; transform: translate(0,-50%); } section.cate-wrapper .section-title-wrapper > a img { width: 100%; } /* 월간푸드 베스트 */ section.best-wrapper.__best_area.swiper_best { overflow: hidden; } section.best-wrapper.__best_area .section-title-wrapper > h2 { font-size: 14px; font-weight: 400; } section.best-wrapper.__best_area .section-title-wrapper > p { font-size: 18px; font-weight: 700; color: #222; } .best-cate-wrapper { margin: auto 20px; } .best-cate-wrapper ul { display: flex; align-items: center; justify-content: space-between; } .best-cate-wrapper ul li { font-size: 13px; font-weight: 300; padding: 10px 12px; border-radius: 50px; background-color: #f3f3f3; color: #727272; text-align: center; width: calc(100% / 4); /* min-width: 72px; */ } .best-cate-wrapper ul li + li { margin-left: 10px; } .best-cate-wrapper ul li a { display: block; } .best-cate-wrapper ul li.active { background-color: #000; color: #fff; } .best-cate-wrapper ul li.active a { color: #fff; } /* 추천상품 */ section.hot-wrapper.__hot_item .section-title-wrapper > h2 { font-size: 14px; font-weight: 400; } section.hot-wrapper.__hot_item .section-title-wrapper > p { font-size: 18px; font-weight: 700; color: #222; } .with_item_wrap { object-fit: contain; } .with_item_wrap .container_95 { box-sizing: border-box; } .with_item_wrap .container_95 .with_item_box { width: 100%; position: relative; display: flex; box-sizing: border-box; height: 95px; margin-top: 18px;} .with_item_wrap .container_95 .with_item_box .re_rank { display: flex; font-size: 18px; font-weight: 700; margin-right: 12px; } .with_item_wrap .container_95 .with_item_box .left_img { margin-right: 4%; border-radius: 8px; position: relative; display: flex; } .with_item_wrap .container_95 .with_item_box .left_img img { border-radius: 8px; width: 95px; } .with_item_wrap .container_95 .with_item_box .left_img video { border-radius: 8px; width: 95px; } .right_info_box .tit { white-space: normal; line-height: 150%; font-size: 14px; text-align: left; overflow: hidden; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .best-wrapper .best-thumb-wrapper { margin-left: 18px; margin-top: 4px; width: 270px; } .best-wrapper .swiper_best_pagination { text-align: center; line-height: 0; margin-top: 20px; /* margin-bottom: 48px; */ } .best-wrapper .swiper_best_pagination .swiper_best_pagination-bullet { background-color: #D9D9D9; width: 6px; height: 6px; } .best-wrapper .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 2px; width: 6px; height: 6px; } .best-wrapper .swiper_best_pagination .swiper-pagination-bullet-active { background-color: #FF6B00; width: 16px; height: 6px; border-radius: 10px; } @media screen and (max-width: 480px) { .right_info_box .tit { font-size: 14px; } .right_info_box .sell_pri span { font-weight: 700; } .right_info_box .review-area { font-size: 12px; } } .best-thumb-wrapper2 { margin-left: 20px; } .best-thumb-wrapper2 .with_item_wrap { object-fit: contain; } .best-thumb-wrapper2 .with_item_wrap .container_95 { box-sizing: border-box; } .best-thumb-wrapper2 .with_item_wrap .container_95 .with_item_box { position: relative; display: flex; box-sizing: border-box; height: 95px; margin-top: 12px; cursor: pointer; } .best-thumb-wrapper2 .with_item_wrap .container_95 .with_item_box .re_rank { display: flex; font-size: 18px; font-weight: 700; margin-right: 12px; } .best-thumb-wrapper2 .with_item_wrap .container_95 .with_item_box .left_img { margin-right: 12px; border-radius: 8px; position: relative; display: flex; } .best-thumb-wrapper2 .with_item_wrap .container_95 .with_item_box .left_img img { border-radius: 8px; } .best-thumb-wrapper2 .best-wrapper .best-thumb-wrapper { margin-left: 20px; width: 270px; } .best-thumb-wrapper2 .best-wrapper .swiper_best_pagination { text-align: center; line-height: 0; margin-top: 24px; margin-bottom: 48px; } .best-thumb-wrapper2 .best-wrapper .swiper_best_pagination .swiper_best_pagination-bullet { background-color: #D9D9D9; width: 6px; height: 6px; margin: 0 3px; } .best-thumb-wrapper2 .best-wrapper .swiper_best_pagination .swiper-pagination-bullet-active { background-color: #FF6B00; width: 16px; height: 6px; border-radius: 10px; } @media screen and (max-width: 480px) {.best-thumb-wrapper2 .right_info_box .tit { font-size: 14px; } .best-thumb-wrapper2 .right_info_box .sell_pri span { font-size: 14px; font-weight: 700; } .best-thumb-wrapper2 .right_info_box .review-area { font-size: 12px; } } .cate-wrapper .section-img {max-width: 480px; padding: 0px 20px;} .cate-wrapper .section-img img {width: 100%;} .cate-wrapper .cate-thumb-wrapper {position: relative; max-width: 480px; z-index: 1; display: flex; overflow: hidden; padding-left: 20px;} .cate-wrapper .cate-thumb-wrapper .cate-thumb {position: relative; width: 150px; cursor: pointer; margin-right: 12px;} .cate-wrapper .cate-thumb-wrapper .swiper-more {height: 150px;} .cate-wrapper .cate-thumb-wrapper .cate-thumb .cate-thumb-img {height: 150px; position: relative;} .cate-wrapper .cate-thumb-wrapper .cate-thumb .cate-thumb-img > img {width: 150px; margin-right: 10px; border-radius: 8px;} .cate-wrapper .cate-thumb-wrapper .cate-thumb .cate-thumb-img > video {width: 150px; margin-right: 10px; border-radius: 8px;} .cate-wrapper .cate-thumb-wrapper .cate-thumb .cate-thumb-img .delivery-mark {position: absolute; top: 0; left: 8px;} .cate-wrapper .cate-thumb-wrapper .cate-thumb .cate-thumb-img .delivery-mark > img {width: 38px;} .cate-wrapper .cate-thumb-wrapper .cate-thumb .cate-thumb-img .history-mark {border-radius: 4px; background: linear-gradient(90deg, #FF8A00 0%, #FF6B00 100%); padding: 0 6px; height: 20px; display: flex; align-items: center; justify-content: center; color: #fff; position: absolute; right: 8px; top: 8px; font-size: 12px; font-weight: 400;} .cate-wrapper .cate-thumb-wrapper .cate-thumb .cate-thumb-img .history-mark > span {} .cate-wrapper .cate-thumb-wrapper .cate-thumb .cate-thumb-img .favorite-item {border-radius: 4px; background: linear-gradient(90deg, #FF8A00 0%, #FF6B00 100%); padding: 0 6px; height: 20px; display: flex; align-items: center; justify-content: center; color: #fff; position: absolute; left: 8px; top: 8px; font-size: 12px; font-weight: 400;} .cate-wrapper .cate-thumb-wrapper .cate-thumb .cate-thumb-img .favorite-item > span {} .cate-wrapper .cate-thumb-wrapper .cate-thumb .cate-thumb-img .cart-in {border-radius: 50%; background-color: rgba(255,255,255,0.7); width: 36px; height: 36px; position: absolute; right: 6px; bottom: 6px; display: flex; align-items: center; justify-content: center;} .cate-wrapper .cate-thumb-wrapper .cate-thumb .cate-thumb-img .cart-in > img {width: 24px; height: 24px;} .cate-wrapper .cate-thumb-wrapper .cate-thumb .cate-thumb-txt {text-align: left; padding: 0 3px;} .cate-wrapper .cate-thumb-wrapper .cate-thumb .cate-thumb-txt .prod-price-wrap {position: absolute; bottom: 0; width: 100%;} .cate-wrapper .cate-thumb-wrapper .cate-thumb .cate-thumb-txt .price-wrapper {display: inline-block; line-height: 1; display: flex; align-items: baseline; position: relative; /* height: 18px */; letter-spacing: -0.21px;} .cate-wrapper .cate-thumb-wrapper .cate-thumb .cate-thumb-txt .price-wrapper .price {display: inline-block; font-size: 14px; font-weight: 700; letter-spacing: -0.5px; white-space: nowrap;} .cate-wrapper .cate-thumb-wrapper .cate-thumb .cate-thumb-txt .price-wrapper .dc-rate {font-size: 14px; font-weight: 700; color: #FF6B00; display: inline-block; margin-right: 8px; word-break: keep-all;} .cate-wrapper .cate-thumb-wrapper .cate-thumb .cate-thumb-txt .review-area {display: inline-block; color: #a8a8a8; font-size: 12px;} .cate-wrapper .cate-thumb-wrapper .cate-thumb .cate-thumb-txt .review-area .review-area-wrap {width: auto;} .cate-wrapper .cate-thumb-wrapper .cate-thumb .cate-thumb-txt .review-area .review-area-wrap p {float: left;} .cate-wrapper .cate-thumb-wrapper .cate-thumb .cate-thumb-txt .review-area .review-area-wrap p:first-child {padding-right: 5px;} .cate-wrapper .cate-thumb-wrapper .cate-thumb .cate-thumb-txt .review-area .review-area-wrap p.rate {display: flex;} .cate-wrapper .cate-thumb-wrapper .cate-thumb .cate-thumb-txt .review-area .review-area-wrap p em.star {display: inline-block; background-image: url("/image/common/star.png"); width: 15px; height: 15px; background-size: contain; margin: 1px;} .cate-wrapper .cate-thumb-wrapper .cate-thumb .cate-thumb-txt .review-area .review-area-wrap span {color: #727272; position: relative; padding-left: 16px; font-size: 12px;} .cate-wrapper .cate-thumb-wrapper .cate-thumb .cate-thumb-txt .review-area .review-area-wrap span::before {content: ''; display: block; background-image: url("/images/common/ico_review.svg"); width: 14px; height: 14px; position: absolute; left: 0; top: 50%; transform: translate(0, -50%); margin-top: 1px;} @media screen and (max-width: 480px) { .cate-wrapper .cate-thumb-wrapper .cate-thumb {width: 150px;} .cate-wrapper .cate-thumb-wrapper .cate-thumb .cate-thumb-img {width: 150px; height: 150px;} .cate-wrapper .cate-thumb-wrapper .cate-thumb img {width: 150px;} .cate-wrapper .cate-thumb-wrapper .cate-thumb .cate-thumb-txt h3 {font-size: 14px; min-width: 150px;} .cate-thumb-txt .price-wrapper .price {font-size: 14px; font-weight: 700;} .cate-thumb-txt .price-wrapper .dc-rate {font-size: 14px; font-weight: 700;} .cate-thumb-wrapper .cate-thumb .cate-thumb-txt .review-area {font-size: 12px;} } .new-wrapper-item { position: relative; width: 720px; z-index: 1; display: flex; } .swiper2 .new-thumb-wrapper { width: 300px; margin: 0px !important; margin-right: -11px !important; margin-left: 5px !important; } .new-thumb-wrapper .new-thumb { width: 220px; height: 330px; background: url(/image/common/new_thumb.jpg) no-repeat; background-size: 220px 330px; /*border-radius: 10px; */display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding: 0px; margin-left: 15px; } .new-thumb-wrapper .new-thumb .new-pro-wrapper { margin-bottom: 10px; position: relative; background: rgba(0, 0, 0, 0.5); color: #fff; border-radius: 8px; width: 90%; } .new-thumb-wrapper .new-thumb .new-pro-wrapper .pro-box { width: 100%; position: relative; } .new-thumb-wrapper .new-thumb .new-pro-wrapper .pro-box .left_thumb { float: left; width: 30%; border-radius: 10px; position: relative; } .new-thumb-wrapper .new-thumb .new-pro-wrapper .pro-box .left_thumb img { width: 100%; border-radius: 8px; margin: 4px; } .new-thumb-wrapper .new-thumb .new-pro-wrapper .right-info-box { width: 70%; position: absolute; margin: 10px 72px; } .new-pro-wrapper .review-area { display: flex; /*margin-bottom: 4px; */font-size: 12px; } .new-pro-wrapper .review-area p:first-child { padding-right: 5px; } .new-pro-wrapper .review-area p.rate { display: flex; /*align-items: center; */ } .new-pro-wrapper .review-area p em.star { display: inline-block; background-image: url("/image/common/star_white.png"); width: 12px; height: 12px; background-size: contain; margin: 1px; background-repeat: no-repeat; } .new-thumb-wrapper .new-tit { line-height: 1.5; margin: 8px 20px; width: 240px; width: 200px; /*font-weight: 500; */font-size: 16px; } .new-pro-wrapper .right-info-box .price-wrapper { padding-top: 10px; letter-spacing: -0.7px; display: flex; align-items: center; font-size: 15px; } .new-pro-wrapper .right-info-box .org-price { font-size: 13px; color: #aeaeae; } .new-pro-wrapper .right-info-box .price { display: block; } .new-pro-wrapper .right-info-box .dc-rate { right: 24px; float: right; color: #FF6B00; position: absolute; font-weight: 500; } /* 서브배너(띠배너) */ .sub_banner { max-width: 480px; padding: 0px 20px; overflow: hidden; } .sub_banner img { width: 100%; } .sub_banner-slider { position: relative; max-width: 480px; padding: 0px 20px; margin-top: 32px; overflow: hidden; } .sub_banner-slider .swiper-slide { overflow: hidden; } .sub_banner-slider .swiper-slide img { width:100% !important; border-radius: 8px } /* 한정상품 */ .limit-list { } .limit-list-item { position: relative; width: 295px; overflow: hidden; } .limit-list-item .img { width: 295px; height: 295px; background: 50% 50% no-repeat; background-size: cover; background-color: #fff; overflow: hidden; position: relative; } .limit-list-item .limit-count-wrap { width: 100%; height: 40px; background-color: #FF6B00; display: flex; align-items: center; justify-content: center; color: #FFF; } .limit-list-item .group-by-badge { position: absolute; bottom: 0; left: 0; height: 100%; width: 100%; background-color: rgba(0, 0, 0, 0.32); color: #fff; text-align: center; } .limit-list-item .group-by-badge .limit-soldout-mark { width: 180px; position: absolute; top: 18%; left: 20%; } .limit-list-item .group-by-badge .limit-soldout-mark img { width: 100%; padding-bottom: 10px; } .limit-list-item .limit-count-wrap p { font-size: 18px; font-weight: 500; } .limit-list-item .limit-count-wrap span { color: #fffd3a; } .limit-list .swiper-slide.swiper-slide-active { transform: scale(.980); opacity: 1; } .limit-list .swiper-slide { transform: scale(.925); transition: transform .3s ease; opacity: 0.7; } .swiper-slide { flex-shrink: 0; width: 100%; height: 100%; position: relative; transition-property: transform; } .limit-thumb-txt { text-align: left; padding: 0 3px; } .limit-thumb-txt h3 { line-height: 1.5; margin: 10px 0; width: 100%; font-weight: 400; font-size: 18px; } .limit-thumb-txt .org-price { color: #aeaeae; font-size: 13px; display: block; } .limit-thumb-txt .price-wrapper { display: inline-block; line-height: 1; display: flex; justify-content: flex-start; align-items: baseline; position: relative; padding: 8px 0; font-size: 20px; font-weight: 700; letter-spacing: -0.5px; } .limit-thumb-txt .price-wrapper .dc-rate { color: #FF6B00; right: 22px; display: inline-block; float: right; position: absolute; } .limit-thumb-txt .review-area { width: 200px; display: inline-block; color: #a8a8a8; padding: 5px 0; font-size: 13px; } .limit-thumb-txt .review-area .review-area-wrap { width: auto; background-color: #f5f5f5; border-radius: 10px; padding: 5px; float: left; margin-right: 5px; } .limit-thumb-txt .review-area .review-area-wrap p { float: left; } .limit-thumb-txt .review-area .review-area-wrap p:first-child { padding-right: 5px; } .limit-thumb-txt .review-area .review-area-wrap p.rate { display: flex; } .limit-thumb-txt .review-area .review-area-wrap p em.star { display: inline-block; background-image: url("/image/common/star.png"); width: 15px; height: 15px; background-size: contain; margin: 1px; } @media screen and (max-width: 480px) {.limit-thumb-txt h3 { font-size: 16px; } .limit-thumb-txt .org-price { font-size: 12px; } .limit-thumb-txt .price-wrapper { font-size: 18px; padding: 6px 0; } .limit-thumb-txt .review-area { font-size: 12px; } } /* 핫아이템 */ .hot-thumb-wrapper {margin: 20px 20px 0px 25px;} .hot-thumb-wrapper .hot-thumb {display: flex; flex-direction: column; justify-content: space-around; margin-bottom: 20px;} .hot-thumb-wrapper .hot-thumb .hot-thumb-img {} .hot-thumb-wrapper .hot-thumb .hot-thumb-img img {width: 100%; border-radius: 8px; /*border-radius: 10px 10px 0 0; */} .hot-thumb-wrapper .hot-thumb .hot-thumb-img video {width: 100%; border-radius: 8px; /*border-radius: 10px 10px 0 0; */} .hot-thumb-wrapper .hot-thumb .hot-thumb-txt {position: relative;} .hot-thumb-wrapper .hot-thumb .hot-thumb-txt h4 {font-size: 14px; font-weight: 400; line-height: 1.5; margin: 10px 0 10px; width: 90%;} .hot-thumb-wrapper .hot-thumb .hot-thumb-txt .price-wrapper {line-height: 1; display: flex; justify-content: space-between; align-items: flex-start;} .hot-thumb-wrapper .hot-thumb .hot-thumb-txt .price-wrapper .price_wrap {display: flex; justify-content: flex-start; float:left;} .hot-thumb-wrapper .hot-thumb .hot-thumb-txt .price-wrapper .left-price {display: flex; align-items: flex-end; justify-content: flex-start; width: 100%;} .hot-thumb-wrapper .hot-thumb .hot-thumb-txt .dc-rate {font-size: 14px; font-weight: 700; color: #FF6B00; word-break: keep-all;} .hot-thumb-wrapper .hot-thumb .hot-thumb-txt .price {display: block; font-size: 14px; font-weight: 700; padding-right: 5px;} .hot-thumb-wrapper .hot-thumb .hot-thumb-txt .org-price {color: #aeaeae; font-size: 13px; display: block;} /*.hot-thumb-wrapper .hot-thumb .hot-thumb-txt .price-wrapper .price_wrap .right-price {min-width: 50px;} */ .hot-thumb-wrapper .hot-thumb .hot-thumb-txt .review-area {width: 100%; display: inline-block; /*justify-content: flex-start; */color: #a8a8a8; padding: 7px; font-size: 12px; /*padding-top: 5px; border-radius: 10px; background-color: #f5f5f5; */} .hot-thumb-wrapper .hot-thumb .hot-thumb-txt .price-wrapper .review-area {display: inline-block; margin-top: -1px; /*justify-content: flex-start; */color: #a8a8a8; padding: 0px; float:left; font-size: 13px; /*padding-top: 5px; border-radius: 10px; background-color: #f5f5f5; */} .hot-thumb-wrapper .hot-thumb .hot-thumb-txt .review-area .review-area-wrap {width: auto; /*background-color: #f5f5f5; border-radius: 5px; padding: 3px; letter-spacing: -0.9px; float: right; margin-right: 5px; */} .hot-thumb-wrapper .hot-thumb .hot-thumb-txt .review-area p {} .hot-thumb-wrapper .hot-thumb .hot-thumb-txt .review-area p:first-child {padding-right: 5px;} .hot-thumb-wrapper .hot-thumb .hot-thumb-txt .review-area p.rate {display: flex; /*align-items: center; */} .hot-thumb-wrapper .hot-thumb .hot-thumb-txt .review-area p em.star {display: inline-block; background-image: url("/image/common/star.png"); width: 15px; height: 15px; background-size: contain; margin: 1px;} .hot-thumb-wrapper .hot-thumb .hot-thumb-txt .review-area span {color: #727272; position: relative;} .hot-thumb-wrapper .hot-thumb .hot-thumb-txt .review-area span::before {content: ''; display: block; background-image: url("/images/common/ico_review.svg"); width: 14px; height: 14px; position: absolute; left: 0; top: 50%; transform: translate(0, -50%); margin-top: 1px;} .hot-thumb-wrapper .hot-thumb .hot-thumb-txt .cart-in {border-radius: 50%; background-color: rgba(255,255,255,0.5); width: 36px; height: 36px; position: absolute; right: 0px; bottom: 0px; display: flex; align-items: center; justify-content: center; border: 1px solid #eee;} .hot-thumb-wrapper .hot-thumb .hot-thumb-txt .cart-in > img {width: 24px; height: 24px;} /*페이지네이션*/ .main-new-swiper .swiper_best_pagination { text-align: center; line-height: 0; margin-top: 0px; } .main-new-swiper .swiper_best_pagination .swiper_best_pagination-bullet { background-color: #D9D9D9; width: 6px; height: 6px; } .main-new-swiper .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 3px; width: 6px; height: 6px; } .main-new-swiper .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet-active { background-color: #FF6B00; width: 16px; height: 6px; border-radius: 10px; } .main-new-swiper .swiper_best_pagination .swiper-pagination-bullet-active { background-color: #FF6B00; width: 16px; height: 6px; border-radius: 10px; } .hot-thumb-wrapper2 { clear: both; } .hot-thumb-wrapper2 .hot-thumb { display: flex; flex-direction: column; justify-content: space-around; margin-bottom: 20px; cursor: pointer; } .hot-thumb-wrapper2 .hot-thumb .hot-thumb-img { } .hot-thumb-wrapper2 .hot-thumb .hot-thumb-img img { width: 100%; border-radius: 8px; } .hot-thumb-wrapper2 .hot-thumb .hot-thumb-txt { } .hot-thumb-wrapper2 .hot-thumb .hot-thumb-txt h4 { font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: -0.21px; margin: 10px 0 15px 0 } .hot-thumb-wrapper2 .hot-thumb .hot-thumb-txt .price-review-box { align-items: center; position: relative; display: flex; } .hot-thumb-wrapper2 .hot-thumb .hot-thumb-txt .price-review-box .price-wrapper { line-height: 1; display: flex; justify-content: space-between; align-items: center; float: left; } .hot-thumb-wrapper2 .hot-thumb .hot-thumb-txt .price-review-box .price-wrapper .right-price { font-size: 14px; } .hot-thumb-wrapper2 .hot-thumb .hot-thumb-txt .price-review-box .price-wrapper .right-price .dc-rate { margin-left: 0; font-size: 14px; font-weight: 700; color: #FF6B00; } .hot-thumb-wrapper2 .hot-thumb .hot-thumb-txt .price-review-box .price-wrapper .left-price { display: flex; align-items: flex-end; justify-content: flex-start; width: 100%; } .hot-thumb-wrapper2 .hot-thumb .hot-thumb-txt .price-review-box .price-wrapper .left-price .price { display: block; font-size: 14px; font-weight: 700; padding-right: 5px; } .hot-thumb-wrapper2 .review-area { padding: 0; } .hot_navi { margin: auto 20px; } .hot_navi .hot_navi_layout { width: 100%; } .hot_navi .hot_navi_layout .hotitem_sort_wrapper { display: flex; align-items: center; justify-content: space-between; } .hot_navi .hot_navi_layout .hotitem_sort_wrapper .hotitem_sort { font-size: 13px; font-weight: 300; padding: 10px 12px; border-radius: 50px; background-color: #f3f3f3; color: #727272; text-align: center; width: calc(100% / 3); /* min-width: 72px; */ font-weight: 400; } .hot_navi .hot_navi_layout .hotitem_sort_wrapper .hotitem_sort + .hotitem_sort { margin-left: 10px; } .hot_navi .hot_navi_layout .hotitem_sort_wrapper .hotitem_sort_wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: flex; box-sizing: border-box; justify-content: center; } .hot_navi .hot_navi_layout .hotitem_sort_wrapper .hotitem_sort.active { background-color: #222; color: #fff; width: auto; padding: 10px 12px; border-radius: 50px; font-size: 13px; width: calc(100% / 3); } .hot_navi .recommend { margin-top: 13px; text-align: right; } .hot_navi .recommend a { font-size: 12px; color: #727272; position: relative; padding-right: 24px; } .hot_navi .recommend a::after { content: ''; display: block; background-image: url("/images/common/btn_refresh_60x60.png"); width: 20px; height: 20px; position: absolute; right: 0; top: 50%; transform: translate(0, -50%); margin-top: 1px; background-size: 20px 20px; } #main-new-section .main-cate-thumb-wrapper { margin-right: 2.2%; } #main-new-section .main-cate-thumb-wrapper .cate-thumb { width: 44%; } /* 메인 상품 2단 출력 CSS */ .main-cate-thumb-wrapper {position: relative; z-index: 1; display: flex; flex-wrap:wrap; overflow:hidden; width:100%; max-width:480px; padding: 0; box-sizing: border-box;} .main-cate-thumb-wrapper .cate-thumb {margin-bottom: 20px; width: 48%; display: flex; flex-direction: column; cursor: pointer;} .main-cate-thumb-wrapper .cate-thumb:nth-child(even) {margin-left: 4%;} .main-cate-thumb-wrapper .cate-thumb .cate-thumb-img {width: 100%; aspect-ratio: 1/1; border-radius: 8px; position: relative;} .main-cate-thumb-wrapper .cate-thumb .cate-thumb-img .cart-in {border-radius: 50%; background-color: rgba(255,255,255,0.5); width: 36px; height: 36px; position: absolute; right: 6px; bottom: 6px; display: flex; align-items: center; justify-content: center;} .main-cate-thumb-wrapper .cate-thumb .cate-thumb-img .cart-in > img {width: 24px; height: 24px;} .main-cate-thumb-wrapper .cate-thumb img {width: 100%; height: 100%; border-radius: 8px;} .main-cate-thumb-wrapper .cate-thumb .close_img {display: flex; justify-content: flex-end;} .main-cate-thumb-wrapper .cate-thumb .close_img img {width: 24px;} .main-cate-thumb-wrapper .cate-thumb .cate-thumb-txt {text-align: left; padding: 0 3px; height: auto; position: relative;} @media screen and (max-width: 480px) { .main-cate-thumb-wrapper .cate-thumb .cate-thumb-txt .prod-title {font-size: 14px;} } @media screen and (max-width: 450px){ .main-cate-thumb-wrapper .cate-thumb .cate-thumb-txt h3 {font-size: 16px; height: 50px; word-break: keep-all; overflow: hidden; text-overflow: ellipsis; white-space: normal; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} .main-cate-thumb-wrapper .cate-thumb .price-wrapper .price {font-size: 14px;} .main-cate-thumb-wrapper .cate-thumb .price-wrapper .dc-rate {font-size: 14px;} .main-cate-thumb-wrapper .cate-thumb .cate-thumb-txt .review-area {font-size: 12px;} } @media screen and (max-width: 480px) { section.hot-wrapper ul.price-range-item li:nth-child(even) {margin-left: 12px;} .hot-thumb-wrapper {margin: 20px 20px 0px 20px;} .hot-thumb-wrapper .hot-thumb .hot-thumb-txt .review-area {font-size: 12px;} .hot-thumb-wrapper .hot-thumb .hot-thumb-txt h4 {font-size: 14px; width: 85%;} .hot-thumb-wrapper .hot-thumb .hot-thumb-txt .price-wrapper .left-price .price {font-weight: 700;} .hot-thumb-wrapper .hot-thumb .hot-thumb-txt .org-price {font-size: 12px;} .hot-thumb-wrapper .hot-thumb .hot-thumb-txt .dc-rate {font-weight: 700;} .hot-thumb-wrapper .hot-thumb .hot-thumb-txt .price-wrapper .price_wrap .right-price {font-size: 14px;} } /* 토스트 팝업 */ .md-modal { display: -moz-box; display: -ms-flexbox; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; width: 100%; opacity: 0; visibility: hidden; z-index: 2900; -webkit-transition-property: opacity, visibility, z-index; transition-property: opacity, visibility, z-index; -webkit-transition-duration: .4s; transition-duration: .4s; -webkit-transition-timing-function: initial; transition-timing-function: initial; } .md-modal.toast { -webkit-box-align: flex-end; -ms-flex-align: flex-end; -webkit-align-items: flex-end; align-items: flex-end; } .md-modal.on { z-index: 9999; visibility: visible; opacity: 1; } .md-modal.on .dimmer { opacity: 1; visibility: visible; } .md-modal .dimmer { content: ""; display: block; position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); -webkit-transition-property: opacity, visibility, z-index; transition-property: opacity, visibility, z-index; -webkit-transition-duration: .2s; transition-duration: .2s; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; -webkit-transform: translateZ(0); transform: translateZ(0); visibility: hidden; opacity: 0; z-index: 0; } .dimmer { content: ""; display: block; position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); -webkit-transition-property: opacity, visibility, z-index; transition-property: opacity, visibility, z-index; -webkit-transition-duration: .3s; transition-duration: .3s; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; -webkit-transform: translateZ(0); transform: translateZ(0); visibility: hidden; opacity: 0; z-index: 0; } .md-content { transform: translate(-50%, 0); display: none; } .md-modal.toast.on .md-content { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; margin: 0 auto; max-width: 480px; background-color: #fff; border-radius: 8px 8px 0 0; height: auto; } .md-content .pop_contents_wrap { padding: 20px; text-align: center; } .md-content .pop_contents_wrap .pop_tit { font-size: 20px; line-height: 1.3; font-weight: 500; color: #222; padding-top: 10px; padding-bottom: 20px; } .md-content .pop_contents_wrap .pop_tit span { color: #FF6B00; font-weight: 700; } .md-content .pop_contents_wrap .pop_img { padding-bottom: 20px; } .md-content .pop_contents_wrap .pop_img img { width: 80%; } .md-content .pop_contents_wrap .pop_txt { font-size: 14px; color: #a5a5a5; padding-bottom: 30px; } .md-content .pop_contents_wrap .btn_app button { width: 100%; padding: 15px; background-color: #FF6B00; border: none; border-radius: 8px; color: #fff; font-size: 18px; font-weight: 700; } .md-modal.banner .bnr-item { overflow: visible; padding-bottom: 0 !important; } .md-modal.toast>.md-content { width: 100%; -webkit-border-bottom-right-radius: 0; -webkit-border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 0; background-clip: padding-box; box-shadow: 0 0 15px rgb(0 0 0 / 30%); -webkit-transform: translate3d(0, 60%, 0); transform: translate3d(0, 60%, 0); -webkit-transition-property: transform, height, opacity; transition-property: transform, height, opacity; -webkit-transition-duration: .3s; transition-duration: .3s; -webkit-transition-timing-function: cubic-bezier(0.25, 0.5, 0.5, 0.9); transition-timing-function: cubic-bezier(0.25, 0.5, 0.5, 0.9); opacity: 0; } .bnr-item { position: relative; } .md-modal.banner .pop_oneday { position: absolute; top: -30px; left: 10px; font-size: 14px; color: #fff; } .md-modal.banner .bnr-item .close-btn { position: absolute; box-sizing: border-box; display: inline-block; top: -26px; width: 20px; height: 20px; right: 20px; background-image: url(/images/common/close_white.svg); background-size: 16px auto; background-position: center; background-repeat: no-repeat; } .snbSwiper { box-sizing: border-box; background: #ffffff; width: 100%; border-bottom: solid 1px #f6f6f6; } .snbSwiper.drop { position: fixed; z-index: 2; animation: dropHeader 0.3s; top: 60px; } .snbSwiper .swiper-slide { width: 33%; } .snbSwiper .swiper-slide > a { display: block; text-align: center; } .snbSwiper .swiper-slide .gnb_list { text-align: center; padding: 16px 5px 8px 5px; box-sizing: border-box; position: relative; display: block; height: 47px; white-space: nowrap; font-size: 16px; line-height: 1em; color: #727272; cursor: pointer; } .snbSwiper .on .gnb_list { color: #222; font-weight: bold; width: 100%; } .snbSwiper .on .gnb_list:after { content: ''; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: #222; } .tab_cateSwiper_wrap.drop { position: fixed; z-index: 2; animation: dropHeader 0.3s; top: 108px; overflow: hidden; margin: 0; width: 100%; max-width: 480px;; background-color: #FFF } @keyframes dropHeader {0% { top: -10rem; } 100% { top: 1; } } .new_icon { position: relative; bottom: 8px; left: -5px; font-size: 13px; color: #FF6B00; font-weight: 500; width: 20px; height: 20px; } .cateSwiper {box-sizing: border-box; background: #ffffff; padding-left: 20px; padding-right: 10px; overflow: hidden;} .cateSwiper .swiper-wrapper {} .cateSwiper .swiper-wrapper .swiper-slide {width: 100%; display: flex; flex: auto;} .cateSwiper .swiper-wrapper .swiper-slide .cate_gnb_list {position: relative; display: inline-block; text-align: center; height: 15px; white-space: nowrap; font-size: 13px; line-height: 13px; padding: 10px 12px; color: #727272; background-color: #f6f6f6; border-radius: 30px; cursor: pointer; display: flex; align-items: center; justify-content: center; margin-right: 5px; min-width: 50px;} .cateSwiper .swiper-wrapper .swiper-slide:last-child .cate_gnb_list {} .cateSwiper .swiper-wrapper .swiper-slide:first-child .cate_gnb_list {} .cateSwiper .swiper-wrapper .swiper-slide.on .cate_gnb_list {color: #fff; background-color: #222;} .cateSwiper .swiper-wrapper .swiper-slide .cate_gnb_list:checked {background-color: red;} @media screen and (max-width: 480px){ /* .cateSwiper .swiper-wrapper .swiper-slide .cate_gnb_list {width: 70%; max-width: 80px;} */ } @media screen and (max-width: 420px){ /* .cateSwiper .swiper-wrapper .swiper-slide .cate_gnb_list {width: 65%; max-width: 80px;} .cateSwiper .swiper-wrapper .swiper-slide {width: 100%; margin-right: 0;} */ } .on .tab_cate_gnb_list { color: #fff; background-color: #222 } .category-wrapper .category { width: calc(100% / 4); } /* .on .cate_gnb_list { color: #fff; background-color: #222; } */ .gnb-cate-thumb-img .re_rank { position: absolute; background: #000; color: #fff; line-height: 24px; width: 25px; height: 25px; top: 0; left: 0; text-align: center; opacity: 0.8; border-radius: 0 0 8px 0; } .gnb-cate-wrapper { padding-top: 0px; } .gnb-section-title-banner-wrap { width: 100%; max-width: 480px; } .gnb-section-title-banner-wrap .gnb-section-title-banner img { width: 100%; } .tab_cateSwiper_wrap { width: 100%; max-width: 480px; } .tab_cateSwiper { box-sizing: border-box; background: #ffffff; width: 94%; margin: 3% 0 0 3%; overflow: hidden; padding-bottom: 3%; border-bottom: solid 1px #eaeaea; } .tab_cateSwiper .swiper-wrapper { width: 24%; } .tab_cateSwiper .swiper-slide { width: 100%; } .swiper-slide .tab_cate_gnb_list { position: relative; display: inline-block; height: 15px; white-space: nowrap; font-size: 13px; line-height: 13px; padding: 10px 12px; color: #727272; background-color: #f6f6f6; border-radius: 30px; width: 80%; max-width: 150px; text-align: center; } .swiper-slide .tab_cate_gnb_list:checked { background-color: red; } @media screen and (max-width: 480px) {.tab_cateSwiper .swiper-slide { margin-right: -5px; } .swiper-slide .tab_cate_gnb_list { width: 60%; max-width: 90px; } } /* GNB product list*/ .gnb-cate-wrapper { margin: 0 20px; padding-top: 20px; } .gnb-cate-wrapper .prod-container { width: 100%; max-width: 480px; } .gnb-cate-wrapper .prod-container .prod-list-wrapper { width: 100%; } .gnb-cate-wrapper .gnb-cate-thumb-wrapper { position: relative; z-index: 1; display: flex; } .gnb-cate-wrapper .gnb-cate-thumb-wrapper .gnb-cate-thumb { width: 48%; display: flex; flex-direction: column; } .gnb-cate-wrapper .gnb-cate-thumb-wrapper .gnb-cate-thumb:nth-child(even) { margin-left: 4%; } .gnb-cate-wrapper .gnb-cate-thumb-wrapper .gnb-cate-thumb img { width: 100%; } .gnb-cate-wrapper .gnb-cate-thumb-wrapper .gnb-cate-thumb .close_img { display: flex; justify-content: flex-end; } .gnb-cate-wrapper .gnb-cate-thumb-wrapper .gnb-cate-thumb .close_img img { width: 24px; } .gnb-cate-wrapper .gnb-cate-thumb-wrapper .gnb-cate-thumb .gnb-cate-thumb-txt { text-align: left; padding: 0 3px; height: 150px; } .gnb-cate-wrapper .gnb-cate-thumb-wrapper .gnb-cate-thumb .gnb-cate-thumb-txt .prod-title { line-height: 1.2; margin: 8px 0 2px 0; height: 2.5em; width: 100%; font-weight: 400; font-size: 18px; white-space: normal; text-align: left; overflow: hidden; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .gnb-cate-thumb-txt .org-price { color: #aeaeae; font-size: 13px; display: block; height: 10px; } .gnb-cate-thumb-txt .price-wrapper { display: inline-block; line-height: 1; display: flex; justify-content: flex-start; align-items: center; position: relative; } .gnb-cate-thumb-txt .price-wrapper .price { display: block; font-size: 18px; margin: 8px 0; font-weight: 700; white-space: nowrap; } .gnb-cate-thumb-txt .price-wrapper .dc-rate { font-size: 18px; font-weight: 700; color: #ff3d00; display: inline-block; position: absolute; right: 5px; } .gnb-cate-thumb-wrapper .gnb-cate-thumb .gnb-cate-thumb-txt .review-area { display: inline-block; color: #a8a8a8; font-size: 13px; } .gnb-cate-thumb-wrapper .gnb-cate-thumb .gnb-cate-thumb-txt .review-area .review-area-wrap { width: auto; background-color: #f5f5f5; border-radius: 5px; padding: 3px; letter-spacing: -0.9px; float: left; margin-right: 5px; } .gnb-cate-thumb-wrapper .gnb-cate-thumb .gnb-cate-thumb-txt .review-area p { float: left; } .gnb-cate-thumb-wrapper .gnb-cate-thumb .gnb-cate-thumb-txt .review-area p:first-child { padding-right: 5px; } .gnb-cate-thumb-wrapper .gnb-cate-thumb .gnb-cate-thumb-txt .review-area p.rate { display: flex; } .gnb-cate-thumb-wrapper .gnb-cate-thumb .gnb-cate-thumb-txt .review-area p em.star { display: inline-block; background-image: url("/images/common/star.png"); width: 15px; height: 15px; background-size: contain; margin: 1px; } .gnb-cate-thumb-wrapper .gnb-cate-thumb .gnb-cate-thumb-txt .review-area .review-area-wrap span { color: #ff3d00; } @media screen and (max-width: 450px) {.gnb-cate-wrapper .gnb-cate-thumb-wrapper .gnb-cate-thumb .gnb-cate-thumb-txt h3 { font-size: 16px; height: 50px; word-break: keep-all; overflow: hidden; text-overflow: ellipsis; white-space: normal; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .gnb-cate-wrapper .gnb-cate-thumb-wrapper .gnb-cate-thumb .gnb-cate-thumb-txt .prod-title { font-size: 14px; } .gnb-cate-thumb-txt .org-price span { font-size: 12px; } .gnb-cate-thumb-txt .price-wrapper .price { font-size: 16px; font-weight: 700; } .gnb-cate-thumb-txt .price-wrapper .dc-rate { font-size: 16px; font-weight: 700; } .gnb-cate-thumb-wrapper .gnb-cate-thumb .gnb-cate-thumb-txt .review-area { font-size: 12px; } } .gnb-cate-wrapper .gnb-section-title-banner { width: 100%; } .gnb-cate-wrapper .gnb-section-title-banner img { width: 100%; } .gnb-cate-wrapper .all-align-wrapper { height: 50px; } .gnb-cate-wrapper .all-align-wrapper .filter_box { position: relative; display: flex; align-items: center; justify-content: space-between; margin: 0 5px; height: 100%; } .gnb-cate-wrapper .all-align-wrapper .filter_box .total-count { display: flex; align-items: center; justify-content: space-between; width: 100%; font-size: .6875rem; color: #929292; } .gnb-cate-wrapper .all-align-wrapper .filter_box .total-count p { font-size: 14px; } .gnb-cate-wrapper .all-align-wrapper .filter_box .total-count .total-count-number { color: #ff3d00; } .gnb-cate-wrapper .all-align-wrapper .filter_box .selectbox.item-filter { width: auto; height: auto; background-color: transparent; border: 0; color: #727272; margin-top: 13px; } .gnb-cate-wrapper .all-align-wrapper .filter_box .selectbox { position: relative; margin-top: 0; z-index: 1; } .gnb-cate-wrapper .all-align-wrapper .filter_box .selectbox.item-filter label { padding: 0; height: auto; line-height: inherit; color: #727272; font-size: 14px; margin-bottom: 0; } .gnb-cate-wrapper .all-align-wrapper .filter_box .selectbox.item-filter select { height: auto; line-height: inherit; padding: 0 10px; cursor: pointer; } .gnb-cate-wrapper .all-align-wrapper .filter_box .selectbox select { display: block; width: 100%; font-family: inherit; font-size: .6875rem; border: 0; opacity: 0; appearance: none; background-color: #fff; } .gnb-cate-wrapper .gnb-cate-thumb-wrapper .gnb-cate-thumb { position: relative; } .gnb-cate-thumb-txt .prod-price-wrap { position: absolute; bottom: 0px; width: 100%; } .gnb-cate-thumb .gnb-cate-thumb-img { position: relative; } .gnb-cate-thumb .gnb-cate-thumb-img .lists_soldout { position: absolute; bottom: 0; left: 0; height: 100%; width: 100%; background-color: rgba(0, 0, 0, 0.32); color: #fff; text-align: center; border-radius: 8px } .gnb-cate-thumb .gnb-cate-thumb-img .lists_soldout .limit-soldout-mark { width: 60%; position: absolute; top: calc(100% /2 - 30%); left: calc(100% /2 - 30%); } .gnb-cate-thumb .gnb-cate-thumb-img .lists_soldout .limit-soldout-mark img { width: 100%; } /* 멤버십 온리 */ .member-only {} .member-only .section-title-wrapper {} .member-only .section-title-wrapper h2 {position: relative; padding-left: 25px; font-size: 12px;} .member-only .section-title-wrapper h2::before {content: ''; position: absolute; top: 50%; transform: translate(0,-50%); left: 0; width: 20px; height: 20px; border-radius: 50%; background-size: 14px; background: #FFF1ED url(/images/membership/m_icon.png) center center no-repeat; background-size: 14px;} .member-only .section-title-wrapper h2 span {background-color: #F5F5F5; padding: 0 4px; display: inline-flex; align-items: center; color: #444; font-size: 14px; font-weight: 400; margin-left: 8px; border-radius: 4px;} .member-only .section-title-wrapper h2 img {margin-right: 3px;} .member-only .cate-thumb-wrapper {position: relative; max-width: 480px; z-index: 1; display: flex; overflow: hidden; padding-left: 20px;} .member-only .cate-thumb-wrapper .cate-thumb {position: relative; width: 150px; cursor: pointer; margin-right: 12px;} .member-only .cate-thumb-wrapper .cate-thumb .cate-thumb-img {height: 150px;} .member-only .cate-thumb-wrapper .cate-thumb .cate-thumb-img > img {width: 150px; margin-right: 10px; border-radius: 8px; object-fit: cover; height: 100%;} .member-only .cate-thumb-wrapper .cate-thumb .cate-thumb-img span {border-radius: 4px; background: linear-gradient(90deg, #FF8A00 0%, #FF6B00 100%); padding: 0 6px; height: 20px; display: flex; align-items: center; justify-content: center; color: #fff; position: absolute; left: 8px; top: 8px; font-size: 12px; font-weight: 400;} .member-only .cate-thumb-wrapper .cate-thumb .cate-thumb-img .cart-in {border-radius: 50%; background-color: rgba(255,255,255,0.5); width: 36px; height: 36px; position: absolute; right: 6px; bottom: 6px; display: flex; align-items: center; justify-content: center;} .member-only .cate-thumb-wrapper .cate-thumb .cate-thumb-img .cart-in > img {width: 24px; height: 24px;} .member-only .cate-thumb-wrapper .cate-thumb .cate-thumb-txt {text-align: left; padding: 0 3px;} .member-only .cate-thumb-wrapper .cate-thumb .cate-thumb-txt .prod-price-wrap {position: absolute; bottom: 0; width: 100%;} .member-only .cate-thumb-wrapper .cate-thumb .member-price-wrapper {color: #338FFF; line-height: 150%; display: flex;} .member-only .cate-thumb-wrapper .cate-thumb .member-price-wrapper .dc-rate {font-size: 11px; font-weight: 500; display: inline-block; min-width: 40px;} .member-only .cate-thumb-wrapper .cate-thumb .member-price-wrapper .price {display: inline-block; font-size: 14px; font-weight: 700; letter-spacing: -0.5px; white-space: nowrap;} .member-only .cate-thumb-wrapper .cate-thumb .cate-thumb-txt .price-wrapper .dc-rate {min-width: 40px; margin-right: inherit;} /* 추석 대량주문 띠배너 */ .chuseok-bn {padding: 0 20px;} .chuseok-bn > a {display: block; width: 100%; height: 100%;} .chuseok-bn > a > img {width: 100%; height: 100%; border-radius: 8px; overflow: hidden;} /*---------------------------------------------------- 스켈레톤 ----------------------------------------------------*/ /* 메인 상품 2단 출력 CSS */ #main-new-section.skeleton .hot-thumb-wrapper { margin: 0 0 0 4%; } #main-new-section.skeleton .main-cate-thumb-wrapper { position: relative; z-index: 1; display: flex; flex-wrap:wrap; overflow:hidden; width:100%; max-width:480px; padding: 0; box-sizing: border-box; } #main-new-section .main-cate-thumb-wrapper .cate-thumb { width: 44%; } #main-new-section.skeleton .main-cate-thumb-wrapper .cate-thumb { margin-bottom: 20px; width: 44%; display: flex; flex-direction: column; cursor: pointer; } #main-new-section.skeleton .main-cate-thumb-wrapper .cate-thumb:nth-child(even) { margin-left: 4%; } #main-new-section.skeleton .main-cate-thumb-wrapper .cate-thumb .cate-thumb-img { background-color: #4c4c4c; animation: pulse 1s infinite ease-in-out; width: 100%; aspect-ratio: 1/1; border-radius: 8px; } #main-new-section.skeleton .main-cate-thumb-wrapper .cate-thumb .close_img { display: flex; justify-content: flex-end; } #main-new-section.skeleton .main-cate-thumb-wrapper .cate-thumb .close_img img { width: 24px; } #main-new-section.skeleton .main-cate-thumb-wrapper .cate-thumb .cate-thumb-txt { text-align: left; padding: 0 3px; height: auto; position: relative; } @media screen and (max-width: 480px) {#main-new-section.skeleton .main-cate-thumb-wrapper .cate-thumb .cate-thumb-txt .prod-title { font-size: 14px; } } @media screen and (max-width: 450px) {#main-new-section.skeleton .main-cate-thumb-wrapper .cate-thumb .cate-thumb-txt h3 { font-size: 16px; height: 50px; word-break: keep-all; overflow: hidden; text-overflow: ellipsis; white-space: normal; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } #main-new-section.skeleton .main-cate-thumb-wrapper .cate-thumb .price-wrapper .price { font-size: 14px; } #main-new-section.skeleton .main-cate-thumb-wrapper .cate-thumb .price-wrapper .dc-rate { font-size: 14px; } #main-new-section.skeleton .main-cate-thumb-wrapper .cate-thumb .cate-thumb-txt .review-area { font-size: 12px; } } @media screen and (max-width: 480px) {#main-new-section.skeleton .hot-thumb-wrapper { margin: 20px 20px 0px 20px; } #main-new-section.skeleton section.hot-wrapper ul.price-range-item li:nth-child(even) { margin-left: 12px; } #main-new-section.skeleton .hot-thumb-wrapper .hot-thumb .hot-thumb-txt .review-area { font-size: 12px; } #main-new-section.skeleton .hot-thumb-wrapper .hot-thumb .hot-thumb-txt h4 { font-size: 14px; } #main-new-section.skeleton .hot-thumb-wrapper .hot-thumb .hot-thumb-txt .price-wrapper .left-price .price { font-weight: 700; } #main-new-section.skeleton .hot-thumb-wrapper .hot-thumb .hot-thumb-txt .org-price { font-size: 12px; } #main-new-section.skeleton .hot-thumb-wrapper .hot-thumb .hot-thumb-txt .dc-rate { font-weight: 700; } #main-new-section.skeleton .hot-thumb-wrapper .hot-thumb .hot-thumb-txt .price-wrapper .price_wrap .right-price { font-size: 14px; } } /* 베스트 / 실시간 HOT 상품 */ section.skeleton.best-hot-now { position: relative; background-position: center center; background-repeat: no-repeat; background-size: cover; color: #fff; padding-bottom: 10px; overflow: hidden; } section.skeleton.best-hot-now::after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); } section.skeleton.best-hot-now .section-title-wrapper { z-index: 1; } section.skeleton.best-hot-now .left_img { border-radius: 8px; width: 95px; background-color: #4c4c4c; animation: pulse 1s infinite ease-in-out; } section.skeleton.best-hot-now .right_info_box .tit { color: #fff; background-color: #4c4c4c; width: 300px; height: 10px; animation: pulse 1s infinite ease-in-out; } section.skeleton.best-hot-now .right_info_box .view-count { color: #fff; font-size: 13px; margin-top: 10px; background-color: #4c4c4c; width: 300px; height: 10px; animation: pulse 1s infinite ease-in-out; } section.skeleton.best-hot-now.best-wrapper .swiper_best_pagination { margin-top: 40px; position: relative; z-index: 1; } section.skeleton.best-hot-now.best-wrapper .swiper_best_pagination .swiper-pagination-bullet { background-color: #fff; opacity: 0.7; } section.skeleton.best-hot-now.best-wrapper .swiper_best_pagination .swiper-pagination-bullet-active { background-color: #fff; width: 24px; opacity: 1; } section.skeleton.best-hot-now.best-wrapper .best-thumb-wrapper { margin-left: 35px; margin-top: 4px; width: 330px; } /*고객님들이 자주 찾는 상품 */ section.skeleton.__reorder_list { position: relative; background-position: center center; background-repeat: no-repeat; background-size: cover; color: #fff; overflow: hidden; min-height: 340px; } section.skeleton.__reorder_list .section-title { color: #b8b8b8; } section.skeleton.__reorder_list .section-title-wrapper p { color: #b8b8b8; } section.skeleton.__reorder_list .cate-thumb-wrapper {padding-left: 20px;} section.skeleton.__reorder_list .cate-thumb + .cate-thumb { margin-left: 12px; } section.skeleton.__reorder_list .cate-thumb-img { border-radius: 8px; width: 150px; background-color: #b8b8b8; animation: pulse 1s infinite ease-in-out; } section.skeleton.__reorder_list .main_more_btn { display: none; } section.skeleton.__reorder_list.best-wrapper .best-thumb-wrapper { margin-left: 35px; margin-top: 4px; width: 330px; } /* 메인 배너 */ section.skeleton { width: auto; position: relative; } section.skeleton .main-swiper { position: relative; overflow: hidden; } section.skeleton .main-swiper .swiper-slide { width: 100%; } section.skeleton .magazine-list { margin: 0 auto; } section.skeleton .magazine-list-item { position: relative; overflow: hidden; } section.skeleton .magazine-list-item .img { background-size: cover; background: #f3f3f3 no-repeat 50% 50%; overflow: hidden; position: relative; animation: pulse 1s infinite ease-in-out; width: 100%; height: 300px; max-height: 300px; } section.skeleton .magazine-list-item .bg { position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; opacity: 0.5; background: linear-gradient(180deg, rgba(255,255,255,0), black); } section.skeleton .magazine-list-item .slide-txt { position: absolute; bottom: 30px; left: 0; color: #fff; padding: 0 20px; } section.skeleton .magazine-list-item .slide-txt p.main-txt { display: block; font-size: 32px; font-weight: 700; margin-bottom: 5px; color: #fff; line-height: 1.5; letter-spacing: -0.75px; overflow: hidden; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } section.skeleton .magazine-list-item .slide-txt span.sub-txt { font-size: 16px; font-weight: 300; letter-spacing: -0.75px; overflow: hidden; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } section.skeleton .magazine-list .swiper-slide.swiper-slide-active { opacity: 1; } section.skeleton .magazine-list .swiper-slide { opacity: 1; transition: transform .3s ease; } section.skeleton .swiper-slide { flex-shrink: 0; width: 100%; height: 100%; position: relative; transition-property: transform; } section.skeleton .main-swiper .main-swiper-pagination { display: inline-block; position: absolute; bottom: 24px; right: 20px; width: 30px; left: auto; color: #fff; z-index: 1; background: rgba(0, 0, 0, 0.40); font-size: 12px; padding: 4px 12px; border-radius: 25px; height: 8px; display: inline-flex; justify-content: center; align-items: center; } section.skeleton .main-swiper .main-swiper-pagination span { margin: 0 2px; } section.skeleton .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after, .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after { font-size: 14px; font-weight: bold; } @keyframes pulse {0% { background-color: #949494; opacity: 0.7; } 50% { background-color: #c5c5c5; opacity: 0.7; } 100% { background-color: #949494; opacity: 0.7; } } @-webkit-keyframes pulse {0% { background-color: #949494; opacity: 0.7; } 50% { background-color: #c5c5c5; opacity: 0.7; } 100% { background-color: #949494; opacity: 0.7; } } .cart-in {display: none !important;} /* 멤버십 한정상품 */ .membership-limited {position: relative; padding-top: 32px;} .membership-limited .bg {background-color: #F95008; width: 100%; min-height: 160px; aspect-ratio: 9 / 4; position: absolute; left: 0; top: 0;} .membership-limited .bg::after {content: ''; position: absolute; top: 20px; right: 14px; width: 96px; height: 103px; border-radius: 50%; background: url(/images/common/monthly_icon.svg) center center no-repeat; background-size: 96px 103px; aspect-ratio: 96 / 103;} .membership-limited .section-title-wrapper {margin: 0 20px 16px 20px; color: #fff;} .membership-limited .section-title-wrapper h2 {width: 90%; font-size: 15px; font-weight: 400; letter-spacing: -0.225px;} .membership-limited .section-title-wrapper p {width: 90%; font-size: 19px; font-weight: 700; letter-spacing: -0.285px;} .membership-limited .membership-limited-slide {} .membership-limited .membership-limited-slide ul {} .membership-limited .membership-limited-slide ul li { cursor: pointer; } .membership-limited .membership-limited-slide ul li .membership-limited-img {border-radius: 8px; overflow: hidden; position: relative;} .membership-limited .membership-limited-slide ul li .membership-limited-img > img {width: 100%; overflow: hidden; aspect-ratio: 13/7; object-fit: cover;} .membership-limited .membership-limited-slide ul li .membership-limited-img .buy-only-one {font-size: 12px; font-weight: 500; color: #fff; padding: 0 6px; background: rgba(0, 0, 0, 0.70); border-radius: 4px; position: absolute; top: 8px; left: 10px; line-height: 150%;} .membership-limited .membership-limited-slide ul li .membership-limited-txt {} .membership-limited .membership-limited-slide ul li .membership-limited-txt .prod-title {font-size: 14px; line-height: 1.3; font-weight: 400; white-space: normal; overflow: hidden; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 150%; margin-top: 8px;} .membership-limited .membership-limited-slide ul li .membership-limited-txt .price-wrapper {line-height: 1; display: flex; justify-content: space-between; align-items: flex-start; margin-top: 12px;} .membership-limited .membership-limited-slide ul li .membership-limited-txt .price-wrapper .price_wrap {display: flex; justify-content: flex-start; align-items: center; float:left;} .membership-limited .membership-limited-slide ul li .membership-limited-txt .price-wrapper .price_wrap .right-price {} .membership-limited .membership-limited-slide ul li .membership-limited-txt .price-wrapper .price_wrap .right-price .dc-rate {font-size: 18px; font-weight: 700; color: #FF6B00; word-break: keep-all;} .membership-limited .membership-limited-slide ul li .membership-limited-txt .price-wrapper .price_wrap .left-price {display: flex; align-items: flex-end; justify-content: flex-start; width: 100%;} .membership-limited .membership-limited-slide ul li .membership-limited-txt .price-wrapper .price_wrap .left-price .price {display: block; font-size: 18px; font-weight: 700; padding-right: 5px;} .membership-limited .membership-limited-slide ul li .membership-limited-txt .price-wrapper .review-area {width: 100%; display: inline-block; color: #a8a8a8; padding: 0; font-size: 12px; margin-top: 0;} .membership-limited .membership-limited-slide ul li .membership-limited-txt .badge {display: flex; gap: 4px; margin-top: 12px; flex-wrap: wrap;} .membership-limited .membership-limited-slide ul li .membership-limited-txt .badge > div {font-size: 12px; color: #555; font-weight: 400; line-height: 135%; letter-spacing: -0.18px; border: 1px solid #FFB4A4; background-color: #fff; display: flex; box-sizing: border-box; border-radius: 20px; position: relative; padding: 4px 6px;} .membership-limited .membership-limited-slide ul li .membership-limited-txt .badge > div span {word-break: keep-all; flex-shrink: 0;} .membership-limited .membership-limited-slide ul li .membership-limited-txt .badge > div > span.member-limited {position: relative; padding-left: 23px;} .membership-limited .membership-limited-slide ul li .membership-limited-txt .badge > div > span.member-limited::before {content: ''; position: absolute; top: 50%; transform: translate(0, -50%); left: 0; width: 20px; height: 20px; border-radius: 50%; background: #FFF1ED url(/images/membership/m_icon.png) center center no-repeat; background-size: 14px; margin-top: 1px;} .membership-limited .membership-limited-slide ul li .membership-limited-txt .badge > div > span.free-shipping {position: relative; padding-left: 18px;} .membership-limited .membership-limited-slide ul li .membership-limited-txt .badge > div > span.free-shipping::before {content: '🚚'; position: absolute; top: 50%; transform: translate(0, -50%); left: 0; width: 12px; height: 16px;} .membership-limited .membership-limited-slide ul li .membership-limited-txt .badge > div > span.reserve-double {position: relative; padding-left: 20px;} .membership-limited .membership-limited-slide ul li .membership-limited-txt .badge > div > span.reserve-double::before {content: ''; position: absolute; top: 50%; transform: translate(0, -50%); left: 0; width: 17px; height: 12.75px; background: url(/images/common/benefit_04.png) center center no-repeat; background-size: 17px 12.75px; margin-top: 1px;} .membership-limited .membership-limited-slide .membership-limited-pagination {display: flex; justify-content: center; padding: 24px 0; width: auto;} .membership-limited .membership-limited-more {width: calc(100% - 40px); margin: 0 auto; border: 1px solid #D9D9D9; border-radius: 4px; padding: 10px 0; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 400; line-height: 150%; letter-spacing: -0.21px;} .membership-limited .membership-limited-more span {position: relative; padding-right: 20px;} .membership-limited .membership-limited-more span::after {content: ''; background: url(/images/common/btn_arrow_right.svg) no-repeat; width: 16px; height: 16px; background-size: 16px; position: absolute; right: 0; top: 50%; transform: translateY(-50%); margin-top: 1px;} .membership-limited .membership-limited-more.count1 { margin-top: 24px; } .membership-limited-slide.count1 { padding: 0 30px; } /* 1개일때 */ /* 240604 행운출석 토스트팝업 */ #toastpop-layer-mask {position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 5000; background-color: rgba(0, 0, 0, 0.6); display: none; z-index: 5001} #toastpop-layer-mask.on {display: block; animation: show-up-mask 1s ease 0s 1 normal forwards;} .toastpop .container .toastpop-up {position: fixed; width: 100%; max-width: 480px; bottom: -100%;z-index: 5001; left: 50%; transform: translate(-50%, 0);} .toastpop .container.on .toastpop-up.on {bottom: 0px; z-index: 5001;} .toastpop .container .toastpop-up.close {bottom: -100%; z-index: 5001;transition: bottom 1300ms;transition-delay:100ms;} .toastpop .container .toastpop-up .content {display: block;} .toastpop .container .toastpop-up.on .content {opacity: 1; margin: 0 auto; max-width: 480px; height: auto;} .toastpop .container .toastpop-up .content .swiper-wrapper .content-wrap {height: 100%; position: relative; text-align: center;width: 100%; opacity: 1; transition: transform .3s ease; flex-shrink: 0; width: 100%; height: 100%; position: relative; transition-property: transform;} .toastpop .content .content-wrap > img {width: 100%; border-top-right-radius: 12px; border-top-left-radius: 12px; overflow: hidden; display: block;} .toastpop .btn-area {position: absolute; top: -20px; left: 0; width: 100%; display: flex; justify-content: space-between;} .toastpop .btn-area > a {color: #fff; font-size: 14px; font-weight: 500; line-height: 150%;} .toastpop .btn-area .today-close {margin-left: 16px;} .toastpop .btn-area .close {margin-right: 16px;} .toastpop .swiper_toast_pagination { text-align: center; line-height: 0; margin-bottom: 5px; /* margin-bottom: 48px; */ } .main-toast-swiper { position: relative; overflow: hidden; } /* 헤더 공통 */ .main.header-wrapper {position: fixed; width: 100%; max-width: 480px; top: 0; z-index: 5001;} .main.header-wrapper .navbar {display: block;} .main.header-wrapper .navbar .menu-wrapper {display: flex; align-items: center; justify-content: space-between; position: relative; max-width: 480px; height: 48px; padding: 0 20px; box-sizing: border-box;} .main.header-wrapper .navbar .menu-wrapper .back { align-items: center; z-index: 9;} .main.header-wrapper .navbar .menu-wrapper .btn_back { width: 24px; height: 24px;} .main.header-wrapper .navbar .menu-wrapper .btn_back img {} .main.header-wrapper .navbar .menu-wrapper .btn_home img { width: 24px; height: 24px;} .main.header-wrapper .navbar .menu-wrapper .logo-wrapper {display: flex;} .main.header-wrapper .navbar .menu-wrapper .logo-wrapper .logo {} .main.header-wrapper .navbar .menu-wrapper .logo-wrapper img { width: 84px; height: 100%; display: inline-block; cursor: pointer; background-position: center center;} .main.header-wrapper .navbar .menu-wrapper .title-wrapper { display: flex; justify-content: center; align-items: center; margin: auto 0; width: 80%;} .main.header-wrapper .navbar .menu-wrapper .title-wrapper a { color: #000; text-decoration-line: none; font-size: 16px;} .main.header-wrapper .navbar .menu-wrapper .btn_right { display: flex; justify-content: flex-end; align-items: baseline; z-index: 9;} .main.header-wrapper .navbar .menu-wrapper .btn_right .btn_search { width: 24px; height: 24px; margin-right: 12px;} .main.header-wrapper .navbar .menu-wrapper .btn_right .btn_cart { width: 24px; height: 24px; position: relative;} .main.header-wrapper .navbar .menu-wrapper .btn_right .btn_cart img { width: 24px; margin-top: 0;} .main.header-wrapper .navbar .menu-wrapper .btn_right .btn_home { width: 24px; height: 24px; margin-right: 8px;} .main.header-wrapper .navbar .menu-wrapper .btn_cart .cart_badge { font-weight: 500; position: absolute; top: -9px; float: right; right: -10px; box-sizing: border-box; line-height: 18.5px; border-radius: 50%; background: #FF6B00; color: #fff; width: 20px; height: 20px; font-size: 12px; text-align: center; letter-spacing: -0.5px;} .main.header-wrapper .navbar .menu-wrapper .title-wrapper .title { color: #000; text-decoration-line: none; font-size: 20px; text-align: center;} .main.header-wrapper .navbar .menu-wrapper .main-site-switch-radio {display:none;} /* 메인 헤더(스탠다드) */ .main.header-wrapper.standard .navbar .menu-wrapper {border-bottom: solid 1px #f6f6f6; background-color: #fff; transition: all 0.5s;} .main.header-wrapper.standard .toggles {position: relative; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; color: white; height: 26px; background-color: #eee; border-radius: 25px;} .main.header-wrapper.standard .toggles label {display: flex; -webkit-box-pack: center; align-items: center; justify-content: center; width: 100%; z-index: 1; color: #727272; font-size: 14px; font-weight: 400; font-stretch: normal; font-style: normal; line-height: 100%; letter-spacing: normal; padding: 0px 10px 0px 10px; word-break: keep-all; letter-spacing: -0.28px; height: 26px;} .main.header-wrapper.standard .toggles label.standard {color: #fff; padding: 0 10px 0px 10px; border-radius: 25px;} .main.header-wrapper.standard .toggles label.standard.on {background-color: #FF6B00;} .main.header-wrapper.standard .toggles label.standard.on span {color: #fff;} .main.header-wrapper.standard .toggles label input {opacity: 0; width: 0px; height: 0px; border: 0;} /* .header-wrapper.standard .toggles > span {position: absolute; inset: 0px; width: 70px; height: 26px; border-radius: 25px; background-color: #FF6B00;} */ @media screen and (max-width: 400px){ .main.header-wrapper.standard .toggles {border-radius: 25px;} .main.header-wrapper.standard .toggles label {font-size: 13px;} .main.header-wrapper.standard .toggles > span {width: 64px; border-radius: 25px;} } /* 메인 헤더(멤버십) */ .main.header-wrapper.membership .navbar .menu-wrapper {border-bottom: 1px solid #FF6B00; background-color: #FF6B00; transition: all 0.5s;} .main.header-wrapper.membership .navbar .header-switch-wrap.on {border: 2px dashed #000; padding: 3px; border-radius: 25px;} .main.header-wrapper.membership .toggles {position: relative; display: flex; -webkit-box-pack: center; align-items: center; justify-content: center; -webkit-box-align: center; align-items: center; color: white; height: 26px; background-color: #F95412; border-radius: 25px;} .main.header-wrapper.membership .toggles label {display: flex; -webkit-box-pack: center; align-items: center; justify-content: center; width: 100%; z-index: 1; color: #FF6B00; font-size: 14px; font-weight: 400; font-stretch: normal; font-style: normal; line-height: 100%; letter-spacing: normal; padding: 0px 10px 0px 10px; word-break: keep-all; letter-spacing: -0.28px; height: 26px;} .main.header-wrapper.membership .toggles label.membership {color: #fff; background-color: #fff; padding: 0 10px 0px 10px; border-radius: 25px;} .main.header-wrapper.membership .toggles label.membership.on {background-color: #fff;} .main.header-wrapper.membership .toggles label > span {color: #FF6B00;} .main.header-wrapper.membership .toggles label > input {opacity: 0; width: 0px; height: 0px; border: 0;} .main.header-wrapper.membership .toggles label.standard span {color: #fff;} @media screen and (max-width: 400px){ .main.header-wrapper.membership .toggles {border-radius: 25px;} .main.header-wrapper.membership .toggles label {font-size: 13px;} .main.header-wrapper.membership .toggles > span {width: 55px; border-radius: 25px;} } /* 멤버십 베스트 후기 */ .main-best-review .section-title-wrapper {position: relative; margin: 0px 20px 10px 20px; line-height: 130%; word-break: keep-all;} .main-best-review .section-title-wrapper > span {font-size: 14px;font-weight: 400; color: #FF6B00; } .main-best-review .section-title-wrapper > p {width: 90%; font-size: 18px;font-weight: 700; letter-spacing: -0.27px;margin-top:2px;} .main-best-review .section-title-wrapper > h2 {font-size: 14px; font-weight: 400; color: #FF6B00;} .main-best-review .section-title-wrapper > a {position: absolute; right: 0; top: 50%; width: 24px; height: 24px; transform: translate(0,-50%);} .main-best-review .section-title-wrapper > a img {width: 100%;} .main-best-review {width: 100%; margin-top: 32px;} .main-best-review .container {margin-bottom:10px;} .main-best-review .best-review ul {display: flex; flex-direction: column; gap: 12px; overflow: hidden;} .main-best-review .best-review ul li {border-radius: 8px; background: #FFF;} .main-best-review .best-review ul li a {display: flex; flex-direction: column; width: 100%; height: 100%;} .main-best-review .best-review ul li a .top {display: flex; padding: 12px; gap: 12px; align-items: center; background-color: #F5F5F5; border-radius: 5px; overflow: hidden;} .main-best-review .best-review ul li a .top .img {width: 26%; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden;} .main-best-review .best-review ul li a .top .img > img {width: 100%;height: 100%;object-fit: cover;} .main-best-review .best-review ul li a .top .txt {width: calc(100% - 88px - 12px);} .main-best-review .best-review ul li a .top .txt .star {margin-bottom: 4px; line-height: 150%;} .main-best-review .best-review ul li a .top .txt .star .score {margin-left: -1px;} .main-best-review .best-review ul li a .top .txt .star .score i {color: #ffcc00; padding: 0;} .main-best-review .best-review ul li a .top .txt .star .score svg {color: #ffcc00; padding: 0;} .main-best-review .best-review ul li a .top .txt > p {white-space: normal; overflow: hidden; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: #555; font-size: clamp(9.33px, 3.33vw, 14px); font-weight: 400; line-height: 140%; letter-spacing: -0.21px; margin-bottom: 2px;} .main-best-review .best-review ul li a .top .txt > span {color: #949494; font-weight: 400; font-size: 12px; line-height: 150%; letter-spacing: -0.18px; position: relative; padding-right: 25px;} .main-best-review .best-review ul li a .top .txt > .membership::after {content: ''; position: absolute; top: 50%; transform: translate(0, -50%); right: 0; width: 20px; height: 20px; border-radius: 50%; background: #FFF1ED url(https://img.monfood.co.kr/images/membership/m_icon.png) center center no-repeat; background-size: 14px; margin-top: 1px;} .main-best-review .best-review ul li a .bottom {display: flex; padding: 8px 12px; gap: 12px; align-items: center; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px;} .main-best-review .best-review ul li a .bottom .img {width: 10%; aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden;} .main-best-review .best-review ul li a .bottom .img > img {display: block; width: 100%; height: 100%;} .main-best-review .best-review ul li a .bottom .txt {width: calc(100% - 36px - 12px);} .main-best-review .best-review ul li a .bottom .txt > p {font-size: clamp(9.33px, 3.61vw, 14px); color: #555; font-weight: 500; line-height: 150%; letter-spacing: -0.195px; white-space: normal; overflow: hidden; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;} .main-best-review .review-thumb {border: 1px solid #eee;border-radius: 8px;} .main-best-review .img {width: 150px; aspect-ratio: 1 / 1; border-top-left-radius: 8px; border-top-right-radius: 8px; overflow: hidden;} .main-best-review .img > img {width: 100%;height: 100%;object-fit: cover;} .main-best-review .best-review .star {margin: 10px 0 6px 0;} .main-best-review .best-review .star .score {margin-left: -1px;} .main-best-review .best-review .star .score i {color: #ffcc00; padding: 0;} .main-best-review .best-review .star .score svg {color: #ffcc00; padding: 0;} .main-best-review .best-review .review-thumb .txt {padding:0px 10px 0px 10px;} .main-best-review .best-review .review-thumb .txt .re_content {white-space: normal; overflow: hidden; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: #222; font-size: 14px; font-weight: 400; line-height: 140%; letter-spacing: -0.21px; margin-bottom: 2px; min-height:40px;} .main-best-review .best-review .review-thumb .txt > span {color: #949494; font-weight: 400; font-size: 13px; line-height: 150%; letter-spacing: -0.18px; position: relative; padding-right: 20px;white-space: normal; overflow: hidden; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;margin-bottom:6px;} .main-best-review .best-review .review-thumb .txt > .membership::after {content: ''; position: absolute; top: 50%; transform: translate(0, -50%); right: 0; width: 20px; height: 20px; border-radius: 50%; background: #FFF1ED url(https://img.monfood.co.kr/images/membership/m_icon.png) center center no-repeat; background-size: 14px; margin-top: 1px;} .main-best-review .best-review .bottom {display: flex; padding: 8px 6px; gap: 6px; align-items: center; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; height:42px; background-color:#f5f5f5;} .main-best-review .best-review .bottom .img {width: 30%; aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden;} .main-best-review .best-review .bottom .img > img {display: block; width: 100%; height: 100%;} .main-best-review .best-review .bottom .txt2 {width: calc(100% - 6px - 12px);} .main-best-review .best-review .bottom .txt2 > p {font-size: 11px; color: #555; font-weight: 400; line-height: 150%; letter-spacing: -0.195px; white-space: normal; overflow: hidden; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} .main-best-review .btn-refresh { position:absolute; right:0; top:50%; cursor:pointer;background-color: #fff; border: 1px solid #dddddd; border-radius: 5px; width: 84px; height: 24px; display: block; font-size: 13px; color: #727272; font-weight: 400; display: flex; align-items: center; justify-content: center; gap: 4px; bottom:3px;} .main-best-review .btn-refresh img { width: 20px; height: 20px; margin-top: 2px; } .main-best-review .btn-refresh img.loading{ animation: spin 0.8s linear 3; /* infinite */ -webkit-animation: spin 0.8s linear 3; /* infinite */ } @keyframes spin { to { -webkit-transform: rotate(360deg); } } @-webkit-keyframes spin { to { -webkit-transform: rotate(360deg); } } /* 헤더 말풍선 */ .header-wrapper .bubble {display: none;} .header-wrapper .bubble.on {position: absolute; width: 100%; left: 50%; transform: translateX(-50%); top: calc(100% + 25px); display: flex; flex-direction: column; align-items: center;} .header-wrapper .hand-img {position: absolute; transform: translate(-20%, -37px); z-index: 5001; will-change: transform; animation: move-hand 1.2s ease-in-out infinite;} .header-wrapper .hand-img > img {width: 35px; height: auto;} .header-wrapper .bubble .bubble-wrap {position: relative; background-color: #fff; padding: 12px 16px; border-radius: 8px; box-sizing: border-box;} .header-wrapper .bubble .bubble-wrap::after {content: ''; position: absolute; bottom: -15px; left: 60%; border-width: 15px 15px 0; border-style: solid; border-color: #ffffff transparent; display: block; width: 0; top: 16px; top: -14px; bottom: auto; border-width: 7px 15px 7px 0; border-color: transparent #ffffff; rotate: 90deg;} .header-wrapper .bubble .bubble-wrap > p {color: #555; font-size: 14px; line-height: 150%; letter-spacing: -0.21px; font-weight: 400;} .header-wrapper .bubble .bubble-wrap > p > span {font-weight: 700; color: #FF6B00;} .header-wrapper .bubble > a {display: flex; align-items: center; gap: 2px; color: #fff; line-height: 150%; font-size: 14px; font-weight: 500; margin-top: 4px;} .header-wrapper .bubble > a > img {display: block; width: 20px; height: 20px; padding: 4px; box-sizing: border-box;} @keyframes move-hand { 0% {transform: translate(-20%, -37px);} 50% {transform: translate(-30%, -45px);} 100% {transform: translate(-20%, -37px);} } /* 추석 대량주문 띠배너 */ .chuseok-bn {padding: 0 20px; margin-bottom: 32px; } .chuseok-bn > a {display: block; width: 100%; height: 100%;} .chuseok-bn > a > img {width: 100%; height: 100%; border-radius: 8px; overflow: hidden;} /* 추석 카테고리 영역 */ .chuseok-cate {background: url(https://img.monfood.co.kr/images/common/category_bg.jpg) no-repeat; display: flex; background-size: cover; align-items: center; justify-content: space-around; padding: 15px 12px; border-radius: 8px; margin: 0 20px; gap: 12px;} .chuseok-cate .img {width: 30.5%; aspect-ratio: 1 / 1; max-width1r: 120px; min-width: 80px; display: flex; border-radius: 50%; overflow: hidden;} .chuseok-cate .img img {width: 100%; height: 100%;} .chuseok-cate .list {width: 60%;} .chuseok-cate .list ul {display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 5px;} .chuseok-cate .list ul li {position: relative; width: calc(100% / 3); display: flex; justify-content: center;} .chuseok-cate .list ul li a {display: block; position: relative; text-align: center;} .chuseok-cate .list ul li a .menu-img {content: ''; display: block; width: 60px; height: 60px; margin: 0 auto 5px auto; background-size: 100% 100%; border-radius: 4px; background-repeat: no-repeat; background-position: center center; background-color: #fff;} .chuseok-cate .list ul li:nth-of-type(1) a .menu-img {background-image: url(https://img.monfood.co.kr/images/common/chuseok_01.png); background-color: #fff;} .chuseok-cate .list ul li:nth-of-type(2) a .menu-img {background-image: url(https://img.monfood.co.kr/images/common/chuseok_02.png); background-color: #fff;} .chuseok-cate .list ul li:nth-of-type(3) a .menu-img {background-image: url(https://img.monfood.co.kr/images/common/chuseok_03.png); background-color: #fff;} .chuseok-cate .list ul li a .menu-name {font-size: 12px; font-weight: 400; letter-spacing: -0.18px; color: #fff;} @media screen and (max-width: 380px){ .chuseok-cate .list {width: 65%;} } .swiper_review_pagination { text-align: center; line-height: 0; margin-top: 20px; /* margin-bottom: 48px; */ } .swiper_review_pagination .swiper_best_pagination-bullet { background-color: #D9D9D9; width: 6px; height: 6px; } /* 이달의 행사 */ .main-monthevent .section-title-wrapper {display: flex; justify-content: space-between; align-items: center;} .main-monthevent .btn-detail {font-size: 15px; cursor:pointer; background: #fff; border: 1px solid #ff6b00; border-radius: 5px; color: #ff6b00;} .main-monthevent .monthevent-swiper {border-top: 1px solid #eee; overflow: visible} .main-monthevent .monthevent-swiper .swiper-slide {display:flex; flex-wrap: wrap; } .main-monthevent .monthevent-swiper .swiper-slide > img {box-sizing: border-box; display:block; width: 50%; border-bottom: 1px solid #eee; border-right: 1px solid #eee;} .main-monthevent .monthevent-swiper .swiper-slide.main > img:nth-child(1), .main-monthevent .monthevent-swiper .swiper-slide.main > img:nth-child(2) { border: none; width: 100%; } .main-monthevent .monthevent-swiper .swiper-slide.main > img:nth-child(even) { border-right: none; } .main-monthevent .monthevent-swiper .swiper-monevent-pagination-wrap {position: absolute; top: -47px; padding: 10px 0 0 120px; display:flex; justify-content: flex-start; align-items: center} .main-monthevent .monthevent-swiper .swiper-monthevent-pagination {width: 50px; text-align: center; color: #666; font-size: 15px;} .main-monthevent .monthevent-swiper .swiper-monthevent-pagination .swiper-pagination-current {color: #ff6b00; font-weight: 700;} .main-monthevent .monthevent-swiper .swiper-monevent-pagination-wrap .swiper-monthevent-button-prev {background: url('https://img.monfood.co.kr/images/common_icon/ico_arrow_prev_gray.svg') no-repeat center center/ 16px 16px; border:1px solid #ddd; border-radius: 50%; width: 24px; height: 24px; } .main-monthevent .monthevent-swiper .swiper-monevent-pagination-wrap .swiper-monthevent-button-next {background: url('https://img.monfood.co.kr/images/common_icon/ico_arrow_next_gray.svg') no-repeat center center/ 16px 16px;border:1px solid #ddd; border-radius: 50%; width: 24px; height: 24px; } .main-monthevent .monthevent-swiper > .swiper-monthevent-button-next {position: absolute; right: -25px; top: 43%; border-radius: 50%; z-index: 500; background: #fff url('https://img.monfood.co.kr/images/common/btn_arrow_right.svg') no-repeat 5px center/ 20px 20px; width: 50px; height: 50px; opacity: 0.5; }