@charset "UTF-8";
* {font-family:'Pretendard','Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', system-ui, sans-serif;}
body {background:#ffffff;}
section, .section {position:relative; z-index:2;background:#fff;box-sizing: border-box;}

/* common */
.pos-bottom {position: absolute;left:0;bottom: 90px;width:100%;text-align: center;}
.pos-bottom .icon-arrow {opacity:0; animation: arrow-bounce-ani 2s infinite;animation-delay: 2s;}
.section .inner {text-align: center;}


body {position: relative;overflow: hidden;}
body.on {overflow-y: auto;}
body .main {position: relative}
body.pc,body.on {height:auto !important; overflow-y: auto;}
body.pc .main ,body.on .main{overflow: auto;height:inherit}
body.on .section2 {overflow-y: auto;}
body.app  .fake-scroll::after {   content: ""; position: absolute; bottom: -65px; left: 0; width: 100%; z-index: 99; height: 0; background-color: #ffffff; transition: all .5s 2.2s; border-radius: 30px 30px 0 0; }
body.go-motion  .fake-scroll::after { z-index: 99; bottom: 0; height: 50px; transition: all .5s 2.2s; }
body.go-motion .pos-bottom .icon-arrow {opacity: 1; transition: opacity 1s 2.7s;}
body.scene1 .fake-scroll {height: 0;transition: all 1s; }
body.scene1 .top-section2 {border-radius: 0; transition: all 1s;}


.inmotion-section {transform:translate(0, 50px); opacity: 0;}
.scene1 .top-section{opacity: 0.4; transform: opacity 1s 1s ease;}
.scene1 .top-section2 .inmotion-section { 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; }
.play-inmotion.inmotion-section { 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; }


/* 1 fixed section */
.top-section {position:fixed;top:0;z-index:1;display: flex;width:100%;height:100%;justify-content: center;align-items: center;overflow: hidden;background:linear-gradient(to right,#FFA3A0,  #FBA8FF);transition: all 0.4s;}
.top-section .inner {width:100%;height: 367px;}
.top-section .title {opacity:0;font-size:27px; color:#092A53; font-weight:700;}
.top-section .tit-sub { font-size:50px;line-height: 60px; font-weight:900; color:#fff; transform: translateY(50px);opacity: 0;margin-top:7px;}
.top-section .tit-sub .emps {color:#092A53;}
.top-section .wrap-sticker {position:relative; width:266px;height:222px;margin:0 auto;}
.top-section .date {display:none;z-index:2;position:absolute;left:4%;top: -18px;width:102px; height:99px; background:url(https://og.kakaobank.io/view/3bbed629-df87-4aff-b350-d0154216467a)no-repeat center / 102px 99px;}
.top-section .coming {display:none;z-index:2;position:absolute;right:-6%;top: -30px;width:230px;height:221px;background:url(https://og.kakaobank.io/view/5cf7cb38-b334-4335-814b-19c304f2628f)no-repeat center / 230px 221px;}

.sticker {flex: 0 0 auto;-webkit-tap-highlight-color: transparent;}
.sticker * {-webkit-backface-visibility: hidden;backface-visibility: hidden;pointer-events: none;}
.sticker .sticker-container {position: relative;transform-style: preserve-3d;}
.sticker .sticker-wrapper {position: absolute;top: 0;left: 0;}
.sticker .sticker-clip {position: absolute;left: 0;top: 0; overflow: hidden;}
.sticker .sticker-front, .sticker-back {position: absolute;overflow: hidden;pointer-events: all;}
.sticker .sticker-front {z-index: 1;}
.sticker .sticker-back {z-index: 2;}
.sticker .sticker-clip {transition: 500ms ease-in-out transform;}
.sticker .sticker-front, .sticker .sticker-back {transition: 500ms ease-in-out transform;}

/* coming soon */
.sticker-coming {width: 230px;height: 221px;position:absolute;right:-6%;top: -30px;}
.sticker-coming .sticker-container {width: 320.0085812232px;height: 320.0085812232px;top: -49.5042906116px;left: -45.0042906116px;transform: rotate(0deg);}
.sticker-coming .sticker-wrapper {width: 320.0085812232px;height: 320.0085812232px;transform: rotate(120deg);}
.sticker-coming .sticker-clip {width: 320.0085812232px;height: 320.0085812232px;}
.sticker-coming .sticker-front, .sticker-coming .sticker-back {left: 45.0042906116px;top: 49.5042906116px;width: 230px;height: 221px;border-radius: 0px;}
.sticker-coming .sticker-clip {transform:translateX(252.2044192148px);opacity: 0;}
.sticker-coming .sticker-front {transform: rotate(-120deg) translateX(126.1022096074px) translateY(-218.4154339867px); -webkit-transform: rotate(-120deg) translateX(126.1022096074px) translateY(-218.4154339867px); -moz-transform: rotate(-120deg) translateX(126.1022096074px) translateY(-218.4154339867px); -ms-transform: rotate(-120deg) translateX(126.1022096074px) translateY(-218.4154339867px); -o-transform: rotate(-120deg) translateX(126.1022096074px) translateY(-218.4154339867px); }
.sticker-coming .sticker-back {transform: rotate(300deg) translateX(-33.9024588012px) translateY(-58.7200404433px);}
.sticker-coming .sticker-front {background-color: #e74c3c;background:url(https://og.kakaobank.io/view/5cf7cb38-b334-4335-814b-19c304f2628f)no-repeat center / cover;}
.sticker-coming .sticker-back {background-color: #c0392b;background:url(https://og.kakaobank.io/view/95c872a2-04ef-4519-8e95-15a077524439)no-repeat center / 230px 221px;}

/* 4.18 */
.sticker-date {width: 102px;height: 99px;position:absolute;left:4%;top: -18px;}
.sticker-date .sticker-container {width: 142.1444500622px;height: 142.1444500622px;top: -21.5722250311px;left: -20.0722250311px;transform: rotate(0deg);}
.sticker-date .sticker-wrapper {width: 142.1444500622px;height: 142.1444500622px;transform: rotate(10deg);}
.sticker-date .sticker-clip {width: 142.1444500622px;height: 142.1444500622px;}
.sticker-date .sticker-front, .sticker-date .sticker-back {left: 20.0722250311px;top: 21.5722250311px; width: 102px;height: 99px;border-radius: 0;}
.sticker-date .sticker-clip {transform: translateX(106.3809881856px);opacity: 0;}
.sticker-date .sticker-front {transform: rotate(-10deg) translateX(-104.7648219383px) translateY(-18.4728647368px);}
.sticker-date .sticker-back {transform: rotate(190deg) translateX(35.2201345217px) translateY(-6.2102599807px);}
.sticker-date .sticker-front {background-color: #f1c40f;  background:url(https://og.kakaobank.io/view/87758b56-e48b-4e31-aa09-1aa042b24a96) no-repeat center / cover;}
.sticker-date .sticker-back {background-color: #f39c12;background:url(https://og.kakaobank.io/view/472dd878-1889-4f01-a1c8-8b08e6d775eb) no-repeat center / 102px 99px;}

/* motion active */
.go-motion .top-section .title { font-size:27px; animation:showTit 1.7s 0s ease-in-out forwards;}
.top-section .tit-sub { opacity: 0; transform: translateY(80px);}
.go-motion .top-section .tit-sub {opacity:1; transform: translateY(0);transition: all .7s 1.2s ;}
.top-section:before { content:''; display:block; position:absolute; width:100%; height:100%; background:#FCC8FF; transition:all 0.5s; }
.go-motion .top-section:before { animation:grdientBg3 2s 0s forwards; -webkit-animation:grdientBg3 2s 0s forwards; }
.go-motion .top-section .sticker-date .sticker-clip {transform: translateX(12.2242864403px);  transition: all 1.4s 1.5s cubic-bezier(0.08, 0.46, 0.58, 1);opacity: 1;}
.go-motion .top-section .sticker-date .sticker-front {transform: rotate(-10deg) translateX(-12.0385720614px) translateY(-2.1227250636px);transition: all 1.4s  1.5s cubic-bezier(0.08, 0.46, 0.58, 1);}
.go-motion .top-section .sticker-date .sticker-back {transform: rotate(190deg) translateX(127.9463843752px) translateY(-22.5603996505px);transition: all 1.4s  1.5s cubic-bezier(0.08, 0.46, 0.58, 1);}
.go-motion .top-section .sticker-coming .sticker-clip {transform: translateX(6.3374096062px);transition: all 1s  1.5s cubic-bezier(0.08, 0.46, 0.58, 1);opacity: 1;}
.go-motion .top-section .sticker-coming .sticker-front {transform: rotate(-120deg) translateX(3.1687048031px) translateY(-5.4883577132px);transition: all 1s  1.5s cubic-bezier(0.08, 0.46, 0.58, 1);}
.go-motion .top-section .sticker-coming .sticker-back {transform: rotate(300deg) translateX(-156.8373335481px) translateY(-271.6468036427px);transition: all 1s  1.5s cubic-bezier(0.08, 0.46, 0.58, 1);}

@keyframes showTit {
  0% { opacity:0;; transform:translate(0, 150px); opacity: 0; -webkit-transform:translate(0, 150px); -moz-transform:translate(0, 150px); -ms-transform:translate(0, 150px); -o-transform:translate(0, 150px); }
  45% { opacity:1;   transform:translate(0, 120px); opacity: 1; -webkit-transform:translate(0, 120px); -moz-transform:translate(0, 120px); -ms-transform:translate(0, 120px); -o-transform:translate(0, 120px); }
  60% { opacity:1;   scale: 1;transform:translate(0, 120px); opacity: 1; -webkit-transform:translate(0, 120px); -moz-transform:translate(0, 120px); -ms-transform:translate(0, 120px); -o-transform:translate(0, 120px); }
  100% { opacity:1; scale: 0.8;  transform:translate(0,0); -webkit-transform:translate(0,0px); -moz-transform:translate(0,0px); -ms-transform:translate(0,0px); -o-transform:translate(0,0px); }
}

@keyframes grdientBg3 {
  0%{background:#FCC8FF;opacity: 1;}
  50%{background:#FFACBF;opacity: 1;}
  100%{background:#FFACBF; opacity: 0;}
}
@keyframes arrow-bounce-ani {
  0%, 100%, 20%, 50%, 80% { transform: translateY(0);}
  40% {transform: translateY(-10px);}
  60% {transform: translateY(-5px);}
}


/* fake scroll */
.fake-scroll {position:relative;width:100%; height:100vh;pointer-events: none;transition:all 0.6s;}
/* 2 scroll section */
.top-section2 {transition:all 0.6s; display: flex; width:100%; height:100vh; justify-content: center; align-items: center; overflow: hidden; -webkit-transition:all 0.6s; -moz-transition:all 0.6s; -ms-transition:all 0.6s; -o-transition:all 0.6s; }
.top-section2 .pos-top {position:absolute;width: 100%;height: 60%;left: 0;top:0;box-sizing: border-box;}
.top-section2 .wrap-title {position:absolute;top:0;left:0;width:100%;}
.top-section2 .wrap-title.no-video {position:relative;padding-bottom:50%;padding-top:50px}
.top-section2 .title {margin-bottom:10px;font-size:21px;font-weight: 700;color:#ff60CD;line-height:30px;}
.top-section2 .tit-sub {font-size:38px;font-weight: 900;color:#092A53;line-height:50px;}
.top-section2 .pos-bottom {bottom:17vh;}
.top-section2 .pos-bottom .tit-desc {font-size:19px;color:#092A53;line-height:28px;font-weight: 700;margin-bottom:16px;}
.top-section2 .pos-bottom .tit-desc .emps {color:#ff60CD;}


.section.top-section2 {display:block;padding:0; position:relative;}
.top-section2 .video-wrapper {height:100vh;position: relative;}
.top-section2 video#videoCover {position:absolute;width:100%;height:100vh;object-fit: cover;}
.top-section2 video {width:100%;}

/* 4 event section */
.event-section {background:#D4E0FF;padding-top:80px;}
.event-section h3 {margin-bottom:40px;font-size:26px;font-weight:800;line-height:35px;color:#122D50;}
.event-section .wrap-gift .copy {margin-bottom:10px;font-size:25px;font-weight:800;line-height:32px;color:#FF6ABB;}
.event-section .wrap-gift .name {margin-bottom:43px;font-size:16px;color:#374C7D;font-weight:700;line-height:22px;}
.event-section .notice {color:#577095;font-size:14px;font-weight:500;}
.event-section .notice svg {vertical-align: middle;}
.theme-default .event-section #share {margin:64px 0;background:none;}
.event-section #share .share-btn .btn{background:#001F46;color:#fff;font-weight:600;font-size:19px;width:100%;max-width:285px;}
.event-section .date { font-size: 15px; line-height: 18px; display: block; margin-top:9px; color: #7B93CB; 
  font-weight: 600;}
.wrap-gift .img {position:relative;display: inline-block;}
.wrap-gift img {position:relative;z-index: 1;width:305px;max-width:100%;}
.wrap-gift .deco {position:absolute;}
.gift-01 img {margin-bottom:70px;}
.gift-01 .deco.dc1 {bottom:7px;left: -77px;}
.gift-01 .deco.dc2 {top:56px;right: -23px;}
.gift-02 img {margin-bottom:68px;}
.gift-02 .deco.dc1 {top:-2px;right: -28px;}
.gift-02 .deco.dc2 {bottom:61px;left: -30px;}
.gift-03 img {margin-bottom:40px;}
.gift-03 .deco.dc1 {bottom: -6px;left: -58px;}
.gift-03 .deco.dc2 {top:-4px;right: -18px;} 


/* section scroll motion */
/* .sec-kv {position:absolute;top:0;width:100%;height:100vh;z-index:1;}
.sec-scroll {margin-top:100vh;width: 100%;height: 100vh;overflow-y: scroll;transition: all 0.6s;z-index:2;}
.sec-scroll.on {margin-top:0;} */



/* floating button */
#btnApply { z-index:2; bottom:-90px; transition:bottom 0.4s; opacity:0; -webkit-transition:bottom 0.4s; -moz-transition:bottom 0.4s; -ms-transition:bottom 0.4s; -o-transition:bottom 0.4s; }
.scene1 #btnApply, .pc  #btnApply{bottom:23px;opacity: 1; transition: all .5s 1.4s;}
#btnApply .apply-btn {background: linear-gradient(90deg, #FFA3A0 0%, #FFABBC 24%, #FFB0F5 72.99%, #FBA8FF 87.49%);color:#092A53;}
.popups .okay-btn .btn-ok {background:#F792D7; color: #122D50; }


@media screen and (max-width: 360px) {
  .event-section #share .share-btn .btn {
      padding:25px 20px;
  }
}