@import url(./palette.css );
/* font */
@font-face {
  font-family: "ROKAF Sans";
  src: url("../font/ROKAF\ Sans\ Medium.ttf");
}

body {
  width: 100%;
  background: #FCFCFC;
}

.header_home {
  display: flex;
  width: 100%;
  height: 70px;
  justify-content: center;
  align-items: center;
  padding: 9px 200px;
  position: fixed;
  top: 0;
  background: white;
}

.wrap {
  max-width: 1120px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 1;
}

.logo {
  display: flex;
  width: 153px;
  height: 51px;
  padding: 5.017px 0px 5.848px 0px;
  justify-content: center;
  align-items: flex-end;
  gap: 8.592px;
}

.logo img {
  width: 40px;
  height: 40.135px;
  flex-shrink: 0;
}

.logo span {
  color: #3692FF;
  font-family: "ROKAF Sans";
  font-size: 25.633px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.login-button {
  display: flex;
  width: 128px;
  height: 48px;
  padding: 12px 23px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 8px;
  background: var(--Primary-100);

  color: var(--Cool-Gray-100);

  /* pretendard/lg-16px-semibold */
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 26px;
  /* 162.5% */
}


.main_home {
  width: 100%;
  height: 610px;
  background: #CFE5FF;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 0 200px;
}

.main-txt {
  display: flex;
  flex-direction: column;
  width: 356px;
}

.main-title {
  width: 306px;
  color: var(--Secondary-700);
  font-family: Pretendard;
  font-size: 40px;
  /* 2.0833vw*/
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
  /* 56px */
}

.items-button {
  display: flex;
  width: 100%;
  height: 56px;
  /* padding: 16px 124px; */
  justify-content: center;
  align-items: center;
  border-radius: 40px;
  background: var(--brand-blue);
  margin: 32px 0 60px;

  color: var(--Secondary-50);
  text-align: center;
  /* pretendard/xl-20px-semibold */
  font-family: Pretendard;
  font-size: 20px;
  /* 1.0417vw*/
  font-style: normal;
  font-weight: 600;
  line-height: 32px;
  /* 160% */
}

main img {
  flex-shrink: 1;
  max-width: 746px;
  /* 38.8542vw */
  width: 100%;
  height: auto;
}


section {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  padding: 138px 200px;
  background-color: #fff;
}

section .wrap {
  justify-content: center;
}

.banner {
  display: flex;
  max-width: 988px;
  width: 100%;
  justify-content: center;
  align-items: center;
  gap: 6.5%;
  background: #FCFCFC;
  cursor: pointer;
}

.banner img {
  max-width: 588px;
  /* 30.6250vw*/
  width: 100%;
  height: auto;
  flex-shrink: 1;
}

.badget {
  margin-bottom: 12px;
  display: block;
  color: var(--Primary-100);
  /* pretendard/2lg-18px-bold */
  font-family: Pretendard;
  font-size: 18px;
  /* 0.9375vw*/
  font-style: normal;
  font-weight: 700;
  line-height: 26px;
  /* 144.444% */
}

.title {
  margin-bottom: 24px;

  color: var(--Secondary-700);
  font-family: Pretendard;
  font-size: 40px;
  /* 2.0833vw */
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
  /* 56px */
  letter-spacing: 0.8px;
}

.content {
  color: var(--Secondary-700);
  /* pretendard/2xl-24px-medium */
  font-family: Pretendard;
  font-size: 24px;
  /* 1.25vw;*/
  font-style: normal;
  font-weight: 500;
  line-height: 32px;
  /* 133.333% */
}

.search {
  flex-direction: row-reverse;
}

.search .txtbox {
  text-align: right;
}

.bottom {
  width: 100%;
  height: 540px;
  background: #CFE5FF;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-top: 138px;
  padding: 0 200px;
}

.bottom h1 {
  color: var(--Secondary-700);
  font-family: Pretendard;
  font-size: 40px;
  /* 2.0833vw */
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
  /* 56px */
}

.bottom img {
  max-width: 746px;
  /* 38.8542vw*/
  width: 100%;
  height: auto;
  flex-shrink: 1;
}

.footer_home {
  width: 100%;
  display: flex;
  height: 160px;
  padding: 32px 200px;
  align-items: flex-start;
  background: var(--Secondary-900);
  text-align: center;
}

.footer-wrap {
  width: 1520px;
  flex-shrink: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.codeit {
  color: var(--Secondary-400);
  text-align: center;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.center {
  display: flex;
  gap: 30px;
}

.center>a {
  color: var(--Secondary-200);
  text-align: center;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.sns-box {
  display: flex;
  gap: 12px;
}

.sns {
  width: 20px;
  height: 20px;
}


/* Tablet */
@media (max-width: 1200px) {
  .header_home {
    padding: 10px 24px;
  }

  .main_home {
    padding: 0;
    height: 841px;
    margin-bottom: 24px;
  }

  .main_home .wrap {
    flex-direction: column;
  }

  .main-txt {
    width: 100%;
    margin-bottom: 130px;
    align-items: center;
    text-align: center;
  }

  .main-title {
    width: 100%;
    display: flex;
    text-align: center;
    justify-content: center;
  }

  .main-title p:last-child {
    margin-left: 10px;
  }

  .items-button {
    width: 357px;
  }

  section {
    padding: 0 24px;
    background: #FCFCFC;
  }

  .banner {
    flex-direction: column;
    width: 698px;
  }

  .banner img {
    max-width: 100%;
  }

  .txtbox {
    width: 100%;
    margin-top: 24px;
    margin-bottom: 52px;
  }

  .title {
    font-size: 32px;
    line-height: 42px;
    /* 131.25% */
    letter-spacing: 0;
    display: flex;
  }

  .title p:last-child {
    margin-left: 10px;
  }

  .content {
    font-size: 18px;
    line-height: 26px;
    /* 144.444% */
  }

  .search .title {
    justify-content: flex-end;
  }

  .bottom {
    padding: 0;
    margin-top: 0;
    height: 907px;
  }

  .bottom .wrap {
    flex-direction: column;
  }

  .bottom h1 {
    text-align: center;
    margin-bottom: 217px;
  }

  .footer_home {
    padding: 0 24px;
  }

  .footer-wrap {
    margin-top: 32px;
  }
}

/* Mobile */
@media (max-width: 744px) {
  .header_home {
    padding: 10px 16px;
  }

  .main-txt {
    width: 100%;
  }

  .main-title {
    flex-direction: column;
  }

  .main-title p:last-child {
    margin-left: 0;
  }

  .footer-wrap {
    position: relative;
  }

  .codeit {
    position: absolute;
    top: 48px;
  }
}