@charset "UTF-8";
/**
*
* @authors Your Name (you@example.org)
* @date    2016-12-10 16:57:22
* @version $Id$
*/

/*
purple #B1658B;
red #CA2420;
blue #326295;
orange #F89829;
*/
html,body{
	letter-spacing: 3px;
	font-family: "微軟正黑體", "微软雅黑","Helvetica Neue", Helvetica, Arial, sans-serif;
	min-height: 100% !important;
    height: 100%;

    padding: 0;
    margin: 0;
    background: #EEE;
}

body{
	overflow-x: hidden;
}

.wrap{
	position: relative;
	display: block;
	margin: 0 auto;
	padding: 0;
	width: calc(100vh * (9/16));
	max-width: 100%;
	height: 100vh;
}

.wrap .game-start{
	width: 100%;
	height: 100%;
	background: url(../images/bg.png);
	background-repeat: no-repeat;
	background-size: cover;
}

.wrap .game-main{
	display: none;
	position: relative;
	width: 100%;
	height: 100%;
	background: url(../images/bg-2.png);
	background-repeat: no-repeat;
	background-size: cover;
}

.main-ill{
	width: 100%;
	padding-top: 30%;
}

img.bgill{
	width: 100%;
}

.main-btn{
	width: 50%;
	margin: 0 auto;
	text-align: center;
}

.main-btn img.go-btn{
	width: 100%;
	cursor: pointer;
}

.turntable{
	position: absolute;
	width: 76%;
	top: 35.6%;
	left: calc(50% - 38%);
}

.pointer{
	position: absolute;
	width: 15%;
	top: 48%;
	left: calc(50% - 7.5%);
}

.turntable img, .pointer img{
	width: 100%;
}

.wrap .game-result{
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.75);
}

.wrap .game-result.show{
	display: block;
	animation-name: showresultani;
    animation-duration: 0.5s;
}

.result-ill{
	width: 100%;
}

.result-btn{
	width: 50%;
	margin: 0 auto;
	text-align: center;
}

.result-btn img.go-btn{
	width: 100%;
	cursor: pointer;
}

@keyframes showresultani{
    from{
        left: -100%;
    }
    to{
        left: 0px;
    }
}