/* 상품상세 페이지 css */ .clear {clear: both;} .clear:after {content:' '; display:block; clear: both;} /*상품 css*/ .new-image-slider {width:100%; margin-top: 48px; position: relative;} .new-image-slider .swiper-slide {overflow: hidden;} .new-image-slider .swiper-slide img {width:100% !important;} .new-image-slider .swiper-slide video {width:100% !important;} .new-image-slider-swiper-pagination {text-align: center; bottom: 25px; position: absolute; z-index: 1;} .new-image-slider .swiper-pagination-bullet-active {background-color: #FF6B00 !important; width: 10px; height: 10px;} .new-image-slider .swiper-pagination-bullet {width: 10px; height: 10px;} /* 일시품절 마크 */ .new-image-slider .swiper-wrapper .swiper-slide .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;} .new-image-slider .swiper-wrapper .swiper-slide .group-by-badge .limit-soldout-mark {width: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center;} .new-image-slider .swiper-wrapper .swiper-slide .group-by-badge .limit-soldout-mark img {width: 100%;} .new-image-slider .swiper-wrapper .swiper-slide .group-by-badge .limit-soldout-mark span {font-size: 18px; display: block; width: 180px; margin-top: 10px;} /* 야간시장 마크 */ .new-image-slider .swiper-wrapper .swiper-slide .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;} .new-image-slider .swiper-wrapper .swiper-slide .group-by-badge .night-market-mark {width: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center;} .new-image-slider .swiper-wrapper .swiper-slide .group-by-badge .night-market-mark img {width: 100%;} .new-image-slider .swiper-wrapper .swiper-slide .group-by-badge .night-market-mark span {font-size: 18px; display: block; width: 180px; margin-top: 10px; word-break: keep-all; line-height: 150%;} /* 품절임박 마크 */ .new-image-slider .soldout-imminent-mark {width: 70%; position: absolute; top: 20px; left: 50%; transform: translate(-50%, 0); display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.50); padding: 10px 16px; border-radius: 4px;z-index: 2} .new-image-slider .soldout-imminent-mark span {font-size: 16px; display: block; color: #fff; position: relative; padding-left: 30px; line-height: normal;} .new-image-slider .soldout-imminent-mark span::before {content: ''; display: block; background-image: url("https://img.monfood.co.kr/images/common/ico_soldout.svg"); width: 24px; height: 24px; position: absolute; left: 0; top: 50%; transform: translate(0, -50%);} .new-image-slider .soldout-imminent-mark span b {font-weight: 500;} .prod-info-wrapper {} .prod-info-wrapper .prod-thumb-swiper {} .new-image-slider .swiper-pagination-bullet-active {background-color: #FF6B00 !important; width: 10px; height: 10px;} .new-image-slider .swiper-pagination-bullet {width: 10px; height: 10px;} .prod-info-wrapper .image-wrapper {} .prod-info-wrapper .image-wrapper img {width: 100%; vertical-align: middle;} .prod-info-wrapper .buy_number {padding: 10px 20px; background-color: #ffede7; color: #2b0705; font-size: 12px; border-radius: 8px; text-align: center; margin-left: -5px;} .prod-info-wrapper .buy_number b {font-weight: 500; padding: 0 2px; color: #FF6B00;} .prod-info-wrapper .buy_number .score {float: right; color: #FFAC0F; font-weight: 500; display: flex; justify-content: center;} .prod-info-wrapper .buy_number .score i {color: #ffc833; font-size: 14px; margin-right: 4px;} .prod-info-wrapper .buy_number .score svg {color: #ffc833; font-size: 14px; margin-right: 4px;} .prod-info-wrapper .buy_number .score p {color: #FF6B00;} .prod-info-wrapper .info-wrapper {position: relative; border: 0; margin-bottom: 0; padding: 0 20px; border-bottom: 10px solid #f6f6f6;} .prod-info-wrapper .panel-heading {padding: 15px 0 0 !important;} .prod-info-wrapper .panel-heading .detail-titles {} .prod-info-wrapper .panel-heading .detail-titles .title-wrap {display: flex; justify-content: space-between; align-items: flex-start;} .prod-info-wrapper .panel-heading .detail-titles .title-wrap h3 {width: 100%;} .prod-info-wrapper .panel-heading .detail-titles .title-wrap .share_icon {width: 20px; cursor: pointer; right: 15px} @media screen and (max-width: 450px){ .prod-info-wrapper .panel-heading .detail-titles .title-wrap .share_icon {width: 20px; padding: 5px;} } .prod-info-wrapper .panel-heading .detail-titles .title-wrap .share_icon img {width: 100%;} .prod-info-wrapper .panel-heading .title {font-weight: 500; display: block; line-height: 1.5; font-size: 19px; white-space: normal; text-align: left; word-break: keep-all; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-bottom: 10px;} @media screen and (max-width: 450px){ .prod-info-wrapper .panel-heading .title {width: 100%;} } .prod-info-wrapper .panel-heading .price-wrapper {position: relative; position: relative; display: flex; justify-content: space-between; align-items: center; width: 100%;} .prod-info-wrapper .panel-heading .re-price-wrapper {display: flex; align-items: baseline;} .prod-info-wrapper .price-wrapper .dc-price {display: inline-block; color: #bbb; font-size: 14px;} .prod-info-wrapper .price-wrapper .discount {color: #FF6B00; font-size: 22px; font-weight: 700; margin-right: 8px; letter-spacing: -0.5px;} .prod-info-wrapper .price-wrapper .price {font-size: 22px; font-weight: 700; color: #000; margin-right: 8px;} /* 240530 신규회원 혜택가 및 쿠폰받기 */ .prod-info-wrapper .panel-heading .new-member {display: flex; justify-content: space-between; margin-top: 10px;} .prod-info-wrapper .panel-heading .new-member .price-wrap {display: flex; align-items: center; color: #338FFF;} .prod-info-wrapper .panel-heading .new-member .price-wrap .price {font-size: 22px; font-weight: 700;} .prod-info-wrapper .panel-heading .new-member .price-wrap span:nth-of-type(2) {font-size: 12px; font-weight: 400; margin-left: 4px;} .prod-info-wrapper .panel-heading .new-member .new-member-coupon {background-color: #338FFF; color: #fff; width: auto; height: 26px; padding: 3px 8px; border-radius: 4px; cursor: pointer; border: 0; display: flex; align-items: center; justify-content: center;} .prod-info-wrapper .panel-heading .new-member .new-member-coupon > span {font-size: 12px; line-height: 150%; font-weight: 500;} .prod-info-wrapper .panel-heading .new-member .new-member-coupon > img {width: 12px; height: 12px; margin-left: 4px; padding-right: 0;} /* 240612 멤버십 특가 가격 */ .prod-info-wrapper .panel-heading .member-price {display: flex; justify-content: space-between; /*margin-top: 10px;*/} .prod-info-wrapper .panel-heading .member-price .price-wrap {display: flex; align-items: center; color: #338FFF;} .prod-info-wrapper .panel-heading .member-price .price-wrap .price {font-size: 22px; font-weight: 700; margin-right: 8px; color: #338FFF; } .prod-info-wrapper .panel-heading .member-price .price-wrap span:nth-of-type(2) {font-size: 12px; font-weight: 400;} .prod-info-wrapper .panel-heading .member-price .price-wrap .link { cursor: pointer; } /* 240530 신규회원 혜택가 및 쿠폰받기 토스트팝업 */ #new-member-coupon-layer-mask {position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 5000; background-color: rgba(0, 0, 0, 0.5); display: none;} #new-member-coupon-layer-mask.on {display: block;} .new-member-coupon-bottom .container .new-member-coupon-popup {position: fixed; width: 100%; max-width: 480px; bottom: -100%; transition: bottom 0.5s; z-index: 100; background-color: #fff; border-top-right-radius: 16px; border-top-left-radius: 16px; overflow: hidden;} .new-member-coupon-bottom .container.on .new-member-coupon-popup.on {bottom: 0; z-index: 5001; top: auto; height: auto; left: 50%; transform: translateX(-50%); border: 0;} .new-member-coupon-bottom .container .new-member-coupon-popup .content {display: block; max-height: 60vh; overflow: auto;} .new-member-coupon-bottom .container .new-member-coupon-popup.on .content {opacity: 1; margin: 0 auto; max-width: 480px; height: 100%; width: 100%;} .new-member-coupon-bottom .container .new-member-coupon-popup .content .content-wrap {background-color: #fff; position: relative; padding: 32px 20px 20px 20px; height: 100%; position: relative; display: flex; flex-direction: column; align-items: center; overflow: hidden;} .new-member-coupon-bottom .container .new-member-coupon-popup .content .content-wrap > em {display: block; font-size: 16px; font-weight: 500; line-height: 150%; margin-bottom: 12px;} .new-member-coupon-bottom .container .new-member-coupon-popup .content .content-wrap > p {font-size: 13px; color: #666; font-weight: 400; margin-top: 12px;} .new-member-coupon-bottom .container .new-member-coupon-popup .content .content-wrap .btn-area {width: 100%; margin-top: 28px;} .new-member-coupon-bottom .container .new-member-coupon-popup .content .content-wrap .btn-area button {background-color: #FF6B00; height: 48px; font-size: 16px; color: #fff; width: 100%; border: 0; border-radius: 5px; font-weight: 700;} .new-member-coupon-bottom .container .new-member-coupon-popup .content .content-wrap a.close2 {position: absolute; right: 15px; top: 15px;} .new-member-coupon-bottom .container .new-member-coupon-popup .content .content-wrap a.close2 span {display: inline-block; background: url(https://img.monfood.co.kr/images/common/btn_close_gray.png) no-repeat; width: 16px; height: 16px; background-size: 16px; text-indent: -9999px;} .new-member-coupon-popup .sns_login {display: block; width: 100%;} .new-member-coupon-popup .sns_login .kakao {} .new-member-coupon-popup .sns_login .kakao a {display: flex; background-color: #FDE500; border-radius: 6px; position: relative; height: 48px;} .new-member-coupon-popup .sns_login .kakao a .kakao-logo {height: auto; max-width: 30px;} .new-member-coupon-popup .sns_login .kakao a .login-text {width: 100%; display: flex; flex: 1; align-items: center; justify-content: center;} .new-member-coupon-popup .sns_login .kakao a p {font-size: clamp(1rem, 4vw, 1.07rem); font-weight: 500; letter-spacing: -0.315px; margin-left: 5px;} .new-member-coupon-popup .coupon_box_wrap {background-color: #fff; display: flex; justify-content: space-between; align-items: center; padding: 18px 32px; border-radius: 8px; box-shadow: 2px 0px 8px 2px rgb(1 1 1 / 7%); border: 1px solid #FF6B00; position: relative; width: 100%; max-width: 300px; box-sizing: border-box;} .new-member-coupon-popup .coupon_box_wrap::after {content: ''; position: absolute; left: -1px; top: 40%; border: 1px solid #FF6B00; width: 15px; height: 30px; border-radius: 0 15px 15px 0; background-color: #fff; border-left: 1px solid #fff; z-index: 1;} .new-member-coupon-popup .coupon_box_wrap::before {content: ''; position: absolute; left: -5px; top: 40%; border: 1px solid #fff; width: 15px; height: 30px; border-radius: 0 15px 15px 0; background-color: #fff; border-left: 1px solid #fff;} .new-member-coupon-popup .coupon_box_wrap .cou_left::after {content: ''; position: absolute; right: -1px; top: 40%; border: 1px solid #FF6B00; width: 15px; height: 30px; border-radius: 15px 0 0 15px; background-color: #fff; border-right: 1px solid #fff; z-index: 1;} .new-member-coupon-popup .coupon_box_wrap .cou_left::before {content: ''; position: absolute; right: -20px; top: 40%; width: 30px; height: 30px; border-radius: 15px 0 0 15px; background-color: #fff; border-right: 1px solid #fff;} .new-member-coupon-popup .coupon_box_wrap:last-child {margin-bottom: 0px;} .new-member-coupon-popup .coupon_box_wrap .cou_left {width: 100%;} .new-member-coupon-popup .coupon_box_wrap .cou_left .cou_tit {font-size: 14px; padding-bottom: 8px;} .new-member-coupon-popup .coupon_box_wrap .cou_left .cou_mon {font-size: 26px; font-weight: 700; margin-bottom: 16px;} .new-member-coupon-popup .coupon_box_wrap .cou_left .cou_txt {font-size: 13px; color: #FF6B00; border-top: 1px dashed #FDBD8E; width: 100%; padding-top: 12px; line-height: 140%;} .new-member-coupon-popup .coupon_box_wrap .cou_right {position: absolute; right: -30px; top: 20px;} .new-member-coupon-popup .coupon_box_wrap .cou_right img {width: 45%; cursor: pointer;} /* 쿠폰 다운 완료됫을때 */ .new-member-coupon-popup .coupon_box_wrap.disabled {border: 1px solid #eee; background-color: #FBFBFB; color: #a4a4a4; box-shadow: none;} .new-member-coupon-popup .coupon_box_wrap.disabled::after {content: ''; position: absolute; left: -1px; bottom: 36px; border: 1px solid #eee; width: 15px; height: 30px; border-radius: 0 15px 15px 0; background-color: #fff; border-left: 1px solid #fff; z-index: 1;} .new-member-coupon-popup .coupon_box_wrap.disabled::before {content: ''; position: absolute; left: -5px; bottom: 36px; border: 1px solid #fff; width: 15px; height: 30px; border-radius: 0 15px 15px 0; background-color: #fff; border-left: 1px solid #fff;} .new-member-coupon-popup .coupon_box_wrap .cou_left.disabled::after {content: ''; position: absolute; right: -1px; bottom: 36px; border: 1px solid #eee; width: 15px; height: 30px; border-radius: 15px 0 0 15px; background-color: #fff; border-right: 1px solid #fff;} .new-member-coupon-popup .coupon_box_wrap .cou_left.disabled::before {content: ''; position: absolute; right: -20px; bottom: 36px; width: 30px; height: 30px; border-radius: 15px 0 0 15px; background-color: #fff; border-right: 1px solid #fff;} .new-member-coupon-popup .coupon_box_wrap .cou_left.disabled .cou_txt {border-top: 1px dashed #ddd; color: #a4a4a4;} .prod-info-wrapper .panel-heading .benefit-wrap {display: flex; justify-content: space-between; align-items: center; margin-top: 16px; min-height: 28px;} .prod-info-wrapper .panel-heading .benefit-wrap .benefit_box {display: flex; justify-content: flex-start; align-items: center; position: relative;} .prod-info-wrapper .panel-heading .benefit-wrap .benefit_box p {font-size: 14px; letter-spacing: -0.21px;} .prod-info-wrapper .panel-heading .benefit-wrap .benefit_box .bene_img {width: 17px; height: 15px; padding-right: 10px;} .prod-info-wrapper .panel-heading .benefit-wrap .benefit_box .bene_img img {width: 100%;} .prod-info-wrapper .panel-heading .benefit-wrap .benefit_box .share_icon {position: absolute; right: 0; bottom: 0;} .prod-info-wrapper .panel-heading .benefit-wrap .benefit_box .share_icon .btn-wrap {width: 24px; height: 24px;} .prod-info-wrapper .panel-heading .benefit-wrap .benefit_info {background-color: #eee; padding: 6px; border-radius: 5px;} .prod-info-wrapper .panel-heading .benefit-wrap .benefit_info > div {font-size: 12px;} .prod-info-wrapper .panel-heading .benefit-wrap .night-push-agree {font-size: 12px; color: #0094FF;} .prod-info-wrapper .panel-heading .benefit-wrap .night-push-agree > p {padding-left: 21px; position: relative;} .prod-info-wrapper .panel-heading .benefit-wrap .night-push-agree > p::before {content: ''; display: block; background-image: url("https://img.monfood.co.kr/images/common/night_agree_ico.gif"); width: 16px; height: 16px; position: absolute; left: 0; top: 50%; transform: translate(0, -50%); background-size: 16px;} .prod-info-wrapper .panel-heading .bene-txt {color: #FF6B00; font-size: 14px; border: solid 1px #FF6B00; border-radius: 50px; padding: 5px; margin-bottom: 20px; text-align: center; justify-content: center; display: flex; font-weight: 500;} .prod-info-wrapper .panel-heading .price-wrapper .share_icon {cursor: pointer; min-width: 50px; } .prod-info-wrapper .panel-heading .price-wrapper .share_icon .btn-wrap {justify-content: right; align-items: center; display: flex;} .prod-info-wrapper .panel-heading .price-wrapper .share_icon .btn-wrap img {width: 24px; height: 24px;} .prod-info-wrapper .panel-heading .price-wrapper .share_icon .btn-wrap span {letter-spacing: -0.21px; font-size: 14px; font-weight: 400; background-color: #eee; border-radius: 4px; padding: 6px 8px;} /* 야간 수신동의 레이어 팝업 */ #night-push-agree-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;} #night-push-agree-layer-mask.on {display: block; animation: show-up-mask 1s ease 0s 1 normal forwards;} .night-push-agree-popup {position: fixed; left: 50%; top: 50%; width: 400px; max-width: 90vw; max-height: 90vh; transform: translate(-50%,-50%); border: 1px solid transparent; border-radius: 10px; overflow: hidden; z-index: 5000; box-sizing: border-box; display: none;} .night-push-agree-popup.on {display: block;} .night-push-agree-popup .body {height: 100%; font-family: noto sans kr;} .night-push-agree-popup .body .wrapper {text-align: center; display: flex; flex-direction: column; align-items: center; background-color: #fff; padding: 20px;} .night-push-agree-popup .body .wrapper .close2 {position: absolute; right: 15px; top: 15px;} .night-push-agree-popup .body .wrapper .close2 span {display: inline-block; background: url(https://img.monfood.co.kr/images/common/btn_close_gray.png) no-repeat; width: 16px; height: 16px; background-size: 16px; text-indent: -9999px;} .night-push-agree-popup .body .wrapper .box {display: flex; gap: 10px; align-items: center; justify-content: center;} .night-push-agree-popup .body .wrapper .box > img {width: 45%;} .night-push-agree-popup .body .wrapper .box .txt1 {text-align: left; line-height: 140%; word-break: keep-all;} .night-push-agree-popup .body .wrapper .box .txt1 em {font-size: 17px; font-weight: 700; line-height: 150%;} .night-push-agree-popup .body .wrapper .box .txt1 em span {color: #FF6B00;} .night-push-agree-popup .body .wrapper .box .txt1 p {color: #555;} .night-push-agree-popup .body .wrapper .txt2 {font-size: 12px; color: #727272; margin: 10px 0 28px 0;} .night-push-agree-popup .body .wrapper .btn-area {display: flex; width: 100%;} .night-push-agree-popup .body .wrapper .btn-area a.close {height: 48px; width: 100%; background-color: #FF6B00; color: #fff; font-size: 16px; font-weight: 700; border-radius: 5px; display: flex; align-items: center; justify-content: center;} .night-push-agree-popup .body .wrapper .checkbox-container {margin: 28px 0 0 0; background: #fff; width: 100%; color: #727272; font-size: 13px; line-height: 150%; font-weight: 500; margin-top: 16px; cursor: pointer; box-sizing: border-box; padding: 0; } .night-push-agree-popup .body .wrapper .checkbox-container .checkbox-content { display: flex; align-items: baseline; cursor: pointer; justify-content: center; box-sizing: border-box; } .night-push-agree-popup .body .wrapper .checkbox-container input[type="checkbox"] { display: none; } .night-push-agree-popup .body .wrapper .checkbox-container input[type="checkbox"] + label { display: flex; align-items: center; cursor: pointer; position: relative; border: 1px solid #D9D9D9; box-sizing: border-box; background-color: #fff; border-radius: 50px; justify-content: center; width: 100%; padding: 6px 0;} .night-push-agree-popup .body .wrapper .checkbox-container input[type="checkbox"] + label.on {border: 1px solid #FF6B00;} .night-push-agree-popup .body .wrapper .checkbox-container input[type="checkbox"] + label .checkmark { display: inline-block; width: 16px; height: 16px; background-repeat: no-repeat; background-position: center center; margin-right: 5px; position: static;} .night-push-agree-popup .body .wrapper .checkbox-container input[type="checkbox"] + label .checkmark { background-image: url('https://img.monfood.co.kr/images/nightmarket/ico_check.svg'); border: none; } .night-push-agree-popup .body .wrapper .checkbox-container input[type="checkbox"]:checked + label .checkmark { background-image: url('https://img.monfood.co.kr/images/nightmarket/ico_check_active.svg'); } .night-push-agree-popup .body .wrapper .checkbox-container input[type="checkbox"] + label .checkbox-content p { margin: 0; } .night-push-agree-popup .body .wrapper .checkbox-container input[type="checkbox"] + label.on .checkbox-content p {color: #FF6B00;} /* 공유하기 */ .share_icon .bubble {position: absolute; bottom: -30px; right: 0; background: rgba(0, 0, 0, 0.65); color: #fff; font-size: 12px; border-radius: 5px; padding: 6px 10px 7px 10px; display: flex; align-items: center; z-index: 1;} .share_icon .bubble:after {content: ''; display: block; position: absolute; top: -28%; right: 14%; margin: 0 auto; width: 0; height: 0; border-top: solid 7px rgba(0, 0, 0, 0.65); border-left: solid 6px transparent; border-right: solid 6px transparent; transform: rotate(180deg);} .share_icon .bubble > span > span {color: #FF6B00; font-weight: 700;} .share_icon .bubble a.bubble-close {background: url(https://img.monfood.co.kr/images/common/btn_close_white.png) 0 0 no-repeat; width: 9px; height: 9px; background-size: 9px; margin-left: 3px;} /* 공유하기 토스트 팝업 */ #share-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;} #share-layer-mask.on {display: block; animation: show-up-mask 1s ease 0s 1 normal forwards;} .share_icon .container .share-popup {position: fixed; width: 100%; max-width: 480px; bottom: -100%; transition: bottom 0.5s; z-index: 5001; background-color: #fff; left: 50%; transform: translate(-50%, 0);} .share_icon .container .share-popup .content {display: block;} .share_icon .container .share-popup.on .content {opacity: 1; margin: 0 auto; max-width: 480px; height: auto;} .share_icon .container .share-popup .content .content-wrap {background-color: #fff; position: relative; padding: 28px 20px 20px 20px;} .share_icon .container .share-popup .content .content-wrap {height: 100%;} .share_icon .container .share-popup .content .content-wrap {position: relative; background-color: #fff; text-align: center;} .share_icon .container .share-popup .content .content-wrap a.close {background: url(https://img.monfood.co.kr/images/common/btn_close.png) 0 0 no-repeat; width: 13px; height: 13px; background-size: 13px; position: absolute; top: 15px; right: 15px;} .share_icon .container.on .share-popup.on {bottom: 0px; z-index: 5001;} .share-popup {border-top-right-radius: 16px; border-top-left-radius: 16px; overflow: hidden;} .share-popup .content .content-wrap em {font-size: 14px; font-weight: 400; color: #338FFF; display: block; text-align: center; margin-bottom: 5px; letter-spacing: -0.24px; line-height: 150%;} .share-popup .content .content-wrap > p {font-size: 18px; font-weight: 500; line-height: 150%;} .share-popup .content .content-wrap > img {width: 30%; margin: 10px 0; min-width: 126px;} .share-popup .content .content-wrap .nomal-share {background-color: #F5F5F5; border-radius: 8px; padding: 16px 0;} .share-popup .content .content-wrap .nomal-share .share_icon_wrap {display: flex; align-items: center; justify-content: center;} .share-popup .content .content-wrap .nomal-share .share_icon_wrap .share_icon {display: flex;flex-direction: column; align-items: center; padding: 0% 7% 0% 7%;} .share-popup .content .content-wrap .nomal-share .share_icon_wrap .share_icon > div {width: 50px; height: 50px; background-color: #F5F5F5; display: flex; align-items: center; justify-content: center; border-radius: 50%; overflow: hidden;} .share-popup .content .content-wrap .nomal-share .share_icon_wrap .share_icon:nth-of-type(2) > div {border: 1px solid #CCC;} .share-popup .content .content-wrap .nomal-share .share_icon_wrap .share_icon > div > span {font-weight: 700; font-size: 13px;} .share-popup .content .content-wrap .nomal-share .share_icon_wrap .share_icon img {width: 50px; height: auto;} .share-popup .content .content-wrap .nomal-share .share_icon_wrap .share_icon > p {font-size: 12px; margin-top: 10px; color: #555;} .prod-info-wrapper .panel-heading button {border: solid 1px #ebebeb; background-color: #fff; color: #000; width: 50%; height: 40px; border-radius: 5px; font-size: 15px; display: flex; justify-content: center; align-items: center; vertical-align: middle;} .prod-info-wrapper .panel-heading button:first-child {margin-right: 10px;} .prod-info-wrapper .panel-heading button img {width: 21px; height: 20px; padding-right: 5px;} .prod-info-wrapper .panel-heading .item-info-wrapper {font-size: 14px; border-radius: 5px; padding: 15px 9px 20px 10px; margin: 15px 0px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #f6f6f6;} .prod-info-wrapper .panel-heading .item-info-wrapper .pro_btn {background-color: #fff; border-radius: 5px; font-weight: 400; font-size: 14px; position: relative;} .prod-info-wrapper .panel-heading .item-info-wrapper div h4 {padding-right: 10px; width: 30%; overflow: hidden; white-space: normal; line-height: 1.4; text-align: left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: #727272;} .prod-info-wrapper .panel-heading .item-info-wrapper div span {color: #222; width: 70%; float: left; overflow: hidden; white-space: normal; line-height: 1.4; text-align: left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; padding-left: 3px;} .prod-info-wrapper .panel-heading .item-info-wrapper .item-info-more {display: flex; align-items: center; justify-content: center; color: #727272; cursor: pointer;} /*구매후기 css*/ .review-swiper {padding: 20px 20px 32px 20px;} .review-swiper h5 {font-size: 18px; font-weight: 700; letter-spacing: -0.27px; margin-bottom: 15px;} .review-swiper .slide-rev-list-wrapper {position: relative; display : flex;} .review-swiper .slide-rev-list-wrapper .prod-review {width: 320px; border: solid 1px #eaeaea; background-color: #fff; padding: 16px; box-sizing: border-box; display: flex;} .review-swiper .slide-rev-list-wrapper .prod-review .review-heading {} .review-swiper .slide-rev-list-wrapper .prod-review .review-heading .score i {color: #ffc833; font-size: 14px;} .review-swiper .slide-rev-list-wrapper .prod-review .review-heading .score svg {color: #ffc833; font-size: 14px;} .review-swiper .slide-rev-list-wrapper .prod-review .review-heading .review-desc {width: 100%; font-size: 13px; overflow: hidden; text-overflow: ellipsis; word-break: break-word; font-weight: 400; color: #727272; font-size: 13px; white-space: normal; overflow: hidden; text-align: left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;} .review-swiper .slide-rev-list-wrapper .prod-review .review-heading .info {font-size: 12px; color: #9e9e9e; letter-spacing: 0;} .review-swiper .slide-rev-list-wrapper .prod-review .review-body {width: 70px; height: 70px; border-radius: 8px; float: left;} .review-swiper .slide-rev-list-wrapper .prod-review .review-body .review-img-body img {width: 100%; height: 70px; border-radius: 8px;} .review_txt_list {padding-top: 20px;} .review_txt_list li {border-top: 1px solid #eee; box-sizing: border-box; padding: 16px 0;} .container_80 {box-sizing: border-box; padding: 0 5%;} .review_opt_txt {font-size: 12px; color: #999; margin-top: 5px; display: inline-block;} .review_txt_wrap li .poiont_wrap {width: 100%; display: flex; justify-content: flex-start; flex-direction: column; line-height: 150%;} .review_txt_wrap li .poiont_wrap:after {content: ''; display: block; clear: both;} .review_txt_wrap li .poiont_wrap .review_star_report {display: flex; justify-content: space-between; line-height: 150%;} .review_txt_wrap li .poiont_wrap .left_point {font-size: 0; margin-left: -2px;} .review_txt_wrap li .poiont_wrap .left_point.like01 {color: #ffcc00;} .review_txt_wrap li .poiont_wrap .left_point .c-rating-star__icon {font-size: 14px; padding-left: 0;} .review_txt_wrap li .poiont_wrap .review_star_report .right_report {} .review_txt_wrap li .poiont_wrap .review_star_report .right_report button {background: none; border: none; color: #949494; font-size: 12px; padding: 0;} .review_txt_wrap li .poiont_wrap .review_name_date {display: flex; justify-content: space-between; line-height: 150%;} .review_txt_wrap li .poiont_wrap .review_name_date .left_name {margin-right: 5%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;} .review_txt_wrap li .poiont_wrap .review_name_date .left_name span {color: #727272; font-size: 13px; position: relative; padding-right: 25px;} .review_txt_wrap li .poiont_wrap .review_name_date .left_name span.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;} .review_txt_wrap li .poiont_wrap .review_name_date .right_date {} .review_txt_wrap li .poiont_wrap .review_name_date .right_date span {color: #888; font-size: 12px;} .review_txt_wrap li .poiont_wrap .review_name_date .right_date .date:after {content: ''; position: absolute; width: 1px; height: 10px; background: #bdbdbd; top: 4px; right: -1px;} .review_txt_wrap li .txt {font-size: 14px; color: #222; margin: 8px 0; line-height: 150%;} .review_txt_wrap li .img_area {width: 100%; margin-top: 10px; margin-top: 10px; font-size: 0;} .review_txt_wrap li .img_area > div {width: 23%; display: inline-block; padding-bottom: 23%; margin-right: 2%; background-size: cover; border: 1px solid #eee;} .review_txt_wrap li .img_area > div:last-child {margin-right: 0;} .review_txt_wrap li .aid {color: #666; font-size: 13px; margin-top: 11px; display: flex; align-items: center; justify-content: space-between;} /* 추천이 없을때 (카운트X) */ .review_txt_wrap li .aid a.aid_icon_nocount {display: flex; align-items: center; justify-content: center; border: 1px solid #ccc; border-radius: 50px; height: 26px; padding: 0 8px; box-sizing: border-box;} .review_txt_wrap li .aid a.aid_icon_nocount span {color: #949494; font-size: 12px; line-height: 24px; position: relative; padding-left: 16px;} .review_txt_wrap li .aid a.aid_icon_nocount span::before {content: ''; background: url(https://img.monfood.co.kr/images/review/aid_icon.svg) center center no-repeat; background-size: 16px; width: 16px; height: 16px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);} /* 추천이 있을때 (아이콘O) */ .review_txt_wrap li .aid a.aid_icon_count {display: flex; align-items: center; justify-content: center; border: 1px solid #ccc; border-radius: 50px; height: 26px; padding: 0 8px; box-sizing: border-box;} .review_txt_wrap li .aid a.aid_icon_count span {color: #949494; font-size: 12px; line-height: 25px; position: relative; padding-left: 20px;} .review_txt_wrap li .aid a.aid_icon_count span::before {content: ''; background: url(https://img.monfood.co.kr/images/review/aid_icon.svg) center center no-repeat; background-size: 16px; width: 16px; height: 16px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);} .review_txt_wrap li .aid a.aid_icon_count.active {border: 1px solid #FF8159; border-radius: 50px; height: 26px; padding: 0 8px; box-sizing: border-box;} .review_txt_wrap li .aid a.aid_icon_count.active span {color: #FF8159; font-size: 12px; line-height: 25px;} .review_txt_wrap li .aid a.aid_icon_count.active span::before {content: ''; background: url(https://img.monfood.co.kr/images/review/aid_icon_active.svg) center center no-repeat; background-size: 16px; width: 16px; height: 16px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);} /* 추천이 999 이상일때 (아이콘O) */ .review_txt_wrap li .aid a.aid_icon_limit {display: flex; align-items: center; justify-content: center; border: 1px solid #ccc; border-radius: 50px; height: 26px; padding: 0 8px; box-sizing: border-box;} .review_txt_wrap li .aid a.aid_icon_limit span {color: #949494; font-size: 12px; line-height: 25px; position: relative; padding-left: 20px;} .review_txt_wrap li .aid a.aid_icon_limit span::before {content: ''; background: url(https://img.monfood.co.kr/images/review/aid_icon.svg) center center no-repeat; background-size: 16px; width: 16px; height: 16px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);} .review_txt_wrap li .aid a.aid_icon_limit.active {border: 1px solid #ccc; border-radius: 50px; height: 26px; padding: 0 8px; box-sizing: border-box;} .review_txt_wrap li .aid a.aid_icon_limit.active span {color: #949494; font-size: 12px; line-height: 25px;} .review_txt_wrap li .aid a.aid_icon_limit.active span::before {content: ''; background: url(https://img.monfood.co.kr/images/review/aid_icon_active.svg) center center no-repeat; background-size: 16px; width: 16px; height: 16px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);} .review_txt_wrap li .review-img {overflow: hidden; margin-top: 10px;} .review_txt_wrap li .review-img .review-img-list {display: flex;} .review_txt_wrap li .review-img .review-img-list .go_image_detail {position: relative; -webkit-box-flex: 1; flex: 1; max-width: calc(100% / 3 - 5px); padding-top: calc(100% / 3 - 5px); overflow: hidden;} .review_txt_wrap li .review-img .review-img-list .go_image_detail + .go_image_detail {margin-left: 10px;} .review_txt_wrap li .review-img .review-img-list .go_image_detail a {position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; -webkit-box-pack: center; justify-content: center; overflow: hidden; background: #e0e0e0; text-decoration: none; color: #222; border-radius: 8px;} .review_txt_wrap li .review-img .review-img-list .go_image_detail a img {display: block; width: 100%; object-fit: cover;} /* 베스트 구매후기 */ .best-review {} /* .best-review .swiper-slide {margin-right: 20px;} */ .best-review .swiper-slide .with_item_wrap {display: flex;} .best-review .swiper-slide .with_item_wrap .with_item_box {display: flex; padding: 12px; box-sizing: border-box; border: 1px solid #D9D9D9; border-radius: 5px; align-items: center;} /* .best-review .swiper-slide .with_item_wrap .with_item_box + .with_item_box {margin-top: 12px;} */ .best-review .swiper-slide .with_item_wrap .with_item_box .best-review-img {position: relative; flex: 1; max-width: calc(30% - 10px); padding-top: calc(30% - 10px); overflow: hidden;} .best-review .swiper-slide .with_item_wrap .with_item_box .best-review-img > .best-review-img-box {position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; overflow: hidden;} .best-review .swiper-slide .with_item_wrap .with_item_box .best-review-img > .best-review-img-box video, .best-review .swiper-slide .with_item_wrap .with_item_box .best-review-img > .best-review-img-box img {object-fit: cover; border-radius: 8px; overflow: hidden;} .best-review .swiper-slide .with_item_wrap .with_item_box .best-review-txt {width: 70%; margin-left: 15px;} .best-review .swiper-slide .with_item_wrap .with_item_box .best-review-txt span.score {margin-left: -1px;} .best-review .swiper-slide .with_item_wrap .with_item_box .best-review-txt span.score i {color: #ffcc00; padding: 0;} .best-review .swiper-slide .with_item_wrap .with_item_box .best-review-txt span.score svg {color: #ffcc00; padding: 0;} .best-review .swiper-slide .with_item_wrap .with_item_box .best-review-txt p {font-size: 12px; color: #555; white-space: normal; overflow: hidden; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin: 7px 0; line-height: 1.5;} .best-review .swiper-slide .with_item_wrap .with_item_box .best-review-txt .best-review-user {color: #949494; font-size: 12px;} .best-review .swiper-slide .with_item_wrap .with_item_box .best-review-txt .best-review-user span.left_name {color: #949494; font-size: 12px; position: relative; } .best-review .swiper-slide .with_item_wrap .with_item_box .best-review-txt .best-review-user span.membership {padding-right: 20px;} .best-review .swiper-slide .with_item_wrap .with_item_box .best-review-txt .best-review-user span.membership::after { content: ''; position: absolute; top: 50%; transform: translate(0, -50%); right: 0; width: 18px; height: 18px; border-radius: 50%; background: #FFF1ED url(https://img.monfood.co.kr/images/membership/m_icon.png) center center no-repeat; background-size: 11px; margin-top: 1px;} .best-review .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet-active {background-color: #FF6B00;} /* 240709 코멘트 배너 */ .comment-bn {overflow: hidden; margin: 10px 20px 30px; box-sizing: border-box; border-radius: 8px;} .comment-bn > div {background-color: #F5F5F5; display: flex; gap: 10px; align-items: center; height: 88px;} .comment-bn > div .img {aspect-ratio: 36 / 25; overflow: hidden; height: 100%; display: flex; align-items: center; justify-content: center; flex-shrink: 0;} .comment-bn > div .img > img {width: 100%; height: 100%; object-fit: cover; clip-path: circle(70% at 40% 50%);} .comment-bn > div .txt {margin-right: 10px;} .comment-bn > div .txt > p {line-height: 150%; font-size: clamp(12px, 2.91vw, 14px); letter-spacing: -0.18px;} .comment-bn > div .txt > p strong {font-weight: 700;} @media screen and (max-width: 400px){ .comment-bn > div .img {aspect-ratio: 36 / 30;} .comment-bn > div .img > img {clip-path: circle(66% at 38% 50%);} } /* 신고하기 버튼 */ .review_txt_wrap li .right_report {display: flex; justify-content: flex-end; align-items: center;} .review_txt_wrap li .right_report button {background: none; border: none; color: #bdbdbd; font-size: 11px;} /* 01_tab 상세정보(상세이미지) */ /* 탭.css */ .prod-tab-wrapper {border-top: 10px solid #f6f6f6;} .prod-tab-wrapper .panel-body img {max-width: 100%;} .prod-tab-wrapper .panel-body video {width: 100%;} .btn-more-view {bottom: 0; padding: 10px 20px 15px; width: 100%; font-size: 11px; text-align: center; background: #fff; box-sizing: border-box;} .btn-more-view .btn-border {width: 100%; border: none; border-radius: 8px; background-color: #ffece6; font-family: "Noto Sans KR", sans-serif;} .btn-more-view span {display: inline-block; padding: 13px 0px 10px 0; font-size: 14px; color: #FF6B00;} /*check*/ .btn-more-view span:after {display: none;} .tabs {margin-top: 50px; padding-bottom: 40px; background-color: #ffffff; width: 100%; margin: 0 auto;} /* 탭 스타일 */ .tab_item {width: calc(100% / 3); height: 50px; border-bottom: 1px solid #eaeaea; background-color: #ffffff; font-size: 14px; font-weight: 500; text-align: center; color: #141414;float: left; text-align: center; transition: all 0.2s ease; position: relative;display: flex; align-items: center; justify-items: center; cursor: pointer;} .tab_item div {width: 100%; display: flex; flex-direction: row-reverse; align-items: center; justify-content: center; height: 100%; padding-bottom: 0px;} /* .tab_item div span:first-child {padding-bottom: 2px;} */ .tab_item.on {border-bottom: solid 3px #FF6B00; color: #141414;} /* 라디오 버튼 UI삭제*/ input[name="tab_item"] {display: none;} /* 탭 컨텐츠 스타일 */ .tab_content {display: none; clear: both; min-width: 100%; overflow: hidden; position: relative;} /* 선택 된 탭 콘텐츠를 표시 */ #all:checked ~ #all_content, #programming:checked ~ #programming_content, #design:checked ~ #design_content {display: block;} /* 선택된 탭 스타일 */ .prod-tab-wrapper .tabs .tab_item .count {background-color: #FF6B00; border-radius: 14px; height: 14px; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0; display: flex; align-items: center; justify-content: center; padding: 2px 5px;} .prod-tab-wrapper .tabs .tab_item .count > span {} .prod-tab-wrapper .tabs .tab_item .count.empty {background-color: #bbb;} /*카운트가 0일 경우*/ .prod-tab-wrapper .tabs .tab_item .non_count {background-color: #727272; top: 1px; left: 44%; padding: 0 5px; border-radius: 12px; height: 16px; line-height: 16px; color: #fff; font-size: 9px; font-weight: 700; letter-spacing: 0;} .expand {min-height:1200px; max-height: 2000px; overflow: hidden;} /* 02_tab 구매후기 */ .review_wrap {width: 100%; box-sizing: border-box; padding: 24px 20px;} .review_wrap h7 {font-size: 14px; font-weight: 500;} .review_wrap h7 span {float: right; padding-right: 5%; font-weight: 400; font-size: 15px; color: #727272;} .review_swiper {overflow: hidden; padding-right: 5%; padding-top: 15px;} .swiper-wrapper {position: relative; width: 100%; height: 100%; z-index: 1; display: flex; transition-property: transform; box-sizing: content-box;} .swiper-slide {background-position: center; background-size: cover; height: 100%; position: relative; transition-property: transform; flex-shrink: 0;} .review_wrap img {max-width: 100%;} .review_wrap .add_product_item:last-child:before {position: absolute; display: block; content: '';top: 0; left: 0; bottom: 0; right: 0; z-index: 9; background: url("/image/common/plus_w.png") rgba(0,0,0,.6) no-repeat center center;} .review_txt_wrap {width: 100%; box-sizing: border-box;} .review_txt_wrap h8 {font-size: 14px; font-weight: 500;} .review_txt_wrap .selectbox.item-filter {width: auto; height: auto; background-color: transparent; border: 0; color: #727272; float: right; padding-right: 3%;} .review_txt_wrap .selectbox.item-filter label {padding: 0; height: auto; line-height: inherit; color: #727272; font-size: 14px; margin-bottom: 0;} .review_txt_wrap .selectbox.item-filter select {height: auto; line-height: inherit; padding: 0 10px; cursor: pointer;} .selectbox select {display: block; width: 100%; font-family: inherit; font-size: .6875rem; border: 0; opacity: 0; appearance: none; background-color: #fff;} /* 추천 평점 */ .product_detail_recommend_area {border-bottom: 1px solid #eee; padding: 24px 0 24px 0;} .product_detail_recommend_area .star_area {display: flex; justify-content: center; align-items: center;} .product_detail_recommend_area .star_area img {} .product_detail_recommend_area .star_area p {color: #333; font-weight: 700; margin-left: 5px;} .product_detail_recommend_area .star_area p em.star_num {font-size: 26px; font-weight: 700;} .product_detail_recommend_area .recommend_area {display: flex; justify-content: center; align-items: center; margin-top: 12px; text-align: center;} .product_detail_recommend_area .recommend_area p {color: #333; font-size: 14px; font-weight: 400; line-height: 150%;} .product_detail_recommend_area .recommend_area p em {font-weight: 700;} .product_detail_recommend_area .recommend_area p em.recommend_num {font-size: 20px;} .product_detail_recommend_area .recommend_area p span {color: #FF6B00; font-weight: 700; position: relative;} .product_detail_recommend_area .recommend_area p span::after {content: ''; width: 100%; height: 8px; background-color: rgba(255, 107, 0, 0.20); position: absolute; left: 0; bottom: -1px;} /* 03_tab 상품문의 */ .qna_top {padding: 5% 0;} .container_95 {box-sizing: border-box; padding: 0 20px;} .qna_top .q_btn {padding: 3% 0; text-align: center; font-size: 14px; border: 1px solid #eaeaea; width: 100%; border-radius: 5px; background-color: #fff; color:#000;} .qna_textarea {display: none;} .qna_list li {border-bottom: 1px solid #eee; padding: 15px 0;} .product_detail_star_area {display: flex; margin: 30px 0 20px 0; display: none;} .product_detail_star_area .column_area {width: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center;} .product_detail_star_area .column_area .flex_center_center {width:100%; display: flex; justify-content: center; align-items: center; font-weight: 500; position: relative;} .product_detail_star_area .column_area .flex_center_center::after {content: ''; position: absolute; top: 50%; right: 0; width: 1px; height: 85px; background-color: #eee; transform: translate(0,-50%);} .point_bold {font-size: 24px; font-weight: 700;} .review_title > p {font-size: 14px; text-align: center; margin-top : 20px; padding-bottom: 10px; font-weight: 700;} .review_content .review_title p {width: 100%; height: 20px; text-align: center; font-size: 20px; font-weight: 500; padding: 25px;} .jq-star {margin: 10px 2px 15px 2px;} .review-star {margin: 5px 0 10px 0;} .review-star img {margin: 0 1px;} .test_ul {width: 100%; height: 100%; display: flex; justify-content: center;} .test_ul_li {float: left; width: 7px; height: 40px; margin: 0px 6px; position: relative;} .test_ul_li .speech_bubble {background: url('https://img.monfood.co.kr/images/common/review_count_bg.svg') no-repeat; background-size: 33px 19px; width: 33px; height: 19px; display: flex; justify-content: center; align-items: baseline; position: absolute; top: -24px; left: -14px;} .test_ul_li .speech_bubble span {color: #fff; font-size: 12px; font-weight: 100; margin-top: 1px;} .flex_center_center span.review-count {color: #555; font-size: 12px; letter-spacing: -0.18px; font-weight: 400;} .test_ul_li .grp {width: 100%; height: 100%; background-color: #ebebeb; border-radius: 30px; position: relative; overflow: hidden;} .test_ul_li .foot {position: absolute; bottom: -25px; height: 17px; text-align: center; font-size: 12px; color: #555;} .border {border-bottom: solid 1px #ebebeb; padding: 0px;} .container_80 {box-sizing: border-box; padding: 0 5%;} .qna_list li .q_state {width: 100%; font-size: 0; padding-top: 15px;} .qna_list li .q_state .q_left {text-align: left; display: inline-block;} .qna_list li .q_state .q_left.complete {font-size: 12px; color: #fff; background-color: #a8a8a8; padding: 7px 10px; border-radius: 50px;} .qna_list li .q_state .q_left.wait {font-size: 12px; color: #fff; background-color: #ff3500; padding: 7px 10px; border-radius: 50px;} .qna_list li .q_state .q_right {text-align: right; display: inline-block; font-size: 11px; color: #bdbdbd; padding-left: 10px;} .qna_list li .q_state .q_right .date {padding-right: 8px; position: relative;} .qna_list li .q_cont {color: #333333; font-size: 14px; margin: 8px 0 0 20px; position: relative; line-height: 150%;} .qna_list li .q_cont.q_lock:after {content: ''; position: absolute; top: 2px; left: -20px; width: 12px; height: 16px; background: url(/image/common/lock.png) center center no-repeat; background-size: cover;} .qna_list li .complete_area:last-child {margin-top: 10px;} .qna_list li .complete_area {background: #f5f5f5; box-sizing: border-box; padding: 10px 15px; margin-top: 10px; border-radius: 5px;} .qna_list li .complete_area .lock_txt {color: #b5b5b5; font-size: 14px; line-height: 150%;} /* 03_tab 상품문의 */ .qna_top {padding: 5% 0;} .container_95 {box-sizing: border-box; padding: 0 5%;} .qna_top .q_btn {padding: 3% 0; text-align: center; font-weight: 500; font-size: 14px; border: 1px solid #eaeaea; width: 100%; border-radius: 5px; background-color: #fff;} .qna_textarea {display: none;} .qna_list li {border-bottom: 1px solid #eee; padding: 15px 0;} .container_80 {box-sizing: border-box; padding: 0 20px;} .qna_list li .q_state {width: 100%; font-size: 0; padding-top: 15px;} .qna_list li .q_state .q_left {text-align: left; display: inline-block;} .qna_list li .q_state .q_left.complete {font-size: 12px; color: #fff; background-color: #a8a8a8; padding: 7px 10px; border-radius: 50px;} .qna_list li .q_state .q_left.wait {font-size: 12px; color: #fff; background-color: #ff3500; padding: 7px 10px; border-radius: 50px;} .qna_list li .q_state .q_right {text-align: right; display: inline-block; font-size: 11px; color: #bdbdbd; padding-left: 10px;} .qna_list li .q_state .q_right .date {padding-right: 8px; position: relative;} .qna_list li .q_cont {color: #333333; font-size: 14px; margin: 8px 0 0 20px; position: relative;} .qna_list li .q_cont.q_lock:after {content: ''; position: absolute; top: 2px; left: -20px; width: 12px; height: 16px; background: url(/image/common/lock.png) center center no-repeat; background-size: cover;} .qna_list li .q_cont.q_none:after {content: 'Q.'; position: absolute; top: -2px; left: -20px; font-weight: 500;} .qna_list li .complete_area:last-child {margin-top: 10px;} .qna_list li .complete_area {background: #f5f5f5; box-sizing: border-box; padding: 10px 15px; margin-top: 10px; border-radius: 5px;} .qna_list li .complete_area .lock_txt {color: #b5b5b5; font-size: 14px;} /* 상품정보고시, 교환반품환불 안내 버튼 */ .two_btn_area {border-top: 8px solid #eeeeee; padding: 20px 0;} .container_95 {box-sizing: border-box; padding: 0 20px; display: flex; justify-content: center; align-items: center;} .two_btn_area .pro_btn {border: 1px solid #ebebeb; background-color: #fff; padding: 15px 0; border-radius: 5px; font-weight: 400; float: left; width: calc(100% / 2 - 7px); font-size: 14px; position: relative; text-align: center;} .two_btn_area .pro_btn:last-child {margin-left: 14px;} .two_btn_area .container_95:after {content: ''; display: block; clear: both;} /* 추천상품, 최근본 상품 */ .add_product_wrap {width: 100%; box-sizing: border-box; padding: 20px 0 10px 20px;} .add_product_wrap h6 {font-size: 14px; font-weight: 500; padding-bottom: 15px;} .add_product_wrap h6 span {float: right; padding-right: 20px; font-weight: 400; font-size: 13px;} .add_product_wrap .add_product_swiper {overflow: hidden; padding-right: 20px; z-index: -999;} .add_product_wrap .swiper-wrapper {position: relative; width: 100%; height: 100%; z-index: 1; display: flex; transition-property: transform; box-sizing: content-box;} .add_product_wrap .swiper-slide {background-position: center; background-size: cover; height: 100%; position: relative; transition-property: transform; flex-shrink: 0;} .add_product_item img {max-width: 100%; border-radius: 8px;} .add_product_item video {max-width: 100%; border-radius: 8px;} .add_product_item .add_product_item_info .tit {font-size: 14px; line-height: 1.3; height:38px; margin: 8px 0 8px 0; font-weight: 400; white-space: normal; overflow: hidden; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} .add_product_item .add_product_item_info .price-wrapper{display: inline-block; line-height: 1; display: flex; position: relative; letter-spacing: -0.21px;} .add_product_item .add_product_item_info .org-price {color: #aeaeae; font-size: 12px; padding-top: 2px; height: 15px;} .add_product_item .add_product_item_info .price {display: inline-block; font-size: 14px; font-weight: 700; letter-spacing: -0.5px; white-space: nowrap;} .add_product_item .add_product_item_info .dc-rate {font-size: 14px; font-weight: 700; color: #FF6B00; display: inline-block; margin-right: 8px; word-break: keep-all;} .add_product_item_info .review-area {display: inline-block; color: #a8a8a8; padding: 6px 0; font-size: 13px; float: left;} .add_product_item_info .review-area .review-area-wrap {width: auto;} .add_product_item_info .review-area .review-area-wrap p {float: left;} .add_product_item_info .review-area .review-area-wrap p:first-child {padding-right: 5px;} .add_product_item_info .review-area .review-area-wrap p.rate {display: flex;} .add_product_item_info .review-area .review-area-wrap p em.star {display: inline-block; background-image: url("https://img.monfood.co.kr/images/common/star.png"); width: 15px; height: 15px; background-size: contain; margin: 1px;} .add_product_item_info .review-area .review-area-wrap span {color: #727272; position: relative; padding-left: 16px; font-size: 12px;} .add_product_item_info .review-area .review-area-wrap span::before {content: ''; display: block; background-image: url("https://img.monfood.co.kr/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: 380px) { .add_product_item .add_product_item_info .dc-rate.event-price {margin-right: 3px;} } @media screen and (max-width: 360px) { .add_product_item .add_product_item_info .dc-rate.event-price {margin-right: 2px;} } /* 구매하기 장바구니담기 */ .panel-footer {box-sizing: border-box; display: flex; align-items: center; background-color: #fff; z-index: 20; position: fixed; bottom: 0; max-width: 480px; width:100%; box-shadow: 0px 0px 18px 3px rgb(1 1 1 / 5%);} .panel-footer > .btn-like {position: relative; background-color: #ffffff; width: 15%; height: 72px;} .panel-footer > .btn-like span {display: flex; width: 32px; height: 48px; justify-content: center; background: url("https://img.monfood.co.kr/images/common/btn_favorite.svg") center center no-repeat; background-size: 100%; height: 48px;} .panel-footer > .btn-like span img {width: 100%; display: block;} .panel-footer > .btn-like.on span {display: flex; width: 32px; height: 48px; justify-content: center; background: url("https://img.monfood.co.kr/images/common/btn_favorite_on.svg") center center no-repeat;background-size: 100%; height: 48px;} .panel-footer > .btn-like.on span img {width: 100%; display: block;} .heart-wrapper {width: 72px; height: 72px; position: relative; cursor: pointer; display: flex;} .heart-empty {transform: scale3d(1, 1, 1); position: absolute; top: 27%; left: 23%; width: 32px;} .heart-full {position: absolute; top: 29%; left: 23%; opacity: 0; width: 32px;} /* .like-empty {animation-name: like-empty; animation-duration: 0.5s; animation-iteration-count: 1; animation-fill-mode: forwards;} */ .like-full-stop {opacity: 1;} .like-full {animation-name: like-full; animation-duration: 0.5s; animation-iteration-count: 1; animation-delay: 0.25s; animation-fill-mode: forwards;} /* @keyframes like-empty { 0% { transform: scale3d(1, 1, 1); } 50% { transform: scale3d(1.2, 1.2, 1.2); opacity: 0; } 100% { transform: scale3d(1, 1, 1); } } */ @keyframes like-full { 0% { transform: scale3d(1.2, 1.2, 1.2); opacity: 1; } 100% { transform: scale3d(1, 1, 1); opacity: 1; } } /* 찜하기 클릭시 레이어 팝업 */ .btn-like-popup { /* background: rgba(0, 0, 0, 0.65); */ display: flex; align-items: center; justify-content: center; position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 130px; height: 130px; border-radius: 8px; z-index: 1; color: #fff; text-align: center; padding: 12px; font-weight: 400; line-height: 130%; font-size: 14px; letter-spacing: -0.21px; box-sizing: border-box; display: none;} .btn-like-popup.on {display: block; animation: show-up-popup 0.6s ease 0s 1 normal forwards;} .btn-like-popup > img.heart-like {width: 43%;} .btn-like-popup > img.heart-cancel {display: none;} .btn-like-popup > p.text-like {word-break: keep-all; margin-top: 3px;} .btn-like-popup > p.text-cancel {display: none;} .btn-like-popup > a {color: #FF6B00;} .btn-like-popup.cancel {background: rgba(0, 0, 0, 0.65); position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 130px; height: 130px; border-radius: 8px; z-index: 1; color: #fff; text-align: center; padding: 12px; font-weight: 400; line-height: 130%; font-size: 14px; letter-spacing: -0.21px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 5px; display: none;} .btn-like-popup.cancel.on {display: flex; animation: show-up-popup 0.6s ease 0s 1 normal forwards;} .btn-like-popup.cancel > img.heart-like {display: none;} .btn-like-popup.cancel > img.heart-cancel {display: block; width: 43%;} .btn-like-popup.cancel > p.text-like {display: none;} .btn-like-popup.cancel > p.text-cancel {display: block; word-break: keep-all;} .btn-like-popup.cancel > a {display: none;} .btn-like-popup.effect { animation: animation 1s linear } .btn-like-popup.cancel.effect { animation: animation 1s linear } @keyframes show-up-popup { 0% {opacity: 1; transform: translate(-50%,-50%) scale3d(0, 0, 0);} 50% {opacity: 1; transform: translate(-50%,-50%) scale3d(1.1, 1.1, 1.1);} 100% {opacity: 1; transform: translate(-50%,-50%) scale3d(1, 1, 1);} } .nav_btn {display: block; width: 100%; height: 48px; border-radius: 5px; background-color: #FF6B00; color: #fff; line-height: 30px; text-align: center; display: flex; cursor: pointer; justify-content: center; align-items: center; font-size: 16px; font-weight: 500; margin: 12px 20px 12px 0;} .nav_item {display: none; bottom: 0; padding-bottom: env(safe-area-inset-bottom); box-shadow: 0px 0px 18px 3px rgb(1 1 1 / 20%); z-index: 999; position: fixed;} .opener {display: none;} .opener:checked ~ .nav_item {display: block;} .option_tit {font-size: 18px; position: relative;} .option_tit .shopping_pay_free_area {font-size: 13px; color: #FF6B00; line-height: 13px; padding: 6px 6px; margin-left: 10px; position: relative; bottom: 2px; background-color: #ffece6; border-radius: 5px;} .option_tit .shopping_pay_free_area:after {content: ''; position: absolute; left: 0; top: 50%; width: 0; height: 0; border: 5px solid transparent; border-right-color: #ffece6; border-left: 0; margin-top: -5px; margin-left: -5px;} .main_btn_wrap_v2 {width: 100%; position: fixed; bottom: 0; z-index: 10000; height: 72px; display: none; box-shadow: 0px 0 10px rgb(50 50 50 / 20%); background-color: #fff; max-width: 480px; padding: 12px 20px; box-sizing: border-box;} .main_btn_wrap_v2 .cart_btn {position: relative;} .main_btn_wrap_v2 .common_btn {width: calc(50% - 4px); float: left; font-size: 16px; color: #fff; text-align: center; height: 100%; font-weight: 700; display: flex; align-items: center; justify-content: center;} .main_btn_wrap_v2 .common_btn:first-child {border-radius: 5px; border: 1px solid #FF6B00; background-color: #fff; box-sizing: border-box; color: #FF6B00; margin-right: 4px;} .main_btn_wrap_v2 .common_btn:first-child.dim { border-color: #ccc; color: #ccc; } .main_btn_wrap_v2 .common_btn:last-child {background-color: #FF6B00; border-radius: 5px; color: #fff; border: 1px solid #FF6B00; box-sizing: border-box; margin-left: 4px;} .main_btn_wrap_v2 .cart_btn:after {content: ''; display: block; width: 1px; height: 80%; position: absolute; top: 30%; right: 0;} .main_option_wrap {position: fixed; bottom: -50%; width: 100%; transition: all 0.3s ease-in-out; background-color: #fff; z-index: 500; box-shadow: 0px 0 10px rgb(50 50 50 / 20%); box-sizing: border-box; padding: 1% 0; max-width: 480px;} .main_option_wrap.active {bottom: 50px; transition: all 0.3s ease-in-out;} .main_option_wrap #optionHolder {height: 350px;} @media screen and (max-width: 430px){ .main_option_wrap #optionHolder {height: 200px;} .add_product_item .add_product_item_info .tit {line-height: 17px; height: 35px;} } .top_area {position: absolute; top: -23px; left: calc(50% - 50px); border-radius: 10px 10px 0 0; border-bottom: 25px solid #fff; height: 0; width: 100px; filter: drop-shadow(0px -8px 5px rgba(0, 0, 0, 0.05));} .top_area img {width: 20%; margin: 12px auto 0 auto; display: block;} .container_90 {box-sizing: border-box; padding: 0 5%;} .select_item2 {width: 100%; height: auto; position: relative; margin-top: 10px;} .select_item2 .option_list .opt {float: left; width: 75%; text-align: left; line-height: 20px; padding: 20px 0px;} @media screen and (max-width: 450px) { .select_item2 .option_list .opt {float: left; line-height: 20px; padding: 10px 0px;} } .select_item2 .option_list .pri {float: right; width: 25%; text-align: right;} .select_item2 .option_list li:not(.sold_out):hover {background-color: #ffece6; cursor: pointer;} .select_item2 .option_list .sold_out span {color: #d7d7d7;} .select_optionBtn {width: 100%; border: 1px solid #d7d7d7; background: #fff; border-radius: 8px; text-align: left; padding: 12px 20px; font-size: 15px; position: relative; display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;} .option_list {width: 100%; z-index: 999; height: auto; overflow: auto; border: 1px solid #d7d7d7; background: #fff; border-radius: 8px; display: none; position: absolute; top: auto; right: 0; box-sizing: border-box; transition: all 0.4s ease; margin-top: -16px;} .option_list li {overflow: hidden; width: 100%; padding: 0px 15px; box-sizing: border-box; border-bottom: 1px solid #eaeaea;} .main_option_wrap .option_box {margin: 0 0 10px 0; width: 100%; background: #f5f5f5; font-size: 14px; border-radius: 5px; box-sizing: border-box; padding: 10px 15px; position: relative;} .main_option_wrap .option_box img {width: 3%; position: absolute; top: 45%; right: 5%;} #option_selected_list {max-height: 240px; overflow-y: scroll;} .main_option_wrap .container_95 .all_price {float: right; font-size: 0; margin: 10px 10px 0 0;} .main_option_wrap .container_95 .all_price span:first-child {font-size: 13px; margin-right: 5px;} .main_option_wrap .container_95 .all_price span {display: inline-block;} .main_option_wrap .container_95 .all_price span:last-child {color: #fc3c64; font-size: 17px; font-weight: 500;} .jsStockOptions {width: 100%; height: 50px; padding: 10px; border: solid 1px #ebebeb; border-radius: 10px; font-size: 16px; appearance: none; background: url(/image/common/btn_down.png) no-repeat right 24px center; background-size: 14px;} .optionTemplate {overflow-y: auto;} .panel-body .media .media-body {padding-top: 7px;} .panel-body .media .media-body .option_value {background-color: #f5f5f5; padding: 10px 20px; border-radius: 10px;} .panel-body .media .media-body .option_value .option-title {display: flex; justify-content: space-between; align-items: center; line-height: normal; margin-bottom: 10px;} .panel-body .media .media-body .option_value .option-title img {width: 13px; max-width: 13px;} .panel-body .media .media-body .count-wrapper {} .panel-body .media .media-body .count-wrapper button {background-color: #ababab; border: solid 1px #ababab; color: #fff; border-radius: 5px; width: 25px; height: 25px; line-height: 20px; font-size: 16px; font-weight: 400; text-align:center; padding: 0 3px;} .panel-body .media .media-body .count-wrapper .minus {padding-bottom: 5px;} .panel-body .media .media-body .count-wrapper .plus {padding-bottom: 5px;} .panel-body .media .media-body .count-wrapper input {border: none; background: none; text-align: center; font-size: 15px; width: 30px;} .panel-body .media .media-body .count-wrapper .price {float: right; font-size: 15px;} .total_price {height: 100px; justify-content: space-between; display: flex; align-items: center; font-size: 18px; font-weight: 500; padding: 0px 5%; margin-bottom: 20px;} @media screen and (max-width: 430px){ .total_price {height: 90px;} } .total_price .text {letter-spacing: 0.7px;} .total_price .total {font-size: 20px; font-weight: 500; color: #FF6B00;} .fa-heart-o {color: #FF6B00; cursor: pointer; font-size: 34px; vertical-align: -7px;} .fa-heart {color: #FF6B00; cursor: pointer; font-size: 34px; vertical-align: -7px;} /* 01_tab 상세정보(상세이미지) */ .btn-more-view {bottom: 0; padding: 10px 20px 15px; width: 100%; font-size: 11px; text-align: center; background: #fff; box-sizing: border-box;} .btn-more-view .btn-border {width: 100%; border: none; border-radius: 8px; background-color: #000; color: #fff;} .btn-border2 {width: calc(100% - 40px); height: 45px; border: none; border-radius: 8px; background-color: #fff; color: #FF6B00; border: 1px solid #FF6B00; position: absolute; bottom: 10px; left: 50%; transform: translate(-50%, 0); z-index: 2;} .btn-border2 span {color: #FF6B00; font-size: 14px; font-weight: 500;} .btn-more-view span {display: inline-block; padding: 10px 0px 10px 0; font-size: 14px; color: #fff; font-weight: 500;} /* check */ .btn-more-view span:after {display: none;} /* 02_tab 구매후기 */ .wrap-average-review.reset {margin: 0; padding: 0; position: relative; z-index: 1;} .wrap-average-review .review-photo-thumblist {display: flex; margin: 0;} .wrap-average-review .review-photo-thumblist .thumb-box {position: relative; -webkit-box-flex: 1; flex: 1; max-width: calc(33.33% - 6px); padding-top: calc(33.33% - 12px); margin: 20px 6px; overflow: hidden;} .wrap-average-review .review-photo-thumblist .thumb-box > a {position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; -webkit-box-pack: center; justify-content: center; overflow: hidden; background: #e0e0e0; text-decoration: none; color: #222; border-radius: 8px} .wrap-average-review .review-photo-thumblist .thumb-box img {display: block; width: 100%; vertical-align: top; object-fit: cover;} .wrap-average-review .review-photo-thumblist .thumb-box > a:before {display: block; content: ""; position: absolute; left: 0; top: 0; z-index: 2; width: 100%; height: 100%; opacity: .04; background-color: #000;} .wrap-average-review .review-photo-thumblist .thumb-box .photo-review-total {position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .7); display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; color: #fff; text-align: center; font-size: 15px; line-height: 1.3;} /* 03_tab 상품문의 */ .qna_textarea input {vertical-align: middle; font-size: 1em; line-height: normal; border: 1px solid #d6d6d7; color: #333; border-radius: 0; resize: none;} .qna_textarea .qna_textarea_inner {background: #f5f5f5; width: 100%; box-sizing: border-box; padding: 8px; font-size: 14px; border-radius: 5px; overflow: auto; vertical-align: top; font-family: 'Noto Sans KR', sans-serif; margin-bottom: 5px; border: none; resize: none; outline: none;} /* 체크박스 */ .chk_box p {padding-top: 2px; font-size: 14px; margin-left: 5px;} .chk_box {display: block; position: relative; padding-left: 25px; margin-bottom: 20px; cursor: pointer; font-size: 14px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; display: flex; justify-content: space-between;} /* 기본 체크박스 숨기기 */ .chk_box input[type="checkbox"] {display: none;} /* 선택되지 않은 체크박스 스타일 꾸미기 */ .chk_box span {width: 20px; height: 20px; background: #fff; position: absolute; top: 0; left: 0; border-radius: 4px; display: flex; justify-content: flex-start; border: 1px solid #eee;} /* 선택된 체크박스 스타일 꾸미기 */ .chk_box input[type="checkbox"]:checked + .on {border:solid 1px #fff; background: #FF6B00; border-radius: 4px;} .on:after {content: ""; position: absolute; display: none;} .chk_box input[type="checkbox"]:checked + .on:after {display: block;} .on:after {width: 6px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); position: absolute; left: 6px; top: 2px;} .secret_txt {font-size: 14px; margin: 10px 0;} .secret_txt input[type="checkbox"] {display: none; box-sizing: border-box; padding: 0;} .secret_txt input[type="checkbox"] + label span {background: url(https://img.09sns.co.kr/images/order_icon.svg) 2px top no-repeat; background-size: cover; height: 20px; width: 26px; display: inline-block; margin-right: 0px; vertical-align: -6px; font-family: 'Noto Sans KR', sans-serif;} .qna_textarea {width: 100%;} .qna_textarea .qna_btn {font-size: 0; margin: 6px 0; font-family: 'Noto Sans KR', sans-serif;} .qna_textarea .qna_btn>button.q_cancel {border: 1px solid #eee; margin-right: 6px; color:#000;} .qna_textarea .qna_btn>button {display: inline-block; width: calc(100% / 2 - 3px); text-align: center; padding: 10px 0; font-size: 15px;} .qna_textarea .qna_btn>button:last-child {background: #222; color: #fff; border: none;} .qna_textarea .qna_btn>button {display: inline-block; width: calc(100% / 2 - 3px); text-align: center; padding: 10px 0; font-size: 14px;} /* 리뷰 모달 */ .modal {display: none; position: fixed; z-index: 1; top: 0; width: 100%; height: 100%; overflow: auto; max-width: 480px;} .photo_album_container {background-color: #fff; margin: 0; width: 100%; max-width: 480px;} .photo_detail_head .header-popup .close {color: #000; float: right; font-size: 28px;} .photo_detail_head .header-popup .close:hover, .photo_detail_head .header-popup .close:focus {color: #000; text-decoration: none; cursor: pointer;} .photo_detail_head .header-popup {border: 0; height: 60px; background-color: #fff; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; font-size: 18px;} #reviewModal {background-color: #fff;} .photo_album_container {background-color: #fff;} .photo_album_thumnail_list {} .photo_album_thumnail_list ul {width: 100%;} .photo_album_thumnail_list li {display: flex; justify-content: center; align-items: center; overflow: hidden; position: relative; width: 33.3333%; float: left; height: 250px;} .photo_album_thumnail_list li img {width: 100%; height: 100%; display: inline-block; object-fit: cover;} .photo_album_thumnail_list .video-box {width: 100%; height: 100%;} @media screen and (max-width: 430px) { .photo_album_thumnail_list li {height: 150px;} } /* 상세정보 */ .photo_detail_container {width: 100%; height: 100%; overflow: hidden; background-color: black;} .photo_detail_container .photo_detail_head {width: 100%; height: 50px; position: absolute; top: 0; z-index: 1000; color: #fff; display: flex; justify-content: space-between; align-items: center;} .photo_detail_head .all_album {width: 24px; height: 24px; display: inline-block; background: url(/image/common/album_icon.png) no-repeat; font-size: 0px; margin: 0 20px;} .fl {float: left;} .photo_detail_head .album_close {width: 20px; height: 20px; display: inline-block; background: url(/image/common/btn_close_white.png) no-repeat; font-size: 0px; margin: 0 20px;} .photo_detail_container .swiper-slide {width: 100%; height: 100%;} .photo_detail_container .swiper-slide .re_img_wrap {width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; background-size: contain; display: inline-block;} .photo_detail_container .swiper-slide .re_info_contents {position: absolute; bottom: 0; left: 0; width: 100%; overflow-x: hidden; overflow-y: auto; background: rgba(0,0,0,.7); z-index: 1000; color: #fff; padding: 20px 15px; transition: all ease 0.5s;} .review_grade {overflow: hidden; margin-left: -3px;} .review_grade > i {color: #ffcc00; width: 18px; height: 18px; border-radius: 100px; background-size: 100%; display: block; float: left;} .review_grade > svg {color: #ffcc00; width: 18px; height: 18px; border-radius: 100px; background-size: 100%; display: block; float: left;} .photo_detail_container .swiper-slide .re_info_contents .nick_date {font-size: 14px; margin-top: 5px; color: #fff;} .photo_detail_container .swiper-slide .re_info_contents .option {width: 100%; margin: 5px 0; color: #fff;} .photo_detail_container .swiper-slide .re_info_contents .option > p {font-size: 14px; color: #fff;} .swiper-button-next {background-image: url(https://img.monfood.co.kr/images/common/next_arrow_white.svg); right: 10px; left: auto; position: absolute; top: 50%; width: 27px; height: 44px; margin-top: -22px; z-index: 10; cursor: pointer; background-size: 27px 44px; background-position: center; background-repeat: no-repeat;} .swiper-button-prev {background-image: url(https://img.monfood.co.kr/images/common/prev_arrow_white.svg); left: 10px; right: auto; position: absolute; top: 50%; width: 27px; height: 44px; margin-top: -22px; z-index: 10; cursor: pointer; background-size: 27px 44px; background-position: center; background-repeat: no-repeat;} .swiper-button-next:after {display: none;} .swiper-button-prev:after {display: none;} /* 배송정보 아코디언 */ .ship-info-wrap {padding: 15px 0; border-top: 1px solid #EEE; margin-top: 16px;} .ship_tit {position: relative; cursor: pointer; font-size: 14px;} .ship-txt_right > div {display: flex;} .ship_tit .ship_info {display: flex; align-items: flex-start; align-items: center; margin-left: -10px;} .ship_tit .ship_txt {font-size: 13px; float: left; width: 21%; padding-top: 1px; padding-left: 10px; font-weight: 500;} .ship_tit .ship-point {color: #727272; font-size: 13px;} .ship_tit p {color: #727272; font-size: 13px; float: left; line-height: 20px;} .delivery_wrap {display: none; overflow: hidden; font-size: 13px; background-color: #fff; padding: 0 0 5px 21.5%;} .delivery_wrap .else_info_wrap {position: relative;} .delivery_wrap .else_info_wrap .else_left {float: left; width: 23%;} .delivery_wrap .else_info_wrap .else_right {float: left; width: 90%; line-height: 20px; color: #727272;} .arrow-wrap {position: absolute; top:10px; right: 2px; transform: translate(0, -50%);} .ship_tit .arrow-top {display: none;} .ship_tit .arrow-bottom {display: block;} .ship_tit.open .arrow-bottom {display: none;} .ship_tit.open .arrow-top {display: block;} .add_btn_wrap {padding: 20px 30px 30px 30px; display: flex; justify-content: center; align-items: center;} .add_btn_wrap .add_btn {float: right; text-align: right; font-size: 16px; color: #fff; background: #222; padding: 10px 20px; box-sizing: border-box; border-radius: 50px;} /* 리뷰 */ .photo_detail_container .swiper-slide video {position:absolute; top:50%; transform:translateY(-50%);} .photo_detail_container .txt_review {padding-right:7%; line-height:1.2em;} .photo_detail_container .nick_date .nick {display:inline-block; max-width:40%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .photo_detail_container .first_option i {color:#aaa;} .photo_detail_container .first_option svg {color:#aaa;} /* 글 보이기/숨기기 */ .photo_detail_container .swiper-slide .re_info_contents > i.arrow {width: 20px; height: 20px; display: inline-block; position: absolute; top: 10px; right: 50px; background: url(https://img.mysdis.co.kr/images/common_icon/down_arrow_gray.svg) no-repeat; transition: all ease 0.5s;} .photo_detail_container .swiper-slide .re_info_contents > i.arrow.rotate {transform: rotate(180deg);} .photo_detail_container .swiper-slide .re_info_contents .txt_review.hidden {display: none;} /* 책임보상제도 */ .refund-system {border-bottom: solid 1px #f6f6f6; font-size: 14px; padding: 15px 0; overflow: hidden;} .refund-system .refund-system-icon {padding-right: 10px; float: left; display: flex; align-items: center;} .refund-system .refund-system-icon img {width: 23px; height: auto;} .refund-system .refund-system-icon em {font-weight: 500; display: block; margin-left: 10px;} .refund-system .refund-system-txt {width: 100%; float: left; margin-top: 10px; margin-left: 26px;} .refund-system .refund-system-txt p {font-size: 12px; padding-left: 7px; position: relative; line-height: 1.4;} .refund-system .refund-system-txt p::before {content: ''; width: 2px; height: 2px; position: absolute; left: 0; top: 50%; transform: translate(-50%,0);} .refund-system .refund-system-txt p span {font-weight: 600;} /* 서브배너 */ .sub_banner {max-width: 480px; padding: 4% 20px;} .sub_banner img {width: 100%;} /* 구매후기탭 - 띠배너 슬라이드 */ .sub-banner-slider {position: relative; max-width: 480px; padding: 0 20px; margin-bottom: 30px;} .sub-banner-slider .swiper-slide {overflow: hidden;} .sub-banner-slider .swiper-slide img {width:100% !important; border-radius: 10px} .sub-banner-slider-swiper-pagination {text-align: center; bottom: 10px; position: absolute; z-index: 1; display: none;} .sub-banner-slider .swiper-pagination-bullet-active {background-color: #FF6B00 !important; width: 10px; height: 10px;} .sub-banner-slider .swiper-pagination-bullet {width: 10px; height: 10px;} /* 추가 할인 쿠폰 받기 */ #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;} #layer-mask.on2 {display: block; animation: show-up-mask 1s ease 0s 1 normal forwards;} #option-layer-mask {position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; background-color: rgba(0, 0, 0, 0.6); display: none;} #option-layer-mask.on {display: block; animation: show-up-mask 1s ease 0s 1 normal forwards;} .coupon-list {overflow: hidden;} .coupon-list .container {position: relative;} .coupon-list .container .plus-coupon {display: flex; position: relative; align-items: center; border-bottom: solid 1px #f6f6f6; padding: 10px 0;} .coupon-list .container .plus-coupon .bene_img {width: 23px;} .coupon-list .container .plus-coupon .bene_img img {width: 100%;} .coupon-list .container .plus-coupon p {font-size: 13px; margin-left: 10px;} .coupon-list .container .plus-coupon > img {width: 21px; position: absolute; right: 0; top: 50%; transform: translate(0,-50%); cursor: pointer;} .coupon-list .container .coupon-list-layer1 {position: fixed; width: 100%; max-width: 480px; bottom: -100%; transition: bottom 0.5s; z-index: 100; background-color: #fff; padding: 20px 0px; box-sizing: border-box; border-top-left-radius: 20px; border-top-right-radius: 20px; left: 50%; transform: translate(-50%,0); box-shadow: 0px 0px 18px 3px rgb(1 1 1 / 5%);} .coupon-list .container .coupon-list-layer1 .cp-content {transform: translate(-50%, 0); display: none;} .coupon-list .container .coupon-list-layer1.on2 .cp-content {transform: translate3d(0, 0, 0); opacity: 1; margin: 0 auto; max-width: 480px; border-radius: 8px 8px 0 0; height: auto;} .coupon-list .container .coupon-list-layer1 .cp-content .pop_contents_wrap {background-color: #fff; position: relative; border-top-left-radius: 30px; border-top-right-radius: 30px;} .coupon-list .container .coupon-list-layer1 .cp-content .pop_contents_wrap .tit {text-align: center;} .coupon-list .container .coupon-list-layer1 .cp-content .pop_contents_wrap .tit p:nth-of-type(1) {font-size: 20px; font-weight: 500;} .coupon-list .container .coupon-list-layer1 .cp-content .pop_contents_wrap .tit p:nth-of-type(2) {font-size: 14px; margin: 10px 0;} .coupon-list .container .coupon-list-layer1 .cp-content .pop_contents_wrap .tit a.close-btn {position: absolute; top: 0px; right: 15px;} .coupon-list .container .coupon-list-layer1 .cp-content .pop_contents_wrap .box {overflow-y: scroll; height: 375px; padding: 20px; margin: 0 10px;} .coupon-list .container .coupon-list-layer1 .cp-content .pop_contents_wrap .box .coupon_box_wrap {position: relative; background-color: #fff; border: 1px solid #ddd; display: flex; justify-content: space-between; align-items: center; padding: 20px 30px; border-radius: 8px; margin-bottom: 15px;} .coupon-list .container .coupon-list-layer1 .cp-content .pop_contents_wrap .box .coupon_box_wrap .cou_left {} .coupon-list .container .coupon-list-layer1 .cp-content .pop_contents_wrap .box .coupon_box_wrap .cou_left.disabled {color: #a4a4a4;} .coupon-list .container .coupon-list-layer1 .cp-content .pop_contents_wrap .box .coupon_box_wrap .cou_left .cou_tit {font-size: 16px; padding-bottom: 8px;} .coupon-list .container .coupon-list-layer1 .cp-content .pop_contents_wrap .box .coupon_box_wrap .cou_left .cou_mon {font-size: 30px; font-weight: 700; padding-bottom: 8px;} .coupon-list .container .coupon-list-layer1 .cp-content .pop_contents_wrap .box .coupon_box_wrap .cou_left .cou_txt {font-size: 13px; color: #bbbbbb;} .coupon-list .container .coupon-list-layer1 .cp-content .pop_contents_wrap .box .coupon_box_wrap .cou_left .cou_tit.complete {color: #bbbbbb;} .coupon-list .container .coupon-list-layer1 .cp-content .pop_contents_wrap .box .coupon_box_wrap .cou_left .cou_mon.complete {color: #bbbbbb;} .coupon-list .container .coupon-list-layer1 .cp-content .pop_contents_wrap .box .coupon_box_wrap .cou_left .cou_txt.complete {color: #bbbbbb;} .coupon-list .container .coupon-list-layer1 .cp-content .pop_contents_wrap .box .coupon_box_wrap img {width: 50px;} .coupon-list .container .coupon-list-layer1 .cp-content .pop_contents_wrap .down_button {width: 90%; margin: 0 auto;} .coupon-list .container .coupon-list-layer1 .cp-content .pop_contents_wrap .down_button img {width: 100%;} .coupon-list .container.on2 .coupon-list-layer1.on2 {bottom: 0; z-index: 5001;} /* 이미지 슬라이드 */ div.image-slide {position: relative; max-width: 800px; margin: -25px auto 20px auto; padding: 0 2%;} div.image-slide .box {position: relative; left: 0; top: 0; width: 100%; padding-top: calc(100% * (150 / 1040)); overflow: hidden;} div.image-slide .box img {width: 100%; border-radius: 10px;} div.image-slide ul.slide {position: absolute; left: 0; top: 0; width: 100%; height: 100%;} div.image-slide ul.slide > li {position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: none;} div.image-slide ul.slide > li.on {display: block;} div.image-slide ul.slide > li.show {animation: show-slide 2s ease 0s 1 normal forwards; display: block;} div.image-slide ul.slide > li.hide {animation: hide-slide 2s ease 0s 1 normal forwards; display: block;} div.image-slide ul.indicator {position: absolute; left: 0; bottom: 10px; width: 100%; text-align: center; display: none;} div.image-slide ul.indicator > li {display: inline-block; vertical-align: top;} div.image-slide ul.indicator > li + li {margin-left: 8px;} div.image-slide ul.indicator > li > a {display: inline-block; width: 10px; height: 10px; border: 2px solid rgba(255, 255, 255, 0.6); border-radius: 40px; text-indent: -9999px; overflow: hidden; transition: all 0.3s;} div.image-slide ul.indicator > li.on > a {width: 40px; border-color: #ffffff; background-color: #ffffff;} div.image-slide .control {display: none;} div.image-slide .control > a.prev, div.image-slide .control > a.next {position: absolute; top: 50%; transform: translate(0, -50%); width: 40px;} div.image-slide .control > a.prev {left: -50px;} div.image-slide .control > a.next {right: -50px;} div.image-slide .control > a > img {position: relative; transition: all 0.1s;} div.image-slide .control > a.prev > img {left: 0;} div.image-slide .control > a.next > img {right: 0;} div.image-slide .control > a.prev:active img {left: -10px;} div.image-slide .control > a.next:active img {right: -10px;} div.image-slide .control > a.play {position: absolute; right: 15px; bottom: 15px; color: #ffffff; font-size: 13px;} div.image-slide .control > a.play i {display: none;} div.image-slide .control > a.play svg {display: none;} div.image-slide .control > a.play i:first-child {display: block;} div.image-slide .control > a.play.on i:first-child {display: none;} div.image-slide .control > a.play.on i + i {display: block;} div.image-slide .control > a.play.on svg + svg {display: block;} div.image-slide .bar {position: absolute; left: 0; bottom: 0; width: 0; height: 4px; background: rgba(255, 255, 255, 0.4); display: none;} div.image-slide .bar.on {animation: bar-animation 2s linear 0s 1 alternate forwards;} @keyframes show-slide { 0% {opacity: 0; transform: rotate(-3deg) scale(0.9);} 100% {opacity: 1; transform: rotate(0deg) scale(1);} } @keyframes hide-slide { 0% {opacity: 1; transform: rotate(0deg) scale(1);} 100% {opacity: 0; transform: rotate(3deg) scale(1.1);} } @keyframes bar-animation { 0% {width: 0;} 100% {width: 100%;} } .review_subbanner_wrap {position: relative; max-width: 800px; margin: -25px auto 20px auto; padding: 0 2%;} .review_subbanner {width: 100%; border-radius: 10px; overflow: hidden;} .review_subbanner .swiper-wrapper {width: 100%;} .review_subbanner .swiper-wrapper .swiper-slide {width: 100%;} .review_subbanner .swiper-wrapper .swiper-slide img {width: 100%} .prod-review .info .writer .name {display: inline-block; overflow: hidden; width: 100%; text-overflow: ellipsis; white-space: nowrap;} .prd_img_view {line-height: 0; margin-top: 10px; position: relative;} .prd_img_view.expand::after {content: ''; width: 100%; height: 300px; position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.5) 40%, rgba(255, 255, 255, 0.7) 50%, #fff 75%, #fff 100%); background-repeat: no-repeat; background-size: contain;} /* 공유하기 모달창 */ #addCart.info-modal, #share.info-modal, #restock_pop.info-modal {display: none; position: absolute; left: 0;top: 0;max-width: 480px;width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4);z-index: 999;} #addCart .info-modal-content {background-color: #fff;border-radius: 8px;padding: 20px; border: solid 1px #f6f6f6;box-shadow: 0 5px 6px rgb(0 0 0 / 8%);position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);} #share .info-modal-content {background-color: #fff;border-radius: 8px;padding: 20px;width: 60%;max-width: 300px; border: solid 1px #f6f6f6;box-shadow: 0 5px 6px rgb(0 0 0 / 8%);position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);} #restock_pop .info-modal-content {max-width: 400px; background-color: #fff;border-radius: 8px;padding: 20px;width: 65%; border: solid 1px #f6f6f6;box-shadow: 0 5px 6px rgb(0 0 0 / 8%);position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);} .sel_optionlist {overflow-y: auto;height: auto;max-height: 300px;} @media screen and (max-width: 450px) { #addCart .info-modal-content {width: 65%;} } .info-modal .info-modal-content .share_icon_wrap {display: flex;justify-content: space-around;align-items: center;padding: 4%;} .info-modal .info-modal-content .share_icon_wrap .share_icon {display: flex;flex-direction: column;align-items: center;} .info-modal .info-modal-content .share_icon_wrap .share_icon img {width: 50px;padding-bottom: 10px;} .close {color: #aaaaaa;float: right;font-size: 26px;} .close:hover, .close:focus {color: #000;text-decoration: none;cursor: pointer;} .info-modal .info-modal-content .modal-tit {display: flex;justify-content: space-between;align-items: center;} .info-modal .info-modal-content .modal-tit p {font-size: 16px;} .info-modal .info-modal-content .add_cart_button {display: flex;justify-content: space-around;align-items: center;padding-top: 20px;width: 100%;} .info-modal .info-modal-content .add_cart_button button {display: flex;flex-direction: column;align-items: center; width: 48%} .info-modal .info-modal-content .add_cart_button .go_shop {background-color: #727272;border: none;padding: 4%;color: #fff;border-radius: 8px;font-size: 12px;cursor: pointer;} .info-modal .info-modal-content .add_cart_button .go_cart {background-color: #FF6B00;border: none;padding: 4%;color: #fff;border-radius: 8px;font-size: 12px;cursor: pointer;} .info-modal .info-modal-content .add_cart-tit {text-align: center;display: flex;justify-content: center;align-items: center;} .info-modal .info-modal-content .add_cart-tit .add_cart_img {width: 30px;padding-right: 5px;} .info-modal .info-modal-content .add_cart-tit .add_cart_img img {width: 100%;} .main_option_wrap {position: fixed; bottom: -50%;width: 100%; transition: all 0.3s ease-in-out; background-color: #fff; z-index: 500; box-shadow: -10px 0 10px rgb(50 50 50 / 5%); box-sizing: border-box; padding: 3% 0 1% 0;} .main_option_wrap.active {bottom: 50px;transition: all 0.3s ease-in-out;} .top_area {position: absolute; top: -23px;left: calc(50% - 50px); border-radius: 10px 10px 0 0; border-bottom: 25px solid #fff; height: 0; width: 100px; filter: drop-shadow(0px -8px 5px rgba(0, 0, 0, 0.05));} .main_option_wrap #optionHolder {height: auto;max-height: 150px;} .top_area img {width: 20%;margin: 12px auto 0 auto;display: block;} .container_99 {box-sizing: border-box;padding: 0 5%;} .main_option_wrap .option_box {margin: 0 0 10px 0;width: 100%;background: #f5f5f5;font-size: 14px;border-radius: 5px;box-sizing: border-box;padding: 10px 15px;position: relative;display: flex;justify-content: space-between;align-items: center;height: 50px;font-family: "Noto Sans KR", sans-serif; cursor: pointer} .main_option_wrap .option_box img {width: 3%;position: absolute;top: 45%;right: 5%;} .total_price {height: 60px;justify-content: space-between;display: flex;align-items: center;font-size: 18px;font-weight: 500;padding: 0px 5%;} .main_option_wrap .shopping_pay_free_area {font-size: 14px;color: #FF6B00;font-weight: 500;line-height: 14px;padding: 10px 10px;margin: 15px 5%;text-align: center;position: relative;bottom: 2px;background-color: #ffece6;border-radius: 5px;} .full_option_wrap {position: fixed;bottom: -100%;width: 100%;transition: all 0.5s ease-in-out;min-height: 450px;background-color: #fff;z-index: 10600;box-shadow: -10px 0 10px rgb(50 50 50 / 5%);box-sizing: border-box;padding: 10px 0 70px 0;max-width: 480px;} .full_option_wrap.active {bottom: 0;transition: all 0.5s ease-in-out;} .opt_tit_box {display: flex;justify-content: space-between;align-items: center;max-height: 30px; padding: 10px 0;} .opt_tit_box .opt_tit {font-weight: 500;font-size: 14px;float: left;} .sold_check {position: relative;padding-left: 22px;margin-left: 10px;margin-bottom: 12px;cursor: pointer;font-size: 13px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;} .sold_check input {position: absolute;opacity: 0;cursor: pointer;height: 0;width: 0;} .checkmark {position: absolute;top: 2px;left: 0;height: 16px;border-radius: 3px;width: 16px;border: solid 1px #eaeaea;} .sold_check input:checked ~ .checkmark {background-color: #727272;} .checkmark:after {content: "";position: absolute;display: none;} .sold_check input:checked ~ .checkmark:after {display: block;} .sold_check .checkmark:after {left: 5px;top: 2px;width: 4px;height: 6px;border: solid white;border-width: 0 2px 2px 0;-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg);} .opt_tit_box .cancel {width: 75%;} .opt_scroll_box {height: 330px;overflow-y: auto;} .opt_scroll_box .tit {font-size: 13px;font-weight: 400;padding: 10px 0;} .opt_scroll_box .tit span {color: #222;font-size: 13px;display: inline-block;padding-left: 5px;} .opt_scroll_box .tit .slide_down {float: right;width: 15px;height: 9px;margin-top: 3px;background: url(https://img.monfood.co.kr/images/renewal/slide_down.png) center center no-repeat;background-size: cover;} .opt_scroll_box .tit:after {content: '';display: block;clear: both;} .opt_scroll_box .opt_box {border: 1px solid #f6f6f6;border-radius: 5px;margin-bottom: 10px;position: relative;background: #fff;padding: 10px;box-sizing: border-box;display: flex;justify-content: space-between;align-items: center; cursor: pointer} .opt_scroll_box .opt_box .item {font-size: 14px;font-weight: 400;width: 70%;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; line-height: 19px; display: flex; flex-direction: column;} .opt_scroll_box .opt_box span {color: #FF6B00; font-size: 13px; font-weight: 400; display: flex; flex-shrink: 0;} .opt_scroll_box .opt_box .price {font-size: 14px;font-weight: 500;text-align: right;width: 30%;} .option_tit {position: relative;cursor: pointer;font-size: 14px;width: 100%;border-bottom: solid 1px #f6f6f6; padding: 15px 0;} .option_tit .opt_title {font-size: 14px;} .view {background: #fff;top: 0;left: 0;border-radius: 4px;display: flex;justify-content: flex-start;} .option_tit .arrow-wrap{top:22px} .option_tit .arrow-top {display: none;} .option_tit .arrow-bottom {display: block;} .option_tit.view .arrow-bottom {display: none;} .option_tit.view .arrow-top {display: block;} .opt_list {display: none;overflow: hidden;font-size: 14px;padding: 10px 0px;line-height: 30px;} .option_tit .shopping_pay_free_area {font-size: 13px;color: #FF6B00;line-height: 13px;padding: 6px 6px;margin-left: 10px;position: relative;bottom: 2px;background-color: #ffece6;border-radius: 5px;} .option_tit .shopping_pay_free_area:after {content: '';position: absolute;left: 0;top: 50%;width: 0;height: 0;border: 5px solid transparent;border-right-color: #ffece6;border-left: 0;margin-top: -5px;margin-left: -5px;} .opt_list .opt_box.sold_out .sold_out_bg {background: rgba(0, 0, 0, .6); position: absolute; left: 0; top: 0; width: 100%; height: 100%; text-align: center; color: #fff; display: flex; justify-content: center; align-items: center; flex-direction: column; font-size: 13px; border-radius: 5px;} .opt_list .opt_box.sold_out .sold_out_bg span {font-size: 16px; line-height: 1; font-weight: 500;} .opt_list .opt_box.sold_out .sold_out_bg a {color: #ffffff; line-height: 1; font-weight: 300; margin-top: 5px;} .opt_list .dp_none {display: none;} /* 재입고 알림 */ .rein_btn {display: none; position: fixed; bottom:0; width: 100%; height: 50px; box-shadow:-10px 0 10px rgba(50,50,50,0.2);z-index: 4500; background-color: #222; color:#fff; text-align: center;height:60px; line-height:60px;max-width:480px;} .main_pro_btn {font-size: 16px; width:100%; text-align:center; font-weight: 700;} .rein_btn .alert2 {position: absolute; top: -45px; left: 50%; background-color: #FF6B00; color: #fff; z-index: 20050; animation: motion 0.6s linear 0s infinite alternate; font-size: 13px; border-radius: 5px; padding: 0 16px; height: 34px; line-height: 34px; transform: translate(-50%, 0); width: 170px;} .rein_btn .alert2:after {content: ''; display: block;position: absolute; top: 100%; left: 0; right: 0;margin: 0 auto; width: 0; height: 0; border-top: solid 10px #FF6B00;border-left: solid 10px transparent; border-right: solid 10px transparent;} @keyframes motion { 0% {margin-top: 0px;} 100% {margin-top: 10px;} } #restock_pop.info-modal {} #restock_pop.info-modal .info-modal-content .modal-tit {font-size: 14px; font-weight: 500; margin-top: -5px; padding-bottom: 8px;} #restock_pop.info-modal ul {font-size:14px; line-height:12px; margin-bottom:20px; color: #727272; margin-top: 5px;} #restock_pop.info-modal li {line-height: 150%; letter-spacing: -0.9px;} #restock_pop.info-modal .btn_restock_proc {font-size:14px; font-weight:700; width:100%; height:40px; line-height:40px; text-align:center; background:#FF6B00; color:#fff; border-radius:5px;} .tabs_Fixed {position: fixed;top: 48px;width: 100%; max-width: 480px;display: inline-block;background: #fff;z-index: 10;border-top: 1px solid #EEE;} .refund-system-txt {margin-left: 26px;} .restock_pop2 {position: fixed; left: 50%; top: 50%; width: 400px; max-width: 90vw; max-height: 90vh; transform: translate(-50%,-50%); border: 1px solid transparent; border-radius: 10px; overflow: hidden; z-index: 5000; box-sizing: border-box; display: block;} .restock_pop2.on {display: block; animation: show-up-popup 0.6s ease 0s 1 normal forwards;} .restock_pop2 .body {height: 100%; font-family: noto sans kr;} .restock_pop2 .body .wrapper {text-align: center; display: flex; flex-direction: column; align-items: center; background-color: #fff; padding: 20px;} .restock_pop2 .body .wrapper .btn-area {display: flex; width: 100%;} .restock_pop2 .body .wrapper a{width: 100%; font-size: 16px; letter-spacing: -0.7px; border-radius: 5px; line-height: 38px; margin-top: 24px;} .restock_pop2 .body .wrapper a.restock {background-color: #FF6B00; color: #fff;} .restock_pop2 .body .wrapper em {font-weight: 500; display: block; width: 100%; margin-top: 10px;} /* 야간시장 오픈 알림 */ .night-market-open-btn {display: none; position: fixed; bottom:0; width: 100%; box-shadow:-10px 0 10px rgba(50,50,50,0.2);z-index: 4500; background-color: #222; color:#fff; text-align: center; height: 72px; line-height: 72px; max-width:480px;} .main_pro_btn {font-size: 16px; width:100%; text-align:center; font-weight: 700;} .night-market-open-btn .alert2 {position: absolute; top: -45px; left: 50%; background-color: #FF6B00; color: #fff; z-index: 20050; animation: motion 0.6s linear 0s infinite alternate; font-size: 13px; border-radius: 5px; padding: 0 16px; height: 34px; line-height: 34px; transform: translate(-50%, 0); width: 190px; } .night-market-open-btn .alert2:after {content: ''; display: block;position: absolute; top: 100%; left: 0; right: 0;margin: 0 auto; width: 0; height: 0; border-top: solid 10px #FF6B00;border-left: solid 10px transparent; border-right: solid 10px transparent;} @keyframes motion { 0% {margin-top: 0px;} 100% {margin-top: 10px;} } /* 야간시장 상품 진입시 알림 팝업 */ .checkbox-container { margin: 16px 0 0 0; background: #fff; width: 100%; color: #727272; font-size: 13px; line-height: 150%; font-weight: 500; margin-top: 16px; cursor: pointer; box-sizing: border-box; padding: 0; } .checkbox-container .checkbox-content { display: flex; align-items: baseline; cursor: pointer; justify-content: center; box-sizing: border-box; } .checkbox-container input[type="checkbox"] { display: none; } .checkbox-container input[type="checkbox"] + label { display: flex; align-items: center; cursor: pointer; position: relative; border: 1px solid #D9D9D9; box-sizing: border-box; background-color: #fff; border-radius: 50px; justify-content: center; width: 100%; padding: 6px 0;} .checkbox-container input[type="checkbox"] + label.on {border: 1px solid #FF6B00;} .checkbox-container input[type="checkbox"] + label .checkmark { display: inline-block; width: 16px; height: 16px; background-repeat: no-repeat; background-position: center center; margin-right: 5px; position: static;} .checkbox-container input[type="checkbox"] + label .checkmark { background-image: url('https://img.monfood.co.kr/images/nightmarket/ico_check.svg'); border: none; } .checkbox-container input[type="checkbox"]:checked + label .checkmark { background-image: url('https://img.monfood.co.kr/images/nightmarket/ico_check_active.svg'); } .checkbox-container input[type="checkbox"] + label .checkbox-content p { margin: 0; } .checkbox-container input[type="checkbox"] + label.on .checkbox-content p {color: #FF6B00;} .night-market-popup1 { position: fixed; left: 50%; top: 50%; width: 400px; max-width: 90vw; max-height: 90vh; transform: translate(-50%,-50%); border: 1px solid transparent; border-radius: 10px; overflow: hidden; z-index: 5000; box-sizing: border-box; display: none; } .night-market-popup1.on { display: block; animation: show-up-popup 0.6s ease 0s 1 normal forwards; } .night-market-popup1 .body { height: 100%; font-family: noto sans kr; } .night-market-popup1 .body .wrapper { text-align: center; display: flex; flex-direction: column; align-items: center; background-color: #fff; padding: 32px 20px;} .night-market-popup1 .body .wrapper a.close2 { position: absolute; top: 20px; right: 20px; background: url(https://img.monfood.co.kr/images/common/btn_close.png) 0 0 no-repeat; width: 16px; height: 16px; text-indent: -9999px; background-size: 16px; } .night-market-popup1 .body .wrapper > img {display: block; width: 180px; margin-bottom: 18px; } .night-market-popup1 .body .wrapper .txt1 {color: #222; line-height: 135%; font-weight: 500; font-size: 16px; z-index: 100;} .night-market-popup1 .body .wrapper .agree-txt {color: #F00; font-size: 12px; margin-top: 6px; animation: glitchy 0.12s infinite; display: none;} .night-market-popup1 .body .wrapper .txt2 {color: #555; line-height: 135%; font-size: 12px; margin-top: 8px; } .night-market-popup1 .body .wrapper .txt2 > span {color: #FF6B00;} .night-market-popup1 .body .wrapper a.close { width: calc(100%); background-color: #FF6B00; color: #fff; font-size: 16px; letter-spacing: -0.7px; border-radius: 5px; height: 48px; line-height: 48px; font-weight: 500; margin-top: 20px; } @keyframes glitchy { 0% {transform: translate(-2px, 2px);} 25% {transform: translate(-1px, -1px);} 50% {transform: translate(0px, 0px);} 75% {transform: translate(0px, 0px);} 100% {transform: translate(-1px, 1px);} } /*.layer_mask_nightmarket { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 5000; background-color: rgba(0, 0, 0, 0.6); display: none; }*/ .tab_item div {flex-direction: row-reverse; justify-content: center; align-items: center; padding-bottom: 0;} .prod-tab-wrapper {padding-top: 0;} .prod-tab-wrapper .tabs .tab_item .count {margin-left: 5px;} /* 구매후기 필터 */ .util_top{transition: top 0.4s ease-out} .util_top .util_wrap{position:relative; zoom:1;float: left; font-size:14px;line-height:normal;font-weight: 400;} .util_top .util_wrap:after{display:block;clear:both;content:''} .util_top .go_filter{display:inline-block;position:relative;} .util_top .go_filter a {margin: 0 auto;} .util_top .arrow{display:inline-block;width:16px;height:16px;margin-left:2px;margin-top:0px;text-indent:-999em;vertical-align:text-bottom;margin-bottom: 1px;} .util_top .arrow{background: url(https://img.monfood.co.kr/images/common/ico_arrow_down.svg) no-repeat center bottom; background-size: 100%;} .util_top .go_filter{z-index:3;color:#000; display: flex;} .util_top .filter-open .go_filter a{color:#000; text-align: center;} .util_top .list_filter{position:absolute; left:-25px; top:35px; right: 0; border-radius: 8px; background:#fff; z-index: 2; box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.25); overflow: hidden;} .util_top .list_filter ul {padding: 5px 0;} .util_top .list_filter li{padding: 5px 10px 5px 10px;} .util_top .list_filter li a{display:block; padding-left: 0;color:#000; font-size: 13px;} .util_top .list_filter li:hover{background-color: #FFF1ED;} .util_top .list_filter li a:hover {color: #FF6B00;} .util_top .list_filter li.active a {color: #FF6B00;} .util_top .util_wrap .list_filter {display: none;} .util_top .util_wrap.filter-open .list_filter {display: block; width: 80px;} .util_top .util_wrap.filter-open .arrow{transform: rotate(180deg);} /* 멤버십 가입자 */ .benefit_member p {position: relative; padding-left: 25px; font-size: 12px; /*margin-left: 10px;*/} .benefit_member p::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(https://img.monfood.co.kr/images/membership/m_icon.png) center center no-repeat; background-size: 14px;} .benefit_member p > span {color: #FF6B00;} /* 멤버십 미가입자 */ .benefit_no_member {border: 1px solid #FF6B00; border-radius: 8px; height: 34px; line-height: 34px; display: flex; justify-content: space-between; align-items: center; margin: 12px 0 16px 0; cursor: pointer;} .benefit_no_member > div {position: relative; left: 12px; padding-left: 25px; font-size: 12px; letter-spacing: -0.2px;} .benefit_no_member::before {content: ''; position: absolute; top: 50%; transform: translate(0,-50%); left: 12px; 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;} .benefit_no_member > div > div > span {color: #FF6B00;} .benefit_no_member > img {position: absolute; right: 12px;} /* 타임특가 */ .today-timesale {margin: 16px 20px 0 20px;} .today-timesale a {border: 1px solid #D9D9D9; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 4px 0;} .today-timesale a > img {width: 14%; max-width: 56px;} .today-timesale a span:nth-of-type(1) {font-size: 18px; font-weight: 700; color: #000; margin-left: 10px;} .today-timesale a span:nth-of-type(2) {font-size: 18px; font-weight: 400; color: #555; margin-left: 3px;} .timesale-popup {width: 240px; max-width: 400px; padding: 20px 15px; color: #fff; position: fixed; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%); background: rgba(0, 0, 0, 0.70); border-radius: 8px; display: none;} .timesale-popup.on {display: flex; align-items: center; justify-content: center;} .timesale-popup > p {font-size: 14px; line-height: 130%; font-weight: 400; position: relative; padding-left: 24px;} .timesale-popup > p::before {content: ''; background: url(https://img.monfood.co.kr/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%);} .timesale-popup > p > span {color: #FF6B00; font-weight: 500;} .review-title-text-box {position: relative; display: flex; align-items: center; padding: 0 20px; justify-content: space-between;} .tooltipTarget { position:relative; } .icoTooltip { z-index:1; position:absolute; display: none; bottom:100%; width:94vw; left:50%; transform: translate(-50%, 0); max-width: 440px; align-items: center; height: 48px; border-radius: 5px; background-color: #fff; color: #FF6B00; text-align: center; border: 1px solid #FF6B00; cursor: pointer; justify-content: center; align-items: center; font-size: 18px; font-weight: 500; margin: 0 auto; box-shadow: 0px 0px 10px 3px rgb(1 1 1 / 15%); } /* 장바구니 담기 완료 토스트 팝업 */ #layer-mask.on {display: block;} .cart-in-popup.hide {bottom: -100%;} .cart-in-popup {position: fixed; width: 100%; max-width: 480px; bottom: 0; transition: bottom 0.5s; background-color: #fff; z-index: 10001;} .cart-in-popup .content {display: block; max-height: 60vh; overflow: auto;} .cart-in-popup.on .content {opacity: 1; margin: 0 auto; max-width: 480px; height: auto;} .cart-in-popup .content .content-wrap {background-color: #fff; position: relative; height: 100%; position: relative; background-color: #fff;} .cart-in-popup .content .content-wrap .cart-in-item {display: flex; align-items: center; position: relative; padding: 15px 20px; border-bottom: 1px solid #eee;} .cart-in-popup .content .content-wrap .cart-in-item .thum-img {width: 40px; height: 40px; border-radius: 50%; border: 1px solid #fff;} .cart-in-popup .content .content-wrap .cart-in-item .txt {font-weight: 400; font-style: 14px; margin-left: 20px;} .cart-in-popup .content .content-wrap .cart-in-item .txt span {font-weight: 700;} .cart-in-popup .content .content-wrap .cart-in-item > a {display: flex; align-items: center; justify-content: center; height: 32px; border: 1px solid #FF6B00; border-radius: 5px; color: #FF6B00; padding: 0 15px; position: absolute; right: 20px; font-size: 14px;} .cart-in-popup .content .content-wrap .cart-in-btn {display: flex; padding: 0 20px 20px 20px;} .cart-in-popup .content .content-wrap .cart-in-btn a.close {border: 1px solid #FF6B00; display: flex; align-items: center; justify-content: center; height: 48px; border-radius: 5px; background-color: #fff; color: #FF6B00; font-size: 16px; font-weight: 500; width: 20%;} .cart-in-popup .content .content-wrap .cart-in-btn a.go-cart {display: flex; align-items: center; justify-content: center; height: 48px; border-radius: 5px; background-color: #FF6B00; color: #fff; font-size: 16px; font-weight: 500; width: 80%; margin-left: 8px;} .cart-in-popup.on {bottom: 60px; z-index: 5001; float: inherit;} .cart-in-popup {border-top-right-radius: 16px; border-top-left-radius: 16px; overflow: hidden;} /* 찜하기 완료 토스트 팝업 */ #layer-mask.on {display: block;} .heart-in-popup.hide {bottom: -100%;} .heart-in-popup {position: fixed; width: 100%; max-width: 480px; bottom: 0; transition: bottom 0.5s; background-color: #fff; z-index: 10001;} .heart-in-popup .content {display: block; max-height: 60vh; overflow: auto;} .heart-in-popup.on .content {opacity: 1; margin: 0 auto; max-width: 480px; height: auto;} .heart-in-popup .content .content-wrap {background-color: #fff; position: relative; height: 100%; position: relative; background-color: #fff;} .heart-in-popup .content .content-wrap .cart-in-item {display: flex; align-items: center; position: relative; padding: 15px 20px; border-bottom: 1px solid #eee;} .heart-in-popup .content .content-wrap .cart-in-item .thum-img {width: 40px; height: 40px; border-radius: 50%; border: 1px solid #fff;} .heart-in-popup .content .content-wrap .cart-in-item .txt {font-weight: 400; font-style: 14px; margin-left: 20px;} .heart-in-popup .content .content-wrap .cart-in-item .txt span {font-weight: 700;} .heart-in-popup .content .content-wrap .cart-in-item > a {display: flex; align-items: center; justify-content: center; height: 32px; border: 1px solid #FF6B00; border-radius: 5px; color: #FF6B00; padding: 0 15px; position: absolute; right: 20px; font-size: 14px;} .heart-in-popup .content .content-wrap .cart-in-btn {display: flex; padding: 0 20px 20px 20px;} .heart-in-popup .content .content-wrap .cart-in-btn a.close {border: 1px solid #FF6B00; display: flex; align-items: center; justify-content: center; height: 48px; border-radius: 5px; background-color: #fff; color: #FF6B00; font-size: 16px; font-weight: 500; width: 20%;} .heart-in-popup .content .content-wrap .cart-in-btn a.go-cart {display: flex; align-items: center; justify-content: center; height: 48px; border-radius: 5px; background-color: #FF6B00; color: #fff; font-size: 16px; font-weight: 500; width: 80%; margin-left: 8px;} .heart-in-popup.on {bottom: 60px; z-index: 5001; float: inherit;} .heart-in-popup {border-top-right-radius: 16px; border-top-left-radius: 16px; overflow: hidden;} /* 추천상품, 최근본 상품 */ .add_product_wrap {width: 100%; box-sizing: border-box;} .add_product_wrap h6 {font-size: 14px; font-weight: 500; padding-bottom: 15px;} .add_product_wrap h6 span {float: right; padding-right: 20px; font-weight: 400; font-size: 13px;} .add_product_wrap .add_product_swiper {overflow: hidden; z-index: -999;} .add_product_wrap .swiper-wrapper {position: relative; width: 100%; height: 100%; z-index: 1; display: flex; transition-property: transform; box-sizing: content-box;} .add_product_wrap .swiper-slide {background-position: center; background-size: cover; height: 100%; position: relative; transition-property: transform; flex-shrink: 0;} .add_product_item img {max-width: 100%; border-radius: 8px;} .add_product_item .add_product_item_info .tit {font-size: 14px; line-height: 1.3; height:38px; margin: 8px 0 8px 0; font-weight: 400; white-space: normal; overflow: hidden; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} .add_product_item .add_product_item_info .price-wrapper{display: inline-block; line-height: 1; display: flex; position: relative; letter-spacing: -0.21px;} .add_product_item .add_product_item_info .org-price {color: #aeaeae; font-size: 12px; padding-top: 2px; height: 15px;} .add_product_item .add_product_item_info .price {display: inline-block; font-size: 14px; font-weight: 700; letter-spacing: -0.5px; white-space: nowrap;} .add_product_item .add_product_item_info .dc-rate {font-size: 14px; font-weight: 700; color: #FF6B00; display: inline-block; margin-right: 8px; word-break: keep-all;} .add_product_item_info .review-area {display: inline-block; color: #a8a8a8; padding: 6px 0; font-size: 13px; float: left;} .add_product_item_info .review-area .review-area-wrap {width: auto;} .add_product_item_info .review-area .review-area-wrap p {float: left;} .add_product_item_info .review-area .review-area-wrap p:first-child {padding-right: 5px;} .add_product_item_info .review-area .review-area-wrap p.rate {display: flex;} .add_product_item_info .review-area .review-area-wrap p em.star {display: inline-block; background-image: url("https://img.monfood.co.kr/image/common/star.png"); width: 15px; height: 15px; background-size: contain; margin: 1px;} .add_product_item_info .review-area .review-area-wrap span {color: #727272; position: relative; padding-left: 16px; font-size: 12px;} .add_product_item_info .review-area .review-area-wrap span::before {content: ''; display: block; background-image: url("https://img.monfood.co.kr/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: 380px) { .add_product_item .add_product_item_info .dc-rate.event-price {margin-right: 3px;} } @media screen and (max-width: 360px) { .add_product_item .add_product_item_info .dc-rate.event-price {margin-right: 2px;} } /* 카카오 회원 확인 팝업 */ #layer-mask-kakao {position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 21; background-color: rgba(0, 0, 0, 0.7); display: none;} #layer-mask-kakao.on {display: block; animation: show-up-mask 1s ease 0s 1 normal forwards;} @keyframes show-up-mask { 0% {opacity: 0;} 100% {opacity: 1;} } .kakao-popup {position: fixed; left: 50%; top: 50%; width: 400px; max-width: 90vw; max-height: 90vh; transform: translate(-50%,-50%); border: 1px solid transparent; border-radius: 10px; z-index: 5000; box-sizing: border-box; display: none;} .kakao-popup.on {display: block; animation: show-up-popup 0.6s ease 0s 1 normal forwards;} .kakao-popup .body {height: 100%; font-family: noto sans kr;} .kakao-popup .body .wrapper {text-align: center; display: flex; flex-direction: column; align-items: center; background-color: transparent; padding: 20px; position: relative;} .kakao-popup .body .wrapper > .close {position: absolute; right: 0; top: -100%; color: #fff; background: url(https://img.monfood.co.kr/images/common/btn_close_white.png) center center no-repeat; display: block; overflow: hidden; font-size: 0; line-height: 0; text-indent: -9999px; background-size: 20px; width: 20px; height: 20px;} .kakao-popup .body .wrapper > .txt {} .kakao-popup .body .wrapper > .txt em {color: #fff; font-size: 31px; font-weight: 700;} .kakao-popup .body .wrapper > .btn-area {display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 10%;} .kakao-popup .body .wrapper > .btn-area a {width: 50%; height: 48px; background-color: #FFE500; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 400;} /*장바구니 아이콘 애니메이션 start */ .basket_area{position: fixed; top:50%; right: 50%; z-index: 20000; display: none; width: 140px; height: 140px; margin: -70px -70px 0 0;} .basket_area.active{display: block; animation-name: basket_move; animation-duration: 0.8s; animation-delay: 0.3s; -webkit-animation-fill-mode:both; } @keyframes basket_move { 0% { width: 140px; height: 140px;} 100% {width: 0; height: 0; top:80px; left: 50%; transform: translateX(213px);} } @media screen and (max-width: 450px){ @keyframes basket_move { 0% { width: 140px; height: 140px;} 100% {width: 0; height: 0; top: 80px; right: 100px;} } } .basket_area img{width: 100%; height: 100%;} /*장바구니 아이콘 애니메이션 end */ /*찜하기 아이콘 애니메이션 start */ .heart_area{position: fixed; bottom:50%; left: 50%; z-index: 20000; display: none; width: 140px; height: 140px; transform: translate(-50%, 0);} .heart_area.active{display: block; animation-name: heart_move; animation-duration: 0.8s; animation-delay: 0.3s; -webkit-animation-fill-mode: both; } @keyframes heart_move { 0% { width: 140px; height: 140px;} 100% {width: 0px; height: 0px; bottom: 35px; left: 50%; transform: translateX(-210px);} } @media screen and (max-width: 450px){ @keyframes heart_move { 0% { width: 140px; height: 140px;} 100% {width: 0px; height: 0px; bottom: 35px; left: 29px;} } } .heart_area img {width: 100%; height: 100%;} /*찜하기 아이콘 애니메이션 end */ /* 멤버십 상품 */ .prod-info-wrapper .panel-heading .price-wrapper.membership { align-items: flex-start; } .prod-info-wrapper .panel-heading .price-wrapper.membership .re-price-wrapper .normal-price { margin-bottom: 10px; } /*정상판매*/ .membership-redirect-popup { width: 240px; max-width: 400px; padding: 20px 15px; color: #fff; position: fixed; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%); background: rgba(0, 0, 0, 0.70); border-radius: 8px; display: none; text-align: center; line-height: 1.5em; } /* 240703 멤버십 뱃지 */ .new-image-slider .swiper-slide .membership_badge { border-radius: 4px; background: linear-gradient(90deg, #FF8A00 0%, #FF6B00 100%); padding: 0 8px; height: 25px; display: flex; align-items: center; justify-content: center; color: #fff; position: absolute; left: 8px; top: 8px; font-size: 13px; font-weight: 400; } /* 타임특가 레이블 */ .active-timer-notice { background: rgb(51, 143, 255); background: linear-gradient(90deg, rgba(51, 143, 255, 1) 0%, rgba(11, 182, 255, 1) 100%); border-radius: 4px; display: inline-block; color: #fff; padding: 6px 6px; font-size: clamp(12px, 3vw, 13px); margin-left: 6px; } /* 상품/토스트 쿠폰 버튼 */ #product_coupon_btn_wrap { display: none; } #product_coupon_btn_wrap button { margin: 0 !important; padding-bottom: 2px; border: 1px solid #ff6b00; background-color: #FFF; color: #ff6b00; width: auto; height: 40px; padding: 3px 12px; border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; } #product_coupon_btn_wrap button > span { font-size: 14px; line-height: 150%; font-weight: 500; } #product_coupon_btn_wrap button > img { width: 16px; height: 16px; margin-left: 4px; padding-right: 0; }