@import url("https://static.milkprotocol.io/css/pretendardvariable-dynamic-subset.css");

html,body {
  margin: 0;
  font-family: Pretendard;
  font-size: 3.61vw;
  background: #2A2A2A;
  color: #fff;
}
a {         
  text-decoration: none;
  color: #000;
} 
img { margin: auto; display: block; }
.section { padding: 8.33vw; }

#title { width: 59.2vw;  margin: 0.93vw auto;}
#title-logo { width: 57.6vw; margin: 4vw auto;}
#title-text { 
  text-align: center; 
  font-size: 4vw;
  font-weight: 600;
  letter-spacing: -0.064px;
  margin: 5.067vw 0 6.67vw;
}
#logo-box-image { width: 100%; margin-bottom: 12vw;}

#main { text-align: center; position: relative; padding: 18.1vw 8.33vw 15.46vw; }
#main .promotion-box {
  position: relative;
  border-radius: 10.67vw;
  padding: 8vw 7.47vw;
  word-break: keep-all;
  color: #222;
  margin-bottom: 8vw;
}
#main .promotion-box .event-num { 
  background-color: #FFF;
  display: inline-block;  
  font-size: 4.53vw;
  font-weight: 700; 
  border-radius: 5.33vw; 
  padding: 3.2vw 5.33vw;
}
#main .promotion-box .title {
  margin: 5.33vw;
  font-size: 5.6vw;
  font-weight: 800;
}
#main .promotion-box .content {
  margin: 3.73vw 0;
  font-size: 3.74vw;
  font-weight: 500;
  line-height: 140%;
}
#main .promotion-box .deeplink-btn, 
#main #promotion-2 .closed-btn {
  background: #000;
  display: block;
  color: #fff;
  padding: 5.06vw 0;
  font-size: 4.27vw;
  font-weight: 700;
  border-radius: 8vw;
  -webkit-tap-highlight-color: transparent;
}
#main .promotion-box .alert { 
  color: #E41D1D;
  font-size: 3.2vw;
  font-weight: 500;
  line-height: 130%;
  margin-bottom: 5.07vw;
 }

#main #promotion-1 { background-color: #FFEE58; }
#main #promotion-1 .event-num { color: #C8B50B; }
#main #promotion-1 img { width: 49.07vw; margin-bottom: 8vw; }
#main #promotion-2 { background-color: #6298FF;}
#main #promotion-2 .event-num { color: #6298FF; }
#main #promotion-2 .alert { color: #AA0A0A; }
#main #promotion-2 img { width: 37.3vw; margin-bottom: 6.4vw; }
#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);
}

#main #promotion-2 .closed-btn {
  background-color: #aaa;
  display: none;
}

#main #promotion-2.closed .closed-btn {
  display: block;
}

#main #promotion-2.closed .deeplink-btn {
  display: none;
}

#main #howto, #main #exchange { text-align: left; }
#main #howto { margin-bottom: 8vw; }
#main #divider { position: relative; width: 100%; height: 0.32vw; background-color: rgba(255, 255, 255, 0.12); margin-bottom: 8vw; }
#main #howto .title, #main #exchange .title {
  font-size: 5vw;
  margin-bottom: 5.56vw;
  font-weight: 300;
}
#main #howto .arrow {
  width: 16.1vw;
  line-height: 4.31;
  display: inline-flex;           
  align-items: center;
  justify-content: center;
  margin-right: 1.39vw;
}
#main #howto .content {
  display: flex;
  align-items: center;
  margin-bottom: 5.56vw;
  line-height: 5.06vw;
}
#main #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; }
#main #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; color: #616161;}
#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;
}