.popupSample {max-width: 1440px;min-height: 610px;margin: 0 auto;padding: 20px 0 0 0;}
.popupSample button, .popupSample a {width: auto;height: auto;margin: 0 20px 20px 0;padding: 15px 30px;display: inline-block;color: #fff;font-size: 16px;text-align: center;background: #333;cursor: pointer;}

/* popup */
.scrollNo{overflow: hidden !important;-webkit-overflow-scrolling: touch;}
.modalPopup{position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(0, 0, 0, 0.7);-webkit-overflow-scrolling: touch;z-index: 99999;opacity: 0;overflow-y: auto;overflow-x: hidden;visibility: hidden;-webkit-transition: all 0.5s ease;transition: all 0.5s ease;-webkit-transition-property: opacity, visibility;transition-property: opacity, visibility;-webkit-transition-delay: 100ms;transition-delay: 100ms;}
.modalCenter{position: absolute;width: 100%;height: auto;min-height: 100%;display: flex;justify-content: center;align-items: center;padding: 40px 0;box-sizing: border-box;}
.modalInner{position: relative;max-width: 100%;width: 600px;padding: 54px 30px 30px;background: #FFFFFFE5;backdrop-filter: blur(20px);box-sizing: border-box;-webkit-animation: slideOutDown 0.5s;-moz-animation: slideOutDown 0.5s;-ms-animation: slideOutDown 0.5s;-o-animation: slideOutDown 0.5s;animation: slideOutDown 0.5s;-webkit-animation-fill-mode: forwards;animation-fill-mode: forwards;overflow: hidden;}
.btnModalClose{position: absolute;right: 30px;top: 30px;width: 24px;height: 24px;background-image: url(../images/icon_popup_close.svg);background-size: cover;background-position: center;background-repeat: no-repeat;overflow: hidden;text-indent: -9999px;white-space: nowrap;}

.modalPopup.show{opacity: 1;visibility: visible;-webkit-transition-delay: 0s;transition-delay: 0s;}
.modalPopup.show .modalInner{-webkit-animation: slideInUp 0.5s 50ms;-moz-animation: slideInUp 0.5s 50ms;-ms-animation: slideInUp 0.5s 50ms;-o-animation: slideInUp 0.5s 50ms;animation: slideInUp 0.5s 50ms;-webkit-animation-fill-mode: backwards;animation-fill-mode: backwards;}

.modalPopup .btnGroup{margin-top: 30px; display:flex;}
.modalPopup .btnGroup.reverse {flex-direction:row-reverse;}
.modalPopup .textGroup + .btnGroup{margin-top: 0;}
.modalPopup .btnGroup .btnItem{display: flex;align-items: center;justify-content: center;width: 100%;padding: 23px 0px;box-sizing: border-box;color: #F2F2F2;font-size: 24px;font-weight: 800;line-height: 100%;}
.modalPopup .btnGroup .btnItem.black{background: #131313;border: 1px solid #131313;}
.modalPopup .btnGroup .btnItem.line{border: 1px solid #969696; background:transparent; color:#131313;}
.modalPopup .btnGroup .btnItem + .btnItem{margin-left: 12px;}
.modalPopup .btnGroup.reverse  .btnItem + .btnItem {margin-right: 12px;}
.modalPopup .btnGroup .btnItem[disabled], .modalPopup .btnGroup .btnItem.disabled{background: #D2D2D2;color: #ADADAD;pointer-events: none;}
.modalPopup .textGroup{padding: 60px 0 70px;box-sizing: border-box;}
.modalPopup .redText{display: block;margin: 20px auto;color: #FF4655;text-align: center;font-size: 20px;font-weight: 600;line-height: 160%;}
.modalPopup .textXs{display: block;margin-top: 20px;color:#131313;font-size: 16px;font-weight: 500;line-height: 160%;opacity: 0.6;text-align: left;word-break: keep-all;}
.modalPopup .textMd{display: block;color: #131313;text-align: center;font-size: 24px;font-weight: 600;line-height: 160%;word-break: keep-all;}
.modalPopup .textLg{display: block;margin-top: 30px;color: #131313;text-align: center;font-size: 28px;font-weight: 700;line-height: 100%;word-break: keep-all;}
.modalPopup .textXl{display: block;margin-top: 30px;color: #131313;text-align: center;font-family: var(--font02); font-size: 80px;font-weight: 400;line-height: 100%; letter-spacing:-0.02em; word-break: keep-all;}
.modalPopup .textXl + .textLg{margin-top: 16px;}
.modalPopup .imgItme{position: relative;width: 300px;height: 300px;margin: 18px auto;}
.modalPopup .imgItme img{position: absolute;top: 0;left: 0;width: 100%;height: 100%;vertical-align: bottom;object-fit: cover;}

.loading{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: #FFF;display: flex;align-items: center;justify-content: center;z-index: 9;}
.loading p{position: relative;padding-top: 124px;box-sizing: border-box;color: #131313;font-size: 20px;font-weight: 700;line-height: 110%;letter-spacing: 1.6px;}
.loading p:before{content: "";position: absolute;top: 0;left: 50%;margin-left: -50px; display: block;width: 100px;height: 100px;background-image: url(../images/img_loading_lg.svg);background-position: center;background-repeat: no-repeat;animation: rotateRight 2s linear infinite;}
.loading p:after{content: "";position: absolute;top: 0;left: 50%;margin-left: -50px; display: block;width: 100px;height: 100px;background-image: url(../images/img_loading_sm.svg);background-position: center;background-repeat: no-repeat;animation: rotateLeft 2s linear infinite;}
.modalInner.loadingInner {padding:23px 0 ;}

.prizeSlider{margin: 30px 0 0 !important;}
.prizeSlider .slick-prev, .prizeSlider .slick-next{width: 60px;height: 60px;border: 1px solid #131313;background-image: url(../images/arrow_prize_left.svg);background-position: center;background-repeat: no-repeat;border-radius: 100%;box-sizing: border-box;opacity: 0.4;}
.prizeSlider .slick-prev{left: 10px;}
.prizeSlider .slick-next{right: 10px;transform: translate(0, -50%) rotate(180deg);}
.prizeSlider .slick-slide{text-align: center;}
.prizeSlider .slideItem{position: relative;width: 300px !important;height: 300px;margin: 0 auto;}
.prizeSlider .slideItem img{position: absolute;top: 0;left: 0;width: 100%;height: 100%;vertical-align: bottom;object-fit: cover;}
.prizeSlider .slick-dots{position: initial;margin-top: 20px;line-height: 0;}
.prizeSlider .slick-dots li{width: 10px;height: 10px;}
.prizeSlider .slick-dots li button{width: 100%;height: 100%;border-radius: 100%;padding: 0;background: #000;opacity: 0.2;box-sizing: border-box;}
.prizeSlider .slick-dots li.slick-active button{opacity: 0.6;}
.prizeSlider .slick-dots li button:before{display: none;}

.modalMypage .modalInner {width:1020px; padding:0; background:#fff;}
.modalMypage .textXl {font-family: var(--font02);font-weight: 400;font-size: 56px;line-height: 150%;letter-spacing: -0.02em; text-align:left; margin-top:0;}
.modalMypage .title_wrap {height:71px; padding:60px 60px 0;}
.modalMypage .scroll_wrap {max-height:739px;overflow-y:auto;/*min-height:539px;*/}
.modalMypage .emptyTxt {font-weight: 600;font-size: 18px;line-height: 150%;letter-spacing: -0.02em;text-align: center;color:#282A2C; padding-top:176px; padding-bottom:306px;}
.history_wrap {padding:40px 70px;}
.prizeHistory{display: flex;flex-direction: row;flex-wrap: wrap;justify-content: flex-start;align-items: stretch;gap: 40px;}
.prizeHistory .item{width: calc((100% - 120px) / 4);box-sizing: border-box;}
.prizeHistory .item .date{display: flex;align-items: center;height: 28px;border-bottom: 2px solid #8B978F; border-top:2px solid #8B978F; box-sizing: border-box;font-weight: 700;font-size: 14px;line-height: 130%;letter-spacing: 0; text-align:left; color:#8B978F;}
.prizeHistory .item .name{display: flex;align-items: center;justify-content: center;width: 100%;height: 22px;box-sizing: border-box;font-weight: 500;font-size: 16px;line-height: 140%;letter-spacing: 0;text-align: center;word-break: keep-all; color:#131313}
.prizeHistory .item .img{position: relative;width: 190px;height: 190px;margin: 0 auto;}
.prizeHistory .item .img img{position: absolute;top: 0;left: 0;width: 100%;height: 100%;vertical-align: bottom;object-fit: cover;}
.btnDelivery{display: flex;justify-content: center;align-items: center;width: 100%;height: 47px;margin-top: 15px; border-radius:8px; background: #131313;color: #fff;text-align: center;font-size: 16px;font-weight: 700;line-height: 100%;letter-spacing: 0.04em;}
.getItemBtn {width:115px; height: 21px; background: #DAE3DD;color: #8B978F;text-align: center;font-size: 14px;font-weight: 700;line-height: 21px;letter-spacing: 0.1em; margin:15px auto 0; display:block;}

@media screen and (max-width: 1020px){
	.modalMypage .modalInner {width: 87.6712vw;}
	.modalMypage .textXl {font-size: 5.49019607vw;}
	.modalMypage .title_wrap {height:6.96078431vw; padding:5.88235vw 5.88235vw 0; }
	.modalMypage .scroll_wrap {max-height:72.45098vw; /*min-height:52.84313vw;*/}
	.history_wrap {padding:3.9215686vw 6.862745vw 6.510416666vw;}
	.prizeHistory{gap: 3vw;}
    .prizeHistory .item{width: calc((100% - 9vw) / 4);}
    .prizeHistory .item .date{height: 2.74509vw;font-size: 1.3725490vw; line-height:100%;}
    .prizeHistory .item .name{height: 2.156862vw;font-size: 1.568627vw}
    .prizeHistory .item .img{width: 18.627450vw;height: 18.627450vw;}
    .btnDelivery{height: 4.607843vw;margin-top: 1.4705882vw; border-radius:0.7843137vw; font-size:1.56862vw;}
	.getItemBtn {width:11.274509vw; height: 2.05882vw; font-size: 1.372549vw; line-height: 2.05882vw; margin:1.4705882vw auto 0;}
	
}

@media screen and (max-width: 768px){

    .modalInner{width: 87.6712vw;padding: 10.4110vw 5.4795vw 5.4795vw;}
    .btnModalClose{right: 5.4795vw;top: 5.4795vw;width: 4.9315vw;height: 4.9315vw;}
    .modalPopup .btnGroup{margin-top: 5.4795vw; display:block;}
    .modalPopup .btnGroup .btnItem{padding: 4.3836vw 0.0000vw;font-size: 4.9315vw;}
    .modalPopup .btnGroup .btnItem + .btnItem{margin-top: 2.1918vw; margin-left:0;}
	.modalPopup .btnGroup.reverse .btnItem + .btnItem {margin-right:0;}
    .modalPopup .textGroup{padding: 8.2192vw 0 10.9589vw;}
    .modalPopup .redText{font-size: 3.8356vw;}
    .modalPopup .textXs{margin-top: 5.4795vw;font-size: 3.2877vw;}
    .modalPopup .textMd{font-size: 4.3836vw;}
    .modalPopup .textLg{margin-top: 5.4795vw;font-size: 4.9315vw;}
    .modalPopup .textXl{margin-top: 5.4795vw;font-size: 11.11111vw;}
    .modalPopup .textXl + .textLg{margin-top: 3.2877vw;}
    .modalPopup .imgItme{width: 43.8356vw;height: 43.8356vw;margin: 4.1096vw auto;}
    .loading p{font-size: 4.3836vw;}
	.modalInner.loadingInner {padding:5vw 0;}

    .prizeSlider{margin: 5.4795vw 0 0 !important;}
    .prizeSlider .slick-prev, .prizeSlider .slick-next{display: none;}
    .prizeSlider .slideItem{width: 41.0959vw !important;height: 41.0959vw;}
    .prizeSlider .slick-dots{margin-top: 2.7397vw;}
    .prizeSlider .slick-dots li{width: 1.6438vw;height: 1.6438vw;}

	.modalMypage {padding:0; width:100%; height:100vh; /*height: var(--vh);*/height: 100dvh; height: 100vh; height: -webkit-fill-available;height: fill-available;padding-bottom: env(safe-area-inset-bottom);}
	.modalMypage .modalInner {padding:0; width:100%; height:100%;}
	.modalMypage .modalBody {width:100%; height:100%;} 
	.modalMypage .textXl {font-size: 11.11111vw; margin-top:0; line-height:100%;}
	.modalMypage .title_wrap {/* height:auto; */padding: 16.66666vw 5.555555vw 5.555555vw;height: 33.3333vw;box-sizing: border-box;}
	.modalMypage .scroll_wrap {max-height:initial; /*min-height:initial;*/ height:calc(100vh - 33.333333vw);}
	.modalMypage .emptyTxt {font-size:4.44444vw; padding-top:63.33333vw; padding-bottom:0;}
	
	.history_wrap {padding: 4.166666vw 5.555555vw 33vw; /*height:100%;*/}
	.prizeHistory{gap:0 2.777777vw;}
    .prizeHistory .item{width: calc((100% - 5.55555vw) / 2); margin-bottom:9.72222vw;}
    .prizeHistory .item .date{height: 7.5vw;font-size: 3.611111vw;}
    .prizeHistory .item .name{height: 5.55555vw;margin: 0 auto; font-size: 3.888888vw;}
    .prizeHistory .item .img{width: 43.055555vw;height: 43.055555vw;}
    .btnDelivery{height: 11.66666vw;margin-top: 2.777777vw;  border-radius:2.22222vw; font-size: 4.166666vw}
	.getItemBtn {width:30.277777vw; height: 5.55555vw; font-size: 3.611111vw; line-height: 5.55555vw; margin:5.55555vw auto 0;}
}

@-webkit-keyframes slideInUp {
    from {
        -webkit-transform: translate3d(0, 5%, 0);
        transform: translate3d(0, 5%, 0);
        visibility: visible;
        -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
        animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
        animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    }
}
@-moz-keyframes slideInUp {
    from {
        -webkit-transform: translate3d(0, 5%, 0);
        transform: translate3d(0, 5%, 0);
        visibility: visible;
        -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
        animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
        animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    }
}
@-ms-keyframes slideInUp {
    from {
        -webkit-transform: translate3d(0, 5%, 0);
        transform: translate3d(0, 5%, 0);
        visibility: visible;
        -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
        animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
        animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    }
}
@-o-keyframes slideInUp {
    from {
        -webkit-transform: translate3d(0, 5%, 0);
        transform: translate3d(0, 5%, 0);
        visibility: visible;
        -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
        animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
        animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    }
}
@keyframes slideInUp {
    from {
        -webkit-transform: translate3d(0, 5%, 0);
        transform: translate3d(0, 5%, 0);
        visibility: visible;
        -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
        animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
        animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    }
}

@-webkit-keyframes slideOutDown {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    to {
        visibility: hidden;
        -webkit-transform: translate3d(0, 5%, 0);
        transform: translate3d(0, 5%, 0);
    }
}
@-moz-keyframes slideOutDown {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    to {
        visibility: hidden;
        -webkit-transform: translate3d(0, 5%, 0);
        transform: translate3d(0, 5%, 0);
    }
}
@-ms-keyframes slideOutDown {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    to {
        visibility: hidden;
        -webkit-transform: translate3d(0, 5%, 0);
        transform: translate3d(0, 5%, 0);
    }
}
@-o-keyframes slideOutDown {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    to {
        visibility: hidden;
        -webkit-transform: translate3d(0, 5%, 0);
        transform: translate3d(0, 5%, 0);
    }
}
@keyframes slideOutDown {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    to {
        visibility: hidden;
        -webkit-transform: translate3d(0, 5%, 0);
        transform: translate3d(0, 5%, 0);
    }
}

@keyframes rotateRight {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
@keyframes rotateLeft {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-360deg);
    }
}