@charset "utf-8"; .index_wrap { line-height: 1.2; overflow: hidden; } 
.index_wrap .section { position: relative; margin-top: 14rem; margin-bottom: 14rem; } 
/* 여기서부터 수정 */
.section1 .mySwiper .swiper-slide .slide_bg { height: 100vh; overflow: hidden; background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; } 
.section1 .mySwiper .swiper-slide .visual_wrap { position: absolute; top: 52%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: #fff; } 
.section1 .mySwiper .swiper-slide .visual_wrap .txt_wrap1 { margin-bottom: 3rem; } 
.section1 .mySwiper .swiper-slide .visual_wrap .img_box { position: relative; border-radius: 15px; overflow: hidden; } 
.section1 .mySwiper .swiper-slide .visual_wrap .img_box h3 { position: absolute; z-index: 2; bottom: 10%; left: 50%; transform: translateX(-50%); width: 90%; } 
.section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box h2 { font-weight: 700; letter-spacing: -1px; } 
.section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box h1 { transition: all .3s; line-height: 1; overflow: hidden; } 
.section1 .mySwiper .swiper-slide { overflow: hidden; } 
.section1 .mySwiper .swiper-slide .visual_wrap a .img_box:hover img { scale: 1.1; } 
.section1 .mySwiper .swiper-slide .visual_wrap a .img_box img { transition: all .3s; } 
.section1 .mySwiper .swiper-slide .visual_wrap .visual_info p { line-height: 1.3; font-weight: 300; } 
.section1 .mySwiper .swiper-slide .visual_wrap .txt_wrap2 { margin-bottom: 3rem; } 
.section1 .bottom_bg { background: url(../img/main_visu_bottom.png) no-repeat center 0; position: absolute; bottom: -1px; z-index: 10; width: 100%; height: 9rem; } 
.index_wrap .slider_1 { background-image: url(../img/main_visual_1.png); } 
.index_wrap .slider_2 { background-image: url(../img/main_visual_2.png); } 
.index_wrap .slider_3 { background-image: url(../img/main_visual_3.png); } 

.section1 .mySwiper .swiper-slide .slide_bg { height: 100vh; overflow: hidden; background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; } 
.bg-video { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: -1; } 
.bg-video__content { height: 100%; width: 100%; object-fit: cover; } 

@keyframes zoom_in { 
 0% { transform: scale(1.2); /* background-size: 100% 100%; */ } 
 100% { transform: scale(1) rotate(0.003deg); } 
 }

 @keyframes text-up { 
 from { transform: translate3d(0, 150%, 0); } 
 to { transform: translate3d(0, 0, 0); } 
 }

.index_wrap .mySwiper .swiper-slide.swiper-slide-active .slide_bg { animation: zoom_in 5000ms; transition: transform 5000ms ease-in-out, opacity 1000ms ease 0s; } 
.index_wrap .mySwiper .swiper-slide-active .txt_wrap1, .index_wrap .mySwiper .swiper-slide-active .txt_wrap2 { overflow:hidden; } 
.index_wrap .mySwiper .swiper-slide-active .title_box h1 strong { animation: text-up 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay:0.4s; } 
.index_wrap .mySwiper .swiper-slide-active .visual_info h2 { animation: text-up 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay: 0.4s; } 
.index_wrap .mySwiper .swiper-slide-active .visual_info p { animation: text-up 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay: 0.6s; } 

/* pagnation */
.control_wrap { display: flex; align-items: center; justify-content: space-between; flex-direction: row; } 
.control_wrap .swiper-pagination { text-align:left; position: relative; display: flex; justify-content: space-between; align-items: center; top: 0; } 
.control_wrap .swiper-pagination-bullet { width: 6rem; border-radius: 0; height: 2px; background: #ffffffbd; opacity:1; margin-right: 2rem; display: block; } 
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, 
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 0.5rem; } 
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet em { position: absolute; top: -2.6rem; color: #fff; font-style: normal; font-size: 1.4rem; font-family: var(--font-fam); } 
.control_wrap .swiper-pagination-bullet.swiper-pagination-bullet-active { position: relative; /* background:var(--main-color); */ } 
.control_wrap .swiper-pagination-bullet.swiper-pagination-bullet-active::before { animation:LoadingBar 5s both; animation-delay: 0.3s; content:''; display:block; position:absolute; width: 100%; height: 100%; background:var(--main-color); border-radius: unset; } 

/* 로딩바 애니메이션 */
@-webkit-keyframes LoadingBar { 
 from { width:0px; } 
 to { width:100%; } 
 }
 @keyframes LoadingBar { 
 from { width:0px; } 
 to { width:100%; } 
 }

/* section1 하단 */
.section1 .bottom_box { position: absolute; z-index: 10; bottom: 6%; left: 50%; transform: translateX(-50%); display: flex; flex-direction: row; align-items: center; } 
.section1 .bottom_box .arrow_wrap { display: flex; color: #fff; margin-left: 2rem; } 
.section1 .bottom_box .arrow_wrap i { font-size: 2rem; } 
.section1 .bottom_box .arrow_wrap .play_btn { position: relative; width: 2rem; height: 2rem; display: flex; justify-content: center; align-items: center; margin: 0 1rem; } 
.section1 .bottom_box .arrow_wrap .play_btn i { position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; /* 클릭 충돌 방지 */ } 
.section1 .bottom_box .arrow_wrap > * { cursor: pointer; } 
 /* 초기 상태 — 재생 중이므로 pause 아이콘 보임 */
 .section1 .bottom_box .play_btn .xi-pause { opacity: 1; pointer-events: auto; } 
 /* 활성 상태 변경용 클래스 */
 .section1 .bottom_box .play_btn.playing .xi-pause { opacity: 1; pointer-events: auto; } 
 .section1 .bottom_box .play_btn.playing .xi-play { opacity: 0; } 
 .section1 .bottom_box .play_btn.paused .xi-pause { opacity: 0; } 
 .section1 .bottom_box .play_btn.paused .xi-play { opacity: 1; pointer-events: auto; } 

/* mouse scroll */
.scroll-indicator { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; color: #fff; font-size: 14px; user-select: none; } 
.line { width: 1px; height: 50px; background: rgba(255, 255, 255, 0.3); /* 흐릿한 메인 라인 */
 position: relative; overflow: hidden; } 
.inner-line { width: 2px; height: 23px; background: #ffffff; position: absolute; top: -20px; left: 0; animation: dropLine 1.4s infinite ease-out; } 

/* 아래로 떨어지는 애니메이션 */
@keyframes dropLine { 
 0% { transform: translateY(0); opacity: 0; } 
 30% { opacity: 1; } 
 100% { transform: translateY(55px); opacity: 0; } 
 }

/* SECTION2 */
.index_wrap .section2 .top_box { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; margin-bottom: 6rem; } 
.index_wrap .section2 .top_box .tab_list { width: auto; flex: 0 1 auto; } 
.main_product { display: flex; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 5rem; } 
 .main_product li { padding: 5rem; text-align: left; height: 48rem; position: relative; background-image: url(../img/main_product.png); background-repeat: no-repeat; background-position: center center; background-size: contain; transition: all .3s; } 
.main_product li:hover { background-image:url(../img/main_product_on.png) } 
.main_product li .info_box h3 { margin-bottom: 2rem; } 
.main_product li .info_box p { font-size: 1.8rem; } 
.main_product li .img_box { position: absolute; bottom: 5rem; left: 7rem; } 
.mp_list1 li:nth-child(1):hover { background-image:url(../img/pepper_plum.png) } 
.mp_list1 li:nth-child(2):hover { background-image:url(../img/pepper_regular.png) } 
.mp_list1 li:nth-child(3):hover { background-image:url(../img/pepper_regular.png) } 

.mp_list2 li:nth-child(1):hover { background-image:url(../img/soybean_bg.png) } 
.mp_list3 li:nth-child(1):hover { background-image:url(../img/ssam_bg.png) } 

.mp_list4 li:nth-child(1):hover { background-image:url(../img/soy_bg2_jin.png) } 
.mp_list4 li:nth-child(2):hover { background-image:url(../img/soy_bg1_every.png) } 
.mp_list4 li:nth-child(3):hover { background-image:url(../img/soy_bg3_crab.png) } 
.mp_list6 li:nth-child(1):hover { background-image:url(../img/ssam_bg.png) } 

/* SECTION3 */
.section3 { background:url(../img/section3_bg.jpg) no-repeat center center/cover; color: #fff; padding: 12rem 0; } 
.section3 p { color: #fff; } 
.section3 .esg_btn { margin-top: 5rem; } 
.section3 .esg_btn:hover span { position:relative; left: 1rem; } 
.section3 .esg_btn .img_box img { width: 3.4rem; height: 1.5rem; filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(37deg) brightness(101%) contrast(101%); } 
.section3 .esg_list { flex: 1; /* margin-left: 7vw; */display: flex; flex-wrap: wrap; justify-content: flex-start; /* margin: 0 -2rem 0 6vw; */margin-left: 4rem; } 
.section3 .esg_list li { flex: 0 1 30%; border: 1px solid #fff; border-radius: 12px; margin: 1.5%; text-align: center; position: relative; background: #ffffff00; /* transition: all .3s; */ } 
.section3 .esg_list li::before { content:''; display: block; padding-bottom: 100%; } 
.section3 .esg_list li .inner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; } 
.section3 .esg_list li .inner h4 { margin: 1rem 0; font-family: 'BitgoeulGwangju'; font-size: 2.2rem; } 
.section3 .esg_list li .esg_icon { width: 6.7rem; height: 7rem; display: block; background-repeat: no-repeat; background-position: center center; background-size: contain; margin: 0 auto; } 
.section3 .esg_list li .esg_icon.icon1 { background-image: url(../img/main3_icon1.png); } 
.section3 .esg_list li .esg_icon.icon2 { background-image: url(../img/main3_icon2.png); } 
.section3 .esg_list li .esg_icon.icon3 { background-image: url(../img/main3_icon3.png); } 
.section3 .esg_list li .esg_icon.icon4 { background-image: url(../img/main3_icon4.png); } 
.section3 .esg_list li .esg_icon.icon5 { background-image: url(../img/main3_icon5.png); } 
.section3 .esg_list li:hover { background: #ffffff21; } 
.section3 .esg_list li:hover .side_box { opacity: 1; } 
.section3 .esg_list li.emty { opacity: 0; } 
.section3 .esg_list li p { font-size: 1.6rem; transition: all .3s; } 
.side_box { position: absolute; width: 5rem; height: 5rem; background: var(--main-color); border-radius: 50%; top: 2.2rem; right: 2.2rem; opacity: 0; transition: all .3s; } 
.side_box .side_arrow { width: 1.9rem; height: 1.7rem; display: block; background: url(../img/side_arrow.png) no-repeat center center/contain; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } 


/* SECTION4 */
.section4 .inner_wrap { } 
.section4 .inner_wrap .box_wrap { display: flex; justify-content: space-between; align-items: stretch; } 
.section4 .inner_wrap .left_box { width: 50%; margin-right: 4%; } 
.section4 .inner_wrap .right_box { flex: 1; margin-top: 4rem; display: flex; align-items: stretch; } 
.section4 .inner_wrap .right_box .info_box { } 
.section4 .inner_wrap .right_box .info_box h4 { margin-bottom: 2rem; } 
.section4 .inner_wrap .right_box .info_box p { color: #666; } 
.section4 .inner_wrap .right_box ul { display: grid; grid-template-columns: 1fr 1.3fr; grid-template-rows: 1fr 1fr; gap: 3rem; } 
.section4 .inner_wrap .right_box ul li { border: 1px solid #dcdcdc; border-radius: 10px; padding: 3rem; transition: all .3s; } 
.section4 .inner_wrap .right_box ul li:hover { border: 1px solid var(--main-color); background: var(--main-color); color: #fff; } 
.section4 .inner_wrap .right_box ul li:hover p { color: #fff; } 
.section4 .inner_wrap .right_box ul li:hover .color_icon { } 
.section4 .inner_wrap .right_box ul li:hover .icon_box .color_icon { /* opacity: 0; */ } 
.section4 .inner_wrap .right_box ul li:hover .icon_box .on_icon { opacity: 1; } 
.section4 .inner_wrap .right_box ul li a { display: flex; flex-wrap: wrap; flex-direction: row; align-items: center; } 
.section4 .inner_wrap .right_box ul li:nth-child(1) { grid-column: 1 / 2; grid-row: 1 / 3; } 
.section4 .inner_wrap .right_box ul li:nth-child(1) a img { bottom: 0; } 
.section4 .inner_wrap .right_box ul li .info_box { flex: 1; } 
.section4 .inner_wrap .right_box ul li .info_box h4 { } 
.section4 .inner_wrap .right_box ul li .info_box p { } 
.section4 .inner_wrap .right_box ul li:nth-child(1) .icon_box { width: 100%; } 
.section4 .inner_wrap .right_box ul li:nth-child(1) .icon_box img { left: 0; } 
.section4 .inner_wrap .right_box ul li:nth-child(1) a { display: flex; flex-direction: column; justify-content: space-between; } 
.section4 .inner_wrap .right_box ul li .icon_box { width: 33%; height: 7rem; position: relative; } 
.section4 .inner_wrap .right_box ul li .icon_box img { opacity: 0; position: absolute; top: 0; right: 0; } 
.section4 .inner_wrap .right_box ul li .icon_box .color_icon { opacity: 1; bottom: 0; top: unset; } 
.section4 .inner_wrap .right_box ul li .icon_box .on_icon { } 


/****************** RESPONSIVE SETTING ********************/
 @media (max-width: 1580px) { } 
 @media (max-width: 1300px){
 .main_product li .info_box p br { display:none; } 
 .main_product li { background-size: contain; height: 44rem; padding: 4rem; } 
 .section3 .info_box { position: absolute; left: 7%; width: 36%; } 
 .section3 .esg_list { flex: 0 0 78%; margin-right: 0; margin-left: auto; } 
 }
 /* DESKTOP */
 @media (max-width: 1270px) { } 

 @media (max-width: 1080px){
 .index_wrap .section { margin-top: 8rem; margin-bottom: 10rem; } 
 .main_product { gap: 0 2rem; } 
 .main_product li { height: 34rem; padding: 4rem; } 
 .main_product li .img_box { bottom: 3rem; left: 5rem; } 
 .main_product li .img_box img { max-width: 10rem; } 
 .index_wrap .section2 .top_box { margin-bottom: 4rem; } 
 .index_wrap .section2 .top_box .tab_list { width: 100%; margin-top: 2rem; } 
 .main_product li .info_box h3 { margin-bottom: 1.5rem; } 

 /* section3 */
 .section3 .esg_btn { margin-top: 4rem; } 
 .section3 .esg_list li .inner h4 { margin: 1rem 0; } 
 .section3 .info_box p br { display:none; } 
 .section3 .esg_list li .esg_icon { width: 6rem; height: 6rem; } 
 .section3 .esg_list li p { font-size: 1.6rem; } 
 .section4 .inner_wrap .box_wrap { display: flex; flex-wrap: wrap; } 
 .section4 .inner_wrap .left_box { margin-right: 0; width: 100%; } 
 .section4 .inner_wrap .right_box ul li .icon_box img { display: flex; justify-content: flex-end; align-items: flex-end; } 
 .section4 .inner_wrap .right_box ul li .icon_box img { max-width: 7rem; } 
 .section4 .inner_wrap .right_box ul li:nth-child(1) .icon_box { height: 7rem; } 
 .section4 .inner_wrap .right_box ul li:nth-child(1) a { display: flex; flex-direction: column; justify-content: space-between; } 
 }
 @media (max-width: 768px){
 .main_product { grid-template-columns: repeat(2, 1fr); gap: 2rem; } 
 .main_product li { height: 29rem; padding: 3rem; background-size: cover; background-position: 50% 100%; border-radius: 20px; overflow: hidden; } 
 .index_wrap .section { margin-top: 7rem; margin-bottom: 8rem; } 
 .section3 .esg_list { flex: 0 0 98%; } 
 .section3 .esg_list li .inner { width: 90%; } 
 .section3 .info_box { width: 26%; padding-top: 2rem; } 
 .section3 .info_box h3 { margin-bottom: 2rem; } 
 .section3 .esg_list li .esg_icon { width: 5rem; height: 6rem; } 
 }
 @media (max-width: 480px){
 .index_wrap .section { margin-top: 5rem; margin-bottom: 6rem; } 
 .section1 .mySwiper .swiper-slide .visual_wrap .visual_info p { font-size: 2rem !important; } 
 .index_wrap .section2 .top_box { margin-bottom: 2rem; } 
 .section3 { padding: 6rem 0; } 
 .section3 .info_box { min-width: 20rem; padding-top: 5rem; } 
 .section3 .esg_btn { margin-top: 2rem; } 
 .section3 .esg_list li { flex: 0 1 47%; } 
 .section3 .esg_list { padding-top: 4rem; padding-bottom: 5rem; } 
 .section3 .esg_list li .esg_icon { width: 5rem; height: 6rem; } 
 .main_product { grid-template-columns: repeat(1, 1fr); } 
 .side_box { right: 1.4rem; top: 1.4rem; } 
 .section3 .esg_list li .inner h4 { font-size: 2rem; } 
 .section4 .inner_wrap .right_box ul li { padding: 2rem; } 
 .section4 .inner_wrap .right_box ul { gap: 1.4rem; } 
 .section4 .inner_wrap .right_box ul li .icon_box img { max-width: 4rem; } 
 .section4 .inner_wrap .right_box .info_box h4 { margin-bottom: 1rem; } 
 .section4 .inner_wrap .right_box ul li .icon_box { height: 3rem; margin-right: 0; margin-left: auto; } 
 }