/* intro */
.intro-wrap {position: fixed;display: block;width: 100vw;height: 100vh;z-index: -1;}
.intro-wrap .introt {position: relative;display: flex;flex-direction: column;justify-content: center;align-items: center;z-index: 1;height: 100%;}
.intro-wrap .introt p {font-weight: 700;}
.intro-wrap .introt .mask_box {width: 0px;height: 1px;background-color: var(--primary-color);margin: 0 auto;}
.intro-wrap .whbg {position: absolute;top: 0;left: 0;right: 0;bottom: 0;width: 100%;height: 100%;background: #fff;z-index: 0;}
.intro-wrap.on .introt .mask_box {background-color: #fff;opacity: 0;transition: width 2s , background .1s 1.9s, opacity .1s 1.9s;}

.intro-mask-wrap {position: fixed;top: 0;left: 0;width: 100%;height: 100%;}
.intro-mask {position: fixed;display: block;top: 0;left: 0;width: 100%;height: 100%;}
#introMask rect {position: fixed;top: 0;left: 0;}
.intro-mask-wrap ~ * {-webkit-clip-path: url(#introMask);clip-path: url(#introMask);}
/* //intro */