.playerBox {
      background: url('../images/video_bg.jpg');
/*    height: 100vh;*/
	  height: calc(var(--vh, 1vh) * 100);
      width: 100%;
/*      position: relative;*/
	  position: sticky;
	  top:0;
      display: inline-block;
    }

.media-button:hover {
    background-color: rgb(0, 0, 0,0.8);
    color: #fff;
}

.media-button {
    background-color: rgb(0, 0, 0, 0);
    color: #fff;
}
.media-button.on {
background-color: rgb(0, 0, 0, 0.5);
}
.media-button {
    width: 70px;
    height: 70px;
    border-radius: 100%;
	display: flex;
    justify-content: center;
    align-items: center;
}
.media-button.play {
 position:absolute;
 right:calc(50% - 35px);
 bottom:calc(50% - 35px);
 transition:all 0.3s ease-out;
}

.media-button svg {
width:40px;
}

.media-button.pause svg {
width:30px;
}

.media-button.pause {
    width: 50px;
    height: 50px;
 position:absolute;
 right:20px;
 bottom:20px;
 transition:all 0.3s ease-out;
}

.goto {
display:flex;
align-items: center;
justify-content: center;
/*height: 100vh;*/
height: calc(var(--vh, 1vh) * 100);
}

.mousebox{
 position:absolute;
 right:calc(50% - 20px);
 bottom:10px;
 z-index:3;
 opacity:1;
 transition:all 0.3s;
}

.mouse {
	width: 40px;
	display: block;
	margin: 0px auto;
}

/* 휠 애니메이션 */
@keyframes wheelMove {
	0% { transform: translateY(0); opacity: 1; }
	50% { transform: translateY(10px); opacity: 1; }
	100% { transform: translateY(0); opacity: 1; }
}

.wheel {
	animation: wheelMove 1.5s infinite ease-in-out;
}

.main_title {
position:absolute;
display:flex;
align-items: center;
justify-content: center;
/*height: 100vh;*/
top: -70px;
height: calc(var(--vh, 1vh) * 100);
flex-direction: column;
opacity:1;
transition:0.3s all;
}

.main_title .title1{
color:#ffffff;
font-size:4em;
text-align:center;
margin-bottom: 7px;
text-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.main_title .title2{
color:#ffffff;
font-size:3.2em;
text-align:center;
text-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

@media all and (max-width:768px) {
.main_title .title1{
color:#ffffff;
font-size:3em;
}

.main_title .title2{
color:#ffffff;
font-size:2.4em;
}

}


 .index_menu {
 padding:80px 0;
 height: 100vh;

 }
@media (max-width: 768px){
 .index_menu {
 padding:50px 5px 30px;
 }
}

.movehide {
opacity:0 !important;
}


    #slider {
      position: relative;
      width: 100%;
      height: 100vh;
	  overflow:hidden;
    }

.slide {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  opacity: 0;
  z-index: 0;
  transition: opacity 1s ease-in-out;
}

.slide.active {
  display: flex;
  opacity: 1;
  z-index: 1;
}

/* 배경 이미지 전용 요소 */
.slide .bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  z-index: 0;
  animation: zoom-in 10s ease-in-out forwards;
}

/* 텍스트는 위에 겹쳐서 보임 */
.overlay-text {
  position: relative;
  z-index: 1;
  color: white;
  text-align: center;
  padding: 20px 40px;
  border-radius: 10px;
}

.bg {
  transform: scale(1);
  will-change: transform;
}

.bg.zoom-in {
  animation: zoom-in 10s ease-in-out forwards;
}

@keyframes zoom-in {
  from { transform: scale(1); }
  to   { transform: scale(1.1); }
}


    .overlay-text .title {
      margin: 0;
      font-size: 48px;
    }

    .overlay-text p {
      margin: 10px 0 0;
      font-size: 20px;
    }

    .progress-bar {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 7px;
      background: #f87c28;
      width: 0;
	  z-index:3;
    }

    .pagination {
      position: absolute;
      bottom: 20px;
      right: 20px;
      /*transform: translateX(-50%);*/
      color: white;
	  z-index:3;
    }

    .pagination span {
      margin: 0 5px;
      cursor: pointer;
      font-size: 18px;
      opacity: 0.5;
    }

.pagination span.active {
  opacity: 2;
  cursor: default;           /* 마우스 커서 변경 */
  pointer-events: none;      /* 클릭 방지 */
}
.qualitybox {
	width:100%;
	height:100vh;
	display: flex;
	background-color:#0f1c46;
}
.qualitybox .leftbox{
width:50%;
height:100%;
overflow:hidden;
background:url('../images/quality_bg.jpg') no-repeat right/cover;
}

.qualitybox .rightbox{
width:50%;
height:100%;
background:url('../images/tst_bg3s.png') repeat;
}
.qualitybox .rightbox .inner {
max-width:675px;
margin:0;
padding:150px 50px;
}
.qualitybox .rightbox .inner h2 {
color:#fff;
font-size:48px;
margin-bottom:10px;
}
.qualitybox .rightbox .inner .sub{
color:#fff;
font-size:24px;
}
.qualitybox .rightbox .inner .text{
color:#fff;
font-size:20px;
}

.qualitybox .rightbox .inner .valveimg {
padding:100px;
}
.qualitybox .rightbox .inner .valveimg img {
max-width:100%;
}
@media (max-width: 1300px){
.qualitybox .rightbox .inner .valveimg {
padding:70px !important;
}
}
@media (max-width: 1000px) {
	.qualitybox .rightbox .inner .valveimg {
	padding:50px 30px !important;
}
}

@media (max-width: 768px) {
.qualitybox {
	width:100%;
	height:100vh;
	display: flex;
	flex-direction: column;
}
.qualitybox .rightbox .inner {
max-width:100%;
margin:0;
padding:50px;
}
.qualitybox .leftbox{
display:none;
}
.qualitybox .rightbox{
width:100%;
}
	.qualitybox .rightbox .inner .valveimg {
	padding:70px 30px !important;
}
}

	.index_solution{
		padding:80px 0 50px;
	}
	.index_solution .title{ 
		font-size:48px;
		color:#1567a1;
		letter-spacing:-1px;
		margin-bottom:10px;
	}
	.index_solution .sub_title{ 
		font-size:17px;
	}

.index_solution ul {
	padding:20px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0px; /* 원하는 간격으로 조정 */
}
.index_solution ul li .txt1{
font-size:32px;
margin-bottom:7px;
}
.index_solution ul li {
	padding:30px 0px;
	float: left;
    position: relative;
    margin-bottom: 0px;
    display: flex;
    width: 100%; /* 여유 공간을 고려하여 크기 조정 */
	align-items: center;
    justify-content: left;
    background: #fff;
	font-size:17px;
	border-bottom:1px solid #d6e4ed;
}
.index_solution ul li:last-child {
	border-bottom:0px solid #b3c4d0;
	padding:30px 0px 0px;
}

.index_solution ul li .icon {
background:#154379;
width:120px;
height:120px;
margin-right: 35px;
border-radius:50%;
flex-shrink: 0;
display:flex;
align-items:center;
justify-content:center;
}
.index_solution ul li svg {
width:54px;
fill:#fff;
}

@media (max-width: 768px) {
	.index_solution{
		padding:50px 20px;
	}
	.index_solution ul li{
	    flex-direction: column;
		text-align:center;
	}
.index_solution ul li .icon {
margin-right: 0px;
margin-bottom: 20px;

}
}