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

body {background: #46ccf3;}
  html,
  body {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    user-select: none;
  }

  a:focus,
  a:active,
  button:focus,
  button:active {outline: none;}


.section {background: #fff;overflow: hidden;}
.section-wrapper {margin: auto;    max-width: 315px;padding: 0 34px 90px;position: relative;overflow: hidden;}

.section-header {position:relative; background: transparent;overflow: visible;}
.section-header .section-wrapper {overflow: visible;padding: 127px 24px 0px 24px; max-width:328px;}
.section-header .section-wrapper:after {content:none;}
.section-header:before {content:""; position:absolute; bottom:-9px; left:0; width:100%; height:32px; background-color:#ffffff;}

.img {display:block;text-indent: -9999px;overflow: hidden;}
.char img{ width:100% }
.img-cup{display: block; width: 100%;padding:100% 0 0;background: url(https://og.kakaobank.io/view/76c45829-9d62-4612-9e25-ba7a7c9bfd0c) no-repeat;background-size: contain;margin:15px 0 0;
}
.img-or{display: block;width: 100%;background: url(https://og.kakaobank.io/view/c9905b58-2833-4f39-b61f-ec1b15dda1c2) no-repeat;background-size:contain; margin:15px 0 ;
}
.img-coupon{width:100%;  max-width: 307px;height: 64px;background: url(https://og.kakaobank.io/view/ce8473da-bdfe-497b-8e2a-acd90fb2d549) no-repeat;background-size: contain; 
}
.list-title{
font-style: normal;
font-weight: 700;
font-size: 15px;
line-height: 1.93;
color: #1A1D1F;
padding-left:12px;
}
.list-title:before {content: "*";display: inline-block;width:12px;margin-left: -12px;}
.coupon-list > li {
   line-height: 1.93;
   color: #1A1D1F;
   padding-left:12px;}

.shares {list-style: none;text-align: right;margin: 0 0 0 16px;padding: 0;font-size: 0;}
.share {display: inline-block;width: 54px;height: 54px;margin: 0 0 0 12px;padding: 0;}
.list-text {list-style: none;padding: 0 0 0 14px;margin: 0 0 42px;color:#fff;line-height: 28px;font-size: 16px;opacity: 0.7;}
.list-text>li:before {content: "*";display: inline-block;width:14px;margin-left: -14px;}
.list-text>li.serial:before {content:none;}
.accordion > li {border-top: 3px solid #032237;}
.accordion-block {position: relative;}
.accordion-title {height: 82px;display: block;box-sizing: border-box;font-weight: bold;font-size: 22px;line-height: 34px;width: 100%;text-align: left;border: none;color: #032237;}
.accordion-title:before {content: "";display: inline-block;height: 100%;vertical-align: middle;}
.section-notice {color:#032237;overflow: auto;background: #5fd0f1;padding: 90px 0 92px;}
/* .list-text a {color:#fff;text-decoration: underline;text-decoration-color: #fff; font-weight: bold;} */
.section-notice .list-text, .list-text a {
  color:#032237;
}
.img-noti-2 {width: 18px;height: 18px;position: absolute;right: 10px;top: 33px;margin: auto;background: url(https://og.kakaobank.io/view/31665106-1d11-420b-9e88-c0174edd5ce9);background-size: 18px 18px;
  -webkit-transition: -webkit-transform 0.7s;
  transition: transform 0.5s;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
.is-active .img-noti-2{
  -webkit-transform: rotate(225deg);
  transform: rotate(225deg);
}
.accordion-content {padding-top: 40px;}
.accordion-title + .accordion-content{padding-top:4px;}
.img-logo {width: 152px; height: 16px; position: absolute;left:0px;top:26px;background:url(https://og.kakaobank.io/view/6da091a6-6860-45ce-8d82-540d9afc6ecd);background-size: 152px 16px;}
.img-logo2 {width: 107px; height: 16px; position: absolute;right:0px;top:26px;background: url(https://og.kakaobank.io/view/ec26f3df-bddb-48eb-8fdb-b684d5988e06);background-size: 107px 16px;}
.img-ix {position: absolute;width: 50px;height: 9px;bottom: 35px; left: 38px;background: url(@@img-kakao-ix@2x.png); background-size: 50px 9px;}
.img-secion01-title {width:100%;}
.img-secion02-title {width: 100%; margin-bottom:43px;}
.section-desc, .list-text.section-desc {margin: 34px 0 0;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.93;
  color: #1a1d1f;  opacity: 1;}
.list-text.section-desc>li.no-star:before {
  content:"";
  display: inline-block;
}
.section01 {padding: 67px 0 0;position: relative;z-index: 1}
.section01 .section-desc {margin-bottom:40px;}
.img-secion03-title {width: 100%;}
.img-reward01 {background: url(@@03-1.svg);background-size: 105px 65px;}
.img-reward02 {background: url(@@03-2.svg);background-size: 105px 65px;}
.img-reward03 {background: url(@@02-3@2x.png);background-size: 105px 80px;}
.img-reward04 {background: url(@@02-4@2x.png);background-size: 105px 80px;}
.img-share-text {width: 100%;max-width: 156px;}
.img-share01 {width: 54px;height: 54px;background: url(https://og.kakaobank.io/view/cf691ef3-bb46-4cc8-83f6-2bbea946564c);background-size: 54px 54px;}
.img-share02 {width: 54px;height: 54px;background: url(https://og.kakaobank.io/view/e6292fe6-0baf-4cd5-95ff-51aad4ed55da);background-size: 54px 54px;}
.img-title {width: 100%;}
.bd {border-bottom: 2px solid #032237; }
.section03 .coupons{margin-top:13px}
.section03 .coupon-item{padding-top:30px}
.section03 .coupon-item .copy{width: 100%;}
.section03 .section-wrapper {padding: 0 34px 65px}
.section04 .section-wrapper {padding: 0 34px 70px}
.bd {border-bottom: 2px solid #1a1d1f; margin: 90px auto 0;}
.img-notice {width: 167px; height: 26px;margin-bottom: 40px;background: url(https://og.kakaobank.io/view/874ff231-fdff-4c45-9429-995bff25a9b0); background-size: 167px 26px;}
.img-carousel {
  display: block;
  margin:0 auto;
  background: url(https://og.kakaobank.io/view/024e5cae-3e92-4291-911d-2a6e3d03d2c5); 
  background-size: 307px 173px;
  width: 307px;
  height: 173px;
}
.img-carousel:hover, .img-carousel:focus {animation-play-state: paused;}

@-webkit-keyframes carousel {
  0% {background-position: 0px 0px;}
  100% {background-position: -570px 0px;}
}
@keyframes carousel {
  0% {background-position: 0px 0px;}
  100% {background-position: -570px 0px;}
}
.img-caroucel-wrapper {background: url(@@01-1.png); background-size: 570px 130px;width: 100%;height: 130px;}
.fake-bg {background: #fff;}
.left-text {display: inline-block;font-size: 12px;margin: 7px auto 0px;color:#fff090;}
.img-btn {width: 136px; height:22px;background: url(https://og.kakaobank.io/view/aba07096-8fd5-4b93-9a9e-59b801253ca6);background-size: 136px 22px;margin: auto;}
.btn-bottom.has-text {padding:16px;}
.btn-bottom {margin: 14px 10px;background: #032237;padding: 21px;display: block;text-align: center;border-radius: 10px;}
.alert {width: 300px;position: absolute;left:0;top: 50%;right:0;background:#46ccf3;border-radius: 20px;margin: -100px auto auto auto;}
.layer {position: fixed;width:100%;height: 100%; left:0;right:0;top:0;bottom:0;z-index: 2;}
.dim {width: 100%; height: 100%;background: rgba(0,0,0,0.6);}
.layer-end .alert-text {width: 200px;height: 68px;margin: 40px auto 32px;background: url(https://og.kakaobank.io/view/86b0d82f-b4ad-4ebc-acdc-ca10d5c586f0);background-size: 200px 68px;}
.layer-app .alert-text {width: 200px;height: 68px;margin: 40px auto 32px;background: url(https://og.kakaobank.io/view/d75538cb-29aa-48de-a759-557529217aea);background-size: 200px 68px;}
.alert-btn {display:block;margin: 12px;background:#000000;border-radius: 10px;padding: 20px;}
.layer-end .alert-btn-text {width: 140px; height: 20px;background: url(https://og.kakaobank.io/view/86d81c3d-0a84-4df0-83e1-d716036924dd); background-size: 140px 20px;margin: auto;}
.layer-app .alert-btn-text {width: 140px; height: 20px;background: url(https://og.kakaobank.io/view/a36426b0-b90f-44df-bc1e-02862f64c1f1); background-size: 140px 20px;margin: auto;}
.fixed-bottom {position: fixed;left:0;right:0;bottom:0;z-index: 2;display: none;}
.fixed-bottom.inApp_iphonex {bottom:16px;}

.img.img-ryan {width: 375px; height: 290px;margin:auto;position: relative;overflow: visible; }
.img.img-ryan .img-seq {position:relative; width:340px; height:100%; background:url("https://og.kakaobank.io/view/8cf8a9ab-de88-42a8-92ba-1b55fc691ddc") 0 0 no-repeat; background-size:cover;
  animation:loop-seq-ani 1.2s steps(7) infinite;
  background-size: 2380px 299.5px;
}

@keyframes loop-seq-ani {
  0% {
      background-position: 0px 0px
  }

  100% {
      background-position: -2380px 0px
  }
}


.img-draw {
  width: 100%;
}

.content {
  overflow: hidden;
}

.share-table {
  width: 100%;
  display: table;
}

.share-row {
  display: table-row;
}

.share-cell {
  white-space: nowrap;
  display: table-cell;
  vertical-align: middle;
}

.logo-wrapper {margin: auto;position: absolute;left: 24px;right: 24px;top: 0;}


@media screen and (max-width: 320px) {
  .img.img-ryan {width:320px; height:286.719px;}
  .section-header:before {height:39px;}
  .img-ix {bottom:31px; left:25px;}

  .section05 .copy {width:165px;}
  .section05 .logo {width:64px;}

  .coupon-item .img-reward {width:86px;}
  .coupon-item-lucky .img-reward {width:86px; height:65px;}
  .img-reward01, .img-reward02 {background-size:86px 65px;}
  .img-reward03, .img-reward04 {background-size:86px 65px;}
  .coupon-item .desc {margin-left:86px;}
  .coupon-item-lucky .desc p {padding-top:9px; font-size:14px; line-height:25px;}
}