@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: #242424;}

.section {background: #fff;overflow: hidden;}
.section-wrapper {margin: auto; max-width: 315px;padding: 0 34px;position: relative;overflow: hidden;}
.section-header {position:relative; background: transparent;overflow: visible;}
.section-header .section-wrapper {overflow: visible;padding: 134px 24px 26px 24px; max-width:328px;}
.section-header:before {content:""; position:absolute; bottom:-9px; left:0; width:100%; height:40px; background-color:#ffffff;}

.img {display:block;text-indent: -9999px;overflow: hidden;}
.coupons {margin-top:40px; padding: 0;list-style: none;}
.coupons-lucky {margin-top:16px;}
.coupon-item {overflow: hidden;margin-bottom: 44px;overflow: visible;}
.coupon-item .clear {clear:both;}
.coupon-item .img-reward {position:relative; width: 110px;height: 64px;float: left;position: relative;overflow: visible;}
.coupon-item .img-reward:after {content:""; position:absolute; bottom:-17px; right:-17px; width:34px; height:34px;}
.coupon-item-lucky {margin-bottom:0;}
.coupon-item-lucky .img-reward {width: 110px;height: 64px;float: left;position: relative;overflow: visible;}
.img-reward .img-badge {width: 34px; height: 34px;position: absolute;right: -14px; bottom: -14px;}
.coupon-item .desc {margin-left: 110px;font-size: 16px; line-height: 29px;}
.coupon-item p {margin: 0;}
.coupon-item .desc p {vertical-align: middle;display: inline-block;padding:4px 0px 0px 20px;}
.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:#d0d0d0;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;}
.list-text>li.tit {font-weight: bold; color:#d0d0d0; margin-left:-14px;}
.list-text>li.tit:before {content:none;}
.accordion > li {border-top: 3px solid #d0d0d0;}
.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: #d0d0d0;}
.accordion-title:before {content: "";display: inline-block;height: 100%;vertical-align: middle;}
.section-notice {color:#fff;overflow: auto;background: #181818;padding: 90px 0 92px;}
.list-text a {color:#d0d0d0;text-decoration: underline;text-decoration-color: #d0d0d0; font-weight: bold;}
.img-noti-2 {width: 18px;height: 18px;position: absolute;right: 10px;top: 33px;margin: auto;background: url(https://og.kakaobank.io/view/09cbb0a2-9b2e-494e-91bf-0168bc18f7e0);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: 153px; height: 16px; position: absolute;left:0px;top:26px;background:url(https://og.kakaobank.io/view/7df36240-99bb-429f-8d74-b556a05b618f);background-size: 153px 16px;}
.img-logo2 {width: 139px; height: 16px; position: absolute;right:0px;top:26px;background: url(https://og.kakaobank.io/view/c3e3834b-f089-472f-ac0b-892c688bb851);background-size: 139px 16px;}
.img-ix {position: absolute;width: 37px;height: 11px;bottom: 58px; left:290px;background: url(https://og.kakaobank.io/view/be9b1003-412e-4637-a4f5-d08cdb940b74); background-size: 37px 11px;}
.img-secion01-title {width:100%;}
.img-secion02-title {width: 100%;}
.section-desc, .list-text.section-desc {margin: 34px 0 0;line-height: 28px; font-size: 15px;color:#000;opacity: 1;}
.list-text.section-desc>li.no-star:before {
  content:"";
  display: inline-block;
}
.section01 {padding: 55px 0 0;position: relative;z-index: 1}
.section01 .section-desc {margin-bottom:40px;}
.img-secion03-title {width: 100%;}
.img-reward01 {background: url(https://og.kakaobank.io/view/23d24817-04b3-44cb-ac66-fb288a4bdaf5);background-size: 110px 64px;}
.img-reward01:after {background:url(https://og.kakaobank.io/view/1c6bc810-977f-4231-92f2-84a7ab1bc488); background-size:100%;}
.img-reward02 {background: url(https://og.kakaobank.io/view/d40cf8b7-d0a7-488d-a052-b53483d597eb);background-size: 110px 64px;}
.img-reward02:after {background:url(https://og.kakaobank.io/view/21ae121a-0d81-43d0-9835-f9d4066d4dea); background-size:100%;}
.img-reward03 {background: url(https://og.kakaobank.io/view/711ad66b-03f9-4617-ab58-2621cee3f584);background-size: 110px 64px;}
.img-share-text {width: 100%;max-width: 156px;}
.img-share01 {width: 54px;height: 54px;background: url(https://og.kakaobank.io/view/483b6338-eea8-41f2-bd89-5a9379a5c2d1);background-size: 54px 54px;}
.img-share02 {width: 54px;height: 54px;background: url(https://og.kakaobank.io/view/f40b3e54-1134-471d-8bb6-e5c0a26f6765);background-size: 54px 54px;}
.img-title {width: 100%;}
.bd {border-bottom: 2px solid #000000; margin: 90px auto 0;}
.section02 {padding: 90px 0 0;}
.section02 .thumb {position:relative;}
.section02 .thumb img {width:100%;}
.section02 .thumb .copy {position:absolute; bottom:13px; left:20px; width:257px;}
.section02 .sub-tit {display: block; font-size:16px; line-height: 29px; font-weight: bold; padding:40px 0 15px;}
.section02 .or {width:100%; margin-top:15px;}
.section03 {padding: 90px 0 0;}
.section04 {padding: 64px 0 70px;}
.section05 {padding: 90px 0 0;}
.section05 .coupon-item {margin-bottom:8px; font-size:0;}
.section05 .coupon-item .week-box {padding:10px; border-radius: 24px;}
.section05 .copy {width:185px;}
.section05 .logo {float:right; width:74px;}
.section05 .clear {clear:both;}
.section05 .week1 {background-color:#df1681;}
.section05 .week5 {background-color:#fd6819;}
.section05 .week9 {background-color:#14387f;}
.section05 .week17 {background-color:#f8532e;}
.img-notice {width: 167px; height: 26px;margin-bottom: 40px;background: url(https://og.kakaobank.io/view/58f1ebd1-cba8-47bb-97c2-99a67c60ae46); background-size: 167px 26px;}
.img-carousel {
  background: url(https://og.kakaobank.io/view/77053488-8c56-491e-a86b-897d924149e5); background-size: 576px 130px;width: 100%;height: 130px;
  -webkit-animation: carousel 10s linear infinite;
  animation: carousel 10s linear infinite;
}
.img-carousel:hover, .img-carousel:focus {animation-play-state: paused;}

@-webkit-keyframes carousel {
  0% {background-position: 0px 0px;}
  100% {background-position: -576px 0px;}
}
@keyframes carousel {
  0% {background-position: 0px 0px;}
  100% {background-position: -576px 0px;}
}
.img-caroucel-wrapper {background: url(https://og.kakaobank.io/view/77053488-8c56-491e-a86b-897d924149e5); background-size: 576px 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: 185px; height:21px;background: url(https://og.kakaobank.io/view/d9afed17-67c1-481c-9ad0-24ef09f0eeab);background-size: 185px 21px;margin: auto;}
.btn-bottom {margin: 14px 10px;background: #ffd200;padding: 21px;display: block;text-align: center;border-radius: 10px;}
.alert {width: 300px;position: absolute;left:0;top: 50%;right:0;background:#ffd200;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: 256px;height: 68px;margin: 40px auto 32px;background: url(https://og.kakaobank.io/view/dc44e558-a14f-4fab-97bb-038daa756d08);background-size: 256px 68px;}
.layer-app .alert-text {width: 256px;height: 68px;margin: 40px auto 32px;background: url(https://og.kakaobank.io/view/af8bf726-1ad2-47a3-af25-f9094325d77e);background-size: 256px 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/0ce8ebbe-c3d4-4d19-b521-66a64e220f87); background-size: 140px 20px;margin: auto;}
.layer-app .alert-btn-text {width: 140px; height: 20px;background: url(https://og.kakaobank.io/view/ae2616d3-b79a-407b-9014-244fab6c3911); 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: 315px; height: 290px;margin:auto;position: relative;overflow: visible; }
.img.img-ryan .img-seq {position:relative; width:100%; height:100%; background:url("https://og.kakaobank.io/view/9eb9df7a-b7b0-415c-bc21-1dfcf2c06ccf") 0 0 no-repeat; background-size:100%;
  animation:loop-seq-ani 3.3s steps(19) infinite;
}

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



.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-logo {width:133px; background-size:133px 16px;}
  .img-logo2 {width:119px; background-size:119px 16px;}

  .section02 .thumb .copy {width:207px;}
}