@charset "utf-8";

.plus-wrapper {height:auto;}
.btn-prev-web {display:none;}
.type-hide {overflow:hidden;}

.app-roulette {width:100%;margin:0 auto;padding-top:48px;}
.app-roulette img {width:100%;height:auto;}
.app-roulette .logo {width:80px;}
.app-roulette .event-tit {margin-bottom:24px;text-align:center;}
.app-roulette .event-tit .label-tit {display:inline-block;margin:32px 0 16px;padding:0 24px;line-height:var(--lineheight-heading4);color:#FFF;font-size:var(--font-heading6);font-weight:500;background:#E00842;border-radius:15px;}
.app-roulette .event-tit .date {margin-top:20px;color:#E00842;font-size:var(--font-heading6-s);font-weight:500;line-height:var(--lineheight-heading6-s);}
.app-roulette .event-tit > h1 {color:#14181C;font-size:var(--font-heading1);font-weight:700;line-height:var(--lineheight-heading1);}
.app-roulette .event-tit > h2 {color:#14181C;font-size:24px;font-weight:700;line-height:32px;}
.app-roulette .event-tit .sub-tit {margin-top:16px;color:#666E75;font-size:var(--font-body2);font-weight:400;line-height:var(--lineheight-body2);}
.app-roulette .event-tit .sub-tit > strong {display:block;margin-bottom:4px;color:#14181C;font-size:var(--font-heading6-s);font-weight:500;}

.app-roulette .required-txt {content:'*';margin-right:4px;color:#E00842;font-size:var(--font-body2);font-weight:500;line-height:20px;}
.app-roulette .form-group .form-tit .required-txt {margin-left:4px;}

.app-roulette .inner-box {position:relative;width:100%;text-align:center;background-color:#FFF;border-radius:8px;-webkit-box-shadow:0px 2px 8px 0px rgba(0, 0, 0, 0.06);box-shadow:0px 2px 8px 0px rgba(0, 0, 0, 0.06);}

.list-basic.roulette-info > li:before{top:0.1rem;content:'*';width:0;height:0;}

.app-roulette .step-box {padding:32px 15px;background:#F5F5F6;border-radius:8px;text-align:center;}
.app-roulette .step-box::before {display:inline-block;margin:0 auto 16px;height:22px;padding:0 8px;background-color:#333D47;border-radius:16px;color:#FFF;font-size:var(--font-body3);font-weight:500;text-align:center;line-height:22px;z-index:1;}
.app-roulette .step-box.step1::before {content:'STEP1';}
.app-roulette .step-box.step2::before {content:'STEP2';}
.app-roulette .step-box.step2 {margin-top:40px;}
.app-roulette .step-box.step2 img {width:290px;}
.app-roulette .step-box > p {margin-bottom:4px;color:#14181C;font-size:var(--font-heading6-s);font-weight:500;line-height:24px;}
.app-roulette .step-box > span {display:inline-block;color:#666E75;font-size:var(--font-body2);font-weight:400;line-height:20px;}

.app-roulette .event-area1 {position:relative;padding:0 20px;height:calc(100vh - 48px);/*background:#FFE6ED;*/ background:-o-linear-gradient(bottom, #FFF 0%, #FFE1E3 28.5%, #FFF 100%);background:-webkit-gradient(linear, left bottom, left top, from(#FFF), color-stop(28.5%, #FFE1E3), to(#FFF));background:linear-gradient(0deg, #FFF 0%, #FFE1E3 28.5%, #FFF 100%);border:1px solid transparent;text-align:center}

.app-roulette .roulette-wrap {position:absolute;left:50%;top:62%;-webkit-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);}
.app-roulette .roulette-wrap .roulette-dim .dim-bg {position:absolute;left:50%;top:0;width:290px;height:290px;-webkit-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translateX(-50%);background:#000;opacity:0.55;border-radius:50%;}
.app-roulette .roulette-wrap .roulette-dim .dim-txt {position:absolute;top:50%;left:50%;width:100%;-webkit-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);}
.app-roulette .roulette-wrap .roulette-dim .dim-txt > p {color:#FFF;font-size:var(--font-heading6-s);font-weight:500;line-height:24px;}
.app-roulette .roulette-wrap .roulette-dim .dim-txt > strong {display:block;margin-top:4px;color:#FFF;font-size:var(--lineheight-heading6-s);font-weight:700;line-height:32px;}
.app-roulette .roulette-wrap .roulette-bg > img {position:absolute;z-index:1;}
.app-roulette .roulette-wrap .roulette-bg .bg1 {width:80px;left:-11px;top:-23px;}
.app-roulette .roulette-wrap .roulette-bg .bg2 {width:31px;left:82px;top:-14px;z-index:0;}
.app-roulette .roulette-wrap .roulette-bg .bg3 {width:153px;right:-27px;top:-61px;}
.app-roulette .roulette-wrap .roulette-bg .bg4 {width:76px;left:-25px;bottom:-3px;}
.app-roulette .roulette-wrap .roulette-bg .bg5 {width:88px;right:-23px;bottom:-4px;}
.app-roulette .roulette-wrap .roulette-container {position:relative;display:flex;justify-content:center;align-items:center;width:290px;height:290px;background:url(/resources/img/event/img_roulette_bg.png) no-repeat;background-size:contain;}
.app-roulette .roulette-wrap .roulette-container::after {content:'';display:block;width:280px;height:31px;position:absolute;bottom:-48px;background:url(/resources/img/event/img_shadow.png) no-repeat;background-size:contain;}
.app-roulette .roulette-wrap .roulette-container .roulette-content {width:268px;height:268px;background:url(/resources/img/event/img_roulette_content.png) no-repeat;background-size:100%;transform-origin:center;transition-timing-function:linear;transition:4s;}
.app-roulette .roulette-arrow {position:absolute;top:-12px;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);width:25px;height:38px;background:url(/resources/img/event/img_roulette_arrow.png) no-repeat;background-size:contain;z-index:1;}
.app-roulette .roulette-btn {position:absolute;width:80px;height:80px;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);background:url(/resources/img/event/img_roulette_btn.png) no-repeat;background-size:contain;-webkit-box-shadow:0px 4px 6px 0px rgba(0, 0, 0, 0.15);box-shadow:0px 4px 6px 0px rgba(0, 0, 0, 0.15);color:#FFF;font-size:var(--font-heading6);font-weight:700;line-height:20px;border-radius:80px;}
.app-roulette .roulette-btn > span {margin-top:4px;font-size:var(--font-body3);font-weight:400;line-height:14px;}
.hidden-input {display:none;}
.app-roulette .chk-btn-box {margin-bottom:var(--gap-4x);}
.app-roulette .btn-group {padding:var(--gap-2x) 0 var(--gap-3x);}

@media (max-height:740px) {
  .app-roulette .roulette-wrap {top:68%;}
}
@media (max-height:690px) { 
  .app-roulette .roulette-wrap .roulette-container::after {display:none;}
}
@media (max-height:667px) {
  .app-roulette .roulette-wrap {top:73%;}
}

.app-roulette .event-area2 {padding:40px 20px;background:#EFF6FC;}
.app-roulette .event-area2 .event-gift {width:100%;}
.app-roulette .event-area2 .event-gift li {display:flex;gap:10px;width:100%;}
.app-roulette .event-area2 .event-gift li + li {margin-top:12px;}
.app-roulette .event-area2 .event-gift .label-num {display:inline-block;position:absolute;right:8px;top:8px;padding:0 10px;height:22px;line-height:22px;color:#FFF;font-size:var(--font-body3);font-weight:500;text-align:center;background:#E00842;border-radius:11px;}
.app-roulette .event-area2 .event-gift .inner-box {padding:40px 10px 12px;}
.app-roulette .event-area2 .event-gift .inner-box > p {display:flex;justify-content:center;align-items:center;margin-top:4px;min-height:60px;color:#14181C;font-size:var(--font-body2);font-weight:500;line-height:20px;}

.app-roulette .event-area3 {padding:60px 20px 40px;}
.app-roulette .event-area3 .terms-wrap {margin-top:40px;}
.app-roulette .event-area3 .terms-wrap .tit-sx.txt-gray { color:#666E75;font-size:var(--font-body2);margin-bottom:24px;}
.app-roulette .event-area3 .inner-box {margin-top:24px;padding:0;}
.app-roulette .event-area3 .chk-btn-box label:before {display:none;}
.app-roulette .event-area3 .chk-btn-box input:disabled + label {color:#858B91;-webkit-text-fill-color:inherit;opacity:1;border:1px solid #D6D8DA;background-color:#EBECED;outline:none;cursor:default;}

@media (min-width:1024px) {
  .btn-prev-web {position:absolute;top:12px;left:16px;width:24px;height:24px;background:url(/resources/img/common/icon_prve_app.png) no-repeat center;background-size:11px auto;display:block;z-index:1;}
  
  .app-roulette {width:760px;padding-bottom:76px;}
  .app-roulette .logo {position:relative;}
  .app-roulette .event-tit {position:relative;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);}
  .app-roulette .event-tit > h1 {font-size:var(--font-heading3);line-height:var(--lineheight-heading3);}
  .app-roulette .event-tit .label-tit {font-size:var(--font-heading6-s);line-height:var(--lineheight-heading5);}
  .app-roulette .event-area1 {height:100vh;background:none;}
  .app-roulette .event-area1 .event-tit {margin-top:64px;}
  .app-roulette .event-area1::before {position:absolute;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);top:0;content:'';width:100vw;height:100%;background:-o-linear-gradient(bottom, #FFF 0%, #FFE1E3 28.5%, #FFF 100%);background:-webkit-gradient(linear, left bottom, left top, from(#FFF), color-stop(28.5%, #FFE1E3), to(#FFF));background:linear-gradient(0deg, #FFF 0%, #FFE1E3 28.5%, #FFF 100%);}
  .app-roulette .tip-dropdown-box {margin-top:64px;}
  .app-roulette .event-area3 .chk-btn-box {margin:32px auto;width:320px;}
  .app-roulette .roulette-btn {font-size:var(--font-heading6-s);}
}

/* 당첨 Alert */
.wrap-popup .pop-cont .in-container .dialog-cont.basic-alert .stit {font-size:var(--lineheight-heading6-s);font-weight:700;}
.wrap-popup .pop-cont .in-container .dialog-cont.basic-alert .stit + .dark-info {margin-top:16px;}
.wrap-popup .item-box-img {position:relative;width:100%;height:263px;z-index:999;}
.wrap-popup .item-box-img.top-img {position:absolute;left:0;display:flex;justify-content:center;}
.wrap-popup .particle1 {opacity:0;width:360px;height:260px;position:absolute;top:-36px;left:48%;margin-left:-180px;}
.wrap-popup .particle1.on {width:360px;height:260px;-webkit-animation:flower1 2.4s .2s infinite ;animation:flower1 2.4s .2s infinite ;}
.wrap-popup .particle2 {opacity:0;position:absolute;top:-36px;left:48%;width:360px;height:260px;margin-left:-180px;}
.wrap-popup .particle2.on {width:360px;height:260px;-webkit-animation:flower2 2.4s .2s infinite;animation:flower2 2.4s .2s infinite;}
.wrap-popup .img-gift {width:100%;margin-bottom:16px;}

/* 미당첨 Alert */
.wrap-popup .img-lose {width:100px;margin-bottom:16px;}
.wrap-popup .img-more {width:107px;margin-bottom:16px;}
.wrap-popup .pop-cont .in-container .dialog-cont.basic-alert.event-alert {text-align:center;}
.additional-info {margin:16px 0 0 0;font-size:var(--font-body3);font-weight:400;text-align:center;}
.lose-txt {margin-bottom:74px;}

@-webkit-keyframes flower1 {
  0% { -webkit-transform:scale(0);transform:scale(0);opacity:0;top:50px;}
  10% { -webkit-transform:scale(1);transform:scale(1);opacity:1;top:-36px;}
  15% { -webkit-transform:scale(.9);transform:scale(.9);opacity:1;}
  21% { -webkit-transform:scale(1);transform:scale(1);opacity:1;}
  28% { -webkit-transform:scale(1);transform:scale(1);opacity:1;}
  95% { -webkit-transform:scale(1);transform:scale(1);opacity:1;}
  100% { -webkit-transform:scale(1);transform:scale(1);opacity:0;}
}
@keyframes flower1 {
  0% { -webkit-transform:scale(0);transform:scale(0);opacity:0;top:50px;}
  10% { -webkit-transform:scale(1);transform:scale(1);opacity:1;top:-36px;}
  15% { -webkit-transform:scale(.9);transform:scale(.9);opacity:1;}
  21% { -webkit-transform:scale(1);transform:scale(1);opacity:1;}
  28% { -webkit-transform:scale(1);transform:scale(1);opacity:1;}
  95% { -webkit-transform:scale(1);transform:scale(1);opacity:1;}
  100% { -webkit-transform:scale(1);transform:scale(1);opacity:0;}
}
@-webkit-keyframes flower2 {
  0% { -webkit-transform:scale(0);transform:scale(0);opacity:0;top:50px;}
  12% { -webkit-transform:scale(1);transform:scale(1);opacity:1;top:-36px;}
  17% { -webkit-transform:scale(.9);transform:scale(.9);opacity:1;}
  25% { -webkit-transform:scale(1);transform:scale(1);opacity:1;}
  30% { -webkit-transform:scale(1);transform:scale(1);opacity:1;}
  90% { -webkit-transform:scale(1);transform:scale(1);opacity:1;}
  100% { -webkit-transform:scale(1);transform:scale(1);opacity:0;}
}
@keyframes flower2 {
  0% { -webkit-transform:scale(0);transform:scale(0);opacity:0;top:50px;}
  12% { -webkit-transform:scale(1);transform:scale(1);opacity:1;top:-36px;}
  17% { -webkit-transform:scale(.9);transform:scale(.9);opacity:1;}
  25% { -webkit-transform:scale(1);transform:scale(1);opacity:1;}
  30% { -webkit-transform:scale(1);transform:scale(1);opacity:1;}
  90% { -webkit-transform:scale(1);transform:scale(1);opacity:1;}
  100% { -webkit-transform:scale(1);transform:scale(1);opacity:0;}
}

.event-gift-info {margin-top:24px;}
.event-gift-info .info-tit {font-size:var(--font-heading6);line-height:var(--lineheight-heading6-s);font-weight:700;margin-bottom:12px;}
.exception-info {margin-top:16px;font-size:var(--font-body3);font-weight:400;text-align:center;}

.app-roulette .terms-wrap .top-cont {margin-bottom:var(--gap-4x);}
.app-roulette .terms-wrap .tit-m {margin-bottom:var(--gap-2x);font-size:2rem;line-height:2.6rem;}
.app-roulette .terms-wrap .inner-cont .tit-s {margin-bottom:var(--gap-half);font-size:1.6rem;line-height:2.4rem;}
.app-roulette .terms-wrap .inner-cont * + .tit-s {margin-top:var(--gap-2x);}

@media (min-width:1024px) {
  .wrap-popup .particle1 {display:none;}
  .wrap-popup .particle2 {display:none;}
  .wrap-popup .img-gift {display:block;width:360px;margin:0 auto;}
  .event-gift-info .info-tit {font-size:var(--font-heading6-s);}
}