/*-------------------------------- 메인 */
/** 공통 **/
.btn_more { display: flex; gap:1.25rem; align-items: center; font-size: 1.125rem; font-weight: 500; line-height: 150%; color: var(--gray-0, #FFF); letter-spacing: -0.72px; } 
.btn_more span { display: inline-flex; align-items: center; justify-content: center; overflow: hidden; position: relative; width:58px; height:58px; background-color: #fff; transition: var(--transition); border-radius: 100%; } 
.btn_more:hover span { background-color: var(--primary) !important; transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out; transform: scale(1.1); } 
.btn_more span img { transition: filter 0.3s ease-in-out; } 
.btn_more:hover span img { filter: invert(1); } 



/** 섹션_비주얼 _ 비디오 버전 **/
.visual_area { position: relative; width:100%; height:100vh; } 
.visual_area video { width:100%; height:100%; object-fit: cover; } 
/* .visual_area video.mobile {display: none;} */

@media screen and (max-width:1024px) { 
  .visual_area { height:100svh;}
} 
@media screen and (max-width:640px) {
  .visual_area {padding-top:5rem;}  
  .visual_area { height:56svh;}
  /* .visual_area video.mobile {display: block;}
  .visual_area video.pc {display: none;} */
} 


.visual_area .btn_scroll { display: flex; gap:1.5625rem; flex-direction: column; position: absolute; bottom:2.875rem; left:1.25rem; z-index: 10; color:#fff; } 
.visual_area .btn_scroll span.txt { font-style: italic; transform: rotate(-90deg) translateY(-50%);} 
.visual_area .btn_scroll span.ico { animation: bounce 1.5s infinite ease-in-out; } 

@media screen and (max-width:640px) {
  .visual_area .btn_scroll { display: none;} 
} 

@media screen and (max-width:1024px) { 
  .visual_area .btn_scroll span.txt { font-style: normal;} 
} 




/** 섹션_비주얼 _ 비디오 버전 **/
.visual_slider { position: relative; width:100%; height:100vh; } 
.visual_slider .swiper-slide.slide01 video { width:100%; height:100%; object-fit: cover; } 
.visual_slider .swiper-slide.slide02 { background:url("../../images/main/bg_slide02.png"); } 
.visual_slider .swiper-pagination { z-index: 9999; } 

@media screen and (max-width:1024px) { 
  .visual_slider { height:100svh;}
} 




.visual_slider .visual_txt {position: absolute; top: 50%; left: 50%; z-index: 20;  font-family: var(--kanit); font-size: 6.25rem; font-weight: 700; line-height: 100%; color: #FFF; text-align: center; text-transform: capitalize; text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3); animation: closeText 1.5s ease-in-out forwards; animation-delay: 2s; transform: translate(-50%, -50%); opacity: 1;}
.visual_slider .visual_txt.center {width:calc(100% - 32px);} 

.visual_slider .visual_txt.left { top: auto; bottom: 2.875rem; left: 4rem; font-size: 2.875rem; text-align: left; animation: openText 1.5s ease-in-out forwards; animation-delay: 2.2s; opacity: 0; transform: scale(0.5); } 

@media screen and (max-width:640px) { 
  .visual_slider .visual_txt.center {display: none;} 
  .visual_slider .visual_txt.left { font-size:2rem; animation: unset; opacity: 1; transform: scale(1);} 
} 



@keyframes bounce { 
  0%, 100% { 
  transform: translateY(0); 
  }
  50% { 
  transform: translateY(10px); 
  }
}

@keyframes closeText { 
  0% { 
  opacity: 1; 
  transform: translate(-50%, -50%) scale(1); 
  }
  100% { 
  opacity: 0; 
  transform: translate(-50%, -50%) scale(0.5); 
  }
}

@keyframes openText { 
  0% { 
  opacity: 0; 
  transform: scale(0.5); 
  }
  100% { 
  opacity: 1; 
  transform: scale(1); 
  }
}

/** 섹션_가치 **/
.value_area { padding-top:3.125rem; background-color: #E9E9E9; } 
.value_area .inner {position: relative; }
.value_area .value_slider { display: flex; align-items: center; justify-content: center; flex-direction: column; margin:0 auto; padding:8.75rem 0; position: relative; z-index: 999; max-width:1200px; } 

.value_area .value_slider .swiper-slide {display: flex; align-items: center; justify-content: center; flex-direction: column;}

.value_area .value_slider .en { margin-bottom:4.375rem; font-family: var(--kanit); font-size: 5.625rem; font-weight: 700; line-height: 116%; color: var(--gray-850, #262626); text-align: center; letter-spacing: -0.9px; } 
.value_area .value_slider .en span { display: block; } 
.value_area .value_slider .tit { margin-bottom:1.375rem; font-size: 2.625rem; font-weight: 700; line-height: 140%; color: var(--gray-850, #262626); text-align: center; letter-spacing: -1.68px; } 
.value_area .value_slider .desc { margin-bottom:3.75rem; font-size: 1.375rem; font-weight: 500; line-height: 150%; color: var(--gray-550, #737373); text-align: center; letter-spacing: -0.88px; } 

@media screen and (max-width:1200px) { 
  .value_area .value_slider { border:1px solid #A48F7A; border-radius: 100%; } 
} 

@media screen and (max-width:1024px) { 
  .value_area .value_slider { padding:4.375rem 0; border:1px solid #A48F7A; border: 0 none; border-radius: 20px; } 
  .value_area .value_slider .en { margin-bottom:2rem;font-size: 4rem; } 
  .value_area .value_slider .tit { font-size: 2rem; } 
  .value_area .value_slider .desc {margin-bottom:2rem; font-size: 1.2rem; } 
} 

@media screen and (max-width:640px) { 
  .value_area { padding-top:0;  } 
  .value_area .value_slider {border:0 none; } 
  .value_area .value_slider .en { font-size: 2.5rem; } 
  .value_area .value_slider .tit { font-size: 1.6rem; } 
  html[lang="en"] .value_area .value_slider .desc {word-break: keep-all;}
  html[lang="en"] .value_area .value_slider .desc br {display: none;}
} 

.value_area .value_slider .btn_more { color: var(--gray-800, #333); } 
.value_area .value_slider .btn_more span { background-color: #A48F7A; } 
.value_area .value_slider .btn_more span img { filter: invert(1); } 

.value_area .swiper_controls { display: flex; align-items: center; position: absolute; right:0; bottom:70px;  z-index: 999;}
.value_area .swiper_controls > div {position: static !important; }
.value_area .swiper_controls .swiper-pagination {min-width:100px; color: var(--gray-500, #808080);}
.value_area .swiper_controls .swiper-pagination .swiper-pagination-current {font-weight: 600;color: var(--gray-800, #333);}
.value_area .swiper_controls .swiper-button-prev:after,
.value_area .swiper_controls .swiper-button-next:after { font-size:18px !important;color:#000;}
.value_area .swiper_controls .arrow { margin-top:0 !important;width:auto !important; height:auto !important;}

@media screen and (max-width:1024px) { 
  .value_area .swiper_controls { display: none;}
} 

.value_area .value_slider .line { border:1px solid #A48F7A; position: absolute; z-index: -1; width:100%; height:100%; border-radius: 100%; opacity: 0; } 
.value_area .value_slider .line.line1 { left: -30px; animation: pulseAnimation 5s infinite alternate; animation-delay:0.2s; } 
.value_area .value_slider .line.line2 { top: 0; left: -15px; animation: pulseAnimationReverse 5s infinite alternate; animation-delay:0.4s;  } 
.value_area .value_slider .line.line3 { top: 15px; right: -30px; animation: pulseAnimation 5s infinite alternate; animation-delay:0.6s; border-width: 2px;} 
.value_area .value_slider .line.line4 { top: 5px; right: -5px; animation: pulseAnimationReverse 5s infinite alternate; animation-delay:0.8s;} 


@media screen and (max-width:1200px) { 
  .value_area .value_slider .line {display: none;}
} 



/* 기본 애니메이션 */
@keyframes pulseAnimation {
  0%, 100% {
    transform: scale(0.95);
    opacity: 0.7;
  }
  50% {
    transform: scale(0.9);
    opacity: 0.2;
  }
}

/* 반대 방향 애니메이션 */
@keyframes pulseAnimationReverse { 
  0%, 100% {
    transform: scale(0.9);
    opacity: 0.2;
  }
  50% {
    transform: scale(0.95);
    opacity: 0.7;
  }
}




/** 섹션_비디오 **/
.video_area {margin-top:-1.5rem; padding-bottom:11.25rem; background-color: #E9E9E9;} 
.video_area h2 { display: flex; gap:0.625rem; align-items: center; flex-direction: column; margin-bottom:1.25rem; font-family: var(--kanit); font-size: 2.125rem; font-weight: 600; color: var(--gray-850, #262626); text-align: center; text-transform: capitalize; } 
.video_area .video_box { padding-top:56.26%; overflow: hidden; position: relative; border-radius: 20px; } 
.video_area h2::before { display: block; width:1px; height:6.25rem; background-color: #000; content: ""; } 
.video_area .video_box video { position: absolute; top:0; left:0; width:100%; height:100%; object-fit: cover; } 

@media screen and (max-width:1024px) { 
  .video_area { padding-bottom:6rem;} 
} 




/** 섹션_상품 **/
.product_area {margin-top:2.5rem; margin-bottom:12.5rem; } 
.product_area .flow_wrapper { margin-bottom:5rem; overflow: hidden; position: relative; width: 100%; white-space: nowrap; } 
.product_area .flow_wrapper .flow_text { display: flex; width: max-content; } 
.product_area .flow_wrapper .flow_text .flow_content { display: flex; gap: 1.25rem; align-items: center; white-space: nowrap; animation: flowAnimation 30s linear infinite; } 
.product_area .flow_wrapper .flow_text .flow_content span { padding:0 3.25rem; font-family: var(--kanit); font-size: 8.125rem; font-weight: 700; color: var(--gray-100, #E5E5E5); text-transform: capitalize; } 

@media screen and (max-width:1024px) { 
  .product_area { margin-bottom:6rem;} 
} 
@media screen and (max-width:640px) { 
  .product_area .flow_wrapper .flow_text .flow_content span { font-size: 5rem;} 
} 



@keyframes flowAnimation { 
 from { 
 transform: translateX(0); 
}
 to { 
 transform: translateX(-100%); 
}
}

.product_area .product_list { display: flex; gap:1.25rem; } 
.product_area .product_list li { flex:1; overflow: hidden; position: relative; height:304px; border-radius: 20px 20px 0 20px; }

.product_area .product_list li::before { position: absolute; top:0; left:0; width:100%; height:100%; content: "/"; } 
.product_area .product_list li.motor::before { background-color: #4A4A4A; } 
.product_area .product_list li.alternator::before { background-color: #665C5D; } 
.product_area .product_list li.core::before { background-color: #402A29; } 
.product_area .product_list li.hvac::before { background-color: #2A2A2A; } 

.product_area .product_list li::after { display: block; position: absolute; top:0; left:0; z-index: 1; width:100%; height:100%; background-size: cover; transition: var(--transition); content: ""; opacity: 0;} 
.product_area .product_list li:hover::after { opacity: 1;  } 


.product_area .product_list li.motor::after { background-image: url("../../images/main/img_product04.png"); } 
.product_area .product_list li.alternator::after { background-image: url("../../images/main/img_product05.png"); } 
.product_area .product_list li.core::after { background-image: url("../../images/main/img_product06.png"); } 
.product_area .product_list li.hvac::after { background-image: url("../../images/main/img_product07.png"); } 


.product_area .product_list li a { display: flex; gap:1.875rem; align-items: center; justify-content: center; flex-direction: column; overflow: hidden; position: relative; z-index: 2; width:100%; height:100%; color:#fff; text-align: center; transition: var(--transition); } 
.product_area .product_list li a .name { font-size: 2rem; font-weight: 600; letter-spacing: -0.03em; } 

.product_area .product_list li a::before { overflow: hidden; position: absolute; right:0; bottom:0; width:5.8125rem; height:5.625rem; background:url("../../images/main/bg_product.png"); background-size: cover; content: ""; } 
.product_area .product_list li a::after { display: flex; align-items: center; justify-content: center; position: absolute; right:0; bottom:0; width:4.5625rem; height:4.375rem; background-size: cover; content: url("../../images/main/ico_more_product.svg"); } 


.product_area .product_list.lg { gap:5.625%; margin:0 auto; margin-bottom:3.75rem; max-width:1600px;}
.product_area .product_list.lg li { height:350px;} 
.product_area .product_list.lg li.frhc::before { background-color: #AC4D59; } 
.product_area .product_list.lg li.stranded::before { background-color: #9C3643; } 
.product_area .product_list.lg li.winding::before { background-color: #743941; } 
.product_area .product_list.lg li.frhc::after { background-image: url("../../images/main/img_product01.png"); } 
.product_area .product_list.lg li.winding::after { background-image: url("../../images/main/img_product03.png"); } 
.product_area .product_list.lg li.stranded::after { background-image: url("../../images/main/img_product02.png"); } 
.product_area .product_list.lg li a {gap:58px;}
.product_area .product_list.lg li a .name { font-size: 2.625rem;} 



@media screen and (max-width:1600px) { 
  .product_area .product_list.lg { gap:1.25rem; padding:0 16px;}
} 


@media screen and (max-width:1024px) { 
  .product_area .product_list li a .name {font-size: 1.6rem; } 
  .product_area .product_list li.lg a .name {font-size:2rem;}
} 

@media screen and (max-width:640px) { 
  .product_area .product_list {flex-wrap: wrap;flex-direction: column;}
  .product_area .product_list li {flex: unset;}
} 



/** esg **/
.esg_area { overflow: hidden; position: relative; width:100%; height:100vh; border-radius: 20px 20px 0 0; } 
.esg_area video { position: absolute; top:0; left:0; width:100%; height:100%; object-fit: cover; } 
.esg_area::after { display: block; position: absolute; top:0; left:0; z-index: 1; width:100%; height:100%; background-color: rgba(0, 0, 0, 0.15); content: ""; } 
.esg_area .inner { display: flex; gap:5rem; align-items: center; justify-content: center; flex-direction: column; position: relative; z-index: 9; height:100%; color:#fff; text-align: center; } 
.esg_area p.en { font-family: var(--kanit); font-size: 2.125rem; font-weight: 300; color: var(--gray-50, #F8F8F8); text-transform: capitalize; } 
.esg_area p.slogun {font-size: 3.75rem; font-weight: 700; line-height: 140%; color: #FFF; text-transform: capitalize; letter-spacing: -2.4px; } 
.esg_area p.slogun span { display: block; } 
.esg_area a.more { display: block; } 

@media screen and (max-width:1024px) { 
  .esg_area {height:100svh;} 
  .esg_area p.slogun { font-size: 3rem;} 
} 

@media screen and (max-width:640px) { 
  .esg_area p.en {font-size: 1.5rem; } 
  .esg_area p.slogun { font-size: 1.8rem;}  
}