@charset "utf-8";
/* CSS Document */
html, div, map, dt, isindex, form {
}
/* Make HTML 5 elements display block-level for consistent styling */  
header, nav, article, footer, address {  
    display: block;  
}

body {
	margin: 0px;
	font-size: 14px;
	color: #000000;
	font-family: "微軟正黑體", "Microsoft JhengHei", arial, helvetica, clean, Verdana, Geneva, sans-serif;
	line-height: 1.8em;
	background-color: #000000;
	background-image: url(../img/site_bg.jpg);
	background-repeat: repeat;
	width: 100%;
	z-indwx: -1;
}
img {
	height: auto;
	max-width: 100%;
	border: 0px; 
}
ul{
	margin: 0px;
	padding: 0px;
}
p {
	padding-top: 0px;
} 
a{
	-moz-transition: color 0.3s ease-out;
	-webkit-transition: color 0.3s ease-out;
	-o-transition: color 0.3s ease-out;
	-ms-transition: color 0.3s ease-out;
	transition: color 0.3s ease-out;
	color: #fff;
	text-decoration: none;

}
a:hover{
	color: #FF3300;
	text-decoration: none;
}
h1{
	padding: 0px;
	font-size: 18px;
	font-weight: bold;
}
.txt_style_1{
	color: #F7CE71;
	text-align: center;
	line-height: 1.2em;
}
.txt_style_2{
	color: #00ffcc;
}
.txt_style_3{
	color: #fff;
	font-size: 18px;
	font-weight: 400;
}
.txt_style_4{
	color: #D9B168;
	font-weight: 400;
}

/***飄***/
.cherry{
	/**z-index: 300;**/
	position: absolute;
	height: 100%;
	width: 100%;
}
#yinghua {
	width: 50px;
	height: 50px;
	opacity: 0.8;
	top: -50%;
	position: absolute;
    /*-webkit-transform:rotate3d(.6,1,.6,45deg);*/
    /*-moz-transform:rotate3d(.6,1,.6,45deg);*/
    /*-ms-transform:rotate3d(.6,1,.6,45deg);*/
    /*-o-transform:rotate3d(.6,1,.6,45deg);*/
    /*transform:rotate3d(.6,1,.6,45deg);*/
}#yinghua img{
	opacity: 0.9;
	top:-20%;
}
/********/
.gototop {
	width: 50px;
	height: 50px;
	line-height: 42px;
	font-family: verdana;
	text-align: center;
	color: #fff;
	position: fixed;
	z-index: 9999;
	bottom: 2%;
	right: 10px;
	border-radius: 50%;
	text-decoration: none;
	cursor: pointer;
	display: block;
	background-color: rgba(0, 153, 153, 1);
    /*先隱藏*/
}
/****頂端置底提示按鈕***/
.btn_down_container{
	display: block;
	height: auto;
	position: absolute;
	bottom: 0px;
	width: 100%;
}
.btn_down{
	display: block;
	height: 210px;
	width: 414px;
	margin-right: auto;
	margin-left: auto;
	position: relative;
	cursor: pointer;
}
.btn_down .img_container{
	opacity: 0;
	animation-name: btn_down_mov1;
	animation-duration: 1.5s;
	animation-delay: 0.5s;
	animation-iteration-count: infinite;/***/
	animation-timing-function: ease;
	position: absolute;
	top: -15px;
	display: block;
	/**animation-fill-mode: forwards;/**(forwards 保持在最後狀態)***/
}
@keyframes btn_down_mov1{
    from {top: 0px; opacity: 0.9;}
    50% {top: -15px; opacity: 1; }
    to {top: 0px; opacity: 0.9; }
}
.btn_down .img_container .btn_down_img{
	display: block; 	position: relative;
    opacity: 1;
}
.btn_down .img_container .btn_down_img .btn_down_img_origin{
	display: block; 

	opacity:1;
}
.btn_down .img_container .btn_down_img:hover .btn_down_img_origin{
	display: block; 
	opacity:0;
}
.btn_down .img_container .btn_down_img .btn_down_img_mov{
	display: block;
	position: absolute;
	top: 20px;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	transform: scale(0.8);
	opacity:0;
}
.btn_down .img_container .btn_down_img:hover .btn_down_img_mov{
	display: block;
	top: 0px;
	opacity:1;
	transform: scale(1);
}

/****右側快捷選單****/
.quick_menu{
	height: auto;
	width: 130px;
	position: fixed;
	right: 10px;
	z-index: 400;
	top: 20%;
}
.quick_menu ul li{
	display: block;
	margin-bottom: 5px;
	margin-right: auto;
	margin-left: auto;
	width: 130px;
}
.quick_menu ul li.appIcon {
	display: block;
	height: auto;
	width: 130px;
	line-height: 1px;
}
.quick_menu ul li.fb a{
	display: block;
	height: 40px;
	width: 130px;
	background-image: url(../img/btn_fb_pc.png);
	background-repeat: no-repeat;
	background-position: left top;
}
.quick_menu ul li.fb a:hover{
	display: block;
	background-image: url(../img/btn_fb_pc.png);
	background-repeat: no-repeat;
	background-position: left -40px;
}
.quick_menu ul li.ios a{
	display: block;
	height: 40px;
	width: 130px;
	background-image: url(../img/btn_ios_pc.png);
	background-repeat: no-repeat;
	background-position: left top;
}
.quick_menu ul li.ios a:hover{
	display: block;
	background-image: url(../img/btn_ios_pc.png);
	background-repeat: no-repeat;
	background-position: left -40px;
}
.quick_menu ul li.ggp a{
	display: block;
	height: 40px;
	width: 130px;
	background-image: url(../img/btn_ggp_pc.png);
	background-repeat: no-repeat;
	background-position: left top;
}
.quick_menu ul li.ggp a:hover{
	display: block;
	background-image: url(../img/btn_ggp_pc.png);
	background-repeat: no-repeat;
	background-position: left -40px;
}
.quick_menu ul li.apk a{
	display: block;
	height: 40px;
	width: 130px;
	background-image: url(../img/btn_apk_pc.png);
	background-repeat: no-repeat;
	background-position: left top;
}
.quick_menu ul li.apk a:hover{
	display: block;
	background-image: url(../img/btn_apk_pc.png);
	background-repeat: no-repeat;
	background-position: left -40px;
}
.quick_menu ul li.site a{
	display: block;
	height: 152px;
	width: 130px;
	background-image: url(../img/btn_qrCode_pc.png);
	background-repeat: no-repeat;
	background-position: left top;
}
.quick_menu ul li.site a:hover{
	display: block;
	background-image: url(../img/btn_qrCode_pc.png);
	background-repeat: no-repeat;
	background-position: left -152px;
}

/****底部快捷選單****/
.quick_menu2{
	display: none;
	height: auto;
	width: 100%;
	position: absolute;
	right: 0px;
	bottom: 2px;
	z-index: 400;
}
.quick_menu2 .app_icon{
	display: block;
	width: 24%;
	float: left;
	margin-left: 1%;
	line-height: 1px;
}
.quick_menu2 .right_area{
	display: block;
	width: 74%;
	float: right;
	margin-right: 1%;
}
.btn_area{
	display: block;
	float: right;
	width: 49%;
	margin-left: 1%;
}



/***/
.pc{display: block;}
.m{display: none;}
/***影片****/
.bg_bt{
	position: fixed;
	height: 100%;
	width: 100%;
	top: 0px;
	background-image: none;
	background-position: center top;
	display: block;
	background-repeat: repeat;
}
.mv_container{
	position: relative;
	display: block;
	height: 100%;
	width: 100%;
	overflow: hidden;
}
.mv_main{
	position: absolute;
	/**left: 0;
	right: 0;**/
	bottom: 0;
	top: 0;
	width: 100%;
	height: auto;
	min-height: 100vh;
	min-width: 320px;
	/****animation: mainVideo_mv 5s ease 0s;***/
	background-size: 100% 100%; /* in case the video doesn't fit the whole page*/
  	background-image:url(../img/site_bg.jpg);
	background-position: center center;
	background-size: contain;
	object-fit: cover; /*cover video background */
}
.bg_point{
	display: block;
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0px;
	background-image: url(../img/bg_point.gif);
	background-repeat: repeat;
}

.myVideo{
	position: absolute;
	right: 0;
	bottom: 0;
	top:0;
	right:0;
	width: 100%;
	height: auto;
	min-height: 100vh;
	min-width: 240px;
    animation:mainVideo_mv 5s ease 0s ;
	background-size: 100% 100%;
 	background-color: black; /* in case the video doesn't fit the whole page*/
  	background-image: /* our video */;
  	background-position: center center;
  	background-size: contain;
   	object-fit: cover; /*cover video background */
   	z-index:3;
}


.header{
	display: block;
	height: 100%;
	/***min-width: 990px;**/
	text-align: center;
	background-image: url(../img/header_img_pc.png);
	background-repeat: no-repeat;
	background-position: center top;
	position: relative;
	overflow: hidden;
	width: 100%;
}
.header_container{
	display: block;
	max-width: 1100px;
	min-width: 768px;
	margin-right: auto;
	margin-left: auto;
	text-align: left;
	height: 100%;
	min-height: 500px;
	position: relative;
	-webkit-transition: all;
	-moz-transition: all;
	-ms-transition: all;
	-o-transition: all;
	transition: all;
}
.header_relative{
	display: block;
	position: relative;
	height: 100%;
	width: 100%;
}
.header_relative .g_logo{
	display: block;
	width: 33%;
	margin-top: 25px;
	position: absolute;
	left: 0px;
	top: 0px;
}
.header_relative .header_img_1_pc{
	display: block;
	position: absolute;
	right: 5%;
	top: 10%;
}
.header_relative .header_img_2_pc{
	display: block;
	position: absolute;
	left: 11%;
	top: 40%;
}
.header_relative .btn_playMov_container{
	display: block;
	position: absolute;
	top: 45%;
	width: 100%;
}
.header_relative .btn_playMov{
	display: block;
	width: 16%;
	max-width:110px;
	margin-right: auto;
	margin-left: auto;
	height: auto;
	position: relative;
	overflow: hidden;
}
.header_relative .btn_playMov .btn_play_1{
	display: block;
	position: absolute;
	top: 0px;
	width: 100%;
	height: auto;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	transform: scale(1);
	opacity:1;
}
.header_relative .btn_playMov:hover  .btn_play_1{
	display: block;
	top: -0%;
	transform: scale(0.1);
	opacity:0;
}
.header_relative .btn_playMov .btn_play_1_mov{
	display: block;
	position: absolute;
	top: 0px;
	width: 100%;
	height: auto;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	transform: scale(0.1);
	transform: rotate(-180deg);
	opacity:0;
}
.header_relative .btn_playMov:hover  .btn_play_1_mov{
	display: block;
	top: -0%;
	transform: scale(1);
	transform: rotate(0deg);
	opacity:1;
}


/****/
.m_header_bg{
	display: block;
	width: 100%;
	position: absolute;
	top: 0px;
	height: auto;
}
.m_header_container{
	display: block;
	line-height: 1px;
	position: relative;
	/* [disabled]min-height: 800px; */
	height: 100%;
	width: 100%;
}
.m_header_container .m_header_relative{
	display: block;
	height: 100%;
	width: 100%;
	position: relative;
}
.m_header_relative .g_logo{
	display: block;
	width: 38%;
	position: absolute;
	left: 0%;
	top: 0%;
	margin-top: 3%;
	margin-left: 1%;
}
.m_header_relative .header_img_1_m{
	display: block;
	position: absolute;
	right: 4%;
	top: 13%;
	width: 24%;
}
.m_header_relative .header_img_2_m{
	display: block;
	position: absolute;
	left: 11%;
	top: 32%;
	width: 16%;
}
.m_header_relative .btn_playMov_container{
	display: block;
	position: absolute;
	top: 40%;
	width: 100%;
}
.m_header_relative .btn_playMov{
	display: block;
	width: 22%;
	margin-right: auto;
	margin-left: auto;
	height: auto;
	position: relative;
	overflow: hidden;
}
.m_header_relative .btn_playMov .btn_play_1{
	display: block;
	position: absolute;
	top: 0px;
	width: 100%;
	height: auto;
	opacity:1;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	transform: scale(1);
	opacity:1;
}
.m_header_relative .btn_playMov:hover .btn_play_1{
	display: block;
	position: absolute;
	top: 0%;
	transform: scale(0.1);
	opacity:1;
}
.m_header_relative .btn_playMov .btn_play_1_mov{
	display: block;
	position: absolute;
	top: 0px;
	width: 100%;
	height: auto;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	transform: scale(0.1);
	transform: rotate(-180deg);
	opacity:0;
}
.m_header_relative .btn_playMov:hover  .btn_play_1_mov{
	display: block;
	top: -0%;
	transform: scale(1);
	transform: rotate(0deg);
	opacity:1;
}


/********技能介紹*********/
.intro1{
	display: block;
	height: 100%;
	text-align: center;

	/*****/
	background-size: 100% 100%;
 	background-color: black; /* in case the video doesn't fit the whole page*/
	background-image: url(../img/intro_1_bg_pc.jpg);
  	background-position: center center;
  	background-size: cover/**contain**/;
	/*****/
	position: relative;
	overflow: hidden;
	width: 100%;
}
.intro_1_img_pc{
	display: block;
	width: 53%;
	position: absolute;
	right: 0px;
	bottom: 0px;
}
.intro1_container{
	display: block;
	max-width: 1100px;
	min-width: 768px;
	margin-right: auto;
	margin-left: auto;
	text-align: left;
	height: 100%;
	/***min-height: 500px;***/
	position: relative;
}
.intro1_relative{
	display: block;
	position: relative;
	height: 100%;
	width: 100%;
}
.intro1_relative .content_area_1{
	display: block;
	width: 60%;
	max-width: 532px;
	height: auto;
	margin-right: 4%;
	top: 15%;
	right: 0px;
	position: absolute;
}
.intro1_relative .content_area_2{
	display: block;
	position: absolute;
	left: 10%;
	top: 22%;
	width: 8%;
}
.intro1_relative .content_area_1 .content_title_1{
	display: block;
	margin-bottom: 2%;
	width: 100%;
}
.intro1_relative .content_area_1 .content_top_info{
	display: none;
	height: auto;
	width: 100%;
	position: relative;
}

.intro1_relative .content_area_1 .content_box_1{
	display: block;
	width: 100%;
	height: auto;
}

/***底區塊***/
.footer{
	display: block;
	background-color: #000;
	height: 100%;
	width: 100%;
	padding-bottom: 0px;
	position: relative;
	/*****/
	background-size: 100% 100%;
	background-color: black; /* in case the video doesn't fit the whole page*/
	background-image: url(../img/footer_bg_pc.jpg);
	background-position: center center;
	background-size: cover/**contain**/;
	/*****/
	position: relative;
	overflow: hidden;
}
.footer .g_logo{
	display: block;
	margin-right: auto;
	margin-left: auto;
	position: relative;
	width: 100%;
	max-width: 1100px;
	height: 100%;
}
.footer .g_logo .g_logo_container {
	display: block;
	height: auto;
	width: 30%;
	position: absolute;
	bottom: 28%;
	top: 1%;
}
.footer_container{
	display: block;
	margin-right: auto;
	margin-left: auto;
	color: #CCC;
	font-size: 12px;
	text-align: center;
	background-color: rgba(0, 0, 0, 0.7);
	position: absolute;
	bottom: 0px;
	width: 100%;
	height: auto;
}

.footer_container .com_logo img{
	height: auto;
	width: auto; max-width: 600px;
}
.footer_container .txt_1{
	display: block;
	margin-top: 0px;
}
.footer_container .gamerating{
	display: block;
	width: 90%;
	margin-right: auto;
	margin-left: auto;
	padding-top: 30px;
	padding-bottom: 20px;
}
.footer_container .gamerating  .two_platform{
	display: inline-block;
	margin-right: 10px;
}
.footer_container .gamerating  .two_platform img{
	height: 44px;
	width: auto;
}
.footer_container .gamerating .img{
	display: inline-block;
	height: 44px;
	width: 44px;
	margin-right: 10px;
	margin-bottom: 10px;
}
.footer_container .gamerating .txt_1{
	display: inline-block;
	width: 440px;
	font-size: 12px;
	line-height: 1.3em;
	text-align: left;
	color: #CCC;
	margin-top: 0px;
}


/***/
@media only screen and (min-width: 1600px)  {
.intro_1_img_pc{
	display: block;
	width: 53%;
	position: absolute;
	right: 0px;
	bottom: 0px;
}
}
@media only screen and (max-width: 1600px) {
.intro_1_img_pc{
	display: none;
}
}

/* 為寬768px的螢幕而設計 */
@media only screen and (min-width: 768px)  {
.pc{display: block;}
.m{display: none;}
.quick_menu{}
.quick_menu2{
	display: none;
}
.m_header_bg{
	display: none;
}
.m_header_container{
	display: none;
}
}


/* 為寬480px的螢幕而設計 */
@media only screen and (min-width: 480px) and (max-width: 768px) {
body {
	margin: 0px;
	font-size: 14px;
	color: #000000;
	font-family: "微軟正黑體", "Microsoft JhengHei", arial, helvetica, clean, Verdana, Geneva, sans-serif;
	line-height: 1.8em;
	background-color: #FFFFFF;
	background-image: url(../img/m_768_bg.jpg);
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center top;
	width: 100%;
	z-indwx: -1;
}
.pc{display: none;}
.m{display: block;}
.bg_bt{
	position: fixed;
	height: 100%;
	width: 100%;
	top: 0px;
	display: block;
}
.gototop {
	bottom: 10px;
	height: 42px;
	width: 42px;
	right: 8px;
}
/****頂端置底提示按鈕***/
.btn_down_container{
	display: none;
}
/****右側快捷選單****/
.quick_menu{
	display: none;
}
.quick_menu2{
	display: block;
}

/****/
.header{
	display: block;
	height: 100%;
	max-width: 768px;
	/***min-width: 640px;***/
	text-align: left;
	background-image: none;
	background-repeat: no-repeat;
	background-position: center top;
}

/****/
.header_container{
	display: none;
}
.m_header_bg{
	display: block;
}
.m_header_container{
	display: block;
}

/********技能介紹*********/
.intro1{
	display: block;
	height: 100%;
	text-align: center;

	/*****/
	background-size: 100% 100%;
 	background-color: black; /* in case the video doesn't fit the whole page*/
	background-image: url(../img/intro_1_bg_m.jpg);
  	background-position: center center;
  	background-size: cover/**contain**/;
	/*****/
	position: relative;
	overflow: hidden;
	width: 100%;
}
.intro1_container{
	display: block;
	/* [disabled]max-width: 990px; */
	min-width: 360px;
	margin-right: auto;
	margin-left: auto;
	text-align: left;
	height: 100%;
	/***min-height: 500px;***/
	position: relative;
}
.intro1_relative{
	display: block;
	position: relative;
	height: 100%;
	width: 94%;
	margin-right: auto;
	margin-left: auto;
}
.intro1_relative .content_area_1{
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	position: absolute;
	margin-right: auto;
	margin-left: auto;
	top: 0%;
}
.intro1_relative .content_area_2{
	display: none;
}
.intro1_relative .content_area_1 .content_title_1{
	display: none;
	margin-bottom: 2%;
	width: 100%;
}
.intro1_relative .content_area_1 .content_top_info{
	display: block;
	height: auto;
	width: 100%;
	position: relative;
}
.intro1_relative .content_area_1 .content_title_1_m{
	display: block;
	height: auto;
	width: 9%;
	margin-top: 9%;
	margin-right: 6%;
	margin-left: auto;
	margin-bottom: 1%;
}
.intro1_relative .content_area_1 .content_title_2_m{
	display: block;
	height: auto;
	width: 12%;
	margin-top: 10%;
	margin-right: auto;
	margin-left: 4%;
	margin-bottom: 1%;
	position: absolute;
	top: 0px;
}
.intro1_relative .content_area_1 .content_box_1{
	display: block;
	width: 100%;
	height: auto;
}


/***/
.footer{
	display: block;
	background-color: #000;
	height: 100%;
	width: 100%;
	/**min-width: 640px;**/
	padding-bottom: 0px;
	/*****/
	background-size: 100% 100%;
	background-color: black; /* in case the video doesn't fit the whole page*/
	background-image: url(../img/footer_bg_m.jpg);
	background-position: center center;
	background-size: cover/**contain**/;
	/*****/
}
.footer .g_logo{
	display: block;
	margin-right: auto;
	margin-left: auto;
	position: relative;
	width: 100%;
	max-width: 1100px;
	height: 100%;
}
.footer .g_logo .g_logo_container {
	display: block;
	height: auto;
	width: 32%;
	position: absolute;
	left: 1%;
	top: 1%;
}
.footer_container{
	background-color: rgba(0, 0, 0, 0.8);
}
.footer_container .gamerating{
	display: block;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	padding-top: 20px;
	padding-bottom: 14px;
}
.footer_container .com_logo img{
	height: auto;
	width: 100%;
}
}

/* 為寬320px的螢幕而設計 */
@media only screen and (max-width: 480px) {
body {
	margin: 0px;
	font-size: 14px;
	color: #000000;
	font-family: "微軟正黑體", "Microsoft JhengHei", arial, helvetica, clean, Verdana, Geneva, sans-serif;
	line-height: 1.8em;
	background-color: #FFFFFF;
	background-image: url(../img/m_bg.jpg);
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center top;
	width: 100%;
	z-indwx: -1;
}
.pc{display: none;}
.m{display: block;}
.bg_bt{
	position: fixed;
	height: 100%;
	width: 100%;
	top: 0px;
	display: block;
}
.gototop {
	width: 40px;
	height: 40px;
	line-height: 40px;
	bottom: 10px;
	right: 8px;
	font-size: 12px;
	background-color: rgba(0, 153, 153, 0.8);
}
/****頂端置底提示按鈕***/
.btn_down_container{
	display: none;
}
/****右側快捷選單****/
.quick_menu{
	display: none;
}
.quick_menu2{
	display: block;
}

/****/ 
.header{
	display: block;
	height: 100%;
	min-width: 360px;
	text-align: center;
	background-image: none;
	background-repeat: no-repeat;
	background-position: center top;
	width: 100%;
}
.header_container{
	display: none;
}
/***/
.m_header_bg{
	display: block;
}
.m_header_container{
	display: block;
}

/********技能介紹*********/
.intro1{
	display: block;
	height: 100%;
	text-align: center;

	/*****/
	background-size: 100% 100%;
 	background-color: black; /* in case the video doesn't fit the whole page*/
	background-image: url(../img/intro_1_bg_m.jpg);
  	background-position: center center;
  	background-size: cover/**contain**/;
	/*****/
	position: relative;
	overflow: hidden;
	width: 100%;
}
.intro1_container{
	display: block;
	/* [disabled]max-width: 990px; */
	min-width: 360px;
	margin-right: auto;
	margin-left: auto;
	text-align: left;
	height: 100%;
	/***min-height: 500px;***/
	position: relative;
}
.intro1_relative{
	display: block;
	position: relative;
	height: 100%;
	width: 94%;
	margin-right: auto;
	margin-left: auto;
}
.intro1_relative .content_area_1{
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	position: absolute;
	margin-right: auto;
	margin-left: auto;
	top: 0%;
}
.intro1_relative .content_area_2{
	display: none;
}
.intro1_relative .content_area_1 .content_title_1{
	display: none;
	margin-bottom: 2%;
	width: 100%;
}
.intro1_relative .content_area_1 .content_top_info{
	display: block;
	height: auto;
	width: 100%;
	position: relative;
}
.intro1_relative .content_area_1 .content_title_1_m{
	display: block;
	height: auto;
	width: 9%;
	margin-top: 9%;
	margin-right: 6%;
	margin-left: auto;
	margin-bottom: 1%;
}
.intro1_relative .content_area_1 .content_title_2_m{
	display: block;
	height: auto;
	width: 12%;
	margin-top: 10%;
	margin-right: auto;
	margin-left: 4%;
	margin-bottom: 1%;
	position: absolute;
	top: 0px;
}
.intro1_relative .content_area_1 .content_box_1{
	display: block;
	width: 100%;
	height: auto;
}
/***/

.footer{
	display: block;
	min-width: 360px;
	height: 100%;
	padding-bottom: 0px;
	/*****/
	background-size: 100% 100%;
	background-color: black; /* in case the video doesn't fit the whole page*/
	background-image: url(../img/footer_bg_m.jpg);
	background-position: center center;
	background-size: cover/**contain**/;
	/*****/
}
.footer .g_logo{
	display: block;
	margin-right: auto;
	margin-left: auto;
	position: relative;
	width: 100%;
	max-width: 1100px;
	height: 100%;
}
.footer .g_logo .g_logo_container {
	display: block;
	height: auto;
	width: 38%;
	position: absolute;
	left: 1%;
	top: 3%;
}
.footer_container{
	background-color: rgba(0, 0, 0, 0.6);
}
.footer_container .gamerating{
	display: block;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	padding-top: 12px;
	padding-bottom: 2px;
	height: auto;
}
.footer_container .gamerating .img{
	display: inline-block;
	float: none;
	height: 32px;
	width: 32px;
	margin-right: auto;
	margin-bottom: 5px;
}
.footer_container .gamerating .txt_1{
	display: block;
	float: none;
	width: 90%;
	font-size: 12px;
	line-height: 1.3em;
	text-align: center;
	color: #CCC;
	margin-top: 6px;
	margin-right: auto;
	margin-left: auto;
}
.footer_container .com_logo img{
	height: auto;
	width: 100%;
}
/***/

}

.clearfloat { /* 這個類別可放置在 <br /> 或空白的 Div 上，當做接在 #container 內最後一個浮動 Div 後方的最後一個元素 (如果已移除 .container 上的 overflow:hidden) */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}