@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

.container {
  padding: 2%;
  background: #e8e8e8;
}

.container header {
  width: 100%;
  height: 260px;
  position: relative;
  background: #fff;
  margin: 20px 0;
}

.container header h1 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 50px;
  background: url("../image/logo_text.png") no-repeat center center;
  background-size: contain;
  text-indent: -9999px;
  transition: all 0.5s;
}

.container .wrapper nav {
  width: 100%;
  background: #fff;
  position: relative;
}

.container .wrapper nav .menu {
  display: flex;
}

.container .wrapper nav .menu li {
  width: 100px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-weight: bold;
  transition: all 0.5s;
  cursor: pointer;
}

.container .wrapper nav .menu li .sub {
  position: absolute;
  left: 0;
  width: 100%;
  background: #464545;
}

.container .wrapper nav .menu li .sub ul {
  display: flex;
}

.container .wrapper nav .menu li .sub ul li {
  font-weight: normal;
  color: #fff;
}

.container .wrapper nav .menu li .coffeeDrink-sub,
.container .wrapper nav .menu li .dessert-sub,
.container .wrapper nav .menu li .food-sub,
.container .wrapper nav .menu li .goods-sub {
  display: none;
}

.container .wrapper .coffeeDrink,
.container .wrapper .dessert,
.container .wrapper .food,
.container .wrapper .goods {
  display: none;
}

.container .wrapper .newWrap {
  margin-bottom: 300px;
}

.container .wrapper .newWrap,
.container .wrapper .coffeeWrap,
.container .wrapper .drinkWrap,
.container .wrapper .teeWrap,
.container .wrapper .wholecakeWrap,
.container .wrapper .pieceofcakeWrap,
.container .wrapper .macaronWrap,
.container .wrapper .cookieAndsnackWrap,
.container .wrapper .foodWrap,
.container .wrapper .goodsWrap {
  display: flex;
  flex-wrap: wrap;
  padding: 1%;
  margin-top: 50px;
}

.container .wrapper .newWrap li,
.container .wrapper .coffeeWrap li,
.container .wrapper .drinkWrap li,
.container .wrapper .teeWrap li,
.container .wrapper .wholecakeWrap li,
.container .wrapper .pieceofcakeWrap li,
.container .wrapper .macaronWrap li,
.container .wrapper .cookieAndsnackWrap li,
.container .wrapper .foodWrap li,
.container .wrapper .goodsWrap li {
  width: 18%;
  margin: 1%;
  height: auto;
  padding-bottom: 20px;
  box-sizing: border-box;
  background: #fff;
  padding-top: 20px;
  transition: all 0.5s;
  cursor: pointer;
}

.container .wrapper .newWrap li .itemName,
.container .wrapper .coffeeWrap li .itemName,
.container .wrapper .drinkWrap li .itemName,
.container .wrapper .teeWrap li .itemName,
.container .wrapper .wholecakeWrap li .itemName,
.container .wrapper .pieceofcakeWrap li .itemName,
.container .wrapper .macaronWrap li .itemName,
.container .wrapper .cookieAndsnackWrap li .itemName,
.container .wrapper .foodWrap li .itemName,
.container .wrapper .goodsWrap li .itemName {
  font-weight: normal;
  font-size: 16px;
  margin: 10px;
  height: 40px;
  padding-top: 20px;
  transition: all 0.5s;
}

.container .wrapper .newWrap li .itemPrice,
.container .wrapper .coffeeWrap li .itemPrice,
.container .wrapper .drinkWrap li .itemPrice,
.container .wrapper .teeWrap li .itemPrice,
.container .wrapper .wholecakeWrap li .itemPrice,
.container .wrapper .pieceofcakeWrap li .itemPrice,
.container .wrapper .macaronWrap li .itemPrice,
.container .wrapper .cookieAndsnackWrap li .itemPrice,
.container .wrapper .foodWrap li .itemPrice,
.container .wrapper .goodsWrap li .itemPrice {
  margin: 10px;
  transition: all 0.5s;
}

.container .wrapper .newWrap li .itemImage,
.container .wrapper .coffeeWrap li .itemImage,
.container .wrapper .drinkWrap li .itemImage,
.container .wrapper .teeWrap li .itemImage,
.container .wrapper .wholecakeWrap li .itemImage,
.container .wrapper .pieceofcakeWrap li .itemImage,
.container .wrapper .macaronWrap li .itemImage,
.container .wrapper .cookieAndsnackWrap li .itemImage,
.container .wrapper .foodWrap li .itemImage,
.container .wrapper .goodsWrap li .itemImage {
  width: 80px;
  height: 80px;
  margin: 0 auto;
  padding: 20px;
  border-radius: 50%;
  transition: all 0.5s;
}

.container .wrapper .drinkWrap,
.container .wrapper .teeWrap,
.container .wrapper .pieceofcakeWrap,
.container .wrapper .macaronWrap,
.container .wrapper .cookieAndsnackWrap {
  display: none;
}

.container footer {
  display: flex;
  justify-content: space-between;
  width: 100%;
  background: #dadada;
  padding-bottom: 20px;
}

.container footer .listWrapper {
  width: 60%;
  height: 320px;
}

.container footer .listWrapper .list-top {
  height: 40px;
  line-height: 40px;
  position: relative;
  text-align: center;
}

.container footer .listWrapper .list-top .shop-wrap {
  position: absolute;
  width: 25%;
  background: #c72929;
}

.container footer .listWrapper .list-top .shop-wrap .shopwrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  transition: all 0.5s;
}

.container footer .listWrapper .list-top .shop-wrap .shopwrapper .shoptxt {
  font-weight: bold;
  color: #fff;
}

.container footer .listWrapper .list-top .shop-wrap .shopwrapper .icon {
  text-indent: -9999px;
  width: 30px;
  height: 30px;
  background: url("../image/hall.png") no-repeat center center;
  background-size: contain;
  filter: invert(100%) sepia(0%) saturate(19%) hue-rotate(341deg) brightness(105%) contrast(106%);
  transition: all 0.5s;
}

.container footer .listWrapper .list-top h2 {
  width: 74%;
  margin-left: 25%;
  font-size: 20px;
  background: #fff;
  transition: all 0.5s;
}

.container footer .listWrapper .list-top h2::before {
  position: absolute;
  content: "";
  display: inline-block;
  width: 0px;
  height: 0px;
  left: 25%;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 20px solid #c72929;
  /* 화살표 */
}

.container footer .listWrapper .listWrap {
  width: 99%;
  height: calc(100% - 40px);
  background: #f8f7f6;
  overflow: scroll;
}

.container footer .listWrapper .listWrap .itemList li {
  padding: 10px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 10px;
  transition: all 0.5s;
}

.container footer .listWrapper .listWrap .itemList li button {
  width: 20px;
  height: 20px;
}

.container footer .manual {
  width: 40%;
}

.container footer .manual .countWrap {
  background: #fff;
  padding: 20px 10px;
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}

.container footer .manual .countWrap p {
  font-size: 18px;
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
  transition: all 0.5s;
}

.container footer .manual .countWrap p:nth-child(1) span:nth-child(2):after {
  content: " 개";
}

.container footer .manual .countWrap p:nth-child(2) span:nth-child(2):after {
  content: " 원";
}

.container footer .manual .payWrap {
  text-align: center;
}

.container footer .manual .payWrap .trash,
.container footer .manual .payWrap .bacord {
  width: 25%;
  height: 60px;
  text-indent: -9999px;
  cursor: pointer;
  transition: all 0.5s;
}

.container footer .manual .payWrap .pay {
  width: 75%;
  height: 120px;
  line-height: 120px;
  cursor: pointer;
  float: right;
  background: #c72929;
  color: #fff;
  font-weight: bold;
  font-size: 20px;
  transition: all 0.5s;
}

.container footer .manual .payWrap .trash {
  float: left;
  background: #949393 url("../image/trash.png") no-repeat center center;
  background-size: 25%;
  filter: invert(100%) sepia(0%) saturate(19%) hue-rotate(341deg) brightness(105%) contrast(106%);
}

.container footer .manual .payWrap .bacord {
  float: left;
  background: #555555 url("../image/barcode.png") no-repeat center center;
  background-size: 25%;
  filter: invert(100%) sepia(0%) saturate(19%) hue-rotate(341deg) brightness(105%) contrast(106%);
}

.container footer .manual .reset {
  clear: both;
  height: 60px;
  text-align: center;
  color: #fff;
  background: #302f2f;
  line-height: 60px;
  font-weight: bold;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.5s;
}

@media screen and (max-width: 900px) {
  .container .wrapper .newWrap li .itemName,
  .container .wrapper .coffeeWrap li .itemName,
  .container .wrapper .drinkWrap li .itemName,
  .container .wrapper .teeWrap li .itemName,
  .container .wrapper .wholecakeWrap li .itemName,
  .container .wrapper .pieceofcakeWrap li .itemName,
  .container .wrapper .macaronWrap li .itemName,
  .container .wrapper .cookieAndsnackWrap li .itemName,
  .container .wrapper .foodWrap li .itemName,
  .container .wrapper .goodsWrap li .itemName {
    font-size: 14px;
  }
  .container .wrapper .newWrap li .itemPrice,
  .container .wrapper .coffeeWrap li .itemPrice,
  .container .wrapper .drinkWrap li .itemPrice,
  .container .wrapper .teeWrap li .itemPrice,
  .container .wrapper .wholecakeWrap li .itemPrice,
  .container .wrapper .pieceofcakeWrap li .itemPrice,
  .container .wrapper .macaronWrap li .itemPrice,
  .container .wrapper .cookieAndsnackWrap li .itemPrice,
  .container .wrapper .foodWrap li .itemPrice,
  .container .wrapper .goodsWrap li .itemPrice {
    font-size: 15px;
  }
  .container .wrapper .newWrap li .itemImage,
  .container .wrapper .coffeeWrap li .itemImage,
  .container .wrapper .drinkWrap li .itemImage,
  .container .wrapper .teeWrap li .itemImage,
  .container .wrapper .wholecakeWrap li .itemImage,
  .container .wrapper .pieceofcakeWrap li .itemImage,
  .container .wrapper .macaronWrap li .itemImage,
  .container .wrapper .cookieAndsnackWrap li .itemImage,
  .container .wrapper .foodWrap li .itemImage,
  .container .wrapper .goodsWrap li .itemImage {
    width: 60px;
    height: 60px;
  }
}

@media screen and (max-width: 800px) {
  .container footer .listWrapper .listWrap .itemList li {
    font-size: 13px;
  }
  .container footer .listWrapper .listWrap .itemList li button {
    width: 20px;
    height: 20px;
  }
  .container footer .manual .payWrap .trash {
    background: #949393 url("../image/trash.png") no-repeat center center;
    background-size: 40%;
  }
  .container footer .manual .payWrap .bacord {
    background: #555555 url("../image/barcode.png") no-repeat center center;
    background-size: 40%;
  }
}

@media screen and (max-width: 630px) {
  .container .wrapper nav .menu li {
    width: 80px;
    font-size: 14px;
    height: 45px;
    line-height: 45px;
  }
  .container footer .listWrapper .list-top .shop-wrap .shopwrapper .shoptxt {
    font-size: 13px;
  }
  .container footer .listWrapper .list-top .shop-wrap .shopwrapper .icon {
    width: 15px;
    height: 15px;
  }
  .container footer .listWrapper .list-top h2 {
    font-size: 14px;
  }
  .container footer .listWrapper .list-top h2::before {
    left: 24.9%;
  }
  .container footer .listWrapper .listWrap .itemList li {
    font-size: 12px;
  }
  .container footer .listWrapper .listWrap .itemList li button {
    width: 20px;
    height: 20px;
  }
  .container footer .manual .countWrap p span {
    font-size: 14px;
  }
  .container footer .manual .payWrap .pay {
    font-size: 16px;
  }
  .container footer .manual a .reset {
    font-size: 16px;
  }
  .container .wrapper .newWrap li .itemName,
  .container .wrapper .coffeeWrap li .itemName,
  .container .wrapper .drinkWrap li .itemName,
  .container .wrapper .teeWrap li .itemName,
  .container .wrapper .wholecakeWrap li .itemName,
  .container .wrapper .pieceofcakeWrap li .itemName,
  .container .wrapper .macaronWrap li .itemName,
  .container .wrapper .cookieAndsnackWrap li .itemName,
  .container .wrapper .foodWrap li .itemName,
  .container .wrapper .goodsWrap li .itemName {
    font-size: 14px;
  }
  .container .wrapper .newWrap li .itemPrice,
  .container .wrapper .coffeeWrap li .itemPrice,
  .container .wrapper .drinkWrap li .itemPrice,
  .container .wrapper .teeWrap li .itemPrice,
  .container .wrapper .wholecakeWrap li .itemPrice,
  .container .wrapper .pieceofcakeWrap li .itemPrice,
  .container .wrapper .macaronWrap li .itemPrice,
  .container .wrapper .cookieAndsnackWrap li .itemPrice,
  .container .wrapper .foodWrap li .itemPrice,
  .container .wrapper .goodsWrap li .itemPrice {
    font-size: 15px;
  }
  .container .wrapper .newWrap li .itemImage,
  .container .wrapper .coffeeWrap li .itemImage,
  .container .wrapper .drinkWrap li .itemImage,
  .container .wrapper .teeWrap li .itemImage,
  .container .wrapper .wholecakeWrap li .itemImage,
  .container .wrapper .pieceofcakeWrap li .itemImage,
  .container .wrapper .macaronWrap li .itemImage,
  .container .wrapper .cookieAndsnackWrap li .itemImage,
  .container .wrapper .foodWrap li .itemImage,
  .container .wrapper .goodsWrap li .itemImage {
    width: 40px;
    height: 40px;
  }
}

@media screen and (max-width: 520px) {
  .container .wrapper .newWrap li .itemName,
  .container .wrapper .coffeeWrap li .itemName,
  .container .wrapper .drinkWrap li .itemName,
  .container .wrapper .teeWrap li .itemName,
  .container .wrapper .wholecakeWrap li .itemName,
  .container .wrapper .pieceofcakeWrap li .itemName,
  .container .wrapper .macaronWrap li .itemName,
  .container .wrapper .cookieAndsnackWrap li .itemName,
  .container .wrapper .foodWrap li .itemName,
  .container .wrapper .goodsWrap li .itemName {
    font-size: 12px;
  }
  .container .wrapper .newWrap li .itemPrice,
  .container .wrapper .coffeeWrap li .itemPrice,
  .container .wrapper .drinkWrap li .itemPrice,
  .container .wrapper .teeWrap li .itemPrice,
  .container .wrapper .wholecakeWrap li .itemPrice,
  .container .wrapper .pieceofcakeWrap li .itemPrice,
  .container .wrapper .macaronWrap li .itemPrice,
  .container .wrapper .cookieAndsnackWrap li .itemPrice,
  .container .wrapper .foodWrap li .itemPrice,
  .container .wrapper .goodsWrap li .itemPrice {
    font-size: 13px;
  }
  .container .wrapper .newWrap li .itemImage,
  .container .wrapper .coffeeWrap li .itemImage,
  .container .wrapper .drinkWrap li .itemImage,
  .container .wrapper .teeWrap li .itemImage,
  .container .wrapper .wholecakeWrap li .itemImage,
  .container .wrapper .pieceofcakeWrap li .itemImage,
  .container .wrapper .macaronWrap li .itemImage,
  .container .wrapper .cookieAndsnackWrap li .itemImage,
  .container .wrapper .foodWrap li .itemImage,
  .container .wrapper .goodsWrap li .itemImage {
    width: 25px;
    height: 25px;
  }
  .container header h1 {
    height: 40px;
  }
}

@media screen and (max-width: 460px) {
  .container footer .listWrapper .listWrap .itemList li {
    font-size: 10px;
  }
  .container footer .listWrapper .listWrap .itemList li button {
    width: 20px;
    height: 20px;
  }
  .container footer .manual .countWrap p span {
    font-size: 12px;
  }
  .container footer .manual .payWrap .pay {
    font-size: 14px;
  }
  .container footer .manual a .reset {
    font-size: 14px;
  }
  .container .wrapper .newWrap li .itemName,
  .container .wrapper .coffeeWrap li .itemName,
  .container .wrapper .drinkWrap li .itemName,
  .container .wrapper .teeWrap li .itemName,
  .container .wrapper .wholecakeWrap li .itemName,
  .container .wrapper .pieceofcakeWrap li .itemName,
  .container .wrapper .macaronWrap li .itemName,
  .container .wrapper .cookieAndsnackWrap li .itemName,
  .container .wrapper .foodWrap li .itemName,
  .container .wrapper .goodsWrap li .itemName {
    font-size: 10px;
  }
  .container .wrapper .newWrap li .itemPrice,
  .container .wrapper .coffeeWrap li .itemPrice,
  .container .wrapper .drinkWrap li .itemPrice,
  .container .wrapper .teeWrap li .itemPrice,
  .container .wrapper .wholecakeWrap li .itemPrice,
  .container .wrapper .pieceofcakeWrap li .itemPrice,
  .container .wrapper .macaronWrap li .itemPrice,
  .container .wrapper .cookieAndsnackWrap li .itemPrice,
  .container .wrapper .foodWrap li .itemPrice,
  .container .wrapper .goodsWrap li .itemPrice {
    font-size: 11px;
  }
  .container .wrapper .newWrap li .itemImage,
  .container .wrapper .coffeeWrap li .itemImage,
  .container .wrapper .drinkWrap li .itemImage,
  .container .wrapper .teeWrap li .itemImage,
  .container .wrapper .wholecakeWrap li .itemImage,
  .container .wrapper .pieceofcakeWrap li .itemImage,
  .container .wrapper .macaronWrap li .itemImage,
  .container .wrapper .cookieAndsnackWrap li .itemImage,
  .container .wrapper .foodWrap li .itemImage,
  .container .wrapper .goodsWrap li .itemImage {
    width: 15px;
    height: 15px;
  }
}