@charset "UTF-8";
:root {
  --vh: 1%;
}
/* devanagari */
@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;
}
* {
  box-sizing: border-box;
}
::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari, Opera*/
  scrollbar-width: none;
  /* Firefox */
  scroll-behavior: smooth;
}
.share-btn .btn {background-color:#555555;}
.art-info {background-color:#444444; color:#ffffff;}
.info-accordion-btn .accordion-block {border-color:#FFFFFF;}
.section {position: relative; height: auto !important; min-height: calc(var(--vh, 1vh) * 100) !important;}
.section .inner {max-width:375px; width:100%; margin:0 auto; padding:0 35px; box-sizing: border-box;}
/* 공유하기 */
.theme-default #share {margin-top: -100px;padding-right:45px;padding-left:45px;background-color:#fff;background-color:transparent}
.theme-default #share .share-btn {min-width:188px;color:#fff;background:#555555;}
.theme-default #share .share-btn svg {stroke: #fff;}
.theme-default #share .share-btn svg path {stroke: #fff;}
.theme-default #share .share-btn svg circle {stroke: #fff;fill:#fff}
@media screen and (max-width: 373.98px) {
  .theme-default #share {padding-right:0;padding-left:0;}
}
/* popup */
.popups .okay-btn .btn-ok {color:#000;background:#FFE800;}
/* 공유하기 */
.popup-share .pop-content-inner {position:relative;padding:10px 18px 40px;}
.popup-share .btn-close {position: absolute;top: 10px;left: 50%;transform: translateX(-50%);background-color:#EAECEF;}
.popup-share .pop-share-btn-list { margin-top:40px;}
/* 꼭알아두세요 */
#eventInfo .inner {padding-right:0;padding-left:0;}
#eventInfo .info-head + .accordion-block.unfold {margin-top:40px;}
.accordion-block .accordion-btn span:first-child {width: calc(100% - 22px);display: inline-block;word-break: keep-all;}
/* 플로팅버튼 */
/* .btn-apply {position:fixed; bottom:0; left:0; width:100%; padding:20px 30px; box-sizing: border-box;} */
.btn-apply .btn {display: block; width:100%; padding:23px 0; text-align: center; border-radius: 20px; color:#fff; font-size:20px; line-height: 24px; font-weight: 700; background-color:#664BFF;}
.btn-apply .btn img {width:21px; vertical-align: top; margin-right:10px;}
.btn-apply .arrow {position: absolute; top: -20px; left: 50%; width: 17px; margin-left: -8px; animation:arrow-bounce-ani 2s infinite}
.btn-apply.inApp_iphonex {bottom:16px;}
.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; 
}

/* 컨텐츠:section1 */
/* 서비스 개편 EVENT */
.section1.fp-is-overflow>.fp-overflow {overflow:hidden;}
.section1 .inner {position:relative;padding:40px 35px;height: calc(var(--vh, 1vh) * 100);font-size: 0;}
.section1 .tit-box {-webkit-animation: tit-box-ani 1s ease-in-out forwards;animation: tit-box-ani 1s ease-in-out forwards;}
@-webkit-keyframes tit-box-ani {
  0% {opacity:0;-webkit-transform: translateY(30px);}
  100% {opacity:1;-webkit-transform: translateY(0);}
}
@keyframes tit-box-ani {
  0% {opacity:0;transform: translateY(30px);}
  100% {opacity:1;transform: translateY(0);}
}
.section1 .sub-tit {display:inline-block;width:180px;height:94px;background:url(https://og.kakaobank.io/view/15c1285c-0774-45ab-be09-2fab2194cd2b) no-repeat 0 / 100%}
.section1 .tit {margin:22px 0 49px;font-size: 41px;font-weight: 900;line-height: 60px;letter-spacing: -0.005em;}
.section1 .tit span {color:#FFE300}
.section1 .desc {max-width:266px;width:100%;color:#222;font-size: 26px;font-weight: 700;line-height: 44px;-webkit-animation: desc-ani 1s ease-in-out forwards;animation: desc-ani 1s ease-in-out forwards;}
@-webkit-keyframes desc-ani {
  0% {opacity:0;-webkit-transform: translateY(-5px);}
  100% {opacity:1;-webkit-transform: translateY(0);}
}
@keyframes desc-ani {
  0% {opacity:0;transform: translateY(-5px);}
  100% {opacity:1;transform: translateY(0);}
}
.section1 .desc [class*="emoji-"],
.section1 .desc [class*="img-"] {display:inline-block;vertical-align: middle;background-repeat:no-repeat;background-position:0;background-size:100%;}
.section1 .desc .emoji-line {width:61.5px;height:47.5px;text-align:center;font-weight:800;}
.section1 .desc .emoji-selfie {width:40px;height:40px;}
.section1 .desc .emoji-overseas {width:40px;height:40px}
.section1 .desc .emoji-information {width:40px;height:40px}
.section1 .desc .img-arrow {margin-top: -20px;margin-left:10px;width:56.5px;height:36.5px;}
.section1 .desc .emoji-bulb1 {position:relative;margin-top:-10px;width:40px;height:40px}
.section1 .desc .emoji-bulb1::before {content:"";position:absolute;top:-22px;right:-18px;display:inline-block;width:33px;height:33px;}
.section1 .desc .desc-txt {position:relative;padding-bottom:15px;font-family: "Poppins";}
.section1 .desc .desc-txt >  span {color:#FFD000;}
.kv-image .earth-icon { position: absolute; left: 73px; top: 53px; }
.earth-icon .earth { animation: rolling 2.3s infinite; } 
.earth-icon .flag { position: absolute; right: -9px; bottom: 12px; } 
.kv-image .phone-icon { position: absolute; left: 177px; top: 1px; animation: shakerotate 1.6s infinite; } 
.kv-image .book-icon {position: absolute;left: 224px;top: 48px;} 
.kv-image .book-icon .grasses {position: absolute;right: 0;bottom: 20px;animation: search 3s infinite;} 
.kv-image .light-icon {position: absolute;left: 204px;top: 129px;}
.kv-image .circle-path {display: block;position: absolute;left: 45px;top: -3px;} 
.kv-image .arrow-path { position: absolute; left: 125px; top: 91px } 
.kv-image .line-path { position: absolute; left: 0; bottom: -22px }
 .kv-image .threeline-path {position: absolute;left: 227px;top: 104px;} 
 .path-animation svg path { stroke-dasharray: 320; stroke-dashoffset: 0; animation: dash 1s linear forwards; }
.arrow-path svg path { opacity: 0; animation:  dash 1.6s 1.43s linear forwards; }
     .circle-path  svg path { opacity: 0; animation-delay: .6s; } 
     .line-path svg path { opacity: 0; animation-delay: 1.6s; } 
     .threeline-path svg path { opacity: 0; animation-delay: 2s; animation: fadein 1s linear infinite; } 
     .threeline-path svg path+path { opacity: 0; animation-delay: 2.1s; } 
     .threeline-path svg path+path+path { opacity: 0; animation-delay: 2.2s; } 
  @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } 
       @keyframes dash { from { opacity: 1; stroke-dashoffset: 320; } to { opacity: 1; stroke-dashoffset: 0; } }
        @keyframes rolling { from { transform: rotate(0); } to { transform: rotate(360deg); } }
         @keyframes search { 0% { transform: translate(0, 0) } 15% { transform: translate(-4px, -4px) } 30% { transform: translate(-8px, -5px) } 30% { transform: translate(-5px, 0px) } 45% { transform: translate(-2px, -2px) } }
          @keyframes shakerotate { 0% { transform: rotate(3deg); } 15% { transform: rotate(0); } 30% { transform: rotate(3deg); } 45% { transform: rotate(0); } }
/* 하단으로 이동 */
.scroll-down {position: absolute;left: 50%;bottom: 98px;bottom: 14.5vh;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;}
}
/* 돈이 되는 이야기가 새로워졌어요! */
.section2 {position: relative;height: 100vh;display: flex;justify-content: center;align-items: flex-end;z-index: 1;}
/* .section2.active .vod-wrap #compareVod {max-width: 375px; max-width:89.79%;} */
.vod-wrap {position: absolute;top: -63px;left: 50%;transform: translateX(-50%);width: 305px;height: calc(100% + 50px);height:100vh;height:100%;transition: width 0.5s, top 0.5s, border-radius 1s;z-index: -1;border-radius:32.53px;background-color: #FFE300;overflow:hidden;}
.section2.active .vod-wrap {top:0;width:100%; height:100%;height: calc(var(--vh, 1vh) * 100); border-radius: 0;}
.vod-wrap #compareVod {position:absolute;top:0;left: 50%;transform: translateX(-50%);max-width: 100vw;width: auto; min-height: 100vh;object-fit: cover;transition: width 0.5s;}

/* 컨텐츠:section2 */
.section3-content { height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch;}
.section3 {position:relative;background:#fff;}
.section3 .tit-header {padding:40px 0;}
.section3 .tit-header .date {display: inline-block;margin-bottom: 12px;color:#B9B9B9;font-size: 16px;font-weight: 600;line-height: 30px;letter-spacing: 3px;}
.section3 .tit {font-size: 36px;font-weight: 800;line-height: 46px;color:#000000;}
.section3 .tit > span {color:#FFE300;}
.section3 .tit > span::after {content:"";display:inline-block;margin-left: 11px;width:46px;height:46px;vertical-align: top;background:url(https://og.kakaobank.io/view/d73e9650-a953-4d13-9680-c255474910f6) no-repeat 0 / 100%;}
.section3 .sub-tit {margin-bottom:30px;font-size: 23px;font-weight: 800;line-height: 34px;}
/* .section3 .sub-tit::before {content:"";display:inline-block;vertical-align:middle;height:29px;margin-right:8px;padding:0px 9px;font-family: "Poppins";font-size: 18px;font-weight: 700;border-radius:20px;background:#FFE300;} */
.section3 .sub-tit .num {display:inline-block;vertical-align:middle; width:37px;height:29px;margin-right:8px;background-repeat:no-repeat;background-position:0;background-size:100%;}
.section3 .sub-tit span {position:relative;z-index: 1;}
.section3 .sub-tit span:not(.num)::before {content:"";position:absolute;right:0;bottom:0;left:0;display:inline-block;height:8px; background:#FFE300;z-index: -1;}
.section3 .sub-tit2 {margin-top:50px;font-size: 18px;font-weight: 700;line-height: 30px;}
.section3 .item-box {margin-top:16px;padding:23px 25px;font-size: 17px;font-weight: 700;line-height: 28px;border-radius:20px;background:var(--color-bg)}
.section3 .item-box span {position:relative;z-index: 1;}
.section3 .item-box span::before {content:"";position:absolute;right:0;bottom:0;left:0;display:inline-block;height:8px; background:#FFE300;z-index: -1;}
/* 돈이 되는 이벤트 1 */
.section3.fp-is-overflow>.fp-overflow {overflow-x:hidden;}
.event1 {padding:53px 0 49px;background:#F9F9EC;}
.event1 .inner {overflow: unset;}
.section3 .event1 .sub-tit .num {background-image:url(https://og.kakaobank.io/view/fa4fdb11-7a75-42ba-8b3d-f36476a20227);}
.event1 .swiper,
.event1 .swiper-container {overflow: visible !important;}
.event1 .swiper {margin-top:16px;}
.event1 .swiper .swiper-slide {width:200px;}
.event1 .swiper .swiper-slide .img {display:inline-block;width:200px;height:130px;border-radius:20px;background-repeat:no-repeat;background-position: center;background-size: 100%;}
.event1 .swiper .swiper-slide .img.swipe-img1 {background-image:url(https://og.kakaobank.io/view/59d25dda-23de-4f4b-81f8-12a187a90a4a)}
.event1 .swiper .swiper-slide .img.swipe-img2 {background-image:url(https://og.kakaobank.io/view/ed0a03b8-4fac-46b1-9026-9456712ebb93)}
.event1 .swiper .swiper-slide .img.swipe-img3 {background-image:url(https://og.kakaobank.io/view/0746d7fb-d2d1-45c0-b97e-d1e3b3740208)}
.event1 .swiper .swiper-slide .img.swipe-img4 {background-image:url(https://og.kakaobank.io/view/fef72ef3-2d04-4fb0-924f-0145071eab39)}
.event1 .swiper .swiper-slide .img.swipe-img5 {background-image:url(https://og.kakaobank.io/view/dcba21eb-9590-44aa-8656-40c84ef8985f)}
.event1 .swiper .swiper-slide .img.swipe-img6 {background-image:url(https://og.kakaobank.io/view/bf21b956-d712-419d-8b17-52ecaecbac17)}
.event1 .swiper .swiper-slide .desc {margin-top:16px;height:44px;font-size: 16px;font-weight: 500;line-height: 22px;}
.event1 .swiper .swiper-slide .btn-more {display:inline-block;margin-top:14px;padding:10px 14px;color:#000;font-size: 13px;font-weight: 700;line-height: 15.51px;letter-spacing: 0.005em;border-radius:12px;background:#FFE300;}
/* 돈이 되는 이벤트 2 */
.event2 {padding:60px 0 0;}
.event2 .inner {padding-bottom:100px;}
.section3 .event2 .sub-tit .num {background-image:url(https://og.kakaobank.io/view/8af3c953-8dc4-4c41-81c3-4a2a1dbb0245);}
.event2 #btnApply { position: initial;}
.event2 .link_apply {display:flex;align-items: center;justify-content: center;width:100%;margin-top:20px;height:60px;color:#fff;font-size: 17px;font-weight: 700;line-height: 20.29px;border-radius:16px;background:#000;}

.videos {background-color:#FFFFFF;}
.videos .tit {margin-bottom: 40px;}
.videos .video-area {width:100%; background-color:#F4F4F4; border-radius: 20px; margin-bottom:33px; overflow: hidden;}
.videos .video-area .btn-play {position:relative; display:block; width:100%; height:100%; text-align: center;}
.videos .video-area .btn-play .thumb {display: block; font-size: 0;}
.videos .video-area .btn-play .thumb:after {content:""; position:absolute; top:0; left:0; width: 100%; height: 100%; background-color:rgba(0,0,0,0.48)}
.videos .video-area .btn-play .thumb img {position:absolute; top:0; left:0; width:100%; opacity:0;}
.videos .video-area .btn-play .thumb img:first-child {position:relative;}
.videos .video-area .btn-play .thumb img.on {opacity: 1;}
.videos .video-area .btn-play .icon-play {position:absolute; top:50%; left:50%; width:33px; margin:-18px -16px;}
.videos .btns {text-align: center;}
.videos .btns a {padding:0 10px; font-size:23px; line-height: 28px; font-weight: 600; color:#BBBBBB;}
.videos .btns a.on {color:#FFB800;}

.share-btn {background-color:#F4F4F4;}
.share-btn .tit {margin-bottom:60px;}
.share-btn .tit span {color:#AAAAAA;}
.share-btn .thumb {margin-bottom:80px;}

/* animation */
.sec01 .tit {transform:translate(0, 100px); opacity: 0;}
.sec01 .desc { opacity: 0;}
.sec01 .fake {opacity:0; transform:translate(0, -100%);}

.btn-apply {transform:translate(0, 100px); opacity: 0;}

main.on .sec01 .fake {animation:fake-ani 4s forwards;}
main.on .sec01 .tit {transform:translate(0, 0); opacity: 1; transition:all 0.4s 1.2s;}
main.on .sec01 .desc {transform:translate(0, 0); opacity: 1; transition:all 1s 1.5s;}


main.on .btn-apply {transform:translate(0, 0); opacity: 1; transition:all 0.7s 1.6s;}

@keyframes fake-ani {
  0% {transform:translate(0, -100%); opacity: 0;  transition-timing-function: ease-in}
  30% {transform:translate(0, 150px); opacity: 1; transition-timing-function: ease-out}
  40% {transform:translate(0, -50px); transition-timing-function: ease-in}
  50% {transform:translate(0, 20px); transition-timing-function: ease-out}
  60% {transform:translate(0, -5px); transition-timing-function: ease-in}
  70% {transform:translate(0, 5px); transition-timing-function: ease-out}
  80% {transform:translate(0, -2px); transition-timing-function: ease-in}
  90% {transform:translate(0, 2px); transition-timing-function: ease-out}
  100% {transform:translate(0, 0); opacity: 1;}
}

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

  article .ani {transform:translate(0, 200px); opacity: 0;}
  article.on .ani {transform:translate(0, 0); opacity: 1; transition:all 1s;}
  article.on .ani02 {transition-delay: 0.1s;}
  article.on .ani03 {transition-delay: 0.2s;}
}


@media screen and (max-width: 360.98px) {
  .section1 .inner {
    scale: 0.8;
    padding: 0;
  }
  .scroll-down{
    bottom:0vh
  }
  .section1 .tit {
    margin: 22px 0 30px;
  }
  .vod-wrap{top:-30px}
  .section .inner {
    padding-right:20px;
    padding-left:20px;
  }
  .section3 .item-box {
    padding-right: 16px;
    padding-left: 16px;
  }
}