.intro-bg{position : absolute;width :100%;height : 100vh; height : 100dvh; left : 0;top : 0;z-index: 0;}
.intro-bg > video{width : 100%;height : 100%;object-fit: cover;object-position: center;}

.intro{display: flex;justify-content: center; position : fixed;width : 100%;height : 100%;left : 0;top : 0;z-index: 10000;}
.intro1{display: flex;align-items: center;justify-content: center; position: absolute;padding-bottom: 100px;width : 100%;height : 100%;top : 0;left : 0;}
.intro1-desc{font-size: 40px; color : #fff; font-weight: 300;}
.intro1-desc .char{opacity: 0;}
.intro1-desc-01 .char{transform: translateY(-50px);}
.intro1-desc-02 .char{transform: translateY(50px);}
.intro1-line{width : 269px;background: #FFFFFF;height : 1px;opacity: .5;margin : 0 28px; clip-path: inset(0 100%);}

.intro1-desc-01{transform: translateX(150%);}

.intro2{display: flex;align-items: center;justify-content: center; position : absolute;width : 100%;height : 100%;;}

.watch-box{display: flex;align-items: center;justify-content: center; transform: rotateX(-80deg)}
.watch-bg{transform: rotate(0deg) scale(0);}
.watch-dot{position : absolute;width : 1px;height : 1px; background: red;z-index: 1;}
.watch-line{position : absolute;height : 300vw;width : 2px; background: #fff;bottom : 0;clip-path: inset(0% 0% 100% 0%);}

.watch-year{display: flex;justify-content: center;align-items: center;  position : absolute;width : 120%;height : 120%;
        mask-image : conic-gradient(
        #fff var(--angle), transparent 0%
    );left : 50%;top : 50%;transform: translateX(-50%) translateY(-50%);
}
@property --angle {
	syntax: "<angle>";
	initial-value:0deg;
	inherits: false;
}

.watch-year > span{font-size: 40px;font-family: futura-pt;color : #fff;position : absolute;opacity: 0.5;}
.watch-year > span:nth-of-type(1){top: 2%;}
.watch-year > span:nth-of-type(2){right: 0; transform: rotate(90deg);}
.watch-year > span:nth-of-type(3){bottom : 2%;}
.watch-year > span:nth-of-type(4){left : 0; transform: rotate(-90deg);}
.watch-year > span.on{opacity: 1;}

.watch-inner{display: flex;flex-direction: column; align-items: center;justify-content: center; position : absolute;left : 0;top : 0;width : 100%;height : 100%;}

.watch-logo-01{transform: translateY(300%);opacity: 0;margin-bottom: 30px;}
.visual-copy{opacity: 0;transform: translateY(50px);}
.watch-logo-02{transform: translateY(50px);opacity: 0;margin-top: 45px;}

.intro-skip{display: flex;align-items: center;justify-content: center; width : 84px;height : 84px; font-family: italiana;font-size: 24px; color : #87775E; background: #fff;/* border : 1px solid #707070; */ border-radius: 50%;position : fixed;transform : translateX(-50%) translateY(-50%)}