:root {
--main-bg-color: #4066FF;
}

@font-face {
	font-family: NotoSansKR-Regular;
	src: url('../font//NotoSansKR-Regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: KosugiMaru-Regular;
	src: url('../font/KosugiMaru-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: Roboto-Bold;
	src: url('../font/Roboto-Bold.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
/**
* 기본 스타일 설정
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, a, small, strike, strong,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
article, aside, footer, header, hgroup,
menu, nav, output, ruby, section {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: KosugiMaru-Regular;
}

img {
  display: block;
}
input {
  vertical-align: middle;
}
input::placeholder {
  vertical-align: middle;
}

a {
  text-decoration: none;
  color: #191919;
}

.pl35 {
  padding-left: 0.4rem;
}
.pr35 {
  padding-right: 0.4rem;
}

/**
* history
*/

.history_header{
  z-index: 70;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 1.4666rem;
  overflow: hidden;
  background-color: #fff;
  /* display: grid; */
  /* grid-gap: 3.36rem; */
  /* grid-template-columns: 0.7466rem 1fr; */

  /* padding-top: 0.4rem; */
}
.history_header .history_header_content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
}
.history_header_content h1 {
  color: #191919;
  font-size: 0.4533rem;
}
.history_header_content .back_img {
  width: 0.7466rem;
}
.history_header_content .back_img img {
  width: 100%;
}

.stemp_count {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.4533rem;
  color: #191919;
  font-family: KosugiMaru-Regular;
}
.circle {
  width: 1.066rem;
  height: 1.066rem;
  border-radius: 50%;
  background-color: #C4D0FF;
  color: var(--main-bg-color);
  font-family: Roboto-Bold;
  font-size: 0.5866rem;
  line-height: 2.2933rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 0.16rem;
}

.thank {
  font-size: 0.32rem !important;
  color: #999999 !important;
  line-height: 0.44rem;
  padding: 0.32rem 0 0.8rem 0 !important;
}

.total_count {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 1.306rem 0 1.22rem;
  border-top: 1px solid #CDD6FC;
}

.history_tab {
  display: flex;
  justify-content: center;
  align-items: center;
}
.history_tab .stamp_histroy {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background-color: var(--main-bg-color);
  width: 4.5466rem;
  border-top-left-radius: 0.3333rem;
  line-height: 1.066rem;
}
.history_tab .coupon_histroy {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background-color: #CDD6FC;
  width: 4.5466rem;
  border-top-right-radius: 0.3333rem;
  line-height: 1.066rem;
}

.history_area {
  /* display: none; */
}

.table_header {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 0 0.4533rem;
}
.table_header ul {
  list-style: none;
  display: flex;
  width: 100%;
  text-align: center;
}
.table_header li {
  background-color: var(--main-bg-color);
  color: #fff;
  line-height: 1.066rem;
  width: 2.26rem;
}
.table_header li:first-child {
  width: 4.846rem;
}

.table_notice {
  width: 100%;
  text-align: center;
  background-color: var(--main-bg-color);
  color: #fff;
  line-height: 1.0666rem;
}

.table_list {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 0 0.4533rem;
}

.table_list .list{
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
  text-align: center;
  background-color: white;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
  padding: 0.2933rem 0;
}

.table_list .list ul{
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
}
.table_list .list ul li {
  width: 2.26rem;
}

.table_list .list ul li:first-child {
  width: 4.846rem;
}

/**
* index
*/

#wrap {
  min-height: calc(100vh - 1.4666rem);
  background-color: #F0F3FF;
}

header{
z-index: 70;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 1.4666rem;
overflow: hidden;
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
header h1 {
  font-size: 0.4533rem;
  font-family: KosugiMaru-Regular;
  color: var(--main-bg-color);
}

/**
* 메인 배너
*/
.main_visual {
  margin-top: 1.4666rem;
}

.main_visual article {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #fff;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
}
.main_visual article p{
  padding: 0.5333rem 0;
  text-align: center;
  font-size: 0.37333rem;
  color: #999999;
  font-family: KosugiMaru-Regular;
}

.main_visual article .main_img {
  width: 9.0933rem;
}

.main_visual article .main_img img {
  width: 100%;
  padding: 0 0.453333rem;
}

.content {
  padding: 0.8rem 0;
}

/**
* 스템프
*/

.stamp_area {
  padding-bottom: 0.9333rem;
  padding: 0 0.453333rem;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  row-gap: 0.3rem;
}

.stamp_area .stamp_five {
  background-image: url('../img/stamp_logo_five.png');
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 1.6rem 1.6rem;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 1.6rem;
}
.stamp_area .stamp_five_close {
  background-image: url('../img/stamp_close_five_jp.png');
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 1.6rem 1.6rem;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 1.6rem;
}

.stamp_area .stamp {
  background-image: url('../img/stamp_logo_day.png');
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 1.6rem 1.6rem;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 1.6rem;
  /* background-size: 160%; */
}
.stamp_area .stamp span{
  color: #fff;
  font-family: Roboto-Bold;
  font-size: 0.2981rem;
  transform: rotate(-18deg);
  margin-bottom: 0.233rem;
  margin-right: 0.04rem;
}
.stamp_area .no_stamp {
  background-image: url('../img/stamp_12cm.png');
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 1.6rem 1.6rem;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 1.6rem;
  /* bslee 임시 padding-bottom: 0.4rem; */
  /* background-size: 160%; */
}

.stamp_area img {
  width: 1.605rem;
  padding-bottom: 0.4rem;
}

/**
* 버튼
*/

.button_area {
  display: flex;
  justify-content: space-between;
  padding-top: 0.9333rem;
  padding: 0.7333rem 0.453333rem 0.6666rem 0.453333rem;
}
.button_area .btn{
  width: 2.813rem;
  line-height: 1.333rem;
  /* height: 1.3333rem; */
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid #CDD6FC;
  border-radius: 0.2666rem;
  background-image: url('../img/btn.png');
  background-position: 50% 50%;
  background-size: 175%;
  backdrop-filter: blur(2px);
  box-shadow: 0px 4px 10px rgb(205 214 252 / 20%);
}


/**
* 쿠폰
*/

.coupon_area {
  /* display: none; */
  padding: 0 0.453333rem;
}
.coupon_area .card{
  padding-bottom: 0.2666rem;
}
.coupon_area .card .item {
  padding: 0.32rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-columns: 2.56rem 1fr;
  column-gap: 0.4rem;
  background-color: #fff;
  border-radius: 0.53333rem;
  border: 0.026666rem dashed #CDD6FC;
}

.coupon_area .card .item .left{
  position: relative;
  width: 2.56rem;
}

.coupon_area .card .item .left .sold_out {
  position: absolute;
  width: 2.56rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  opacity: 0.5;
  color: #fff;
  letter-spacing: -1.02px;
  font-size: 0.3733rem;
  font-family: KosugiMaru-Regular;
  border-radius: 0.24rem;
}

.coupon_area .card .item .left img{
  width: 100%;
}
.coupon_area .card .item .right{
  display: flex;
  flex-direction: column;

}
.coupon_area .card .item .right .brand{
  font-size: 0.32rem;
  color: #999999;
}

.coupon_area .card .item .right .title{
  font-size: 0.3733rem;
  color: #191919;
}

.coupon_area .card .date {
  margin: 0 0.32rem;
  padding: 0 0.32rem;
  background-color: #C4D0FF;
  border-bottom-left-radius: 0.53333rem;
  border-bottom-right-radius: 0.53333rem;
  border: 0.026666rem solid #CDD6FC;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.3333rem;
  color: #999999;
  line-height: 1.066rem;
}

.coupon_area .card .date .pub {

}
.coupon_area .card .date .bar {
  color: #CDD6FC;
}
.coupon_area .card .date .pub::after {

}
.coupon_area .card .date .validity {

}

/**
* 이력 없을 때
*/

.history_area .empty_area {
  padding: 0 0.453333rem
}
.empty_area {
  /* display: none; */
  padding: 0;
}
.empty_area .empty_txt {
  padding: 1.066rem 0;
  display: flex;
  justify-content: center;
  background-color: #fff;
  color: #999999;
  backdrop-filter: blur(2px);
  box-shadow: 0px 4px 10px rgb(205 214 252 / 20%);
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
}




/**
 안내
*/

.notice_area {
  margin-top: 0.4rem;
  padding: 0 0.453333rem;
}

.notice_area .guide {
  padding-bottom: 0.32rem;
}

.notice_area .btn {
  line-height: 1.6rem;
  /* height: 1.3333rem; */
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 2px solid #CDD6FC;
  border-radius: 0.2666rem;
  background-image: url('../img/btn.png');
  background-position: 50% 50%;
  background-size: 160%;
  backdrop-filter: blur(2px);
  box-shadow: 0px 4px 10px rgb(205 214 252 / 20%);
  padding: 0 0.32rem;
  color: #191919;
}

.notice_area .btn .arrow {
  width: 0.2333rem;
}
.notice_area .btn .arrow img{
  width: 100%;
}

.notice_area .coupon_guide {
  color: #999999;
  font-size: 0.32rem;
  padding: 0.4rem 0.32rem;
  background-color: #fff;
}
.notice_area .use_guide {
  color: #999999;
  font-size: 0.32rem;
  padding: 0.4rem 0.32rem;
  background-color: #fff;
}

/**
* 팝업
*/

#coupon_delete_popup .inner_modal .sub_title {
  font-size: 0.3733rem;
  color: #191919;
  text-align: center;
  padding-bottom: 1.12rem;
}

#coupon_delete_complete_popup .inner_modal .sub_title {
  font-size: 0.3733rem;
  color: #191919;
  text-align: center;
  padding-bottom: 1.12rem;
}

.dim{
  z-index: 71;
  position: fixed;
  top:0;
  left: 0;
  width: 100vh;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.4);
}

.modal{
  z-index: 72;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  max-height: 900px;
  overflow: scroll;
}

.top_logo {
  position: fixed;
  bottom: 8.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 73;
}

.echoss_img {
  width: 2.4266666666666667rem;
  height: 2.4266666666666667rem;
}
.echoss_img img {
  width: 100%;
}

.inner_modal{
  background-color: #fff;
  position: relative;
  border-top-left-radius: 0.4rem;
  border-top-right-radius: 0.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.333rem 0;
}

.inner_modal .first {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.inner_modal .second {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.inner_modal p {
  font-size: 0.32rem;
}

.inner_modal .date {
  color: #191919;
  padding-bottom: 0.3733rem;
}
.inner_modal .notice {
  text-align: center;
  color: #999999;
  padding-bottom: 0.5866rem;
}

.inner_modal .cancel_notice {
  padding-bottom: 1.066rem;
}

.inner_modal .btn_area {
  display: flex;
  justify-content: center;
}
.inner_modal .btn_area .btn{
  width: 4rem;
  line-height: 1.333rem;
  /* height: 1.3333rem; */
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.2666rem;
  background-color: #F0F3FF;
  margin:0 0.21rem;
}

.inner_modal .btn_area .close{
  color: #fff;
  background-color: var(--main-bg-color);
}

.inner_modal .btn_area .one_btn {
  width: 4rem;
  line-height: 1.333rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.2666rem;
  background-color: var(--main-bg-color);
  margin:0 0.21rem;
  color: #fff;
}

.inner_modal .title {
  font-size: 0.4533rem;
  padding-bottom: 0.32rem;
}

.inner_modal .echoss_notice {
  font-size: 0.3733rem;
  color: #191919;
  text-align: center;
}

.inner_modal .sub_title {
  font-size: 0.3733rem;
  color: #191919;
  text-align: center;
  padding-bottom: 0.32rem;
}

.inner_modal .echoss {
  width: 3.333rem;
  padding-bottom: 0.6666rem;
}
.inner_modal .echoss img{
  width: 100%;
}

.inner_modal .close_btn {
  position: absolute;
  right: 0;
  top: 0;
  width: 0.5866rem;
  padding: 0.5333rem 0.5333rem 0 0;
}
.inner_modal .close img{
  width: 100%;
}

.inner_modal .close_btn img {
  width: 100%;
}

.inner_modal .count_area {
  width: 5.6rem;
  line-height: 1.4666rem;
  border: 2px solid #CDD6FC;
  border-radius: 0.3333rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0.8rem;
  position: relative;
}

.inner_modal .count_area .minus{
  width: 1.8666rem;
  border-right: 2px solid #CDD6FC;
  display: flex;
  justify-content: center;
  align-items: center;
}

.inner_modal .count_area .num{
  width: 1.8666rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.inner_modal .count_area .num input{
  margin: 0;
  padding: 0;
  width: 100%;
  height: 1.4666rem;
  border: 0;
  text-align: center;
}

.inner_modal .count_area .plus{
  width: 1.8666rem;
  border-left: 2px solid #CDD6FC;
  display: flex;
  justify-content: center;
  align-items: center;
}

.inner_modal .count_area img{
  position: absolute;
  right: -0.45333rem;
  bottom: -0.45333rem;
  width: 0.8933rem;
}

.pt60 {
  padding-top: 0.8rem !important;
}

.modal_coupon{
  z-index: 72;
  position: fixed;
  top: 0;
  left: 0;
  width: 9.093rem;
  max-height: 900px;
  overflow: scroll;
  padding: 0 0.4533rem;
  padding-top: 2.666rem;
}

.inner_coupon{
  background-color: #fff;
  position: relative;
  border-radius: 0.4rem;
}

.inner_coupon .close_box {
  display: flex;
  justify-content: flex-end;
  padding: 0.1066rem 0.1066rem 0 0;
}

.inner_coupon .close_btn{
  width: 0.5866rem;
  /* padding: 0.5333rem 0.5333rem 0 0; */
}

.inner_coupon .close_btn img{
  width: 100%;
}

.inner_coupon .img_area {
  width: 7.76rem;
  height: 4.666rem;
  padding: 0 0.6666rem;
}

.inner_coupon .img_area img {
  width: 100%;
  height: 100%;
}

.inner_coupon .coupon_title {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.9066rem 1.1533rem 0.666rem 1.1533rem;
  font-size: 0.4266rem;
  text-align: center;
}

.inner_coupon .coupon_txt {
  padding: 0.32rem 0.6666rem 1.52rem 0.6666rem;
  font-size: 0.32rem;
  color: #999;
  text-align: center;
}

.inner_coupon .date_info {
  background-color: #F0F3FF;
  display: flex;
  justify-content: space-around;
  color: #999999;
  border-bottom-left-radius: 0.2rem;
  border-bottom-right-radius: 0.2rem;
  line-height: 1.066rem;
  font-size: 0.32rem;
}

.inner_coupon .date_info .pub{
}
.inner_coupon .date_info .validity{
}

.use_img {
  width: 3.8rem;
  position: absolute;
  right: 0.88rem;
  top: 2.373rem;
}

.use_img img {
  width: 100%;
  /* transform: rotate(-20deg); */
}