/*에이드와 베이스는 같은 css를 사용합니다*/

@import "reset.css";
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/pretendardvariable.css');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700&display=swap');
@import url(//fonts.googleapis.com/earlyaccess/jejumyeongjo.css);

@font-face {
  font-family: 'Pretendard-Regular';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

@font-face {
font-family: 'Pretendard Variable';
font-weight: 45 920;
font-style: normal;
font-display: swap;
src: url('../../../packages/pretendard/dist/web/variable/woff2/PretendardVariable.woff2') format('woff2-variations');
}

@font-face {
font-family: 'LotteMartDream';
font-style: normal;
font-weight: 400;
src: url('//cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamMedium.woff2') format('woff2'), url('//cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamMedium.woff') format('woff');
}
@font-face {
font-family: 'LotteMartDream';
font-style: normal;
font-weight: 700;
src: url('//cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamBold.woff2') format('woff2'), url('//cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamBold.woff') format('woff');
}
@font-face {
font-family: 'LotteMartDream';
font-style: normal;
font-weight: 300;
src: url('//cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamLight.woff2') format('woff2'), url('//cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamLight.woff') format('woff');
}

.lottemartdream * {
font-family: 'LotteMartDream', sans-serif;
}



.product-list{
  display: flex;
  margin-top: 1.3vw;
  justify-content: space-between
}
.product-list img{
  width: 2.6vw;
  margin-bottom: 0.5vw !important;
  padding-bottom: 0;
}
.product-list a{
  color: #3e3a39;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.8333vw;
  font-family: 'Noto Sans KR', sans-serif;
  text-align: center;
  width: 6vw;
}

.recipe-list{
  display: flex;
  margin-top: 1.3vw;
  justify-content: space-between
}
.recipe-list a{
 display: none;
}

.cover{
  position: absolute;
  text-align: center;
  color: #9c9c9c;
  z-index: 100;
  width: 12vw;
  height: 12vw;
  border-radius: 90%;
  background: linear-gradient( to bottom, rgba(255, 255, 255, 0), #231815 );
  top: 0;
  opacity: 0;
  cursor: pointer;
}
.cover:hover{
  opacity: 1;
 }
 .cover p{
  margin-top: 5vw;
  line-height: 1.2vw;
  color: #ffffff;
  font-size: 1.0417vw; /*20*/
 }

.recipe-list .recipe-1{
  margin-right: 1vw;
  position: relative;
}

/**/
/**/

.hover-box{
  position: absolute;
  margin: auto;
  width: 5.5vw;
  background-color: #ee7623;
  margin-top: 2vw;
  padding-top: 0.5vw;
  padding-bottom: 0.6vw;
  padding-left: 0.4vw;
  border-radius: 8px;
  display: none;
}
.hover-box p{
  font-size: 0.7292vw;/*14*/
  word-break: keep-all;
  color: #ffffff;
  font-weight: 100;
  line-height: 0.9vw;
  text-align: left;
}


.product-list img:nth-child(1):hover ~ .hover-box{
  display: block;
}
.detail-right-m .product-list a{
  width: auto;
  margin-right: 0;
}