@charset "UTF-8";

/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,button{margin:0;padding:0}
fieldset,img{border:0 none}
dl,ul,ol,menu,li{list-style:none}
blockquote, q{quotes:none}
blockquote:before, blockquote:after,q:before, q:after{content:'';content:none}
input,select,textarea,button{vertical-align:middle;font-size:100%}
button{border:0 none;background-color:transparent;cursor:pointer}
table{border-collapse:collapse;border-spacing:0}
body{min-width:320px;background-color:#fff;-webkit-text-size-adjust:none}
input:checked[type='checkbox']{background-color:#666; -webkit-appearance:checkbox}
input[type='text'],input[type='password'],input[type='submit'],input[type='search'],input[type='tel'],input[type='email'],html input[type='button'],input[type='reset']{-webkit-appearance:none;border-radius:0}
input[type='search']::-webkit-search-cancel-button{-webkit-appearance:none}
body,th,td,input,select,textarea,button{font-size:14px;line-height:1.5;  font-family: 'Apple SD Gothic Neo', 'Malgun Gothic','맑은 고딕', system-ui, sans-serif;color:#000}
a{color:#005a96;text-decoration:none}
a:active, a:hover{text-decoration:none}
address,caption,cite,code,dfn,em,var{font-style:normal;font-weight:normal}
hr {border: 0 none;}


.section-header {
  text-align: center;
  padding-top: 169px;
}

.section-header h2 {font-size: 22px;font-weight: bold;}
.section-header h1 {font-size: 57px;margin-top: 15px;line-height: 1.11;font-weight: bold;color: #fff}
.section-header .desc {font-size: 18px;margin-top: 18px;line-height: 1.39;opacity: 0.6;color:#fff;}
.section-header .date {font-size: 17px;margin-top: 18px;font-weight: bold;line-height: 1.47;color:#fff}

.card-items {margin-top: 42px;}

.card-item {
  max-width: 400px;
  height: 85px;
  border-radius: 8px;
  margin: 10px auto 0;
}

.card-item a{
  display: block;
}

.card-item .column-left {
  text-align: left;
  padding-left: 20px;
  height: 86px;
}

.card-item .column-left p {
  display: inline-block;
  vertical-align: middle;
  margin-top: -6px;
}

.card-item .column-left:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.card-item .column-right {
  text-align: right;
  line-height: 86px;
  padding-right: 20px;
  font-weight: bold;
  font-size: 21px;
}
.card-item .column-right {

}

.text-list {
  text-align: left;
  margin: 25px auto 0px;
  max-width: 364px;
  font-size: 14px;
  line-height: 21px;
  opacity: 0.6;
}
.text-list > li:before {
  content: "·";
  margin-left: -8px;
  display: inline-block;
  float: left;
}
.text-list .b {font-weight: bold;padding-bottom: 4px;}

.section-sticker {
  text-align: center;
}
h2.section-sub {
  margin-top: 70px;
  font-size: 22px;
  color: #fff;
}
.section-sub+.desc {
  margin-top: 15px;
  line-height: 21px;
  opacity: 0.6;
  font-size: 15px;
}
.img {
  margin: auto;
  display: block;
}
.img-emoticon {
  max-width: 400px;
  height: 240px;
  margin: 40px auto 0px;
  background: #f7f7f7;
  border-radius: 10px;
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
}

.img-paper {
  width: 100%;
  height: 170px;
  position: relative;
  margin-top: -90px;
}


.img-paper:after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 170px;
  background: url(https://og.kakaobank.io/view/2575c5c8-c788-425e-88c1-d5f04f1ffd22) no-repeat 0 0;
  background-size: 100% 200px;
}

.section-box {
  padding: 0 26px;
  position: relative;
  margin-top: -89px;
}

.section-notice .deliberations {
  color: #888;
}

.section-notice h2 {
  font-size: 18px;
  line-height: 20px;
  font-weight: bold;
  color:#333;
}

.section-notice .text-list {
  line-height: 22px;
  margin:0;
}

.section-notice .text-list:nth-of-type(1) {
  margin: 32px auto 20px;
}
.shares {
  margin-top: 50px;
  padding-bottom: 110px;
  text-align: center;
  font-size: 0;
}
.shares > li {
  display: inline-block;
}
.shares > li+li {
  margin-left: 25px;
}
.shares > li > button {
  width: 68px;
  height: 69px;
  vertical-align: middle;
  border: none;
  background-repeat: no-repeat;
  text-indent: -9999px;
}

.share-kt {
  background: url(https://og.kakaobank.io/view/4cd7d989-6487-4b4e-bfab-155f8b78d5a1);
  width: 68px;
  height: 68px;
  background-size: 68px;
}
.share-fb {
  background: url(https://og.kakaobank.io/view/74dc7e1f-b734-4c08-ae0d-07f9e06129d6);
  width: 68px;
  height: 68px;
  background-size: 68px;
}
.share-tw {
  background: url(https://og.kakaobank.io/view/70f9423b-f6cb-4974-92ac-1bf71ffae59f);
  width: 68px;
  height: 68px;
  background-size: 68px;
}



.is-app {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: -moz-none;
  -o-user-select: none;
  user-select: none;
  -webkit-touch-callout:none;
}

.bottom-btn {
  height: 68px;
  display: block;
  left: 26px;
  right: 26px;
  bottom: 30px;
  margin: auto;
  position: fixed;
  border-radius: 10px;
  background: #ffe100;
  text-decoration: none;
  z-index: 1;
  -webkit-transition: transform 0.5s;
  transition: transform 0.5s;
  -webkit-transform: translateY(100px);
  transform: translateY(100px);
}
.bottom-btn.is-active {
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
}

.btn-text {
  width: 100%;
  height: 70px;
  display: block;
  border-radius: 10px;
  background: #ffe100;
  font-size: 19px;
  font-weight: bold;
  line-height: 68px;
  text-align: center;
  color: #000;
}

.deliberations {
  font-size: 12px;
  line-height: 1.67;
  color: #888;
  margin-top: 10px;
}
.text-list.is-small {
  opacity: 1;
  font-size: 15px;
}
.text-list.is-small > li {
  color: #fff;
  opacity: 0.6;
  padding-left: 16px;
}

.text-list.is-small > li.b {
  color: #fff;
  opacity: 1;

}

.text-list.is-small > li:before {
  content: "·";
  margin: 0px -8px;
  display: inline-block;
  float: left;

}

.text-list.is-big {
  font-size: 19px;
  color: #666;
  line-height: 26px;
  font-weight: bold;
  opacity: 1;
}

.column-left {
  width: 120px;
  float: left;
  font-size: 20px;
  font-weight: bold;
}
.column-left em {
  font-size: 12px;
  margin-bottom: 4px;
  font-weight: bold;
}
.column-left span {
  display: block;
  margin-top: -6px;
  margin-left: -1px;
}
.column-right {
  margin-left: 120px;
}
.column-right span {
  display: inline-block;
  margin-top: 2px;
}

.column-right:after {
  content: "";
  display: inline-block;
  width: 15px;
  height: 25px;
  background: red;
  vertical-align: middle;
  background: url(https://og.kakaobank.io/view/f0306633-b764-4f80-b7e3-466c346ecaed);
  background-size: 15px 25px;
  margin-top: -3px;
}

.card-shinhan .column-right:after,
.card-samsung .column-right:after {
  content: "";
  display: inline-block;
  width: 15px;
  height: 25px;
  background: red;
  vertical-align: middle;
  background: url(https://og.kakaobank.io/view/90498f12-3929-441e-ab8d-d06dc533ab6c);
  background-size: 15px 25px;
}

.card-shinhan {
  background: #94C4DF;
  color: #fff;
}

.card-kb {
  background: #ffd100;
}

.card-citi {
  background: #fff;
}

.card-lotte {
  background: #8cd7c9;
}

.card-samsung {
  background: #014da1;
  color: #fff;
}

.section-bg {
  position: absolute;
  width: 700px;
  height: 450px;
  margin-left:50%;
  -webkit-transform: translateX(-350px);
  transform: translateX(-350px);
  top: 0;
}



.bg-box {
  position: relative;
  height: 450px;
  overflow: hidden;
  margin-bottom: -450px;
  width: 100%;
}

.inner-border {
  border-radius: 8px;
  border: 3px solid rgba(0, 0, 0, 0.048);
  height: 100%;
  margin: 8px;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}

.slide01 {
  background: url(https://og.kakaobank.io/view/c6c4eed0-5ff1-4f12-9c78-fe51d04e77d8);
  background-size: 290px 200px;
  width: 290px;
  height: 200px;
  position: absolute;
  left: 50%;
  right: 0;
  bottom: 10px;
  margin-left: -145px;
  -webkit-transform: translateX(150%);
  transform: translateX(150%);
  -webkit-animation: slide01 6s linear infinite;
  animation: slide01 6s linear infinite;
}

.slide02 {
  background: url(https://og.kakaobank.io/view/b6081ac0-9315-4762-a2d0-f97a8aaa469c);
  background-size: 290px 200px;
  width: 290px;
  height: 200px;
  position: absolute;
  right:0;
  left: 50%;
  bottom:10px;
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  -webkit-animation: slide02 6s linear infinite;
  animation: slide02 6s linear infinite;
}

.slide03 {
  background: url(https://og.kakaobank.io/view/7e5f3876-72cc-40ec-8440-68ef82735f11);
  background-size: 290px 200px;
  width: 290px;
  height: 200px;
  position: absolute;
  right:0;
  left: 50%;
  bottom:10px;
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  -webkit-animation: slide03 6s linear infinite;
  animation: slide03 6s linear infinite;
}

.section-notice {
  padding-bottom: 170px;
}

.section-notice .section-box {
  margin-top:-50px;
}

@-webkit-keyframes slide01 {
  0% {-webkit-transform: translateX(150%)}
  5% {-webkit-transform: translateX(0%)}
  28% {-webkit-transform: translateX(0%)}
  33% {-webkit-transform: translateX(-150%)}
  100% {-webkit-transform: translateX(-150%)}
}

@-webkit-keyframes slide02 {
  0% {-webkit-transform: translateX(100%)}
  33% {-webkit-transform: translateX(100%)}
  38% {-webkit-transform: translateX(-50%)}
  61% {-webkit-transform: translateX(-50%)}
  66% {-webkit-transform: translateX(-200%)}
  100% {-webkit-transform: translateX(-200%)}
}

@-webkit-keyframes slide03 {
  0% {-webkit-transform: translateX(100%)}
  66% {-webkit-transform: translateX(100%)}
  71% {-webkit-transform: translateX(-50%)}
  94% {-webkit-transform: translateX(-50%)}
  99% {-webkit-transform: translateX(-200%)}
  100% {-webkit-transform: translateX(-200%)}
}

@keyframes slide01 {
  0% {transform: translateX(150%)}
  5% {transform: translateX(0%)}
  28% {transform: translateX(0%)}
  33% {transform: translateX(-150%)}
  100% {transform: translateX(-150%)}
}

@keyframes slide02 {
  0% {transform: translateX(100%)}
  33% {transform: translateX(100%)}
  38% {transform: translateX(-50%)}
  61% {transform: translateX(-50%)}
  66% {transform: translateX(-200%)}
  100% {transform: translateX(-200%)}
}

@keyframes slide03 {
  0% {transform: translateX(100%)}
  66% {transform: translateX(100%)}
  71% {transform: translateX(-50%)}
  94% {transform: translateX(-50%)}
  99% {transform: translateX(-200%)}
  100% {transform: translateX(-200%)}
}



.columns,
.columns:active,
.columns:focus,
.columns:hover,
.columns:visited {
  text-decoration: none;
  color: inherit;
  border: none;
}

.alert {
  position: fixed;
  left:0;
  right:0;
  top:0;
  bottom: 0;
  background: rgba(17, 17, 17, 0.6);
  z-index: 1;
}

.alert.is-active {
  display: block;
}

.alert-box {
  position: absolute;
  text-align: center;
  max-width: 320px;
  height: 173px;
  background: #ffffff;
  border-radius: 5px;
  left: 24px;
  right: 24px;
  top: 0;
  margin: auto;
  bottom: 0;
  padding: 40px 24px 50px;
  box-sizing: border-box;
  color: #000;
}

.alert-box p {
  font-size: 20px;
  line-height: 25px;
  font-weight: bold;
  margin-bottom: 14px;
}

.alert-box span {
  font-size: 15px;
  color: #666;
}

.ir {text-indent: -9999px;
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;}

.ico-alert-close {
  background: url(https://og.kakaobank.io/view/ccfbaca2-cc0b-43cf-a427-52844816cc16);
  background-size: 13px 13px;
  width: 13px;
  height: 13px;
  position: absolute;
  right: 15px;
  top: 15px;
  border: none;
}

.img-alert-text {
  position: absolute;
  left: 0;
  right:0;
  top: 0;
  bottom: 0;
  margin: auto;
  background: url(https://og.kakaobank.io/view/a4b18b30-3043-47b2-940d-f411561a1770);
  background-size: 149px 52px;
  width: 149px;
  height: 52px;
}

.nobtn .bottom-btn {
  display: none;
}
.nobtn .section-notice {
  padding-bottom: 60px;
}


.card-items .card-item {
  -webkit-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  /*-webkit-transform-style: preserve-3d;*/
  /*transform-style: preserve-3d;*/

  -webkit-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
}
.active .card-items .card-item {
  -webkit-animation: swing 0.7s linear forwards;
  animation: swing 0.7s linear forwards;
}
.card-items>.card-item:nth-child(2) {
  -webkit-animation-delay: 450ms;
  animation-delay: 450ms;
}
.card-items>.card-item:nth-child(3) {
  -webkit-animation-delay: 900ms;
  animation-delay: 900ms;
}
.card-items>.card-item:nth-child(4) {
  -webkit-animation-delay: 1350ms;
  animation-delay: 1350ms;
}


.card-item2 {
  max-width: 324px;
  border-radius: 8px;
  margin: 10px auto 0;
  padding: 25px 20px 20px;
}

.card-item2 a {
  display: block;
  height: 60px;
  line-height: 60px;
  border-radius: 8px;
  font-size: 18px;
  font-weight: bold;
}
.card-item2.card-samsung a {
  background:#105eb3;
  color: #fff;
}
.card-item2.card-lotte {
  background: #8cd7c9;
}
.card-item2.card-lotte a {
  background:#b2e1d8;
  color: #000;
}
.card-item2.card-citi {
  background: #e0e2ef;
}
.card-item2.card-citi a {
  background:#eef0fe;
  color: #000;
}
.card-item2.card-kb {
  background: #f4c500;
}
.card-item2.card-kb a {
  background:#ffd52d;
  color: #000;
}
.card-item2.card-shinhan {
  background: #7cc5ee;
}
.card-item2.card-shinhan a {
  background:#8cd3fb;
  color: #fff;
}
.card-item2.card-shinhan a:after,
.card-item2.card-samsung a:after{
  content: "";
  display: inline-block;
  width: 15px;
  height: 25px;
  vertical-align: middle;
  margin-top: -2px;
  background: url(https://og.kakaobank.io/view/90498f12-3929-441e-ab8d-d06dc533ab6c);
  background-size: 15px 25px;
}
.card-item2.card-lotte a:after,
.card-item2.card-citi a:after,
.card-item2.card-kb a:after{
  content: "";
  display: inline-block;
  width: 15px;
  height: 25px;
  vertical-align: middle;
  margin-top: -2px;
  background: url(https://og.kakaobank.io/view/f0306633-b764-4f80-b7e3-466c346ecaed);
  background-size: 15px 25px;
}

.card-item2 .columns {
  margin-bottom: 32px;
}

.card-item2 .column-left {
  text-align: left;
  /* padding-left: 20px; */
  height: 58px;
}

.card-item2 .column-left p {
  display: inline-block;
  vertical-align: middle;
  margin-top: -6px;
}

.card-item2 .column-left:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.card-item2 .column-right {
  text-align: right;
  position: relative;
  font-weight: bold;
  font-size: 21px;
  vertical-align: middle;
  font-size: 0;
}

.card-item2 .column-right:after {
  content: none;
}

.card-item2 .column-right:after,
.card-item2.card-shinhan .column-right:after,
.card-item2.card-citi .column-right:after,
.card-item2.card-samsung .column-right:after {
  content: none;
}



@-webkit-keyframes swing {
  0%{
    -webkit-transform:scaleY(0);
  }
  30%{
    -webkit-transform:scaleY(1);
  }
  55%{
    -webkit-transform: scaleY(0.8);
  }
  80%{
    -webkit-transform:scaleY(1);
  }
  100%{
    -webkit-transform:scaleY(1);
  }
}

@keyframes swing {
  0%{
    transform:scaleY(0);
  }
  30%{
    transform:scaleY(1);
  }
  55%{
    transform: scaleY(0.8);
  }
  80%{
    transform:scaleY(1);
  }
  100%{
    transform:scaleY(1);
  }
}

.jan .section-bg {background: url(https://og.kakaobank.io/view/ab2ab256-4e74-4799-ad74-f11531cc73f6);background-size: 700px 450px;}
.jan .section-header {background: #6cb9e3;}
.jan .section-header h2 {color: #186a9e;}
.jan .section-header h2.section-sub {color: #fff;}

.feb .section-bg {background: url(https://og.kakaobank.io/view/d282b568-5f61-4e4f-be40-889d386d5ae1);background-size: 700px 450px;}
.feb .section-header {background: #5c3b0e;}
.feb .section-header h2 {color: #ffe100;}
.feb .section-header h2.section-sub {color: #fff;}

.mar .section-bg {background: url(https://og.kakaobank.io/view/d91dc504-ef54-4f52-aecf-b188fa8114d3);background-size: 700px 450px;}
.mar .section-header {background: #5fa430;}
.mar .section-header h2 {color: #ffe100;}
.mar .section-header h2.section-sub {color: #fff;}

.apr .section-bg {background: url(https://og.kakaobank.io/view/3d2a7e9b-9806-447d-b8b6-166d0d2cb04b);background-size: 700px 450px;}
.apr .section-header {background: #f0627e;}
.apr .section-header h2 {color: #8d2b3f;}
.apr .section-header h2.section-sub {color: #fff;}

.may .section-bg {background: url(https://og.kakaobank.io/view/3592fca9-c9dc-45a6-a630-78c33c0c4923);background-size: 700px 450px;}
.may .section-header {background: #415fac;}
.may .section-header h2 {color: #f8b7bd;}
.may .section-header h2.section-sub {color: #fff;}

.jun .section-bg {background: url(https://og.kakaobank.io/view/02dc2899-bfad-4571-961a-95bd33c0c983);background-size: 700px 450px;}
.jun .section-header {background: #46bdc5;}
.jun .section-header h2 {color: #00516c;}
.jun .section-header h2.section-sub {color: #fff;}

.jul .section-bg {background: url(https://og.kakaobank.io/view/2ab6c364-8fa8-43a9-867c-bf54514fddff);background-size: 700px 450px;}
.jul .section-header {background: #009251;}
.jul .section-header h2 {color: #ffe100;}
.jul .section-header h2.section-sub {color: #fff;}

.aug .section-bg {background: url(https://og.kakaobank.io/view/c6185cad-0280-403c-a30a-b65bdccbd83b);background-size: 700px 450px;}
.aug .section-header {background: #0a8cdd;}
.aug .section-header h2 {color: #003e65;}
.aug .section-header h2.section-sub {color: #fff;}

.sep .section-bg {background: url(https://og.kakaobank.io/view/98c3752c-c4ce-463b-b86b-44252a34dee9);background-size: 700px 450px;}
.sep .section-header {background: #eb834c;}
.sep .section-header h2 {color: #74391a;}
.sep .section-header h2.section-sub {color: #fff;}

.oct .section-bg {background: url(https://og.kakaobank.io/view/0c30f49e-aac1-4c06-8c32-5a1af96957ae);background-size: 700px 450px;}
.oct .section-header {background: #333b58;}
.oct .section-header h2 {color: #ffe100;}
.oct .section-header h2.section-sub {color: #fff;}

.nov .section-bg {background: url(https://og.kakaobank.io/view/f4f632f0-6139-4235-8c7d-29122dd9152a);background-size: 700px 450px;}
.nov .section-header {background: #f69f37;}
.nov .section-header h2 {color: #8a430c;}
.nov .section-header h2.section-sub {color: #fff;}

.dec .section-bg {background: url(https://og.kakaobank.io/view/4c82feef-35d6-4e2b-822f-509dd5915667);background-size: 700px 450px;}
.dec .section-header {background: #249e64;}
.dec .section-header h2 {color: #ffe100;}
.dec .section-header h2.section-sub {color: #fff;}
.slide-box {
  padding: 0 26px;
}


@media (max-width: 330px) {
  .slide-box, .section-box {padding: 0 16px;}
  .bottom-btn {left: 16px; right: 16px;}
}

@-webkit-media (max-width: 330px) {
  .slide-box, .section-box {padding: 0 16px;}
  .bottom-btn {left: 16px; right: 16px;}
}


/* 접근성 분기처리 */
.accessibility .section-header .desc {opacity:1;}
.accessibility .text-list.is-small > li {opacity:1;}
.accessibility .section-sub+.desc {opacity:1;}
.accessibility .card-shinhan {background:#4d9dcb;}