.main_wrap {
  width: 1200px;
  margin: auto;
  height: 1350px;
  position: relative;
  z-index: 2;
  display:flex;
}
.milk_yogurt_cheese{
    width: 100%;
    margin: 0 auto;
    height: 1050px;
    background: #eef8fd;
    border-radius: 10px;
    box-sizing: border-box;
    display:flex;
    flex-direction: column;
    z-index: 1000;
  }
  .milk_yogurt_cheese img{
    margin: 0;
    margin-bottom: 20px;
  }

  .milk_yogurt_cheese ul{
    width: 930px;
    margin: auto;
    display:flex;
    flex-wrap: wrap;
  }

  .milk_yogurt_cheese h2{
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
  }

  .brand_image_wrap{
  margin-left: 24px;
  }

  .milk_yogurt_cheese ul .brand_name{
    display:flex;
    justify-content: center;
    margin-left: 25px;
    margin-bottom: 20px;
  }

  .brand_image_wrap{
    width: 202px;
    height: 202px;
    border-radius: 20px;
    overflow: hidden;

  }
  .brand_image_wrap img{
    border-radius: 20px;
    box-shadow: #d8d8d8 1px 1px 2px;
    box-sizing: border-box;
  }
  .brand_image_wrap img:hover{
    transform: scale(1.1);
    transition: 0.2s;
  }
  .milk_wrap, .yogurt_wrap{
    margin-bottom: 100px;
  }
/* modal */

.modal_background{
  position:fixed;
  width: 100%;
  height: 100%;
  top: 0;
  background: rgba(0,0,0,0.7);
  z-index: 300;
  display:none;
}

.milk_popup_wrap{
  z-index: 400;
  position:relative;
  display: block;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  
}

.milk_popup_wrap h3>img{
  margin-top: 30px;
  width: 170px;
  height: 170px;
}
.milk_popup1_wrap>p{
  margin-bottom: 20px;
}

.milk_popup1{
  width: 600px;
  margin:auto;
}
.milk_popup1_wrap{
  margin-top: 10%;
  width: 600px;
  height: 720px;
  background: #fff;
  border-radius: 20px;
  display:block;
  display:flex;
  align-items: center;
  flex-direction: column;
  position:relative;
}
.milk_popup1_wrap dl{
  display:flex;
  width: 500px;
  flex-wrap: wrap;
  justify-content: center;
}
.milk_popup1_wrap>dl>dt{
  flex-basis: 100%;
  margin-bottom: 50px;
}
.milk_popup1_wrap>dl>dd{
  width: 130px;
  height: 130px;
  margin-bottom: 20px;
  margin-right:20px
}
.milk_popup1_wrap>dl>dd:nth-child(4){
margin-right: 0;
}
.milk_popup1_wrap>dl>dd:nth-child(7){
  margin-right: 0;
  }

.popup_image_wrap img{
  border: 1px #e2e2e2 solid;
  width: 128px;
  height: 128px;
  border-radius: 20px;
}

.popup_name{
  margin:0;
  display:block;
  width:130px;
  height:130px;
  background: rgba(0,0,0,0.4);
  border-radius: 20px;
  position:relative;
  top: -135px;
  display:none
}
.modal_more{
  display:block;
  color:#fff;
  font-weight: bold;
  background: #81cfed;
  padding-top: 5px;
  width: 100px;
  height: 30px;
  border-radius: 10px;
  position:absolute;
  left: 15px;
  top: 50px;
  display:none
}

.popup_pager{
  position:absolute;
  bottom:10px;
  width: 600px;
  margin:auto;
  cursor: pointer;
  display:flex;
  justify-content: baseline;
  justify-content: center;
  gap: 10px;
  font-size: 18px;
}

.popup_pager>a:hover{
  text-decoration: underline;
}
.popup_pager>a:nth-child(1)>img{
  transform: rotate(180deg);
}
.popup_close{
  position:absolute;
  right:20px;
  bottom: 640px;
}