@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&family=Noto+Sans+KR:wght@400;500;700&family=Roboto:wght@300;400;500&display=swap");
@import url("./common.css");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Montserrat:wght@800&display=swap");
@import url("https://fonts.googleapis.com/css?family=Montserrat&display=swap");
html {
  background-color: #EEEDEB;
  width: 100%;
}

.pg1 {
  background-color: #EEEDEB;
  width: 100%;
  height: 865px;
  position: relative;
}
.pg1 .container {
  width: 100%;
  height: 220px;
}
.pg1 .container .title {
  position: relative;
  font-family: "Montserrat", sans-serif;
  font-size: 90px;
  font-weight: 800;
  margin-left: 228px;
  padding-top: 200px;
}
.pg1 .container .title i {
  position: relative;
  font-style: normal;
  display: inline-block;
}
.pg1 .container .title i::after {
  content: "";
  position: absolute;
  left: 0;
  top: 25%;
  width: 0%;
  height: 65px;
  background-color: #FFAD00;
  font-style: normal;
  display: inline-block;
  z-index: -1;
  -webkit-animation: bg 0.6s 0.8s forwards;
          animation: bg 0.6s 0.8s forwards;
}
@-webkit-keyframes bg {
  100% {
    width: 100%;
  }
}
@keyframes bg {
  100% {
    width: 100%;
  }
}
.pg1 .container .title span {
  width: 100%;
  display: block;
  transform: translateY(-50px);
  opacity: 0;
  -webkit-animation-name: titleAnimation;
          animation-name: titleAnimation;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  -webkit-animation-duration: 0.6s;
          animation-duration: 0.6s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
.pg1 .container .title span:first-child {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
.pg1 .container .title span:nth-child(2) {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}
.pg1 .container .title span:last-child {
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
}
.pg1 div {
  text-align: left;
  font-size: 20px;
  position: absolute;
  top: 580px;
  left: 235px;
}

@-webkit-keyframes titleAnimation {
  0% {
    transform: translateY(-50px);
    opacity: 0;
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
            clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
  }
  100% {
    transform: translateY(0);
    opacity: 1;
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%);
            clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%);
  }
}

@keyframes titleAnimation {
  0% {
    transform: translateY(-50px);
    opacity: 0;
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
            clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
  }
  100% {
    transform: translateY(0);
    opacity: 1;
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%);
            clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%);
  }
}
.pg2 {
  overflow: hidden;
  position: relative;
}
.pg2 div img {
  position: relative;
  width: 100%;
  height: 800px;
}
.pg2 h2 {
  font-family: "Montserrat", sans-serif;
  position: absolute;
  color: #EEEDEB;
  top: 200px;
  left: 235px;
  font-size: 85px;
  font-weight: 300;
  line-height: 1.2;
  max-width: 40ch;
  text-align: left;
  transform: scale(0.8);
  -webkit-animation: scale 3s forwards cubic-bezier(0.5, 2, 0.89, 1);
          animation: scale 3s forwards cubic-bezier(0.5, 2, 0.89, 1);
}
@-webkit-keyframes scale {
  100% {
    transform: scale(1);
  }
}
@keyframes scale {
  100% {
    transform: scale(1);
  }
}
.pg2 span {
  display: inline-block;
  opacity: 0;
  filter: blur(4px);
}
.pg2 a img {
  width: 120px;
  height: 120px;
  position: absolute;
  right: 250px;
  top: 600px;
}
.pg2.active span:nth-child(1) {
  -webkit-animation: fade-in 0.8s 0.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
          animation: fade-in 0.8s 0.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.pg2.active span:nth-child(2) {
  -webkit-animation: fade-in 0.8s 0.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
          animation: fade-in 0.8s 0.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.pg2.active span:nth-child(3) {
  -webkit-animation: fade-in 0.8s 0.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
          animation: fade-in 0.8s 0.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.pg2.active span:nth-child(4) {
  -webkit-animation: fade-in 0.8s 0.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
          animation: fade-in 0.8s 0.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.pg2.active span:nth-child(5) {
  -webkit-animation: fade-in 0.8s 0.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
          animation: fade-in 0.8s 0.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.pg2.active span:nth-child(6) {
  -webkit-animation: fade-in 0.8s 0.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
          animation: fade-in 0.8s 0.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.pg2.active span:nth-child(7) {
  -webkit-animation: fade-in 0.8s 0.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
          animation: fade-in 0.8s 0.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.pg2.active span:nth-child(8) {
  -webkit-animation: fade-in 0.8s 0.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
          animation: fade-in 0.8s 0.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.pg2.active span:nth-child(9) {
  -webkit-animation: fade-in 0.8s 0.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
          animation: fade-in 0.8s 0.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.pg2.active span:nth-child(10) {
  -webkit-animation: fade-in 0.8s 1s forwards cubic-bezier(0.11, 0, 0.5, 0);
          animation: fade-in 0.8s 1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.pg2.active span:nth-child(11) {
  -webkit-animation: fade-in 0.8s 1.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
          animation: fade-in 0.8s 1.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.pg2.active span:nth-child(12) {
  -webkit-animation: fade-in 0.8s 1.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
          animation: fade-in 0.8s 1.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.pg2.active span:nth-child(13) {
  -webkit-animation: fade-in 0.8s 1.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
          animation: fade-in 0.8s 1.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.pg2.active span:nth-child(14) {
  -webkit-animation: fade-in 0.8s 1.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
          animation: fade-in 0.8s 1.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.pg2.active span:nth-child(15) {
  -webkit-animation: fade-in 0.8s 1.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
          animation: fade-in 0.8s 1.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
@-webkit-keyframes fade-in {
  100% {
    opacity: 1;
    filter: blur(0);
  }
}
@keyframes fade-in {
  100% {
    opacity: 1;
    filter: blur(0);
  }
}

.pg3 {
  position: relative;
  opacity: 0;
  transform: translateY(400px);
  transition: 1s;
}
.pg3.active {
  transform: translateY(0);
  opacity: 1;
}
.pg3 .topp {
  display: flex;
  justify-content: space-between;
  width: 72%;
  margin: 0 auto;
  padding-top: 135px;
}
.pg3 .topp h2 {
  font-family: "Inter", sans-serif;
  font-size: 40px;
  font-weight: 400;
}
.pg3 .topp div {
  font-family: "Inter", sans-serif;
  font-size: 22px;
  font-weight: 400;
  transform: translateX(-245px);
}
.pg3 .topp a {
  padding-top: 5px;
}
.pg3 .topp a img {
  width: 50px;
  height: 50px;
}
.pg3 .middle {
  display: flex;
  justify-content: space-between;
  width: 72%;
  margin: 80px auto;
}
.pg3 .middle div {
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  font-weight: 400;
}
.pg3 .middle p img {
  width: 1017px;
  height: 662px;
}
.pg3 .btm {
  display: flex;
  justify-content: space-between;
  width: 15%;
  vertical-align: middle;
  position: absolute;
  top: 920px;
  left: 260px;
}
.pg3 .btm h2 {
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  font-weight: 400;
}
.pg3 .btm p img {
  margin-top: 12px;
}
.pg3 .btm div {
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  font-weight: 400;
}
.pg3 .line p img {
  width: 72%;
  margin-left: 260px;
  margin-top: 20px;
}

.pg4 {
  position: relative;
}
.pg4 .topp {
  display: flex;
  justify-content: space-between;
  width: 72%;
  margin: 95px auto;
}
.pg4 .topp h2 {
  font-family: "Inter", sans-serif;
  font-size: 40px;
  font-weight: 400;
}
.pg4 .topp div {
  font-family: "Inter", sans-serif;
  font-size: 22px;
  font-weight: 400;
  transform: translateX(-140px);
}
.pg4 .topp a img {
  width: 50px;
  height: 50px;
}
.pg4 .middle {
  display: flex;
  justify-content: space-between;
  width: 72%;
  margin: 80px auto;
}
.pg4 .middle div {
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  font-weight: 400;
}
.pg4 .middle p img {
  width: 1017px;
  height: 662px;
}
.pg4 .btm {
  display: flex;
  justify-content: space-between;
  width: 15%;
  vertical-align: middle;
  position: absolute;
  top: 800px;
  left: 260px;
}
.pg4 .btm h2 {
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  font-weight: 400;
}
.pg4 .btm p img {
  margin-top: 12px;
}
.pg4 .btm div {
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  font-weight: 400;
}
.pg4 .line p img {
  width: 72%;
  margin-left: 260px;
  margin-top: 20px;
}

.pg5 {
  position: relative;
}
.pg5 .topp {
  display: flex;
  justify-content: space-between;
  width: 72%;
  margin: 95px auto;
}
.pg5 .topp h2 {
  font-family: "Inter", sans-serif;
  font-size: 40px;
  font-weight: 400;
}
.pg5 .topp div {
  font-family: "Inter", sans-serif;
  font-size: 22px;
  font-weight: 400;
  transform: translateX(-110px);
}
.pg5 .topp a img {
  width: 50px;
  height: 50px;
}
.pg5 .middle {
  display: flex;
  justify-content: space-between;
  width: 72%;
  margin: 80px auto;
}
.pg5 .middle div {
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  font-weight: 400;
}
.pg5 .middle p img {
  width: 1017px;
  height: 662px;
}
.pg5 .btm {
  display: flex;
  justify-content: space-between;
  width: 15%;
  vertical-align: middle;
  position: absolute;
  top: 800px;
  left: 260px;
}
.pg5 .btm h2 {
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  font-weight: 400;
}
.pg5 .btm p img {
  margin-top: 12px;
}
.pg5 .btm div {
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  font-weight: 400;
}
.pg5 .line p img {
  width: 72%;
  margin-left: 260px;
  margin-top: 20px;
}

.pg6 {
  position: relative;
}
.pg6 .topp {
  display: flex;
  justify-content: space-between;
  width: 72%;
  margin: 95px auto;
}
.pg6 .topp h2 {
  font-family: "Inter", sans-serif;
  font-size: 40px;
  font-weight: 400;
}
.pg6 .topp div {
  font-family: "Inter", sans-serif;
  font-size: 22px;
  font-weight: 400;
  transform: translateX(-220px);
}
.pg6 .topp a img {
  width: 50px;
  height: 50px;
}
.pg6 .middle {
  display: flex;
  justify-content: space-between;
  width: 72%;
  margin: 80px auto;
}
.pg6 .middle div {
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  font-weight: 400;
}
.pg6 .middle p img {
  width: 1017px;
  height: 662px;
}
.pg6 .btm {
  display: flex;
  justify-content: space-between;
  width: 15%;
  vertical-align: middle;
  position: absolute;
  top: 800px;
  left: 260px;
}
.pg6 .btm h2 {
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  font-weight: 400;
}
.pg6 .btm p img {
  margin-top: 10px;
}
.pg6 .btm div {
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  font-weight: 400;
}
.pg6 .line p img {
  width: 72%;
  margin-left: 260px;
  margin-top: 20px;
}

.pg7 {
  position: relative;
}
.pg7 .top {
  display: flex;
  justify-content: space-between;
  width: 72%;
  margin: 95px auto;
}
.pg7 .top h2 {
  font-family: "Inter", sans-serif;
  font-size: 40px;
  font-weight: 400;
}
.pg7 .top div {
  font-family: "Inter", sans-serif;
  font-size: 22px;
  font-weight: 400;
  transform: translateX(-210px);
  padding-top: 10px;
}
.pg7 .top a img {
  width: 50px;
  height: 50px;
}
.pg7 .middle {
  display: flex;
  justify-content: space-between;
  width: 72%;
  margin: 80px auto;
}
.pg7 .middle div {
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  font-weight: 400;
}
.pg7 .middle p img {
  width: 920px;
  height: 662px;
}
.pg7 .btm {
  display: flex;
  justify-content: space-between;
  width: 15%;
  vertical-align: middle;
  position: absolute;
  top: 800px;
  left: 260px;
}
.pg7 .btm h2 {
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  font-weight: 400;
}
.pg7 .btm p img {
  margin-top: 10px;
}
.pg7 .btm div {
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  font-weight: 400;
}
.pg7 .line p img {
  width: 72%;
  margin-left: 260px;
  margin-top: 20px;
}/*# sourceMappingURL=index.css.map */