@charset "utf-8";
/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * main_visaul *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.main_visual {width: 100%;}

@media all and (min-width: 1800px) {
    .main_visual {height: 100vh;}
}

@media all and (max-width: 1799px) {
    .main_visual {aspect-ratio: 16/9; margin-top: 100px;}
}

.main_visual video,
.main_visual img {
    width: 100%; height: 100%; object-fit: cover; object-position: center center; max-width: unset;
}
.main_visual .swiper {height: 100%;}
.main_visual .swiper-slide {width: 100%;}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * main_con01 *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.main .con01 .flex_wrap {display: flex; justify-content: space-between; align-items: flex-end; gap: 20px;}
.main .con01 .flex_wrap .btn {font-family: var(--sub-font); font-weight: 500; font-size: var(--fz-20); letter-spacing: 0.2em; color: #0a2a3b; writing-mode: vertical-lr;}
.main .con01 ul {display: flex; justify-content: center; flex-wrap: wrap; gap: 25px; margin-top: 85px;}
.main .con01 ul li {width: calc(33.3333% - 17px); position: relative;}
.main .con01 ul li .img_box {width: 100%; aspect-ratio: 1/0.97; background-color: #eee;}
.main .con01 ul li .img_box img {width: 100%; height: 100%; object-fit: cover; max-width: unset;}
.main .con01 ul li .hover_box {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; text-align: center; visibility: hidden; opacity: 0; transition: 0.25s;} 
.main .con01 ul li:hover .hover_box {visibility: visible; opacity: 1;}
.main .con01 ul li .hover_box h5 {display: inline-block; font-family: var(--sub-font); font-size: var(--fz-20); letter-spacing: 1.6em; letter-spacing: -0.045em; color: #fff;}

@media all and (max-width: 1024px) {
    .main .con01 ul li {width: calc(50% - 13px);}
    .main .con01 ul li .hover {display: none;}
}

@media all and (max-width: 767px) {
    .main .con01 ul {margin-top: 40px;}
    .main .con01 ul li:first-child {width: 100%;}
    /* .main .con01 ul li {width: 100%; max-width: 440px;} */
}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * main_con02 *
 * 기존 파일 삭제 20230720 백업 참고
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.main .con02 .swiper-slide {width: 100%; aspect-ratio: 16/9; max-width: 650px; margin-right: 100px; position: relative;}
.main .con02 .swiper-slide::before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.8);}
.main .con02 .swiper-slide-active::before {display: none;}
.main .con02 .swiper-initialized .swiper-slide {margin-right: 100px; margin-right: 0;}
.main .con02 .swiper-button-next, 
.main .con02 .swiper-button-prev {color: #0a2a3b;}
.main .con02 .swiper-button-next {right: calc(calc(100% - 750px) / 2); transform: translateX(50%);}
.main .con02 .swiper-button-prev {left: calc(calc(100% - 750px) / 2); transform: translateX(-50%);}

@media all and (max-width: 1200px) {
    .main .con02 .swiper {padding: 0 50px;}
    .main .con02 .swiper-button-next {right: 0; transform: unset;}
    .main .con02 .swiper-button-prev {left: 0; transform: unset;}
}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * main_con03 *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.main .con03 .inner {}
/* swiper */
.main .con03 .swiper-container {position: relative;}
.main .con03 .swiper-slide {display: block; width: 400px; margin-right: 10px; position: relative;}
.main .con03 .swiper-slide img {width: 100%;}
.main .con03 .swiper-slide .txt_box {position: absolute; bottom: 0; left: 0; padding: 15px 20px; box-sizing: border-box;}
.main .con03 .swiper-slide .txt_box h5 {font-weight: normal; font-family: var(--eng-font); font-size: var(--fz-20); line-height: 1.6em; color: #fff;}
/* swiper progressbar */
.main .con03 .swiper-pagination {margin-top: 80px; height: 2px;}
.main .con03 .swiper-pagination-progressbar {position: static; background: #cecece;}
.main .con03 .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background: #0f0f0f;}
/* swiper navigation */
.main .con03 .swiper-button-prev {left: auto; right: calc(100% + 70px); color: #0a2a3b;}
.main .con03 .swiper-button-next {right: auto; left: calc(100% + 70px); color: #0a2a3b;}

@media all and (max-width: 1700px) {
    .main .con03 .swiper-button-prev {right: calc(100% + 20px);}
    .main .con03 .swiper-button-next {left: calc(100% + 20px);}
}

@media all and (max-width: 1600px) {
    .main .con03 .swiper-button-prev {right: auto; left: 15px;}
    .main .con03 .swiper-button-next {left: auto; right: 15px;}
}

@media all and (max-width: 1024px) {
    .main .con03 .swiper-slide {width: calc(50% - 5px);}
}

@media all and (max-width: 767px) {
    .main .con03 .swiper-pagination {margin-top: 40px;}
}