/* =========================================================
   메인 비주얼 슬라이드

   - 사진 4장
   - 한 자리에서 크로스페이드
   - 검정 화면 제거
   - 원본 사진 전체 표시
   - 흰색 배경
   - 가장자리 흰색 페이드

   사진 완전 표시 : 5초
   사진 교체      : 3초
   ========================================================= */


/* =========================================================
   전체 메인 영역
   ========================================================= */

.visual_slider {

    position: relative;

    width: 100%;

    height: 900px;

    padding: 0;

    margin: 0;

    overflow: hidden;

    background: #fff !important;

}


/* =========================================================
   메인 슬라이더
   ========================================================= */

.main-carousel {

    position: relative;

    display: block;

    width: 100%;

    height: 900px;

    padding: 0;

    margin: 0;

    overflow: hidden;

    background: #fff !important;

}


/* =========================================================
   각각의 사진

   사진 4장을 모두 같은 위치에 겹쳐놓음
   ========================================================= */

.main-carousel .li {

    position: absolute !important;

    top: 0 !important;

    left: 0 !important;

    width: 100% !important;

    height: 900px !important;

    padding: 0 !important;

    margin: 0 !important;

    overflow: hidden !important;


    /* 이미지가 로딩되기 전에도 흰색 */

    background-color: #fff !important;


    /* 원본 사진 전체 표시 */

    background-size: contain !important;

    background-position: center center !important;

    background-repeat: no-repeat !important;


    /* 기본적으로 사진 숨김 */

    opacity: 0;

    z-index: 1;


    /* =====================================================
       핵심

       전환시간 3초
       앞 사진과 다음 사진이
       천천히 교차
       ===================================================== */

    -webkit-transition:
        opacity 3s ease-in-out;

    transition:
        opacity 3s ease-in-out;

}


/* =========================================================
   현재 보이는 사진
   ========================================================= */

.main-carousel .li.active {

    opacity: 1;

    z-index: 2;

}


/* =========================================================
   실제 메인 이미지 4장

   FTP 위치

   /www/theme/sample99/img/main/

   main01.jpg
   main02.jpg
   main03.jpg
   main04.jpg
   ========================================================= */

.main-carousel .img01 {

    background-image:
        url('../img/main/main01.jpg') !important;

}


.main-carousel .img02 {

    background-image:
        url('../img/main/main02.jpg') !important;

}


.main-carousel .img03 {

    background-image:
        url('../img/main/main03.jpg') !important;

}


.main-carousel .img04 {

    background-image:
        url('../img/main/main04.jpg') !important;

}


/* =========================================================
   기존 확대 효과 완전 제거
   ========================================================= */

.main-carousel .li,
.main-carousel .li.active,
.main-carousel .owl-item .li,
.main-carousel .owl-item.active .li {

    background-size: contain !important;

    background-position: center center !important;

    background-repeat: no-repeat !important;

    -webkit-transform: none !important;

    transform: none !important;

}


/* =========================================================
   검정 커버 제거
   ========================================================= */

.main-carousel .li .cover {

    display: none !important;

    background: none !important;

    opacity: 0 !important;

}


/* =========================================================
   기존 메인배너 검정 배경 제거
   ========================================================= */

.mainVideo,
.bg-fixed {

    background: #fff !important;

    background-color: #fff !important;

}


/* =========================================================
   사진 가장자리 흰색 페이드

   좌우 : 자연스럽게 흰색
   위아래 : 조금 약하게
   ========================================================= */

.main-carousel .li::after {

    content: "";

    position: absolute;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 3;

    pointer-events: none;


    background:

        linear-gradient(

            to right,

            rgba(255,255,255,1) 0%,

            rgba(255,255,255,0.70) 3%,

            rgba(255,255,255,0) 10%,

            rgba(255,255,255,0) 90%,

            rgba(255,255,255,0.70) 97%,

            rgba(255,255,255,1) 100%

        ),

        linear-gradient(

            to bottom,

            rgba(255,255,255,0.45) 0%,

            rgba(255,255,255,0) 5%,

            rgba(255,255,255,0) 95%,

            rgba(255,255,255,0.45) 100%

        );

}


/* =========================================================
   기존 Owl 관련 애니메이션이 남아 있어도
   현재 3초 설정과 충돌하지 않도록 통일
   ========================================================= */

.main-carousel .animated {

    -webkit-animation-duration: 3s !important;

    animation-duration: 3s !important;

    -webkit-animation-fill-mode: both;

    animation-fill-mode: both;

}


/* =========================================================
   기존 Owl 슬라이드 점 제거
   ========================================================= */

.main-carousel .owl-dots {

    display: none !important;

}


/* =========================================================
   좌우 화살표 제거
   ========================================================= */

.main-carousel .owl-nav {

    display: none !important;

}


.main-carousel .owl-prev,
.main-carousel .owl-next {

    display: none !important;

}


/* =========================================================
   진행바 숨김
   ========================================================= */

.nav-view-wrapper,
.nav-view {

    display: none !important;

}


/* =========================================================
   태블릿
   ========================================================= */

@media screen and (max-width: 1300px) {

    .visual_slider,
    .main-carousel,
    .main-carousel .li {

        height: 750px !important;

    }

}


/* =========================================================
   작은 노트북 / 태블릿
   ========================================================= */

@media screen and (max-width: 960px) {

    .visual_slider,
    .main-carousel,
    .main-carousel .li {

        height: 600px !important;

    }

}


/* =========================================================
   모바일
   ========================================================= */

@media screen and (max-width: 640px) {

    .visual_slider,
    .main-carousel,
    .main-carousel .li {

        height: 450px !important;

    }


    .main-carousel .li {

        background-size: contain !important;

        background-position: center center !important;

        background-repeat: no-repeat !important;

        background-color: #fff !important;

    }


    /* 모바일에서는 가장자리 페이드를 조금 약하게 */

    .main-carousel .li::after {

        background:

            linear-gradient(

                to right,

                rgba(255,255,255,0.8) 0%,

                rgba(255,255,255,0) 7%,

                rgba(255,255,255,0) 93%,

                rgba(255,255,255,0.8) 100%

            ),

            linear-gradient(

                to bottom,

                rgba(255,255,255,0.25) 0%,

                rgba(255,255,255,0) 4%,

                rgba(255,255,255,0) 96%,

                rgba(255,255,255,0.25) 100%

            );

    }

}