section { position: relative; width: 100%; display: block; }
#content { min-height: 0; }

/* main slider */
.main-slider { position: relative; overflow: hidden; width: 100%; }
.main-slider > ul { position: relative; width: 100%; height: 100%; height: 84vh; max-height: 960px; min-height: 400px; background-color: var(--black); }
.main-slider > ul > li { position: relative; width: 100%; height: 100%; padding: 122px 40px 40px; background-position: center; background-repeat: no-repeat; background-size: cover; }
.main-slider > ul > li a { position: relative; display: block; width: 100%; height: 100%; }
.main-slider > ul > li a .word { position: absolute; width: 60px; height: 70px; background-position: center center; background-size: 100% auto; background-repeat: no-repeat; }
.main-slider > ul > li a .word-1 { left: 0; top: 0; background-image: url("../../img/asset/word-1.svg"); }
.main-slider > ul > li a .word-2 { right: 0; top: 0; background-image: url("../../img/asset/word-2.svg"); }
.main-slider > ul > li a .word-3 { left: 0; bottom: 0; background-image: url("../../img/asset/word-3.svg"); }
.main-slider > ul > li a .word-4 { right: 0; bottom: 0; background-image: url("../../img/asset/word-4.svg"); }
.main-slider .swiper-pagination { position: absolute; left: 0; bottom: 40px; margin: 0; padding: 0; display: none; }

@media (max-width: 1024px) {
    .main-slider > ul { max-height: 580px; min-height: 120px; }
    .main-slider > ul > li { padding: 76px 20px 20px; }
    .main-slider > ul > li a .word { width: 36px; height: 40px; }
}

/* main banner */
.main-banner { padding: 60px 40px; display: flex; gap: 60px 0; flex-direction: column; align-items: center; }
.main-banner .banner-headline { text-transform: uppercase; text-align: center; color: var(--bark); }
.main-banner .banner-boxes { width: 100%; display: flex; gap: 20px; list-style: none; }
.main-banner .banner-boxes li { width: calc(50% - 10px); display: none; }
.main-banner .banner-boxes li a { display: block; position: relative; height: 1px; padding-top: 52%; background-size: cover; background-position: center; }
.main-banner .banner-boxes li img { width: 240px; height: auto; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

@media (max-width: 1024px) {
    .main-banner { padding: 40px 10px 40px; display: flex; gap: 40px 0; flex-direction: column; align-items: center; }
    .main-banner .banner-boxes { flex-direction: column; gap: 10px; }
    .main-banner .banner-boxes li { width: 100%; }
    .main-banner .banner-boxes li img { width: 150px; }
}