@import url('https://fonts.googleapis.com/css?family=Shrikhand');
@import url('https://fonts.googleapis.com/css?family=Spectral+SC');
@import url('https://fonts.googleapis.com/css?family=Merriweather');
@import url('https://fonts.googleapis.com/css?family=Racing+Sans+One');
body{
	
}
.mainbanner{
	position: relative;
	/*background: linear-gradient(to bottom, #ffffff 0%, #3ab778 100%);*/
	/*display: inline-block;*/
	display: block;
	float: right;
	/*float: left;*/

	/*width: 60%;*/
	width: 90%;
	/*height: auto;*/
	height: 500px;
	/*margin: 0 auto;*/
	/*margin-top: 80px;*/
	/*height: auto;*/
	/*height: 350px;*/
	/*height: auto;*/
	/*padding: 1px;*/
	/*z-index: 30;*/
	/*border: 1px solid black;*/
	z-index: -1;
	/*background-image: url('../img/bannerall_background.jpg');*/
	background-image: url('../img/mainbanner_background.png');
    background-repeat: no-repeat;
    /*background-attachment: fixed;*/
    background-position: right top;
    transition: all 1s ease;
    /*opacity: 0.5;*/
	/*margin: 0 0 0 20px;*/
	/*float: left;*/
}
.add_mainbanner{
	margin-top: 20px;
}

img.mainbanner_bg{
	position: relative;
	/*position: absolute;*/
	margin: 0 0 0 0;
	width: 65%;
	/*height: 65%;*/
	/*height: auto;*/
	opacity: 1;
	border: 1px solid green;
	/*display: none;*/
}
.an_logobase{
	position: absolute;
	/*position: relative;*/
	width: 240px;
	height: 200px;
	top:80px;
	left: 350px;
	/*border: 1px solid red;*/
	opacity: 0;
	z-index: 9;
}
.an_logotop{
	position: absolute;
	/*position: relative;*/
	width: 240px;
	height: 200px;
	top:-100px;
	left: 350px;
	/*border: 1px solid green;*/
	opacity: 0;
	z-index: 9;
}
.an_nine_th{
	position: absolute;
	font-size:36px;
	/*matop:150px;*/
	margin-top: 150px;
	left: 130px;
	opacity: 0;
	/*border: 1px solid red;*/
	}
.an_nine0_th_sub{
	position: absolute;
	font-size:18px;
	/*top:70px;*/
	margin-top: 70px;
	left: 130px;
	opacity: 0;
	}
.an_nine1_th,.an_nine2_th,.an_nine3_th,.an_nine4_th,
.an_nine5_th,.an_nine6_th,.an_nine7_th,.an_nine8_th,.an_nine9_th{
	position: absolute;
	font-size:24px;
	/*top:50px;*/
	margin-top: 70px;
	left: 130px;
	opacity: 0;
	}
.an_nine1_th_sub,.an_nine2_th_sub,.an_nine3_th_sub,.an_nine4_th_sub,.an_nine5_th_sub,
.an_nine6_th_sub,.an_nine7_th_sub,.an_nine8_th_sub,.an_nine9_th_sub{
	position: absolute;
	font-size:16px;
	color: white;
	/*top:300px;*/
	/*margin-top: 470px;*/
	margin-top: 27%;
	margin-left: -7%;
	letter-spacing: 1.1px;
	/*background-color: rgba(0, 0, 255, 0.3);*/
	background-color: rgba(0, 77, 0,0.7);
	opacity: 0;
	padding: 0 5px 0 5px;
	z-index: 50;
	}
.an_banner0,.an_banner1,.an_banner2,.an_banner3,.an_banner4,.an_banner5,
.an_banner6,.an_banner7,.an_banner8,.an_banner9{
	position: absolute;
    /*margin: 0;*/
    width: 80%;
    top:150px;
    left: 4%;
    height: auto;
    opacity: 1;
    z-index: -1;
    opacity: 0;
}
.add_an_banner{
	width: 100%;
	height: 90%;
	top: 80px;
	opacity: 1;
}
.banner_index{
	position: relative;
	/*position: absolute;*/
	margin: 7% 0 0 12%;
	width: 65%;
	height: 65%;
	opacity: 0;
}
#n_replay{
	position: absolute;
	/*width: 200px;*/
	font-size: 56px;
	color: red;
	top:150px;
	left: 47%;
	opacity: 0;
	}
 .zindex6{
            z-index: 6;
            background-color: red;
        }
}
}
}
.mainpagelogo{
	float: left;
	display: block;
	width: 1360px;
	margin: 0 auto;
	/*border: 1px solid red;*/
}
.mainpagelogo1024{
	float: left;
	display: block;
	width: 1024px;
	margin: 0 auto;
	/*border: 1px solid green;*/
}

div.test_font{
	/*transform: translateX(50%);*/
	/*transform: translateY(500px);*/
	transform: translate(200px,);
	position: absolute;
	top: 50%;
	left: 50%;
	font-family: 'Shrikhand', cursive;
	font-size: 24px;
}
.text_intro{
	/*font-family: 'Spectral SC', serif;*/
	/*font-family: 'Merriweather', serif;*/
	font-family: 'Kanit', sans-serif;
	font-size: 40px;
	/*color: #009933;*/
	color: #009548;
	list-style: none;
	position: absolute;

	top: 450px;
	left: 300px;
	/*left:0px;*/
	text-align: center;
	transition: all 2.5s ease;
	/*border: 1px solid pink;*/
}
.text_intro li{
	display: inline-block;
	opacity: 1;
	transition: all 2.5s ease;
}
.text_intro.hidden li{
	opacity: 0.2;
}
img{
	/*width: 30px;
	height: 30px;*/
}
/*.text.hidden li{
	display: inline-block;
	margin: 0 0 0 20px;
}*/
.text_intro.hidden li:nth-child(1){transform: translateX(-300px) translateY(-300px);}
.text_intro.hidden li:nth-child(2){transform: translateX(250px) translateY(-250px);}
.text_intro.hidden li:nth-child(3){transform: translateX(-350px) translateY(180px);}
.text_intro.hidden li:nth-child(4){transform: translateX(200px) translateY(10px);}
.text_intro.hidden li:nth-child(5){transform: translateX(-250px) translateY(100px);}
.text_intro.hidden li:nth-child(6){transform: translateX(20px) translateY(-180px);}
.text_intro.hidden li:nth-child(7){transform: translateX(100px) translateY(-140px);}
.text_intro.hidden li:nth-child(8){transform: translateX(-50px) translateY(-100px);}
.text_intro.hidden li:nth-child(9){transform: translateX(160px) translateY(10px);}
.text_intro.hidden li:nth-child(10){transform: translateX(300px) translateY(-90px);}
.text_intro.hidden li:nth-child(11){transform: translateX(-300px) translateY(-80px);}
.text_intro.hidden li:nth-child(12){transform: translateX(350px) translateY(-300px);}
.text_intro.hidden li:nth-child(13){transform: translateX(-350px) translateY(120px);}
.text_intro.hidden li:nth-child(14){transform: translateX(-160px) translateY(-50px);}
.text_intro.hidden li:nth-child(15){transform: translateX(-30px) translateY(-60px);}
.text_intro.hidden li:nth-child(16){transform: translateX(-300px) translateY(120px);}
.text_intro.hidden li:nth-child(17){transform: translateX(-350px) translateY(-220px);}
.text_intro.hidden li:nth-child(18){transform: translateX(-180px) translateY(150px);}
.text_intro.hidden li:nth-child(19){transform: translateX(-50px) translateY(150px);}
.text_intro.hidden li:nth-child(20){transform: translateX(130px) translateY(-120px);}
.text_intro.hidden li:nth-child(21){transform: translateX(350px) translateY(-100px);}

.textred{
	text-shadow: 2px 2px 2px black;
	color: #ccffe5;
	font-family: 'Shrikhand', cursive;
}
.texttop{
	/*top: 250px;*/
}

.myDIV {
    /*background-color: coral;*/
    /*color: white;*/
    -webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
    animation: mymove 5s infinite;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
    50% {
    	/*box-shadow: 10px 20px 30px blue;*/
    	top:430px;
    }
}

/* Standard syntax */
@keyframes mymove {
    50% {
    	/*box-shadow: 10px 20px 30px blue;*/
    	top:430px;
    }
}
.boxintro{
	width: 1360px;
	position: relative;
	margin: 0 auto;
	/*border: 1px solid red;*/
}
img.imglogo{
	width: 350px;
	height: 280px;
	position: absolute;
	top:180px;
	left: 41%;
	transition: all 2.5s ease; 
	/*border: 1px solid green;*/
}
img.imglogo_top{
	width: 350px;
	height: 280px;
	position: absolute;
	top: 180px;
	/*top:220px;*/
	left: 41%;
	/*opacity: 0.5;*/
	transition: all 1s ease; 
	/*border: 1px solid blue;*/
}
img.imglogo_top_befror{
	top:-200px;
}
.imglogo_before{
	opacity: 0;
}
.imglight{
	position: absolute;
	width: 500px;
	height: 550px;
	position: absolute;
	top:-2px;
	left: 385px;
	transition: all 2.5s ease; 
	opacity: 0;
	z-index: -1;
	/*transition: all 2.5s ease; */
}
.imglight_before{
    -webkit-animation: mylight 10s infinite; /* Chrome, Safari, Opera */
    animation: mylight 10s infinite;
    /*border: 1px solid red;*/
}

/* Chrome, Safari, Opera */
@-webkit-keyframes mylight {
    50% {
    	/*box-shadow: 10px 20px 30px blue;*/
    	z-index: 1;
    	opacity: 1;
    	transform: rotate(-360deg);
    }
}
@keyframes mylight {
    50% {
    	/*box-shadow: 10px 20px 30px blue;*/
    	/*opacity: -0.5;*/
    	z-index: 1;
    	opacity: 1;
    	transform: rotate(-360deg);
    }
}
img.lightline{
	position: absolute;
	width: 100px;
	height: 130px;
	top: 450px;
	left: 20%;
	/*border: 1px solid green;*/
	/*transition: all 2.5s ease;*/
	z-index: 1;

}
.lightline_wheel {

    -webkit-animation: mylightwheel 15s infinite; /* Chrome, Safari, Opera */
    animation: mylightwheel 15s infinite;
}
@-webkit-keyframes mylightwheel {
    50% {
    	/*box-shadow: 10px 20px 30px blue;*/
    	left: 80%;
    	z-index: 1;
    }
}
@keyframes mylightwheel {
    50% {
    	/*box-shadow: 10px 20px 30px blue;*/
    	/*opacity: -0.5;*/
    	left: 80%;
    	z-index: 1;
    }
}

img.lightline_for_index{
	position: absolute;
	/*width: 220px;*/
	width: 270px;
	height: auto;
	/*top: 0%;*/
	margin-top: 30px;
	/*margin-left: 780px;*/
	margin-left: 59%;
	/*left: 1346px;*/
	/*transition: all 2.5s ease;*/
	z-index: 6;
	/*border: 2px solid green;*/
}
img.lightline_for_index2{
	position: absolute;
	/*width: 220px;*/
	width: 270px;
	height: auto;
	/*top: 0%;*/
	margin-top: 0px;
	/*margin-left: 780px;*/
	margin-left: 9%;
	opacity: 0.5;
	/*left: 1346px;*/
	/*transition: all 2.5s ease;*/
	z-index: 6;
	/*border: 2px solid green;*/
}

.lightlineindex {
    -webkit-animation: mylightwheel_index 12s infinite; /* Chrome, Safari, Opera */
    animation: mylightwheel_index 12s infinite;
}
@-webkit-keyframes mylightwheel_index {
    50% {
    	/*z-index: 1;*/
    	transform: rotate(-360deg);
    	/*opacity: 0;*/
    }
}
@keyframes mylightwheel_index {
    50% {
    	/*z-index: 1;    	    	*/
    	transform: rotate(-360deg);
    	opacity: 0;
    }
}


.lightlineindex2 {
    -webkit-animation: mylightwheel_index2 12s infinite; /* Chrome, Safari, Opera */
    animation: mylightwheel_index2 12s infinite;
}
@-webkit-keyframes mylightwheel_index2 {
    50% {
    	/*z-index: 1;*/
    	transform: rotate(360deg);
    }
    100% {
    	/*z-index: 1;*/
    	transform: rotate(360deg);
    }
}
@keyframes mylightwheel_index2 {
    50% {
    	/*z-index: 1;    	    	*/
    	transform: rotate(360deg);
    	/*opacity: 0;*/
    }
    100% {
    	/*z-index: 1;*/
    	transform: rotate(360deg);
    }
}


/* Chrome, Safari, Opera */
@-webkit-keyframes myopa {
    50% {
    	/*box-shadow: 10px 20px 30px blue;*/
    	opacity: 0.5;
    }
}
@keyframes myopa {
    50% {
    	/*box-shadow: 10px 20px 30px blue;*/
    	/*opacity: -0.5;*/
    	opacity: 0.5;
    }
}
a#goweb{
	font-family: 'Racing Sans One', cursive;
	font-size: 28px;
	position: relative;
	/*border: 1px solid black;*/
	clear: both;
	float: left;
	color: #009548;
	margin: 0 0 0 620px;
	/*text-align: center;*/
	top:650px;
	text-decoration: none;
	text-shadow: 1px 1px 1px black;
	transition: all 1.5s ease;
}
a#goweb:hover{
	color: #00ff00;
	letter-spacing: 3px;
}
@media screen and (max-width: 1360px) {
	.boxintro{
	width: 1024px;
}
.an_logobase{
	width: 190px;
	height: 150px;
	top:80px;
	left: 250px;
}
.an_logotop{
	width: 190px;
	height: 150px;
	top:-100px;
	left: 250px;
}
.mainbanner{
	height: 320px;
}
img.mainbanner_bg{
	/*height: 250px;*/
}

img.lightline_for_index{
	margin-top: 0px;
	margin-left: 550px;
}
.an_logobase{
	display: none;
}
.an_logotop{
	display: none;
	}
/*.an_logobase{
	width: 240px;
	height: 200px;
	margin: 0 0 0 0;
}
.an_logotop{
	width: 240px;
	height: 200px;
	margin: 0 0 0 0;
}*/

	a#goweb{
		top:550px;
		/*float: left;*/
		/*text-align: center;*/
		margin: 0 0 0 450px;
		z-index: 1;
	}
	.text_intro{
		left: 180px;
		font-size: 32px;
	}
	img.imglogo{
	width: 350px;
	height: 280px;
	position: absolute;
	top:180px;
	left: 370px;
	transition: all 2.5s ease;
}
img.imglogo_top{
	width: 350px;
	height: 280px;
	position: absolute;
	top: 180px;
	left: 370px;
	transition: all 1s ease;
}
img.imglogo_top_befror{
	top:-200px;
}

.an_nine_th{
	font-size: 24px;
}
.an_nine1_th{
	font-size: 18px;
}
.an_nine2_th{
	font-size: 18px;
}
.an_nine3_th{
	font-size: 18px;
}
.an_nine5_th{
	font-size: 18px;
}
.an_nine6_th{
	font-size: 18px;
}
.an_nine7_th{
	font-size: 18px;
}
.an_nine8_th{
	font-size: 18px;
}
.an_nine9_th{
	font-size: 18px;
}
.banner_index{
	/*position: absolute;
	top:120px;
	left: 0px;
	width: 100%;
	height: 210px;
	opacity: 0;*/
}
.imglight{
	/*position: absolute;*/
	width: 400px;
	height: 400px;
	/*position: absolute;*/
	top:80px;
	left: 240px;
	border: 1px solid red;
}
.imglight_before{
    -webkit-animation: mylight 10s infinite; /* Chrome, Safari, Opera */
    animation: mylight 10s infinite;
    /*border: 1px solid red;*/
}
}

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

	.boxintro{
	width: 800px;
}
.mainbanner{
	height: 280px;
}

.an_nine1_th_sub,.an_nine2_th_sub,.an_nine3_th_sub,.an_nine4_th_sub,.an_nine5_th_sub,
.an_nine6_th_sub,.an_nine7_th_sub,.an_nine8_th_sub,.an_nine9_th_sub{
	display: none;
}
	.text_intro{
		left: 10%;
		font-size: 28px;
	}
	img.imglogo{
	width: 350px;
	height: 280px;
	position: absolute;
	top:180px;
	left: 28%;
	transition: all 2.5s ease;
}
img.imglogo_top{
	width: 350px;
	height: 280px;
	position: absolute;
	top: 180px;
	left: 28%;
	transition: all 1s ease;

}
img.imglogo_top_befror{
	top:-200px;
}
img.lightline_for_index{
	/*margin-top: 75px;
	margin-left: 74%;*/
	display: none;
}
.imglight{
	position: absolute;
	width: 350px;
	height: 350px;
	position: absolute;
	top:102px;
	left: 122px;
	transition: all 2.5s ease;
	opacity: 0;
	z-index: -1;
	/*transition: all 2.5s ease; */
}
.imglight_before{
    -webkit-animation: mylight 10s infinite; /* Chrome, Safari, Opera */
    animation: mylight 10s infinite;
    /*border: 1px solid red;*/
}
img.lightline{
	position: absolute;
	width: 100px;
	height: 100px;
	top: 450px;
	left: 20%;
	border: 1px solid green;
	/*transition: all 2.5s ease;*/
	z-index: 1;

}
.an_nine_th{
	font-size: 20px;
}
.an_nine1_th,.an_nine2_th,.an_nine3_th,.an_nine4_th,
.an_nine5_th,.an_nine6_th,.an_nine7_th,.an_nine8_th,.an_nine9_th{
	font-size: 16px;
}
.an_nine0_th_sub{
	font-size: 14px;
	margin-left: 1%;
}
.an_nine1_th_sub,.an_nine2_th_sub,.an_nine3_th_sub,.an_nine4_th_sub,
.an_nine5_th_sub,.an_nine6_th_sub,.an_nine7_th_sub,.an_nine8_th_sub,.an_nine9_th_sub{
	font-size: 14px;
	margin-left: 1%;
	margin-top: -100px;
}
}
@media screen and (max-width: 800px) {
	.boxintro{
	width: 600px;
}
.mainbanner{
	height: 220px;
}
	a#goweb{
		top:600px;
		/*float: left;*/
		margin: 0 0 0 200px;
	}
	.text_intro{
		left: 130px;
		/*float: left;*/
		font-size: 16px;
	}
	img.imglogo{
	width: 280px;
	height: 210px;
	position: absolute;
	top:220px;
	left: 180px;
	transition: all 2.5s ease;
}
img.imglogo_top{
	width: 280px;
	height: 210px;
	position: absolute;
	top: 220px;
	left: 180px;
	transition: all 1s ease;

}
img.imglogo_top_befror{
	top:-200px;
}
.imglight{
	/*position: absolute;*/
	width: 280px;
	height: 280px;
	/*position: absolute;*/
	top:150px;
	left: 105px;
	transition: all 2.5s ease;
	opacity: 0;
	z-index: -1;
	/*transition: all 2.5s ease; */
}
img.lightline{
	position: absolute;
	width: 100px;
	height: 100px;
	top: 430px;
	left: 20%;
}
.an_nine0_th_sub{
	display: none;
}
.an_nine_th,.an_nine1_th,.an_nine2_th,.an_nine3_th,
.an_nine5_th,.an_nine6_th,.an_nine7_th,.an_nine8_th,.an_nine9_th{
	top: 40px;
	font-size: 16px;
}
.an_nine1_th_sub,.an_nine2_th_sub,.an_nine3_th_sub,.an_nine4_th_sub,
.an_nine5_th_sub,.an_nine6_th_sub,.an_nine7_th_sub,.an_nine8_th_sub,.an_nine9_th_sub{
	width: 96%;
	margin-top: -140px;
	font-size: 12px;
}
}
@media screen and (max-width: 600px) {
	.boxintro{
	width: 320px;
}
.mainbanner{
	display: none;
}
a#goweb{
		top:600px;
		/*float: left;*/
		top:20px;
		font-size: 24px;
		margin: 0 0 0 100px;
	}
	.text_intro{
		left: 10px;
		/*float: left;*/
		width: 88%;
		font-size: 14px;
	}
	img.imglogo{
	width: 200px;
	height: 160px;
	position: absolute;
	top:220px;
	left: 70px;
	transition: all 2.5s ease;
}
img.imglogo_top{
	width: 200px;
	height: 160px;
	position: absolute;
	top: 220px;
	left: 70px;
	transition: all 1s ease;

}
img.imglogo_top_befror{
	top:-200px;
}
.imglight{
	/*position: absolute;*/
	width: 160px;
	height: 160px;
	/*position: absolute;*/
	top:190px;
	left: 37px;
	transition: all 2.5s ease;
	opacity: 0;
	z-index: -1;
	/*transition: all 2.5s ease; */
}
img.lightline{
	position: absolute;
	width: 100px;
	height: 100px;
	top: 430px;
	left: 20%;
}
.an_nine_th,.an_nine1_th,.an_nine2_th,.an_nine3_th,
.an_nine5_th,.an_nine6_th,.an_nine7_th,.an_nine8_th,.an_nine9_th{
	display: none;
}
}