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

.ir{
	display: block;
	overflow: hidden;
	color: transparent;
	white-space: nowrap;
}
/*.screen-out{overflow:hidden;position:absolute;width:0;height:0;line-height:0;text-indent:-9999px}*/
.screen-out{
	position: absolute;
	clip: rect(0 0 0 0);
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
}
.hide{display:none}
body {
	background-color: #3e4f92;
}
.kabang-header .jumbotron {
	padding: 36px 0 0 0;
	text-align: center;
}
.kabang-header .eyes {
	width: 172px;
	height: 108px;
	margin: 0 auto 10px;
	padding: 23px 0 0 0;
	background: url(https://og.kakaobank.io/view/3b88ace9-704d-404a-b917-e4dc422a8bd9) no-repeat 0 0;
	background-size: 172px 108px;
	text-align: center;
	box-sizing: border-box;
}
.jumbotron .tit {
	margin: 0 0 10px 0;
	font-size: 29px;
	font-weight: bold;
	line-height: 1.48;
	text-align: center;
	color: #fff;
}
.jumbotron .desc {
	margin: 0 0 40px 0;
	font-size: 16px;
	line-height: 1.63;
	text-align: center;
	color: #fff;
	opacity: 0.6;
}
.kabang-header .flow-contents {
	overflow: hidden;
	width: 100%;
	margin: 0 0 100px 0;
	background: url(https://og.kakaobank.io/view/d8446376-f425-44e3-9e62-1f2feab7b96b) repeat-x 0 0;
	background-size: 712px 97px;
}
.kabang-header .flow-contents .flow-contents-inner {
	overflow: hidden;
	width: 100%;
	height: 194px;
	background: url(https://og.kakaobank.io/view/828a5fb0-1fff-47f6-8d45-d812ee908e45) repeat-x 86px 97px;
	background-size: 712px 97px;
}
.flow-contents .item {
	width: 200%;
	min-width: 1424px;
	height: 97px;
	display: block;
	overflow: hidden;
	color: transparent;
	white-space: nowrap;
	animation: slideBrand 16s linear infinite;
	-webkit-animation: slideBrand 16s linear infinite;
	transform: translateZ(0);
	-webkit-transform: translateZ(0);
}
.flow-contents .item1 {
	background: #3e4f92 url(https://og.kakaobank.io/view/d8446376-f425-44e3-9e62-1f2feab7b96b) repeat-x 0 0;
	background-size: 712px 97px;
}
.flow-contents .item2 {
	background: #3e4f92 url(https://og.kakaobank.io/view/828a5fb0-1fff-47f6-8d45-d812ee908e45) repeat-x 86px 0;
	background-size: 712px 97px;
}
@-webkit-keyframes slideBrand {
	from {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
	to {
		-webkit-transform: translateX(-712px);
		transform: translateX(-712px);
	}
}
@keyframes slideBrand {
	from {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
	to {
		-webkit-transform: translateX(-712px);
		transform: translateX(-712px);
	}
}

.section {
	max-width: 375px;
	margin: 0 auto;
	padding: 0 15px;
	text-align: center;
}
.section .new {
	margin: 0 auto 24px;
}
.section .tit {
	margin: 0 0 14px 0;
	font-size: 27px;
	font-weight: bold;
	line-height: 1.37;
	text-align: center;
	color: #fff;
}
.section .desc {
	margin: 0 0 40px 0;
	font-size: 16px;
	line-height: 1.63;
	text-align: center;
	color: #fff;
	opacity: 0.6;
}
.img {display: block;font-size: 0; color: rgba(0,0,0,0);}
.img-phone {position: relative;width:240px;height: 480px;border-radius: 26px;margin: auto;box-shadow: 16px 36px 40px 6px rgba(0,0,0,0.13);box-sizing: border-box;-webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;}
.shadow {box-shadow: 16px 36px 40px 6px rgba(0,0,0,0.13);}
.screen {height: 100%;position: relative;background: #f4f4f4;border-radius: 26px;overflow: hidden; transform:translateZ(0);}
.screen-page {
	border-radius: 26px;
	/*border-top-left-radius: 26px;*/
	/*border-top-right-radius: 26px;*/
	overflow: hidden; -webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;position: relative;width:100%;height: 100%;

}
.section1 {
	margin-bottom: 100px;
}
.img-phone03 .item03 {background: url(https://og.kakaobank.io/view/d936fe70-6a72-40c7-b4c2-0d7f2ec6b02f);background-size: 40px 15px; width: 40px;height: 15px;margin: 52px 0px 20px 16px;}
.img-phone03 .toggle {width: 76px;height:19px;margin: 0px 0px 13px 16px;position: relative;}
.img-phone03 .item06 {border-radius: 19px;position: absolute;top:1px;left:0px;height:19px;width:40px;background: #333;-webkit-transform:translateX(0px);transform:translateX(0px);}
.is-active .img-phone03 .item06 {-webkit-transition:-webkit-transform 1s, width 1s;transition:transform 1s, width 1s;-webkit-transform:translateX(81px);transform:translateX(81px);width:45px;
	-webkit-transition-delay:2s;transition-delay:2s;}
.img-phone03 .item04 {background: url(https://og.kakaobank.io/view/49067dc3-64e3-47e7-abe9-7752a49ae9f1);background-size:127px 19px;width:127px; height: 19px;position: absolute;left:0;top:0;bottom:0;margin: auto;opacity: 1;}
.img-phone03 .item05 {background: url(https://og.kakaobank.io/view/ec1e2054-2661-4f5c-9a98-d38009f9c21c);background-size:127px 19px;width:127px; height: 19px;position: absolute;left:0;top:0;bottom:0;margin: auto;opacity: 0;}
.is-active .img-phone03 .item04 {-webkit-transition:opacity 1s;transition:opacity 1s;opacity: 0;-webkit-transition-delay:2s;transition-delay:2s;}
.is-active .img-phone03 .item05 {-webkit-transition:opacity 1s;transition:opacity 1s;opacity: 1;-webkit-transition-delay:2s;transition-delay:2s;}
.img-phone03 .screen-page {background: #f4f4f4;}
.img-phone03 .screen-page1 {background: url(https://og.kakaobank.io/view/84d1f38e-0ace-401e-9038-a8c99e0c0563);background-size: 240px 480px;}
.img-phone03 .screen-page2 {position: absolute;left: 0; top: 480px;border-radius: 24px;overflow: hidden; -webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;}
.is-active .img-phone03 .screen-page2 {-webkit-transition: -webkit-transform 1s;transition: transform 1s;-webkit-transform: translateY(-480px);transform: translateY(-480px);-webkit-transition-delay:0.8s;transition-delay:0.8s;}

.img-phone03 .item01 {position: absolute;bottom:38px;left:0;width:240px;height:324px;background: url(https://og.kakaobank.io/view/791eb46d-811a-4c3d-a93c-5b1dcd906263);background-size: 240px 324px;}
.img-phone03 .item02 {position: absolute;bottom:38px;left:100%;width:240px;height:324px;background: url(https://og.kakaobank.io/view/6a5cb57b-8cd1-4fde-91a2-2b381fbac8c4);background-size: 240px 324px;}
.img-phone03 .dim {position: absolute;left: 0;right: 0;top: 0;bottom: 0;background: #000;opacity: 0;}
.img-phone03 .screen-page1 .select {position: absolute;left: 80px;top: 60px;width: 66px;height: 64px;background: url(https://og.kakaobank.io/view/be786512-0e4c-4661-8e34-99150eabe698);background-size: 66px 64px;opacity:0;}
.is-active .img-phone03 .screen-page1 .select  {opacity: 1;-webkit-transition: opacity 0.2s;transition: opacity 0.2s;-webkit-transition-delay:0.5s;transition-delay:0.5s;
	-webkit-animation: click 1s forwards;animation: click 1s forwards;-webkit-animation-delay: 0.5s;animation-delay: 0.5s;}
.img-phone03 .screen-page2 .select {position: absolute;left: 130px;top: 102px;z-index:10;width: 66px;height: 64px;background: url(https://og.kakaobank.io/view/be786512-0e4c-4661-8e34-99150eabe698);background-size: 66px 64px;opacity:0;}
.is-active .img-phone03 .screen-page2 .select  {opacity: 1;-webkit-transition: opacity 0.2s;transition: opacity 0.2s;-webkit-transition-delay:1.7s;transition-delay:1.7s;
	-webkit-animation: click 1s forwards;animation: click 1s forwards;-webkit-animation-delay: 1.7s;animation-delay: 1.7s;}
.is-active .img-phone03 .dim {border-radius: 26px;opacity: 0.6;-webkit-transition: opacity 1s;transition: opacity 1s;-webkit-transition-delay:1.2s;transition-delay:1.2s;-webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;}
.is-active .img-phone03 .item01,
.is-active .img-phone03 .item02{-webkit-transition: -webkit-transform 1s;transition: transform 1s;-webkit-transform: translateX(-240px);transform: translateX(-240px);
	-webkit-transition-delay:2s;transition-delay:2s;}

.section2 {
	margin-bottom: 100px;
}
/*.img-phone04 .screen-page {background: #f4f4f4;}*/
.img-phone04 .screen {background: none;}
.img-phone04 .screen-page1 {background: url(https://og.kakaobank.io/view/539f83ba-7dfb-40ae-bd64-3a9d969e90d5);background-size: 240px 480px;}
.img-phone04 .screen-page2 {position: absolute;left: 0; top: 480px;background: url(https://og.kakaobank.io/view/5520f320-0273-4b7a-9f86-c222706a0edf);background-size: 240px 412px;border-radius: 24px;overflow: hidden; -webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;}
.img-phone04 .dim {position: absolute;left: 0;right: 0;top: 0;bottom: 0;background: #000;opacity: 0;}
.section2 .screen-page1 .select {
	position: absolute;
	left: 167px;
	top: 220px;
	width: 66px;
	height: 64px;
	background: url(https://og.kakaobank.io/view/be786512-0e4c-4661-8e34-99150eabe698);
	background-size: 66px 64px;
	opacity:0;
}
.section2.is-active .screen-page1 .select  {
	opacity: 1;
	-webkit-transition: opacity 0.2s;
	transition: opacity 0.2s;
	-webkit-transition-delay:0.5s;
	transition-delay:0.5s;
	-webkit-animation: click 1s forwards;
	animation: click 1s forwards;
	-webkit-animation-delay: 0.5s;
	animation-delay: 0.5s;
}
.section2.is-active .img-phone04 .dim {
	border-radius: 26px;
	opacity: 0.5;
	-webkit-transition: opacity 1s;
	transition: opacity 1s;
	-webkit-transition-delay:1.2s;
	transition-delay:1.2s;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
}
.section2 .screen-page2 {
	height: 412px;
}
.section2 .select-move {
	position: absolute;
	left: 36px;
	top: 280px;
	width: 66px;
	height: 64px;
	background: url(https://og.kakaobank.io/view/be786512-0e4c-4661-8e34-99150eabe698);
	background-size: 66px 64px;
	opacity: 0;
	transform-origin: center center;
}
.section2 .button {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 240px;
	height: 48px;
	background: url(https://og.kakaobank.io/view/19fbc10b-b969-4a01-873c-48a7f29a05bb);
	background-size: 240px 48px;
	opacity: 0;
	-webkit-transition: opacity 0s;
	transition: opacity 0s;
	-webkit-transition-delay: 2.5s;
	transition-delay: 2.5s;
}
.section2.is-active .button {
	opacity: 1;
}
.section2 .txt-money {
	position: absolute;
	top: 127px;
	left: 65px;
	width: 110px;
	height: 26px;
	background: url(https://og.kakaobank.io/view/443d4883-10b5-4688-a5ef-22cd4315d069);
	background-size: 110px 26px;
}
.section2 .won {
	position: absolute;
	top: 127px;
	left: 0;
	width: 100%;
	text-align: center;
	background: #fff;
}
.section2 .won .num {
	display: inline-block;
}
.section2 .won1 {
	opacity: 0;
	-webkit-transition: opacity 0s;
	transition: opacity 0s;
	-webkit-transition-delay: 2.5s;
	transition-delay: 2.5s;
}
.section2.is-active .won1 {
	opacity: 1;
}
.section2 .txt-won {
	display: inline-block;
	width: 20px;
	height: 26px;
	background: url(https://og.kakaobank.io/view/64692cde-d660-4cfe-887e-1b4356c4190c);
	background-size: 20px 26px;
}
.section2 .won1 .num1 {
	width: 10px;
	height: 26px;
	background: url(https://og.kakaobank.io/view/c5dfe3a7-a0c7-4fd5-baf3-28b30293c76e);
	background-size: 10px 26px;
}
.section2 .won100 {
	opacity: 0;
	-webkit-transition: opacity 0s;
	transition: opacity 0s;
	-webkit-transition-delay: 3.1s;
	transition-delay: 3.1s;
}
.section2.is-active .won100 {
	opacity: 1;
}
.section2 .won100 .num100 {
	width: 46px;
	height: 26px;
	background: url(https://og.kakaobank.io/view/c87abaaa-9765-4408-aede-e8e418a6b752);
	background-size: 46px 26px;
}
.section2 .won10000 {
	opacity: 0;
	-webkit-transition: opacity 0s;
	transition: opacity 0s;
	-webkit-transition-delay: 3.4s;
	transition-delay: 3.4s;
}
.section2.is-active .won10000 {
	opacity: 1;
}
.section2 .won10000 .num10000 {
	width: 90px;
	height: 26px;
	background: url(https://og.kakaobank.io/view/32be7948-16ba-448f-989f-78f95b93e072);
	background-size: 90px 26px;
}
.section2 .success {
	position: absolute;
	top: 137px;
	left: 24px;
	width: 193px;
	height: 206px;
	background: url(https://og.kakaobank.io/view/aec6d52d-0e4e-4704-8099-0dbfec3d7e81);
	background-size: 193px 206px;
	opacity: 0;
	text-align: center;
}
.section2 .success .circle {
	position: absolute;
	top: 20px;
	left: 50%;
	z-index: 10;
	width: 42px;
	height: 42px;
	margin-left: -21px;
	border-radius: 50%;
	background: #f7e035;
}
.section2 .success .check {
	position: absolute;
	top: 20px;
	left: 50%;
	z-index: 20;
	margin-left: -21px;
}

@-webkit-keyframes click {
	0% { -webkit-transform: scale(1); }
	30% { -webkit-transform: scale(1); }
	45% { -webkit-transform: scale(0.9); }
	65% { -webkit-transform: scale(1); }
	100% { -webkit-transform: scale(1); }
}
@keyframes click {
	0% { transform: scale(1); }
	30% { transform: scale(1); }
	45% { transform: scale(0.9); }
	65% { transform: scale(1); }
	100% { transform: scale(1); }
}

.kabang-footer {
	max-width: 375px;
	margin: 0 auto;
	padding: 0 15px 100px;
}
.kabang-footer .desc-serial {
	opacity: 0.8;
	font-size: 12px;
	line-height: 1.58;
	color: #ffffff;
}
.kabang-footer .sns-share {
	padding: 0 0 50px 0;
	text-align: center;
}
.kabang-footer .sns-share .link {
	display: inline-block;
	margin: 0 0 0 15px;
}
.kabang-footer .sns-share .link:first-child {
	margin-left: 0;
}
.kabang-footer .btn-wrap {
	width: 100%;
	padding: 0 12px;
	box-sizing: border-box;
	position: fixed;
	bottom: 12px;
	left: 0;
	z-index: 20;
	transition: transform 0.3s;
	-webkit-transition: -webkit-transform 0.3s;
}
.kabang-footer .link-apply {
	display: block;
	width: 100%;
	height: 60px;
	border-radius: 10px;
	background-color: #ffe92c;
	padding: 20px 0 0;
	box-sizing: border-box;

	font-size: 17px;
	font-weight: bold;
	text-align: center;
	color: #111111;
}

/* sprite svg */
.sprite-ico-120-share-01 {
	background: url("https://og.kakaobank.io/view/e8d661fe-f5e1-436f-b132-f4c4dfeb1ac8") 0 0 no-repeat;
	width: 65.5px;
	height: 65px;
}

.sprite-ico-120-share-02 {
	background: url("https://og.kakaobank.io/view/e8d661fe-f5e1-436f-b132-f4c4dfeb1ac8") 100% 0 no-repeat;
	width: 64.5px;
	height: 64px;
}

.sprite-ico-120-share-03 {
	background: url("https://og.kakaobank.io/view/e8d661fe-f5e1-436f-b132-f4c4dfeb1ac8") 0 100% no-repeat;
	width: 64.5px;
	height: 64px;
}

.sprite-new-y {
	background: url("https://og.kakaobank.io/view/e8d661fe-f5e1-436f-b132-f4c4dfeb1ac8") 98.47328244274809% 68.42105263157895% no-repeat;
	width: 64.5px;
	height: 34px;
}