@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;}
.inline-block {display: inline-block;}
.screen-out{
  position: absolute;
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
}

html, body {padding: 0;margin: 0;height: 100%;}
body.locked {overflow: hidden; -webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;}

.img {display: block;font-size: 0; color: rgba(0,0,0,0);}
h1 {font-size: 46px; color: #111;line-height: 65px;font-weight: bold;}
h2 {font-size: 30px; color: #111;}
p {font-size: 15px;color: #888;line-height: 24px;margin-bottom: 60px;}
b {color: #111;font-weight: bold;}
.section {background: #f9f8f7;box-sizing: border-box;position: relative; z-index: 1;}
.section-content {max-width: 500px;margin: auto;overflow: hidden; -webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;padding: 0px 30px;}
.img-phone {width:240px;height: 480px;background: #fff;border-radius: 26px;margin: auto;box-shadow: 16px 36px 40px 6px rgba(0,0,0,0.13);box-sizing: border-box;overflow: hidden; -webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;-webkit-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0);}
.shadow {box-shadow: 16px 36px 40px 6px rgba(0,0,0,0.13);}
.screen {height: 100%;position: relative;height:100%;background: #f4f4f4;border-radius: 26px;overflow: hidden; -webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;-webkit-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0);}

/* section-header */
.section-header {height: 200%; min-height: 600px; overflow: hidden; -webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;position: relative;background: #fede22;text-align: center;padding-top: 120px;}
.header-title {width: 200px; height: 185px;background: url(https://og.kakaobank.io/view/58a841ce-2483-4989-a801-8330d3ecd790);background-size: 200px 185px;margin: auto;position: relative;}
.img-version {width: 182px;height: 176px;margin:-30px auto 96px;}
.img-phone01 {margin-bottom: 130px;position: relative;-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}
.img-phone01 .inline-block {-webkit-transform: translateY(0px);transform: translateY(0px);opacity: 1;}
.img-phone01 .screen {overflow: hidden; -webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;padding-bottom: 46px; box-sizing: border-box;background: #fff;}
.img-phone01 .item01 {background: url(https://og.kakaobank.io/view/6c86068c-563c-42b0-b742-e95ca470a489); width:240px; height: 30px;background-size: 240px 30px;margin:45px auto 0px;}
.img-phone01 .item02 {background: url(https://og.kakaobank.io/view/39547931-faae-488f-af22-711d43afea12); width:217px; height: 128px;box-shadow:1px 2px 4px 0 rgba(0, 0, 0, 0.15);background-size: 217px 128px;margin: 10px auto 0px;border-radius: 6px;overflow: hidden; -webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;opacity: 0;-webkit-transition: opacity 0.8s, -webkit-transform 0.8s;transition: opacity 0.8s, transform 0.8s;-webkit-transform: translateY(20px);transform: translateY(20px);-webkit-transition-delay: 0.3s;transition-delay: 0.3s;}
.img-phone01 .item03 {background: url(https://og.kakaobank.io/view/9489475a-5ee7-44d8-a1d9-33f411e6cb69); width:217px; height: 64px;box-shadow:1px 2px 4px 0 rgba(0, 0, 0, 0.15);background-size: 217px 64px;margin: 6px auto;opacity: 0;border-radius: 6px;overflow: hidden; -webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;-webkit-transition: opacity 0.8s, -webkit-transform 0.8s;transition: opacity 0.8s, transform 0.8s;-webkit-transform: translateY(20px);transform: translateY(20px);-webkit-transition-delay: 0.6s;transition-delay: 0.6s;}
.img-phone01 .item04 {background: url(https://og.kakaobank.io/view/9596ff68-20fe-403b-ada2-60d34b63d12b); width:217px; height: 80px;box-shadow:1px 2px 4px 0 rgba(0, 0, 0, 0.15);background-size: 217px 80px;margin: 6px auto;opacity: 0;border-radius: 6px;overflow: hidden; -webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;-webkit-transition: opacity 0.8s, -webkit-transform 0.8s;transition: opacity 0.8s, transform 0.8s;-webkit-transform: translateY(20px);transform: translateY(20px);-webkit-transition-delay: 0.9s;transition-delay: 0.9s;}
.img-phone01 .item05 {background: url(https://og.kakaobank.io/view/1a25c1b4-6327-44c4-8a25-66a321060a45); width:217px; height: 80px;box-shadow:1px 2px 4px 0 rgba(0, 0, 0, 0.15);background-size: 217px 80px;margin: 6px auto;opacity: 0;border-radius: 6px;overflow: hidden; -webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;-webkit-transition: opacity 0.8s, -webkit-transform 0.8s;transition: opacity 0.8s, transform 0.8s;-webkit-transform: translateY(20px);transform: translateY(20px);-webkit-transition-delay: 1.2s;transition-delay: 1.2s;}

.is-active .img-phone01 .item02,
.is-active .img-phone01 .item03,
.is-active .img-phone01 .item04,
.is-active .img-phone01 .item05 {opacity: 1; -webkit-transform: translateY(0px);transform: translateY(0px);}

.section_container {position:relative; background-color:#fff; z-index:1;}

/* section01 */
.section01 {padding-top: 130px;background: #f9f8f7;}
.section01 .section-content {background: #f9f8f7;}
.img-phone02 {margin-bottom: 130px;overflow: hidden; -webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;}
.img-phone02 .screen {background: #fff;}
.img-phone02 .item01 {background: url(https://og.kakaobank.io/view/43a950a4-7c12-4995-a75d-8f3de57fdc18);background-size: 240px 30px;width:240px;height:30px;margin: 0 auto 22px;}
.img-phone02 .item02 {background: url(https://og.kakaobank.io/view/de0b951a-c8e3-4355-93dd-7ebf8fab5b65);background-size: 217px 35px;width:217px;height:35px;margin: 0 auto 6px;}
.img-phone02 .item03 {background: url(https://og.kakaobank.io/view/9c166d86-7337-4d7d-9f53-8fd0850d04a9);background-size: 217px 35px;width:217px;height:35px;margin: 0 auto 6px;}
.img-phone02 .item04 {background: url(https://og.kakaobank.io/view/ea44c1e0-a2fa-4654-884d-42952c6fa6e7);background-size: 217px 35px;width:217px;height:35px;margin: 0 auto 6px;position: relative;z-index: 1;-webkit-transform: translateY(0px);transform: translateY(0px);}
.is-active .img-phone02 .item04 {
  -webkit-transition: -webkit-transform 0.8s;
  transition: transform 0.8s;
  -webkit-transform: translateY(82px);
  transform: translateY(82px);
  -webkit-transition-delay: 2.5s;
  transition-delay: 2.5s;
}
.img-phone02 .item05 {background: url(https://og.kakaobank.io/view/54d71cb1-f9cb-4032-8774-d9375fc1f9cc);background-size: 217px 35px;width:217px;height:35px;margin: 0 auto 6px;
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
}
.is-active .img-phone02 .item05 {
  -webkit-transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  -webkit-transform: translateY(-41px);
  transform: translateY(-41px);
  -webkit-transition-delay: 2.7s;
  transition-delay: 2.7s;
}
.img-phone02 .item06 {background: url(https://og.kakaobank.io/view/bcef342b-ca44-4022-99db-5e7d0b5f850e);background-size: 217px 11px;width:217px;height:11px;margin: 19px auto;
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
}
.is-active .img-phone02 .item06 {
  -webkit-transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  -webkit-transform: translateY(-41px);
  transform: translateY(-41px);
  -webkit-transition-delay: 2.9s;
  transition-delay: 2.9s;
}
.img-phone02 .item07 {background: url(https://og.kakaobank.io/view/d1d62b10-20c3-48ba-838d-086264c676ff);background-size: 240px 86px;width:240px;height:86px;position: absolute;bottom:0;left:0;}
.img-phone02 .item08 {background: url(https://og.kakaobank.io/view/2e8e3472-54e5-4b4b-b758-1f5de6a711fd);background-size: 228px 441px;width:228px;height:441px;margin: auto;position: absolute;top:87px;left:0;right: 0;-webkit-transform: translateY(0px);transform: translateY(0px);
  -webkit-transition:-webkit-transform 1s;transition: transform 1s;}
.is-active .img-phone02 .item08 {-webkit-transform: translateY(-130px);transform: translateY(-130px);}
.img-phone02 .item09 {border-radius: 12px;width:34px;height:21px;position: absolute;top:10px;right:10px;background: #ffe400;-webkit-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0);}
.is-active .img-phone02 .item09 {
  -webkit-transition: background 0.5s;
  transition: background 0.5s;
  background: #e8e8e8;
  -webkit-transition-delay: 3.4s;
  transition-delay: 3.4s;
}
.img-phone02 .item10 {position: absolute;top:1px;right:1px;background: white;width:19px;height:19px;border-radius: 10px;box-shadow: 0 0.5px 1.5px 0 rgba(0, 0, 0, 0.2);}
.is-active .img-phone02 .item10 {
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  -webkit-transform:translateX(-13px);
  transform:translateX(-13px);
  -webkit-transition-delay: 3.4s;
  transition-delay: 3.4s;
}
.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%;-webkit-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0);}
.img-phone02 .screen-page2 {background: #fff; border-radius: 26px;position: absolute;top:0;left: 0;padding-top: 35px;box-sizing: border-box;-webkit-transform: translateY(480px);transform: translateY(480px);z-index: 2;}
.is-active .img-phone02 .screen-page2 {
  -webkit-transition: -webkit-transform 0.8s;
  transition: transform 0.8s;
  -webkit-transform:translateY(0px);
  transform:translateY(0px);
  -webkit-transition-delay: 1.5s;
  transition-delay: 1.5s;
}
.img-phone02 .select {border-radius: 34px;position: absolute;left: 98px;right: 0;bottom: 65px;width: 34px;height: 34px;background: rgba(254, 50, 50, 0.5);border: 4px solid #fe3232;opacity: 0;}
.is-active .img-phone02 .select  {opacity: 0.5;-webkit-transition: opacity 0.2s;transition: opacity 0.2s;-webkit-transition-delay:1s;transition-delay:1s;
-webkit-animation: click 1s forwards;animation: click 1s forwards;-webkit-animation-delay: 1s;animation-delay: 1s;
}
.img-phone02 .dim {border-radius: 28px;position: absolute;left:0;right:0;top:0;bottom:0; background: rgba(0,0,0,0.5);-webkit-transition: opacity 0.8s;transition: opacity 0.8s;opacity: 0;-webkit-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0); z-index:1;}
.is-active .img-phone02 .dim {opacity: 1;
  -webkit-transition-delay: 1.5s;
  transition-delay: 1.5s;}
.img-phone02 .screen-header {position: absolute;left:0;top:0;-webkit-transform: translateY(0px);transform: translateY(0px);-webkit-transition: -webkit-transform 0.5s;transition: transform 0.5s;}
.img-phone02 .screen-header:before {content:""; position:absolute; top:0; left:0; width:100%; height:76px; background-color:#fff; border-top-right-radius: 26px; border-top-left-radius: 26px; border-bottom: 1px solid rgba(0, 0, 0, 0);-webkit-transition:border 0.5s;transition:border 0.5s;}
.is-active .img-phone02 .screen-header:before {height:56px; -webkit-transition:height 0.5s;transition: height 0.5s; border-bottom: 1px solid rgba(0, 0, 0, 0.03);}
.img-phone02 .item12 {position:relative; background: url(https://og.kakaobank.io/view/6c86068c-563c-42b0-b742-e95ca470a489); width:240px; height: 30px;background-size: 240px 30px;margin:45px auto 0px;-webkit-transition: -webkit-transform 0.5s;transition: transform 0.5s;-webkit-transform-origin: center center;transform-origin: center center;}
.is-active .img-phone02 .item12 {-webkit-transform:translateY(-20px) scale(0.8);transform:translateY(-20px) scale(0.95);}
.img-phone02 .screen-footer {position: absolute;left: 0;bottom: 0;height: 49px;background: #fff;border-bottom-left-radius: 26px;border-bottom-right-radius: 26px;overflow: hidden;}



/* section02 */
.section02 {background: #f9f8f7;}
.section02 .section-content {background: #f9f8f7;}
.img-phone03 {margin-bottom: 130px;}
.img-phone03 .item03 {background: url(https://og.kakaobank.io/view/10e6ba5b-8f04-4e3f-8f1f-c2ae38afa7a1);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(42px);transform:translateX(42px);width:34px;
-webkit-transition-delay:2s;transition-delay:2s;}
.img-phone03 .item04 {background: url(https://og.kakaobank.io/view/60071fe2-9df8-4262-a8bc-75a2fe8e7304);background-size:76px 19px;width:76px; height: 19px;position: absolute;left:0;top:0;bottom:0;margin: auto;opacity: 1;}
.img-phone03 .item05 {background: url(https://og.kakaobank.io/view/797e1f73-fe4d-4c91-9fa0-cd87364c7f10);background-size:76px 19px;width:76px; height: 19px;position: absolute;right: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/9da9aaaf-9ad2-4d1f-a96e-a5cb010d7b4d);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/e54a5445-14a8-4012-b591-c72618df8aa0);background-size: 240px 324px;}
.img-phone03 .item02 {position: absolute;bottom:38px;left:100%;width:240px;height:324px;background: url(https://og.kakaobank.io/view/d2d33bd4-8f2c-42a2-8cc0-6fad22f4cf48);background-size: 240px 324px;}
.img-phone03 .dim {position: absolute;left: 0;right: 0;top: 0;bottom: 0;background: #000;opacity: 0;}
.img-phone03 .select {border-radius: 34px;position: absolute;left: 56px;right: 0;top: 38px;width: 34px;height: 34px;background: rgba(254, 50, 50, 0.5);border: 4px solid #fe3232;opacity: 0;}
.is-active .img-phone03 .select  {opacity: 0.5;-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;}
.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;-webkit-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0)}
.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;}

/* section03 */
.section03 {background: #f9f8f7;}
.section03 .section-content {background: #f9f8f7;}
.blocks {max-width: 240px;margin: 0 auto 130px;margin-bottom: 130px;}

.img-block01 {border-radius: 12px;z-index: 1;position: relative;width:240px;height: 93px;margin-bottom: 16px;background: url(https://og.kakaobank.io/view/8569cda2-957b-43d4-8f15-576501ab6314);background-size: 240px 93px; opacity: 0;-webkit-transition: opacity 0.5s, -webkit-transform 0.5s;transition: opacity 0.5s ease-in, transform 0.5s ease-out;-webkit-transform: translateY(-50px);transform: translateY(-50px);}
.is-step04 .img-block01 {opacity: 1;-webkit-transform: translateY(0px);transform: translateY(0px);}

.img-block02 {border-radius: 12px;z-index: 2;position: relative;width:240px;height: 93px;margin-bottom: 16px;background: url(https://og.kakaobank.io/view/85086332-7226-43d5-a0cc-a13f3b6a790e);background-size: 240px 93px; opacity: 0;-webkit-transition: opacity 0.5s, -webkit-transform 0.5s;transition: opacity 0.5s ease-in, transform 0.5s ease-out;-webkit-transform: translateY(-158px);transform: translateY(-158px);}
.is-step03 .img-block02 {opacity: 1;-webkit-transform: translateY(-108px);transform: translateY(-108px);}
.is-step03.is-step04 .img-block02 {opacity: 1;-webkit-transform: translateY(0px);transform: translateY(0px);}

.img-block03 {border-radius: 12px;z-index: 3;position: relative;width:240px;height: 140px;margin-bottom: 16px;background: url(https://og.kakaobank.io/view/24f672bb-0b43-4af5-9aa7-45eddf14a32c);background-size: 240px 140px;  opacity: 0;-webkit-transition: opacity 0.5s, -webkit-transform 0.5s;transition: opacity 0.5s ease-in, transform 0.5s ease-out;-webkit-transform: translateY(-268px);transform: translateY(-268px);}
.is-step02 .img-block03 {opacity: 1;-webkit-transform: translateY(-218px);transform: translateY(-218px);}
.is-step02.is-step03 .img-block03 {opacity: 1;-webkit-transform: translateY(-108px);transform: translateY(-108px);}
.is-step02.is-step03.is-step04 .img-block03 {opacity: 1;-webkit-transform: translateY(0px);transform: translateY(0px);}

.img-block04 {border-radius: 12px;z-index: 4;position: relative;width:240px;height: 156px;background: url(https://og.kakaobank.io/view/f6c70f3d-1788-49c2-8f4e-74a533b15f67);background-size: 240px 156px; opacity: 0;-webkit-transition: opacity 0.5s, -webkit-transform 0.5s;transition: opacity 0.5s ease-in, transform 0.5s ease-out;-webkit-transform: translateY(-398px);transform: translateY(-398px);}
.is-step01 .img-block04 {opacity: 1;-webkit-transform: translateY(-348px);transform: translateY(-348px);}
.is-step01.is-step02 .img-block04 {opacity: 1;-webkit-transform: translateY(-218px);transform: translateY(-218px);}
.is-step01.is-step02.is-step03 .img-block04 {opacity: 1;-webkit-transform: translateY(-108px);transform: translateY(-108px);}
.is-step01.is-step02.is-step03.is-step04 .img-block04 {opacity: 1;-webkit-transform: translateY(0px);transform: translateY(0px);}



@-webkit-keyframes stagger {
  0% {-webkit-transform: translateY(0px);}
  50% {-webkit-transform: translateY(-14px);}
  100% {-webkit-transform: translateY(0px);}
}
@keyframes stagger {
  0% {transform: translateY(0px);}
  50% {transform: translateY(-14px);}
  100% {transform: translateY(0px);}
}

/* section04 */
.section04 {background: #2a90d5;padding-top: 90px;}
.section04 .section-content {
	background: #2a90d5;
}
.section04 h2, .section04 p, .section04 b {color: #fff;}
.img-phone05 {margin-bottom: 130px;}
.img-phone05 .screen {box-sizing: border-box;padding: 36px 0px 46px;background: #fff;}
.img-phone05 .screen-page {border-bottom: 1px solid rgba(0,0,0,0.1);}
.img-phone05 .item01 {width: 240px;height:35px;background: url(https://og.kakaobank.io/view/d2f9fcd2-5509-44eb-832f-410a219a365f);background-size:240px 35px;margin-bottom: 7px;}
.img-phone05 .navbar {display:block;width: 100%; height: 21px;position: relative;border-bottom: 1px solid rgba(0,0,0,0);}
.is-active .img-phone05 .navbar {-webkit-transition: border-bottom 1s;transition: border-bottom 1s;border-bottom: 1px solid rgba(0,0,0,0.08);}
.img-phone05 .bar {display: block;position: absolute;left: 14px;height: 2px;background: #000;width: 21px;bottom: 0;}

.is-active .img-phone05 .bar {-webkit-transition:-webkit-transform 0.8s; transition:transform 0.8s; -webkit-transform: translateX(36px) scaleX(1.4);transform: translateX(36px) scaleX(1.4); -webkit-transition-delay:1.4s;transition-delay:1.4s;}
.img-phone05 .scrollbox {overflow: hidden; -webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;}

.is-active .img-phone05 .scrollbox {-webkit-transition: -webkit-transform 0.5s;transition: transform 0.5s;-webkit-transform: translateY(-42px);transform: translateY(-42px);-webkit-transition-delay:0.8s;transition-delay:0.8s;}
.img-phone05 .subscroll, .img-phone05 .subscroll-inner {overflow: hidden; -webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;}

.is-active .img-phone05 .subscroll-inner {-webkit-transition: -webkit-transform 0.8s;transition: transform 0.8s;-webkit-transform: translateY(-200px);transform: translateY(-200px);-webkit-transition-delay:1.4s;transition-delay:1.4s;}
.img-phone05 .item02 {position: absolute;left:16px;top:0;width: 162px;height:15px;background: url(https://og.kakaobank.io/view/e9354f03-f4ab-4bb6-ba88-5a6d66f1f85f);background-size:162px 15px;opacity: 1;}

.is-active .img-phone05 .item02 {-webkit-transition: opacity 1s;transition: opacity 1s;-webkit-transition-delay:1s;transition-delay:1.4s;opacity: 0;}
.img-phone05 .item03 {position: absolute;left:16px;top:0;width: 162px;height:15px;background: url(https://og.kakaobank.io/view/a6d8c75f-4bcd-4ab3-b126-1c07f7f1c6f1);background-size:162px 15px;opacity: 0;}

.is-active .img-phone05 .item03 {-webkit-transition: opacity 1s;transition: opacity 1s;-webkit-transition-delay:1s;transition-delay:1.4s;opacity: 1;}
.img-phone05 .slides {display: block;width:217px; height: 182px;margin: 10px auto 4px;overflow: hidden; -webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;position: relative;border-radius: 6px;}
.img-phone05 .item04 {position: absolute;left:100%;top:0;width:217px; height: 182px;margin: auto; background:url(https://og.kakaobank.io/view/a7b6dbca-95b8-46ef-8c91-15ca58f87db2); background-size: 217px 182px;}
.img-phone05 .item06 {position: absolute;left:0;top:0;width:217px; height: 182px;margin: auto; background:url(https://og.kakaobank.io/view/f0f8a344-c1c0-4e9a-80a0-391c2c14403c); background-size: 217px 182px;}

.is-active .img-phone05 .item04, .is-active .img-phone05 .item06 {-webkit-transition: -webkit-transform 1s;transition: transform 1s;-webkit-transform: translateX(-217px);transform: translateX(-217px);}

.img-phone05 .item05 {width:240px; height: 396px;margin: auto; background:url(https://og.kakaobank.io/view/5fd6338b-167b-4bd7-b231-859b9330d31f); background-size: 240px 396px;}
.img-phone05 .item07 {width:240px;height:30px;position: absolute;left:0;bottom:15px;background: url(https://og.kakaobank.io/view/ac9baa46-ac92-41bb-8736-42474ef95ff2);background-size: 240px 32px;}

.section-footer {background: #292929;}
.section-footer .section-content {padding: 72px 30px 166px;background: #292929;}
.footer-title {font-size: 26px;line-height: 35px;color: #cfcfcf;margin-bottom: 46px;text-align: center;}
.btn-detail {display: block;width: 198px;margin: 0 auto;font-size: 13px;background: #cfcfcf;border-radius: 23px;height: 46px;font-weight: bold;color:#fff;color: #292929;}
.sns-share {
  padding: 70px 0 100px;
  text-align: center;
}
.sns-share .link {
  display: inline-block;
  margin: 0 0 0 26px;
}
.sns-share .link:first-child {
  margin-left: 0;
}
.img-logo {display: block;width: 110px; height: 17px;margin: auto;background: url(https://og.kakaobank.io/view/743dd553-8bd5-4c10-9fe8-8ec37883d624);background-size:110px 17px;}
.fixed-bottom {position: fixed;bottom:0;left:0;right:0;margin:auto;z-index: 9;-webkit-transform: translateY(100px);transform: translateY(100px);}
.fixed-bottom.is-active {-webkit-transition: transform 0.8s;transition: transform 0.8s; -webkit-transform: translateY(0px);transform: translateY(0px);}
.btn-bottom {display: block;text-align: center;box-sizing: border-box;height: 70px;padding-top: 22px;width: 100%;  font-size: 18px;background-color: #222;color:#fff;}


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