@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Splash&display=swap");
@import url("https://fonts.cdnfonts.com/css/neue-haas-grotesk-display-pro");
@import url("https://fonts.googleapis.com/css2?family=Gmarket+Sans:wght@300;500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Soak+Up+The+Sun+Script&display=swap");

.wrap {
  position: relative;
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

/* main */
.main {
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: #000;
}
.inner {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 100px;
}
.bg {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
.bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.header .logo a {
  color: #fff;
  font-size: 20px;
  font-family: "GmarketSans-L", sans-serif;
  font-weight: 700;
  line-height: 20px;
}
.gnb ul li a {
  color: #fff;
  font-size: 20px;
  font-weight: 300;
  line-height: 20px;
}
.gnb ul li:hover a {
  color: #fff;
  font-weight: 500;
}
.gnb ul li:nth-child(1) a {
  color: #fff;
  font-weight: 500;
}
.gnb a.kakao {
  position: absolute;
  width: 50px;
  height: 50px;
  top: -50px;
  right: -50px;
  color: #fff;
}

.co {
  position: relative;
  margin-top: 120px;
}
.co p {
  font-size: 100px;
  line-height: 125px;
  color: #fff;
  font-family: "Splash", cursive;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 15px;
}

/* company */
.company {
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: #f8f8f4;
}
.company .info {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 200px;
}
.info img {
  width: 900px;
  height: 600px;
  object-fit: cover;
}
.info .text {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 50px;
}
.info .text .title {
  position: relative;
}
.info .text .title span {
  font-size: 36px;
  line-height: 36px;
}
.info .text .title p {
  font-family: "GmarketSans-M", sans-serif;
  font-weight: 500;
  font-size: 80px;
  line-height: 80px;
}
.info .text .desc {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.info .text .desc span {
  font-size: 20px;
}

/* process */
.process {
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: #f8f8f4;
}
.process .inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.process-detail {
  position: relative;
  width: 100%;
  height: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.process-detail span {
  font-size: 64px;
}
.process-detail ul {
  display: flex;
  flex-wrap: wrap;
  width: 410px;
  align-items: center;
  gap: 10px 10px;
  position: relative;
}
.process-detail ul li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 100px;
  border: 2px solid #d9d9d9;
  width: 200px;
  height: 200px;
  gap: 10px;
}
.process-detail ul li p {
  font-family: "GmarketSans-M", sans-serif;
  font-weight: 700;
  font-size: 18px;
  text-align: center;
}
.process-detail .text {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
}
.process-detail .text p {
  font-size: 24px;
  text-align: center;
}

/* works */
.works {
  position: relative;
  width: 100%;
  height: 300vh;
  background-color: #f8f8f4;
}