/* @import url(//cdn.jsdelivr.net/font-notosans-kr/1.0.0-v1004/NotoSansKR-2350.css); */
@import url("https://fonts.googleapis.com/css?family=Lato:300i,400,400i,700,700i,900,900i|Noto+Sans+KR:400,500,700,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Arapey&display=swap");

/* 본고딕 웹폰트 가져오기 180124 morenvy.com */
/* Noto Sans KR (korean) http://www.google.com/fonts/earlyaccess */
@font-face {
   font-family: "Noto Sans KR";
   font-style: normal;
   font-weight: 100;
   src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff2) format("woff2"),
      url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff) format("woff"),
      url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.otf) format("opentype");
}

@font-face {
   font-family: "Noto Sans KR";
   font-style: normal;
   font-weight: 300;
   src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff2) format("woff2"),
      url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff) format("woff"),
      url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf) format("opentype");
}

@font-face {
   font-family: "Noto Sans KR";
   font-style: normal;
   font-weight: 400;
   src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2) format("woff2"),
      url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff) format("woff"),
      url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf) format("opentype");
}

@font-face {
   font-family: "Noto Sans KR";
   font-style: normal;
   font-weight: 500;
   src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2) format("woff2"),
      url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff) format("woff"),
      url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) format("opentype");
}

@font-face {
   font-family: "Noto Sans KR";
   font-style: normal;
   font-weight: 700;
   src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff2) format("woff2"),
      url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff) format("woff"),
      url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf) format("opentype");
}

@font-face {
   font-family: "Noto Sans KR";
   font-style: normal;
   font-weight: 900;
   src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff2) format("woff2"),
      url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff) format("woff"),
      url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.otf) format("opentype");
}

.touch-active {
   transition: background 0.15s, opacity 0.15s, transform 0.15s !important;
   box-shadow: none;
   opacity: 0.8;
   transform: scale(0.99);
}

/*******************************/
/* 기존 */
/*******************************/
/* *{
  font-family: 'Lato', sans-serif;
  font-family: 'Noto Sans KR';
} */
* {
   margin: 0;
   padding: 0;
   letter-spacing: -0.02em;
}

.kfs {
   font-family: "Noto Sans KR";
   /* font-weight: bold; */
}

.efs {
   font-family: "Arapey", serif;
   letter-spacing: 0;
   /* font-weight: bold; */
   /* letter-spacing: 0em !important; */
}

a,
a:link,
a:hover,
a:visited {
   color: black;
   text-decoration: none;
}

ul,
li {
   padding: 0;
   margin: 0;
   list-style: none;
}

html {
   scroll-behavior: smooth;
   width: 100%;
   height: 100%;
   font-family: NotoSansKR, sans-serif !important;
   font-size: 10px;
   background: #f7f7f7;
}

body {
   background-color: white;
   position: relative;
   width: 100%;
   height: 100%;
}

img {
   /* width: 100%;
  vertical-align: top;
  min-width: initial; */
}

p.no-data {
   font-size: 20px !important;
   font-weight: bold !important;
   color: red !important;
   margin: 0 !important;
}

/*******************************/
/* SPLASH */
/*******************************/
#splash {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 300;
   /* pointer-events: none; */
   background: rgba(255, 255, 255, 0.8);
}

.def {
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   background: linear-gradient(#ffffff, #f1f1f1);
}

.def::before {
   content: "";
   width: 20px;
   height: 20px;
   background-image: url(../../../img/mobile/loading.png);
   background-repeat: no-repeat;
   background-position: center;
   background-size: contain;
   opacity: 0.3;
   animation: loading-spin 1.3s ease infinite;
}

@keyframes loading-spin {
   100% {
      transform: rotate(360deg);
   }
}

#splash .cont {
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
}

#splash i {
   color: #5d0682;
   font-size: 30px;
   animation-duration: 0.7s;
}

#splash .toast {
   width: 230px;
   min-height: 14px;
   position: fixed;
   left: 0px;
   right: 0px;
   top: 50%;
   margin: 0 auto;
   background-color: #292929;
   color: #eeeeee;
   font-size: 14px;
   padding: 13px;
   text-align: center;
   border-radius: 7px;
   -webkit-box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 0.62);
   -moz-box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 0.62);
   box-shadow: 0px 0px 8px 0px rgba(56, 56, 56, 0.62);
   /* display: none; */
   z-index: 9999;
   letter-spacing: 0;
}

/*******************************/
/* 신규 */
/*******************************/
#app {
   position: relative;
   width: 100%;
   height: 100%;
   background-color: transparent;
}

#app .covers {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 200;
   max-width: 2200px;
   margin: 0 auto;
   pointer-events: none;
}

#app .covers .cover {
   pointer-events: initial;
}

#app .scene .content {
   overflow-x: hidden;
}

#app .scene {
   transition: padding 0.2s ease;
   display: none;
   /* padding-top: 124px; */
   padding-top: 78px;
   width: 100%;
   /* overflow-y: auto;
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px; */
   background: white;
}

/*공통 Toast UI*/
#toast {
   max-width: 320px;
   min-width: 200px;
   min-height: 14px;
   border-radius: 10px;
   position: fixed;
   left: 0px;
   right: 0px;
   bottom: 48px;
   margin: 0 auto;
   background: #2d2f30;
   color: white;
   font-family: nbg;
   font-size: 14px;
   padding: 15px 6px;
   text-align: center;
   -webkit-box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 0.62);
   -moz-box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 0.62);
   box-shadow: 0px 0px 8px 0px rgba(56, 56, 56, 0.62);
   display: none;
   z-index: 9999;
   line-height: 1.5;
}

.center-2200 {
   position: absolute;
   left: 50%;
   width: 2200px;
   height: 100%;
   margin-left: -1100px;
}

:focus {
   outline-width: 0px;
}

.popup {
   position: absolute !important;
   top: 0 !important;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 202;
}

.t0 {
   font-size: 28px;
   color: black;
   font-weight: 600;
   display: inline;
}

.t1 {
   font-size: 22px;
   color: #0f0f0f;
   font-weight: 600;
   display: inline;
}

.t2 {
   font-size: 18px;
   color: black;
   font-weight: 700;
   display: inline;
}

.t3 {
   font-size: 16px;
   color: black;
   font-weight: 500;
   display: inline;
}

.t4 {
   font-size: 14px;
   color: black;
   font-weight: 700;
   display: inline;
}

.act {
   color: #247ae6;
   font-weight: 400;
   /* background: #2D3A42; */
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 15px;
   height: 30px;
   padding: 0 10px;
   text-decoration: underline;
   -webkit-user-select: none;
   cursor: pointer;
}
.ellipsis {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
}

svg {
   position: absolute;
   z-index: -1;
   top: 0;
}

.act:hover {
   background: rgba(198, 212, 230, 0.16);
}

/* MAIN */

#main .banners {
   margin-left: 50%;
   width: 1920px;
   transform: translateX(-960px);
}

#main .banners .swiper-container {
}

#main .banners .swiper-wrapper {
}

#main .banners:hover .sw-arrow {
   opacity: 1;
}
#main .banners .sw-arrow {
   opacity: 0;
   transition: opacity 0.2s ease;
   background-image: none;
}
#main .banners .sw-arrow.swiper-button-prev {
   left: 30px;
}
#main .banners .sw-arrow.swiper-button-next {
   right: 30px;
}
#main .banners .swiper-slide {
   cursor: pointer;
}

/* #main .banners .swiper-slide::before {
  content: '';
  display: inline-block;
  margin-top: 374px;
} */
#main .banners .swiper-slide .item:hover {
   /* transform: scale(1.02); */
}
#main .banners .swiper-slide .banner-img {
}
#main .banners .swiper-slide .item {
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;

   background-repeat: no-repeat;
   background-size: cover;
   background-position: center center;

   /* transition: transform 2.0s ease; */
   cursor: pointer;
}

#main .banners .pg {
   position: absolute;
   bottom: 5px;
   z-index: 1;
   left: 0;
   right: 0;
   /* margin: 0 auto; */
   text-align: center;
}

#main .banners .pg .swiper-pagination-bullet {
}

#main .banners .pg .swiper-pagination-bullet-active {
   background: white;
}

/* 카테고리 */
#main .cates {
   position: relative;
   /* padding: 16px 0; */
   background-color: #f6f7f8;
}

#main .cates .cate-def {
   display: inline-block;
   width: 100%;
}

#main .cates .cate-def::before {
   content: "";
   margin-top: 30%;
   width: 100%;
   display: inline-block;
}

#main .cates .swiper-slide {
   transition: opacity 0.57s ease;
}

#main .cates .swiper-container {
   padding: 0 60px;
   max-width: 1192px;
}
#main .cates .sw-arrow {
   background-image: none;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 40px;
   font-size: 35px;
   z-index: 200;
   color: #cfd1d3;
}
#main .cates .sw-arrow.swiper-button-prev {
   left: 0px;
}
#main .cates .sw-arrow.swiper-button-next {
   right: 0px;
}

.box-wrapper:last-child {
   padding-bottom: 158px;
}

.box-wrapper:nth-child(even) {
   background: #f7f7f7;
}

.box-wrapper {
   /* padding: 10px; */
   background: white;
   padding-top: 80px;
   padding-bottom: 106px;
}

.box-wrapper .head {
   max-width: 1192px;
   margin: 0 auto;

   text-align: center;
}

.box-wrapper .cont {
   max-width: 1192px;
   margin: 0 auto;
   margin-top: 36px;
}

/* 금주핫딜 */
#main .hot-deal .cont {
   position: relative;
   max-width: 1332px;
}

#main .hot-deal .cont .sw-arrow {
   background-image: none;
   top: 38%;
}
#main .hot-deal .cont .swiper-container {
   width: 1192px;
   /* border: 1px solid red; */
}
#main .hot-deal .cont > .swiper-container > .swiper-wrapper {
   /* padding: 0 10px; */
}

/* 키워드 */
#main .keyword .head {
   text-align: left;
}

#main .keyword ul {
   display: inline-block;
   width: 100%;
}

#main .keyword li {
   float: left;
   width: 283px;
   height: 137px;
   margin-right: 20px;
   position: relative;
   cursor: pointer;
}

#main .keyword li:last-child {
   margin-right: 0px;
}

#main .keyword li .item-wrapper {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   /* transform: translate(-50%, -50%); */
   background-repeat: no-repeat;
   background-position: center top;
   background-size: cover;
}

#main .keyword li .item-wrapper .item {
   position: relative;
   width: 100%;
   height: 100%;
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center center;
}

#main .keyword li:hover .cov {
   text-decoration: underline;
}

#main .keyword li .item .cov {
   width: 100%;
   height: 100%;
   /* background: rgba(0, 0, 0, 0.51); */
   display: flex;
   align-items: center;
   justify-content: center;
   color: white;
   font-weight: 700;
   font-size: 18px;
}

/* 금액대별 상품 */

#main .price-order .head {
   text-align: left;
}
#main .price-order .cont {
   position: relative;
}

#main .price-order .cont::after {
   content: "";
   position: absolute;
   right: 0;
   top: 0;
   bottom: 0;
   width: 20%;
   height: 37px;
   z-index: 1;
   pointer-events: none;
   background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
}

#main .price-order .tags {
   white-space: nowrap;
   overflow-x: auto;
   padding: 0 10px;
}

#main .price-order .tags li.active {
   color: #6a0595;
   font-weight: 700;
}

#main .price-order .tags li.active::before {
   height: 5px;
   background: #5d0682;
}

#main .price-order .tags li:hover {
   color: #6a0595;
   font-weight: 700;
}
#main .price-order .tags li {
   position: relative;
   height: 47px;
   font-size: 17px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   /* padding: 0 13px; */
   width: 115px;
   color: #8f8f8f;
   cursor: pointer;
}

#main .price-order .tags li::before {
   content: "";
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 1px;
   background: #dddddd;
}

#main .price-order .list {
   display: inline-block;
   margin-top: 5px;
   padding: 0 7px;
   width: 100%;
}

#main .price-order .list ul {
   display: inline-block;
   width: 100%;
}

#main .price-order .list.disable-all .i-product {
   display: none;
}

#main .price-order .list .more:hover {
   opacity: 0.8;
}
#main .price-order .list .more {
   font-size: 18px;
   height: 60px;
   width: 283px;
   color: #373737;
   border: 1px solid #cbcbcb;
   margin: 0 auto;
   margin-top: 66px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
}

#main .price-order .list .more i {
   margin-left: 10px;
}

/* #main .price-order .list.disable-all .i-product:nth-child(6),
#main .price-order .list.disable-all .i-product:nth-child(5), */
#main .price-order .list.disable-all .i-product:nth-child(4),
#main .price-order .list.disable-all .i-product:nth-child(3),
#main .price-order .list.disable-all .i-product:nth-child(2),
#main .price-order .list.disable-all .i-product:nth-child(1) {
   display: inline-block;
}
/* #main .price-order .list .i-product:last-child {
  margin-right: 0px;
} */
#main .price-order .list .i-product {
   display: inline-block;
   /* float: left; */
   width: 25%;
   padding: 0 10px;
   vertical-align: top;
}

/* #main .price-order .swiper-wrapper {
  padding: 0 10px;
} */

/* 레시피 */
#main .recipe {
}
#main .recipe .cont {
   position: relative;
   overflow: hidden;
   max-width: 1332px;
}

#main .recipe .swiper-container {
   /* width: 70%; */
   width: 1192px;
}

#main .recipe .cont .sw-arrow {
   background-image: none;
   top: 38%;
}

#main .recipe .pg {
   text-align: center;
   margin-top: 42px;
}
#main .recipe .pg .swiper-pagination-bullet {
   margin: 0 10px;
   background: #c5c5c5;
   opacity: 1;
   cursor: pointer;
}

#main .recipe .pg .swiper-pagination-bullet-active {
   background: #5d0682;
   opacity: 1;
}

#main .recipe .swiper-wrapper {
}

#main .recipe .swiper-slide {
   background: white;
   cursor: pointer;
}

#main .recipe .swiper-slide .thumb {
   position: relative;
   overflow: hidden;
}
#main .recipe .swiper-slide .thumb:hover .thumb-img {
   transform: scale(1.05);
}
#main .recipe .swiper-slide .thumb .thumb-img {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;

   background-repeat: no-repeat;
   background-position: center center;
   background-size: cover;
   transition: transform 1s ease;
}

#main .recipe .swiper-slide .thumb::before {
   content: "";
   display: inline-block;
   margin-top: 100%;
}

#main .recipe .swiper-slide .info {
   padding: 28px 23px;
   /* height: 95px; */
   min-height: 136px;
}

#main .recipe .swiper-slide .info .name {
   font-size: 18px;
   font-weight: 500;
   color: #0f0f0f;
}

#main .recipe .swiper-slide .info .sub-name {
   margin-top: 10px;
   font-size: 16px;
   font-weight: 400;
   color: #8f8f8f;
}

/* 웨딩안내서 */
#main .wedding-guide .cont {
   width: 2404px;
   /* margin-left: 1202px;
  transform: translateX(-50%); */
   margin-left: 50%;
   transform: translateX(-1202px);
   max-width: inherit;
}

#main .wedding-guide:hover .sw-arrow {
   opacity: 1;
}
#main .wedding-guide .sw-arrow {
   opacity: 0;
   transition: opacity 0.2s ease;
   background-image: none;
   width: 68px;
   height: 68px;
   margin: -75px;
}
#main .wedding-guide .sw-arrow.swiper-button-prev {
   left: 680px;
}
#main .wedding-guide .sw-arrow.swiper-button-next {
   right: 680px;
}
#main .wedding-guide .swiper-container {
   /* width: 788px; */
   /* overflow: visible; */
}

#main .wedding-guide .swiper-wrapper {
   padding: 0 10px;
}

#main .wedding-guide .swiper-slide {
   background: white;
}

#main .wedding-guide .swiper-slide .thumb {
   position: relative;
   background-repeat: no-repeat;
   background-position: center center;
   background-size: cover;
   cursor: pointer;
   overflow: hidden;
}
#main .wedding-guide .swiper-slide .thumb:hover .thumb-img {
   transform: scale(1.02);
}
#main .wedding-guide .swiper-slide .thumb .thumb-img {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;

   background-repeat: no-repeat;
   background-position: center center;
   background-size: cover;
   transition: transform 1s ease;
}

#main .wedding-guide .swiper-slide .thumb::before {
   content: "";
   display: inline-block;
   margin-top: 60%;
}

#main .wedding-guide .swiper-slide .name {
   color: #0f0f0f;
   font-weight: 500;
   font-size: 18px;
   margin-top: 16px;
   word-break: break-all;
}

#main .wedding-guide .swiper-slide .sub-name {
   color: #8f8f8f;
   margin-top: 7px;
   font-size: 16px;
}

.svg path {
   display: none;
}

/* PAGE */
.pg-list {
   margin-top: 90px;
   display: inline-block;
   width: 100%;
   text-align: center;
}

.pg-list .pg-item.active {
   background-color: #808182;
   color: white;
}

.pg-list .pg-item {
   width: 35px;
   height: 35px;
   border-radius: 50%;
   /* border: 1px solid red; */
   color: #808182;
   margin-right: 16px;

   display: inline-flex;
   align-items: center;
   justify-content: center;

   font-size: 18px;
   font-weight: 500;

   cursor: pointer;
}

.admin-link {
   position: absolute;
   top: -40px;
   right: -20px;

   width: 60px;
   height: 60px;
   border-radius: 50%;

   display: flex;
   align-items: center;
   justify-content: center;

   z-index: 9999;
}

.admin-link a {
   cursor: pointer;
}
.admin-link a:hover i {
   transform: rotate(360deg);
}
.admin-link a:hover + .info {
   opacity: 1;
}
.admin-link i {
   font-size: 32px;
   color: red;
   transition: transform 1.2s ease;
}

.admin-link .info {
   opacity: 0;
   /* opacity: 1; */
   transition: opacity 0.2s ease;
   padding: 0 16px;
   display: flex;
   align-items: center;
   justify-content: center;
   height: 30px;
   font-size: 10px;
   border-radius: 15px;
   position: absolute;
   top: 52px;
   left: 0px;
   white-space: nowrap;
   background: black;
   color: white;
   box-shadow: 2px 2px 10px rgb(0 0 0 / 40%);
   pointer-events: none;
}