@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{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:focus {outline: none;}
.ir{display:block;overflow:hidden;font-size:1px;line-height:0;color:transparent}
img{vertical-align:top;}

button, button:focus, button:focus-visible{
  outline: none;
  border: 0 none;
}

.loader,
.loader:after {
  border-radius: 50%;
  width: 50px;
  height: 50px;
}
.loader {
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  border-top: 1.1em solid rgba(255, 255, 255, 0.2);
  border-right: 1.1em solid rgba(255, 255, 255, 0.2);
  border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
  border-left: 1.1em solid #ffffff;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

img[data-src] {
opacity: 0;
}

body {
  width: 100%;
  overflow-x: hidden;
}
.panel1 {
  position: relative;
  overflow: hidden;
  text-align: center;
  height: 100vh;
}
.panel1 .gif-wrap{
  overflow:hidden;position:absolute;top:0;right:0;bottom:0;left:0;
  background:url('https://og.kakaobank.io/view/45955919-e46c-48ef-856c-9a49bfb48db8') center 0 no-repeat;
  background-size: cover;
}
.panel1 .gif-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.panel1 .gif-wrap .inner {
  width: 100%;height: 100%;
  background-size: cover;
}
.panel1 .bg-img {
  background:url('https://og.kakaobank.io/view/45955919-e46c-48ef-856c-9a49bfb48db8') center 0 no-repeat;
  background-size: cover;
}
.panel1 .video-wrap {
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.panel1 .video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.panel1 .tit {
  position: absolute;
  top: 40px;
  left: 50%;
  margin: 0 0 30px -91px;
}
.panel1 .desc {
  width: 219px;
  height: 73px;
  position: absolute;
  bottom: 90px;
  left: 50%;
  margin-left: -109px;
}
.panel1 .ico-arrow {
  position: absolute;
  bottom: 30px;
  left: 50%;
  margin-left: -17px;
}
.panel2 {
  position: relative;
  height: 370px;
  background: #000;
  text-align: center;
  color: #fff;
}
.panel2 .tit {
  width: 193px;
  height: 90px;
  position: absolute;
  top: 140px;
  left: 50%;
  margin-left: -96px;
}
.panel3 {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100vh;
  text-align: center;
  background: #fff;
}
.panel3 .img {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -202px 0 0 -187px;
  width: 375px;
  height: 405px;
}
.panel3 .card-canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -202px 0 0 -187px;
  width: 375px;
  height: 405px;
}
.loading-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -30px 0 0 -30px;
  z-index: 50;
}
.panel3 .card-yellow {
  z-index: 10;
}
.panel3 .card-white {
  z-index: 20;
}
.panel3 .card-choonsik {
  z-index: 30;
}
.panel3 .card-ryan {
  z-index: 40;
}
.panel3 .flex {
  display: flex;
  flex-flow: column wrap;
}
.panel3 .flex .row1 {
  position: relative;
  flex: auto;
}
.panel3 .flex .row1 {
  height: 67vh;
}
.panel3 .flex .row2 {
  height: 33vh;
}
.panel3 .card-text {
  width: 100%;
  box-sizing: border-box;
  padding: 0 30px;
}
.panel3 .card-text .txt {
  display: inline-block;
  margin-left: 10px;
  font-size: 22px;
  font-weight: bold;
  font-family: helvetica, sans-serif;
  line-height: 1.45;
  color: #c0c0c0;
}
.panel3 .card-text .txt.first {
  margin-left: 0;
}
.panel3 .card-text .txt.on {
  color: #000;
}
.panel4 {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  padding: 90px 0 100px 0;
  background: #fff;
  color: #fff;
  text-align: center;
}
.panel4 .tit {
  width: 193px;
  height: 115px;
  margin: 0 auto 40px;
}
.panel4 .youtube{
  overflow: hidden;
  position:relative;
  width: 320px;
  margin:10px auto 18px;
  border-radius:23px;
}
.panel4 .youtube .thumb{
  width:100%;
}
.panel4 .btn-play{
  display:inline-block;position:absolute;top:50%;left:50%;margin:-34px 0 0 -34px;width:68px;height:68px;
  background:url('https://og.kakaobank.io/view/fe3cffc6-db2c-4b12-b2b5-944c3b1cab8e') 0 0 no-repeat;background-size:68px 68px;
}
.panel4 .link-checkcard {
  position: relative;
  display: inline-block;
  width: 320px;
  height: 63px;
  padding: 21px 25px 0;
  border-radius: 35px;
  background-color: #191919;
  box-sizing: border-box;
  font-size: 17px;
  font-weight: bold;
  text-align: left;
  color: #fff;
}
.panel4 .ico-arrow {
  position: absolute;
  top: 25px;
  right: 25px;
}
.panel4 .tit-share {
  margin: 100px 0 0 0;
  font-size: 30px;
  font-weight: bold;
  line-height: 1.33;
  color: #fff;
}
.panel4 .desc-share {
  margin: 14px 0 0 0;
  font-size: 16px;
  line-height: 1.63;
  color: #fff;
}
.panel4 .social{padding:30px 0 0;}
.panel4 .social > button{display:inline-block;width:80px;height:80px;margin-left:13px;}
.panel4 .social > button:first-child{margin-left: 0;}
.panel4 .social > button img{width: 80px;height: 80px;}
.panel5 {
  background-color: #1b1b1b;
}
.panel5 .inner {
  max-width: 375px;
  margin: 0 auto;
  padding: 50px 24px 100px;
  box-sizing: border-box;
}
.panel5 .info {
  padding-bottom: 50px;
  font-size: 16px;
  line-height: 1.63;
  color: #fff;
  border-bottom: 1px solid #5e5e5e;
}
.panel5 .info li:before {
  background-color: #fff;
}
.panel5 .info-details {
  padding-top: 50px;
  font-size: 14px;
  line-height: 1.71;
  color: #7c7c7c;
}
.panel5 li {
  position: relative;
  padding-left: 10px;
}
.panel5 li:before {
  content: '';
  position: absolute;
  top: 9px;
  left: 0;
  width: 2px;
  height: 2px;
  border-radius: 2px;
  background-color: #7c7c7c;
}
.panel5 .info-details .tit-info-details{
  margin-bottom: 24px;
  font-size: 19px;
  font-weight: bold;
  color: #fff;
}
.panel5 .info-details ul {
  margin-bottom: 20px;
}
.panel5 .info-details .tit-sub {
  margin-bottom: 5px;
}
.panel5 .info-details .btn-tel {
  color: #7c7c7c;
}
.panel5 .serial-number {
  font-size: 14px;
  font-weight: bold;
  line-height: 1.71;
  color: #666;
}

.btn-apply {
  position: fixed;
  bottom: -80px;
  left: 50%;
  width: 320px;
  height: 63px;
  margin-left: -160px;
  padding: 18px 0 0;
  border-radius: 37.5px;
  background-color: #191919;
  box-sizing: border-box;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  color: #fff;
}

.modal-table {display:table;width:100%;height:100%;table-layout:fixed;}
.modal-cell {display:table-cell;width:100%;height:100%;vertical-align:middle;text-align:center;}
.video-modal{
  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);
}
.video-modal .iframe-wrap{display:inline-block;width:100%;height:80%;}
.video-modal .iframe-video{}
.video-modal.modal-open{display:block;z-index:1000;}
.video-modal .btn-close-modal{
  position:fixed;top:22px;right:16px;color:#fff;width:36px;height:36px;
  background:url('https://og.kakaobank.io/view/02caa025-6e3e-42b6-82ed-27f7718252cd') 4px 4px no-repeat;background-size:28px 28px;
}

.popup{
  z-index:1000;
  display:none;position:fixed;top:0;right:0;bottom:0;left:0;box-sizing:border-box;
}
.popup.open{display:block;}
.popup .bg{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0, 0, 0, 0.6);}
.popup-content{
  position:relative;display:inline-block; width: 300px;
  height: 230px;background-color:#fff;border-radius:25px;
  padding:50px 0 0;box-sizing:border-box;
}
.popup-content .desc{
  margin: 0 0 45px 0;
  font-weight: bold;
  text-align: center;
  color: #000;
  font-size: 20px;
  line-height: 1.3;
}
.popup-content .btn-ok:focus, .popup-content .btn-ok:focus-visible{
  outline: none;
  border: 0 none;
}
.popup-content .btn-ok{
  width: 260px;
  height: 63px;
  border-radius: 37px;
  background-color: #191919;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  color: #fff;

}

/*.popup-inapp .popup-content {*/
/*  width: 460px;*/
/*  height: 364px;*/
/*  border-radius:50px;*/
/*  padding:60px 0 26px;*/
/*}*/
/*.popup-inapp .popup-content .desc{*/
/*  font-size: 32px;*/
/*}*/
/*.popup-inapp .popup-content .btn-ok{*/
/*  width: 408px;*/
/*  height: 114px;*/
/*  border-radius: 75px;*/
/*  font-size: 32px;*/
/*}*/

.bottom-layer{
  display: none;
  z-index:1000;
  position:fixed;top:0;right:0;bottom:0;left:0;box-sizing:border-box;
}
.bottom-layer .bg{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0, 0, 0, 0.6);}
.bottom-layer .box {
  position:fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 420px;
  padding: 50px 0 0 0;
  border-radius: 30px 30px 0 0;
  background-color: #fff;
  box-sizing: border-box;
  text-align: center;
  transform: translateY(420px);
  transition: transform 0.3s;
}
.bottom-layer.open{
  display: block;
}
.bottom-layer.open .box {
  transform: translateY(0);
}
.bottom-layer .tit {
  display: block;
  margin-bottom: 23px;
  font-size: 31px;
  font-weight: 800;
  letter-spacing: -0.65px;
  text-align: center;
  color: #000;
}
.bottom-layer .desc {
  font-size: 16px;
  line-height: 1.63;
  text-align: center;
  color: #000;
}
.bottom-layer .btn-share-friend {
  width: 247px;
  height: 63px;
  border-radius: 37px;
  background-color: #191919;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  color: #fff;
  margin: 40px auto 0;
}
.bottom-layer .btn-layer-close {
  position: absolute;
  top: 20px;
  right: 20px;
}

@media (max-width: 321px) {
  .bottom-layer .tit {
    font-size: 25px;
  }
}
@media (min-width: 1024px) {
    .panel1 .tit {
      top: 100px;
    }
    .panel1 .desc {
      bottom: 148px;
    }
    .panel1 .ico-arrow {
      bottom: 18px;
    }
    .panel5 .inner {
      padding-bottom: 150px;
    }
   .btn-apply {
     bottom: 60px;
    }
}