@charset "UTF-8"; 
* { font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', system-ui, sans-serif; }
section, .section { position: relative; z-index: 2; background: #fff; box-sizing: border-box; }
body { overflow: hidden; height: 100%; }
body.on { overflow: visible; }
::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera*/ scrollbar-width: none; /* Firefox */
 scroll-behavior: smooth; }
body { position: relative; overflow: hidden; }
body .main { overflow: hidden; height: inherit }
body.inapp .main{ height:auto; }
body.pc, body.on { height: auto !important; overflow-y: auto; }
body.on.no-scroll { height: inherit !important;  overflow-y: hidden; }
body.pc .main, body.on .main { overflow: auto; height: inherit }
/* common */
 .pos-bottom { position: absolute; left: 0; bottom: 114px; width: 100%; text-align: center; }
section .inner { text-align: center; }
.inmotion-section { transform: translate(0, 50px); opacity: 0; }
.inmotion-section.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; }
section h3 { margin-bottom: 40px; font-size: 26px; font-weight: 800; line-height: 35px; color: #122D50; }
section h3 .empasis { color: #ff57b2 }
/* 1 top-section */
 .main-visual { width: 100%; background: #FAE4FB; height: 100vh; padding: 0; }
.main-visual .bedge { width: 114px; height: 27px; text-indent: -999em; overflow: hidden; display: block; background: url(https://og.kakaobank.io/view/c500c1c1-f9b9-4973-83db-605c6034628d) no-repeat; background-size: contain; position: absolute; right: 20px; top: 20px; z-index: 999; }
.main-visual .video-a, .main-visual .video-b { position: absolute; width: 100%; height: 100%; }
#videoCover { object-fit: cover; }
.main-visual video { width: 100%; height: 100vh; }
.main-visual .inner { position: relative; display: flex; height: 100vh; flex-direction: column; justify-content: pace-between; justify-content: flex-end; align-items: center; }
.main-visual .inner { padding-bottom: 40px; }
.moweb .main-visual .inner { padding-bottom: 120px; }
.moweb .main-visual .icon-arrow { margin-bottom: 80px; }
.moweb .main-visual .title1 .tit-sub { margin-bottom: 54px; }
 .main-visual .wrap-title { position: relative; opacity: 0; }
.main-visual .title1 { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; }
.main-visual .title1 .title { font-size: 20px; line-height: 24px; color: #092A53; font-weight: 700; }
.main-visual .title1 .tit-sub { margin: 22px auto 104px; font-size: 40px; font-weight: 900; color: #092A53; line-height: 48px; }
.main-visual .title1 .icon-chk { display: inline-block; width: 18px; height: 18px; background: url(https://og.kakaobank.io/view/170261bf-4c18-4eb4-ac44-fa3a46bbc411)no-repeat center / 18px 18px; vertical-align: super; }
.main-visual .title2 .rolling-title { position: relative; height: 25px; }
.main-visual .title2 .rolling-title span { opacity: 0; transform: translateY(-30px); transition: all 0.4s cubic-bezier(0.63, 0.06, 0.26, 1.18); position: absolute; top: 0; left: 0; width: 100%; text-align: center; color: #4E9DFF; font-size: 21px; line-height: 25px; font-weight: 800; }
.main-visual .title2 .rolling-title span.on { opacity: 1; transform: translateY(0px); }
.main-visual .title2 .rolling-title span.ed { opacity: 0; transform: translateY(30px); }
.main-visual .title2 .rolling-border { margin: 9px auto 0; width: 123px; height: 3px; background: #4E9DFF; border-radius: 6px; }
.main-visual .title2 .tit-sub { margin: 24px auto 38px; font-size: 25px; font-weight: 800; color: #092A53; line-height: 30px; }
.main-visual .icon-arrow { margin-bottom: 40px; animation: arrow-bounce-ani 2s infinite; }
.main-visual .banner { margin-bottom: 30px; max-width: 305px; padding: 15px 30px; box-sizing: border-box; background: rgba(255, 255, 255, 0.8); border-radius: 20px; color: #1A5297; line-height: 20px; font-size: 14px; font-weight: 600; }
.main-visual .banner .cracker { display: inline-block; width: 16px; height: 17px; background: url(https://og.kakaobank.io/view/2ee7ca0c-1fe4-4368-9442-8092ed555807)no-repeat center / contain; margin: 0 7px; vertical-align: top; }
@keyframes arrow-bounce-ani { 0%, 100%, 20%, 50%, 80% { transform: translateY(0); }
  40% { transform: translateY(-10px); }
  60% { transform: translateY(-5px); }
}
/* 3 preview section */
 .preview-section { 
  background: linear-gradient(0deg, #C5DCFF, #C5DCFF), linear-gradient(180deg, #FFDEFC 0%, #FFBCE0 32.39%, #FFADD4 100%), linear-gradient(0deg, #FFDEFC, #FFDEFC), linear-gradient(180deg, #FFFFFF 0%, #FCA9E7 100%); padding: 52px 0 75px; overflow: hidden; }
.preview-section .inner { overflow: visible; max-width: 100%; }
.preview-section h2 { margin-bottom: 41.84px; }
.preview-section h2 img { width: 101px; }
.card-slider { position: relative; padding-bottom: 40px; }
.card-slider h4 { margin: 35px 0; font-size: 24px; font-weight: 800; line-height: 30px; color: #092A53 }
.card-slider .swiper-slide { background: #fff; border-radius: 4px; height: 508px; max-width: 305px; }
.card-slider .swiper-slide.role { background: #F5F6F7 }
.card-slider .card-text { position: relative; z-index: 1; display: flex; justify-content: center; align-items: center; height: 118px; width: 100%; border-radius: 0 0 4px 4px; }
.card-slider .card-text.ct1 { background: #79A7FF; }
.card-slider .card-text.ct2 { background: #FF9B85; }
.card-slider .card-text.ct3 { background: #70DD9D }
.card-slider .card-text.ct4 { background: #FE82D4 }
.card-slider .card-text.ct5 { background: #648FFF }
.card-slider .card-text .text { color: #fff; }
.card-slider .swiper-pagination { transform: translateX(-50%); left: 50% !important; width: 100% !important; display: flex; justify-content: center; align-items: center; bottom: 0; }
.card-slider .swiper-pagination-bullet { width: 10px; height: 10px; transition: all .5s;}
.card-slider .swiper-pagination-bullet-active { position: relative; width: 26px; background: linear-gradient(to right, #ff60f1, #ff7b7b); border-radius: 30px;transition: all .5s;}
/* card motion slider */
 .picture img { width: 100%; }
.picture .wrap-picture { transform: scale(0.565); -webkit-transform: scale(0.565); -moz-transform: scale(0.565); -ms-transform: scale(0.565); -o-transform: scale(0.565); margin: -132px 0 -156px -18px; width: 340px; box-shadow: 0px 20px 30px rgba(0, 0, 0, 0.06); border-top-left-radius: 41px; border-top-right-radius: 41px; overflow: hidden; }
.picture ul { width: 1360px; font-size: 0; }
.picture ul.on0 { transform: translate(0, 0); }
.picture ul.on1 { transform: translate(-340px, 0); transition: transform 0.7s; }
.picture ul.on2 { transform: translate(-680px, 0); transition: transform 0.7s; }
.picture ul.on3 { transform: translate(-1020px, 0); transition: transform 0.7s; }
.picture li { position: relative; width: 340px; display: inline-block; }
.picture .face1 { position: absolute; top: 136px; left: 74px; width: 197px; }
.picture .face2 { position: absolute; top: 130px; left: 86px; width: 167px; }
.picture .face3 { position: absolute; top: 129px; left: 98px; width: 158px; }
.picture .inter-contents { position: absolute; top: 0; left: 0; width: 340px; }
.picture .obj img { position: absolute; top: 0; left: 0; display: block; }
.picture .obj .obj1-1 { top: 83px; left: 70px; width: 48px; animation: scale-ani-1-1 0.6s steps(2) infinite; }
.picture .obj .obj1-2 { top: 290px; left: 73px; width: 18px; animation: scale-ani-1-2 0.6s steps(2) infinite; }
.picture .obj .obj1-3 { top: 267px; left: 247px; width: 31px; animation: scale-ani-1-3 0.6s steps(2) infinite; }
.picture .obj .obj2-1 { top: 159px; left: 58px; width: 27px; animation: scale-ani-2 1.2s infinite linear; }
.picture .obj .obj2-2 { top: 75px; left: 217px; width: 55px; animation: scale-ani-2 3s infinite linear; }
.picture .obj .obj2-3 { top: 294px; left: 246px; width: 16px; animation: scale-ani-2 1.5s infinite linear; }
.picture .obj .obj3-1 { top: 169px; left: 57px; width: 37px; animation: scale-ani-3-1 0.6s steps(2) infinite; }
.picture .obj .obj3-2 { top: 68px; left: 207px; width: 64px; animation: scale-ani-3-2 0.6s steps(2) infinite; }
.picture .obj .obj3-3 { top: 262px; left: 228px; width: 43px; animation: scale-ani-3-3 0.6s steps(2) infinite; }
.picture .bottom { position: relative; margin-top: -37px; }
@keyframes scale-ani-1-1 { 0% { transform: scale(0.25) }
  50% { transform: scale(1) }
  100% { transform: scale(0.25) }
}
@keyframes scale-ani-1-2 { 0% { transform: scale(0.33) }
  50% { transform: scale(1) }
  100% { transform: scale(0.33) }
}
@keyframes scale-ani-1-3 { 0% { transform: scale(0.55) }
  50% { transform: scale(1) }
  100% { transform: scale(0.55) }
}
@keyframes scale-ani-2 { 100% { transform: rotate(-360deg) }
}
@keyframes scale-ani-3-1 { 0% { transform: scale(0.5) }
  50% { transform: scale(1) }
  100% { transform: scale(0.5) }
}
@keyframes scale-ani-3-2 { 0% { transform: scale(1) }
  50% { transform: scale(0.3) }
  100% { transform: scale(1) }
}
@keyframes scale-ani-3-3 { 0% { transform: scale(1) }
  50% { transform: scale(0.3) }
  100% { transform: scale(1) }
}
 .role .wrap-role { text-align: center; transform: scale(0.52); margin: -50px 0 4px -30px; -webkit-transform: scale(0.52); -moz-transform: scale(0.52); -ms-transform: scale(0.52); -o-transform: scale(0.52); }
.role .wrap-role-inner { display: inline-block; width: 378px; text-align: left; }
.role .wrap-role ul li { text-align: left; font-size: 32px; line-height: 41px; color: #AAAAAA; font-weight: 700; margin-bottom: 16px; }
.role .wrap-role ul li.frist { font-size: 40px; line-height: 52px; width: 390px; }
.role .wrap-role ul li:last-child { margin-bottom: 0; }
.role .wrap-role ul li div { position: relative; }
.role .wrap-role ul li>div { padding: 20px 32px 20px; position: relative; display: inline-block; background-color: #FFFFFF; border-radius: 16px; }
.role .wrap-role ul li.frist>div { padding: 31px 32px 29px; }
.role .wrap-role ul .place { position: relative; top: 0; left: 0; }
.role .wrap-role ul .typing { position: absolute; top: 0; left: 0; color: #222222; }
.role .wrap-role ul .typing:after { content: ""; display: inline-block; width: 2px; height: 46px; background-color: #000000; vertical-align: top; animation: focus-ani 1s step-end infinite; }
.role .wrap-role ul .frist.on .typing { position: relative; }
@keyframes focus-ani { 50% { opacity: 0; } }
.quick .wrap-quick { height: 260px; width: 192px; margin: 0 auto; }
.quick img { width: 100%; }
.quick ul { position: relative; width: 100%; margin: 0 auto; box-shadow: 0px 20px 30px rgb(0 0 0 / 6%); overflow: hidden; }
.quick ul .bg:after { content: ""; position: absolute; top: 24%; left: 8%; width: 67%; height: 12%; border-radius: 15px; background-color: rgba(0, 0, 0, 0.2); opacity: 0; }
.quick ul .dimmed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 20px 20px 0 0; background-color: rgba(0, 0, 0, 0.6); opacity: 0; }
.quick ul .end { position: absolute; bottom: 0; left: 0; width: 100%; opacity: 0; transform: translate(0, 100%); }
.quick.swiper-slide-active .bg:after { animation: quick-bg-ani 0.3s 0.5s forwards; -webkit-animation: quick-bg-ani 0.3s 0.5s forwards; }
.quick.swiper-slide-active ul .dimmed { opacity: 1; transition: opacity 1s 1.5s; }
.quick.swiper-slide-active ul .end { opacity: 1; transform: translate(0, 0); transition: all 0.7s 2s; }
@keyframes quick-bg-ani { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }
.looptxt { background-color: #FFE300; color: #FFFFFF; white-space: nowrap; padding: 60px 0; }
.looptxt .copy-box { font-size: 48px; line-height: 62px; font-weight: 800; }
.looptxt .copy-box-top { position: relative; left: 0; margin-bottom: 21px; animation: txt-left-loop-ani 6s infinite linear; }
.looptxt .copy-box-bottom { position: relative; left: 0; animation: txt-right-loop-ani 7s infinite linear; }
.looptxt span { display: inline-block; vertical-align: top; }
.looptxt .round { padding: 8px 24px; color: #FFE300; background-color: #FFFFFF; font-size: 36px; line-height: 45px; font-weight: 800; border-radius: 100px; margin-right: 8px; }
.looptxt .emoji-lighting { width: 53px; height: 53px; margin-top: 4px; background: url(/products_static/images/new/img_05_01.png) no-repeat 0 0 / 100%; }
.looptxt .emoji-smile { width: 53px; height: 53px; margin-top: 4px; background: url(/products_static/images/new/img_05_02.png) no-repeat 0 0 / 100%; }
.looptxt .emoji-crown { width: 53px; height: 53px; margin-top: 4px; background: url(/products_static/images/new/img_05_03.png) no-repeat 0 0 / 100%; }
@keyframes txt-left-loop-ani { 100% { left: -849px; } }
@keyframes txt-right-loop-ani { 100% { left: -1158px; } }
.memo .wrap-memo { position: relative; height: 400px; margin: 0 auto; transform: scale(0.565); -webkit-transform: scale(0.565); -moz-transform: scale(0.565); -ms-transform: scale(0.565); -o-transform: scale(0.565); margin: -87px 0 -53px -20px; }
.memo .area-heart { position: absolute; width: 100%; height: 322px; z-index: 3; }
.memo .area-heart .heart { position: absolute; bottom: 30%; left: 50%; width: 80px; height: 66px; ; background-image: url(https://og.kakaobank.io/view/7e7a87be-88c6-4baf-841e-099ae36ef494); background-size: cover; opacity: 0; }
@keyframes heart-ani { 0% { opacity: 0; } 40% { opacity: 1; } 60% { opacity: 1; } 100% { opacity: 0; } }
.memo .area-toast { position: relative; width: 340px; height: 376px; }
.memo .clear-fix:after, .clear-fix:before { content: ''; display: block; line-height: 0; }
.memo .clear-fix:after { clear: both; }
.memo .toast { padding: 25px 24px; width: 100%; text-align: left; background: #fff; -webkit-box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.03); box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.03); border-radius: 30px; clear: both; -webkit-box-sizing: border-box; box-sizing: border-box; }
.memo .toast p { margin: 0; font-size: 20px; font-weight: 700; }
.memo .toast .left { float: left; color: #000; }
.memo .toast .right { float: right; color: #0083D1; }
.memo .toast .detail { display: inline-block; padding: 9px 6px; margin-top: 8px; line-height: 14px; text-align: center; background: #F7F7F7; border-radius: 6px; font-size: 16px; color: #888888; }
.memo .toast.black { display: block; background-color: #000; position: absolute; top: 164px; z-index: 2; }
.memo .toast.black .left { color: #fff; }
.memo .toast.black .right { color: #fff; }
.memo .toast.black .wrap-detail { height: 0px; overflow: hidden; }
.memo .area-toast .wrap-toast-white { position: absolute; bottom: 0; width: 100%; }
.memo .area-toast .wrap-toast-white .toast { margin-top: 8px; opacity: 0; -webkit-transform: translateY(50px); -ms-transform: translateY(50px); transform: translateY(50px); }
.memo.swiper-slide-active .toast.black { background: #fff; top: 0; z-index: 0; -webkit-transition: all 0.6s; -o-transition: all 0.6s; transition: all 0.6s; -webkit-transition-delay: 1.2s; -o-transition-delay: 1.2s; transition-delay: 1.2s; }
.memo.swiper-slide-active .toast.black .left { color: #000; -webkit-transition: color 0.4s; -o-transition: color 0.4s; transition: color 0.4s; -webkit-transition-delay: 1.2s; -o-transition-delay: 1.2s; transition-delay: 1.2s; }
.memo.swiper-slide-active .toast.black .right { color: #0083D1; -webkit-transition: color 0.4s; -o-transition: color 0.4s; transition: color 0.4s; -webkit-transition-delay: 1.2s; -o-transition-delay: 1.2s; transition-delay: 1.2s; }
.memo.swiper-slide-active .toast.black .wrap-detail { height: 40px; -webkit-transition: height 0.46s; -o-transition: height 0.46s; transition: height 0.46s; -webkit-transition-delay: 1.2s; -o-transition-delay: 1.2s; transition-delay: 1.2s; }
.memo.swiper-slide-active .area-toast .wrap-toast-white .toast:nth-child(1) { -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-name: fadeIn, slideUp; animation-name: fadeIn, slideUp; -webkit-animation-delay: 1s, 1.2s; animation-delay: 1s, 1.2s; -webkit-animation-duration: 1s, 0.6s; animation-duration: 1s, 0.6s; -webkit-animation-timing-function: ease-in, cubic-bezier(0.28, 1.04, 1, 1); animation-timing-function: ease-in, cubic-bezier(0.28, 1.04, 1, 1); }
.memo.swiper-slide-active .area-toast .wrap-toast-white .toast:nth-child(2) { -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-name: fadeIn, slideUp; animation-name: fadeIn, slideUp; -webkit-animation-delay: 1s, 1.2s; animation-delay: 1s, 1.2s; -webkit-animation-duration: 1s, 0.6s; animation-duration: 1s, 0.6s; -webkit-animation-timing-function: ease-in, cubic-bezier(0.28, 1.04, 1, 1); animation-timing-function: ease-in, cubic-bezier(0.28, 1.04, 1, 1); }
@-webkit-keyframes fadeIn { 0% { opacity: 0; } 50% { opacity: 0.4; } 100% { opacity: 1; } }
@keyframes fadeIn { 0% { opacity: 0; } 50% { opacity: 0.4; } 100% { opacity: 1; } }
@-webkit-keyframes slideUp { 0% { -webkit-transform: translateY(50px); transform: translateY(50px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } }
@keyframes slideUp { 0% { -webkit-transform: translateY(50px); transform: translateY(50px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } }
.edge .wrap-edge { margin: 70px auto 90px; }
.flip-card { width: 100%; max-width: 260px; margin: 0 auto; }
.flip-card li { position: relative; display: inline-block; vertical-align: middle; }
.flip-card li:nth-child(1), .flip-card li:nth-child(5) { width: 13%; }
.flip-card li:nth-child(2), .flip-card li:nth-child(4) { width: 17.4%; }
.flip-card li.motion-card { width: 39.13%; }
.flip-card li img { width: 100%; }
.flip-card li img, .flip-card li span { vertical-align: middle; }
.flip-card li:nth-child(2) { margin: 0 -4.3% 0 1.3%; }
.flip-card li:nth-child(4) { margin: 0 1.3% 0 -4.3%; }
.flip-card li:nth-child(3) { z-index: 2; }
.flip-card li.motion-card { -webkit-perspective: 400px; perspective: 400px; -webkit-transform: scale(0.6); -ms-transform: scale(0.6); transform: scale(0.6); -webkit-transition: -webkit-transform .4s; transition: -webkit-transform .4s; -o-transition: transform .4s; transition: transform .4s; transition: transform .4s, -webkit-transform .4s; }
.flip-card li.motion-card img { position: relative; width: 100%; max-width: 180px; visibility: hidden; }
.flip-card li .card.front { position: absolute; top: 0; left: 0; display: inline-block; width: 100%; height: 100%; background: url(https://og.kakaobank.io/view/1a675418-c85b-4c94-afbe-074365da1c25)no-repeat center / cover; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }
.flip-card li .card.back { position: absolute; top: 0; left: 0; display: inline-block; width: 100%; height: 100%; background: url(https://og.kakaobank.io/view/b8225962-f97d-4a76-ba2b-82b450002bc5)no-repeat center / cover; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: rotateY(0deg); transform: rotateY(0deg); }
.edge.swiper-slide-active .flip-card li.active { -webkit-animation: aniCardScale 5s 0.4s 1 forwards cubic-bezier(0.12, 0.38, 0.41, 1.08); animation: aniCardScale 5s 0.4s 1 forwards cubic-bezier(0.12, 0.38, 0.41, 1.08); }
.edge.swiper-slide-active .flip-card li.active .card.front { -webkit-animation: aniCardFront 5s 0.4s 1 forwards cubic-bezier(.47, 1.64, .41, .8); animation: aniCardFront 5s 0.4s 1 forwards cubic-bezier(.47, 1.64, .41, .8); }
.edge.swiper-slide-active .flip-card li.active .card.back { -webkit-animation: aniCardBack 5s 0.4s 1 forwards cubic-bezier(.47, 1.64, .41, .8); animation: aniCardBack 5s 0.4s 1 forwards cubic-bezier(.47, 1.64, .41, .8); }
@-webkit-keyframes aniCardScale { 0% { -webkit-transform: scale(0.6); transform: scale(0.6); }
  10% { -webkit-transform: scale(1); transform: scale(1); }
  73% { -webkit-transform: scale(1); transform: scale(1); }
  100% { -webkit-transform: scale(1); transform: scale(1); }
}
@keyframes aniCardScale { 0% { -webkit-transform: scale(0.6); transform: scale(0.6); }
  10% { -webkit-transform: scale(1); transform: scale(1); }
  73% { -webkit-transform: scale(1); transform: scale(1); }
  100% { -webkit-transform: scale(1); transform: scale(1); }
}
@-webkit-keyframes aniCardFront { 0% { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }
  15% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); }
  65% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); }
  100% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); }
}
@keyframes aniCardFront { 0% { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }
  15% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); }
  65% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); }
  100% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); }
}
@-webkit-keyframes aniCardBack { 0% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); }
  15% { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); }
  65% { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); }
  100% { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); -o-transform: rotateY(-180deg); }
}
@keyframes aniCardBack { 0% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); }
  15% { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); }
  65% { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); }
  100% { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); }
}
/* ./ card motion slider */
 /* 4 미리 만나본 video section */
 .video-section { padding: 80px 35px; }
.video-section .cards .card { width: 100%; min-width: 285px; max-width: 305px; margin: 0 auto 40px; overflow: hidden; }
.video-section .cards .card:last-child { margin-bottom: 0; }
.video-section .card .thumbnail { display: block; border-radius: 4px; position: relative; width: 100%; height: 172px; background-size: cover; }
.video-section .cards .card img { width: 100%; vertical-align: bottom; transform: scale(1.3); transition: transform 0.8s; }
.video-section .cards .card.play-inmotion img { transform: scale(1) }
.video-section .cards .card .card-title { opacity: 0; transform: translateY(30px); transition: all 0.4s 0.4s; position: absolute; bottom: 0; left: 0; width: 100%; padding: 20px; text-align: left; font-size: 20px; line-height: 26px; font-weight: 700; color: #fff; }
.video-section .cards .card .card-title span { padding-bottom: 6px; border-bottom: 2px solid #fff; }
.video-section .cards .card.play-inmotion .card-title { opacity: 1; transform: translateY(0); }
/* .video-section .seq1 {background: url(@@video-test-1.png) no-repeat;}
.video-section .seq2 {background: url(@@video-test-2.png) no-repeat;}
.video-section .seq3 {background: url(@@video-test-3.png) no-repeat;}
 @keyframes slide { 0% { background-position: 50%; }
  50% { background-position: 40% }
  100% { background-position: 50% }
}
*/ /* 5 데뷔축하 이벤트 event-section */
 .event-section { padding-top: 80px;
  background: linear-gradient(180deg, #D7E4FF 0%, #FAFBFF 149.65%); }
.event-section h3 { margin-bottom: 12px; font-size: 26px; font-weight: 800; line-height: 35px; color: #122D50; }
.event-section .date{ display:block;font-weight: 500; font-size: 15px; line-height: 18px; color: #7B93CB; margin-top:9px }
.event-section .wrap-media .copy { margin-bottom: 16px; font-size: 26px; font-weight: 700; line-height: 30px; color: #3A92FF; }
.event-section .wrap-media .name { margin-bottom: 43px; font-size: 16px; color: #374C7D; font-weight: 700; line-height: 23px; }
.event-section .notice { color: #577095; font-size: 14px; font-weight: 500; }
.event-section .notice svg { vertical-align: middle; }
.event-section .share-icon { width: 56px;height:56px;background: url(https://og.kakaobank.io/view/5923064e-2adb-4953-8564-c2f06b9ab8a0) no-repeat; background-size: contain; }
.theme-default .event-section #share { margin: 64px 0; background: none; }
.event-section .wrap-media .img { position: relative; display: inline-block; width: 305px; max-width: 100%; }
.event-section .wrap-media video { width: 305px; max-width: 100%; }
.event-section .event-num { margin: 60px auto 9px; }
.event-section .event-num.num1 { width: 56px; height: 36px; background: url(https://og.kakaobank.io/view/92e00d45-851e-4cee-9d69-103ea38c22f0)no-repeat center / 56px 36px; }
.event-section .event-num.num2 { width: 56px; height: 36px; background: url(https://og.kakaobank.io/view/8887d2a4-2591-4ad0-a98f-43291ec9a99e)no-repeat center / 56px 36px; }
/* 전광판 */
 .wrap-station-slider { position: relative; width: 305px; margin: 0 auto; max-width: 100%; }
.station-slider { position: relative; width: 100%; overflow: hidden; border-radius: 4px; will-change: transform; }
.station-slider .swiper-wrapper { width: 130%; }
.station-slider .swiper-slide { position: relative; height: 203px; }
.station-slider .swiper-slide img { position: absolute; top: 0; left: 0; width: 433px; }
.station-slider .swiper-slide.swiper-slide-active { animation: stationSlide 16s 0s infinite linear; }
.station-slider .swiper-slide:after { content: ''; display: block; position: absolute; top: 0; left: 0; width: 433px; height: 100%; background: #263252; opacity: 0.7; z-index: 1; pointer-events: none; }
.station-slider .swiper-bullet {position: absolute; bottom: auto; top: 3px; right: 0; left: auto; z-index: 2; height:26px; box-sizing: border-box; text-align: right; padding-right: 20px; }
.station-slider .swiper-pagination-bullet { background: #fff; width: 6px; height: 6px; margin: 0 2px !important; }
.station-slider .swiper-pagination-bullet.swiper-pagination-bullet-active { background: #FF8CDF }
.station-slider .swiper-pagination-bullet:focus{outline: none;}
.station-title { position: absolute; bottom: 20px; left: 0; width: 100%; padding-left: 20px; box-sizing: border-box; z-index: 1; pointer-events: none; }
.station-title h4 { text-align: left; font-size: 20px; line-height: 32px; font-weight: 700; color: #fff; }
.station-title .rolling-station:after { content: ''; left: 0; position: absolute; width: 100%; display: inline-block; height: 30px; vertical-align: bottom; padding-bottom: 2px; color: #FF8CDF; border-bottom: 2px solid #FF8CDF; }
.rolling-station { position: relative; }
.rolling-station span { opacity: 0; color: #FF8CDF; }
.station-title .rolling-station span.active { opacity: 1; transition: all .4s cubic-bezier(0.63, 0.06, 0.26, 1.18); }
.station-title .rolling-station span { opacity: 0; }
@keyframes stationSlide { 0%, 10%, 90%, 100% { left: -10px }
  50%, 60% { left: -100px }
}
.event-section .how-to { margin: 18px auto 30px; }
.event-section .how-to li { font-size: 16px; line-height: 26px; font-weight: 700; color: #3A92FF; }
.event-section .how-to li.sub { font-size: 14px; font-weight: 500; color: #8494A9; }
.event-section .how-to li svg { vertical-align: top; }
.event-section .howto-img-motion { position: relative; width: 305px; max-width: 100%; margin: 0 auto; }
.event-section .howto-img-motion .img { opacity: 0; transition: all 0.4s; }
.event-section .howto-img-motion .img:first-child { opacity: 1; }
.event-section .howto-img-motion .img.on { opacity: 1; }
.event-section .howto-img-motion .img:not(:first-of-type) { position: absolute; top: 0; left: 0; width: 100%; }
.event-section .howto-img-motion .img.share-icon { opacity: 1; top: 51px; right: 51px; width: 56px; height: 56px; left: auto; transform-origin: 10px 42px; opacity: 1; transform: scale(0); transition-timing-function: cubic-bezier(0.42, 0, 0.15, 1.42); }
.event-section .howto-img-motion .img.share-icon.on { transform: scale(1); }
/* write button */
 #writeBtn { margin: 40px auto 92px; }
.write-btn { display: inline-block; padding: 17px 30px; font-weight: 800; font-size: 16px; line-height: 19px; color: #FFFFFF; background: #3A92FF; border-radius: 30px; }
/* share button */
 .event-section #share .share-btn .btn { background: #001F46; color: #fff; font-weight: 600; font-size: 19px; width: 100%; max-width: 285px; }
.theme-default .event-section #share { margin: 64px 0; background: none; }
.event-section #share .share-btn .btn { background: #7A9EFF; color: #fff; font-weight: 600; font-size: 19px; width: 100%; max-width: 285px; }
/* floating button */
 #btnApply { z-index: 2; bottom: -90px; transition: bottom 0.4s; -webkit-transition: bottom 0.4s; -moz-transition: bottom 0.4s; -ms-transition: bottom 0.4s; -o-transition: bottom 0.4s; }
.on #btnApply.is-show { bottom: 23px; }
#btnApply .apply-btn { background: linear-gradient(90deg, #FFA3A0 0%, #FFABBC 24%, #FFB0F5 72.99%, #FBA8FF 87.49%); color: #092A53; }
/* notice */
 .theme-default #eventInfo { background-color: #fff }
#eventInfo .inner { text-align: left; }
/* popup */
 .popups .okay-btn .btn-ok { background: #7A9EFF }
.popups.on { z-index: 99; }
.popup-youtube .btn-close-modal { position: fixed; top: 22px; right: 16px; color: transparent; font-size: 0; width: 36px; height: 36px; background: url(https://og.kakaobank.io/view/5f1959e5-616d-4550-b9f3-d09e0bb81775) no-repeat center / 28px 28px; }
.popup-youtube { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; box-sizing: border-box; padding: 20px 0; background: rgba(0, 0, 0, 1); z-index: 1; }
.popup-youtube.on { display: block; }
.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 - 사연쓰기 */
 .popup-storybook { transition: all .4s; height: 100%; width: 100%; }
.popup-storybook .dimmed { z-index: -1; background-color: #fff; }
.popup-storybook .header { max-width: 500px; height: 202px; display: block; position: relative; width: 100%; }
.popup-storybook .header h3 { display: block; position: relative; width: 100%; height: 200px; font-style: normal; font-weight: 700; font-size: 26px; line-height: 36px; color: #092A53; padding: 123px 25px 0 30px; box-sizing: border-box; text-align: left; }
.popup-storybook .header h3::after { content: ''; display: block; position: absolute; width: 93px; height: 81px; top: 109px; right: 25px; background: url(https://og.kakaobank.io/view/2bf256e3-c864-4155-820c-7892e13b8614); background-size: contain; }
.popup-storybook .close { background: url(https://og.kakaobank.io/view/d2e52537-e285-47bf-af5d-57ad15923bb4); background-size: contain; text-indent: -999em; width: 29px; height: 29px; position: absolute; right: 20px; top: 20px }
.popup-storybook .header::before { content: ''; width: 100%; display: block; height: 200px; position: absolute; background: linear-gradient(180deg, #FFDEFC 0%, rgba(255, 222, 252, 0) 100%); }
.popup-storybook .modal-table { display: table; max-width: 500px; margin: 0 auto; table-layout: fixed; }
.popup-storybook .modal-cell { display: table-cell; width: 100%; height:100%; vertical-align: middle; text-align: center; }
.popup-storybook .modal-cell .content { display:block ; width: 100%; height:100%; overflow-y:scroll; position: relative; max-width: 500px; max-height: 1250px; background-color: #FCF6F6; }
.popup-storybook .form-wrapper {    overflow: hidden; padding: 69px 35px 0; box-sizing: border-box; text-align: left; }
.popup-storybook .form-control label { display: block; font-style: normal; font-weight: 700; font-size: 18px; line-height: 24px; color: #092A53; }
.popup-storybook .form-control label::after { content: '*'; color: #FF52C4; }
.popup-storybook .form-control .sub { display: block; font-weight: 500; font-size: 14px; line-height: 24px; color: #BAB1B1; }
.popup-storybook .form-input-wrapper, .popup-storybook .form-text-wrapper { position: relative; padding: 20px 0 75px; }
.popup-storybook .form-text-wrapper { padding: 20px 0; }
.popup-storybook .txt-length { font-weight: 400; font-size: 12px; line-height: 14px; text-align: right; color: #BAB1B1; position: absolute; top: 34px; right: 0; }
.popup-storybook .txt-length strong { color: #FF52C4; }
.popup-storybook .form-text-wrapper .txt-length { top: initial; bottom: 17px; right: 15px; }
.popup-storybook .form-text-wrapper { margin-top: 20px; padding: 16px 15px 35px; border: 1.5px solid #092A53; border-radius: 14px; height: 249px; box-sizing: border-box; background-color: #ffffff; }
.popup-storybook .form-control .form-input-wrapper::after { content: ''; background: #092A53; width: 100%; height: 1.5px; display: block; }
.popup-storybook .form-control input { border: 0; width: 100%; outline: none; font-weight: 400; font-size: 14px; line-height: 22px; padding: 10px 46px 10px 0; color: #092A53; caret-color: #FF52C4; background-color: transparent; }
.popup-storybook .form-control textarea { border: 0; width: 100%; height: 100%; font-weight: 400; font-size: 13.5px; line-height: 22px; color: #092A53; caret-color: #FF52C4; background-color: #fff; outline: none; resize: none; }
.popup-storybook .submit-story-button { padding: 18px 0; width: 189px; font-weight: 700; font-size: 20px; line-height: 24px; background: #FBA9EB; border-radius: 40px; }
.popup-storybook .submit-story-button:disabled { background: #c4c4c4; color: #fcf6f6; }
.popup-storybook .modal-open { display: block; z-index: 1000; }
.popup-storybook .btn-close-modal { position: fixed; top: 22px; right: 16px; color: transparent; font-size: 0; width: 36px; height: 36px; background: url(close-btn.svg) 4px 4px no-repeat; background-size: 28px 28px; }
.popup-storybook .notice-wrapper { font-weight: 400; font-size: 13px; line-height: 20px; color: #FF52C4; text-align: left; padding: 20px 35px 50px 37px; }
.popup-storybook .notice-wrapper li { position: relative; padding-left: 10px; font-size: 13px; line-height: 20px; }
.popup-storybook .notice-wrapper li+li { margin-top: 6px; }
.popup-storybook .buttn-wrapper{ padding-bottom: 76px;}
.popup-storybook .notice-wrapper li::before { content: ""; position: absolute; top: 11px; left: 1px; display: inline-block; width: 2px; height: 2px; background: #FF52C4; border-radius: 50%; }
.card-slider { width: 305px; margin: 0 auto; }
@media screen and (max-width: 360px) { .card-slider { width: 305px; }
  .picture .wrap-picture { scale: 0.75; }
  .event-section #share .share-btn .btn { padding: 25px 20px; }
}

.swiper-pagination-bullet:focus{outline: none;}
.swiper-pagination-clickable .swiper-pagination-bullet{background-color:#fff;opacity: 1;}
.event-section .swiper-pagination-bullet { background: rgba(255, 255, 255, 0.6);}