@font-face {
    font-family: 'AudiType-ExtendedBold';
    src: url('AudiType-ExtendedBold.eot')\9;
    src: url('AudiType-ExtendedBold.eot') format('embedded-opentype'),
         url('AudiType-ExtendedBold.otf') format('opentype'),
         url('AudiType-ExtendedBold.woff') format('woff'),
         url('AudiType-ExtendedBold.ttf') format('truetype'),
         url('AudiType-ExtendedBold.svg#AudiType-ExtendedBold') format('svg');
}

html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: visible;
	font-size: 16px;
	-webkit-text-size-adjust:100%;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
}

div.loading {
	width: 100%;
	height: 60px;
	position: absolute;
	top: 50%;
	margin-top: -30px;
	text-align: center;
}
div.loading p {
	font-family: "AudiType-ExtendedBold" sans-serif;
	font-size: 14px;
}

.clearfix:after {
	display: table;
	content: "";
	clear: both;
}

div.bottom-group {
	position: absolute;
	left: 30px;
	right: 30px;
	bottom: 30px;
}
div.btn-group {
	position: absolute;
	left: 25px;
	right: 25px;
	bottom: 30px;
}
div.btn-group > div.half-wrap {
	position: relative;
	float: left;
	min-height: 1px;
	width: 50%;
	padding: 0 5px;
	box-sizing: border-box;
}
a[class|=btn] {
	display: block;
	float: left;
	border-radius: 12px;
	background-image: url(../images/metal.jpg);
	background-size: 100%;
	background-position: center;
	width: 100%;
	height: 48px;
	position: relative;
	box-shadow: 0 2px 6px rgba(0,0,0,.2)
}
a[class|=btn]:before {
	display: block;
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	right: 3px;
	bottom: 3px;
	border-radius: 10px;
	box-shadow: 0 1px 4px rgba(0,0,0,.2) inset;
	z-index: 0;
}
a.btn-dark:before {
	background-color: #434C53;
}
a.btn-red:before {
	background-color: #c03;
}
a[class|=btn] span[class|=label] {
	display: block;
	background-size: 100%;
	height: 48px;
	width: 118px;
	position: relative;
	z-index: 1;
	margin: 0 auto;
	background-image: url(../images/sprite.png);
	background-size: 540px 600px;
}
a[class|=btn] span.label-start {
	/*background-image: url(../images/btn_start.png);*/
	width: 214px;
	background-position: -236px 0;
}
a[class|=btn] span.label-repick {
	/*background-image: url(../images/btn_repick.png);*/
	background-position: 0 -96px;
}
a[class|=btn] span.label-submit {
	/*background-image: url(../images/btn_submit.png);*/
	background-position: 0 -144px;
}
a[class|=btn] span.label-retry {
	/*background-image: url(../images/btn_retry.png);*/
	background-position: 0 -48px;
}
a[class|=btn] span.label-next {
	/*background-image: url(../images/btn_next.png);*/
	width: 214px;
	background-position: -236px -48px;
}
a[class|=btn] span.label-trick-3 {
	/*background-image: url(../images/btn_trick_3.png);*/
	background-position: -118px 0;
}
a[class|=btn] span.label-trick-2 {
	/*background-image: url(../images/btn_trick_2.png);*/
	background-position: -118px -48px;
}
a[class|=btn] span.label-trick-1 {
	/*background-image: url(../images/btn_trick_1.png);*/
	background-position: -118px -96px;
}
a[class|=btn] span.label-trick-0 {
	/*background-image: url(../images/btn_trick_0.png);*/
	background-position: -118px -144px;
}
a[class|=btn] span.label-more-lg {
	/*background-image: url(../images/btn_more_lg.png);*/
	width: 214px;
	background-position: -236px -144px;
}
a[class|=btn] span.label-use-trick {
	/*background-image: url(../images/btn_use_trick.png);*/
	background-position: -118px -192px;
}
a[class|=btn] span.label-replay {
	/*background-image: url(../images/btn_replay.png);*/
	background-position: 0 -192px;
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) {
	/*a[class|=btn] span.label-start {
		background-image: url(../images/btn_start@2x.png);
	}
	a[class|=btn] span.label-repick {
		background-image: url(../images/btn_repick@2x.png);
	}
	a[class|=btn] span.label-submit {
		background-image: url(../images/btn_submit@2x.png);
	}
	a[class|=btn] span.label-retry {
		background-image: url(../images/btn_retry@2x.png);
	}
	a[class|=btn] span.label-next {
		background-image: url(../images/btn_next@2x.png);
	}
	a[class|=btn] span.label-trick-3 {
		background-image: url(../images/btn_trick_3@2x.png);
	}
	a[class|=btn] span.label-trick-2 {
		background-image: url(../images/btn_trick_2@2x.png);
	}
	a[class|=btn] span.label-trick-1 {
		background-image: url(../images/btn_trick_1@2x.png);
	}
	a[class|=btn] span.label-trick-0 {
		background-image: url(../images/btn_trick_0@2x.png);
	}
	a[class|=btn] span.label-more-lg {
		background-image: url(../images/btn_more_lg@2x.png);
	}
	a[class|=btn] span.label-use-trick {
		background-image: url(../images/btn_use_trick@2x.png);
	}
	a[class|=btn] span.label-replay {
		background-image: url(../images/btn_replay@2x.png);
	}*/
	a[class|=btn] span[class|=label] {
		background-image: url(../images/sprite@2x.png);
	}
}
@media
only screen and (-webkit-min-device-pixel-ratio: 3),
only screen and (   min--moz-device-pixel-ratio: 3),
only screen and (     -o-min-device-pixel-ratio: 3/1),
only screen and (        min-device-pixel-ratio: 3),
only screen and (                min-resolution: 288dpi),
only screen and (                min-resolution: 3dppx) {
	/*a[class|=btn] span.label-start {
		background-image: url(../images/btn_start@3x.png);
	}
	a[class|=btn] span.label-repick {
		background-image: url(../images/btn_repick@3x.png);
	}
	a[class|=btn] span.label-submit {
		background-image: url(../images/btn_submit@3x.png);
	}
	a[class|=btn] span.label-retry {
		background-image: url(../images/btn_retry@3x.png);
	}
	a[class|=btn] span.label-next {
		background-image: url(../images/btn_next@3x.png);
	}
	a[class|=btn] span.label-trick-3 {
		background-image: url(../images/btn_trick_3@3x.png);
	}
	a[class|=btn] span.label-trick-2 {
		background-image: url(../images/btn_trick_2@3x.png);
	}
	a[class|=btn] span.label-trick-1 {
		background-image: url(../images/btn_trick_1@3x.png);
	}
	a[class|=btn] span.label-trick-0 {
		background-image: url(../images/btn_trick_0@3x.png);
	}
	a[class|=btn] span.label-more-lg {
		background-image: url(../images/btn_more_lg@3x.png);
	}
	a[class|=btn] span.label-use-trick {
		background-image: url(../images/btn_use_trick@3x.png);
	}
	a[class|=btn] span.label-replay {
		background-image: url(../images/btn_replay@3x.png);
	}*/
	a[class|=btn] span[class|=label] {
		background-image: url(../images/sprite@3x.png);
	}
}
a.btn-close {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	padding: 0;
	background-color: #c03;
	background-image: none;
	border: 3px solid white;
	box-sizing: border-box;
	font-weight: bolder;
	color: white;
	text-decoration: none;
	text-align: center;
	font-size: 16px;
	line-height: 26px;
}
a.btn-close:before {
	display: none;
}

div#game {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	-webkit-transition: opacity .5s;
	-moz-transition: opacity .5s;
	-ms-transition: opacity .5s;
	-o-transition: opacity .5s;
	transition: opacity .5s;
}

div#game.loading {
	opacity: 0;
}

div#scene {
	height: 50%;
	background-image: url(../images/bg.jpg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	position: relative;
}

div.mask {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(255, 255, 255, 0.5);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
}

div.car-container {
	width: 54%;
	height: 100%;
	margin: 0 auto;
	position: relative;
}
div[class|="car-model"] {
	width: 100%;
	height: 0;
	padding-bottom: 100%;
	/*margin: 0 auto;*/
	background-size: 100%;
	background-position: center;
	background-repeat: no-repeat;
	position: absolute;
	bottom: 6px;
}
div.car-model-a3 {
	background-image: url(../images/car_md_a3.png);
}
div.car-model-a6l {
	background-image: url(../images/car_md_a6l.png);
}
div.car-model-a7 {
	background-image: url(../images/car_md_a7.png);
}
div.car-model-q7 {
	background-image: url(../images/car_md_q7.png);
}
div.car-model-tt {
	background-image: url(../images/car_md_tt.png);
}

div.labels {
	position: absolute;
	top: 30px;
	left: 0;
	right: 0;
	height: 45px;
}
div.labels div[class|="label"] {
	width: 120px;
	margin: 0 auto;
	background-size: 100%;
	background-position: center;
	background-repeat: no-repeat;
	position: absolute;
	left: 50%;
	margin-left: -60px;

}
div.labels div[class|="label-level"] {
	height: 25px;
	top: 0;
}
div.labels div[class|="label-model"] {
	height: 20px;
	bottom: 0;
}

div.label-level-1 {
	background-image: url(../images/label_lv_1.png);
}
div.label-level-2 {
	background-image: url(../images/label_lv_2.png);
}
div.label-level-3 {
	background-image: url(../images/label_lv_3.png);
}
div.label-level-4 {
	background-image: url(../images/label_lv_4.png);
}
div.label-level-5 {
	background-image: url(../images/label_lv_5.png);
}
div.label-model-a3 {
	background-image: url(../images/label_md_a3.png);
}
div.label-model-a6l {
	background-image: url(../images/label_md_a6l.png);
}
div.label-model-a7 {
	background-image: url(../images/label_md_a7.png);
}
div.label-model-q7 {
	background-image: url(../images/label_md_q7.png);
}
div.label-model-tt {
	background-image: url(../images/label_md_tt.png);
}

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) {
	div.label-level-1 {background-image: url(../images/label_lv_1@2x.png);}
	div.label-level-2 {background-image: url(../images/label_lv_2@2x.png);}
	div.label-level-3 {background-image: url(../images/label_lv_3@2x.png);}
	div.label-level-4 {background-image: url(../images/label_lv_4@2x.png);}
	div.label-level-5 {background-image: url(../images/label_lv_5@2x.png);}
	div.label-model-a3 {background-image: url(../images/label_md_a3@2x.png);}
	div.label-model-a6l {background-image: url(../images/label_md_a6l@2x.png);}
	div.label-model-a7 {background-image: url(../images/label_md_a7@2x.png);}
	div.label-model-q7 {background-image: url(../images/label_md_q7@2x.png);}
	div.label-model-tt {background-image: url(../images/label_md_tt@2x.png);}
}
@media
only screen and (-webkit-min-device-pixel-ratio: 3),
only screen and (   min--moz-device-pixel-ratio: 3),
only screen and (     -o-min-device-pixel-ratio: 3/1),
only screen and (        min-device-pixel-ratio: 3),
only screen and (                min-resolution: 288dpi),
only screen and (                min-resolution: 3dppx) {
	div.label-level-1 {background-image: url(../images/label_lv_1@3x.png);}
	div.label-level-2 {background-image: url(../images/label_lv_2@3x.png);}
	div.label-level-3 {background-image: url(../images/label_lv_3@3x.png);}
	div.label-level-4 {background-image: url(../images/label_lv_4@3x.png);}
	div.label-level-5 {background-image: url(../images/label_lv_5@3x.png);}
	div.label-model-a3 {background-image: url(../images/label_md_a3@3x.png);}
	div.label-model-a6l {background-image: url(../images/label_md_a6l@3x.png);}
	div.label-model-a7 {background-image: url(../images/label_md_a7@3x.png);}
	div.label-model-q7 {background-image: url(../images/label_md_q7@3x.png);}
	div.label-model-tt {background-image: url(../images/label_md_tt@3x.png);}
}
div.labels .test {
	font-family: "AudiType-ExtendedBold";
}

div#main {
	height: 50%;
	position: relative;
	background-color: #e5eaee;
	background-image: linear-gradient(to bottom, #e5eaee, #fff);
	background-size: 100%;
}
div#main .bg {
	width: 100%;
	height: 100%;
	position: absolute;
	background-image: url(../images/ptn.png);
	background-size: 100%;
}

div#main > div#pages {
	width: 100%;
	height: 100%;
	position: relative;
}

div#main > div#pages > div[class|='page'] {
	width: 100%;
	height: 100%;
	position: absolute;
	opacity: 1;
	display: block;
}
/*div#main > div#pages > div[class|='page'].active {
	position: relative;
	opacity: 1;
	display: block;
}*/

div.page-pick {
	-webkit-transition: opacity 1s;
	-moz-transition: opacity 1s;
	-ms-transition: opacity 1s;
	-o-transition: opacity 1s;
	transition: opacity 1s;
}
div.page-pick.pick-ani-transition {
	opacity: 1;
}
div.page-pick.pick-ani-enter,
div.page-pick.pick-ani-leave {
	opacity: 0;
}
div#main > div#pages > div.page-pick.show-result {
	position: absolute;
}
div.page-pick .color-picker {
	position: absolute;
	top: 0;
	left: 35px;
	right: 35px;
	-webkit-transition: opacity .6s .5s, transform .6s .5s ease-out;
	-moz-transition: opacity .6s .5s, transform .6s .5s ease-out;
	-ms-transition: opacity .6s .5s, transform .6s .5s ease-out;
	-o-transition: opacity .6s .5s, transform .6s .5s ease-out;
	transition: opacity .6s .5s, transform .6s .5s ease-out;
}
div.page-pick .color-picker.hide {
	opacity: 0!important;
}
div.page-pick.show-result.pick-ani-transition .color-picker {
	-webkit-transform: translateY(-60%);
	-moz-transform: translateY(-60%);
	-ms-transform: translateY(-60%);
	-o-transform: translateY(-60%);
	transform: translateY(-60%);
	opacity: 1;
	-webkit-transition: opacity .6s .5s, transform .6s .5s ease-out;
	-moz-transition: opacity .6s .5s, transform .6s .5s ease-out;
	-ms-transition: opacity .6s .5s, transform .6s .5s ease-out;
	-o-transition: opacity .6s .5s, transform .6s .5s ease-out;
	transition: opacity .6s .5s, transform .6s .5s ease-out;
}
div.page-pick.pick-ani-transition .color-picker {
	-webkit-transform: translateY(-35px);
	-moz-transform: translateY(-35px);
	-ms-transform: translateY(-35px);
	-o-transform: translateY(-35px);
	transform: translateY(-35px);
	opacity: 1;
	-webkit-transition: opacity .6s, transform .6s ease-in-out;
	-moz-transition: opacity .6s, transform .6s ease-in-out;
	-ms-transition: opacity .6s, transform .6s ease-in-out;
	-o-transition: opacity .6s, transform .6s ease-in-out;
	transition: opacity .6s, transform .6s ease-in-out;
}
div.page-pick.pick-ani-enter .color-picker,
div.page-pick.pick-ani-leave .color-picker {
	-webkit-transform: translateY(10%);
	-moz-transform: translateY(10%);
	-ms-transform: translateY(10%);
	-o-transform: translateY(10%);
	transform: translateY(10%);
	opacity: 0;
	-webkit-transition: opacity .6s, transform .6s ease-in;
	-moz-transition: opacity .6s, transform .6s ease-in;
	-ms-transition: opacity .6s, transform .6s ease-in;
	-o-transition: opacity .6s, transform .6s ease-in;
	transition: opacity .6s, transform .6s ease-in;
}

@media only screen and (max-width: 320px) {
	div.page-pick .color-picker {
		left: 25px;
		right: 25px;
	}
}
div.page-pick .color-picker .picker-wrap {
	width: 100%;
	height: 0;
	padding-bottom: 100%;
	position: relative;
}
div.page-pick .color-picker .picker-circle {
	border-radius: 50%;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	box-sizing: border-box;
	background-image: url(../images/metal.jpg);
	background-size: 100%;
	padding: 4px;
	box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
div.page-pick .color-picker .picker-circle .picker-color {
	background-color: white;
	/*background-image: linear-gradient(to bottom, #c03, #f00);*/
	position: absolute;
	top: 4px;
	left: 4px;
	right: 4px;
	bottom: 4px;
	border-radius: 50%;
	/*box-shadow: 0 2px 6px rgba(0,0,0,.2) inset;*/
	overflow: hidden;
	border: 1px solid rgba(0,0,0,.3)
}
div.page-pick .color-picker .picker-circle .picker-color canvas#gradient {
	width: 100%;
	height: 100%;
}
div.page-pick .color-picker .picker-circle .picker-center {
	position: absolute;
	top: 68px;
	left: 68px;
	right: 68px;
	bottom: 68px;
	border-radius: 50%;
	background-image: url(../images/metal.jpg);
	background-size: 100%;
	box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
div.page-pick .color-picker .picker-circle .picker-center .label-drag {
	width: 82px;
	height: 43px;
	background-image: url(../images/label_hint.png);
	background-size: 100%;
	background-position: center;
	background-repeat: no-repeat;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -22px;
	margin-left: -41px;
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) {
	div.page-pick .color-picker .picker-circle .picker-center .label-drag {
		background-image: url(../images/label_hint@2x.png);
	}
}
@media
only screen and (-webkit-min-device-pixel-ratio: 3),
only screen and (   min--moz-device-pixel-ratio: 3),
only screen and (     -o-min-device-pixel-ratio: 3/1),
only screen and (        min-device-pixel-ratio: 3),
only screen and (                min-resolution: 288dpi),
only screen and (                min-resolution: 3dppx) {
	div.page-pick .color-picker .picker-circle .picker-center .label-drag {
		background-image: url(../images/label_hint@3x.png);
	}
}

div.page-pick .color-picker .picker-circle .picker-center .matching-ratio {
	font-size: 48px;
	font-family: 'AudiType-ExtendedBold';
	text-align: center;
	line-height: 48px;
	height: 48px;
	margin: 0;
	position: absolute;
	top: 50%;
	width: 100%;
	margin-top: -20px;
	background-color: #424B52;
	color: transparent;
	text-shadow: 0 2px 4px rgba(255,255,255,.15);
	-webkit-background-clip: text;
     -moz-background-clip: text;
          background-clip: text;
}
@media only screen and (max-width: 320px) {
	div.page-pick .color-picker .picker-circle .picker-center .matching-ratio {
		font-size: 36px;
		line-height: 36px;
		height: 36px;
		margin-top: -16px;
		letter-spacing: -0.1em;
	}
}
div.page-pick .color-picker .picker-circle .picker-center .matching-ratio .sym {
	font-size: 14px;
}
div.page-pick .color-picker .picker-circle .picker-center .correct-angle {
	position: absolute;
	width: 100%;
	height: 8px;
	top: 50%;
	margin-top: -4px;
	background-color: transparent;
}
div.page-pick .color-picker .picker-circle .picker-center .correct-angle:after {
	display: block;
	content: "";
	width: 0px;
	height: 0px;
	border-left: 12px solid #424B52;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-right: none;
	position: absolute;
	top: 0;
	right: 6px;
}
div.page-pick .color-picker .picker-circle .picker-center .correct-angle-range {
	position: absolute;
	width: 100%;
	height: 4px;
	top: 50%;
	margin-top: -2px;
	background-color: transparent;
}
div.page-pick .color-picker .picker-circle .picker-center .correct-angle-range:after {
	display: block;
	content: "";
	width: 0px;
	height: 0px;
	border-left: 6px solid #424B52;
	border-top: 2px solid transparent;
	border-bottom: 2px solid transparent;
	opacity: .5;
	border-right: none;
	position: absolute;
	top: 0;
	right: 6px;
}
div.page-pick .color-picker .picker-circle .picker-center .correct-angle-range-sm {
	position: absolute;
	width: 100%;
	height: 2px;
	top: 50%;
	margin-top: -1px;
	background-color: transparent;
}
div.page-pick .color-picker .picker-circle .picker-center .correct-angle-range-sm:after {
	display: block;
	content: "";
	width: 2px;
	height: 2px;
	border-radius: 50%;
	background-color: #424B52;
	/*border-left: 4px solid #424B52;
	border-top: 1px solid transparent;
	border-bottom: 1px solid transparent;*/
	opacity: .3;
	border-right: none;
	position: absolute;
	top: 0;
	right: 6px;
}
div.page-pick .color-picker .picker-circle .picker-show-touch {
	position: absolute;
	width: 44px;
	height: 44px;
	top: 0;
	right: 0;
	border-radius: 50%;
	background-color: white;
}
div.page-pick .color-picker .picker-circle .picker-hint-hand {
	width: 160px;
	height: 140px;
	background-image: url(../images/drag_hand.png);
	background-size: 100%;
	background-position: center;
	z-index: 2;
	position: absolute;
	top: 4px;
	left: 50%;
	margin-left: -80px;
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) {
	div.page-pick .color-picker .picker-circle .picker-hint-hand {
		background-image: url(../images/drag_hand@2x.png);
	}
}
@media
only screen and (-webkit-min-device-pixel-ratio: 3),
only screen and (   min--moz-device-pixel-ratio: 3),
only screen and (     -o-min-device-pixel-ratio: 3/1),
only screen and (        min-device-pixel-ratio: 3),
only screen and (                min-resolution: 288dpi),
only screen and (                min-resolution: 3dppx) {
	div.page-pick .color-picker .picker-circle .picker-hint-hand {
		background-image: url(../images/drag_hand@3x.png);
	}
}

div.modal-layer {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,.5);
	z-index: 10;
}

div.modal-layer .dialog {
	position: absolute;
	top: 50px;
	left: 30px;
	right: 30px;
	bottom: 50px;
	border-radius: 8px;
	background-color: white;
	padding: 20px;
	box-shadow: 0 3px 10px rgba(0,0,0,.5);
	font-size: 14px;
	line-height: 1.5em;
	box-sizing: border-box;
}
@media only screen and (max-width: 320px) {
	div.modal-layer .dialog {
		top: 40px;
		left: 20px;
		right: 20px;
		bottom: 40px;
	}
}
div#info .dialog {
	top: 100px;
	bottom: 100px;
	left: 30px;
	right: 30px;
	/*background-color: rgba(255,255,255,0);*/
	/*box-shadow: none;*/
}
@media only screen and (max-height: 627px) {
	div#info .dialog {
		top: 160px;
		bottom: 160px;
	}
}
@media only screen and (max-height: 568px) {
	div#info .dialog {
		top: 100px;
		bottom: 100px;
	}
}
@media only screen and (max-height: 480px) {
	div#info .dialog {
		top: 60px;
		bottom: 60px;
	}
}
div#info .dialog .label-intro {
	display: block;
	background-image: url(../images/label_intro.png);
	background-size: 100%;
	width: 89px;
	height: 18px;
	margin: 1em auto;
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) {
	div#info .dialog .label-intro {
		background-image: url(../images/label_intro@2x.png);
	}
}
@media
only screen and (-webkit-min-device-pixel-ratio: 3),
only screen and (   min--moz-device-pixel-ratio: 3),
only screen and (     -o-min-device-pixel-ratio: 3/1),
only screen and (        min-device-pixel-ratio: 3),
only screen and (                min-resolution: 288dpi),
only screen and (                min-resolution: 3dppx) {
	div#info .dialog .label-intro {
		background-image: url(../images/label_intro@3x.png);
	}
}
div#info .dialog ol.game-rules {
	padding-left: 1em;
}
div#info .dialog ol.game-rules li {
	margin-bottom: 1em;
}
div#info .dialog .bottom-group {
	/*position: absolute;*/
	/*width: auto;*/
	left: 20px;
	right: 20px;
	bottom: 20px;
}
div#info .dialog .game-tutorial {
	width: 80%;
	height: auto;
	display: block;
	margin: 1em auto;
	box-sizing: border-box;
	border: 1px solid #424B52;
	border-radius: 2px;
}

div.modal-layer.modal-ani-transition {
	opacity: 1;
	-webkit-transition: opacity .2s .2s;
	-moz-transition: opacity .2s .2s;
	-ms-transition: opacity .2s .2s;
	-o-transition: opacity .2s .2s;
	transition: opacity .2s .2s;
}
div.modal-layer.modal-ani-enter,
div.modal-layer.modal-ani-leave {
	opacity: 0;
}
div.modal-layer.modal-ani-transition div.dialog {
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
	transform: translateY(0);
	-webkit-transition: transform .5s ease-out;
	-moz-transition: transform .5s ease-out;
	-ms-transition: transform .5s ease-out;
	-o-transition: transform .5s ease-out;
	transition: transform .5s ease-out;
}
div.modal-layer.modal-ani-enter div.dialog,
div.modal-layer.modal-ani-leave div.dialog {
	-webkit-transform: translateY(120%);
	-moz-transform: translateY(120%);
	-ms-transform: translateY(120%);
	-o-transform: translateY(120%);
	transform: translateY(120%);
	-webkit-transition: transform .4s ease-in;
	-moz-transition: transform .4s ease-in;
	-ms-transition: transform .4s ease-in;
	-o-transition: transform .4s ease-in;
	transition: transform .4s ease-in;
}

/* page confirm */
div.page-confirm {
	padding: 30px;
	box-sizing: border-box;
}
div.page-confirm span.label-confirm-header {
	display: block;
	width: 200px;
	height: 21px;
	background-image: url(../images/label_confirm_header.png);
	background-size: 105%;
	background-position: 0%;
	background-repeat: no-repeat;
	margin: 20px 0;
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) {
	div.page-confirm span.label-confirm-header {
		background-image: url(../images/label_confirm_header@2x.png);
	}
}
@media
only screen and (-webkit-min-device-pixel-ratio: 3),
only screen and (   min--moz-device-pixel-ratio: 3),
only screen and (     -o-min-device-pixel-ratio: 3/1),
only screen and (        min-device-pixel-ratio: 3),
only screen and (                min-resolution: 288dpi),
only screen and (                min-resolution: 3dppx) {
	div.page-confirm span.label-confirm-header {
		background-image: url(../images/label_confirm_header@3x.png);
	}
}
.color-confirm {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background-image: url(../images/metal.jpg);
	background-size: 100%;
	background-position: center;
	box-shadow: 0 1px 2px rgba(0,0,0,.3);
	position: absolute;
	right: 30px;
	top: 34px;
	-webkit-transition: transform .5s, opacity .5s;
	-moz-transition: transform .5s, opacity .5s;
	-ms-transition: transform .5s, opacity .5s;
	-o-transition: transform .5s, opacity .5s;
	transition: transform .5s, opacity .5s;
}
.color-confirm.show-touching {
	-webkit-transform: translateY(-69px);
	-moz-transform: translateY(-69px);
	-ms-transform: translateY(-69px);
	-o-transform: translateY(-69px);
	transform: translateY(-69px);
}
.color-confirm.show-color-transition {
	opacity: 1;
}
.color-confirm.show-color-enter,
.color-confirm.show-color-leave {
	opacity: 0;
}
.color-confirm span.picked-color {
	display: block;
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	right: 3px;
	bottom: 3px;
	border-radius: 50%;
	background-color: #c03;
	box-shadow: 0 1px 4px rgba(0,0,0,.2) inset;
}

div.page-confirm p {
	margin-top: 36px;
	font-size: 14px;
	color: #424B52;
	line-height: 1.5em;
	font-weight: 600;
}
div.page-confirm.confirm-ani-transition {
	opacity: 1!important;
	-webkit-transition: opacity .5s .3s;
	-moz-transition: opacity .5s .3s;
	-ms-transition: opacity .5s .3s;
	-o-transition: opacity .5s .3s;
	transition: opacity .5s .3s;
}
div.page-confirm.confirm-ani-enter,
div.page-confirm.confirm-ani-leave {
	opacity: 0!important;
	-webkit-transition: opacity .5s;
	-moz-transition: opacity .5s;
	-ms-transition: opacity .5s;
	-o-transition: opacity .5s;
	transition: opacity .5s;
}
div.page-confirm.confirm-ani-transition > * {
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
	transform: translateY(0);
	-webkit-transition: transform .5s .3s ease-out;
	-moz-transition: transform .5s .3s ease-out;
	-ms-transition: transform .5s .3s ease-out;
	-o-transition: transform .5s .3s ease-out;
	transition: transform .5s .3s ease-out;
}
div.page-confirm.confirm-ani-enter > *,
div.page-confirm.confirm-ani-leave > * {
	-webkit-transform: translateY(50px);
	-moz-transform: translateY(50px);
	-ms-transform: translateY(50px);
	-o-transform: translateY(50px);
	transform: translateY(50px);
	-webkit-transition: transform .5s ease-in;
	-moz-transition: transform .5s ease-in;
	-ms-transition: transform .5s ease-in;
	-o-transition: transform .5s ease-in;
	transition: transform .5s ease-in;
}

/* page result */
div.page-result > div {
	width: 100%;
	height: 100%;
}
div.page-result p {
	font-size: 14px;
	color: #424B52;
	line-height: 1.5em;
	font-weight: 600;
	margin: 0;
	/*margin-bottom: 1em;*/
}
div.page-result p:last-of-type {
	margin-bottom: 1em;
}
div.page-result.result-ani-transition {
	opacity: 1!important;
	-webkit-transition: opacity .5s .3s;
	-moz-transition: opacity .5s .3s;
	-ms-transition: opacity .5s .3s;
	-o-transition: opacity .5s .3s;
	transition: opacity .5s .3s;
}
div.page-result.result-ani-enter,
div.page-result.result-ani-leave {
	opacity: 0!important;
	-webkit-transition: opacity .5s;
	-moz-transition: opacity .5s;
	-ms-transition: opacity .5s;
	-o-transition: opacity .5s;
	transition: opacity .5s;
}
div.page-result > div.result-ani-transition {
	/*opacity: 1!important;*/
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
	transform: translateY(0);
	-webkit-transition: transform .5s .3s ease-out;
	-moz-transition: transform .5s .3s ease-out;
	-ms-transition: transform .5s .3s ease-out;
	-o-transition: transform .5s .3s ease-out;
	transition: transform .5s .3s ease-out;
}
div.page-result > div.result-ani-enter,
div.page-result > div.result-ani-leave {
	/*opacity: 0!important;*/
	-webkit-transform: translateY(50px);
	-moz-transform: translateY(50px);
	-ms-transform: translateY(50px);
	-o-transform: translateY(50px);
	transform: translateY(50px);
	-webkit-transition: transform .5s ease-in;
	-moz-transition: transform .5s ease-in;
	-ms-transition: transform .5s ease-in;
	-o-transition: transform .5s ease-in;
	transition: transform .5s ease-in;
}

/* trick layer */
div#trick {
	z-index: 30;
}
div#trick .title {
	margin-top: 30px;
	text-align: center;
}
div#trick .label-trick {
	display: inline-block;
	width: 88px;
	height: 17px;
	background-image: url(../images/label_trick.png);
	background-size: 100%;
	background-position: center;
}

div#trick span[class|=img-trick] {
	display: block;
	width: 175px;
	height: 175px;
	/*padding-bottom: 100%;*/
	/*background-size: 100%;*/
	/*background-position: center;*/
	margin: 20px auto;
	background-image: url(../images/sprite.png);
	background-size: 540px 600px;
}
div#trick span.img-trick-1 {
	/*background-image: url(../images/img_trick_1.png);*/
	background-position: 0 -240px;
}
div#trick span.img-trick-2 {
	/*background-image: url(../images/img_trick_2.png);*/
	background-position: -175px -240px;
}
div#trick span.img-trick-3 {
	/*background-image: url(../images/img_trick_3.png);*/
	background-position: -350px -240px;
}
div#trick span.img-trick-1-used {
	/*background-image: url(../images/img_trick_1_used.png);*/
	background-position: 0 -415px;
}
div#trick span.img-trick-2-used {
	/*background-image: url(../images/img_trick_2_used.png);*/
	background-position: -175px -415px;
}
div#trick span.img-trick-3-used {
	/*background-image: url(../images/img_trick_3_used.png);*/
	background-position: -350px -415px;
}

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) {
	div#trick .label-trick {
		background-image: url(../images/label_trick@2x.png);
	}
	/*div#trick span.img-trick-1 {
		background-image: url(../images/img_trick_1@2x.png);
	}
	div#trick span.img-trick-2 {
		background-image: url(../images/img_trick_2@2x.png);
	}
	div#trick span.img-trick-3 {
		background-image: url(../images/img_trick_3@2x.png);
	}
	div#trick span.img-trick-1-used {
		background-image: url(../images/img_trick_1_used@2x.png);
	}
	div#trick span.img-trick-2-used {
		background-image: url(../images/img_trick_2_used@2x.png);
	}
	div#trick span.img-trick-3-used {
		background-image: url(../images/img_trick_3_used@2x.png);
	}*/
	div#trick span[class|=img-trick] {
		background-image: url(../images/sprite@2x.png);
	}
}
@media
only screen and (-webkit-min-device-pixel-ratio: 3),
only screen and (   min--moz-device-pixel-ratio: 3),
only screen and (     -o-min-device-pixel-ratio: 3/1),
only screen and (        min-device-pixel-ratio: 3),
only screen and (                min-resolution: 288dpi),
only screen and (                min-resolution: 3dppx) {
	div#trick .label-trick {
		background-image: url(../images/label_trick@3x.png);
	}
	/*div#trick span.img-trick-1 {
		background-image: url(../images/img_trick_1@3x.png);
	}
	div#trick span.img-trick-2 {
		background-image: url(../images/img_trick_2@3x.png);
	}
	div#trick span.img-trick-3 {
		background-image: url(../images/img_trick_3@3x.png);
	}
	div#trick span.img-trick-1-used {
		background-image: url(../images/img_trick_1_used@3x.png);
	}
	div#trick span.img-trick-2-used {
		background-image: url(../images/img_trick_2_used@3x.png);
	}
	div#trick span.img-trick-3-used {
		background-image: url(../images/img_trick_3_used@3x.png);
	}*/
	div#trick span[class|=img-trick] {
		background-image: url(../images/sprite@3x.png);
	}
}

div#trick .trick-list {
	position: absolute;
	top: 90px;
	left: 0;
	right: 0;
	width: 100%;
	height: 200px;
	overflow: hidden;
}
div#trick .trick-list:before,
div#trick .trick-list:after {
	display: block;
	content: "";
	position: absolute;
	width: 30px;
	height: 200px;
	top: 0;
	z-index: 2;
}
div#trick .trick-list:before {
	left: 0;
	background-image: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0));
}
div#trick .trick-list:after {
	right: 0;
	background-image: linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,0));
}
div#trick .trick-list ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
div#trick .trick-list ul li.trick-item {
	/*float: left;*/
	width: 100%;
	height: 100%;
	position: absolute;
	-webkit-transition: transform .5s;
	-moz-transition: transform .5s;
	-ms-transition: transform .5s;
	-o-transition: transform .5s;
	transition: transform .5s;
}
div#trick .trick-list ul li.trick-item.item-now {
	-webkit-transform: translateX(0) scale(1);
	-moz-transform: translateX(0) scale(1);
	-ms-transform: translateX(0) scale(1);
	-o-transform: translateX(0) scale(1);
	transform: translateX(0) scale(1);
	z-index: 1;
}
div#trick .trick-list ul li.trick-item.item-prev {
	-webkit-transform: translateX(-160px) scale(.8);
	-moz-transform: translateX(-160px) scale(.8);
	-ms-transform: translateX(-160px) scale(.8);
	-o-transform: translateX(-160px) scale(.8);
	transform: translateX(-160px) scale(.8);
	z-index: 0;
}
div#trick .trick-list ul li.trick-item.item-next {
	-webkit-transform: translateX(160px) scale(.8);
	-moz-transform: translateX(160px) scale(.8);
	-ms-transform: translateX(160px) scale(.8);
	-o-transform: translateX(160px) scale(.8);
	transform: translateX(160px) scale(.8);
	z-index: 0;
}
div#trick .trick-list ul li.trick-item.item-prev-prev {
	-webkit-transform: translateX(-240px) scale(.5);
	-moz-transform: translateX(-240px) scale(.5);
	-ms-transform: translateX(-240px) scale(.5);
	-o-transform: translateX(-240px) scale(.5);
	transform: translateX(-240px) scale(.5);
}
div#trick .trick-list ul li.trick-item.item-next-next {
	-webkit-transform: translateX(240px) scale(.5);
	-moz-transform: translateX(240px) scale(.5);
	-ms-transform: translateX(240px) scale(.5);
	-o-transform: translateX(240px) scale(.5);
	transform: translateX(240px) scale(.5);
}
div#trick p.trick-name {
	position: absolute;
	top: 300px;
	left: 0;
	right: 0;
	width: 100%;
	text-align: center;
	font-size: 16px;
	font-weight: 600;
}
div#trick a.use-trick {
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 20px;
	width: auto;
}
div#trick a.use-trick:before {
	-webkit-transition: background .3s;
	-moz-transition: background .3s;
	-ms-transition: background .3s;
	-o-transition: background .3s;
	transition: background .3s;
}
div#trick a.use-trick.disable:before {
	background-color: gray;
}
div#trick a.use-trick span {
	-webkit-transition: opacity .3s;
	-moz-transition: opacity .3s;
	-ms-transition: opacity .3s;
	-o-transition: opacity .3s;
	transition: opacity .3s;
}
div#trick a.use-trick.disable span {
	opacity: .8;
}
div#trick a.btn-close {
	position: absolute;
	top: -12px;
	right: -12px;
}

a.btn-skip {
	position: fixed;
	top: 20px;
	right: 20px;
	height: 28px;
	width: 54px;
	border-radius: 16px;
	background-image: none;
	border: none;
	background-color: black;
	opacity: .3;
	font-size: 10px;
	color: white;
	text-decoration: none;
	text-align: center;
	line-height: 28px;
	z-index: 20;
}
a.btn-skip.white {
	background-color: white;
	color: black;
	opacity: 1;
}
a.btn-skip:before,
a.btn-skip:after {
	display: none;
}


/* transition fade */
.fading-transition {
	opacity: 1;
	-webkit-transition: opacity .5s;
	-moz-transition: opacity .5s;
	-ms-transition: opacity .5s;
	-o-transition: opacity .5s;
	transition: opacity .5s;
}
.fading-enter,
.fading-leave {
	opacity: 0;
}
.rotating-transition {
	opacity: 1;
	-webkit-transition: opacity .2s 1s, transform 1s 1s;
	-moz-transition: opacity .2s 1s, transform 1s 1s;
	-ms-transition: opacity .2s 1s, transform 1s 1s;
	-o-transition: opacity .2s 1s, transform 1s 1s;
	transition: opacity .2s 1s, transform 1s 1s;
}
.rotating-enter,
.rotating-leave {
	opacity: 0;
	-webkit-transition: opacity .2s .8s, transform 1s;
	-moz-transition: opacity .2s .8s, transform 1s;
	-ms-transition: opacity .2s .8s, transform 1s;
	-o-transition: opacity .2s .8s, transform 1s;
	transition: opacity .2s .8s, transform 1s;
}


/* 更多精彩内容 */
/*.more-list {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	min-height: 100%;
	background-image: linear-gradient(to bottom, #e5eaee, #f2f4f3);
	overflow: scroll;
	-webkit-overflow-scrolling: touch;
}
.more-list .bg {
	position: absolute;
	width: 100%;
	height: 100%;
	background-image: url(../images/ptn.png);
	background-size: 100%;
}
.more-list ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.more-list ul li {
	height: 96px;
	background-color: white;
	margin: 1em 0;

}
.more-list ul li div.img {
	height: 96px;
	width: 96px;
	float: left;
	margin-right: 1em;
	background-size: cover;
	background-position: center;
}

.more-list ul li a {
	text-decoration: none;
}
.more-list ul li div.content {
	padding: 1em 0;
	color: black;
	text-decoration: none;
}*/
article.more-content {
	padding: 1em 1.5em;
	font-size: 14px;
	line-height: 1.5em;
	background-color: #f2f4f3;
	background-image: url(../images/ptn.png);
	background-size: 100%;
	color: black;
}
article.more-content img {
	width: 100%;
	box-shadow: 0 6px 14px -6px black;
}
article.more-content h2 {
	font-size: 1.5em;
	line-height: 1.3em;
	font-weight: 600;
}
article.more-content section + section {
	border-top: 1px solid #e5eaee;
	padding-top: 1em;
	margin-top: 2em;
}