@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 {outline: none;}

.ir {display:block; font-size:0; text-indent: -99999px; height:0;}

main {width:100%; overflow: hidden;}



.kv {position:relative; background-color:#fccc0b; text-align: center; padding:65px 0 14px;}
.kv:before {content:""; position:absolute; bottom:0; left:0; width:100%; height:60px; background-color:#8d5414;}
.kv .sun {position:absolute; bottom:60px; left:50%; width:676px; height:544px; margin-left:-338px; background:url("https://og.kakaobank.io/view/00549011-e594-4566-a43c-d47dcb8c27dc") no-repeat; background-size:100%;}
.kv .tit {position:relative; width:301px; height:286px; background:url("https://og.kakaobank.io/view/45381e5d-8996-45ff-a48c-e9b935623507") no-repeat; background-size:100%; margin:0 auto;}
.kv .cloud {position:absolute; bottom:0; left:50%; width:680px; height:190px; margin-left:-340px; background:url("https://og.kakaobank.io/view/63925a26-c5b6-44d9-93e0-ab034ecbbc5e") no-repeat; background-size:100%;}
.kv .cow {position:relative; width:200px; height:260px; background:url("https://og.kakaobank.io/view/84a935e7-d076-45f2-80ca-7e919fc3e3bb") no-repeat; background-size:100%; margin:20px auto 0;}
.kv .cow .moneys {position:absolute; top:137px; left:89px;}
.kv .cow .money {position:absolute; top:0; left:0; width:30px; height:31px; background:url("https://og.kakaobank.io/view/34a83e42-ea51-4a8e-915a-90922be2481a") no-repeat;  background-size:100%;}
.kv .cow .money:nth-of-type(1) {top:6px; left:-17px;}
.kv .cow .money:nth-of-type(3) {top:7px; left:15px;}
.kv .cow .money:nth-of-type(4) {top:6px; left:-17px;}
.kv .cow .money:nth-of-type(5) {top:7px; left:15px;}
.kv .cow .money:nth-of-type(6) {top:6px; left:-17px;}
.kv .cow .bag {position:absolute; top:152px; left:53px; width:98px; height:102px; background:url("https://og.kakaobank.io/view/f81b380d-15f8-46ff-b61e-2c839802c8fa") no-repeat; background-size:100%;}
.kv .cow .bag-shadow {position:absolute; top:235px; left:50%; width:86px; height:24px; background-color:#7E4B11; border-radius: 70%; margin-left: -41px;}
.kv .cow .left-arm {position:absolute; top:167px; left:41px; width:47px; height:54px; background:url("https://og.kakaobank.io/view/7f648b45-220a-4a59-850d-4715a7a0a3b8") no-repeat; background-size:100%;}
.kv .cow .right-arm {position:absolute; top:167px; left:122px; width:43px; height:50px; background:url("https://og.kakaobank.io/view/79730608-6b9f-4dc1-a014-272fcc50741d") no-repeat; background-size:100%;}


.slide {background-color:#8d5414; padding:50px 0;}
.slide .talk-slide > div {max-width:315px; margin:0 auto;}
.slide .talk-slide .slick-dots {text-align: center; margin-top:40px;}
.slide .talk-slide .slick-dots li {font-size:0; display: inline-block;}
.slide .talk-slide .slick-dots li button {font-size:0; width:10px; height:10px; background-color:#fff; opacity:0.2; border-radius: 50%; margin:0 5px;
    transition:all 0.3s;
}
.slide .talk-slide .slick-dots li.slick-active button {opacity:1;}
.slide .talk-slide .slick-prev {position:absolute; top:50%; left:50%; width:19px; height:36px; margin:-78px 0 0 -240px; font-size:0; background:url("https://og.kakaobank.io/view/a209f7bd-3dfd-4195-9be3-4674a7281b9c") no-repeat; background-size:100%;}
.slide .talk-slide .slick-next {position:absolute; top:50%; left:50%; width:19px; height:36px; margin:-78px 0 0 240px; font-size:0; background:url("https://og.kakaobank.io/view/a790b39f-2bd3-4a48-9c41-34666d085cf6") no-repeat; background-size:100%;}

.product {background-color:#ffd908; padding:75px 0 70px; text-align: center;}
.product .tit {width:320px; height:200px; background:url("https://og.kakaobank.io/view/ed11c8f9-c774-475c-ab88-e4692b5e6ec4") no-repeat; background-size:100%; margin:0 auto 10px;}
.product .subtit {width:217px; height:43px; background:url("https://og.kakaobank.io/view/8132a803-4e5a-4d22-b60f-e697890df9a6") no-repeat; background-size:100%; margin:0 auto 30px;}
.product .list {width:325px; height:265px; background:url("https://og.kakaobank.io/view/5675c13e-f47b-4afb-90a7-13931549fdaf") no-repeat; background-size:100%; margin:0 auto 20px;}
.product .date {width:250px; height:25px; background:url("https://og.kakaobank.io/view/be471115-213f-404b-8443-3893cd9fb0f1") no-repeat; background-size:100%; margin:0 auto;}


.howto {background-color:#ffc908; padding:70px 0 80px;}
.howto .tit {width:187px; height:40px; background:url("https://og.kakaobank.io/view/514cb3ab-346c-4f70-877f-3851514aca18") no-repeat; background-size:100%; margin:0 auto 45px;}
.howto ul li {margin-bottom:50px;}
.howto ul li:last-child {margin-bottom:0;}
.howto ul li .tit {display:block; width:291px; height:50px; margin:0 auto 20px;}
.howto ul li .tit1 {background:url("https://og.kakaobank.io/view/1cb79be1-2389-48f7-9b45-46e8f7d101b1") no-repeat; background-size:100%;}
.howto ul li .tit2 {background:url("https://og.kakaobank.io/view/009404a6-b51b-49a2-8200-bf5f05d287cd") no-repeat; background-size:100%;}
.howto ul li .tit3 {background:url("https://og.kakaobank.io/view/38f97442-16e3-4c9b-88b5-588eb748d04f") no-repeat; background-size:100%;}

.howto ul li .thumb {display: block; width:310px; height:285px; margin:0 auto;}
.howto ul li .thumb1 {background:url("https://og.kakaobank.io/view/68ba7392-6084-4196-9aab-f395b848736e") no-repeat; background-size:100%;}
.howto ul li .thumb2 {background:url("https://og.kakaobank.io/view/852c3cc5-52fb-427c-9c80-8f89cffa9df7") no-repeat; background-size:100%;}
.howto ul li .thumb3 {background:url("https://og.kakaobank.io/view/7ff031ea-4921-42b9-94dc-effb926741aa") no-repeat; background-size:100%;}



.info {text-align: left; padding:60px 0 138px; background-color:#684116;}
.info .default-share {text-align: center; margin-bottom:65px;}
.info .default-share .default-share-tit {width:315px; height:71px; margin:0 auto 30px; background:url("https://og.kakaobank.io/view/84e56c94-eb26-4f31-90ff-2b815895ce54") no-repeat 0 0; background-size:100%;}
.info .default-share .default-share-btns {display: block; font-size:0; text-align: center;}
.info .default-share .default-share-btns button {display: inline-block; width:61px; height:61px; margin-right:12px;}
.info .default-share .default-share-btns button:last-child {margin-right:0;}
.info .info-tit {font-size:18px; font-weight: bold; padding-bottom:35px;}
.info dl {max-width:375px; margin:0 auto; padding:0 20px; box-sizing: border-box;}
.info dl dt {width:131px; height:24px; margin-bottom:32px; background:url("https://og.kakaobank.io/view/9bd74e09-0876-490a-a47f-2e8e02f0d8d7") no-repeat 0 0; background-size:100%;}
.info dl dd {position:relative; padding-left: 13px; font-size:14px; line-height: 22px; color:#b8a48f;}
.info dl dd:before {content:"·"; display: block; position:absolute; top:0; left:0; font-size:14px; line-height: 1.57;}
.info dl dd.serial {margin-top:20px;}
.info dl dd.serial:before {content:none;}


.floating-btn {position:fixed; bottom:-140px; left:0; width:100%; transition: bottom 0.6s;}
.floating-btn.active {bottom:0;}
.floating-btn a {display: block; width:100%; height:100%; background-color:#ffe100; padding:24px 0; border-top:1px solid #E2B903;}
.floating-btn a span {display: block; width:315px; height:30px; margin:0 auto; background:url("https://og.kakaobank.io/view/9050c125-4fca-41d7-abe9-54af6268c294") no-repeat 0 0; background-size:100%;}
.floating-btn.floting .floating-btn-inner {margin-bottom:24px; padding:0 16px;}
.floating-btn.floting .floating-btn-inner a {border-radius: 5px; border:1px solid #E2B903;}
.floating-btn.inApp_iphonex .floating-btn-inner {margin-bottom:40px; padding:0 16px;}
.floating-btn.inApp_iphonex .floating-btn-inner a {border-radius: 5px; border:1px solid #E2B903;}


    /****** popups **************************/
.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 .pop-inner .bg {position:absolute; top:0; left:0; width:100%; height:200%; background-color:rgba(0,0,0,0.4);}
.popups .pop-inner .pop-content {position:relative; max-width:330px; padding:0 20px; margin:0 auto;}
.popups .pop-inner .pop-content .pop-content-inner {background-color:#fff; border-radius: 18px;}
.popups .pop-inner .pop-content .copy {position:relative; display: block; padding:42px 0 32px; text-align: center; }
.popups .pop-inner .pop-content .copy img {max-width:210px; width:100%;}
.popups .pop-inner .pop-content .ok-btn {display: block; width:100%; padding:0 15px 15px;}
.popups .pop-inner .pop-content .ok-btn span {display:block; font-size:0; background-color:#ffe400; text-align: center; padding:16px 0; border-radius: 14px;}
.popups .pop-inner .pop-content .ok-btn img {width:100px;}



.is-app {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    user-select: none;
}



/* animations */
.kv .cow .left-arm {
    animation:left-arm-ani 4s infinite;
    transform-origin: top left;
}

.kv .cow .right-arm {
    animation:right-arm-ani 4s infinite;
    transform-origin: top right;
}

.kv .cow .bag {
    animation:bag-ani 4s infinite;
}

.kv .cow .bag-shadow {
    animation:bag-shadow-ani 4s infinite;
}

.kv .cow .money:nth-of-type(1) {
    animation:money-ani-1 4s infinite;
    transform-origin: -200px -300px;
}

.kv .cow .money:nth-of-type(2) {
    animation:money-ani-2 4s infinite;
    transform-origin: 200px -300px;
}

.kv .cow .money:nth-of-type(3) {
    animation:money-ani-3 4s infinite;
    transform-origin: 200px -300px;
}

.kv .cow .money:nth-of-type(4) {
    animation:money-ani-4 4s infinite;
    transform-origin: -200px -300px;
}

.kv .cow .money:nth-of-type(5) {
    animation:money-ani-5 4s infinite;
    transform-origin: 200px -300px;
}

.kv .cow .money:nth-of-type(6) {
    animation:money-ani-6 4s infinite;
    transform-origin: -200px -300px;
}



@keyframes left-arm-ani {
    0% {transform:rotate(0deg) translate(0,0);}
    10% {transform:rotate(-15deg) translate(0,-5px);}
    20% {transform:rotate(0deg) translate(0,0);}
}

@keyframes right-arm-ani {
    0% {transform:rotate(0deg) translate(0,0);}
    10% {transform:rotate(15deg) translate(0,-5px);}
    20% {transform:rotate(0deg) translate(0,0);}
}

@keyframes bag-ani {
    0% {transform:translate(0,0);}
    10% {transform:translate(0,-10px);}
    20% {transform:translate(0,0);}
}

@keyframes bag-shadow-ani {
    0% {width:86px; margin-left:-41px;}
    10% {width:95px; margin-left:-45px;}
    20% {width:86px;margin-left:-41px;}
}

@keyframes money-ani-1 {
    0% {transform:translate(0,0); opacity:1;}
    10% {transform:translate(-7px,-15px);}
    20% {transform:translate(0,10px);}
    50% {opacity:1;}
    70% {transform:rotate(-45deg) translate(-250px,-150px); opacity:0;}
    71% {transform:translate(0,10px); opacity:0;}
    80% {transform:translate(0,0); opacity:1;}
}

@keyframes money-ani-2 {
    0% {transform:translate(0,0); opacity:1;}
    12% {transform:translate(0,-15px);}
    22% {transform:translate(0,10px);}
    45% {opacity:1;}
    65% {transform:rotate(15deg) translate(100px,-150px); opacity:0;}
    66% {transform:translate(0,10px); opacity:0;}
    75% {transform:translate(0,0); opacity:1;}
}

@keyframes money-ani-3 {
    0% {transform:translate(0,0); opacity:1;}
    11% {transform:translate(7px,-15px);}
    21% {transform:translate(-10px,10px);}
    50% {opacity:1;}
    70% {transform:rotate(25deg) translate(250px,-150px); opacity:0;}
    71% {transform:translate(-10px,10px); opacity:0;}
    80% {transform:translate(0,0); opacity:1;}

}

@keyframes money-ani-4 {
    0% {transform:translate(0,0); opacity:1;}
    12% {transform:translate(0,-15px);}
    22% {transform:translate(0,10px);}
    45% {opacity:1;}
    65% {transform:rotate(-45deg) translate(-200px,-150px); opacity:0;}
    66% {transform:translate(0,10px); opacity:0;}
    75% {transform:translate(0,0); opacity:1;}
}

@keyframes money-ani-5 {
    0% {transform:translate(0,0); opacity:1;}
    11% {transform:translate(7px,-15px);}
    21% {transform:translate(-10px,10px);}
    60% {opacity:1;}
    80% {transform:rotate(45deg) translate(250px,-150px); opacity:0;}
    81% {transform:translate(-10px,10px); opacity:0;}
    90% {transform:translate(0,0); opacity:1;}

}

@keyframes money-ani-6 {
    0% {transform:translate(0,0); opacity:1;}
    10% {transform:translate(-7px,-15px);}
    20% {transform:translate(0,10px);}
    50% {opacity:1;}
    70% {transform:rotate(-25deg) translate(-250px,-150px); opacity:0;}
    71% {transform:translate(0,10px); opacity:0;}
    80% {transform:translate(0,0); opacity:1;}
}


@media screen and (max-width: 320px) {
    .floating-btn a span {width:285px;}
}