
#main .container{
  max-width: 1720px;
}


/* main visual */
.mv{
  overflow: hidden;
  max-width: 1880px;
  margin: 0 auto;
  border-radius: 20px;
}
.mv .bg-box{
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 870px;
  overflow: hidden;
}
.mv .bg-box.v1{background-image: url(/asset/img/main/v1.png);}
.mv .bg-box.v1-new{background-image: url(/asset/img/main/v1-view01_new.jpg);}
.mv .bg-box.v2{background-image: url(/asset/img/main/v2.png);}
.mv .bg-box.v3{background-image: url(/asset/img/main/v3.png);}

.mv .bg-box.v2.en-v2{background-image: url(/asset/img/main/v2-en.png);}
.mv .img-box{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  overflow: hidden;
}
.mv .img-box img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: none;
  transform: scale(1.1);
  transition: transform 1.5s 1s;
}
.mv .swiper-slide-active .img-box img{
  transform: scale(1);
}
.mv .txt-box{
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1430px;
  height: 100%;
  display: flex;
  align-items: center;
  z-index: 3;
}
.mv .txt-box.txt-top-center{
  align-items: flex-start;
  justify-content: center;
  text-align: center;
  padding: 100px 0;
}

.mv .txt-box .half{
}
.mv .txt-box .tit,
.mv .txt-box .txt{
  overflow: hidden;
}
.mv .fade-left{
  transform: translateX(-100%);
  display: block;
  transition: transform 1.5s, opacity 2s;
  opacity: 0;
}
.mv .delay-1{transition-delay: .5s;}
.mv .delay-2{transition-delay: 1s;}

.mv .swiper-slide-active .fade-left{
  transform: translateX(0);
  opacity: 1;
}

.mv .air-swiper-btn{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  max-width: 1780px;
  width: 97%;
  z-index: 2;
}
.mv .air-swiper-btn .swiper-btn{
  position: absolute;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 50px;
  height: 50px;
  cursor: pointer;
  filter: brightness(0) invert(1);
  opacity: .8;
}
.mv .air-swiper-btn .prev-btn{
  left: 0;
  background-image: url(/asset/img/main/mv-arw01.svg);
}
.mv .air-swiper-btn .next-btn{
  right: 0;
  background-image: url(/asset/img/main/mv-arw02.svg);
}

.mv .bot-btn-box{
  display: none;
  position: absolute;
  top:calc(50% + 250px);

  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 10;
  width: 90%;
  max-width: 1430px;
} 
.mv .bot-btn-box > .d-flex{
  display: flex;
  align-items: center;
  gap:5px;
}

.mv .swiper-progress-bar {
  width:120px;
  display: block;
  z-index: 1;
  height: 2px;
  overflow: hidden;
  margin: 0 35px;
}

.mv .swiper-progress-bar.active .slide-progress-bar{
  opacity: 1;
}

.mv .swiper-progress-bar.animate .slide-progress-bar::after {
  transition: width linear;
  transition-delay: unset;
  width: 100%;
  transition-duration: 5s;
}

.mv .slide-progress-bar {
  position: relative;
  height: 2px;
  background: rgba(38,38,38,.2);
  width: auto;
  clear: both;
  opacity: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items:center;
  justify-content: center;
}

.mv .slide-progress-bar:after {
  position: absolute;
  top: 0;
  left: 0;
  background: #262626;
  height: 100%;
  width: 0;
  content: "";
}

.mv .swiper-pagination{
  width: 190px;
  left: 0;
  bottom: auto;
  top: 50%;
  transform: translateY(-50%);
}

.mv .swiper-pagination span{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #262626;
  font-size: 18px;
  font-weight: 500;
}
.mv .swiper-pagination .swiper-pagination-current{
  left: 0;
}
.mv .swiper-pagination .swiper-pagination-total{
  right: 0;
}

.play-and-stop{margin: 0 4px;}
.play-and-stop img{
  filter: invert(1) brightness(0);
}
.play-and-stop .play,
.play-and-stop .stop{display: none;}
.play-and-stop .play.active,
.play-and-stop .stop.active{display: block;}

.mv .mv-swiper-prev,
.mv .mv-swiper-next,
.mv .play,
.mv .stop{
  cursor: pointer;
  padding: 3px;
}

/* 롤링 컨테이너의 기본 스타일 */
.air-rolling-txt {
  z-index: 1;
  position: absolute; /* 필요에 따라 위치 조정 */
  bottom: 40px;
  left: 0;
  width: 100%;
  overflow: hidden; /* 영역 밖으로 나가는 텍스트 숨김 */
  white-space: nowrap; /* 텍스트 줄바꿈 방지 */
  color: #1C459E;
}

/* 롤링될 콘텐츠를 감싸는 래퍼 (무한 스크롤 애니메이션 적용 대상) */
.air-rolling-txt .rolling-content-wrap {
    display: flex; /* 내부 텍스트를 가로로 배치 */
    /* 애니메이션 적용 */
    animation: marquee 15s linear infinite; /* 15초 동안 선형적으로 무한 반복 */
}

/* 롤링 텍스트 스타일 */
.air-rolling-txt .rolling-text {
    /* 텍스트가 끊기지 않도록 충분한 간격 확보 */
    padding-right: 50px; 
}

/* 무한 롤링을 위한 키프레임 정의 */
@keyframes marquee {
    /* 시작 지점 (0%) */
    0% {
        transform: translateX(0%);
    }
    /* 끝 지점 (100%): 텍스트 한 세트의 폭만큼 이동 */
    100% {
        transform: translateX(-50%); /* 텍스트를 50%만큼 이동 (두 개의 텍스트를 사용했으므로) */
    }
}

@media all and (max-width:768px){
  .air-rolling-txt{
    bottom: 5px;
  }
  .mv .img-box{
    opacity: .4;
  }
  .mv .air-swiper-btn{
    display: none;
  }

  .mv .txt-box .half{
    width: 100%;
    text-align: center;
  }
  .mv .bg-box{height: calc(100vh - 50px);}
  .mv .play-and-stop{
    display: none;
  }
  .mv .bot-btn-box{
    width: auto;
    transform: translateX(-50%);
  }
  .mv .bot-btn-box > .d-flex{
    padding-left: 0;
  }
  .mv .swiper-progress-bar{
    position: relative;
    transform: none;
    left: auto;
    top: auto;
  }
}

/* 메인 콘텐츠 01 */
.con01{
  overflow: hidden;
  background: url(/asset/img/main/main_con01_bg01.png)no-repeat center center /cover;
}
.product-slide:hover{
  cursor: none;
}
.product-slide .swiper-container{
  overflow: unset;
}
/* .product-slide .swiper-slide:nth-child(even) .prod-common-box{
  transform: translateY(50px);
} */


.con-air-drag{
  position: fixed;
  top: 0; 
  left: 0;
  pointer-events: none;
  width: 116px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  background-color: rgba(28,69,158,.4);
  aspect-ratio: 1/1;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  z-index: 2;
  transition: opacity .5s, visibility .5s, transform .05s;
}

.con-air-drag.on{
  opacity: 1;
  visibility: visible;
}

.more-btn-box{
  display: flex;
  width: 280px;
  height: 60px;
  justify-content: center;
  align-items: center;
  border-radius: 200px;
  background-color: #1C459E;
  gap: 20px;
  margin-left: auto;
  margin-right: auto;
}

@media all and (max-width:768px){
.product-slide:hover{
  cursor: auto;
}
  /* .product-slide .swiper-slide:nth-child(even) .prod-common-box{
    transform: translateY(20px);
  } */
  .con-air-drag.on{
    opacity: 0;
    visibility: hidden;
    width: 0;
  }
  .prod-common-box{
    padding: 20px 15px;
  }

  .more-btn-box{
    width: 180px;
    height: 45px;
  }
  .prod-common-box .href-box i{
    max-width: 20px;
  }
}

.con02 .iframe-box{
  max-width: 1430px;
  width: 100%;
  margin: 0 auto;
  aspect-ratio: 16/9;
}
.con02 .iframe-box video,
.con02 .iframe-box iframe{
  width: 100%;
  height: 100%;
}
.text-slide-area{
  overflow: hidden;
  border-top: 1px solid #ADADAD;
  border-bottom: 1px solid #ADADAD;
  padding: 20px 0;
}
.text-slide-area .swiper-container{
  overflow: unset;
  width: 100%;
}

.text-slide-area .swiper-wrapper{transition-timing-function:linear; }
.text-slide-area .swiper-slide{
  white-space: nowrap;
  width: auto;
  position: relative;
}
.text-slide-area .swiper-slide:before{
  content: '';
  position: absolute;
  left: -42.5px;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  background-color: #000;
  border-radius: 50%;
  display: block;
}

@media all and (max-width:1024px){
.text-slide-area .swiper-slide:before{
  left:-22.5px;
}
}
@media all and (max-width:768px){
  .text-slide-area{
    padding: 10px 0;
  }
  .text-slide-area .swiper-slide:before{
    left:-17px;
    width: 4px;
    height: 4px;
  }
}


.con03{
  background: url(/asset/img/main/main_con03_bg01.png)no-repeat center center/ cover;
}

.con03 .view-more-box{
  display: flex;
  justify-content: flex-end;
}
.con03 .view-more-btn{
  display: flex;
  gap: 10px;
  align-items: center;
}
.news-btn-box{
  display: flex;
  justify-content: center;
  display: none;
}
.news-btn-box .btn-href{
  max-width: 250px;
  width: 50%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #D8D8D8;
  border-bottom: none;
  color: #D8D8D8;
  text-align: center;
}
.news-btn-box .btn-href.on{
  border-color: #262626;
  color: #262626;
}
.news-area-con .news-con{
  display: none;
}
.news-area-con .news-con.on{
  display: block;
}

.news-area-con .swiper-page{
  position: relative;
  width: 100%;
  height: 4px;
}
.news-area-con .swiper-pagination-progressbar-fill{
  background-color: #1C459E;
}

@media all and (max-width:768px){
  .news-btn-box .btn-href{height: 35px;}
}

.mv .txt-box .line{
  height: 1px;
  background-color: #9A9A9A;
  width: 0;
  transition: width 3s;
}
.mv .swiper-slide-active .line{width: 160px;}


#popup {
	position: relative;
}

.popup-layer {
	z-index: 10000;
	position: absolute;
	background: #fff;
	box-shadow: 0px 0px 20px 0px rgba(0,0,0,.25);
	animation: popup-fade .65s ease-in-out .35s forwards;
	opacity: 0;
	max-width:800px;
}

@keyframes popup-fade {
	0% { opacity: 0;
	-webkit-transform: translateY(25px);
	-ms-transform: translateY(25px);
	transform: translateY(25px); }
	100% { opacity: 1;
	-webkit-transform: translateY(0);
	-ms-transform: translateY(0);
	transform: translateY(0); }
}
.popup-layer__body {
	background: #fff;
}

.popup-layer__body img {
	display: block;
	margin: 0 auto;
	border: none;
	max-width: 100%;
}

.popup-layer__foot {
	background: #424242;
}

.popup-layer__foot ul {
	display:flex;
	flex-wrap: wrap;
}

.popup-layer__foot li {
	width:50%;
	padding:10px;
}

.popup-layer__foot li:first-child {
	padding-right:0;
}

.popup-layer__foot li:last-child {
	text-align: right;
}

.popup-layer__foot span {
	font-size: 1.5rem;
	color: #fff;
	cursor: pointer;
	transition:all 0.3s ease;
}

.popup-layer__foot label:hover span { opacity: .7; }

/* .popup-layer-foot { background: #424242; }
.popup-layer-foot span { font-size: 15px; color: #fff; }
.popup-layer-foot label:hover span { opacity: .7; }
.popup-layer-foot li:first-child { padding-right: 0; }
.popup-layer-foot li:last-child { text-align: right; } */


@media (max-width: 1024px){
	/* .popup-layer { z-index: 999; } */
	.popup-layer { top: 95px !important; left: 0 !important; margin: 0 5px; }
}
@media (max-width: 768px){

	.popup-layer {
		width:calc(100% - 10px);
	}

	.popup-layer img {
		max-width: none;
		width:100%;
		height: auto !important;
	}
	.popup-layer-foot span { font-size: 14px; }

}
@media (max-width: 375px){
	.popup-layer-foot li { width: 100%; }
	.popup-layer-foot li:last-child { text-align: left; }
}


.con03 .news-common-item .img-box:after{content: none;}


/* 20260522 모바일 mv 추가 */
.mv .mv-mover{display: none;}

.mv .mv-mover .bg-box.v1-new{
  background-image: url(/asset/img/main/mv-mo01.jpg);
}
.mv .mv-mover .bg-box.v2{
  background-image: url(/asset/img/main/mv-mo02.jpg);
}
.mv .mv-mover .bg-box.v3{
  background-image: url(/asset/img/main/mv-mo03.jpg);
}
.mv .mv-mover .txt-box{
  width: 80%;
  max-width: 540px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: 10vh 0;
}
.mv .mv-mover .txt-box .img{
  max-height: 50vh;
  align-self: center;
}

.mv .mv-mover .txt-box .img img{
  height: 100%;
}
.mv .mv-mover .mv01-logo{
  max-width: 200px;
}

@media all and (max-width:768px){
  .mv{border-radius: 0;}
  .mv .mv-pcver{display: none;}
  .mv .mv-mover{display: block;}

}

@media all and (max-width:576px){
  
.mv .mv-mover .txt-box{
  padding: 6vh 0;
}
}