.section {width:100%; height:auto; box-sizing: border-box;}
.section:after {content: ''; display: block; clear: both; }

/* com */
.layout {width:100%;  margin:0 auto;padding:0 2%;box-sizing: border-box; }


.main{
	width:100%; 
    overflow-x: hidden; /* 가로 스크롤만 막고 */
    overflow-y: visible;   /* 세로 스크롤은 허용합니다 */
    -webkit-overflow-scrolling: touch; /* iOS에서 부드러운 스크롤 지원 */
}

.visual{text-align:center;}

.slideshow-container {
    width: 100%;
    position: relative;
    touch-action: pan-y; /* 세로 방향 터치 스크롤을 허용함 */
}

.mySlides {
    height: 100vh;
    width: 100%;
    display: none; /* 기본 숨김 */
    position: relative;
}

.mySlides.active {
    display: block; /* active일 때만 보이도록 */
}


.visual1, .visual2, .visual3, .visual4 {
    height: 100vh;
    width: 100%;
}

.visual5-footer-wrapper {
    height: 100vh;            /* 한 화면 높이 */
    display: flex;
    flex-direction: column;    /* 위: visual5, 아래: footer */
}

.visual5 {
    flex: 1;                   /* 화면 대부분 차지 */
    /*background: #f5f5f5;       /* visual5 배경 */
}

.s_down {
    position: absolute;
    bottom: 20px;       /* 화면 하단 위치 */
    left: 50%;
    transform: translateX(-50%);
    animation: bounce 2s ease-in-out infinite;
    z-index: 10;
}
.visual5-footer-wrapper .s_down{
	bottom:100px !important;
}

@keyframes bounce {
    0%   { transform: translateX(-50%) translateY(0); }
    50%  { transform: translateX(-50%) translateY(10px); }
    100% { transform: translateX(-50%) translateY(0); }
}


.slideshow-container  .footer {  margin:0 auto;  width:100%; padding:50px 6.5vw; height:auto;  color:#fff; font-weight:300; line-height: 1.4; font-size:1rem; background:#000;}
.slideshow-container  .footer .section{margin:0 auto;width:100%; }
.slideshow-container  .footer_b{padding-bottom:20px; border-bottom:1px solid #fff; margin-bottom:20px;}



.footer {position:absolute; bottom:0px;  margin:0 auto;  width:100%; padding:50px 6.5vw; height:auto;  color:#fff; font-weight:300; line-height: 1.4; font-size:1rem; background:#000;}
.footer .footer_section{margin:0 auto;width:100%; }
.footer .footer_b{padding-bottom:20px; border-bottom:1px solid #fff; margin-bottom:20px;}


.main .txt{position:absolute; top:20%; left:100px; color:#fff; text-align:left;z-index:5;}
.main .txt01{font-size: 3rem;  font-weight:700; opacity:0;}
.main .txt01_s{font-size: 2rem;  font-weight:700; opacity:0;}
.main .txt02{padding-top:20px;  font-size:5rem; font-weight:500; opacity:0; line-height:5.4rem;}
.main .txt02_2{padding-top:20px;  font-size:3rem; font-weight:400; opacity:0; line-height:3.4rem;}
.main .txt03{padding-top:20px;  font-size:1.3rem; font-weight:200; line-height:1.8rem;}
.main .txt04{padding-top:20px;  font-size:2rem; font-weight:500; }

/* 기본 상태: 왼쪽으로 이동 + 투명 */
.mySlides .txt > p {
    opacity: 0;
    transform: translateX(-100px);
    transition: none; /* 애니메이션은 keyframes 사용 */
}

/* 애니메이션 정의 */
@keyframes slideIn {
    0% { opacity: 0; transform: translateX(-100px); }
    100% { opacity: 1; transform: translateX(0); }
}

/* active 슬라이드일 때 각 텍스트 애니메이션 적용 */
.mySlides .active .txt01,
.mySlides .active .txt01_s {
    animation: slideIn 1.2s ease-out forwards;
    animation-delay: 0.3s;
}
.mySlides .active .txt_b {
    animation: slideIn 1.2s ease-out forwards;
    animation-delay: 1.4s;
}
.mySlides .active .txt02,
.mySlides .active .txt02_2 {
    animation: slideIn 1.2s ease-out forwards;
    animation-delay: 0.6s;
}

.mySlides .active .txt03 {
    animation: slideIn 1.2s ease-out forwards;
    animation-delay: 0.9s;
}
.mySlides .active .txt04 {
    animation: slideIn 1.2s ease-out forwards;
    animation-delay: 1.2s;
}
.mySlides .active .btn_w {
    animation: slideIn 1.2s ease-out forwards;
    animation-delay: 1.2s;
}

.btn_w {
	margin:50px 0 0 0 ;
	opacity:0; 
}

a .btn {
	border:2px solid #fff; 
	border-radius:40px;
	padding:25px 40px 22px;
	color:#fff;
}

.arr{
	padding-left:50px;
}

.mySlides .txt_b{ 
	left:100px;
}

.mySlides .active .txt_b {
	opacity:1;
}
.main .txt_b img{
	display:block;
}
.mySlides .active .txt_b{
	animation: slideIn 1.2s ease-out forwards;
	animation-delay:0.5s;
}

#section0{ width:100%; min-width:100%; height:100vh;/* background:url("../images/main/main_v1.jpg") 50% 0 ;transition: 0.6s ease; background-size:cover !important;*/}
#section1{ width:100%; min-width:100%; height:100vh; background:url("../images/main/main_v2.jpg") 50% 0; transition: 0.6s ease; background-size:cover !important;}
#section2{ width:100%; min-width:100%; height:100vh; background:url("../images/main/main_v3.jpg") 50% 0; transition: 0.6s ease; background-size:cover !important;}
#section3{ width:100%; min-width:100%; height:100vh; background:url("../images/main/main_v4.jpg") 50% 0; transition: 0.6s ease; background-size:cover !important;}
#section4{ width:100%; min-width:100%; height:100vh; background:url("../images/main/main_v5.jpg") 50% 0; transition: 0.6s ease; background-size:cover !important;}

#VRMaruLNC{
		position: absolute;
		right: 0;
		bottom: 0;
		top:0;
		right:0;
		width: 100%;
		height: 100%;
		background-size: 100% 100%;
 		background-color: black; /* in case the video doesn't fit the whole page*/
  		background-image: /* our video */;
  		background-position: center center;
  		background-size: contain;
   		object-fit: cover; /*cover video background */
   		z-index:1;
	}


@media all and (max-width:1280px) {
	.main .txt{position:absolute; top:30%; left:50px; text-align:left;}
	.main .txt02{font-size:4rem;  line-height:4.4rem; }
	.main .txt04{ font-size:1.5rem; line-height:1.9rem; }
    #three .three_c .three_ban3  a .ban .c_tit {position:absolute; top:50px; right:30px; z-index:10; text-align:right; font-weight:800; color:#000; font-size:1.5rem;}
	#three{ height: 465px;  margin:-100px auto 0;  }
	#recruit .recruit_list div {position:relative; min-height:300px; border-radius:10px; width:47%; float:left; margin:0% 1.5% 3% 1.5%;  }
	#data .left .data_con .data_con_l{width:30%; margin-right:10%; float:left;}
	#data .left .data_con .data_con_r{width:60%; float:left;}
	#data .right .mov .mov_c img{width:100%;}
	#photo .photo_list div{ width:47%; float:left; margin:0% 1.5% 3% 1.5%;}
}


@media all and (max-width:1024px) {
    .main .txt02{ font-size:3rem;  line-height:3.4rem; }
	.main .txt02_2{ font-size:3rem;  line-height:3.4rem; }
	.main .txt03{font-size:1rem; font-weight:200; line-height:1.3rem;}
	.main .txt04{font-size:1.3rem; line-height:1.7rem; }
	.main .txt{position:absolute; top:30%; left:50px; text-align:left;}

	.content-slider ul{	 width:98% !important;	max-width:100% !important;	margin:0 auto;}
	.newswrap_t{font-size:18px; font-weight:600;margin-top:20px;letter-spacing:-1px; height:auto; position:relative;}

}


/*20260330수정 start*/
@media all and (max-width:768px) {
	.main .txt { left: 20px;  top:20%;}
	.main .txt01 {  font-size: 1.5rem;}
	.main .txt01 img{width:90%; max-width:653px;}
	.main .txt01_s{font-size: 1.5rem;  font-weight:700; opacity:0;}
	.main .txt02 {font-size:1.2rem;  line-height:1.7rem; }
	.main .txt02_2 {font-size:1.2rem;  line-height:1.7rem; }
	.main .txt04{font-size:1.1rem; }
    .btn_w {margin:20px 0 0 0 ; }
	a .btn {padding:10px 30px 8px; color:#fff;}
	/*20260330수정 end*/

	#three .three_w{ height: auto;  position:relative;}
	#three .three_c .three_ban3  a .ban .b{display:none;}
	#three .three_c .three_ban3  a .ban .b2{max-width:735px !important; width:100%; border-radius:10px; display:block;}
	#three .three_c .three_ban1  {  width:96%; margin:0 2%;  height: 100%; max-width:96%;}
	#three .three_c .three_ban2 {  width:96%; margin:2%;  height: 100%;   max-width:96%;}

	#three .three_c .three_ban3 {  width:96%; margin:0 2%;  height: 100%; max-width:96%;}
	#recruit {width:96%; margin:2%;  height: 100%;   max-width:96%;}

	.bg{ background:url(/img/main/business1bg_on2.png) no-repeat right 50%; background-size:60% !important;}

	.slideshow-container  .footer_b img{width:120px;}/*20260330추가*/

	.mousedown	,
	.mouseup	 {display:none !important;}

}


@media all and (max-width:640px) {
	.prev, .next {   top: 60% !important;}

}

@media all and (max-width:540px) {
	.prev, .next {   display:none;}
}

@media all and (max-width:450px) {

}

@media all and (max-width:400px) {
	.square {  cursor: pointer;  width:80px !important; height:10px;  }
}

/* mv : main visual */


@media all and (max-width:1024px) {
	
}

@media all and (max-width:640px) {

}


/* partner */
/* footer */


* {box-sizing: border-box}

.mySlides {display: none;transition: 0.6s ease; }
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {  max-width: 100%;  height:100vh; position: relative;  margin: auto;}

/* Next & previous buttons */
.prev{  cursor: pointer;  position: absolute;  bottom: 48%;   left: 10px;  width: auto;  padding: 8px 16px;  margin-top: -22px;  color: white;  font-weight: 300;  font-size: 18px;  transition: 0.6s ease;  border:1px solid #5a6167;
  height:50px;  background-color: #4f545a;  z-index:2000;  user-select: none;}

.prenex_bg{background-color: #4f545a;  border:1px solid #5a6167;}

/* Position the "next button" to the right */
.next {  cursor: pointer;  position: absolute;  top: 48%;  right: 10px;  width: auto;  padding: 8px 16px;  margin-top: -22px;  color: white;  font-weight: 300;  font-size: 18px;  transition: 0.6s ease;  border:1px solid #5a6167;
  height:50px;  background-color: #4f545a;  z-index:2000;  user-select: none;}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {  background-color: rgba(0,0,0,0.8);  list-style:none;  text-decoration:none !important;}

/* Caption text */
.text {  color: #f2f2f2;  font-size: 15px;  padding: 8px 12px;  position: absolute;  bottom: 8px;  width: 100%;  text-align: center;}

/* Number text (1/3 etc) */
.numbertext {  color: #f2f2f2;  font-size: 12px;  padding: 8px 12px;  position: absolute;  top: 0;}


active, .dot:hover {  background-color: #fff;}

/* Fading animation */
.fade {  -webkit-animation-name: fade;  -webkit-animation-duration: 1.5s;  animation-name: fade;  animation-duration: 1.5s;}

@-webkit-keyframes fade {  from {opacity: .1} 
	to {opacity: 1}
}

@keyframes fade {
	0%{opacity:0.1;}
	30%{opacity:0.7;}
	100%{opacity:1;}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 320px) {
	.prev, .next,.text {font-size: 11px}
	.square {  cursor: pointer;  width:70px; height:10px;  }
}

@keyframes Loading{
	0%, 60%, 100%{
		transform:scale(1) rotate(-45deg);
	}
	30%{
		transform:scale(1.5) rotate(-45deg);
	}
}


/* over 768px */
@keyframes txtDisplay {from {bottom:-100%;}to {bottom:90px;}}  /* not used */
@keyframes txtDisplay1 {from {opacity:0}to {opacity:1;}}
@keyframes txtDisplay2 {from {opacity:0}to {opacity:1;}}
	


/*  아래는 메인페이지용 개발자 첨언 영역*/ 

.mousedown	 {position:fixed;width:80px; height:120px; bottom:40px; left:50%; cursor:pointer; z-index:1000;animation: fadein 3s ease 3s;-webkit-animation: fadein 3s;}
.mousedown	img{position:relative;-webkit-animation: roll_down 0.7s linear 0.5s infinite alternate; /*normal;  Chrome, Safari, Opera */ animation: roll_down 0.7s linear 0.5s infinite alternate; /*normal;  Standard syntax */z-index:1000}
.mouseup	 {display:none;position:fixed;width:29px; height:53px; top:20px; left:50%; cursor:pointer; z-index:1000;animation: fadein 3s ease 3s;-webkit-animation: fadein 3s;}
.mouseup	img{position:relative;-webkit-animation: roll_up 0.7s linear 0.5s infinite alternate; /*normal;  Chrome, Safari, Opera */ animation: roll_up 0.7s linear 0.5s infinite alternate; /*normal;  Standard syntax */z-index:1000}

/* Chrome, Safari, Opera */
@-webkit-keyframes roll_down {
    0%   {opacity: 1.0; bottom:0px;}
    100% {opacity: 1.0; bottom:10px;}
}
/* Standard syntax */
@keyframes roll_down {
    0%   {opacity: 1.0; bottom:0px;}
    100% {opacity: 1.0; bottom:10px;}
}
/* Chrome, Safari, Opera */
@-webkit-keyframes roll_up {
    0%   {opacity: 1.0; top:0px;}
    100% {opacity: 1.0; top:-15px;}
}
/* Standard syntax */
@keyframes roll_up {
    0%   {opacity: 1.0; top:0px;}
    100% {opacity: 1.0; top:-15px;}
}

@keyframes fadein {
    from {opacity: 0;}
    to {opacity: 1;}
}

@-webkit-keyframes fadein { /* Safari and Chrome */
    from {opacity: 0;}
    to {opacity: 1;}
}
/* foote 메인 sub포지션 다름 */
.footer { position:absolute; bottom:0px; margin:0 auto;  width:100%; padding:50px 0; height:auto;  color:#fff; font-weight:300; line-height: 1.4; font-size:1rem; background:#000;}
/* foote 메인 sub포지션 다름 */