@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}
hr {border: 0 none;}
 

.text-underline {
  text-decoration: underline;
}
.ir {font-size:0; text-indent: -99999px;}
.img {
  display: block;
  margin: auto;
}

.column-left {
  width: 160px;
  float: left;
}

.column-right {
  text-align: right;
  margin-left: 160px;
  line-height: 34px;
}
.column-right2 {
  text-align: right;
  margin-left: 160px;
  padding-top: 26px;
}

.column-box {
  margin-top: 40px;
  position: relative;
  overflow: hidden;
}
/*
.column-box+.column-box {
  margin-top: 56px;
}
*/

.img-logo-netflix {
  width: 159px;height: 52px;
  background: url(https://og.kakaobank.io/view/4b2fa687-dc6a-424d-a745-4ae430bfe95b);
  background-size: 159px 52px;
}

.img-logo-delivery {
  width: 159px;height: 52px;
  background: url(https://og.kakaobank.io/view/9b5d3ce8-ace6-46c7-ade5-3710cb71df05);
  background-size: 159px 52px;
}

.img-logo-yugi {
  width: 159px;height: 52px;
  background: url(https://og.kakaobank.io/view/e0bc45c6-2c97-4491-982a-e4488385b419);
  background-size: 159px 52px;
}

.img-logo-gift {
  width: 159px;height: 52px;
  background: url(https://og.kakaobank.io/view/2e9d3de2-108c-4ee8-bac4-d184e38f3c35);
  background-size: 159px 52px;
}

.img-logo-hair {
  width: 159px;height: 52px;
  background: url(https://og.kakaobank.io/view/ce215d9f-747b-4944-99c7-0b796f298aa6);
  background-size: 159px 52px;
}

.img-logo-starbucks {
  width: 159px;height: 52px;
  background: url(https://og.kakaobank.io/view/c05dd902-a4f7-4b79-8ed8-4d5c47dfb957);
  background-size: 159px 52px;
}

.img-logo-lotte {
  width: 159px;height: 52px;
  background: url(https://og.kakaobank.io/view/90b87b2e-fcce-4a03-8802-bf16fb499262);
  background-size: 159px 52px;
}

.img-logo-mega {
  width: 159px;height: 52px;
  background: url(https://og.kakaobank.io/view/a13a75ae-619a-45f3-bc54-23385c6b7ee3);
  background-size: 159px 52px;
}

.logo-text {
  width: 158px;
  height: 52px;
  font-weight: bold;
  font-size: 0;
}
.logo-text>p {
  font-size: 18px;
}
.logo-text:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: bottom;
}
.logo-text>p {
  display: inline-block;
}

a.link {
  color: #005a96;
  font-weight: bold;
  text-decoration: underline;
  text-decoration-color: #005a96;
}
.img-ico-kakao {
  width: 60px;height: 60px;display: inline-block;
  background: url(https://og.kakaobank.io/view/ddd513c1-868e-4e89-bfff-51d86b2f78b4);
  background-size: 60px 60px;
}

.img-ico-fb {
  width: 60px;height: 60px;display: inline-block;
  margin: 0 12px;
  background: url(https://og.kakaobank.io/view/a12b2543-9fc0-46e1-bd6d-b638f1334d51);
  background-size: 60px 60px;
}

.img-ico-tw {
  width: 60px;height: 60px;display: inline-block;
  background: url(https://og.kakaobank.io/view/ac6ba414-2e87-4a36-820b-2b656cdac61f);
  background-size: 60px 60px;
}

.img-ico-cp {
  margin-left: 12px;
  width: 60px;height: 60px;display: inline-block;
  background: url(https://og.kakaobank.io/view/89bd6b44-ce63-4513-af61-86c6cfd43662);
  background-size: 60px 60px;
}

.share-title {
  font-size:18px;
  margin-top:50px;
  color:#222;
  text-align: center;
  font-weight: bold;
}

.section-share {
  padding-bottom: 148px;
}

a:focus.arcodion-title,
.arcodion-title {
  display: block;
  text-decoration: none;
  color: #000;
  height: 76px;
  padding: 0px 30px;
  position: relative;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  font-weight: bold;
  line-height: 76px;
  font-size: 18px;
}

.img-arrow-down {
  width: 18px;
  height: 10px;
  position: absolute;
  right:0px;
  top:0;
  bottom:0;
  margin: auto;
  background: url(https://og.kakaobank.io/view/c4a182f6-522f-4280-9dc7-f91578791c87);
  background-size: 18px 10px;
}

.img-arrow-up {
  width: 18px;
  height: 10px;
  position: absolute;
  right:0px;
  top:0;
  bottom:0;
  margin: auto;
  background: url(https://og.kakaobank.io/view/ee0554b0-e67e-41d7-a421-bcaa1468361d);
  background-size: 18px 10px;
}

.arcodion-content {
  display: none;
  padding:32px 30px;
  font-size: 13px;
  line-height: 20px;
  border-bottom: 1px solid #ddd;
  color:#222;
}
.arcodion-content-body {
  max-width: 500px;
  margin: auto;
}
.arcodion-content b {
  font-weight: bold;
  color: #000;
  font-size: 13px;
  line-height: 18px;
  margin-bottom: 12px;
}
.arcodion-content p {
  padding:12px 0 24px;
  color: #888;
}
.arcodion-content span {
  color: #005a96;
}
.is-active+.arcodion-content {
  display: block;
}
.deliberation {
  color: #888;
  margin-top: 28px;
}

.deliberation-box {
  padding:32px 30px;
  font-size: 13px;
  line-height: 2.15;
  border-bottom: 1px solid #ddd;
  color:#222;
}
.deliberation-content {
  max-width: 500px;
  margin: auto;
}
.shares {
  margin-top: 24px;
  text-align: center;
  font-size: 0px;
}

.shares button {
  border: none;
}

.img-logo-gs {
  width: 159px;
  height: 52px;
  background: url(https://og.kakaobank.io/view/1b596b8e-18d4-46f1-9478-8de6b7b166f0);
  background-size: 159px 52px;
}

.img-logo-ssg {
  width: 159px;
  height: 52px;
  background: url(https://og.kakaobank.io/view/70fc9ccc-de96-4b34-95d8-6a34af6fa545);
  background-size: 159px 52px;
}

.img-logo-gmarket {
  width: 158px;
  height: 52px;
  background: url(https://og.kakaobank.io/view/b195885d-107a-4a02-86de-6ffcaa65e6b9);
  background-size: 158px 52px;
}

.label-reward {
  font-size: 13px;
  font-weight: bold;
  padding: 6px 14px;
  background:#f7f7f7;
  display: inline-block;
  border-radius: 14px;
}

.img-date {
  width:197px;
  height:24px;
  background: url(https://og.kakaobank.io/view/02246f68-feef-40ff-b33b-91b3f17453b7);
  background-size: 197px 24px;
}

.ani01-bottom {
  position: absolute;
  bottom: 60px;
  left:0;
  right:0;
}

.text-info {
  margin-top: 19px;
  text-align: center;
  font-size: 14px;
  color: #997545;
}

.img-season {
  width:203px;
  height: 33px;
  margin-top: 30px;
  background: url(https://og.kakaobank.io/view/db39eef8-6559-4679-9a99-203bbad25f37);
  background-size: 203px 33px;
}

.img-title {
  width: 314px;
  height: 112px;
  margin-top: 30px;
  background: url(https://og.kakaobank.io/view/be6dbbe4-ba8d-4a8d-8d55-d385e7812c8d);
  background-size: 314px 112px;
}

.img-roll01 {
  width: 236px;
  height: 22px;
  background: url(https://og.kakaobank.io/view/1570883f-32a8-4adb-8851-1758c63ebb84);
  background-size: 236px 22px;
}

.img-roll02 {
  width: 236px;
  height: 22px;
  background: url(https://og.kakaobank.io/view/63114497-3291-4790-ae26-a481ca565ad7);
  background-size: 236px 22px;
}

.img-roll03 {
  width: 236px;
  height: 22px;
  background: url(https://og.kakaobank.io/view/2fe1b09b-304b-4475-bb75-0561e5c3bfd8);
  background-size: 236px 22px;
}

.img-rolls {
  width: 236px;
  height: 22px;
  overflow: hidden;
  margin: 22px auto 0;
}

.img-bg {
  position: absolute;
  left:0;
  top:70px;
  width:100%;
  height: 276px;
  background: url(https://og.kakaobank.io/view/b691b23c-c44d-463d-bab0-ab9857062350);
  background-repeat: repeat;
  background-size: 683px 276px;
  -webkit-animation: stream 10s linear infinite;
  animation: stream 10s linear infinite;
}

@-webkit-keyframes stream {
  0% {background-position: 0px 0px;}
  100% {background-position: -683px 0px;}
}

@keyframes stream {
  0% {background-position: 0px 0px;}
  100% {background-position: -683px 0px;}
}

.ani-group {
  width: 420px;
  position: absolute;
  top: 170px;
  left: 50%;
  -webkit-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  height: 380px;
  margin: -54px 0px 0px -200px;
  -webkit-transform: rotate(8deg);
  transform: rotate(6deg);
}

.img-hand {
  width: 227px;
  height: 247px;
  background: url(https://og.kakaobank.io/view/8dfcbe8f-2054-40b9-a726-f4a4b6a684d0);
  background-size: 227px 247px;
  position: absolute;
  top:0;
  left:0;
  margin: 130px 0 0 190px;
}

.img-card {
  width: 254px;
  height: 372px;
  background: url(https://og.kakaobank.io/view/c621f3d9-e31c-4084-9869-416ef533d5a6);
  background-size: 254px 372px;
  position: absolute;
  top:0;left:0;
}

.img-finger {
  width: 62px;
  height: 82px;
  background: url(https://og.kakaobank.io/view/f558f099-bf99-4b1b-afc3-7397ab76f000);
  background-size: 62px 82px;
  position: absolute;
  top:0;left:0;
  margin: 200px 0 0 200px;
}

.ani01 {
  height: 590px;
  position: relative;
  overflow: hidden;
}

.ani01.is-active .ani-group {
  -webkit-animation: shake 1s forwards;
  animation: shake 1s forwards;
}

.is-active .ani-group .muzi {
  -webkit-animation: slip 1s forwards;
  animation: slip 1s forwards;
}

@-webkit-keyframes slip {
  0% {-webkit-transform: translateX(0px);}
  20% {-webkit-transform: translateX(-10px);}
  100% {-webkit-transform: translateX(28px);}
}

@keyframes slip {
  0% {transform: translateX(0px);}
  20% {transform: translateX(-10px);}
  100% {transform: translateX(28px);}
}

@-webkit-keyframes shake {
  0% {-webkit-transform: rotate(6deg);}
  20% {-webkit-transform: rotate(0deg);}
  100% {-webkit-transform: rotate(20deg);}
}

@keyframes shake {
  0% {transform: rotate(6deg);}
  20% {transform: rotate(0deg);}
  100% {transform: rotate(20deg);}
}

.section-block {
  padding:50px 30px 40px;
  max-width: 500px;
  margin: auto;
}
.section-block+.section-block {
  padding: 0px 30px 40px;
}

.column-title {
  font-size: 24px;font-weight: bold;
}

.column-sub {
  font-size: 13px;
  color: #005a96;
  line-height: 18px;
  clear: both;
  position: absolute;
  white-space: nowrap;
  right: 0;
}

.desc-text {
  margin-top:56px;
  padding-bottom:40px;
  border-bottom:1px solid #ddd;
  color:#888888;
  font-size: 13px;
  line-height: 18px;
}
.desc-text a.link {
  color: inherit;
  text-decoration-color: inherit;
}
.desc-text+.desc-text {
  margin-top: -24px;
}
.desc-text+.desc-alert {
  margin-top: -14px;
  font-weight: bold;
}

.desc-text+.desc-alert>a {
  text-decoration: none;
}
.desc-text>b {
  font-weight: bold;
  text-decoration: underline;
}
.desc-text>b.no-underline {
  text-decoration: none;
}

.desc-text.no-border {
  border: none;
}

.img-logo-bottle {
  width: 159px;height: 52px;
  background: url(https://og.kakaobank.io/view/5a4fbe30-ff64-4d21-b70f-1aea7d3e4728);
  background-size: 159px 52px;
}

.desc-alert {
  padding-bottom:40px;
  border-bottom:1px solid #ddd;
  font-size: 13px;color:#222;
  line-height: 18px;
}
.desc-alert a {
  color: #000;
}

.ico-exclamation {
  margin-top: -3px;
  width:16px;height: 16px;
  background: url(https://og.kakaobank.io/view/6eaeaeb5-a197-47fb-96ce-22fe3005fe11);
  background-size: 16px 16px;
  display: inline-block;
  vertical-align: middle;
}

.img-arrow-right {
  background: url(https://og.kakaobank.io/view/cee86626-0f9e-4727-9669-8ae68883240f);
  width: 15px;
  height: 15px;
  background-size: 15px 15px;
  display: inline-block;
  vertical-align: middle;
}

.img-muzi {
  width: 91px;
  height: 132px;
  background: url(https://og.kakaobank.io/view/a9777037-92b1-4bee-85dc-bbe805b6fb05);
  background-size: 91px 132px;
  position: absolute;
  bottom: 0px;
  left: 80px;
}

.bottom-btn {
  max-width: 500px;
  height: 68px;
  display: block;
  left: 18px;
  right: 18px;
  bottom: 30px;
  margin: auto;
  position: fixed;
  border-radius: 10px;
  background: #ffe100;
  line-height: 68px;
  text-align: center;
  z-index: 9;
  -webkit-transition: transform .3s;
  transition: transform .3s;
  -webkit-transform: translateY(120px);
  transform: translateY(120px);
}

.btn-text {
  width: 244px;
  height: 34px;
  background: url(https://og.kakaobank.io/view/5d19ecf4-d696-4770-8141-d3e22ca004d0);
  background-size: 244px 34px;
  line-height: 68px;
  display: inline-block;
  vertical-align: middle;
}



.img-muzi-left {
  width: 30px;
  height: 45px;
  background: url(https://og.kakaobank.io/view/5975f01e-ea35-4acc-9dd7-3f6794c92d95);
  background-size: 30px 45px;
  position: absolute;
  left: 84px;
  bottom: 118px;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}

.img-muzi-right {
  width: 24px;
  height: 45px;
  background: url(https://og.kakaobank.io/view/7acd9b31-f387-4574-9186-91223f402175);
  background-size: 24px 45px;
  position: absolute;
  left: 45px;
  right: 0;
  bottom: 118px;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}


.is-active .ani-group .img-muzi-left,
.is-active .ani-group .img-muzi-right {
  -webkit-animation: ears 1s forwards;
  animation: ears 1s forwards;
}

@-webkit-keyframes ears {
  0% {-webkit-transform-origin: center bottom;-webkit-transform: rotate(0deg);}
  10% {-webkit-transform-origin: center bottom;-webkit-transform: rotate(10deg);}
  30% {-webkit-transform-origin: center bottom;-webkit-transform: rotate(-6deg);}
  100% {-webkit-transform-origin: center bottom;-webkit-transform: rotate(0deg);}
}

@keyframes ears {
  0% {transform-origin: center bottom;transform: rotate(0deg);}
  10% {transform-origin: center bottom;transform: rotate(10deg);}
  30% {transform-origin: center bottom;transform: rotate(-6deg);}
  100% {transform-origin: center bottom;transform: rotate(0deg);}
}

.alert {
  position: fixed;
  left:0;
  right:0;
  top:0;
  bottom: 0;
  background: rgba(0,0,0,0.3);
  display: none;
  z-index: 99;
}

.alert.is-active {
  display: block;
}

.alert-box {
  position: absolute;
  width: 287px;
  height: 162px;
  background: #ffe400;
  border-radius: 10px;
  left: 0;
  right: 0;
  top: 0;
  margin: auto;
  bottom: 0;
}

.muzi {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 60px;
}

.img-eye-l {
  display: block;
  position: absolute;
  width: 5px;
  height: 5px;
  background: url(https://og.kakaobank.io/view/1baf4be7-2db6-4852-97e3-ed25047b0258);
  background-size: 5px 5px;
  left: 103px;
  bottom: 92px;
}

.img-eye-r {
  display: block;
  position: absolute;
  width: 5px;
  height: 5px;
  background: url(https://og.kakaobank.io/view/1baf4be7-2db6-4852-97e3-ed25047b0258);
  background-size: 5px 5px;
  left: 142px;
  bottom: 92px;
}

.is-active .ani-group .img-eye-l,
.is-active .ani-group .img-eye-r {
  -webkit-animation: eyes 1s forwards;
  animation: eyes 1s forwards;
}

@-webkit-keyframes eyes {
  0% {-webkit-transform: translateX(0px);}
  10% {-webkit-transform: translateX(3px);}
  30% {-webkit-transform: translateX(-5px);}
  100% {-webkit-transform: translateX(0px);}
}

@keyframes eyes {
  0% {transform: translateX(0px);}
  10% {transform: translateX(3px);}
  30% {transform: translateX(-5px);}
  100% {transform: translateX(0px);}
}

.img-logo-master {
  position: absolute;
  left: 34px;
  bottom: 50px;
  width: 69px;
  height: 42px;
  background: url(https://og.kakaobank.io/view/f12e55fa-5daa-46bf-81c4-9db666b2d0be);
  background-size: 69px 42px;
}

.is-app .section-share {
  padding-bottom: 80px;
}

.is-app {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: -moz-none;
  -o-user-select: none;
  user-select: none;
}

.is-app .bottom-btn {
  display: none;
}

.bottom-btn.is-show {
  -webkit-transition: transform .3s;
  transition: transform .3s;
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}


.info-culture {
  position: absolute;
  display: inline-block;
  left: 0px;
  right: 0px;
  top: 30px;
  z-index: 1;
  background: #fff;
  border: 1px solid #000;
  padding: 18px;
  font-size: 12px;
  color:#888;
  font-weight: normal;
  line-height: 19px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
}
.info-culture-block {
  margin-bottom: 18px;
}
.info-culture p {
  font-size: 13px;
  font-weight: bold;
  color: #000;
  margin-bottom: 8px;
}
.info-culture b {
  font-weight: bold;
}

.ico-close {
  background: url(https://og.kakaobank.io/view/3937d6b0-4d24-47e4-8eb0-8e635ee47a9b);
  background-size: 20px 20px;
  width: 20px;
  height: 20px;
  position: absolute;
  right: 18px;
  top: 16px;
  border: none;
}

.ir {text-indent: -9999px;}

.btn-info {
  font-weight: bold;
  border: none;
  background: none;
}

.ico-alert-close {
  background: url(https://og.kakaobank.io/view/91e9a595-64b1-4a64-b0f7-9d1a7b923060);
  background-size: 20px 20px;
  width: 20px;
  height: 20px;
  position: absolute;
  right: 18px;
  top: 16px;
  border: none;
}

.img-alert-text {
  position: absolute;
  left: 0;
  right:0;
  top: 0;
  bottom: 0;
  margin: auto;
  background: url(https://og.kakaobank.io/view/4f439f2d-d064-4648-a749-58184b12f947);
  background-size: 149px 52px;
  width: 149px;
  height: 52px;
}

.img-alert-text-close {
  position: absolute;
  left: 0;
  right:0;
  top: 0;
  bottom: 0;
  margin: auto;
  background: url(https://og.kakaobank.io/view/3f21551d-b7e3-4dc1-9884-63ac85b32686);
  background-size: 149px 52px;
  width: 149px;
  height: 52px;
}

.img-alert-text-copy {
  position: absolute;
  left: 0;
  right:0;
  top: 0;
  bottom: 0;
  margin: auto;
  background: url(https://og.kakaobank.io/view/58b69783-11f4-4556-b71e-a2ecfaa1d47c);
  background-size: 149px 52px;
  width: 149px;
  height: 52px;
}

.img-roll01 {-webkit-animation: roll01 4s infinite;animation: roll01 4s infinite;}
.img-roll02 {-webkit-animation: roll02 4s infinite;animation: roll02 4s infinite;}
.img-roll03 {-webkit-animation: roll03 4s infinite;animation: roll03 4s infinite;}
.not-ani {-webkit-animation: none; animation: none;}

@-webkit-keyframes roll01 {
  0% {-webkit-transform: translateY(-22px);}
  11% {-webkit-transform: translateY(0px);}
  22% {-webkit-transform: translateY(0px);}
  33% {-webkit-transform: translateY(22px);}
  100% {-webkit-transform: translateY(22px);}
}
@keyframes roll01 {
  0% {transform: translateY(-22px);}
  11% {transform: translateY(0px);}
  22% {transform: translateY(0px);}
  33% {transform: translateY(22px);}
  100% {transform: translateY(22px);}
}

@-webkit-keyframes roll02 {
  0% {-webkit-transform: translateY(-44px);}
  33% {-webkit-transform: translateY(-44px);}
  44% {-webkit-transform: translateY(-22px);}
  55% {-webkit-transform: translateY(-22px);}
  66% {-webkit-transform: translateY(0px);}
  100% {-webkit-transform: translateY(0px);}
}
@keyframes roll02 {
  0% {transform: translateY(-44px);}
  33% {transform: translateY(-44px);}
  44% {transform: translateY(-22px);}
  55% {transform: translateY(-22px);}
  66% {transform: translateY(0px);}
  100% {transform: translateY(0px);}
}

@-webkit-keyframes roll03 {
  0% {-webkit-transform: translateY(-66px);}
  66% {-webkit-transform: translateY(-66px);}
  77% {-webkit-transform: translateY(-44px);}
  88% {-webkit-transform: translateY(-44px);}
  100% {-webkit-transform: translateY(-22px);}
}
@keyframes roll03 {
  0% {transform: translateY(-66px);}
  66% {transform: translateY(-66px);}
  77% {transform: translateY(-44px);}
  88% {transform: translateY(-44px);}
  100% {transform: translateY(-22px);}
}
.dot {
  
}