/* main_visual */
.main-visual{
  position: relative;
}

.main-visual .txt-box .txt {
  overflow: hidden;
}
.main-visual .txt-box .txt span{
  transition-delay: .5s;
}
.main-visual .txt-box .txt span{
  display: block;
  transform: translateY(100%);
  transition: 1.3s .5s transform;
}


.main-visual .swiper-slide-active .txt-box .txt span{
  transform: translateY(0);
}


.main-visual .swiper-slide{
  position: relative;
}
.main-visual .bg-img{
  width: 100%;
  height: 600px;
}
.main-visual .bg-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.main-visual .txt-box{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}
.main-visual .txt-box .container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 스와이퍼 버튼 */
.main-visual .common-btn-box{
  max-width: 1500px;
  width: 93.75%;
}
.common-btn-box{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 2;
  width: calc(100% + 50px);
}
.common-btn-box .swiper-btn{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #fff;
  background-position: center center;
  background-repeat: no-repeat;
  position: absolute;
  cursor: pointer;
  top: 50%;
  transform: translateY(-50%);
  box-shadow: -1.5px -2.6px 5px 0px rgba(0, 0, 0, 0.08);
}
.swiper-button-lock{
  display: block;
}

.common-btn-box .prev-btn{
  background-image: url(/asset/img/main/main_btn01.png);
  left: 0;
}
.common-btn-box .next-btn{
  background-image: url(/asset/img/main/main_btn02.png);
  right: 0;
}

.brand-swiper-area{
  position: relative;
}

@media all and (max-width:1500px){
  .main-visual .txt-box .txt{
    max-width: 80%;
  }
.common-btn-box{
  width: calc(100% + 20px);
}
}

@media all and (max-width:768px){
  .common-btn-box .swiper-btn{
    width: 35px;
    height: 35px;
    background-size: 6px 10px;
  }
  .main-visual .bg-img{
    height: 420px;
  }
}

@media all and (max-width:576px){
  .common-btn-box{
    display: none;
  }
}

/* 메인페이지 section 02 */
.banner-area-zone{
  border-radius: 20px;
  overflow: hidden;
  width: 100%;
  padding: 50px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  min-height: 350px;
}

.banner-area-zone.bg01{
  background-image: url(/asset/img/main/main_con01_bg01.png);
}
.banner-area-zone.bg02{
  background-image: url(/asset/img/main/main_con02_bg01.png);
}



@media all and (max-width:768px){
  .banner-area-zone{
    padding: 25px;
    min-height: 160px;
  }

}

.pro-slide-area{
  position: relative;
}

.pro-slide-area .swiper_slider {
  overflow: hidden;
}

.pro-slide-area .swiper-slide{
  height: auto;
}
.pro-slide-area .swiper-slide .common-item-box,
.pro-slide-area .swiper-slide .common-item-box .item-href{
  height: 100%;
}

#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 button {
  background-color: transparent;
  border:0px;
}

.popup-layer__foot span {
  font-size:15px;
  /* 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; }
}

/* 메인 배너 영역 공통 (한 번에 1개씩 보일 때) */
.main-banner-zone .mySwiper {
  width: 100%;
  height: 400px; /* 원하는 배너 높이로 수정하세요 (예: 300px ~ 500px) */
  margin: 0 auto;
}

.main-banner-zone .swiper-slide {
  height: 100%; /* 부모 높이에 꽉 차게 */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 이미지 꽉 차게 보정 */
.main-banner-zone .main-banner,
.main-banner-zone .bg-box,
.main-banner-zone .bg-box img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 찌그러짐 방지 */
  display: block;
}
