.playerBox {
      background: url('../images/video_bg3.jpg');
/*    height: 100vh;*/
	  height: calc(var(--vh, 1vh) * 100);
      width: 100%;
      position: relative;
	  top:0;
      display: 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;
 left: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;

}

.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: 0px; /* -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;
}

}


       /* 떠다니는 캡슐 컨테이너 스타일 */
        .floating-capsule {
            position: fixed;
            bottom: 20px;
            right: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            z-index: 1000;
        }

        /* [수정] 캡슐 내부 버튼 그룹 스타일 재정리 */
        .capsule-button-group {
            display: flex;
            flex-direction: column;
            align-items: center;
            transition: all 0.3s ease-in-out;
            /* 닫혔을 때의 기본 스타일: 배경 투명, 패딩 없음 */
            background-color: transparent;
            box-shadow: none;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            padding: 15px 10px;
            /* 둥근 모서리는 항상 유지 */
            border-radius: 50px; 
        }
        
        /* [수정] 열렸을 때 캡슐 배경, 그림자, 패딩 적용 */
        .floating-capsule.open .capsule-button-group {
            background-color: rgba(255, 255, 255, 0.95);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            padding: 15px 10px;
        }

        /* 모든 버튼의 공통 스타일 (원형) */
        .floating-capsule a {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            text-decoration: none;
            color: #343a40;
            background-color: #ffffff;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            cursor: pointer;
        }
        
        /* SVG 아이콘 스타일 */
        .floating-capsule a svg {
            width: 28px;
            height: 28px;
            fill: currentColor;
            transition: transform 0.3s ease-in-out; /* 아이콘 회전을 위해 추가 */
        }

        /* 버튼 간 간격 설정 (gap 대신 margin 사용) */
        .capsule-button-group > a:not(:last-child) {
            margin-bottom: 15px;
        }
        
        /* ✨ AI 버튼 스타일 */
        .capsule-button_ai {
            background: linear-gradient(45deg, #6e45e2, #88d3ce);
            color: white;
        }

        /* 버튼 호버 효과 */
        .floating-capsule a:hover {
            transform: scale(1.1);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

        
        /* 열렸을 때 '+' 아이콘 회전 */
        .floating-capsule.open .capsule-button_main svg {
            transform: rotate(135deg);
        }
        .floating-capsule.open .capsule-button_main {
            background-color: #333;
            color: white;
        }
        
        /* 메인 버튼은 항상 보이도록 설정 */
        .capsule-button_main { 
            display: flex; 
        }

        /* 서브 버튼 기본 상태 (숨김 & 애니메이션 시작점) */
        .capsule-button_sub {
            transition: max-height 0.25s ease-in-out, margin-bottom 0.25s ease-in-out, transform 0.25s ease-in-out, opacity 0.25s ease-in-out;
            opacity: 0;
            transform: translateY(15px);
            max-height: 0;
            pointer-events: none;
            overflow: hidden;
            margin-bottom: 0 !important;
        }

        /* 펼쳐졌을 때 서브 버튼 스타일 */
        .floating-capsule.open .capsule-button_sub {
            opacity: 1;
            transform: translateY(0);
            max-height: 50px; /* a 태그 height */
            pointer-events: auto;
            margin-bottom: 15px !important;
        }

        /* 닫힐 때 애니메이션 지연 (위->아래) */
        .capsule-button-group a.capsule-button_sub:nth-child(1) { transition-delay: 0s; }
        .capsule-button-group a.capsule-button_sub:nth-child(2) { transition-delay: 0.05s; }
        .capsule-button-group a.capsule-button_sub:nth-child(3) { transition-delay: 0.1s; }
        .capsule-button-group a.capsule-button_sub:nth-child(4) { transition-delay: 0.15s; }

        /* 펼쳐질 때 애니메이션 지연 (아래->위) - 위 규칙을 오버라이드 */
        .floating-capsule.open .capsule-button-group a.capsule-button_sub:nth-child(1) { transition-delay: 0.15s; }
        .floating-capsule.open .capsule-button-group a.capsule-button_sub:nth-child(2) { transition-delay: 0.1s; }
        .floating-capsule.open .capsule-button-group a.capsule-button_sub:nth-child(3) { transition-delay: 0.05s; }
        .floating-capsule.open .capsule-button-group a.capsule-button_sub:nth-child(4) { transition-delay: 0s; }
        
.qualitybox {
	width:100%;
	height:100vh;
	display: flex;
	background-color:#393939;
}
.qualitybox .leftbox{
width:50%;
height:100%;
overflow:hidden;
background:url('../images/main_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;
line-height: 1.6em;
}

.qualitybox .rightbox .inner .valveimg {
padding:100px 50px;
}
.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 25px;
}
.qualitybox .leftbox{
display:none;
}
.qualitybox .rightbox{
width:100%;
}
	.qualitybox .rightbox .inner .valveimg {
	padding:30px 30px !important;
}
.qualitybox .rightbox .inner .text{
font-size:18px;
line-height: 1.5em;
}
}


 .step_list:after {content:" ";display:block;clear:both;overflow:hidden}
 .step_list li{float:left;width:20%;height:240px;text-align:center;}
 .step_list .step_data{padding:0 30px;height:220px}
@media (max-width:768px){
 .step_list li{float:left;width:50%;height:240px;text-align:center;}
 .step_list .step_data{padding:0 10px;height:220px}
}

 .step_list li.step01 .step_data,
 .step_list li.step02 .step_data,
 .step_list li.step03 .step_data,
 .step_list li.step04 .step_data{height:240px}
 .step_list .icon{position:relative;display:inline-block;margin-top:15px}
 .step_list .title{
 text-align: center;
    font-weight: 500;
    position: absolute;
    display: flex;
    right: -5px;
    top: 0px;
    width: 30px;
    height: 30px;
    font-size: 1em;
    color: #fff;
    /* line-height: 1.8em; */
    background: #0a5157;
    border-radius: 50%;
    justify-content: center;
    align-items: center;}
 .step_list .info_title{line-height:1;font-weight: 500;font-size:1.4em; letter-spacing:-0.06em; color:#444;margin-top:18px;margin-bottom: 10px;}
 .step_list .info_txt{line-height:18px;margin-top:5px;word-break:keep-all; color:#888; font-weight:300; letter-spacing:-0.03em;font-size: 0.9em;}
 .step_list li.step04,
 .step_list li.step05,
 .step_list li.step06,
 .step_list li.step07{float:left}
 .step_list .arrow{position:absolute;z-index:100000}
 .step_list .arrow.right{right:7px;top:47px;margin-top:2px}
 .step_list .arrow.left{left:-26px;top:47px;margin-top:2px}
 .step_list .arrow.down{left:50%;bottom:-12px;margin-left:-32px}
 .step_list .p_arrow{display:block !important}
 .step_list .m_arrow{display:none !important}