@font-face {
  font-family: "Pretendard";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Thin.woff2") format("woff2");
  font-weight: 100;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraLight.woff2") format("woff2");
  font-weight: 200;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Light.woff2") format("woff2");
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Black.woff2") format("woff2");
  font-weight: 900;
  font-display: swap;
}

.promotion_info_wrap {
  /* display: none; */
  font-family: "Pretendard";
}

/* body.promotion__open .promotion_info_wrap {
  display: block;
} */

.promotion_inner {
  margin: 0 auto;
  max-width: 1520px;
  @media screen and (max-width: 1560px) {
    padding: 0 2rem;
  }
  @media screen and (max-width: 750px) {
    padding: 0 1rem;
  }
}

.promotion_info_visual {
  width: 100%;
  height: 40rem;
  background: url(/college_2016/images/renew/promotion_bg.jpg) no-repeat center center;
  background-size: cover;
  @media screen and (min-width: 1921px) {
    background: url(/college_2016/images/renew/promotion_bg_3600.jpg) no-repeat center center;
    background-size: cover;
  }
  @media screen and (max-width: 750px) {
    background: url(/college_2016/images/renew/promotion_bg_750.jpg) no-repeat center center;
    background-size: cover;
  }
  .visual__desc {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-top: 12.75rem;
    color: #fff;
    @media screen and (max-width: 750px) {
      padding-top: 10.75rem;
    }
    p {
      display: inline-block;
      padding: 0 1rem 0 1rem;
      margin-bottom: 1.5rem;
      height: 2.625rem;
      font-size: 1.375rem;
      background: linear-gradient(93deg, #3884e4 0%, #00459d 100%);
      font-weight: 700;
      letter-spacing: -0.55px;
      line-height: 2.625rem;
      border-radius: 8px;
      @media screen and (max-width: 1280px) {
        height: 3.1875rem;
        font-size: 1.625rem;
        letter-spacing: -0.65px;
        line-height: 3.1875rem;
      }
      @media screen and (max-width: 750px) {
        height: 2.8rem;
        margin-bottom: 1rem;
        font-size: 1.25rem;
        line-height: 2.8rem;
      }
    }
    strong {
      font-size: 7.125rem;
      font-weight: 700;
      line-height: 1.05;
      letter-spacing: -2.85px;
      @media screen and (max-width: 1280px) {
        font-size: 6.25rem;
        letter-spacing: -2.5px;
      }
      @media screen and (max-width: 750px) {
        font-size: 4.25rem;
      }
    }
    span {
      font-size: 4rem;
      letter-spacing: -1.6px;
      @media screen and (max-width: 1280px) {
        font-size: 3.75rem;
        letter-spacing: -1.5px;
      }
      @media screen and (max-width: 750px) {
        font-size: 2.45rem;
      }
    }
  }
}

.promotion_info_event {
  padding: 2.5rem 0;
  background-color: #fff;
  .info_event__list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.875rem;
    @media screen and (max-width: 1360px) {
      gap: 0.875rem;
    }
    @media screen and (max-width: 1280px) {
      grid-template-columns: 1fr;
      gap: 1.875rem;
    }
    @media screen and (max-width: 580px) {
      gap: 1rem;
    }
    > li {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: space-between;
      padding: 1rem 1rem 1.625rem 1rem;
      width: 100%;
      height: 100%;
      max-height: 18.75rem;
      border: 1px solid #ebebeb;
      background-color: #f5f5f5;
      border-radius: 30px;
      overflow: hidden;
      @media screen and (max-width: 1280px) {
        padding: 1.5rem 1.5rem 1rem 1.5rem;
        max-height: inherit;
      }
      @media screen and (max-width: 580px) {
        padding: 1rem 1rem 1.625rem 1rem;
        border-radius: 20px;
      }
	  a {
		display: flex !important;
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-between;
		width: 100%;
		height: 100%;
		z-index: 1;
	  }
      &.qr_item {
        padding: 1.625rem 0.5rem 1.625rem 0.5rem;
        align-items: center;
        @media screen and (max-width: 1280px) {
          padding: 2rem 2rem 1.875rem 2rem;
          flex-direction: row;
          > img {
            width: 6rem;
          }
        }
        @media screen and (max-width: 750px) {
          gap: 0.5rem;
        }
        @media screen and (max-width: 630px) {
          padding: 1rem 1rem 0.9375rem 1rem;
        }
        @media screen and (max-width: 580px) {
          > img {
            width: 3rem;
          }
        }
        .qr_item__desc {
          display: flex;
          flex-direction: column;
          align-items: center;
          img {
            width: 4.5rem;
          }
          @media screen and (max-width: 1280px) {
            flex-direction: row;
            gap: 1rem;
            img {
              width: 6.125rem;
            }
          }
          @media screen and (max-width: 750px) {
            gap: 0.875rem;
          }
          @media screen and (max-width: 580px) {
            gap: 0.5rem;
            img {
              width: 3.0625rem;
            }
          }
        }
        .txt {
          margin: 0.875rem 0 0.5rem 0;
          text-align: center;
          @media screen and (max-width: 1280px) {
            margin: 0;
            text-align: left;
          }
          p {
            padding-bottom: 0.25rem;
            color: #000;
            font-size: 1.125rem;
            font-weight: 700;
            line-height: 1.3;
            letter-spacing: -0.45px;
            @media screen and (max-width: 1280px) {
              font-size: 1.875rem;
              letter-spacing: -0.75px;
            }
            @media screen and (max-width: 750px) {
              font-size: 1.5rem;
            }
            @media screen and (max-width: 580px) {
              padding-bottom: 0;
              font-size: 1.2rem;
            }
          }
          span {
            color: #000;
            font-size: 0.875rem;
            line-height: 1.3;
            letter-spacing: -0.35px;
            @media screen and (max-width: 1280px) {
              font-size: 1.125rem;
              letter-spacing: -0.45px;
            }
            @media screen and (max-width: 750px) {
              font-size: 1rem;
            }
            @media screen and (max-width: 580px) {
              font-size: 0.875rem;
            }
          }
        }
      }
      &.event_bg::after {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 0;
        display: block;
        content: "";
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 16.67%, rgba(0, 0, 0, 0.6) 100%);
        filter: blur(2px);
        @media screen and (max-width: 1280px) {
          background: linear-gradient(180deg, rgba(0, 0, 0, 0) 22.6%, rgba(0, 0, 0, 0.6) 61.24%);
        }
      }
      &.event_bg1 {
        background: url(/college_2016/images/renew/promotion_event_01.jpg) no-repeat;
        background-size: cover;
      }
      &.event_bg2 {
        background: url(/college_2016/images/renew/promotion_event_02.jpg) no-repeat;
        background-size: cover;
      }
      &.event_bg3 {
        background: url(/college_2016/images/renew/promotion_event_03.jpg) no-repeat;
        background-size: cover;
      }
      @media screen and (max-width: 1280px) {
        &.event_bg1 {
          background: url(/college_2016/images/renew/promotion_event_01_m.jpg) no-repeat;
          background-size: cover;
        }
        &.event_bg2 {
          background: url(/college_2016/images/renew/promotion_event_02_m.jpg) no-repeat;
          background-size: cover;
        }
        &.event_bg3 {
          background: url(/college_2016/images/renew/promotion_event_03_m.jpg) no-repeat;
          background-size: cover;
        }
      }
      .event__desc {
        color: #fff;
        z-index: 1;
        p {
          padding-bottom: 1rem;
          font-size: 1.625rem;
          font-weight: 700;
          letter-spacing: -0.65px;
          line-height: 1.2;
          @media screen and (max-width: 1280px) {
            padding-top: 4.5625rem;
            font-size: 2.25rem;
            letter-spacing: -0.9px;
            br {
              display: none;
            }
          }
          @media screen and (max-width: 750px) {
            padding-top: 3.5625rem;
            font-size: 1.9rem;
          }
          @media screen and (max-width: 580px) {
            padding-top: 2.5625rem;
            font-size: 1.8rem;
          }
        }
        li {
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          gap: 0.375rem;
          font-size: 1rem;
          font-weight: 800;
          line-height: 1.5;
          letter-spacing: -0.4px;
          @media screen and (max-width: 1280px) {
            font-size: 1.375rem;
            letter-spacing: -0.55px;
          }
          @media screen and (max-width: 750px) {
            font-size: 1.2rem;
          }
          &::before {
            display: block;
            content: "";
            width: 2px;
            height: 2px;
            background-color: #fff;
            border-radius: 50%;
          }
          span,
          em {
            padding-left: 0.125rem;
            line-height: 1.5;
          }
          span {
            padding-left: 0.125rem;
            font-weight: 600;
          }
          em {
            font-weight: 400;
          }
        }
      }
    }
  }
  .badge {
    display: inline-block;
    padding: 0.375rem 1rem;
    background-color: var(--main-color);
    font-size: 1rem;
    color: #fff;
    font-weight: 500;
    border-radius: 50px;
    letter-spacing: -0.4px;
    line-height: 1.5;
    z-index: 1;
    &.end {
      background-color: #aaa;
    }
    @media screen and (max-width: 1280px) {
      padding: 0.5rem 1.25rem;
      font-size: 1.25rem;
      letter-spacing: -0.5px;
    }
  }
  .info_event__desc {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    margin-top: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.5;
    letter-spacing: -0.5px;
    font-weight: 400;
    color: #aaa;
    word-break: break-all;
    &::before {
      display: block;
      content: "¡Ø";
    }
    @media screen and (max-width: 1280px) {
      margin-top: 1.875rem;
    }
    @media screen and (max-width: 750px) {
      font-size: 1.375rem;
      line-height: 1.3;
      letter-spacing: -0.55px;
    }
    @media screen and (max-width: 580px) {
      margin-top: 1rem;
      font-size: 1.125rem;
    }
  }
}