@charset "utf-8"; .index_wrap { line-height: 1; overflow: hidden; } 
.index_wrap .section { position: relative; /* height: 100vh; */padding-top: 14rem; padding-bottom: 10rem; } 
.index_wrap .section_wrap { width: 90%; margin: 0 auto; } 
/* 여기서부터 수정 */
.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: 55%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: #fff; } 
.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: 600; letter-spacing: 1px; } 
.section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box h1 { transition: all .3s; line-height: 1; overflow: hidden; } 
.main_visu_btn {background: var(--main-color);color: #fff;width: 29rem;height: 7rem;border-radius: 50px;margin: 3rem auto 4rem;} 
.main_visu_btn a {display: flex;justify-content: center;align-items: center;transition: all .3s;z-index: 2;position: relative;font-weight: 600;} 
.main_visu_btn a:hover { box-shadow: 0 0 16px 4px #fff; border-radius: 50px; } 
.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 { height: 90vh !important; } */
.index_wrap .slider_1 { background-image: url(../img/main_visual_1.jpg); } 

@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 .slide_bg { animation: zoom_in 5000ms; transition: transform 5000ms ease-in-out, opacity 1000ms ease 0s; } 
.index_wrap .mySwiper .title_box h1 strong, 
.index_wrap .mySwiper .visual_info { overflow:hidden } 
.index_wrap .mySwiper .visual_info { margin-bottom: 1.5rem; } 
.index_wrap .mySwiper .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 .visual_info h2 { animation: text-up 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay: 0.4s; } 
.index_wrap .mySwiper .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; position: absolute; bottom: 11%; align-items: center; justify-content: space-between; flex-direction: row; left: calc(50% - 14rem); } 
.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: 8rem; border-radius: 0; height: 2px; background: #8d908b; 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; } 
.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: #fff; border-radius: unset; } 


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

 /* mouse wheel */
.mouse_wrap { position: absolute; bottom: 0; left: 9%; z-index: 99; opacity: 1; } 
.mouse_wrap span { display:block; color:#fff; z-index:999; font-weight:400; font-size: 14px; transform: rotate(270deg); position: relative; bottom: 36px; } 
.mouse_wheel { display:block; color:#fff; width: 2px; height: 11rem; background: #ffffff6b; position: relative; left: 50%; } 

/*mouse-wheel icon*/
 .mouse_wheel .moving_bar { animation: scrollDown 2s linear infinite; position:
 absolute; background: #fff; width: 2px; height: 4rem; } 
 @keyframes scrollDown { 0%,100% { top:0; } 
 50% { top: 80px; } 
 }
 
/* SECTION 공통 */
/* .bg { background: url(../img/main3_img.jpg) no-repeat center center/cover; color: #fff; height: 84%; width: 96%; margin: 0 auto; position: relative; } */
.index_wrap .txt_box > span { font-weight: 600; font-family: 'Play'; } 
.index_wrap .txt_box h2 { padding: 2rem 0 2rem; font-weight: 600; } 

/* SECTION2 */
.index_wrap .section2 { overflow: hidden; } 
.index_wrap .section2 .solu_swiper1 .img_box { width: 38%; margin-left: 4%; } 
.index_wrap .section2 .solu_swiper1 .img_box img { height: 100%; object-fit: cover; border-radius: 20px; overflow: hidden; } 
.index_wrap .section2 .letter_img { position: absolute; top: 18%; z-index: 10; left: 35%; width: 45%; } 
.index_wrap .section2 .solu_sw_wrap { display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; margin-left: calc((100vw - 1580px) / 2); position: relative; top: 4%; height: 62vh; } 
.index_wrap .section2 .solu_swiper1 { width: 55%; margin-right: 4%; height: 100%; position: relative; } 
.index_wrap .section2 .solu1 { overflow: hidden; position: relative; height: 100%; } 
.index_wrap .section2 .swiper-slide { display: flex; align-items: stretch; overflow: hidden; } 
.index_wrap .section2 .info_box { margin-top: 10%; margin-left: 6rem; margin-right: 6rem; margin-bottom: 13%; position: relative; display: flex; flex-direction: column; justify-content: space-between; flex-grow: 1; } 
.index_wrap .section2 .txt_box { font-size: 2rem; } 
.index_wrap .section2 .txt_box p { color: #333; font-weight: 400; } 
.index_wrap .section2 .v_btn { width: fit-content; } 
.index_wrap .section2 .v_btn a span:hover::before { } 
.index_wrap .section2 .v_btn a span::before { content:''; display:block; position:absolute; width:0%; background: var(--main-color); height: 1px; bottom: 0; transition: all .3s; } 
.index_wrap .section2 .v_btn a:hover span { color: var(--main-color); } 
.index_wrap .section2 .v_btn a:hover i { color: var(--main-color); left: 1rem; } 
.index_wrap .section2 .v_btn a { display: flex; transition: all .3s; align-items: center; } 
.index_wrap .section2 .v_btn span { font-size: 1.8rem; color: #334; font-weight: 600; display: block; position: relative; transition: all .3s; } 
.index_wrap .section2 .v_btn i { position: relative; left: 0.5rem; transition: all .3s; } 
.index_wrap .section2 .solu_bottom_box { position: absolute; left: 0; bottom: 5rem; right: 0; width: 69%; margin-left: 38%; display: flex; flex-direction: row; align-items: flex-end; z-index: 10; justify-content: space-between; } 
.index_wrap .section2 .solu_pg_wrap { position: relative; height: 2rem; width: 100%; margin-left: 5rem; } 
.index_wrap .section2 .solu_pg_wrap .swiper-pagination { bottom: 2px; width: 100%; left: 0; text-align: left; } 
.index_wrap .section2 .swiper-pagination-bullet { width: 8rem; border-radius: 0; height: 4px; background: #bebebe; opacity: 1; transition: all .3s; } 
.index_wrap .section2 .swiper-pagination-bullet.swiper-pagination-bullet-active { background: #131313; width: 13rem; } 
.index_wrap .section2 .arrow_box { position: relative; display: flex; justify-content: space-between; width: 8rem; height: 4rem; right: 6rem; } 
.index_wrap .section2 .arrow_box>div { background: unset; color: #363636; cursor: pointer; } 
.index_wrap .section2 .arrow_box i { font-size: 3.4rem; } 
.index_wrap .section2 .solu_swiper2 { height: 100%; width: 47%; /* overflow: hidden; */ } 
.index_wrap .section2 .solu_swiper2 .solu2 { height: 100%; width: 100%; } 
.index_wrap .section2 .solu_swiper2 .solu2 .img_box img { object-fit: cover; max-width: unset; height: 100%; object-position: right; border-radius: 20px; } 
.index_wrap .section2 .solu_swiper2 .solu2 .swiper-slide { width: 36%; } 

/* SECTION3 */
.index_wrap .section3 { background: url(../img/main_sec3_bg.jpg) no-repeat 30% 50% /cover; color: #fff; /* height: 100vh; */width: 100%; margin: 0 auto; position: relative } 
.index_wrap .section3 > .flex_box { display: flex; justify-content: space-between; } 
.data_flex { max-width: 72rem; display: flex; align-items: stretch; width: 100%; } 
.data_flex li { background: #ffffff3d; border-radius: 15px; padding: 3rem 3rem 3rem; margin-right: 2rem; margin-bottom: 2rem; position: relative; flex: 1 0 48%; } 
.data_flex li:before { content:''; display: block; padding-bottom: 100%; } 
.data_flex li a { position: absolute; width: 100%; height: 100%; top: 0; left: 0; padding: 3rem; display: flex; flex-direction: column; justify-content: space-between; } 
.data_flex li a > p { text-align: right; font-family: 'Play'; } 
.data_flex li a > p i { margin-left: 1rem; } 
.data_flex li a .bottom_box .img_box img { margin-left: 0; } 
.data_flex li a .bottom_box h3 { padding: 1.8rem 0; font-weight: 400; } 
.data_flex li a .bottom_box p { font-weight: 200; height: 5rem; } 

/* SECTION4 */
.index_wrap .section4 { padding-bottom: 14rem; } 
.index_wrap .section4 > .flex_box { margin-left: calc((100vw - 1580px) / 2); display: flex; align-items: stretch; } 
.index_wrap .section4 .box1 { width: 48%; margin-right: 4%; display: flex; flex-direction: column; justify-content: space-between; padding: 2rem 0; } 
.index_wrap .section4 .box2 { flex: 1; } 
.index_wrap .section4 .navi_box li { width: 30%; margin-right: 2%; } 
.index_wrap .section4 .navi_box li h3 { /* display: flex; *//* align-items: center; */position: relative; width: fit-content; } 
.index_wrap .section4 .navi_box li h3 i { background: url(../img/arrow_btn.png) no-repeat center center/cover; display: block; width: 2rem; height: 2rem; margin-left: 1rem; position: absolute; transition: all .3s; right: -3rem; top: 1rem; } 
.index_wrap .section4 .navi_box li:hover h3 i { top: 0rem; right: -4rem; } 
.index_wrap .section4 .navi_box li p { font-size: 1.8rem; color: #333333; padding-top: 2rem; font-weight: 300; } 

.arrow_box { display: flex; justify-content: space-between; position: absolute; top: 20%; width: 100%; z-index: 1; } 

/****************** RESPONSIVE SETTING ********************/
 @media (max-width: 1580px) { } 
 @media (max-width: 1300px){
 .index_wrap .section2 .solu_sw_wrap { margin-left: 0; } 
 .index_wrap .section2 .solu_pg_wrap { margin-left: 3rem; } 
 .index_wrap .section2 .swiper-pagination-bullet { width: calc(100% / 8); } 
 .index_wrap .section2 .swiper-pagination-bullet.swiper-pagination-bullet-active { width: calc(100% / 5); } 
 .index_wrap .section2 .solu_swiper1 { margin-right: 0%; } 
 .index_wrap .section4 > .flex_box { margin-left: 4%; } 
 }
 /* DESKTOP */
 @media (max-width: 1270px) { } 

 @media (max-width: 1080px){
 .index_wrap .section { padding-top: 11rem; } 
 .section1 .mySwiper .swiper-slide .visual_wrap { top: 50%; } 
 .index_wrap .section .txt_box h2 { padding-bottom: 2rem; } 
 .index_wrap .section .txt_box { margin-bottom: 3rem; } 
 .index_wrap .mySwiper .visual_info { line-height: 1; } 
 .index_wrap .section2 .solu_swiper2 { display: none; } 
 .index_wrap .section2 .solu_swiper1 { width: 100%; } 
 .index_wrap .section2 .swiper-pagination-bullet.swiper-pagination-bullet-active { width: calc(100% / 8); } 
 .index_wrap .section2 .solu_bottom_box { width: 59%; margin-left: 42%; } 
 .index_wrap .section2 .solu_pg_wrap { margin-left: 5rem; } 
.index_wrap .section3 .data_flex { max-width: unset; } 
 .data_flex li a { padding: 5rem; } 
 .index_wrap .section4 .navi_box li { flex: 1; } 
 .index_wrap .section4 .box2 .img_box { height: 100%; object-fit: cover; } 
 .index_wrap .section4 .box2 .img_box img { height: 100%; object-fit: cover; } 
 .index_wrap .section4 { padding: 9rem 0px; } 
 .index_wrap .section2 .solu_sw_wrap { height: 45vh; } 
 }
 @media (max-width: 768px) { } 
 @media (max-width: 480px){
 .section1 .arrow_box .box_wrap { width: 5.7rem; } 
 .section1 .arrow_box { top: 26%; } 
 .section1 .mySwiper .swiper-slide .visual_wrap { top: 52%; } 
 .main_visu_btn { width: 25rem; } 
 .index_wrap .section1 .slider_1 { background-image: url(../img/main_visual_1_m.jpg); } 
 .section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box h2 { font-size: 2.2rem !important; } 
 .index_wrap .section { padding-top: 5rem; padding-bottom: 5rem; } 
 .index_wrap .section2 .v_btn span { font-size: 1.6rem; } 
 .index_wrap .section2 .solu_swiper1 .img_box { width: 180px; } 
 .index_wrap .section2 .info_box { margin-left: 6%; margin-right: 4%; flex: 1 1 50%; } 
 .index_wrap .section2 .solu_sw_wrap { height: 40vh; } 
 .index_wrap .section2 .solu_bottom_box { bottom: 0; margin-left: 41%; } 
 .data_flex li { flex: 1 0 100%; margin-right: 0; padding: 1.4rem; border-radius: 10px; } 
 .data_flex li:before { padding-bottom: 0; } 
 .data_flex li a { padding: 0; padding-top: 2rem; display: flex; justify-content: center; position: relative; } 
 .data_flex li a .bottom_box { display: flex; } 
 .data_flex li a > p { order: 2; padding-top: 1rem; font-size: 1.5rem !important; } 
 .data_flex li a .bottom_box .img_box { margin-right: 2rem; width: 40%; } 
 .data_flex li a .bottom_box .img_box img { width: auto; height: 8rem; margin: 0 auto; } 
 .index_wrap .section4 .box1 { width: 100%; margin-right: 4%; } 
 .index_wrap .section4 .box2 { margin-right: 4%; } 
 .index_wrap .section4 .navi_box li h3 i { top: 0.5rem; } 
 .index_wrap .section .txt_box { margin-bottom: 1rem; } 
 .data_flex li a .bottom_box h3 { padding: 0 0 1rem; } 
 .index_wrap .section4 .navi_box li { width: 100%; margin-right: 0; flex: 0 1 100%; border: 1px solid #dcdcdc; padding: 1.4rem; border-radius: 10px; } 
 .index_wrap .section4 .navi_box li p { padding-top: 0rem; } 
 .index_wrap .section4 .navi_box li h3 i { width: 1.6rem; height: 1.6rem; } 
 .index_wrap .section .txt_box h2 { padding-bottom: 1rem; } 
 }