@charset "utf-8";
/* CSS Document */
body {background-color:  rgb(228, 9, 20);  padding: .4%;
	font-family: Arial, "微軟正黑體", Verdana, Helvetica, SansSerif;font-style: normal;color: #000;font-size: 14px;
}
a{text-decoration: none;}
.bt {text-indent:-9999em;overflow: hidden;cursor:pointer;display:block}
.wrap{background-color: #ffffff;}
/********************************top*******************************/

#top {width:100%;height:150px;position:relative;color:#FFF;background-color:#FFF; border-bottom:1px solid rgb(150, 150, 150,.4) ;	}
#top_bar {width: 100%;height: 110px;text-overflow: ellipsis;overflow:hidden;white-space: nowrap;}	
#top_logo {width:212px;height:84px;position: absolute;left: 90px;top:40px;background: url(../images/top_logo.png);}	
	

#menu_bar {width: 300px;height: 50px;position: absolute;right: 100px;top: 80px; }	
#menu_bar ul {list-style-type:none;margin:0px;padding:0px;width:100%;height:50px;padding-top:0px;}
#menu_bar li { width: 100px;height:65px;float:left;position: relative;z-index: 100;display: block;margin-left:0px;margin-top: -20px; text-align: center;}
.h_btn{left:30px;}
#menu_bar li a {width: auto;height:65px;position: absolute;display: block;
              line-height: 100px;text-decoration: none;color: #000;font-family: "微軟正黑體";font-weight:bolder;font-size: 15px;}
#menu_bar li a:hover {border-bottom: 3px solid rgb(228, 9, 20);}


/*****main_banner**** */
#main_banner {width: 100%;height:870px;position: relative;display: block;overflow: hidden;background-color: #ebebeb;}
#main_banner .swiper {width: 100%;height:  100%;}  
#main_banner .swiper-slide {text-align: center;overflow:hidden;}
#main_banner .slide-inner {position: absolute;width: 1920px;height: 797px;
	margin-top: 0px;margin-left: -960px;margin-right: 0px;margin-bottom: 0px;left: 50%;
	background-size: cover;background-position: center;display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center;
	-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;
  }
#main_banner .swiper-pagination{top:810px;left: -750px;}
#main_banner .swiper-pagination-bullet {width: 50px;height: 5px;background:#ffffff;border: 1.5px solid  rgb(228, 9, 20); border-radius: 100px;opacity: 1;margin-left: 5px;}
#main_banner .swiper-pagination-bullet-active {width: 50px;height:5px;background: rgb(228, 9, 20);border-radius: 100px;}

#main_banner .swiper-button-next{ }
#main_banner .swiper-button-prev{}
#main_banner .swiper-button-hidden{ opacity : 0;}

#main_banner .swiper-btn { width: 50px;height: 120px;position: absolute;z-index: 1;display: block; top:300px;}
#main_banner .e-button-next{ width: 50px;height: 120px;right:0px ;background:url(../images/arraw_btn.png)no-repeat -50px 10px;background-color: rgb(228, 9, 20) ;}
#main_banner .e-button-prev{ width: 50px;height: 120px;left:0px; background:url(../images/arraw_btn.png)no-repeat 0 10px;background-color: rgb(228, 9, 20) ;}
#main_banner .e-button-next:hover{background-position: -55px 10px; background-color: rgb(0, 0, 0)}
#main_banner .e-button-prev:hover{background-position-x:5px ; background-color: rgb(0, 0, 0)}




/*****games wrap**** */
#game_wrap{width:100%;height: 400px;position: relative;margin-top: -60px;}
#game_box{position:relative;display:block;float: right; right:80px; }

#game_wrap .game_title{width:165px;height:31px;background: url(../images/title_game.png);position: absolute;right: 0px;top:200px;}

#game_wrap .game_show{width: 880px;height: 170px;position:absolute;display: inline-block;margin-top:30px;right:-13px;}
#game_wrap .game_show ul {list-style-type:none;}  
#game_wrap .game_show li {float:left;margin-right: 15px;list-style-type:none;}

#game_wrap .game_show figure {height:156px;position: relative;margin: 0; overflow: hidden; text-align: center}
#game_wrap .game_show figure img {-webkit-transition: .3s ease;-o-transition: .3s ease;transition: .3s ease}
#game_wrap .game_show figure:hover img{   -webkit-transform: scale(1.1);-ms-transform: scale(1.1);transform: scale(1.1)}



/* -------------------about---------------------- */
#about_wrap{width:100%;height:700px;position:relative;overflow: hidden;}
.about_img {width: 1041px;height: 447px;position:absolute;margin-top:100px;margin-left: -800px;left: 50%;}
.about_w{width: 449px;height: 368px;position:absolute;margin-top:150px;margin-left:250px;left: 50%;}




/* -------------------product---------------------- */
#product_wrap{width:100%;height:auto;position:relative;  background-color:  rgb(228, 9, 20) ;margin-top:100px;}

#product_wrap .product_title{width:1200px;height: auto; position:relative;top:-30px;margin:0 auto ;}
#product_wrap  .game_list{position: absolute;float:left; left: 0px;}
#product_wrap  .game_link{position: absolute; float: right;right: 0px;}

#product_wrap .product{width:1400px;height:auto;position:relative;margin:0 auto ;}
#product_wrap .product_box{width:auto;height:auto ;  text-align: center;}

#product_wrap .product_info_box{width:220px;height: 400px;position: relative; display:inline-block;margin-right:50px;margin-top: 50px; margin-bottom: 100px;}
#product_wrap .product_name{width: 220px; position: absolute;font-weight:bolder ; font-size:12pt;letter-spacing: 2px; color: #fff;top:-25px;}
#product_wrap .product_img{width: 200px;height: 200px;position: absolute;z-index: 10;left: 10px;overflow: hidden;}
#product_wrap .product_img img{width: 200px;}
#product_wrap .product_img:hover img{  transform: scale(1.05);  } 
#product_wrap .product_line{width:220px;height: 360px;position: absolute;border:.1px solid #ffcccc;top:50px }

#product_wrap .product_download_box{width:170px; height: 190px;position: absolute;bottom: 0px;left: 28px;z-index: 500}
#product_wrap .down_btn {width:165px;height:55px;margin-top:6px; display:block;}
#product_wrap  .icon_Google_n{background: url("../images/product/and-n.png") no-repeat;}
#product_wrap  .icon_appstore_n{background: url("../images/product/ios-n.png") no-repeat;}
#product_wrap  .icon_pc_n{background: url("../images/product/apk_n.png") no-repeat; }
#product_wrap  .icon_Google{background: url("../images/product/and.png") no-repeat;}
#product_wrap  .icon_appstore{background: url("../images/product/ios.png") no-repeat;}
#product_wrap  .icon_pc{background: url("../images/product/apk.png") no-repeat;}


/* ------------------------footer---------------------- */
footer {width: 100%;height: 180px;background-color: #ffffff;display: block ;border-top:1px solid rgb(150, 150, 150,.4); bottom: 0; ; position: relative; }
.cr {width:437px;height: 155px;position: absolute;margin-top: -30px;left: 80px; background: url(../images/copyright.png) no-repeat;}
.cr_s{width:437px;height: 55px;position: absolute;margin-top: -30px;left: 80px; background: url(../images/copyright_s.png) no-repeat;}
.cr_p{width:425px;height:100px;position: absolute;margin-top: -72px;left: 80px; background: url(../images/copyright_p.png) no-repeat;}






/*-- media width: 1680px--*/
@media (max-width: 1700px){
	#top {height:120px;}
	#top_logo {transform: scale(0.7);margin-top: -20px; margin-left: -70px;}
	#menu_bar{transform: scale(0.8);margin-top: -20px; margin-right: -100px;}

	#main_banner {height:650px;}
	#main_banner .swiper-slide img{transform: scale(0.75) !important;top:-100px;}
	#main_banner .swiper-pagination{top:610px;left: -600px;}
	#main_banner .swiper-btn{transform: scale(0.8) !important;}
	#main_banner .e-button-next{ right:-10px ;}
    #main_banner .e-button-prev{ left:-10px; }
	#game_wrap{transform: scale(0.8) !important;left: 150px;top:-30px;}
 
    #about_wrap{height:520px;}
	#about_wrap img{transform:scale(.7);}
	.about_img {margin-left: -700px;margin-top: 0px;}
    .about_w{margin-left:130px;margin-top: 50px;}



}
/*-- media width: 1440px--*/
@media (max-width: 1280px){
	
    #main_banner {height:600px;}
	#main_banner .swiper-slide img{transform: scale(0.65) !important;top:-140px;}
	#main_banner .swiper-pagination{top:530px;left: -500px;}
	#main_banner .swiper-btn{margin-top: -80px;}

	#game_wrap{top:-50px;}

	#about_wrap{height:480px;}

	#product_wrap .product_title{transform: scale(0.8) !important;}
	#product_wrap .product{width:1250px;}
	#product_wrap .product_info_box{transform: scale(0.8) !important;margin-top: 10px; }
	
}