@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: 510px;overflow: hidden;}
.scene1-spacer {height:510px;}
.scene1--layout {float:left;text-align:left;}
.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: #fcf600;color:#fff;height:100%;}
.scene1-tmp {
  position: absolute;
  width: 100%;
  height: 640px;
  margin: auto;
  top: 0;
  overflow: hidden;
  left: 0;
  right: 0;}
.section-main h1 {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;}

.section-product {padding:100px 0; width:750px; margin:0 auto;}
.section-product .copy1 { width:490px;height:130px; background:url(https://og.kakaobank.io/view/fe1d1bad-579d-4743-a77a-353e14be9166) 0 0 / 100% no-repeat;}
.section-product .products {margin-top:30px;font-size: 0;}
.section-product .products-01 {display: inline-block;width: 300px;height: 280px;background: url(https://og.kakaobank.io/view/5743d8e0-4562-4238-81fc-ae2563d97e66); background-size: 300px 280px;}
.section-product .products-02 {margin-left:60px;display: inline-block;width: 300px;height: 280px;background: url(https://og.kakaobank.io/view/92d27af5-4d56-4652-8496-59cba594e189); background-size: 300px 280px;}

.btn-go-mortgage {position:relative;display: block;width:100%;height: 95px;background:#3f4450;margin:60px auto 35px;border-radius:30px;}
.btn-go-mortgage__text {position:absolute;display: block;left:30px;top:0;bottom:0;margin:auto;width:95px;height:50px;background:url(https://og.kakaobank.io/view/c76f5876-e716-46ce-87aa-09a6244bf4ab);background-size: 95px 50px;}
.btn-go-mortgage__arrow {position:absolute;display: block;right:30px;top:0;bottom:0;margin:auto;width:25px;height:25px;background:url(https://og.kakaobank.io/view/bbed486a-f3e4-4e41-a7bd-56f2f04f295f);background-size: 25px 25px;}

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

.scene3 .video {min-width:800px;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 {min-width:800px;width:100%;height: 100%;object-fit: cover;}

.btn-scene3-wrapper {width: 750px;position: absolute;bottom: 186px;left: 0;right: 0;margin: auto;}
.btn-scene3,
.btn-scene3:active,
.btn-scene3:focus {border:1px solid #fff;height:49px;width:144px;border-radius: 26px;bottom:83px;color:#fff;line-height: 49px;}
.ico-play {display: inline-block;width:20px;height:20px;vertical-align: middle;}
.section-content {background: #303541;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: 305px;}
.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;}
.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/92388712-bff7-46ae-9b82-411388968f7b);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/96393abc-8cba-4d86-ba72-ba0a32556e9f);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/fc55ecfd-7404-47ad-82c7-d9c09068741e);background-size: 240px 464px;}
.is-active-slide1 .slide1 {opacity: 1;}
.slide2 {background: url(https://og.kakaobank.io/view/988ca528-0b54-49bb-896e-d27db665116c);background-size: 240px 464px;}
.is-active-slide2 .slide2 {opacity: 1;}
.slide3 {background: url(https://og.kakaobank.io/view/dbeb373e-fe67-47b2-b567-92a1e4861b5c);background-size: 240px 464px;}
.is-active-slide3 .slide3 {opacity: 1;}
.slide4 {background: url(https://og.kakaobank.io/view/51928f32-ede3-4d18-b7f0-ff255d5f6624);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:90px;}
.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/e8e97217-b326-4216-98cb-d6e0e624c68c);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/655de402-2488-493e-b4a7-a1e5835588d5);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/54f32bdd-bd05-413c-86cb-a181ff938d90);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/7656a110-f061-4f05-8cd2-f3a8d663d36b);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/e8e97217-b326-4216-98cb-d6e0e624c68c);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/d0cdb387-277a-4dd7-ad89-fccaeb4c2077);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/621975a9-1bc1-46cd-9ef7-768627cfa9a5);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/d6837c8c-5e14-4116-9a59-b53e5ced9df6);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/26b30320-ca66-4669-927a-234a9b82d44e);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/5dc906ec-31ae-42f3-bfdb-4820dc5fda39);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.no-bottom {padding:0px 0px 14px 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;}

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

.list-toggle {width:25px;height:25px;background:url(https://og.kakaobank.io/view/d935874f-37d1-4c72-bceb-d7cbe277c9d3);background-size: 25px 25px;float: right;}
.list-toggle.is-active {width:25px;height:25px;background:url(https://og.kakaobank.io/view/886f3148-f41f-4b99-a885-6590ecb0b80e);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--icon {
    width:140px;
    height:140px;
    margin:265px auto 0;
    background: url(https://og.kakaobank.io/view/7a1644d5-ce25-42cf-b5ed-b4c28d7354bb);
    background-size: 140px 140px;
    float:right;
}
@-webkit-keyframes imgIconAni {
    100% {background-position:-3240px 0;}
}
@keyframes imgIconAni {
    100% {background-position:-3240px 0;}
}
.img--title {
  width: 240px;
  height: 105px;
  margin: 105px auto 0;
  background: url(https://og.kakaobank.io/view/2d4734be-24e0-4811-940f-89711101222a);
  background-size: 240px 105px;
  box-sizing: border-box;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
}
.img--title-w {
  width: 240px;
  height: 105px;
  margin: 105px auto 0;
  background: url(https://og.kakaobank.io/view/13ca282f-49b3-4c88-adfa-d273c0463a26);
  background-size: 240px 105px;
  box-sizing: border-box;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
}
.img--title-sub {
  width: 200px;
  height: 70px;
  margin:15px 0 0;
  background: url(https://og.kakaobank.io/view/ccf7d319-3633-4f74-9c76-b5fca6ef83e1);
  background-size: 200px 70px;
}
.is-tmp {
  visibility: hidden;
  background: none;
}
.img--evt {
  width: 290px;
  height: 255px;
  background: url(https://og.kakaobank.io/view/a868fe6e-f942-409c-9db0-2e2343f6409e);
  background-size: 290px 255px;
}

.btn-steps, .btn-steps:focus, .btn-steps:active, btn-steps:visited {
  display: block;
  width: 305px;
  height: 95px;
  margin:auto;
  background: red;
  margin-top: 63px;
}

.img--how1 {
  width: 210px;
  height: 125px;
  background: url(https://og.kakaobank.io/view/fa2a664a-f400-41f2-82a0-1bbf0447fb0d);
  background-size: 210px 125px;
  opacity: 0.3;
}
.img--how2 {
  width: 266px;
  height: 84px;
  background: url(https://og.kakaobank.io/view/aaeb5fb5-4096-4340-b0d5-01947434903b);
  background-size: 266px 84px;
  opacity: 0.3;
}
.img--how3 {
  width: 222px;
  height: 80px;
  background: url(https://og.kakaobank.io/view/9e2b7505-6702-4503-b23a-4365a7adf2c4);
  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/6534625c-0602-4dd9-9782-564fb15f3178);
  background-size: 87px 25px;
  margin: auto;
}


.img--share-kt {
  width: 68px;
  height: 68px;
  background: url(https://og.kakaobank.io/view/d858974f-dfa2-47f4-a2a0-df59491cb815);
  background-size: 68px 68px;
}
.img--share-fb {
  width: 68px;
  height: 68px;
  background: url(https://og.kakaobank.io/view/b862a266-87e3-4e6a-8d68-c89b952fa107);
  background-size: 68px 68px;
}
.img--share-dot {
  width: 68px;
  height: 68px;
  background: url(https://og.kakaobank.io/view/ce1131bf-e1d8-41ef-8a88-dca309d5e9d7);
  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/78e6da59-e5fa-4a66-82e7-7b836d118628') 4px 4px no-repeat;background-size:28px 28px;}