.font80 {
  --fontsize: 8.0rem;
  font-size: var(--fontsize);
}

.font70 {
  --fontsize: 7.0rem;
  font-size: var(--fontsize);
}

.font60 {
  --fontsize: 6.0rem;
  font-size: var(--fontsize);
}

.font55 {
  --fontsize: 5.5rem;
  font-size: var(--fontsize);
}

.font50 {
  --fontsize: 5.0rem;
  font-size: var(--fontsize);
}

.font40 {
  --fontsize: 4.0rem;
  font-size: var(--fontsize);
}

.font35 {
  --fontsize: 3.5rem;
  font-size: var(--fontsize);
}

.font30 {
  --fontsize: 3.0rem;
  font-size: var(--fontsize);
}

main .visual {
  width: 100%;
  height: 100vh;
  position: relative;
  height: calc(var(--vh, 1vh) * 100);
  min-height: calc(var(--vh, 1vh) * 100);
}
@supports (-webkit-touch-callout: none) {
  main .visual {
    height: -webkit-fill-available;
  }
}
main .visual :root {
  --vh: 100%;
}
main .visual .swiper-wrapper {
  transition-timing-function: cubic-bezier(0.68, 0.12, 0.28, 0.88);
}
main .visual .box,
main .visual .slideBox,
main .visual .bg {
  width: 100%;
  height: 100%;
}
main .visual .slideBox {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: -2;
}
main .visual .bg {
  transform: scale(1.2);
  transition: all 2s linear;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
main .visual .bg.bg1 {
  background-image: url("/img/main/visualBg1.jpg");
}
main .visual .bg.bg2 {
  background-image: url("/img/main/visualBg2.jpg");
}
main .visual .bg.bg3 {
  background-image: url("/img/main/visualBg3.jpg");
}
main .visual .h2Box {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
main .visual h2 {
  white-space: nowrap;
  overflow: hidden;
}
main .visual h2 span {
  display: block;
  color: #ffffff;
  font-weight: 900;
  letter-spacing: 0.05em;
  line-height: 1.125;
  opacity: 0;
  transform: translateY(100%);
  transition: all 0.4s;
  filter: blur(2px);
}
main .visual .swiper-slide-active .bg {
  transform: scale(1);
}
main .visual .swiper-slide-active h2 span {
  opacity: 1;
  transform: translateY(0);
  transition: all 1s;
  filter: inherit;
}
main .visual .swiper-slide-active h2:nth-child(1) span {
  transition-delay: 0.28s;
}
main .visual .swiper-slide-active h2:nth-child(2) span {
  transition-delay: 0.56s;
}
main .visual .box {
  position: absolute;
  top: 0;
  left: 0;
}
main .visual .optionBox {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 0 100px;
  width: 100%;
  height: 100%;
}
main .visual .scrollBox > div {
  margin: 20px 0 0;
}
main .visual .swiper-pagination {
  display: flex;
  column-gap: 50px;
}
main .visual .swiper-pagination li {
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  position: relative;
  transition: all 0.4s;
}
main .visual .swiper-pagination li::after {
  content: "";
  display: block;
  width: 0;
  height: 2px;
  background: #e72410;
  position: absolute;
  right: 0;
  bottom: -8px;
  transition: all 0.4s;
}
main .visual .swiper-pagination li:hover, main .visual .swiper-pagination li.swiper-pagination-bullet-active {
  color: #e72410;
}
main .visual .swiper-pagination li:hover::after, main .visual .swiper-pagination li.swiper-pagination-bullet-active::after {
  width: 100%;
}
main .explanation {
  text-align: center;
}
main .explanation .box {
  padding: 260px 0 160px;
}
main .explanation h2, main .explanation h5 {
  font-weight: 700;
}
main .explanation h2 {
  overflow: hidden;
}
main .explanation h2 span {
  display: block;
  transform: translateY(100%);
  transition: all 0.8s;
  filter: blur(2px);
}
main .explanation h2.on span {
  transform: translateY(0);
  filter: inherit;
}
main .explanation h5,
main .explanation p {
  font-size: 2.4rem;
}
main .explanation h5 {
  margin: 35px 0 0;
}
main .explanation p {
  font-weight: 500;
  line-height: 1.6666;
  font-family: "Pretendard", sans-serif;
}
main .explanation .line {
  margin: 60px auto;
}
main .applications .itemBox,
main .applications .item {
  position: relative;
  overflow: hidden;
}
main .applications .itemBox {
  display: flex;
  column-gap: 1px;
}
main .applications .point,
main .applications a {
  position: absolute;
  top: 0;
  bottom: 0;
}
main .applications .point {
  width: calc(25% - 1px);
  height: 100%;
  background: rgba(231, 36, 16, 0.5);
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  opacity: 0;
  transition: all 0.6s;
}
main .applications .point.on {
  opacity: 1;
}
main .applications .item {
  width: 100%;
  padding: 23.647% 0;
  transition: all 0.68s;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
main .applications .item.item1 {
  background-image: url("/img/main/applicationsImg1.jpg");
}
main .applications .item.item2 {
  background-image: url("/img/main/applicationsImg2.jpg");
}
main .applications .item.item3 {
  background-image: url("/img/main/applicationsImg3.jpg");
}
main .applications .item.item4 {
  background-image: url("/img/main/applicationsImg4.jpg");
}
main .applications .item * {
  color: #ffffff;
  text-align: center;
}
main .applications a {
  display: flex;
  flex-direction: column;
  z-index: 2;
  transition: all 0.4s;
  width: 100%;
  height: 100%;
}
main .applications em {
  display: block;
  margin: auto 0 0;
}
main .applications .text {
  margin: 90px auto;
}
main .applications h3 {
  font-weight: 700;
  line-height: 1.1818;
  margin: 0 0 20px;
}
main .applications p {
  font-size: 1.8rem;
  font-size: 3.0rem;
  line-height: 1.6666;
  transition: all 0.4s;
}
main .applications .plus,
main .applications .line {
  position: relative;
}
main .applications .plus {
  width: 95px;
  height: 95px;
  margin: 0 auto -35px;
}
main .applications .plus > * {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
main .applications .plus > svg {
  fill: transparent;
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 1px;
  stroke-dasharray: 298.3;
  stroke-dashoffset: 298.3;
  overflow: inherit;
  transform: translate(-50%, -50%) rotate(90deg);
  transition: all 0.4s;
  width: 100%;
  height: 100%;
}
main .applications .line {
  width: 1px;
  height: 300px;
  margin: 0 auto;
}
main .applications .line span {
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.3);
  position: absolute;
  top: 0;
  transition: all 0.4s;
}
main .applications .item.on a {
  backdrop-filter: blur(8.6px);
}
main .applications .item.on p {
  opacity: 1;
  transform: translateY(0);
}
main .applications .item.on .plus > svg {
  stroke-dashoffset: 0;
  transition-delay: 0.2s;
}
main .applications .item.on .line span {
  height: 0;
}
main .products .box {
  padding: 0 0 160px;
}
main .products .itemBox {
  display: flex;
  column-gap: 5px;
}
main .products .item {
  width: 100%;
  overflow: hidden;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
main .products .item:nth-child(1) {
  background-image: url("/img/main/productsImg1.jpg");
}
main .products .item:nth-child(2) {
  background-image: url("/img/main/productsImg2.jpg");
  background-position: center bottom;
}
main .products .item:nth-child(3) {
  background-image: url("/img/main/productsImg3.jpg");
}
main .products a {
  display: block;
  padding: 65.7895% 0;
  position: relative;
  transition: all 0.2s;
}
main .products a > h3 {
  display: inline-block;
  color: #ffffff;
  top: 92.5%;
  left: 50%;
  transform: translateX(-50%);
  transition: all 0.4s;
}
main .products h3 {
  font-weight: 900;
}
main .products .arrow,
main .products a > h3,
main .products .text {
  position: absolute;
}
main .products .arrow {
  width: 75px;
  height: 75px;
  background: #e72410;
  border-radius: 50%;
  top: 0;
  right: 0;
  opacity: 0;
  transition: all 0.4s;
  display: flex;
  align-items: center;
  justify-content: center;
}
main .products .text {
  width: 100%;
  padding: 0;
  top: 55%;
  opacity: 0;
  transition: all 0.6s;
}
main .products p {
  font-weight: 300;
  line-height: 1.6666;
  margin: 30px 0 0;
  transition: all 0.4s;
  font-family: "Pretendard", sans-serif;
}
main .products .item:hover a {
  backdrop-filter: blur(10.8px);
}
main .products .item:hover a > h3 {
  top: 100%;
}
main .products .item:hover .arrow {
  top: 40px;
  right: 40px;
  opacity: 1;
}
main .products .item:hover .text {
  padding: 0 0 0 75px;
  opacity: 1;
  transition-delay: 0.2s;
}