:root {
  /* :root 는 html 과 같은 요소이고 특이도가 더 높다.
     transparent 로 두면 layouts.css 의 html 배경색까지 덮어 캔버스가 흰색이 된다.
     -> 그라데이션 시작색을 그대로 지정해 어떤 경우에도 흰 여백이 없게 한다. */
  background-color: #1b1533;
}

.stamp-info-nav {
  display: flex;
  justify-content: center;
  padding-top: 60px;
  padding-bottom: 36px;
  overflow: hidden;
}

.stamp-info-nav-main {
  position: relative;
  z-index: 101;
}

.stamp-info-nav-main ul {
  width: 60%;
  flex-direction: column;
}

.stamp-info-nav ul {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border-radius: 25px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.16);
}

.stamp-info-nav ul li {
  position: relative;
  padding: 10px 18px;
}

.stamp-info-nav ul li a {
  color: #767676;
}

.stamp-info-nav ul li.on a {
  color: #fe7413;
  font-weight: 700;
}

.stamp-info-nav ul li:first-child {
  padding-left: 32px;
}

.stamp-info-nav ul li:last-child {
  padding-right: 32px;
}

.stamp-info-nav ul li:nth-child(2)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(0, -50%);
  height: 12px;
  width: 1px;
  background-color: #e5e5ec;
}

.stamp-info-nav ul li:nth-child(2)::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(0, -50%);
  height: 12px;
  width: 1px;
  background-color: #e5e5ec;
}

.stamp-info-nav ul li:first-child,
.stamp-info-nav ul li:last-child {
  padding-left: 32px;
  padding-right: 32px;
}

.stamp-info-nav-main {
  top: 60%;
  left: 0;
  right: 0;
  transform: translate(0, -50%);
  position: absolute;
}

.stamp-info-nav-main ul li:last-child::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  transform: translate(0, -50%);
  height: 1px;
  width: 100%;
  background-color: #e5e5ec;
}

.stamp-info-nav-main ul {
  background-color: transparent;
  border-radius: 0;
  box-shadow: none;
}

.stamp-info-nav-main ul li {
  font-weight: 500;
  font-size: 20px;
  margin-bottom: 25px;
  width: 100%;
  text-align: center;
  display: block;
  background-color: #fff;
  border-radius: 25px;
  box-shadow: 0 0 10px rgb(0 0 0 / 16%);
}

.logo {
  position: relative;
  margin: 0 auto;
  text-align: center;
}

.logo img {
  width: 50%;
  margin: 0 auto;
  display: block;
  margin-bottom: 18px;
}

.logo img + img {
  width: 65%;
}

.logo p {
  font-size: 29px;
  font-weight: 600;
  color: #fe601a;
}

.logo p + p {
  margin-top: 16px;
  margin-bottom: 16px;
  font-size: 20px;
  font-weight: 300;
  color: #fff;
}

.logo p + p b {
  font-weight: 600;
}

.logo-main {
  margin-top: 50px;
}

.logo-main p {
  font-size: 16px;
}

.logo-main p + p {
  margin-top: 0;
  margin-bottom: 16px;
}

.logo-main p.slogo {
  font-size: 55px;
  line-height: 1.2;
}

.logo-main p.slogo span {
  font-size: 35px;
  line-height: 1;
}

.stamp-background {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: url('../images/home-stamp.png');
  padding-top: calc(588 / 488 * 100%);
  background-size: 100% auto;
  margin-left: -66px;
  margin-right: -35px;
}

.spot-tit {
  font-size: 24px;
  color: #fe601a;
  font-family: 'Cafe24Danjunghae';
  margin-bottom: 15px;
}

.spot-desc {
  margin-bottom: 15px;
}

.goods-list {
  padding-top: 40px;
  padding-bottom: 16px;
  text-align: center;
}

.goods-list dl h3 + div + p {
  font-size: 15px;
  margin-top: 15px;
}

.goods-list dl:nth-child(1) h3,
.goods-list dl:nth-child(3) h3 {
  color: #e0542f;
}

.goods-list dl:nth-child(1) h3 + div,
.goods-list dl:nth-child(3) h3 + div {
  position: relative;
  border: 2px solid #e0542f;
  border-radius: 50%;
  margin-top: 40px;
}

.goods-list:not(.scan-list) dl:nth-child(2) h3 + div::before,
.goods-list:not(.scan-list) dl:nth-child(3) h3 + div::before {
  display: none;
  position: absolute;
  content: '추첨상품';
  padding: 5px 20px;
  background-color: #e0542f;
  color: #fff;
  left: 50%;
  top: 0;
  border-radius: 40px;
  font-weight: 600;
  transform: translate(-50%, -50%);
}

.goods-list:not(.scan-list) dl:nth-child(2) h3 + div {
  position: relative;
  border: 2px solid #283365;
  border-radius: 50%;
  margin-top: 40px;
}

.goods-list:not(.scan-list) dl h3 + div img {
  border-radius: 50%;
  overflow: hidden;
}

.goods-list:not(.scan-list) dl + dl {
  overflow: hidden;
  padding: 0 20px;
}

.goods-list:not(.scan-list) dl + dl dd {
  width: 50%;
  float: left;
  padding: 0 10px 15px;
  margin: 0 auto;
}

.goods-list:not(.scan-list) dl + dl dd b {
  display: block;
  font-weight: 600;
  color: #fff;
}

.goods-list:not(.scan-list) dl + dl dd h3 {
  display: none;
}

.goods-list:not(.scan-list) dl:nth-child(1) h3 + div::before {
  position: absolute;
  display: none;
  content: '';
  padding: 5px 20px;
  background-color: #283365;
  color: #fff;
  left: 50%;
  top: 0;
  border-radius: 40px;
  font-weight: 600;
  transform: translate(-50%, -50%);
}

.goods-list dl {
  margin-bottom: 24px;
}

.goods-list {
  padding-bottom: 80px;
}

.goods-list dl h3 {
  font-size: 24px;
  color: #fe601a;
  font-family: 'Cafe24Danjunghae';
}

.goods-list dl dd {
  margin: 22px 24px 0;
  padding: 40px 40px 20px;
  border: 1px solid #e5e5ec;
  background-color: #fff;
  border-radius: 8px;
}

.goods-list dl dd p {
  color: #fff;
  font-size: 15px;
  /* margin-top: 20px; */
}

.goods-list dl dd .photo {
  border: 1px solid #e5e5ec;
  padding-top: calc(60 / 100 * 100%);
}

.info-list .map {
  margin-left: 24px;
  margin-right: 24px;
  margin-bottom: 24px;
}

.info-list dl dd p {
  margin-top: 0;
}

.info-list dl.tip dd {
  padding-left: 0;
  padding-right: 0;
  padding-top: 20px;
}

.info-list dl.tip dd b {
  font-size: 16px;
  color: #fe601a;
}

.info-list dl.tip dd b.tit-2 {
  color: #f77e09;
}

.info-list dl.tip dd b.tit-3 {
  color: #903790;
}

.info-list dl.tip dd b.tit-2,
.info-list dl.tip dd b.tit-3 {
  display: block;
  margin-top: 20px;
}

.info-list dl dd p b {
  font-weight: 600;
}

.stamp-head h3 {
  font-size: 30px;
  color: #fe601a;
  text-align: center;
  padding-bottom: 20px;
  font-family: 'Cafe24Danjunghae';
}

.stamp-head p {
  font-size: 20px;
  font-weight: 400;
  text-align: center;
  color: #333;
}

.stamp-info {
  background-color: #fff;
  text-align: center;
  margin: 20px 24px 0;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  padding: 24px;
  border-radius: 6px;
}

.stamp-info .count {
  width: 216px;
  height: 62px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url(../images/stamp-count-bg.png);
  background-size: 216px auto;
  background-position: center;
}

.stamp-info p {
  color: #fe601a;
  line-height: 16px;
  font-weight: 600;
  margin-bottom: 10px;
}

.stamp-info .count .current {
  margin: 0 5px;
}

.stamp-info .count .total {
  color: gray;
  margin: 0 5px;
}

.stamp-scan {
  height: 100%;
  overflow-x: hidden;
  background-image: url(../images/scan_background.png);
  background-size: cover;
  background-attachment: fixed;
  background-position: center center;
  background-repeat: no-repeat;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

.scan-list {
  padding-top: 0;
}

.scan-bg {
  margin-top: 24px;
  position: relative;
  margin-left: -15px;
}

dl.scan-info-box dd {
  padding-top: 24px;
}

.scan-info-text {
  font-size: 18px;
  text-align: center;
}

.scan-text {
  font-size: 30px;
  color: #fe601a;
  text-align: center;
  font-family: 'Cafe24Danjunghae';
}

.scan-bg img.img-goods {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 100;
  transform: translate(-50%, -50%);
}

.scan-bg img.img-bg {
  animation: rotation 30s infinite linear;
}



body {
  /* 배경은 layouts.css 에서 html 이 칠한다 */
  background-color: transparent;
  /* background-color: #F7F7F6; */
  /* background-image: url(../images/common/main-bg.png); */
  /* background-image: url(../images/background.png); */
  background-size: cover;
  background-position: 0 0;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

body.android #wrap .bottomBtn {
  /* 라운드 플로팅 탭바로 바뀌면서 하단 여백은 bottom 값이 처리한다.
     안드로이드 네비게이션 바만큼 더 띄운다. */
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}

.wrap {
  padding-top: env(safe-area-inset-top);
}

.intro .sec-01 {
  position: relative;
  background: #fdfaee;
  padding: 50px 0 0 0;
  height: 515px;
}

.intro img {
  margin: 0 auto;
}

.intro .img-02 {
  margin: 50px auto 0 auto;
}

.pop-layer-form {
  text-align: center;
}

.pop-layer.pop-layer-form .pop-contents .txt {
  margin-top: -80px;
  margin-bottom: 10px;
  transform: translate(0, 0);
}

.pop-layer.pop-layer-form .pop-contents .txt + .txt {
  margin-top: 0;
}

.goods-privacy-form {
  position: relative;
  z-index: 10;
}

.product-name {
  border: 2px solid #ff6600;
  margin: 0 auto;
  width: 80%;
  font-size: 15px;
  border-radius: 10px;
  margin-bottom: 10px;
}

.pop-layer.pop-layer-form label {
  display: block;
  font-size: 15px;
}

.pop-layer-form .prd-wrap {
  margin-bottom: 10px;
}

.pop-layer-form .msg b {
  font-weight: 700;
  text-decoration: underline;
}

.pop-layer.pop-layer-form input[type='text'],
.pop-layer.pop-layer-form input[type='tel'] {
  border: 1px solid lightgray;
  margin: 5px auto 0;
  width: 80%;
  font-size: 14px;
  padding: 5px 10px;
  text-align: center;
  border-radius: 10px;
}

.pop-layer.pop-layer-form .pop-contents .btn-st {
  width: 80%;
}

.product-name .tit {
  display: block;
  padding: 5px 10px;
  font-weight: 600;
  background-color: #ff6600;
  color: #fff;
}

.product-name b {
  padding: 10px;
  display: block;
}

.pop-layer.pop-layer-form .pop-contents .txt p {
  margin-top: 5px !important;
}

.layer-privacy {
  z-index: 10;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 90%;
  transform: translate(-50%, -50%);
  border: 2px solid #ff6600;
  text-align: center;
  background-color: #272a2b;
}

.layer-privacy b {
  font-weight: 600;
  text-decoration: underline;
}

.layer-privacy button {
  border: 0;
  outline: 0;
  width: 90%;
  padding: 10px 0;
  margin-bottom: 10px;
  color: #fff;
  font-size: 14px;
  background-color: #ff6600;
}

.layer-privacy h6 {
  padding: 10px 0 0 0;
}

.layer-privacy p {
  line-height: 1.2;
  font-size: 11px;
  padding: 10px 0;
}

.layer-privacy table {
  font-size: 11px;
  width: 80%;
  margin: 0 auto 10px;
  border-top: 1px solid lightgray;
  border-left: 1px solid lightgray;
}

.layer-privacy table tr th {
  background-color: rgb(230, 230, 230);
}

.layer-privacy table tr th,
.layer-privacy table tr td {
  vertical-align: middle;
  padding: 5px;
  line-height: 1.2;
  border-left: 1px solid lightgray;
  border-bottom: 1px solid lightgray;
}

.intro .sec-02 {
  background: url('../images/intro-bg.png') no-repeat;
  padding-top: 190px;
  padding-bottom: 150px;
  margin-top: 50px;
}

.intro .sec-02 .tbox {
  margin: 0 auto;
  text-align: center;
  width: 56%;
}

.intro .sec-02 .tbox p {
  font-size: 19px;
}

.stamp .sec-01 {
  position: relative;
}

.stamp .sec-01 .img-02 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 80px;
}

.stamp .sec-01 .img-03 {
  position: absolute;
  right: -30px;
  top: 0;
}

.stamp {
  padding-bottom: 100px;
}

.stamp .sec-01 .img-04 {
  margin-top: -90px;
}

.stamp .sec-02 {
  position: relative;
}

.stamp .sec-02 .list {
  position: relative;
}

.stamp .sec-02 .list .item {
  position: absolute;
}

.stamp .sec-02 .list .item-01 {
  top: -50px;
  left: 40px;
}

.stamp .sec-02 .list .item-02 {
  top: -50px;
  left: 175px;
}

.stamp .sec-02 .list .item-03 {
  top: 70px;
  left: 230px;
}

.stamp .sec-02 .list .item-04 {
  top: 70px;
  left: 90px;
}

.stamp .sec-02 .list .item-05 {
  top: 190px;
  left: 20px;
}

.stamp .sec-02 .list .item-06 {
  top: 190px;
  left: 165px;
}

.stamp .sec-02 .list .item-07 {
  top: 305px;
  left: 220px;
}

.stamp .sec-02 .list .item-08 {
  top: 305px;
  left: 70px;
}

.stamp {
  /* position: relative; */
  /* background: url("../images/stp-bg.png") no-repeat; */
  /* background-size: cover; */
  /* padding-bottom: 120px; */
  /* height: 2990px; */
  overflow: hidden;
  /* background-color: #F7F7F6; */
  /* background-image: url(../images/background.png); */
  /* background-size: 100% auto; */
  /* background-position: 0 0; */
  /* background-repeat: no-repeat; */
  /* background-attachment: fixed; */
}

.stamp .top-tit {
  padding: calc(env(safe-area-inset-top) + 60px) 0 0 0;
  margin: 0 auto;
  margin-bottom: 30px;
}

.stamp .top-img {
  display: none;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -25%);
}

.stamp .list {
  position: relative;
  padding-top: calc(644 / 261 * 100%);
  margin-top: 24px;
  background-color: #fff;
  margin-left: 24px;
  margin-right: 24px;
  border-radius: 8px;
}

.stamp .list .list-bg {
  position: absolute;
  left: 24px;
  right: 24px;
  top: 24px;
  bottom: 24px;
  border: 1px solid #fe601a;
  background-image: url(../images/stamp_bg.png);
  background-position: center;
  background-size: 80% auto;
}

.stamp .list .list-bg .list-bg-top::after,
.stamp .list .list-bg .list-bg-top::before,
.stamp .list .list-bg .list-bg-bottom::after,
.stamp .list .list-bg .list-bg-bottom::before {
  position: absolute;
  content: '';
  width: 34px;
  height: 34px;
  background-size: 34px auto;
}

.stamp .list .list-bg .list-bg-top::before {
  right: -1px;
  top: -1px;
  background-image: url(../images/stamp_bg_1.png);
}

.stamp .list .list-bg .list-bg-top::after {
  left: -1px;
  top: -1px;
  background-image: url(../images/stamp_bg_0.png);
}

.stamp .list .list-bg .list-bg-bottom::before {
  right: -1px;
  bottom: -1px;
  background-image: url(../images/stamp_bg_3.png);
}

.stamp .list .list-bg .list-bg-bottom::after {
  left: -1px;
  bottom: -1px;
  background-image: url(../images/stamp_bg_2.png);
}

.stamp .list .stp-bg {
  position: absolute;
}

.stamp .list .stp-bg-01 {
  top: -9%;
  right: -17%;
  width: 64%;
}

.stamp .stp-bg-02 {
  position: absolute;
  bottom: 0;
  width: 100%;
}

.stamp .list li {
  position: absolute;
}

.stamp .list li .img {
  width: 110px;
  height: 110px;
}

.stamp .list li:nth-child(1) {
  top: 36px;
  left: 34.848484848485%;
}

.stamp .list li:nth-child(2) {
  top: 14%;
  left: 14.5%;
}

.stamp .list li:nth-child(3) {
  top: 19%;
  left: 50%;
}

.stamp .list li:nth-child(4) {
  top: 26%;
  right: 46.590909090909%;
}

.stamp .list li:nth-child(5) {
  top: 36%;
  left: 40%;
}

.stamp .list li:nth-child(6) {
  top: 43%;
  right: 46.590909090909%;
}

.stamp .list li:nth-child(7) {
  top: 51%;
  left: 40%;
}

.stamp .list li:nth-child(8) {
  top: 67%;
  right: 46.590909090909%;
}

.stamp .list li:nth-child(9) {
  top: 75%;
  right: 10%;
}

.stamp .list li:nth-child(10) {
  top: 82%;
  right: 50.590909%;
}

.stamp .list li:nth-child(11) {
  top: 50%;
  right: 56%;
}

.stamp .list li:nth-child(12) {
  top: 55%;
  right: 36px;
}

.stamp .list li:nth-child(13) {
  top: 60%;
  left: 38px;
}

.stamp .list li:nth-child(14) {
  top: 65%;
  right: 54px;
}

.stamp .list li:nth-child(15) {
  top: 69%;
  left: 79px;
}

.stamp .list li:nth-child(16) {
  top: 74%;
  right: 40px;
}

.stamp .list li:nth-child(17) {
  top: 79%;
  left: 67px;
}

.stamp .list li:nth-child(18) {
  bottom: 10%;
  left: 67px;
}

.stamp .list li:nth-child(19) {
  bottom: 5%;
  right: 67px;
}

.stamp .list li:nth-child(1) .img {
  width: 128px;
  height: 106px;
  background-size: 128px auto;
  background-image: url('../images/stamp_1_off.png');
}

.stamp .list li.on:nth-child(1) .img {
  background-image: url('../images/stamp_1.png');
}

.stamp .list li.on:nth-child(1) .img::before {
  /* content: ''; */
  /* position: absolute; */
  /* left: 0; */
  /* top: 0; */
  /* border: 4px solid #FF7F0C; */
  /* width: 100%; */
  /* height: 100%; */
  /* border-radius: 50%; */
}

.stamp .list li:nth-child(2) .img {
  width: 126px;
  height: 126px;
  background-size: 126px auto;
  background-image: url('../images/stamp_2_off.png');
}

.stamp .list li.on:nth-child(2) .img {
  background-image: url('../images/stamp_2.png');
}

.stamp .list li:nth-child(3) .img {
  width: 152px;
  height: 152px;
  background-size: 152px auto;
  background-image: url('../images/stamp_3_off.png');
}

.stamp .list li.on:nth-child(3) .img {
  background-image: url('../images/stamp_3.png');
}

.stamp .list li:nth-child(4) .img {
  width: 146px;
  height: 146px;
  background-size: 146px auto;
  background-image: url('../images/stamp_4_off.png');
}

.stamp .list li.on:nth-child(4) .img {
  background-image: url('../images/stamp_4.png');
}

.stamp .list li:nth-child(5) .img {
  width: 150px;
  height: 134px;
  background-size: 150px auto;
  background-image: url('../images/stamp_5_off.png');
}
.stamp .list li.on:nth-child(5) .img {
  background-image: url('../images/stamp_5.png');
}

.stamp .list li:nth-child(6) .img {
  width: 152px;
  height: 152px;
  background-size: 152px auto;
  background-image: url('../images/stamp_6_off.png');
}
.stamp .list li.on:nth-child(6) .img {
  background-image: url('../images/stamp_6.png');
}

.stamp .list li:nth-child(7) .img {
  width: 176px;
  height: 176px;
  background-size: 176px auto;
  background-image: url('../images/stamp_7_off.png');
}
.stamp .list li.on:nth-child(7) .img {
  background-image: url('../images/stamp_7.png');
}

.stamp .list li:nth-child(8) .img {
  width: 108px;
  height: 108px;
  background-size: 108px auto;
  background-image: url('../images/stamp_8_off.png');
}
.stamp .list li.on:nth-child(8) .img {
  background-image: url('../images/stamp_8.png');
}

.stamp .list li:nth-child(9) .img {
  width: 152px;
  height: 152px;
  background-size: 152px auto;
  background-image: url('../images/stamp_9_off.png');
}
.stamp .list li.on:nth-child(9) .img {
  background-image: url('../images/stamp_9.png');
}

.stamp .list li:nth-child(10) .img {
  width: 128px;
  height: 106px;
  background-size: 128px auto;
  background-image: url('../images/stamp_10_off.png');
}
.stamp .list li.on:nth-child(10) .img {
  background-image: url('../images/stamp_10.png');
}

.stamp .list li:nth-child(11) .img {
  background-image: url('../images/stp-img-10-off.png');
}
.stamp .list li.on:nth-child(11) .img {
  background-image: url('../images/stp-img-10-on.png');
}

.stamp .list li:nth-child(12) .img {
  background-image: url('../images/stp-img-11-off.png');
}
.stamp .list li.on:nth-child(12) .img {
  background-image: url('../images/stp-img-11-on.png');
}

.stamp .list li:nth-child(13) .img {
  background-image: url('../images/stp-img-12-off.png');
}
.stamp .list li.on:nth-child(13) .img {
  background-image: url('../images/stp-img-12-on.png');
}

.stamp .list li:nth-child(14) .img {
  background-image: url('../images/stp-img-13-off.png');
}
.stamp .list li.on:nth-child(14) .img {
  background-image: url('../images/stp-img-13-on.png');
}

.stamp .list li:nth-child(15) .img {
  background-image: url('../images/stp-img-14-off.png');
}
.stamp .list li.on:nth-child(15) .img {
  background-image: url('../images/stp-img-14-on.png');
}

.stamp .list li:nth-child(16) .img {
  background-image: url('../images/stp-img-15-off.png');
}
.stamp .list li.on:nth-child(16) .img {
  background-image: url('../images/stp-img-15-on.png');
}

.stamp .list li:nth-child(17) .img {
  background-image: url('../images/stp-img-16-off.png');
}
.stamp .list li.on:nth-child(17) .img {
  background-image: url('../images/stp-img-16-on.png');
}

.stamp .list li:nth-child(18) .img {
  background-image: url('../images/stp-img-17-off.png');
}
.stamp .list li.on:nth-child(18) .img {
  background-image: url('../images/stp-img-17-on.png');
}

.stamp .list li:nth-child(19) .img {
  background-image: url('../images/stp-img-18-off.png');
}
.stamp .list li.on:nth-child(19) .img {
  background-image: url('../images/stp-img-18-on.png');
}

.stamp .list li .tbox {
  display: none;
  width: 162px;
  height: 59px;
  background: url('../images/stptbox-bg.png') no-repeat;
  border-radius: 10px;
  text-align: center;
  position: absolute;
  top: -60px;
  left: -26px;
  /* display: flex; */
  justify-content: center;
  align-items: center;
  background-size: contain;
}

.stamp .list li .tbox p {
  transform: translateY(-6px);
}

.stamp .list li.on .tbox p {
  color: #000;
  font-weight: 600;
}

.stamp .list li .tbox p {
  font-size: 0.8rem;
  color: #000;
}

.find {
  width: 100%;
  height: 100vh;
  background: url('../images/find-bg.png');
}

.find .tit {
  padding-top: 100px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
}

.find .tit h1 {
  font-size: 40px;
}

.find .tit p {
  font-size: 18px;
}

.find .tit img {
  margin: 0 auto;
}

.find-img {
  margin: 50px auto 0 auto;
}

.pop-layer {
  z-index: 999;
  position: relative;
}

.pop-layer .bg-wrap {
  position: fixed;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
}

.pop-layer .pop-wrap {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  overflow-y: scroll;
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: 0;
  padding-right: 0;
  padding-top: 20px;
}

.position-r {
  width: 100%;
}

.pop-layer .pop-wrap .close {
  display: block;
  border: 0;
  width: 36px;
  height: 36px;
  background: url('../images/close.png') no-repeat;
  margin: 0 auto 30px auto;
}

.pop-layer .pop-contents {
  position: relative;
  width: 100%;
  background: #272a2b;
  color: #fff;
  border-radius: 20px 20px 0 0;
  padding: 40px 0 40px 0;
  overflow: hidden;
  margin: 0 auto;
}

.bg-c-01 {
  background: #ff6600;
}

.bg-c-02 {
  background: #ff6600;
}

.btn-st {
  position: relative;
  display: block;
  height: 50px;
  font-size: 20px;
  font-weight: 600;
  line-height: 50px;
  text-align: center;
  overflow: hidden;
}

.pop-layer .pop-contents > img {
  position: relative;
  width: 100%;
  margin-bottom: -100px;
  z-index: 1;
}

.pop-layer .pop-contents .txt {
  margin: 0 auto;
  text-align: center;
  transform: translateY(-30px);
}

.pop-layer .pop-contents .txt h1 {
  font-weight: 600;
  color: #ff6600;
  padding-top: 20px;
}

.pop-layer .pop-contents .txt p {
  font-size: 16px;
}

.pop-layer .pop-contents .btn-st {
  width: 80%;
  margin: 0 auto;
  border-radius: 10px;
}

.btn-receive-luckyBox {
  background-color: #6360ff;
}

.btn-use-finish-luckyBox {
  background-color: #606060;
}

.prd-wrap {
  position: relative;
  height: 180px;
  margin-bottom: 30px;
}

.prd-wrap li {
  position: absolute;
  width: 100px;
  height: 100px;
  background-image: url('../images/stp-g.png');
  background-size: contain;
  background-repeat: no-repeat;
}

.prd-wrap li p {
  width: 100%;
  background-size: 35px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  background-repeat: no-repeat;
  background-position: bottom center;
  background-image: url(../images/chicken-g.png);
  padding-bottom: 30px;
  font-size: 12px;
}

.prd-wrap li:first-child {
  left: -30px;
  bottom: 0;
}

.prd-wrap li:nth-child(2) {
  left: 50%;
  transform: translateX(-50%);
  width: 180px;
  height: 180px;
  filter: hue-rotate(313deg);
  background-image: url('../images/stp-p.png');
}

.prd-wrap li:nth-child(2) p {
  background-image: url('../images/gift-img.png');
  background-size: 150px;
  padding-bottom: 120px;
  font-size: 14px;
  color: #fe601a;
  filter: hue-rotate(-313deg);
}

.prd-wrap li:nth-child(2)::after {
  display: block;
  /* content: "닭튀김"; */
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
}

.prd-wrap li.lose:nth-child(2) p {
  background-image: url('../images/boom.png');
  color: #333;
}

.prd-wrap li.lose:nth-child(2)::after {
  content: '꽝';
}

.prd-wrap li:last-child {
  right: -30px;
  bottom: 0;
}

.gift {
  position: relative;
  width: 100%;
  background: url('../images/gift-bg.png');
  background-size: cover;
  background-position: bottom;
  padding-bottom: 50px;
}

.gift .firework {
  position: absolute;
  width: 100%;
  top: -30px;
}

.gift .tbox-01 {
  text-align: center;
  padding-top: 50px;
}

.gift .tbox-01 p {
  font-size: 18px;
  margin-top: 20px;
}

.gift .tbox-01 img {
  margin: 50px auto 0 auto;
}

.gift .gift-img {
  margin: 0 auto;
}

.gift .tbox-02 {
  width: 80%;
  border: 1px solid #f4f4f4;
  padding: 40px;
  background: #fff;
  border-radius: 20px;
  text-align: center;
  margin: 0 auto;
  transform: translateY(-30px);
}

.gift .tbox-02 .btn-st {
  width: 80%;
  border-radius: 10px;
  margin: 20px auto 0 auto;
}

.join-wrap {
  width: 100%;
  background: #fefbed;
  padding-bottom: 50px;
}

.join {
  position: relative;
  width: 350px;
  background: url('../images/join-bg.png') no-repeat;
  background-size: contain;
  margin: 0 auto;
  transform: translateX(-5px);
}

.join .tit-img {
  padding-top: 70px;
  margin: 0 auto;
}

.join .list::after {
  display: block;
  content: '';
  clear: both;
}

.join .list {
  width: 80%;
  margin: 30px auto 0 auto;
  transform: translateX(10px);
}

.join .list li {
  float: left;
  width: 48%;
  margin-right: 2%;
  margin-bottom: 10%;
  text-align: center;
}

.join .list li:nth-child(2n) {
  margin-right: 0;
}

.join .list li .img {
  width: 120px;
  height: 120px;
  line-height: 120px;
  border-radius: 100%;
  border: 1px solid #ddd;
  margin: 0 auto 10px auto;
  color: #fe601a;
}

@media (min-width: 376px) {
  .stamp,
  .join {
    /* width: 375px; */
    /* margin: 0 auto; */
    /* box-shadow: 1px 1px 50px rgb(0 0 0 / 10%); */
  }

  .gift {
    width: 375px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

.btn-stamp {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgb(20, 127, 228);
  color: #fff;
  border: 0;
  line-height: 44px;
}

.pop-layer-goods .prd-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pop-layer-goods .prd-wrap li {
  position: static;
}

.pop-layer-goods .prd-wrap li:nth-child(2) {
  transform: translate(0, 0);
  background-position: center;
}

.pop-layer-goods .prd-wrap li:nth-child(2) p {
  background-image: none;
}

.pop-layer-goods .prd-image {
  width: 130px;
  margin: 20px auto;
}

.pop-layer-goods .txt > p {
  font-weight: 400;
  font-size: 24px;
}

.pop-layer-goods .txt > p + p {
  font-weight: 700;
  margin-top: 10px;
}

.pop-layer.pop-layer-goods .pop-contents .btn-st {
  width: 85%;
}

.btn-wrap {
  z-index: 100;
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 0);
  width: 100%;
  box-sizing: border-box;
  padding: 0 24px;
  height: 56px;
  display: flex;
  justify-content: space-between;
}

.btn-wrap a {
  /* position: absolute; */
  width: calc(50% - 4px);
  border: 0;
  padding: 10px 0;
  color: #fff;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn-wrap button p {
  color: #fff;
  font-weight: 600;
  display: inline-block;
  line-height: 1.3em;
}

.btn-wrap button.cart {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 70px);
  right: 12px;
  width: 100px;
  background: #994bb1;
  border-radius: 50px;
}

.btn-wrap button.cart p {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.btn-wrap button.cart p::before {
  content: '';
  margin-bottom: 5px;
  width: 22px;
  height: 32px;
  display: block;
  background: url('../images/icon_gift.png') right center no-repeat;
  text-align: center;
  /* padding-right: 40px; */
  background-size: 22px;
}

.btn-wrap a.stp {
  left: 0;
  border: #fe601a 1px solid;
  color: #fe601a;
  background-color: #fff;
}

.btn-wrap button.stp p {
  background: url('../images/icon-stp.png') right center no-repeat;
  text-align: left;
  padding-right: 40px;
  background-size: 30px;
}

.btn-wrap a.qr {
  right: 0;
  background: #fe601a;
  color: #fff;
}

.btn-wrap button.qr p {
  background: url('../images/icon-qr.png') left center no-repeat;
  text-align: right;
  padding-left: 50px;
  background-size: 40px;
}

.stamp-card-wrap .stamp-card {
  flex-direction: column;
  align-items: center;
}

.stamp-card-wrap {
  padding: 40px 24px 0;
  padding-bottom: 100px;
  overflow: hidden;
}

.stamp-card-desc {
  font-size: 13px;
  line-height: 1.5;
}

.stamp-card-wrap .stamp-page-title {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-color: #fff;
  padding: 20px;
  border-radius: 15px;
  margin-bottom: 20px;
  box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.stamp-card-wrap .stamp-page-title h3 {
  background: gray;
  padding: 5px 15px;
  color: #fff;
  border-radius: 20px;
}

.stamp-card-wrap .stamp-page-title p {
  font-size: 18px;
  display: block;
  padding-top: 10px;
  font-weight: 500;
}

.stamp-card-wrap .stamp-card {
  position: relative;
  color: #fff;
  padding-top: 50px;
  display: flex;
  justify-content: center;
}

.stamp-card-inner {
  /* overflow: hidden; */
  border-radius: 8px;
  padding: 20px;
  background-color: gray;
  background-image: url(../images/stamp-card-background.png);
  background-size: 100% auto;
  position: relative;
  z-index: 10;
}

.stamp-card-inner::before,
.stamp-card-inner::after {
  position: absolute;
  content: '';
  display: block;
  background-color: gray;
  background-image: url(../images/stamp-card-background.png);
  background-size: 100% auto;
  opacity: 0.5;
}

.stamp-card-3 .stamp-page-title h3,
.stamp-card-3 .stamp-card-inner,
.stamp-card-3 .stamp-card-inner::before,
.stamp-card-3 .stamp-card-inner::after {
  background-color: #00728f;
}

.stamp-card-2 .stamp-page-title h3,
.stamp-card-2 .stamp-card-inner,
.stamp-card-2 .stamp-card-inner::before,
.stamp-card-2 .stamp-card-inner::after {
  background-color: #248039;
}

.stamp-card-1 .stamp-page-title h3,
.stamp-card-1 .stamp-card-inner,
.stamp-card-1 .stamp-card-inner::before,
.stamp-card-1 .stamp-card-inner::after {
  background-color: #f77e09;
}

.stamp-card-0 .stamp-page-title h3,
.stamp-card-0 .stamp-card-inner,
.stamp-card-0 .stamp-card-inner::before,
.stamp-card-0 .stamp-card-inner::after {
  background-color: #950d88;
}

.stamp-card-inner::before {
  top: 0;
  left: 0;
  transform: translate(-105%, 0) scale(0.9);
  width: 100px;
  border-radius: 6px;
  height: 100%;
}

.stamp-card-inner::after {
  top: 0;
  right: 0;
  transform: translate(105%, 0) scale(0.9);
  width: 100px;
  border-radius: 6px;
  height: 100%;
}

.stamp-card-wrap .stamp-card::before {
  z-index: 9;
  position: absolute;
  top: -40px;
  content: '';
  display: block;
  background-image: url(../images/festival-mascot-img01.png);
  background-repeat: no-repeat;
  background-size: auto 110px;
  width: 80px;
  height: 167px;
}

.stamp-card-wrap .stamp-card .stamp-card-image {
  border-radius: 15px;
  overflow: hidden;
  margin-bottom: 15px;
}

.stamp-card-wrap .stamp-card .stamp-card-head {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stamp-card-wrap .stamp-card h3 {
  font-weight: 600;
}

.star-list {
  display: flex;
}

.star-list .star {
  width: 18px;
  height: 18px;
  display: block;
  background-position: center;
  background-image: url(../images/ico_star_off.png);
  background-repeat: no-repeat;
  background-size: 18px auto;
}

.star-list .star.on {
  background-image: url(../images/ico_star_on.png);
}

.stamp-card-message {
  width: 100%;
}

.stamp-card-message ul {
  display: flex;
  flex-direction: column;
}

.stamp-card-message ul li {
  width: 65%;
  background-color: #fff;
  border-radius: 5px;
  color: #000;
  margin: 15px 0;
  padding: 15px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
}

.stamp-card-message ul li:nth-child(2) {
  position: relative;
  align-self: flex-end;
}

.stamp-card-message ul li:nth-child(2) div {
  position: relative;
  z-index: 10;
  display: inline-block;
  background-color: #fff;
}

.stamp-card-message ul li:nth-child(2):after {
  content: '';
  z-index: 0;
  position: absolute;
  top: -70px;
  right: 10px;
  content: '';
  display: block;
  background-image: url(../images/festival-mascot-img02.png);
  background-repeat: no-repeat;
  background-size: auto 110px;
  width: 80px;
  height: 167px;
}

.stamp-info-item {
  padding-left: 0;
  padding-right: 0;
}

.stamp-info .stamp-item {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.stamp-info .stamp-info-tit {
  margin-bottom: 20px;
}

.stamp-info .stamp-item div {
  margin: 0 15px;
  width: 33%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.stamp-info .stamp-item div .photo {
  position: relative;
  width: 80px;
  height: 80px;
  display: block;
  text-align: center;
  border-radius: 50%;
  background-color: white;
  border: 4px solid lightgray;
  display: flex;
  align-items: center;
  justify-content: center;
  color: gray;
  filter: grayscale(1) opacity(0.5);
}

.stamp-info .stamp-item div .photo::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-size: 100% auto;
  opacity: 0.5;
}

.stamp-info .stamp-item div.on .photo {
  filter: grayscale(0);
  border-color: #e0542f;
  color: #e0542f;
  font-weight: 600;
  text-shadow: 0 0 10px rgb(230, 230, 230);
}

.stamp-info .stamp-item div:nth-child(2) .photo {
  border-color: #283365;
  color: #283365;
}

.stamp-info .stamp-item div:nth-child(1) .photo::before {
  background-image: url(../images/product_1.png);
}
.stamp-info .stamp-item div:nth-child(2) .photo::before {
  background-image: url(../images/product_2.png);
}
.stamp-info .stamp-item div:nth-child(3) .photo::before {
  background-image: url(../images/product_3.png);
}

.stamp-info .stamp-item div .text {
  position: relative;
  z-index: 10;
}

.stamp-info .stamp-item div .txt {
  font-size: 15px;
  margin-top: 15px;
  margin-bottom: 0;
  position: relative;
  z-index: 10;
}

.stamp-info .stamp-item div .txt i {
  font-style: normal;
  font-size: 13px;
  font-weight: 300;
  margin-top: 5px;
  display: block;
}

.stamp-info .stamp-item div:nth-child(1) {
}
.stamp-info .stamp-item div:nth-child(2) {
}
.stamp-info .stamp-item div:nth-child(3) {
}

.book-box-count {
  border-radius: 5px;
  box-shadow: 0 0 15px rgb(0 0 0 / 16%);
  text-align: center;
  padding: 10px 0;
  margin-bottom: 20px;
  background-image: url(../images/common/book-box-count.png);
  background-size: 100% 100%;
  color: #fff;
}

.goods-list:not(.scan-list) dl + dl dd {
  background-color: #353b40;
  border: 1px solid #353b40;
  width: calc(50% - 10px);
  float: left;
  padding: 0 10px 15px;
  margin: 0 5px 10px;
}

.swiper-slide:not(.swiper-slide-active) {
  opacity: 0;
}

.quick_menu {
  position: fixed;
  top: 20%;
  right: 5%;
  z-index: 999;
}
.quick_menu .dday {
  position: relative;
  font-size: 0;
  background: transparent;
  width: 277px;
  height: 193px;
  transform: translateY(59px);
}
.quick_menu .dday > div {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 1.4;
  color: #fff;
}
.quick_menu .dday > div p {
  margin-bottom: -8px;
  font-size: 16px;
}
.quick_menu .dday h1 {
  animation: ddayPulse 2s ease-in-out infinite;
  transition: all 0.3s ease;
  font-size: 2rem;
}
.quick_menu .dday h1:hover {
  transform: scale(1.05);
  filter: drop-shadow(0 0 10px #ffe31080);
}
@keyframes ddayPulse {
  0%,
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.02);
    filter: brightness(1.1);
  }
}
.quick_menu .quick_star {
  position: relative;
  height: 208px;
}
.quick_menu .quick_star .chat {
  position: absolute;
  right: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.quick_menu .quick_star .chat-text {
  color: #553838;
  opacity: 1;
  transform: translateY(0);
  white-space: nowrap;
  position: absolute;
  top: 16px;
  left: 20px;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: -0.08em;
  transform: rotate(3deg) !important;
  font-weight: 800;
}
.quick_menu .quick_star .star_2 {
  position: absolute;
  left: 70px;
  bottom: 0;
  animation: starFloat 3s ease-in-out infinite;
}
/* 하모 캐릭터(세로 이미지)는 별보다 세로로 길어 폭을 잡아 말풍선 아래에 앉힌다 */
.quick_menu .quick_star .star_2.hamo {
  left: 78px;
  width: 104px;
  height: auto;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.28));
}

.quick_menu {
  /* --qm-x / --qm-y 는 드래그(home.edge)로 갱신되는 이동량. scale 보다 앞에 둬야
     이동량이 화면 픽셀과 1:1 로 맞는다 */
  transform: translate(var(--qm-x, 0px), var(--qm-y, 0px)) scale(0.6) !important;
  top: auto;
  bottom: 0;
  right: -30px;
  /* 둥실 애니메이션은 translateY 만 있는 starFloat 대신 translate+scale 을 모두 가진
     quickMenuFloat 를 쓴다. 브라우저에 따라 애니메이션이 !important transform 을 덮는 경우
     scale 이 빠져 원래 크기(1.0)로 커졌다가 드래그(animation: none)하면 0.6 으로 돌아오는 등
     크기가 튀는 문제가 있었다. 어느 쪽이 적용되든 크기·위치가 같도록 맞춘다. */
  animation: 3s ease-in-out 0s infinite normal none running quickMenuFloat;
}
@keyframes quickMenuFloat {
  0%,
  100% {
    transform: translate(var(--qm-x, 0px), var(--qm-y, 0px)) scale(0.6);
  }
  50% {
    transform: translate(var(--qm-x, 0px), calc(var(--qm-y, 0px) - 15px)) scale(0.6);
  }
}
/* 드래그 손잡이: 터치 중 스크롤/롱프레스 메뉴가 끼어들지 않게 */
.quick_menu .quick_star {
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.quick_menu.is_dragging {
  animation: none;
  transform: translate(var(--qm-x, 0px), var(--qm-y, 0px)) scale(0.6) !important;
}
.quick_menu.is_dragging .quick_star {
  cursor: grabbing;
}
.quick_menu.is_dragging .quick_star .star_2 {
  animation: none;
}

@keyframes starFloat {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-15px);
  }
}