@charset "utf-8";
@import url(reset.css);

@font-face {
  font-family: "Pretendard";
  src: url("Pretendard-Regular.eot");
  src: url("Pretendard-Regular.eot?#iefix") format("embedded-opentype"),
    url("Pretendard-Regular.woff2") format("woff2"),
    url("Pretendard-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard";
  src: url("Pretendard-Medium.eot");
  src: url("Pretendard-Medium.eot?#iefix") format("embedded-opentype"),
    url("Pretendard-Medium.woff2") format("woff2"),
    url("Pretendard-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard";
  src: url("Pretendard-Light.eot");
  src: url("Pretendard-Light.eot?#iefix") format("embedded-opentype"),
    url("Pretendard-Light.woff2") format("woff2"),
    url("Pretendard-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Open Sans";
  src: url("OpenSans-Italic.eot");
  src: url("OpenSans-Italic.eot?#iefix") format("embedded-opentype"),
    url("OpenSans-Italic.woff2") format("woff2"),
    url("OpenSans-Italic.woff") format("woff");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Open Sans";
  src: url("OpenSans-Regular.eot");
  src: url("OpenSans-Regular.eot?#iefix") format("embedded-opentype"),
    url("OpenSans-Regular.woff2") format("woff2"),
    url("OpenSans-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "Pretendard";
}

.fp-watermark {
  display: none;
}

.typing-demo {
  margin: 0 auto;
  position: relative;
}

h2 {
  font-size: 500px;
  color: #f3f3f3;
  font-weight: bold;
  position: absolute;
  z-index: -1;
}

header {
  width: 100%;
  height: 100px;
  line-height: 100px;
  margin: 0 auto;
  font-size: 30px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9;
  font-size: 20px;
}

header .inner {
  max-width: 1720px;
  width: calc(100% - 30px);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}

header .inner > a {
  width: 50px;
  height: 50px;
  align-items: center;
}
header .inner > a img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  position: absolute;
  top: 50%;
  left: 101px;
  transform: translateY(-50%);

  display: none;
}
header .inner ul {
  display: flex;
}
header .inner ul li {
  padding: 0 20px;
}

#fp-nav ul li:hover .fp-tooltip,
#fp-nav.fp-show-active a.active {
  color: #333;
}

#section0::before {
  content: "";
  width: 1px;
  height: 100vh;
  position: absolute;
  left: 100px;
  display: block;
  background-color: #333;
}
#section0::after {
  content: "";
  width: 100%;
  height: 1px;
  position: absolute;
  top: 100px;
  display: block;
  background-color: #333;
}
#section0 .title h1 {
  font-size: 300px;
  font-weight: bold;
  width: 1250px;
}

#section0 .title {
  margin: 0 auto;
  text-align: center;
  font-size: 18px;
  max-width: 1220px;
  width: calc(100% - 230px);
  position: relative;
}

#section0 .title p {
  text-align: start;
  position: absolute;
  top: 7%;
  left: 3%;
}
#section0 .title strong {
  display: block;
  text-align: end;
  position: absolute;
  bottom: 7%;
  right: 1%;
}

#section0 div img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  position: absolute;
  z-index: 9;
  left: 16%;
  top: 28%;
}

#section0 span {
  transform: rotate(-90deg);
  transform-origin: left top;
  white-space: nowrap;
  position: absolute;
  top: 205px;
  left: 110px;
}
#section0 h4 {
  position: absolute;
  bottom: 50px;
  right: 5%;
}

/* #section1 */
#section1::before {
  content: "";
  width: 1px;
  height: 100vh;
  position: absolute;
  left: 100px;
  display: block;
  background-color: #333;
}
#section1::after {
  content: "";
  width: 100%;
  height: 1px;
  position: absolute;
  bottom: 100px;
  display: block;
  background-color: #333;
}
#section1 {
  font-size: 18px;
}
#section1 .fp-overflow {
  width: 1440px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}
#section1 .fp-overflow .info {
  margin-left: 17.36%;
}

#section1 .about img {
  width: 286px;
  height: 348px;
  object-fit: cover;
  border-radius: 30px;
  margin-bottom: 10px;
}
#section1 h2 {
  right: -30px;
  top: -90px;
}

#section1 .about {
  margin-left: 120px;
}
#section1 .about .text h3 {
  margin-top: 10px;
  position: relative;
}
#section1 .about .text h3::before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: #98e4ff;
  display: block;
  position: absolute;
  z-index: -1;
  top: -5px;
  left: -5px;
  border-radius: 50%;
}
#section1 .about .text ul li span:first-child {
  width: 60px;
  display: inline-block;
  margin-right: 20px;
  margin-bottom: 10px;
  color: #777;
  font-weight: 300;
}

#section1 .info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#section1 h3 {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
}
#section1 .info {
  position: relative;
}
#section1 .info h3 {
  display: inline-block;
  position: relative;
}

#section1 .info h3::before {
  content: "";
  width: 103%;
  height: 5px;
  background-color: #98e4ff;
  position: absolute;
  bottom: 5px;
  z-index: -1;
}

#section1 .info ul li {
  margin-bottom: 10px;
}

#section1 .info ul li span:first-child {
  font-family: "Open Sans";
  font-size: bold;
  display: inline-block;
  width: 153px;
  color: #666;
  margin-right: 50px;
}

#section1 .info ul li span:last-child {
  font-family: "Pretendard";
}
#section1 .tools::before {
  content: "아이콘에 마우스를 올려보세요!";
  position: absolute;
  top: 4px;
  left: 11%;
  display: block;
  font-size: 14px;
  font-weight: 300;
  color: #666;
}
#section1 .tools {
  margin-bottom: 30px;
  position: relative;
}
#section1 .tools div img {
  margin-right: 10px;
  vertical-align: middle;
}

#section1 .tools div img:nth-child(6) {
  width: 38px;
  height: 38px;
}

#section1 .tools div img:nth-child(7) {
  width: 40px;
  height: 40px;
}

#section1 .tools div img:nth-child(8) {
  width: 48px;
  height: 48px;
}
#section1 .tools div img:nth-child(9) {
  width: 42px;
  height: 42px;
}
#section1 .tools div img:nth-child(10) {
  width: 45px;
  height: 45px;
}

/* img hover */
#section1 .info .text {
  display: none;
}
#section1 .info .text.on {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: 16px;
}
/* #section2 */
#section2 h2 {
  right: -30px;
  top: -120px;
}
#section2 img {
  width: 835px;
  height: 706px;
  object-fit: cover;
  margin-right: 100px;
}

#section2 .cont {
  display: flex;
  justify-content: center;
  margin: 200px 0 300px;
  align-items: center;

  animation: item 1s 0.7s both;
}

@keyframes item {
  0% {
    transform: translateY(70px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

#section2 .cont:last-child {
  margin-bottom: 100px;
}

#section2 .cont .info_text {
  width: 30%;
  margin-left: 200px;
}
#section2 .cont .info_text h4 {
  font-size: 64px;
  font-weight: bold;
  position: relative;
  display: inline-block;
}

#section2 .cont .info_text h4::before {
  content: "";
  width: 100%;
  height: 20px;
  background-color: #999999;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
}
#section2 .cont .info_text ul {
  margin: 50px 0;
  font-size: 20px;
}
#section2 .cont .info_text ul li {
  margin: 30px 0;
}

#section2 .cont .info_text ul li span:first-child {
  width: 55px;
  display: inline-flex;
  margin-right: 30px;
  font-weight: bold;
}
#section2 .cont .info_text a {
  width: 160px;
  height: 55px;
  display: inline-block;
  border: 2px solid #333;
  font-size: 20px;
  line-height: 55px;
  text-align: center;
  border-radius: 20px;
  margin-right: 20px;
  box-shadow: 4px 4px 10px -10px;
}

#section2 .cont .info_text a:nth-child(2) {
  border: 2px solid #999;
  transition: 0.3s;
}
#section2 .cont .info_text a:nth-child(2):hover {
  background-color: #999;
  color: #fff;
  box-shadow: 4px 4px 10px -10px;
}
#section2 .cont2 .info_text h4::before {
  background-color: #fec67a;
}
#section2 .cont2 .info_text a {
  border: 2px solid #fec67a;
  transition: 0.3s;
}
#section2 .cont2 .info_text a:hover {
  background-color: #fec67a;
  color: #fff;
}
#section2 .cont3 .info_text h4::before {
  background-color: #bb181d;
}
#section2 .cont3 .info_text a {
  border: 2px solid #bb181d;
  transition: 0.3s;
}
#section2 .cont3 .info_text a:hover {
  background-color: #bb181d;
  color: #fff;
}
#section2 .cont4 .info_text h4::before {
  background-color: #f4e869;
}
#section2 .cont4 .info_text a:nth-child(2) {
  border: 2px solid #f4e869;
  transition: 0.3s;
}
#section2 .cont4 .info_text a:nth-child(2):hover {
  background-color: #f4e869;
  color: #fff;
}
#section2 .cont5 .info_text h4::before {
  background-color: #3085c3;
}
#section2 .cont5 .info_text a {
  border: 2px solid #3085c3;
  transition: 0.3s;
}
#section2 .cont5 .info_text a:hover {
  background-color: #3085c3;
  color: #fff;
}
#section2 .cont6 .info_text h4::before {
  background-color: #8ecddd;
}
#section2 .cont6 .info_text a:nth-child(2) {
  border: 2px solid #8ecddd;
  transition: 0.3s;
}
#section2 .cont6 .info_text a:nth-child(2):hover {
  background-color: #8ecddd;
  color: #fff;
}

#section2 .cont1 .mobile_mockup {
  background: url(../img/seoul_mobile.png) no-repeat;
  width: 216px;
  height: 344px;
  position: absolute;
  transform: translate(-37px, 105px);
  z-index: 9;
  overflow: hidden;
}
#section2 .cont1 .mobile_mockup .scroll {
  background: url("../img/seoul_mobile_mockup.png") no-repeat;
  width: 152px;
  height: 328px;
  position: absolute;
  top: 8px;
  left: 31px;
  border-radius: 20px;
}
#section2 .cont1 .mobile_mockup .icon {
  background: url(../img/mobilemockup_icon.png) no-repeat;
  width: 47px;
  height: 15px;
  position: absolute;
  top: 10px;
  left: 85px;
}

#section2 .cont1 .mobile_mockup .scroll:hover {
  animation: artcentermobile 12s infinite ease-in-out;
}
@keyframes artcentermobile {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 0 -1572px;
  }
  100% {
    background-position: 0 0;
  }
}
#section2 .cont1 .mockupimg span:hover {
  animation: artcenter 12s infinite ease-in-out;
}

@keyframes artcenter {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 0 -1895px;
  }
  100% {
    background-position: 0 0;
  }
}

#section2 .cont1 .mockupimg {
  background: url(../img/seoul1.png) no-repeat;
  width: 800px;
  height: 650px;
  position: relative;
}
#section2 .cont1 .mockupimg span {
  background: url("../img/Group\ 1.png") no-repeat;
  width: 656px;
  height: 370px;
  position: absolute;
  top: 54px;
  left: 72px;
}

#section2 .cont .mockupimg p {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 300;
  color: #666;
}
#section2 .cont2 .mobile_mockup {
  background: url(../img/smith_mobile.png) no-repeat;
  width: 216px;
  height: 344px;
  position: absolute;
  transform: translate(-37px, 105px);
  z-index: 9;
  overflow: hidden;
}
#section2 .cont2 .mobile_mockup .scroll {
  background: url("../img/smith_mobile_mockup.png") no-repeat;
  width: 152px;
  height: 328px;
  position: absolute;
  top: 8px;
  left: 31px;
  border-radius: 20px;
}
#section2 .cont2 .mobile_mockup .icon {
  background: url(../img/mobilemockup_icon.png) no-repeat;
  width: 47px;
  height: 15px;
  position: absolute;
  top: 10px;
  left: 85px;
}

#section2 .cont2 .mobile_mockup .scroll:hover {
  animation: smithteamobile 12s infinite ease-in-out;
}
@keyframes smithteamobile {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 0 -1364px;
  }
  100% {
    background-position: 0 0;
  }
}
#section2 .cont2 .mockupimg {
  background: url(../img/smith.png) no-repeat;
  width: 800px;
  height: 650px;
  position: relative;
  transform: translate(0px, 0px);
}
#section2 .cont2 .mockupimg span {
  background: url("../img/smithtea_scroll.png") no-repeat;
  width: 656px;
  height: 370px;
  position: absolute;
  top: 54px;
  left: 72px;
}
#section2 .cont2 .mockupimg span:hover {
  animation: smithtea 12s infinite ease-in-out;
}

@keyframes smithtea {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 0 -1764px;
  }
  100% {
    background-position: 0 0;
  }
}

#section2 .cont3 .mobile_mockup {
  background: url(../img/manyo_mobile.png) no-repeat;
  width: 216px;
  height: 344px;
  position: absolute;
  transform: translate(-37px, 105px);
  z-index: 9;
  overflow: hidden;
}
#section2 .cont3 .mobile_mockup .scroll {
  background: url("../img/manyo_mobile_mockup.png") no-repeat;
  width: 152px;
  height: 328px;
  position: absolute;
  top: 8px;
  left: 31px;
  border-radius: 20px;
}
#section2 .cont3 .mobile_mockup .icon {
  background: url(../img/mobilemockup_icon.png) no-repeat;
  width: 47px;
  height: 15px;
  position: absolute;
  top: 10px;
  left: 85px;
}

#section2 .cont3 .mobile_mockup .scroll:hover {
  animation: manyomobile 7s infinite ease-in-out;
}
@keyframes manyomobile {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 0 -332px;
  }
  100% {
    background-position: 0 0;
  }
}
#section2 .cont3 .mockupimg {
  background: url(../img/manyo.png) no-repeat;
  width: 800px;
  height: 650px;
  position: relative;
  transform: translate(0px, 0px);
}
#section2 .cont3 .mockupimg span {
  background: url("../img/manyo_scroll.png") no-repeat;
  width: 656px;
  height: 370px;
  position: absolute;
  top: 54px;
  left: 72px;
}
#section2 .cont3 .mockupimg span:hover {
  animation: manyo 7s infinite ease-in-out;
}

@keyframes manyo {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 0 -608px;
  }
  100% {
    background-position: 0 0;
  }
}

#section2 .cont4 .mockupimg {
  background: url(../img/binggrae.png) no-repeat;
  width: 800px;
  height: 650px;
  position: relative;
  transform: translate(0px, 0px);
}
#section2 .cont4 .mockupimg span {
  background: url("../img/binggrae_scroll.png") no-repeat;
  width: 656px;
  height: 370px;
  position: absolute;
  top: 54px;
  left: 72px;
}
#section2 .cont4 .mockupimg span:hover {
  animation: binggrae 10s infinite ease-in-out;
}
@keyframes binggrae {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 0 -1057px;
  }
  100% {
    background-position: 0 0;
  }
}

#section2 .cont5 .mockupimg {
  background: url(../img/withgoods.png) no-repeat;
  width: 800px;
  height: 650px;
  position: relative;
  transform: translate(0px, 0px);
}
#section2 .cont5 .mockupimg span {
  background: url("../img/withgoods_scroll.png") no-repeat;
  width: 656px;
  height: 370px;
  position: absolute;
  top: 54px;
  left: 72px;
}
#section2 .cont5 .mockupimg span:hover {
  animation: withgoods 10s infinite ease-in-out;
}

@keyframes withgoods {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 0 -999px;
  }
  100% {
    background-position: 0 0;
  }
}

#section2 .cont6 .mockupimg {
  background: url(../img/busan.png) no-repeat;
  width: 800px;
  height: 650px;
  position: relative;
  transform: translate(0px, 0px);
}
/* #section3 */

#section3 h2 {
  right: -65px;
  top: -90px;
}
#section3 .fp-overflow a {
  width: calc(100% / 4 - 80px);
  margin: 20px;
  display: block;
  overflow: hidden;
  position: relative;
}
#section3 p {
  position: absolute;
  top: -35px;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 300;
  color: #666;
  text-align: center;
  line-height: 1.3;
}

#section3 .list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 300px 200px 100px;
  position: relative;
}

#section3 a:hover {
  transform: scale(1.05);
  transition: 0.3s;
}
#section3 a {
  border-radius: 10px;
}
#section3 a::before {
  content: "";
  display: block;
  background-image: url(../img/photoshop.png);
  background-size: 48px 48px;
  width: 48px;
  height: 48px;
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0.7;
}

#section3 .fp-overflow a:nth-child(-n + 3):before {
  content: "";
  display: block;
  background-image: url(../img/illustrator.png);
  background-size: 48px 48px;
  width: 48px;
  height: 48px;
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0.7;
}

#section3 .fp-overflow a:nth-child(5):before {
  content: "";
  display: block;
  background-image: url(../img/illustrator.png);
  background-size: 48px 48px;
  width: 48px;
  height: 48px;
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0.7;
}

#section3 a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.5s;
  border-radius: 10px;
}
#section3 .fp-overflow a:nth-child(n + 6):nth-child(-n + 12) {
  height: 300px;
}

#section3 .fp-overflow a:nth-last-child(-n + 2) {
  width: inherit;
  height: 318px;
}
/*  */
.typing-txt {
  display: none;
}
.typeing-txt ul {
  list-style: none;
}
.typing {
  display: inline-block;
  animation-name: cursor;
  animation-duration: 0.3s;
  animation-iteration-count: infinite;
  text-align: center;
  font-size: 50px;
  margin: 0 auto;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@keyframes cursor {
  0% {
    border-right: 1px solid #fff;
  }
  50% {
    border-right: 1px solid #000;
  }
  100% {
    border-right: 1px solid #fff;
  }
}
#fp-nav ul li .fp-tooltip {
  color: #333;
}
footer .inner {
  height: 100px;
  width: 100%;
  justify-content: center;
  text-align: center;
  display: flex;
  flex-direction: column;
  color: #666;
}
#fp-nav li:last-child {
  display: none;
}
footer .inner .link {
  display: flex;
  position: absolute;
  top: 50%;
  right: 25%;
  transform: translateY(-50%);
}
footer .inner .link a {
  display: inline-block;
  border: 2px solid #333;
  border-radius: 20px;
  /* width: 90px; */
  /* height: 35px; */
  line-height: 34px;
  color: #333;
  margin-right: 20px;
  transition: 0.3s;
  position: relative;
  font-weight: bold;
  padding: 0 20px;
}
footer .inner .link a::before {
  content: "";
  display: inline-block;
  background-image: url(../img/cursor.png);
  background-size: 32px 32px;
  width: 32px;
  height: 32px;
  vertical-align: middle;
  margin-right: 20px;
  position: absolute;
  bottom: -8px;
  right: -31px;
}
footer .inner .link a:last-child::before {
  content: "";
  display: inline-block;
  background-image: url(../img/cursor2.png);
  background-size: 32px 32px;
  width: 32px;
  height: 32px;
  vertical-align: middle;
  margin-right: 20px;
  position: absolute;
  bottom: -8px;
  right: -31px;
}
footer .inner .link a:hover {
  color: #fff;
  background-color: #333;
}
#section4 .arrow::before {
  content: "Scroll";
  position: absolute;
  top: -12px;
  left: -24px;
  display: block;
  transform: rotate(-45deg);
}

#section4 .arrow {
  display: inline-block;
  width: 15px;
  height: 15px;
  border-right: 2px solid #666;
  border-bottom: 2px solid #666;
  transform: rotate(45deg);
  animation: _upDownArrow 1s ease-in-out infinite;
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
}
@keyframes _upDownArrow {
  0% {
    transform: translateY(0) rotate(45deg);
  }
  50% {
    transform: translateY(10px) rotate(45deg);
  }
  100% {
    transform: translateY(0) rotate(45deg);
  }
}
footer .inner .text {
  font-size: 14px;
}

.fp-viewing-3rdPage header img {
  display: block !important;
}
.fp-viewing-4rdPage header img {
  display: block !important;
}
.fp-viewing-5rdPage header img {
  display: block !important;
}
.fp-viewing-5 header img {
  display: block !important;
}
a.effect-shine{
  -webkit-mask-image: linear-gradient(-75deg, rgba(0,0,0,0.9) 30%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.9) 70%);
  -webkit-mask-size: 200%;
  animation: shine 3s infinite;
}
a.effect-shine{
  cursor: default;
}
@-webkit-keyframes shine {
  from {
    -webkit-mask-position: 150%;
  }
  
  to {
    -webkit-mask-position: -50%;
  }
}