#main{position: relative; margin-top:65px}
/* ���� ���� */
.main_video{width: 100%; /*height: 100vh;*/ overflow: hidden; position: relative; display:flex; justify-content:center; align-items:center}
.main_video video{width: 100%; /*height: 100vh; max-height:1080px;*/width: 100%; object-fit: cover;}
#myBtn{background-color: transparent; position:relative;}
#myBtn span{font-size: 10rem; color:#fff; text-shadow: 0 0 0.5rem rgba(0,0,0,0.5); opacity: .5;}

.main_video  .main_txt{position:absolute; z-index:10; text-align:right; bottom:0; right:0;}
.main_video  .main_txt h2{display:inline-block; max-width:200px; width:30%; text-align:right; margin:0 20px 0 0;  margin-bottom:10px}
.main_video  .main_txt p {font-size:1.25rem; color:#fff; font-weight:900; margin:0 20px 30px 0}
/*
.main_video  .main_txt button {display:none;}
*/

@media all and (min-width:1200px) {
.main_video{width: 100%; /*height: 100vh;*/}
.main_video  .main_txt p{font-size:1.25rem}
}



#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); text-align:left;}
.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:2rem; font-family: var(--font-eng); transition:0.5s 0.5s}
.msec1 .swiper-slide .slogan .text2{top:10px;opacity:0; filter: blur(10px); font-size:6rem;  transition:0.5s 1s}
.msec1 .swiper-slide .slogan .text3{top:10px;opacity:0; filter: blur(10px); font-size:3rem;  transition:0.5s 1s}


.msec1 .swiper-slide .bg{transform:scale(1.1);transition:10s; height:90rem; 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{width: 5rem; height: 5rem; background: url(../images/main/prev.png) no-repeat center; top:70%; left:50%; transform: translateX(-70rem);}
.msec1 .swiper-button-next{width: 5rem; height: 5rem; background: url(../images/main/next.png) no-repeat center; top:70%; left:50%; transform: translateX(-63rem); right:0}
.swiper-pagination{max-width:var(--container); font-weight: bold; padding:0 2rem; text-align: left; color:#fff; position: absolute; left: 50%; transform: translate(-50%);  bottom: 10rem;}

.swiper-progress-bar {position:  absolute; left: 50%; transform: translate(-50%);; width:100%; max-width: var(--container); display: block; z-index: 1; height:.5rem; }
.swiper-progress-bar .slide_progress-bar {position: absolute; height: .3rem; background:#fff; width:50rem; clear: both; opacity:1; bottom: 15rem; left: 2rem; right: 0; }
.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;}
.swiper-progress-bar.active .slide_progress-bar {opacity: 1;}
.swiper-progress-bar.animate .slide_progress-bar:after {transition: width linear;transition-delay: unset; width: 100%; transition-duration: 5s;}

.content_inner{position:relative; max-width: var(--container); width:100%; margin:0 auto; z-index:1}

/*CS*/
.main_cscenter{position:relative; }
.main_cscenter .inner{padding:0; position:relative; z-index:1;}
.main_cscenter .box{position:relative; padding:3rem 2rem}
.main_cscenter .box h3 a{font-size:2rem; color:#fff; margin-bottom:2rem; font-weight:800; align-items:center; display:flex; text-transform:uppercase}
.main_cscenter .box h3 i{margin-left:1rem}
.main_cscenter .box h3 i img{height:30px}
.main_cscenter .box a{color:#fff}
.main_cscenter .box.video_data{background:var(--main_color)}
.main_cscenter .box.catalog{background:var(--mono_color)}
.main_cscenter .box.notice{background:var(--sub_color); background:url(/images/main/notice_bg.jpg) no-repeat center center; background-size:cover !important}

.main_cscenter .video_data img,
.main_cscenter .video_data span{display:block; text-align:center;}
.main_cscenter .video_data span{margin:1rem 0; font-weight:600; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}

.main_cscenter .catalog span{font-size:0.9em; font-weight:600; border-bottom:1px solid #fff; padding-bottom:3px; display:inline-block;}

.main_cscenter .notice{}
.main_cscenter .notice dl{position:relative}
.main_cscenter .notice dl dt{font-size:1.3em; margin-bottom:2rem; font-weight:bold}
.main_cscenter .notice dl dd.txt{ display:-webkit-box;
-webkit-line-clamp: 2; /* ���μ� */
-webkit-box-orient: vertical;
word-wrap:break-word; 
line-height: 1.4;
height: 2.8em;
overflow:hidden;
text-overflow:ellipsis;
white-space:normal;
font-weight:500
}
.main_cscenter .notice dl dd.date{font-size:0.8em; margin-top:5rem; font-weight:600}

@media all and (min-width:540px) {
.main_cscenter .video_data ul{display:flex; gap:2rem; }
.main_cscenter .cs_center{display:flex; flex-wrap:wrap}
.main_cscenter .cs_center .box{width:50%}

}
@media all and (min-width:768px) {
.main_cscenter .box{padding:5rem}
}

@media all and (min-width:1024px) {
.main_cscenter .box{padding:3rem}
.main_cscenter .inner{display:flex; flex-wrap:wrap;}
.main_cscenter .video_data ul{ flex-wrap:wrap }
.main_cscenter .video_data{width:33.33%}
.main_cscenter .cs_center{width:66.66%; }
}

@media all and (min-width:1280px) {
.main_cscenter .video_data ul{gap:4%; width:98%}
.main_cscenter .video_data ul li{width:48%;}
.main_cscenter .video_data{width:50%}
.main_cscenter .cs_center{width:50%; }

.main_cscenter .catalog img{max-width:200px; display:block}

}

@media all and (min-width:1370px) {
.main_cscenter .box.video_data{padding-left:2rem}
.main_cscenter .box.notice{padding-right:2rem}
}


@media all and (min-width:1400px) {
.main_cscenter .box{padding:4rem 3.5rem}
.main_cscenter .box h3 a{font-size:2.4rem; margin-bottom:3rem}
.main_cscenter:before,
.main_cscenter:after{content:''; display:block; position:absolute; bottom:0; top:0; width:50%; z-index:0;}
.main_cscenter:before{background:var(--main_color)}
.main_cscenter .box.notice{background-image:none}
.main_cscenter:after{width:40%; right:0; background:url(/images/main/notice_bg.jpg) no-repeat center center; background-size:cover !important}
}

/* 메인 배너 */
.main_banner{padding:3rem 0 3rem 0; position: relative; background: var(--main_color);}

/*������ǰ*/
.main_product {padding:3rem 0 0}
.main_product h3{text-align:center; font-size:3rem; font-weight:800; margin-bottom:3rem}
.main_product .product_cover{background:#c8c8c8; color:#fff; padding:3rem 0 7rem; background-size:cover !important; position:relative}
.main_product .product_cover h4{font-size:3rem; font-weight:800; text-align:center}
.main_product .product_cover span{font-size:1.6rem; display:block;}
.main_product .product_cover .deco{display:none}
.main_product .product_cover.servo_cover{background:url(/images/main/cover01.jpg) no-repeat center center}
.main_product .product_cover.hservo_cover{background:url(/images/main/cover02.jpg) no-repeat center center}
.main_product .product_cover.screw_cover{background:url(/images/main/cover03.jpg) no-repeat center center}
.main_product .product_cover.fa_cover{background:url(/images/main/cover04.jpg) no-repeat center center}

.main_product .product_category{display:flex; background:#fff; padding:1rem; gap:1.5rem; justify-content:center; font-size:1.4rem; margin-top:-5rem; margin-bottom:3rem; position:relative; z-index:2;}
.main_product .product_category li a{padding: 1rem 0; display:block; font-weight:800}
.main_product .product_category li.active a{font-weight:800; color:var(--main_color); border-bottom:3px solid var(--main_color)}
/*.main_product .product_category li:nth-child(2){display:none}*/


.product_list{position:relative; margin-bottom:3rem}
.product_list .product_info{position:relative; margin-bottom:2rem;; 
border:1px solid #e6e6e6; 
/*
webkit-box-shadow: 0px 0px 15px -5px rgba(0,0,0,0.15);
-moz-box-shadow: 0px 0px 15px -5px rgba(0,0,0,0.15);
box-shadow: 0px 0px 15px -5px rgba(0,0,0,0.15);*/}

.product_list .product_info a{position:relative; display:block;  width:100%; height:100%;}
.product_list .product_info dl{padding:2rem; }
.product_list .product_info dt{font-size:2.4rem; font-weight:800; margin-bottom:1.5rem}
.product_list .product_info dt i{color:#666; font-weight:700; font-size:0.6em}
.product_list .product_info dt span.cate{font-size:0.7em; display:block; color:var(--main_color);}
.product_list .product_info dd{/*padding-left:15rem;*/ position:relative; margin-bottom:0.5rem}
.product_list .product_info dd:last-child{margin-bottom:0rem}
.product_list .product_info dd span{font-weight:600; color:#666; /*position:absolute; left:0;*/ display:inline-block; margin-right:1rem}


@media all and (min-width:540px) {
.product_list{display:flex; gap:2rem; flex-wrap:wrap}
.product_list .product_info{width:calc(50% - 1rem)}
.main_product .product_category{font-size:1.6rem}
}


@media all and (min-width:768px) {
.product_list{margin-bottom:7rem}
.main_product{padding:7rem 0 0}
.main_product .product_cover{padding:7rem 0 10rem}
}

@media all and (min-width:1024px) {
.product_list .product_info{width:calc(25% - 1.5rem)}
.product_list .product_info dt{font-size:1.9rem}
}

@media all and (min-width:1280px) {
.product_list{margin-bottom:10rem}
.main_product{padding:10rem 0 0}
.main_product h3{font-size:5rem}
.product_list {gap:3rem}
.product_list .product_info{width:calc(25% - 2.25rem); }
.product_list .product_info dl{padding:3rem}
.product_list .product_info dt{font-size:2.2rem}

.main_product .product_category{font-size:2rem; padding:2rem 5rem; margin-top:-7rem; justify-content:left; gap:4rem}

.main_product .product_cover {padding:12rem 0 16rem}
.main_product .product_cover h4{font-size:5rem; text-align:left; padding:0 5rem}
.main_product .product_cover h4 span{font-size:2rem; margin-bottom:2rem; display: none;}
.main_product .product_cover .inner{position:relative}
.main_product .product_cover .deco{display:block; position:absolute; max-width:550px; right:3%; top:-15rem; z-index:3;}
.main_product .product_cover.hservo_cover .deco{max-width:330px; top:-10rem}

.product_list .product_info:after, .product_list .product_info:before,
.product_list .product_info a:after, .product_list .product_info a:before{
  width: 3px;
  height: 0;
  position: absolute;
  display: block;
  content: "";
  z-index:3;
  background-color:var(--main_color);
  transition:all 0.2s cubic-bezier(.25,.25,.53,.94);
}
.product_list .product_info:after{width:0px; height:3px;}
.product_list .product_info a:after{width:0px; height:3px;}

.product_list .product_info:before{width:3px; height:0px;}
.product_list .product_info a:before{width:3px; height:0px;}

.product_list .product_info:after{left:0; top:0}
.product_list .product_info:before{left:0; bottom:0}

.product_list .product_info a:after{right:0; bottom:0}
.product_list .product_info a:before{right:0; top:0; }
.product_list .product_info:hover:after{width:100%}
.product_list .product_info:hover:before{height:100%;}
.product_list .product_info:hover a:after{width:100%}
.product_list .product_info:hover a:before{height:100%;}


.product_list .product_info:hover{transform:translateY(-10px); box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.3); transition: .2s; border:0px}

.product_list .product_info dd{font-size:1.5rem; }
}



.main_bottom{height: 40rem; position: relative;}
.main_bottom::before{content: ''; width: 100%; height: 100%; background: rgba(0,0,0,0.5); position: absolute; top:0; left: 0;}
.main_bottom::after{content: ''; width: 0; height: 0; background: transparent; border-right:100px solid #fff; border-top: 100px solid transparent; position: absolute; right: 0; bottom: 0; z-index: 9;}
.main_bottom video{width: 100%; height: 100%; object-fit: cover;}

.main_bottom .inner{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; justify-content: space-between; color:#fff}
.main_bottom .inner dl dt{font-weight: bold; font-size:3rem; padding-bottom: 3rem;}
.main_bottom .inner ul{display: flex; gap:6rem}
.main_bottom .inner ul li{ display: flex; align-items: center; justify-content: center;}
.main_bottom .inner ul li a{display: flex; flex-direction: column; gap:2rem; justify-content: center; align-items: center; width: 20rem; height: 20rem; font-weight: bold; font-size:2.4rem; color:#fff; background: var(--main_color); transition: .5s;}
.main_bottom .inner ul li:nth-child(2) a{background: var(--sub_color);}
.main_bottom .inner ul li a:hover{background: #333;}