#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; transition:0.5s 0.5s; font-size:2.4rem; font-family: var(--font-eng); margin-bottom: 2.7rem; } 
.msec1 .swiper-slide .slogan .text2 { top:10px; opacity:0; filter: blur(10px); font-size:7rem; margin-bottom: 3rem; 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,
.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_products{margin-top: 10rem; position: relative;}
.main_products h2{font-weight: bold; font-size:5.2rem; text-align: center; margin-bottom: 7rem;}
.main_products h2 span{display: block; font-size:2rem; color:var(--main_color); font-family: var(--font-eng); text-transform: uppercase;}
.product_slide{position: relative;}
.product_slide .swiper-slide{position: relative;}
.product_slide dl{position: absolute; top: 5.4rem; left: 4.7rem; color:#fff; z-index: 9;}
.product_slide dl dt{font-weight: bold; font-size:3rem; margin-bottom: 1.8rem;}
.product_slide dl dt span{display: block; font-family: var(--font-eng); text-transform: uppercase; font-size:1.6rem; margin-bottom: 1.8rem;}

.product_slide .swiper-button-next,
.product_slide .swiper-button-prev{width: 9.6rem; height: 9.6rem; display: flex; align-items: center; justify-content: center; background: none; backdrop-filter: saturate(180%) blur(15px); border-radius: 100%;}

.product_slide .swiper-button-next{right:-4rem}
.product_slide .swiper-button-prev{left:-4rem}

.btn_all{position: absolute; bottom: 6rem; left: 50%; transform: translateX(-50%); z-index: 9;}
.btn_all a{display: flex; gap:1rem; align-items: center; justify-content: center; background: var(--main_color); color:#fff;border-radius: 100px; padding:1rem 3rem} 

/* 메인 인포 */
.main_info{background: url(../images/main/info_bg.jpg) no-repeat; background-size: cover; height: 100vh; color:#fff; position: relative;}
.main_info::before{content: ''; width: 100%; height: 100%; background: rgba(0,0,0,0.5); position: absolute; top: 0; left: 0;}

.main_info .inner{position: relative; height: 100vh;}
.info_tit{position: absolute; top: 21.6rem; left: 2rem;}
.info_tit dt{font-weight: bold; color:var(--main_color); font-family: var(--font-eng); text-transform: uppercase;}
.info_tit dd{font-size:5.2rem; font-weight: bold;}

.box_top{position: absolute; top: 21.6rem; right: 0; float: right;}
.box_wrap{display: flex; flex-wrap: wrap; gap:4px; margin-right: -4rem; position: absolute; top: 53rem; left:2rem; width:calc(100% - 38px); justify-content: space-between;}

.box{width: 33%; height: 305px; background: rgba(255,255,255,0.3); backdrop-filter: blur(20px); padding:4.8rem; position: relative;}
.box p{position: absolute; top: 3rem; right: 4rem;}
.box dl dt{font-weight: bold; font-size: 2.8rem; margin-bottom: 2rem;}
.box dl dt span{display: block; font-family: var(--font-eng); text-transform: uppercase; margin-bottom: 1.8rem; font-size:1.6rem}
.box a{display: flex; align-items: center; justify-content: center; gap:5rem; border:1px solid #fff; border-radius: 100px; padding:1rem 2rem; gap:3rem; color:#fff; position: absolute; bottom: 5rem; right: 5rem;}
.box:last-child{background: var(--main_color);}