/* 멤버십 공통 */
.mall-wapper.membership {min-height: 100%; position: relative; line-height: 120%; padding-bottom: 60px; padding-top: 48px;} /* 헤더, 하단 고정버튼 만큼 여백추가 */


/* 체크박스 커스텀 */
input[type="checkbox"] {clip: rect(1px, 1px, 1px, 1px); position: absolute; width: 1px; height: 1px;}
input[type="checkbox"] + label {display: block; width: 24px; height: 24px; background: url('/images/membership/check_g.svg') no-repeat 0 0px / contain; cursor: pointer;}
input[type='checkbox']:checked + label {background: url('/images/membership/check.svg') no-repeat 0 1px / contain;}


/* 라디오버튼 커스텀 */
input[type='radio'] {-webkit-appearance: none; width:18px; height:18px; border:1px solid #d7d7d7; border-radius:50%; outline:none; background:#fff; position: relative;} 
input[type='radio']:before {content:''; display:block; width: 10px; height: 10px; border-radius: 50%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);} 
input[type='radio']:checked:before {background:#FF6B00;} 
input[type='checkbox'] {accent-color: #FF6B00;}


/* 레이어팝업 - 딤,애니메이션 */
#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.on {display: block; animation: show-up-mask 1s ease 0s 1 normal forwards;} 
#layer-mask2 {position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 5000; background-color: rgba(0, 0, 0, 0.6); display: none;} 
#layer-mask2.on {display: block; animation: show-up-mask 1s ease 0s 1 normal forwards;}
#layer-mask3 {position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 5000; background-color: rgba(0, 0, 0, 0.6); display: none;}
#layer-mask3.on {display: block; animation: show-up-mask 1s ease 0s 1 normal forwards;}
@keyframes show-up-mask {
 0% {opacity: 0;} 
 100% {opacity: 1;} 
}
/* @keyframes show-up-popup {
 0% {opacity: 0; transform: translate(-50%,-50%) scale(0);} 
 40% {opacity: 0.5; transform: translate(-50%,-50%) scale(1.03);} 
 70% {opacity: 1; transform: translate(-50%,-50%) scale(0.98);} 
 100% {opacity: 1; transform: translate(-50%,-50%) scale(1);} 
} */


/* 멤버십 구독 */
.membership-banner {width: 100%;} 
.membership-banner img {width: 100%;} 
.membership-notice-saved {background-color: #fff; padding: 20px;} 
.membership-notice-saved h3 {font-size: 14px; color: #000000; font-weight: 500; position: relative; padding-left: 28px;} 
.membership-notice-saved h3::before {content: ''; background: url(/images/membership/warning_icon.svg) center center no-repeat; background-size: 24px; width: 24px; height: 24px; border-radius: 50%; position: absolute; left: 0; top: 50%; transform: translate(0,-50%);} 
.membership-notice-saved ul {margin-top: 10px;} 
.membership-notice-saved ul li {font-size: 12px; color: #777; font-weight: 400; letter-spacing: -0.18px; position: relative; padding-left: 10px;} 
.membership-notice-saved ul li::before {content: ''; background-color: #949494; width: 4px; height: 4px; border-radius: 50%; position: absolute; left: 0; top: 10px; transform: translate(0,-50%);} 
.membership-notice-saved ul li + li {margin-top: 4px;} 
.membership-notice {background-color: #F5F5F5; padding: 20px;} 
.membership-notice h3 {font-size: 14px; color: #000000; font-weight: 500; position: relative; padding-left: 28px;} 
.membership-notice h3::before {content: ''; background: url(/images/membership/warning_icon.svg) center center no-repeat; background-size: 24px; width: 24px; height: 24px; border-radius: 50%; position: absolute; left: 0; top: 50%; transform: translate(0,-50%);} 
.membership-notice ul {margin-top: 10px;} 
.membership-notice ul li {font-size: 12px; color: #777; font-weight: 400; letter-spacing: -0.165px; position: relative; padding-left: 10px; word-break: keep-all;}
.membership-notice ul li::before {content: ''; background-color: #949494; width: 4px; height: 4px; border-radius: 50%; position: absolute; left: 0; top: 10px; transform: translate(0,-50%);}
.membership-notice ul li + li {margin-top: 4px;} 


/* 멤버십 전용 체험단 */
.membership-experience {position: relative; padding: 30px 20px; background: url(/images/membership/experience_bn.jpg) center center no-repeat; background-size: cover;}
.membership-experience::after {content: ''; position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.5); width: 100%; height: 100%;}
.membership-experience em {display: block; font-size: 18px; font-weight: 300; color: #fff; text-align: center; width: 100%; position: relative; z-index: 1;}
.membership-experience a {display: flex; align-items: center; justify-content: center; max-width: 400px; height: 48px; color: #fff; font-size: 16px; font-weight: 500; margin: 15px auto 0 auto; background: rgba(255, 255, 255, 0.20); border: 1px solid #767676; border-radius: 8px; position: relative; z-index: 1;}


/* 멤버십 only 단독 특가 상품 */
.membership-only-price {position: relative; padding: 30px 0; background-color: #fff;}
.membership-only-price em {font-size: 14px; font-weight: 700; line-height: 150%; display: block; width: 100%; text-align: center;}
.membership-only-price p {font-size: 18px; font-weight: 300; display: block; width: 100%; text-align: center; margin-top: 5px;}
.membership-only-price ul {width: 100%; overflow: hidden; box-sizing: border-box; white-space: nowrap; position: relative; display: flex;}
.membership-only-price ul li {white-space: nowrap; animation: itemloop 2s linear infinite; border-radius: 50%; overflow: hidden;}
.membership-only-price ul li + li {margin-left: 8px;}
.membership-only-price ul li a {display: block; width: 100%; height: 100%;}
.membership-only-price ul li a img {width: 100%; height: 100%; object-fit: cover; object-position: center;}
:root {
    --size: clamp(10rem, 1rem + 40vmin, 30rem);
    --gap: calc(var(--size) / 20);
    --scroll-end: calc(-100% - var(--gap));
}
@keyframes scroll-x {
    from {transform: translateX(0);}
    to {transform: translateX(var(--scroll-end));}
}
.membership-only-price .wrapper {display: flex; flex-direction: column; gap: var(--gap); margin: auto; max-width: 100vw; margin-top: 25px;}
.membership-only-price .wrapper .marquee {display: flex; overflow: hidden; user-select: none; gap: var(--gap);
  /* -webkit-mask-image: linear-gradient(
    var(--mask-direction, to right),
    hsl(0 0% 0% / 0),
    hsl(0 0% 0% / 1) 20%,
    hsl(0 0% 0% / 1) 80%,
    hsl(0 0% 0% / 0)
  ); */
  /* mask-image: linear-gradient(
    var(--mask-direction, to right),
    hsl(0 0% 0% / 0),
    hsl(0 0% 0% / 1) 20%,
    hsl(0 0% 0% / 1) 80%,
    hsl(0 0% 0% / 0)
  ); */
}
.membership-only-price .wrapper .marquee .marquee_group {flex-shrink: 0; display: flex; align-items: center; justify-content: space-around; gap: var(--gap); min-width: 100%; animation: scroll-x 20s linear infinite;}
.membership-only-price .wrapper .marquee .marquee_group a {display: grid; place-items: center; aspect-ratio: 1/1; border-radius: 50%; overflow: hidden; min-width: 100px; max-width: 110px;}
.membership-only-price .wrapper .marquee .marquee_group a img {width: 100%; height: 100%; object-fit: cover;}
@media screen and (max-width: 360px) {
    .membership-only-price .wrapper .marquee .marquee_group a {max-width: 100px;}
}


/* 멤버십 하단 버튼 */
.membership-bottom {overflow: hidden; width: 100%; max-width: 480px; position: fixed; bottom: 0; z-index: 10;} 
.membership-bottom .container {position: relative;} 
.membership-bottom .container .membership-bottom-btn {position: relative; z-index: 5002;} 
.membership-bottom .container .membership-bottom-btn a {background-color: #FF6B00; color: #fff; height: 60px; width: 100%; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700;} 


/* 멤버십 하단 버튼 -> 토스트 팝업 */
#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;} 
#layer-mask.on {display: block;} 
.membership-bottom .container .membership-start-popup {position: fixed; width: 100%; max-width: 480px; bottom: -100%; transition: bottom 0.5s; z-index: 100; background-color: #fff;} 
.membership-bottom .container .membership-start-popup .content {display: block; max-height: 60vh; overflow: auto;}
.membership-bottom .container .membership-start-popup.on .content {opacity: 1; margin: 0 auto; max-width: 480px; height: auto;} 
.membership-bottom .container .membership-start-popup .content .content-wrap {background-color: #fff; position: relative; padding: 20px;}
.membership-bottom .container .membership-start-popup .content .content-wrap {height: 100%;} 
.membership-bottom .container .membership-start-popup .content .content-wrap {position: relative; background-color: #fff;} 
.membership-bottom .container .membership-start-popup .content .content-wrap a.close {position: absolute; left: 50%; top: 15px; transform: translate(-50%,0); background-color: #79747E; opacity: 0.4; width: 32px; height: 4px; border-radius: 100px;}
.membership-bottom .container .membership-start-popup .content .content-wrap a.close > span {display: block; overflow: hidden; font-size: 0; line-height: 0; text-indent: -9999px;}
.membership-bottom .container.on .membership-start-popup.on {bottom: 60px; z-index: 5001;} 
.membership-start-popup {border-top-right-radius: 16px; border-top-left-radius: 16px; overflow: hidden;} 
.membership-start-popup .content .content-wrap h3 {font-size: 16px; font-weight: 500; color: #333; display: block; text-align: center; margin-bottom: 20px;} 
.membership-start-popup .content .content-wrap ul.select li {border: 1px solid transparent; border-radius: 8px; margin-bottom: 16px;} 
.membership-start-popup .content .content-wrap ul.select li.on {border: 1px solid #FF8730;} 
.membership-start-popup .content .content-wrap ul.select li:hover {border: 1px solid #FF8730;} 
.membership-start-popup .content .content-wrap ul.select li > label {padding: 16px; display: flex; align-items: baseline; cursor: pointer;} 
.membership-start-popup .content .content-wrap ul.select li > label input {   flex-shrink: 0; margin-right: 10px;} 
.membership-start-popup .content .content-wrap ul.select li > label label {font-size: 16px; color: #333; font-weight: 700; cursor: pointer;} 
.membership-start-popup .content .content-wrap ul.select li > label p {color: #888; font-size: 13px; margin-top: 5px; line-height: 150%;} 
.membership-start-popup .content .content-wrap ul.select li > label p span {color: #FF6B00; font-weight: 700;} 
.membership-start-popup .content .content-wrap ul.select li .fare-title {display: flex; align-items: center;}
.membership-start-popup .content .content-wrap ul.select li .fare-title .popular {border-radius: 8px 8px 8px 0px; background: linear-gradient(90deg, #338FFF 0%, #0BB6FF 100%); color: #fff; font-weight: 500; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; padding: 2px 6px; margin-left: 6px; gap: 2px;}
.membership-start-popup .content .content-wrap ul.select li .fare-title .popular > img {width: 14px; height: 14px; padding-top: 1px;}
.membership-start-popup .content .content-wrap ul.price {background: #F5F5F5; padding: 16px 20px; border-radius: 8px; margin-top: 16px;} 
.membership-start-popup .content .content-wrap ul.price li {display: flex; justify-content: space-between; font-size: 14px;} 
.membership-start-popup .content .content-wrap ul.price li + li {margin-top: 8px;} 
.membership-start-popup .content .content-wrap ul.price li span {letter-spacing: -0.14px; color: #333; font-weight: 500;} 
.membership-start-popup .content .content-wrap ul.price li em {color: #000000; font-weight: 700;} 
.membership-start-popup .content .content-wrap ul.price li:first-child em {color: #FF6B00; font-weight: 700;} 




/* 멤버십 구독 카드정보 입력 (simple_payment_write_v2.php) */
.membership-loader {position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 5001; }
.membership-loader > img {width: 90px; height: 90px;}
.membership-payment-info {padding: 0 20px;} 
.membership-payment-info ul.price {background: #F5F5F5; padding: 16px 20px; border-radius: 8px; margin-top: 20px;} 
.membership-payment-info ul.price li {display: flex; justify-content: space-between; font-size: 14px;} 
.membership-payment-info ul.price li + li {margin-top: 8px;} 
.membership-payment-info ul.price li span {letter-spacing: -0.14px; color: #333; font-weight: 500;} 
.membership-payment-info ul.price li em {color: #000000; font-weight: 700;} 
.membership-payment-info ul.price li:nth-of-type(1) em {color: #FF6B00; font-weight: 700;} 
.membership-payment-info ul.price li:nth-of-type(2) em {color: #FF6B00; font-weight: 700;} 
.simCard_register {padding: 0 20px;}
.simCard_register p {text-align: center; margin: 16px 0; font-size: 14px;}
.membership-payment-agree .membership-payment-notice {background-color: #F5F5F5; padding: 20px;} 
.membership-payment-agree .membership-payment-notice ul li {font-size: 12px; color: #777; font-weight: 400; letter-spacing: -0.18px; position: relative; padding-left: 10px;} 
.membership-payment-agree .membership-payment-notice ul li::before {content: ''; background-color: #949494; width: 4px; height: 4px; border-radius: 50%; position: absolute; left: 0; top: 10px; transform: translate(0,-50%);} 
.membership-payment-agree .membership-payment-notice ul li + li {margin-top: 4px;} 
.user-agree-box {margin: 20px 0;}
.user-agree {justify-content: space-between; align-items: center; position: relative; padding: 0 20px;} 
.user-agree + .user-agree {margin-top: 8px;}
.user-agree .user-agree-tit {display: block; width: 100%; font-weight: 500; font-size: 18px;} 
.user-agree .user-agree-check {display: flex; align-items: center; position: relative;} 
.user-agree .user-agree-check label.check-box {display: flex; align-items: center; position: relative; cursor: pointer; font-size: 14px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;} 
.user-agree .user-agree-check label.check-box p.user-agree-txt {margin-left: 8px; font-size: 13px; color: #666;} 
.user-agree .user-agree-check > a.view-agree {color: #333; font-size: 13px; font-weight: 400; position: absolute; right: 0; text-decoration: underline;} 
.user-agree > p {font-size: 14px; color: #333;}
#membership-start-popup {position: fixed; left: 50%; top: 50%; width: 470px; 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;} 
#membership-start-popup.on {display: block; animation: show-up-popup 0.6s ease 0s 1 normal forwards;} 
#membership-start-popup .body {height: 100%; font-family: noto sans kr;} 
#membership-start-popup .body .wrapper {text-align: center; display: flex; flex-direction: column; align-items: center; background-color: #fff; padding: 20px;} 
#membership-start-popup .body .wrapper p {color: #000000; font-weight: 500; font-size: 16px; z-index: 100;} 
#membership-start-popup .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;} 
#membership-start-popup .body .wrapper .membership-payment-info {padding: 0 20px; width: 100%;} 
#membership-start-popup .body .wrapper .membership-payment-info ul.price {background: #F5F5F5; padding: 16px 20px; border-radius: 8px; margin: 16px 0;} 
#membership-start-popup .body .wrapper .membership-payment-info ul.price li {display: flex; justify-content: space-between; font-size: 14px;} 
#membership-start-popup .body .wrapper .membership-payment-info ul.price li + li {margin-top: 8px;} 
#membership-start-popup .body .wrapper .membership-payment-info ul.price li span {letter-spacing: -0.14px; color: #333; font-weight: 500;} 
#membership-start-popup .body .wrapper .membership-payment-info ul.price li em {color: #000000; font-weight: 700;} 
#membership-start-popup .body .wrapper .membership-payment-info ul.price li:nth-of-type(1) em {color: #FF6B00; font-weight: 700;} 
#membership-start-popup .body .wrapper .membership-payment-info ul.price li:nth-of-type(2) em {color: #FF6B00; font-weight: 700;}

/* 
.membership-agree-popup1 {position: fixed; left: 50%; top: 50%; width: 470px; 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;} 
.membership-agree-popup1.on {display: block; animation: show-up-popup 0.6s ease 0s 1 normal forwards;} 
.membership-agree-popup1 .body {height: 100%; font-family: noto sans kr;} 
.membership-agree-popup1 .body .wrapper {text-align: center; display: flex; flex-direction: column; align-items: center; background-color: #fff; padding: 20px;} 
.membership-agree-popup1 .body .wrapper p {color: #000000; font-weight: 500; font-size: 16px; z-index: 100;} 
.membership-agree-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;} 
*/



/* 멤버십 해지 토스트 팝업 */
#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;} 
#layer-mask.on {display: block;} 
.membership-bottom .container .membership-end-popup {position: fixed; width: 100%; max-width: 480px; bottom: -100%; transition: bottom 0.5s; z-index: 100; background-color: #fff;} 
.membership-bottom .container .membership-end-popup .content {display: block;} 
.membership-bottom .container .membership-end-popup.on .content {opacity: 1; margin: 0 auto; max-width: 480px; height: auto;} 
.membership-bottom .container .membership-end-popup .content .content-wrap {background-color: #fff; position: relative; padding: 42px 20px 20px 20px;} 
.membership-bottom .container .membership-end-popup .content .content-wrap {height: 100%;} 
.membership-bottom .container .membership-end-popup .content .content-wrap {position: relative; background-color: #fff;} 
.membership-bottom .container .membership-end-popup .content .content-wrap a.close {position: absolute; left: 50%; top: 15px; transform: translate(-50%,0); background-color: #79747E; opacity: 0.4; width: 32px; height: 4px; border-radius: 100px;}
.membership-bottom .container .membership-end-popup .content .content-wrap a.close > span {display: block; overflow: hidden; font-size: 0; line-height: 0; text-indent: -9999px;}
.membership-bottom .container.on .membership-end-popup.on {bottom: 0px; z-index: 5001;} 
.membership-end-popup {border-top-right-radius: 16px; border-top-left-radius: 16px; overflow: hidden;} 
.membership-end-popup .content .content-wrap h3 {font-size: 16px; font-weight: 500; color: #333; display: block; text-align: center; margin-bottom: 28px; letter-spacing: -0.24px;} 
.membership-end-popup .content .content-wrap h3 span {color: #FF6B00; font-size: 16px;}
.membership-end-popup .content .content-wrap .info {background-color: #F5F5F5; border-radius: 8px; padding: 24px 12px; margin-top: 20px;}
.membership-end-popup .content .content-wrap .info ul li {letter-spacing: -0.21px; font-size: 14px; font-weight: 400; position: relative; padding-left: 10px;}
.membership-end-popup .content .content-wrap .info ul li::before {content: ''; position: absolute; left: 0; top: 50%; transform: translate(0,-50%); width: 3px; height: 3px; border-radius: 50%; background-color: #000;}
.membership-end-popup .content .content-wrap .info ul li > span {font-weight: 700;}
.membership-end-popup .content .content-wrap .info ul li img {margin-left: 5px; width: 20px; height: 20px; vertical-align: -5px;}
.membership-end-popup .content .content-wrap .info ul li + li {margin-top: 8px;}
.membership-end-popup .content .btn-area {display: flex; border-top: 1px solid #D9D9D9; padding: 12px 20px;}
.membership-end-popup .content .btn-area button {width: 50%; font-size: 16px; font-weight: 500;}
.membership-end-popup .content .btn-area button.end {width: 50%; background-color: #fff; color: #949494; border: 1px solid #949494; border-radius: 5px; height: 48px; margin-right: 8px;}
.membership-end-popup .content .btn-area button.stay {width: 50%; background-color: #FF6B00; color: #fff; border-radius: 5px; height: 48px;}
.membership-bottom .container .membership-end-popup2 {position: fixed; width: 100%; max-width: 480px; bottom: -100%; transition: bottom 0.5s; z-index: 100; background-color: #fff;} 
.membership-bottom .container .membership-end-popup2 .content {display: block;} 
.membership-bottom .container .membership-end-popup2.on .content {opacity: 1; margin: 0 auto; max-width: 480px; height: auto;} 
.membership-bottom .container .membership-end-popup2 .content .content-wrap {background-color: #fff; position: relative; padding: 42px 20px 20px 20px;} 
.membership-bottom .container .membership-end-popup2 .content .content-wrap {height: 100%;} 
.membership-bottom .container .membership-end-popup2 .content .content-wrap {position: relative; background-color: #fff;} 
.membership-bottom .container .membership-end-popup2 .content .content-wrap a.close {position: absolute; left: 50%; top: 15px; transform: translate(-50%,0); background-color: #79747E; opacity: 0.4; width: 32px; height: 4px; border-radius: 100px;}
.membership-bottom .container .membership-end-popup2 .content .content-wrap a.close > span {display: block; overflow: hidden; font-size: 0; line-height: 0; text-indent: -9999px;}
.membership-bottom .container.on .membership-end-popup2.on {bottom: 0px; z-index: 5001;} 
.membership-end-popup2 {border-top-right-radius: 16px; border-top-left-radius: 16px; overflow: hidden;} 
.membership-end-popup2 .content .content-wrap h3 {font-size: 16px; font-weight: 500; color: #333; display: block; text-align: center; margin-bottom: 28px; letter-spacing: -0.24px;} 
.membership-end-popup2 .content .content-wrap h3 span {color: #FF6B00; font-size: 16px;}
.membership-end-popup2 .content .content-wrap .info {background-color: #F5F5F5; border-radius: 8px; padding: 24px 12px; margin-top: 20px;}
.membership-end-popup2 .content .content-wrap .info ul li {letter-spacing: -0.21px; font-size: 14px; font-weight: 400; position: relative; padding-left: 10px;}
.membership-end-popup2 .content .content-wrap .info ul li::before {content: ''; position: absolute; left: 0; top: 50%; transform: translate(0,-50%); width: 3px; height: 3px; border-radius: 50%; background-color: #000;}
.membership-end-popup2 .content .content-wrap .info ul li > span {font-weight: 700;}
.membership-end-popup2 .content .content-wrap .info ul li img {margin-left: 5px; width: 20px; height: 20px; vertical-align: -5px;}
.membership-end-popup2 .content .content-wrap .info ul li + li {margin-top: 8px;}
.membership-end-popup2 .content .btn-area {display: flex; border-top: 1px solid #D9D9D9; padding: 12px 20px;}
.membership-end-popup2 .content .btn-area button {width: 50%; font-size: 16px; font-weight: 500;}
.membership-end-popup2 .content .btn-area button.end {width: 50%; background-color: #fff; color: #949494; border: 1px solid #949494; border-radius: 5px; height: 48px; margin-right: 8px;}
.membership-end-popup2 .content .btn-area button.stay {width: 50%; background-color: #FF6B00; color: #fff; border-radius: 5px; height: 48px;}


/* 6. 결제수단 선택 */
.membership-notice2 {background-color: #fff; padding: 20px;} 
.membership-notice2 h3 {font-size: 14px; color: #000000; font-weight: 500; position: relative; padding-left: 28px;} 
.membership-notice2 h3::before {content: ''; background: url(/images/membership/warning_icon.svg) center center no-repeat; background-size: 24px; width: 24px; height: 24px; border-radius: 50%; position: absolute; left: 0; top: 50%; transform: translate(0,-50%);} 
.membership-notice2 ul {margin-top: 10px;} 
.membership-notice2 ul li {font-size: 12px; color: #777; font-weight: 400; letter-spacing: -0.18px; position: relative; padding-left: 10px;} 
.membership-notice2 ul li::before {content: ''; background-color: #949494; width: 4px; height: 4px; border-radius: 50%; position: absolute; left: 0; top: 10px; transform: translate(0,-50%);} 
.membership-notice2 ul li + li {margin-top: 4px;} 

.membership-payment-info-wrap {padding: 0 20px;}
.membership-payment-info-wrap h2 {font-size: 16px; font-weight: 500; margin: 16px 0;}
.membership-payment-info-wrap .membership-payment-info {position:relative; border: 1px solid #999; border-radius: 8px; padding: 16px 20px;} 
.membership-payment-info-wrap .membership-payment-info .card .name {font-size: 16px; color: #333; font-weight: 500; padding-left: 30px; position: relative; letter-spacing: -0.16px;}
.membership-payment-info-wrap .membership-payment-info .card .name::before {content: ''; background: url(/images/membership/card.svg) center center no-repeat; background-size: 24px; width: 24px; height: 24px; border-radius: 50%; position: absolute; left: 0; top: 50%; transform: translate(0,-50%); margin-top: 2px;}
.membership-payment-info-wrap .membership-payment-info .card .num {color: #555; font-size: 14px; margin-top: 5px; padding-left: 30px;}
.membership-payment-info-wrap .membership-payment-info ul.price {background: #fff; margin-top: 20px; border-top: 1px solid #D9D9D9; border-radius: 0; padding: 16px 0 0 0;} 
.membership-payment-info-wrap .membership-payment-info ul.price li {display: flex; justify-content: space-between; font-size: 14px;} 
.membership-payment-info-wrap .membership-payment-info ul.price li + li {margin-top: 8px;} 
.membership-payment-info-wrap .membership-payment-info ul.price li span {letter-spacing: -0.14px; color: #333; font-weight: 500;} 
.membership-payment-info-wrap .membership-payment-info ul.price li em {color: #000000; font-weight: 700;} 
.membership-payment-info-wrap .membership-payment-info ul.price li:nth-of-type(1) em {color: #FF6B00; font-weight: 700;} 
.membership-payment-info-wrap .membership-payment-info ul.price li:nth-of-type(2) em {color: #FF6B00; font-weight: 700;} 
.membership-payment-info-wrap .membership-payment-info .card_delete{position: absolute; right:20px; top:15px; border-radius: 4px; border: 1px solid #ccc; background-color: #fff; font-size: 13px; cursor: pointer;}


/* 멤버십 아이콘 */
.benefit_member {display:inline-block;}
.benefit_member p {position: relative; padding-left: 25px; font-size: 12px; margin-left: 5px;}
.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(/images/membership/m_icon.png) center center no-repeat; background-size: 14px;}
.benefit_member p > span {color: #FF6B00;}

.mycard {padding: 16px 0; border-top: 1px solid #D9D9D9; margin: 0 20px;}
.mycard ul li {background-color: #F5F5F5; border-radius: 8px; padding: 16px 20px;}
.mycard ul li + li {margin-top: 10px;}
.mycard ul li .btn-area {display: flex; margin-top: 20px;}
.mycard ul li .btn-area button {width: 50%; height: 36px; border-radius: 4px; border: 1px solid #ccc; background-color: #fff; font-size: 13px; cursor: pointer;}
.mycard ul li .btn-area button + button {margin-left: 8px;}
.mycard .membership-payment-info {padding: 0;}
.mycard .membership-payment-info .card .name {font-size: 16px; color: #333; font-weight: 500; padding-left: 30px; position: relative; letter-spacing: -0.16px;}
.mycard .membership-payment-info .card .name::before {content: ''; background: url(/images/membership/card.svg) center center no-repeat; background-size: 24px; width: 24px; height: 24px; border-radius: 50%; position: absolute; left: 0; top: 50%; transform: translate(0,-50%); margin-top: 2px;}
.mycard .membership-payment-info .card .num {color: #555; font-size: 14px; margin-top: 5px; padding-left: 30px;}
.newcard {padding: 10px 0 20px;margin: 0 20px;}
.newcard button {width: 100%; padding:12px 0; border-radius: 4px; border: 1px solid #ccc; background-color: #fff; font-size: 14px; font-weight: bold; cursor: pointer;}


/* 6. 카드 변경 레이어 팝업 */
.membership-card-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;} 
.membership-card-popup1.on {display: block; animation: show-up-popup 0.6s ease 0s 1 normal forwards;} 
.membership-card-popup1 .body {height: 100%; font-family: noto sans kr;} 
.membership-card-popup1 .body .wrapper {text-align: center; display: flex; flex-direction: column; align-items: center; background-color: #fff; padding: 20px;} 
.membership-card-popup1 .body .wrapper p {color: #000000; font-weight: 400; font-size: 14px; letter-spacing: -0.5px;}
.membership-card-popup1 .body .wrapper p + p {margin-top: 8px;}
.membership-card-popup1 .body .wrapper .btn-area {display: flex; width: 100%;}
.membership-card-popup1 .body .wrapper a.card-se {width: calc(50%); background-color: #FF6B00; color: #fff; font-size: 16px; letter-spacing: -0.7px; border-radius: 5px; height: 48px; line-height: 48px; margin-top: 16px; margin-right: 10px;}
.membership-card-popup1 .body .wrapper a.close {width: calc(50%); border: 1px solid #949494; color: #949494; font-size: 16px; letter-spacing: -0.7px; border-radius: 5px; height: 48px; line-height: 48px; margin-top: 16px;} 
.membership-card-popup1 .body .wrapper em {margin-bottom: 16px; font-weight: 500; display: block;}
.membership-card-popup1 .body .wrapper p {font-weight: 400; line-height: 150%;}
.membership-card-popup1 .body .wrapper p  span {color: #FF6B00; font-weight: 500;}


/* 6. 카드 삭제 레이어 팝업 */
.membership-card-popup2 {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;} 
.membership-card-popup2.on {display: block; animation: show-up-popup 0.6s ease 0s 1 normal forwards;} 
.membership-card-popup2 .body {height: 100%; font-family: noto sans kr;} 
.membership-card-popup2 .body .wrapper {text-align: center; display: flex; flex-direction: column; align-items: center; background-color: #fff; padding: 20px;} 
.membership-card-popup2 .body .wrapper p {color: #000000; font-weight: 400; font-size: 14px; letter-spacing: -0.5px;}
.membership-card-popup2 .body .wrapper p + p {margin-top: 8px;}
.membership-card-popup2 .body .wrapper .btn-area {display: flex; width: 100%; margin-top:10px}
.membership-card-popup2 .body .wrapper a{width: calc(50%); font-size: 16px; letter-spacing: -0.7px; border-radius: 5px; /*height: 48px;*/ line-height: 38px; margin-top: 16px;}
.membership-card-popup2 .body .wrapper a.card-de {background-color: #FF6B00; color: #fff;  margin-left: 10px;}
.membership-card-popup2 .body .wrapper a.close {border: 1px solid #949494; color: #949494;} 
.membership-card-popup2 .body .wrapper em {margin-bottom: 16px; font-weight: 500; display: block;}
.membership-card-popup2 .body .wrapper p {font-weight: 400; line-height: 150%;}
.membership-card-popup2 .body .wrapper p  span {color: #FF6B00; font-weight: 500;}


/* 멤버십 안내 */
.membership-info {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;} 
.membership-info.on {display: block; animation: show-up-popup 0.6s ease 0s 1 normal forwards;} 
.membership-info .body {height: 100%; font-family: noto sans kr;} 
.membership-info .body .wrapper {text-align: center; display: flex; flex-direction: column; align-items: center; background-color: #fff; padding: 20px;} 
.membership-info .body .wrapper p {color: #000000; font-weight: 400; font-size: 14px; z-index: 100; font-weight: 400; line-height: 150%;} 
.membership-info .body .wrapper p + p {margin-top: 5px;}
.membership-info .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; margin-top: 16px;} 
.membership-info .body .wrapper a.close.on{color:#fff;background-color: #222;}
.membership-info .body .wrapper em {margin-bottom: 16px; font-weight: 500;}
.membership-info .body .wrapper p span {color: #338FFF; font-weight: 400;}

/* 멤버십 안내2 */
.membership-info2 {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;}
.membership-info2.on {display: block; animation: show-up-popup 0.6s ease 0s 1 normal forwards;}
.membership-info2 .body {height: 100%; font-family: noto sans kr;}
.membership-info2 .body .wrapper {text-align: center; display: flex; flex-direction: column; align-items: center; background-color: #fff; padding: 20px;}
.membership-info2 .body .wrapper p {color: #000000; font-weight: 400; font-size: 14px; z-index: 100; font-weight: 400; line-height: 150%;}
.membership-info2 .body .wrapper p + p {margin-top: 5px;}
.membership-info2 .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; margin-top: 16px;}
.membership-info2 .body .wrapper a.close.on{color:#fff;background-color: #222;}
.membership-info2 .body .wrapper em {margin-bottom: 16px; font-weight: 500;}
.membership-info2 .body .wrapper p span {color: #338FFF; font-weight: 400;}


/* 이용중인 멤버십 */
#membership-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;} 
#membership-popup1.on {display: block; animation: show-up-popup 0.6s ease 0s 1 normal forwards;} 
#membership-popup1 .body {height: 100%; font-family: noto sans kr;} 
#membership-popup1 .body .wrapper {text-align: center; display: flex; flex-direction: column; align-items: center; background-color: #fff; padding: 20px;} 
#membership-popup1 .body .wrapper p {color: #000000; font-weight: 500; font-size: 16px; z-index: 100; letter-spacing: -0.5px; word-break: keep-all;} 
#membership-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; margin-top: 16px;} 
#membership-popup1 .body .wrapper em {margin-bottom: 16px; font-weight: 500;}
#membership-popup1 .body .wrapper p {margin: 12px 0; font-weight: 500; line-height: 150%;}
#membership-popup1 .body .wrapper p  span {color: #FF6B00; font-weight: 700;}