/*-------------------------------- 메인비주얼 */
 .visual_slider { margin-top:5rem; overflow: hidden;position: relative; width:100%; height:calc(100vh - 5rem); min-height:800px;background: url("../../images/main/video_visual.png") no-repeat top center; background-size: cover; } 

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

@media screen and (max-width:1024px) { 
 .visual_slider { background-image: url("../../images/main/video_visual_m.png"); } 
}


.visual_slider .video_box {position: absolute; top:0; left:0; width:100%; height:100%; } 
.visual_slider .video_box video { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; pointer-events: none; transform: translate(-50%, -50%); } 

.visual_slider .swiper-slide { position: relative; width:100%; height:100%; } 
.visual_slider .swiper-slide .inner { display: flex; gap:3.625rem; justify-content: center; flex-direction: column;padding-bottom:4.375rem; position: absolute; top:50%; left:50%; z-index: 100; transform: translate(-50%, -50%);} 

.visual_slider .swiper-slide .txt_box { display: flex; gap:1.5rem; flex-direction: column; color: var(--gray-0, #FFF); } 
.visual_slider .swiper-slide .txt_box p.lg { display: flex; gap:1.5rem; flex-direction: column; font-size: 3.75rem; font-weight: 700; line-height: 140%; letter-spacing: -0.04em; } 
.visual_slider .swiper-slide .txt_box p.en { font-family: var(--kanit); font-size: 1.5rem; font-weight: 400; line-height: 140%; color: var(--gray-0, #FFF); } 

.visual_slider .pagination { display: flex; gap:1.375rem; align-items: center; position: absolute; bottom:28%; left:50%; z-index: 300; height:2.875rem; transform: translateX(-50%); } 
.visual_slider .pagination > div { margin-top:0; position: relative; top:0; right:auto; left:auto; width:4.625rem; height:2.875rem; background-size: cover; } 
.visual_slider .pagination > div.swiper-button-prev { background-image: url("../../images/main/ico_prev.svg"); } 
.visual_slider .pagination > div.swiper-button-next { background-image: url("../../images/main/ico_next.svg"); } 

.visual_slider .pagination > div::after { display: none !important; } 
.visual_slider .pagination > span { width:9px; height:9px; background-color: #fff; border-radius: 100%; } 


@media screen and (max-width:1024px) { 
 .visual_slider .swiper-slide .txt_box p.lg { font-size: 3.25rem; } 
 .visual_slider .swiper-slide .txt_box p.en { font-size: 1.25rem;} 
}

@media screen and (max-width:640px) { 
 .visual_slider .swiper-slide .txt_box p.lg { font-size: 2.25rem; word-break: keep-all;} 
 .visual_slider .swiper-slide .txt_box p.lg br {display: none;}
 .visual_slider .swiper-slide .txt_box p.en { font-size: 1rem;} 
 .visual_slider .pagination { bottom:24%;  } 
}



.visual_slider .scroll_box {display: flex; gap:0.75rem; align-items: center; justify-content: center; flex-direction: column; position: absolute; bottom:0; left:50%; z-index: 100; width:5.75rem; height:5.75rem; background: var(--gray-0, #FFF); background-color: #fff;border-radius: 1.875rem 1.875rem 0 0; transform: translateX(-50%);}

.visual_slider .scroll_box .ico { display: block; animation: upDown 1.8s ease-in-out infinite;}
.visual_slider .scroll_box .txt {font-family: var(--kanit); font-size: 12px; font-weight: 500; color: var(--gray-900, #1A1A1A); text-transform: uppercase;}

@keyframes upDown {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px); 
  }
}





/*-------------------------------- 제품 */
/** Prodcut > 상단 텍스트 **/
.product_area { padding: 11.875rem 0 10rem; background: url("../../images/main/bg_product_top.png") no-repeat top right, url("../../images/main/bg_product_bottom.png") no-repeat bottom right; 
}
.product_area .text_wrap { margin-bottom:6.25rem; } 
.product_area .text_wrap h2 { display: flex; gap:0.5rem; flex-direction: column; font-family: var(--kanit); font-size: 6.875rem; font-weight: 700; color: var(--secondary, #3F2825); } 
.product_area .text_wrap h2 span { font-size: 2.5rem; font-weight: 300; letter-spacing: -0.05em; } 
.product_area .text_wrap p.desc { margin-top:2.125rem; font-size: 2rem; font-weight: 700; line-height: 140%; color: var(--gray-900, #1A1A1A); letter-spacing: -0.04em; } 


@media screen and (max-width:1024px) { 
 .product_area { padding: 6rem 0; background-size: 80%, 50%; } 
 .product_area .text_wrap h2 { font-size: 5rem; } 
 .product_area .text_wrap h2 span { font-size: 2rem; } 
 .product_area .text_wrap p.desc { font-size: 1.8rem; } 
}

@media screen and (max-width:640px) { 
 .product_area .text_wrap h2 { font-size: 2.5rem; letter-spacing: -2px; } 
 .product_area .text_wrap h2 span { font-size: 1.8rem; } 
 .product_area .text_wrap p.desc { font-size: 1.6rem; } 
}



/** Prodcut > 이미지&링크 **/
.product_wrap { padding-bottom:6.25rem; } 
.product_wrap:last-of-type { padding-bottom:0; } 
.product_wrap.product02 { background: url("../../images/main/bg_product02_2.png") no-repeat bottom left; } 
.product_wrap .product_box { display: flex; flex-direction: column; position: relative; height:37.5rem; } 

.product_wrap .product_box .link_box { display: flex; align-items: flex-end; justify-content: flex-end; padding:2.8125rem 2.5rem; overflow: hidden; position: absolute; top:0; left:0; z-index: 1; width:66%; height:100%; background-position: center right; border-radius: 0 40px 40px 0; } 
.product_wrap .product_box .link_box::before { display: block; position: absolute; top:0; left:0; width:100%; height:100%; background-repeat: no-repeat; background-position: top center; background-size: cover; content: ""; } 
.product_wrap.product01 .product_box .link_box::before { background-image: url("../../images/main/bg_product01.png"); } 
.product_wrap.product02 .product_box .link_box::before { background-image: url("../../images/main/bg_product02.png"); } 
.product_wrap.product03 .product_box .link_box::before { background-image: url("../../images/main/bg_product03.png"); } 
.product_wrap.product04 .product_box .link_box::before { background-image: url("../../images/main/bg_product04.png"); } 


.product_wrap.right .product_box .link_box { align-items: flex-end; justify-content: flex-start; right:0; left:auto; background-position: center left; border-radius: 40px 0 0 40px; } 

@media screen and (min-width:1921px) { 
 .product_wrap .product_box .link_box { width:62%; } 
}
@media screen and (max-width:1120px) { 
 .product_wrap .product_box .link_box { width:62%; } 
}

@media screen and (max-width:1024px) { 
 .product_wrap.product02 { background: none; } 
 .product_wrap .product_box { height:auto; } 
 .product_wrap .product_box .link_box { margin:0 auto; margin-top:1.875rem; position: relative; width:calc(100% - 32px); height:37rem; order:2; border-radius: 40px !important; } 
}

@media screen and (max-width:640px) { 
.product_wrap .product_box .link_box { padding:16px; height:31rem;} 
}



.product_wrap .product_box .link_box ul { display:grid; gap:0.625rem; position: relative; z-index: 2; } 
.product_wrap .product_box .link_box.type2 ul { grid-template-columns: repeat(2,1fr); } 
.product_wrap .product_box .link_box.type3 ul { grid-template-columns: repeat(3,1fr); } 
.product_wrap .product_box .link_box ul li { width:16.875rem; } 
.product_wrap .product_box .link_box ul li a { display: flex; align-items: center; justify-content: space-between; padding-left:1.75rem; overflow: hidden; position: relative; width:100%; height:3.75rem; background: rgba(255, 255, 255, 0.80); font-size:1.125rem; font-weight: 500; letter-spacing: -0.5px; border-radius: 40px;} 
.product_wrap .product_box .link_box ul li a::after { display: flex; align-items: center; justify-content: center;flex-shrink: 0; width:3.125rem; height:3.125rem; background: #FFF; content: url("../../images/main/ico_arrow.svg"); border-radius: 100%;} 
.product_wrap .product_box .link_box ul li a::before { position: absolute; top:0; left:0; z-index: -1; width:100%; height:100%; background: #FFF; transition: transform 0.6s; content: ""; transform: translateX(100%); } 
.product_wrap .product_box .link_box ul li a:hover::before { transform: translateX(0); } 


html[lang="en"] .product_wrap .product_box .link_box ul li a { font-size:1rem;} 


@media screen and (max-width:1280px) { 
.product_wrap .product_box .link_box.type3 ul { grid-template-columns: repeat(2,1fr); } 
}

@media screen and (max-width:640px) { 
.product_wrap .product_box .link_box.type2 ul,
.product_wrap .product_box .link_box.type3 ul { grid-template-columns: repeat(1,1fr);} 
.product_wrap .product_box .link_box ul {max-width:100%;}
.product_wrap .product_box .link_box ul li { max-width:100%; } 
}






/** Prodcut > 설명 **/
.product_wrap .product_box .inner { display: flex; align-items: center; justify-content: flex-end; height:100%; } 
.product_wrap .product_box .txt_box { display: flex; flex-direction: column;} 
.product_wrap .product_box .txt_box .ico_box { display: flex; gap:1.875rem; flex-direction: column; } 
.product_wrap .product_box .txt_box .ico { display: flex; align-items: center; justify-content: center; width:7.5rem; height:7.5rem; background: var(--secondary, #3F2825); border-radius: 20px; } 
.product_wrap .product_box .txt_box h3 { font-family: var(--secondary); font-size: 3.25rem; font-weight: 700; line-height: 110%; color: var(--gray-900, #1A1A1A); letter-spacing: -2.08px; } 
.product_wrap .product_box .txt_box p { margin-top:1.875rem; font-size: 1.375rem; font-weight: 500; line-height: 150%; color: var(--gray-600, #666); letter-spacing: -0.88px; } 

.product_wrap .product_box .txt_box p:lang(en){max-width:300px;word-break: keep-all;}
.product_wrap .product_box .txt_box p:lang(en) br{display: none;}

.product_wrap.right .product_box .inner { justify-content: flex-start; } 

@media screen and (max-width:1400px) { 
  .product_wrap .product_box .txt_box:lang(en){width:30%}
}


 @media screen and (max-width:1024px) { 
.product_wrap .product_box .inner { justify-content: flex-start; height:auto; } 
.product_wrap .product_box .txt_box .ico_box { align-items: center; flex-direction: row; } 
.product_wrap .product_box .txt_box p:lang(en){max-width:100%}
.product_wrap .product_box .txt_box p br { display: none; }
.product_wrap .product_box .txt_box{width:100%} 
.product_wrap .product_box .txt_box:lang(en){width:100%}
}

@media screen and (max-width:640px) { 
 .product_wrap .product_box .txt_box .ico_box { gap:1rem; } 
.product_wrap .product_box .txt_box .ico { width:6.5rem; height:6.5rem; } 
.product_wrap .product_box .txt_box h3 { font-size: 2.5rem; } 
.product_wrap .product_box .txt_box p { font-size: 1.2rem; word-break: keep-all; } 
}



/*-------------------------------- ESG */
.esg_area { padding:9.375rem 0; overflow: hidden; position: relative; width:100%; height:calc(100vh - 6.25rem); background-color: #d9d9d9; border-radius: 7.5rem 0 0 0; } 
.esg_area .inner { position: relative; z-index: 1; color: var(--gray-0, #FFF); } 
.esg_area h2 { display: flex; gap:2.25rem; align-items: center; font-family: var(--kanit); font-size: 1.125rem; font-weight: 700;} 
.esg_area p.desc { margin-top:3.875rem; font-size: 3.25rem; font-weight: 700; line-height: 140%; letter-spacing: -2.08px; } 

.esg_area video { position: absolute; top:0; left:0; width:100%; height:100%; object-fit: cover; } 

 @media screen and (max-width:1024px) { 
.esg_area { padding:6rem 0; height:calc(100svh - 6.25rem); border-radius: 6rem 0 0 0; } 
.esg_area h2 { font-size: 1.125rem; } 
.esg_area p.desc { font-size: 2.5rem; letter-spacing: -1px; } 
}

@media screen and (max-width:640px) { 
.esg_area p.desc { margin-top:2rem; font-size: 1.8rem; word-break: keep-all; } 
.esg_area p.desc br { display: none; } 
}




/** 그룹사 **/ 
.footer_group { padding:8.125rem 0; position: relative; background: var(--gray-50, #F8F8F8); } 
.footer_group h2 { display: flex; gap:1.875rem; align-items: center; flex-direction: column; margin-bottom:1.875rem; font-family: var(--kanit); font-size: 4rem; font-weight: 700; color: var(--secondary, #3F2825); text-align: center;  } 
.footer_group h2::after { display: block; width:1px; height:2.5rem; background-color: #000; content:""; } 
.footer_group p { font-size: 1.5rem; font-weight: 500; line-height: 150%; color: var(--gray-900, #1A1A1A); text-align: center; letter-spacing: -0.96px; } 

@media screen and (max-width: 640px) { 
.footer_group { padding:5rem 0; } 
.footer_group h2 { gap:1rem; font-size: 3rem; } 
.footer_group p { font-size: 1.25rem; word-break: keep-all;} 
.footer_group p br {display: none; }

}


.footer_group .group_box { display: flex; align-items: center; justify-content: center; margin-top:4.0625rem; border:1px solid rgba(63, 40, 37, 0.28); min-height:5.375rem; border-radius: 60px; } 
.footer_group .group_box .group_list { display: flex; justify-content:space-evenly; position: relative; z-index: 999; width:100%; } 
.footer_group .group_box .group_list > li { position: relative; } 
.footer_group .group_box .group_list > li > a { display: flex; gap:1rem; align-items: center; padding:1.5rem; font-size: 1.125rem; font-weight: 600; color: var(--second, #3F2825); text-align: center; letter-spacing: -0.72px; } 
.footer_group .group_box .group_list > li > a::after { display: block; width:40px; height:40px; background: url("../../images/ico_group.svg"); content: ""; } 
.footer_group .group_box .group_list > li > ul { padding:1.25rem 0; overflow: hidden; position: absolute; left:calc(50% - 20px); z-index: 2; width:100%; text-align: center; transform: translateX(-50%); opacity: 0;} 
.footer_group .group_box .group_list > li > ul > li { font-size: 1.0625rem; font-weight: 500; line-height: 200%; color: var(--secondary, #3F2825); text-align: center; letter-spacing: -0.68px; } 
.footer_group .group_box .group_list > li > ul li a:hover { text-decoration: underline; } 

.footer_group .group_box .group_list::after { position: absolute; top:calc(100% + 1px);  width:100%; background-color:#fff; transition: height 0.3s; content: ""; opacity: 1; border-radius: 30px; } 
.footer_group .group_box .group_list.show::after,
.footer_group .group_box .group_list.show > li > ul { height:18.75rem; opacity: 1; } 
.footer_group .group_box .group_list.show::after { border:1px solid rgba(63, 40, 37, 0.28); } 


html[lang="en"] .footer_group .group_box .group_list > li > a {padding:1.5rem 1rem; font-size: 1rem;} 
html[lang="en"] .footer_group .group_box .group_list > li > ul > li { font-size: 0.9rem;} 








@media screen and (max-width: 1024px) { 
  .footer_group .group_box .group_list { display: flex; justify-content: center;padding:0 16px; position: relative; width:100%; } 
  .footer_group .group_box .group_list > li > a { gap:0rem; padding:1.5rem 1rem; } 
}

@media screen and (max-width: 880px) { 
 .footer_group .group_box {display: none;}
}

.footer_group .symbol { position: absolute; top:-6.25rem; left:-6.25rem; animation: spin 20s linear infinite; } 


@media screen and (max-width: 640px) { 
 .footer_group .symbol {top:-3rem; left:-3rem; width:200px;}
 .footer_group .symbol img { width:100%; } 

}



@keyframes spin { 
 0% { transform: rotate(0deg); } 
 100% { transform: rotate(360deg); } 
}

.footer_group a.btn_more {  display: none; align-items: center; justify-content: center; margin-top:3rem; padding:1.25rem 0; border:1px solid rgba(63, 40, 37, 0.28); font-size: 1.125rem; font-weight: 600; color: var(--second, #3F2825); text-align: center; letter-spacing: -0.72px; border-radius: 60px;} 
.footer_group a.btn_more::after {display: block; width:40px; height:40px; background: url("../../images/ico_group.svg"); content: ""; transform: rotate(-90deg);}

@media screen and (max-width: 880px) { 
 .footer_group a.btn_more {display: flex;}
}