#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:2.4rem; font-weight: bold; transition:0.5s 0.5s}
.msec1 .swiper-slide .slogan .text2{top:10px;opacity:0; filter: blur(10px); font-size:5.5rem;  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:54.6rem; 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;
    }
  }

.tab {overflow: hidden; display: flex; float: right;}
.tab button {background-color: inherit;color:#666;font-weight: bold;border: none;outline: none;cursor: pointer;padding: 14px 16px;transition: 0.3s;font-size: 17px;}
.tab button:hover { color:var(--main_color); background: url(../images/main/pro_on.png) no-repeat bottom center;}
.tab button.active { color:var(--main_color); background: url(../images/main/pro_on.png) no-repeat bottom center;}
.tabcontent { display: none; clear: both;}

.main_products{padding:10rem 0}
.main_pro{display: flex; gap:5rem}

.cate{position: relative; width: 30%; color:#fff}
.cate a{color:#fff}
.cate dl{position: absolute; top: 5rem; left: 5rem;}
.cate dl dt{font-weight: bold; font-size: 4.6rem; margin-bottom: 3rem;}
.cate dl dd{margin-bottom: 1.5rem; font-size: 2rem;}
.cate dl dd a:hover{font-weight: bold;}
.cate span{position: absolute; bottom: 5rem; left: 50%; transform: translateX(-50%); background: var(--main_color); color:#fff; border-radius: 10rem; padding:.5rem 2rem; text-align: center;}


.product_list{width: calc(70% - 5rem);}
.product_list ul{display: flex; flex-wrap: wrap; gap:5rem; margin-right: -5rem;}
.product_list ul li{width: calc(50% - 5rem); border: 1px solid #ccc; padding: 3rem;}
.product_list ul li span{display: inline-block; border: 1px solid #ccc; padding:.3rem 1rem; font-size: 1.4rem;}
.product_list ul li dl{margin:1rem 0}
.product_list ul li dl dt{font-weight: bold; font-size: 2.6rem;}
.product_list ul li dl dd{font-size: 1.6rem; font-weight: bold; color:#666}
.product_list p{width: 100%; height: 222px;}
.product_list p img{width: 100%; height: 100%; object-fit: cover;}



.product_thumb{display: flex; flex-wrap: wrap; gap:5rem; margin-right: -5rem;}
.product_thumb li{width: calc(33% - 5rem); border: 1px solid #ccc;}
.product_thumb li a{display: block; transition: .1s}
  
.product_thumb li span{display: flex; gap:1rem; padding-left:2rem; padding-top:2rem }
.product_thumb li span i{border: 1px solid #ccc; font-size: 1.1rem; padding: 0 1rem }
.product_thumb li dl{padding: 2rem;}
.product_thumb li dl dt{font-weight: bold; font-size: 2rem;}
.product_thumb li dl dd{color:#666; font-size: 1.4rem;}




/* 하단부 */
.main_bottom{background: url(../images/main/bottom_bg.jpg) no-repeat bottom center;}
.main_box{display: flex; gap:5rem; width:100%; }
.main_new{width: 65%; height: 29.3rem; position: relative;}
.main_new a{display: block; background:#8F8F8F; color:#fff; border-bottom-left-radius: 5rem; padding: 4rem 0 0 3.6rem; width: 100%; height: 100%;}
.main_new dl dt{font-weight: bold; font-size: 3.2rem; display: flex; gap:2.5rem; align-items: center;}
.main_new dl dt i{display: inline-block; width: 8rem; height: 2px; background: #fff;}
.main_new dl dd{font-size: 2rem;}
.main_new p{position: absolute; bottom: 0; right: 0;}

.main_company{width: calc(35% - 5rem); height: 29.3rem; background: var(--main_color) url(../images/main/logo_em.png) no-repeat 90% 10%; color:#fff; padding: 4rem 0 0 3.6rem;border-bottom-left-radius: 5rem;}
.main_company dl dt{font-weight: bold; font-size: 3.2rem;}
.main_company dl dd{font-size: 2rem;}
.main_company ul{display: flex; gap:5rem; margin-top: 11rem;}
.main_company ul li a{color:#fff;display: flex; gap:1rem; align-items: center;}

.main_popular{width: 100%; display: flex;  justify-content: space-between; color:#fff; padding:10rem 0}
.main_popular dl dt{font-weight: bold; font-size: 3.2rem;}
.main_popular dl dd{font-size: 2rem;}
.main_popular ul{display: flex; gap:2.5rem}
.main_popular ul li a{display: inline-flex; gap:1rem; align-items: center; border-radius: 100px; border:1px solid #fff; color:#fff; padding:.5rem 2rem; text-align: center;}