@charset "utf-8";
/*슬라이더상자에 포커스발생시 점선테두리 생기는걸 막아줌*/
div:focus{outline:none;}
html  {overflow-y: scroll; overflow-x: hidden;}
html, body {width: 100%; height: 100%; overflow-x: hidden;}
a {text-decoration:none;}
* {margin:0; padding:0;}
ul,ol {list-style:none;}
img {border:none; vertical-align:top;}
/*butto, input 태그는 폰트가 상속되지 않으므로 따로 지정해야됨*/
body,button,input {font:14px 'Noto Sans KR',sans-serif;  }
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

html, body {
  margin: 0;
  height: 100%;
  overflow-x: hidden;
  scroll-behavior: smooth;
}
.visual_section {
  position: relative;
  padding-bottom: 100vh; /* 💡 스크롤 전환을 위한 최소한의 공간 확보 */
}
.panel {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  z-index: 0;
  pointer-events: none; /* ✅ 추가: 스크롤 방해 안 하게 */
}
.slide {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease; /* 슬라이드 전환 애니메이션 */
}
.slide.active {
  opacity: 1;
  z-index: 2;
}
.image {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.caption {
  position: absolute;
  left: 50%;
  top: 40%;
  color: white;
  font-size: 1.8em;
  font-weight: 500;
  text-shadow: 1px 1px 4px rgba(0,0,0,0.5);
  white-space: nowrap; /* 텍스트가 한 줄로 유지되게 함 */
  word-break: keep-all;
}
.scroll-section {
  height: 700vh; /* 슬라이드 수만큼 */
  scroll-snap-type: y mandatory; /* 수직 스크롤 스냅 */
  overflow-y: scroll; /* 수직 스크롤을 활성화 */
}

.main_text {
  position: fixed;
  top:40%;
  left:80px;
  color: #fff;
  font-size: 28px;
  font-weight: bold;
  text-shadow: 1px 1px 4px rgba(0,0,0,0.5);
  width: calc(50% - 80px);
}
.main_text.hide {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}
.logo_text { 
  display: inline-flex;
  align-items: center;
}
.logo_text img {
  width: 180px;
  height: 100%;
}
.line {
  content: '';
  display: inline-flex;
  width:calc(50% - 40px);
  height: 4px;
  background-color: #ffffff;
  vertical-align: middle;
  box-shadow: 1px 1px 4px rgba(0,0,0,0.5);
  margin-left: 10px;
}

.service_wrap {  
  position: absolute;
  top:50%;
  left: 50%;
  width: 1200px;
  transform: translate(-50%, -50%);
  color: #fff;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
}
.service_wrap h2 {
  font-size: 32px;
  font-weight: bold;
  position: relative;
}
.service_wrap h2 img {
  width: 70px;
  position: absolute;
  top: -36px;
  left: 150px;
}

.service_wrap ul {
  margin-top: 40px;
}
.service_wrap li {
  height: 100px;
  margin-bottom: 20px;
  border-radius: 4px;
}

.service_wrap li p {
  font-size: 26px;
  font-weight: 500;
  line-height: 32px;
}
.service_wrap li span {
  font-size: 20px;
  margin-top: 10px;
  display: block;
}
.service_wrap li p img {
  width: 32px;
  margin-right: 10px;
}

.text {
  margin-top: 40px;
  font-size: 20px;
  word-break: keep-all;
  line-height: 50px;
}
.ending_page {
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translate(-50%, -50%);
  word-break: keep-all;
  text-shadow: 1px 1px 4px rgba(0,0,0,0.5);
  color: #fff;
}

.ending_page h2 {
  text-align: center;
 
}
.ending_page p {
  font-size: 28px;
  text-align: center;
  margin-top: 40px;
}


@media (max-width: 1600px) {
  .line {
    display: none;
  }
  .caption {
    left: 500px;
  }
}

@media (max-width: 1200px) {
  .main_text {
    width: 100%;
    left: 10%;
  }
  .caption {
    top:50%;
    left: 10%;
    white-space: normal;
  }
  .service_wrap {
    padding: 20px;
    width: calc(100% - 40px);;
  }
}


@media (max-width: 760px) {
  .main_text {
    top:30%;
    left: 40px;
  }
  .caption {
    top:40%;
    left: 40px;
    padding-right: 40px;
  }
  .service_wrap li {
  height: auto;
  }
}

@media (max-width: 420px) {
  .main_text {
    left: 20px;
  }
  .caption {
    left: 20px;
    padding-right: 20px;
  }
  .text {
    line-height: normal;
  }
  .ending_page {
    bottom:20%;
  }
}