@charset "utf-8";
/* Reset CSS */
body, div, h1, h2, h3, h4, h5, h6, p, ul, ol {margin:0;padding:0;box-sizing:border-box;font-family: 'Noto Sans', sans-serif; font-size:1rem;box-sizing:border-box;}
ul, ol, li {list-style:none;}
a {text-decoration:none;color:#414141;}
img {vertical-align:top}
.clearfix:before, .clearfix:after {display:inline-block;content:"";}
.clearfix:after {clear:both;}

div.popup_wrap {position:fixed;width:100%;height:100%;top:0;left:0;font-size:0;text-align:center;background-color:rgba(0,0,0,0.6);overflow:auto;z-index:999;}
div.popup_wrap:before {width:0;height:100%;position:relative;vertical-align:middle;display:inline-block;overflow:hidden;content:"";font-size:0;}
div.popup_content {display:inline-block;vertical-align:middle;width:100%;padding:15px 0;font-size:16px;font-size:1rem;
-webkit-transform:translate3d(0,0,0);
-moz-transform:translate3d(0,0,0);
-o-transform:translate3d(0,0,0);
transform:translate3d(0,0,0);
-webkit-animation:popup_show 0.3s linear 0s 1;
-moz-animation:popup_show 0.3s linear 0s 1;
-o-animation:popup_show 0.3s linear 0s 1;
animation:popup_show 0.3s linear 0s 1;
}

#coupon_popup_wrap {z-index:10 !important;}
#accu_popup_wrap {z-index:10 !important;}
#cancel_popup_wrap {z-index:11 !important;}

@-webkit-keyframes popup_show {
	0%{-webkit-transform:translate3d(0,-40px,0);opacity:0.3;}
	100%{-webkit-transform:translate3d(0,0,0);opacity:1;}
}
@-moz-keyframes popup_show {
	0%{-moz-transform:translate3d(0,-40px,0);opacity:0.3;}
	100%{-moz-transform:translate3d(0,0,0);opacity:1;}
}
@-o-keyframes popup_show {
	0%{-o-transform:translate3d(0,-40px,0);opacity:0.3;}
	100%{-o-transform:translate3d(0,0,0);opacity:1;}
}
@keyframes popup_show {
	0%{transform:translate3d(0,-40px,0);opacity:0.3;}
	100%{transform:translate3d(0,0,0);opacity:1;}
}
.popup_default {width:80%;max-width:320px;margin:0 auto;background-color:#fff;font-size:15px;border:1px solid #e1e1e1;}
.popup_default_inner {width:80%;margin:0 auto;padding:40px 0;}
.popup_default_button {text-align:center;color:#108ee9;border-top:1px solid #e1e1e1;}
.popup_default_button span {padding:14px 0;display:inline-block;}
.popup_default_button.type01 {cursor: pointer;}
.popup_default_button.type02 {overflow:auto;}
.popup_default_button.type02>div {float:left;width:50%;cursor: pointer;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box;font-size:14px;font-weight:bold;}
.popup_default_button.type02>div:nth-child(1){border-right:1px solid #e1e1e1;color:#999}

/* [ coupon popup ] */
.icon_close_coupon {display:block;width:10%;margin:0 auto;margin-bottom:12px;}
.div_coupon_popup {width:84%;margin:0 auto;background-color:#fff;padding:30px 0;max-width:340px;}
.div_coupon_popupInner {width:84%;margin:0 auto;}
.div_coupon_product {width:100%;height:160px;overflow:hidden;margin:0 auto;padding:5px 0 10px;}

.div_coupon_popupInner .div_coupon_info{display:block;margin-top:15px;text-align:left;width:100%;}
.div_coupon_popupInner .div_coupon_info p{width:100%;}
.div_coupon_popupInner .p_stamp_position {}
.div_coupon_popupInner .p_coupon_title {padding:5px 0;font-size:1rem;}
.div_coupon_popupInner .p_coupon_subtitle {color:#8A8C98;font-size:0.875rem;padding-bottom:20px;}
.div_coupon_popupInner .p_coupon_limit {color:#8a8c98;font-size:0.813rem;}

.div_coupon_notice {width:100%;padding:10px 0;text-align:left;position:relative;margin-top:45px;}
.div_coupon_notice:before {position:absolute;top:0;left:0;width:17%;height:1px;background-color:#cdcfdc;content:"";}
.div_coupon_notice p {color:#cdcfdc;font-size:0.70rem;width:76%;}
.img_stamp_hand {position:absolute;width:24%;bottom:0;right:0;}
.coupon_list_line {width:100%;}
.img_used {display:none;position:absolute;width:50%;top:59%;right:7%;z-index:5;}
.img_used.on {display:block;}
.img_full {width:auto;height: 100%;}

/* 적립취소 팝업 */
.div_coupon_popup.save_cancel  {background-color:#F6F7F9;padding:75px 25px 45px 25px;}
.p_saveCancel_title {color:#ED145B;text-align:center;line-height:1.5;font-size:1rem;padding-bottom:10px;}
.p_saveCancel_subtit {padding-bottom:20px;font-size:0.80rem;color:#8A8C98;}
.img_stamp_handCancel {display:block;width:50%;margin:40px auto;}

/* div_stamp_saveList : 적립내역 */
.div_stamp_saveList {position:fixed;top:0;left:0;width:100%;height:100%;overflow:auto;background-color:#fff;z-index:3;}
.div_saveList_top {width:100%;padding:20px 0;background-color:#F6F7F9;position:relative;}
.img_saveList_back {width:17px;vertical-align:middle;}
.p_saveList_tit {display:inline-block;margin-left:5%;color:#414141;font-size:0.938rem;}
.div_saveList_cpnCount {background-color:#fff;padding:15px 0;text-align:center;margin-top:30px;}
.div_saveList_cpnCount > div {width:42px;height:42px;position:relative;display:inline-block;vertical-align:middle;}
.div_saveList_cpnCount > span {display:inline-block;vertical-align:middle;font-size:1.125rem;color:#CDCFDC;padding-right:30px;padding-left:5px;}
.div_saveList_cpnCount > span:last-child{color:#414141;padding-right:0;}
.div_90 {width:90%;margin:auto;}
.p_saveList_cancel {text-align:right;padding-top:10px;}
.p_saveList_cancel a{color:#8A8C98;font-size:0.813rem;}
.p_saveList_cancel a img {display:inline-block;vertical-align:middle;width:17px;}
.p_saveList_cancel a span {display:inline-block;vertical-align:middle;}

.ul_stamp_saveList {width:100%;}
.ul_stamp_saveList li {width:100%;background-color:#fff;padding:16px 0;}
.ul_stamp_saveList li:nth-child(2n) {background-color:#F6F7F9;}
.ul_stamp_saveList li > div {width:90%;margin:0 auto;font-size:0.875rem;color:#8A8C98;}
.ul_stamp_saveList li > div span:last-child {float:right;color:#CDCFDC;}


/* common CSS */
.container_wrap {width:100%;height:100%;position:fixed;overflow:auto;}
.header_top {width:100%;height:60px;line-height:60px;background-color:#33256D;}
.coupon_title_line, .visual_img, .stamp_area > img, .coupon_complete > img, .coupon_img, .couponlist_title > img  {width:100%;}
.hamburger_button {width:83%;display:inline-block;margin-left:5%;color:#fff;font-size:1rem;}
.hamburger_icon {width:10%;margin-right:6%;vertical-align:middle;}
.img_close_button {vertical-align:middle;width:5%;}
.number {width:100%;padding-top:3%;padding-right:3%;text-align:right;font-size:0.750rem;color:#B7B7B7}
.upper {background-color:#f5f5f5;}
.upper_inner {width:100%;margin:0 auto;}

.visual_area {
  position:relative;
  z-index:-1;
}
.content_title {
  padding:20px 0;
  text-align:center;
  font-size:1rem;;
  line-height:1.3;
  letter-spacing:-1px;
  color:#414141;
}
.stamp  {
  font-size:0;
}
.stamp_inner {
  width:90%;
  margin:auto;
  text-align:center;
  letter-spacing:10px;
  line-height:23px;
}
.stamp_area {
  display:inline-block;
  width:17.6%;
  margin-bottom:5%;
  margin-right: 3%;
  vertical-align:middle;
  position:relative;
}
.stamp_area:nth-child(5n) {
  margin-right: 0;
}
.stamp_on_img {
  position:absolute;
  top:0;
  left:0;
  opacity:0; /* opacity : 1 */
}
.stamp_on_img.on {
  opacity:1;
}
.last {
  position:relative;
}
.coupon_complete {
  position:absolute;
  top:0;
  left:0;
}
.cancel {
  display: block;
  /*width:90%;*/
  float: right;
  padding:3% 5% 3% 0;
	line-height:1;
  text-align:right;
  font-size:0.750rem;
  color:#bbb;
}
.next {
  width:10%;
  float: right;
  margin-left:5px;
	vertical-align:middle;
}
.coupon_line {
  text-align:center;
}
.coupon_title {
  width:95%;
  margin:auto;
  line-height:2;
}
.coupon_area {
  margin:0 auto;
  margin-top:20px;
}
.none_coupon {
  padding:15% 0 !important;
  text-align:center !important;
  font-size:0.875rem !important;
  color:#B7B7B7 !important;
}
.coupon_inner {
  display:table;
  width:100%;
  background-color:#fff;
  border:1px solid #cdcfdc;
}
.coupon_inner.on {
  opacity:0.3;
}
.coupon_inner.inactive {
  opacity:0.4;
}
.coupon_list {
  width:95%;
  margin:auto;
}
.coupon_list.on {
  display:block;
}
.coupon_list li {
  padding-bottom:10px;
}
.coupon_imgArea {
  overflow:hidden;
  margin:10px;
}
.coupon_img {
  display:block;
}
.coupon_wrap {
  width:70%;
  display: table-cell;
	padding-right:10px;
  vertical-align: middle;
}
.coupon_desc {
  padding:3% 0;
  line-height:1.2;
  font-size:1rem;
  color:#414141;
}
.coupon_info, .coupon_info_inner {
  display:inline-block;
  vertical-align: top;
}
.coupon_info {
  width:30%;
}
.coupon_place, .coupon_available_term, .place_content, .date_content {
  line-height:1.5;
  letter-spacing:-1px;
  font-size:0.70rem;
  color:#B7B7B7;
}
.notice_wrap {
  width:90%;
  margin:auto;
  padding:10% 0;
}
.notice_title {
  padding-bottom:5%;
  font-size:1rem;
  color:#F76163;
}
.notice_content {
  line-height:1.3;
  font-size:0.875rem;
  color:#414141
}
/* tab_menu */
.top {
	height:55px;
	line-height:55px;
	background-color:#fff;
}
.tab_menu_open, .div_stamp_saveList {
  position:fixed;
  left:-100%;
  top:0;
  width:100%;
  height:100%;
  background-color:#fff;
  z-index:20;
	transition:all 0.5s ease-out;
	-webkit-transition:all 0.5s ease-out;
}
#tab_menu_open.on, .div_stamp_saveList.on {
	transform: translateX(100%);
	-webkit-transform: translateX(100%);
}
/* 탭메뉴 슬라이드 */
/*#tab_menu_open.on {
  -webkit-animation: bg_ani .5s linear forwards;
  -moz-animation: bg_ani .5s linear forwards;
  -o-animation: bg_ani .5s linear forwards;
  animation: bg_ani .5s linear forwards;
}

@keyframes bg_ani {
  0% {transform: translatex(0);}
  100% {transform: translatex(100%);}
}
@-webkit-keyframes bg_ani {
  0% {transform: translatex(0);}
  100% {transform: translatex(100%);}
}*/
.noneEvent {
	background-color:#F5F5F5;
}
.tab_menu_open > p {
	width:100%;
	margin-top:35%;
	text-align:center;
	font-size:0.875rem;
	color:#B7B7B7;
}
.tab_title {
  display:inline-block;
	margin-left:20px;
	font-size:0.875rem;
	color:#414141;
}
.tab_close {
  float:right;
}
.close_btn {
  width:55%;
	vertical-align:middle;
}
.tab_menu_list {
  padding:15px 0 15px 20px;
	font-size:0.875rem;
}
.tab_menu_list > img {
  width:12%;
	margin-right:20px;
	vertical-align:middle;
}
.bg_color {
	background-color:#F5F5F5;
}
.menu_img {
  width:66%;
}

@media only screen and (min-width:375px) {
	html {font-size:1.1rem;}
}
