@charset "utf-8";
#wrap {float:left; width:100%; background:#000000 url(../images/bg.jpg) center top no-repeat; background-size:cover; overflow:hidden; transition:all 0.5s; position:relative;}

/*-------------------------------------------------------------------------------------*
 *  Header                                                                             *
 *-------------------------------------------------------------------------------------*/
.landing_wrap{position:relative; z-index:100; float:left; width:100%; padding:50px 20px 140px;}

.landing_logo{float:left; width:100%; text-align:center;}
.landing_logo img{display:inline-block; width:100%; max-width:1000px;}
.landing_title{float:left; width:100%; margin:30px 0 0 0; text-align:center;}
.landing_title img{display:inline-block; width:100%; max-width:1000px;}
.landing_game_btn{float:left; width:100%; margin:40px 0 0 0; text-align:center;}
.landing_game_btn {transition:ease 0.5s;}
.landing_game_btn img{display:inline-block; width:100%; max-width:550px;}
.landing_game_btn a:hover{filter:brightness(140%);}
.landing_game_btn a:hover img{filter:drop-shadow(0px 2px 30px rgba(255,168,0,0.5));}

.landing_text1{float:left; width:100%; margin:30px 0 0 0; text-align:center; font-size:50px; color:#ffffff; text-shadow:2px 2px 3px rgba(0,0,0,0.5); word-break:keep-all;}
.landing_text1 span{font-weight:700; color:#ffcc00;}
.landing_text2{float:left; width:100%; margin:40px 0 0 0; text-align:center; font-size:28px; color:#ffffff; text-shadow:2px 2px 3px rgba(0,0,0,0.5); word-break:keep-all;}
.ltf1{font-weight:700; color:#ffcc00;}
.ltf2{font-weight:700; color:#ff0000;}

.landing_copy{float:left; width:100%; margin:40px 0 0 0; text-align:center;}
.landing_copy span{display:inline-block; padding:10px 30px; background:rgba(0,0,0,0.3); border-radius:100px; font-size:13px; color:#5e5e5e;}


.landing_howto_info{float:left; width:100%; margin:30px 0 0 0; text-align:center;}
.landing_howto_info_in{width:1052px; height:212px; margin:0 auto; background:url(../images/bg_howto.png) center bottom no-repeat; position:relative; display:flex; align-items:center;}
.howto_item{width:233px;}
.howto_item img{width:100%; max-width:233px; position:absolute; bottom:0; left:0;}
.howto_title{width:250px; text-align:center; display:flex; flex-direction: column; align-items: center;}
.howto_title{font-weight:700; font-size:40px; background-image: linear-gradient(#f5c576 0%,#a4704d 100%); filter: drop-shadow(0px 2px 3px rgba(0,0,0,0.5)); color: transparent; background-clip: text;}
.howto_title a{display:inline-block; margin:10px 0 0 0; width:100%; max-width:80%; height:60px; line-height:60px; border-radius:10px; text-align:center; background: linear-gradient(#f5c576 0%,#a4704d 100%); font-weight:700; font-size:30px; color:#ffffff; transition:ease 0.5s;}
.howto_title a:hover{filter:brightness(120%) hue-rotate(180deg); transform:scale(1.05);}
.howto_text{width:calc(100% - 483px);padding:0 20px; font-size:20px; line-height:1.6; text-align:left; color:#ffffff; text-shadow:2px 2px 3px rgba(0,0,0,0.5);}

.landing_teamview_btn{float:left; width:100%; margin:00px 0 0 0; text-align:center;}
.landing_teamview_btn {transition:ease 0.5s;}
.landing_teamview_btn img{display:inline-block; width:100%; max-width:600px;}
.landing_teamview_btn a:hover{filter:brightness(140%);}


.landing_item1{position:absolute; left:50%; top:311px; margin-left:-700px;}
.landing_item2{position:absolute; left:50%; top:311px; margin-left:280px;}
.landing_item3{position:absolute; bottom:0; left:0; width:100%; text-align:center;}
@media screen and (max-width:1920px) {
.landing_item3 img{width:100%;}
    
}
@media screen and (max-width:1400px) {
    .landing_item1{top:30vw; margin-left:0; left:-10px;}
    .landing_item2{top:30vw; margin-left:0; left:70%; right:20px;}
    .landing_item1 img{display:inline-block; width:30.36vw;}
    .landing_item2 img{display:inline-block; width:30.36vw; margin-left:0;}
	
	.landing_text1{font-size:3.57vw;}
	.landing_text2{font-size:2vw;}
	.landing_copy span{font-size:10px;}
	.howto_text{font-size:1.43vw;}
	.howto_title{font-size:2.86vw;}
	.howto_title a{font-size:2.14vw; height:40px; line-height:40px;}
	
	.landing_game_btn img{width:39.29vw;}
	.landing_howto_info_in{width:100%; height:auto; padding:20px 0; background-size:100% 100%;}
}
@media screen and (max-width:1024px) {
	.landing_wrap{padding:40px 20px 60px;}
 	.landing_game_btn img{width:60.29vw;}
	
	.landing_title{margin:20px 0 0 0;}
	.landing_game_btn{margin:20px 0 0 0;}
	.landing_text1{margin:10px 0 0 0;}
	.landing_text2{margin:20px 0 0 0;}
	.landing_copy{margin:30px 0 0 0;}
	.landing_howto_info{margin:20px 0 0 0;}
	
	.landing_text1{font-size:22px;}
	.landing_text2{font-size:16px;}	

	
	.howto_title{font-size:20px;}
	.howto_title a{font-size:16px;}	
	
	
	
	.landing_howto_info_in{flex-wrap:wrap;}
	.howto_item{display:none;}
	.howto_title{width:100%;}
	.howto_text{width:100%; margin:20px 0 0 0; text-align:center; font-size:14px;}
	
	.howto_title a{max-width:300px;}
}

@media screen and (max-width:768px) {
    .landing_item1{top:40vw;}
    .landing_item2{top:40vw;}    
}