@charset "UTF-8";
:root {
  --vh: 1%;
}

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;
  height: 100%;
  /* height: calc(var(--vh, 1vh) * 100); */
  height:100vh;
}
* {
  font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', system-ui, sans-serif;
  box-sizing: border-box;
}

section,
.section {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
}

body {
  background: #fff;
  position: relative;
  /* overflow: hidden; */
  height: auto !important;
  overflow-y: auto;
}

::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari, Opera*/
  scrollbar-width: none;
  /* Firefox */
  scroll-behavior: smooth;
}

body,
#main {
  /* height: calc(var(--vh, 1vh) * 100); */
  height:100vh;
  /* overflow: hidden; */
}
body.on,
.on #main {
  height: auto !important;
  overflow: visible;
}
body.hide {
  overflow: hidden;
  height: calc(var(--vh, 1vh) * 100);
}


.ico_safe {
  display: inline-block;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
  text-indent: -9999px;
  background: url(@@ico_safe.png)no-repeat 0 0/80px 70px;
  vertical-align: top
}

.ico_safe.ico_down {
  width: 34px;
  height: 13px;
  background-position: 0 0;
  animation: arrow-bounce-ani 2s infinite;
}

.link_make {
  position: fixed;
  left: 50%;
  bottom: 45px;
  z-index: -1;
  width: 206px;
  border-radius: 7px;
  font-size: 14px;
  line-height: 34px;
  font-weight: 600;
  color: #c8c8c8;
  text-align: center;
  transform: translateX(-50%);
  opacity: 0;
  transition: all .2s .2s;
}

.link_make svg {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}

.page-1 .link_make.on {
  z-index: 9;
  transition: all .2s 1.8s;
  opacity: 1;
}

.link_make .ico_safe {
  width: 13px;
  height: 8px;
  margin: 13px 0 0 4px;
  background-position: 0 -20px
}

/* 공통 */
.section_share {
  width: 100%;
  padding: 60px 0;
  text-align: center;
  box-sizing: border-box
}

.section_share .share-btn {
  display: inline-block;
  padding: 25px 40px;
  border-radius: 40px;
  font-size: 21px;
  font-weight: 700;
  color: #000;
  background: #fff;
  box-sizing: border-box;
  vertical-align: middle
}

.section_share .share-btn svg {
  margin-right: 5px;
  vertical-align: sub;
  stroke: #000
}

.theme-default #eventInfo {
  background-color: #444
}

.theme-default #eventInfo * {
  color: #fff;
} 

.theme-default #eventInfo .info-head {
  margin-bottom:40px;
}

.theme-default .accordion-block {
  border-color: #fff;
}

.theme-default .accordion-block .accordion-btn .icon-plus svg {
  stroke: #fff;
}

#eventInfo .info-list li::before {
  background-color: #fff;
}

 .serial.serial-tline {
  padding-top: 22px;
  border-top: 2px solid #fff;
  font-size: 16px;
}

.theme-default #share {
  padding-right:50px;
  padding-left:50px;
  background-color: #fff;
}
.theme-default #share .share-btn {
  max-width:266px;
  width:100%;
  color:#fff;
  background:#555555;
  padding-right:10px;
  padding-left:10px;
}
.theme-default #share .share-btn svg path {
  stroke: #fff;
}
.theme-default #share .share-btn svg circle {
  stroke: #fff;
}

/* .popups .okay-btn .btn-ok {
  background-color: #000000;
  color: #fff
} */
/* 플로팅 버튼 */
#btnApply {
  visibility: hidden;
  opacity: 0;
  z-index: -1;
  transform: translateY(100px);
  transition: all .5s;
}
#btnApply.is-active {
  opacity: 1;
  visibility: visible;
  display: block;
  transform: translateY(0);
  z-index: 9;
}
.wrap_apply .link_apply {
  display: block;
  max-width: 325px;
  width: 100%;
  height: 66px;
  margin: 0 auto;
  border-radius: 25px;
  text-decoration: none;
  font-size: 20px;
  font-weight: 700;
  line-height: 66px;
  color: #fff;
  text-align: center;
  background: #6A78FF
}
.wrap_apply .link_apply .ico_arrow {
  width: 7px;
  height: 13px;
  margin: 27px 0 0 4px;
  background-position: 0 -30px
}

/* 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 .copy {
  margin: 26px auto 20px;
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
  text-align: center
}

.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;
  margin: 20px auto 35px;
  color: #333333
}

.popup-youtube {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  box-sizing: border-box;
  padding: 20px 0;
  background: rgba(0, 0, 0, .8);
  z-index: 1;
  opacity: 0;
  visibility: hidden;
}

.popup-youtube.on {
  opacity: 1;
  transition: all .5s .8s;
  visibility: visible;
  z-index: 99;
}

.popup-youtube .modal-table {
  display: table;
  width: 100%;
  height: 100%;
  table-layout: fixed;
}

.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;} */
.popup-single .modal-content .modal-image {
  margin-bottom: 35px
}

.popup-single .modal-content .modal-image .pu-img {
  width: 80px;
  height: 80px;
}

.popup-single .modal-btn {
  display: flex;
  gap: 8px;
}

.popup-single .modal-btn .okay-btn:not([class*="--info"]) {
  flex: 0 0 108px;
}

.popup-single .modal-btn .okay-btn .btn-ok {
  padding: 18px 0;
  color: #000;
  font-weight: 800;
  background-color: #DDDDDD;
}

.popup-single .modal-btn .okay-btn .btn-ok[class*="--info"] {
  background-color: #FFD600;
}

/* .inmotion-section {
  opacity: 0;
  transform: translateY(30px);
  transition: all .3s;
} */
.inmotion-section.play {
  transform: translateY(0);
  opacity: 1;
  transition: all .3s;
}
.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; 
}

/* contents */
.section .title-item {
  margin-bottom:37px;
  text-align: center;
}
.section .title-item h2 {
  font-size: 29px;
  font-weight: 800;
  line-height: 43px;
}
.section .title-item .h2-desc {
  display:inline-block;
  margin-top:10px;
  color:#666666;
  font-size: 16px;
  font-weight: 800;
  line-height: 36px;
}
.section h3 {
  font-size: 27px;
  font-weight: 700;
  line-height: 37px;
letter-spacing: -0.005em;

}
.section h3 span {
  color:#666662;
}
/* 하단으로 이동 */
.scroll-down {
  position: absolute;
  left: 50%;
  bottom: 34px;
  bottom: 4.6%;
  bottom: 4.8vh;
  width: 18px;
  height: 9px;
  -webkit-animation: mouseloop 0.8s infinite alternate;
  animation: mouseloop 0.8s infinite alternate;
  z-index: 10;
}
@keyframes mouseloop {
  0% {
    transform: translateY(0) translateX(-50%);
    opacity: 0.85;
  }
  to {
    transform: translateY(-12px) translateX(-50%);
    opacity: 1;
  }
}
@-webkit-keyframes mouseloop {
  0% {
    -webkit-transform: translateY(0) translateX(-50%);
    opacity: 0.85;
  }
  to {
    -webkit-transform: translateY(-12px) translateX(-50%);
    opacity: 1;
  }
}
/* section_common */
.section-wrapper .section {
  position: relative;
  width: 100%;
  /* height: calc(var(--vh, 1vh) * 100);
  height:100vh; */
  text-align: center;
}
.section > .inner {
  position: relative;
  height: 100%;
  /* padding: 80px 35px; */
  overflow: visible;
}
.main {
  overflow: hidden;
  width: 100%;
}
#section2 .box-wrap  {
  /* position: absolute;                                    
  top: 50%;
  transform: translateY(-50%); */
  width: 100%;  
  padding:100px 0; 
}

/* 상단영역 */
.section-wrapper #section1 {
  /* height: calc(var(--vh, 1vh) * 100); */
  height:100vh;
}
.intro {
  position: relative;
  /* height: calc(var(--vh, 1vh) * 100); */
  height:100vh;
}
.intro .inner {
  position:relative;
}
.intro .top-title {
  position: absolute;
  bottom:92px;
  bottom: 12.7vh;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  text-align: center;
  box-sizing: border-box;
  z-index: 1;
}
.intro .top-title h1 {
  margin-bottom:17px;
  color:#000;
  font-size: 30px;
  font-weight: 800;
  line-height: 36px;
}
.intro .top-title strong {
  color:#666;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}
.intro .vod-wrap {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 50vw;
  /* height: 100vh; */
  /* height: calc(var(--vh, 1vh) * 100 - 12.7vh - 113px); */
  height: calc(100vh - 12.7vh - 113px);
  overflow: hidden;
}
.intro #compareVod {
  position: relative;
  position:absolute;
  top:0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  /* height: calc(var(--vh, 1vh) * 100 - 12.7vh - 113px); */
  height: calc(100vh - 12.7vh - 113px);
}

/* Scroll-section */
#section2 h2 {
  font-size: 30px;
  font-weight: 800;
  line-height: 42px;
}
#section2 .section [class*="item-"] {
  position: absolute;
  display: inline-block;
  opacity: 0;
  background-repeat:no-repeat;
  background-position:0;
  background-size:100%;
  z-index: 1;
} 
.scroll-section > .inner {
  /* height: calc(var(--vh, 1vh) * 100); */
  height:100vh;
  background: #fff;
}
.scroll-section .section2,
.scroll-section .section3,
.scroll-section .section4 {
  background: #fff;
}
.inner-con {
  position:relative;
  /* height: calc(var(--vh, 1vh) * 100);
  height:100vh; */
  width: 100%;
  text-align: center;
}

/* 모임에게 드리는 어마어마한 혜택 */
.inner-con.sec2_tit1 {
  opacity: 1;
  transform: translateY(0);
  -webkit-transform: translateY(0);
}
  #section2 .section2 .badge {
    position:absolute;
    display: inline-block;
    padding:6px 38px 6px 19px;
    color:#666;
    font-size: 17px;
    font-weight: 500;
    line-height: 32.49px;
    border-radius: 27px;
    background:#F1F1F1 url(https://og.kakaobank.io/view/692fb5e4-4842-4613-855e-045e95afd640) no-repeat calc(100% - 14px) center / 23px;
    opacity: 0;
    transform:translate(-50%, -1vh); 
    box-sizing: border-box;
  }
  #section2 .section2.inmotion.play .badge {
    opacity: 1;
    transform:translate(-50%, 4vh); 
    transition:transform 0.3s 0.3s, opacity 0.3s 0.3s; 
  } 
  #section2 .section2 .box-wrap {
    padding-top:150px;
  }
  #section2 .section2 h2 {
    width: 100%;
    margin-top: 46px;
    color:#000;
    opacity: 0;
  }
  #section2 .section.inmotion.play h2 {
    opacity: 1;
    transition:transform 0.6s 1.2s, opacity 0.6s 1.2s; 
  }
  #section2 .section2 .benefit-box {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    max-width:375px;
    width:100%;    
    height:223px;
  }
  #section2 .section2.inmotion.play .benefit-box span.item-num1  {
    bottom:8px;
    left:-5px;
    width: 76px;
    height: 110.5px;
    background-image: url(https://og.kakaobank.io/view/9ea014d0-cf8b-4b0f-97a3-40c132b4f582);
    animation:benefit-1_fly_high 0.8s ease-in-out forwards 0.6s, benefit-1 4.5s ease-in-out infinite 1.4s;
  }
  @keyframes benefit-1_fly_high {
    0% {opacity: 0;transform:translateY(70px) rotate(4deg);}
    40% {opacity: 1;}
    100% {opacity: 1;transform:translateY(0px) rotate(-2deg);}
  }
  @keyframes benefit-1 {
    0% { transform:translate(0px, 0px)  rotate(-2deg); }
    25%{ transform:translate(4px, -2px) rotate(0deg); }
    50%{ transform:translate(6px, 2px) rotate(1deg); }
    75%{ transform:translate(4px, -2px) rotate(0deg); }
    100%{ transform:translate(0px, 0px) rotate(-2deg); }
  }
  #section2 .section2.inmotion.play .benefit-box span.item-num3 {
    bottom: 24px;
    left: 55px;
    width: 95px;
    height: 108.5px;
    background-image: url(https://og.kakaobank.io/view/ce7ca454-8357-44b3-bc52-aa5d7fd0392c);
    animation:benefit-3_fly_high 0.8s ease-in-out forwards 0.7s, benefit-3 4.5s ease-in-out infinite 1.5s;
  }
  @keyframes benefit-3_fly_high {
    0% {opacity: 0; transform:translateY(90px) rotate(-4deg); }
    60% {opacity: 1;}
    100% { opacity: 1;transform:translateY(0px) rotate(4deg);}
  }
  @keyframes benefit-3 {    
    0% { transform:translate(0px, 0px)  rotate(4deg); }
    25%{ transform:translate(0px, -2px) rotate(0deg); }
    50%{ transform:translate(-1px, 3px) rotate(-4deg); }
    75%{ transform:translate(0px, -2px) rotate(0deg); }
    100%{ transform:translate(0px, 0px) rotate(4deg); }
  }
  #section2 .section2.inmotion.play .benefit-box span.item-comma {
    bottom: 5px;
    left: 139px;
    width: 24.5px;
    height: 46.5px;
    background-image: url(https://og.kakaobank.io/view/2a76369f-5c0a-42e4-ad5b-906a31f79f9f);
    z-index: 4;
    animation:benefit-comma_fly_high 0.8s ease-in-out forwards 0.7s, benefit-comma 4.5s ease-in-out infinite 1.5s;
  }
  @keyframes benefit-comma_fly_high {
    0% {opacity: 0;transform:translateY(50px) rotate(-4deg);}
    40% {opacity: 1;}
    100% {opacity: 1;transform:translateY(0px) rotate(4deg);}
  }
  @keyframes benefit-comma {
    0%,100%{ transform:translateY(0) rotate(4deg); }
    50%{ transform:translateY(-2px) rotate(-4deg); }
  }
  #section2 .section2.inmotion.play .benefit-box span.item-numg0 {
    bottom: 14px;
    left: 152px;
    width: 95.5px;
    height: 109px;
    background-image: url(https://og.kakaobank.io/view/628e638c-abec-4698-81f3-2bee4634674e);
    z-index: 3;
    animation:benefit-g0_fly_high 0.8s ease-in-out forwards 0.6s, benefit-g0 4.5s ease-in-out infinite 1.4s;
  }
  @keyframes benefit-g0_fly_high {
    0% {opacity: 0;transform:translateY(70px) rotate(4deg);}
    40% {opacity: 1;}
    100% {opacity: 1;transform:translateY(0px) rotate(-4deg);}
  }
  @keyframes benefit-g0 {
    0% { transform:translate(0px, 0px) rotate(-4deg); }
    25%{ transform:translate(0px, -2px) rotate(8deg);}
    50%{ transform:translate(-2px, 2px) rotate(-2deg); }
    75%{ transform:translate(0px, -2px) rotate(-8deg); }
    100%{ transform:translate(0px, 0px) rotate(-4deg); }
  }
  #section2 .section2.inmotion.play .benefit-box span.item-numo0 {
    bottom: 38px;
    left: 228px;
    width: 95px;
    height: 108.5px;
    background-image: url(https://og.kakaobank.io/view/9fe50395-fb25-427b-a1a5-34f9145f03c2);
    z-index: 2;
    animation:benefit-o0_fly_high 0.8s ease-in-out forwards 0.6s, benefit-o0 4.5s ease-in-out infinite 1.4s;
  }
  @keyframes benefit-o0_fly_high {
    0% {opacity: 0; transform:translateY(80px) rotate(-4deg); }
    50% {opacity: 1;}
    100% { opacity: 1;transform:translateY(0px) rotate(4deg);}
  }
  @keyframes benefit-o0 {
    0% { transform:translate(0px, 0px) rotate(4deg); }
    25%{ transform:translate(0px, -2px) rotate(-3deg);}
    50%{ transform:translate(2px, 2px) rotate(4deg); }
    75%{ transform:translate(0px, -2px) rotate(-3deg); }
    100%{ transform:translate(0px, 0px) rotate(4deg); }
  }
  #section2 .section2.inmotion.play .benefit-box span.item-numy0 {
    bottom: 0;
    left: 278px;
    width: 97px;
    height: 109px;
    background-image: url(https://og.kakaobank.io/view/76fdd3d4-7ace-4fa6-a5e5-f0a8ab14d8bc);
    animation:benefit-y0_fly_high 0.8s ease-in-out forwards 0.6s, benefit-y0 4.5s ease-in-out infinite 1.4s;
  }
  @keyframes benefit-y0_fly_high {
    0% {opacity: 0;transform:translateY(70px) rotate(4deg);}
    40% {opacity: 1;}
    100% {opacity: 1;transform:translateY(0px) rotate(-2deg);}
  }
  @keyframes benefit-y0 {
    0% { transform:translate(0px, 0px) rotate(-2deg); }
    25%{ transform:translate(-2px, -2px) rotate(4deg);}
    50%{ transform:translate(2px, 3px) rotate(-2deg); }
    75%{ transform:translate(0px, -2px) rotate(3deg); }
    100%{ transform:translate(0px, 0px) rotate(-2deg); }
  }
  #section2 .section2.inmotion.play .benefit-box span.item-square {
    top: 48px;
    left: 22px;
    width: 8px;
    height: 15px;
    background: #FF840A;
    -webkit-animation: benefit-square 2s infinite cubic-bezier(0.25, 0.0, 0.58, 1.0) 1s;
    animation: benefit-square 2s infinite cubic-bezier(0.25, 0.0, 0.58, 1.0) 1s;
  }
  @-webkit-keyframes benefit-square {
    0%, 30% {opacity: 1; -webkit-transform: translateX(134px) translateY(68px) scale(0) rotateZ(10deg);}
    50%, 50% {opacity: 1;-webkit-transform: translateX(0) translateY(0) scale(1) rotateZ(120deg);}
    100% {opacity: 0;-webkit-transform: translateX(0) translateY(40px) scale(1) rotateZ(0deg);}
  }
  @keyframes benefit-square {
    0%, 30% {opacity: 1; transform: translateX(134px) translateY(68px) scale(0) rotateZ(10deg);}
    50%, 50% {opacity: 1;transform: translateX(0) translateY(0) scale(1) rotateZ(120deg);}
    100% {opacity: 0;transform: translateX(0) translateY(40px) scale(1) rotateZ(0deg);}
  }
  #section2 .section2.inmotion.play .benefit-box span.item-square1 {
    top:0px;
    left:63px;
    width: 8px;
    height: 21px;
    background: #27B1FF;
    -webkit-animation: benefit-square1 2s infinite cubic-bezier(0.42, 0.0, 0.58, 1.0) 0.8s;
    animation: benefit-square1 2s infinite cubic-bezier(0.42, 0.0, 0.58, 1.0) 0.8s;
  }
  @-webkit-keyframes benefit-square1 {
    0%, 30% {opacity: 0;-webkit-transform: translateX(134px) translateY(68px) scale(0) rotateZ(10deg);}
    50%, 50% {opacity: 1; -webkit-transform: translateX(20px) translateY(0) scale(1) rotateZ(120deg);}
    100% {opacity: 0;-webkit-transform: translateX(0) translateY(40px) scale(1) rotateZ(0deg);}
  }
  @keyframes benefit-square1 {
    0%, 30% {opacity: 0;transform: translateX(134px) translateY(68px) scale(0) rotateZ(10deg);}
    50%, 50% {opacity: 1; transform: translateX(20px) translateY(0) scale(1) rotateZ(120deg);}
    100% {opacity: 0;transform: translateX(0) translateY(40px) scale(1) rotateZ(0deg);}
  }
  #section2 .section2.inmotion.play .benefit-box span.item-square2 {
    top:16px;
    left:140px;
    width: 7px;
    height: 14px;
    background: #4AC864;
    -webkit-animation: benefit-square2 2s infinite cubic-bezier(0.42, 0.0, 0.58, 1.0) 1s;
    animation: benefit-square2 2s infinite cubic-bezier(0.42, 0.0, 0.58, 1.0) 1s;
  }
  @-webkit-keyframes benefit-square2 {
    0%, 30% {opacity: 1; -webkit-transform: translateX(34px) translateY(68px) scale(0) rotateZ(10deg);}
    50%, 50% {opacity: 1;-webkit-transform: translateX(0) translateY(0) scale(1) rotateZ(120deg);}
    100% {opacity: 0;-webkit-transform: translateX(-20px) translateY(40px) scale(1) rotateZ(0deg);}
  }
  @keyframes benefit-square2 {
    0%, 30% {opacity: 1; transform: translateX(34px) translateY(68px) scale(0) rotateZ(10deg);}
    50%, 50% {opacity: 1;transform: translateX(0) translateY(0) scale(1) rotateZ(120deg);}
    100% {opacity: 0;transform: translateX(-20px) translateY(40px) scale(1) rotateZ(0deg);}
  }

  #section2 .section2.inmotion.play .benefit-box span.item-square3 {
    top:32px;
    left:238px;
    width: 9px;
    height: 14px;
    background: #FFCD00;
    -webkit-animation: benefit-square3 2s infinite cubic-bezier(0.42, 0.0, 0.58, 1.0) 0.9s;
    animation: benefit-square3 2s infinite cubic-bezier(0.42, 0.0, 0.58, 1.0) 0.9s;
  }
  @-webkit-keyframes benefit-square3 {
    0%, 30% {opacity: 1; -webkit-transform: translateX(-34px) translateY(68px) scale(0) rotateZ(20deg);}
    50%, 50% {opacity: 1;-webkit-transform: translateX(0) translateY(0) scale(1) rotateZ(61.07deg);}
    100% {opacity: 0;-webkit-transform: translateX(20px) translateY(40px) scale(1) rotateZ(70deg);}
  }
  @keyframes benefit-square3 {
    0%, 30% {opacity: 1; transform: translateX(-34px) translateY(68px) scale(0) rotateZ(20deg);}
    50%, 50% {opacity: 1;transform: translateX(0) translateY(0) scale(1) rotateZ(61.07deg);}
    100% {opacity: 0;transform: translateX(20px) translateY(40px) scale(1) rotateZ(70deg);}
  }
  #section2 .section2.inmotion.play .benefit-box span.item-square4 {
    top:10px;
    left:284px;
    width: 8px;
    height: 18px;
    background: #FF7E2B;
    -webkit-animation: benefit-square4 2s infinite cubic-bezier(0.42, 0.0, 0.58, 1.0) 1s;
    animation: benefit-square4 2s infinite cubic-bezier(0.42, 0.0, 0.58, 1.0) 1s;
  }
  @-webkit-keyframes benefit-square4 {
    0%, 30% {opacity: 0;-webkit-transform: translateX(-60px) translateY(50px) scale(0) rotateZ(10deg);}
    50%, 50% {opacity: 1;-webkit-transform: translateX(0) translateY(0) scale(1) rotateZ(38.85deg);}
    100% {opacity: 0;-webkit-transform: translateX(25px) translateY(40px) scale(1) rotateZ(-50deg);}
  }
  @keyframes benefit-square4 {
    0%, 30% {opacity: 0;transform: translateX(-60px) translateY(50px) scale(0) rotateZ(10deg);}
    50%, 50% {opacity: 1;transform: translateX(0) translateY(0) scale(1) rotateZ(38.85deg);}
    100% {opacity: 0;transform: translateX(25px) translateY(40px) scale(1) rotateZ(-50deg);}
  }
  #section2 .section2.inmotion.play .benefit-box span.item-square5 {
    top:64px;
    left:333px;
    width: 10px;
    height: 18px;
    background: #27B1FF;
    -webkit-animation: benefit-square5 2s infinite cubic-bezier(0.42, 0.0, 0.58, 1.0) 0.9s;
    animation: benefit-square5 2s infinite cubic-bezier(0.42, 0.0, 0.58, 1.0) 0.9s;
  }
  @-webkit-keyframes benefit-square5 {
    0%, 30% {opacity: 1;-webkit-transform: translateX(-34px) translateY(30px) scale(0) rotateZ(10deg);}
    50%, 50% {opacity: 1;-webkit-transform: translateX(0) translateY(0) scale(1) rotateZ(120deg);}
    100% {opacity: 0;-webkit-transform: translateX(12px) translateY(20px) scale(1) rotateZ(250deg);}
  }
  @keyframes benefit-square5 {
    0%, 30% {opacity: 1;transform: translateX(-34px) translateY(30px) scale(0) rotateZ(10deg);}
    50%, 50% {opacity: 1;transform: translateX(0) translateY(0) scale(1) rotateZ(120deg);}
    100% {opacity: 0;transform: translateX(12px) translateY(20px) scale(1) rotateZ(250deg);}
  }
  #section2 .section2.inmotion.play .benefit-box span.item-square6 {
    top:0px;
    left:200px;
    /* transform:rotateZ(30deg); */
    width: 8px;
    height: 17px;
    background: #B17EE4;
    -webkit-animation: benefit-square6 2s infinite cubic-bezier(0.42, 0.0, 0.58, 1.0) 0.9s;
    animation: benefit-square6 2s infinite cubic-bezier(0.42, 0.0, 0.58, 1.0) 0.9s;
  }
  @-webkit-keyframes benefit-square6 {
    0%, 30% {opacity: 1;-webkit-transform: translateX(-34px) translateY(75px) scale(0) rotateZ(10deg);}
    50%, 50% {opacity: 1;-webkit-transform: translateX(0) translateY(0) scale(1) rotateZ(30deg);}
    100% {opacity: 0;-webkit-transform: translateX(12px) translateY(40px) scale(1) rotateZ(-50deg);}
  }
  @keyframes benefit-square6 {
    0%, 30% {opacity: 1;transform: translateX(-34px) translateY(75px) scale(0) rotateZ(10deg);}
    50%, 50% {opacity: 1;transform: translateX(0) translateY(0) scale(1) rotateZ(30deg);}
    100% {opacity: 0;transform: translateX(12px) translateY(40px) scale(1) rotateZ(-50deg);}
  }

/* 이제 1개의 모임통장으로 */
  #section2 .section3 h2 {
    opacity: 0;
    transform:translate(0, 1.5vh); 
  }
  #section2 .section3.inmotion.play h2 {
    opacity: 1;
    transform:translate(0, 0); 
    transition:transform 0.5s 0.4s, opacity 0.5s 0.4s; 
  }
  #section2 .section3 h2 span {
    color:#7683FF;
  }
  #section2 .section3 .moim-box {
    position: relative;
    margin:72px auto 0;
    margin: 10vh auto 0;
    width:288px;
    height:242px;
  }
  #section2 .section3.inmotion.play .moim-box span.item-ball {
    bottom:0;
    left:0;
    width: 95.5px;
    height: 95.5px;
    background-image: url(https://og.kakaobank.io/view/dcb69fcd-cef1-44c5-834f-04cc8ff4b530);
    animation:benefit2-ball_fly_high 0.6s ease-in-out forwards 0.6s, benefit2-ball 1.6s ease-in-out infinite 1.2s;
    z-index: 3;
  }
  @keyframes benefit2-ball_fly_high {
    0% { opacity: 0; transform:translateY(40px) rotate(6deg); }
    100% { opacity: 1; transform:translateY(-4px) rotate(-2deg); }
  }
  @keyframes benefit2-ball {
    0%,100%{ transform:translateY(-4px) rotate(-2deg);}
    50%{ transform:translateY(0) rotate(0deg); }
  }
  #section2 .section3.inmotion.play .moim-box span.item-bankbook {
    top:44px;
    left:42px;
    width: 304.5px;
    height: 303px;
    width: 197px;
    height: 152px;
    background-image: url(https://og.kakaobank.io/view/817f72d2-68e0-4053-b0dc-8cd6e516ea4d);
    animation:benefit2-bankbook_fly_high 0.6s ease-in-out forwards 0.6s, benefit2-bankbook 1.6s ease-in-out infinite 1.2s;
    z-index: 2;
  }
  @keyframes benefit2-bankbook_fly_high {
    0% { opacity: 0; transform:translateY(50px) rotate(4deg); }
    100% { opacity: 1; transform:translateY(-4px) rotate(0); }
  }
  @keyframes benefit2-bankbook {
    0%,100%{ transform:translateY(-4px) rotate(0);}
    50%{ transform:translateY(0px) rotate(1deg); }
  }
  #section2 .section3.inmotion.play .moim-box span.item-party {
    top:5px;
    left:205px;
    width: 71.5px;
    height: 70.5px;
    background-image: url(https://og.kakaobank.io/view/146c1d2c-73c7-4ef2-acbd-d326e0e0c48c);
    animation:benefit2-party_fly_high 0.6s ease-in-out forwards 1s, benefit2-party 1.6s ease-in-out infinite 1.6s;
  }
  @keyframes benefit2-party_fly_high {
    0% { opacity: 0; transform:translateY(40px) rotate(4deg); }
    100% { opacity: 1; transform:translateY(-3deg) rotate(0); }
  }
  @keyframes benefit2-party {
    0%,100%{ transform:translateY(-3deg) rotate(0);}
    50%{ transform:translateY(0px) rotate(2deg); }
  }
  #section2 .section3.inmotion.play .moim-box span.item-keyhole {
    top:0;
    left:7px;
    width: 55.5px;
    height: 55px;
    background-image: url(https://og.kakaobank.io/view/69115400-215f-435a-b23d-3c5ab46f6e32);
    animation:benefit2-keyhole_fly_high 0.6s ease-in-out forwards 1.2s, benefit2-keyhole 1.6s ease-in-out infinite 1.8s;
  }
  @keyframes benefit2-keyhole_fly_high {
    0% { opacity: 0; transform:translateY(20px) rotate(4deg); }
    100% { opacity: 1; transform:translateY(-3px) rotate(0); }
  }
  @keyframes benefit2-keyhole {
    0%,100%{ transform:translateY(-3px) rotate(0);}
    50%{ transform:translateY(0) rotate(2deg); }
  }
  #section2 .section3.inmotion.play .moim-box span.item-team {
    top:143px;
    left:210px;
    width: 77px;
    height: 76.5px;
    background-image: url(https://og.kakaobank.io/view/06c664af-7342-4cbb-8ecb-547945876c51);
    animation:benefit2-team_fly_high 0.6s ease-in-out forwards 1.2s, benefit2-team 1.6s ease-in-out infinite 1.8s;
  }
  @keyframes benefit2-team_fly_high {
    0% { opacity: 0; transform:translateY(20px) rotate(2deg); }
    100% { opacity: 1; transform:translateY(-3px) rotate(0deg); }
  }
  @keyframes benefit2-team {
    0%,100%{ transform:translateY(-3px) rotate(0deg);}
    50%{ transform:translateY(1px) rotate(2deg); }
  }
  /* 2개의 체크카드를 쓸 수 있어요 */
  #section2 .section4 h2 {
     opacity: 0;
     transform:translate(0, 1.5vh); 
   }
  #section2 .section4.inmotion.play h2 {
     opacity: 1;
     transform:translate(0, 0); 
     transition:transform 0.6s 0.4s, opacity 0.6s 0.4s; 
   }
  #section2 .section4 h2 span {
    color:#FF840A;
   }
  #section2 .section4 .desc {
    margin-top:20px;
    margin-top: 2.7vh;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    opacity: 0;
    transform:translate(0, 1.5vh); 
  }
  #section2 .section4.inmotion.play .desc {
    opacity: 1;
    transform:translate(0, 0); 
    transition:transform 0.6s 0.6s, opacity 0.6s 0.6s; 
    transition:transform 0.4s 0.6s, opacity 0.4s 0.6s; 
  }
  #section2 .section4 .desc strong {
    position:relative;
    display: inline-flex;
    color:#FF840A;
    font-size: 16px;
    font-weight: 900;
    line-height: 24px;
  }
  #section2 .section4.inmotion.play .desc strong .ico-new {
    position:absolute;
    top:calc(100% + 4px);
    left:50%;
    transform: translateX(-50%);
    display: inline-block;
    width:52px;
    height:30.5px;
    color:#FF840A;
    font-size: 16px;
    font-weight: 900;
    line-height: 24px;
    background:url(https://og.kakaobank.io/view/42b769e7-f7cc-47ba-a02e-b70f7226c7a9) no-repeat center / 100%;
    opacity: 0;
    animation:benefit3-new_fly_high 1.3s ease-in-out forwards 2.3s;
    animation:benefit3-new_fly_high 0.8s ease-in-out forwards 1.5s;
  }
  @keyframes benefit3-new_fly_high {
    0% { opacity: 0;transform:translate(-50%, 10px);}
    60% { opacity: 1;transform:translate(-50%, -1px);}
    100% { opacity: 1;transform:translate(-50%, 0px);}
  }
  #section2 .section4 .checkcard-box {
    position: relative;
    margin:68px auto 0;
    margin: 9.9vh auto 0;
    width:296px;
    height:250px;
  }
  #section2 .section4.inmotion.play .checkcard-box span.item-gcard {
    top:62px;
    left:0px;
    width: 153.5px;
    height: 186.5px;
    background-image: url(https://og.kakaobank.io/view/27149e3f-f342-4533-a18b-e19835f53bb7);
    animation:benefit3-gcard_fly_high 0.6s ease-in-out forwards 0.6s, benefit3-gcard 2.1s ease-in-out infinite 1.2s;
  }
  @keyframes benefit3-gcard_fly_high {
   0% {opacity: 0;transform:translate(52px, 90px) rotate(15deg);}
   100% {opacity: 1;transform:translateY(-3px) rotate(-2deg);}
  }
  @keyframes benefit3-gcard {
    0%,100%{ transform:translateY(-3px) rotate(-2deg);}
    50%{ transform:translateY(0px) rotate(0deg); }
  }
  #section2 .section4.inmotion.play .checkcard-box span.item-ycard {
    top:2px;
    left:114px;
    width: 142px;
    height: 180px;
    background-image: url(https://og.kakaobank.io/view/db0b6d8f-dd2f-4071-987a-9419915d65fb);
    animation:benefit3-ycard_fly_high 0.6s ease-in-out forwards 0.8s, benefit3-ycard 2.1s ease-in-out infinite 1.4s;
  }
  @keyframes benefit3-ycard_fly_high {
   0% {opacity: 0;transform:translate(-52px, 153px) rotate(-10deg);}
   100% {opacity: 1;transform:translateY(-3px) rotate(2deg);}
  }
  @keyframes benefit3-ycard {
    0%,100%{ transform:translateY(-3px) rotate(2eg);}
    50%{ transform:translateY(0px) rotate(0deg); }
  }
  #section2 .section4.inmotion.play .checkcard-box span.item-ball {
    top:146px;
    left:176px;
    width: 83px;
    height: 83px;
    background-image: url(https://og.kakaobank.io/view/cdd3f80a-e756-4180-a50e-104ef3e47712);
    animation:benefit3-ball_fly_high 0.6s ease-in-out forwards 1s, benefit3-ball 1.8s ease-in-out infinite 1.6s;
  }
  @keyframes benefit3-ball_fly_high {
    0% { opacity: 0;transform:translateY(30px) rotate(4deg);}
    100% { opacity: 1;transform:translateY(0px) rotate(-3deg);}
   }
   @keyframes benefit3-ball {
     0%,100%{ transform:translateY(0px) rotate(-3deg);}
     50%{ transform:translateY(2px) rotate(0deg); }
   }
   #section2 .section4.inmotion.play .checkcard-box span.item-butterfly {
    top:0px;
    left:44px;
    width: 48.5px;
    height: 48px;
    background-image: url(https://og.kakaobank.io/view/4241e9f0-3f4c-4508-8e59-514a65bcbb85);
    animation:benefit3-butterfly_fly_high 0.6s ease-in-out forwards 1.2s, benefit3-butterfly 1.8s ease-in-out infinite 1.8s;
  }
  @keyframes benefit3-butterfly_fly_high {
    0% { opacity: 0;transform:translateY(30px) rotate(4deg);}
    100% { opacity: 1;transform:translateY(-3px) rotate(-2deg);}
   }
   @keyframes benefit3-butterfly {
     0%,100%{ transform:translateY(-3px) rotate(-2deg);}
     50%{ transform:translateY(0) rotate(0deg); }
   }
  #section2 .section4.inmotion.play .checkcard-box span.item-keyhole {
    top:80px;
    left:248px;
    width: 47.5px;
    height: 51px;
    background-image: url(https://og.kakaobank.io/view/7acf747f-79b5-481a-8074-5ca400916be3);
    animation:benefit3-butterfly_fly_high 0.6s ease-in-out forwards 1.4s, benefit3-butterfly 1.8s ease-in-out infinite 2s;
  }
  @keyframes benefit3-keyhole_fly_high {
    0% { opacity: 0;transform:translateY(30px) rotate(4deg);}
    100% { opacity: 1;transform:translateY(0px) rotate(0);}
   }
   @keyframes benefit3-keyhole {
     0%,100%{ transform:translateY(0px) rotate(0);}
     50%{ transform:translateY(-2px) rotate(2deg); }
   }


/* 스크롤영역 */
.scroll-wrapper {
  transition: all 1s;
  width: 100%;
  height: auto;
  left: 0;
  z-index: 10;
}
/* 모임 체크카드 신청하면 드려요 영역 */
.section-apply .inner {
  padding: 70px 28px 0;
}
.section-apply .apply-list .list-item {
  padding-bottom:37px;
}
.section-apply .apply-list .list-item:last-child {
  border-bottom:1px solid #ECECEC;
}
.section-apply .apply-list .list-item > div {
  position:relative;
  height:345px;
  padding:40px 35px;
  border-radius:20px;
  background-color:var(--item-bg);
  box-sizing: border-box;
}
.section-apply .apply-list .list-item > div h3 span {
  position:relative;
  color:var(--item-color);
}
.section-apply .apply-list .list-item > div h3 span::after {
  content:"";
  position:absolute;
  bottom: 2px;
  left: 0;
  display: inline-block;
  width:100%;
  height:9px;
  opacity: 0.15;
  background-color:var(--item-color);
}
.section-apply .apply-list .list-item > div .desc {
  display:inline-block;
  margin-top:12px;
  color:var(--item-desccolor);
  font-size: 14px;
  font-weight: 600;
  line-height: 24px;
  opacity: 0.6;
}
.section-apply .apply-list .list-item > div .item-img {
  position:absolute;
  right:var(--item-right);
  bottom:var(--item-bottom);
  width:var(--item-width);
}
@media screen and (max-width: 767.98px) {
  .intro .vod-wrap {
    width: 100vw;
  }
  .intro #compareVod {
    object-fit: cover;
  }
}
@media screen and (max-width: 368.98px) {
  .section .title-item {
    margin-right: -15px;
    margin-left: -15px;
  }
  .section-apply .inner,
  .theme-default #share {
    padding-right:15px;
    padding-left:15px;
  }
  .wrap_apply .link_apply {
    max-width: calc(100% - 50px);
  }
  #section2 .section2 .benefit-box {
    /* transform: scale(0.9) translateX(-2vw); */
    transform:scale(0.9) translateX(calc(-50% - 6%));
  }
}
@media screen and (max-width: 350.98px) and (min-width: 341px) {
  #section2 .section2 .benefit-box {
    transform:scale(0.9) translateX(calc(-50% - 9%));
  }
}
@media screen and (max-width: 340.98px) and (min-width: 321px) {
  #section2 .section2 .benefit-box {
    transform:scale(0.9) translateX(calc(-50% - 10%));
  }
}
@media screen and (max-width: 320.98px) {
  #section2 .section2 .benefit-box {
    transform:scale(0.85) translateX(calc(-50% - 18vw));
  }
}