img,
a {
  -webkit-user-select: none;
  user-select: none;
}
html,
body {
  font-family: "Pretendard";
  color: #333;
}
a,
a:active,
a:visited,
a:focus {
  text-decoration: none;
  color: initial;
}
h1, h2 {font-weight: bold;}
.text-0 {font-size: 0;}
.title {
  font-size: 42px;
  line-height: 52px;
  color: #222;
}
.btn-check {
  margin-top: 96px;
  height: 60px;
  width: 100%;
  background: #222;
  color: #fff;
  border-radius: 10px;
  font-size: 17px;
  font-weight: 700;
}
.subtitle {
  margin-top: 32px;
  font-size: 16px;
  line-height: 26px;
}
.txt-blue {
  color: #54b7ff;
}
.list-text {
  font-size:15px;
  line-height: 26px;
}
.list-text > li {
  display: block;
  padding-left: 10px;
}
.list-text > li::before {
  content: "";
  display: inline-block;
  width: 2px;
  height: 2px;
  background: #333;
  vertical-align: middle;
  margin-right: 6px;
  margin-left: -8px;
}
section {
  box-sizing: border-box;
}
.section__content {
  max-width: 375px;
  margin: auto;
}
.section--head {
  padding: 0px 16px 74px;
  text-align: center;
  margin-top: 56px;
}
.deliberation {
  padding-left: 6px;
  vertical-align: middle;
  margin-top: 30px;
  font-weight: bold;
}
.deliberation:before {
  content: "";
  width: 2px;
  height: 2px;
  background: #333;
  display: inline-block;
  margin-left: -6px;
  vertical-align: middle;
}
.soho-ad {
  display: flex;
  align-items: center;
  margin-top: 34px;
}
.soho-ad__desc {
  margin-left: 20px;
  text-align: left;
}
.soho-ad__desc__main {
  font-size: 17px;
  color: #000;
  font-weight: 700;
  line-height: 20px;
}

.soho-ad__desc__sub {
margin-top: 6px;
display: block;
font-size: 14px;
color: #000;
opacity: 0.5;
}

.section--share {
  padding: 60px 0px 20px; text-align: center; background: #f1f1f1
}
.btn-share {
  padding: 25px 40px;background:#fff;border-radius: 40px;font-size:21px;font-weight: bold;
}
.btn-share__ico {display: inline-block;margin-right:10px;width:25px;height:25px;vertical-align: middle;background:url(https://og.kakaobank.io/view/2138a6dd-5bf5-49a5-89e9-5cbf4accdeaf);background-size: 25px 25px;}
.btn-share__txt {vertical-align: middle;}

.section--info {padding: 80px 30px 140px;background: #f1f1f1}
.section--info h2 {font-size:24px;}
.list-info {margin-top:40px;}
.list-info > li {border-top:2px solid #333;}
.list-info > li+li {margin-top:30px;}
.list-info a {width: 100%;height: 64px;line-height: 64px;font-size: 18px;display: flex;align-items: center;}
.btn-toggle {display: block;width: 22px;height: 22px;margin-left: auto;background:url(https://og.kakaobank.io/view/149e625b-fe61-41d1-96e6-3e4ed88f95a9);background-size: 22px 22px;-webkit-transform-origin: center center;transform-origin: center center;-webkit-transform: rotate(135deg);transform: rotate(135deg);-webkit-transition:transform 0.3s;transition:transform 0.3s;font-size: 0;}
.btn-toggle.is-active {-webkit-transform-origin: center center;transform-origin: center center;-webkit-transform: rotate(0deg);transform: rotate(0deg);font-size: 0;}

.dialog {
  position:fixed;
  width:100%;
  height: 100%;
  left:0;
  top:0;
  background:rgba(0,0,0,0.5);
  display: flex;width: 100%;height: 100%;align-items: center;justify-content: center;
}
.dialog__layout {width:100%;min-width: 300px;max-width:330px;border-radius:16px;background:#fff;overflow:hidden;text-align: center;}
.dialog__content {padding:36px 30px;}
.dilaog__title {font-size:16px;color:#222;}
.dialog__desc {font-size:13px;color:#666;margin-top:10px;}
.dialog__btn {width:100%;background:#FFE300;height:54px;}


.bottomsheet {
  position:fixed;
  width:100%;
  height: 100%;
  left:0;
  top:0;
  background:rgba(0,0,0,0.5);
  display: flex;width: 100%;height: 100%;align-items: flex-end;justify-content: center;
}
.bottomsheet__layout {width:100%;border-top-left-radius: 16px;border-top-right-radius: 16px;background:#fff;overflow:hidden;}
.bottomsheet__handle {display: block;width: 35px;height:5px;background: #EAECEF;border-radius: 5px;margin:6px auto 0;}
.bottomsheet__content {margin-top:30px;padding: 0px 24px 60px;}
.bottomsheet__title {font-size:18px;color:#222;font-weight: 700;}
.list-accounts > li {display: flex;width: 100%;margin-top:32px;}
.list-accounts__ico {display: block;width:20px;height:20px;background: #FFE300;border-radius: 20px;}
.list-accounts__msg {padding-left: 8px;}
.list-accounts__msg__title {font-size:16px;color:222;}
.list-accounts__msg__small {font-size:13px;color:#888;margin-top:6px;}
.list-accounts__btn {display: block;width:20px;height:20px;background: url(https://og.kakaobank.io/view/9cb8fed9-755c-4eae-9b07-d5d61ccfcf65);background-size: 20px 20px;margin-left:auto;align-self: center;}

.scene-form {height:100vh;display: flex;flex-direction: column;}
.scene-form__section-info h1 {font-size:24px;font-weight: 700;margin-top:16px;line-height: 32px;}
.scene-form__section-info {padding: 8px 24px 0px;}
.scene-form__subtitle {font-size:13px;color:#888;margin-top:12px}
.txt-green {color: #19ba6d;}
.scene-form__section-datas {padding: 0px 20px;}
.scene-done__section-datas {padding: 80px 20px 0px;margin-top:auto;}
.scene-form__block {padding:24px;background:#F9F9F9;border:1px solid #F4F4F4;border-radius: 16px;overflow: hidden;font-size:14px;color:#222;}
.scene-form__block + .scene-form__block {margin-top: 8px}
.scene-form__block--text {padding:16px;background:#F9F9F9;border:1px solid #F4F4F4;border-radius: 16px;overflow: hidden;font-size:14px;color:#222;}
.txt-gray {color:#666;}
.block-rows {}
.block-row {clear: both;}
.block-row + .block-row {padding-top:16px;}
.block-row .left  {float: left;}
.block-row .right  {float: right;text-align: right;}
.block-row .big {font-weight: 700; font-size: 16px;color:#222;}
.block-texts {font-size:12px;color:#666;padding-left:6px;}
.block-texts > li + li {margin-top:6px;}
.block-texts > li::before {
  content: "";
  display: inline-block;
  width: 2px;
  height: 2px;
  background: #666666;
  vertical-align: middle;
  margin-right: 4px;
  margin-left: -6px;
}
.scene-form__block--btn {display:inline-block;margin-top:20px;background:#f7f7f7;border-radius: 12px;}
.scene-form__block--btn__txt {font-size:12px;font-weight: 700;padding:10px 12px;}
.scene-form__block--btn__arrow {display: inline-block;width:8px;height:8px;vertical-align: middle;margin-left:2px;background:url(https://og.kakaobank.io/view/9a0e10c0-b398-481c-a274-c66d60e5e5c9);}
.txt-linkblue {color:#005A96}
.btn-mini {border:1px solid #AAAAAA;border-radius: 4px;font-size:11px;padding:4px 5px 3px;background:#fff;margin-top:-2px;}
.br-320 {margin-top:4px;}
@media screen and (min-width: 320px) {
  .br-320 {display: none;}
}

.scene-done {
  height:100vh;display: flex;flex-direction: column;
}
.secene-done__section--top {
  padding-top: 64px;
  text-align: center;
}
.secene-done__section--top h1 {
  font-size:24px;line-height: 32px;font-weight: bold;margin-top:32px;
}
.secene-done__section--top__desc {
  color:#888;max-width:260px;margin:16px auto 0;white-space: nowrap;
}
.txt-bold {
  font-weight: bold;
}
.section__bottom {padding: 36px 16px 34px}
.btn--bottom {width:100%;background:#FFE300;height:60px;border-radius: 12px;font-size:17px;color:#222;}

.banner {
  border-radius: 16px;background:#0B56AC;height:74px;margin-top:8px;
  box-sizing: border-box;
}
.banner__flex {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0px 24px;
  height: 100%;
}
.banner__left {color:#fff}
.banner__txt--small {font-size:12px; opacity: 0.8;}
.banner__txt--big {font-weight: 700;font-size: 18px;}
.banner__right {margin-left:auto;font-size: 0;}
.ico-loading::after {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 20px;
  height: 20px;
  background: url(https://og.kakaobank.io/view/98446abe-e201-4e36-96ba-a0c6ae0b5c2b);
  background-size: 20px 20px;;
  transform-origin: center center;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% {rotate: 0deg;}
  100% {rotate: 360deg;}
  
}

.skeleton {
  position: relative;
  overflow: hidden;
}

.skeleton--effect {
  width: 300%;
  height: 100%;
  position: absolute;
  background: #f8f8f8;
  overflow: hidden;
  -webkit-animation: skeletonLoop 1s infinite ease-out;
  animation: skeletonLoop 1s infinite ease-out;
}

.skeleton--effect:before {
  content: "";
  position: absolute;
  width: 18%;
  height: 100%;
  top: 0;
  left: 50%;
  background: rgb(248, 248, 248);
  background: -moz-linear-gradient(90deg, rgba(248, 248, 248, 1) 0%, rgba(251, 251, 251, 1) 30%, rgba(251, 251, 251, 1) 70%, rgba(248, 248, 248, 1) 100%);
  background: -webkit-linear-gradient(90deg, rgba(248, 248, 248, 1) 0%, rgba(251, 251, 251, 1) 30%, rgba(251, 251, 251, 1) 70%, rgba(248, 248, 248, 1) 100%);
  background: linear-gradient(90deg, rgba(248, 248, 248, 1) 0%, rgba(251, 251, 251, 1) 30%, rgba(251, 251, 251, 1) 70%, rgba(248, 248, 248, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f8f8f8", endColorstr="#f8f8f8", GradientType=1);
}

@-webkit-keyframes skeletonLoop {
  0% {
    -webkit-transform: translateX(-50%);
  }

  100% {
    -webkit-transform: translateX(0%);
  }
}

@keyframes skeletonLoop {
  0% {
    transform: translateX(-50%);
  }

  100% {
    transform: translateX(0%);
  }
}