#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);  text-transform: uppercase;}
.msec1 .swiper-slide .slogan .text1{top:0; opacity:0; font-size:8rem; 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:8rem; padding-left: 60rem; border-bottom: 1px solid #fff;  transition:0.5s 1s}
.msec1 .swiper-slide .slogan .text3{top:10px;opacity:0; filter: blur(10px); font-size:2.6rem;  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:30px;opacity:1; filter:blur(0)}

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

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

.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;
    }
  }


.mouse{position: absolute; bottom: 50rem; left:50%; transform: translateX(-50%); z-index: 8; color:#fff; text-align: center;}
.mouse span{display: block; margin-top: 3rem; font-weight: bold; font-size: 1.2rem;}


/*  제품 소개 */
.main_product{position: relative; height: 100vh; display: flex; align-items: center;}
.main_product .inner{position: relative;}
.main_product .inner::before{content: ''; background: url(../images/main/product_bg.svg) no-repeat center; width: 852px; height:224px; position: absolute; top: 0; left: 0;}

.product_slide{position: relative; overflow: hidden;}
.product_slide .inner{overflow: hidden;}
.product_slide .swiper-slide{display: flex; gap:5rem}
.product_slide p{width: 50%;}
.product_slide dl{width:50%}
.product_slide dl dt{font-weight: 900; font-family: var(--font-eng); font-size: 6.5rem; text-transform: uppercase; margin-bottom: 1.5rem;}
.product_slide dl dt span{display: block; font-size:2rem; color:var(--main_color); margin-bottom: 2rem; font-family:'Pretendard', sans-serif; font-weight: 400;}
.product_slide dl dt em{font-size: 3.6rem; display: inline-block; margin-left: 3rem; font-weight: bold;}
.product_slide dl dd span{display: block; font-weight: bold; font-size:2.2rem; font-family: var(--font-eng); margin-bottom: 2.3rem;}
.product_slide a{display: inline-flex; align-items: center; padding: 2rem 4rem; background: var(--main_color); color:#fff; border-radius: 100px; 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; margin-top: 6rem; }
.product_slide .swiper-pagination-bullet{opacity: .7; flex:1; width: auto; height: auto; background: none; font-weight: bold; border-radius: 0; padding-top: 3rem; border-top:3px solid #ccc}
.product_slide .swiper-pagination-bullet-active{opacity: 1; border-top:3px solid var(--main_color)}

/* 회사소개 */
.main_company{background: url(../images/main/company_bg.jpg) no-repeat center; height: 100vh;}
.main_company h2{padding-top:18rem; text-align: center;}
.main_company h2 img{}
.main_company h2 span{display: block; color:#fff; font-weight: bold; font-size:2.6rem; margin-top: 6.6rem;}
.company_list{display: flex; gap:4.6rem; color:#fff; margin-top: 11.5rem;}
.company_list dl{flex:1;  backdrop-filter: blur(30px); border-radius: 2rem; padding:3rem} 
.company_list dl:first-child,
.company_list dl:hover{background: var(--main_color);}

.company_list dl dt{font-family: var(--font-eng); font-size: 1.5rem; font-weight: bold; margin-bottom: 1.7rem;}
.company_list dl dt i{display: block; margin-bottom: 2.8rem;}
.company_list dl dd{font-size: 2rem;position: relative;}
.company_list dl dd span{display: flex; align-items: center; justify-content: center; width: 4.6rem; height: 4.6rem; border:1px solid #fff; border-radius: 100px; position: absolute; bottom: 0; right: 0;}
.company_list dl:first-child dd span,
.company_list dl:hover dd span{background: #fff; color:var(--main_color)}

/* 게시판 */
.cscenter .inner{display: flex; gap:4.5rem}
.cs_left{width: 65%;}
.cs_left h2{font-weight: bold; font-size: 5.5rem; display: block;}
.cs_left h2 img{margin: 3.5rem 0;}
.main_board_wrap{display: flex; gap:4.6rem}
.main_board{flex:1; width: 50.3rem; height: 22.2rem;}
.main_board a{display:block; padding:4rem; border-radius:2rem; border:1px solid #ccc}
.main_board dl dt{font-size:2.2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 5rem; width:40rem}
.main_board dl dt span{display: block; font-weight: bold; font-family: var(--font-eng); color:var(--main_color); font-size: 1.5rem; margin-bottom: 1.5rem;}
.main_board dl dd{font-weight: bold; font-family: var(--font-eng);font-size: 1.5rem; position: relative; }
.main_board dl dd span{position: absolute; bottom: 0; right: 0; font-size: 3rem;}

.cs_right{width: calc(35% - 4.5rem);}
.box{width: 50.3rem; height: 22.2rem; background: #818181; border-radius: 2rem; margin-bottom: 3rem; transition: .5s;}
.box a{display:block; padding:4rem; color:#fff;}
.box dl dt{font-weight: bold; font-family: var(--font-eng);font-size: 1.5rem; margin-bottom: 1.5rem; }
.box dl dt img{display: block; margin-bottom: 3rem;}
.box dl dd{font-size: 2.2rem; position: relative;}
.box dl dd span{display: flex; align-items: center; justify-content: center; width: 4.6rem; height: 4.6rem; background: #fff; color:#333; border-radius: 100px; position: absolute; bottom: 0; right: 0;}

.box:last-child{background: var(--main_color);}
.box:last-child dd span{color:var(--main_color)}
.box:hover{background: #333;}