@charset "utf-8"; .index_wrap { line-height: 1; overflow: hidden; } 
.index_wrap .section { position: relative; /* height: 100vh; */padding-top: 11rem; font-family: 'S-Core-Dream', sans-serif; padding-bottom: 4rem; } 
.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: 54%; left: 9%; transform: translateY(-50%); width: 100%; max-width: 1460px; color: #fff; } 
.section1 .mySwiper .swiper-slide .visual_wrap .img_box { margin-top: 4rem; } 
.section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box { margin-bottom: 4rem; } 
.section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box h2 { font-size: 3.6rem; line-height: 1.4; } 
.section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box h1 { font-size: 10rem; transition: all .3s; line-height: 1; } 
.section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box h1 span { font-weight: 400; display: block; font-size: 1.24em; } 
.section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box p { font-size: 1.7em; line-height: 1.3; font-family: 'SUIT'; font-weight: 300; } 
.section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box h2 { font-size: 3rem; line-height: 1.4; font-weight: 400; } 
.section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .visual_info .img_box { margin-bottom: 4rem; } 
.index_wrap .mySwiper .swiper-slide .visual_info h2 strong { font-weight: 700; } 

.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; } 
/* .section1 { height: 90vh !important; } */
.index_wrap .slider_1 { background-image: url(../img/main_visual_1.jpg); } 
.index_wrap .slider_2 { background-image: url(../img/main_visual_2.jpg); } 
.index_wrap .slider_3 { background-image: url(../img/main_visual_3.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 .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.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 h1 { animation: text-up 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay:0.3s; } 
.index_wrap .mySwiper .swiper-slide.swiper-slide-active .visual_info h2 { animation: text-up 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay: 0.4s; margin-right:4px; } 
.index_wrap .mySwiper .swiper-slide.swiper-slide-active .visual_info p { animation: text-up 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay: 0.4s; margin-right:4px; } 

/* pagnation */
.control_wrap { display: flex; position: absolute; bottom: 9%; right: 7%; height: 40px; 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: 16rem; border-radius: 0; height: 7px; background: unset; border: 1px solid #fff; 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 2rem; } 
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet em { position: absolute; top: -2.6rem; color: #fff; font-style: normal; font-size: 1.8rem; } 
.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 공통 */
.index_wrap .sub_tit_60 { font-size: 6.0rem; font-weight: 700; } 
.index_wrap .sub_tit_48 { font-size: 4.8rem; letter-spacing: -2px; } 
.index_wrap .sub_tit_36 { font-size: 3.6rem; font-family: inherit; } 
.index_wrap .sub_tit_32 { font-size: 3.2rem; } 
.index_wrap .sub_tit_30 { font-size: 3.0rem; font-weight: 500; } 
.index_wrap .sub_tit_24 { font-size: 2.4rem; letter-spacing: 0; } 
.index_wrap .sub_tit_22 { font-size: 2.2rem; letter-spacing: 0; font-weight: 400; } 
.index_wrap .sub_tit_20 { font-size: 2.0rem; line-height: 1.5; letter-spacing: 0; font-weight: 500; } 
.index_wrap .sub_tit_18 { font-size: 1.8rem; } 
.index_wrap .sub_tit_16 { font-size: 1.6rem; } 

/* SECTION2 */
.index_wrap .section2 .flex_box { display: flex; align-items: flex-end; } 
.index_wrap .section2 .flex_box .info_box { width: 42%; } 
.index_wrap .section2 .flex_box .img_box { flex-grow: 1; } 
.index_wrap .section2 p { line-height: 1.6; padding: 4rem 0; word-break: keep-all; font-weight: 300; width: 87%; } 
.letter_wrap { position: relative; top: 9rem; } 
.letter_wrap li { padding-bottom: 3rem; } 
.letter_wrap li.letter1 { width: 55%; } 
.letter_wrap li.letter2 { width: 64%; } 
.letter_wrap li.letter3 { width: 33.6%; } 

.letter_wrap li img { width: 100%; max-width: fit-content; } 
.letter_wrap .letter3 { margin-right: 0; } 
.letter { position: relative; z-index: 5; margin-right: 2.4%; } 
.info_box { font-family: 'S-Core-Dream'; } 
.horizon { position: relative; } 
.horizon:before { content:''; display:block; position:absolute; left:0; top: 0px; width: 15rem; background:#111; height:1px; } 
.view_btn { width: 34%; min-width: 26rem; max-width: 21rem; border: 1px solid var(--main-color); color: var(--main-color); transition: all .3s; } 
.view_btn:hover a { background: linear-gradient(#000097, #0000c7); color: #fff; } 
.view_btn a { padding: 2.4rem 2rem; text-align: center; color: inherit; transition: all .4s; } 

/* SECTION3 */
.section3 { height: 100vh; } 
.section3 .section3_wrap { background: url(../img/main3_img.jpg) no-repeat center center/cover; color: #fff; height: 84%; width: 96%; margin: 0 auto; position: relative; } 
.section3 .section3_wrap .box_wrap { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 90%; } 
.section3 .info_box { text-align: center; } 
.section3 .sub_tit_50 { font-size: 4.8rem; font-weight: 300; } 
.section3 .sub_tit_48 { } 
.section3 strong { display: block; } 
.section3 .bold { } 
.index_wrap .section3 p { font-weight: 300; padding: 6rem 0 7rem; line-height: 1.6; } 
.section3 .view_btn { margin: 0 auto; border-color: #fff; color: #fff; } 
.section3 .view_btn:hover a { background: #fff; color: var(--main-color); } 
.section3 .view_btn a { padding: 2.4rem 2rem; text-align: center; color: inherit; transition: all .4s; } 


/* SECTION4 */
.section4 { margin-bottom: 10rem; } 
.section4 .pro_letter { position: absolute; top: 0; right: 0; } 
.section4 .pro_letter.img_box { width: 50%; } 
.section4 .pro_letter.img_box img { margin: 0 0 0 auto; } 
.section4 .section4_wrap { position: relative; } 
.letter_str { font-size: 14rem; font-weight: 700; color: #fff; } 
.section4 .info_box { } 
.section4 .info_box p { padding-bottom: 6rem; padding-top: 2rem; } 
.section4 .pro_box { } 
.section4 .pro_box ul li { background: #e9e9e9; padding: 4rem 0 4rem; flex: 1 1 22%; position: relative; } 
.section4 .pro_box ul li:first-child { } 
.section4 .pro_box ul li a { } 
.section4 .pro_box ul li a h3 { text-align: center; padding-bottom: 4rem; font-weight: 600; font-family: 'S-Core-Dream'; transition: all .4s; } 
.section4 .pro_box ul li img { max-width: fit-content; width: 100%; } 
 .section4 .pro_box ul li:before { content:''; display:block; position: absolute; background: url(../img/long_arrow.svg) no-repeat center center/contain; width: 100%; height: 11px; top: 50%; left: 4%; z-index: 10; transform: translateY(-50%); transition: all .4s; transform-origin: left; opacity: 0; } 
.section4 .pro_box ul li a:before { content:''; display:block; position: absolute; /* width: 100%; */width: 0; height: 100%; background: var(--main-color); top: 0; opacity: 0; transition: all .4s; } 
.section4 .pro_box ul li a:after { content:''; display:block; position: absolute; width: 100%; height: 100%; background: url(../img/overlay_icon.png); top: 0; opacity: 0.8; } 


/* hover */
.section4 .pro_box ul li:hover { } 
.section4 .pro_box ul li:hover:before { width: 90%; opacity: 1; } 
.section4 .pro_box ul li:hover a:before { opacity: 0.8; width: 100%; } 
.section4 .pro_box ul li:hover a h3 { color: #fff; z-index: 1; position: relative; } 
.section4 .flex_box { } 
.section4 .flex_4 { display: flex; justify-content: space-between; flex-direction: row; flex-wrap: wrap; align-items: stretch; } 
.section4 .img_box { width: 100%; } 
.section4 .pro_item { } 


/****************** RESPONSIVE SETTING ********************/

 @media (max-width: 1580px){
 .index_wrap .sub_tit_22 { font-size: 2rem; } 
 .letter_wrap { top: 4rem; } 
 }
 @media (max-width: 1440px) { } 
 /* DESKTOP */
 @media (max-width: 1270px) { } 

 @media (max-width: 1080px){
 .index_wrap .sub_tit_36 { font-size: 3.2rem; } 
 .letter_wrap { top: 0; } 
 .control_wrap { width: 60%; max-width: 480px; bottom: 12%; } 
 .section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box h2 { font-size: 3.2rem; } 
 .section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box h1 { font-size: 8rem; } 
 .section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box h2 { font-size: 2.8rem; } 
 .section1 .mySwiper .swiper-slide .visual_wrap { width: 84%; } 
 .section3 { height: 100vh; } 
 .section4 .pro_box ul li a h3 { padding-bottom: 2rem; font-size: 2.2rem; } 
 }
 @media (max-width: 768px){
 .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 1rem; } 
 /* section2 */ 
 .index_wrap .section2 .flex_box .info_box { width: 100%; margin-right: 0; order: 2; } 
 .index_wrap .section2 .flex_box .img_box { order: 1; position: relative; bottom: 4rem; } 
 /* section3 */
 .section3 { height: 88vh; } 
 .section3 .sub_tit_48 { font-size: 4rem; } 
/* section4 */
 .index_wrap .sub_tit_24 { } 
 .section4 .pro_box ul li { flex: 0 1 49%; margin-bottom: 2%; margin-right: 0; } 
.section4 .pro_letter.img_box { width: 70%; } 
 }
 @media (max-width: 600px){
 .section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box h2 { font-size: 2.4rem; letter-spacing: -1px; } 
 .section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box h1 { font-size: 6rem; } 
 .section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box h2 { font-size: 2.4rem; } 
 .section4 .pro_box ul li { } 
 }
 @media (max-width: 480px){
 .section1 .mySwiper .swiper-slide .visual_wrap .img_box { margin-top: 2rem; } 
 .section1 .mySwiper .swiper-slide .visual_wrap .img_box img { width:150px; } 
 .section1 .mySwiper .swiper-slide .visual_wrap { top: 48%; } 
 .section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box { margin-bottom: 4rem; } 
 .index_wrap .tit_wrap { font-size: 2rem; padding-top: calc(60px + 4rem); } 
 .visual_wrap .visual_txt_box .visual_info { width: 94%; } 
 .index_wrap .section1 .slider_1 { background-image: url(../img/main_visual_1_m.jpg); } 
 .index_wrap .section1 .slider_2 { background-image: url(../img/main_visual_2_m.jpg); } 
 .index_wrap .section1 .slider_3 { background-image: url(../img/main_visual_3_m.jpg); } 
 
 /* 로딩바 애니메이션 */
 @-webkit-keyframes LoadingBar { 
 from { width:0px; } 
 to { width:100%; } 
 }
 @keyframes LoadingBar { 
 from { width:0px; } 
 to { width:100%; } 
 }
 .index_wrap .section { padding-top: 8rem; } 
 .index_wrap .sub_tit_36 { font-size: 2.8rem; } 
 .section3 .sub_tit_48 { font-size: 3rem; } 
 .index_wrap .sub_tit_24 { } 

 /* section2 */
 .index_wrap .section2 { margin-top: 60px; } 
 .letter_wrap { position: absolute; top: -1rem; } 
 .letter_wrap li.letter1 { width: 70%; } 
 .letter_wrap li.letter2 { width: 87%; margin-right: 0; } 
 .letter_wrap li.letter3 { width: 47%; } 
 .index_wrap .section2 p { width: 100%; padding: 2rem 0; } 

 /* section3 */ 
 .section3 .section3_wrap { height: 100%; } 
 .index_wrap .section3 p { padding: 3rem 0 4rem; } 

 /* section4 */ 
 .section4 { margin-top: 4rem; margin-bottom: 2rem; } 
 }