html, body {padding: 0;margin: 0;min-height: 100%;height: 100%;}
#app {background: #fff;}
.fixer-black {position: fixed;left:0;right:0;top:0;bottom:0;margin:auto;width: 203px;height: 150px;background: url(https://og.kakaobank.io/view/6a3ffd2f-9abd-401b-bfcb-d8f8f7ff3c0e);background-size: 203px 150px}
#cv {width: 100%; height: 100%;position: relative;overflow: hidden;}
#cv canvas {width: 100%;height: 100%;position: absolute;left:0;right:0;bottom:0;z-index: 1;}
.content {position: relative;z-index: 1;background: #f2f2f2;text-align: center;overflow: hidden}
.content--logos {position:relative; background: #FFE300;box-sizing: border-box;overflow: hidden;padding-bottom: 70px;padding-top:300px;}
[data-scroll-detector="e1"] {opacity: 1;transition: opacity 0.5s;}
[data-scroll-detector="e1"].is-hide {opacity: 0;}

[data-scroll-trigger="e2"] {opacity: 1;transition: opacity 0.5s, transform 0.4s ease-out;transform: translateY(0px) scale(1);transform-style: preserve-3d;
perspective: 900px;transform-origin: center top;}
[data-scroll-trigger="e2"].is-hide {opacity: 0;transform: translateY(160px) scale(1.1);}

h2 {font-size: 30px;line-height: 40px;font-weight: bold;}
.content-title-desc {line-height: 24px;font-size: 14px;color:#555;margin-top: 16px;}
/*video {margin-top: 20px;}*/
.ir {font-size: 0;color: transparent;}
.home-item {position:relative;height: 100px;width: 300px;margin: 8px auto;border-radius: 15px;}
.home-item__left {position: absolute;left:19px;top:26px;}

.home-item--su {background: #2F47A3;}
.home-item--su .home-item__logo {background: url(https://og.kakaobank.io/view/1d3dbab9-21f9-4f73-8e21-2384988cb6c6);width:29px;height:29px;background-size: 29px 29px;} 

.home-item--mr {background: #0F4C82;}
.home-item--mr .home-item__logo {background: url(https://og.kakaobank.io/view/c3f1a64f-d48c-4e96-9964-b458beff3631);width:29px;height:29px;background-size: 29px 29px;}

.home-item--ts {background: #0D84DA;}
.home-item--ts .home-item__logo {background: url(https://og.kakaobank.io/view/b7a793b6-f8e0-4c8c-834b-b6c90fb2c386);width:29px;height:29px;background-size: 29px 29px;}

.home-item--bn {background: #E15D5D;}
.home-item--bn .home-item__logo {background: url(https://og.kakaobank.io/view/3c838f97-0e44-46de-a818-b1c0cc265df9);width:29px;height:29px;background-size: 29px 29px;}

.home-item--sh {background: #0D84DA;}
.home-item--sh .home-item__logo {background: url(https://og.kakaobank.io/view/198d1d76-9be8-4a6d-b74d-c661b5a38d95);width:29px;height:29px;background-size: 29px 29px;}

.home-item--shy {background: #0D84DA;}
.home-item--shy .home-item__logo {background: url(https://og.kakaobank.io/view/f66a2fcf-a379-432b-804b-70d466ef2bcd);width:29px;height:29px;background-size: 29px 29px;}

.home-item--kb {background: #8F8277;}
.home-item--kb .home-item__logo {background: url(https://og.kakaobank.io/view/9cbc5a5e-dcb4-4fbc-8950-200a9cbd8f40);width:29px;height:29px;background-size: 29px 29px;}

.home-item--ku {background: #1760AD;}
.home-item--ku .home-item__logo {background: url(https://og.kakaobank.io/view/c84177ba-5aa4-4d37-bac8-c314f146e465);width:29px;height:29px;background-size: 29px 29px;}

.home-item--nh {background: #4BBA64;}
.home-item--nh .home-item__logo {background: url(https://og.kakaobank.io/view/47b53e66-d506-4fa3-bb4f-271f937b2cfa);width:29px;height:29px;background-size: 29px 29px;}

.home-item--ur {background: #0D84DA;}
.home-item--ur .home-item__logo {background: url(https://og.kakaobank.io/view/3d048efa-27d6-44f6-8cf4-459b88516717);width:29px;height:29px;background-size: 29px 29px;}

.home-item--po {background: #E15D5D;}
.home-item--po .home-item__logo {background: url(https://og.kakaobank.io/view/9a4583a8-f523-48ce-8651-422bed79bcb6);width:29px;height:29px;background-size: 29px 29px;}

.home-item--hn {background: #369176;}
.home-item--hn .home-item__logo {background: url(https://og.kakaobank.io/view/04f030ba-325e-46df-859c-48a3ee086cb1);width:29px;height:29px;background-size: 29px 29px;}

.home-item--sb {background: #4BBA64;}
.home-item--sb .home-item__logo {background: url(https://og.kakaobank.io/view/7ee6bcaf-e8aa-4311-9b7a-2b17238d9746);width:29px;height:29px;background-size: 29px 29px;}

.home-item--sa {background: #1760AD;}
.home-item--sa .home-item__logo {background: url(https://og.kakaobank.io/view/ae4d292e-4f7c-4a95-9bb8-2d87d47ffcd5);width:29px;height:29px;background-size: 29px 29px;}

.home-item--ht {background: #8F8277;}
.home-item--ht .home-item__logo {background: url(https://og.kakaobank.io/view/bde223d8-6952-4e22-be2b-7b5999f052db);width:29px;height:29px;background-size: 29px 29px;}

.home-item--last {position:relative;width: 300px;margin: 8px auto;border-radius: 15px;height: 53px;}
.home-item__logo {display: block;width:29px;height:29px;float:left;margin-top:4px;}
.home-item__desc {margin-left:29px;text-align: left;padding-left:8px;color:#fff;}
.home-item__name {opacity: 0.7;font-size: 13px;line-height: 15px;padding-bottom:4px;}
.home-item__cost {font-size:16px;line-height: 17px;}
.home-item--last__txt {display: block;margin: auto;position: absolute;left:0;right:0;top:0;bottom:0;width:151px;height: 20px;background: url(https://og.kakaobank.io/view/5efb04e1-9e55-4dfc-ad1d-dce0ffed4eb4); background-size: 151px 20px;}
.img-dots {display: block;position:absolute;top:14px;right:20px;background: url(https://og.kakaobank.io/view/a931e21e-b531-4a43-befa-8b849a797b22);background-size: 19px 18px;width:19px;height:18px;}
.img-transfer {display: block;position:absolute;bottom:14px;right:20px;background: url(https://og.kakaobank.io/view/d6f2c5de-82af-4afb-b080-7b7b1f70db43);background-size: 47px 30px;width:47px;height:30px;}
.notice > li {padding-left: 6px;position: relative}
.notice > li:before {content: "・";display: inline-block;width:10px;position: absolute;left:-6px;top:0;bottom:0;margin:auto;}

.popups {position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 9;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: 304px;padding: 0 20px;margin: 0 auto;}
.popups .title img,.popups .content img,.popups .btns img {max-width: 276px;}
.popups.full .pop-content {width: 100%;max-width: none;padding: 0;margin: 0;}
.popups .pop-content-inner {background-color: #fff;font-size: 0;border-radius: 16px;padding: 40px 14px 14px;}
.popups .title {position: relative;display: block;text-align: center;font-size: 20px;line-height: 30px;font-weight: bold;}
.popups .title svg {width: 100%;height: 100%;}
.popups .btns {margin-top: 35px;}
.popups img {width: 100%;}
.list .popups img {width: 100% !important;}
.popups .ok-btn {display: block;width: 100%;background-color: #ffe400;text-align: center;font-size: 20px;line-height: 24px;padding: 18px 0 17px;border-radius: 10px;font-weight: 700;}
.popups .ok-btn svg{vertical-align: top;}
.popup-share {bottom: 0;padding: 0;}
.popup-share .pop-content {position: absolute;left: 0;bottom: -351px;transition:bottom 0.3s;}
.popup-share .bg {opacity: 0;transition:opacity 0.3s;}
.popup-share.show .pop-content {bottom: -50px;}
.popup-share.show .bg {opacity: 1;}
.popup-share.popups .pop-content-inner {max-width: 375px;margin: 0 auto;padding: 10px 18px 81px 17px;border-radius: 30px 30px 0 0;}
.popup-share .btn-close {position: relative;width: 35px;height: 5px;border-radius: 20px;text-indent: -9999px;background: #EAECEF;}
.popup-share .pop-share-btn-list {margin-top: 35px;}
.popup-share .pop-share-btn-list button {display: inline-flex;align-items: center;justify-content: center;width: 100%;height: 60px;border-radius: 15px;background: #F1F1F1;}
.popup-share li + li {margin-top: 10px;}
.popup-share .pop-share-btn-icon {margin-right: 7px;width: 22px;height: 26px;}
.popup-share .share-btns button:after {content: none;}
.popup-share .pop-share-btn-list .kakaotalk {background: #FAE200;}
.popup-share .pop-share-btn-list .facebook {background: #1877F2;}
.fixer-white {position: fixed;left:0;right:0;top:0;bottom:0;margin:auto;width: 203px;height: 150px;background: url(https://og.kakaobank.io/view/a03aff6a-13a0-4a9b-a558-740dc771f003);background-size: 203px 150px;opacity: 1;transition: opacity 0.5s;}
.fixer-white.is-hide {opacity: 0;}

.content-fixer {
	clip-path: inset(0 0 0 0);
}

.video-wrapper {position: relative;margin-left:50%;width:640px;height:640px;transform: translateX(-320px);margin-top:20px;}

.video {width:640px;height: 640px;}

.video-shadow {position: absolute;left:0;right:0;top:0;bottom:0;box-shadow: 0px 0px 40px 20px #f2f2f2 inset;}

.openbanking-link {display:inline-block;width:141px;height:24px;background: url(https://og.kakaobank.io/view/e6dcb902-db74-4f73-8eb1-994d69da42ee);background-size: 141px 24px;margin-top: 16px;}

.addbank-link {display:inline-block;width:117px;height:24px;background: url(https://og.kakaobank.io/view/9f6d87ae-5bd0-4615-a523-c8ffd826f24f);background-size: 117px 24px;margin-top: 16px;}

.content-sub-desc {font-size:12px;line-height: 20px;}

.btn-share {display:inline-block;width:188px;height:75px;background: url(https://og.kakaobank.io/view/1eca8048-20f1-4b4f-9cd2-4ceaf63cb472);background-size: 188px;height:75px;border-radius:75px;margin-top: 40px;box-shadow: -50px 50px 80px rgb(0,0,0,0.25);}

.footer {position: relative;background: #222222;color:#fff;padding:0px 18px;}

.footer__content {padding: 80px 0px 171px;max-width:375px;margin:auto;}

.notice {margin-top: 40px;line-height: 26px;font-size: 15px;}

.deliberation {margin-top: 30px;color:#f1f1f1;font-size:17px;font-weight: bold;line-height: 26px;}

.offset-top {
	position: relative;
	margin-top: -60px;
}

.btn-footer {position: relative;display: block;width:100%;max-width: 375px;box-sizing: border-box;height:64px;margin: auto;background: #FFE300;border-radius: 18px;}
.btn-footer__txt {position: absolute;margin:auto;left:0;right:0;top:0;bottom:0;display: block;width:170px;height:22px;background: url(https://og.kakaobank.io/view/9732f971-500f-4cfd-9b02-2cd7b5621263);background-size: 170px 22px;}

.down-arrow {display: block;width:45px;height:45px;background: red;position: fixed;left:0;right:0;bottom:10px;margin: auto;background: url(https://og.kakaobank.io/view/146d56bf-1d9b-4049-af6d-590713b4bbc6);background-size:45px 45px;animation: arrow 1s infinite;}
.down-arrow.is-active {position: absolute;}
@keyframes arrow {
	0% {transform: translateY(0px)}
	50% {transform: translateY(10px)}
	100% {transform: translateY(0px)}
}