#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:6rem; font-family: var(--font-eng);  } 
.msec1 .swiper-slide .slogan .text2 { top:10px; opacity:0; filter: blur(10px); font-size:6rem; font-family: var(--font-eng); margin-bottom: 4rem; transition:0.5s 1s; position: relative; padding-left:180px } 
.msec1 .swiper-slide .slogan .text2::before{content: ''; width: 177px; height: 7px; background: #Fff; position: absolute; top: 50%; left: 0;}
.msec1 .swiper-slide .slogan .text3 { top:10px; opacity:0; filter: blur(10px); font-size:2.1rem; 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: 12rem; position: relative;}
.main_products h2{font-weight: bold; font-size:5rem; text-align: center; margin-bottom: 7rem; position: relative;}
.main_products h2::before{content: 'Core Product'; font-size: 12rem; font-weight: 900; color:#fafafa; position: absolute; bottom: -10rem; left: 50%; transform: translateX(-50%); z-index: -1;}

.product_slide{position: relative;}
.product_slide .swiper-slide{background: #fafafa; height: 51.2rem !important;overflow: hidden; border-radius: 3rem; position: relative; }
.product_slide .swiper-slide span{position: absolute; top:4rem; left: 4rem; font-family: var(--font-eng); font-size: 1.4rem; background: var(--main_color); color:#fff; border-radius: 100px; padding:.5rem 1rem; font-weight: bold; }
.product_slide .swiper-slide p{position: absolute; top:50%; left: 50%; transform: translate(-50% , -50%);}
.product_slide .swiper-slide dl{position: absolute; bottom: 5rem; left:4rem;}
.product_slide .swiper-slide dl dt{font-weight: bold; font-size: 2.4rem;}
.product_slide .swiper-slide dl dd{display: none;}
.product_slide .swiper-slide i{display: none;}

.product_slide .swiper-slide-active{width:73.2rem !important; height: 51.2rem !important; background: linear-gradient(45deg,rgba(66, 86, 184, 1) 0%, rgba(23, 40, 85, 1) 100%); color:#fff}
.product_slide .swiper-slide-active span{background: #fff; color: var(--main_color);}
.product_slide .swiper-slide-active p{position: absolute; bottom: 0; right: 50px; top:auto; left:auto; transform: translate(0, 0);}
.product_slide .swiper-slide-active dl{color:#fff;}
.product_slide .swiper-slide-active dl dt{font-size:3.6rem; margin-bottom: 3rem;}
.product_slide .swiper-slide-active dl dd{display: block; font-size: 1.9rem;}
.product_slide .swiper-slide-active i{display: block; position: absolute; bottom: 4rem; right: 4rem;}

.product_slide .swiper-scrollbar{position: relative; margin-top: 8.6rem;}
.product_slide .swiper-scrollbar-drag{background: var(--main_color);}

/* 메인 사업영역 */
.main_business{margin-top: 12rem; position: relative;}
.main_business h2{font-weight: bold; font-size:5rem; text-align: center; margin-bottom: 7rem; position: relative;}
.main_business h2::before{content: 'Business Area'; width: 100%; font-size: 12rem; font-weight: 900; color:#fafafa; position: absolute; bottom: -10rem; left: 50%; transform: translateX(-50%); z-index: -1;}

.business_slide {position: relative;}
.business_slide .swiper-slide { height: 58.2rem; display: flex; align-items: center;justify-content: center; position: relative; transition: all 200ms linear;} 
.business_slide .swiper-slide p{overflow: hidden; border-radius: 3rem; width: 100%;height: 58.2rem;}
.business_slide .swiper-slide p img{width: 100%; height: 100%; object-fit: cover;}
  
.business_slide dl{position: absolute; bottom: 5rem; left: 4rem; color:#fff;}
.business_slide dl dt{font-size:2.6rem}
.business_slide dl dd{display: none;}
.business_slide i{display: none;}
  
.business_slide .swiper-slide.swiper-slide-active {width:80.2rem !important;}
.business_slide .swiper-slide.swiper-slide-active p{width: 100%;}
.business_slide .swiper-slide-active p{position: relative;}
.business_slide .swiper-slide-active p::before{content: ''; width: 100%; height: 100%; background: linear-gradient(180deg,rgba(0, 16, 120, 0) 60%, rgba(0, 16, 120, 1) 100%); position: absolute; bottom: 0; left: 0;}

.business_slide .swiper-slide-active dl dt{font-weight: bold;font-size: 3.2rem; margin-bottom: 2.5rem;}
.business_slide .swiper-slide-active dl dd{font-size: 1.9rem;display: block;}
.business_slide .swiper-slide-active i{display: block; position: absolute; bottom: 5rem; right: 5rem;}


/* 메인 회사소개 */
.main_company{margin-top: 12rem; position: relative;}
.main_company h2{font-weight: bold; font-size:5rem; text-align: center; margin-bottom: 7rem; position: relative;}
.main_company h2::before{content: 'BK Technology'; width: 100%; font-size: 12rem; font-weight: 900; color:#fafafa; position: absolute; bottom: -10rem; left: 50%; transform: translateX(-50%); z-index: -1;}

.company_list{display: flex; gap:4.3rem}
.company_list .company_box a{color:#fff;}
.company_list .company_box{flex:1; border-radius: 3rem; height: 33.2rem; position: relative;}
.company_list .company_box:nth-child(1){background: var(--main_color); color:#fff}
.company_list .company_box:nth-child(2){background: #696B71; color:#fff}
.company_list .company_box:nth-child(3){background: #F5F5F5;}
.company_list .company_box:nth-child(3) a{color:#333}

.company_list .company_box span{position: absolute; top: 3rem; left: 4rem;padding:.5rem 2rem; border-radius: 100px; font-size: 1.4rem; font-weight: bold; font-family: var(--font-eng); background: #fff;}
.company_list .company_box:nth-child(1) span{color:var(--main_color)}
.company_list .company_box:nth-child(2) span{color:#696B71}
.company_list .company_box:nth-child(3) span{color:#333}

.company_list .company_box dl{position: absolute; left: 4rem; bottom: 5rem;}
.company_list .company_box dl dt{font-weight: bold; font-size: 3.2rem; margin-bottom: 3rem;}
.company_list .company_box dl dd{font-size: 1.9rem;}

.company_list .company_box i{position: absolute; right: 4rem; bottom: 5rem;}