@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;
}

.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: 400px;
  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/02d87233-368c-49c9-9a1b-3632f4868668) 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;
  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/db44873d-922a-4fe1-87e4-a14d1f1fd8f1);
  width: 68px;
  height: 68px;
  background-size: 68px;
}
.share-fb {
  background: url(https://og.kakaobank.io/view/00d2eef2-3a19-4267-b3bb-9e3f15a87ed4);
  width: 68px;
  height: 68px;
  background-size: 68px;
}
.share-tw {
  background: url(https://og.kakaobank.io/view/42e20616-0568-4f6a-88ee-ff03fb7fb9cb);
  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/13474fb6-3f2c-4158-b551-8a668b56f384);
  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/f8573c8a-ba54-41c8-ba5c-a37db45daaaa);
  background-size: 15px 25px;
}

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

.card-kb {
  background: #ffd100;
}

.card-citi {
  background: #fff;
}

.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/f4a01412-48e4-4705-bd0b-f454ad3a4e6c);
  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/05dab57f-0140-47a0-a057-b6917b90e26e);
  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/6dc0cfa6-6e0a-4f38-97bc-722debc61040);
  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;
}

.slide04 {
  background: url(https://og.kakaobank.io/view/6ca9e77e-d073-4710-9521-da83b5341e6c);
  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: slide04 6s linear infinite;
  animation: slide04 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%)}
  20% {-webkit-transform: translateX(0%)}
  25% {-webkit-transform: translateX(-150%)}
  100% {-webkit-transform: translateX(-150%)}
}

@-webkit-keyframes slide02 {
  0% {-webkit-transform: translateX(100%)}
  25% {-webkit-transform: translateX(100%)}
  30% {-webkit-transform: translateX(-50%)}
  45% {-webkit-transform: translateX(-50%)}
  50% {-webkit-transform: translateX(-200%)}
  100% {-webkit-transform: translateX(-200%)}
}

@-webkit-keyframes slide03 {
  0% {-webkit-transform: translateX(100%)}
  50% {-webkit-transform: translateX(100%)}
  55% {-webkit-transform: translateX(-50%)}
  70% {-webkit-transform: translateX(-50%)}
  75% {-webkit-transform: translateX(-200%)}
  100% {-webkit-transform: translateX(-200%)}
}

@-webkit-keyframes slide04 {
  0% {-webkit-transform: translateX(100%)}
  75% {-webkit-transform: translateX(100%)}
  80% {-webkit-transform: translateX(-50%)}
  95% {-webkit-transform: translateX(-50%)}
  100% {-webkit-transform: translateX(-200%)}
}

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

@keyframes slide02 {
  0% {transform: translateX(100%)}
  25% {transform: translateX(100%)}
  30% {transform: translateX(-50%)}
  45% {transform: translateX(-50%)}
  50% {transform: translateX(-200%)}
  100% {transform: translateX(-200%)}
}

@keyframes slide03 {
  0% {transform: translateX(100%)}
  50% {transform: translateX(100%)}
  55% {transform: translateX(-50%)}
  70% {transform: translateX(-50%)}
  75% {transform: translateX(-200%)}
  100% {transform: translateX(-200%)}
}

@keyframes slide04 {
  0% {transform: translateX(100%)}
  75% {transform: translateX(100%)}
  80% {transform: translateX(-50%)}
  95% {transform: translateX(-50%)}
  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(0,0,0,0.3);
  display: none;
}

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

.alert-box {
  position: absolute;
  width: 287px;
  height: 162px;
  background: #ffe400;
  border-radius: 10px;
  left: 0;
  right: 0;
  top: 0;
  margin: auto;
  bottom: 0;
}

.ir {text-indent: -9999px;
  position: absolute;
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;}

.ico-alert-close {
  background: url(https://og.kakaobank.io/view/7105f3e1-bf6c-438c-a5ee-653cf4f61047);
  background-size: 20px 20px;
  width: 20px;
  height: 20px;
  position: absolute;
  right: 18px;
  top: 16px;
  border: none;
}

.img-alert-text {
  position: absolute;
  left: 0;
  right:0;
  top: 0;
  bottom: 0;
  margin: auto;
  background: url(https://og.kakaobank.io/view/c8ad7665-816a-4945-b89b-65672bc4b4d0);
  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;
}


@-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/7020dcdf-dabc-41ca-a600-a3eb0be71d2c);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/f02a8a2a-b5ee-4660-8116-ac9f391c66f2);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/f7eedf74-e781-4eb7-9bd6-48a739034acc);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/b83a1afb-f772-45af-bbe4-1bd2c272af9c);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/e000cee1-a820-4b01-9ec8-e4db03238446);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/c47e66d0-e3f2-42fd-96fc-ee6c47847188);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/83c25e92-2cf5-45cf-a896-d0a05984867d);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/deb8e456-5ac2-40db-a4ba-bad7f964b45a);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/a6510750-dd2e-47e0-802f-743865552829);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/a8ccacc6-0189-44c9-bdb6-1b6ab940c359);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/ebdf9b8f-345f-4944-89fd-936ff1809422);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/decf548b-9fa1-479d-94c0-6a24f1860daf);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;}