@charset "utf-8";


.header.hide {}
.header.hide .nav {top: calc((var(--header_Height) + 2px)* -1);}
.header.hide .right_wrap {top: calc((var(--header_Height) + 2px)* -1);}
.header.hide .logo {opacity: 0}

.header.main_on .nav {top: 0; transition: top 1s var(--ease1)}
.header.main_on .right_wrap {top: 0; transition: top 1s var(--ease1)}
.header.main_on .logo {opacity: 1; transition: opacity 0s 1s}

.visual_sect {position: relative; width: 100%;background-color: #000; margin-top: -2px; z-index: 55; overflow: hidden}
.visual_sect .swiper-slide { height: calc(100vh + 4px); width: 100%}

.visual_sect .video {position: absolute; width: 100%; height: 100%; left: 0; top: 0;}
.visual_sect .video video { object-position: center; object-fit: cover; width: 100%; height: 100%; pointer-events: none}
.visual_sect .img {position: absolute; width: 100%; left: 0; top: 0; height: 100%;}
.visual_sect .img img {width: 100%; height: 100%; object-fit: cover; object-position: center}
.visual_sect .img video { width: 100%; height: 100%; object-fit: cover; object-position: center }


.visual_sect .visual_txt {position: absolute; width: 100%; height: 100%; left: 0; top: 0;  z-index: 2}
.visual_sect .visual_txt .in { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; height: 100%; }
.visual_sect .visual_txt .tit {font-size: var(--contTit1); font-weight: 700}
.visual_sect .visual_txt .txt {font-size: var(--bigTxt); font-weight: 500; margin-top: 4rem}
.visual_sect .visual_txt .txt p span {transition-delay: 0.3s}
.visual_sect .visual_txt p {overflow: hidden}
.visual_sect .visual_txt p span {transform: translateY(100%); display: block; transition: transform 1s ease-in-out}




.visual_sect .swiper-slide-active .visual_txt p span {opacity: 1; transform: unset}
.visual_sect .slide_move { position: absolute; width: 100%; bottom: 5rem; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: flex-end; z-index: 20; color: #fff; max-width: 100%}
.visual_sect .slide_move .swiper-pagination { display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; text-align: left; position: static }
.visual_sect .slide_move .swiper-pagination .num_box {font-size: 16px; width: 4em;font-weight:500; display: flex;  align-items: center; font-family: var(--Outfit); margin-left: 20px}
.visual_sect .slide_move .swiper-pagination .num_box span {line-height: 1}
.visual_sect .slide_move .swiper-pagination .num_box .slash { font-weight: 300; font-size: 1.8rem; margin: 0 7px; opacity: 0.6}
.visual_sect .slide_move .swiper-pagination .num_box .swiper-pagination-total {opacity: 0.6}
.visual_sect .slide_move .swiper-pagination .btn {width: 16px; height: 16px; margin-left: 20px ;display: inline-block; position: relative;}
.visual_sect .slide_move .swiper-pagination .btn.play svg.stop{ display: none}
.visual_sect .slide_move .swiper-pagination .btn.play svg.play{ display: block}
.visual_sect .slide_move .swiper-pagination .btn svg {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 1rem; fill: #fff}
.visual_sect .slide_move .swiper-pagination .btn svg.play {display: none}

.visual_sect .slide_move .arr { display: flex; align-items: center; justify-content: flex-start; font-size: 13px; fill: #fff; z-index: 10; cursor: pointer; margin-left: 20px;}
.visual_sect .slide_move .arr .swiper_btn { display: flex; align-items: center; justify-content: center; cursor: pointer; margin-left: 6rem}
.visual_sect .slide_move .arr .swiper_btn + .swiper_btn { margin-left: 13px; }

.visual_sect .slide_move .arr .swiper_btn svg .cls-1 { stroke-width: 0px; fill: none}
.visual_sect .slide_move .arr .swiper_btn svg .cls-2 { fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 10px; transition: stroke .3s}
.visual_sect .slide_move .swiper-pagination-current {min-width: 0.7em}

.visual_sect .swiper-progress-bar{display: block; position: relative; z-index: 1; width:30rem; height: 2px; }
.visual_sect .swiper-progress-bar .slide_progress-bar {position: absolute; height: 2px;  width: auto; clear: both;  left: 0; right: 0; transition: background .3s}
.visual_sect .swiper-progress-bar .slide_progress-bar.bg {background: #fff; opacity: 0.2}
.visual_sect .swiper-progress-bar .slide_progress-bar.loading { left: 0; right: auto; background: #fff; height: 100%; width: 0; transition: 0s 0.1s width linear;}
.visual_sect .swiper-progress-bar .slide_progress-bar.loading.no_ani {width: 0% !important; transition: none !important;}
.visual_sect .swiper-progress-bar.animate .slide_progress-bar.loading {width: 100%; transition-delay: unset; transition: width var(--transition-duration, 0s) linear;}
.visual_sect.swiper-progress-bar.animate .slide_progress-bar.loading { transition: width var(--transition-duration, 0s) linear;}

@keyframes updown { 0% {height:0%} 100% {height:100%} }


@keyframes scroll {
  0% { transform:translate(-50%, 0); opacity:0; }
  40% { opacity:1; }
  80% { transform:translate(-50%, 20px); opacity:0; }
  100% { opacity:0; }
}


@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-20px);
    -moz-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  60% {
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
  }
}
@-moz-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-20px);
    -moz-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  60% {
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
  }
}
@-ms-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-20px);
    -moz-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  60% {
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
  }
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-20px);
    -moz-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  60% {
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
  }
}

.nice-select .option:hover, .nice-select .option.focus, .nice-select .option.selected.focus {background-color: #2D3D3A}


@media screen and (max-width: 2000px) {

}


@media screen and (max-width: 1640px) {
}

@media screen and (max-width: 1440px) {

}


@media screen and (max-width: 1240px) {

}


@media screen and (max-width: 768px) {


  .visual_sect .swiper-slide {height: calc(100svh + 4px);}
  .visual_sect .slide_move .swiper-pagination {justify-content: flex-start; padding-left: var(--inPd)}
  .visual_sect .slide_move .swiper-pagination .btn {width: 15px; height: 15px}
  .visual_sect .slide_move .swiper-pagination .btn svg {width: 1.5rem}
  .visual_sect .slide_move {bottom: 20px}




}

@media screen and (max-width: 600px) {


  .visual_sect .visual_txt .in {justify-content: flex-end; padding-bottom: 15rem}
  .visual_sect .visual_txt .tit {font-size: var(--contTit2)}
  .visual_sect .visual_txt .txt {font-size: var(--txt); margin-top: 10px}


}