#intro{width : 100%;height : 100%; overflow: hidden;background: #000;}

.intro-bg{display: flex;align-items: center;justify-content: center; width :100%;height : 100%;position : absolute;overflow: hidden;}
.intro-bg > video{width :100%;height : 100%; object-fit: cover;object-position: center; transform: scale(2) rotate(10deg); filter: blur(10px) brightness(5); opacity: 0;}
.intro-bg-light{position : absolute;mix-blend-mode:color-dodge;z-index: 1; filter: blur(10px); transform: scale(3) rotate(-15deg); opacity: 0;}

.intro-inner{position : absolute;width : 100%;height : 100%;z-index: 1;}

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

.intro-text-01{opacity: 1;transform: scale(10);filter: blur(10px) brightness(100); opacity: 0; position : absolute;}
.intro-light{position :absolute; transform-origin: center;}

.intro-text-01 .intro-light{bottom : -40%; left : 40%; transform: rotateZ(120deg); opacity: 0;}

.intro-text-02{opacity: 1;transform: scale(10);filter: blur(10px) brightness(100); opacity: 0; position : absolute;}
.intro-text-02 .intro-light{bottom : -40%; left : 25%; transform: rotateZ(120deg); opacity: 0;}

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

.intro-02-bg{display: flex;align-items: center;justify-content: center; position : absolute;width : 100%;height : 100%; clip-path: circle(350px at 50% 50%); mask-image : conic-gradient(#fff var(--angle), transparent 0%);}
@property --angle {
	syntax: "<angle>";
	initial-value:0deg;
	inherits: false;
}
.intro-bg-dot{display: flex;align-items: start;justify-content: center; width : 0px;height : 0px; background: #fff;border-radius: 50%;position : absolute;transform: rotate(45deg);}
.intro-bg-dot > span{position : absolute; content: '';width :1px;height : 80vw; background: #fff;clip-path: inset(0 0 100%);}

.intro-title-box{position : absolute;color : #fff; letter-spacing: -0.033em; transform: translateX(350px) translateY(-70px); white-space: nowrap;}

.intro-title-box > p{transition :color 1s, opacity 1s;}
.white .intro-title-box > p{color : #fff !important}
.hide .intro-title-box > p{opacity : 0 !important}

.intro-title-01{display: flex;align-items: end; gap : 24px; font-size: 30px; font-family: nanum myeongjo; font-weight: 400; position :relative; transform: translateX(100px);opacity: 0;}

.intro-title-01 > img{opacity: 0;transform: translateY(-50px);}
.intro-title-02{font-size: 58px; font-family: nanum myeongjo; font-weight: 700;transform: translateX(100px);opacity: 0;}
.intro-title-03{font-size: 30px; font-family: nanum myeongjo; font-weight: 400;position: relative;transform: translateX(100px);opacity: 0;}
.intro-title-03 > span{position : absolute;right : 100%; transform: translateX(100%);}

.intro-skip-btn{display: flex;align-items: center;justify-content: center; position : absolute; background: #fff;width : 78px; height : 78px; color : #06033C; font-family: futura-pt; font-weight: 600; right : 100px; bottom : 80px; z-index: 1;border-radius: 50%;}
.intro-skip-btn::after{position : absolute;content: '';width : 143px;height : 143px; background: url(/assets/images/intro/intro-rotate-text.png)no-repeat center / contain; animation : rotate-text 6s infinite linear}