@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: 'Pretendard','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;}

*{ font-family: 'Pretendard','Apple SD Gothic Neo', 'Malgun Gothic','맑은 고딕', system-ui, sans-serif }
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/b434a1f1-7132-484e-9a22-ca81eb766d0a);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/ceef29cc-f388-418e-8996-65e2255b507d);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/50731cda-903c-46cb-b9e1-b43ac218727b);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/bbfd9249-c1b2-4582-bd5c-a2690dcff420);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/3ae01e51-02bc-4ade-9ba0-ce0a311fc8ff);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: "";
	position: absolute;
	top: 11px;
	left: 1px;
	display: inline-block;
	width:2px;
	height:2px;
	background:#ffffff;
	border-radius: 50%;
}
.accordion {border-top: 2px solid #f1f1f1;margin-top:21px}
.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/f7bf0ea0-765e-4b5a-ac2d-e4ce0a5fd393);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: 30px;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-card.reward-card--2 {margin-top:20px;padding:30px 0px 40px;}
.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 li::before {content:'';display: block;width: 32px; height:32px; margin:29px auto 10px;background:url(https://og.kakaobank.io/view/95f22247-1bd3-4bd0-bab2-974a005a2d7f) 0 0 no-repeat;background-size: contain;}
.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: 313px;position: relative;}
.block__title {margin-top:20px;font-size:36px;line-height: 50px;margin-bottom:20px;}
.link-more { display: inline-block; margin : 23px auto 0;  height: 60px; background: linear-gradient(93deg, #91D500 0%, #00C696 28.42%, #1A1DFF 99.21%); border-radius: 50px; font-weight: 800; font-size: 16px; line-height: 20px; text-align: center; color: #FFFFFF; padding: 20px 26px; box-sizing: border-box; }
.link-more:after {
	content: '';
	width: 10px;
	height:18px;
	display: inline-block;
	margin: 0 0 0 6px;
	vertical-align: middle;
	background:url(https://og.kakaobank.io/view/9f7aa050-37d6-4f3c-a003-ebf77ab31932) 0 0 no-repeat;
	background-size: contain;
}
.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/57a21a6a-e3be-4609-ab86-09a33d8f494c);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/3eaed292-90df-4360-ad87-f38e416cc8aa);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/79330e58-2216-4012-8639-8a1ebdb99145);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/dc4eb903-ec1e-4354-9a47-22fd8c9ed558);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/a56de2b7-d7f6-4ed1-9238-8ae3db0f48f5);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/14f1b002-ac57-4b40-886c-890a18816ba8);background-size:  285px 64px;border-top:64px solid #fff;}
.block--first {margin-top:0px !important}
.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: 78px;background: url(https://og.kakaobank.io/view/f73c859d-4e6d-4893-94bf-acfee435eedd);background-size: 303px 78px;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/6fd04414-f790-427a-bc65-bc16d12ff832);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/f81d4806-e4f6-4813-8c2c-9e20337332de);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/b561468f-ba24-477b-b52a-ae48bd69d184);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/f81d4806-e4f6-4813-8c2c-9e20337332de);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/6fd04414-f790-427a-bc65-bc16d12ff832);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/4e9d61d3-abc3-4496-910b-eb85bdb1046a);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/80f411f3-58c0-45f2-9ac6-840beb325918);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: 140px;}
.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: 277px;width: 266px;background: url(https://og.kakaobank.io/view/909a78b5-17f1-4d47-b79f-f02b94ae1649) no-repeat;background-size: contain}
.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/32841881-f8df-4a90-ad85-bd2c043d685c);
	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:89px;height:93px;background: url(https://og.kakaobank.io/view/941c42cb-cdd3-4b24-845f-50598a2dd893);background-size: contain;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/d179c6cd-fc5d-4fa9-80ed-8785b52fb7df);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/cf5b9153-e1c0-45b2-91d6-c7ead3b098fe);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: block;
	max-width: 315px;
	width: 100%;
	margin: auto;
	height: 70px;
	background: url(https://og.kakaobank.io/view/5533d8a7-70d9-4676-95f3-14a2417cfdec);
	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/6d1b3010-6919-4b7c-a3c1-2005adf122aa);
	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;
}

.reward-title {display: inline-block;margin-bottom:32px;padding:10px 15px;background-color: rgba(255,255,255,0.2);border-radius: 30px;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: 144px auto 65px;width:284px;height:75px;background:url(https://og.kakaobank.io/view/6ba1e297-8bbe-4b6f-8b1e-1c9ee27536fe);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/a3e2e16d-062e-4460-849f-ae7b353e2590);background-size: 223px 78px;}
.popup-txt-done {width: 219px;height: 107px;margin:auto;background: url(https://og.kakaobank.io/view/688d7ffb-87e3-4821-a9b5-37e2a4507cee);background-size: 219px 107px;}
.popup-txt-end {width: 156px;height: 24px;margin:auto;background: url(https://og.kakaobank.io/view/e5fe5d21-45da-4a26-8162-ff53e034ed02);background-size: 156px 24px;}
.popup-txt-app {width: 139px;height: 51px;margin:auto;background: url(https://og.kakaobank.io/view/e9983203-599d-4887-9427-131000c405f9);background-size: 139px 51px;}
.popup-txt-already {width: 219px;height: 107px;margin:auto;background: url(https://og.kakaobank.io/view/43aae3c5-00a2-4bc9-b582-4a44329c07ff);background-size: 219px 107px;}
.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 .intent svg {margin-right: 7px;}
.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.kakaobank.io/view/983e75d9-61bf-43e7-a850-5fdfad004b54) 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/7ac07630-16fb-433e-923e-76cc4a9cda42);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/c25749f5-b52e-42d3-8706-676ceaf6beab);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/02e6ea8c-6050-4ccb-b4fb-bbd703e8286c);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/b17dc72a-df05-4cf4-8c6f-2eccd33948ed);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;

background: #12d4c9; /* Old browsers */
background: -moz-linear-gradient(left,  #90D300 0%, #16FFC7 40%, #1A1DFF 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #90D300 0%,#16FFC7 40%,#1A1DFF 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #90D300 0%,#16FFC7 40%,#1A1DFF 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#90D300', endColorstr='#1A1DFF',GradientType=1 ); /* IE6-9 */
}
.img-chk {display:block;width: 27px;height: 27px;margin:0px auto 12px;background: url(https://og.kakaobank.io/view/80e796d1-5115-4863-99a4-1ed2bc06eb41);background-size: 27px 27px;}


@media (orientation: landscape) {
	.section{
	min-height: 450px;
	}
	.ico-downarrow{display: none;}
}