body::after {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    z-index: -1;
    content: url(../image/open/intro_img_01.png) url(../image/open/intro_img_02.png) url(../image/open/intro_img_03.png) url(../image/open/intro_img_04.png) url(../image/open/intro_img_05.png) url(../image/open/intro_img_06.png);
}

.intro_wrap {
    width: 100%;
    height: 100%;
    position: relative;
    top: 0%;
    left: 0%;
    background: url('../image/open/intro_bg.png') no-repeat;
    background-size: cover;
    z-index: 999999;
}

.intro_img {
    width: 458px;
    height: 453px;
    position: relative;
    --intro_opacity: 0;
    --intro_width: 458px;
    --intro_height: 453px;
}

.intro_img::after {
    content: "";
    width: var(--intro_width);
    height: var(--intro_height);
    opacity: var(--intro_opacity);
    position: absolute;
    top: 50%;
    left: 50%;
    background: url(../image/open/visu_bg.png) no-repeat;
    background-size: 100vw 100vh;
    background-position: center;
    transform: translate(-50%, -50%);
    z-index: -1;
}

.intro_img>div {
    width: 222px;
    height: 423px;
    position: absolute;
    transition: background-image .3s ease-in-out;
}

.intro_img>div:nth-child(1) {
    bottom: 0;
    left: 0;
    clip-path: inset(0 0 0 100%);
}

.intro_img>div:nth-child(2) {
    top: 0;
    right: 0;
    clip-path: inset(0 100% 0 0);
}

.intro_txt_wrap {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.intro_txt_wrap img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    max-width: none;
    width: auto;
    height: auto;
}

/* ensure white image overlays black image */
.intro_txt_wrap img:first-child {
    z-index: 2;
}

.intro_txt_wrap img:last-child {
    z-index: 3;
    display: none;
}

.intro_content_wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.intro_content_txt {
    opacity: 0%;
    height: 95px;
}

.intro_content_txt img {
    max-height: 100%;
}

.skip_button {
    top: -200px;
    left: -200px;
    position: fixed;
    width: 73px;
    height: 73px;
    background-image: url('../image/open/intro_skip.png');
    cursor: pointer;
    z-index: 10000;
    pointer-events: auto;
    transition: all 0.1s ease;
    user-select: none;
}