@charset "utf-8";
/* doc.css는 디자인페이지 스타일을 정의합니다. */

.doc-tit {position:relative; text-align:center; margin-bottom:68px; font-family: 'Recipekorea'; font-weight:normal; font-size:40px; line-height:1em; color:#2c2c2c;}
.doc-tit .t-dot {position:relative; display:inline-block; padding-top:28px;}
.doc-tit .t-dot:after {content:""; position:absolute; top:2px; left:50%; width:10px; height:10px; margin-left:-5px; border-radius:50%; overflow:hidden;}
.doc-tit .t-dot.dot-c1:after {background:#e41e26;}
.doc-tit .t-dot.dot-c2:after {background:#f7941e;}
.doc-tit .t-dot.dot-c3:after {background:#fcb040;}

.doc-cnt {margin-bottom:160px;}
.doc-cnt:last-child {margin-bottom:0;}

.sub-tab {margin-bottom:50px;}
.sub-tab ul {display:table; table-layout:fixed; width:100%;}
.sub-tab ul li {display:table-cell; vertical-align:top; width:auto !important; max-width:50%;}
.sub-tab ul li a {display:block; width:100%; height:60px; background:#f4f4f4; border:1px solid #dfdfdf; border-right:0; text-align:center; font-size:16px; line-height:58px; color:#505050;}
.sub-tab ul li:last-child a {border-right:1px solid #dfdfdf;}
/* .sub-tab ul li.active a {border:1px solid #009046; background:#009046; color:#fff;} */
.sub-tab ul li.active a {border:1px solid #125635; background:#125635; color:#fff;}
.sub-tab ul li.active + li a {border-left:0;}

.mypage-tab {margin-bottom:50px;}
.mypage-tab ul {display:flex; width:100%; border-right: 1px solid #dfdfdf; border-bottom: 1px solid #dfdfdf;}
.mypage-tab ul {flex-wrap: wrap;}
.mypage-tab ul li {display:flex; align-items: center; justify-content: center; vertical-align:top; width:20%; max-width:50%; flex: 1 0 auto;}
.mypage-tab ul li a {display:block; width:100%; padding: 0 21px; height:60px; background:#f4f4f4; border:1px solid #dfdfdf; border-bottom: 0; border-right:0; text-align:center; font-size:15px; line-height:58px; color:#505050;}
/* .mypage-tab ul li.active a {border:1px solid #689354; background:#689354; color:#fff;} */
.mypage-tab ul li.active a {border:1px solid #125635; background:#125635; color:#fff;}
.mypage-tab ul li.active + li a {border-left:0;}

.modal {max-width:535px; border-radius:20px; border-top-right-radius:0 !important; background-image:url('../images/shop/popbg.png'); background-size:cover; background-repeat:no-repeat; background-position:50% 50%; box-shadow:none;}
.modal a.close-modal {width:29px; height:29px; top:-15px; right:-15px; background-size:contain; background-image:url('../images/shop/modal_cls.png');}
.layer_popup {padding:0; display:none; width:100%; position:relative; z-index:100 !important;}
.modal-inner {padding:30px 45px; color: #fff;}
.modal .buttons {margin:55px 0 0;}
.modal-inner .img img {display:block; filter: grayscale(1) brightness(10)}
.modal-inner p {line-height:1.63em;font-size: clamp(15px, calc( 20 / 500 * 100vw ), 20px);}
.modal-inner .txt {margin:15px 0 7px; font-size: clamp(20px, calc( 32 / 500 * 100vw ), 32px); line-height: 1.5em;}
.modal-inner .btn-pack.medium {height:40px; padding:0 15px; line-height:36px; font-size:14px; color:#fff; border-color:rgba(255,255,255,.3); background-color: unset;}

.layer_popup.edit{background-image: url('/images/shop/car-bg.jpg');}
.modal-inner.edit{padding-bottom:95px;}
.modal-inner.edit .tit{font-size: clamp(1.125rem, 0.8947rem + 0.9211vw, 2rem);color: #252525;line-height:1.3em;margin-bottom:clamp(0.3125rem, 0.148rem + 0.6579vw, 0.9375rem);;}
.modal-inner.edit .tit strong{font-weight:700;color: #005834;}
.modal-inner.edit .tt{color: #242424;font-size:clamp(0.875rem, 0.7763rem + 0.3947vw, 1.25rem);line-height:1.40em;}
.modal-inner.edit .tt strong{font-weight:800;color: #005834;}
.modal-inner.edit .buttons{margin-top:30px;}
.modal-inner.edit .btn-pack.medium{background-color: #005834;border-color:#005834;color: #fff;}

.coupon-list .item {display: flex; width: 100%; line-height: 1.6em;}
.coupon-list .item:not(:last-child) {margin-bottom: 18px;}
.coupon-list .discount {display: flex; align-items: center; justify-content: center; text-align: center; width: 19.6%; font-weight: 600; font-size: 22px; color: #689354; border: 1px solid #ddd; border-radius: 8px; padding: 10px;}
.coupon-list .info {flex: 1; border: 1px solid #ddd; border-right: 0; border-radius: 8px; padding: 30px 40px;}
.coupon-list .tit {font-weight: 700; font-size: 22px; color: #242424; margin-bottom:8px;}
.coupon-list .date span:not(:last-child) {position: relative; margin-right:9px; padding-right: 12px;}
.coupon-list .date span:not(:last-child):before {position: absolute; content: ''; right: 0; top: 50%; margin-top: -7px; width: 1px; height: 16px; background: #ddd;}
.coupon-list .used .tit,
.coupon-list .used .discount {color: #999;}
.coupon-list .used .date span,
.coupon-list .used {color: #afafaf;}

.pop-coupon-list {margin-bottom: 30px;}
.pop-coupon-list .item {display: flex; justify-content: space-between; align-items: center; position: relative; padding: 23px 20px;}
.pop-coupon-list .item:before {position: absolute; content: ''; top: 0; right: 0; bottom: 0; left: 0; border-radius: 8px; border: 1px solid #ddd; pointer-events: none;}
.pop-coupon-list .item:has(input:checked):before {border-color: #125635;}
.pop-coupon-list .item:not(:last-child) {margin-bottom: 18px;}
.pop-coupon-list .item .checkbox input {width: 100%; height: 100%; z-index: 1;}
.pop-coupon-list .checkbox {width: 26px; height: 26px; position: unset;}
.pop-coupon-list .checkbox label:before {width: 26px; height: 26px; border-radius: 100%; background-color: #fff; border-width: 2px;}
.pop-coupon-list .discount {font-weight: 700; font-size: 23px; color: #125635; margin-bottom: 12px;}
.pop-coupon-list .tit {font-weight: 500; font-size: 17px; color: #242424; margin-bottom: 5px;}
.pop-coupon-list .info-wrap span:not(:last-child) {position: relative; margin-right:9px; padding-right: 12px;}
.pop-coupon-list .info-wrap  span:not(:last-child):before {position: absolute; content: ''; right: 0; top: 50%; margin-top: -7px; width: 1px; height: 16px; background: #ddd;}

.pop-coupon-list .unavailable .discount {color: #999;}
.pop-coupon-list .unavailable .tit,
.pop-coupon-list .unavailable .info {color: #afafaf;}
.pop-coupon-list .unavailable .condition {color: #d12301;}

/* .promotion-detail-view .example {}
.promotion-detail-view .example iframe {}
.promotion-detail-view .example iframe {position: relative; width: 100%; height: 0; padding-bottom: 56.25%; overflow: hidden;}
.promotion-detail-view  .example iframe {position: absolute; width: 100%; height: auto; max-width: 100%; min-height: 100%; left: 0; top: 50%; transform: translateY(-50%); object-fit: cover;}
 */

.coupon-boxes {margin-top: 40px;}
.coupon-boxes ul {display: flex; flex-wrap: wrap; gap: 40px 0; margin: 0 -15px;}
.coupon-boxes ul li {width: 50%; padding: 0 15px; font-size: 15px;}
.coupon-boxes .thumb {position: relative; width: 100%; padding-bottom: 40.40404%; margin-bottom: 16px; overflow: hidden; border-radius: 8px;}
.coupon-boxes .thumb:after {position: absolute; content: ''; top: 0; right: 0; bottom: 0; left: 0; border-radius: 8px; border: 1px solid #ddd;}
.coupon-boxes .thumb img {position: absolute; width: 100%; height: auto; max-width: 100%; min-height: 100%; left: 0; top: 50%; transform: translateY(-50%); object-fit: cover;}
.coupone-info span:not(:last-child) {position: relative; margin-right: 15px; padding-right: 15px;}
.coupone-info span:not(:last-child):before {position: absolute; content: ''; right: 0; top: 50%; margin-top: -5px; width: 1px; height: 10px; background: #ddd;}
.coupon-boxes .count {display: flex; align-items: center; justify-content: center; width: 70px; height: 28px; margin-top: 5px; background: #125635; border-radius: 5px; font-weight: 500; color: #fff;}

.coupon-boxes .used .thumb:after {background: rgba(0,0,0,.25);}
.coupon-boxes .used .coupone-info {color: #808080;}
.coupon-boxes .used .count {background: #808080;}

.pop_test{opacity:0;position:fixed;left:0;bottom:0;width:20px;height:20px;display: block;z-index:100;}

.point-view-wrap{max-width:560px;}
.point-view{margin:20px 0;background-color: #f9fafc;border-top:1px solid #e9ecf3;border-bottom:1px solid #e9ecf3;padding:0 25px;font-size:14px;font-weight:700;line-height:1.2em;}
.point-view .row{padding:15px 0;border-bottom:1px solid #e9ecf3;display:flex;color:#ff0173;align-items:flex-start;}
.point-view .row:last-child{border-bottom:0;}
.point-view .row .tit-wrap{min-width:0;width:1%;flex:1 1 auto;display:flex;align-items:center;gap:10px;margin-right:20px;}
.point-view .row .tit-wrap .ic{display:flex;justify-content:center;align-items:center;}
.point-view .row .tt-wrap{padding-top:3px;}
.point-view .row .tt-wrap ul li{display:flex;text-align:right;justify-content:flex-end;margin-bottom:10px;}
.point-view .row .tt-wrap ul li:last-child{margin-bottom:0;}
.point-view .row .tt-wrap ul li .tt{color: #000;}
.point-view .row .tt-wrap ul li .price{width:clamp(5rem, 3.8487rem + 4.6053vw, 9.375rem);}
.point-view .row.st2{color: #009046;}