@charset "UTF-8";

/* --------------------------------------------------------------------------
index
---------------------------------------------------------------------------- */
div.container { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; }
.animate { font-size:1000%; font-family: title; font-weight: 400; }
.animate span { display: inline-block; }

.animate span:nth-of-type(2) {
	animation-delay: .05s;
}
.animate span:nth-of-type(3) {
	animation-delay: .1s;
}
.animate span:nth-of-type(4) {
	animation-delay: .15s;
}
.animate span:nth-of-type(5) {
	animation-delay: .2s;
}
.animate span:nth-of-type(6) {
	animation-delay: .25s;
}
.animate span:nth-of-type(7) {
	animation-delay: .3s;
}
.animate span:nth-of-type(8) {
	animation-delay: .35s;
}/*
.animate span:nth-of-type(9) {
	animation-delay: .4s;
}
.animate span:nth-of-type(10) {
	animation-delay: .45s;
}
.animate span:nth-of-type(11) {
	animation-delay: .5s;
}
.animate span:nth-of-type(12) {
	animation-delay: .55s;
}*/



.top-wrapper-txt span { opacity: 0; transform: translate(-150px, 0) scale(.3); animation: leftRight .5s forwards; }
@keyframes leftRight {
	40% {
		transform: translate(50px, 0) scale(.8);
		opacity: 1;
		color: #fff;
	}

	60% {
		color: #fff;
	}

	80% {
		transform: translate(0) scale(3);
		opacity: 0;
	}

	100% {
		transform: translate(0) scale(1);
		opacity: 1;
	}
}



div.win2 { width:80%; margin:0 auto 0 auto; padding:0; overflow: hidden; }
div.app { width:100%; margin:0; padding:20px 0 100px 0; border-style:solid; border-color:#fff; border-width:0 0 2px 0; }
p.h1 { width:100%; margin:0 auto 0 auto; padding:0 0 50px 0; font-size: 200%; color:#fff; text-align: center; font-family: ut; }
h2 { width:100%; margin:160px auto 0 auto; padding:0 0 15px 0; font-size: 180%; color:#fff; text-align: center; font-family: ut; font-weight: 400; }
.top_border { border-style:solid; border-color:#fff; border-width:2px 0 0 0; padding:120px 0 0 0 !important; }

div.app_box { width:100%; margin:30px auto 0 auto; padding:0; overflow: hidden; }
div.app_float { width:50%; margin:0; padding:0; overflow: hidden; float:left; }
div.btn_store { width:250px; margin:0 auto 0 auto; padding:0; overflow: hidden; cursor: pointer; }
div.btn_store img { width:100%; margin:0; padding:0; }
div.qr_code { width:180px; margin:20px auto 0 auto; padding:0; overflow: hidden; cursor: pointer; }
div.qr_code img { width:100%; margin:0; padding:0; }

div.info_box { width:100%; margin:100px 0; padding:0; overflow: hidden; display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px;}
div.info_obj { margin:70px 0 0 0; padding:0; text-align: left; overflow: hidden; }
div.info_img { width:45%; margin:0; padding:0; overflow: hidden; float:left; }
div.info_img img { width:100%; margin:0; padding: 0; }
p.info_str { width:52%; margin:0 0 0 3%; padding: 0; font-size: 120%; color:#fff; text-align: left; letter-spacing: 1.5px; line-height: 1.5; float:left; }

p.auto_del { width:80%; margin:60px auto 0 auto; padding:25px; background: #595959; border-radius: 10px; font-size:110%; letter-spacing: 1.5px; line-height: 2; color:#CDCCCC; text-align: left; }

div.func_box { width:100%; margin:100px 0; padding:0; overflow: hidden; display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px;}
p.no_func { width:95%; margin:20px auto 0 auto; padding:20px; background: #fff; border-radius: 10px; font-size: 110%; color:#747070; text-align: left; overflow: hidden; }



/* ------------------------------------------------------
mobile
-------------------------------------------------------- */
@media screen and (min-width: 290px ) and (max-width:400px) {
	.animate { font-size:600%; }
	p.h1 { text-align: left; font-size: 130%; }
	h2 { font-size: 120%; text-align: left; }
	div.btn_store { width:140px; }
	div.qr_code { display: none; }
	div.win2 { width:90%; }
	div.info_box { display: grid; grid-template-columns: repeat(1, 1fr); gap: 5px;}
	div.info_img { width:80%; margin:0 10% 0 10%;}
	p.info_str { width:90%; margin:10px 5% 0 5%; font-size: 100%; }
	p.auto_del { width:100%; font-size:90%; letter-spacing: 1.5; }
	div.func_box { display: grid; grid-template-columns: repeat(1, 1fr); gap: 15px;}
}

@media screen and (min-width: 401px ) and (max-width:550px) {
	.animate { font-size:600%; }
	p.h1 { text-align: left; font-size: 150%; }
	h2 { font-size: 120%; }
	div.btn_store { width:150px; }
	div.qr_code { display: none; }
	div.win2 { width:90%; }
	div.info_box { display: grid; grid-template-columns: repeat(1, 1fr); gap: 5px;}
	div.info_img { width:80%; margin:0 10% 0 10%;}
	p.info_str { width:90%; margin:10px 5% 0 5%; font-size: 110%; }
	p.auto_del { width:100%; font-size:90%; letter-spacing: 1.5; }
	div.func_box { display: grid; grid-template-columns: repeat(1, 1fr); gap: 15px;}
}

@media screen and (min-width: 551px ) and (max-width:600px) {
	p.h1 { text-align: left; font-size: 150%; }
	h2 { font-size: 160%; }
	div.btn_store { width:180px; }
	div.qr_code { width:150px; }
	div.win2 { width:90%; }
	div.info_box { display: grid; grid-template-columns: repeat(1, 1fr); gap: 5px;}
	div.info_img { width:40%; }
	p.info_str { width:57%; font-size: 100%; }
	p.auto_del { width:100%; font-size:100%; }
	div.func_box { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px;}
	p.no_func { width:98%; margin:20px auto 0 auto; padding:20px 5px 20px 5px; font-size: 100%; }
}

@media screen and (min-width: 601px ) and (max-width:750px) {
	p.h1 { text-align: left; font-size: 160%; }
	div.btn_store { width:190px; }
	div.qr_code { width:150px; }
	div.win2 { width:90%; }
	div.info_box { display: grid; grid-template-columns: repeat(1, 1fr); gap: 5px;}
	p.auto_del { width:100%; font-size:100%; }
}

@media screen and (min-width: 751px ) and (max-width:1050px) {
	p.h1 { text-align: left; font-size: 180%; }
	div.win2 { width:90%; }
	div.info_img { width:90%; margin:0 5% 0 5%; }
	p.info_str { width:90%; margin:20px 5% 0 5%; font-size: 110%; }
	p.auto_del { width:90%; font-size:100%; }
}


@media screen and (min-width: 1051px ) and (max-width:1250px) {
	p.h1 { font-size: 160%; }
	div.win2 { width:90%; }
	p.info_str { font-size: 100%; }
}


@media screen and (min-width: 1251px ) and (max-width:1500px) {
	div.win2 { width:90%; }
}