html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
	background-color: #76AEC7;
}

.truehits {
	font-family: "MS Sans Serif", Tahoma, sans-serif;
	font-size: 12px;
	color: #FFF;
}	  
.consent {
	font-family: 'KittithadaLight45Regular';
	font-size: 23px;
	color: #000;
}	
.law {
	font-family: "MS Sans Serif", Tahoma, sans-serif;
/*	font-size: 12px;*/
	font-size: 1vw;
	color: #000;
}
.style3 {color: #FF0000;}
.rule {
	font-family: 'KittithadaLight45Regular';
	font-size: 29px;
	line-height: 1.0em;
	letter-spacing: 0.01em;
	overflow: hidden;
	color: #000;
	width:95%;
	padding: 10px 10px;
}	  

div.alertBox{  
    width:50px;  
    margin:auto;  
    height:50px;  
    text-align:center;  
    font-size:12px;  
}  
.area-red {
	border: 1px solid #FF0000;
	background-color:#F00;
/*
	width: 200px;
	height: 20px;
*/
}	
	
.input_form {
/*
    width: 200px;
	height: 20px;
*/
}

/*-------- OverLay Login -----------*/
.box { 
	    height:100%;
	    width:100%;
        position:relative;
		z-index:2;
	}
.overlay_ {  
	    background:rgba(0, 0, 0, .6);
	    text-align:center;
	    opacity:0;	  
	    width:100%;height:569px; 
	    -webkit-transition: all 0.3s ease-in-out;
	    -moz-transition: all 0.3s ease-in-out;
	    -o-transition: all 0.3s ease-in-out;
	    -ms-transition: all 0.3s ease-in-out;
	    transition: all 0.3s ease-in-out;
        position:absolute;   
        border-radius:5px;
		z-index:2;
		}

/*
.box:hover {
	    border-radius:5px;
	}
.box:hover .overlay {
	    opacity:1;
	}
*/

.box {
	    border-radius:5px;
	}
.box .overlay_ {
	    opacity:1;
	}
	
/*-------- OverLay Login -----------*/

/*
.text_limit {
	font-family: "MS Sans Serif", Tahoma, sans-serif;
	font-size: 12px;
	color: #F00;
}	
*/
	
.text_insert {
	font-family: "MS Sans Serif", Tahoma, sans-serif;
	font-size: 16px;
	color: #F00;
}

div.title_form {
	font-family: 'KittithadaLight45Regular';
	font-size: 29px;
	line-height: 1.0em;
	letter-spacing: 0.01em;
	overflow: hidden;
	color:#000;
}
div.head_title_form {
	font-family: 'KittithadaLight45Regular';
	font-size: 40px;
	line-height: 1.0em;
	letter-spacing: 0.01em;
	overflow: hidden;
	color:#FFF;
}
div.playtime {
	font-family: 'KittithadaLight45Regular';
	font-size: 40px;
	line-height: 1.0em;
	letter-spacing: 0.05em;
	overflow: hidden;
	color: #F00;
	padding-top:100px;
	padding-bottom:100px;
}

div.con_game {
	font-family: 'KittithadaLight45Regular';
	font-size: 25px;
	line-height: 1.1em;
	letter-spacing: 0.03em;
	overflow: hidden;
	color:#000;
	padding:30px 60px;
}

div.title_choice {
	font-family: 'KittithadaLight45Regular';
	font-size: 35px;
	line-height: 0.7em;
	letter-spacing: 0.01em;
	overflow: hidden;
	color:#000;
	padding: 5px;
}	
.team_check {
	font-family: "MS Sans Serif", Tahoma, sans-serif;
	font-size: 22px;
}			  
.button_submit {
  font-family: 'KittithadaLight45Regular';
  background-color: #FA3437;
  border: none;
  color: white;
  padding: 10px 30px;
  text-align: center;
  text-decoration: none;
  font-size: 35px;
  border-radius: 15px;
  cursor: pointer;
}	
div.win_head {
	font-family: 'KittithadaLight45Regular';
	font-size: 48px;
	line-height: 1.0em;
	letter-spacing: 0.01em;
	overflow: hidden;
	color:#000;
	padding-top:10px;
}
div.win_body {
	font-family: 'KittithadaLight45Regular';
	font-size: 40px;
	line-height: 1.0em;
	letter-spacing: 0.01em;
	overflow: hidden;
	color:#000;
	padding:40px 0 50px 0;
	text-align:left !important;
	margin-left:310px;
}

div.win_footer {
	font-family: 'KittithadaLight45Regular';
	font-size: 30px;
	line-height: 1.0em;
	letter-spacing: 0.01em;
	overflow: hidden;
	color:#F00;
	padding:0 0 30px 0;
	text-align:center !important;
}	  
div.win_head {
    font-size: 4.3vw;
}

div.con_game {
    font-size: 2.4vw;
    padding: 1vw 3vw;
}

div.playtime {
    font-size: 4.0vw;
    padding: 1vw 3vw;
}

/* ========================= END EVE201 ========================= */	  
	  
	  
/* ========================= TABLE RESPONSIVE ========================= */

.gameTable_fix {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    border-collapse: collapse;
    border-spacing: 0;
}

.gameTable {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    border-collapse: collapse;
    border-spacing: 0;
}


/* ========================= TOP IMAGE SPACE ========================= */

.topSpacer {
    height: 1580px;
    padding: 0;
    margin: 0;
}


/* ========================= TABLE 02 ========================= */

#Table_02 {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0;
    border-collapse: collapse;
    border-spacing: 0;
    vertical-align: top;
}

#Table_02 td {
    position: relative;
    vertical-align: top;
    padding: 0;
    margin: 0;

    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center top;
}


/* ========================= PANEL ========================= */

.panel {
    width: 100%;
    max-width: 1000px;
    padding: 0;
    margin: 0 auto;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out;
}


/* ========================= LINE ========================= */

.bg_line {
    margin-top: 7%;
    position: absolute;
    width: 100%;
}


/* ========================= BUS ========================= */

.bus {
    margin-top: 6%;
    position: absolute;
    width: 30%;
    max-width: 230px;
    cursor: pointer;
}


/* ========================= FLAG ========================= */

.flag {
    position: absolute;
    right: 0;
    width: 18%;
    max-width: 200px;
}


/* ========================= POPUP ========================= */

.popup {
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 100%;
    z-index: 9999;
    text-align: center;
    transform: translate(-50%, -50%);
}


/* ========================= POPUP IMAGE ========================= */

.popup img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 1000px;
}


/* ========================= MOBILE ========================= */

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

    .topSpacer {
        /*
         * ภาพ Kanto มีขนาด 1000 x 1670
         * Table_02 เริ่มหลังพื้นที่ภาพประมาณ 1580px
         */
        height: 158vw !important;
    }

    #Table_01 > tbody > tr > td {
        vertical-align: top !important;
        padding: 0 !important;
    }

    #Table_02 {
        width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        vertical-align: top !important;
    }

    #Table_02 > tbody > tr > td {
        height: 60vw !important;
        vertical-align: top !important;
        padding: 0 !important;
    }

    .bus {
        margin-top: 6%;
    }

    .bg_line {
        margin-top: 7%;
    }

}  
	  
/* ========================= DESKTOP ========================= */

.topSpacer {
    height: 1580px;
}

#Table_01 > tbody > tr > td {
    vertical-align: top;
    padding: 0;
}

#Table_02 {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0;
    border-collapse: collapse;
    border-spacing: 0;
    vertical-align: top;
}

#Table_02 > tbody > tr > td {
    vertical-align: top;
    padding: 0;
}


/* ========================= iPad + Mobile ========================= */

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

    .topSpacer {
        height: 158vw !important;
    }

    #Table_01 > tbody > tr > td {
        vertical-align: top !important;
        padding: 0 !important;
    }

    #Table_02 {
        width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        vertical-align: top !important;
    }

    #Table_02 > tbody > tr > td {
        height: 60vw !important;
        vertical-align: top !important;
        padding: 0 !important;
    }
}