@charset "UTF-8";

.btn { cursor: url(/gate_home_include/images/click.png) 25 25, auto !important; }

.inner-wrap { padding: 5vw; }
.section-wrap { overflow-y: hidden; }
.section-wrap .inner-wrap { padding: 0; overflow: hidden; }

.section-wrap .section { position: absolute; top: 3vw; left: 3vw; width: calc(100% - 6vw); height: calc(calc(calc(100% - 6vw) * .25) - 1vw); border: 0 solid #d5d5d5; border-radius: 1vw; overflow: hidden; transition: top .5s ease, height .5s ease, border-width .5s ease, background-color .5s ease; }
.section-wrap .section-2 { top: calc(calc(calc(100% - 9vw) * .25) + 4vw); }
.section-wrap .section-3 { top: calc(calc(calc(100% - 9vw) * .5) + 5vw); }
.section-wrap .section-4 { top: calc(calc(calc(100% - 9vw) * .75) + 6vw); }
.section-wrap .title-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: space-between; align-items: center; overflow: hidden; background-color: #f5f5f5; z-index: 300; }
.section-wrap .section .cover-wrap { position: absolute; top: 0; left: 0; width: 100%; height: calc(calc(calc(var(--vh) - 48vw) - 9vw) * .25); padding: 0 5vw; display: flex; justify-content: space-between; align-items: center; transition: transform .5s ease, opacity .5s ease; cursor: url(/gate_home_include/images/click.png) 25 25, auto; }
.section-wrap .section .cover-wrap img { width: auto; height: 100%; }
.section-wrap .section .cover-text { height: 37%; }
.section-wrap .section .cover-subtext { position: absolute; top: 72%; height: 8.7%; }
.section-wrap .section .cover-img { height: 100%; }
.section-wrap .section .content-wrap { display: flex; align-items: safe center; position: absolute; top: 0; left: 0; width: 100%; transform: translateY(100%); transition: transform .5s ease; }
.section-wrap .section .content { position: relative; width: 100%; overflow-x: hidden; }
.section-wrap .section .swiper .swiper-button-next,
.section-wrap .section .swiper .swiper-button-prev { width: auto; height: 10vw; background: none; margin-top: 0; transform: translateY(-50%); }
.section-wrap .section .swiper .swiper-button-next img,
.section-wrap .section .swiper .swiper-button-prev img { width: auto; height: 100%; }
.section-wrap .section .swiper .swiper-button-next { right: 0; }
.section-wrap .section .swiper .swiper-button-prev { left: 0; }
.section-wrap .section .swiper .swiper-pagination-bullet { width: 2vw; height: 2vw; border-radius: 1vw; background-color: #d3d3d3; opacity: .5; }
.section-wrap .section .swiper .swiper-pagination-bullet-active { opacity: 1; }
.section-wrap .btn-back { opacity: 0; visibility: hidden; position: absolute; top: 5vw; right: 5vw; width: 8vw; transition: opacity .5s ease, visibility .5s ease; z-index: 200; }

.section-wrap .section.on { top: 2.8vw; left: 2.8vw; width: calc(100% - 5.6vw); height: calc(100% - 5.6vw); border-width: 1px; background-color: #fff; }
.section-wrap .section.on .cover-wrap { transform: translateY(-120%); opacity: 0; }
.section-wrap .section.on .content-wrap { height: 100%; transform: translateY(0); overflow-y: auto; }
.section-wrap.opened .btn-back { opacity: 1; visibility: visible; }

@media (max-aspect-ratio: 1/2) and (max-width: 1024px) {
    .section-wrap .section .cover-wrap img { width: 100%; height: auto; }
    .section-wrap .section .cover-text { width: 49%; height: auto; }
    .section-wrap .section .cover-subtext { width: 26%; top: 50%; margin-top: 9%; }
    .section-wrap .section .cover-img { width: 41%; height: auto; }
}

@media all and (min-width: 1024px) {

    .section-wrap .title-wrap { display: block !important; top: 1.7vw; left: 5vw; width: 90vw; height: 4.6vw; overflow: hidden; background: transparent; }
    .section-wrap .title-wrap img { position: absolute; top: 0; left: 0; width: 100%; transition: transform .5s ease-in-out; }
    .section-wrap .title-wrap img.off { transform: translateY(100%); }

    .section-wrap .section { top: 7vw; left: 5vw; width: calc(87vw * .25); height: calc(var(--vh) - 15.8vw); border-radius: 0; transition: left .5s ease, width .5s ease, background-color .5s ease; }
    .section-wrap .section-2 { left: calc(calc(87vw * .25) + 6vw); }
    .section-wrap .section-3 { left: calc(calc(87vw * .5) + 7vw); }
    .section-wrap .section-4 { left: calc(calc(87vw * .75) + 8vw); }

    .section-wrap .section .cover-wrap { display: block; padding: 0; width: calc(87vw * .25); height: 100%; }
    .section-wrap .section .cover-text { position: absolute; top: 3vw; height: 4.6vw; padding: 0 2vw; }
    .section-wrap .section .cover-subtext { top: 8.5vw; height: 1vw; padding: 0 2vw; }
    .section-wrap .section .cover-img { position: absolute; top: 58%; left: 0; width: 100%; height: auto; transform: translateY(-50%); }
    .section-wrap .section .cover-img img { width: 100%; height: auto; }
    .section-wrap .section .cover-btn { position: absolute; bottom: 2vw; left: 11%; width: 78%; height: 3vw; border-radius: 10vw; display: flex; justify-content: center; align-items: center; background-color: rgba(255,255,255,.1); transition: background-color .5s ease; }
    .section-wrap .section .cover-btn img { width: 43%; height: auto; }
    .section-wrap .section .cover-btn img.on { display: none; }
    .section-wrap .section-2 .cover-btn { background-color: rgba(255,255,255,.25); }
    .section-wrap .section-3 .cover-btn { background-color: rgba(255,255,255,.25); }
    .section-wrap .section .content-wrap { width: 90vw; height: 100%; transform: translateX(100%); }
    .section-wrap .btn-back { top: 4.5vw; right: 3.5vw; width: 4vw; z-index: 350; }
    .section-wrap .section:hover .cover-btn { background-color: #fff; }
    .section-wrap .section:hover .cover-btn img { display: none; }
    .section-wrap .section:hover .cover-btn img.on { display: block; }

    .section-wrap .section.on { top: 6.9vw; left: 4.9vw; width: 90.2vw; height: calc(var(--vh) - 15.6vw); border-width: 0; background-color: #f5f5f5 !important; }
    .section-wrap .section.on .cover-wrap { transform: translateX(-100%); }
    .section-wrap .section.on .content-wrap { transform: translateX(0); }
}

@media (min-aspect-ratio: 2/1) and (min-width: 1024px) {
    .section-wrap .section .cover-text { height: 13.4%; }
    .section-wrap .section .cover-subtext { top: calc(3vw + 16%); height: 3%; }
    .section-wrap .section .cover-img { height: 52.6%; }
    .section-wrap .section .cover-img img { width: auto; height: 100%; margin: 0 auto; }
    .section-wrap .section .cover-btn { height: 9%; }
}