@charset "UTF-8";

/* 친구초대 개편 */
.friend__invite--event {background-color:#fff;}
.friend__invite--event button {background-color: transparent;}
.friend__invite--event .friend__invite--header {padding:40px 0; text-align:center;background-color:#303650;}
.friend__invite--event .friend__invite--header .img__title {max-width:360px; margin:0 auto 10px;}
.friend__invite--event .friend__invite--header .img__title img {width:100%;}
.friend__invite--event .friend__invite--header .video__wrap {margin-bottom:20px; font-size:0; background:#303650;}
.friend__invite--event .friend__invite--header video {width:100%; 
	-webkit-mask-image: -webkit-radial-gradient(white, black);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;}
.friend__invite--event .friend__invite--header .thumb__text {color:#d9ddec}
.friend__invite--event .friend__invite--header .element__wrap,
.friend__invite--event .friend__invite--header .field__element--wrap {padding:0 16px;}

/* 코드 입력 필드 */
.friend__invite--event .field__element--wrap .btn__wrap {margin-top:12px}
.friend__invite--event .field__element--wrap .btn__wrap .btn__common {font-size:16px; width: calc( (100% - 8px) / 2);}

.friend__invite--event .field__element--wrap .fiele__element {position:relative; height:60px; display:flex; justify-content: space-between; align-items:center; border-radius: 4px; overflow: hidden; background-color:#fff; vertical-align: middle;}

.friend__invite--event .fiele__element .btn__msg--copy {position: absolute; top: 50%; background: transparent; font-size: 13px; right: 24px; transform: translateY(-50%); line-height: 16px; height: 100%; padding-left: 17px; color: #666;}
.friend__invite--event .fiele__element .btn__msg--copy:before {display:inline-block; width:11px; height:13px; content:""; background:url(/cjom/mobile/images/event/friend/ico_copy.svg) no-repeat 0 0; background-size: cover; position: absolute; top: 50%; transform: translateY(-50%); left: 0;}

.friend__invite--event .field__element--wrap .input__text {height:60px; box-sizing:border-box; width:calc(100% - 84px); font-size:18px; outline: none; border: none; color: #333; font-weight:bold; line-height:60px; padding:0 0 0 24px;}
.friend__invite--event .field__element--wrap .input__text::placeholder {font-size:18px;color:#ccc; box-sizing: border-box; height:60px; line-height:60px; letter-spacing: -0.5px;}
.friend__invite--event .field__element--wrap .input__text:disabled {-webkit-text-fill-color: #333; opacity: 1; color: #333; background:#fff;}
.friend__invite--event .field__element--wrap .input__text.is-active {color:#bbb;}
.friend__invite--event .field__element--wrap .fiele__element .btn__common {width:88px; font-size:15px;}
.friend__invite--event .field__element--wrap .is-active .input__text {color:#bbb;}
.friend__invite--event .field__element--wrap .is-active .btn__common.green {color:#bbb; background-color:#eee;}

.friend__invite--event .field__element--wrap .field__element--title {font-size:20px; line-height:24px; color:#fff; font-weight:bold; text-align: left; margin-bottom:12px;}
.friend__invite--event .friend__invite--header .btn__common {border-radius:4px; height:60px; text-align:center; font-weight:bold; line-height:60px; font-size:16px;}
.friend__invite--event .friend__invite--header .btn__common.w100 {width:100%; font-size:18px;}
.friend__invite--event .friend__invite--header .btn__common.green{background-color:#1ba774; color:#fff;}
.friend__invite--event .friend__invite--header .btn__common.yellow{background-color:#fbe64d; color:#222;}

.friend__invite--event .friend__invite--header .field__element--wrap .add__text {position: relative; padding-left: 16px; margin-top: 8px; color: #acafb9; font-size: 13px; line-height: 17px; text-align: left;}

.friend__invite--event .friend__invite--header .field__element--wrap .add__text:before {position: absolute; width: 12px; height: 12px; z-index: 2; left: 0; top: 3px; content: ""; background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='6' cy='6' r='5.5' stroke='%23999'/%3E%3Cpath fill='%23999' d='M5.36 3.2h1.2v3.2h-1.2zM5.36 7.199h1.2v1.6h-1.2z'/%3E%3C/svg%3E%0A");}

.friend__invite--event .friend__invite--header .field__element--wrap .add__text strong {color: #fff; font-weight: normal; text-decoration: underline;}

/* 상품 리스트 */
.friend__invite--event .recommand__product {padding:40px 0;}
.friend__invite--event .recommand__product--title {font-size:20px; line-height:24px; font-weight:bold; padding:0 16px; margin-bottom:12px;}
.friend__invite--event .recommand__product .btn__wrap {width:240px; margin:32px auto 0;}
.friend__invite--event .recommand__product .btn__wrap .btn__detail {display:block; border-radius:4px; height:44px; line-height:44px; background-color:#333; color:#fff; font-size:15px; font-weight:bold; text-align:center;}

/* 친구 초대 현황, 상세 팝업 */
.friend__invite--event .invite__view--wrap {padding:40px 15px; background-color:#eafbf3;}
.friend__invite--event .invite__view--wrap .invite__view--title {font-size:20px; font-weight:bold;}
.friend__invite--event .invite__view--wrap .invite__view--title strong {color:#1ba774;}
.friend__invite--event .invite__view--wrap .btn__detail {position: relative; font-size:13px; line-height:16px; color:#666; text-decoration:underline;}
.friend__invite--event .invite__view--wrap .invite__view--title strong {color:#1ba774;}
.friend__invite--event .invite__view--wrap .invite__view--info {margin-top:30px;}
.friend__invite--event .invite__view--wrap .invite__view--box {margin-top:16px; background-color:#cdf0e0; border-radius:10px; padding:20px 20px 32px 20px;}
.friend__invite--event .invite__view--box .info__view {padding-bottom:16px; margin-bottom:16px; position: relative;}
.friend__invite--event .invite__view--box .info__view:after {display:block; position: absolute; content:""; bottom:0; left:0px; right:0px; height:1px; background-color:#ebfcf5;}
.friend__invite--event .invite__view--box .info__view dl + dl {margin-top:8px;}
.friend__invite--event .invite__view--box .info__view dt {font-size:15px; color:#333;;}
.friend__invite--event .invite__view--box .info__view dd {font-size:16px; font-weight:bold; color:#333;}
.friend__invite--event .invite__view--box .info__view dd em {font-size:15px; font-weight: bold; position: relative; top: 1px;}
.friend__invite--event .invite__view--wrap .invite__view--list {display:flex; justify-content:space-between; align-items: center;}
.friend__invite--event .invite__view--wrap .invite__view--list + .invite__view--list {margin-top:28px;}
.friend__invite--event .invite__view--wrap .invite__view--list li {position:relative; width:50px; height:50px; background:url(/cjom/mobile/images/event/friend/ico_invite.svg) no-repeat 50% 50%; background-size:cover;}
.friend__invite--event .invite__view--wrap .invite__view--list li.is-active {background-image:url(/cjom/mobile/images/event/friend/ico_invite_active.svg)}
.friend__invite--event .invite__view--wrap .invite__view--list li:after {display:none; position:absolute; width:50px; height:18px; z-index:2; bottom: -12px; background-position:50% 50%; background-repeat: no-repeat; background-size:cover; left:50%; transform: translateX(-50%); content:""; background-image:url(/cjom/mobile/images/event/friend/ico_benfit_money1.png);}
.friend__invite--event .invite__view--wrap .invite__view--list li.is-active:after {display:block;}
.friend__invite--event .invite__view--wrap .invite__view--list.step2 li:last-of-type:after {display: block; width:56px; height:29px; bottom:-14px; background-image:url(/cjom/mobile/images/event/friend/ico_benfit_money2.png);}
.friend__invite--event .invite__view--wrap .invite__view--list.step2 li.on:last-of-type:after {display:none;}
.friend__invite--event .invite__view--wrap .invite__view--list.step2 li.is-active:last-of-type:after {display:block !important;}
.friend__invite--event .invite__view--wrap .add__text {position: relative; padding-left:16px; margin-top:8px; color:#98a39e; font-size:13px; line-height:17px;}
.friend__invite--event .invite__view--wrap .add__text:before {position:absolute; width:12px; height:12px; z-index:2; left:0; top:3px; content:""; background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='6' cy='6' r='5.5' stroke='%23999'/%3E%3Cpath fill='%23999' d='M5.36 3.2h1.2v3.2h-1.2zM5.36 7.199h1.2v1.6h-1.2z'/%3E%3C/svg%3E%0A");}
.friend__invite--event .invite__view--wrap .add__text strong {color:#fa6729; font-weight: normal;}

.friend__invite--event .date__ctrl--wrap{margin:20px 0 0;text-align:center;}
.friend__invite--event .date__ctrl--wrap .date__view {vertical-align:middle; font-size:18px; line-height:18px; text-align:center; letter-spacing:0; font-weight:bold;}
.friend__invite--event .date__ctrl--wrap .btn__ctrl {vertical-align:middle;width:13px;height:20px;display:inline-block;}
.friend__invite--event .date__ctrl--wrap .prev:after,
.friend__invite--event .date__ctrl--wrap .next:after {content:""; display: block; width:10px; height:10px; border-top:2px solid #222; border-right:2px solid #222; position: relative; top:1.5px;}

.friend__invite--event .date__ctrl--wrap .prev:after{-webkit-transform: rotate(226deg); transform: rotate(226deg);}
.friend__invite--event .date__ctrl--wrap .next:after{-webkit-transform: rotate(45deg); transform: rotate(45deg);}
.friend__invite--event .date__ctrl--wrap .btn__ctrl:disabled:after{border-color:#ddd;}

/* 현황 테이블 */
.modal.friend__invite--event .modal__header {border-bottom:1px solid rgba(0,0,0,0.1);}
.modal.friend__invite--event .details__view {padding:15px;}
.modal.friend__invite--event .details__view .info__box {background-color:#f6f8f8; padding:16px; border-radius:4px;}
.modal.friend__invite--event .details__view .info__box dt,
.modal.friend__invite--event .details__view .info__box dd {font-size:13px; line-height:16px;}
.modal.friend__invite--event .details__view .info__box dt {font-weight:bold; color:#333;}
.modal.friend__invite--event .details__view .info__box dd {color:#666; margin-top:4px;}

.modal.friend__invite--event .details__view .info__box dl + dl {margin-top:16px;}
.modal.friend__invite--event .details__view .info__box + .friend__list--table {margin-top:30px;}
.friend__invite--event .friend__list--table {border-bottom:1px solid #ddd;}
.friend__invite--event .friend__list--table .date__ctrl--wrap {margin-bottom:16px;}
.friend__invite--event .friend__list--table .split__content {margin-bottom:10px; align-items: flex-end;}
.friend__invite--event .friend__list--table .split__content .bold {font-weight: bold;}
.friend__invite--event .friend__list--table .split__content .count__info {font-size:13px; color:#333;}
.friend__invite--event .friend__list--table .split__content .time__info {font-size:10px; color:#aaa;}
.friend__invite--event .friend__list--table table {width:100%;}
.friend__invite--event .friend__list--table thead th,
.friend__invite--event .friend__list--table tbody td {height:42px;vertical-align:middle; text-align:center; font-size:13px; font-weight:normal;}
.friend__invite--event .friend__list--table thead th {color:#666; background-color:#f6f8f8; border-top:1px solid #ddd;}
.friend__invite--event .friend__list--table tbody td {color:#333; border-top:1px solid #ddd;}
.friend__invite--event .friend__list--table .point  {color:#1ba774;}

.friend__invite--event .friend__list--table.no__data {border-bottom:0;}
.friend__invite--event .friend__list--table.no__data .no__result {display:block; position:relative; padding:70px 0 35px; color:#999; text-align: center; font-size:14px; line-height:20px;}
.friend__invite--event .friend__list--table .no__result {display:none;}
.friend__invite--event .friend__list--table.no__data .no__result:before {display:block; content:""; width:100px; height:100px; margin:0 auto 20px; background:url(/cjom/mobile/images/event/friend/ico_no_result.png) no-repeat 50% 50%; background-size:cover;}
.friend__invite--event .friend__list--table.no__data tbody {display:none;}



/* 가입혜택 */
.friend__invite--event .benefit__info {background-color:#eafbf3; padding:40px 20px;}
.friend__invite--event .benefit__info .coupon__wrap {width:240px; margin:auto;}
.friend__invite--event .benefit__info .group + .group {margin-top:40px;}
.friend__invite--event .benefit__info--title {font-size:20px; font-weight:bold; text-align:center; line-height:26px; color:#333; margin-bottom:12px;}
.friend__invite--event .benefit__info--title .thumb__text {display: block; font-size:15px; line-height:20px; font-weight:normal;}
.friend__invite--event .benefit__info--list {background-color:#fff; border-radius:10px; padding:10px 0;}
.friend__invite--event .benefit__info--list a {display:block;}
.friend__invite--event .benefit__info--list .text {font-size:16px; line-height:20px;}
.friend__invite--event .benefit__info--list .bold {font-weight:bold; margin-top:2px;}
.friend__invite--event .benefit__info--list li {position: relative; padding:20px;}
.friend__invite--event .benefit__info--list li:before {position:absolute; bottom:0; left:20px; right:20px; height:1px; background-color:#eee; content:"";}
.friend__invite--event .benefit__info--list li:last-of-type:before {display:none;}
.friend__invite--event .benefit__info--list li a:after {position:absolute; display:inline-block; width:110px; height:78px; content:""; top: 50%; right: 20px; transform: translateY(-50%);background-position:50% 50%; background-repeat:no-repeat; background-size:cover;}
.friend__invite--event .benefit__info--list .btn__link {display:inline-block; font-size:13px; line-height:17px; color:#1ba774; margin-top:10px;}
.friend__invite--event .benefit__info--list a .btn__link {text-decoration:underline;}
.friend__invite--event .benefit__info--list li.info1 a:after {background-image:url(/cjom/mobile/images/event/friend/ico_friend_invite_mo1.png);}
.friend__invite--event .benefit__info--list li.info2 a:after {background-image:url(/cjom/mobile/images/event/friend/ico_friend_invite_mo2.png);}
.friend__invite--event .benefit__info--list li.info3 a:after {background-image:url(/cjom/mobile/images/event/friend/ico_friend_invite_mo3.png);}
.friend__invite--event .benefit__info--list li.info1.type-2 a:after {background-image:url(/cjom/mobile/images/event/friend/ico_friend_invite_mo1_1.png);}

@media screen and (max-width:320px){
	.friend__invite--event .benefit__info {padding:40px 15px;}
	.friend__invite--event .benefit__info--list li {padding:20px 15px;}
	.friend__invite--event .benefit__info--list .text {font-size:14px;}
	.friend__invite--event .benefit__info--list li a:after {right:15px}
}

/* 알아두세요 */
.friend__invite--event .friend__invite--wrap {background-color:#fafafa;}
.friend__invite--event .friend__invite--notice {padding:40px 23px;color:#999;}
.friend__invite--event .friend__invite--notice .notice__title {font-weight:bold; font-size:16px; line-height:20px; color:#333; margin-bottom:12px;}
.friend__invite--event .friend__invite--notice .notice__title--sub {font-weight:bold; font-size:13px; line-height:24px; color:#999; font-weight:bold;}
.friend__invite--event .friend__invite--notice .group + .group {margin-top:12px;}
.friend__invite--event .friend__invite--notice ul li {margin-top:7px;position:relative;padding-left:8px; font-size:13px; line-height:17px;}
.friend__invite--event .friend__invite--notice ul li:first-of-type {margin-top:0;}
.friend__invite--event .friend__invite--notice ul li:before {position:absolute;left:0;top:8px;background-color:#999; width:2px;height:2px;display:block;content:'';}

/* 친구초대 개편: MARKETDEV-9683 */
.friend__invite--event.new2025 .friend__invite--header .btn__common.green {background-color: #2B66F6;}
.friend__invite--event.new2025 .field__element--wrap .is-active .btn__common.green {background-color: #eee;}
.friend__invite--event.new2025 .friend__invite--header {background-color:#131925; padding:38px 16px;}
.friend__invite--event.new2025 .friend__invite--header .element__wrap, 
.friend__invite--event.new2025 .friend__invite--header .field__element--wrap {padding:0;}
.friend__invite--event.new2025 .field__element--wrap .code__field {height:55px; border-radius:30px; background-color: rgba(255, 255, 255, 0.30); color:#fff;}
.friend__invite--event.new2025 .field__element--wrap .code__field .input__text:disabled {background:initial; color:#fff; -webkit-text-fill-color: #fff;}
.friend__invite--event.new2025 .fiele__element .btn__msg--copy {color:#fff;}
.friend__invite--event.new2025 .fiele__element .btn__msg--copy:before {background-image: url(/cjom/mobile/images/event/friend/ico_copy_white.svg);}

/* 이미지 분기 */
.friend__invite--event .img__title .default {display:block;}
.friend__invite--event .img__title .active {display:none;}
.friend__invite--event .img__title.is-active .default {display:none;}
.friend__invite--event .img__title.is-active .active {display:block;}

.friend__invite--event.new2025 .visual {margin:0 auto 38px; width:220px; position: relative;}
.friend__invite--event.new2025 .visual::before,
.friend__invite--event.new2025 .visual::after {position: absolute; content:""; background-repeat: no-repeat; background-position:0 0; background-size:contain; }
.friend__invite--event.new2025 .visual::before {width:67px; height:70px; background-image:url(/cjom/mobile/images/event/friend/ico_face_man.png); left: -18px; bottom: 10px; animation: motion_cloud_1 1.5s infinite ease-in-out;}
.friend__invite--event.new2025 .visual::after {width:54px; height:70px;background-image:url(/cjom/mobile/images/event/friend/ico_face_woman.png); right: -7px; top: 14px; animation: motion_cloud_2 1.5s infinite reverse ease-in-out;}
.friend__invite--event.new2025 .friend__invite--header .img__title {overflow: hidden;}
.friend__invite--event.new2025 .friend__invite--header .img__title img {width: 110%; position: relative; left: 50%; transform: translateX(-50%);}
@keyframes motion_cloud_1 {
	0%, 100% {transform:translateY(0);}
	50% {transform:translateY(5px);}
}

@keyframes motion_cloud_2 {
	0%, 100% {transform:translateY(0);}
	50% {transform:translateY(-5px);}
}

.friend__invite--event.new2025 .point__txt {color:#2B66F6; font-weight:inherit;}
.friend__invite--event.new2025 .invite__view--wrap {background-color: #fff;}
.friend__invite--event.new2025 .invite__view--wrap.code__share {padding:40px 15px 0;}
.friend__invite--event.new2025 .invite__view--wrap.code__share .notice__toggle--wrap {margin-top:25px}

.friend__invite--event.new2025 .invite__title--wrap {text-align: center;}
.friend__invite--event.new2025 .invite__title--wrap .label__title {display: inline-flex; padding: 5px 12px; justify-content: center; align-items: center; border-radius: 30px; background: #0B1B41; font-size:14px; font-weight:bold; color:#fff;}
.friend__invite--event.new2025 .invite__title--wrap .label__title em {color:#FBFF1C; font-weight:inherit;}
.friend__invite--event.new2025 .invite__title--wrap .linvite__txt {font-size:20px; line-height:32px; font-weight:bold; margin-top:10px;}
.friend__invite--event.new2025 .invite__title--wrap .linvite__txt .point__txt {font-size:28px; letter-spacing:-1px;}
.friend__invite--event.new2025 .invite__view--wrap .invite__view--box {margin-top:20px; background-color:#EEF4FE; padding:30px 20px 16px;}

.friend__invite--event.new2025 .invite__view--wrap .invite__list {display: flex; align-items: center; justify-content: space-between;}
.friend__invite--event.new2025 .invite__view--wrap .invite__list li {position: relative; padding-bottom:15px; width: 50px;}
.friend__invite--event.new2025 .invite__view--wrap .invite__list li .num {position: relative; display: flex; align-items: center; justify-content: center; width:50px; height:50px; color:#9ABDD8; font-size:18px; font-weight:bold; background: url(/cjom/mobile/images/event/friend/bg_invite_list_default.png) no-repeat 50% 50%; background-size: contain;}
.friend__invite--event.new2025 .invite__view--wrap .invite__list li .txt {display: block; position: absolute; bottom:-2px; left:50%; transform: translateX(-50%); overflow: hidden; z-index:1; font-size:11px; color:#666; width:100%; text-align:center /*  width:35px; height:13px; text-indent:-999em; background: url(/cjom/mobile/images/event/friend/ico_benfit_money1_new.png) no-repeat 50% 50%; background-size: contain; */}
.friend__invite--event.new2025 .invite__view--wrap .invite__list li.event .num {background-image: url(/cjom/mobile/images/event/friend/bg_invite_list_active.png); flex-direction: column;}
.friend__invite--event.new2025 .invite__view--wrap .invite__list li.event .num::after {position: absolute; padding-top: 100%; width: 100%; background: url(/cjom/mobile/images/event/friend/bg_spin_event.svg) no-repeat 0 0; background-size: cover; left: 0; top: 50%; margin-top:-50%; animation: cjom_rotate 2.5s linear infinite; content: "";}
.friend__invite--event.new2025 .invite__view--wrap .invite__list li.is-active .num {background-image: url(/cjom/mobile/images/event/friend/ico_invite_active.png); overflow: hidden; text-indent:-999em;}
.friend__invite--event.new2025 .invite__view--wrap .invite__list li.event.is-active .num i,
.friend__invite--event.new2025 .invite__view--wrap .invite__list li.event.is-active .num::after {display: none;}

.friend__invite--event.new2025 .invite__view--wrap .invite__list li.event .spin {width:50px; height:50px; position: absolute; top: 0%; left: 50%; transform: translateX(-50%);}
.friend__invite--event.new2025 .invite__view--wrap .invite__list li.event .spin:after {width:3px; height:3px; position: absolute; border-radius:50%; background-color: red; content:"";}

.friend__invite--event.new2025 .invite__view--wrap .invite__list li.event .num i {line-height:14px; display: block; text-align: center; position: relative; top: -3px;}
.friend__invite--event.new2025 .invite__view--wrap .invite__list li.event .num i::before {display: block; content: "보너스"; font-size: 8px; font-weight: bold; text-align: center; color:inherit;}
.friend__invite--event.new2025 .invite__view--wrap .invite__list li.event .txt {width:56px; height:18px; background: url(/cjom/mobile/images/event/friend/ico_benfit_money2_new.png) no-repeat 0 0; background-size: contain; text-indent: -999em; overflow: hidden; bottom:6px;}
.friend__invite--event.new2025 .invite__view--wrap .invite__list + .invite__list {margin-top:16px;}
.friend__invite--event.new2025 .invite__view--box .info__view {margin-top:30px; position: relative;}
.friend__invite--event.new2025 .invite__view--box .info__view:after {height:1px; background-color:#CEDAED; position: absolute; left:0; right:0; bottom:0; content:"";}
.friend__invite--event.new2025 .invite__view--box .btn__wrap {text-align: center;}
.friend__invite--event.new2025 .invite__view--box .btn__wrap .btn__detail {position: relative; text-decoration:none; padding-right:13px;}
.friend__invite--event.new2025 .invite__view--box .btn__wrap .btn__detail:after {position: absolute; top:50%; right:0; width:8px; height:8px; background-image: url("data:image/svg+xml,%0A%3Csvg width='8' height='8' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath id='Vector' d='M4 0V8M0 4L8 4' stroke='%23666666'/%3E%3C/svg%3E%0A"); transform: translateY(-50%); content:"";}
.friend__invite--event.new2025 .invite__view--wrap .add__text {color:#777;}
.friend__invite--event.new2025 .btn__share--wrap {position: fixed; bottom:0px; left:0px; right:0px; z-index:3; border-radius:8px; overflow: hidden; background-color:#fff; text-align: center;}
.friend__invite--event.new2025 .btn__share--wrap.add__bottom {bottom:50px;}
.friend__invite--event.new2025 .btn__share--wrap .btn__share {height:60px; display:inline-flex; align-items: center; justify-content: center; width: calc(100% - 16px); box-sizing: border-box; background-color:#2B66F6; color:#fff; font-size:18px; font-weight: bold; border-radius:8px; margin: 8px 0;}

.friend__invite--event.new2025 .btn__view--notice {position: relative; display: block; text-align: center; font-size:14px; color:#666; line-height:18px; padding-right:15px; text-decoration: underline; left: 50%; transform: translateX(-50%);} 
.friend__invite--event.new2025 .notice__toggle--wrap .btn__view--notice:after {display: block; width:10px; height:6px; background-image: url("data:image/svg+xml,%0A%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 1L5 5L1 1' stroke='%23666666' stroke-linecap='round'/%3E%3C/svg%3E%0A"); position: absolute; right: 0; top: 50%; content: ""; transform: translateY(-50%); transition: 0.5s}
.friend__invite--event.new2025 .notice__toggle--wrap.is-active .btn__view--notice:after {transform: rotate(180deg); top:7px;}
.friend__invite--event.new2025 .notice__toggle--wrap .friend__invite--notice{display:none; padding: 15px 16px 0px;}
.friend__invite--event.new2025 .notice__toggle--wrap.is-active .friend__invite--notice{display:block;}

.friend__invite--event.new2025 .rank__view--wrap {padding-top:35px; margin-top:35px; border-top:1px solid #ddd}

/* 하단 버튼 조정 */
#wrap.friend__invite .fixed-menu,
#wrap.friend__invite .fixed-menu__top--single {bottom: 135px;}
#wrap.friend__invite .footer {padding: 9px 15px 150px;}


/* 랭킹 */
.friend__invite--event .rank__list--temp {position: relative; margin:22px 15px 12px; padding:0;}
.friend__invite--event .rank__list--temp .temp__img--wrap {position: relative;}
.friend__invite--event .rank__list--temp .temp__img--wrap:after {position: absolute; z-index: 1; top:50%; left:50%; transform: translate(-50%, -50%); background:url(/cjom/mobile/images/event/friend/img_rank_temp_guide.png); width:244px; height:129px; content:""; background-size:cover;}
.friend__invite--event .rank__list--wrap {margin:22px 15px 12px; padding:0;}
.friend__invite--event .rank__list--wrap .group  {background:#F7F7F7; border-radius: 10px; padding:0 0 6px 0;}
.friend__invite--event .rank__list--wrap .item {display:inline-block; text-align: center; font-size:13px; font-weight:bold; color:#999; box-sizing: border-box;}
.friend__invite--event .rank__list--wrap .num {width:13%;}
.friend__invite--event .rank__list--wrap .user__id {width:27%;}
.friend__invite--event .rank__list--wrap .success {width:33%;}
.friend__invite--event .rank__list--wrap .price {width:27%;}
.friend__invite--event .rank__list--wrap .rank__view--name,
.friend__invite--event .rank__list--wrap .rank__view--detail li {display:flex; align-items: center; justify-content: space-between; margin: 0 12px;}

.friend__invite--event .rank__view--name .item {padding:13px 0; }

.friend__invite--event .rank__list--wrap .rank__view--detail li{margin-top:4px;}
.friend__invite--event .rank__list--wrap .rank__view--detail li:first-of-type {margin-top:0;}
.friend__invite--event .rank__view--detail .item {color:#333; font-weight:normal; height:40px; display:inline-flex; align-items: center;}

.friend__invite--event .rank__view--detail li { box-sizing: border-box; height:40px;}
.friend__invite--event .rank__view--detail li:nth-of-type(1) .num:after,
.friend__invite--event .rank__view--detail li:nth-of-type(2) .num:after,
.friend__invite--event .rank__view--detail li:nth-of-type(3) .num:after {overflow: hidden; width:24px; height:24px; background-repeat: no-repeat; background-position:0 0; background-size: cover; content:"";}
.friend__invite--event .rank__view--detail li:nth-of-type(1) .num:after {  background-image:url(/cjom/mobile/images/event/friend/ico_rank_1.png);}
.friend__invite--event .rank__view--detail li:nth-of-type(2) .num:after {background-image:url(/cjom/mobile/images/event/friend/ico_rank_2.png);}
.friend__invite--event .rank__view--detail li:nth-of-type(3) .num:after {background-image:url(/cjom/mobile/images/event/friend/ico_rank_3.png);}
.friend__invite--event .rank__view--detail .center {justify-content: center;}

.friend__invite--event .rank__view--detail .num {font-weight:bold; position: relative; justify-content: center; font-size:15px;}
.friend__invite--event .rank__view--detail .user__id {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.friend__invite--event .rank__view--detail .user__id i {display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto;}
.friend__invite--event .rank__view--detail .success {justify-content: center;}
.friend__invite--event .rank__view--detail .price {text-align: right; font-weight:bold; justify-content:flex-end; padding-right:4vw;}
.friend__invite--event .rank__view--detail li.is-active {background-color:#fff; border:1px solid #2B66F6; box-shadow: 0px 0px 4px rgba(43, 102, 246, 0.40); border-radius:4px;}
.friend__invite--event .rank__view--detail li.is-active > * {font-size:15px; color:#2B66F6;}
.friend__invite--event .user__info--box {display: flex; margin-top:12px; padding: 12px 16px; justify-content: center; align-items: center; border-radius: 4px; border: 1px dashed #DDD;}
.friend__invite--event .user__info--box .point__txt {margin:0 3px;}
.friend__invite--event .rank__view--wrap .add__text {margin-top:15px;}
.friend__invite--event .friend__invite--notice ul li ul {margin-top:5px;}
.friend__invite--event .rank__view--wrap .notice__toggle--wrap {padding-bottom:40px;}

/* 공유하기 팝업 */
.modal__toast--layer.modal__invite--share .btn__close {background: url("data:image/svg+xml,%3Csvg width='36' height='36' viewBox='0 0 36 36' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='36' height='36' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.8286 11.5747C10.6223 11.3684 10.6223 11.0339 10.8286 10.8276V10.8276C11.0349 10.6213 11.3694 10.6213 11.5757 10.8276L25.1724 24.4244C25.3787 24.6307 25.3787 24.9652 25.1724 25.1714V25.1714C24.9661 25.3777 24.6317 25.3777 24.4254 25.1714L10.8286 11.5747Z' fill='black'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M25.1733 11.5747C25.3796 11.3684 25.3796 11.0339 25.1733 10.8276V10.8276C24.967 10.6213 24.6326 10.6213 24.4263 10.8276L10.8295 24.4244C10.6232 24.6307 10.6232 24.9652 10.8295 25.1714V25.1714C11.0358 25.3777 11.3703 25.3777 11.5766 25.1714L25.1733 11.5747Z' fill='black'/%3E%3C/svg%3E%0A") no-repeat 50% 50%; background-size: cover;}
.modal__toast--layer.modal__invite--share .modal__header {font-size:16px; line-height:24px;}
.modal__toast--layer.modal__invite--share .modal__toast--content {padding:30px 24px;}
.modal__toast--layer.modal__invite--share .field__element--wrap input:disabled,
.modal__toast--layer.modal__invite--share .field__element--wrap .fiele__element {background-color:#f4f4f4; border-radius: 40px; height: 48px;}
.modal__toast--layer.modal__invite--share .modal__toast--content:after {display:block; width:34px; height:4px; border-radius:4px; background-color:#eee; position: absolute; left:50%; top: 10px; transform: translateX(-50%); content:"";}
.modal__toast--layer.modal__invite--share .btn__wrap {display:flex; align-items: center; justify-content: space-between; margin-top:15px;}
.modal__toast--layer.modal__invite--share .btn__wrap .btn__common {display:flex; align-items: center; justify-content: center; height:60px; width:calc((100% - 8px) / 2); border-radius:8px; font-size:15px; font-weight:bold;}
.modal__toast--layer.modal__invite--share .btn__wrap .btn__kakao {background-color: #FCE200; color:#000;}
.modal__toast--layer.modal__invite--share .btn__wrap .btn__url {background-color:#1BA774; color:#fff;}
/* //친구초대 개편: MARKETDEV-9683 */

/* 적립금(이벤트) */
.event_save {background-color:#fff;}
.event_save_cont {padding:0 20px 50px;}
.event_save_cont h2 {text-align:center;font-size:22px;line-height:28px;font-weight:bold;letter-spacing:-1px;}
	.color00 .emp {color:#8BC34B;}
	.color02 .emp {color:#1BA774;}
	.color03 .emp {color:#48C9A7;}
	.color04 .emp {color:#63B4F9;}
	.color05 .emp {color:#4A9AF8;}
	.color06 .emp {color:#7979EF;}
	.color07 .emp {color:#A876F5;}
	.color08 .emp {color:#C27EE9;}
	.color09 .emp {color:#EE79AE;}
	.color10 .emp {color:#ED727D;}
	.color11 .emp {color:#EF8D66;}
	.color12 .emp {color:#EDA241;}
	.color13 .emp {color:#C75E46;}
	.color14 .emp {color:#C61D23;}
	.color15 .emp {color:#C42C05;}

.event_info {padding:20px 0 0;}
.event_info .event_sec {display:table;width:100%;font-size:14px;line-height:18px;}
.event_info .event_sec dt {display:table-cell;vertical-align:top;text-align:left;width:83px;}
.event_info .event_sec dd {display:table-cell;vertical-align:top;text-align:left;}
.event_info .event_sec h3 {margin-bottom:10px;font-size:14px;line-height:18px;}
.save_condition {padding-bottom:10px;}
.save_condition table {width:100%;}
.save_condition table thead th {font-size:14px;height:32px;text-align:center;vertical-align:middle;color:#666;font-weight:normal;border:1px solid #ddd;border-left:0;background-color:#f6f8f8;}
.save_condition table thead th:last-child {border-right:0;}
.save_condition table tbody td {font-size:14px;height:32px;text-align:center;vertical-align:middle;color:#333;border-bottom:1px solid #ddd;border-right:1px solid #ddd;}
.save_condition table tbody td:last-child {border-right:0;}
.save_condition table tbody td.emp {font-weight:bold;}
.buy_state {padding:46px 20px 0;}
.buy_state .graph_wp {position:relative;height:8px;background-color:#ddd;border-radius:100px;}
.buy_state .graph {display:flex;justify-content:space-between;}
.buy_state .graph li {position:relative;}
.buy_state .graph li:after {position:absolute;left:-7px;top:-3px;display:block;width:13px;height:13px;border:1px solid #ddd;border-radius:100%;z-index:100;background-color:#fff;content:'';}
	.color00 .buy_state .graph li.active:after {border:1px solid #8BC34B;background-color:#8BC34B;}
	.color02 .buy_state .graph li.active:after {border:1px solid #1BA774;background-color:#1BA774;}
	.color03 .buy_state .graph li.active:after {border:1px solid #48C9A7;background-color:#48C9A7;}
	.color04 .buy_state .graph li.active:after {border:1px solid #63B4F9;background-color:#63B4F9;}
	.color05 .buy_state .graph li.active:after {border:1px solid #4A9AF8;background-color:#4A9AF8;}
	.color06 .buy_state .graph li.active:after {border:1px solid #7979EF;background-color:#7979EF;}
	.color07 .buy_state .graph li.active:after {border:1px solid #A876F5;background-color:#A876F5;}
	.color08 .buy_state .graph li.active:after {border:1px solid #C27EE9;background-color:#C27EE9;}
	.color09 .buy_state .graph li.active:after {border:1px solid #EE79AE;background-color:#EE79AE;}
	.color10 .buy_state .graph li.active:after {border:1px solid #ED727D;background-color:#ED727D;}
	.color11 .buy_state .graph li.active:after {border:1px solid #EF8D66;background-color:#EF8D66;}
	.color12 .buy_state .graph li.active:after {border:1px solid #EDA241;background-color:#EDA241;}
	.color13 .buy_state .graph li.active:after {border:1px solid #C75E46;background-color:#C75E46;}
	.color14 .buy_state .graph li.active:after {border:1px solid #C61D23;background-color:#C61D23;}
	.color15 .buy_state .graph li.active:after {border:1px solid #C42C05;background-color:#C42C05;}	

.buy_state .graph li.check {font-weight:bold;}
	.color00 .buy_state .graph li.check:after {border:1px solid #8BC34B;}
	.color02 .buy_state .graph li.check:after {border:1px solid #1BA774;}
	.color03 .buy_state .graph li.check:after {border:1px solid #48C9A7;}
	.color04 .buy_state .graph li.check:after {border:1px solid #63B4F9;}
	.color05 .buy_state .graph li.check:after {border:1px solid #4A9AF8;}
	.color06 .buy_state .graph li.check:after {border:1px solid #7979EF;}
	.color07 .buy_state .graph li.check:after {border:1px solid #A876F5;}
	.color08 .buy_state .graph li.check:after {border:1px solid #C27EE9;}
	.color09 .buy_state .graph li.check:after {border:1px solid #EE79AE;}
	.color10 .buy_state .graph li.check:after {border:1px solid #ED727D;}
	.color11 .buy_state .graph li.check:after {border:1px solid #EF8D66;}
	.color12 .buy_state .graph li.check:after {border:1px solid #EDA241;}
	.color13 .buy_state .graph li.check:after {border:1px solid #C75E46;}
	.color14 .buy_state .graph li.check:after {border:1px solid #C61D23;}
	.color15 .buy_state .graph li.check:after {border:1px solid #C42C05;}
	
.buy_state .graph li em {position:absolute;left:50%;bottom:-32px;transform:translateX(-50%);width:50px;font-size:12px;text-align:center;font-family:Roboto;}
.buy_state .graph li.active em {color:#999;}
	.color00 .buy_state .graph li.check em {color:#8BC34B;}
	.color02 .buy_state .graph li.check em {color:#1BA774;}
	.color03 .buy_state .graph li.check em {color:#48C9A7;}
	.color04 .buy_state .graph li.check em {color:#63B4F9;}
	.color05 .buy_state .graph li.check em {color:#4A9AF8;}
	.color06 .buy_state .graph li.check em {color:#7979EF;}
	.color07 .buy_state .graph li.check em {color:#A876F5;}
	.color08 .buy_state .graph li.check em {color:#C27EE9;}
	.color09 .buy_state .graph li.check em {color:#EE79AE;}
	.color10 .buy_state .graph li.check em {color:#ED727D;}
	.color11 .buy_state .graph li.check em {color:#EF8D66;}
	.color12 .buy_state .graph li.check em {color:#EDA241;}
	.color13 .buy_state .graph li.check em {color:#C75E46;}
	.color14 .buy_state .graph li.check em {color:#C61D23;}
	.color15 .buy_state .graph li.check em {color:#C42C05;}

.buy_state .graph_bar {position:relative;width:100%;height:8px;z-index:5;}
.buy_state .graph_bar * {
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}

.buy_state .graph_bar div {position:relative;width:0;height:8px;border-radius: 100px;}
	.color00 .buy_state .graph_bar div {background-color:#8BC34B;}
	.color02 .buy_state .graph_bar div {background-color:#1BA774;}
	.color03 .buy_state .graph_bar div {background-color:#48C9A7;}
	.color04 .buy_state .graph_bar div {background-color:#63B4F9;}
	.color05 .buy_state .graph_bar div {background-color:#4A9AF8;}
	.color06 .buy_state .graph_bar div {background-color:#7979EF;}
	.color07 .buy_state .graph_bar div {background-color:#A876F5;}
	.color08 .buy_state .graph_bar div {background-color:#C27EE9;}
	.color09 .buy_state .graph_bar div {background-color:#EE79AE;}
	.color10 .buy_state .graph_bar div {background-color:#ED727D;}
	.color11 .buy_state .graph_bar div {background-color:#EF8D66;}
	.color12 .buy_state .graph_bar div {background-color:#EDA241;}
	.color13 .buy_state .graph_bar div {background-color:#C75E46;}
	.color14 .buy_state .graph_bar div {background-color:#C61D23;}
	.color15 .buy_state .graph_bar div {background-color:#C42C05;}

.buy_state .graph_bar span {position:absolute;right:-40px;top:-34px;display:block;width:80px;font-size:13px;color:#fff;font-weight:bold;height:23px;line-height:23px;border-radius:50px;text-align:center;}
.buy_state .graph_bar span.ty1 {right:-60px;}
.buy_state .graph_bar span.ty2 {right:-23px;}
	.color00 .buy_state .graph_bar span {background-color:#8BC34B;}
	.color02 .buy_state .graph_bar span {background-color:#1BA774;}
	.color03 .buy_state .graph_bar span {background-color:#48C9A7;}
	.color04 .buy_state .graph_bar span {background-color:#63B4F9;}
	.color05 .buy_state .graph_bar span {background-color:#4A9AF8;}
	.color06 .buy_state .graph_bar span {background-color:#7979EF;}
	.color07 .buy_state .graph_bar span {background-color:#A876F5;}
	.color08 .buy_state .graph_bar span {background-color:#C27EE9;}
	.color09 .buy_state .graph_bar span {background-color:#EE79AE;}
	.color10 .buy_state .graph_bar span {background-color:#ED727D;}
	.color11 .buy_state .graph_bar span {background-color:#EF8D66;}
	.color12 .buy_state .graph_bar span {background-color:#EDA241;}
	.color13 .buy_state .graph_bar span {background-color:#C75E46;}
	.color14 .buy_state .graph_bar span {background-color:#C61D23;}
	.color15 .buy_state .graph_bar span {background-color:#C42C05;}

.buy_state .graph_bar span:before {position:absolute;left:50%;bottom:-6px;width:0;height:0;margin-left:-6px;border-left:6px solid transparent;border-right:6px solid transparent;border-top:9px solid transparent;content:"";}
.buy_state .graph_bar span.ty1:before {left:26%;}
.buy_state .graph_bar span.ty2:before {left:72%;}
	.color00 .buy_state .graph_bar span:before {border-top:8px solid #8BC34B;}
	.color02 .buy_state .graph_bar span:before {border-top:8px solid #1BA774;}
	.color03 .buy_state .graph_bar span:before {border-top:8px solid #48C9A7;}
	.color04 .buy_state .graph_bar span:before {border-top:8px solid #63B4F9;}
	.color05 .buy_state .graph_bar span:before {border-top:8px solid #4A9AF8;}
	.color06 .buy_state .graph_bar span:before {border-top:8px solid #7979EF;}
	.color07 .buy_state .graph_bar span:before {border-top:8px solid #A876F5;}
	.color08 .buy_state .graph_bar span:before {border-top:8px solid #C27EE9;}
	.color09 .buy_state .graph_bar span:before {border-top:8px solid #EE79AE;}
	.color10 .buy_state .graph_bar span:before {border-top:8px solid #ED727D;}
	.color11 .buy_state .graph_bar span:before {border-top:8px solid #EF8D66;}
	.color12 .buy_state .graph_bar span:before {border-top:8px solid #EDA241;}
	.color13 .buy_state .graph_bar span:before {border-top:8px solid #C75E46;}
	.color14 .buy_state .graph_bar span:before {border-top:8px solid #C61D23;}
	.color15 .buy_state .graph_bar span:before {border-top:8px solid #C42C05;}

.buy_state .desc {text-align:center;margin-top:35px;color:#333;font-size:13px;line-height:20px;margin-left:-20px;width:calc(100% + 40px);}
.buy_state .desc strong {font-weight:bold;}
.event_save .btn_area {margin-top:34px;text-align:center;}
.event_save .btn_area button {width:100%;height:54px;line-height:55px;text-align:center;font-size:16px;font-weight:bold;border-radius:4px;}
.event_save .btn_area button + button {margin-top:10px;}
.event_save .btn_area button.btn01 {color:#fff;border:1px solid #222;background-color:#222;}
.event_save .btn_area button:disabled.btn02 {color:#fff;border:1px solid #bbb;background-color:#bbb;opacity:1;}
.event_save .btn_area button.btn03 {height:52px;line-height:53px;color:#333;border:1px solid #bbb;font-weight:normal;background-color:#fff;}
.info-bx {margin-top:12px;padding:16px 20px;background-color:#f6f8f8;}
.info-bx .info-desc-tit {position:relative;font-weight:bold;font-size:14px;line-height:16px;color:#666;}
.info-bx .info-desc-tit:before {content: '';display: block;position:absolute;top:50%;right: 0;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);transform:translateY(-50%); width:13px;height: 12px;background: url('/cjom/mobile/images/icon/ico-toggle-bx01.svg') no-repeat right center;background-size: 13px auto;}
.info-bx .is-active .info-desc-tit:before {-webkit-transform: translateY(-50%) rotate(180deg);-moz-transform: translateY(-50%) rotate(180deg);transform: translateY(-50%) rotate(180deg)}
.info-bx .info-desc-list {margin-top:15px;}
.info-bx .info-desc-list + .info-desc-list {padding-top:15px;border-top:1px dotted #ddd;}
.info-bx .info-desc-list li {position:relative;padding-left:10px;margin-bottom:8px;font-size:13px;line-height:16px;color:#666;}
.info-bx .info-desc-list li:last-child {margin-bottom: 0;}
.info-bx .info-desc-list li:after {position:absolute;left:0;top:5px;display:block;width:2px;height:2px;background-color:#666;content: '';}

.modal_saveapply .modal__container {width:300px;;padding:48px 16px 20px;}
.modal_saveapply .tit {text-align:center;font-size:16px;line-height:20px;font-weight:bold;}
.modal_saveapply .tit .emp {color:#1ba774;}
.modal_saveapply .tit + .tit {margin-top:8px;}
.modal_saveapply .txt {text-align:center;font-size:14px;line-height:20px;color:#666;margin-top:16px;}
.modal_saveapply .btn-box  {margin-top:32px;}
.modal_saveapply .btn-box .btn {font-size:15px;color:#fff;font-weight:bold;width:100%;height:44px;line-height:44px;letter-spacing:-1px;border-radius:4px;border:1px solid #1ba774;background-color:#1ba774;}
.modal_saveapply .btn-box--col-2 .btn {width:calc(78% - 4px);}
.modal_saveapply .btn-box--col-2 .btn02 {width:20%;border:1px solid #999;color:#333;font-weight:normal;background-color:#fff;}
.modal_saveapply .btn-box--col-2 .btn:nth-child(2n) {margin-left:8px;}