@charset "UTF-8";

.main {
  width: 100%;
  position: relative
}

.section {
  width: 100%;
  position: relative
}


.inner {
  margin: 0 auto;
  position: relative;
  overflow: initial;
  max-width: initial;
}

.ir {
  text-indent: -999em;
}

.btn-apply {
  opacity: 0;
  bottom: 0;
}

#btnApply {
  bottom: -10px;
}

.btn-apply.is-active {
  display: block;
  position: fixed;
  opacity: 1;
  -webkit-transition: transform 0.5s, opacity 0.5s;
  -webkit-transform: translateY(-10px);
  transition: transform 0.5s, opacity 0.5s;
  transform: translateY(-10px);
  height: 86px;
  width: 100%;
}

.top-section {
  background-color: #13438f;
  overflow: hidden;
}

.top-section .inner::after {
  content: '';
  display: block;
  position: absolute;
  width: 417px;
  height: 446px;
  bottom: -210px;

  background: linear-gradient(180deg, rgba(19, 67, 143, 0) 0%, #13438F 45.79%);
  filter: blur(17px);
}

.top-section .inner {
  position: relative;
  height: 728px;
  padding: 0 35px;
  box-sizing: border-box;
}


@media screen and (min-width: 375px) {

  .top-section .inner {
    max-width: 100%;
  }

  .present {
    position: absolute;
    width: 380px;
    height: 461px;
    bottom: 0;
    right: -26px;
  }
}

@media screen and (min-width: 440px) {

  .top-section .inner {
    max-width: 375px;
    overflow: hidden;
  }

  .present {
    position: absolute;
    width: 380px;
    height: 461px;
    bottom: 0;
    right: initial;
  }

}


.top-section .sub {
  display: block;
  width: 150px;
  height: 57px;
  position: absolute;
  top: 56px;
  left: 35px;
  background: url(https://og.kakaobank.io/view/1fb68674-6d10-4a98-9b62-16be5fb2c6b8) no-repeat;
  background-size: contain;
}

.top-section .title {
  display: block;
  width: 257px;
  height: 149px;
  position: absolute;
  top: 145px;
  left: 35px;
  background: url(https://og.kakaobank.io/view/dafe0035-8c05-4ac6-ab2e-6f4c4ba4a17c) no-repeat;
  background-size: contain;
}

.top-section .date {
  display: block;
  opacity: 0;
  font-weight: 700;
  font-size: 15px;
  position: absolute;
  top: 302px;
  left: 35px;
  line-height: 18px;
  letter-spacing: 1px;
  color: #FFFFFF;
  margin-top: 8px;

}

.present {
  position: absolute;
  width: 380px;
  height: 461px;
  bottom: 0;
}

.present .post {
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 252px;
  height: 461px;
  margin-top: 99px;
  background: url(https://og.kakaobank.io/view/bef2bf4b-cca8-41e0-8cc4-6911bc10480f) no-repeat;
  background-size: contain;
}

.present .bills {
  display: block;
  position: absolute;
  right: 73px;
  bottom: -30px;
  width: 253px;
  height: 387px;
  margin-top: 99px;
  background: url(https://og.kakaobank.io/view/d2f9dd8b-ff13-460a-8fad-fd82ea0948c8) no-repeat;
  background-size: contain;
}

.present .sh {
  display: block;
  position: absolute;
  bottom: 95px;
  right: 19px;
  width: 74px;
  height: 74px;
  background: url(https://og.kakaobank.io/view/e79dd0cc-5b64-4f46-b8d4-475272f52c07) no-repeat;
  background-size: contain;
}

.present .kb {
  display: block;
  position: absolute;
  top: 86px;
  left: 110px;
  width: 43px;
  height: 43px;
  background: url(https://og.kakaobank.io/view/01f763a8-aef5-4ff4-b9bc-32a6af837ada) no-repeat;
  background-size: contain;
}

.present .bc {
  display: block;
  position: absolute;
  top: 226px;
  left: -14px;
  width: 54px;
  height: 54px;
  background: url(https://og.kakaobank.io/view/3515797a-7bfd-43a0-88f8-0dafcfe9f774) no-repeat;
  background-size: contain;
}

.content-section .inner {

  padding: 70px 0 0;
}

.content-section .inner::before {

  content: '';
  position: absolute;
  width: 100%;
  height: 280px;
  left: 0px;
  bottom: 0;

  background: linear-gradient(182.14deg, rgba(247, 247, 247, 0) 1.8%, #F7F7F7 72.07%);
}

.content-section .emoji {
  display: block;
  margin: 0 auto;
}

.content-section h2 {
  display: block;
  left: 43px;
  top: 239px;
  font-weight: 800;
  font-size: 28px;
  line-height: 40px;
  text-align: center;

  color: #0033B5;
}

.content-section h2 .sub {
  display: block;
  display: block;
  font-weight: 600;
  font-size: 20px;
  line-height: 30px;
  text-align: center;
  color: #AAAAAA;
  margin: 37px 0 30px 0;
}

.alarmtalk .emoji {
  display: block;
  width: 49px;
  height: 49px;
  background: url(https://og.kakaobank.io/view/712a2f2c-59d0-43ab-a73c-6ae5aebc97a4) no-repeat;
  background-size: contain;
}

.ani-02 {
  height: 360px;
  margin-top: 60px;
  overflow: hidden;
}

.ani-01 {
  height: 360px;
  padding-top: 60px;
  overflow: hidden;
}

.ani-01 .bank-display {
  position: relative;
  display: block;
  width: 344px;
  height: 277.5px;
  background: url(https://og.kakaobank.io/view/df678a8f-5424-4e91-9954-2f2c93571e1e) no-repeat;
  background-size: contain;
  margin: 0 auto;
}

.ani-01 .bank-display-ani {
  position: absolute;
  display: block;
  width: 84px;
  height: 84px;
  background: url(https://og.kakaobank.io/view/94b03502-14c7-48cc-98ae-3f477be0ce3b) no-repeat;
  background-size: contain;
  bottom: 24px;
  right: 35px;
  scale: 0.7;
  opacity: 0;
}

.ani-01.is-active .bank-display-ani {
  transition: all 0.37s 1.3s;
  scale: 1;
  opacity: 1;
}

.ani-00 img {
  display: block;
  margin: 0 auto;
}

.white-gradient {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 70px;
  background: linear-gradient(182.14deg, rgba(247, 247, 247, 0) 1.8%, #F7F7F7 72.07%);
}


.check .emoji {
  display: block;
  width: 49px;
  height: 49px;
  background: url(https://og.kakaobank.io/view/e87720b2-bf68-4c20-a4e8-191dcc427bd1) no-repeat;
  background-size: contain;
}

.deposit .emoji {
  display: block;
  width: 49px;
  height: 49px;
  background: url(https://og.kakaobank.io/view/d8caa3a9-6c0c-4b8b-8cc2-96840299f549) no-repeat;
  background-size: contain;
}

.section.event {
  background: #B4CEF5;
  padding: 60px 0 80px;
}

.event .sub {
  display: block;
  font-weight: 700;
  font-size: 17px;
  line-height: 36px;
  width: 84px;
  color: #fff;
  height: 36px;
  background: #0E38A4;
  text-align: center;
  border-radius: 43px;
  margin: 0 auto;
}

.event h3 {
  font-weight: 700;
  font-size: 26px;
  line-height: 35px;
  text-align: center;
  color: #FFFFFF;
  padding: 30px 0 52px;
  font-weight: 800;
  font-size: 28px;
  line-height: 37px;
  text-align: center;
  color: #0E38A4;
}

.event h3 .desc {
  display: block;
  margin: 0 auto 20px;
  font-weight: 700;
  font-size: 20px;
  line-height: 30px;
  text-align: center;
  color: #FFFFFF;


}

.event .graphic-image {
  padding-top: 8px;
  width: 100%;
  max-width: 375px;
}

.event .coffee-image {
  display: block;
  width: 305px;
  height: 292px;
  margin: 0 auto 80px
}

.event .item {
  display: block;
  height: 70px;
  max-width: 260px;
  width: 100%;
  background: #fff;
  border-radius: 27px;
  font-weight: 700;
  font-size: 19px;
  line-height: 70px;
  text-align: center;
  color: #0E38A4;
  text-align: center;
  margin: 10px auto 0;
  box-shadow: none;
}

.event .item .strong {
  color: #869bd1
}

.event .item .strong:before {
  content: '|';
  padding: 0 7px;
  font-size: 17px;
  display: inline-block;
  color: #cfd7ed;
}


/* layout.css overwrite */

#btnApply .apply-btn {
  background: #FFEA31;
}

.theme-default #share .share-btn .btn {
  display: inline-block;
  margin: 60px auto 0;
  color: #fff;
  background-color: #0E38A4;
}

#eventInfo .inner {
  margin: 0 auto;
  max-width: 375px;
}

#eventInfo .info-tit {
  padding-bottom: 40px;
}

.theme-default #share {
  background-color: initial;
}

.popups .okay-btn .btn-ok {
  color: #000000;
  background: #FFD600;
  font-weight: 800;
  font-size: 20px;
  line-height: 24px;
}

.popups .desc {
  font-weight: 400;
  font-size: 15px;
  line-height: 18px;
  display: block;
  letter-spacing: -1px;
  margin: 20px auto;

  color: #333333;
}