/*
  메인 상단 슬라이드 전용 스타일 (관리자 > 이미지 설정 > 메인 이미지 로 등록했을 때만 쓰인다)

  - 이 파일은 SCSS 빌드 대상이 아니다. assets/scss 를 고쳐 컴파일하는 방식이 아니라 이 파일을 직접 수정한다.
    (style.css 는 압축된 컴파일 산출물이라 직접 고치면 다음 컴파일 때 날아간다)
  - 슬라이드를 쓰지 않을 때(.hero 만 있을 때)는 이 파일의 규칙이 하나도 걸리지 않으므로 기존 화면에 영향이 없다.
  - index.php 에서 $extraCss = ['main_visual'] 로 불러온다.
*/

/* 배경은 슬라이드마다 인라인으로 지정하므로 .hero 의 기본 배경 이미지는 끈다. */
.hero--slides {
    background-image: none;
}

.hero--slides .hero__swiper,
.hero--slides .swiper-wrapper,
.hero--slides .swiper-slide {
    height: 100vh;
}

.hero--slides .swiper-slide {
    width: 100%;
    /* style.css 의 .swiper-slide:not(:last-child){margin-right:3.2rem} 때문에 슬라이드 사이가 벌어지는 것을 막는다. */
    margin-right: 0 !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/*
  .fade-up 은 화면에 들어올 때 opacity 0 -> 1 로 바뀌는 효과다. (custom.js 의 IntersectionObserver)
  슬라이드 안에서는 보이지 않는 슬라이드가 관찰 대상이 되지 못해 문구가 계속 숨겨지므로 효과를 끈다.
*/
.hero--slides .fade-up {
    opacity: 1;
    transform: none;
    transition: none;
}