html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}
* {
    font-family: "微軟正黑體", "Microsoft JhengHei", "微軟雅黑體", "Microsoft YaHei", "蘋果儷中黑", "Apple LiGothic Medium",Arial, Helvetica, sans-serif;
}
html, body {
	touch-action:none;
    width: 100%;
    height: 100%;
    position:fixed;
    overflow:hidden;
    font-family: "微軟正黑體", "Microsoft JhengHei", "微軟雅黑體", "Microsoft YaHei", "蘋果儷中黑", "Apple LiGothic Medium",Arial, Helvetica, sans-serif;
}
.con_float{
	overflow: auto;
}
.left{
	float: left;
}
.left:after{
	content:"";
	display: block;
	clear: both;
}
.container{
	position: relative;
	width: 100%;
	height: 100%;
}
.bg{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;

	background-image: url("../img/bg2.png");
	background-size: cover;
	background-position: center center;
}
#canvas{

	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 50;

	/*width: 50%;
	height: 50%;
	left: 25%;
	top: 25%;
	outline:1px solid red;*/
}
.elements{
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 100;
	/*display: none;*/
}
.score_con{
	position: absolute;
	top: 20px;
	left: 20px;
}
.score{
	position: relative;
	width: 150px;
	height: 51px;
	background-image: url("../img/score.png");
	background-size: cover;
}
.result{
	position: relative;
	font-size: 40px;
	color: #172a53;
	font-weight: 700;
	line-height: 50px;
}
.time_con{
	position: absolute;
	top: 20px;
	right: 20px;
}
.time{
	position: relative;
	width: 123px;
	height: 45px;
	background-image: url("../img/time.png");
	background-size: cover;
}
.num_con{

}
.num_con .num{
	width: 33px;
	height: 45px;
	margin-top: 2px;
	background-size: cover;
	display: none;
}
.num0{
	background-image: url("../img/0.png");
}
.num1{
	background-image: url("../img/1.png");
}
.num2{
	background-image: url("../img/2.png");
}
.num3{
	background-image: url("../img/3.png");
}
.num4{
	background-image: url("../img/4.png");
}
.num5{
	background-image: url("../img/5.png");
}
.num6{
	background-image: url("../img/6.png");
}
.num7{
	background-image: url("../img/7.png");
}
.num8{
	background-image: url("../img/8.png");
}
.num9{
	background-image: url("../img/9.png");
}

.btn_start{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 300px;
	height: 59px;
	background-image: url("../img/touch.png");
	background-size: cover;
	margin-left: -150px;
	margin-top: -30px;
	cursor:pointer;
}
.mark{
	width: 50px;
	height: 60px;
	background-image: url("../img/mark.png");
}
.blur{
	-webkit-filter: blur(5px);
  	filter: blur(5px);
}
#banner{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}
.swiper-container{
	/*width: 1366px;*/
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

}
.banner{
background-color: #fff;
	position: absolute;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	/*background-color: red;*/
}
#banner1{background-image: url("../img/UBS 2019_Game Slide_US_A.jpg");}
#banner2{background-image: url("../img/UBS 2019_Game Slide_US_B.jpg");}
#banner3{background-image: url("../img/UBS 2019_Game Slide_EURO_A.jpg");}
#banner4{background-image: url("../img/UBS 2019_Game Slide_EURO_B.jpg");}
#banner5{background-image: url("../img/UBS 2019_Game Slide_Why.jpg");}