@charset "UTF-8";
:root {
  --vh: 1%;
  /* 기본색상 */
  --color-link-apply:#000000
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local("Poppins"), url("https://fin.test.kakaobankcontent.com/common/font/poppins/Poppins-Bold.woff");
  src: local("Poppins"), url("./poppins/Poppins-Bold.woff"); /* local */
}
html,
body,
main {
  height: 100%;
  height: calc(var(--vh, 1vh) * 100);
}
html,
body {
  -webkit-user-select:none;
  -khtml-user-select:none;
  -moz-user-select:-moz-none;
  -o-user-select:none;
  user-select:none;
  min-width:initial;
}
* {
  font-family:'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', system-ui, sans-serif;
}
section,
.section {
  position:relative;
  z-index:2;
  box-sizing:border-box;
}
body {
  position:relative;
  /* background:#111;overflow:hidden; */
  height:auto !important;
  overflow-y:auto;
}
::-webkit-scrollbar {
  display:none;
  /* Chrome, Safari, Opera*/
  scrollbar-width:none;
  /* Firefox */
  scroll-behavior:smooth;
}
body.hide {
  overflow:hidden;
  height:calc(var(--vh, 1vh) * 100);
}
/* 공통 */
/* 공유하기 */
.theme-dark #share {
  margin-top:-60px;
  padding-right:45px;
  padding-left:45px;
  background-color:transparent;
}
.theme-dark #share .share-btn {
  min-width:188px;
  color:#fff;
  background-color:#555;
}
.theme-dark #share .share-btn svg circle,
.theme-dark #share .share-btn svg path {
  stroke: #fff;
}
.theme-dark #share .share-btn svg circle {
  fill:#555555;
}
@media screen and (max-width: 373.98px) {
  .theme-dark #share {
    padding-right:0;
    padding-left:0;
  }
}
/* 꼭알아두세요 */
#eventInfo .info-head {
  margin-bottom:40px;
}
#eventInfo .serial.serial-tline {
  margin-top:10px;
  font-size:16px;
}
#eventInfo .serial.serial-tline .info-list {
  margin-top:0;
}
#eventInfo .info-list li::before {
  background-color:#F1F1F1;
}

/* 플로팅 버튼 */
.wrap_apply {
  position:fixed;
  bottom:23px;
  z-index:-1;
  width:100%;
  padding:0 22px;
  box-sizing:border-box;
  opacity:0;
  transition:all 0.3s 1s;
}
.wrap_apply .link_apply {
  display:block;
  width:100%;
  max-width:325px;
  height:66px;
  margin:0 auto;
  border-radius:16px;
  text-decoration:none;
  font-size:20px;
  font-weight:700;
  line-height:66px;
  color:#fff;
  text-align:center;
  background: var(--color-link-apply);
}
.wrap_apply .link_apply .ico_arrow {
  display: inline-block;
  width:7px;
  height:13px;
  margin:27px 0 0 4px;
  background-image: url(https://og.kakaobank.io/view/aa7de9c8-a8de-4918-9add-1ccc1d6f81d0);
  background-repeat:no-repeat;
  background-size:100%;
}
/* popup */
.popups {
  visibility:hidden;
  opacity:0;
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:999;
  transition:all 0.4s;
}
.popups.on {
  visibility:visible;
  opacity:1;
}
.popups .dimmed {
  position:absolute;
  width:100%;
  height:100%;
  background:#000;
  opacity:0.6;
}
.popups .modal_layer {
  display:table;
  width:100%;
  height:100%;
  table-layout:fixed;
}
.popups .inner_layer {
  display:table-cell;
  width:100%;
  height:100%;
  vertical-align:middle;
  text-align:center;
}
.popups .layer_body {
  position:relative;
  max-width:330px;
  margin:0 auto;
  padding:14px;
  border-radius:20px;
  background:#fff;
  box-sizing:border-box;
}
.popups .title {
  margin-bottom:20px;
  font-size: 20px;
  font-weight: 700;
  line-height: 23.87px;
  letter-spacing: -0.5px;
  text-align: center;
}
/* .popups .title:not([class*="--b"]) {
  margin:26px auto 20px;
}*/
.popups .title[class*="--b"] {
  margin:35px auto;
  margin:0 auto;
} 
.popups .area_apply {
  width:100%;
}
.popups .area_apply .link_g {
  display:inline-block;
  width:100%;
  padding:18px 0 18px;
  border-radius:10px;
  font-weight:800;
  font-size:20px;
  line-height:24px;
  color:#fff;
  text-align:center;
  background:#000;
  box-sizing:border-box;
}
.popups .sub {
  display:block;
  font-weight:400;
  font-size:15px;
  line-height:18px;
  letter-spacing:-1px;
  color:#333333;
}
/* .popups .sub:not([class*="--b"]) {
  margin:20px auto 35px;
}
.popups .sub[class*="--b"] {
  margin:40px auto 35px;
} */
#btnApply {
  z-index:-1;
  visibility:hidden;
  opacity:0;
  /* 처음부터 보이게 : 스타일로 수정 */
  z-index:9;
  opacity:1;
  visibility:visible;
}
#btnApply.is-active {
  z-index:9;
  opacity:1;
  visibility:visible;
  display:block;
  transition:all 0.5s;
}
.popup-youtube {
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  box-sizing:border-box;
  padding:20px 0;
  background:rgba(0, 0, 0, 0.8);
  z-index:1;
  opacity:0;
  visibility:hidden;
}
.popup-youtube.on {
  opacity:1;
  transition:all 0.5s 0.8s;
  visibility:visible;
  z-index:99;
}
.popup-youtube .modal-table {
  display:table;
  width:100%;
  height:100%;
}
.popup-youtube .modal-cell {
  display:table-cell;
  width:100%;
  height:100%;
  vertical-align:middle;
  text-align:center;
}
.popup-youtube .iframe-wrap {
  display:inline-block;
  width:100%;
  height:80%;
}
.popup-youtube .modal-open {
  display:block;
  z-index:1000;
}
.popup-youtube .btn-close-modal {
  position:fixed;
  top:22px;
  right:17px;
  color:transparent;
  font-size:0;
  width:36px;
  height:36px;
  padding:11px;
}
/* .popup-single {opacity:1; visibility:visible;} */
/* 팝업 모달 */
.popups .modal-content {
  max-width: 305px;
}
.popup-single .modal-content .modal-image {
  margin-top:35px;
}
.popup-single .modal-content .modal-image .pu-img {
  width:235px;
  height:167px;
}
.popup-single .modal-btn {
  display:flex;
  gap:8px;
  margin-top:35px;
}
.popup-single .modal-btn .okay-btn:not([class*='--info']) {
  flex:0 0 80px;
}
.popup-single .modal-btn .okay-btn .btn-ok {
  padding:18px 0;
  color:#000;
  font-weight:700;
  /* font-size:18px; */
  background-color:#E2E2E2;
}
.popup-single .modal-btn .okay-btn .btn-ok[class*='--info'] {
  color:#fff;
  background-color:#000;
}
.popup-single .modal-btn .close-on {
  display: none;
}

.inmotion {
  transform:translate(0, 50px); 
  opacity: 0;
}
.play-inmotion.inmotion,
.play.inmotion {
  transform:translate(0, 0); 
  opacity: 1; 
  transition:transform 0.6s 0.1s, opacity 0.6s 0.1s; 
  -webkit-transition:transform 0.6s 0.1s, opacity 0.6s 0.1s; 
  -moz-transition:transform 0.6s 0.1s, opacity 0.6s 0.1s; 
  -ms-transition:transform 0.6s 0.1s, opacity 0.6s 0.1s; 
  -o-transition:transform 0.6s 0.1s, opacity 0.6s 0.1s; 
}
.accordion-block .accordion-btn span:first-child {
  width: calc(100% - 22px);
  display: inline-block;
  word-break: keep-all;
}
/* 하단으로 이동 */
.scroll-down {
  position: absolute;
  left: 50%;
  bottom:45px;
  width: 18px;
  height: 9px;
  -webkit-animation: mouseloop 0.8s infinite alternate;
  animation: mouseloop 0.8s infinite alternate;
  z-index: 10;
}
.scroll-down.scroll-ios {
  bottom:36px;
}
@-webkit-keyframes mouseloop {
  0% {-webkit-transform: translateY(0) translateX(-50%);opacity: 0.85;}
  100% {-webkit-transform: translateY(-12px) translateX(-50%);opacity: 1;}
}
@keyframes mouseloop {
  0% {transform: translateY(0) translateX(-50%);opacity: 0.85;}
  100% {transform: translateY(-12px) translateX(-50%);opacity: 1;}
}

/* 컨텐츠 영역 */
/* 컨텐츠 공통 */
/* section-top */
.section-top .inner {
  padding:71px 0 110px;
  padding:71px 0 0;
  /* padding:9.77vh 0 110px; 
  padding-top:calc(var(--vh, 1vh) * 9);*/
  height: calc(var(--vh, 1vh) * 100);
  text-align: center;
}
.section-top .motion-wrap {
  max-width:375px;
  width:100%;
  height:auto;
  text-align: center;
  margin:0 auto;
}
/* .section-top .motion-wrap img {
  width:265px;
} */
.section-top .cont-txt {
  margin-top:45px;
  font-size: 23px;
  font-weight: 800;
  line-height: 33px;
}

/* section1 : 2개의 카드로 같이 쓰면 커지는 혜택! */
.section1 {
  overflow:hidden;
}
.section1 .inner {
  padding:50px 24px 100px;
  text-align: center;
}
.section1 .inner .tit-box p {
  margin-bottom:10px;
  font-size: 30px;
  font-weight: 800;
  line-height: 44px;
  letter-spacing: -1px;
}
.section1 .inner .tit-box span {
  color:#FF7A00;
  font-size: 17px;
  font-weight: 600;
  line-height: 27px;
  letter-spacing: -1px;
}
.section1 .motion-wrap {
  position:relative;
  width:193px;
  height:148px;
  width:182px;
  height:144px;
  margin:60px auto 0;
}
.section1 .motion-wrap [class^="img-card"] {
  position:absolute;
}
.section1 .motion-wrap .coin-area {
  position:absolute;
  display:inline-block;
  width:72px;
  height:72px;
  perspective:140px;
}
.section1 .motion-wrap .coin-area.type1 {
  left:0;
}
.section1 .motion-wrap .coin-area.type2 {
  right:0;
  bottom:0;
}
.section1 .motion-wrap .item-coin {
  position:relative;
  display: block;
  height:72px;
  transform-style:preserve-3d;
}
.section1 .motion-wrap.play-inmotion .coin-area.type1 .item-coin {
  -webkit-animation: spin 2.8s 0s cubic-bezier(0.51, 0.02, 0.26, 1.11) infinite; 
  animation: spin 2.8s 0s cubic-bezier(0.51, 0.02, 0.26, 1.11) infinite;
}
.section1 .motion-wrap.play-inmotion .coin-area.type2 .item-coin {
  -webkit-animation: spin2 2.8s 0s cubic-bezier(0.51, 0.02, 0.26, 1.11) infinite;;
  animation: spin2 2.8s 0s cubic-bezier(0.51, 0.02, 0.26, 1.11) infinite;
}
@-webkit-keyframes spin {
  0%, 25% {-webkit-transform: rotate3d(0, 1, 0, 0);}
  75%,100% {-webkit-transform: rotate3d(0, 1, 0, 360deg);}
}
@keyframes spin {
  0%, 25% {transform: rotate3d(0, 1, 0, 0);}
  75%,100% {transform: rotate3d(0, 1, 0, 360deg);}
}
/* @-webkit-keyframes spin2 {
  0%, 45% {-webkit-transform: rotate3d(0, 1, 0, 0);}
  55%,100% {-webkit-transform: rotate3d(0, 1, 0, 360deg);}
} */
@keyframes spin2 {
  0%, 55% {transform: rotate3d(0, 1, 0, 0);}
  90%,100% {transform: rotate3d(0, 1, 0, 360deg);}
}
.section1 .motion-wrap .img-card-coin {
  left:0;
  width:72px;
  height:72px;
}
.section1 .motion-wrap .img-card-coin2 {
  right:0;
  bottom:0;
  width:72px;
}
.section1 .motion-wrap .img-card-plus,
.section1 .motion-wrap .img-card-mulitply {
  left:0;
  width:72px;
  height:72px;
  backface-visibility: hidden;
  display:block;
  box-sizing: border-box;
  transform: rotateY(180deg);
}
.section1 .motion-wrap .img-card-money {
  right:0;
  width:110px;
}
.section1 .motion-wrap .img-card-money2 {
  left:0;
  bottom:0;
  width:110px;
}
.section1 .card-list {
  margin-top:53px;
}
.section1 .card-list li {
  display:flex;
  height:185px;
  padding:30px 34px 30px 31px;
  text-align: left;
  border-radius: 24px;
  background-color:var(--card-bgcolor);
  background-image:var(--card-img);
  background-repeat:no-repeat;
  background-position:calc(100% - 32px) center;
  background-size:78px 125px;
  box-sizing: border-box;
}
.section1 .card-list li + li {
  margin-top:26px;
  height:183px;
  background-size:84px 123px;
}
.section1 .card-list li div > span {
  display:inline-block;
  width:var(--card-width);
  margin-bottom:18px;
  padding:8px 10px;
  color:var(--card-color);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.1px;
  text-align: center;
  border-radius: 7px;
  background-color:var(--card-sbgcolor);
  box-sizing: border-box;
}
.section1 .card-list li div > p {
  font-size: 19px;
  font-weight: 700;
  line-height: 26px;
}
.section1 .card-list li div > p > span {
  color:var(--card-scolor)
}

/* section2 : 100% 당첨 이벤트 혜택 */
.section2 .inner {
  position:relative;
  padding:0 24px 60px;
  text-align: center;
}
.section2 .tit-box span {
  color:#AC60FF;
  font-size: 20px;
  font-weight: 600;
  line-height: 23.87px;
  letter-spacing: -0.1px;
}
.section2 .tit-box p {
  margin:9px auto 26px;
  font-size: 30px;
  font-weight: 800;
  line-height: 36px;
  letter-spacing: -0.1px;
}
.section2 .tit-box em {
  color:#7E7E7E;
  font-size: 17px;
  font-weight: 600;
  line-height: 20.29px;
  letter-spacing: -0.1px;
}
.section2 .motion-wrap {
  position:relative;
  width:187px;
  height:178px;
  margin:60px auto 0;
}
.section2 .motion-wrap::after {
  content:"";
  position:absolute;
  right:-50px;
  bottom:-100px;
  left:-50px;
  display:inline-block;
  height:100px;
  background:#fff;
}
.section2 .motion-wrap [class*="img-gift"] {
  position:absolute;
  opacity: 0;
}
.section2 .motion-wrap .img-gift-purple {
  top:1px;
  left:0;
  width:95px;
}
.section2 .motion-wrap.play-inmotion .img-gift-purple {
  -webkit-animation: gift-purple-ani 1.5s cubic-bezier(.5, 0.05, 1, .5) 0.5s forwards;
  animation: gift-purple-ani 1.5s cubic-bezier(.5, 0.05, 1, .5) 0.5s forwards;
}
@-webkit-keyframes gift-purple-ani {
  0% {-webkit-transform: translateY(-40px) rotate(1deg) scale(0.9);}
  30% {-webkit-transform: translateY(0) translateX(-1px) rotate(0) scale(1); opacity: 1;}
  40% {-webkit-transform: translateY(-2px) rotate(2deg);}
  45% {-webkit-transform: translateY(0);}
  50% {-webkit-transform: translateY(-1px);}
  100% {-webkit-transform: translateY(0); opacity:1;}
}
@keyframes gift-purple-ani {
  0% {transform: translateY(-40px) rotate(1deg) scale(0.9);}
  30% {transform: translateY(0) translateX(-1px) rotate(0) scale(1); opacity: 1;}
  40% {transform: translateY(-2px) rotate(2deg);}
  45% {transform: translateY(0);}
  50% {transform: translateY(-1px);}
  100% {transform: translateY(0); opacity:1;}
}
.section2 .motion-wrap .img-gift-green {
  right:0;
  width:92px;
}
.section2 .motion-wrap.play-inmotion .img-gift-green {
  -webkit-animation: gift-green-ani 1.5s cubic-bezier(.5, 0.05, 1, .5) 0.5s  forwards;
  animation: gift-green-ani 1.5s cubic-bezier(.5, 0.05, 1, .5) 0.5s  forwards;
}
@-webkit-keyframes gift-green-ani {
  0% {-webkit-transform: translateY(-50px) rotate(2deg) scale(0.9);}
  30% {-webkit-transform: translateY(0) rotate(0) scale(1); opacity: 1;}
  40% {-webkit-transform: translateY(-2px) rotate(-1deg);}
  50% {-webkit-transform: translateY(0);}
  55% {-webkit-transform: translateY(-1px);}
  100% {-webkit-transform: translateY(0); opacity:1;}
}
@keyframes gift-green-ani {
  0% {transform: translateY(-50px) rotate(2deg) scale(0.9);}
  30% {transform: translateY(0) rotate(0) scale(1); opacity: 1;}
  40% {transform: translateY(-2px) rotate(-1deg);}
  50% {transform: translateY(0);}
  55% {transform: translateY(-1px);}
  100% {transform: translateY(0); opacity:1;}
}
.section2 .motion-wrap .img-gift-orange {
  bottom:0;
  left:0;
  width:187px;
}
.section2 .motion-wrap.play-inmotion .img-gift-orange {
  -webkit-animation: gift-orange-ani 1.5s cubic-bezier(.5, 0.05, 1, .5) 0.5s forwards;
  animation: gift-orange-ani 1.5s cubic-bezier(.5, 0.05, 1, .5) 0.5s forwards;
}
@-webkit-keyframes gift-orange-ani {
  0% {-webkit-transform: translateY(-70px) rotate(2deg) scale(0.95);}
  25% {-webkit-transform: translateY(0) rotate(0) scale(1);opacity: 1;}
  35% {-webkit-transform: translateY(-1px) rotate(-1deg);}
  40% {-webkit-transform: translateY(0);}
  45% {-webkit-transform: translateY(-1px);}
  100% {-webkit-transform: translateY(0); opacity:1;}
}
@keyframes gift-orange-ani {
  0% {transform: translateY(-70px) rotate(2deg) scale(0.95);}
  25% {transform: translateY(0) rotate(0) scale(1);opacity: 1;}
  35% {transform: translateY(-1px) rotate(-1deg);}
  40% {transform: translateY(0);}
  45% {transform: translateY(-1px);}
  100% {transform: translateY(0); opacity:1;}
}
.section2 .benefit-wrap {
  margin-top:63px;
  padding:66px 0;
  border-radius: 24px;
  background:#E9F6EF;
}
.section2 .benefit-wrap .benefit-list li + li {
  margin-top:67px;
}
.section2 .benefit-wrap .benefit-list li .badge {
  display:inline-flex;
  align-items: center;
  height:32px;
  padding: 0 14px;
  color:#fff;
  font-family: "Poppins";
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  border-radius: 31px;
  background-color:var(--badge-bgcolor)
}
.section2 .benefit-wrap .benefit-list li .desc {
  margin-top:19px;
  color:#72867B;
  font-size: 17px;
  font-weight: 600;
  line-height: 21.48px;
}
.section2 .benefit-wrap .benefit-list li .tit {
  margin-top:9px;
  font-size: 26px;
  font-weight: 800;
  line-height: 36px;
  letter-spacing: -0.1px;
}
.section2 .benefit-wrap .benefit-list li .tit span {
  color:var(--tit-color);
}
.section2 .benefit-wrap .benefit-list li .sub-desc {
  display:inline-block;
  margin-top:17px;
  color:#9AADA3;
  font-size: 13px;
  font-weight: 400;
  line-height: 15.51px;
}
.section2 .benefit-wrap .benefit-list li .benefit-img {
  display:inline-block;
  width:209px;
  height:209px;
  margin-top:27px;
  border-radius: 50%;
  background-color:#fff;
  background-repeat:no-repeat;
  background-position:center;
}
.section2 .benefit-wrap .benefit-list li:first-child .benefit-img {
  background-image:url(https://og.kakaobank.io/view/f8625f38-6330-47be-8810-4b7899b2f20d);
  background-size:81px 139px;
}
.section2 .benefit-wrap .benefit-list li:nth-child(2) .benefit-img {
  background-image:url(https://og.kakaobank.io/view/98933e8c-6cad-4958-8a15-70336248aa0f);
  background-size:145px 62px;
}
.section2 .benefit-wrap .benefit-list li:last-child .benefit-img {
  background-image:url(https://og.kakaobank.io/view/ed036e56-30a2-49cd-a63a-4ee92b090135);
  background-size:103px 169px;
}


@media screen and (min-width: 768px) {
}
@media screen and (max-width: 767.98px) {
}
@media screen and (max-width: 360.98px) {
  .section:not(#eventInfo) .inner {
    padding-right:20px;
    padding-left:20px;
  }
  .section.section-top .inner {
    padding-right:0 !important;
    padding-left:0 !important;
  }
  .section1 .card-list li {
    padding-right:24px;
    padding-left:24px;
    background-position: calc(100% - 24px) center;
  }
}
@media screen and (max-height: 667.98px) {
  .section.section-top .cont-txt {
    margin-top:25px;
  }
}