@charset "UTF-8";
/* 인풋스타일*/
.visual-wrap {
  width: 100%;
  height: 100vh;
  color: #fff;
}
.visual-wrap .swiper-slide {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.visual-wrap .slide-1 {
  background-image: url("../img/main/visual-1.jpg");
}
.visual-wrap .slide-2 {
  background-image: url("../img/main/visual-2.jpg");
}
.visual-wrap .visual-txt-wrap {
  position: absolute;
  top: 29.629%;
  transform-origin: center top;
}
.visual-wrap .sub-txt {
  margin-bottom: 2.4rem;
  font-size: 3.4rem;
  font-weight: 600;
}
.visual-wrap .main-txt {
  line-height: 1.2;
  font-size: 7rem;
  font-weight: 900;
  letter-spacing: -2.8px;
}
.visual-wrap .swiper-pagination {
  left: 50% !important;
  top: 62.6%;
  bottom: auto !important;
  padding-left: 4rem;
  width: 100%;
  max-width: 162rem;
  text-align: left;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
}
.visual-wrap .swiper-pagination .swiper-pagination-bullet {
  width: 1.2rem;
  height: 1.2rem;
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 1.2rem;
  -webkit-border-radius: 1.2rem;
  -moz-border-radius: 1.2rem;
  -ms-border-radius: 1.2rem;
  -o-border-radius: 1.2rem;
}
.visual-wrap .swiper-pagination .swiper-pagination-bullet-active {
  width: 6rem;
  background-color: #fff;
  transition: width 0.4s 0s;
  -webkit-transition: width 0.4s 0s;
  -moz-transition: width 0.4s 0s;
  -ms-transition: width 0.4s 0s;
  -o-transition: width 0.4s 0s;
}

@media all and (max-width: 85.375rem) {
  .visual-wrap .sub-txt {
    font-size: 3rem;
  }
  .visual-wrap .main-txt {
    font-size: 6rem;
  }
}
@media all and (max-width: 64rem) {
  .visual-wrap .visual-txt-wrap {
    top: 35%;
  }
  .visual-wrap .sub-txt {
    font-size: 2.5rem;
  }
  .visual-wrap .main-txt {
    font-size: 4.5rem;
  }
  .visual-wrap .swiper-pagination .swiper-pagination-bullet {
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 0.8rem;
    -webkit-border-radius: 0.8rem;
    -moz-border-radius: 0.8rem;
    -ms-border-radius: 0.8rem;
    -o-border-radius: 0.8rem;
  }
  .visual-wrap .swiper-pagination .swiper-pagination-bullet-active {
    width: 4rem;
  }
}
@media all and (max-width: 63.9375rem) {
  .visual-wrap .swiper-pagination {
    padding-left: 2rem;
  }
}
@media all and (max-width: 47.9375rem) {
  .visual-wrap .sub-txt {
    font-size: 2rem;
  }
  .visual-wrap .main-txt {
    font-size: 3.4rem;
  }
}
/*
공통 타이틀 */
.sec-tit-wrap {
  text-align: center;
}
.sec-tit-wrap .sec-tit {
  margin-bottom: 4rem;
  line-height: 1.6;
  font-size: var(--sec-tit);
  font-weight: 700;
}
.sec-tit-wrap .sec-desc {
  line-height: 166.667%;
}
.sec-tit-wrap .sub-tit {
  line-height: 208.333%;
  font-size: var(--card-tit);
  font-weight: 600;
}

/*
섹션 1 소개*/
.icon-card-wrap {
  display: grid;
  grid-template-columns: repeat(4, minmax(calc((100% - 6rem) / 4), 1fr));
  gap: 2rem;
  margin-top: 4rem;
  text-align: center;
}
.icon-card-wrap .card {
  overflow: hidden;
  border-radius: 20px;
  background-color: #fff;
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15);
  transition: background-color 0.4s 0s;
  -webkit-transition: background-color 0.4s 0s;
  -moz-transition: background-color 0.4s 0s;
  -ms-transition: background-color 0.4s 0s;
  -o-transition: background-color 0.4s 0s;
}
.icon-card-wrap .card:hover {
  background-color: #ECF5E7;
  transition: background-color 0.4s 0s;
  -webkit-transition: background-color 0.4s 0s;
  -moz-transition: background-color 0.4s 0s;
  -ms-transition: background-color 0.4s 0s;
  -o-transition: background-color 0.4s 0s;
}
.icon-card-wrap .card > a {
  display: block;
  width: 100%;
  height: 100%;
  padding: 3rem;
}
.icon-card-wrap .card .icon-box {
  margin-bottom: 3rem;
  font-size: 0;
}
.icon-card-wrap .card .link-tit {
  margin-bottom: 0.4rem;
  line-height: 208.333%;
  font-size: var(--card-tit);
  font-weight: 600;
}
.icon-card-wrap .card .link-desc {
  line-height: 166.667%;
}
.icon-card-wrap .card.item-1:hover img {
  content: url("../img/icon/icon-1h.svg");
}
.icon-card-wrap .card.item-2:hover img {
  content: url("../img/icon/icon-2h.svg");
}
.icon-card-wrap .card.item-3:hover img {
  content: url("../img/icon/icon-3h.svg");
}
.icon-card-wrap .card.item-4:hover img {
  content: url("../img/icon/icon-4h.svg");
}

@media all and (max-width: 47.9375rem) {
  .icon-card-wrap {
    grid-template-columns: repeat(2, minmax(calc((100% - 2rem) / 24), 1fr));
  }
  .icon-card-wrap .card > a {
    padding: 1.5rem;
  }
  .icon-card-wrap .card .icon-box {
    margin-bottom: 1.5rem;
  }
  .icon-card-wrap .card .icon-box img {
    width: 50%;
  }
  .icon-card-wrap .card .link-tit {
    line-height: 1.5;
  }
}
/*
섹션2*/
.sec-2 {
  background: url("../img/main/sec2-bg.jpg") center/cover no-repeat;
}
.sec-2 .sec-tit-wrap .sec-tit {
  margin-bottom: 1rem;
  line-height: 1.6;
}
.sec-2 .sec-tit-wrap .sub-tit {
  line-height: 1.25;
  font-weight: 400;
  color: #fff;
}

/*
공통 탭*/
.tab-con-wrap {
  position: relative;
  width: 100%;
}
.tab-con-wrap .sec-tit-wrap {
  position: absolute;
  text-align: left;
  top: 5.2rem;
  margin-bottom: 5rem;
}
.tab-con-wrap .sec-tit-wrap .sec-tit {
  line-height: 1.6;
}
.tab-con-wrap .tab-wrap {
  z-index: 10;
  position: absolute;
  bottom: 5.2rem;
  width: 47%;
  max-width: 63rem;
}
.tab-con-wrap .tab-wrap ul {
  display: flex;
  justify-content: flex-start;
  gap: 1rem;
}
.tab-con-wrap .tab-wrap li {
  width: calc((100% - 3rem) / 4);
  min-width: calc((100% - 3rem) / 4);
  max-width: 15rem;
  height: 5rem;
  line-height: 5rem;
  white-space: nowrap;
  background-color: #fff;
}
.tab-con-wrap .tab-wrap li button {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  text-align: center;
  font-size: var(--com-f);
  color: #959595;
  border: 1px solid #959595;
}
.tab-con-wrap .tab-wrap li:hover {
  background-color: #70B23A;
  transition: background-color 0.4s 0s;
  -webkit-transition: background-color 0.4s 0s;
  -moz-transition: background-color 0.4s 0s;
  -ms-transition: background-color 0.4s 0s;
  -o-transition: background-color 0.4s 0s;
}
.tab-con-wrap .tab-wrap li:hover button {
  font-weight: 600;
  color: #fff;
  transition: all 0.4s 0s;
  -webkit-transition: all 0.4s 0s;
  -moz-transition: all 0.4s 0s;
  -ms-transition: all 0.4s 0s;
  -o-transition: all 0.4s 0s;
}
.tab-con-wrap .tab-wrap li.active {
  background-color: #70B23A;
}
.tab-con-wrap .tab-wrap li.active button {
  font-weight: 600;
  color: #fff;
}

@media all and (max-width: 63.9375rem) {
  .tab-con-wrap .tab-wrap ul {
    gap: 0.5rem;
  }
  .tab-con-wrap .tab-wrap li {
    width: calc((100% - 1.5rem) / 4);
    min-width: calc((100% - 1.5rem) / 4);
  }
}
@media all and (max-width: 47.9375rem) {
  .tab-con-wrap .tab-wrap li {
    height: 4rem;
    line-height: 4rem;
  }
  .tab-con-wrap .tab-wrap li button {
    font-size: 1.2rem;
  }
}
.panel-wrap {
  position: relative;
  width: 100%;
  height: 43rem;
}

.panel {
  display: none;
  width: inherit;
  height: inherit;
}
.panel.active {
  display: grid;
}
.panel .panel-tit {
  color: #70B23A;
}

@media all and (max-width: 47.9375rem) {
  .panel-wrap {
    height: auto;
  }
}
/*
섹션 3 제품소개*/
.sec-3 {
  background: url("../img/main/sec3-bg.jpg") center/cover no-repeat;
}
.sec-3 .panel {
  display: grid;
  position: absolute;
  grid-template-columns: 49.4% minmax(auto, 76rem);
}
.sec-3 .panel .panel-txt {
  opacity: 0;
  padding-top: 16.6rem;
}
.sec-3 .panel .panel-tit {
  margin-bottom: 1rem;
  line-height: 1.8;
  font-size: var(--sec-tit);
  font-weight: 700;
  color: #70B23A;
}
.sec-3 .panel .panel-desc {
  font-size: var(--card-tit);
  line-height: 166.667%;
}
.sec-3 .panel > a {
  opacity: 0;
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.sec-3 .panel > a .more-btn {
  opacity: 0;
  z-index: 10;
  position: absolute;
  left: 50%;
  top: 55%;
  width: 17rem;
  height: 5rem;
  line-height: 5rem;
  text-align: center;
  font-weight: 600;
  color: #fff;
  background-color: #70B23A;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
}
.sec-3 .panel.panel-1 > a {
  background-image: url("../img/main/slide-1.jpg");
}
.sec-3 .panel.panel-2 > a {
  background-image: url("../img/main/slide-2.jpg");
}
.sec-3 .panel.panel-3 > a {
  background-image: url("../img/main/slide-3.jpg");
}
.sec-3 .panel.panel-4 > a {
  background-image: url("../img/main/slide-4.jpg");
}
.sec-3 .panel.active .panel-txt {
  opacity: 1;
  transition: opacity 1s 0s;
  -webkit-transition: opacity 1s 0s;
  -moz-transition: opacity 1s 0s;
  -ms-transition: opacity 1s 0s;
  -o-transition: opacity 1s 0s;
}
.sec-3 .panel.active > a {
  opacity: 1;
}
.sec-3 .panel.active > a .more-btn {
  opacity: 1;
  top: 50%;
  transition: all 1s 0s;
  -webkit-transition: all 1s 0s;
  -moz-transition: all 1s 0s;
  -ms-transition: all 1s 0s;
  -o-transition: all 1s 0s;
}
.sec-3 .tab-wrap {
  position: absolute;
  bottom: 5.2rem;
}

@media all and (max-width: 64rem) {
  .sec-3 .panel > a .more-btn {
    width: 15rem;
  }
}
@media all and (max-width: 63.9375rem) {
  .sec-3 .panel .panel-tit {
    line-height: 1.2;
  }
  .sec-3 .panel > a .more-btn {
    width: 13rem;
  }
}
@media all and (max-width: 47.9375rem) {
  .sec-3 .tab-con-wrap .sec-tit-wrap {
    margin-bottom: 0;
  }
  .sec-3 .tab-wrap {
    position: relative;
    top: 0;
    width: 100%;
  }
  .sec-3 .panel-wrap {
    height: 50rem;
  }
  .sec-3 .panel {
    grid-template-columns: 1fr;
    grid-template-rows: 20rem minmax(30rem, 100vw);
  }
  .sec-3 .panel .panel-txt {
    padding-top: 7rem;
  }
  .sec-3 .panel > a .more-btn {
    width: 10rem;
    height: 4rem;
    line-height: 4rem;
  }
}
/*
섹션 4- 지도 */
.sec-4 {
  background: url("../img/main/sec4-bg.jpg") center/cover no-repeat;
}
.sec-4 .panel-wrap {
  background-color: #fff;
}
.sec-4 .panel {
  grid-template-columns: minmax(40%, 63rem) minmax(50%, 91rem);
}
.sec-4 .panel-txt {
  padding: 5rem 6rem;
}
.sec-4 .panel-tit {
  line-height: 1.2;
  font-size: var(--sub-tit);
  font-weight: 800;
}
.sec-4 .panel-desc {
  margin: 2rem 0;
  line-height: 1.25;
  font-size: var(--card-tit);
  font-weight: 500;
  color: #333;
}
.sec-4 .hr {
  margin: 1rem 0;
  width: 100%;
  height: 1px;
  background-color: #959595;
}
.sec-4 .tab-wrap {
  left: 6rem;
  bottom: 14.4rem;
}
.sec-4 .map iframe {
  width: 100% !important;
  height: 100% !important;
}
.sec-4 .info {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 0 2rem;
}
.sec-4 .info dl {
  display: flex;
  justify-content: flex-start;
  line-height: 166.667%;
  gap: 0.5rem;
  position: relative;
}
.sec-4 .info dl dt {
  font-weight: 700;
}
.sec-4 .info dl:first-child::after {
  position: absolute;
  right: -1.2rem;
  content: "|";
  font-size: 1.2em;
}

.sub-link-wrap {
  position: absolute;
  left: 50%;
  bottom: -5rem;
  display: flex;
  justify-content: center;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  width: 88.7%;
  max-width: 140rem;
  height: 10rem;
  line-height: 1.25;
  text-align: center;
  font-size: var(--card-tit);
  font-weight: 600;
  color: #fff;
}
.sub-link-wrap li {
  background-color: #70B23A;
  border-right: 1px solid #fff;
  width: 25%;
}
.sub-link-wrap li:last-child {
  border-right: 0 none;
}
.sub-link-wrap li a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.sub-link-wrap li a i {
  margin-right: 2rem;
}
.sub-link-wrap li a i img {
  vertical-align: middle;
}

@media all and (max-width: 85.375rem) {
  .sub-link-wrap {
    bottom: -4rem;
    height: 8rem;
  }
}
@media all and (max-width: 64rem) {
  .sub-link-wrap {
    bottom: -4rem;
    height: 7rem;
  }
  .sec-4 .panel-txt {
    padding: 3rem 4rem;
  }
  .sec-4 .tab-wrap {
    left: 4rem;
  }
}
@media all and (max-width: 47.9375rem) {
  .sec-4 .panel-wrap {
    padding-top: 7rem;
  }
  .sec-4 .panel {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 40rem;
  }
  .sec-4 .panel-txt {
    padding: 3rem 2rem;
  }
  .sec-4 .tab-wrap {
    left: 2rem;
    top: 2rem;
    bottom: auto;
    width: 100%;
  }
  .sec-4 .sub-link-wrap {
    bottom: -3rem;
    height: 4rem;
    font-size: 1.2rem;
  }
  .sec-4 .sub-link-wrap li a i {
    display: inline-block;
    margin-right: 0.5rem;
    width: 1.2rem;
  }
}