#main{position: relative; }
#section1{overflow: hidden;}
.msec1{position: relative;}
.msec1 .swiper-slide{overflow:hidden}
.msec1 .swiper-slide .slogan{position:absolute; z-index:10; top:40%; left:50%; transform: translateX(-50%); width:100%; padding:0 2rem; max-width:var(--container); }
.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:6.5rem; font-family: var(--font-eng); font-weight: 800; 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 .slogan .text3{top:10px;opacity:0; filter: blur(10px); font-size:2rem;  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)}
.msec1 .swiper-slide-active .slogan .text3{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;
    }
  }



/*  제품 안내 */
.main_product{position: relative; height: 100vh; display: flex; align-items: center;}
.main_product::before{content: 'DAEYOUNG'; font-weight: 900; font-size: 15rem; position: absolute; top: 50%; left: 0; transform: translateY(-50%); color:#E4F1F6; /*transform: rotate(90deg);*/ writing-mode: vertical-rl;}

.product_slide{position: relative; overflow: hidden;}
.product_slide .inner{overflow: hidden;}
.product_slide .swiper-slide{display: flex; gap:5rem}

.product_slide dl dt{font-weight: 900; font-family: var(--font-eng); font-size: 6rem; margin-bottom: 2rem;}
.product_slide dl dt span{display: block; font-size:2.8rem ; margin-bottom: 2rem;}
.product_slide dl dd span{display: block; font-weight: bold; font-size: 3.8rem;}
.product_slide a{display: inline-flex; align-items: center; padding: 2rem 4rem; border: 1px solid #ccc; transition: .5s; margin-top: 5rem;}
.product_slide a img{margin-left: 2rem;}
.product_slide a:hover{border-color:var(--sub_color);}

.product_slide .swiper-pagination{display: flex; gap:3rem;  position: relative; width: 50%; left: 50%; transform: translateX(-50%);}
.product_slide .swiper-pagination-bullet{opacity: .7; flex:1; width: auto; height: auto; background: none; font-weight: bold; border-radius: 0; padding-top: 1rem;}
.product_slide .swiper-pagination-bullet-active{opacity: 1; border-top:3px solid #000}

/* 웨이브 애니메이션 */
.line-wave {
    position: absolute;
    width: 100%;
    height: 100vh;
    left: 0;
    top: 20%;
    overflow: visible;
    pointer-events: none;
    z-index: 1;
    
    --move-period: 30s;
    --scale-period: 25s;
    
    --color-one: hsla(202, 100%, 50%, 0.3);
    --color-two: hsla(207, 100%, 50%, 0.3);
    --color-three: hsla(204, 100%, 69%, 0.3);
  }
  
  .line-wave path {
    transform-origin: center;
    stroke-width: 1;
    fill: transparent;
  }
  
  .line-wave g:nth-child(1) {
    animation: move-across var(--move-period) infinite linear;
  }
  .line-wave g:nth-child(2) {
    animation: move-across calc(var(--move-period) * 1.2) calc(var(--move-period) * -0.33) infinite linear;
  }
  .line-wave g:nth-child(3) {
    animation: move-across calc(var(--move-period) * 1.4) calc(var(--move-period) * -0.66) infinite linear;
  }
  .line-wave g:nth-child(1) path {
    animation: scale-y calc(var(--scale-period)) calc(var(--scale-period) * -0.2) infinite ease;
    stroke: var(--color-one);
  }
  .line-wave g:nth-child(2) path {
    animation: scale-y calc(var(--scale-period) * 1.2) calc(var(--scale-period) * -0.53) infinite ease;
    stroke: var(--color-two);
  }
  .line-wave g:nth-child(3) path {
    animation: scale-y calc(var(--scale-period) * 1.1) calc(var(--scale-period) * -0.86) infinite ease;
    stroke: var(--color-three);
  }
  
  @keyframes scale-y {
    0% {
      transform: scaleY(30%);
    }
  
    50% {
      transform: scaleY(-30%);
    }
  
    100% {
      transform: scaleY(30%);
    }
  }
  
  @keyframes move-across {
    0% {
      transform: translateX(0);
    }
  
    100% {
      transform: translateX(-50%);
    }
  }






  /* 메인 연구소 */
  .main_rnd{background: url(../images/main/company.jpg) no-repeat center; height: 100vh; display: flex; align-items: center;}
  .main_rnd dl{margin-bottom: 7rem;}
  .main_rnd dl dt{font-family: var(--font-eng); font-weight: 800; font-size:6rem; margin-bottom: 3rem; line-height: 1.2;}
  .main_rnd dl dt span{display: block; font-size: 2.8rem; margin-bottom: 2rem;}
  .main_rnd ul{display: flex; gap:3rem}
  .main_rnd ul li a{display: block; padding:2rem 3rem; text-align: center; color:#fff; background-color: var(--sub_color); transition: .5s;}
  .main_rnd ul li:last-child a{background: #fff; border: 1px solid #ccc; color:#333;}
  .main_rnd ul li img{margin-left: 5rem;}
  .main_rnd ul li a:hover{background: var(--main_color);}
  .main_rnd ul li:last-child a:hover{background: #ccc;}
  .main_rnd p{position: absolute; top: 20%; right: 10%; animation:rotate 15s infinite linear}
  @keyframes rotate {
    from { transform: rotate(360deg); }
    to { transform: rotate(0); }
}

  /* 메인 하단 */
  .main_bottom{position: relative;}
  .main_bottom .title_h2{font-weight: 900; font-size: 6rem; margin-bottom: 3rem;}

  .botttom_wrap{display: flex; gap:4rem}

  .main_board{display: flex; gap:4rem; width: 50%;  transition: .5s; }
  .main_board li{flex:1; position: relative;}
  .main_board li a{display: block; border: 1px solid #ccc;  height: 21.3rem;  padding: 3rem; transition: .5s; }
  .main_board li dl dt{font-weight: bold; font-size: 2rem;}
  .main_board li dl dd{position: absolute; left: 3rem; bottom: 3rem; font-size: 1.6rem; font-weight: bold; color:#666}
  .main_board span{opacity: 0; position: absolute; bottom: 3rem; right: 3rem;}

  .main_board li a:hover{border-top: 3px solid #000;}
  .main_board li a:hover span{opacity: 1;}

  .main_banner{display: flex; gap: 4rem; width: 50%;}
  .main_banner li{flex:1;  position: relative; font-size: 2rem;}
  .main_banner li a{display: block; height: 21.3rem; padding:3rem; background: var(--sub_color); color:#fff; transition: .5s;}
  .main_banner li p{position: absolute; top: 3rem; right: 3rem;}
  .main_banner li span{position: absolute; bottom: 3rem; right: 3rem;}
  .main_banner li:last-child a{background: #6C7E85;}
  .main_banner li a:hover{background: var(--main_color);}

  /* 구글맵 */
  .bottom_map{position: relative; }
  .map_tabbutton{position: absolute; top: 5rem; left: 50%; transform: translateX(-50%); display: flex; gap:2rem}
  .map_tabbutton button{border: 1px solid #ccc; padding: 2rem 7rem; text-align: center; background:rgba(255,255,255,0.5);}

  
   .map_tabbutton button:hover,  
   .map_tabbutton button.active {
         background-color: var(--sub_color);
         color:#fff;
         border-color:transparent
  }