@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{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;}
div:focus {outline: none;}
.ir{display:block;
  overflow:hidden;
  font-size:0px !important;
  line-height:0;
  color:transparent !important;}
img{vertical-align:top;}

button, button:focus, button:focus-visible{
  outline: none;
  border: 0 none;
}

html, body {margin: 0;padding: 0;min-width: 750px;}
.scene1 {position: absolute;z-index: 1;left:0;top:0;width: 100%;height: 567px;overflow: hidden;}
.scene1-spacer {height:567px;}
.title-group p {font-size: 16px;line-height:24px;font-weight: bold;color:#8f8f92;display: inline-block;vertical-align: bottom;}
.scene2-2.scene3-hider {max-width:1280px;margin:45px auto 0px;}
.scene2-2.scene3-hider:before {
    content: "";
    display: block;
    width: 40px;
background: rgb(18,18,20);
background: -moz-linear-gradient(90deg, rgba(18,18,20,1) 0%, rgba(18,18,20,0) 100%);
background: -webkit-linear-gradient(90deg, rgba(18,18,20,1) 0%, rgba(18,18,20,0) 100%);
background: linear-gradient(90deg, rgba(18,18,20,1) 0%, rgba(18,18,20,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#121214",endColorstr="#121214",GradientType=1);
    height: 100%;
    position: absolute;
    left: 0px;
    z-index: 1;
}
.scene2-2.scene3-hider:after {
    content: "";
    display: block;
    width: 40px;
  background: rgb(18,18,20);
background: -moz-linear-gradient(90deg, rgba(18,18,20,0) 0%, rgba(18,18,20,1) 100%);
background: -webkit-linear-gradient(90deg, rgba(18,18,20,0) 0%, rgba(18,18,20,1) 100%);
background: linear-gradient(90deg, rgba(18,18,20,0) 0%, rgba(18,18,20,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#121214",endColorstr="#121214",GradientType=1);
    height: 100%;
    position: absolute;
    right: 0px;
    z-index: 1;
}
.scene2-2, .scene2-2-tmp {position:relative; width: 100%;height:160px;margin:45px 0px 0px 0px;overflow: hidden;
    -webkit-transition-delay: 0.1s;transition-delay: 0.1s;}
.scene2-2 video {position:absolute;left:50%;right:0;top:0px;margin:auto auto auto -640px;width:100%;}
.scene2-1, .scene2-2 {-webkit-transition: opacity 0.05s;transition: opacity 0.05s;}
.scene2.is-active .scene2-1 {-webkit-transition-delay: 0.1s;transition-delay: 0.1s;opacity: 0;}
.scene2.is-active .scene2-2 {-webkit-transition-delay: 0s;transition-delay: 0s;opacity: 0;}
.scene2.is-active .scene2 {-webkit-transition: opacity 0.05s;transition: opacity 0.05s;opacity: 0;}
.section-main {position: relative;background: #121214;color:#fff;}
.scene1-tmp {
  position: absolute;
  width: 100%;
  height: 640px;
  margin: auto;
  top: 0;
  overflow: hidden;
  left: 0;
  right: 0;}
.section-main h1 {padding:62px 30px;font-size: 32px;line-height:44px;font-weight: bold;}
.section-main h1+h1 {padding:50px 0px;}
.content-wrapper {position:relative;width: 750px;margin: auto;}
.content-wrapper--footer {width: 750px;margin: auto;}
.content-wrapper--footer h2 {margin:40px 0px 0px 30px;}
.content-wrapper--bubble {width: 750px;margin: auto;padding: 0px 0px 0px 30px;box-sizing: border-box;}
.title-group {vertical-align: bottom;}
.section-main .title-group h1 {padding: 0px 30px 0px;display: inline-block;}
.video-bg {position: relative;}

.scene3 {position:relative;-webkit-transform:translate3d(0,100px,0);transform:translate3d(0,100px,0);backface-visibility: hidden;z-index: 0;height:800px;margin: 0px 100px 0px;overflow: hidden;}

.scene3 .video {margin-left:50%;-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0);border-top-left-radius: 45px;border-top-right-radius: 45px;overflow: hidden;isolation: isolate;height: 100%;}
.scene3 video {width:100%;height: 100%;object-fit: cover;}

.btn-scene3,
.btn-scene3:active,
.btn-scene3:focus {border:1px solid #fff;height:53px;position: absolute;left:50%;width:144px;border-radius: 26px;bottom:65px;margin: 0px 0px 0px 151px;color:#fff;line-height: 49px;}
.ico-play {display: inline-block;width:20px;height:20px;vertical-align: middle;}
.section-content {background: #1a3d9c;position: relative;overflow: hidden;color:#fff;}

.scene4 {width:750px;margin:100px auto 95px;padding:0px 30px;box-sizing: border-box;font-size:16px;line-height: 23px;word-break: keep-all;}
.scene4 .section-left {width: 280px;}
.scene4 h2 {margin-top:19px;font-size: 32px;line-height: 42px;}
.section-left {width:50%;float:left;}
.scene4-sub-title {color:#ffff32;font-weight: bold;}
.scene4-desc {margin-top:14px;opacity: 0.5;}
.scene4-date {margin-top:29px;font-weight: bold;}
.list-steps {border-top:1px solid rgba(255,255,255,0.3);margin-top: 32px;font-weight: bold;}
.list-steps li {border-bottom: 1px solid rgba(255,255,255,0.3);padding:18px 0px;}
.list-steps__title {width: 63px;float:left;color:#fff618;}
.list-steps__desc {margin-left: 63px;}
.btn-steps, .btn-steps:focus, .btn-steps:active, btn-steps:visited {display:block;position:relative;width:193px;height:48px;border:1px solid #fff;margin-top:25px;border-radius: 26px;color:#fff;font-weight: bold;}
.section-right {margin-left: 50%;position: relative;}
.phone-slider__arrow--left {width:36px;height:36px;position: absolute;top:214px;left:61px;background: url(https://og.kakaobank.io/view/6d10ab08-4bcc-4225-8a4e-cb1c0a734072);background-size: 36px 36px;}
.phone-slider__screen {width:240px;height:464px;background: #fff;border-radius: 35px;margin:0 0px auto auto;}
.phone-slider__arrow--right {width:36px;height:36px;position: absolute;top:214px;left:355px;background: url(https://og.kakaobank.io/view/2231aad8-945d-4ed6-abbf-7852b7a55f1c);background-size: 36px 36px;}
.clear {clear:both;}

.slide1,.slide2,.slide3,.slide4 {position: absolute;left:0;top:0;width:100%;height:100%;opacity: 0;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;}
.slide1 {background: url(https://og.kakaobank.io/view/3c0f6716-4aee-4f8e-821d-77c3920479e6);background-size: 240px 464px;}
.is-active-slide1 .slide1 {opacity: 1;}
.slide2 {background: url(https://og.kakaobank.io/view/cf923e9d-fd6a-4627-b52f-e5ebf48e119a);background-size: 240px 464px;}
.is-active-slide2 .slide2 {opacity: 1;}
.slide3 {background: url(https://og.kakaobank.io/view/0b5e15f4-b3de-45ef-91af-83995ba03d3d);background-size: 240px 464px;}
.is-active-slide3 .slide3 {opacity: 1;}
.slide4 {background: url(https://og.kakaobank.io/view/f4eeecae-4bc8-403e-a164-da454deb08f4);background-size: 240px 464px;}
.is-active-slide4 .slide4 {opacity: 1;}

.ripple {width:46px;height:46px;position:absolute;border-radius:46px;-webkit-transform:scale(0);transform:scale(0);}
.ripple:before {content:"";width:46px;height:46px;background:#0e4fff;position:absolute;left:0;right:0;top:0;bottom:0;border-radius:46px;margin:auto;opacity:0.5;}
.ripple:after {content:"";width:25px;height:25px;background:#0e4fff;position:absolute;left:0;right:0;top:0;bottom:0;border-radius:26px;margin:auto;opacity:0.5;}
.slide1 .ripple {right:26px;bottom:47px;}
.is-active-slide1 .ripple,
.is-active-slide2 .ripple {
  -webkit-animation: ripple 0.5s forwards;animation: ripple 0.5s forwards;
  -webkit-transform:scale(0);transform:scale(0);}
.slide2 .ripple {right:62px;bottom:82px;}
.slide4 .ripple-rect {   
    width: 164px;
    height: 232px;
    position: absolute;
    border: 4px solid #265cee;
    left: 16px;
    top: 181px;
    border-radius: 24px;
  -webkit-transform:scale(0);transform:scale(0);}
.is-active-slide4 .ripple-rect {
  -webkit-animation: ripple-rect 0.5s forwards;animation: ripple-rect 0.5s forwards;
  -webkit-transform:scale(1);transform:scale(1);
}

@-webkit-keyframes ripple {
  0% {-webkit-transform:scale(0);transform:scale(0);}
  90% {-webkit-transform:scale(1.1);transform:scale(1.1);}
  100% {-webkit-transform:scale(1);transform:scale(1);}
}
@keyframes ripple {
  0% {-webkit-transform:scale(0);transform:scale(0);}
  90% {-webkit-transform:scale(1.1);transform:scale(1.1);}
  100% {-webkit-transform:scale(1);transform:scale(1);}
}
@-webkit-keyframes ripple-rect {
  0% {-webkit-transform:scale(1.05);transform:scale(1.05);opacity: 0}
  100% {-webkit-transform:scale(1);transform:scale(1);opacity: 1}
}
@keyframes ripple-rect {
  0% {-webkit-transform:scale(1.05);transform:scale(1.05);opacity: 0}
  100% {-webkit-transform:scale(1);transform:scale(1);opacity: 1}
}

.section-footer {position: relative;z-index: 1;overflow: hidden;background: #fff;padding-top:95px;}
.section-footer h2 {color:#2a2a2b;font-size: 32px;line-height: 42px;font-weight: bold;}
.section-footer h2+h2 {margin-top:40px;color:#2a2a2b;font-size: 32px;line-height: 42px;font-weight: bold;}

.scene5-1,.scene5-2 {margin-left:71px;}
.scene5-2 {
  opacity: 0;
}
.is-active .scene5-2 {
  opacity: 1;
  background: #fff;
  transition: opacity 0.3s;
  transition-delay: 2.5s;
}
.section-footer.is-active .scene5-1-1,
.section-footer.is-active .scene5-1-2,
.section-footer.is-active .scene5-1-3,
.section-footer.is-active .scene5-1-4,
.section-footer.is-active .scene5-1-5,
.section-footer.is-active .scene5-1-6,
.section-footer.is-active .scene5-2-1,
.section-footer.is-active .scene5-2-2,
.section-footer.is-active .scene5-2-3,
.section-footer.is-active .scene5-2-4,
.section-footer.is-active .scene5-2-5,
.section-footer.is-active .scene5-2-6 {
    opacity: 1;
    -webkit-transition: transform 0.3s, opacity 0.3s;
    -webkit-transform: translateY(0px);
    transition: transform 0.3s, opacity 0.3s;
    transform: translateY(0px);
}

.scene5-1-wrapper1 {position: relative;width:201px;height:58px;margin-top:12px;}
.scene5-1-wrapper2 {position: relative;width:240px;height:77px;margin-top:12px;}

.scene5-2-wrapper1 {position: relative;width:201px;height:58px;margin-top:12px;}
.scene5-2-wrapper2 {position: relative;width:240px;height:127px;margin-top:12px;}



.scene5-1-1 {width:60px;height:60px;background: url(https://og.kakaobank.io/view/5fb857b0-880e-473e-b211-535cc8410750);background-size: 60px 60px;opacity: 0;
    -webkit-transform:translateY(4px);
    -webkit-transition: transform 0.3s, opacity 0.3s;
    transform:translateY(4px);
    transition: transform 0.3s, opacity 0.3s;}

.scene5-1-2 {position: absolute;left:0;top:0;width:100px;height:58px;opacity: 0;
    transform:translateY(4px);
    transition: transform 0.3s, opacity 0.3s;}

.scene5-1-3 {position: relative;width:210px;height:58px;background:url(https://og.kakaobank.io/view/a6bfbff6-42b7-4d43-95bc-2018ed7bbfe7);background-size: 210px 55px;opacity: 0;
    transform:translateY(4px);
    transition: transform 0.3s, opacity 0.3s;}
.section-footer.is-active .scene5-1-3 {
    transition: transform 0.3s, opacity 0.3s;
    transition-delay: 0.6s;}

.scene5-1-4 {position: absolute;left:0;top:0;width:100px;height:58px;opacity: 0;
    transform:translateY(4px);
    transition: transform 0.3s, opacity 0.3s;}
.section-footer.is-active .scene5-1-4 {
    transition: transform 0.3s, opacity 0.3s;
    transition-delay: 0.9s;}

.scene5-1-5 {position: relative;width:240px;height:74px;background:url(https://og.kakaobank.io/view/135fde30-7334-417a-9a69-385174ae8794);background-size: 240px 74px;opacity: 0;
    transform:translateY(4px);
    transition: transform 0.3s, opacity 0.3s;}
.section-footer.is-active .scene5-1-5 {
    transition: transform 0.3s, opacity 0.3s;
    transition-delay: 1.2s;}

.scene5-1-6 {position: relative;width:178px;height:58px;background:url(https://og.kakaobank.io/view/e2e8fba1-31d4-4c3a-af72-c59a41811cc5);background-size: 178px 58px;margin-top:12px;float: right;opacity: 0;
    transform:translateY(4px);
    transition: transform 0.3s, opacity 0.3s;}
.section-footer.is-active .scene5-1-6 {
    transition: transform 0.3s, opacity 0.3s;
    transition-delay: 2s;}

.scene5-2-1 {width:60px;height:60px;background: url(https://og.kakaobank.io/view/5fb857b0-880e-473e-b211-535cc8410750);background-size: 60px 60px;opacity: 0;
    -webkit-transform:translateY(4px);
    -webkit-transition: transform 0.3s, opacity 0.3s;
    transform:translateY(4px);
    transition: transform 0.3s, opacity 0.3s;}
.section-footer.is-active .scene5-2-1 {
    -webkit-transition: transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s;
-webkit-transition-delay: 3s;transition-delay: 3s;}

.scene5-2-2 {position: absolute;left:0;top:0;width:100px;height:58px;opacity: 0;
    transform:translateY(4px);
    transition: transform 0.3s, opacity 0.3s;}
.section-footer.is-active .scene5-2-2 {
    transition: transform 0.3s, opacity 0.3s;
    transition-delay: 3.3s;}

.scene5-2-3 {position: relative;width:201px;height:58px;background:url(https://og.kakaobank.io/view/6ade6320-a589-47f7-bd22-9e2fe4f82913);background-size: 201px 58px;opacity: 0;
    transform:translateY(4px);
    transition: transform 0.3s, opacity 0.3s;}
.section-footer.is-active .scene5-2-3 {
    transition: transform 0.3s, opacity 0.3s;
    transition-delay: 3.6s;}


.scene5-2-4 {position: absolute;left:0;top:0;width:100px;height:58px;opacity: 0;
    transform:translateY(4px);
    transition: transform 0.3s, opacity 0.3s;}
.section-footer.is-active .scene5-2-4 {
    transition: transform 0.3s, opacity 0.3s;
    transition-delay: 3.9s;}

.scene5-2-5 {position: relative;width:240px;height:127px;background:url(https://og.kakaobank.io/view/cdc9c101-02c5-4606-a6e8-e2e54650a0e4);background-size: 240px 127px;opacity: 0;
    transform:translateY(4px);
    transition: transform 0.3s, opacity 0.3s;}
.section-footer.is-active .scene5-2-5 {
    transition: transform 0.3s, opacity 0.3s;
    transition-delay: 4.2s;}

.scene5-2-6 {position: relative;width:105px;height:58px;background:url(https://og.kakaobank.io/view/d5171cdf-b99c-40ee-9894-352ea0361526);background-size: 105px 58px;margin-top:12px;float: right;opacity: 0;
    transform:translateY(4px);
    transition: transform 0.3s, opacity 0.3s;}
.section-footer.is-active .scene5-2-6 {
    transition: transform 0.3s, opacity 0.3s;
    transition-delay: 5s;}
.card-bg {
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
    -webkit-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0);
    margin-top: 40px;
}
.card-left {width:50%;float:left;}
.card-right {width:50%;margin-left:50%;}
.card-bg-yellow {
    position: relative;
    border-radius: 40px;
    width: 353px;
    height: 465px;
    padding: 60px 40px 40px;
    box-sizing: border-box;
    background: rgb(255,228,87);
    background: -moz-linear-gradient(0deg, rgba(255,228,87,1) 0%, rgba(255,243,144,1) 100%);
    background: -webkit-linear-gradient(0deg, rgba(255,228,87,1) 0%, rgba(255,243,144,1) 100%);
    background: linear-gradient(0deg, rgba(255,228,87,1) 0%, rgba(255,243,144,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffe457",endColorstr="#fff390",GradientType=1);
}
.card-bg-green {
    position: relative;
    border-radius: 40px;
    width: 353px;
    height: 465px;
    padding: 60px 40px 40px;
    margin: 0px 0px 0px auto;
    box-sizing: border-box;
    background: rgb(87,225,255);
    background: -moz-linear-gradient(0deg, rgba(87,225,255,1) 0%, rgba(144,255,223,1) 100%);
    background: -webkit-linear-gradient(0deg, rgba(87,225,255,1) 0%, rgba(144,255,223,1) 100%);
    background: linear-gradient(0deg, rgba(87,225,255,1) 0%, rgba(144,255,223,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#57e1ff",endColorstr="#90ffdf",GradientType=1);
}
.card-bg-yellow__img {background: url(https://og.kakaobank.io/view/4461c1cc-9a50-4892-904b-01dce0fb686f);background-size: 300px 253px;width:300px;height:253px;font-weight: bold;margin-left: 50%;transform:translateX(-50%);}

.card-bg__desc {font-size: 15px;line-height: 25px;color:rgba(0,0,0,0.35);font-weight: bold;position: relative;z-index: 1;margin-top:38px;}
.card-bg__desc b {color:#222;}

.card-bg-green__img {background:url(https://og.kakaobank.io/view/912e6484-c39d-46a4-9c6a-236cd31c464d);background-size: 300px 253px;width:300px;height:253px;font-weight: bold;margin-left: 50%;transform:translateX(-50%);}


.list-dot {padding:0px 0px 40px 14px;}
.list-dot li {position: relative;color:#444;font-size:15px;}
.list-dot li:before {content:"・";position: absolute;left: -14px;top:0;}
.list-content {padding:0px 30px;margin:0px auto;overflow: hidden;}
.list-content.is-active {height:0px;}
.list-title {margin: 30px auto 0px;padding:0px 30px 30px;overflow: auto;}
.list-title.is-small {padding: 0px 30px 15px;}
.list-title.is-small, .list-title.is-small b {font-size:16px;margin: 0px auto;}
.list-title b {height: 25px;display: inline-block;vertical-align: middle;font-size:18px;}

.content-notice {margin:60px auto 0px;}

.list-border {width: 750px;border-top:1px solid #ebebeb;margin: auto;}

.list-toggle {width:25px;height:25px;background:url(https://og.kakaobank.io/view/8d0ffb38-7cb8-481e-90b4-c8a4a35b7f01);background-size: 25px 25px;float: right;}
.list-toggle.is-active {width:25px;height:25px;background:url(https://og.kakaobank.io/view/e172946c-3536-465a-a3e7-53d33cb0cb16);background-size: 25px 25px;float: right;}

.deliberation {margin: 40px auto 0px;padding:0px 0px 100px 30px;overflow: auto;}

.deliberation__txt {font-size:16px;color:#444;line-height: 20px;font-weight: bold;float:left;}


.medias {float:right;text-align: right;font-size:0;}
.medias li {display:inline-block;width:68px;height:68px;margin-left:26px;}

.layer {
    position: fixed;
    width:100%;
    height:100%;
    left:0;
    top:0;
    background: rgba(0,0,0,0.6);
    z-index: 2;
}
.layer .popup {
    width: 300px;
    height: 204px;
    background: #1a3d9c;
    position: absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin: auto;
    border-radius: 30px;
}
.layer .popup__txt {
    color: #fff;
    font-size: 20px;
    line-height: 26px;
    font-weight: bold;
    text-align: center;
    padding-top:40px;
}
.layer .btn-close {
    width:276px;
    height: 60px;
    position: absolute;
    left:0;
    right:0;
    bottom: 12px;
    margin: auto;
    background: #fff618;
    border-radius: 19px;
    font-weight: bold;
    color:#1a3d9c;
}
.clear {clear:both;}
.img--title {
  width: 275px;
  height: 320px;
  margin-top: 73px;
  background: url(https://og.kakaobank.io/view/f08fb2f9-83ca-4f3c-ba4c-2b8b397d2fc8);
  background-size: 275px 320px;
  box-sizing: border-box;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
}
.img--title-sub {
  width: 284px;
  height: 48px;
  position: absolute;
  bottom: 0;
  left: 300px;
  background: url(https://og.kakaobank.io/view/e0b7f94a-f225-47ca-b07f-51edf9c23351);
  background-size: 284px 48px;
}
.is-tmp {
  visibility: hidden;
  background: none;
}
.img--evt {
  width: 228px;
  height: 228px;
  background: url(https://og.kakaobank.io/view/dcd97781-9916-434b-ac61-6a628fc5832f);
  background-size: 228px 228px;
}
.img--step1 {
  width: 260px;
  height: 48px;
  background: url(https://og.kakaobank.io/view/b713e97d-3bb8-49e0-86a3-ecab6928d5a9);
  background-size: 260px 48px;
}
.img--step2 {
  width: 260px;
  height: 48px;
  background: url(https://og.kakaobank.io/view/58768b3a-2443-405f-8c38-7ee040a02196);
  background-size: 260px 48px;
}
.img--btn-steps {
  position: absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  width: 156px;
  height: 24px;
  margin:auto;
  background: url(https://og.kakaobank.io/view/a76f4650-3595-43f5-b3e0-90e85daddda6);
  background-size: 156px 24px;
}
.img--how1 {
  width: 210px;
  height: 125px;
  background: url(https://og.kakaobank.io/view/24cbdb85-eda6-40ef-a634-156378869d61);
  background-size: 210px 125px;
  opacity: 0.3;
}
.img--how2 {
  width: 266px;
  height: 84px;
  background: url(https://og.kakaobank.io/view/ed997729-4613-42eb-91ff-8725cde9c43e);
  background-size: 266px 84px;
  opacity: 0.3;
}
.img--how3 {
  width: 222px;
  height: 80px;
  background: url(https://og.kakaobank.io/view/232b8927-7ea7-47ab-bb13-b8f7288db25e);
  background-size: 222px 80px;
  opacity: 0.3;
}
.is-active .img--how1{
  -webkit-animation: how1 5s forwards;
  animation: how1 5s forwards;
}
.is-active .img--how2{
  -webkit-animation: how2 5s forwards;
  animation: how2 5s forwards;
}
.is-active .img--how3{
  -webkit-animation: how3 5s forwards;
  animation: how3 5s forwards;
}

@-webkit-keyframes how1 {
  0% {opacity: 0.3;}
  8% {opacity: 1;}
  25% {opacity: 1;}
  33% {opacity: 0.3;}
  58% {opacity: 0.3;}
  66% {opacity: 0.3;}
  100% {opacity: 0.3;}
}
@-webkit-keyframes how2 {
  0% {opacity: 0.3;}
  25% {opacity: 0.3;}
  33% {opacity: 1;}
  58% {opacity: 1;}
  66% {opacity: 0.3;}
  100% {opacity: 0.3;}
}
@-webkit-keyframes how3 {
  0% {opacity: 0.3;}
  25% {opacity: 0.3;}
  33% {opacity: 0.3;}
  58% {opacity: 0.3;}
  66% {opacity: 1;}
  100% {opacity: 1;}
}

@keyframes how1 {
  0% {opacity: 0.3;}
  8% {opacity: 1;}
  25% {opacity: 1;}
  33% {opacity: 0.3;}
  58% {opacity: 0.3;}
  66% {opacity: 0.3;}
  100% {opacity: 0.3;}
}
@keyframes how2 {
  0% {opacity: 0.3;}
  25% {opacity: 0.3;}
  33% {opacity: 1;}
  58% {opacity: 1;}
  66% {opacity: 0.3;}
  100% {opacity: 0.3;}
}
@keyframes how3 {
  0% {opacity: 0.3;}
  25% {opacity: 0.3;}
  33% {opacity: 0.3;}
  58% {opacity: 0.3;}
  66% {opacity: 1;}
  100% {opacity: 1;}
}

.img--btn-video {
  width: 87px;
  height: 25px;
  background: url(https://og.kakaobank.io/view/1f2ed5b1-43c1-49c0-b68f-075b6ea63215);
  background-size: 87px 25px;
  margin: auto;
}


.img--share-kt {
  width: 68px;
  height: 68px;
  background: url(https://og.kakaobank.io/view/7d0d7168-0d9f-42f8-8107-5683237b7853);
  background-size: 68px 68px;
}
.img--share-fb {
  width: 68px;
  height: 68px;
  background: url(https://og.kakaobank.io/view/65eb60a4-00bf-4ddc-abdc-b63da7b58ade);
  background-size: 68px 68px;
}
.img--share-dot {
  width: 68px;
  height: 68px;
  background: url(https://og.kakaobank.io/view/2f025d58-0ce6-4c29-8746-1b5eb4bfd849);
  background-size: 68px 68px;
}
.loading {position:absolute; top:0; left:0; width:71px; height:58px; background-color:#f5f6f7; border-radius: 30px; text-align: center; line-height: 58px;}
.loading i {display: inline-block; width:6px; height:6px; background-color:rgba(0,0,0,0.3); border-radius: 50%; margin:0 3px;
    opacity:0;
    animation:loading-ani 0.6s infinite;
    -webkit-animation:loading-ani 0.6s infinite;
}
@-webkit-keyframes loading-ani {
    100% {opacity:1;}
}
@keyframes loading-ani {
    100% {opacity:1;}
}

.btn-sns {width:100%;height: 100%;margin:0;padding:0;border:none;}

.popups {position:fixed; top:0; left:0; width:100%; height:100%; z-index:999; display: table; text-align: center; visibility: hidden; opacity:0;}
.popups.on {visibility: visible; opacity:1;}
.popups .pop-inner {display: table-cell; vertical-align: middle;}
.popups .bg {position:absolute; top:0; left:0; width:100%; height:200%; background-color:rgba(0,0,0,0.4);}
.popups .pop-content {position:relative; max-width:330px; padding:0 20px; margin:0 auto;}
.popups .pop-content-inner {background-color:#fff; border-radius: 30px; font-size:0;}
.popups .copy {position:relative; display: block; padding:40px 0; text-align: center; font-size:20px; line-height: 26px; font-weight: bold;}
.popups .ok-btn {display: block; width:100%; padding:0 12px 12px; box-sizing: border-box;}
.popups .ok-btn button,
.popups .ok-btn a {display:block; width:100%; font-size:18px; background-color:#4a4cd8; color:#fff; text-align: center; padding:20px 0 18px; border-radius: 33px;}


.popup-youtube {display: none; position:fixed;top:0;right:0;bottom:0;left:0;box-sizing:border-box;padding:20px 0;background:rgba(0, 0, 0, 1);}
.popup-youtube.on {display: block;}
.popup-youtube .modal-table {display:table;width:100%;height:100%;table-layout:fixed;}
.popup-youtube .modal-cell {display:table-cell;width:100%;height:100%;vertical-align:middle;text-align:center;}
.popup-youtube .iframe-wrap{display:inline-block;width:100%;height:80%;}
.popup-youtube .modal-open{display:block;z-index:1000;}
.popup-youtube .btn-close-modal{ position:fixed;top:22px;right:16px;color:#fff;width:36px;height:36px; background:url('https://og.kakaobank.io/view/04154dc6-760b-4467-bccb-757c9242544f') 4px 4px no-repeat;background-size:28px 28px;}