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

body {font-family: Pretendard, sans-serif;background:#111;color:#fff;}

.section--first {height: 100vh;}
.logo-kabang {display:block;position:absolute;width:89px;height:14px;left:30px;top:30px;background: url(https://og.kakaobank.io/view/74d41b7d-a168-44fd-bad1-e0330ecbfacc);background-size:  89px 14px;color:transparent;font-size:0;}
.section--first__bg {height:100%;width:100%;object-fit: cover;}
.section--first__ani {position: absolute;left:0;right:0;top:50%;margin:auto;font-size: 0;transform:translateY(-50%);}

.img-txt--title--01 {display: block;width: 286px;height: 55px;margin:auto;background: url(https://og.kakaobank.io/view/71e73436-59ea-4dce-bf96-0338d8304bc6);background-size:  286px 55px;}
.img-txt--title--02 {display: block; width: 285px;height: 63px;margin:12px auto auto;position: relative;overflow: hidden;}
.img-txt--title--01, .img-txt--title--02 {opacity:0;transform:translateY(-6px);transition:transform 0.3s, opacity 0.3s;}
.img-txt--title {display: block;position: absolute;width: 286px;height: 55px;left:0;right:0;top:10px;margin:auto;background: url(https://og.kakaobank.io/view/e07a05ce-ca88-4682-b54d-37dba43673fd);background-size:  286px 55px;opacity:0;transform:translateY(-6px);transition:transform 0.3s, opacity 0.3s;}
.img-txt--desc {font-weight: bold; display: block;position: absolute;width:243px;height: 53px;left:0;right:0;top:95px;margin:auto;background:url(https://og.kakaobank.io/view/7a78d496-1aea-4f99-9c82-c0586f78b98a);background-size: 243px 53px; opacity:0;transform:translateY(-6px);transition:transform 0.3s, opacity 0.3s;}
.img-txt--title.is-active {transform: translateY(0px);opacity: 1;transition:transform 0.8s, opacity 0.8s;}
.img-txt--title--01.is-active,
.img-txt--title--02.is-active,
.img-txt--desc.is-active,
.downarrow-box.is-active,
.btn-video.is-active {transform: translateY(0px);opacity: 1;}
.btn-video {color:transparent;font-size:0;display: block;width: 169px;height: 58px;margin:155px auto auto;background: url(https://og.kakaobank.io/view/d9b10ff1-289b-40f8-ae99-8719553eb9d6);background-size:  169px 58px; transform: translateY(-6px);opacity: 0;transition:transform 0.3s, opacity 0.3s;}
.downarrow-box {transform: translateY(-6px);opacity: 0;transition:transform 0.3s, opacity 0.3s;}

.notice {max-width: 315px;margin: auto;padding:80px 30px 170px;color:#f1f1f1;}
.notice h2 {font-size: 24px;line-height: 38px;margin-bottom:40px;}
.items {font-size:15px;line-height: 26px;}
.items>li {padding-left:8px;display: block;position: relative;}
.items>li:before {content: "・";display: block;position: absolute;left:0;top:0;margin:auto;font-family: 'Apple SD Gothic Neo', 'Malgun Gothic','맑은 고딕', system-ui, sans-serif;}
.accordion {border-top: 2px solid #f1f1f1;margin-top:30px}
.accordion__item h3 {display: block;height:21px;margin-top:20px;position: relative;line-height: 21px;}
.accordion__switch {position: absolute; top:0;right:20px;bottom:0; width:22px;height:22px;margin:auto;display:block;background: url(https://og.kakaobank.io/view/22a0f39e-8ab2-4194-9ff5-3ae2dae13d83);background-size: 22px 22px;-webkit-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition: transform 0.3s;transition: transform 0.3s;}
.accordion__content {display:none;margin-top:20px;}
.accordion__label {cursor: pointer;}
.accordion__item.is-active .accordion__switch {-webkit-transform:rotate(135deg);transform:rotate(135deg);}
.accordion__item.is-active .accordion__content {display: block;}

.accordion__item.is-active .items {animation: showDown 0.3s}
@keyframes showDown {
	0% {transform: translateY(-6px);}
	100% {transform: translateY(0px);}
}

.reward-card {border-radius: 40px;position: relative;background: rgba(255,255,255,0.1);padding:40px 28px 50px;max-width: 307px;margin:auto;box-sizing: border-box;text-align: center;font-size:18px;line-height: 21px;}
.reward-winner {margin-bottom: 50px;}
.reward-winner li+li {padding-top: 28px;}
.reward-step {width: 100%;text-align: left;}
.reward-step li+li {margin-top:32px;}
.reward-step__no {font-size:16px;display: block;width: 56px;margin:auto;background:url(https://og.kakaobank.io/view/1aebda27-5b63-4795-bb5c-e534dfb11c0f) 0 10px no-repeat;text-align: center;padding-bottom:4px;background-size: 56px 10px;}
.reward-step__cont {margin-top:16px;text-align: center;font-size:18px;line-height: 28px;}

.block {margin:auto;max-width: 375px;text-align: center;position: relative;}
.block+.block {margin:120px auto 0px;}
.block__media {display:block;width:295px;height:255px;margin:auto;}
.block__media video {width:100%;height:100%;object-fit: cover;}
.block__media--01 {width: 369px;height: 413px;position: relative;}
.block__title {margin-top:20px;font-size:36px;line-height: 50px;margin-bottom:20px;}
.link-more {display:block;widtH:95px;height:25px;font-size:16px;line-height: 25px;background: url(https://og.kakaobank.io/view/a8d8a74b-e40e-4226-8db1-ec59564e6380);background-size: 95px 25px; color:transparent;margin:auto;}

.toggle-showup {
	visibility: hidden;
	outline: 10px solid #fff;
	transform: translateY(-40px);
}
.toggle-showup.is-active {
	visibility: visible;
	transform: translateY(-64px);
	transition: transform 0.2s;
}
.ani-bottom {position:absolute;left:0;right:0;bottom:0;height:10px;background: #fff;}
.section--first__ani--block {position: relative;height:55px;}
.ani-showup--01 {width: 285px;height: 64px;position:absolute;left:0;top:0;background: url(https://og.kakaobank.io/view/6527a573-f275-4516-877e-5d2361890a75);background-size:  285px 64px;border-top:64px solid #fff;}
.ani-showup--02 {width: 285px;height: 64px;position:absolute;left:0;top:0;background: url(https://og.kakaobank.io/view/c6844adf-992d-4291-8b7b-0312676cde91);background-size:  285px 64px;border-top:64px solid #fff;}
.ani-showup--03 {width: 285px;height: 64px;position:absolute;left:0;top:0;background: url(https://og.kakaobank.io/view/30c6f2af-c5ec-4220-b63c-8fad31ddf07e);background-size:  285px 64px;border-top:64px solid #fff;}
.ani-showup--04 {width: 285px;height: 64px;position:absolute;left:0;top:0;background: url(https://og.kakaobank.io/view/b0032b8c-8274-44b0-94b9-6edf6a800c74);background-size:  285px 64px;border-top:64px solid #fff;}
.ani-showup--05 {width: 285px;height: 64px;position:absolute;left:0;top:0;background: url(https://og.kakaobank.io/view/38081059-327f-4312-82f4-83d02012ca0e);background-size:  285px 64px;border-top:64px solid #fff;}
.ani-showup--06 {width: 285px;height: 64px;position:absolute;left:0;top:0;background: url(https://og.kakaobank.io/view/ba327da6-7cd6-45e9-9b2d-71647281b27b);background-size:  285px 64px;border-top:64px solid #fff;}
.block--first {/* padding-top:80px; */padding-top:40px;}
.block--first .block__title--wrapper {position: relative;display: block;width: 303px;height: 123px;margin:auto;}
.block--first .block__title {position: relative; font-size:0px;line-height: 33px;display: block;width: 303px;height: 123px;background: url(https://og.kakaobank.io/view/88a17504-e262-4e0b-94bc-30c31a10d3f1);background-size: 303px 123px;margin: 12px auto;}
.grad01 {opacity: 0.5; pointer-events: none;position: absolute;left:-280px;top:0;width: 443px; height: 493px;background: url(https://og.kakaobank.io/view/78e51525-01e3-4d85-89b0-620adf122b4c);background-size: 443px 493px;}
.grad02 {opacity: 0.8; pointer-events: none;position: absolute;right: -240px;bottom: -250px;width: 429px;height: 533px;background: url(https://og.kakaobank.io/view/504fe3f9-2b74-4c13-8d5e-1e2f95770809);background-size: 429px 533px;}
.grad03 {opacity: 0.5; pointer-events: none;position: absolute;right: -280px;bottom: -230px;width: 590px;height: 529px;background: url(https://og.kakaobank.io/view/84703f11-8f97-48ef-bacc-78114bb00a6b);background-size: 590px 529px;}
.grad02-2 {opacity: 0.5; pointer-events: none;position: absolute;left: -240px;bottom: -250px;width: 429px;height: 533px;background: url(https://og.kakaobank.io/view/504fe3f9-2b74-4c13-8d5e-1e2f95770809);background-size: 429px 533px;}
.grad01-2 {opacity: 0.5; pointer-events: none;position: absolute;right: -300px;top: 90px;width: 443px;height: 493px;background: url(https://og.kakaobank.io/view/78e51525-01e3-4d85-89b0-620adf122b4c);background-size: 443px 493px;}
.grad04 {opacity: 0.5; pointer-events: none;position: absolute;left: -210px;top: 90px;width: 371px;height: 389px;background: url(https://og.kakaobank.io/view/78ce53a3-c91f-4d44-983d-ab37f77ded2a);background-size: 371px 389px;}
.grad05 {opacity: 0.5; pointer-events: none;position: absolute;right: -230px;bottom: -30px;width: 477px;height: 505px;background: url(https://og.kakaobank.io/view/ea54f0e0-8095-4061-9d85-d98cd532e2fe);background-size: 477px 505px;}
.txt-event {display: inline-block;margin:auto;font-size:20px;text-align: center;line-height: 20px;font-weight: bold;color:#000;background: #fff;padding:6px 8px;}
.event-title-sup {margin-top:24px;font-size: 22px;}
.block.block--event {margin-top: 180px;}
.block--event .block__title {margin-top:10px;font-size:42px;line-height: 56px;}
.event-desc {font-size:17px;line-height: 27px;padding-top:20px;}
.event-date {font-size:17px;padding-top:20px;}
.block--event .block__media{position: relative;height: 300px;width: 315px;}
.grad-txt01 {display: block;position: absolute;left:0;bottom: 46px;width: 178px;height: 21px;background: url(https://og.kakaobank.io/view/70c3bd2e-aa56-4a38-aac4-e68c1acc7c00);background-size: 178px 21px;}
.ani-floating {
	animation: floating 1.5s infinite;
}
.ico-downarrow {
	display: block;
	width:45px;
	height:45px;
	position: absolute;
	left:0;
	right:0;
	bottom:30px;
	margin:auto;
	background:url(https://og.kakaobank.io/view/a4c0b39b-3a76-4e5d-b7fc-4d15319a699d);
	background-size:  45px 45px;
	transform: translateY(0px);
}
@keyframes floating {
	0% {transform: translateY(0px)}
	50% {transform: translateY(10px)}
	100% {transform: translateY(0px)}
}
.downarrow-box {
	position: absolute;left:0;right:0;bottom:0;width:45px;height:45px;margin:auto;opacity:0;
	transition: opacity 0.5s;
}
.section {
	position: relative;
	overflow: hidden;
}

.scroll-card {position: absolute;left:50%;top: 110px;display:block;width:170px;height:170px;background: url(https://og.kakaobank.io/view/44d577ed-c935-4aba-a13e-5af0d9c0a95e);background-size: 170px 170px;margin-left: -170px;transition: transform 0.1s}
/* .scroll-money {position: absolute;left:50%;top: 250px;display:block;width:118px;height:144px;background: url(https://og.kakaobank.io/view/9c2ca7c1-9475-41a3-9554-72e7bd05acf2);background-size: 118px 144px;margin-left: 50px;transition: transform 0.1s} */
.scroll-bankroll {position: absolute;left:50%;top:0;display:block;width:180px;height:180px;background: url(https://og.kakaobank.io/view/c944d7e0-869c-4d14-8104-0cd18c456f4a);background-size: 180px 180px;margin-left: 0px;transition: transform 0.1s}

.bottom-wrapper {
	position: fixed;
	opacity: 0;
	left: 0;
	right: 0;
	bottom: -60px;
	margin: auto;
	width: 100%;
	text-align: center;
	transition: opacity 0.3s, bottom 0.3s;
}
.bottom-wrapper.is-active {
	transition: opacity 0.5s, bottom 0.5s;
	opacity: 1;
	bottom: 40px;
}
.btn-bottom {
	display: none;
	max-width: 315px;
	width: 100%;
	margin: auto;
	height: 70px;
	background: url(https://og.kakaobank.io/view/c5b1fe59-161b-4441-b04c-cefdf08572d3);
	background-size: 100% 100%;
	border-radius: 20px;
	position: relative;
	line-height: 70px;
	font-size: 20px;
	font-weight: bold;
	color:#fff;
	text-align: center;
}
.btn-bottom:after {
	content: "";
	vertical-align: middle;
	display: inline-block;
	width: 10px;
	height: 16px;
	background: url(https://og.kakaobank.io/view/70dea958-a4bb-4dc0-b79a-49b1c4f52204);
	margin-left: 6px;
}
.btn-bottom.is-active {display: block;}

.btn-bottom.btn-bottom--notyet {
	background-image: none;
	background-color: #bbb;
}
.btn-bottom.btn-bottom--notyet:after {
	content: none;
	display: none;
}

.section--reward {padding-bottom: 60px}
.reward-title {display: inline-block;width:103px;margin-bottom:32px;padding:10px;background-color: rgba(255,255,255,0.2);border-radius: 50px;font-size: 16px;font-weight: bold;line-height:19px;text-align: center;box-sizing: border-box;}
.reward-winner {text-align: left;}
.right {float:right}
.reward-hr {margin: 0 auto 50px;border-top:1px solid #404040;}
.section--info {background:#222;}
.btn-share {display: block; margin: 60px auto 0px;width:284px;height:75px;background:url(https://og.kakaobank.io/view/3be6aa6f-5b4d-4c4d-b5d2-04bcf941db9a);background-size: 284px 75px;font-size:0;color:transparent;}


/* popup */
.popup {position: fixed;width: 100%;height: 100%;left: 0; top: 0;background: rgba(0,0,0,0.5);z-index: 10;display: none;}
.popup.is-active {display: block;}
.popup-layer {position: absolute;left: 0;right: 0;top: 50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);margin: auto;width: 305px;padding: 40px 14px 14px;margin:auto;background: #fff;border-radius: 20px;}
.popup-btn {display:block;text-align: center;margin-top: 35px;background:#111;border-radius: 10px;font-weight:bold;color:#fff;font-size:20px;line-height: 60px;width: 100%;}
.popup-txt-required {width: 223px;height: 78px;margin:auto;background: url(https://og.kakaobank.io/view/a07d15c1-63e6-46ab-a272-3dbcf4a831e8);background-size: 223px 78px;}
.popup-txt-done {width: 166px;height: 85px;margin:auto;background: url(https://og.kakaobank.io/view/1b2bfbc3-2bbf-4fc7-a978-efebe1038923);background-size: 166px 86px;}
.popup-txt-end {width: 156px;height: 24px;margin:auto;background: url(https://og.kakaobank.io/view/07305d7e-6bcd-42cd-9016-4a2caf7b00ed);background-size: 156px 24px;}
.popup-txt-app {width: 139px;height: 51px;margin:auto;background: url(https://og.kakaobank.io/view/a2af7b21-4ec4-46f1-b51e-0a188ebc95b5);background-size: 139px 51px;}
.popup-txt-already {width: 156px;height: 24px;margin:auto;background: url(https://og.kakaobank.io/view/85efec9a-3b19-408d-adcc-7ae04a4f6ce3);background-size: 156px 24px;}
.ir {font-size:0;color:transparent;}

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

.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);z-index: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:transparent;font-size:0;width:36px;height:36px; background:url('https://og-test.kabang.io/view/bcc2d747-fd9a-41fd-b979-8a16b0777ba3') 4px 4px no-repeat;background-size:28px 28px;}

#preventDbClik {position: absolute;width: 100%;height:100%;z-index:1;display: none;}

.evt-img--01 {display: block; width: 120px;height: 70px;background: url(https://og.kakaobank.io/view/fc851b20-b29c-43fd-965e-38cb4a97a000);background-size: 120px 70px;position: absolute;left: 32px;top: 23px;}
.evt-img--02 {display: block;width: 263px;height: 210px;background: url(https://og.kakaobank.io/view/7d42c3f5-f004-4f6b-89a3-795c6b3fb943);background-size: 263px 210px;position: absolute;left: 31px;top: -6px;filter: drop-shadow(11px 16px 9px black);}
.evt-img--03 {display: block;width: 170px;height: 90px;background: url(https://og.kakaobank.io/view/3ec13766-e97b-440d-a1a4-9db25dc394ac);background-size:170px 90px;position: absolute;left: 0px;top: 223px;}
.evt-img--04 {display: block;width: 150px;height: 130px;background: url(https://og.kakaobank.io/view/2327c3c4-b9bf-4e03-be49-063ebb7ce302);background-size: 150px 130px;position: absolute;left: 146px;top: 140px;}

[data-scroll-trigger] {opacity: 0;-webkit-transform: translateY(10px); transform: translateY(10px);-webkit-transition: opacity 0.5s, transform 0.5s;transition: opacity 0.5s, transform 0.5s;}
[data-scroll-trigger].is-active {opacity: 1;-webkit-transform: translateY(0px); transform: translateY(0px);}

.has-grad {display: inline-block;position: relative;}
.has-grad span {position: relative;}
.has-grad:before {content: "";display: block;width: 100%;height: 21px;position: absolute;
	bottom:0;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#12d4c9+0,3f8cff+40,ca1be7+100 */
background: #12d4c9; /* Old browsers */
background: -moz-linear-gradient(left,  #12d4c9 0%, #3f8cff 40%, #ca1be7 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #12d4c9 0%,#3f8cff 40%,#ca1be7 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #12d4c9 0%,#3f8cff 40%,#ca1be7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#12d4c9', endColorstr='#ca1be7',GradientType=1 ); /* IE6-9 */
}