/****************************************
	==== FONT
****************************************/

body,input,button,textarea,button {
    font-family: 'Segoe UI',SegoeUI,'Microsoft YaHei',微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif;
	font-feature-settings: "pkna";
}


/****************************************
	==== LAYOUT
****************************************/

html,body {
	height: 100%;
}
html {
	font-size: 18px ;
}
body {
	font-size: 18px ;
	color: #161718 ;
	line-height: 1.6 ;
	background-color : #000 ;
	word-break:normal;
	overflow-y: scroll ;
}

input[type="text"],
input[type="password"] {
	width: 100% ;
	padding: 0.5rem 1rem 0.5rem 2.2rem ;
	border: 1px solid #ccc;
	border-radius: 0.5rem ;
	outline: none;
	background: none;
	box-sizing: border-box ;
	position: relative;
}
input[type="text"]#login_name,
input[type="text"]#create_name {
	background: url("../img/icon_01.png") no-repeat 0.4rem center ;
}
input[type="password"]#login_pw,
input[type="password"]#create_pw {
	background: url("../img/icon_02.png") no-repeat 0.4rem center ;
}
input[type="checkbox"] {
	margin-right: 0.5rem ;
}
::placeholder {
  color: #aaa;
}

p{ margin: 0 0 1rem ; }
p.input{ margin-bottom: 0.5rem ; }
p.input + .btn{ margin-top: 1rem ; }

.btn a {
	color: #fff ;
	background: #478cb0 ;
	text-decoration: none ;
	text-align: center ;
	padding: 0.4rem 1rem ;
	display: block ;
	width: 100% ;
	margin: 0 auto ;
	box-sizing: border-box ;
	border-radius: 0.5rem ;
}
.btn a:hover {
	background: #6DB9E1 ;
}
.btn.ok a,
.btn.ng a {
	box-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5) inset,
				-1px -1px 1px rgba(0, 0, 0, 0.3) inset ;
}
.btn.ok a,
.btn.ok a:hover {
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f2ffdb+0,a8e144+20,a8e144+20,2f840c+70,a8e144+100 */
background: rgb(242,255,219); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(242,255,219,1) 0%, rgba(168,225,68,1) 20%, rgba(168,225,68,1) 20%, rgba(47,132,12,1) 70%, rgba(168,225,68,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(242,255,219,1) 0%,rgba(168,225,68,1) 20%,rgba(168,225,68,1) 20%,rgba(47,132,12,1) 70%,rgba(168,225,68,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(242,255,219,1) 0%,rgba(168,225,68,1) 20%,rgba(168,225,68,1) 20%,rgba(47,132,12,1) 70%,rgba(168,225,68,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2ffdb', endColorstr='#a8e144',GradientType=0 ); /* IE6-9 */
}
.btn.ng a,
.btn.ng a:hover {
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffdbdb+1,e93939+20,840c0c+71,e93939+100 */
background: rgb(255,219,219); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(255,219,219,1) 1%, rgba(233,57,57,1) 20%, rgba(132,12,12,1) 71%, rgba(233,57,57,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(255,219,219,1) 1%,rgba(233,57,57,1) 20%,rgba(132,12,12,1) 71%,rgba(233,57,57,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(255,219,219,1) 1%,rgba(233,57,57,1) 20%,rgba(132,12,12,1) 71%,rgba(233,57,57,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffdbdb', endColorstr='#e93939',GradientType=0 ); /* IE6-9 */
}
.btn.ok a:hover,
.btn.ng a:hover {
	opacity: 0.8 ;
}
.btn_container {
	width: 100% ;
	justify-content: center;
	align-items: center;
}
.btn_container .btn {
	width: 50% ;
}


.flex {
		display: -webkit-flex;
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
	display: flex;
}


/****************************************
	==== game_slot
****************************************/

body#game_slot #open_login_btn {
	position: fixed ;
	top: 0.2rem ;
	right: 0.2rem ;
	width: 4.5rem ;
}

body#game_slot #rule,
body#game_slot #login,
body#game_slot #auto {
	display: none ;
}
body#game_slot .overlay {
	width: 100% ;
	height: 100% ;
	background: rgba(0, 0, 0, 0.8);
	background-size: cover ;
	position: fixed ;
	top: 0 ;
	left: 0 ;
	z-index: 2 ;
}
body#game_slot .modal {
	width: 100% ;
	height: 100% ;
	position: fixed ;
	top: 0 ;
	left: 0 ;
	z-index: 3 ;
	overflow:auto;
      -webkit-overflow-scrolling:touch;
}
body#game_slot .modal_container {
	position: absolute;
	top: 50%;
	left: 50%;
		-webkit-transform: translateY(-50%) translateX(-50%);
	transform: translateY(-50%) translateX(-50%);
	z-index: 4 ;
}
body#game_slot .modal_container .box {
	font-size: 0.8rem ;
	width: 94vw ;
	max-width: 30rem ;
	background: #fff ;
	padding: 1rem ;
	box-sizing: border-box ;
	border-radius: 0.5rem ;
}
body#game_slot #auto .modal_container .box {
	color: #fff ;
	background: #000 ;
	border: 2px solid #555 ;
}
body#game_slot .modal_container .box + .box {
	margin-top: 0.2rem ;
}
body#game_slot .modal_container .box .title {
	font-size: 1rem ;
	text-align: center ;
	margin-bottom: 0.5rem ;
}
body#game_slot #auto .modal_container .box .title {
	color: #FFCE00 ;
	text-align: center ;
	font-size: 1rem ;
	border-top: 1px solid #FFCE00 ;
	border-bottom: 1px solid #FFCE00 ;
	padding: 0.2rem ;
	margin-bottom: 1rem ;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+1,1+30,1+70,0+100 */
background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 1%, rgba(0,0,0,1) 30%, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 1%,rgba(0,0,0,1) 30%,rgba(0,0,0,1) 70%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 1%,rgba(0,0,0,1) 30%,rgba(0,0,0,1) 70%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */
}
body#game_slot .modal_container .box .title_sub {
	text-align: center ;
	margin-bottom: 0.5rem ;
}
body#game_slot .modal_container .box ul {
	margin-bottom: 0.5rem ;
}
body#game_slot .modal_container .box p:last-child {
	margin: 0 ;
}
body#game_slot .modal_container .box ul.auto_option li {
	padding-bottom: 0.5rem ;
}
body#game_slot .modal_container .box ul.auto_option li label {
	cursor: pointer ;
}
body#game_slot .modal_container .box .auto_num {
	padding: 0.5rem 0 ;
	margin-bottom: 1rem ;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,0.2+30,0.2+70,0+100 */
background: -moz-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 30%, rgba(255,255,255,0.2) 70%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.2) 30%,rgba(255,255,255,0.2) 70%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.2) 30%,rgba(255,255,255,0.2) 70%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
}
body#game_slot .modal_container .box .auto_num ul.auto_num_list {
	margin: 0 auto ;
		-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}
body#game_slot .modal_container .box .auto_num ul.auto_num_list li {
	padding: 0.2rem ;
}
body#game_slot .modal_container .box .auto_num ul.auto_num_list li .btn a {
	font-size: 0.9rem ;
	color: #1a1a24 ;
	font-weight: bold ;
	text-shadow: 0 1px 1px rgba(255, 255, 255, 1);
	box-shadow: 1px 1px 1px rgba(255, 255, 255, 1) inset,
				1px 1px 1px rgba(0, 0, 0, 0.3) ;
	width: 4rem ;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,dadae6+20,8b8ba9+70,dadae6+100 */
background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(218,218,230,1) 20%, rgba(139,139,169,1) 70%, rgba(218,218,230,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(218,218,230,1) 20%,rgba(139,139,169,1) 70%,rgba(218,218,230,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(218,218,230,1) 20%,rgba(139,139,169,1) 70%,rgba(218,218,230,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dadae6',GradientType=0 ); /* IE6-9 */
}
body#game_slot .modal_container .box .auto_num ul.auto_num_list li .btn a:hover {
	opacity: 0.8 ;
}
body#game_slot .modal_container .box .note {
	text-align: center ;
}

body#game_slot .modal_container .box .input{ 
	justify-content: center;
	align-items: center;
	position: relative ;
}
body#game_slot .modal_container .box .input i{
	color: #ccc ;
	margin-right: 0.5rem ;
	position: absolute ;
	top: 50% ;
	left: 0.5rem ;
	margin-top: -0.5rem ;
}
body#game_slot .modal_container .box .btn a {
	width: 80% ;
}
body#game_slot .modal_container .box .btn + .btn {
	margin-top: 0.5rem ;
}
body#game_slot .modal_container .box .btn_container .btn + .btn {
	margin-top: 0 ;
}

body#game_slot iframe {
	border:none;
	display:block;
}

body#game_slot .btn_close{
	position: fixed;
	width: 100% ;
	bottom: 0 ;
	left: 0 ;
	z-index: 10 ;
}
body#game_slot .btn_close a{
	display: block;
	text-align: center ;
	background: #000 ;
	border-top: 1px solid #45494d ;
	text-align: center ;
	padding: 0.4rem 0 0.2rem ;
	transition: .3s ;
}
body#game_slot .btn_close a:hover{
	background: #45494d ;
}
body#game_slot .css-cancel{
	display: inline-block;
	position: relative;
	padding: 0;
	width: 2px;
	height: 30px;
	background: #fff;
	transform: rotate(45deg);
	cursor: pointer;
}
body#game_slot .css-cancel:before{
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	left: -14px;
	margin-top: -1px ;
	width: 30px;
	height: 2px;
	background: #fff;
}
body#game_slot.active {
	display: block !important;
}

body#game_slot #swipe {
	color: #fff ;
}
body#game_slot #swipe .img {
	width: 50% ;
	margin: 0 auto ;
	position: relative ;
	text-align: center ;
	margin-bottom: 1rem ;
}
body#game_slot #swipe .img .bullet,
body#game_slot #swipe .img .hand {
	width: 100% ;
}
body#game_slot #swipe .img .bullet {
	display: inline-block ;
}
body#game_slot #swipe .img .hand {
	position: absolute ;
	top: 70% ;
	left: 50% ;
	animation: hand 1s ease-out infinite ;
}
@keyframes hand {
		0% { transform: translate3d(0, 0, 0) ; opacity: 0 ; }
		50% { opacity: 1 ; }
		100% { transform: translate3d(0, -6rem, 0) ; opacity: 0 ; }
}

body#game_slot #slot_modal .box {
	color: #fff ;
	background: #000 ;
	border: 0.1rem solid #fff ;
}
body#game_slot #slot_modal .box .contents {
	margin-bottom: 1rem ;
}

/****************************************
	==== -767px
****************************************/

@media screen and (max-width: 767px) {
	
body#game_slot .modal_container .box {
	padding: 1rem 0.5rem ;
}

}
/****************************************
	==== df
****************************************/

#forcer {
	width: 100%;
	height: 100%;
	position: absolute;
	pointer-events: none;
	background-color: rgba(120,120,120,0);
	z-index: 2;
}

#forcer.opened{
	pointer-events: all;
	background-color: rgba(10, 10, 10, 0.7);
}

#forcerButton,
#forcerSubmit{
	color: #fff ;
	background: #478cb0 ;
	text-decoration: none ;
	text-align: center ;
	padding: 0.4rem 1rem ;
	margin: 0 auto ;
	box-sizing: border-box ;
	border-radius: 0.5rem ;
	width: 5rem ;
	display:block;
	pointer-events: all;
	cursor: pointer ;
}
#forcerButton{
	position: fixed ;
	top: 0.2rem ;
	right: 4.5rem ;
}
#forcerButton:hover,
#forcerSubmit:hover {
	background: #6DB9E1 ;
}



#forcerConsole {
	position: absolute;
	top: 50%;
	left: 50%;
		-webkit-transform: translateY(-50%) translateX(-50%);
	transform: translateY(-50%) translateX(-50%);
	z-index: 4 ;
	font-size: 1rem ;
	width: 90vw ;
	max-width: 30rem ;
	background: #fff ;
	padding: 1rem ;
	box-sizing: border-box ;
	border-radius: 0.5rem ;
}

#fightSelect{
	margin-left: calc(0.85vw + 10px);
	width: calc(5vw + 15px);
	height: calc(1.5vw + 8px);
	font-size: calc(1vw + 7px);
}

#angerSelect{
	margin-left: calc(0.85vw + 10px);
	width: calc(7vw + 25px);
	height: calc(1.5vw + 8px);
	font-size: calc(1vw + 7px);
}

.badgeSelect{
	margin-left: calc(0.65vw + 10px);
	width: calc(6vw + 15px);
	height: calc(1.5vw + 8px);
	font-size: calc(1vw + 4px);
}

#fightSelectLabel, #angerSelectLabel, #badgeSelectLabel{
	font-size: calc(1.5vw + 7px);
}

#forcerInputControls{
	width: 100%;
	margin-top: 1rem ;
}

#forcerTitle{
	font-size: 1rem ;
	color: #555 ;
	text-align: center ;
	margin-bottom: 0.5rem ;
}

#reelInputs{
	height:20vh;
	justify-content: center;
}

#forcerResults{
	height: 10vh;
	min-width: 200px;
	text-align: center;
	width: 40vw;
	margin-bottom: 2vh;
	margin-top: 1vh;
	background-color: rgba(235,235,235,1);
	border: solid 1px black;
}


#spinSelect{
	padding:1vh;
	margin: 0;
	padding: 0.5rem 1rem ;
	border: 1px solid #ccc;
	border-radius: 0.5rem ;
	outline:none;
	display: inline-block;
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
	cursor:pointer;
	width: 100%;
}

#forcerExitButton{
	position: fixed;
	width: 100% ;
	bottom: 0 ;
	left: 0 ;
	z-index: 10 ;
	display: block;
	text-align: center ;
	background: #000 ;
	padding: 0.4rem ;
	transition: .3s ;
	cursor: pointer ;
}
#forcerExitButton:hover{
	background: #45494d ;
}

#forcerSelectBuffer{
	-webkit-box-direction: normal;
	-moz-box-direction: normal;
	-webkit-box-orient: horizontal;
	-moz-box-orient: horizontal;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
	width: 100% ;
}

#forcerSelectBuffer:after{
	content:'>';
	font:2.5vw "Consolas", monospace;
	color:#aaa;
	-webkit-transform:rotate(90deg);
	-moz-transform:rotate(90deg);
	-ms-transform:rotate(90deg);
	transform:rotate(90deg);
	right:2.7vw;
	padding:0 0 2px;
	border-bottom:1px solid #ddd;
	position:relative;
	pointer-events:none;
}

.forcerVertical {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-direction: normal;
	-moz-box-direction: normal;
	-webkit-box-orient: vertical;
	-moz-box-orient: vertical;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-flex-wrap: nowrap;
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
	-webkit-box-pack: start;
	-moz-box-pack: start;
	-webkit-justify-content: flex-start;
	-ms-flex-pack: start;
	justify-content: flex-start;
	-webkit-align-content: flex-start;
	-ms-flex-line-pack: start;
	align-content: flex-start;
	-webkit-box-align: center;
	-moz-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}

.forcerHorizontal {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-direction: normal;
	-moz-box-direction: normal;
	-webkit-box-orient: horizontal;
	-moz-box-orient: horizontal;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-flex-wrap: nowrap;
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
	-webkit-box-pack: center;
	-moz-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-align-content: flex-start;
	-ms-flex-line-pack: start;
	align-content: flex-start;
	-webkit-box-align: center;
	-moz-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}

.reelInput{
	width: 5vw;
	min-width: 5vh;
	margin-left: 0.7vw;
	margin-right: 0.7vw;
	height: 1.75vh;
}