@charset "utf-8";

#app_content{flex:auto;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;background:linear-gradient(180deg,hsl(var(--CPT-THM-H) 15% 50%/50%),transparent) no-repeat center/cover;
	&>.inner{width:min(var(--MaxContentWidth),100%);padding:var(--spacing);margin-inline:auto;box-sizing:border-box;display:grid;grid:"app_intro app_slide" auto "app_download app_slide" 1fr/30em 1fr;gap:var(--spacing);position:relative;}
	&::before{content:'';display:block;position:absolute;inset:0;z-index:0;width:min(1920px,100%);max-height:var(--VHeight);margin-inline:auto;background:url('../images/art/page_bg-b92fada734.svg') no-repeat top center;-webkit-mask-image:linear-gradient(180deg,rgba(0 0 0 / 75%),rgba(0 0 0 / 0));mask-image:linear-gradient(180deg,rgba(0 0 0 / 75%),rgba(0 0 0 / 0));}
	#app_intro{grid-area:app_intro;}
	#app_download{grid-area:app_download;}
	#app_slide{grid-area:app_slide;}
	@media only screen and (max-width:1000px){
		&>.inner{max-width:40em;grid:"app_intro" "app_download" "app_slide";row-gap:calc(var(--spacing) * 1.5);padding-block:calc(var(--spacing) * 1.5);}
	}
}


#app_intro{
	.intro{display:grid;grid-template-columns:auto 1fr;gap:1.5em;align-items:start;}
	.logo{width:6em;height:6em;background:url('../images/seagm_logo_2020_app-e519e21878.svg') no-repeat center/cover;border-radius:25%;overflow:hidden;
		&>span{display:none;}
	}
	.title{display:flex;flex-direction:column;gap:.5em;
		& h1{font-size:var(--SiteFS-XXL);font-weight:var(--SiteFW-EB);}
		& div{color:var(--body-text-color-a50);}
	}
}


#app_download{display:flex;flex-direction:column;gap:var(--spacing);
	.download_app_store{display:grid;grid-template-columns:repeat(auto-fill,minmax(12em,1fr));gap:1em;
		.link{display:grid;grid-template-columns:auto 1fr;column-gap:1em;align-items:center;color:inherit;padding:1em;border-radius:.5em;background-color:var(--background-color-L1);}
		.img{width:3em;height:3em;border-radius:.5em;overflow:hidden;
			&>img{display:block;width:100%;height:100%;object-fit:cover;}
			&>span{font-weight:var(--SiteFW-B);}
		}
	}
	.download_apk{
		.link{display:grid;grid-template-columns:auto 1fr;column-gap:1em;align-items:center;color:inherit;padding:1em;border-radius:.5em;background-color:var(--background-color-L1,#fff);
			&::before{content:attr(icon);font-size:2em;width:1.5em;height:1.5em;color:#fff;background-color:var(--SiteTHM);border-radius:25%;display:flex;align-items:center;justify-content:center;}
			&>div{display:flex;flex-direction:column;gap:.25em;}
			& b{font-weight:var(--SiteFW-B);}
			& span{font-size:var(--SiteFS-S);color:var(--body-text-color-a50);display:flex;align-items:center;gap:1em;}
			& i{font-style:normal;}
		}
	}
}


#app_slide{position:relative;overflow:hidden;touch-action:pan-y;--W:15em;
	&>.list{display:flex;
		.slide{flex:none;width:max(var(--W),calc((100% - 1.5em * 3) / 4));
			.img{border-radius:1.75em;background-color:#fff;overflow:hidden;
				&>img{display:block;width:100%;height:100%;aspect-ratio:375/812;object-fit:contain;}
			}
		}
	}
	@media only screen and (max-width:480px){margin-inline:calc(var(--spacing) * -1);padding-inline:var(--spacing);
		.slide .img{border-radius:1.333334em;}
	}
}


#app_footer{
	&>.inner{width:min(var(--MaxContentWidth),100%);padding:var(--spacing);margin-inline:auto;box-sizing:border-box;}
	.copyright{display:flex;flex-wrap:wrap;gap:1em;align-items:center;
		&::before{content:'';display:block;--h:1.25em;width:calc(182 / 42 * var(--h));height:var(--h);background:url('../images/seagm_logo_2020_text_white-2c37d6f16e.svg') no-repeat center/contain;filter:brightness(var(--brightness-filter,0));opacity:.25;}
		& h3{font-size:var(--SiteFS);font-weight:var(--SiteFW);color:var(--body-text-color-a50);}
	}
}