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

.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: 114px 24px 0px 24px; max-width:328px;}
.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;}
.coupons {margin-top:40px; padding: 0;list-style: none;}
.coupons-lucky {margin-top:16px;}
.coupon-item {overflow: hidden;margin-bottom: 16px;overflow: visible;}
.coupon-item .clear {clear:both;}
.coupon-item .img-reward {width: 105px;height: 65px;float: left;position: relative;overflow: visible;}
.coupon-item-lucky .img-reward {width: 105px;height: 80px;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;}
.coupon-item-lucky .desc p {padding-top:11px;}
.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 #c6c0b7;}
.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: #fff;}
.accordion-title:before {content: "";display: inline-block;height: 100%;vertical-align: middle;}
.section-notice {color:#fff;overflow: auto;background: #293498;padding: 90px 0 92px;}
.list-text a {color:#fff;text-decoration: underline;text-decoration-color: #fff; 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/5de964f6-e449-4958-b990-8f1eec050b90);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: 144px; height: 16px; position: absolute;left:0px;top:26px;background:url(https://og.kakaobank.io/view/9b87ac4d-36a1-44a1-8e15-1fba2ceb30c0);background-size: 144px 16px;}
.img-logo2 {width: 102px; height: 16px; position: absolute;right:0px;top:26px;background: url(https://og.kakaobank.io/view/f21c06f1-68f1-44cf-9789-f214402f202b);background-size: 102px 16px;}
.img-ix {position: absolute;width: 50px;height: 9px;bottom: 35px; left: 38px;background: url(https://og.kakaobank.io/view/84f44083-8055-4dc8-ac79-2e790ebc07dc); 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;line-height: 25px; font-size: 14px;color:#000;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(https://og.kakaobank.io/view/0d177ca1-9236-4c56-bc39-215a492e78d0);background-size: 105px 65px;}
.img-reward02 {background: url(https://og.kakaobank.io/view/14e1d467-4fc9-4640-be2b-9e8ce56a3619);background-size: 105px 65px;}
.img-reward03 {background: url(https://og.kakaobank.io/view/4cdca352-8137-4072-aced-dabf8eb7b552);background-size: 105px 80px;}
.img-reward04 {background: url(https://og.kakaobank.io/view/238b6d3f-53de-45fa-8291-5339573f2533);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/0ecf73cd-73b9-4423-b33a-fc9e30141f3a);background-size: 54px 54px;}
.img-share02 {width: 54px;height: 54px;background: url(https://og.kakaobank.io/view/659aabbd-481e-461a-b66a-2b3000abfc0d);background-size: 54px 54px;}
.img-title {width: 100%;}
.bd {border-bottom: 2px solid #111962; margin: 90px auto 0;}
.section02 {padding: 90px 0 0;}
.section02 .thumb {position:relative;}
.section02 .thumb img {width:100%;}
.section02 .thumb .copy {position:absolute; bottom:29px; left:24px; width:165px;}
.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/d03d59e2-bba6-4495-aa7b-d4620946e78b); background-size: 167px 26px;}
.img-carousel {
  background: url(https://og.kakaobank.io/view/fde4f4ab-1556-43df-99b9-e4fef8f68b8b); background-size: 570px 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: -570px 0px;}
}
@keyframes carousel {
  0% {background-position: 0px 0px;}
  100% {background-position: -570px 0px;}
}
.img-caroucel-wrapper {background: url(https://og.kakaobank.io/view/fde4f4ab-1556-43df-99b9-e4fef8f68b8b); 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/7e03ebc2-e7a5-48ad-aae4-6819f93c6976);background-size: 136px 22px;margin: auto;}
.btn-bottom.has-text {padding:16px;}
.btn-bottom {margin: 14px 10px;background: #111962;padding: 21px;display: block;text-align: center;border-radius: 10px;}
.alert {width: 300px;position: absolute;left:0;top: 50%;right:0;background:#ffdc00;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/9298fb40-5e0e-45ff-ad80-2026b9a8550f);background-size: 200px 68px;}
.layer-app .alert-text {width: 200px;height: 68px;margin: 40px auto 32px;background: url(https://og.kakaobank.io/view/4fe250cc-c72a-4df7-9aa7-a40420104f68);background-size: 200px 68px;}
.alert-btn {display:block;margin: 12px;background:#111962;border-radius: 10px;padding: 20px;}
.layer-end .alert-btn-text {width: 140px; height: 20px;background: url(https://og.kakaobank.io/view/55db53ab-5b87-47eb-95b8-2b0bc2090576); background-size: 140px 20px;margin: auto;}
.layer-app .alert-btn-text {width: 140px; height: 20px;background: url(https://og.kakaobank.io/view/11395bfe-47e9-4de1-b94d-7c9ba639f41e); 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: 336px;margin:auto;position: relative;overflow: visible; }
.img.img-ryan .img-seq {position:relative; width:100%; height:100%; background:url("https://og.kakaobank.io/view/88dbe7da-a7ed-4638-9e16-5a0cdb7c6db1") 0 0 no-repeat; background-size:100%;
  animation:loop-seq-ani 1.1s steps(9) 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.img-ryan {width:320px; height:286.719px;}
  .section-header:before {height:29px;}
  .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;}
}