@charset "utf-8"; :focus-visible { outline:0 } 
.section1 .mySwiper { width: 100%; height: 100vh; padding-top: 13.88vw; } 
.section1 .mySwiper .swiper-slide { opacity: 1; overflow: hidden; transition: .6s; width: calc((100% - 24%) / 3.85) !important; } 
.section1 .mySwiper .swiper-slide .img_wrap { display: flex; align-items: center; justify-content: center; height: 100%; } 
.section1 .mySwiper .swiper-slide img { width: 58%; margin: 0 auto; display: block; position: relative; top: 8rem; transition: all .7s; } 
.section1 .mySwiper .swiper-slide-active { opacity: 1; z-index: 1; transform: scale(1.8); width: 24% !important; } 
.section1 .mySwiper .swiper-slide-active .img_wrap img { width: 70%; top: 0; } 
.section1 .sw_wide_wrap { width: 100%; position: absolute; top: 58%; transform: translateY(-50%); } 

/* pagination */
.sw_wide_wrap .pager_txt { text-align: center; position: absolute; bottom: unset; top: 1rem; left: unset; /* background: pink; */width: 100%; height: 40rem; } 
.sw_wide_wrap .pager_txt:focus-visible { outline:0; } 
.sw_wide_wrap .pager_txt .swiper-pagination-bullet.on { opacity: 1; } 
.sw_wide_wrap .pager_txt .swiper-pagination-bullet { font-size: 17vw; font-weight: 700; text-align: center; font-family: var(--font-fam); width: fit-content; height: fit-content; margin: unset; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; opacity: 0; /* transition: all .2s; */background: unset; } 
.index_wrap .inner_wrap { max-width: 1680px; } 

@keyframes zoom_in { 
 0% { transform: scale(1.2); /* background-size: 100% 100%; */ } 
 100% { transform: scale(1) rotate(0.003deg); } 
 }
.index_wrap .mySwiper .swiper-slide.swiper-slide-active .slide_bg { animation: zoom_in 5000ms; transition: transform 5000ms ease-in-out, opacity 1000ms ease 0s; } 
.section1 .main_more_btn { color: #fff; font-size: 1.7rem; font-weight: 400; } 
.main_more_btn { display: inline-block; border: 1px solid #ffffff85; transition: all .4s; color: #fff; font-size: 1.7rem; font-weight: 400; } 
.swiper-slide-active .main_more_btn { animation: text-up 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay: 0.5s; } 
.main_more_btn a { color: #fff; font-size: 1.7rem; font-weight: 400; padding: 2rem 4rem; } 
.main_more_btn span { display: flex; flex-direction: row; align-items: center; } 
.main_more_btn span b { font-weight: inherit; margin-right: 1.5rem; } 
.main_more_btn span i { width: 4rem; height: auto; transition: all .4s; position: relative; left: 0; } 
.main_more_btn:hover { background: #f9f9f914; backdrop-filter: blur(9px); border: 1px solid #fff; } 
.main_more_btn:hover i { position: relative; left: 1rem; } 

.line_box { position: relative; margin-top: 0rem; padding-bottom: 3rem; } 
.swiper-slide.swiper-slide-active .main_line { display: block; position: absolute; left: 0; bottom: 3rem; --width: 100%; height: 2px; background: #fff; animation: line_left 2s; animation-fill-mode: forwards; } 
.index_wrap { line-height: 1; /* overflow: hidden; */ } 
.index_wrap .section1 { height: 100vh; } 
.index_wrap .section h2 { font-weight: 700; text-align: center; padding-bottom: 14rem; } 
.index_wrap .section_wrap { width: 90%; margin: 0 auto; } 
.main_btn { background: unset; width: 220px; border-radius: 33px; margin-top: 60px; transition: all .3s; border: 1px solid #fff; } 
.main_btn:hover { box-shadow: 1px 0px 3px 1px #787878; background: #fff; border: 1px solid #fff; } 
.main_btn:hover a { color: #222 } 
.main_btn a { padding: 2rem 3rem; display: flex; justify-content: space-between; align-items: center; flex-direction: row; font-size: 1.6rem; flex-wrap: nowrap; color: inherit; } 
.main_btn a i { font-size: 25px; } 
.index_wrap .section1 .swiper-wrapper { transition-timing-function: linear; } 
.index_wrap .mySwiper .swiper-slide.swiper-slide-active .title_box, .index_wrap .mySwiper .swiper-slide.swiper-slide-active .visual_info { overflow: hidden } 
.index_wrap .mySwiper .swiper-slide.swiper-slide-active .title_box h2 { animation: text-up 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; } 
.index_wrap .mySwiper .swiper-slide.swiper-slide-active .visual_info h3 { animation: text-up 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay: 0.2s; margin-right: 4px; } 
.index_wrap .mySwiper .swiper-slide.swiper-slide-active .visual_info h4 { animation: text-up 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay: 0.4s; margin-right: 4px; } 
.index_wrap .section3 .info_box >ul >li ul { overflow: hidden; } 
.index_wrap .section3 .info_box >ul >li.on ul li { animation: fadeInUp 1s cubic-bezier(0.4, 0, 0.2, 1) both; } 
/* pagnation */
.pg_line { display: flex; flex-direction: column-reverse; flex-wrap: nowrap; align-items: center; width: 1rem; height: 1rem; border-radius: 50%; background: #fff; } 
.arrow_wrap .swiper-pagination-bullet.swiper-pagination-bullet-active::before { content:''; display:block; position:absolute; width: 2.4rem; height: 2.4rem; border: 1px solid #ffff; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; } 
.arrow_wrap .swiper-pagination { text-align: left; position: relative; display: flex; justify-content: space-between; align-items: center; top: 0; margin: 0 3rem; } 
.arrow_wrap .swiper-pagination-bullet { border-radius: 0; height: 1rem; width: 1rem; opacity: 1; display: block !important; position: relative; background: inherit; border-radius: 50%; } 
.arrow_wrap .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .control_wrap .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet { margin-left: 0; width: 7px; height: 7px; border-radius: 50%; background: #ffffff45; position: relative; transition: all .4s; margin: 0; } 

/* arrow_wrap */
.arrow_wide { position: absolute; color: #fff; transform: translate(-50%, -50%); left: 50%; top: 50%; width: 94%; z-index: 10; } 
.arrow_wrap { width: 100%; display: flex; justify-content: space-between; } 
.arrow_wrap .custom_prev, .arrow_wrap .custom_next { cursor: pointer; /* border: 1px solid #fff; */border-radius: 50%; width: 6rem; display: flex; align-items: center; justify-content: center; } 
.arrow_wrap .custom_prev i, .arrow_wrap .custom_next i { font-size: 2.3rem; } 

/* mouse wheel */
.cursor_circle { position: absolute; bottom: -3%; right: 3%; width: 17rem; height: 17rem; border-radius: 50%; transform: translate(5%, 5%); z-index: 1; } 
.cursor_circle:after { content: ''; display: block; width: 17rem; height: 17rem; position: absolute; top: 0; left: 0; background: url(../img/main_scroll_txt.png) no-repeat center / cover; animation: cursor_circle 6s linear infinite; animation-delay: 0s; transition: 5s linear infinite; } 
.cursor_circle .wrap { position: relative; width: 100%; height: 100%; } 
.cursor_circle .wrap i { color: #fff; font-size: 4rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } 
.cursor_circle .wrap img { display: block; position: absolute; top: 45%; left: 45%; font-size: 2rem; color: #fff; font-weight: 100; line-height: 1.4; margin: 0 auto; text-align: center; } 
/* 로딩바 애니메이션 */
@-webkit-keyframes LoadingBar { 
 from { height: 0px; } 
 to { height: 100%; } 
 }
@keyframes LoadingBar { 
 from { height: 0px; } 

 to { height: 100%; } 
 }

.mb_txt { font-size: 3vw; text-align: center; font-weight: 400; font-size: clamp(2rem,4vw,2.6rem); padding: 4rem 0 0; } 
.mb_txt .m_480 { display:none; } 
.mb_txt b { font-weight: 800; padding-top: 1rem; display: block; font-size: 1.2em; } 

/* SECTION 공통 */
.index_wrap .section { margin-bottom: 15rem; position: relative; } 
.main_tit_1 { font-size: 4.8rem; font-weight: 700; padding-bottom: 4rem; } 
.main_tit_2 { font-size: 3.6rem; font-weight: 600; } 
.main_tit_3 { font-size: 3rem; font-weight: 700; } 
.main_wrapper .main_p1 { font-size: 4.8rem; line-height: 1.3; letter-spacing: -1px; } 

/* SECTION2 */
.index_wrap .section2 { overflow: hidden; } 
.index_wrap .section2 .box_wrap { margin-bottom: 14rem; font-size: 1.8rem; color: #666; } 
.index_wrap .section2 .box_wrap .info_box { margin-right: 4%; } 
.index_wrap .section2 .box_wrap.box_rev .info_box { margin-right: 0%; } 
.index_wrap .section2 .box_wrap.box_rev .img_box { margin-right: 4%; } 
.index_wrap .section2 .info_box { flex: 1 0 0; } 
.index_wrap .section2 .info_box .inner h4 { color: #111; font-size: 5.2rem; font-weight: 600; padding-bottom: 4rem; } 
.index_wrap .section2 .info_box .inner h4 span { font-size: 2.4rem; color: #66666670; } 
.index_wrap .section2 .info_box .inner p { font-weight: 300; /* font-size: 14px; */ } 
.index_wrap .section2 .info_box .inner p b { color: #111; font-weight: 400; } 
.index_wrap .section2 .box_wrap.box_rev { text-align: right; } 
.index_wrap .section2 .box_wrap.box_rev .info_box { order: 1; } 

/* SECTION3 */
.index_wrap .section3 { overflow: hidden; padding-top: 5rem; } 
.index_wrap .section3 .img_flow .img_box img { width: unset; } 
.img_flow { /* padding: 3rem 0 3rem; */display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; overflow: hidden; width: 200%; } 
.img_flow.flow1 .img_box { animation: textLoop 16s linear infinite; text-wrap:nowrap; } 
.img_flow.flow2 .img_box { animation: textLoop 16s linear infinite reverse; text-wrap:nowrap; } 


@keyframes textLoop { 
 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 
 100% { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } 
 }

/* SECTION4 */
.index_wrap .section4 { position: unset; height: 350vh; } 
.index_wrap .section4 .section4_wrap { width: 100%; height: 100vh; position: sticky; position: -webkit-sticky; top: 0; overflow: hidden; } 
.section4 .txt_wrap { display: flex; align-items: center; /* background: #ddd; */width: 100%; top: 20rem; position: relative; justify-content: center; } 
.section4 .video_wrap { position: absolute; z-index: 10; left: 43.5%; top: 20rem; width: 18rem; height: 123px; } 
.section4 .video_box { width: 100%; height: 100%; background: #111; } 
.section4 .video_box video { width: 100%; height: 100%; object-fit: cover; } 
.section4 .video_box img { width: 100%; height: 100%; object-fit: contain; } 
.section4 .txt_wrap .txt_box p { font-size: 4.2rem; font-weight: 700; } 
.section4 .txt_wrap .txt1 { } 
.section4 .txt_wrap .txt2 { padding-left: 247px; } 

/* SECTION5 */
.index_wrap .section5 .notice_box { margin-bottom: 5.55vw; } 
.index_wrap .section5 .box1 { display: flex; } 
.index_wrap .section5 .box1 h2 { padding-bottom: 0; } 
.index_wrap .section5 .notice_box .box1 .view_wrap { display: flex; justify-content: flex-end; align-items: center; } 
.index_wrap .section5 .notice_box .box1 .view_wrap .arrow_wrap { width: fit-content; } 
.index_wrap .section5 .notice_box .box1 .view_wrap .arrow_wrap > div { width: 4.7rem; margin: 0 1rem; } 
.index_wrap .section5 .notice_box .box1 .view_wrap .arrow_wrap > div img { width: 100%; } 
.index_wrap .section5 .notice_box .box1 .view_wrap .more_btn { background: #111; color: #fff; border-radius: 50px; overflow: hidden; width: 14rem; height: 4rem; text-align: center; margin-left: 2rem; } 
.index_wrap .section5 .notice_box .box1 .view_wrap .more_btn a { color: #fff; display: flex; font-weight: 200; justify-content: center; align-items: center; } 
.index_wrap .section5 .box2 { overflow: hidden; } 
.index_wrap .section5 .box2 .pro_slider { position: relative; left: calc((100vw - 1680px) / 2); } 




/****************** RESPONSIVE SETTING ********************/
@media (max-width: 1750px){
 .index_wrap .section5 .box2 .pro_slider { left: calc((100vw - 96% ) / 2); } 
 .index_wrap .section { margin-bottom: 13rem; } 
 }
@media (max-width: 1630px){
 .index_wrap .section2 .box_wrap .info_box p br { display:none; } 
 .section4 .video_wrap { left: calc(43.5% - 20px); } 
 }
@media (max-width: 1360px){
 .index_wrap .section2 .box_wrap .img_box { flex: 1; } 
 .index_wrap .section { margin-bottom: 10rem; } 
 .index_wrap .section5 .box2 .pro_slider { left: calc((100vw - 92% ) / 2); } 
 .section1 .mySwiper { height: calc(78vh - 30rem); padding-top: 0; } 
 .section1 .sw_wide_wrap { top: 54%; } 
 .sw_wide_wrap .pager_txt { position: relative; height: 24rem; } 
 .index_wrap .section1 { height: 94vh; } 
 }

/* DESKTOP */
@media (max-width: 1270px){
 .section1 .mySwiper .swiper-slide { width: calc((100% - 24%) / 2.3) !important; } 
 .index_wrap .section h2 { padding-bottom: 10rem; } 
 .index_wrap .section2 .box_wrap { margin-bottom: 10rem; } 
 .index_wrap .section2 .info_box .inner h4 { font-size: 4.6rem; padding-bottom: 3rem; } 
 .img_flow img { height: 13rem; } 
 .section1 .mySwiper { height: calc(82vh - 30rem); height: calc(82vh - 24rem); padding-top: 0; } 
 }

@media (max-width: 1080px){
 .index_wrap .section2 .info_box .inner h4 { font-size: 3.6rem; } 
 .img_flow img { height: 11rem; } 
.section4 .txt_wrap .txt1 { position: relative; } 
 .section4 .txt_wrap .txt2 { padding-left: 0; padding-top: 203px; position: relative; text-align: center; } 
 .section4 .video_wrap { top: 34.5rem; } 
 .section4 .txt_wrap { display: flex; flex-direction: column; align-items: center; align-content: center; } 
 .arrow_wrap .custom_prev, .arrow_wrap .custom_next { width: 4rem; } 
 .arrow_wrap .custom_prev img, .arrow_wrap .custom_next img { width:100% } 
 .section1 .mySwiper .swiper-slide img { top: 5rem; } 
 }
@media (max-width: 884px){
 .section1 .mySwiper { height: calc(78vh - 28rem); } 
 .index_wrap .section2 .info_box .inner h4 { font-size: 3.3rem; } 
 .section4 .txt_wrap .txt1 .img_box { max-width: 340px; } 
 .index_wrap .section h2 { padding-bottom: 8rem; } 
 .index_wrap .section { margin-bottom: 8rem; } 
 .index_wrap .section1 .swiper-wrapper { height: 44vh; } 
 .section1 .mySwiper .swiper-slide img { top: 4rem; } 
 }

@media (max-width: 480px){
 .index_wrap .section1 .swiper-wrapper { height: auto; } 
 .section1 .mySwiper .swiper-slide img { width: 100%; } 
 .mb_txt .m_480 { display:block; } 
 .mb_txt { font-size: 1.7rem; max-width: 100%; margin: 0 auto; padding: 2rem 0 2rem; } 
 .index_wrap .section { margin-bottom: 6rem; } 
 .index_wrap .section h2 { padding-bottom: 6rem; } 
 .section1 .sw_wide_wrap { top: 50%; /* height: 74vh; */ } 
 .section1 .mySwiper { /* height: calc(87vh - 22rem); */width: 92%; height: 60vh; height: auto; } 
 .section1 .mySwiper .swiper-slide { width: 100% !important; } 
 .section1 .mySwiper .swiper-slide-active { transform: unset; } 
 .section1 .mySwiper .swiper-slide-active .img_wrap img { width: 100%; } 
 .index_wrap .section1 { margin-bottom: 0; height: 100vh; } 
 .arrow_wrap .custom_prev, .arrow_wrap .custom_next { width: 3.4rem; } 
 .arrow_wrap .custom_prev img, .arrow_wrap .custom_next img { width: 100%; } 
 .arrow_wide { top: 45%; } 
 .sw_wide_wrap .pager_txt .swiper-pagination-bullet { font-size: 18vw; } 
 .sw_wide_wrap .pager_txt { height: 14rem; top: 2rem; width: 92%; margin: 0 auto; } 
 .section1 .mySwiper .swiper-slide .img_wrap { height:auto; } 
 .index_wrap .section2 .info_box .inner h4 { font-size: 2rem; padding-bottom: 0.5rem; } 
 .index_wrap .section2 .box_wrap.box_rev .info_box { order: 0; } 
 .index_wrap .section2 .box_wrap { margin-bottom: 6rem; } 
 .index_wrap .section2 .box_wrap.box_rev .img_box { margin-right: 0; } 
 .img_flow img { height: 8rem; } 
 .section4 .txt_wrap .txt1 .img_box { max-width: 200px; } 
 .section4 .txt_wrap .txt_box p { font-size: 2.4rem; } 
 .section4 .video_wrap { left: calc( 50% - 158px / 2); top: 30.5rem; } 
 .index_wrap .section5 .notice_box .box1 h2 { text-align: left; } 
 .index_wrap .section5 .notice_box .box1 .view_wrap .arrow_wrap > div { width: 3.4rem; } 
 .index_wrap .section5 .notice_box .box1 .view_wrap { display: flex; justify-content: space-between; } 
 .index_wrap .section5 .notice_box .box1 .view_wrap .more_btn { width: 12rem; height: 3.4rem; } 
 .index_wrap .section2 .info_box .inner p { font-size:14px; } 
 .index_wrap .section2 .info_box .inner h4 span { font-size: 1.6rem; } 
 }