/* CSS Document */
html {background: #e3e3e3;font-style: normal;font-size:16px;  
	font-family: "Yu Gothic","游ゴシック", YuGothic, "Hiragino Sans", "Hiragino Kaku Gothic ProN",Meiryo,"メイリオ","MS PGothic", Osaka, sans-serif;}
body {}
main {overflow: hidden;max-width: 1920px;margin:0 auto;background: #ffffff; }
.section {width: 100%; text-align: justify;background: #ffffff; scroll-snap-type: y mandatory; }
.bt {text-indent:-9999em;overflow: hidden;cursor:pointer;display:block}
.wrapper{display: flex;justify-content: center;align-items: center;min-height: 100vh; padding: 2rem;box-sizing: border-box;}

/********************************header top*******************************/
header {width: 100%; height: 5vw;max-width: 1350px;max-height: 100px; position: sticky;top: 0;z-index: 10;margin: 0 auto;}
#top{background-color: #fff; }
#top_bar {display: flex;justify-content: space-between;}	

#top_logo {width:13vw;height:5vw;max-width: 240px; display: block; position: absolute;background: url(../images/top_logo.png)0px 0px /100% no-repeat;margin:.8vw 0 }

#menu_btn {display: none;}
#menu_bar {width: 30vw;height:5vw;max-width: 700px;max-height: 120px; position: absolute;right:0;top: 0px; }	
.nav-list { list-style-type:none;margin:0px;padding:0px;display: flex;justify-content: center;}
#menu_bar li {margin-left: 3vw;}
#menu_bar li a {position: relative; z-index: 100;  display: block;  height:100%;  text-align:right;  line-height:5vw;  text-decoration: none; 
    font-family:"Yu Gothic";font-weight:800; font-size: 1.2rem;transition: color 0.3s;color:rgb(27, 27, 27);}
#menu_bar li a:hover {color:rgb(0, 158, 226);}

@media screen and (min-width:1921px) {
        header{max-width: 1700px;}
		#menu_bar li a {line-height: 120px;}
		.top_logo {margin:15px 0}
}
@media screen and (max-width:1280px) {
        header{max-width: 1200px;}
}
@media screen and (max-width:768px) {
	header{max-width: 700px;min-height: 60px;}
	#top_logo {width: 20vw;height:6vw;margin:1.2vw 0 }
	#menu_bar {margin-top: 10px;}
}
@media screen and (max-width:480px) {
	#top_logo {width: 38vw;height:15vw;margin:2.5vw 3vw }
}
@media (max-width: 480px) {/* 手機版選單 */
#menu_bar{width: 100vw;height: 60px;position: absolute;top: 0;z-index: 1000 !important;}
.nav-list { display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100vh;  justify-content: center; align-items: center; 
		background: rgb(255, 255, 255);flex-direction: column;padding: 20px 0; transform: translateZ(100px);   }
    /* 添加遮罩背景 */
    .nav-list::before {content: '';position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(255, 255, 255, 0.5);z-index: -1; /* 放在選單底層 */}
	/* 漢堡按鈕樣式 */
    .hamburger {display: block;position: absolute;right: 0px;top: 0px;width: 60px;height: 30px;cursor: pointer;padding: 20px 0 0 10px;}
    .hamburger span {position: absolute;width: 60%;height: 3px;background: #383838;transition: 0.3s;}
    .hamburger span::before,
    .hamburger span::after {content: '';position: absolute;width: 100%; height: 3px;background: #383838;transition: 0.3s;}
    .hamburger span::before {top: -8px;}.hamburger span::after {top: 8px;}
  /* 展開選單動畫 */
    .menu-toggle:checked ~ .nav-list {display: flex;}
    .menu-toggle:checked + .hamburger span {background: transparent;}
    .menu-toggle:checked + .hamburger span::before {top: 0; transform: rotate(45deg);}
    .menu-toggle:checked + .hamburger span::after {top: 0;transform: rotate(-45deg);}
  /* 手機版連結樣式 */
    #menu_bar li { margin: 10px 0;text-align: center;}
    #menu_bar li a {line-height: 40px;font-size: 1.5rem;}
}


/*****main_banner**** */
#main_banner {width: 100%;height: 43vw;max-width: 1920px; max-height: 900px;position: relative;display: block;overflow: hidden;background-color: #f3f3f3;}
#main_banner .swiper {width: 100%;height:  100%; }  
#main_banner .swiper-slide {text-align: center;overflow:hidden;}
#main_banner .slide-inner {position: absolute;width: 100%;height: 94%;display: flex;justify-content: center;align-items: center;}

#main_banner .swiper-pagination{top:41vw;}
#main_banner .swiper-pagination-bullet {width: 2vw;height: .3vw;max-width:50px;max-height:8px;background:#767676;border-radius: 1px;opacity: 1;margin-left: 10px;}
#main_banner .swiper-pagination-bullet-active {width: 2vw;height: .3vw;max-width:50px;max-height:8px;background:#015aff;border-radius: 1px;}
#main_banner .swiper-button-next{right:50px;}
#main_banner .swiper-button-prev{left:50px;}
#main_banner .swiper-button-next, #main_banner .swiper-button-prev{color: rgb(1, 1, 1);opacity: .3;}
#main_banner .swiper-button-next:hover, #main_banner .swiper-button-prev:hover{color: rgb(255, 255, 255);opacity:1;}

@media screen and (min-width:1921px) {
        #main_banner .swiper-pagination{top:860px;}
}
@media screen and (max-width:768px) {

    #main_banner .swiper-pagination-bullet {width: 5vw;max-width:50px;height: .7vw;max-height:5px;}
	#main_banner .swiper-button-next{right:10px;}
    #main_banner .swiper-button-prev{left:10px;}
}    

@media screen and (max-width:480px) {
#main_banner {width: 100%;height: 150vw;max-width: 750px; max-height: 1100px; z-index: 1 !important; }
#main_banner .swiper-pagination{top:142vw; z-index: 1 }
#main_banner .swiper-pagination-bullet {width: 10vw;max-width:40px;height: 1vw;max-height:5px; z-index: 1 }
}

@media screen and (max-width:400px) {
#main_banner {width: 100%;height: 155vw;}
#main_banner .swiper-pagination{top:146vw;}
}


/*****games  wrap title*****/
#game_wrap{width:100%;height: 20vw; min-height: 400px;max-height: 500px;  position: relative;margin-bottom:2vw;margin-top:2vw ;}
#game_box{width: 100%;max-width: 1250px; height:auto;position:relative;display:block;margin:0 auto ;}

#game_wrap .game_title{width:60vw;max-width:1300px ; height:auto;position: absolute;margin-left: -1vw; }
.game_title::before{content:"";background: url(../images/title_triangle01.png)0 0/35% no-repeat;
	width:5vw;height:5vw;max-width: 120px; display:block; position: absolute;top:-.1vw;left:0;}
#game_wrap .game_title .gt_eg{ font-family: "Special Gothic", sans-serif;font-weight:800;font-size: 4rem;letter-spacing: .02em;padding-left: 2vw;top: 10px; position: relative;}
#game_wrap .game_title .gt_jp{font-family:"Zen Kaku Gothic New", sans-serif;;font-weight: 500;font-size: 1.1rem;letter-spacing:.5em;position: relative;top:-.2vw;left: 1vw;}


/*****games show**** */
#game_wrap .game_show{width:100%;height: auto;position:absolute;display: inline-block;margin-top:5vw;}
#game_wrap .game_show ul {list-style-type:none;display: flex;justify-content: space-between;}  
#game_wrap .game_show li {width: 24%; height: auto;float:left;list-style-type:none;border: 1px solid #b6b6b6;}

#game_wrap .game_show figure {max-height: 170px;position: relative;margin: 0; overflow: hidden; text-align: center}
#game_wrap .game_show figure img {width:100%  ;height:100% ; -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)}

/*****games more**** */
#game_wrap .game_more{width:370px;height:70px;display: block; position:absolute ;right: 0;margin-top: 16vw;  background-color: #fff;}
#game_wrap .game_more a {
	display: -ms-flexbox;display: flex;-ms-flex-pack: center;justify-content: center;-ms-flex-align: center;align-items: center;
	width: 100%;height: 70px;background-color: #ffffff;border: #000000 solid 1.5px;box-sizing: border-box;
	border-radius: 6px;color: #000000;text-decoration: none;position: relative;transition: all .2s;}
#game_wrap .game_more a:after {content: '';display: block;background: url("../images/icon_arw.png") center center no-repeat;
	width: 10px;height: 16px;position: absolute;right: 30px;top: 50%;transform: translate(0px, -50%);transition: all .2s;}
#game_wrap .game_more a:hover {color: #ffffff;background-color: #000000;}
#game_wrap .game_more a:hover:after {background: url("../images/icon_arw_r.png") center center no-repeat;transform: translate(10px, -50%);}

#game_wrap .game_more span{ margin: 0 13px;}
#game_wrap .game_more .morebt_eg{font-family: "Special Gothic", sans-serif;font-weight:800;font-size: 30px;letter-spacing: .03em;
	-moz-osx-font-smoothing: grayscale;-webkit-font-smoothing: antialiased;-webkit-font-feature-settings: "palt" 1;font-feature-settings: "palt" 1;}
#game_wrap .game_more .morebt_jp{ font-family:"Zen Kaku Gothic New";font-weight: 500;font-size: 16px;letter-spacing:.01em;
	-moz-osx-font-smoothing: grayscale;-webkit-font-smoothing: antialiased;-webkit-font-feature-settings: "palt" 1;font-feature-settings: "palt" 1;}

/* ------------------------footer---------------------- */
footer {width: 100%;height:10vw;max-height: 180px; display: block ; bottom: 0; ; position: relative;background: url("../images/color_bar.jpg")center top no-repeat;display: flex;justify-content:center;align-items: center; }
.copyright{width:30vw;height: 5vw;max-height: 180px;display: flex;justify-content: space-between;margin-top:2vw;}
.copyright .cr_logo{width:50%;height:auto;background: url(../images/top_logo.png) 0 0/90% no-repeat;}
.copyright p{ letter-spacing: .05rem;font-weight: 600; font-size: .8rem;padding-top:25px;color: #666666;}


@media screen and (min-width:1921px) {
	#game_wrap{margin-bottom:80px;margin-top:80px;}
    #game_box{transform: scale(1.2); }
	#game_wrap .game_show{margin-top:100px;}
	#game_wrap .game_more{margin-top: 300px; }
	.copyright{max-width:700px;margin-top:90px;}
}
@media screen and (max-width:1680px) {
	#game_box{transform: scale(.95);}
    #game_wrap .game_more{margin-top: 17.5vw;}

    .copyright{width:35vw;}
}
@media screen and (max-width:1480px) {
	#game_box{transform: scale(.9);}
    #game_wrap .game_show{margin-top:6.5vw;}
    #game_wrap .game_more{margin-top: 21vw;}
	.copyright{width:38vw;}

}
@media screen and (max-width:1280px) {
    #game_wrap .game_more{margin-top: 24vw;}
	#game_wrap .game_show{margin-top:8vw;}
	.copyright{width:40vw  ;}
}
@media screen and (max-width:768px) {
	#game_wrap{ min-height: 300px;}
    #game_wrap .game_title{width:70vw;}
    .game_title::before{width:10vw;height:10vw;}
    #game_wrap .game_title .gt_eg{ font-size: 3rem;letter-spacing: .02rem;padding-left: 4.5vw;top: 10px; }
    #game_wrap .game_title .gt_jp{ font-size: .8rem;letter-spacing:.5em;top:-.3vw;left: 1vw;}
	#game_wrap .game_show{margin-top:10vw;}
    #game_wrap .game_more{transform: scale(.8); margin-top: 26vw;margin-right: -5vw;}
	footer {height:15vw;}
	.copyright{width:60vw;height: 8vw;}
	.copyright p{ font-size: .7rem;}
}  

@media screen and (max-width:480px) {
	#game_wrap{ min-height: 450px;margin-top:12vw;}
	#game_wrap .game_title{width:90vw;margin-left: 5vw;}
	.game_title::before{background-size: 60%;width:10vw;height:10vw;top:-10vw;left:10vw;}
    #game_wrap .game_title .gt_eg{ font-size: 4.4rem;letter-spacing: .01em;padding-left:0vw;top: 10px; position: relative;}
    #game_wrap .game_title .gt_jp{font-size: 1rem;letter-spacing:.2em;position: relative;top:-22vw;left: 22vw;}

	#game_wrap .game_show{width:420px ;height: 300px; margin-top:22vw;}
	#game_wrap .game_show ul {list-style-type:none;display: flex;justify-content: space-between;flex-wrap: wrap;}
	#game_wrap .game_show li {width:200px ;height: 110px;margin: 6px 0; }
	#game_wrap .game_show figure {position: relative;margin: 0; overflow: hidden; text-align: center}

	#game_wrap .game_more{transform: scale(1); margin-top: 88vw;margin-right: 5vw;}

	footer {height:35vw;}
	.copyright{width:60vw;height: 20vw;margin-top:6vw;}
	.copyright .cr_logo{width:280%;height:auto;}
    .copyright p{ position: absolute;margin-top: 30px;margin-left: 70px;  font-size: .5rem;}

}
@media screen and (max-width:400px) {
	#game_wrap{ min-height: 400px;}
    #game_wrap .game_title .gt_eg{ font-size: 3.65rem;}
	#game_wrap .game_show{width:350px ;height: 300px;}
	#game_wrap .game_show li {width:170px ;height: 96px;margin: 2px 0; }
	#game_wrap .game_more{transform: scale(.9); margin-top: 88vw;margin-right: 0vw;}
    .copyright p{ position: absolute;margin-top: 40px;margin-left: 25px;  font-size: .5rem;}
}




/* -------------------about---------------------- */
#about_wrap{width:100%;height:auto;max-width: 1920px;max-height:700px;  position:relative;overflow: hidden;}
.about {width: 1920px;;height: 700px;position:relative;background: url(../images/about_page.jpg) 0 0/100%  no-repeat; margin-top: 0px;margin-left: -960px;margin-right: 0px;margin-bottom: 0px;left: 50%;}

@media screen and (max-width:1280px) {
.about{transform: scale(.95);margin-top: 20px;}
}

@media screen and (max-width:768px) {
	#about_wrap{;max-height:1290px;}
    .about{width: 100vw;;height:170vw;max-height:1290px;transform: scale(1);background: url(../images/about_m.jpg)0 0/100% no-repeat ;margin-top: 0px;margin-left: -50vw;}
}


/* -------------------product---------------------- */

#product_wrap{width:100%;height:auto;position:relative;background-color: #f2f2f2;border-top: 1px solid #8d8d8da0;display: flex;justify-content: center;align-items: center;}
#product_wrap .product_content{width: 70vw;height: auto; max-width:1300px;min-height: 700px; position:relative; background-color: #ffffffd3;}

#product_wrap .product_title{width: 60vw;max-width:1200px ; height:auto; position:relative; top: 3vw;left: 1.5vw; margin:0 auto;display:flex;}
#product_wrap  .game_list{width: 13vw;font-family: "Yu Gothic", sans-serif;font-weight: 800; font-size:2rem;letter-spacing: .05em;}
#product_wrap  .game_link{width: 50vw;max-width:900px ; height:auto ;background: url(../images/title_wire.png)0 0/100% no-repeat ;margin-left:-3.5vw;margin-top: .5vw;}
.product_title::before{content:"";background: url(../images/title_triangle02.png)0 0/35% no-repeat;width:10vw;height:10vw;max-width:100px; display:block; position: absolute;top:-2vw;left:-2vw;}

#product_wrap .product{width:60vw;max-width: 1220px; height:auto;position:relative;margin:7vw auto 0 auto ;}
#product_wrap .product_box{width:auto;height:auto ; text-align: center;display: block;}
#product_wrap .product_info_box{ width:220px;height: 400px;position: relative; display:inline-block;margin-right:1vw; margin-bottom:5vw;}

#product_wrap .product_name{width: 220px; position: absolute;font-weight:bolder ; font-size:12pt;letter-spacing: .1rem; color: #000000;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 #6d6d6d;top:50px;  border-radius: .5vw; }

#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:3px; display:block;}

#product_wrap  .icon_Google_n{background: url("../images/product/ios-n.png") no-repeat;}
#product_wrap  .icon_appstore_n{background: url("../images/product/and-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;}

@media screen and (min-width:1921px) {
#product_wrap .product_title{top:60px;left: 50px; }
#product_wrap .game_link{margin-right:100px;margin-top: 10px;}
.product_title::before{top:-40px;left:-40px;}

#product_wrap .product{margin:120px auto 0 auto ; }
#product_wrap .product_info_box{ margin-right:30px; margin-bottom:0;}
}

@media screen and (max-width:1680px) {	
#product_wrap .product_title{top: 4vw;}
#product_wrap .product_info_box{bottom: -1.5vw;}
#product_wrap  .game_list{font-size:1.8rem;}
#product_wrap  .game_link{width: 45vw;margin-left:-2vw;}
}

@media screen and (max-width:1480px) {
#product_wrap .product_info_box{bottom: -3vw;}
#product_wrap  .game_list{font-size:1.5rem;}
#product_wrap  .game_link{width: 45vw;margin-left:-2vw;}
.product_title::before{width:7vw;left:-3vw;}
}

@media screen and (max-width:768px) {
#product_wrap  .game_list{display: none;}
#product_wrap .product_title{display: flex;justify-content: center;align-items: center;}
.product_title::before{display: none;}
#product_wrap  .game_link{width: 50vw;max-width:900px ;height: 15vw; background: url(../images/title_product_m.png)0 0/100% no-repeat ;}
#product_wrap .product{margin:9vw auto 0 auto ;}
#product_wrap .product_info_box{margin-right:1vw; margin-bottom:10vw;}
}

@media screen and (max-width:480px) {
#product_wrap .product_content{width: 100vw;}
#product_wrap .product_title{width: 80vw; top: 7vw;}
#product_wrap  .game_link{width:80vw;height: 30vw; }

#product_wrap .product{width:90vw;}
#product_wrap .product_info_box{transform: scale(.75); width:40vw;height: 98vw;margin-right:4vw;margin-bottom: -10vw; left: -4vw;
	top: 0vw/* -- top:-10vw  ---3個遊戲以上--*/}
#product_wrap .product_download_box{top: 52vw;}
}

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

#product_wrap .product_info_box{transform: scale(.7);  left: -6vw;}
#product_wrap .product_download_box{top: 60vw;}
}