@charset "UTF-8";
/* CSS Document */


/* ////////////////////////////////////////////////////////////////////////////////

 Bg

//////////////////////////////////////////////////////////////////////////////// */
.page .entry-title {
    display: none;
}
#mainBg {
    background: rgb(222, 138, 0);
    background: linear-gradient(35deg, rgba(222, 138, 0, 1) 10%, rgba(222, 51, 107, 1) 30%, rgba(97, 41, 141, 1) 60%, rgba(125, 174, 207, 1) 90%);
    position: fixed;
    background-size: 200% 200%;
    background-position: 0% 100%;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    animation: mainBg 6s linear 0s alternate infinite;
    z-index: -1;
}

@keyframes mainBg {
    0% {
        background-position: 0% 100%;
    }

    100% {
        background-position: 100% 0%;
    }
}

#mainBg::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-size: 400px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
    mix-blend-mode: color-dodge;
    pointer-events: none;
}

.triangle {
    position: absolute;
    aspect-ratio: 1 / 1;
}

.triangle01 {
    top: 0;
    left: 0;
    width: 28vw;
    background: rgb(97,41,141);
    background: linear-gradient(230deg, rgba(97,41,141,1) 40%, rgba(222,51,107,1) 90%, rgba(233,85,32,1) 100%);    background-size: 200% 200%;
    background-position: 0% 100%;
    clip-path: polygon(0 0, 0% 100%, 100% 0);
    z-index: 10;

    animation: triangle01 8s linear 0s infinite;
}

@keyframes triangle01 {
    0% {
        background-position: 0% 100%;
    }

    100% {
        background-position: 100% 0%;
    }
}

@keyframes triangle02 {
    0% {
        background-position: 100% 0%;
    }

    100% {
        background-position: 0% 100%;
    }
}

@keyframes triangle03 {
    0% {
        background-position: 0% 100%;
    }

    100% {
        background-position: 0% 0%;
    }
}

.triangle02 {
    top: 0;
    left: 0;
    width: 56vw;
    /*  background-image: linear-gradient(220deg, rgba(237,109,25,1) 25%, rgba(237,165,136,1) 36%, rgba(0,172,235,1) 46%, rgba(44,65,152,1) 80%);*/

    background: rgb(97,41,141);
    background: linear-gradient(35deg, rgba(125,174,207,1) 30%, rgba(125,174,207,1) 40%, rgba(97,41,141,1) 80%);
    background-size: 200% 200%;
    background-position: 0% 100%;
    clip-path: polygon(0 0, 0% 100%, 100% 0);
    z-index: 2;

    animation: triangle01 5s linear 0s infinite;
}

.triangle03 {
    top: 22vw;
    left: 0;
    width: 34vw;
    /*  background-image: linear-gradient(220deg, rgba(240,131,0,1) 50%, rgba(243,165,139,1) 60%, rgba(0,121,195,1) 80%);*/

    background: rgb(97,41,141);
    background: linear-gradient(230deg, rgba(97,41,141,1) 70%, rgba(198,97,253,1) 95%, rgba(198,97,253,1) 100%);    background-size: 200% 200%;
    background-position: 100% 0%;
    clip-path: polygon(0 0, 0% 100%, 50% 50%);
    z-index: 3;

    animation: triangle02 5s linear 0s infinite;
}

.triangle04 {
    top: 5vw;
    right: 0;
    width: 100vw;
    aspect-ratio: 1 / 2;
     /* background-image: linear-gradient(0deg, rgba(240,131,0,1) 20%, rgba(0,146,216,1) 64%, rgba(0,91,172,1) 80%); */

    background: rgb(97,41,141);
    background: linear-gradient(190deg, rgba(97,41,141,1) 25%, rgba(109,48,154,1) 48%, rgba(198,97,253,1) 84%, rgba(222,138,0,1) 96%);    background-size: 100% 200%;
    background-position: 0% 100%;
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
    mix-blend-mode: overlay;

    animation: triangle03 5s linear 0s infinite;
}

.triangle05 {
    top: 55vw;
    right: 0vw;
    width: 100vw;
    background: rgb(222,51,107);
    background: linear-gradient(360deg, rgba(222,51,107,1) 10%, rgba(93,143,192,1) 40%, rgba(123,58,150,1) 90%);    background-position: 0% 100%;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    animation: triangle03 8s linear 0s infinite;
}



.sphere {
    position: absolute;
    border-radius: 50%;
    overflow: hidden;
}

.sphere::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.1;
}

.sphere01 {
    background: rgb(123,58,150);
    background: linear-gradient(180deg, rgba(123,58,150,1) 41%, rgba(222,51,107,1) 85%);
    top: 20vw;
    right: -5vw;
    width: 52vw;
    height: 52vw;
    z-index: 5;
}

.sphere01::after {
    background: url("https://www.summersonicbkk.com/wp-content/uploads/2025/03/bg_sphere01.png") no-repeat center center;
    background-size: cover;
}

.sphere02 {
    background: rgb(222,51,107);
    background: linear-gradient(320deg, rgba(222,51,107,1) 30%, rgba(93,143,192,1) 60%, rgba(123,58,150,1) 70%);    z-index: 24;
    top: 15vw;
    left: 2vw;
    width: 30vw;
    height: 30vw;
    z-index: 24;
}

.sphere02::after {
    background: url("https://www.summersonicbkk.com/wp-content/uploads/2025/03/bg_sphere02.png") no-repeat center center;
    background-size: cover;
}




.ellipse {
    position: absolute;
}

.ellipse>div {
    aspect-ratio: 1 / 1;
    clip-path: ellipse(16% 50% at 50% 50%);
}

.ellipse01 {
    top: 1vw;
    left: 25vw;
    z-index: 20;
}

.ellipse01>div {
    width: 30vw;
    transform: rotate(70deg);
}




.sun {
    position: absolute;
    top: 4vw;
    right: 20vw;
    z-index: 10;
}

/*.sun>div {*/
/*    width: 14vw;*/
/*    aspect-ratio: 1 / 1;*/
/*    background: url("../images/bg_sun.svg") no-repeat center center;*/
/*    background-size: contain;*/
/*    animation: sun 20s linear 0s infinite;*/
/*}*/

@keyframes sun {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.star {
    position: absolute;
    background: url("https://www.summersonicbkk.com/wp-content/uploads/2025/03/Jula.png") no-repeat center center;
    background-size: contain;
    aspect-ratio: 1 / 1;
}

.star01 {
    top: 4vw;
    left: 45vw;
    width: 3vw;
    z-index: 12;
}

.star02 {
    top: 10vw;
    left: 3vw;
    width: 2vw;
    z-index: 12;
}


/*.moon {*/
/*    position: absolute;*/
/*    background: url("../images/bg_moon.svg") no-repeat center center;*/
/*    background-size: contain;*/
/*    aspect-ratio: 1 / 1;*/
/*    top: 14vw;*/
/*    left: 3vw;*/
/*    width: 8vw;*/
/*    z-index: 12;*/
/*}*/


.cloud {
    position: absolute;
    z-index: 10;
}

/*.cloud01 {*/
/*    top: 26vw;*/
/*    right: 25vw;*/
/*    width: 24vw;*/
/*    aspect-ratio: 100/18.67;*/
/*    background: url("../images/bg_cloud01.svg") no-repeat center center;*/
/*    z-index: 20;*/
/*}*/

/*.cloud02 {*/
/*    top: 46vw;*/
/*    left: -5vw;*/
/*    width: 40vw;*/
/*    aspect-ratio: 100/18.67;*/
/*    background: url("../images/bg_cloud02.svg") no-repeat center center;*/
/*    z-index: 25;*/
/*}*/

@media screen and (min-width: 821px) {}

@media screen and (max-width: 820px) {

    .triangle01 {
        width: 64vw;
    }

    .triangle02 {
        width: 116vw;
    }

    .triangle03 {
        top: 42vw;
        width: 74vw;
    }

    .triangle04 {
        top: 95vw;
    }

    .triangle05 {
        top: 145vw;
        right: -20vw;
        width: 140vw;
    }

    .sphere01 {
        top: 120vw;
        right: -25vw;
        width: 82vw;
        height: 82vw;
    }

    .sphere02 {
        top: 35vw;
        left: 2vw;
        width: 66vw;
        height: 66vw;
    }

    .sphere03 {
        top: -4vw;
        left: 27vw;
        width: 18vw;
        height: 18vw;
    }

    .ellipse01 {
        top: 20vw;
        left: 16vw;
    }

    .ellipse01>div {
        width: 42vw;
    }

    .ellipse02 {
        top: 35vw;
        left: 26vw;
    }

    .ellipse02>div {
        width: 28vw;
    }

    .sun {
        top: 26vw;
        right: 10vw;
    }

    .sun>div {
        width: 26vw;
    }

    .star01 {
        top: 6vw;
        left: 61vw;
        width: 7vw;
    }

    .star02 {
        top: 10vw;
        left: 5vw;
        width: 5vw;
    }

    .moon {
        top: 20vw;
        left: 8vw;
        width: 13vw;
    }

    .cloud01 {
        top: 56vw;
        right: 6vw;
        width: 34vw;
    }

    .cloud02 {
        top: 110vw;
        left: -5vw;
        width: 60vw;
    }

    .cloud03 {
        top: 196vw;
        right: -35vw;
        width: 100vw;
    }

}