@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/static/pretendard.css");

html,body{
  margin: 0;
  font-family: Pretendard;
  font-size: 3.61vw;
  color: #000;
}
a{         
  text-decoration: none;
  color: #000;
} 
.title-image{ width: 100%; }
.section { padding: 8.33vw 8.33vw 0; }

#promotion{ text-align: center; position: relative;}
.promotion-box{ position: relative; }
#promotion-1 .dimmed-box{
  background-color: rgba(255,255,255,0.5);
  color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 10.67vw;
  display: none;
  align-items: center;
  justify-content: center;
}
#promotion-1.closed .dimmed-box{ display: flex; }
#promotion-1.closed .dimmed-box .closed-badge{
  background-color: #242424;
  color: #fff;
  font-size: 6.4vw;
  font-weight: 800;
  width: 40vw;
  height: 40vw;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-15deg);
}
#promotion .promotion-box{
  background-color: #EDEDED;
  border-radius: 10.67vw;
  padding: 8vw 7.47vw;
  word-break: keep-all;
  color: #222;
  margin-bottom: 8vw;
}
#promotion .event-num{ 
  background-color: #414141;
  display: inline-block; 
  color: #fff; 
  font-size: 4.53vw;
  font-weight: 700; 
  border-radius: 5.33vw; 
  padding: 3.2vw 5.33vw;
}
#promotion .title{
  margin: 5.33vw;
  font-size: 5.6vw;
  font-weight: 800;
}
#promotion .content{
  margin: 3.73vw 8vw;
  padding-bottom: 5.33vw;
  line-height: 140%;
}
#promotion .deeplink-btn{
  background: #009BFA;
  display: block;
  color: #fff;
  padding: 5.06vw 0;
  font-size: 4.27vw;
  font-weight: 700;
  border-radius: 8vw;
  -webkit-tap-highlight-color: transparent;
}
#promotion img{
  width: 50.13vw;
  margin-bottom: 5.33vw;
}

#exchange{ padding-top: 3.89vw; }
#notice{ padding-bottom: 19.44vw; }
#howto .title, #exchange .title{
  font-size: 5vw;
  margin-bottom: 5.56vw;
  font-weight: 300;
}
#howto .arrow{
  width: 16.1vw;
  line-height: 4.31;
  display: inline-flex;           
  align-items: center;
  justify-content: center;
  margin-right: 1.39vw;
}
#howto .content{
  display: flex;
  align-items: center;
  margin-bottom: 5.56vw;
  line-height: 5.06vw;
}
#howto #milk-link-btn{
  background: #17B2AF;
  color: #fff;
  border-radius: 4.17vw;
  padding: 1.67vw 2.78vw;
  font-size: 2.78vw;
  font-weight: 700;
  margin-left: 2.78vw;
  line-height: 3.31vw;
  display: inline-flex;
  align-items: center;
}
.btn-arrow-img{ width: 3.33vw; }
#howto .arrow-text{
  position: absolute;
  color: #fff;
  font-size: 3.33vw;
  font-weight: 800;
  margin-left: -1vw;
}
.arrow-img{ width: 16.1vw; }
#notice{ background-color: #F0F5F8; }
#notice .title{
  font-weight: 700;
  margin-bottom: 5.56vw;
}
ul{ 
  margin: 0 0 8.33vw;
  padding: 0 0 0 5.56vw;
}
li{ 
  margin: 2.78vw 0;
  line-height: 4.64vw;
  word-break: keep-all;
 }
#notice .contact-list{
  list-style: none;
  padding: 0;
}
#notice .event-notice-2{
  margin-bottom: 8vw;
}
#notice .contact-list li{ margin: 1.39vw; }
#bottom-btn{
  position: fixed;
  bottom: 5.56vw;
  width: 83.3vw;
  background: #000;
  font-size: 3.89vw;
  border-radius: 4.17vw;
  text-align: center;
  color: #06FDF8;
  display: block;
  margin: auto 0; 
  padding: 4.72vw;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}