@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;}
img {width:100%;}
div:focus,
button:focus,
a:focus {outline: none;-webkit-tap-highlight-color :rgba(0,0,0,0);}

.accessibility button:focus,
.accessibility div:focus,
.accessibility a:focus {outline: auto;}
.accessibility section button.apply-btn:focus {outline: 2px dashed;}
.accessibility nav ul li a:focus {box-sizing: border-box; border: 2px solid #000; border-radius: 3px;}

button, a {
    -webkit-tap-highlight-color : transparent !important;
}

body {overflow: hidden;}
body.on {overflow: visible;}
::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera*/
}

.ir {display:block; font-size:0; text-indent: -99999px; height:0;}
.is-app {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    user-select: none;
}

main {width:100%; overflow: hidden; background-color:#F3F3F3;}
section {position:relative; width:100%; overflow:hidden;}
section.fixed {position:fixed; top:0; left:0; width:100%; height:100%;}
section .inner {max-width:530px; width:100%; padding:0 25px; text-align: center; margin:0 auto; box-sizing: border-box;}
section .innerWidth100 {max-width:100%; padding:0 25px; text-align: center;}

.logo {position:fixed; top:0; left:0; z-index:9;}
.logo .logo-box {position:relative; margin-top:25px; width:135px; opacity:0; transform:translate(0,-50px)}
.logo.on .logo-box { opacity:1; transform:translate(0,0); transition:all 0.6s;}
.logo .logo-box .white {position:absolute; top:0; left:0; opacity: 0;}

.kv {background-color:#F3F3F3; z-index:2;}
.kv ul {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%) scale(1.5); margin-top:40px; width:100%;}
.kv ul li {position:relative;}
.kv .oh {position:absolute; width:256px; top:125px; left:50%; margin-left:-128px;}
.kv .characters {margin:0 0 28px -20px;}
.kv .characters span {display:inline-block; vertical-align: bottom;}
.kv .characters .ry {width:125px;}
.kv .characters .chun {width:87px;}
.kv .kv-text {width:254px; margin:0 auto;}
.kv .coming-text {position:absolute; top:123px; left:50%; width:287px; margin-left:-143px; opacity:0; display: none; transform: translate(0, 100px)}
.kv .oh img {transform:scale(0.3); opacity:0;}
.kv .characters {transform:translate(0, 50px); opacity:0;}
/*.kv .characters span:nth-of-type(1) img {transform: translate(30px,0); opacity:0;}*/
/*.kv .characters span:nth-of-type(2) img {transform: translate(-30px, 0); opacity:0;}*/
.kv .kv-text img {transform:translate(0, 50px); opacity:0;}

.kv.on .oh img {transform:scale(1); opacity:1; transition:all 0.6s;}
/*.kv.on .characters span:nth-of-type(1) img {transform: translate(0,0); opacity:1; transition:all 0.5s 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);}*/
/*.kv.on .characters span:nth-of-type(2) img {transform: translate(0, 0); opacity:1; transition:all 0.5s 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);}*/
.kv.on .characters {transform:translate(0, 0); opacity:1; transition:all 0.6s 0.2s;}
.kv.on .kv-text img {transform:translate(0, 0); opacity:1; transition:all 0.6s 0.3s;}

.dump-section {height:150vh; pointer-events: none;}
#dump-section4 {height:100vh;}

nav {position: fixed; width: 100%; top:-71px;background: #fff; transition:all 0.3s; z-index: 11; transform: translateY(0)}
nav {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

nav.on {transform: translateY(71px)}
nav ul {margin: 0 auto; max-width: 567px; overflow: auto; white-space: nowrap; font-size: 0; text-align: center;}
nav ul li{height: 71px; display: inline-block;font-size: 0; margin: 0; vertical-align: top; background: url("https://og.kakaobank.io/view/fbdc48b0-3e1b-4a74-8505-7ac12efbbca9") top left /357px 304px no-repeat;}
nav ul li a {display: inline-block; width: 100%; height: 100%; text-indent: -9999px; }

nav ul li:nth-child(1) {width: 109px;height: 71px; background-position: -2px -2px;}
nav ul li:nth-child(2) {width: 98px;height: 71px;background-position: -2px -78px;}
nav ul li:nth-child(3) {width: 95px;height: 71px;background-position: -2px -154px;}
nav ul li:nth-child(4) {width: 121px;height: 71px;background-position: -232px -2px;}
nav ul li:nth-child(5) {width: 139px;height: 71px;background-position: -204px -154px;}
nav ul li.on:nth-child(1) {width: 109px;height: 71px;background-position: -117px -2px;}
nav ul li.on:nth-child(2) {width: 98px;height: 71px;background-position: -106px -78px;}
nav ul li.on:nth-child(3) {width: 95px;height: 71px;background-position: -103px -154px;}
nav ul li.on:nth-child(4) {width: 121px;height: 71px;background-position: -211px -78px;}
nav ul li.on:nth-child(5) {width: 139px;height: 71px;background-position: -2px -230px;}


nav ul:after {content: ""; display: block; clear: both;}
nav ul.smooth{scroll-behavior: smooth;}

.videos {position:fixed; top:0; height:100vh; overflow: hidden;}
.videos .inner {width:100%; height:100vh; padding:0;}
.videos .video-area {position:relative; width:100%; height:100%;}
.videos .video-area .bg {position:absolute; top:0; left:0; width:100%; height:100%; background:url("https://og.kakaobank.io/view/f7fb208a-fe82-492d-b220-ced845cbb99d") center / cover;}
.videos .video-area .black-dimmed {position:absolute; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.2);opacity:0;}
.videos .video-area .play-btn {position:absolute; top:50%; left:50%; margin:-72px -65px; width:131px; opacity:0; transform:translate(0,50px);}
.videos .video-area .mask {position:absolute; top:0; left:0; width:100%; height:100%; background:url("https://og.kakaobank.io/view/e0038ffe-f83b-4454-87f4-f73889bda1a4") center / cover; pointer-events: none; margin-top:-30px;}
.videos .video-area .mask:after {content:""; position:absolute; bottom:-30px; left:0; width:100%; height:32px; background-color:#ffb900;}

.quiz {padding:130px 0 50px; background: #fff;}
.quiz ul li {margin:0 auto;}
.quiz .quiz-wraaper .quiz{padding: 0;}
.quiz .quiz-copy1{max-width: 289px; margin-bottom: 20px;}
.quiz .quiz-copy2{max-width: 206px; margin-bottom: 17px;}
.quiz .quiz-copy3{max-width: 276px; margin-bottom: 29px;}
.quiz .quiz-chun {width: 250px; position: relative; margin-bottom: 11px;}
.quiz .quiz-chun .text{display: block; position: absolute; top:0; left:0px;}
.quiz .quiz-copy4{width: 188px; margin-bottom: 25px;}
.quiz .apply-btn.fin {display: none;}
.quiz .quiz-btn.fin .apply-btn{display: none;}
.quiz .quiz-btn.fin .apply-btn.fin{display: inline-block;}

.kkokkio {padding:50px 0 50px; background: #fff;}
.kkokkio ul li {margin:0 auto;}
.kkokkio .kkokkio-copy1{max-width: 217px; margin-bottom: 18px;}
.kkokkio .kkokkio-copy2{max-width: 285px; margin-bottom: 40px;}
.kkokkio .kkokkio-sub-title1{max-width: 110px; margin-bottom: 40px;}
.kkokkio .kkokkio-motion{max-width: 325px; height: 289px; margin-bottom: 62px;}
.kkokkio .kkokkio-motion video{max-width: 100%; border-radius: 15px;}
.kkokkio .kkokkio-sub-title2{max-width: 91px; margin-bottom: 40px;}
.kkokkio .kkokkio-list li{max-width: 325px; margin-bottom: 10px;}
.kkokkio .kkokkio-btn .fin {display: none;}
.kkokkio .kkokkio-btn.fin .apply-btn{display: none;}
.kkokkio .kkokkio-btn.fin .apply-btn.fin{display: inline-block;}

.kkokkio .toggle {max-width: 325px; background: #FFB800; border-radius: 15px; margin-bottom: 20px;}
.kkokkio .toggle button {position:relative; width: 100%; height: 60px; transition:all 0.3s; line-height: 1;}
.kkokkio .toggle button .text {display: inline-block; width: 81px; height: 13px; vertical-align: top;}
.kkokkio .toggle button:after {content:""; display: inline-block; width:12px; height:6px; margin-left: 8px; vertical-align: middle; background:url("https://og.kakaobank.io/view/77cef2b0-e85a-4bcd-84b0-647417907fb0") no-repeat 0 0 / 100%; transition:all 0.3s;}
.kkokkio .toggle .detail {position: relative; height:0; overflow: hidden;}
.kkokkio .toggle .detail .inner{padding: 25px;}
.kkokkio .toggle .detail hr{position: absolute; width: 275px; bottom: 0; margin: 0; border: solid #fff 1px; opacity: 0.4;}

.kkokkio .toggle.on button:after {transform:rotate(180deg);}
.kkokkio .toggle.on .detail {height:auto;}

.kkokkio .kkokkio-copy3{width: 275px; margin-bottom: 40px;}

.invite {padding:50px 0 75px;}
.invite ul li {margin:0 auto;}
.invite .invite-badge {max-width: 124px; margin-bottom: 40px;}
.invite .invite-copy1 {max-width: 279px; margin-bottom: 15px;}
.invite .invite-copy2 {max-width: 310px; margin-bottom: 40px;}
.invite .swiper {overflow: visible; max-width: 325px; height: 310px; margin-bottom: 40px;}
.invite .swiper-slide {width: 285px; height: 310px; border-radius: 15px; background: #fff;}
.invite .swiper-slide:nth-child(1) video {margin: 36px 0; clip-path: inset(1px 1px);}
.invite .swiper-slide:nth-child(1) img {width: 209px;}
.invite .swiper-slide:nth-child(2) video {margin: 70px 0; clip-path: inset(1px 1px);}
.invite .swiper-slide:nth-child(2) img {width: 210px;}
.invite .swiper-slide video{width: 100%;}


.openbank {padding:100px 0 50px; background: #fff;}
.openbank ul li {margin:0 auto;}
.openbank .openbank-copy1{max-width: 276px; margin-bottom: 17px;}
.openbank .openbank-copy2{max-width: 306px; margin-bottom: 30px;}
.openbank .openbank-image1{max-width: 325px; margin-bottom: 27px;}
.openbank .openbank-copy3{max-width: 186px; margin-bottom: 40px;}
.openbank .openbank-btn .fin {display: none;}
.openbank .openbank-btn.fin .apply-btn{display: none;}
.openbank .openbank-btn.fin .apply-btn.fin{display: inline-block;}

.share {padding:50px 0 70px; background: #fff;}
.share ul li {margin:0 auto;}
.share .share-copy1 {max-width:223px; margin-bottom:17px;}
.share .share-copy2 {max-width:191px; margin-bottom:30px;}
.share .share-product {max-width: 325px; background-color:#F3F3F3; border-radius: 15px; padding:43px 0 32px; margin-bottom:39px; box-sizing: border-box}
.share .share-product .product {width:217px; margin:0 auto 37px;}
.share .share-product .product-copy {max-width:116px;}
.share .share-btns {font-size:0;}
.share .share-btns button {width:70px; display: inline-block; margin:0 10px;}
/*.share .share-btns button:nth-of-type(2) {margin:0 20px;}*/

.info {padding:60px 0 130px 0; background-color:#f3f3f3;}
.info .tit {display: block; width:133px;}
.info dl {margin-top:40px; text-align: left; margin-bottom:40px;}
.info dl:last-child {margin-bottom:0;}
.info dl dt {font-size:19px; line-height: 23px; font-weight: 700; margin-bottom:20px;}
.info dl dd {position:relative; font-size:15px; line-height: 24px; padding-left:9px; color: #444444;}
.info dl dd:before {content:"·"; position:absolute; top:0; left:0;}

.info .toggle {text-align: left; margin-bottom:20px;}
.info .toggle:last-child {margin-bottom:0;}
.info .toggle button {position:relative; padding:20px; background-color:#fff; width:100%; border-radius: 10px; text-align:left; font-size:19px; line-height: 25px; font-weight: bold; transition:all 0.3s;}
.info .toggle button:after {content:""; position:absolute; top:50%; right:20px; width:17px; height:10px; margin-top:-5px; background:url("https://og.kakaobank.io/view/927ab470-c2af-41c7-9da7-fcef666cda83") no-repeat 0 0 / 100%; transition:all 0.3s;}
.info .toggle .detail {height:0; overflow: hidden;}
.info .toggle .detail ul {padding:20px 0;}
.info .toggle .detail ul li {position:relative; font-size:15px; line-height: 24px; padding-left:9px;}
.info .toggle .detail ul li:before {content:"·"; position:absolute; top:0; left:0;}

.info .toggle.on button {background-color:#FFC700;}
.info .toggle.on button:after {transform:rotate(180deg);}
.info .toggle.on .detail {height:auto;}


.info .serial {display: block; font-size:16px; line-height: 28px; font-weight: 700; text-align: left;}

.apply-btn {width: 280px; height: 88px; padding: 30px 0; border-radius: 60px; background: #102438; line-height: 1;}
.apply-btn.disabled {background: #ccc;}
.apply-btn img {vertical-align: top;}

.float-btn {position:fixed; bottom:20px; left:0; width:100%; z-index:10; opacity:0; transform:translate(0, 100px); overflow:visible;}
.float-btn.on {opacity:1; transform:translate(0, 0); transition:all 0.6s;}
.float-btn .inner {max-width:670px; padding:0 20px; box-sizing: border-box;}
.float-btn .arrow {width:25px; margin: 0 auto 26px;
    animation: bounce 2s infinite 2s;
}
.float-btn button {width:100%; background-color:#091726; padding:20px 0; text-align: center; border-radius: 15px;}
.float-btn button img {width:150px;}

.inmotion li {transform:translate(0,50px); opacity:0; transition:all 0.6s;}
.inmotion li:nth-of-type(1) {transition-delay: 0s;}
.inmotion li:nth-of-type(2) {transition-delay: 0.1s;}
.inmotion li:nth-of-type(3) {transition-delay: 0.2s;}
.inmotion li:nth-of-type(4) {transition-delay: 0.3s;}
.inmotion li:nth-of-type(5) {transition-delay: 0.4s;}
.inmotion li:nth-of-type(6) {transition-delay: 0.5s;}
.inmotion li:nth-of-type(7) {transition-delay: 0.6s;}
.inmotion li:nth-of-type(8) {transition-delay: 0.7s;}
.inmotion li:nth-of-type(9) {transition-delay: 0.8s;}
.play-inmotion .inmotion li {transform:translate(0,0); opacity:1;}

.inmotion .rotate{transform:rotate(-45deg); opacity:0; transition:all 0.6s;}
.inmotion .quiz-chun .rotate{transition-delay: 1.5s;}
.play-inmotion .inmotion .rotate{transform:rotate(0); opacity:1;}

.popups {display: none; position:fixed; top:0;right:0;bottom:0;left:0; z-index:999;}
.popups .modal-table {display:table;width:100%;height:100%;table-layout:fixed;}
.popups .modal-cell {display:table-cell; width:100%;height:100%;vertical-align:middle;text-align:center;}
.popups.on {display: block;}
.popups .dimmed {position: absolute; width: 100%; height: 100%; background: #000; opacity: 0.6;}
.popups .modal-content{position: relative; max-width: 325px; margin: 0 auto; padding: 30px; background: #fff; border-radius: 15px; box-sizing: border-box;}

.popups.alert .modal-content{max-width: 300px; padding: 12px; position: relative; }
.popups.alert .close-btn{position: absolute; top:-45px; right:0px; width: 23px; height: 23px;}
.popups.alert .apply-btn {width: 100%; height: 60px; padding: 0; background: #FFB800; border-radius: 10px;}
.popups.alert .apply-btn a{display: inline-block; width: 100%; padding: 22px 0 22px;  box-sizing: border-box;}

.popups .copy{text-align: center;}
.popups.popup-end .copy{padding-top: 34px; margin: 0 auto 38px;}
.popups.popup-app .copy{padding-top: 34px; margin: 0 auto 38px;}
.popups.popup-already .copy{padding-top: 34px; margin: 0 auto 38px;}
.popups.popup-openbank-complete .copy{padding-top: 18px; margin: 0 auto 27px;}
.popups.popup-openbank-another .copy{padding-top: 18px; margin: 0 auto 27px;}
.popups.popup-mini .copy{padding-top: 18px; margin: 0 auto 33px;}
.popups.popup-kkokkio-complete .copy{padding-top: 28px; margin: 0 auto 25px;}
.popups.popup-kkokkio-complete .copy2{margin: 0 auto 31px;}
.popups.popup-nocstno .copy{padding-top: 18px; margin: 0 auto 15px;}
.popups.popup-nocstno .copy2{margin: 0 auto 25px;}
.popups.popup-update .copy{padding-top: 18px; margin: 0 auto 17px;}
.popups.popup-update .copy2{margin: 0 auto 27px;}
.popups.popup-nocstno2 .copy{padding-top: 35px; margin: 0 auto 41px;}


.popup-quiz .close-btn {position: absolute; top:18px; right:18px; width: 40px; height: 40px;}
.popup-quiz .quiz {display: none; padding: 0;}
.popup-quiz .modal-content {padding: 55px 30px 25px;}
.popup-quiz .quiz-header{width: 69px; margin-bottom: 25px;}
.popup-quiz .quiz-progress{margin-bottom: 25px; font-size: 0;}
.popup-quiz .quiz-progress li{display: inline-block; width: 85px; height: 3px; margin-right: 5px; background: #eee;}
.popup-quiz .quiz-progress li:last-child{margin-right: 0;}
.popup-quiz .quiz-progress li.on {background: #FFA800;}
.popup-quiz .quiz-text{margin-bottom: 38px;}
.popup-quiz .quiz-buttons{min-height: 93px; margin-bottom: 22px; text-align: left; font-size: 0;}
.popup-quiz .quiz-buttons input {display: none;}
.popup-quiz .quiz-buttons label {display: inline-block; text-align: left; margin: 0 8px 12px 0;}
.popup-quiz .quiz-buttons label{background: #eee no-repeat center; border-radius: 30px; height: 51px;}
.popup-quiz .quiz-buttons input:checked + label{background-color: #000;}
.popup-quiz .quiz .answer{text-align: left; font-size: 0; height: 20px;}
.popup-quiz .quiz .answer-icon{margin-right: 5px;}
.popup-quiz .quiz-fin-content {width: 158px; margin: -10px auto 33px;}
.popup-quiz .quiz-copy1 {width: 196px; margin: 0 auto 10px;}
.popup-quiz .quiz-copy2 {width: 168px; margin: 0 auto 30px;}
.popup-quiz .apply-btn {width: 90px; height: 55px; line-height: 1; padding:0; margin-bottom: 10px;}
.popup-quiz .apply-btn img {width: 29px;}
.popup-quiz .quiz.on {display: block;}

.popup-quiz .quiz:nth-child(1) .quiz-text {width: 218px;}
.popup-quiz .quiz:nth-child(1) label:nth-of-type(1) {width: 123px; background-image: url("https://og.kakaobank.io/view/a972a402-0349-4f25-a7cb-0a7ae6b2a55c"), url("https://og.kakaobank.io/view/d4cb104b-17a0-403f-baaf-8fd4f9d53fe1"); background-size: 39px 15px, 23px 23px; background-position: 30px 50%, 75px 50%;}
.popup-quiz .quiz:nth-child(1) label:nth-of-type(2) {width: 123px; background-image: url("https://og.kakaobank.io/view/fb70e134-9e86-4f0a-b479-b577adec87c1"), url("https://og.kakaobank.io/view/42da1834-19b6-4b59-96fe-4bbb68f390c3"); background-size: 39px 15px, 23px 23px; background-position: 30px 50%, 75px 50%;}
.popup-quiz .quiz:nth-child(1) label:nth-of-type(3) {width: 157px; background-image: url("https://og.kakaobank.io/view/39356dc4-2d4e-4327-ad78-cf447fe69bfe"), url("https://og.kakaobank.io/view/e086a41b-4363-46b6-bd0d-88b3a87e4fef"); background-size: 73px 15px, 23px 23px; background-position: 30px 50%, 109px 50%;}
.popup-quiz .quiz:nth-child(1) input:checked + label:nth-of-type(1) {background-image: url("https://og.kakaobank.io/view/40aed8db-9cf6-4966-8f5f-8227ec9f4ffb"), url("https://og.kakaobank.io/view/d4cb104b-17a0-403f-baaf-8fd4f9d53fe1");}
.popup-quiz .quiz:nth-child(1) input:checked + label:nth-of-type(2) {background-image: url("https://og.kakaobank.io/view/62ee35f1-ff4d-45b1-9464-ab70764ade6c"), url("https://og.kakaobank.io/view/42da1834-19b6-4b59-96fe-4bbb68f390c3");}
.popup-quiz .quiz:nth-child(1) input:checked + label:nth-of-type(3) {background-image: url("https://og.kakaobank.io/view/e70ac967-06be-4f0a-877b-5ba81ec34b1c"), url("https://og.kakaobank.io/view/e086a41b-4363-46b6-bd0d-88b3a87e4fef");}

.popup-quiz .quiz:nth-child(2) .quiz-text {width: 227px;}
.popup-quiz .quiz:nth-child(2) label:nth-of-type(1) {width: 93px; background-image: url("https://og.kakaobank.io/view/6084c01b-38d4-49ba-bf85-da02920d9971"), url("https://og.kakaobank.io/view/f60dfd7e-b888-4a84-a36b-e9036ea8f008"); background-size: 29px 15px, 23px 21px; background-position: 22px 50%, 57px 50%;}
.popup-quiz .quiz:nth-child(2) label:nth-of-type(2) {width: 74px; background-image: url("https://og.kakaobank.io/view/e9f6192b-b8b4-4656-a750-2f977e096e01"); background-size: 29px 15px; background-position: 22px 50%;}
.popup-quiz .quiz:nth-child(2) label:nth-of-type(3) {width: 74px; background-image: url("https://og.kakaobank.io/view/32e124fd-0634-462b-a7e2-c1690c8cc470"); background-size: 29px 15px; background-position: 22px 50%;}
.popup-quiz .quiz:nth-child(2) input:checked + label:nth-of-type(1) {background-image: url("https://og.kakaobank.io/view/e199aa05-5a42-4767-8612-ac74beabf7cc"), url("https://og.kakaobank.io/view/f60dfd7e-b888-4a84-a36b-e9036ea8f008");}
.popup-quiz .quiz:nth-child(2) input:checked + label:nth-of-type(2) {background-image: url("https://og.kakaobank.io/view/16ed9051-69fe-4900-af89-6f8b28d79a28");}
.popup-quiz .quiz:nth-child(2) input:checked + label:nth-of-type(3) {background-image: url("https://og.kakaobank.io/view/42c52af8-01e7-4825-86ba-8c07b199b69a");}

.popup-quiz .quiz:nth-child(3) .quiz-text {width: 207px;}
.popup-quiz .quiz:nth-child(3) label:nth-of-type(1) {width: 83px; background-image: url("https://og.kakaobank.io/view/2ee22d45-967b-4834-b3d5-92c47b21a163"); background-size: 43px 15px; background-position: 20px 50%;}
.popup-quiz .quiz:nth-child(3) label:nth-of-type(2) {width: 74px; background-image: url("https://og.kakaobank.io/view/038ca664-7b08-48e0-b15e-51ab025e304d"); background-size: 36px 15px; background-position: 20px 50%;}
.popup-quiz .quiz:nth-child(3) label:nth-of-type(3) {width: 83px; background-image: url("https://og.kakaobank.io/view/ae1decaf-f401-4b91-a8d9-d799876d8bbf"); background-size: 44px 15px; background-position: 20px 50%;}
.popup-quiz .quiz:nth-child(3) input:checked + label:nth-of-type(1) {background-image: url("https://og.kakaobank.io/view/667216a6-76e7-4680-8a28-056171ec332a");}
.popup-quiz .quiz:nth-child(3) input:checked + label:nth-of-type(2) {background-image: url("https://og.kakaobank.io/view/34fe154f-23ea-4784-9af4-b3dc7c20876a");}
.popup-quiz .quiz:nth-child(3) input:checked + label:nth-of-type(3) {background-image: url("https://og.kakaobank.io/view/0a637c7c-bad0-4288-9ae7-7e51e7aad039");}

.popup-quiz .quiz.fail .answer-icon{display: inline-block; width: 20px; height: 20px; background: url("https://og.kakaobank.io/view/42b07890-e768-4bb9-8317-4b19357d9b81") no-repeat center/100%;}
.popup-quiz .quiz.fail .answer-text{display: inline-block; width: 163px; height: 20px; background: url("https://og.kakaobank.io/view/c6561802-d59c-432a-ab4c-08a0943b030b") no-repeat center/100%;}
.popup-quiz .quiz:nth-child(1).success .answer-icon{display: inline-block; width: 20px; height: 20px; background: url("https://og.kakaobank.io/view/379aba26-6724-456a-baa4-65a22f6d7c50") no-repeat center/100%;}
.popup-quiz .quiz:nth-child(1).success .answer-text{display: inline-block; width: 142px; height: 20px; background: url("https://og.kakaobank.io/view/828a33f7-e997-4e85-828d-56cdaf86d00d") no-repeat center/100%;}
.popup-quiz .quiz:nth-child(2).success .answer-icon{display: inline-block; width: 20px; height: 20px; background: url("https://og.kakaobank.io/view/379aba26-6724-456a-baa4-65a22f6d7c50") no-repeat center/100%;}
.popup-quiz .quiz:nth-child(2).success .answer-text{display: inline-block; width: 210px; height: 20px; background: url("https://og.kakaobank.io/view/6123241a-d553-4fb6-babb-f5d29661937c") no-repeat center/100%;}
.popup-quiz .quiz:nth-child(3).success .answer-icon{display: inline-block; width: 20px; height: 20px; background: url("https://og.kakaobank.io/view/ee4389e2-29ed-4e15-9ccd-9f73baa85e97") no-repeat center/100%;}
.popup-quiz .quiz:nth-child(3).success .answer-text{display: inline-block; width: 145px; height: 20px; background: url("https://og.kakaobank.io/view/bfd6a2da-fc32-4b4c-8b39-0fab7431b1c9") no-repeat center/100%;}

.popup-youtube {box-sizing:border-box;padding:20px 0;background:rgba(0, 0, 0, 1);}
.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/40265ada-1b6d-4326-9565-41315fbca091') 4px 4px no-repeat;background-size:28px 28px;}


@keyframes bounce {
    0%,
    100%,
    20%,
    50%,
    80% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
    40% {
        -webkit-transform: translateY(-10px);
        -ms-transform: translateY(-10px);
        transform: translateY(-10px);
    }
    60% {
        -webkit-transform: translateY(-5px);
        -ms-transform: translateY(-5px);
        transform: translateY(-5px);
    }
}



@media only screen and (max-width : 600px) {
    .kv ul {transform:translate(-50%, -50%) scale(1);}
    .videos .video-area {background:url("https://og.kakaobank.io/view/a55e6917-1a9d-4971-948d-2cab33ea3b8e") center / cover;}
    .videos .video-area .mask {background:url("https://og.kakaobank.io/view/5eebdc92-447b-4491-8673-d138bfdf574f") center / cover;}
}

@media only screen and (max-width: 375px) {

}

@media only screen and (max-width : 320px) {
    .share .share-btns button {margin:0 7px;}
    /*.share .share-btns button:nth-of-type(2) {margin:0 15px;}*/
}