.mc1 {
    width: 100%;
    height: calc(min(100vw, 100vh) * 0.7);
    /* background-color: #4e69a8; */
    background-color: #1B1B1E;
    position: relative;
    z-index: 100;
    overflow: hidden;
    font-family: "smart-ui";
}

.mc1-content1 {
    position: absolute;
    z-index: 110;
    width: min(70vw, 70vh);
    height: calc(min(7vw, 7vh) * 1.5);
    left: calc((100vw - min(70vw, 70vh)) / 8);
    top: min(20vw, 20vh);
}

.mc1-content1 .mc1-content1-text {
    position: relative;
    z-index: 111;
    top: calc(min(7vw, 7vh) / 4);
    left: 0;
    font-size: min(7vw, 7vh);
    text-align: center;
}

.mc1-content2 {
    position: absolute;
    z-index: 110;
    width: min(70vw, 70vh);
    height: calc(min(7vw, 7vh) * 1.5);
    left: calc((100vw - min(70vw, 70vh)) / 2);
    top: min(35vw, 35vh);
}

.mc1-content2 .mc1-content2-text {
    position: relative;
    z-index: 111;
    top: calc(min(7vw, 7vh) / 4);
    left: 0;
    font-size: min(7vw, 7vh);
    text-align: center;
}

.mc1-contents-outline {
    position: absolute;
    z-index: 110;
    width: min(70vw, 70vh);
    height: calc(min(7vw, 7vh) * 1.5);
    left: calc((100vw - min(70vw, 70vh)) / 8);
    top: min(20vw, 20vh);
    border-style: solid;
    border-color: white;
    border-width: min(0.3vw, 0.3vh);
    animation: mc1-box-moving 12s ease-in-out infinite 0s alternate both;
    -webkit-animation: mc1-box-moving 12s ease-in-out infinite 0s alternate both;
}

.mc1-chapters-box {
    position: absolute;
    z-index: 110;
    width: min(75vw, 75vh);
    left: calc((100vw - min(75vw, 75vh)) / 2);
    top: min(55vw, 55vh);
}

.mc1-chapters-box .mc1-chapters-text {
    position: relative;
    z-index: 111;
    top: 0;
    left: 0;
    font-size: min(3vw, 3vh);
    text-align: center;
    word-break: break-all;
}

.mc1-triangle {
    pointer-events: none;
}

.tri1 {
    position: absolute;
    z-index: 102;
    width: min(13vw, 13vh);
    top: 0;
    left: min(5vw, 5vh);
    animation: tri-falling 5s linear infinite 1s both;
    -webkit-animation: tri-falling 5s linear infinite 1s both;
}

.tri2 {
    position: absolute;
    z-index: 102;
    width: min(13vw, 13vh);
    top: 0;
    left: calc(100% - min(13vw, 13vh) - min(5vw, 5vh));
    animation: tri-falling 5s linear infinite 0s both;
    -webkit-animation: tri-falling 5s linear infinite 0s both;
}

@keyframes tri-falling {
    from {
        transform: translateY(calc(-1 * min(13vw, 13vh))) rotateZ(0deg);
        -webkit-transform: translateY(calc(-1 * min(13vw, 13vh))) rotateZ(0deg);
        -moz-transform: translateY(calc(-1 * min(13vw, 13vh))) rotateZ(0deg);
        -ms-transform: translateY(calc(-1 * min(13vw, 13vh))) rotateZ(0deg);
        -o-transform: translateY(calc(-1 * min(13vw, 13vh))) rotateZ(0deg);
}

    to {
        transform: translateY(calc(min(100vw, 100vh) * 0.7)) rotateZ(360deg);
        -webkit-transform: translateY(calc(min(100vw, 100vh) * 0.7)) rotateZ(360deg);
        -moz-transform: translateY(calc(min(100vw, 100vh) * 0.7)) rotateZ(360deg);
        -ms-transform: translateY(calc(min(100vw, 100vh) * 0.7)) rotateZ(360deg);
        -o-transform: translateY(calc(min(100vw, 100vh) * 0.7)) rotateZ(360deg);
    }
}

@keyframes mc1-box-moving {
    0% {
        transform: translateX(0) translateY(0);
        opacity: 1;
        -webkit-transform: translateX(0) translateY(0);
        -moz-transform: translateX(0) translateY(0);
        -ms-transform: translateX(0) translateY(0);
        -o-transform: translateX(0) translateY(0);
}

    47% {
        opacity: 1;
    }

    48% {
        transform: translateX(0) translateY(0);
        opacity: .3;
        -webkit-transform: translateX(0) translateY(0);
        -moz-transform: translateX(0) translateY(0);
        -ms-transform: translateX(0) translateY(0);
        -o-transform: translateX(0) translateY(0);
}    

    57% {
        transform: translateX(calc((100vw - min(70vw, 70vh)) / 2 - (100vw - min(70vw, 70vh)) / 8)) translateY(calc(min(35vw, 35vh) - min(20vw, 20vh)));
        opacity: .3;
        -webkit-transform: translateX(calc((100vw - min(70vw, 70vh)) / 2 - (100vw - min(70vw, 70vh)) / 8)) translateY(calc(min(35vw, 35vh) - min(20vw, 20vh)));
        -moz-transform: translateX(calc((100vw - min(70vw, 70vh)) / 2 - (100vw - min(70vw, 70vh)) / 8)) translateY(calc(min(35vw, 35vh) - min(20vw, 20vh)));
        -ms-transform: translateX(calc((100vw - min(70vw, 70vh)) / 2 - (100vw - min(70vw, 70vh)) / 8)) translateY(calc(min(35vw, 35vh) - min(20vw, 20vh)));
        -o-transform: translateX(calc((100vw - min(70vw, 70vh)) / 2 - (100vw - min(70vw, 70vh)) / 8)) translateY(calc(min(35vw, 35vh) - min(20vw, 20vh)));
}

    58% {
        opacity: 1;
    }

    100% {
        transform: translateX(calc((100vw - min(70vw, 70vh)) / 2 - (100vw - min(70vw, 70vh)) / 8)) translateY(calc(min(35vw, 35vh) - min(20vw, 20vh)));
        opacity: 1;
        -webkit-transform: translateX(calc((100vw - min(70vw, 70vh)) / 2 - (100vw - min(70vw, 70vh)) / 8)) translateY(calc(min(35vw, 35vh) - min(20vw, 20vh)));
        -moz-transform: translateX(calc((100vw - min(70vw, 70vh)) / 2 - (100vw - min(70vw, 70vh)) / 8)) translateY(calc(min(35vw, 35vh) - min(20vw, 20vh)));
        -ms-transform: translateX(calc((100vw - min(70vw, 70vh)) / 2 - (100vw - min(70vw, 70vh)) / 8)) translateY(calc(min(35vw, 35vh) - min(20vw, 20vh)));
        -o-transform: translateX(calc((100vw - min(70vw, 70vh)) / 2 - (100vw - min(70vw, 70vh)) / 8)) translateY(calc(min(35vw, 35vh) - min(20vw, 20vh)));
}
}