@charset "utf-8";
.container {
  position: relative;
}

/* ### 180823_수정 */
.container nav {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20;
  width: 100%;
  height: 2.78rem;
  /* background-color: #333333; */
  background-color: #21D670;
}

/* ### 180823_추가 */
.container nav > ul > li {
  transition: all .4s;
  color: #21D670;
}
.container nav > ul > li a {
  width: 3.61rem;
  height: 2.1rem;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.5);
}
.container nav > ul li.on {
  border-bottom: 0.13rem solid #fff;
}
.container nav > ul li.on a {
  color: #fff;
}
.container nav .icon_help {
  position: absolute;
  top: 0;
  right: 0;
}
.container .section {
  padding-top: 2.78rem;
  width: 100%;
}
.container .section > li {
  display: none;
}

/* ### 180823_추가 */
.container .section > li.main {
  background-color: #fff;
  width: 100%;
  min-height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  padding-top: 2.8rem;
  box-sizing: border-box;
}
/* ### 180823_수정 */
.container .section > .main .bottom {
  /* width: 18.35rem; */
  width: 84%;
  margin: 0 auto;
  /* padding-bottom: 1.4rem; */
}
/* ### 180823_추가 */
.container .section > .main .bottom .icon_q {
  justify-content: flex-end;
  margin-right: 1.2rem;

  display: none !important;
}
.container .section > .main .bottom > ul {
  margin-top: 1.2rem;
}
/* ### 180823_수정/추가 */
.container .section > .main .bottom > ul > li {
  position: relative;
  width: 100%;
  /* height: 4.17rem; */
  height: auto;
  overflow: hidden;
  /* margin-bottom: 0.3rem; */
  /* border-bottom: 0.1rem solid #cecece; */
  border-bottom: 1px solid rgba(33,214,112,0.5);

  padding: 0 1.4rem;
  padding-top: 1.9rem;
  padding-bottom: 1.6rem;
  box-sizing: border-box;
}

/* ### 180823_추가 */
.container .section > .main .bottom > ul > li:first-child {
	padding-top: 0;
}

/* ### 180823_추가 */
.container .section > .main .bottom > ul > li:last-child {
	border-bottom: 0;
}

/* ### 180823_수정/추가 */
.container .section > .main .bottom > ul > li .img_card {
  /* position: absolute; */
  position: relative;
  top: -0.8rem;
  top: 0;
  left: 0;
  width: 17.79rem;
  width: 100%;
  /* height: 10.82rem; */
  height: auto;
  /* margin: 0 auto; */
  border-radius: 0.7rem 0.7rem 0 0;

  display: block;
}
/* ### 180823_수정 */
.container .section > .main .bottom > ul > li .card_box {
  /* position: absolute; */
  position: relative;
  top: 0;
  /* left: 0.28rem; */
  left: 0;
  /* width: 17.79rem; */
  width: 100%;
  height: 100%;
  border-radius: 0.7rem 0.7rem 0 0;
  overflow: hidden;
}
/* ### 180823_수정/추가 */
.container .section > .main .bottom > ul > li .card_box .card_box_shadow {
  /* position: absolute; */
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background-color: rgba(0, 0, 0, 0.1); */

  margin-top: 0.25rem;
}
/* ### 180823_추가 */
.container .section > .main .bottom > ul > li .card_box .card_box_shadow .card_info {
	padding: 0 0.25rem;
	box-sizing: border-box;
}

/* ### 180823_수정 */
.container .section > .main .bottom > ul > li .card_box p {
  /* color: #fff; */
  color: #21D670;
}
.container .section > .main .bottom > ul > li .icon_link {
  position: absolute;
  top: 0.4rem;
  right: 0.6rem;
}
/* ### 180823_수정 */
.container .section > .main .bottom > ul > li .card_info .title {
  /* width: 11.12rem; */
  width: 10.62rem;
  padding: 0.3rem 0 0.1rem;
  background-color: #fff;
  border-radius: 0 0 0.7rem 0.7rem;
}
/* ### 180823_수정 */
.container .section > .main .bottom > ul > li .card_info .title > p {
  width: 8rem;
  /* text-align: center; */
  text-align: left;
  /* font-weight: bold; */
  font-size: 0.78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* color: #FF7A70; */
  color: #434343;
}
/* ### 180823_추가 */
.container .section > .main .bottom > ul > li .card_info .title .pur_date {
  margin-top: -0.2rem;
  font-weight: 300;
  font-size: 0.56rem;
  color: #999999;

  display: none;
}
.container .section > .main .bottom > ul > li .card_info > .money {
  margin-top: 0.1rem;
  line-height: 1.4rem;
  font-size: 1.25rem;
  font-weight: 400;
}
/* ### 180823_수정/추가 */
.container .section > .main .bottom > ul > li .card_info > .money > span {
  /* font-size: 0.83rem; */
  font-size: 1.17rem;

  margin-top: 0.1rem;
  line-height: 1.4rem;
  font-weight: 400;
  margin-right: 0.12rem;
}
/* ### 180823_추가 */
.container .section > .main .bottom > ol {
  margin-top: 1.11rem;

  display: none;
}
.container .section > .main .bottom > ol > li {
  width: 17.65rem;
  height: 6.672rem;
  margin: 0 auto;
  border-radius: 0.66rem;
}
.container .section > .main .bottom > ol > li > a {
  height: 100%;
  justify-content: center;
}
.container .section > .main .bottom > ol > .add_card {
  margin-bottom: 1.11rem;
  border: 0.083rem dashed #AAAAAA;
}
.container .section > .main .bottom > ol > .add_card .h4 {
  margin: 0.8rem 0 0.24rem;
  font-size: 0.83rem;
  color: #AAAAAA;
}
.container .section > .main .bottom > ol > .add_card .direction {
  font-size: 0.67rem;
  color: #AAAAAA;
}
.container .section > .main .bottom > ol > .buy_card {
  display: none;
  background-color: #FF7A70;
}
.container .section > .main .bottom > ol > .buy_card .h4 {
  margin: 0.54rem 0 0.24rem;
  font-size: 0.83rem;
  color: #fff;
}
.container .section > .main .bottom > ol > .buy_card .btn {
  padding: 0.2rem 0.5rem;
  border: 0.08rem solid #fff;
  font-size: 0.72rem;
  color: #fff;
}
.container .section > .shop .top {
  width: 100%;
  padding-top: 0;
}
.container .section > .shop .top .banner {
  width: 100%;
  height: 5.56rem;
}

/* ### 180823_추가 */
.container .section > .shop .bottom .h2 {
  text-align: center;
  color: #21D670;
  background-color: #fff;
  box-sizing: border-box;
  padding: 1.5rem 0;
}
/* ### 180823_수정 */
.container .section > .shop .bottom > ul {
  /* margin-top: 1.11rem; */
  margin-top: 1.3rem;
  /* padding: 0 5.6%; */
  padding: 0 8.2%;
  /* padding-bottom: 1.11rem; */
}
/* ### 180823_수정 */
/* ### 180903_수정 */
.container .section > .shop .bottom > ul > li {
  display: inline-block;
  /* width: 8.62rem; */
  width: 100%;
  /* background-color: #fff; */
  /* margin-bottom: 0.56rem; */
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(33,214,112,0.5);
  box-sizing: border-box;

  padding-top: 1rem;
}
/* ### 180903_추가 */
.container .section > .shop .bottom > ul > li::first-child {
  padding-top: 0;
}

/* ### 180823_추가 */
.container .section > .shop .bottom > ul > li:last-child {
	border-bottom: 0;
}

.container .section > .shop .bottom > ul > li > a {
  height: 100%;
}

/* ### 180823_수정 */
.container .section > .shop .bottom > ul > li > a .img_box {
  /* width: 100%; */
  width: auto;
  /* height: 5.28rem; */
  height: 100%;
}
/* ### 180823_수정 */
.container .section > .shop .bottom > ul > li > a .card_img {
  /* width: 6.06rem; */
  width: 8rem;
  /* height: 3.52rem; */
  height: 4.6645rem;
  border-radius: 0.45rem;
  /* box-shadow: 0.1rem 0.1rem 0.3rem rgba(0, 0, 0, 0.3); */
}
/* ### 180823_수정 */
.container .section > .shop .bottom > ul > li > a .content_box {
  /* padding: 0.72rem 0.5rem 0.61rem; */
  padding: 0.72rem 0.9rem 0.61rem;
}
.container .section > .shop .bottom > ul > li > a .content_box .card_name {
  font-size: 0.67rem;
}
/* ### 180823_수정 */
.container .section > .shop .bottom > ul > li > a .content_box .price .card_dc {
  position: relative;
  margin-right: 0.5rem;
  font-weight: 300;
  font-size: 0.56rem;
  /* color: #AAAAAA; */
  color: #CFD0D8;
  text-decoration-line: line-through;
}
/* ### 180823_추가 */
.container .section > .shop .bottom > ul > li > a .content_box .price .card_price {
  font-size: 0.83rem;

  color: #21D670;
}
/* ### 180823_수정 */
.container .section > .shop .bottom > ul > li:nth-child(odd) {
  /* margin-right: 0.27rem; */
}
.container .section > .history .top ul {
  padding: 1.1rem 1.4rem;
}
.container .section > .history .top ul li {
  width: 7.78rem;
  height: 2.22rem;
  border-radius: 2em 2em 2em 2em;
  box-sizing: border-box;
  border: 0.08rem solid #CCCCCC;
  transition: all .7s;
}

/* ### 180823_추가 */
.container .section > .history .top ul li:last-child {
    /* display: none;  */
}

.container .section > .history .top ul li a {
  width: 100%;
  height: 100%;
}
.container .section > .history .top ul li a .icon_check {
  opacity: 0;
  margin-right: -0.83rem;
}
.container .section > .history .top ul li a p {
  font-size: 0.67rem;
  color: #CCCCCC;
}
/* ### 180823_수정 */
.container .section > .history .top ul li.on {
  border-style: none;
  /* background-color: #FF7A70; */
  background-color: #434343;
}
.container .section > .history .top ul li.on a .icon_check {
  opacity: 1;
  margin-right: 0.5rem;
}
.container .section > .history .top ul li.on a p {
  font-weight: bold;
  color: #fff;
}
/* ### 180823_추가 (display:none) */
.container .section > .history .top ul > p {
  font-size: 0.67rem;
  color: #CCCCCC;
}
.container .section > .history .bottom > ol {
  /* 공통 */
}
.container .section > .history .bottom > ol > li {
  display: none;
}
.container .section > .history .bottom > ol > li .input_box {
  margin: 1.3rem auto 0.95rem;
}
.container .section > .history .bottom > ol > li .input_box .select_group {
  position: relative;
  width: 13.6rem;
  height: 100%;
}
.container .section > .history .bottom > ol > li .input_box .select_group input {
  width: 13rem;
}
.container .section > .history .bottom > ol > li .input_box .select_group input::-webkit-input-placeholder {
  font-size: 0.72rem;
  color: #000;
}
.container .section > .history .bottom > ol > li .input_box .select_group > .search_list {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  background-color: #F7F7F7;
}
.container .section > .history .bottom > ol > li .input_box .select_group > .search_list li {
  width: 100%;
  height: 2.78rem;
  border-top: 0.05rem solid #EEEEEE;
}
.container .section > .history .bottom > ol > li .input_box .select_group > .search_list li a {
  padding-left: 0.5rem;
  height: 100%;
  font-size: 0.67rem;
  color: #333333;
}
.container .section > .history .bottom > ol > li .card_info_list {
  background-color: #fff;
}
.container .section > .history .bottom > ol > li .card_info_list > ul > li {
  padding: 0.61rem 1.11rem 0.72rem;
  border-bottom: 0.03rem solid #EEEEEE;
}
.container .section > .history .bottom > ol > li .card_info_list > ul > li a {
  width: 100%;
  height: 100%;
}
.container .section > .history .bottom > ol > li .card_info_list > ul > li a ol li p {
  line-height: 0.89rem;
  font-weight: 300;
  font-size: 0.67rem;
  color: #333333;
}
.container .section > .history .bottom > ol > li .card_info_list > ul > li a ol li .h5 {
  margin-right: 0.3rem;
}
.container .section > .history .bottom > ol > li .card_info_list > ul > li a > p {
  border-radius: 2em 2em 2em 2em;
  padding: 0.25rem 0.7rem 0.2rem;
  font-size: 0.56rem;
  font-weight: bold;
}
.container .section > .history .bottom > ol > li .card_info_list > ul > li a > .new {
  border: 0.09rem solid #FF7A70;
  color: #FF7A70;
}
.container .section > .history .bottom > ol > li .card_info_list > ul > li a > .cancel {
  border: 0.09rem solid #CCCCCC;
  color: #CCCCCC;
}
.container .section > .history .bottom > ol > li .card_info_list > ul > li a > .payment {
  border: 0.09rem solid #333333;
  color: #333333;
}
.container .section > .history .bottom > ol > li .card_info_list > .btn_list_more {
  width: 100%;
  height: 2.7rem;
}
.container .section > .history .bottom > ol > li .card_info_list > .btn_list_more a {
  width: 100%;
  height: 100%;
}
.container .section > .history .bottom > ol > li .card_info_list > .btn_list_more a p {
  margin-right: 0.4rem;
  font-weight: bold;
  font-size: 0.67rem;
  color: #333333;
}
.container .section > .history .bottom > ol > li .card_info_list > .btn_list_more a .icon_more {
  margin-top: -0.4rem;
}
.container .section > .history .bottom > ol > .send_history > .card_info_list > ul > li {
  padding: 1.3rem 1.11rem 1.11rem;
}
.container .section > .history .bottom > ol > .send_history > .card_info_list > ul > li > a {
  width: 100%;
  height: 100%;
}
/* 공통 */
.top {
  width: 88%;
  margin: 0 auto;
  margin-bottom: 1.2rem;
  padding-top: 2.29rem;
}
.top p {
  font-size: 0.78rem;
  line-height: 0.97rem;
}
/* ### 180823_추가 */
.top .has_card_text {
  display: none !important;
}
/* ### 180824_수정 */
.top .no_card_text {
  /* display: none; */
  display: none !important;
}
/* ### 180823_추가 */
.top .h2 {
  /* font-size: 1.11rem; */
  font-size: 1.21rem;

  margin-bottom: 0.52rem;

  text-align: center;
  color: #21D670;
}
/* main_add_card.html , gift_card_link.html*/
.container.add_card,
.container.link_card {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding-top: 2.78rem;
  background-color: #fff;
}
.enter_group input {
  text-align: center;
}
.enter_group p {
  font-size: 1.1rem;
}
/* modal */
.modal_swiper {
  display: none;
}
.modal_add_card {
  display: none;
  background-color: #fff;
}
/* history popup */
.history_popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.history_popup section .icon_close {
  top: 0.1rem;
}
.history_popup section .info_box {
  position: relative;
  width: 17.8rem;
  margin-top: 1.5rem;
  background-color: #fff;
  /* send detail */
  /* buy detail */
}
.history_popup section .info_box > ul {
  padding: 2.4rem 0 0 1.16rem;
}
.history_popup section .info_box > ul > li {
  margin-bottom: 1rem;
}
.history_popup section .info_box > ul > li > p {
  font-weight: lighter;
  font-size: 0.67rem;
  color: #333333;
}
.history_popup section .info_box > ul > li .title {
  margin-bottom: 0.1rem;
  font-weight: bold;
  font-size: 0.72rem;
}
.history_popup section .info_box .bottom_side_img {
  width: 16.7rem;
  margin: -3.4rem auto 0;
  justify-content: flex-end;
  border-bottom: 0.14rem solid #333333;
  /* send detail */
  /* buy detail */
}
.history_popup section .info_box .bottom_side_img .img_detail {
  width: 3.3rem;
  height: 3.3rem;
  margin-bottom: -0.14rem;
  margin-right: 0.5rem;
  background-position: 50% 100%;
}
.history_popup section .info_box .bottom_side_img .img_send_detail {
  background-image: url(../images/img_send_detail.png);
}
.history_popup section .info_box .bottom_side_img .img_buy_detail {
  background-image: url(../images/img_buy_detail.png);
}
.history_popup section .info_box .bottom_side_bg {
  position: absolute;
  left: 0;
  bottom: -1.6rem;
  width: 100%;
  min-height: 1.6rem;
}
.history_popup section .info_box .bottom_date {
  justify-content: flex-end;
  padding-top: 0.9rem;
  padding-right: 1.5rem;
}
.history_popup section .info_box .bottom_date p {
  font-size: 0.67rem;
  color: #AAAAAA;
}
.history_popup section .info_box .bottom_price {
  padding: 0.9rem 1.11rem 0;
}
.history_popup section .info_box .bottom_price p {
  font-weight: bold;
  font-size: 0.83rem;
  color: #333333;
}
.history_popup section .info_box .bottom_price .num {
  font-size: 1.11rem;
}
.history_popup section .btn {
  padding: 0.9rem 1.11rem 0.4rem;
}
.history_popup section .btn .btn_cancel {
  width: 100%;
  height: 2.4rem;
  border: 0.14rem solid #000;
  background-color: rgba(255, 255, 255, 0);
  font-size: 0.72rem;
  color: #000;
}
.history_popup section .btn button.btn_cancel:disabled {
  border: 0.14rem solid #DEDEDE;
  color: #DEDEDE;
}