.screen {
    height: 700px;
    width: calc(100% - 30px);
    max-width: 1200px;
    z-index: 101;
    background: #ffffffcf;
    top: 0px;
    left: 0px;
    position: relative;
    margin: 0 auto;
    z-index: 1;
    display: flex;
    align-items: center;
}
.screen .button.type1 {
    filter: unset;
    top: unset;
}
.screen .button.type2 {
    filter: unset;
    top: unset;
}
.screen .control {
    bottom: 0px;
}
.screen .control .dot.active {
    background-color: black
}
.body {
    margin: 0 auto;
    max-width: 1200px;
    width: calc(100% - 30px);
    text-align: center;
    padding-top: 40px;
    font-size: 16px;
}

@media screen and (max-width: 786px) {
    .screen .button {
        display: none;
    }
    .screen {
            height: 100vw;
    }
    .screen .control .dot {
        width: 2vw;
        height: 2vw;
    }
    .screen .control {
            bottom: -10px;
    }
}