@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;}
div {vertical-align: top;}
span {display: inline-block; vertical-align: top;}

main {width:100%; overflow: hidden;}
section.select-container {background-color:#2eb775; padding-top:72px; z-index:1;}
section.list-container {background-color:#fdf1d1; margin-top:-28px; padding:60px 0 100px; z-index:0;}

.ir {font-size:0; text-indent: -99999px;}
.group {max-width:375px; margin:0 auto; width:100%;}


/****** keyvisual *******************************/
.kv .kv-tit {width:265px; height:390px; margin-left:35px; background:url("https://og.kakaobank.io/view/8a4c345b-80b0-41d9-b88b-ae0f3af51ba0") no-repeat 0 0; background-size:265px;}
.kv .kv-img {margin-top:-17px;}
/*.kv .kv-img img {width:100%;}*/
.kv .kv-img {position:relative; max-width:375px; width:100%; height:277px; overflow: hidden;}
.kv .kv-img .hands {position:absolute; top:0; right:-8px;}
.kv .kv-img .hand-back {width:214px; height:223px; background:url("https://og.kakaobank.io/view/cee5147a-17d4-4ae5-978e-8439a62de943") no-repeat 0 0; background-size:214px;
    -webkit-transform:translate(0,0) rotate(-3deg);
    transform:translate(0,0) rotate(-3deg);
    -webkit-animation:kv-hand-back-rotate-animate 10s infinite;
    animation:kv-hand-back-rotate-animate 10s infinite;
    -webkit-transform-origin: top right;
    transform-origin: top right;
}
.kv .kv-img .hand-front {top:80px; width:172px; height:167px; background:url("https://og.kakaobank.io/view/360bcc0c-b451-469b-9c80-2a024825d687") no-repeat 0 0; background-size:172px;
    -webkit-transform:rotate(2deg);
    transform:rotate(2deg);
    -webkit-animation:kv-hand-front-rotate-animate 10s infinite;
    animation:kv-hand-front-rotate-animate 10s infinite;
    -webkit-transform-origin: top right;
    transform-origin: top right;
}
.kv .kv-img .heart {position:absolute; top:133px; right:80px;}
.kv .kv-img .heart:after {content:""; position:absolute; top:0; right:0; width:135px; height:126px; background:url("https://og.kakaobank.io/view/331e0492-e56a-4d92-b2b0-b9cb612a44ba") no-repeat 0 0; background-size:135px;}

.kv .kv-img .heart.ani {
    -webkit-animation:kv-heart-move-animate 4s infinite;
    animation:kv-heart-move-animate 4s infinite;
}
.kv .kv-img .heart.ani:after {
    -webkit-transform:scale(0) translate(0, 0) rotate(-65deg);
    transform:scale(0) translate(0, 0) rotate(-65deg);
    -webkit-animation:kv-heart-rotate-animate 4s infinite;
    animation:kv-heart-rotate-animate 4s infinite;
}

.kv .kv-img .heart-2.ani {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}
.kv .kv-img .heart-2.ani:after {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}
.kv .kv-img .heart-3 {top:135px; right:110px;
    -webkit-transform:rotate(-65deg);
    transform:rotate(-65deg);
    -webkit-animation:kv-heart-default-animate 10s infinite;
    animation:kv-heart-default-animate 10s infinite;

}
.kv .kv-img .heart-3:after {position:relative; top:0; left:0; display: block;
    -webkit-animation:heart-boom-animate 2.5s infinite;
    animation:heart-boom-animate 2.5s infinite;
}





/****** lunch *******************************/
.lunch {text-align: center; margin-top:72px;}
.lunch .lunch-tit {display: inline-block; width:307px; height:111px; background:url("https://og.kakaobank.io/view/306d4636-4592-4ea6-88bd-074936b4718a") no-repeat 0 0; background-size:307px;}

/****** count *******************************/
.count .count-num {position:relative; width:100%; height:79px; margin-top:63px; margin-bottom:25px; overflow: hidden;}
.count .count-num > div {display: inline-block;
    -webkit-transform: translate(0, -395px);
    transform: translate(0, -395px);
}
.count .count-num > div > span {display: block; width:51px; height:79px;}
.count .count-num > div > span.num-0 {background:url("https://og.kakaobank.io/view/16deb842-aa5a-41ab-bad0-fdb51c643ea6") no-repeat 0 0; background-size:51px;}
.count .count-num > div > span.num-1 {background:url("https://og.kakaobank.io/view/2de94104-3297-4986-863b-eab28e5a31c8") no-repeat 0 0; background-size:51px;}
.count .count-num > div > span.num-2 {background:url("https://og.kakaobank.io/view/181b1687-2b93-424c-91ee-2fcc17fcfcc4") no-repeat 0 0; background-size:51px;}
.count .count-num > div > span.num-3 {background:url("https://og.kakaobank.io/view/38ee10cf-04d0-4d23-b0ac-c2fc0b71751e") no-repeat 0 0; background-size:51px;}
.count .count-num > div > span.num-4 {background:url("https://og.kakaobank.io/view/ba7948d3-4ad7-4772-8639-0d663f350d8e") no-repeat 0 0; background-size:51px;}
.count .count-num > div > span.num-5 {background:url("https://og.kakaobank.io/view/5cba0016-10b6-4ce4-a74a-720ac4a2f92d") no-repeat 0 0; background-size:51px;}
.count .count-num > div > span.num-6 {background:url("https://og.kakaobank.io/view/2b93656d-ede6-4731-abfd-61443e042714") no-repeat 0 0; background-size:51px;}
.count .count-num > div > span.num-7 {background:url("https://og.kakaobank.io/view/1ed3cd5e-655a-4c35-a226-50c0f9c96d5c") no-repeat 0 0; background-size:51px;}
.count .count-num > div > span.num-8 {background:url("https://og.kakaobank.io/view/6e023a27-4c46-46f6-bf96-f038e149b260") no-repeat 0 0; background-size:51px;}
.count .count-num > div > span.num-9 {background:url("https://og.kakaobank.io/view/01e38761-59d3-4cbf-8e4e-45703e7f425e") no-repeat 0 0; background-size:51px;}
.count .count-desc {width:170px; height:18px; margin-bottom:30px; background:url("https://og.kakaobank.io/view/5299e5e4-28c8-47f3-b22e-f00785a4d612") no-repeat 0 0; background-size:170px;}

.count.on .count-num > div {
    -webkit-transform:translate(0,0);
    transform:translate(0,0);
    -webkit-transition:transform 1s;
    transition:transform 1s;
}
.count.on .count-num > div:nth-of-type(1) {
    -webkit-transition-delay: 0.4s;
    transition-delay: 0.4s;
}
.count.on .count-num > div:nth-of-type(2) {
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
}
.count.on .count-num > div:nth-of-type(3) {
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
}
.count.on .count-num > div:nth-of-type(4) {
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
}
.count.on .count-num > div:nth-of-type(5) {
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
}


/****** porogress *******************************/
.progress {width:100%; padding:0 40px; text-align: left; box-sizing: border-box;}
.progress .target {width:30px; height:18px; background:url("https://og.kakaobank.io/view/df867f81-4f8e-4728-a871-03d80bd23030") no-repeat 0 0; background-size:30px;}
.progress .total {width:80px; height:18px; float:right; background:url("https://og.kakaobank.io/view/81f1032b-a611-4ade-bcbc-28419604eb86") no-repeat 0 0; background-size:80px;}
.progress .progress-bar {width:100%; height:13px; margin-bottom:15px; background-color:#25955f; border-radius: 6px;}
.progress .progress-bar .bar {width:0; height:100%; background-color:#ffeb1d; border-radius: 6px;}

.count.on .progress .progress-bar .bar {
    -webkit-transition:width 1s 0.5s;
    transition:width 1s 0.5s;
}

/**** select *******************************/
.select {position:relative; text-align: center; margin-top:57px;}
.select .select-box.hidden {display: none;}
.select .select-tit {width:307px; height:74px; margin-bottom:30px; background:url("https://og.kakaobank.io/view/55cc24a0-7dc0-417e-8150-825c95bd7449") no-repeat 0 0; background-size:307px;}
.select .select-lists {box-sizing: border-box; padding:0 25px;}
.select .select-lists > a {position:relative; display:block; width:100%; height:94px; padding:24px 83px 24px 24px; margin-bottom:10px; background-color:#fff; border-radius: 15px; box-sizing: border-box; text-align: left;
    -webkit-transition:background-color 0.6s;
    transition:background-color 0.6s;
}
.select .select-lists > a:last-child {margin-bottom:0;}
.select .select-lists > a .copy {font-size:15px; color:#33644c; line-height: 1.48;}
.select .select-lists > a .copy > svg {width:100%; max-width:218px; height:46px;}
.select .select-lists > a .heart {position:absolute; top:30px; right:60px;}
.select .select-lists > a .heart:before {content:""; position:absolute; top:0; left:0; width:25px; height:28px; opacity:0; background:url("https://og.kakaobank.io/view/ce45f150-a31a-451b-88ea-427b6f91684c") no-repeat 0 0; background-size:25px;
    -webkit-transform: rotate(40deg);
    transform:rotate(40deg);
}
.select .select-lists > a .heart:after {content:""; position:absolute; top:0; left:0; width:25px; height:28px; opacity:0; background:url("https://og.kakaobank.io/view/ce45f150-a31a-451b-88ea-427b6f91684c") no-repeat 0 0; background-size:25px;
    -webkit-transform: rotate(40deg);
    transform:rotate(40deg);
}
.select .select-lists > a .check-box {position:absolute; top:25px; right:19px; width:58px; height:43px; background:url("https://og.kakaobank.io/view/36c08341-63c1-464f-bd07-d6546e2ee151") no-repeat 0 0; background-size:58px;}
.select .select-lists > a .check-box:before {content:""; position:absolute; top:0; left:0; width:58px; height:43px; background:url("https://og.kakaobank.io/view/09475607-d1ea-40b8-9a90-9b4ec5573589") no-repeat 0 0; background-size:58px; opacity:0;}
.select .select-lists > a .check-box:after {content:""; position:absolute; top:0; left:0; width:58px; height:43px; background:url("https://og.kakaobank.io/view/85aec7b8-f377-4f9b-b208-ae1e44e433e8") no-repeat 0 0; background-size:58px; opacity:0;
    -webkit-transition:opacity 0.6s;
    transition:opacity 0.6s;
}

.select .select-lists > a.on {background-color:#ffeb1d;}
.select .select-lists > a.on .copy > svg > path {fill:#33644c;}
.select .select-lists > a.on .check-box:after {opacity:1;}
.select .select-lists > a.off .copy > svg > path {fill:#b0b0b0;}
.select .select-lists > a.off .check-box:before {opacity:1;}
.select .select-lists > a.play .heart1:before {
    -webkit-animation:heart1-before-animate 1s 0.1s forwards;
    animation:heart1-before-animate 1s forwards;
}
.select .select-lists > a.play .heart1:after {
    -webkit-animation:heart1-after-animate 1s forwards;
    animation:heart1-after-animate 1s 0.1s forwards;
}
.select .select-lists > a.play .heart2:before {
    -webkit-animation:heart2-before-animate 1s 0.2s forwards;
    animation:heart2-before-animate 1s 0.2s forwards;
}
.select .select-lists > a.play .heart2:after {
    -webkit-animation:heart2-after-animate 1s 0.3s forwards;
    animation:heart2-after-animate 1s 0.3s forwards;
}
.select .select-finish {display: none;}
.select .select-finish > span {width:307px; height:74px; background:url("https://og.kakaobank.io/view/e0225016-cf78-43a2-ae99-71d10c60f227") no-repeat 0 0; background-size:307px;}

.select .apply-btn {width:100%; padding:0 40px; box-sizing: border-box;}
.select .apply-btn > a {display: block; width:100%; height:94px; border-radius: 47px; box-shadow: 2.5px 5px 20px 0 rgba(0, 0, 0, 0.1); background-color: #ffeb1d; box-sizing: border-box;}
.select .apply-btn > a > span {width:140px; height:26px; margin-top:34px; background:url("https://og.kakaobank.io/view/e7177ee4-cd6c-4b5e-aa55-75fc58b673c3") no-repeat 0 0; background-size:140px;}

.select .select-img {position:relative; max-width:375px; width:100%; height:175px; overflow: hidden;}
.select .select-img .hands {position:absolute; top:0; left:-8px;}
.select .select-img .hand-back {width:140px; height:175px; background:url("https://og.kakaobank.io/view/2a482ac4-6a99-4e89-a71b-cf69d295fc37") no-repeat 0 0; background-size:140px;
    -webkit-transform:translate(0,0) rotate(-3deg);
    transform:translate(0,0) rotate(-3deg);
    -webkit-animation:select-hand-back-rotate-animate 10s infinite;
    animation:select-hand-back-rotate-animate 10s infinite;
    -webkit-transform-origin: top left;
    transform-origin: top left;
}
.select .select-img .hand-front {width:140px; height:175px; background:url("https://og.kakaobank.io/view/1d6710d5-cc88-4ad2-9c28-7ddbd4cb5a68") no-repeat 0 0; background-size:140px;
    -webkit-transform:rotate(2deg);
    transform:rotate(2deg);
    -webkit-animation:select-hand-front-rotate-animate 10s infinite;
    animation:select-hand-front-rotate-animate 10s infinite;
    -webkit-transform-origin: top left;
    transform-origin: top left;
}
.select .select-img .heart {position:absolute; top:63px; left:130px;}
.select .select-img .heart:after {content:""; position:absolute; top:0; right:0; width:100px; height:104px; background:url("https://og.kakaobank.io/view/331e0492-e56a-4d92-b2b0-b9cb612a44ba") no-repeat 0 0; background-size:100px;}
.select .select-img .heart.ani {
    -webkit-animation:select-heart-move-animate 4s infinite;
    animation:select-heart-move-animate 4s infinite;
}
.select .select-img .heart.ani:after {
    -webkit-transform:rotate(65deg);
    transform:rotate(65deg);
    -webkit-animation:select-heart-rotate-animate 4s infinite;
    animation:select-heart-rotate-animate 4s infinite;
}
.select .select-img .heart-2.ani {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}
.select .select-img .heart-2.ani:after {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}
.select .select-img .heart-3 {top:63px; left:30px;
    -webkit-transform:rotate(65deg);
    transform:rotate(65deg);
}
.select .select-img .heart-3:after {position:relative; top:0; left:0; display: block;
    -webkit-animation:heart-boom-animate 2.5s infinite;
    animation:heart-boom-animate 2.5s infinite;
}
.select .toast-goto-list {position:absolute; bottom:40px; left:50%; width:265px; height:70px; margin-left:-132px; background-color:rgba(0,0,0,0.75); border-radius: 35px; visibility: hidden; opacity: 0;
    -webkit-transition:all 0.3s;
    transition:all 0.3s;
}
.select .toast-goto-list > a > span {width:176px; height:38px; margin-top:16px; background:url("https://og.kakaobank.io/view/d70dc3ba-59ba-4e13-8167-605a7da9df52") no-repeat 0 0; background-size:176px;}
.select .toast-goto-list.on {visibility: visible; opacity:1;}
.select .toast-goto-list.fix {position:fixed;}




/****** list *******************************/
.list {text-align:center;}
.list-count {font-size:0; margin-bottom:40px;}
.list-count .list-nums {display: inline-block;}
.list-count .list-nums .count-0 {width:13px; height:25px; background:url("https://og.kakaobank.io/view/f352ef9a-4193-4803-8cbc-89efc571fb5e") no-repeat 0 0; background-size:13px;}
.list-count .list-nums .count-1 {width:13px; height:25px; background:url("https://og.kakaobank.io/view/acc1618b-966c-4e2f-a820-e9277bf28af5") no-repeat 0 0; background-size:13px;}
.list-count .list-nums .count-2 {width:13px; height:25px; background:url("https://og.kakaobank.io/view/b8a0a958-ee56-4af0-bd55-f55a7ba89f1d") no-repeat 0 0; background-size:13px;}
.list-count .list-nums .count-3 {width:13px; height:25px; background:url("https://og.kakaobank.io/view/15589385-19b5-4e43-950b-e87db788158d") no-repeat 0 0; background-size:13px;}
.list-count .list-nums .count-4 {width:13px; height:25px; background:url("https://og.kakaobank.io/view/24bb1b92-94f6-4459-91b5-3a585f517c68") no-repeat 0 0; background-size:13px;}
.list-count .list-nums .count-5 {width:13px; height:25px; background:url("https://og.kakaobank.io/view/48473d0b-81a8-4a05-883a-294f25e6f6cf") no-repeat 0 0; background-size:13px;}
.list-count .list-nums .count-6 {width:13px; height:25px; background:url("https://og.kakaobank.io/view/b7996d08-5ef2-436e-9ea4-f1f0de7c16df") no-repeat 0 0; background-size:13px;}
.list-count .list-nums .count-7 {width:13px; height:25px; background:url("https://og.kakaobank.io/view/ecbe4fe5-d610-448a-b17f-601eec8c4b01") no-repeat 0 0; background-size:13px;}
.list-count .list-nums .count-8 {width:13px; height:25px; background:url("https://og.kakaobank.io/view/ddfe3699-fd2d-4281-bbad-77ac0744ee64") no-repeat 0 0; background-size:13px;}
.list-count .list-nums .count-9 {width:13px; height:25px; background:url("https://og.kakaobank.io/view/c8bd5f84-584c-4a18-b230-c456c28b4628") no-repeat 0 0; background-size:13px;}
.list-count .list-nums .count-comma {width:7px; height:25px; background:url("https://og.kakaobank.io/view/12402fa3-1c72-4729-9588-ff9eb266db77") no-repeat 0 0; background-size:7px;}
.list-count .list-count-copy {width:93px; height:25px; background:url("https://og.kakaobank.io/view/d371c7dd-44b8-4601-a863-d1000dbd1703") no-repeat 0 0; background-size:93px;}

.list-donate {padding:0 24px;}
.list-donate > ul > li {position:relative; padding:20px 24px; margin-bottom:10px; text-align: left; box-sizing:border-box;}
.list-donate > ul > li:before {content:""; position:absolute; top:0; left:0; width:100%; height:100%; background-color:#fff; border-radius: 15px; z-index:1;}
.list-donate > ul > li.on:after {content:""; position:absolute; top:0; left:0; width:calc(100% - 4px); height:calc(100% - 4px); border:2px solid #2eb775; border-radius: 15px; z-index:2;}
.list-donate > ul > li.heart-l,
.list-donate > ul > li.heart-r {z-index:1;}
.list-donate > ul > li.heart-l:after {content:""; position:absolute; top:-55px; left:-50px; width:78px; height:79px; background:url("https://og.kakaobank.io/view/e859bc26-2f16-4fea-a29e-a6b46880d7c0") no-repeat 0 0; background-size:78px; z-index:0;
    -webkit-animation:heart-boom-animate 2.3s infinite;
    animation:heart-boom-animate 2.3s infinite;
    -webkit-transform-origin: bottom left;
    transform-origin: bottom left;
}
.list-donate > ul > li.heart-r:after {content:""; position:absolute; top:-55px; right:-40px; width:82px; height:85px; background:url("https://og.kakaobank.io/view/ce45f150-a31a-451b-88ea-427b6f91684c") no-repeat 0 0; background-size:82px; z-index:0;
    -webkit-animation:heart-boom-animate 2.3s 0.2s infinite;
    animation:heart-boom-animate 2.3s 0.2s infinite;
    -webkit-transform-origin: bottom right;
    transform-origin: bottom right;
}
.list-donate > ul > li > span {position:relative; z-index:2;}
.list-donate > ul > li .user {font-size:17px; font-weight: bold; color:#111111;}
.list-donate > ul > li .user.default {color:#aaaaaa;}
.list-donate > ul > li .donate {float:right; font-size:17px; font-weight: bold; color:#24ad6b;}
.list-donate > ul > li .desc {width:100%; margin-top:6px; font-size:14px; color:#666666; line-height: 1.5;}
.list-donate .list-more-btn {display: block; width:100%; padding:23px 0; text-align: center; font-size:17px; color:#111111; font-weight: bold; background-color:rgba(217,202,164,0.5); border-radius: 15px;}
.list-desc {position:relative; width:307px; height:100px; margin:50px auto 60px; background:url("https://og.kakaobank.io/view/2b077024-c8be-4995-9a78-3059e788bbe0") no-repeat 0 0; background-size:307px;}
.list-desc > a {display: block; position:absolute; top:0; left:100px; width:107px; height:27px;}



/****** info *******************************/
.info {margin:0 25px; border-top:1px solid #9e9377; border-bottom:1px solid #9e9377;}
.info .info-btn {position:relative; display: block; width:100%; padding:29px 5px; box-sizing: border-box;}
.info .info-btn > span {position:relative; display: block; width:100%; height:20px; background:url("https://og.kakaobank.io/view/af93bd11-205a-4339-b75c-760cfc2482b6") no-repeat 0 0; background-size:108px;}
.info .info-btn > span:after {content:""; position:absolute; top:0; right:0; width:16px; height:20px; background:url("https://og.kakaobank.io/view/3613b1bb-95db-42c7-b9c9-787397595698") no-repeat 0 0; background-size:16px;
    -webkit-transition:transform 0.3s;
    transition:transform 0.3s;
}
.info .info-desc {overflow: hidden; padding:0 5px; height:0;}
.info .info-desc .info-desc-inner > span {position:relative; display:block; padding-left:10px; font-size:14px; line-height: 22px; color:#6f6447;}
.info .info-desc .info-desc-inner > span:last-child {padding-bottom: 29px;}
.info .info-desc .info-desc-inner > span:before {content:"·"; position:absolute; top:0; left:0;}
.info.on .info-btn > span:after {
    -webkit-transform:rotate(180deg);
    transform:rotate(180deg);
}
/*.info.on .info-desc {max-height:280px;}*/

/****** serial *******************************/
.serial {display: block; width:100%; padding:30px 0 70px; font-size:14px; line-height: 22px; color:#6f6447; text-align: center;}

/****** share *******************************/
.share {text-align: center; margin-top:70px;}
.share .share-tit {width:158px; height:32px; margin-bottom:39px; background:url("https://og.kakaobank.io/view/023e4917-f940-4d21-aeaf-327e49758330") no-repeat 0 0; background-size:158px;}
.share .share-btns {font-size:0;}
.share .share-btns a {display:inline-block; width:60px; height:60px; margin:0 13px;}
.share .share-btns a.share-kt {background:url("https://og.kakaobank.io/view/8321118d-60a5-4638-8c19-de28497b2a3d") no-repeat 0 0; background-size:60px;}
.share .share-btns a.share-fb {background:url("https://og.kakaobank.io/view/f46a8cf7-67a3-4f4d-a60c-28e467e5b1b3") no-repeat 0 0; background-size:60px;}
.share .share-btns a.share-id {background:url("https://og.kakaobank.io/view/47887a88-2e54-49e4-9867-265672b30675") no-repeat 0 0; background-size:60px;}



/****** popups **************************/
.popups {position:absolute; top:0; left:0; width:100%; height:100%; z-index:999; visibility: hidden; opacity:0;
    -webkit-transition:all 0.3s;
    transition:all 0.3s;
}
.popups > a {position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.4);}
.popups > a > span {position:absolute; top:50%; left:50%;
    -webkit-transform:translate(-50%, -50%);
    transform:translate(-50%, -50%);
}
.popups.on {visibility: visible; opacity:1;}


.popup-pc > a > span {width:250px; height:170px; background:url("https://og.kakaobank.io/view/90226a5d-8726-4c76-b22a-dcd127453e53") no-repeat 0 0; background-size:250px;}

.popup-finish > a:focus .inner .ok {outline: 1px dotted #000000;}
.popup-finish > a .inner {position:absolute; top:50%; left:50%; width:300px; margin:-100px 0 0 -150px; background-color:#f7f7f7; border-radius: 12px; text-align: center;}
.popup-finish > a .inner .desc {padding:40px 0; font-size:17px; line-height: 1.47; color:#000000;}
.popup-finish > a .inner .ok {display: block; width:100%; padding:20px 0; font-size: 18px; line-height: 1.44; border-radius: 2px 2px 12px 12px; color: #000000; background-color:#24d77d;}




/****** animations **************************/
/* webkit */
@-webkit-keyframes heart1-before-animate {
    0% {transform:rotate(40deg) translate(0px,0px); opacity:0;}
    80% {transform:rotate(20deg) translate(-29px, -29px); opacity:1;}
    100% {transform:rotate(20deg) translate(-29px, -29px); opacity:0;}
}
@-webkit-keyframes heart1-after-animate {
    0% {transform:rotate(40deg) translate(0px,0px); opacity:0;}
    80% {transform:rotate(70deg) translate(-24px, -22px); opacity:1;}
    100% {transform:rotate(70deg) translate(-24px, -22px); opacity:0;}
}
@-webkit-keyframes heart2-before-animate {
    0% {transform:rotate(40deg) translate(0px,0px) scale(0.7); opacity:0;}
    80% {transform:rotate(27deg) translate(-35px, -53px) scale(0.5); opacity:1;}
    100% {transform:rotate(27deg) translate(-35px, -53px) scale(0.5); opacity:0;}
}
@-webkit-keyframes heart2-after-animate {
    0% {transform:rotate(40deg) translate(0px,0px) scale(0.7); opacity:0;}
    80% {transform:rotate(60deg) translate(-42px, -44px) scale(0.5); opacity:1;}
    100% {transform:rotate(60deg) translate(-42px, -44px) scale(0.5); opacity:0;}
}
@-webkit-keyframes heart-boom-animate {
    0% {transform:scale(1);}
    10% {transform:scale(1.06);}
    20% {transform:scale(1);}
    30% {transform:scale(1.06);}
    40% {transform:scale(1);}
    100% {transform:scale(1);}
}


/* default */
@keyframes heart1-before-animate {
    0% {transform:rotate(40deg) translate(0px,0px); opacity:0;}
    80% {transform:rotate(20deg) translate(-29px, -29px); opacity:1;}
    100% {transform:rotate(20deg) translate(-29px, -29px); opacity:0;}
}
@keyframes heart1-after-animate {
    0% {transform:rotate(40deg) translate(0px,0px); opacity:0;}
    80% {transform:rotate(70deg) translate(-24px, -22px); opacity:1;}
    100% {transform:rotate(70deg) translate(-24px, -22px); opacity:0;}
}
@keyframes heart2-before-animate {
    0% {transform:rotate(40deg) translate(0px,0px) scale(0.7); opacity:0;}
    80% {transform:rotate(27deg) translate(-35px, -53px) scale(0.5); opacity:1;}
    100% {transform:rotate(27deg) translate(-35px, -53px) scale(0.5); opacity:0;}
}
@keyframes heart2-after-animate {
    0% {transform:rotate(40deg) translate(0px,0px) scale(0.7); opacity:0;}
    80% {transform:rotate(60deg) translate(-42px, -44px) scale(0.5); opacity:1;}
    100% {transform:rotate(60deg) translate(-42px, -44px) scale(0.5); opacity:0;}
}
@keyframes heart-boom-animate {
    0% {transform:scale(1);}
    10% {transform:scale(1.06);}
    20% {transform:scale(1);}
    30% {transform:scale(1.06);}
    40% {transform:scale(1);}
    100% {transform:scale(1);}
}



/****** keyvisual animations **************************/
/* webkit */
@-webkit-keyframes kv-hand-back-rotate-animate {
    0% {transform:translate(0,0) rotate(1deg);}
    10% {transform:translate(0,3px) rotate(0deg);}
    20% {transform:translate(0,0) rotate(1deg);}
    100% {transform:translate(0,0) rotate(1deg);}
}
@-webkit-keyframes kv-hand-front-rotate-animate {
    0% {transform:translate(0,0) rotate(-3deg);}
    10% {transform:translate(0,3px) rotate(0deg);}
    20% {transform:translate(0,0) rotate(-3deg);}
    100% {transform:translate(0,0) rotate(-3deg);}
}
@-webkit-keyframes kv-heart-move-animate {
    0% {transform:translate(0, 0);}
    30% {transform:translate(0, 0);}
    100% {transform:translate(-220px, 0);}
}
@-webkit-keyframes kv-heart-rotate-animate {
    0% {opacity:0; transform:scale(0) translate(0, 0) rotate(-65deg);}
    30% {opacity:1;transform:scale(0) translate(0, 0) rotate(-65deg);}
    50% {opacity:1; transform:scale(0.5) translate(0, -80px) rotate(30deg);}
    100% {opacity:0; transform:scale(0) translate(0, 0) rotate(-65deg);}
}
@-webkit-keyframes kv-heart-default-animate {
    0% {transform:translate(0,0) rotate(-65deg);}
    10% {transform:translate(0,-5px) rotate(-65deg);}
    20% {transform:translate(0,0) rotate(-65deg);}
    100% {transform:translate(0,0) rotate(-65deg);}
}

/* default */
@keyframes kv-hand-back-rotate-animate {
    0% {transform:translate(0,0) rotate(1deg);}
    10% {transform:translate(0,3px) rotate(0deg);}
    20% {transform:translate(0,0) rotate(1deg);}
    100% {transform:translate(0,0) rotate(1deg);}
}
@keyframes kv-hand-front-rotate-animate {
    0% {transform:translate(0,0) rotate(-3deg);}
    10% {transform:translate(0,3px) rotate(0deg);}
    20% {transform:translate(0,0) rotate(-3deg);}
    100% {transform:translate(0,0) rotate(-3deg);}
}
@keyframes kv-heart-move-animate {
    0% {transform:translate(0, 0);}
    30% {transform:translate(0, 0);}
    100% {transform:translate(-220px, 0);}
}
@keyframes kv-heart-rotate-animate {
    0% {opacity:0; transform:scale(0) translate(0, 0) rotate(-65deg);}
    30% {opacity:1;transform:scale(0) translate(0, 0) rotate(-65deg);}
    50% {opacity:1; transform:scale(0.5) translate(0, -80px) rotate(30deg);}
    100% {opacity:0; transform:scale(0) translate(0, 0) rotate(-65deg);}
}
@keyframes kv-heart-default-animate {
    0% {transform:translate(0,0) rotate(-65deg);}
    10% {transform:translate(0,-5px) rotate(-65deg);}
    20% {transform:translate(0,0) rotate(-65deg);}
    100% {transform:translate(0,0) rotate(-65deg);}
}


/****** select animations **************************/
/* webkit */
@-webkit-keyframes select-hand-back-rotate-animate {
    0% {transform:translate(0,0) rotate(-1deg);}
    10% {transform:translate(0,3px) rotate(0deg);}
    20% {transform:translate(0,0) rotate(-1deg);}
    100% {transform:translate(0,0) rotate(-1deg);}
}
@-webkit-keyframes select-hand-front-rotate-animate {
    0% {transform:translate(0,0) rotate(2deg);}
    10% {transform:translate(0,3px) rotate(0deg);}
    20% {transform:translate(0,0) rotate(2deg);}
    100% {transform:translate(0,0) rotate(2deg);}
}
@-webkit-keyframes select-heart-move-animate {
    0% {transform:translate(0, 0);}
    30% {transform:translate(0, 0);}
    100% {opacity:1; transform:translate(300px, 0);}
}
@-webkit-keyframes select-heart-rotate-animate {
    0% {opacity:0; transform:scale(0) translate(0, 0) rotate(65deg);}
    15% {opacity:1; transform:scale(0) translate(0, 0) rotate(65deg);}
    30% {transform:scale(0) translate(0, 0) rotate(65deg);}
    50% {opacity:1; transform:scale(0.5) translate(0, -80px) rotate(-40deg);}
    100% {opacity:0; transform:scale(0) translate(0, 0) rotate(45deg);}
}

/* default */
@keyframes select-hand-back-rotate-animate {
    0% {transform:translate(0,0) rotate(-1deg);}
    10% {transform:translate(0,3px) rotate(0deg);}
    20% {transform:translate(0,0) rotate(-1deg);}
    100% {transform:translate(0,0) rotate(-1deg);}
}
@keyframes select-hand-front-rotate-animate {
    0% {transform:translate(0,0) rotate(2deg);}
    10% {transform:translate(0,3px) rotate(0deg);}
    20% {transform:translate(0,0) rotate(2deg);}
    100% {transform:translate(0,0) rotate(2deg);}
}
@keyframes select-heart-move-animate {
    0% {transform:translate(0, 0);}
    30% {transform:translate(0, 0);}
    100% {opacity:1; transform:translate(300px, 0);}
}
@keyframes select-heart-rotate-animate {
    0% {opacity:0; transform:scale(0) translate(0, 0) rotate(65deg);}
    15% {opacity:1; transform:scale(0) translate(0, 0) rotate(65deg);}
    30% {transform:scale(0) translate(0, 0) rotate(65deg);}
    50% {opacity:1; transform:scale(0.5) translate(0, -80px) rotate(-40deg);}
    100% {opacity:0; transform:scale(0) translate(0, 0) rotate(45deg);}
}



@media screen and (max-width: 320px) {
    .select .select-lists > a {padding:24px 70px 24px 14px;}
    .select .select-lists > a .check-box {right:12px;}
}