html,body{padding:0; margin:0; background:#FFF;width:100%; height:100%;}

.sm{ display:none;}
.pc{ display:block; width:100%;position:relative;}
.pc video{ width:100%; height:auto;}
.pc .btn{ position: absolute; z-index:2;padding-top:0px;transition: padding-top 200ms linear; display:none;}
.pc .btn:hover{padding-top:10px;transition: padding-top 200ms linear;}
.pc .btn img{ height:40px; width:auto;}

.btn1{left:28%; top:18%;}
.btn2{left:40%; top:22%;}
.btn3{left:50%; top:28%;}
.btn4{left:55%; top:37%;}
.btn5{left:58%; top:46%;}
.btn6{left:57%; top:55%;}
.btn7{left:55%; top:64%;}
.btn8{left:59%; top:73%;}
.btn9{left:62%; top:82%;}
.btn10{left:62%; top:91%;}
.btn11{right:50px;top:91%;}

@media screen and (max-width: 1560px) {
	.btn1{top:15%;}
	.btn2{top:19%;}
	.btn3{top:25%;}
	.btn4{top:34%;}
	.btn5{top:43%;}
	.btn6{top:52%;}
	.btn7{top:61%;}
	.btn8{top:68%;}
	.btn9{top:79%;}
	.btn10{top:88%;}
	.btn11{top:88%;}
}


@media screen and (max-width: 1440px) {
	.btn1{left:28%; top:14%;}
	.btn2{left:42%; top:18%;}
	.btn3{left:54%; top:24%;}
	.btn4{left:57%; top:33%;}
	.btn5{left:60%; top:42%;}
	.btn6{left:59%; top:51%;}
	.btn7{left:57%; top:60%;}
	.btn8{left:61%; top:69%;}
	.btn9{left:64%; top:78%;}
	.btn10{left:64%; top:87%;}
	.btn11{ top:87%;}
}


@media screen and (max-width: 768px) {
	.pc{ display:none;}
	.sm{ display:block; padding-bottom:50px;}
	.sm .gif{width:100%; position:relative;}
	.sm .gif img { width:100%; height:auto;}
	.sm .gif .btn{ position:absolute; z-index:1; right:5%; bottom:30px;}
	
	.sm .btn{ float:left; width:45%; margin-left:5%; margin-top:10px;margin-bottom:10px;}
	.sm .btn img { height:40px; width:auto;}
	
	.sm .gif .down{ position:absolute; z-index:999; right:5%; bottom:16%; width:90%; text-align:right; display: block;}
	.sm .gif .down img { height:auto; width:80%;}
}

@media screen and (max-width: 450px) {
	.sm .btn img { height:35px; width:auto;}
}
@media screen and (max-width: 400px) {
	.sm .btn img { height:30px; width:auto;}
}