#main{position: relative; /*height:90rem;*/ }
#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%; 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:8rem; font-family: var(--font-eng); text-transform: uppercase; font-style: italic; font-weight: 900; transition:0.5s 0.5s}
.msec1 .swiper-slide .slogan .text2{top:10px;opacity:0; filter: blur(10px); font-size:4.6rem; font-family: var(--font-eng); text-transform: uppercase; font-style: italic; font-weight: 900;  transition:0.5s 1s}
.msec1 .swiper-slide .slogan .text3{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)}
.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; 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: 0; 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;}




/* 스크롤 다운 */
.scroll_down{position: absolute; bottom: 0; left: 10rem;  writing-mode: vertical-rl; font-family: var(--font-eng); text-transform: uppercase; font-style: italic; font-weight: 900;  color:#fff; z-index: 8;}
.scroll_down span{width: 2px ; height: 26rem; background: rgba(255,255,255,0.5); display: block; margin-left: 2rem; position: relative;}
.scroll_down span::before{content: ''; width: 100%; height: 100%; background: var(--main_color); position: absolute; top: 0; left: 0; animation: line 2s infinite;}

@keyframes line{
    from {
        height: 0;
      }
    
      to {
        height: 100%;
      }
}


/* 비디오 */
#circle{position: absolute; bottom: 0; right: 5rem; z-index: 9; opacity: .5;}
#circle::before{content: '▶'; position: absolute; bottom: 14rem; right: 14rem; color:#fff}
#circle:hover{opacity: 1;}
#circle text{font-family: var(--font-eng);	font-weight: bold}
#circle svg {animation:rotate 5s infinite linear}

@keyframes rotate {
    from { transform: rotate(360deg); }
    to { transform: rotate(0); }
}



/* 제품 */
/* .product{display: flex; padding-top: 10rem; position: relative;}
.product::before{content: 'MAPRO PRODUCT'; font-family: var(--font-eng); font-size: 1.6rem; font-style: italic; font-weight: 900;  position: absolute; top:14rem; right: 5rem; writing-mode: vertical-rl; color:#fff; z-index: 9;}

.pro_left{width: 50%;}
.pro_left ul{display: flex; flex-wrap: wrap;}
.pro_left ul li{width: 50%; height: calc(50vh - 5rem); position: relative; overflow: hidden;}
.pro_left ul li::before{content: ''; width: 100%; height: 100%; background: rgba(0,0,0,0.5); position: absolute; top: 0; left: 0; transition: .5s; }

.pro_left ul li:hover::before{animation:cover .5s ; animation-fill-mode: forwards;}

@keyframes cover{
    from {
        background: rgba(0,0,0,0.5);
        height: 0;
      }
    
      to {
        background:linear-gradient(180deg, rgba(192,25,25,1) 0%, rgba(0,0,0,0.62) 100%);
        opacity: 0.9;
        height: 100%;
      }
}

/*.pro_left ul li:hover::before{background: rgba(192,25,33,0.7);}
.pro_left ul li img{width: 100%; height: 100%; object-fit: cover;}
.pro_left ul li dl{position: absolute; top: 4rem; left: 4rem; color:#fff;}
.pro_left ul li dl dt{font-family: var(--font-eng); text-transform: uppercase; font-style: italic; font-weight: 900;  font-size: 3.6rem; margin-bottom: 1rem;}
.pro_left ul li dl dd{font-weight: bold; font-size: 2rem;}
.pro_left ul li span{position: absolute; top: 3rem; right: 3rem; opacity: 0; transition: .5s;}
.pro_left ul li:hover span{opacity: 1;}


.pro_right{width: 50%; height: calc(100vh - 10rem); position: relative; overflow: hidden;}
.pro_right h2{position: absolute; top: 4rem; left: 4rem; color:#fff; z-index: 9; font-size: 2.4rem; }
.pro_right h2 span{font-family: var(--font-eng); text-transform: uppercase;  font-style: italic; font-weight: 900;  font-size: 6rem; display: block;}
.pro_right img{width: 100%; height: 100%; object-fit: cover;}


.pro_slide dl{position: absolute; bottom: 15rem; left: 4rem; color:#fff; z-index: 9;}
.pro_slide dl dt{font-weight: bold; font-size: 4.6rem; position: relative; padding-bottom: 2.3rem; margin-bottom: 2.3rem; }
.pro_slide dl dt::before{content: ''; width: 7rem; height: 4px; background: #fff; position: absolute; bottom: 0; left: 0;}
.pro_slide dl dd{font-weight: bold; font-size: 2rem;}
.pro_slide dl dd span{display: block; padding-top: 2.3rem;}
.pro_slide dl dd span i{display: inline-block; margin-left: 2.3rem;}


.pro_slide .swiper-button-next,
.pro_slide .swiper-button-prev{background: none; top: auto; bottom: 5rem;}

.pro_slide .swiper-button-next img,
.pro_slide .swiper-button-prev img{width: auto; height: auto;}

.pro_slide .swiper-button-next{right: 5rem;}
.pro_slide .swiper-button-prev{left:auto; right: 10rem;}*/

/* 메인 제품 수정 */
.product ul{display: flex;}
.product ul li{flex:1; position: relative; }
.product ul li::before{content: ''; width: 100%; height: 100%; background: rgba(0,0,0,0.5); position: absolute; top: 0; left:0; transition: .5s;}
.product ul li dl{position: absolute; bottom: 20rem; left: 4rem;}
.product ul li dl dt{font-weight: bold; font-size: 4.6rem; position: relative; padding-bottom: 2.3rem;  margin-bottom: 2.3rem;}
.product ul li dl dt::before{content: ''; width: 7rem; height: 0.4rem; background: #fff; position: absolute; bottom: 0; left: 0;}
.product ul li dl dd{font-size: 2rem; text-transform: uppercase;}

.product ul li a{display: block; color:#fff; font-weight: bold;}
.product ul li span{position: absolute; bottom: 5rem; left: 4rem; color:#fff; font-weight: bold; display: flex; gap:1rem}

.product ul li:hover::before{background:linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(113,7,12,0) 0%, rgba(113,7,12,1) 100%);}


/* 소식 */
.mapro{background: #000 url(../images/main/mapro_bg.png) no-repeat center; background-size: cover; color:#fff; height: 100vh;}
.mapro h2{padding: 10rem 0 7rem 0; text-align: center;}
.mapro a{color:#fff}

.mapro_con{display: flex; flex-wrap: wrap; position: relative; }
.banner_mapro{width: 50%; border: 1px solid rgba(255,255,255,0.3);  border-left:none; padding:4rem; position: relative;}
.banner_mapro p{font-weight: bold; font-size: 2.6rem;}
.banner_mapro ul{padding-top: 8rem; display: flex; gap:4rem}
.banner_mapro ul li a{display: block; position: relative; padding-bottom: 2rem; font-weight: bold; transition: .5s;}
.banner_mapro ul li a::before{content: ''; width: 100%; height: 3px; background: #fff; position: absolute; bottom: 0; left: 0;}
.banner_mapro ul li a:hover{color:var(--main_color)}
.banner_mapro ul li a:hover::before{background: var(--main_color);}
.banner_mapro i{position: absolute; bottom: 4rem; right: 4rem;}

.notice_box{border: 1px solid rgba(255,255,255,0.3); border-left:none; width: 25%; }
.notice_box a{display: block; height: 100%; transition: .5s;}
.notice_box dl{padding:4rem}
.notice_box dl dt{font-weight: bold; font-size: 2.6rem; margin-bottom: 2.3rem; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.notice_box dl dt span{display: block; font-family: var(--font-eng); text-transform: uppercase; font-size: 2rem; margin-bottom: 2rem; display: none;}
.notice_box dl dd{font-size: 2rem; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.notice_box a:hover{color:#333; background: #fff;}
.notice_box a:hover dl dt span{color:var(--main_color)}

.banner_rnd{width: 50%; border: 1px solid rgba(255,255,255,0.3); border-top: none; border-left:none; padding:5rem 5rem 15rem 5rem; position: relative;  }
.banner_rnd dl dt{font-weight: bold; font-size: 3.2rem; margin-bottom: 1.2rem;}
.banner_rnd dl dd{ font-size: 2rem; opacity: .8;}
.banner_rnd p{position: absolute; bottom: 4rem; right: 4rem;}

.banner_online,
.banner_mall{width: 25%; padding:5rem 5rem 15rem 5rem; position: relative;}

.banner_online dl dt,
.banner_mall dl dt{font-weight: bold; font-size: 3.2rem; margin-bottom: 1.2rem;}
.banner_online dl dd,
.banner_mall dl dd{ font-size: 2rem; opacity: .8;}
.banner_online p,
.banner_mall p{position: absolute; bottom: 4rem; right: 4rem;}

.banner_online{background: #4d4d4d; transition: .5s; width: 50%;}
.banner_online:hover{background: var(--main_color);}

.banner_mall{background: var(--main_color); transition: .5s; display: none;}
.banner_mall:hover{background:#333;}