body {
   
    margin: 0;
    padding: 0;
    
}



.main{
    /* width: 1920.00px; */
    /* height: 1080.00px;
    width: 100%;
    height: 100%; */
}

.home {
    position: absolute;
    /* max-width: 1920.00px; 
    max-height: 1080.00px; */
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.home .background{    
    position: absolute; 
    /* max-width: 1920.00px; 
    max-height: 1080.00px; */
    
    width: 100%;
    height: 100%;   
    left: 0.00px;
    top: 0.00px;
    
   
    background-image: url("../image/home-background.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.blackboard {
    background-image: url("../image/home-blackboard.png");
    background-size: 100%  100%;
    background-position: center;
    background-repeat: no-repeat;    

    position: absolute;
    box-sizing: content-box;      
    /* display: flex;
    justify-content: center;  
    align-items: center; */
    /* width: 910.00px; */
     /* height: 759.00px; */
    /* left: 50.00px;
    top: 73.00px; */
    /* max-width: 910px;
    max-height: 759px; */

    width : min(47.4vw,84.28vh);
    height: min(39.53vw,70.3vh);

    /* width: 47.39%;
    height: 70.27%;    */


    left: 26.3%;
    top: 41.89%;
    transform:translate(-50%,-50%);
}

@media  (max-width: 700px)  {
    .blackboard{        
        width: 343px;
        height: 286px;
         /*height: 35.09%;           */
        left: 50%;
        top: 40.49%;
        transform:translate(-50%,-50%);
    }
}

.blackboard .words::-webkit-scrollbar {
    display: none;
}
.blackboard .words{
    -ms-overflow-style: none;
}
.blackboard .words{
    position: absolute;
    box-sizing: content-box;
    /* width: 576.00px;
    height: 534.00px; */
    /* left: 182.77px; */
    /* left: 132.77px; */
    /* top: 121.00px; */
    /* top: 73px; */

 /* max-width: 576px;
    max-height: 534px; */
    /* width: 63.2%;*/
    /* height: 70.35%; */

    width: min(30vw,54.4vh);
    /* height: min(27.81vw,49.5vh); */
    height: min(30vw,56vh);
    left: 50.5%;
    top: 50.50%;
    transform:translate(-50%,-50%); 
    overflow-y: auto;
    /* font-size: 26.00px; */
    font-size: calc(min(30vw,54.4vh)  * 0.06);
    /* line-height: 40.00px; */
    line-height: calc( min(27.81vw,49.5vh) * 40/534);


    font-family: 'Noto Sans', Arial;
    color: rgba(255, 255, 255, 1);
    font-weight: 700;
    font-style: normal;
    
    text-align: left;
   
}
.blackboard .words a {
    color: rgba(255, 255, 255, 1);
}
@media  (max-width: 700px)  {
    .blackboard .words{       
        width: 210px;
        height: 195px; 
        font-size: 12.00px;
        line-height: 16.00px;
        top: 46.5%;
    }
}



/* @media only screen and (max-width: 1300px){
    .blackboard .words{        
        font-size: 12.00px;
        line-height: 24.00px;
    }
}

@media only screen and (max-width: 375px){
    .blackboard .words{        
        font-size: 12.00px;
        line-height: 18.00px;
    }
} */


.game_start_btn {
    position: absolute;
    box-sizing: content-box;
    /* width: 450.00px;
    height: 94.00px;
    left: 1201.00px;
    top: 880.00px; */

    background-color: rgba(0, 175, 169, 1);    
    border-color: rgba(255, 255, 255, 1);
    border-style: solid;
    border-width: 5.00px;
    border-radius: 65.00px;
    

    /* width: 23.43%;
    height: 8.70%; */
    width: min(23.43vw,41.65vh);
    height: min(4.9vw,8.7vh);
    left: 74.5%;
    top: 86.29%;
    transform:translate(-50%,-50%);
   
}
@media  (max-width: 700px)  {
    .game_start_btn {  
        /* width: 77.45%;
        height: 6.68%;             */
        width: 290px;
        height: 54px;
        left: 50%;
        top: 87.75%;
        transform:translate(-50%,-50%);
    }
}
@media  (max-width: 280px) {
    .game_start_btn {                     
        width: calc(290px * 0.8);
        height: calc(54px * 0.8);
    }
}

/* @media only screen and (max-width: 1300px){
    .game_start_btn{        
        width: 77.45%;
        height: 6.68%;          
        left: 50%;
        top: 87.75%;
        transform:translate(-50%,-50%);
    }
} */

.game_start_btn .detail {
    position: absolute;
    box-sizing: content-box;
    
    /* width: 166.95px;
    height: 40px; */
    display: flex;
    flex-direction: row; 
    justify-content: center;  
    align-items: center;
    /* left: 142.00px;
    top: 28.00px;    */
    width: 100%;
    height: 100%;
    left: 50%;
    top: 50%;
    transform:translate(-50%,-50%);

    /* line-height: 40px;     */
    /* font-size: 25.00px; */
    font-size: calc( min(23.43vw,41.65vh) * 0.10);
    font-weight: 700;
    color: rgba(255, 255, 255, 1);
}

@media  (max-width: 700px)  {
    .game_start_btn .detail{              
        font-size: 20px
    }
}
@media  (max-width: 280px) {
    .game_start_btn {              
        border-width: 1.00px;
    }
}

.game_start_btn .words{
    display: flex;    
    /* justify-content: center;  
    align-items: center; */
}




.game_start_btn .icon {
    /* position: absolute;
    box-sizing: content-box; */
    display: flex;
    /* margin-left:  29px; */
    margin-left: calc( min(23.43vw,41.65vh)* 0.06);
    /* justify-content: center;
    align-items: center; */
    /* width: 40px;
    height: 40px; */
    width: calc( min(23.43vw,41.65vh) * 0.08);
    height: calc( min(23.43vw,41.65vh) * 0.08);
    /* left: 129.00px;
    top: 0.00px; */
    fill: rgba(255, 255, 255, 1);
}
@media  (max-width: 700px)  {
    .game_start_btn .icon{              
        width: 20px;
        height: 20px;
        margin-left: 12px;
    }
}
/* @media only screen and (max-width: 1300px){
    .game_start_btn .icon {  
        margin-left: 12px; 
        width: 20px;
        height: 20px;
    }
} */



.facebook_btn   {
    position: absolute;
    box-sizing: content-box;
    width: 284.00px;
    height: 80.00px;
    /* left: 138.00px;
    top: 904.00px; */
    /* width: 14.79%;
    height: 7.40%; */

    width: min(14.8vw,26.27vh);
    height: min(4.7vw,7.4vh);

    left: 14.58%;
    top: 87.4%;
    transform:translate(-50%,-50%);

    background-color: rgba(243, 171, 25, 1);
   
    border-radius: 65.00px;
    
    display: flex;
    justify-content: center;
    align-items: center;

    color: rgba(255, 255, 255, 1);
    /* font-size: 25.00px; */
    font-size: calc( min(14.8vw,26.27vh) * 0.13);
    font-weight: 700;
    
    font-family: 'Noto Sans', Arial;
    z-index:1;
}

@media  (max-width: 700px) {
    .facebook_btn  {        
        left: 28.8%;
        top: 77.17%;
        transform:translate(-50%,-50%);

        width: 130px;
        height: 40px;
        font-size: 16px;
    }
}

@media  (max-width: 280px) {
    .facebook_btn  {  
        top: 80%;      
        width: calc(130px * 0.8);
        height: calc( 40px * 0.8);
        font-size: calc( 16px * 0.8);
    }
}
/* @media only screen and (max-width: 1300px){
    .facebook_btn  {  
        width: 34.66%;
        height: 4.90%;
        left: 28.8%;
        top: 77.17%;
        transform:translate(-50%,-50%);
    }
} */




 
/* @media only screen and (max-width: 1300px){
    .facebook_btn .detail {  
        font-size: 16.00px;
    }
} */

.health_btn {
    position: absolute;
    box-sizing: content-box;

    width: 284.00px;
    height: 80.00px;
    /* left: 552.00px;
    top: 904.00px; */
    /* width: 14.79%;
    height: 7.40%;*/
    width: min(14.8vw,26.27vh);
    height: min(4.7vw,7.4vh);
    left: 34.58%;
    top: 87.4%;
    transform:translate(-50%,-50%);

    background-color: rgba(255, 128, 55, 1);
   
    border-radius: 65.00px;
    
    z-index:1;

    display: flex;
    justify-content: center;
    align-items: center;

    color: rgba(255, 255, 255, 1);
    /* font-size: 25.00px; */
    font-size: calc( min(14.8vw,26.27vh) * 0.13);
    font-weight: 700;
    font-style: normal;
    font-family: 'Noto Sans', Arial;
}

@media  (max-width: 700px) {
    .health_btn  {        
        left: 71.73%;
        top: 77.17%;
        transform:translate(-50%,-50%);

        width: 130px;
        height: 40px;
        font-size: 16px;
    }
}
@media  (max-width: 280px) {
    .health_btn  {   
        top: 80%;     
        width: calc(130px * 0.8);
        height: calc( 40px * 0.8);
        font-size: calc( 16px * 0.8);
    }
}

/* @media only screen and (max-width: 1300px){
    .health_btn  {  
        width: 34.66%;
        height: 4.90%;
        left: 71.73%;
        top: 77.17%;
        transform:translate(-50%,-50%);
    }
} */

/* @media only screen and (max-width: 1300px){
    .health_btn .detail {  
        font-size: 16.00px;
    }
} */


.homelogotype {
    position: absolute;
    box-sizing: content-box;

    /* width: 650.00px;
    height: 285.00px; */


    /* width: min(33.75vw,60vh);
    height: min(12.86vw,22.87vh); */


    width: min(33.85vw,60.16vh);
    height: min(14.84vw,26.38vh);




    /* left: 1073.00px;
    top: 110.00px; */
    /* width: 33.75%;
    height: 22.87%; */
    left: 72.76%;
    top: 21.62%;
    transform:translate(-50%,-50%);
    
    background-image: url("../image/homelogotype.png");
    background-position: center;
    background-repeat: no-repeat;
    /* background-size: cover;    */
    background-size: 100%;
}
@media  (max-width: 700px) {
    .homelogotype{    
        width: 310px;   
        height: 136px;    
        left: 50.0%;
        top: 10%;
        transform:translate(-50%,-50%);
    }
}

@media  (max-width: 320px){
    .homelogotype{    
        width: calc(310px * 0.8);   
        height: calc(136px * 0.8);           
    }
}


/* @media only screen and (max-width: 1300px){
    .homelogotype{    
        width: 337px;
        height: 128px;    
        left: 50.0%;
        top: 13.74%;
        transform:translate(-50%,-50%);
    }
} */



.sprite1 {
    position: absolute;
    box-sizing: content-box;

    /* width: 528.27px;
    height: 380.35px; */

    width: min(27.5vw,48.88vh);
    height: min(19.79vw,35.18vh);

    /* left: 1132.73px;
    top: 393.16px; */
    
    /* width: 27.51%;
    height: 35.18%; */

    left: 72.7%;
    top: 53.98%;
    transform:translate(-50%,-50%);

    background-image: url("../image/home_animal.png");
    background-position: center;
    background-repeat: no-repeat;
    /* background-size: cover;    */
    background-size: 100%  100%;
}
@media  (max-width: 700px) {
    .sprite1{   
        width: 221.75px;               
        height: 160px;
        left: 50.0%;
        top: 63.39%;
        transform:translate(-50%,-50%);
    }
}

/* @media only screen and (max-width: 1300px){
    .sprite1{           
        width: 221.75px;
        height: 159.66px;
        left: 50.0%;
        top: 63.39%;
        transform:translate(-50%,-50%);
    }
} */