@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);}

body {overflow: hidden;}
body.on {overflow: visible;}

.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:206px; margin:0 auto;}
.kv .coming-text {position:absolute; top:111px; left:50%; width:218px; margin-left:-109px; opacity:0; 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, 30px); 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.4s;}

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


.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/b35c24b6-0f2b-4bff-832c-48bb5f472bc0") 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:-85px -62px; width:125px; 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/87e17cd6-c446-4939-80bb-5d35e3671b6b") 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;}

.gold-info {padding:60px 0 90px; background-color:#F3F3F3;}
.gold-info ul li {margin:0 auto;}
.gold-info .gold-date {width:125px; margin-bottom: 50px;}
.gold-info .gold-copy1 {width:152px; margin-bottom: 8px;}
.gold-info .gold-copy2 {width:283px; margin-bottom: 22px;}
.gold-info .gold-copy3 {width:288px; margin-bottom: 45px;}
.gold-info .gold-product {background-color:#ffffff; border-radius: 15px; padding:51px 0 30px;}
.gold-info .gold-product .seq {margin:0 auto 42px; background-color:#fff;}
.gold-info .gold-product .seq video {width:100%; clip-path: inset(1px 1px);}
.gold-info .gold-product .seq-copy {width:235px;}

.share {padding-bottom:70px; background-color:#F3F3F3;}
.share ul li {margin:0 auto;}
.share .share-copy1 {width:170px; margin-bottom:8px;}
.share .share-copy2 {width:282px; margin-bottom:20px;}
.share .share-copy3 {width:254px; margin-bottom:33px;}
.share .share-product {background-color:#ffffff; border-radius: 15px; padding:43px 0 30px; margin-bottom:60px;}
.share .share-product .product {width:217px; margin:0 auto 37px;}
.share .share-product .product-copy {width:129px;}
.share .share-btns {font-size:0;}
.share .share-btns button {width:70px; display: inline-block; margin:0 10px;}


.info {padding:60px 0 130px 0; background-color:#ffffff;}
.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;}
.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:#F3F3F3; 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/9f85228e-1f44-4436-a3fb-8263677a422e") 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;}


.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;}
.play-inmotion .inmotion li {transform:translate(0,0); opacity:1;}


/****** 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 25px; margin:0 auto;}
.popups .pop-content-inner {position:relative; background-color:#fff; border-radius: 15px; font-size:0;}
.popups .close-btn {position:absolute; top:0; right:0; padding:18px;}
.popups .close-btn button {width:40px;}
.popups .copy {position:relative; display: block; padding:41px 0 34px; text-align: center; font-size:20px; line-height: 26px; font-weight: bold;}
.popups .ok-btn {display: block; width:100%; padding:0 12px 12px; box-sizing: border-box;}
.popups .ok-btn button,
.popups .ok-btn a {display:block; width:100%; background-color:#FFB800; text-align: center; padding:18px 0 16px; border-radius: 10px;}
.popups .ok-btn button img,
.popups .ok-btn a img {width:33px;}


.popup-complete .pop-content-inner {padding:52px 0 30px 0;}
.popup-complete .icon {width:168px; margin:0 auto 27px;}
.popup-complete .copy1 {width:177px; margin:0 auto 30px;}
.popup-complete .copy2 {width:144px; margin:0 auto 33px;}
.popup-complete .ok-btn {padding:0;}
.popup-complete .ok-btn button {width:90px; background-color:transparent; margin:0 auto; padding:0; font-size:0;}
.popup-complete .ok-btn button img {width:100%;}


.popup-finish .copy {width:185px; margin:0 auto; padding:25px 0 20px;}
.popup-already .copy {width:222px; margin:0 auto;}
.popup-pc .copy {width:167px; margin:0 auto;}




.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:999;}
.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:#fff;width:36px;height:36px; background:url('https://og.kakaobank.io/view/054cbe04-69b0-4cba-baa6-dd6b997a641e') 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 .bg {background:url("https://og.kakaobank.io/view/68770cbc-2d28-4c60-ba87-2cd591c1e089") center / cover;}
    .videos .video-area .mask {background:url("https://og.kakaobank.io/view/27c59a25-9dfa-44d0-af8c-384f81edeb44") center / cover;}
}

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