#intro{display: flex;justify-content: center;position : fixed;left : 0;top : 0;width : 100%;height : 100dvh;z-index: 10;background: #fff;overflow: hidden;z-index: 10000;}
.intro-bg{display: flex;justify-content: center;position : absolute;width : 100%;height : 100%;animation : intro-bg-scale 6s both ease-in-out 0s;overflow: hidden;background: #fff;}
@keyframes intro-bg-scale {
    0%{opacity: 0}
    50%{opacity: 1}
    100%{}
}
.intro-bg > img{width : 50%;height : 100%; object-fit : cover; position : absolute;bottom : 0;opacity: 0;}
@keyframes intro-bg {
    0%{opacity: 0;}
    100%{opacity: 0.7;}
}
@keyframes intro-up{
	0%{transform : translateY(50%)}
	100%{transform : translateY(0%)}
}
.intro-bg > img:nth-child(1){left : 0;animation : intro-bg 3s infinite alternate 0.5s, intro-up 8s both ease;}
.intro-bg > img:nth-child(2){left : 0;animation : intro-bg 2.5s infinite alternate, intro-up 8s both ease;}
.intro-bg > img:nth-child(3){right : 0;animation : intro-bg 3.5s infinite alternate 1s, intro-up 8s both ease;}
.intro-bg > img.intro-bg-img{width : 100%;height : 100%;animation : intro-up 4s both ease;object-fit: cover;position : absolute;bottom : 0;opacity: 1;}

.intro-inner{display: flex;align-items: center;justify-content: center; position : absolute;width : 100%;height : 100%;/* padding-bottom: 300px; */}
.intro-logo{width : 398px;position : absolute;opacity : 0;}
.intro-logo svg{width : 100%;}
/* .intro-logo path{stroke-width: 1px;stroke: #000; fill: none;stroke-dasharray: 0 50%;animation : intro-logo 2s both} */
/* @keyframes intro-logo {
    0%{stroke-dasharray: 0 50%;}
    100%{stroke-dasharray: 50% 0%;}
} */

.intro-video{position : absolute;width :100%;height : 100%;opacity: 0;}
.intro-video > video{width : 100%;height : 100%;object-fit: cover;object-position: center;}

.skip-btn{display: flex;align-items: center;justify-content: center;font-weight: 700;font-size: 18px; position : absolute;z-index: 10;color : #fff;background: #000;border-radius: 50%;width : 80px;height : 80px;cursor: pointer;transform: translateX(-50%) translateY(-50%) scale(0);transition : transform 1s;font-family: futura-pt;}
.skip-btn.on{transform: translateX(-50%) translateY(-50%) scale(1)}

.m_skip-btn{display: none;}

@media(max-width : 768px){
    .skip-btn{display: none;}
    .m_skip-btn{display: block; position : absolute;background: #000;color : #fff;font-family: futura-pt;letter-spacing: 0.04em;padding : 5px 15px;border-radius: 100px;bottom : 20px;right : 20px;font-size: 18px;}

    .intro-bg{}
    .intro-bg > img{display : none;}
    .intro-bg > img.intro-bg-img{display : block; opacity: 1;}

    .intro-inner{padding-bottom: 200px;}
    .intro-logo{width : 240px;}
}