@charset "utf-8";
/* .main_visual{margin-top: 100px;} */
.main_visual .main_swiper {width: 100%; height: 100%; overflow: hidden; position: relative;}
.main_visual .swiper-slide {position: relative; }
.main_visual .swiper-slide.video {background-color: #fff;}
.main_visual .swiper-slide.video .bg_box {top: 50%; transform: translateY(-50%); transition: unset;}

.main_visual .swiper-slide .bg_box {position: absolute; top: 0; right: 0; width: 100%; height: 100%; transform: scale(1.2); transition: 3s;}
.main_visual .swiper-slide-active .bg_box{transform: scale(1);}
.main_visual .swiper-slide .bg_box img {width: 100%; height: 100%; object-fit: cover; object-position: center center;}
.main_visual .swiper-slide .bg_box.bottom img { object-position: bottom;}
.main_visual .swiper-pagination-bullet:nth-child(1) b {animation-duration: 21s;}


.main_visual .swiper-slide > .inner{height: 100%; display: flex; align-items: center; padding-left: 120px; box-sizing: border-box;}
.main_visual .swiper-slide .txt_box{ width: 53%;  max-width: 820px; padding: 120px 0 50px; box-sizing: border-box; opacity: 0; transform: translateY(150px); transition: 3s;}
.main_visual .swiper-slide-active .txt_box{transform: translateY(0); opacity: 1;}
.main_visual .swiper-slide.video .txt_box {text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);}
.main_visual .swiper-slide .txt_box b{font-size: var(--fz-24); font-weight: 600; color: #c1f3ff; letter-spacing: 0.075em;}
.main_visual .swiper-slide .txt_box h3{font-size: var(--fz-62); font-weight: 700; letter-spacing: 0.075em; margin: 20px 0; line-height: 1.193em; color:#fff;}
.main_visual .swiper-slide .txt_box p{font-size: var(--fz-24); letter-spacing: 0; color:#fff; word-break: keep-all;}
.main_visual .swiper-slide .txt_box a{display: block; padding-top: 50px; letter-spacing: -0.025em; font-size: var(--fz-14); width: fit-content; border-bottom: 1px solid #000;}
.main_visual .swiper-slide .txt_box a::after{content: ''; display: inline-block; width: 7px; height: 10px; margin-left: 50px; background: url(/img/arr_btn.png);}

.main_visual .swiper-slide .scroll_box{background-color: var(--main-color); width:380px; aspect-ratio: 1/1;  position: absolute; left: 0; bottom: 0;}
.main_visual .swiper-slide .scroll_box::before{content: ''; display: inline-block; width: 140px; height: 100%; background-color: #e0e7ed; position: absolute; top: 0; right: 100%;}
.main_visual .swiper-slide .scroll_box a{display: inline-block; position: absolute; top: 21%; right: 21%; width: 220px; height: 220px; object-position: center;}
.main_visual .swiper-slide .scroll_box a::after{content: ''; display: inline-block; width: 19px; height: 45px; background: url(/img/down_img01.png); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.main_visual .swiper-slide .scroll_box a img{width: 100%; height: 100%; object-fit: cover; -webkit-animation: circle 5s linear infinite;  -moz-animation: circle 5s linear infinite; -o-animation: circle 5s linear infinite;}
.main_visual .swiper-slide .scroll_box a:hover img{animation: none;}
@keyframes circle {
   0%{transform: rotate(0);}
   50%{transform: rotate(180deg);}
   100%{transform: rotate(360deg);}
}

@media all and (max-width:1400px) {
    .main_visual .swiper-slide .scroll_box::before{content: none;}
}
@media all and (max-width:1200px) {
    .main_visual .swiper-slide .txt_box{width: 100%; max-width: unset;}
    .main_visual .swiper-slide .scroll_box{background-color: unset; left: 70%;}
}
@media all and (max-width:1000px) {
    .main_visual .swiper-slide .scroll_box{display: none;}
    .main_visual .swiper-slide .txt_box{width: 100%; max-width: unset;}
    /* .main_visual .swiper-slide .txt_box b{font-size: 20px;}
    .main_visual .swiper-slide .txt_box h3{font-size: 42px;}
    .main_visual .swiper-slide .txt_box p{font-size: 20px;} */

}

/* main_con01 */

.main_con01{}
/*.main_con01 .con_row.bg01{background: url(/img/main_con02_img02_off.jpg)no-repeat center/cover;} 
.main_con01 .con_row.bg01{background: url(/img/main_con02_img01_off.jpg)no-repeat center/cover;}
.main_con01 .con_row.bg02{background: url(/img/main_con02_img02_off.jpg)no-repeat center/cover;} */

.main_con01 .con_row:before{content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: .5s;}
.main_con01 .con_row.bg01:before{background: url(/img/main_con01_on01.jpg)no-repeat center center / cover;}
.main_con01 .con_row.bg02:before{background: url(/img/main_con01_on02.jpg)no-repeat center center / cover;}

.main_con01 .wrap{width: 100%; height: 100%; display: flex; background:url(/img/main_con01_bg.jpg)no-repeat center center /cover;}
.main_con01 .con_row{width: 50%; display: flex; align-items: center; justify-content: center; position: relative;}
.main_con01 .con_row .txt_box{text-align: center; position: relative;}
.main_con01 .con_row .txt_box > p{ font-size: var(--fz-24); letter-spacing: 0.025em; color: #a6cbe7;}
.main_con01 .con_row .txt_box h3{ font-size: var(--fz-44); letter-spacing: 0.075em; margin: 30px 0; color: #fff;}
.main_con01 .con_row .txt_box h3 span{position: absolute; opacity: 0;}
.main_con01 .con_row .txt_box .desc{font-size: var(--fz-20); position: absolute; left:50%; transform: translate(-50%, 200px); opacity: 0; font-weight: 400; letter-spacing: -0.025em; line-height: 1.7em; color: #FFF; transition: 1s; text-align: center; word-break: keep-all;}

.main_con01 .con_row .txt_box .more_btn{ border: 1px solid #FFF; margin: 30px auto 0; font-size: var(--fz-14); color: #FFF; width: 220px; height: 48px; line-height: 48px; border-radius: 5px; letter-spacing: -0.025em; display: block; transition: .3s;}


.main_con01 .con_row:hover:before{opacity: 1;}
.main_con01 .con_row:hover .txt_box .desc{position: relative; transform: translate(-50%,0); opacity: 1;}

.main_con01 .con_row:hover .txt_box h3 span{opacity: 1; position: relative; transition: all 2s; }
.main_con01 .con_row .txt_box .more_btn:hover{background-color: #FFF; color: var(--main-color);}

@media all and (max-width:1000px) {
    .main_con01 .wrap{flex-direction: column;}
    .main_con01 .con_row{width: 100%; height: 50%;}
}


.main_con02{background: url(/img/main_con02_bg02.jpg)no-repeat center / cover; }
.main_con02 .wrap{display: flex; align-items: center; justify-content: flex-end;}
.main_con02 .txt_box{padding-right: 15%; transform: translateY(200px); opacity: 0; transition: 2s;}
.main_con02.active .txt_box{transform: translateY(0); opacity: 1;}
.main_con02 .txt_box h2{font-size: var(--fz-48); max-width: 660px; font-weight: 200; letter-spacing: -0.05em; line-height: 1.5em; word-break: keep-all;}
.main_con02 .txt_box h2 span{color: var(--main-color);}
.main_con02 .txt_box p{font-size: var(--fz-18); padding-top: 70px; letter-spacing: 0.075em; color: #c8c8c8;}

@media all and (max-width:1000px) {
    .main_con02 .txt_box h2{} 
    .main_con02 .txt_box{width: 100%; padding: 0 15px;}
    .main_con02 .txt_box p{ padding-top: 30px;}
}

.main_visual .pagination_box{position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
.main_visual .pagination_box .inner{padding-left: 120px; height: 100%; box-sizing: border-box; display: flex; align-items: center;}
.main_visual .pagination_box .inner .margin-top{margin-top: 450px; position: relative; z-index: 30; display: flex; align-items: center;}

.main_visual .swiper-pagination{position: unset;}
.main_visual .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
    margin :0;
    margin-right: 20px;
}
.main_visual .swiper-pagination-bullet {
    position: relative;
    width: 74px;
    height: auto;
    text-align: left;
    border-radius: 0;
    opacity: 1;
    margin-right: 8px;
    background-color: transparent;}

.main_visual .swiper-pagination-bullet i {
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 1;
        width: 100%;
        height: 3px;
        background-color: rgba(255,255,255,.3);
      
    }
.main_visual .swiper-pagination-bullet b {
        position: absolute;
        bottom: 0;
        left:  0;
        z-index: 2;
        width: 0%;
        height: 3px;
        background-color: #fff;
      
    }

.main_visual .swiper-pagination-bullet-active {
    background-color: transparent;}
.main_visual .swiper-pagination-bullet-active b {  
        animation-name: countingBar;
        animation-duration: 5s; /*autopaly 시간과 맞춰주기*/
        animation-timing-function: ease-in;
        animation-iteration-count: 1;
        animation-direction: alternate ;
        animation-fill-mode:forwards;
        animation-play-state: running;
    }
    .main_visual .swiper-pagination-bullet-active b.on{
        animation-play-state: paused;
    }
.main_visual .swiper-button{width: 13px; height: 12px; background-repeat: no-repeat; background-position: center center; cursor: pointer; display:none;}
.main_visual .swiper-button.on{display: block;}
.main_visual .swiper-button-pause{background-image: url(/img/stop_btn.png);}
.main_visual .swiper-button-play{background-image: url(/img/play_btn.png);}

@keyframes countingBar {
    0% {width: 0;}
    100% {width:100%;}
}

@media all and (max-width:768px){
    .main_visual .pagination_box .inner,
    .main_visual .swiper-slide > .inner{padding-left: 0;}
}