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

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

body {background-color:#ff6483;}
section {text-align: center;}
section .inner {max-width:375px; width:100%; margin:0 auto;}

.kv {margin-bottom:60px;}
.kv .top {padding:22px 20px 0; text-align: left; margin-bottom:66px;}
.kv .top .logo {display:inline-block; vertical-align: top; width:113px; height:22px; background:url("https://og.kakaobank.io/view/35e7ef6a-a992-46eb-bfb6-0f7f9f7bdf70") 0 0 no-repeat; background-size: 100%;}
.kv .top .date {width:75px; float:right; height:22px; background:url("https://og.kakaobank.io/view/a7b3cd43-ed95-41c7-b8ab-aa97a88ac5fe") 0 0 no-repeat; background-size: 100%;}
.kv .copy {clear:both; width:324px; height:240px; margin:0 auto; background:url("https://og.kakaobank.io/view/e7ccb830-7462-4e27-877e-e00372251ac5") 0 0 no-repeat; background-size: 100%;}

.select {font-size:0;}
.select .tit {width:286px; margin-bottom:30px;}
.select .card-select-btns {font-size:0; width:100%; max-width:375px; padding:0 14px; box-sizing: border-box; margin:0 auto 40px;}
.select .card-select-btns button {display: inline-block; width:50%; font-size:0;}
.select .card-select-btns button:nth-of-type(odd) {padding:0 6px 6px 0;}
.select .card-select-btns button:nth-of-type(2n) {padding:0 0 6px 6px;}
.select .card-select-btns button:nth-last-child(-n+2) {padding-top:6px; padding-bottom:0;}
.select .card-select-btns button .card {position:relative; border-radius: 30px; display: inline-block;}
.select .card-select-btns button .card:before {content:""; position:absolute; top:-11px; left:-11px; width:100%; height:100%; padding:11px; background:url("https://og.kakaobank.io/view/21a2499d-c233-400f-a74f-63b545d95608") 0 0 no-repeat; background-size:100%;}
.select .card-select-btns button .card img.front {position:relative;}
.select .card-select-btns button .card img.back {position:absolute; top:0; left:0; width:100%; opacity: 0;}
.select .card-select-btns button.on .card img.front {opacity:0;}
.select .card-select-btns button.on .card img.back {opacity:1;}
.select .btn-apply {max-width:375px; width:100%; padding:0 14px; margin:0 auto 30px; box-sizing: border-box;}
.select .btn-apply button {width:100%; background-color:#ffffff; border-radius: 40px; padding:23px 0 26px;
    box-shadow: 5px 10px 15px 0 rgba(0, 0, 0, 0.1);
}
.select .btn-apply button span {width:100px; height:30px; margin:0 auto; background:url("https://og.kakaobank.io/view/544d7a21-739f-410c-af08-b36d20a3cd2b") 0 0 no-repeat; background-size:100%;}
.select .btn-apply.on button {background-color:#ffff35;}
.select .btn-apply.on button span {background:url("https://og.kakaobank.io/view/89423885-1257-4031-9570-ce31e3f014ff") 0 0 no-repeat; background-size:100%;}
.select .btn-apply.end button {background-color:#ffff35;}
.select .btn-apply.end button span {background:url("https://og.kakaobank.io/view/b742b905-d131-40f6-bec3-0ec28fe70115") 0 0 no-repeat; background-size:100%;}
.select .info {width:170px;}


.share-sns {padding:105px 0 85px;}
.share-sns .tit {width:261px; margin-bottom:45px;}
.share-sns .share-btns {font-size:0;}
.share-sns .share-btns button {width:68px; display: inline-block; margin-right:10px;}
.share-sns .share-btns button:last-child {margin-right:0;}


.detail-info {background-color:#e24665; color:#fff; padding:50px 0 70px; text-align: left;}
.detail-info .inner {max-width:375px; width:100%; margin:0 auto;}
.detail-info .mini-info .copy {width:240px; height:180px; margin:0 auto 24px; background:url("https://og.kakaobank.io/view/cafd7d1a-2ed4-4568-8d54-b9d57f472dbd") 0 0 no-repeat; background-size:100%;}
.detail-info .mini-info .btn-detail {width:100%; padding:0 36px; margin-bottom:50px; box-sizing: border-box;}
.detail-info .mini-info .btn-detail a {display:block; width:100%; padding:23px 0; background-color:#ff6f6f; border-radius: 35px;}
.detail-info .mini-info .btn-detail a span {width:149px; height:24px; margin:0 auto; background:url("https://og.kakaobank.io/view/a5ba904f-371d-4671-b729-e4b6a4345efa") 0 0 no-repeat; background-size:100%;}

.detail-info dl {margin:0 auto; padding:0 20px; box-sizing: border-box;}
.detail-info dl dt {font-size:14px; line-height:22px; margin-top:22px; font-weight: bold; opacity:0.8;}
.detail-info dl dd {position:relative; padding-left: 13px; font-size:14px; line-height: 22px; opacity:0.8;}
.detail-info dl dd:before {content:"·"; display: block; position:absolute; top:0; left:0; font-size:14px; line-height: 1.57;}
.detail-info dl dd.serial {font-size:14px; font-weight:bold; margin-top:20px; padding-left:0; opacity:1;}
.detail-info dl dd.serial:before {content:none;}


/****** 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 .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:330px; padding:0 20px; margin:0 auto;}
.popups .pop-content-inner {background-color:#fff; border-radius: 30px; font-size:0;}
.popups .copy {position:relative; display: block; padding:40px 0 30px; text-align: center; }
.popups img {width:100%;}
.popups .ok-btn {display: block; width:100%; padding:0 20px 30px; box-sizing: border-box;}
.popups .ok-btn button,
.popups .ok-btn a {display:block; width:100%; font-size:0; background-color:#ffe400; text-align: center; padding:21px 0; border-radius: 33px;}
.popups .ok-btn img {width:36px;}

.popup-complete .pop-content-inner {background-color:transparent;}
.popup-complete .copy {position:relative; padding:0;}
.popup-complete .tit {width:100%;}
.popup-complete .btn-inner {padding:0 20px;}
.popup-complete .ok-btn {position:absolute; bottom:0; left:0; width:100%;}

.popup-create-mini .pop-content-inner {border-radius: 0;}
.popup-create-mini .pop-content-inner .desc {font-size:16px; line-height: 23px; color:#000;}
.popup-create-mini .pop-content-inner .btns button {float:left; font-size:16px; height:54px; line-height: 54px; color:#000;}
.popup-create-mini .pop-content-inner .btns .ok-btn {width:40%; background-color:#dddddd;}
.popup-create-mini .pop-content-inner .btns .create-mini-btn {width:60%; background-color:#ffe100;}
.popup-create-mini .pop-content-inner .clear {clear:both;}

.popup-pc .tit {width:211px;}
.popup-finish .tit {width:173px;}
.popup-already .tit {width:173px;}

@media screen and (max-width: 600px) {
    section .inner {max-width:600px;}
    .select .card-select-btns {max-width:600px;}
    .select .btn-apply {max-width:600px;}
    .detail-info .inner {max-width:600px;}
}




@media screen and (max-width: 320px) {
    .kv .copy {width:320px;}
}