/*=================== BODY===================*/
body{width:100%;
	height:100%; 
	background-color: #fff; 
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; 
	line-height: 1.42857143; 
	color: #bebebe; 
	margin: 0 auto;
	overflow-y: auto;
	word-break:keep-all;
	}

a {text-decoration: none; color: #909090}

label {text-decoration: none; color: #909090}

li{list-style:none;}


/*=================== BANNER ===================*/


.banner{overflow: hidden;
	position:absolute;
	z-index: -1;
	width: 100%;
	height: 450px;
	padding: 0;
	border: 0;
	vertical-align: baseline;
	text-align:center;
	background-color: #fff; 
	margin-top:-56px;
	}


.banner_mob {display:none;}

.ani{background-color: #4a4a4a; }

.banner_ani{position: absolute;
	width: 2260px;
	height: 1140px;
	left: 50%;
	top: 50%;
	margin-left: -1130px;
	margin-top: -570px;
	opacity: 0.4;
 
	}

.banner_img{position: absolute;
	width: 2260px;
	height: 760px;
	left: 50%;
	top: 50%;
	margin-left: -1130px;
	margin-top: -380px;
	opacity: 0.5;
	}


	
	
.banner_map{overflow: hidden;
	position: absolute;
	z-index: -1;
	width: 100%;
	height: 690px;
	padding: 0;
	border: 0;
	vertical-align: baseline;
	text-align:center;
	background-color: #fff; 
		}
	
#map {
    width: 99%;
    height: 680px;
	margin:0 auto; 
    margin-top:10px;
    border-radius: 30px 30px 0px 0px;
}


/*=================== TOP ===================*/
.top{width: 900px;
	background-color: #fff; 
	height:54px;
	border-radius: 0px 0px 30px 30px; 
	border: 2px solid #c3c3c3; 
	margin: 0 auto;
	margin-top: -2px;
	}

.bi {float: left;
	width: 105px; 
	margin-top: 8px;
	margin-left: 26px;
	animation-duration: 2s; 
	animation-name: fade-in;}

.bi img{width: 110px;}


/*=================== LANGUAGE ===================*/

.language{float:right;
	margin-top: -40px;
	margin-right: 20px;
	width: 120px;
	height: 30px;
	font-size: 13px;
	line-height:2;
	}

.language img{width:22px;
	margin-top: -3px;
	vertical-align:middle;
	}

.language label{color:#fff;
	padding: 7px 14px 7px 3px;
	background-color: rgba(35, 35, 35, 0.5);
	border-radius: 15px;
}


/*=================== MEMU ===================*/
.menu{float:right;
	text-align:center; 
	margin: 0 auto;
	margin-right: 20px;
	background-size: 100%;
	animation-duration: 1.5s; 
	animation-name: fade-in;
	}

.menu a, .menu label {padding:0px 10px 0 10px; 
	font-size:13px; 
	height:54px; 
	display:table-cell;vertical-align:middle;
	cursor:pointer;
	}

.menu a:hover, .menu a:focus, .menu label:hover, .menu label:focus{color:#d80c25;
	border-bottom: 2px solid #d80c25;
	}

.menu li {float:left;}

.toggle_btbox{padding:2px; color:#909090;}

.toggle_btbox a{height : 20px; padding:6px; font-size:12px;}

.toggle_btbox a:hover, .toggle_btbox a:focus{color:#d80c25; border-bottom: 0px;}

#toggle_button, #toggle_contents {height:0; overflow:hidden; position:absolute; margin-top:10px; }

#toggle_button:checked + #toggle_contents {margin-left: 608px;
				margin-top: 52.5px;
				height: auto;
				padding: 7px 0;
				border-top: 2px solid #d80c25;
				background-color: #ffffff;
				border-radius: 0 0 15px 15px;
				opacity:0.85;
			  	animation-duration: 0.5s; 
				animation-name: fade-in2;	
				}







/*=================== LANGUAGE_TOGGLE ===================*/

.toggle_lanbox{padding:2px; color:#909090;}

.toggle_lanbox img{width:20px; border:1px solid rgba(35, 35, 35, 0.2);  vertical-align:middle; 	margin-top: -2px;}

.toggle_lanbox a{color:#909090; border: none; outline:0px; height : 20px; padding:6px; font-size:12px; background-color: rgba(0,0,0,0); }

.toggle_lanbox a:hover, .toggle_lanbox a:focus{color:#d80c25; border:0;}

#toggle_language, #toggle_languages {height:0; overflow:hidden; position:absolute; margin-top:10px; }

#toggle_language:checked + #toggle_languages {
				width:93px;
				margin-left: 786px;
				margin-top: 52.5px;
				height: auto;
				padding: 7px 0;
				border-top: 2px solid #d80c25;
				background-color: #ffffff;
				border-radius: 0 0 15px 15px;
				opacity:0.85;
			  	animation-duration: 0.5s; 
				animation-name: fade-in2;	
				}







/*=================== BANNER_TXT ===================*/

.banner_txt1{height: 50px; 
	margin-top: 140px;
	text-align:center; 
	color: #fff;
	font-size : 42px;
	font-weight:800;
	text-shadow: rgba(0, 0, 0, 0.7) 0px 0px 8px;
	}

.banner_txt2{height: 240px; 
	margin-top: 154px;
	text-align:center; 
	color: #fff;
	font-size : 38px;
	font-weight:600;
	text-shadow: rgba(0, 0, 0, 0.9) 0px 0px 8px;
	}



/*=================== COMPANY_TXT ===================*/
.company_txt1{height: 32px; 
	margin-top: 36px;
	text-align:center; 
	color: #000;
	font-size : 30px;
	font-weight:800;
	}

.company_txt2{height: 22px; 
	margin-top: 10px;
	text-align:center; 
	color: #000;
	font-size : 20px;
	letter-spacing:12px;
	}

.company_txt3{width: 840px;
	height: 60px; 
	margin: 0 auto;
	margin-top: 30px;
	color: #808080;
	font-size : 12px;
	line-height:2;
	}


.company_txt5{height: 32px; 
	margin-top: 46px;
	text-align:center; 
	color: #000;
	font-size : 30px;
	font-weight:800;
	}

.company_vision{width: 900px;
	height: 188px;
	margin: 0 auto;
	}

.company_vision ul{text-align:center; padding:0;}

.company_vision li{float:left;
	padding: 0 39px 0 39px;
	}

.company_circle{width: 145px;
	height: 145px;
	border-radius: 50%;
	background-color: #d80c25; 
	display:table-cell;vertical-align:middle;
	color: #fff;
	font-size: 18px;
	font-weight: 600;
	}


/*=================== COMPANY_DETAIL ===================*/
.company_detail{width: 900px;
	height:420px;
	margin:0 auto;
	margin-top:60px;
	}

.company_detail li{float:left; width: 440px; margin-top:20px;}
.company_detail span{font-weight:600; color:#000;}

.detail_image{width:420px; 
	height:420px; 
	float:left;
	margin-top:20px;}

.detail_image img{width:380px;}

.company_txt4{width: 420px;
	margin: 0 auto;
	margin-bottom: 35px;
	color: #808080;
	font-size : 12px;
	line-height:1.8;
	}


/*=================== GAME_TXT ===================*/

.game_txt1{height: 32px; 
	margin-top: 36px;
	text-align:center; 
	color: #000;
	font-size : 30px;
	font-weight:800;
	}

.game_txt{width: 880px;
	height:276px;
	margin:0 auto;
	margin-top:50px;
	}

.game_txt img{width:210px;}

.game_txt_image {width:430px; 
	height:220px; 
	float:left;
	}

.game_txt_image img{width:400px; border-radius: 12px;}

.game_txt2{float:left;
	width: 440px;
	margin: 0 auto;
	height:164px;
	color: #696969;
	font-size : 14px;
	line-height:1.8;
	}

.game_txt3{float:left;
	width: 450px;
	margin: 0 auto;
	letter-spacing: 24px;
	}

/*=================== SPLIT_LINE  ===================*/

.split_line{width: 100%; 
	height:2px;
	margin-top: 2px;
	background-color: #d80c25;
	}

.split_line2{width: 900px; 
	height:1px;
	margin: 0 auto;
	margin-top: 60px;
	background-color: #d80c25;
	}

.split_line3{width: 100%; 
	height:2px;
	background-color: #d80c25;
	position:absolute;
	margin-top: 694px;
	}

/*===================  GAME SHORTCUT ===================*/

.list_main{width: 880px; 
	height:480px;
	margin: 0 auto;
	margin-top: 60px;
	border: 1px solid #c3c3c3; 
	background-color: #ededed;
	text-align:center; 
	color:#474747;
	animation-duration: 2s; 
	animation-name: fade-in;
	}

.list_main_bg1{width: 880px; 
	height:380px;
	background-image: url(../images/game_image1.png);
	background-position-x: center;
	background-position-y: -25px;
	background-size: 880px;
	}

.list_main_bg2{width: 880px; 
	height:380px;
	background-image: url(../images/game_image2.png);
	background-position-x: center;
	background-position-y: -20px;
	background-size: 880px;
	}

.more{    position: absolute;
	margin-top: 74px;
	margin-left: 812px;
	width: 60px; 
	height:18px;
	border-radius: 9px; 
	background-color: #a1a1a1;
	line-height: 1.2; 
	font-size:14px;
	}

.more a {color:#fff;}

.sub{ margin-top: 13px; font-size:20px; font-weight:800;}
.txt{ margin-top: 10px; font-size:14px; font-weight:100;}


/*=================== GAME_MOV ===================*/

.game_mov {width: 880px; 
	height: 496px; 
	margin: 0 auto;
	margin-top: 70px;
	border: 1px solid #c3c3c3; 
	background-color: #ededed;
	}


/*=================== GAME_SCREENSHOT ===================*/

.game_sc{width:900px;
	margin: 0 auto;
	margin-top: 40px;
	color: #474747;
	font-size : 18px;
	font-weight:800;
	line-height:3;
	letter-spacing:50px;
}

.game_sc li {width : 400px; letter-spacing:1px; padding:0;}

.game_sc img {width : 260px; border-radius:12px;}


/*===================FOLLOWS ===================*/
.game_follow{width:900px;
	height:30px;
	margin: 0 auto;
	margin-top: 60px;
	margin-bottom: 60px;
	color: #474747;
	font-size : 18px;
	font-weight:800;
}

.game_follow span {float:left; padding: 0 60px 0 0;}



.game_follow_detail {float:left; 
	padding: 0 40px 0 0;
	margin-top:2px;
	font-size : 15px;
	font-weight:100;
	display:table-cell;vertical-align:middle;
}

.game_follow_detail a {color: #d80c25;}
.game_follow_detail li {float:left; }

.game_follow_detail img{width:24px; float:left; padding : 0 10px 0 0;}


/*===================CI_DETAIL ===================*/

.ci_detail{width: 100%; 
	height:780px;
	margin-top: 70px;
	background-color: #909090;
	font-size: 14px;
	
	}
.ci_detail img{float:left; width: 440px; padding: 0 20px 20px 0;}

.ci_detail ul {width: 900px; margin: 0 auto; padding: 50px 0 50px 0;}

.ci_detail li {float:left; color:#fff;}

.ci_detail li img{width:200px;}

.detail_txt_1{font-size:14px;
	font-weight:600;
	margin-top:20px;
	}

.detail_txt_2{font-size:13px;
	font-weight:200;
	margin-top:12px;
	margin-bottom:24px;
	line-height:1.8;
	opacity:0.7;
	}

.detail_color{width:300px; float:left; color:#fff; font-size:12px; }

.detail_color li {width:65px;}

.circle_red {border-radius: 50%; 
	width:70px;
	height:70px;
	margin-bottom:10px;
	background-color: #da2032;
	}

.circle_white {border-radius: 50%; 
	width:70px;
	height:70px;
	margin-bottom:10px;
	background-color: #fff;
	}

.circle_black {border-radius: 50%; 
	width:70px;
	height:70px;
	margin-bottom:10px;
	background-color: #000;
	}
/*===================CONTACT ===================*/

.contact{width: 100%; 
	height:136px;
	margin-top: 70px;
	background-color: #676767;
	font-size: 14px;
	}

.contact ul{width:920px; margin: 0 auto; margin-top: -15px;}

.contact li{float:left; }

.contact_sub{padding : 15px 0 10px 0;
	font-size: 16px; 
	font-weight:800;
	}
.contact_txt{padding: 5px 50px 0px 15px;}

.icon{width:50px;
	height:50px;
	border-radius: 50%;
 	background-color: #fff;
	text-align:center; 
	display:table-cell;vertical-align:middle;
	}

.contact strong{color:#fff; font-weight:400}

.contact2{width: 100%; 
	height:130px;
	top: 756px;
	position:absolute;
	background-color: #676767;
	font-size: 14px;
	}

.contact2 ul{width:920px; margin: 0 auto; }

.contact2 li{float:left; }



/*===================FORM MAIL ===================*/

.mail{width: 100%; 
	height:620px;
	position:absolute;
	top: 630px;
	font-size: 18px;
	color: #474747;
	font-weight:800;
	line-height:2;
	}

.mail ul{width: 920px; margin: 0 auto;}

.mail li{float:left; font-size: 13px;}


.select_span{padding:0 30px 0 0; font-size: 15px;}

.mail_category{width:240px; 
	color: #474747; 
	font-weight:200; 
	line-height:2.8;
	padding: 0 0 0 8px; 
	}


.form_line{width : 900px; padding: 6px 0;}

.form{width: 640px;
	height: 32px;
	background-color: #e9e9e9;
	padding: 4px 10px 4px 10px ;
	border: 0px;
	font-weight: 200;
	color:#474747;
	}

.text {width: 610px; padding: 2px 15px 2px 15px ;}

.detail{height: 230px;}

.adds {width: 640px;
	height: 36px;
	background-color: #e9e9e9;
	border: 0px;
	font-weight: 800;}

.adds_btn{ float:right; 
	right:0;
	width:36px; 
	height:36px; 
	background-color:#d80c25;
	color:#fff;
	font-size:24px; 
	text-align:center;
	line-height:1.4;
	cursor: pointer;
	}

.adds_span{padding:0; }

.adds_btn:hover, .adds_btn:focus { background-color:#676767; transition:all 0.3s, color 0.2s 0.2s;}

.adds_text{ background-color:#e9e9e9; 
	border:0px; 
	width:88%; 
	height:36px; 
	padding:0 15px;
	}

.adds_btn_hidden{position:absolute; 
	width:0; 
	height:0; 
	overflow:hidden;
	}


.send_btn{ background-color:#d80c25;
	border:0px; 
	width : 320px;
	height: 36px;
	cursor: pointer;
	color:#fff;
	font-size:16px;
	font-weight:600;
	letter-spacing:4px;
	}

.send_btn:hover, .send_btn:focus { background-color:#676767; transition:all 0.3s, color 0.2s 0.2s;}

.reset{background-color:#8f8f8f;}

.form_confirm{width : 890px; text-align:right; margin-top:70px;}

/*=================== BOTTOM ===================*/

.bottom{width: 100%; 
	height:auto;
	background-color: #d80c25;
	padding-bottom: 8px;
	}

.bottom ul{width:920px; margin: 0 auto; dispaly:inline;}

.bottom_ci{float: left;
	width:240px;
	margin-top:46px;
	margin-bottom:46px;
	}




.bottom_ci img{width:160px;}



.bottom_ci_en{float: left;
	width:240px;
	margin-top:18px;
	margin-bottom:5px;
	}
.bottom_ci_en img{width:160px;}



.bottom_menu{
	color:#fff;  
	font-weight:400; 
	font-size: 14px;
	padding:10px 0 10px 0;}

.bottom_menu a {color:#fff;}
.bottom_menu span{color:#fff;}

.bottom li{width:630px; color:#f0b9bd; font-size: 12px; line-height: 1.8; }

.btm_btn{float: right;
	width:110px;
	height:16px;
	border-radius: 8px;
	background-color: #fff;
	line-height: 1.4;
	text-align:center;}

.btm_btn a {color:#d80c25;  font-size: 12px;}


.bottom2{width: 100%; 
	position:absolute;
	top:886px;
	background-color: #d80c25;
	}

/*=================== TERMS ===================*/

.terms{ width: 860px; 
	margin:0 auto;
	margin-top: 60px;
	margin-bottom: 100px;
	padding: 30px 10px ;
	font-size: 13px;
	color:#4d4d4d;
	line-height:2.4;
	border-top: 1px solid #d80c25;
	border-bottom: 1px solid #d80c25;
	}

.terms li{	font-size: 18px;
	font-weight:800;
	height: 80px;
	}


/*=================== LAYER_POPUP ===================*/

.black_overlay{
    display: none;
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index:1001;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=80);
    animation-duration: 0.5s; 
    animation-name: fade-in2;
}

.white_content {
    display: none;
    position:  fixed;
    width:400px;
    top: 50%;
    left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
    padding: 4px 4px 12px 4px;
    background-color: white;
    z-index:1002;
    overflow: auto;
    animation-duration: 0.8s; 
    animation-name: fade-in;
    border-radius:20px;
}

.white_content img{width:100%; padding-bottom:5px; border-radius:15px 15px 0 0;}

.white_content a{color:#fff;
	padding : 6px 60px;
	border-radius:18px;
	background-color:#d80c25;
	}

/*=================== ANIMATION ===================*/

@keyframes fade-in {
	0% {opacity: 0}
	100% {opacity: 1}
	}

@keyframes fade-in2 {
	0% {opacity: 0}
	100% {opacity: 0.8}
	}

@keyframes left-right {
	0% {margin-left: 0.7%; opacity: 0}
	100% {margin-left: 2.9%; opacity: 1}
	}