#main{position: relative; }
#section1{overflow: hidden;}
.msec1{position: relative;}
.msec1 .swiper-slide{overflow:hidden}
.msec1 .swiper-slide .slogan{position:absolute; z-index:10; top:25%; left:50%; transform: translateX(-50%); width:100%; padding:0 2rem; max-width:var(--container); text-align: center; }
.msec1 .swiper-slide .slogan p{color:#fff; font-weight: bold; position: relative; text-shadow: 0 0 0.5rem rgba(0,0,0,0.1);}
.msec1 .swiper-slide .slogan .text1{top:0; opacity:0; font-size:8rem; font-family: var(--font-eng); font-weight: 800; text-transform: uppercase; transition:0.5s 0.5s}
.msec1 .swiper-slide .slogan .text2{top:10px;opacity:0; filter: blur(10px); font-size:2.4rem;  transition:0.5s 1s}



.msec1 .swiper-slide .bg{transform:scale(1.1);transition:10s; height:100vh; position: relative;}
.msec1 .swiper-slide .bg::before{content: ''; width: 100%; height: 100%; background: rgba(0,0,0,0.3); position: absolute; top: 0; left: 0;}
.msec1 .swiper-slide .bg img{width:100%; height: 100%; object-fit: cover;}

.msec1 .swiper-slide-active .bg{transform:scale(1)}
.msec1 .swiper-slide-active .slogan .text1{top:0;opacity:1; letter-spacing:normal;}
.msec1 .swiper-slide-active .slogan .text2{top:0;opacity:1; filter:blur(0)}



/*swiper*/
.msec1 .swiper-button-prev,
.msec1 .swiper-button-next{width: 5rem; height: 5rem; color:#fff; background: none; bottom:10rem; top:auto; font-size: 5rem; }

.msec1 .swiper-button-prev{left:auto; left: calc(80% - 5rem); }
.msec1 .swiper-button-next{left:auto;  left: 80%; right:0}
.msec1 .swiper-pagination{max-width:var(--container); font-weight: bold; padding:0 2rem; color:#fff; text-align: left; position: absolute; left: 50%; transform: translate(-50%);  bottom: 10rem;}

.msec1 .swiper-progress-bar {position:  absolute; left: 50%; transform: translate(-50%);; width:100%; max-width: var(--container); display: block; z-index: 1; height:.5rem; }
.msec1 .swiper-progress-bar .slide_progress-bar {position: absolute; height: .3rem; background:#fff; width:50rem; clear: both; opacity:1; bottom: 15rem; left: 50%; transform: translateX(-50%); right: 0; }
.msec1 .swiper-progress-bar .slide_progress-bar:after {position: absolute; top: 0; left: 0; background:var(--sub_color); height: 100%; width: 0; content: ""; transition: 0.1s width linear;}
.msec1 .swiper-progress-bar.active .slide_progress-bar {opacity: 1;}
.msec1 .swiper-progress-bar.animate .slide_progress-bar:after {transition: width linear;transition-delay: unset; width: 100%; transition-duration: 5s;}


/* pagenation */

/*.msec1 .swiper-pagination-bullet{opacity: 0.5; width: 15px; height: 15px; background: #fff; box-shadow: 0px 0px 3px #fff; }
.msec1 .swiper-pagination-bullet-active{background:#fff; opacity: 1;}
*/


.msec1 .swiper-pagination-bullet {
    background: transparent; width: 4rem; height: 4rem;
  }
  .msec1 .swiper-pagination-bullet-active .path {
    display: inline-block !important;
    stroke-dasharray: 1000;
    stroke-dashoffset: 0;
    -webkit-animation: dash linear 120s;
            animation: dash linear 120s;
    -webkit-animation-iteration-count: unset;
            animation-iteration-count: unset;
  }
  .path {
    display: none;
  }
  @-webkit-keyframes dash {
    from {
      stroke-dashoffset: 1000;
    }
    to {
      stroke-dashoffset: 0;
    }
  }
  @keyframes dash {
    from {
      stroke-dashoffset: 1000;
    }
    to {
      stroke-dashoffset: 0;
    }
  }




/*파도*/
.wave_box{position:absolute; bottom:0px; left:0; right:0; z-index:0}
.waves { position:relative;  width: 100%;  height:15vh;  margin-bottom:-7px; /*Fix for safari gap*/  min-height:100px;  max-height:200px;}

.parallax > use {  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;}
.parallax > use:nth-child(1) {  animation-delay: -4s;  animation-duration: 10s;}
.parallax > use:nth-child(2) {  animation-delay: -10s;  animation-duration: 15s;}
.parallax > use:nth-child(3) {  animation-delay: -8s;  animation-duration: 20s;}
.parallax > use:nth-child(4) {  animation-delay: -5s;  animation-duration: 20s;}


@media all and (min-width:768px) {
.waves { position:relative;  width: 100%;  height:25vh;}

}

@media all and (min-width:1200px) {
.wave_box{bottom: 0%;}
.waves {  height:50vh; }

}



@keyframes move-forever {
0% {
   transform: translate3d(-90px,0,0); fill:transparent; stroke-width: 0.1;
  }
  100% { 
    transform: translate3d(85px,0,0); fill:transparent; stroke-width: 0.4;
  }
}



/* 제품 슬라이드 */
.main_product{position: relative;}
.main_product .inner{overflow: hidden; position: relative;}
.pro_tit{margin-bottom: 7rem;}
.pro_tit h2{font-size: 6rem; font-weight: bold; font-family: var(--font-eng); text-transform: uppercase;}
.pro_tit h2 p{font-size: 2.4rem;}
.product_slide{position: relative;}
.product_slide .swiper-slide{position: relative;}
.product_slide .swiper-slide{width:25% !important; position: relative;}
.product_slide .swiper-slide-active{width: 50% !important;  position: relative;}

.product_slide .swiper-slide p img{ width: 100%; height: 100%; }
.product_slide .swiper-slide dl{position: absolute; top: 4.5rem; left: 4.5rem; color:#fff;}
.product_slide .swiper-slide dl dt{font-weight: bold; font-size: 3.2rem;}
.product_slide .swiper-slide dl dt span{display: block; color:#fff; font-family: var(--font-eng); font-weight: bold; font-size:1.6rem}
.product_slide .swiper-slide dl dd{display: none;}
.product_slide .swiper-slide .product_on{display: none;}

.product_slide .swiper-slide-active dl dt{font-size: 5rem;}
.product_slide .swiper-slide-active dl dt span{font-size: 1.8rem; color:var(--point_color)}
.product_slide .swiper-slide-active dl dd{display: block;}
.product_slide .swiper-slide-active .product_on{display: block;}
.product_slide .swiper-slide-active .product_out{display: none;}

.product_slide .swiper-button-prev,
.product_slide .swiper-button-next{background: none; top:-8rem; }
.product_slide .swiper-button-prev svg,
.product_slide .swiper-button-next svg{display: none;}

.product_slide .swiper-button-prev{left:auto; right: 10rem; background: url(../images/main/arrow_prev.png) no-repeat;}
.product_slide .swiper-button-next{right:0; background: url(../images/main/arrow_next.png) no-repeat;}


.product_slide .swiper-pagination{bottom: auto; top:-10rem; left: auto; right: 5rem; text-align: right; font-weight: bold;}

/* 제품 슬라이드 모바일 */
.product_slide_mo{position: relative;}
.product_slide_mo a{display: block;}
.product_slide_mo p{position: relative;}
.product_slide_mo dl{position: absolute; top: 5rem; left: 5rem; color:#fff;}
.product_slide_mo dl dt{font-weight: bold; font-size: 3rem;}
.product_slide_mo dl dt span{display: block; font-family: var(--font-eng);font-size: 1.8rem;  color:var(--point_color)}

/* 메인 하단 */
.main_bottom{display: flex;  height: 100vh}
.bottom_left{width: 50%; position: relative;}
.bottom_left::before{content: ''; width: 100%; height: 100%; background: rgba(0,0,0,0.5); position: absolute; top: 0; left:0}
.bottom_left img{width: 100%; height: 100%; object-fit: cover;}
.bottom_left dl{position: absolute; top: 15rem; left: 15rem; color:#fff;}
.bottom_left dl dt{font-family: var(--font-eng); font-weight: bold; font-size: 6rem; text-transform: uppercase;}
.bottom_left dl dt span{display: block; color:var(--point_color); font-size:2.4rem ;}
.bottom_left dl dd{font-size: 2rem; font-weight: bold;}
.bottom_left ul{display: flex; gap:2rem; position: absolute; bottom: 8.7rem; left:15rem;}
.bottom_left ul li a{display: flex; gap:1rem; background:rgba(255,255,255,0.5); border:1px solid #fff; color:#fff; padding:1rem 2rem; border-radius: .5rem;}

.bottom_right{width: 50%; display: flex; flex-direction: column;}
.bottom_right_top{display: flex; height: 50%;}
.bottom_box{width: 50%; height: 100%; background: #6C707E; position: relative; color:#fff; transition: .5s;}
.bottom_box a{color:#fff;}
.bottom_box:nth-child(2){background: #2543A7;}
.bottom_box:hover{background: #333;}
.bottom_box span{position: absolute; top:15rem; left: 5rem; font-size: 5rem;}
.bottom_box dl{position: absolute; bottom: 7rem; left: 5rem;}
.bottom_box dl dt{font-family: var(--font-eng); text-transform: uppercase; font-weight: bold; font-size: 3rem;}
.bottom_box dl dd{font-size: 2rem;}


.bottom_right_bottom{position: relative; height: 50%;}
.bottom_right_bottom::before{content: ''; width: 100%; height: 100%; background: rgba(23,35,72, 0.8); position: absolute; top: 0; left: 0;}
.bottom_right_bottom a{color:#fff;}
.bottom_right_bottom span{position: absolute; top: 15rem; left: 5rem; font-size: 5rem;}
.bottom_right_bottom dl{position: absolute; bottom: 7rem; left: 5rem;}
.bottom_right_bottom dl dt{font-family: var(--font-eng); text-transform: uppercase; font-weight: bold; font-size: 3rem;}
.bottom_right_bottom dl dd{font-size: 2rem;}


/* 모바일 */
@media all and (max-width:1280px) {
    .bottom_left dl{left:5rem}
    .bottom_left ul{left:5rem}
    
}
    
@media all and (max-width:1023px) {
    /* 공통 */
    html{font-size: 9px;}
    .inner{padding-left:2rem; padding-right: 2rem;}
    .sub_top{height: 30rem !important;}
    .sub_top h2{font-size: 4rem !important; margin-top: 7rem;}
    .h4{font-size: 2.5rem !important;}
    
    /* 메인 */
    .hsec1 h1{max-width:200px}
    .inquiry_btn{display: none;}
    .msec1 .swiper-slide .bg{height: 60vh;}
    .msec1 .swiper-slide .slogan .text1{font-size: 5rem;}
    .msec1 .swiper-slide .slogan .text2{font-size: 1.8rem;}

    .main_product{padding:5rem 0;}
    .pro_tit{text-align: center;}
    .pro_tit h2{font-size: 4rem;}
    .product_slide .swiper-slide{width: auto !important;}
    .product_slide .swiper-slide-active{width: auto !important}
    .product_slide .swiper-slide-active dl dt{font-size: 3rem;}
    .product_slide .swiper-pagination{top:-5rem; left:50%; transform: translateX(-50%); text-align: center;}
    .product_slide .swiper-button-prev, 
    .product_slide .swiper-button-next{top:-3rem}
    .product_slide .swiper-button-prev{right:auto; letter-spacing: 30%;}
    
    .main_bottom{flex-direction: column; height: auto;}
    .bottom_left{width: 100%;}
    .bottom_left dl{top: 5rem; left:2rem}
    .bottom_left dl dt{font-size:4rem}
    .bottom_left ul{left:2rem; bottom:2rem}
    .bottom_left dl dd{font-size: 1.5rem;}
    
    .bottom_right{width: 100%; flex-direction: column;}
    .bottom_right_top{height: auto;}
    .bottom_box{height: auto;}
    .bottom_right_top{height: 200px;}
    .bottom_right_bottom{height: auto;}
    .bottom_box span{top: 2rem; left:2rem}
    .bottom_box dl{left: 2rem; bottom: 4rem;}
    .bottom_right_bottom dl{left:2rem; bottom: 3rem;}
    .bottom_right_bottom span{left:2rem; top:2rem}
    .bottom_box dl dt{font-size: 2.5rem;}
    .bottom_box dl dd{font-size: 1.5rem;}
    .bottom_right_bottom dl dd{font-size: 1.5rem;}
    
}