html,
body,
p,
ol,
ul,
li,
dl,
dt,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
blockquote,
figure,
figcaption {
    margin: 0;
    padding: 0
}

body {
    overflow-x: hidden;
    background-color: #090a0c;
}
#megaview {
    overflow: hidden;

     .time_8s {
        transition: all 0.8s ease;
    }

    .active .translateY {
        transform: translateY(0);
        opacity: 1;
    }

    .translateY {
        transform: translateY(3.90625vw);
        opacity: 0;
    }

    .active .translate_X,
    .active .translateX {
        transform: translateX(0);
        opacity: 1;
    }

    .translate_X {
        transform: translateX(-3.90625vw);
        opacity: 0;
    }

    .translateX {
        transform: translateX(3.90625vw);
        opacity: 0;
    }
}
#megaview .section {
    position: relative;
}

#megaview .white {
    color: #ffffff;
}

#megaview .grey {
    color: #CCCCCC;
}

.ft-30 {
    font-size: 1.1719vw;
    font-weight: 600;
    line-height: 100%;
}

.f-30 {
    font-size: 1.1719vw;
    font-weight: 400;
    line-height: 100%;
}

.ft-72 {
    font-size: 2.8125vw;
    font-weight: 600;
    line-height: 100%;
}

@media screen and (min-width: 1081px) {
    #megaview {
        img {
            width: 100%;
        }

        .mob {
            display: none;
        }

        .screen1 {

            p {
                font-size: 1.0156vw;
                font-weight: 400;
                line-height: 100%;
                text-align: center;
                color: #8B9392;
            }

            .top {
                display: flex;
                flex-direction: column;
                gap: 1.1719vw;
                align-items: center;
                padding: 4.6875vw 0 0 0;
                position: absolute;
                z-index: 3;
                top: 0;
                left: 0;
                right: 0;

                .title {
                    width: 42.5vw;
                    height: 4.7656vw;
                }

                .list {
                    display: flex;
                    flex-direction: row;
                    gap: 3.9453vw;

                    .t2::before {
                        content: '';
                        position: absolute;
                        height: 1.5625vw;
                        width: .0391vw;
                        background-color: #8B9392;
                        top: .4297vw;
                        left: -1.9531vw;
                    }

                    .t2 {
                        position: relative;
                    }

                    .t2::after {
                        content: '';
                        position: absolute;
                        height: 1.5625vw;
                        width: .0391vw;
                        background-color: #8B9392;
                        top: .4297vw;
                        right: -1.9531vw;
                    }
                }
            }



        }

        .screen2 {
            display: flex;
            flex-direction: column;
            gap: .8594vw;
            padding-bottom: 8.5938vw;
            p {
                text-align: center;
            }

            .top {
                display: flex;
                flex-direction: row;
                gap: 1.25vw;
                justify-content: center;

                .box1 {
                    width: 34.1406vw;
                    height: 20.4688vw;
                    background-image: url('https://d13pvy8xd75yde.cloudfront.net/global/accessories/megaview-gt/img/2-bg1.png');
                    background-size: contain;
                    background-repeat: no-repeat;
                    position: relative;

                    .title {
                        width: 21.7188vw;
                        position: absolute;
                        left: 0;
                        right: 0;
                        margin: auto;
                        padding-top: 1.9531vw;
                    }

                    .pc {
                        display: initial !important;
                    }
                }

                .box2 {
                    width: 34.1406vw;
                    height: 20.4688vw;
                    background-image: url('https://d13pvy8xd75yde.cloudfront.net/global/accessories/megaview-gt/img/2bg-2.png');
                    background-size: cover;
                    background-repeat: no-repeat;
                    position: relative;
                    overflow: hidden;


                    p {
                        position: absolute;
                        left: 0;
                        right: 0;
                        font-size: 1.5625vw;
                        font-weight: 600;
                        text-align: center;
                        margin-top: 1.9531vw;

                    }
                }
            }

            .bottom {
                display: flex;
                flex-direction: row;
                gap: .9375vw;
                justify-content: center;

                .left {
                    display: flex;
                    flex-direction: row;
                    gap: .9375vw;

                    .box1 {
                        width: 16.875vw;
                        height: 12.8906vw;
                        background-image: url('https://d13pvy8xd75yde.cloudfront.net/global/accessories/megaview-gt/img/2-bg-3.png');
                        background-size: cover;
                        background-repeat: no-repeat;
                        position: relative;
                        overflow: hidden;

                        .t1 {
                            margin-top: .7813vw;
                        }

                        .t2 {
                            font-weight: 400;
                            position: absolute;
                            left: 3.6328vw;
                            top: 8.3594vw;
                        }

                        .t3 {
                            font-weight: 400;
                            position: absolute;
                            left: 10.7422vw;
                            top: 8.3594vw;
                        }
                    }

                    .box2 {
                        width: 16.4844vw;
                        height: 12.8906vw;
                        background-image: url('https://d13pvy8xd75yde.cloudfront.net/global/accessories/megaview-gt/img/2-bg4.png');
                        background-size: cover;
                        background-repeat: no-repeat;
                        position: relative;

                        p {
                            margin-top: .7813vw;
                        }
                    }
                }

                .right {
                    display: flex;
                    flex-direction: row;
                    gap: .9375vw;

                    .box1 {
                        width: 16.4844vw;
                        height: 12.8906vw;
                        background-image: url('https://d13pvy8xd75yde.cloudfront.net/global/accessories/megaview-gt/img/2-bg5.png');
                        background-size: cover;
                        background-repeat: no-repeat;
                        position: relative;

                        p {
                            margin-top: .7813vw;
                        }
                    }

                    .box2 {
                        width: 16.875vw;
                        height: 12.8906vw;
                        background-image: url('https://d13pvy8xd75yde.cloudfront.net/global/accessories/megaview-gt/img/2-bg6.png');
                        background-size: cover;
                        background-repeat: no-repeat;
                        position: relative;

                        p {
                            margin-top: .7813vw;
                        }
                    }
                }
            }

            .i1 {
                width: 3.5938vw;
                height: 1.8164vw;
                position: absolute;
                top: 18.6523vw;
                left: 47.7031vw;
            }

            .i2 {
                width: 1.6016vw;
                height: 1.6016vw;
                position: absolute;
                left: 14.6344vw;
                top: 32.5969vw;
            }

            .i3 {
                width: 1.6016vw;
                height: 1.6016vw;
                position: absolute;
                right: 14.6344vw;
                top: 32.5969vw;
            }
        }

        .screen3 {

            .top {
                display: flex;
                flex-direction: column;
                gap: 1.5625vw;

                p {
                    text-align: center;
                }
            }

            .bottom {
                margin-top: 3.9063vw;
                display: flex;
                flex-direction: row;
                gap: 21.4844vw;
                justify-content: center;

                p {
                    font-size: 3.5156vw;
                    font-weight: 600;
                    background: linear-gradient(70.17deg, #4C3B92 0.93%, #ED3B4B 100%);
                    -webkit-text-fill-color: transparent;
                    background-clip: text;
                }
            }
        }

        .screen4 {
            padding-bottom: 6.5625vw;
            .top {
                display: flex;
                flex-direction: column;
                gap: 1.5625vw;

                p {
                    text-align: center;
                }
            }

            img {
                width: 77.1484vw;
                height: 45.2734vw;
                margin: auto;
                margin-top: 6.5625vw;
            }

            .list {
                position: absolute;
                left: 0;
                right: 0;
                top: 41.7344vw;
                display: flex;
                flex-direction: row;
                gap: 56.3281vw;
                justify-content: center;

                p {
                    font-size: 2.8125vw;
                    font-weight: 400;
                }
            }
        }

        .screen5 {
                padding-bottom: 6.6406vw;  
            .top {
                display: flex;
                flex-direction: column;
                gap: 1.1719vw;
                position: absolute;
                top: 17.1875vw;
                left: 54.6484vw;
            }
        }

        .screen6 {

            .top {
                display: flex;
                flex-direction: column;
                gap: 1.1719vw;
                position: absolute;
                top: 32.3828vw;
                left: 15.2344vw;
            }

            img {
                width: 71.2109vw;
                height: 67.2266vw;
                margin-left: 28.7891vw;
            }
        }

        .screen7 {
            .top {
                display: flex;
                flex-direction: column;
                gap: 1.1719vw;

                p {
                    text-align: center;
                }
            }
        }
    }
}

@media screen and (max-width: 1080px) {
    #megaview {
        .pc {
            display: none;
        }

        img {
            width: 100%;
        }
        .ft-30{
            font-size: 2.963vw;
            font-weight: 600;
            line-height: 100%;
        }
        .f-30{
            font-size: 2.5926vw;
            font-weight: 400;
            line-height: 100%;
        }
        .ft-72{
            font-weight: 600;
            font-size: 5.5556vw;
            line-height: 100%;
        }
        .screen1 {

            p {
                font-size: 2.4074vw;
                font-weight: 400;
                line-height: 100%;
                text-align: center;
                color: #8B9392;
            }

            .top {
                display: flex;
                flex-direction: column;
                gap: 1.1719vw;
                align-items: center;
                padding: 11.1111vw 0 0 0;
                position: absolute;
                z-index: 3;
                top: 0;
                left: 0;
                right: 0;

                .title {
                    width: 80vw;
                    height: 8.8889vw;
                }

                .list {
                    display: flex;
                    flex-direction: row;
                    gap: 9.3519vw;

                    .t2::before {
                        content: '';
                        position: absolute;
                        height: 3.7037vw;
                        width: .0926vw;
                        background-color: #8B9392;
                        top: .4297vw;
                        left: -4.6296vw;
                    }

                    .t2 {
                        position: relative;
                    }

                    .t2::after {
                        content: '';
                        position: absolute;
                        height: 3.7037vw;
                        width: .0926vw;
                        background-color: #8B9392;
                        top: .4297vw;
                        right: -4.6296vw;
                    }
                }
            }
        }

        .screen2 {
            display: flex;
            flex-direction: column;
            gap: 1.8519vw;
            padding-bottom: 25.9259vw;
            .top {
                display: flex;
                flex-direction: row;
                gap: 1.8519vw;
                justify-content: center;

                .box1 {
                    width: 43.5185vw;
                    height: 42.963vw;
                    background-image: url('https://d13pvy8xd75yde.cloudfront.net/global/accessories/megaview-gt/img/2-bg-1m.png');
                    background-size: cover;
                    background-repeat: no-repeat;
                    position: relative;

                    img {
                        width: 32.5926vw;
                        height: 3.5185vw;
                        position: absolute;
                        left: 0;
                        right: 0;
                        margin: auto;
                        margin-top: 4.6296vw;
                    }
                }

                .box2 {
                    width: 43.5185vw;
                    height: 42.963vw;
                    background-image: url('https://d13pvy8xd75yde.cloudfront.net/global/accessories/megaview-gt/img/2-bg-2m.png');
                    background-size: cover;
                    background-repeat: no-repeat;

                    p {
                        text-align: center;
                        margin-top: 2.963vw;
                    }
                }
            }

            .bottom {
                display: flex;
                flex-direction: column;
                gap: 1.8519vw;

                .left {
                    display: flex;
                    flex-direction: row-reverse;
                    gap: 1.8519vw;
                    justify-content: center;

                    .box1 {
                        width: 43.5185vw;
                        height: 31.2037vw;
                        background-image: url('https://d13pvy8xd75yde.cloudfront.net/global/accessories/megaview-gt/img/2-bg-4m.png');
                        background-size: cover;
                        background-repeat: no-repeat;
                        position: relative;

                        .t1 {
                            text-align: center;
                            margin-top: 2.963vw;
                        }

                        .t2 {
                            font-size: 2.7778vw;
                            font-weight: 400;
                            position: absolute;
                            left: 6.2037vw;
                            top: 19.9074vw;
                        }

                        .t3 {
                            font-size: 2.7778vw;
                            font-weight: 400;
                            position: absolute;
                            left: 29.9074vw;
                            top: 19.9074vw;
                        }
                    }

                    .box2 {
                        width: 43.5185vw;
                        height: 31.2037vw;
                        background-image: url('https://d13pvy8xd75yde.cloudfront.net/global/accessories/megaview-gt/img/2-bg-3m.png');
                        background-size: cover;
                        background-repeat: no-repeat;

                        p {
                            text-align: center;
                            margin-top: 2.963vw;
                        }
                    }
                }

                .right {
                    display: flex;
                    flex-direction: row;
                    gap: 1.8519vw;
                    justify-content: center;
                    .box1 {
                        width: 43.5185vw;
                        height: 31.2037vw;
                        background-image: url('https://d13pvy8xd75yde.cloudfront.net/global/accessories/megaview-gt/img/2-bg-5m.png');
                        background-size: cover;
                        background-repeat: no-repeat;

                        p {
                            text-align: center;
                            margin-top: 2.963vw;
                        }
                    }

                    .box2 {
                        width: 43.5185vw;
                        height: 31.2037vw;
                        background-image: url('https://d13pvy8xd75yde.cloudfront.net/global/accessories/megaview-gt/img/2-bg-6m.png');
                        background-size: cover;
                        background-repeat: no-repeat;

                        p {
                            text-align: center;
                            margin-top: 2.963vw;
                        }
                    }
                }
            }
            .i1{
                width: 6.6667vw;
                height: 3.3333vw;
                position: absolute;
                left: 46.6667vw;
                top: 39.7852vw;
            }
            .i2{
                width: 2.8704vw;
                height: 2.8704vw;
                position: absolute;
                left: 5.5556vw;
                top: 106.0593vw;
            }
            .i3{
                width: 2.8704vw;
                height: 2.8704vw;
                position: absolute;
                right: 5.5556vw;
                top: 106.0593vw;
            }
        }
        .screen3{
            padding-bottom: 29.6296vw;
            .top{
                display: flex;
                flex-direction: column;
                gap: 3.7037vw;
                padding: 0 0 0 5.5556vw;
            }
            .bottom{
                padding: 5.5556vw;
                display: flex;
                flex-direction: row;
                gap: 22.037vw;
                  p {
                    font-size: 7.4074vw;
                    font-weight: 600;
                    background: linear-gradient(70.17deg, #4C3B92 0.93%, #ED3B4B 100%);
                    -webkit-text-fill-color: transparent;
                    background-clip: text;
                }
            }
        }
        .screen4{
            padding-bottom: 29.6296vw;
            .top{
                padding: 0 0 11.1111vw 5.5556vw;
                display: flex;
                flex-direction: column;
                gap: 3.7037vw;
            }
            img{
                width: 88.8315vw;
                margin: auto;
            }
            .list{
                position: absolute;
                left: 0;
                right: 0;
                top: 54.7222vw;
                display: flex;
                flex-direction: row;
                gap: 53.4259vw;
                justify-content: center;
                p{
                    font-size: 5.5556vw;
                    font-weight: 400;
                }
            }
        }
        .screen5,.screen6,.screen7{
            padding-bottom: 29.6296vw;
            .top{
                display: flex;
                flex-direction: column;
                gap: 3.7037vw;
                padding: 0 0 11.1111vw 5.5556vw;
            }
        }
    }
}