@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{text-decoration:none; color:#222222;}
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 {font-size:0; text-indent: -999999px;}
.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:#000; color:#fff;}

main {overflow: hidden;}
section {position:relative; width:100%;}
section .inner {position:relative; max-width:768px; width:100%; margin:0 auto; box-sizing: border-box;}
section h3 {position:relative; font-size:44px; line-height: 60px; font-weight: bold; margin-bottom:80px;}
section h3 span {display: block; font-size:20px; line-height: 30px; margin-top:12px; font-weight: normal;}

.wrap.fixed {position:fixed; width:100%; top:0; left:0; }

.sec-kv {padding-top:866px;}
.sec-kv .inner {max-width:1440px;}
.sec-kv .fixed-box {position:fixed; top:0; left:0; width:100%;}
.sec-kv .fixed-box .fixed-inner {position:relative; max-width:1440px; padding-top:100px; width:100%; margin:0 auto; overflow: hidden;}
.sec-kv .top .logo {position:absolute; top:24px; left:18px; width:131px;}
.sec-kv .top .year {position:absolute; top:24px; right:18px; width:64px;}
.sec-kv .tit {width:509px; height:325px; margin:0 auto 50px; background:url("https://og.kakaobank.io/view/306411e0-ad7b-46e2-b141-3cbba4af1da3") 0 0 / 100% no-repeat;}
.sec-kv .go_btn a {display: block; width:270px; height:72px; font-size:23px; line-height:72px; margin:0 auto 46px; text-align: center; background-color:#fff; color:#000; font-weight: bold; border-radius: 12px;}
.sec-kv .loop-txt {position:relative; width:100%;}
.sec-kv .loop-txt li {position:relative; height:50px;}
.sec-kv .loop-txt li div {white-space: nowrap; position:absolute;; top:0; left:0;
    animation: kv-loop-ani 50s infinite linear;
}
.sec-kv .loop-txt li:nth-of-type(1) div {animation-duration: 80s}
.sec-kv .loop-txt li:nth-of-type(2) div {animation-duration: 54s}
.sec-kv .loop-txt li:nth-of-type(3) div {animation-duration: 70s}
.sec-kv .loop-txt li:nth-of-type(4) div {animation-duration: 82s}
.sec-kv .loop-txt li:nth-of-type(5) div {animation-duration: 66s}
.sec-kv .loop-txt span {display: inline-block; font-size:22px; font-weight: bold; line-height: 50px; margin-right:80px;}
.sec-kv .loop-txt .color-w {color:#ffffff;}
.sec-kv .loop-txt .color-p {color:#a787db;}
.sec-kv .loop-txt .color-y {color:#ffc928;}
.sec-kv .loop-txt .gra {position:absolute; top:0; left:50%; width:1440px; height:100%; margin-left:-720px;}
.sec-kv .loop-txt .gra:before {content:""; position:absolute; top:0; left:0; width:100px; height:100%; background:linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);}
.sec-kv .loop-txt .gra:after {content:""; position:absolute; top:0; right:0; width:100px; height:100%; background:linear-gradient(-90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);}
.sec-kv .obj-img {position:relative; background-color:#000;}
.sec-kv .obj-img img {display: block; max-width:375px; width:100%; margin:0 auto;}


@keyframes kv-loop-ani {
    0% {transform:translate(0%,0);}
    100% {transform:translate(-50%,0);}
}


.sec-step {padding:100px 0 202px; background-color:#111111;}
.sec-step .tit { color:#fff;}
.sec-step .tit span {color:rgba(255, 255, 255, 0.6);}
.sec-step .btn-sort {margin-bottom:20px; font-size:0;}
.sec-step .btn-sort button {width:236px; margin-right:8px;}
.sec-step .btn-sort button span {display: block; font-size:17px; line-height: 28px; padding:8px 0 8px;  background-color:#333333; color:#ffffff; border-radius: 26px; font-weight: bold;}
.sec-step .btn-sort button.on span {background-color:#f7f7f7; color:#333333;}
.sec-step .btn-sort button:last-child {margin-right:0;}
.sec-step .pos {display: block; margin-bottom:44px; font-size:17px; line-height: 26px; color:rgba(255, 255, 255, 0.4);}
.sec-step .step {display: none;}
.sec-step .step dl {margin-bottom:50px;}
.sec-step .step.on {display:block;}
.sec-step .step dl:last-child {margin-bottom:0;}
.sec-step .step dt {font-size:20px; line-height: 30px; font-weight: bold; margin-bottom:6px;}
.sec-step .step dt .yellow {color:#ffe300;}
.sec-step .step dt:before {content:""; display: inline-block; font-size:14px; line-height: 14px; padding:4px 6px; margin-top:4px; background-color:#222222; color:#fff; border-radius: 2px; font-weight: bold; vertical-align: top;}
.sec-step .step dt span {float: right;}
.sec-step .step dd {position:relative; clear: both; display: block; padding-left:45px; font-size:17px; line-height: 30px;}
.sec-step .step dd:before {content:"·"; display: inline-block; position:absolute; top:0; left:31px; font-size:17px; line-height: 30px; vertical-align: top;}
.sec-step .step dd.nodot {padding-left:31px;}
.sec-step .step dd.nodot:before {content:none;}
.sec-step .step dl:nth-of-type(1) dt:before {content:"1";}
.sec-step .step dl:nth-of-type(2) dt:before {content:"2";}
.sec-step .step dl:nth-of-type(3) dt:before {content:"3";}
.sec-step .info {font-size:17px; line-height: 30px;}



.sec-list {padding-bottom:100px; background-color:#111111;}
.sec-list .btn-sort {margin-bottom:40px;}
.sec-list .btn-sort button {position:relative; padding:9px 16px; font-size:17px; line-height: 26px; color:#ffffff; border-radius: 48px; margin-bottom:9px; background-color:rgba(0, 0, 0, 0.4); font-weight: 800;}
.sec-list .btn-sort button.on {color:#333333; background-color:#ffffff;}
.sec-list .btn-sort button span {display: inline-block; font-size:17px; line-height: 30px; margin-left:6px; color:#888888; vertical-align: top;}
.sec-list .btn-list button {display: block; position:relative; width:100%; padding:20px 20px; margin-bottom:10px; border-radius: 16px; font-size:17px; line-height: 28px; color:#ffffff; background-color:#21222b; font-weight: bold; text-align: left;}
.sec-list .btn-list button span.yellow {color:#ffe100;}
.sec-list .btn-list button span.small {display: block; font-size:15px; line-height: 22px; color:#888888;}
.sec-list .btn-list button:after {content:""; position:absolute; top:50%; right:16px; width:10px; height:10px; margin:-5px; background:url("https://og.kakaobank.io/view/a7cc383c-05ac-4364-88c5-c731f2c3b772") 0 0 / 100% no-repeat;}



.sec-interview {padding:64px 0 100px; background-color:#000;}
.sec-interview h3 span {color:rgba(255, 255, 255, 0.6);}
.sec-interview .list {overflow: visible;}
.sec-interview .list a {width:280px; text-align: center; color:#ffffff; padding-right:16px; box-sizing: border-box;}
.sec-interview .list a > div {}
.sec-interview .list a img {width:100%; margin-bottom:30px;}
.sec-interview .list a .copy {font-size:20px; line-height: 30px; font-weight: bold; letter-spacing: -1.5px;}
.sec-interview .list a .copy span {display: block; margin-top:12px; font-size:15px; line-height: 20px; font-weight: normal; opacity: 0.4;}



.sec-qna {padding:100px 0 100px; background-color:#fff;}
.sec-qna h3 {color:#333333;}
.sec-qna h3 span {color:rgba(51, 51, 51, 0.6);}
.sec-qna h3 span a {color:#0084ff; text-decoration: underline;}
.sec-qna .btn-sort {margin-bottom:40px; font-size:0;}
.sec-qna .btn-sort button {width:236px; margin-right:8px;}
.sec-qna .btn-sort button span {display: block; font-size:17px; line-height: 28px; padding:8px 0; background-color:#f7f7f7; color:#333333; border-radius: 26px; font-weight: bold;}
.sec-qna .btn-sort button.on span { background-color:#333333; color:#ffffff;}
.sec-qna .list li {width:100%; border-bottom:1px solid #e9e9e9;}
.sec-qna .list li button {position:relative; display: block; width:100%; font-size:17px; line-height: 28px; color:#333333; text-align: left; padding:23px 30px 23px 20px; font-weight: bold;}
.sec-qna .list li button:before {content:"Q"; position:absolute; top:23px; left:0;  display: inline-block; margin-right:5px; font-size:17px; line-height: 28px; color:#fe5145;}
.sec-qna .list li button:after {content:""; position:absolute; top:23px; right:0; display:inline-block; width:21px; height:20px; margin-top:3px; background:url("https://og.kakaobank.io/view/0e704a5e-1e91-46fa-9e9d-e37d8b945d70") 0 0 / 100% no-repeat;
    transition:transform 0.3s;
}
.sec-qna .list li .detail {height:0; font-size:17px; line-height: 30px; color:#888888; overflow: hidden;}
.sec-qna .list li.on button {padding-bottom:8px;}
.sec-qna .list li.on .detail {height:auto; margin-bottom:23px;}
.sec-qna .list li.on button:after {transform:rotate(180deg);}


.sec-banner {padding-bottom:50px; background-color:#fff;}
.sec-banner .banner {border-radius: 20px; padding:32px 36px; background:url("https://og.kakaobank.io/view/613cb2b4-347b-4d8e-9c43-b11b8085c427") #000 top right / 381px 122px no-repeat; }
.sec-banner .copy {display: inline-block; font-size:21px; line-height: 28px; color:#fff; font-weight:bold;}
.sec-banner .copy span {display:block; font-size:16px; line-height: 28px; color:rgba(255, 255, 255, 0.5); font-weight:normal;}
.sec-banner .share {float: right; font-size:0;}
.sec-banner .share button {width:60px; margin-left:10px;}


.float_go_btn {position:fixed; margin-bottom:30px; left:0; bottom:0; width:100%; box-sizing: border-box; padding:0 18px; z-index:9; display: none;}
.float_go_btn .inner {max-width:310px; margin:0 auto; opacity:0;
    transform:translate(0, 60px);
    transition:all 0.5s;
}
.float_go_btn.on .inner {opacity:1; transform:translate(0,0);}
.float_go_btn.notfix .inner {position:relative;}
.float_go_btn.notfix .apply-btn {padding:0;}
.float_go_btn .apply-btn {position:relative; margin:0 auto; box-sizing: border-box;}
.float_go_btn .apply-btn.off {display: none;}
.float_go_btn .apply-btn a {position:relative; display: block; width:100%; height:60px; text-align: center; line-height:60px; background-color:#ffe300; color:#000000; border-radius: 12px; font-size:17px; font-weight: bold;}

.pc-only-pop {margin:0 auto; box-sizing: border-box; display: none;}
.pc-only-pop.on {display: block;}
.pc-only-pop a {display: block; width:100%; padding:15px 0; background-color:#000000; border-radius: 12px;}
.pc-only-pop a span {display:inline-block; vertical-align: top; font-weight: bold;}
.pc-only-pop a .ico {width:40px; height:40px; margin:0 9px 0 20px; background:url("https://og.kakaobank.io/view/48abc2bf-dbf7-4f9b-a815-3b564c0d5b82") no-repeat; background-size:100%;}
.pc-only-pop a .desc {color:#fff; font-size:14px; line-height: 20px;}
.pc-only-pop a .desc span {color:#fee422;}
.pc-only-pop a .ok {float: right; font-size: 18px; line-height: 20px; margin:10px 25px 0 0; color:#fee422;}



.popup-position {position:fixed; top:0; left:0; width:100%; height:100vh; background-color:rgba(0,0,0,0.7); z-index:999; overflow-y:auto; display: none;}
.popup-position.on {display: block;}
.popup-position .inner {display: table; width:100%; height:100%;}
.popup-position .area {display: table-cell; vertical-align: middle;}
.popup-position .detail {position:relative; max-width:800px; width:100%; background-color:#fff; color:#000; margin:0 auto; padding:60px 40px 40px; box-sizing: border-box;}
.popup-position .detail .btn_close {position:absolute; top:24px; right:24px; width:36px; height:36px; background:url("https://og.kakaobank.io/view/912d2825-86c9-4ca5-964a-7fac97769939") 0 0 / 100% no-repeat;}
.popup-position .detail .title {font-size:32px; line-height: 44px; color:#333333; font-weight: bold; margin-bottom:20px;}
.popup-position .detail dl {margin-bottom:20px;}
.popup-position .detail dt {font-size:18px; line-height: 28px; color:#333333; font-weight: bold; margin-bottom:12px;}
.popup-position .detail dd {font-size:16px; line-height: 28px; color:#888888;}
.popup-position .detail .btn-go-apply {width:100%; font-size:20px; background-color:#ffe300; border-radius: 12px; line-height: 1; display: block; padding: 25px 0; text-align: center; font-weight: bold;}
.popup-position .detail .btn-go-apply.off {display: none;}



footer {position:relative; background-color:#f7f7f7; color:#000000;}
footer .footer_inner {padding-top:50px; padding-bottom:68px; max-width: 768px; margin:0 auto;}
footer .footer_inner .footer_box {position:relative;}
footer .footer_inner .tit {font-size:16px; line-height: 28px; font-weight: bold; margin-bottom:8px;}
footer .footer_inner .desc {font-size:14px; line-height: 22px; color:#888888;}
footer .footer_inner .logo {position:absolute; top:0; right:0; width:95px; height:19px; background:url("https://og.kakaobank.io/view/22f31bc0-10af-4317-9a3e-3a0b75fcabc5") 0 0 no-repeat; background-size:95px 19px; opacity:0.4;}



.side-obj1 {position:absolute; top:-170px; right:0; width:210px;
    animation:side-obj-ani-left 6s infinite;
}
.side-obj2 {position:absolute; top:-176px; right:0; width:296px;
    animation:side-obj-ani-right 6s infinite;
}
.side-obj3 {position:absolute; top:-175px; right:0; width:218px;
    animation:side-obj-ani-left 6s infinite;
}


@keyframes side-obj-ani-right {
    0% {transform:translate(0,0) rotate(0deg);}
    50% {transform:translate(0,5px) rotate(5deg);}
    100% {transform:translate(0,0) rotate(0deg);}
}

@keyframes side-obj-ani-left {
    0% {transform:translate(0,0) rotate(0deg);}
    50% {transform:translate(0,5px) rotate(-5deg);}
    100% {transform:translate(0,0) rotate(0deg);}
}






.br_w {display: block;}
.br_m {display: none;}


@media only screen and (max-width : 768px) {
    .br_w {display: none;}
    .br_m {display: block;}

    .wrap.fixed {opacity:0;}

    section .inner {padding:0 18px; box-sizing: border-box;}
    section h3 {font-size:32px; line-height: 44px; margin-bottom:50px;}
    section h3 span {font-size:16px; line-height: 26px; margin-top:8px;}

    .sec-kv {padding-top:657px;}
    .sec-kv .inner {padding:0;}
    .sec-kv .top .logo {top:15px; left:18px; width:90px;}
    .sec-kv .top .year {top:15px; right:18px; width:42px;}
    .sec-kv .tit {margin-bottom:50px; width:339px; height:217px;}
    .sec-kv .fixed-box .fixed-inner {padding-top:117px;}
    .sec-kv .loop-txt li {height:39px; margin-bottom: 9px;}
    .sec-kv .loop-txt span {font-size:15px; line-height: 21px; margin-right:51px;}
    .sec-kv .go_btn {display: none;}

    .sec-step {padding:130px 0 200px;}
    .sec-step .btn-sort {margin-bottom:30px;}
    .sec-step .btn-sort button {width:50%; margin:0; box-sizing: border-box;}
    .sec-step .btn-sort button:nth-of-type(1) {padding-right:4px;}
    .sec-step .btn-sort button:nth-of-type(2) {padding-left:4px;}
    .sec-step .btn-sort button span {font-size:16px; line-height: 28px;}
    .sec-step .pos {margin-bottom:60px; text-align: center;}
    .sec-step .step dl {margin-bottom:40px;}
    .sec-step .step dt {font-size:18px; line-height: 30px; margin-bottom:12px;}
    .sec-step .step dd {font-size:16px; line-height:28px; color:rgba(255, 255, 255, 0.6);}


    .sec-list .btn-sort {position:relative; height:57px; margin-bottom:50px; z-index:1;}
    .sec-list .btn-sort:after {content:""; position:absolute; top:5px; right:0; width:60px; height:100%; background:linear-gradient(-90deg, rgba(17,17,17,1) 0%, rgba(17,17,17,0) 100%); pointer-events:none;}
    .sec-list .btn-sort.fixed > div {position:fixed; top:0; left:18px; width:100%; padding-right:36px; box-sizing: border-box;}
    .sec-list .btn-sort > div {white-space: nowrap; overflow-x:auto; padding-top:10px; background-color:#111111;}
    .sec-list .btn-sort button {font-size:16px; background-color:rgba(255,255,255,0.05); margin-right:10px;}
    .sec-list .btn-sort button span {font-size:16px;}
    .sec-list .btn-list button {font-size:16px;}
    .sec-list .btn-list button span.small {font-size:14px;}
    .sec-list .btn-sort button:last-child {margin-right:50px;}


    .sec-interview {padding-top:100px;}
    .sec-interview h3 {margin-bottom:74px;}
    .sec-interview .list a {padding:0 8px;}
    .sec-interview .list a img {margin-bottom:32px;}
    .sec-interview .list a .copy {font-size:18px; line-height: 26px;}
    .sec-interview .list a .copy span {font-size:13px; line-height: 20px; margin-top:8px;}
    .sec-interview .swiper-pagination {position:relative; bottom:auto !important; margin-top:46px;}
    .sec-interview .swiper-pagination span {background:#fff; opacity:0.15;}
    .sec-interview .swiper-pagination span.swiper-pagination-bullet-active {opacity:0.6;}

    .sec-qna .btn-sort button {width:50%; margin:0;}
    .sec-qna .btn-sort button:nth-of-type(1) {padding-right:4px;}
    .sec-qna .btn-sort button:nth-of-type(2) {padding-left:4px;}
    .sec-qna .list li button {font-size:16px;}
    .sec-qna .list li button:before {font-size:16px;}
    .sec-qna .list li .detail {font-size:16px; line-height: 28px;}

    .sec-banner .banner {padding:66px 0; background:url("https://og.kakaobank.io/view/b7681525-152c-4214-b4c8-385f082a6a86") center / cover no-repeat;}
    .sec-banner .copy {display: block; text-align: center; font-size:26px; font-weight: bold; margin-bottom:50px;}
    .sec-banner .copy span {font-size:17px; line-height: 24px; font-weight: normal; margin-top:8px;}
    .sec-banner .share {float:none; text-align: center; }
    .sec-banner .share button {margin:0 5px;}

    .float_go_btn {display: block;}
    .float_go_btn .inner {max-width: 100%;}

    footer .footer_inner {padding:50px 18px 227px;}
    footer .footer_inner .desc {font-size:13px;}
    footer .footer_inner .logo {top:110px;}

    .popup-position {position:absolute; overflow: visible;}
    .popup-position .detail {padding:100px 18px 50px;}
    .popup-position .detail .btn_close {top:39px; right:21px;}
    .popup-position .detail .title {margin-bottom:50px;}
    .popup-position .detail dl {margin-bottom:50px;}
    .popup-position .detail .btn-go-apply {font-size:17px; line-height: 36px; padding:12px 0;}

    .side-obj1 {width:139px; top:-150px;}
    .side-obj2 {width:197px;}
    .side-obj3 {width:145px;}

}

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