/* reset */
*{margin:0;padding:0;box-sizing: border-box;}
html,body{font-size:10px;position: relative;height: 100%;scrollbar-width: none;}
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:normal;}
ul,ol{list-style:none;}
a{text-decoration:none;color:inherit;}
img{max-width:100%;}
/* header */
header{display:flex;display:none;background:none;position:fixed;top:0;width:calC(100% - 4em);justify-content:space-between;padding:1em 2em;align-items: center;transition:all 0.2s ease 0s;}
header::after{content: "";position: absolute;top: 103px;width: 100vw;backgrounds: #ffffff;height: 50vh;left: 0;}
nav > ul{display:flex;color:#fff;column-gap:5em;font-size:2.4em;}
nav > ul > li:hover{color:green;}
nav > ul ul{color:green;position:absolute;top:123px;z-index:1;row-gap:3em;font-size:0.9em;display:flex;flex-direction:column;row-gap:1em;}
header .openHouse, header .call{font-size:2.4em;color:#fff;}
.fs_30{font-size: 0.5em;margin-top: 1em;}

.wrap section{height:100vh;border:1px solid red;}

#header.hide{transform:translateY(-100%);transition:all 0.3s ease 0s;}

/* common */
.mySwiper,.mySwiper .swiper-wrapper{width:100%;height:100%;}
:root {
  --theme-color: #024647;
  --dark-color: #148ec5;
  --main-color: #006a86;
  --menu-color: #12284c;
  --accent-color: #9854a7;
  --second-color: #9854a7;
  --basic-color: #c1b9ad;
  --simple-color: #f1f1f1;
  --white: #fff;
  --hover-color: #f5f38f;
  --green-color: #1ca56e;
  --header-color: rgba(255, 255, 255, .05);
  --header-color-on: rgba(255, 255, 255, .95);
  --white-a: rgba(255, 255, 255, .8);
  --white-a1: rgba(255, 255, 255, .1);
  --white-a2: rgba(255, 255, 255, .2);
  --white-a3: rgba(255, 255, 255, .3);
  --white-a5: rgba(255, 255, 255, .5);
  --brightgray: #fcfcfc;
  --lightgray: #e4e4e4;
  --gray: #cccccc;
  --mudgray: #686868;
  --darkgray: #555555;
  --tanblack: #333;
  --black: #111;
  --black-a: rgba(0, 0, 0, .2);
  --black-a1: rgba(0, 0, 0, .1);
  --transparent: transparent;
  --transition: all 0.3s ease-in-out;
  --transition2: all 0.2s ease-in-out;
  --backdrop-filter: blur(2px);
  --filter: blur(10px) brightness(0.85);
  --box-shadow: 1px 1px 8px rgba(0, 0, 0, .3);
  --box-shadow1: 1px 1px 8px rgba(0, 0, 0, .1);
  --box-shadow2: 0px 5px 5px rgba(0, 0, 0, .1);
  --box-shadow3: 0px 0px 1px rgba(0, 0, 0, .5);
  --box-shadow4: 0px 0px 8px rgba(0, 0, 0, .95);
  --transform: scale(1.1);
  --logo: 22rem;
  --logo-height: 5.3rem;
  --header-height: 12rem;
  --header-height-: -12rem;
  --header-menu-height: 36rem;
  --smenu-height: 16rem;
  --sub-visual-height: 30vh;
  --section-width: 1800px;
  --common-width: 1300px;
  --wide-width: 1200px;
  --width: 900px;
  --wide-padding: 5vw;
  --btn-position:0.035;
  --btn-size:0.075;
Show all properties (10 more);
}

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  height:100vh;
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; 
}

.top_txt{font-size:calC(50vw * 0.05);font-weight:700;text-align:center;padding:1rem 0;color:var(--theme-color);padding-bottom:0;}
.top_txt strong{font-size:calC(50vw * 0.052);font-weight:800;}

.top_subtxt{
  color: var(--mudgray);
  font-size: 24px;
  letter-spacing: -0.5px;
  margin-bottom: 2rem;
}

.titleh3{
  font-family: 'NanumSquare', sans-serif;
  font-weight: 800;
}
.section .top_txt,.section .top_subtxt{transform:translateY(30%);opacity:0;transition:all 0.3s ease 0s;}
.section .top_txt.animate,.section .top_subtxt.animate{transform:translateY(0);opacity:1;}

.swiper-button-next svg, .swiper-button-prev svg {
    display: none;
}

/* section01 */
.swiper-container01{overflow:hidden;position:relative;width:100%;height:100%;z-index:10;}
.swiper-container01 .swiper-button-prev, .swiper-container01 .swiper-button-next,.section02 .swiper-button-prev, .section02 .swiper-button-next{
  left: calc(100vw* var(--btn-position));
  width: calc(50vw* var(--btn-size));
  height: calc(50vw* var(--btn-size));
  border-radius: 50%;
  transition: all 0.3s ease 0s;
}

.swiper-container01 .swiper-button-next, .section02 .swiper-button-next{
    left:auto;
    right:calc(100vw * var(--btn-position));
}
.swiper-button-prev:after, .swiper-button-next:after{
    border: 1px solid #fff;
    width: calc(50vw* var(--btn-size));
    height: calc(50vw* var(--btn-size));
    text-align: center;
    font-size: calC(50vw * 0.035) !important;
    line-height: calc(50vw* var(--btn-size)) !important;
    font-weight: bold;
    color: #fff;
    border-radius: 50%;
}
.swiper-container01 .swiper-button-prev:hover, .swiper-container01 .swiper-button-next:hover,.section02 .swiper-button-prev:hover, .section02 .swiper-button-next:hover{
  opacity:0.5;
}
.section02 .swiper-button-prev:after, .section02 .swiper-button-next:after{
  border: 1px solid #c7c3c1;
  color: var(--tanblack);
  width: calC(50vw * 0.075);
  height: calC(50vw * 0.075);
  font-size: calC(50vw * 0.035) !important;
  line-height: calC(50vw * 0.075) !important;
  top: 0;
  position: absolute;
}
.swiper-container01 .swiper-pagination{
  width: 80px;
  height:3px;
  position: absolute;
  bottom: 3rem;
  left: 50%;
  top: auto;
  transform: translateX(-50%);
}
.swiper-container01 .swiper-pagination .swiper-pagination-progressbar-fill{
  background:#fff;
}

.swiper-container01 li{overflow:hidden;width:100vw;}

.slideTxt{
    position: absolute;
    left: 10%;
    top: 25%;
    color: #fff;
    font-weight: bold;
    text-align: left;
    font-size: 5rem;
    line-height: 0.8em;
    filter: drop-shadow(2px 4px 6px black);
    /* letter-spacing: -0.5rem; */
}

.slideTxt h3{line-height:1.35em;}
.slideTxt strong{font-weight:600;}

@keyframes zoomImg {
  0%{transform:scale(1);}
  100%{transform:scale(1.1);}
}
@keyframes fadeIn {
  0%{transform:translateY(50%);opacity:0;}
  100%{transform:translateY(0);opacity:1;}
}

.swiper-container01 .scaleAnimation img{
  animation: zoomImg 2s forwards ease-in-out;
}
.swiper-container01 .scaleAnimation .slideTxt{
  animation: fadeIn 0.3s forwards ease-in-out;

}

/* section02 */
.section02{
  background: url(../images/main/section01_bg.png) no-repeat center center / cover;
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding:5rem 0;
}

.section02 .top_txt{
  margin-bottom:2rem;
}

.swiper-container02{
    width: 70%;
    margin: 0 auto;
    overflow: hidden;
}
.pagination02{margin-top:1rem;}

.pagination02 .swiper-pagination-bullet{
  width:1.5rem;
  height:1.5rem;
  background:#e4e4e4 !important;
  opacity: 1;
  transition: all 0.3s ease 0s;
}

.pagination02 .swiper-pagination-bullet:hover{
  opacity: 0.4;
}

.pagination02 .swiper-pagination-bullet-active{
  background:var(--main-color) !important;
}

/* section03 */
.section03{
  position:relative;
  display: grid;
  grid-template-columns: revert;
  grid-template-columns: revert;
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: 50% 50%;
  background:#f1f1f1;
  padding: 5rem 0;
}

.sec03Container{
  width: 70%;
  margin: 0 auto;
  height: 100vh;
  top: 0;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
}

.section03 .swiper-wrapper{
  position: absolute;
  /* height: calC(50vh - 10rem); */
  top: 10%;
  /* bottom: 43rem; */
  width: 100%;
  margin: 0 auto;
}

.section03 li{
  display:flex;
  column-gap: 3rem;
  background: transparent;
  justify-content: flex-start;
  overflow: hidden;
}

.section03 li img{
  max-width: 37vw;
  width:100%;
  height:50%;
  border-radius: 30px;
  aspect-ratio: 2 / 0.7;
  filter: drop-shadow(6px 6px 6px #3d3d3d);
}

.section03_txt{
  height: calC(50vh - 10rem);
  width: 80%;
  font-size: calC(50vw* 0.07);
  color: var(--theme-color);
  position: relative;
  line-height: calC(100vw* 0.03);
  font-weight: 700;
  display: inline-block;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: baseline;
  justify-content: center;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  transform: translateY(30px);
  transition: all 0.3s ease 0s;
  opacity:0;
}

.section03_txt.animate{
  transform: translateY(0px);
  opacity:1;
}

.section03_txt img{
  width: 100%;
  height: 71%;
  object-fit: contain;
  max-width: 51px;
}

/* .section03_txt:after{
  content: "";
  background: url(../images/main/section0_txt.png) no-repeat center center / contain;
  position: absolute;
  left: 310px;
  height: 111px;
  width: 83px;
} */

.sec03_txt{
  text-align: left;
  color: var(--theme-color);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.sec03_txt > *{
  margin-bottom:1rem;
}
.sec03_txt p{
  font-size:2rem;
  width:80%;
}

.sec03_txt .pagination_num{
  font-size:2rem;
  font-weight:500;
}
.sec03_txt span{
  font-size:2rem;
  font-weight:500;
}
.sec03_txt h4{
  font-size:3rem;
  margin-bottom:1rem;
  font-weight: 600;
  line-height: 1.1;
}

.pagination03{
  display: flex;
  flex-direction: column;
  width: 2rem !important;
  right: 2rem;
  position: absolute;
  z-index: 1;
  row-gap: 1rem;
  top: 50% !important;
  transform: translateY(-50%) !important;
  left: auto !important;
  bottom: auto !important;
}
.pagination03 span{width:15px;height:15px;}
.pagination03 .swiper-pagination-bullet-active{
  background:var(--theme-color);
}

/* section04 */
.section04{position:relative;}
.sec04_container{width:100%;}
.section04 .swiper-container04{height:100%;}
.section04 li{position:relative;max-width:100vw;}
.sec4_txt{
  position: absolute;
  right: 0;
  bottom: 0;
  background: var(--theme-color);
  height: 50vh;
  width: 38vw;
  padding: 6rem;
  color: #fff;
  text-align: left;
  font-size:2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.sec4_txt .wordBk{
  font-family: "Noto Serif KR", serif;
  font-size:5.5rem;
  line-height:4rem;
  padding-bottom: 5rem;
  display: flex;
  justify-content: space-between;
  width: 52%;
}
.sec4_txt .wordBk:nth-of-type(1){
  padding-bottom:1rem;
  font-weight:bold;
}
.sec4_txt h4{
  padding-top: 3rem;
  margin-bottom:3rem;
  font-size: 3.5rem;
  border-top:1px solid #fff;
  font-family: 'PRETENDARD';
}
.sec4_txt img{
  background: #d8e2ec;
  width: 9.5rem;
  height: 9.5rem;
  object-fit: contain;
  position: absolute;
  right: 0;
  top: 0;
  padding: 2rem;
}

.pagination04{
  font-size: 30px;
  color: #fff;
  position: absolute;
  top: 0 !important;
  z-index: 10;
  width: 20% !important;
  display: flex;
  flex-direction: column;
  height: 100vh;
  align-items: center;
  justify-content: center;
  transform:translateX(-100%);opacity:1;
  transition: all 0.3s ease 0s;
}
.pagination04.animate{transform:translateX(0);opacity:1;}
.pagination04 li{
  font-size: 10px;
  color: #fff;
  width: 100%;
  height: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background:none;
  border:1px solid #fff;
  border-radius:0;
}

.pagination04 li h5{
  font-size: 4.5rem;
  font-family: "Noto Serif KR", serif;
  font-weight: 700;
}
.pagination04 li p{
  font-size:2.5rem;
}


/* section05 */
.section05{
  /* height:auto !important; */
  flex-direction: column;
  padding-top:5rem;

}

.section05 img{
  object-fit: cover;
  height: auto;
  width: 100%;
  margin: 0 auto;
}

/* section06 */
.section06{
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  /* padding: 5rem 0rem; */
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}
.common-customer .space {
  width: 48vw;
  height: auto;
  padding: 0;
  background: url(./images/main/section08_1.jpg) no-repeat center center / cover;
  border-radius: 0 3rem 3rem 0px;
  transition: all 0.3s ease 0s;
}

.common-customer .space.animate{filter: drop-shadow(19px 27px 0px #024647);}

.maintit {
  color: var(--theme-color);
  font-size: 5.5rem;
  text-transform: capitalize;
  font-weight: 500;
}
.subtit {
  color: var(--mudgray);
  font-size: 24px;
  letter-spacing: -0.5px;
}
.common-customer .frm-customer {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.common-customer .frm-customer fieldset {
  width: 100%;
  border: none;
}
.common-customer .frm-customer fieldset legend{
  display:none;
}
.common-customer {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 0rem;
  max-width: 100% !important;
  margin-top: 0rem;
  column-gap: 5rem;
  width: 100%;
}
.customer-box{
  width: 50%;
  padding: 0 14rem;
}
.common-customer .frm-customer .desc {
  display: flex;
  align-items: center;
  /* justify-content: space-between; */
  gap: 2rem;
  padding: 1rem 2rem;
  line-height: 2.2;
  border: 1px solid var(--mudgray);
  border-radius: 0.5rem;
  color: var(--tanblack);
  font-weight: 600;
  box-sizing: border-box;
  margin-bottom: 1rem;
}
.common-customer .frm-customer .desc label {
  flex-basis: 10rem;
  width: 10rem;
}

.common-customer .frm-customer .desc:nth-of-type(3) label:nth-of-type(1) {
  flex-basis:10rem !important;
}
.common-customer .frm-customer .desc:nth-of-type(3) label {
  flex-basis:1rem !important;
}
.common-customer .frm-customer .desc input{
  font-family: var(--pretendard);
  font-size: 2rem;
  letter-spacing: -0.03em;
  color: var(--mudgray) !important;
}
.common-customer .frm-customer .privacy {
  color: var(--theme-color);
  font-size: 1.85rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4rem;
  margin-bottom: 4rem;
}
.common-customer .frm-customer .privacy .text {
  font-weight: 600;
  text-decoration: underline;
}
.common-customer .frm-customer .privacy .input {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}
.common-customer .frm-customer .privacy .input label {
  position: relative;
  margin-right: 0;
}
.common-customer .btn-register {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  border-radius: 0.5rem;
  border: 1px solid var(--white-a2);
  background: var(--theme-color);
  color: var(--white);
  width: 100%;
  padding: 3rem 0;
  transition: var(--transition2);
  cursor: pointer;
  font-size: 2.65rem;
  font-family: 'Noto Sans KR';
}
.common-customer .btn-register::after {
  content: "";
  background: url(../images/common/btn_register.png) no-repeat center bottom / contain;
  width: 32px;
  height: 26px;
  aspect-ratio: 16 / 3;
  transition: all 0.3s ease 0s;
}
.common-customer .btn-register:hover::after{
  transform:translateX(100%);
}
.common-customer .frm-customer input[type=text], .common-customer .frm-customer input[type=date], .common-customer .frm-customer input[type=time] {
  border: none;
}

.common-customer .frm-customer .desc input[type=text], .common-customer .frm-customer .desc input[type=text]:read-only, .common-customer .frm-customer .desc input[type=number], .common-customer .frm-customer .descinput[type=password], .common-customer .frm-customer .desc textarea {
  font-family: var(--pretendard);
  font-size: 2rem;
  letter-spacing: -0.03em;
  color: var(--mudgray) !important;
}

/* section07 */
.section07{
  /* height:70vh !important; */
  flex-direction: column;
  padding-top:5rem;
}
.section07 > div:nth-of-type(1){
  display:flex;
  justify-content:center;
  color:#fff;
  background:var(--theme-color);
  column-gap: 4rem;
}
.section07 > div{
  height: calC(100% - 10rem);
  width:100%;
}
.section07 .infoTxt{
  width:50%;
  height:50%;
  flex-direction:column;
  text-align:left;
  padding:5rem 16rem;
  justify-content: space-around;
}
.section07 .infoTxt h4{
  font-size:4rem;
  font-weight:700;
  margin-bottom: 3rem;
}
.call{font-size:2.5rem;}
.call_num{
  font-size:4rem;
  font-weight:700;
}
.infoMap {
  position: relative;
  width: 50vw;
  padding:5rem 10rem;
  margin: 0 auto;
  background: url(../images/main/info_R.png) no-repeat center center / cover;
}

.root_daum_roughmap_landing {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100% !important;
  height: 100%;
  transform: translate(-50%, -50%);
  max-height: 420px;
}
.root_daum_roughmap .wrap_controllers{
  display:none;
}
.section07 .infoTxt div{
  flex-direction:column;
  border-bottom: 1px solid #fff;
  padding-bottom: 4rem;
  height:100%;
}
.section07 .infoTxt div:nth-of-type(2){
  padding-top:4rem;
  border-bottom:none;
}
.infoMap img{width:100%;height:100%;object-fit: contain;}

footer {
  padding:5rem;
  position: fixed;
  bottom: 0;
  width: 100%;
  /* height: 50vh !important; */
  background: #333 !important;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  /* transform: translateY(100%); 기본적으로 화면 아래로 숨김 */
  transition: transform 0.3s ease-in-out; /* 부드러운 애니메이션 */
  z-index: 0;
}

footer.visible {
  display: block; /* 마지막 슬라이드에서만 표시 */
}

footer .inner{
  margin: 0;
  display: flex;
  justify-content: space-between;
  height: 100%;
  border-radius: 2rem;
  padding: 5rem;
  /* flex-direction: column; */
}

footer .f_txt{
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  padding-bottom: 3rem;
  border-bottom: 1px solid #fff;
  height: 50%;
}

.footer .f_right{
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}
footer #btTop{
  margin-bottom: auto;
  z-index: 4;
}
footer .f_tel{
  flex-direction: row;
  font-size: 4rem;
  font-weight: 700;
  align-items: center;
  justify-content: center;
  margin-bottom: 2rem;
}
footer .copy {
  font-size: 1.65rem;
  opacity: .5;
}
footer .license {
  font-size: 1.5rem;
  font-weight: 200;
  opacity: .5;
  display: none;
}

.fp-watermark{opacity:0;}

/* 너비 768px 이하일 때 */
@media (max-width:768px){
  :root{font-size:6px;}
  .swiper-container01 .swiper-button-prev, .swiper-container01 .swiper-button-next, .section02 .swiper-button-prev, .section02 .swiper-button-next{
    width:25px;
height:25px;
  }
  .swiper-button-prev:after, .swiper-button-next:after{
    width:25px;
    height:25px;
    line-height: 25px !important;
    font-size: 13px !important;
  }
  .swiper-container02{
    width:90%;
  }
  .section02 li{
    height:auto;
  }
  .section02 .slide_arrow{
    display:none;
  }
  .section02 .top_txt{font-size:3rem;}
  .top_txt strong{font-size:3rem;}
  .sec03Container{width:90%;display: flex;flex-direction: column;justify-content: center;row-gap: 4rem;}
  .section03_txt{width:100%;height: auto;font-size: 3rem;line-height: normal;}
  .sec03_txt{width:100%;}
  .swiper-container03{height:60%;}
  .section03 .swiper-wrapper{top:auto;}
  .section03 li{
    flex-direction: column;
    row-gap: 4rem;
  }
  .section03 li > img{max-width:none;height:40%;filter:drop-shadow(0px 5px 1px #3d3d3d);}
  /* .pagination03{display:none;} */
  .pagination03{
    top: unset !important; 
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: auto !important;
    bottom: 10% !important;
    flex-direction: row;
    justify-content: center;
    width:auto !important;
  }
  .section04 .swiper-slide img{height:50vh;margin-bottom:50vh;margin-left: 20%;}
  .sec4_txt{height:50vh;width:80vw;}
  .section04 .sec4_txt img{height:9.5rem;}
  .pagination04 {background:var(--menu-color);}


  .common-customer .space{display:none;}
  .customer-box{width:100%;padding: 0 4rem;display: flex;flex-direction: column;align-items: center;justify-content: space-evenly;}

  .section05 img{width:100%;}

  .section06{height:100vh;}

  .section07 {background:transparent;}
  .section07 > div{
    flex-direction: column-reverse;
  }
  .section07 .infoTxt{
    padding:5rem 6rem;
  }
  .section07 .infoTxt div{
    height:auto;
  }
  .section07 .infoTxt,.infoMap{
    width:100%;
    height:50vh;
    padding: 5rem 4rem;
  }
}
/* 너비 400px 이하일 때 */
@media (max-width:400px){
  :root{
    font-size:5px;
    
  }
}