@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch&display=swap');

body {
    font-family: 'Chakra Petch', sans-serif;
    /* background-color: #F5F6F8; */
    background-color: antiquewhite;
}

.m-top {
    margin-top: 50px;
}

@media print {
    .hid {
        display: none;
        /* ซ่อน  */
    }
}

.bgMainNavbar {
    background-color: white;
}

.btnbell {
    padding-left: 15px;
    padding-right: 15px;
    text-decoration: none;
}

.bradeNoti {
    border: 2px solid white;
}

.AvatarProfile1 {
    width: 30px;
    height: 30px;
    object-fit: cover;
}

.AvatarProfile2 {
    width: 100px;
    height: 100px;
    object-fit: cover;
}

.borderRD15 {
    border-radius: 15px;
}

.mr-10 {
    margin-right: 10px;
}

.ml-10 {
    margin-left: 10px;
}

.t-al-l {
    text-align: left;
}

.t-al-r {
    text-align: right;
}

.t-al-c {
    text-align: center;
}

.tdcrtn {
    text-decoration: none;
}

.textLimit1 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    /* number of lines to show */
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.textLimit3 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    /* number of lines to show */
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.section {
    display: grid;
    justify-content: center;
    align-content: center;
}

@media (max-width: 768px) {
    .text-b {
        font-size: 12px;
    }

    .text-s {
        font-size: 6px;
    }
}

.imageLogo {
    width: 150px;
}

.bg-orange {
    background-color: #fa6000;
    background-image: linear-gradient(349deg, #fa6000 0%, #ff9b5b 100%);
}

.c-w {
    color: white;
}

.this_camera {
    border: 10px solid #16734720;
}

.navbar_color {
    background-color: #0093E9;
    background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);

}

img {
    width: 100%;
}

.card-glass {
    background-color: #142535;
    height: 100vh;
    -webkit-border-radius: 0px;
    border-radius: 0px;
}

/* CSS สำหรับเลขหน้า */
#currentPage,
#totalPages {
    color: white;
}

.number_page {
    position: absolute;
    bottom: 10px;
    width: 100%;
    background-color: #1425351c;
}

.card_game {
    width: 100%;
    background-size: cover;
    position: relative;
}

.card {
    display: flex;
    align-items: center;
    /* จัดกึ่งกลางในแนวตั้ง */
    justify-content: center;
    /* จัดกึ่งกลางในแนวนอน */
}

.card-body {
    width: 100%;
    height: 100%;
}

.floatingactionBTN {
    position: fixed;
    top: 10px;
    left: 10px;
    border-radius: 50px;
}

.offcanvas_book {
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.menu_home {
    color: white;
    text-decoration: none;
}

.menu_home_col {
    text-align: center;
    background-color: #FBADAF;
    border-radius: 15px;
}

.menu_home_col:hover {
    color: #d33f44;
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.image_top_1 {
    /* width: 170px; */
    /* height: 170px; */
    width: 15vw;
    height: 15vw;
    border-radius: 50%;
    object-fit: cover;
    align-items: center;
    /* border: 3px solid #8ED436; */
}

.image_top_sub_1 {
    /* width: 170px; */
    /* height: 170px; */
    width: 15vw;
    height: 15vw;
    border-radius: 50%;
    object-fit: cover;
    align-items: center;
    /* border: 3px solid #8ED436; */
}

.cardShow {
    display: flex;
    align-items: center;
    /* จัดกึ่งกลางในแนวตั้ง */
    justify-content: center;
    /* จัดกึ่งกลางในแนวนอน */
}

.col_image {
    display: flex;
    justify-content: center;
    align-items: center;
}

.image_top_1:hover {
    border: 4px solid #8ED436;
}

.fix_btn_1 {
    position: absolute;
    top: 70%;
    left: 65%;
}

.fix_btn_2 {
    position: absolute;
    top: 60%;
    left: 55%;
}

.fix_btn_3 {
    position: absolute;
    top: 45%;
    left: 20%;
    border-radius: 50%;
    margin: 0px;
    padding: 0px;
    border: 5px solid rgba(20, 255, 243, 0.731);
}

.fix_btn_4 {
    position: absolute;
    top: 80%;
    left: 90%;
}

.fix_btn_6001 {
    position: absolute;
    top: 85%;
    left: 90%;
}

.fix_btn_6002 {
    position: absolute;
    top: 85%;
    left: 85%;
}

.fix_btn_8001 {
    position: absolute;
    top: 63%;
    left: 11%;
}

.img_8001 {
    width: 18vw;
}

.img_8001:hover {
    border-radius: 15px;
    background-image: url("../image_1_sub/55001.gif");
    background-size: cover;
}

.fix_btn_8002 {
    position: absolute;
    top: 72%;
    left: 23%;
}

.img_8002 {
    width: 18vw;
}

.img_8002:hover {
    border-radius: 15px;
    background-image: url("../image_1_sub/55002.gif");
    background-size: cover;
}

.fix_btn_8003 {
    position: absolute;
    top: 66%;
    left: 56%;
}

.img_8003 {
    width: 18vw;
}

.img_8003:hover {
    border-radius: 15px;
    background-image: url("../image_1_sub/55003.gif");
    background-size: cover;
}

.fix_btn_8004 {
    position: absolute;
    top: 55%;
    left: 65%;
}

.img_8004 {
    width: 18vw;
}

.img_8004:hover {
    border-radius: 15px;
    background-image: url("../image_1_sub/55004.gif");
    background-size: cover;
}

.card_tt_8001 {
    position: absolute;
    top: 65%;
    left: 38%;
    width: max-content;
    box-shadow: 0 0 10px 5px rgba(0, 123, 255, 0.5);
}

.fix_btn_9001 {
    position: absolute;
    top: 51%;
    left: 15%;
}

.fix_btn_9002 {
    position: absolute;
    top: 51%;
    left: 25%;
}

.fix_btn_9003 {
    position: absolute;
    top: 63%;
    left: 15%;
}

.fix_btn_9004 {
    position: absolute;
    top: 63%;
    left: 25%;
}

.fix_btn_9005 {
    position: absolute;
    top: 74%;
    left: 15%;
}

.fix_btn_9006 {
    position: absolute;
    top: 74%;
    left: 25%;
}

/* game 10 */
.fix_btn_10001 {
    position: absolute;
    top: 40%;
    left: 7%;
}

.img_10001 {
    width: 7vw;
}

.text_10001 {
    position: absolute;
    top: 49%;
    left: 7%;
    background-color: #ffffff83;
}

.fix_btn_10002 {
    position: absolute;
    top: 43%;
    left: 21%;
}

.img_10002 {
    width: 9vw;
}

.text_10002 {
    position: absolute;
    top: 35%;
    left: 18%;
    background-color: #ffffff83;
}

.fix_btn_10003 {
    position: absolute;
    top: 40%;
    left: 37%;
}

.img_10003 {
    width: 9vw;
}

.text_10003 {
    position: absolute;
    top: 40%;
    left: 36%;
    background-color: #ffffff83;
}

.fix_btn_10004 {
    position: absolute;
    top: 40%;
    left: 54%;
}

.img_10004 {
    width: 8vw;
}

.text_10004 {
    position: absolute;
    top: 35%;
    left: 55%;
    background-color: #ffffff83;
}

.fix_btn_10005 {
    position: absolute;
    top: 43%;
    left: 70%;
}

.img_10005 {
    width: 10vw;
}

.text_10005 {
    position: absolute;
    top: 35%;
    left: 73%;
    background-color: #ffffff83;
}

.fix_btn_10006 {
    position: absolute;
    top: 63%;
    left: 71%;
}

.img_10006 {
    width: 9vw;
}

.text_10006 {
    position: absolute;
    top: 55%;
    left: 72%;
    background-color: #ffffff83;
}

.fix_btn_10007 {
    position: absolute;
    top: 60%;
    left: 54%;
}

.img_10007 {
    width: 9vw;
}

.text_10007 {
    position: absolute;
    top: 55%;
    left: 52%;
    background-color: #ffffff83;
}

.fix_btn_10008 {
    position: absolute;
    top: 63%;
    left: 37%;
}

.img_10008 {
    width: 9vw;
}

.text_10008 {
    position: absolute;
    top: 55%;
    left: 37%;
    background-color: #ffffff83;
}

.fix_btn_10009 {
    position: absolute;
    top: 58%;
    left: 21%;
}

.img_10009 {
    width: 9vw;
}

.text_10009 {
    position: absolute;
    top: 55%;
    left: 20%;
    background-color: #ffffff83;
}

.fix_btn_10010 {
    position: absolute;
    top: 83%;
    left: 20%;
}

.img_10010 {
    width: 10vw;
}

.text_10010 {
    position: absolute;
    top: 75%;
    left: 20%;
    background-color: #ffffff83;
}

.fix_btn_10011 {
    position: absolute;
    top: 80%;
    left: 40%;
}

.img_10011 {
    width: 5vw;
}

.text_10011 {
    position: absolute;
    top: 75%;
    left: 40%;
    background-color: #ffffff83;
}

.fix_btn_10012 {
    position: absolute;
    top: 83%;
    left: 56%;
}

.img_10012 {
    width: 9vw;
}

.text_10012 {
    position: absolute;
    top: 75%;
    left: 55%;
    background-color: #ffffff83;
}

/* game 10 */

.image-container {
    position: relative;
    /* display: inline-block; */
    margin-bottom: 0%;
}

.image-container img {
    /* display: block; */
    width: 15vw;
    height: 15vw;
    border-radius: 50%;
}

.image-container .caption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 5px;
    animation-name: slide-up;
    animation-duration: 1.5s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

@keyframes slide-up {
    0% {
        top: 50%;
        padding: 5px;
    }

    100% {
        top: 0%;
        padding: 5px;
    }
}

.iframe1001 {
    width: 100%;
    height: 100vw;
}

.iframe1002 {
    width: 100%;
    height: 315px;
}

.bottom-menu {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    background-color: #f1f1f1;
    overflow: hidden;
    transition: height 0.5s;
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.bottom-menu.active {
    height: 100px;
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.slideshow {
    position: relative;
    width: 100%;
    height: 100%;
}

.slideshow img {
    /* position: absolute; */
    /* top: 0; */
    /* left: 0; */
    width: 100px;
    height: 100%;
    object-fit: cover;
    /* opacity: 0; */
    /* transition: opacity 0.5s; */
}

.slideshow img.active {
    opacity: 1;
    z-index: 1;
}

.slideshow-container {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
}

.slideshow-container img {
    margin-right: 10px;
    max-height: 100%;
}

.card_game_1005 {
    width: 100%;
    height: 100%;

    background-color: #EDB9D5;
    /* background-image: linear-gradient(180deg, #A9C9FF 0%, #FFBBEC 100%); */

}

.card_game_2001 {
    width: 100%;
    height: 100%;

    background-color: #7CAF39;
    /* background-image: linear-gradient(180deg, #A9C9FF 0%, #FFBBEC 100%); */

}

.card_game_30014 {
    width: 100%;
    height: 100%;

    background-color: #9ED5D6;
    /* background-image: linear-gradient(180deg, #A9C9FF 0%, #FFBBEC 100%); */

}

.card_game_2007 {
    width: 100%;
    height: 100%;

    background-color: #6888A1;
}

.card_game_1005_re {
    width: 100%;
    height: 100%;

    background-color: #CAB5E2;
    /* background-image: linear-gradient(90deg, #FEE140 0%, #FA709A 100%); */
}

.card_game_2001_re {
    width: 100%;
    height: 100%;

    background-color: #F9E470;
    /* background-image: linear-gradient(90deg, #FEE140 0%, #FA709A 100%); */
}

.card_game_2007_re {
    width: 100%;
    height: 100%;

    background-color: #ffe3d0;
    /* background-image: linear-gradient(90deg, #FEE140 0%, #FA709A 100%); */
}

.card_game_20023_re {
    width: 100%;
    height: 100%;

    background-color: #7CAF39;
}

.card_game_20012_re {
    width: 100%;
    height: 100%;

    background-color: #ACE2F2;
}

.card_game_30014_re {
    width: 100%;
    height: 100%;

    background-color: #F5FADE;
}

.card_game_main {
    display: flex;
    flex-wrap: wrap;
}

.col_game_5 {
    padding: 0px;
    /* height: 100px; */
    height: 33.33vh;
}

.col_game_20023 {
    padding: 0px;
    /* height: 100px; */
    height: 53vh;
}

.col_game_20012 {
    padding: 0px;
    /* height: 100px; */
    height: 63vh;
}

.col_game_20023_card {
    padding: 0px;
    /* height: 100px; */
    height: 41vh;
}

.col_game_20012_card {
    padding: 0px;
    /* height: 100px; */
    height: 25vh;
}

.text_Label_1005 {
    font-size: 5vw;
}

a {
    text-decoration: none;
}

.money-rain {
    position: relative;
    overflow: hidden;
    height: 100vh;
}

.money-rain:before {
    content: "";
    position: absolute;
    top: -2000px;
    left: 0;
    width: 100%;
    height: 2000px;
    background-image: url('../image_1_sub/6003.png');
    animation: money-rain-animation 10s linear infinite;
}

@keyframes money-rain-animation {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(0, 100%);
    }
}

#cardElement {
    width: 100%;
    height: 100vh;
    border: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
}

/* .img_marker{
    width: 18vw;
} */

.fix_btn_2001 {
    position: absolute;
    top: 4%;
    left: 6%;
}

.fix_btn_2002 {
    position: absolute;
    top: 23%;
    left: 6%;
}

.fix_btn_2003 {
    position: absolute;
    top: 41%;
    left: 6%;
}

.fix_btn_2004 {
    position: absolute;
    top: 61%;
    left: 6%;
}

.fix_btn_2005 {
    position: absolute;
    top: 82%;
    left: 6%;
}

.fix_btn_2002_1 {
    position: absolute;
    top: 79%;
    left: 90%;
}

.fix_btn_2003_1 {
    position: absolute;
    top: 79%;
    left: 90%;
}

.fix_btn_2003_2 {
    position: absolute;
    top: 85%;
    left: 90%;
}

.fix_btn_2007_1 {
    position: absolute;
    top: 55%;
    left: 20%;
}

.fix_btn_2007_2 {
    position: absolute;
    top: 42%;
    left: 39%;
}

.fix_btn_2007_3 {
    position: absolute;
    top: 32%;
    left: 61%;
}

.fix_btn_2007_4 {
    position: absolute;
    top: 53%;
    left: 66.5%;
}

.fix_btn_2008_1 {
    position: absolute;
    top: 58%;
    left: 60%;
}

.fix_btn_2008_2 {
    position: absolute;
    top: 10%;
    left: 38%;
}

.fix_btn_2008_3 {
    position: absolute;
    top: 50%;
    left: 50%;
}

.fix_btn_2008_12_1 {
    position: absolute;
    top: 55%;
    left: 45%;
}

.fix_btn_2008_12_2 {
    position: absolute;
    top: 55%;
    left: 58%;
}

.fix_btn_2008_13_1 {
    position: absolute;
    top: 45%;
    left: 65%;
}

.fix_btn_2008_14_1 {
    position: absolute;
    top: 10%;
    left: 55%;
}

.fix_btn_2008_17_1 {
    position: absolute;
    top: 26%;
    left: 52%;
}

.fix_btn_2008_18_1 {
    position: absolute;
    top: 65%;
    left: 13%;
}

.fix_btn_2008_18_2 {
    position: absolute;
    top: 65%;
    left: 35%;
}

.fix_btn_2008_18_3 {
    position: absolute;
    top: 65%;
    left: 50%;
}

.fix_btn_2008_19_1 {
    position: absolute;
    top: 85%;
    left: 70%;
}

.fix_btn_2008_20_1 {
    position: absolute;
    top: 63%;
    left: 35%;
}

.fix_btn_2008_20_2 {
    position: absolute;
    top: 63%;
    left: 45%;
}

.fix_btn_2008_21_1 {
    position: absolute;
    top: 22%;
    left: 78%;
}

.fix_btn_2008_21_2 {
    position: absolute;
    top: 22%;
    left: 70%;
}

.fix_btn_2008_22_1 {
    position: absolute;
    top: 65%;
    left: 40%;
}

.fix_btn_2008_22_2 {
    position: absolute;
    top: 83%;
    left: 85%;
}

.fix_btn_2008_24_1 {
    position: absolute;
    top: 85%;
    left: 35%;
}

.fix_btn_2008_24_2 {
    position: absolute;
    top: 85%;
    left: 45%;
}

.cardgame25 {
    margin-top: 23vw;
}

.cardgamein25 {
    padding: 0px;
}

.modalCT {
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.icon_2001 {
    /* animation: example 3s infinite; */
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
}

.icon_2001:hover {
    border: 3px solid #fab005;
}

@keyframes example {
    0% {
        border-bottom: 5px solid rgb(255, 86, 86);
    }

    50% {
        border-bottom: 5px solid transparent;
    }

    100% {
        border-bottom: 5px solid rgb(255, 86, 86);
    }
}

/* หากหน้าจอมีความกว้างไม่เกิน 600px */
@media (max-width: 600px) {
    .h3_25 {
        font-size: 20px;
    }
}

/* หากหน้าจอมีความกว้างไม่เกิน 400px */
@media (max-width: 400px) {
    .h3_25 {
        font-size: 12px;
    }
}

.btn_game_5001_1 {
    position: absolute;
    top: 65%;
    left: 7%;
    /* border: 1px solid red; */
    width: 20vw;
    height: 20vw;
    border-radius: 50%;
}

.btn_game_5001_2 {
    position: absolute;
    top: 32%;
    left: 8.5%;
    /* border: 1px solid red; */
    width: 20vw;
    height: 20vw;
    border-radius: 50%;
}

.btn_game_5001_3 {
    position: absolute;
    top: 6.5%;
    left: 25.5%;
    /* border: 1px solid red; */
    width: 20vw;
    height: 20vw;
    border-radius: 50%;
}

.btn_game_5001_4 {
    position: absolute;
    top: 4%;
    left: 49.5%;
    /* border: 1px solid red; */
    width: 20vw;
    height: 20vw;
    border-radius: 50%;
}

.btn_game_5001_5 {
    position: absolute;
    top: 10%;
    left: 73%;
    /* border: 1px solid red; */
    width: 20vw;
    height: 20vw;
    border-radius: 50%;
}

.label5001 {
    position: absolute;
    top: 50%;
    left: 30%;
    padding: 10px;
    background-color: white;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

.btn_game_5002 {
    position: absolute;
    top: 47.5%;
    left: 67.5%;
    width: 10.5vw;
    height: 10.5vw;
    border-radius: 50%;
}

/* หากหน้าจอมีความกว้างไม่เกิน 600px */
@media (max-width: 800px) {
    .label5001 {
        font-size: 30px;
    }
}

/* หากหน้าจอมีความกว้างไม่เกิน 400px */
@media (max-width: 400px) {
    .label5001 {
        font-size: 12px;
    }
}

.icon_5 {
    /* animation: example 3s infinite; */
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
}

.icon_5:hover {
    border: 3px solid #C6E19F;
}

.fix_btn_5002001 {
    position: absolute;
    top: 35%;
    left: 35%;
}

.fix_btn_5003001 {
    position: absolute;
    top: 38%;
    left: 50%;
}

.fix_btn_5005001 {
    position: absolute;
    top: 55%;
    left: 15%;
}

.fix_btn_5006001 {
    position: absolute;
    top: 47%;
    left: 80%;
}

.fix_btn_5007001 {
    position: absolute;
    top: 15%;
    left: 43%;
}

.fix_btn_5008001 {
    position: absolute;
    top: 87%;
    left: 85%;
}

.fix_btn_5009_1 {
    position: absolute;
    top: 10%;
    left: 90%;
}

.fix_btn_50010_1 {
    position: absolute;
    top: 55%;
    left: 21%;
    /* border: 1px solid red; */
    width: 10vw;
    height: 10vw;
}




.pyro>.before,
.pyro>.after {
    position: fixed;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    box-shadow: -120px -218.66667px blue, 248px -16.66667px #00ff84, 190px 16.33333px #002bff, -113px -308.66667px #ff009d, -109px -287.66667px #ffb300, -50px -313.66667px #ff006e, 226px -31.66667px #ff4000, 180px -351.66667px #ff00d0, -12px -338.66667px #00f6ff, 220px -388.66667px #99ff00, -69px -27.66667px #ff0400, -111px -339.66667px #6200ff, 155px -237.66667px #00ddff, -152px -380.66667px #00ffd0, -50px -37.66667px #00ffdd, -95px -175.66667px #a6ff00, -88px 10.33333px #0d00ff, 112px -309.66667px #005eff, 69px -415.66667px #ff00a6, 168px -100.66667px #ff004c, -244px 24.33333px #ff6600, 97px -325.66667px #ff0066, -211px -182.66667px #00ffa2, 236px -126.66667px #b700ff, 140px -196.66667px #9000ff, 125px -175.66667px #00bbff, 118px -381.66667px #ff002f, 144px -111.66667px #ffae00, 36px -78.66667px #f600ff, -63px -196.66667px #c800ff, -218px -227.66667px #d4ff00, -134px -377.66667px #ea00ff, -36px -412.66667px #ff00d4, 209px -106.66667px #00fff2, 91px -278.66667px #000dff, -22px -191.66667px #9dff00, 139px -392.66667px #a6ff00, 56px -2.66667px #0099ff, -156px -276.66667px #ea00ff, -163px -233.66667px #00fffb, -238px -346.66667px #00ff73, 62px -363.66667px #0088ff, 244px -170.66667px #0062ff, 224px -142.66667px #b300ff, 141px -208.66667px #9000ff, 211px -285.66667px #ff6600, 181px -128.66667px #1e00ff, 90px -123.66667px #c800ff, 189px 70.33333px #00ffc8, -18px -383.66667px #00ff33, 100px -6.66667px #ff008c;
    -moz-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
    -webkit-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
    -o-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
    -ms-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
    animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
}

.pyro>.after {
    -moz-animation-delay: 1.25s, 1.25s, 1.25s;
    -webkit-animation-delay: 1.25s, 1.25s, 1.25s;
    -o-animation-delay: 1.25s, 1.25s, 1.25s;
    -ms-animation-delay: 1.25s, 1.25s, 1.25s;
    animation-delay: 1.25s, 1.25s, 1.25s;
    -moz-animation-duration: 1.25s, 1.25s, 6.25s;
    -webkit-animation-duration: 1.25s, 1.25s, 6.25s;
    -o-animation-duration: 1.25s, 1.25s, 6.25s;
    -ms-animation-duration: 1.25s, 1.25s, 6.25s;
    animation-duration: 1.25s, 1.25s, 6.25s;
}

@-webkit-keyframes bang {
    from {
        box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white;
    }
}

@-moz-keyframes bang {
    from {
        box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white;
    }
}

@-o-keyframes bang {
    from {
        box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white;
    }
}

@-ms-keyframes bang {
    from {
        box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white;
    }
}

@keyframes bang {
    from {
        box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white;
    }
}

@-webkit-keyframes gravity {
    to {
        transform: translateY(200px);
        -moz-transform: translateY(200px);
        -webkit-transform: translateY(200px);
        -o-transform: translateY(200px);
        -ms-transform: translateY(200px);
        opacity: 0;
    }
}

@-moz-keyframes gravity {
    to {
        transform: translateY(200px);
        -moz-transform: translateY(200px);
        -webkit-transform: translateY(200px);
        -o-transform: translateY(200px);
        -ms-transform: translateY(200px);
        opacity: 0;
    }
}

@-o-keyframes gravity {
    to {
        transform: translateY(200px);
        -moz-transform: translateY(200px);
        -webkit-transform: translateY(200px);
        -o-transform: translateY(200px);
        -ms-transform: translateY(200px);
        opacity: 0;
    }
}

@-ms-keyframes gravity {
    to {
        transform: translateY(200px);
        -moz-transform: translateY(200px);
        -webkit-transform: translateY(200px);
        -o-transform: translateY(200px);
        -ms-transform: translateY(200px);
        opacity: 0;
    }
}

@keyframes gravity {
    to {
        transform: translateY(200px);
        -moz-transform: translateY(200px);
        -webkit-transform: translateY(200px);
        -o-transform: translateY(200px);
        -ms-transform: translateY(200px);
        opacity: 0;
    }
}

@-webkit-keyframes position {

    0%,
    19.9% {
        margin-top: 10%;
        margin-left: 40%;
    }

    20%,
    39.9% {
        margin-top: 40%;
        margin-left: 30%;
    }

    40%,
    59.9% {
        margin-top: 20%;
        margin-left: 70%;
    }

    60%,
    79.9% {
        margin-top: 30%;
        margin-left: 20%;
    }

    80%,
    99.9% {
        margin-top: 30%;
        margin-left: 80%;
    }
}

@-moz-keyframes position {

    0%,
    19.9% {
        margin-top: 10%;
        margin-left: 40%;
    }

    20%,
    39.9% {
        margin-top: 40%;
        margin-left: 30%;
    }

    40%,
    59.9% {
        margin-top: 20%;
        margin-left: 70%;
    }

    60%,
    79.9% {
        margin-top: 30%;
        margin-left: 20%;
    }

    80%,
    99.9% {
        margin-top: 30%;
        margin-left: 80%;
    }
}

@-o-keyframes position {

    0%,
    19.9% {
        margin-top: 10%;
        margin-left: 40%;
    }

    20%,
    39.9% {
        margin-top: 40%;
        margin-left: 30%;
    }

    40%,
    59.9% {
        margin-top: 20%;
        margin-left: 70%;
    }

    60%,
    79.9% {
        margin-top: 30%;
        margin-left: 20%;
    }

    80%,
    99.9% {
        margin-top: 30%;
        margin-left: 80%;
    }
}

@-ms-keyframes position {

    0%,
    19.9% {
        margin-top: 10%;
        margin-left: 40%;
    }

    20%,
    39.9% {
        margin-top: 40%;
        margin-left: 30%;
    }

    40%,
    59.9% {
        margin-top: 20%;
        margin-left: 70%;
    }

    60%,
    79.9% {
        margin-top: 30%;
        margin-left: 20%;
    }

    80%,
    99.9% {
        margin-top: 30%;
        margin-left: 80%;
    }
}

@keyframes position {

    0%,
    19.9% {
        margin-top: 10%;
        margin-left: 40%;
    }

    20%,
    39.9% {
        margin-top: 40%;
        margin-left: 30%;
    }

    40%,
    59.9% {
        margin-top: 20%;
        margin-left: 70%;
    }

    60%,
    79.9% {
        margin-top: 30%;
        margin-left: 20%;
    }

    80%,
    99.9% {
        margin-top: 30%;
        margin-left: 80%;
    }
}

.btn_set_main {
    animation: shrinkFade 3s infinite;
}

@keyframes shrinkFade {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(0.9);
        opacity: 0.5;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.btn_fix_btn_2001_1 {
    position: absolute;
    top: 27%;
    left: 22%;
    z-index: 1;
}

.btn_fix_c_btn_2001_1 {
    position: absolute;
    top: 31%;
    left: 15.7%;
    /* border: 1px solid red; */
    width: 17vw;
    height: 17vw;
    border-radius: 50%;
}

.btn_fix_btn_2001_2 {
    position: absolute;
    top: 34%;
    left: 45%;
    z-index: 1;
}

.btn_fix_c_btn_2001_2 {
    position: absolute;
    top: 38%;
    left: 38.7%;
    /* border: 1px solid red; */
    width: 17vw;
    height: 17vw;
    border-radius: 50%;
}

.btn_fix_btn_2001_3 {
    position: absolute;
    top: 22%;
    left: 67.5%;
    z-index: 1;
}

.btn_fix_c_btn_2001_3 {
    position: absolute;
    top: 26%;
    left: 61%;
    /* border: 1px solid red; */
    width: 17vw;
    height: 17vw;
    border-radius: 50%;
}

.btn_fix_btn_2001_4 {
    position: absolute;
    top: 58.5%;
    left: 26.5%;
    z-index: 1;
}

.btn_fix_c_btn_2001_4 {
    position: absolute;
    top: 62%;
    left: 20%;
    /* border: 1px solid red; */
    width: 17vw;
    height: 17vw;
    border-radius: 50%;
}

.btn_fix_btn_2001_5 {
    position: absolute;
    top: 63%;
    left: 55%;
    z-index: 1;
}

.btn_fix_c_btn_2001_5 {
    position: absolute;
    top: 66.5%;
    left: 48.5%;
    /* border: 1px solid red; */
    width: 17vw;
    height: 17vw;
    border-radius: 50%;
}

.btn_fix_btn_2001_6 {
    position: absolute;
    top: 46%;
    left: 79%;
    z-index: 1;
}

.btn_fix_c_btn_2001_6 {
    position: absolute;
    top: 50%;
    left: 73%;
    /* border: 1px solid red; */
    width: 17vw;
    height: 17vw;
    border-radius: 50%;
}

.fix_btn_2002001 {
    position: absolute;
    top: 63%;
    left: 63%;
}

.fix_btn_2004001 {
    position: absolute;
    top: 76%;
    left: 78%;
}

.fix_btn_2008001 {
    position: absolute;
    top: 27%;
    left: 14%;
}

.fix_btn_2008002 {
    position: absolute;
    top: 27%;
    left: 24%;
}

.fix_btn_2008003 {
    position: absolute;
    top: 27%;
    left: 34%;
}

.fix_btn_20010002 {
    position: absolute;
    top: 27%;
    left: 80%;
}

.fix_btn_20013001 {
    position: absolute;
    top: 54%;
    left: 20%;
}

.fix_btn_20013002 {
    position: absolute;
    top: 54%;
    left: 27%;
}

.fix_btn_20013003 {
    position: absolute;
    top: 66%;
    left: 20%;
}

.fix_btn_20013004 {
    position: absolute;
    top: 66%;
    left: 27%;
}

.fix_btn_20013005 {
    position: absolute;
    top: 77%;
    left: 20%;
}

.fix_btn_20013006 {
    position: absolute;
    top: 77%;
    left: 27%;
}

.fix_btn_20014001 {
    position: absolute;
    top: 60%;
    left: 50%;
}

.fix_btn_20014002 {
    position: absolute;
    top: 11%;
    left: 11%;
    /* border: 1px solid red; */
    width: 17vw;
    height: 17vw;
    border-radius: 50%;
}

.fix_btn_20014003 {
    position: absolute;
    top: 4%;
    left: 46%;
    /* border: 1px solid red; */
    width: 17vw;
    height: 17vw;
    border-radius: 50%;
}

.fix_btn_20014004 {
    position: absolute;
    top: 33%;
    left: 35%;
    /* border: 1px solid red; */
    width: 17vw;
    height: 17vw;
    border-radius: 50%;
}

.fix_btn_20014005 {
    position: absolute;
    top: 24%;
    left: 63%;
    /* border: 1px solid red; */
    width: 17vw;
    height: 17vw;
    border-radius: 50%;
}

.fix_btn_20014006 {
    position: absolute;
    top: 54%;
    left: 18.5%;
    /* border: 1px solid red; */
    width: 17vw;
    height: 17vw;
    border-radius: 50%;
}

.fix_btn_20014007 {
    position: absolute;
    top: 55%;
    left: 72%;
    /* border: 1px solid red; */
    width: 17vw;
    height: 17vw;
    border-radius: 50%;
}

.img_result_20014_1 {
    position: absolute;
    top: 27%;
    left: 15%;
}

.img_result_20014_2 {
    position: absolute;
    top: 20%;
    left: 52%;
}

.img_result_20014_3 {
    position: absolute;
    top: 49%;
    left: 40%;
}

.img_result_20014_4 {
    position: absolute;
    top: 40%;
    left: 65%;
}

.img_result_20014_5 {
    position: absolute;
    top: 70%;
    left: 25%;
}

.img_result_20014_6 {
    position: absolute;
    top: 70%;
    left: 75%;
}

.fix_btn_3001001 {
    position: absolute;
    top: 60%;
    left: 75%;
}

.label3001 {
    background-color: white;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 4vw;
    border-radius: 15px;
    border: 2px dashed #1C6EA4;
    color: #1C6EA4;
}

.label3001001 {
    position: absolute;
    top: 38%;
    left: 16%;
}

.label3001002 {
    position: absolute;
    top: 38%;
    left: 36%;
}

.label3001003 {
    position: absolute;
    top: 38%;
    left: 64%;
}

.label3001004 {
    position: absolute;
    top: 85%;
    left: 14%;
}

.label3001005 {
    position: absolute;
    top: 85%;
    left: 40%;
}

.fix_btn_3002001 {
    position: absolute;
    top: 45%;
    left: 35%;
}

.fix_btn_3002002 {
    position: absolute;
    top: 50%;
    left: 45%;
}

.fix_btn_3002003 {
    position: absolute;
    top: 20%;
    left: 75%;
}

.fix_btn_3003001 {
    position: absolute;
    top: 65%;
    left: 90%;
}

.fix_btn_3004001 {
    position: absolute;
    top: 82%;
    left: 80%;
}

.fix_btn_3006001 {
    position: absolute;
    top: 30%;
    left: 65%;
}

.fix_btn_3007001 {
    position: absolute;
    top: 25%;
    left: 25%;
}

.fix_btn_3008001 {
    position: absolute;
    top: 17%;
    left: 35%;
}

.fix_btn_3009001 {
    position: absolute;
    top: 17%;
    left: 16%;
}

.fix_btn_3009002 {
    position: absolute;
    top: 17%;
    left: 25%;
}

.fix_btn_30010001 {
    position: absolute;
    top: 17%;
    left: 16%;
}

.fix_btn_30010002 {
    position: absolute;
    top: 17%;
    left: 25%;
}

.fix_btn_30011001 {
    position: absolute;
    top: 91%;
    left: 22%;
}

.fix_btn_30012001 {
    position: absolute;
    top: 2%;
    left: 38%;
    width: 15vw;
    height: 20vw;
    /* border: 1px solid red; */
    border-radius: 50%;
    transform: rotate(-25deg);
}


.fix_img_30012001 {
    position: absolute;
    top: 25%;
    left: 45%;
}

.fix_btn_30012002 {
    position: absolute;
    top: 18%;
    left: 4%;
    width: 15vw;
    height: 20vw;
    /* border: 1px solid red; */
    border-radius: 50%;
    /* transform: rotate(-25deg); */
}

.fix_img_30012002 {
    position: absolute;
    top: 39%;
    left: 9%;
}

.fix_btn_30012003 {
    position: absolute;
    top: 28%;
    left: 26%;
    width: 15vw;
    height: 20vw;
    /* border: 1px solid red; */
    border-radius: 50%;
    /* transform: rotate(-25deg); */
}

.fix_img_30012003 {
    position: absolute;
    top: 50%;
    left: 30.5%;
}

.fix_btn_30012004 {
    position: absolute;
    top: 16%;
    left: 53.5%;
    width: 15vw;
    height: 20vw;
    /* border: 1px solid red; */
    border-radius: 50%;
    transform: rotate(25deg);
}

.fix_img_30012004 {
    position: absolute;
    top: 36%;
    left: 55%;
}

.fix_btn_30012005 {
    position: absolute;
    top: 6%;
    left: 75.5%;
    width: 15vw;
    height: 20vw;
    /* border: 1px solid red; */
    border-radius: 50%;
    transform: rotate(-20deg);
}

.fix_img_30012005 {
    position: absolute;
    top: 30%;
    left: 83%;
}

.fix_btn_30012006 {
    position: absolute;
    top: 57%;
    left: 14%;
    width: 15vw;
    height: 20vw;
    /* border: 1px solid red; */
    border-radius: 50%;
    transform: rotate(-25deg);
}

.fix_img_30012006 {
    position: absolute;
    top: 80%;
    left: 23%;
}

.fix_btn_30012007 {
    position: absolute;
    top: 39%;
    left: 66%;
    width: 15vw;
    height: 20vw;
    /* border: 1px solid red; */
    border-radius: 50%;
    transform: rotate(-25deg);
}

.fix_img_30012007 {
    position: absolute;
    top: 60%;
    left: 73%;
}

.fix_btn_30012008 {
    position: absolute;
    top: 53%;
    left: 83%;
    width: 15vw;
    height: 20vw;
    /* border: 1px solid red; */
    border-radius: 50%;
    /* transform: rotate(-25deg); */
}

.fix_img_30012008 {
    position: absolute;
    top: 76%;
    left: 88%;
}

.fix_btn_1_30012001 {
    position: absolute;
    top: 64%;
    left: 46%;
}

.label_30013001 {
    position: absolute;
    top: 56%;
    left: 28%;
    background-color: white;
    padding-left: 15px;
    padding-right: 15px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    border: 2px dashed #4a6e3c;
    color: #4a6e3c;
    font-size: 3vw;
}

.label_30013001:hover{
    border: 2px double #4a6e3c;
    color: #4a6e3c;
}

.label_30013002{
    position: absolute;
    top: 56%;
    left: 61%;
    background-color: white;
    padding-left: 15px;
    padding-right: 15px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    border: 2px dashed #8f545e;
    color: #8f545e;
    font-size: 3vw;
}

.label_30013002:hover{
    border: 2px double #8f545e;
    color: #8f545e;
}

.label_30013003{
    position: absolute;
    top: 83%;
    left: 28%;
    background-color: white;
    padding-left: 15px;
    padding-right: 15px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    border: 2px dashed #7c732d;
    color: #7c732d;
    font-size: 3vw;
}

.label_30013003:hover{
    border: 2px double #7c732d;
    color: #7c732d;
}


.label_30013004{
    position: absolute;
    top: 83%;
    left: 63%;
    background-color: white;
    padding-left: 15px;
    padding-right: 15px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    border: 2px dashed #285051;
    color: #285051;
    font-size: 3vw;
}

.label_30013004:hover{
    border: 2px double #285051;
    color: #285051;
}

.fix_img_30013001{
    position: absolute;
    top: 40%;
    left: 42%; 
}

.fix_img_30013002{
    position: absolute;
    top: 40%;
    left: 77%; 
}

.fix_img_30013003{
    position: absolute;
    top: 68%;
    left: 42%; 
}

.fix_img_30013004{
    position: absolute;
    top: 68%;
    left: 77%;
}