._m{ width: 100%; overflow: hidden; position: relative; background-color: #000;  }


body.on ._m .se01{ opacity: 1; }
body{ background-color: #000; }

._m .se01{ width: 100%; position: relative; overflow: hidden; box-sizing: border-box; background-color: #101010; color: #fff; transition-duration: 0.4s; opacity: 0; }
._m .se01 .visual{ width: 100%; height: 100vh; position: absolute; left: 0; top: 0; }
._m .se01 .visual .vissw{ width: 100%; height: 100%; }
._m .se01 .visual .vissw .swiper-slide .bgwrap{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: hidden; background-color: #101010; }
._m .se01 .visual .vissw .swiper-slide .bg{ width: 100%; height: 100%; }
._m .se01 .visual .vissw .swiper-slide .bg iframe{ width: 100vw; height: 56.25vw; min-height: 100vh; min-width: 177.77vh; position: absolute; opacity: 0.7; top: 50%; left: 50%; transform: translate(-50%, -50%); }
/* ._m .se01 .visual .vissw .swiper-slide .bg iframe{ width: 100%; position: absolute; left: 0; top: 0; opacity: 0.7; } */
._m .se01 .visual .vissw .swiper-slide .inn{ display: flex; flex-direction: column; align-items: flex-start; height: 100%; justify-content: center; box-sizing: border-box; transition-duration: 0.6s; padding: 0 155px; position: relative; z-index: 1; }
._m .se01 .visual .vissw .swiper-slide .visTitle{ position: relative; z-index: 1; width: 100%; }
._m .se01 .visual .vissw .swiper-slide .visTitle > p{ font-size: 20px; font-weight: 500; letter-spacing: -0.04em; }
._m .se01 .visual .vissw .swiper-slide .visTitle .morebx{ display: block; margin-top: 35px; }
._m .se01 .visual .vissw .swiper-slide .visTitle strong{ display: block; height: 125px; width: 100%; position: relative; }
._m .se01 .visual .vissw .swiper-slide .visTitle strong svg{ height: 100%; }
._m .se01 .visual .vissw .swiper-slide .visTitle strong svg .st0{ transition-duration: 0.4s; fill: rgba(255,255,255,0);  }
._m .se01 .visual .vissw .swiper-slide .visTitle strong .white{ position: absolute; left: 0; top: 0; height: 100%; clip-path: polygon(0 0, 0% 0, 0% 100%, 0 100%); transition-duration: 0.8s; transition-delay: 0.2s; }
._m .se01 .visual .vissw .swiper-slide .visTitle strong .white .first{ clip-path: polygon(0 0, 0% 0, 0% 100%, 0 100%); height: 100%; width: 100%; }
._m .se01 .visual .vissw .swiper-slide .visTitle strong .white svg .st0{ fill: rgba(255,255,255,1);  }

._m .se01 .visual .vissw .swiper-slide .more{ display: inline-flex; align-items: center; padding: 8px 0; position: relative; font-size: 17px; letter-spacing: -0.04em; font-weight: 500; font-family: 'Mona Sans', sans-serif; margin-top: 55px; justify-content: flex-start; }
._m .se01 .visual .vissw .swiper-slide .more i{ font-size: 18px; margin-left: 10px; }
._m .se01 .visual .vissw .swiper-slide .more em{ display: block; position: absolute; left: 0; width: 0%; transition-duration: 0.4s; transform-origin: 0 0; top: 100%; height: 1px; background-color: #fff; }

/* ._m .se01 .visual .vissw .swiper-slide.swiper-slide-active .visTitle strong svg .st0{ fill: rgba(255,255,255,1); } */
._m .se01 .visual .vissw .swiper-slide.swiper-slide-active .visTitle strong .white{ clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }

@media screen and (min-width: 821px){
    ._m .se01 .visual .vissw .swiper-slide .visTitle .morebx:hover .more em{ width: 100%; }
}

._m .se01 .visual .swiper-pagination{ display: flex; justify-content: flex-start; left: 155px; bottom: 270px; }
._m .se01 .visual .swiper-pagination > span{ width: 28px; height: 28px; font-size: 14px; color: #b2b2b2; letter-spacing: -0.04em; font-family: 'Mona Sans', sans-serif; display: flex; align-items: center; justify-content: center; opacity: 1; background-color: rgba(255,255,255,0); margin: 0 5px; transition-duration: 0.2s; border-radius: 50%; cursor: pointer; }
._m .se01 .visual .swiper-pagination > span:first-of-type{ margin-left: 0; }
._m .se01 .visual .swiper-pagination > span.swiper-pagination-bullet-active{ color: #fff; background-color: #0065ff; }

@media screen and (max-width: 1800px){
    ._m .se01 .visual .vissw .swiper-slide .visTitle strong{ height: 100px; }
    ._m .se01 .visual .vissw .swiper-slide .inn{ padding: 0 5%; }
    ._m .se01 .visual .swiper-pagination{ left: 5%; }
}

@media screen and (max-width: 1440px){
    ._m .se01 .visual .vissw .swiper-slide .visTitle strong{ height: 90px; }
}

@media screen and (max-width: 1280px){
    ._m .se01 .visual .vissw .swiper-slide .visTitle strong{ height: 70px; }
    ._m .se01 .visual .vissw .swiper-slide .visTitle .morebx{ margin-top: 20px; }
    ._m .se01 .visual .vissw .swiper-slide .visTitle > p{ font-size: 18px; }
}

@media screen and (max-width: 1024px){
    ._m .se01 .visual .vissw .swiper-slide .visTitle strong{ height: 55px; }
}

@media screen and (max-width: 820px){
    /* ._m .se01 .scroll{ display: none; }
    ._m .se01 .visual{ position: static; } */
    ._m .se01 .scroll .blank{ height: 170vh !important; }
    ._m .se01 .visual .vissw .swiper-slide .visTitle strong{ height: 37px; }
    ._m .se01 .visual .vissw .swiper-slide .visTitle > p{ font-size: 16px; }
    ._m .se01 .visual .vissw .swiper-slide .visTitle .morebx .more em{ width: 100%; }

    ._m .se01 .visual .vissw .swiper-slide .more{ margin-top: 40px; font-size: 14px; padding: 5px 0; }
    ._m .se01 .visual .swiper-pagination{ bottom: 5vh; }
}

@media screen and (max-width: 500px){
    ._m .se01 .visual .vissw .swiper-slide .visTitle strong{ height: 20px; }
    ._m .se01 .visual .vissw .swiper-slide .visTitle > p{ font-size: 14px; }
    ._m .se01 .visual .vissw .swiper-slide .visTitle .morebx{ margin-top: 10px; }
    
}



._m .se02{ width: 100%; height: 100vh; position: relative; overflow: hidden; background-color: #fff; }
._m .se02 .bgwrap{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-color: #000; clip-path: circle(130% at 50% 50%); }
._m .se02 .cover{ width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; mix-blend-mode: difference; padding-bottom: 70px; box-sizing: border-box; }

._m .se02 .cover .logo{ width: 140px; filter: invert(1); }
._m .se02 .cover .txtmotion{ min-width: 100%; display: flex; align-items: center; justify-content: center; color: #fff; margin-top: 20px; }
._m .se02 .cover .txtmotion > strong{ display: block; font-size: 8.1771vw; letter-spacing: -0.04em; font-weight: 800; font-family: 'Mona Sans', sans-serif; white-space: nowrap; padding: 0 0.5em; box-sizing: border-box; overflow: hidden; }

._m .se02 .cover .txtmotion > p{ font-size: 3.4896vw; letter-spacing: -0.04em; font-weight: 600; overflow: hidden; text-align: center; white-space: nowrap; line-height: 1.4; width: 15em; }
._m .se02 .cover .txtmotion > p br{ display: none; }


@media screen and (max-width: 1280px){
    ._m .se02 .cover{ padding-bottom: 60px; }
    ._m .se02 .cover .logo{ width: 100px; }
}

@media screen and (max-width: 820px){
    ._m .se02 .cover{ padding-bottom: 50px; }
    ._m .se02 .cover .logo{ width: 90px; }
    ._m .se02 .cover .txtmotion > p{ font-size: 5.5vw; }
    ._m .se02 .cover .txtmotion > strong{ font-size: 10vw; }
}

@media screen and (max-width: 500px){
    ._m .se02 .cover .logo{ width: 80px; }
    ._m .se02 .cover .txtmotion > p{ font-size: 7.5vw; width: 11em; }
    ._m .se02 .cover .txtmotion > p br{ display: block; }
}


._m .se03{ width: 100%; position: relative; overflow: hidden; background-color: #000; color: #fff; padding: 675px 0 817px; margin-top: -1px; }

._m .se03 .tbx{ width: 100%; height: 100vh; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; top: 0; left: 0; position: absolute; z-index: 10; padding: 5%; box-sizing: border-box; }
._m .se03 .tbx dt{ font-size: 7.8125vw; letter-spacing: -0.04em; font-weight: 800; font-family: 'Mona Sans', sans-serif; }
._m .se03 .tbx dt .txt{ display: flex; align-items: baseline;  }
._m .se03 .tbx dt strong{ display: block; background: linear-gradient(0, #fff 20%, #7b7b7b 20%); -webkit-background-clip: text !important; -webkit-text-fill-color: transparent; padding: 0 0.1em; box-sizing: border-box; overflow: hidden; }
._m .se03 .tbx dt strong > div{ display: block; background: linear-gradient(0, #fff 20%, #7b7b7b 20%); -webkit-background-clip: text !important; -webkit-text-fill-color: transparent; padding: 0 0.02em; box-sizing: border-box; overflow: hidden; }
._m .se03 .tbx dt em{ color: #0065ff; display: block; }

._m .se03 .tbx dd{ font-size: 17px; letter-spacing: -0.04em; line-height: calc(30 / 17); margin-top: 40px; font-weight: 500; }

._m .se03 .h-grid{
    perspective: 4000px;
    width: 70%;
    margin: 0 auto;
    transform-style: preserve-3d;
    place-items: center;
}

._m .se03 .h-grid .grid{
    position: relative;
    width: 100%;
    perspective: 4000px;
    transform-style: preserve-3d;
    align-items: center;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: auto;
}

._m .se03 .h-grid .grid .col{
    width: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
    position: relative;
    transform-origin: 50% 0%;
    border-radius: 10px;
    opacity: 0;
}

._m .se03 .h-grid .grid .col::after{
    content: "";
    display: block;
    padding-bottom: calc(256 / 504 * 100%);
}

._m .se03 .h-grid .grid .col img{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
        object-fit: cover;
    -o-object-position: center;
        object-position: center;
}

._m .se03 .h-grid .grid .col:nth-of-type(1) {
    transform: translate3d(-70%, -320%, -1000px) rotateX(340deg);
    opacity: 1;
}
._m .se03 .h-grid .grid .col:nth-of-type(2) {
    transform: translate3d(-250%, -125%, -500px) rotateX(340deg);
    opacity: 1;
}
._m .se03 .h-grid .grid .col:nth-of-type(3) {
    transform: translate3d(-120%, -147%, -300px) rotateX(333deg);
    opacity: 1;
}
._m .se03 .h-grid .grid .col:nth-of-type(4) {
    transform: translate3d(-165%, 300%, -3000px);
    opacity: 1;
}
._m .se03 .h-grid .grid .col:nth-of-type(5) {
    transform: translate3d(-160%, 440%, -5000px);
    opacity: 1;
}
._m .se03 .h-grid .grid .col:nth-of-type(6) {
    transform: translate3d(-190%, -60%, -5000px);
    opacity: 1;
}
._m .se03 .h-grid .grid .col:nth-of-type(7) {
    transform: translate3d(140%, 90%, -3400px);
    opacity: 1;
}
._m .se03 .h-grid .grid .col:nth-of-type(8) {
    transform: translate3d(190%, -450%, -3000px);
    opacity: 1;
}
._m .se03 .h-grid .grid .col:nth-of-type(9) {
    transform: translate3d(230%, -103%, -4200px);
    opacity: 1;
}
._m .se03 .h-grid .grid .col:nth-of-type(10) {
    transform: translate3d(20%, -300%, -300px) rotateX(345deg);
    opacity: 1;
}
._m .se03 .h-grid .grid .col:nth-of-type(11) {
    transform: translate3d(-45%, 45%, -1000px) rotateX(330deg);
    opacity: 1;
}
._m .se03 .h-grid .grid .col:nth-of-type(12) {
    transform: translate3d(340%, -10%, -1550px) rotateX(350deg);
    opacity: 1;
}
._m .se03 .h-grid .grid .col:nth-of-type(13) {
    transform: translate3d(112%, 45%, -1000px) rotateX(330deg);
    opacity: 1;
}

@media screen and (max-width: 1280px){
    ._m .se03 .tbx dd{ margin-top: 30px; }
    ._m .se03 .h-grid .grid .col{ border-radius: 22px; }
}

@media screen and (max-width: 1024px){
    ._m .se03 .h-grid .grid .col{ border-radius: 12px; }
}

@media screen and (max-width: 820px){
    ._m .se03 .tbx dt{ font-size: 14vw; }
    ._m .se03 .tbx dd{ font-size: 14px; margin-top: 20px; }
    ._m .se03 .h-grid .grid .col{ border-radius: 10px; }
}

@media screen and (max-width: 500px){
    ._m .se03 .h-grid .grid .col{ border-radius: 3px; }
}