/*
 * Start Bootstrap - Full Slider (http://startbootstrap.com/)
 * Copyright 2013-2016 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)
 */

html,
body {
    height: 100%;
	font-family: "Microsoft JhengHei", Arial, Helvetica, sans-serif;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#af1e41+0,ff3100+100 */
	color: #333;
	margin: 0;
	padding: 0;
}

body{
	background: url(../img/bg.jpg) left top no-repeat; 
	background-size: cover;
	background-color: #fef1bb;
	overflow-x: hidden;
	position: relative;
}

.carousel,
.item,
.active {
    height: 100%;
}

.carousel-inner {
    height: 100%;
}

/* Background images are set within the HTML using inline CSS, not here */

.fill {
    width: 100%;
    height: 100%;
    background-position: center top;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

#index footer {
    margin: 0;
	font-size: 18px;
	text-align: center;
}

footer {
    padding: 70px 0;
	font-size: 18px;
	text-align: center;
	background: #af1e41;
	height: 70px;
	width: 100%;
	color: #FFF;
}

footer a, footer a:hover,footer a:focus{
	color: #FFF !important;
}

body#index footer {
	color: #FFF;
}

#dark-bg{
	position: absolute;
	left: 0;
	bottom: 0;
	background: rgba(0,0,0,.5);
	height: 160px;
	width: 100%;
}

body#game{
	background: url(../img/bg.jpg) left 1400px no-repeat;
	background-color: #fef1bb; 
}

.col-lg-4{
	margin-bottom: 50px;
    text-align: center;
}

.box{
	background-color: #fff;
	padding: 35px 25px 30px 25px;
	display: none;
}

.col-lg-12 ul li{
	list-style: none;
	color: #FFF;
	background-color: #af1e41;
	float: left;
	width: 25%;
	text-align: center;
	margin-left: -15px;
	margin-right: 15px;
	height: 10px;
	line-height: 50px;
}

#box01{
	display: block;
}
.col-lg-12 ul li a{
	color: #af1e41;
	/*background-color: #af1e41;*/
	line-height: 24px;
}

.col-lg-12 ul li a p{
	font-size: 20px;
	display: block;
	margin-top: -48px;
}

.divImg{
    margin-left: 35%;
}

#divImg-1{
	background: url("../img/icons-1.png");
	width: 71px;
	height: 71px;
	margin-top: -30px;

}

#divImg-1:hover, #divImg-1.active{
	background: url("../img/icon-1.png");
}


#divImg-2{
	background: url("../img/icons-2.png");
	width: 71px;
	height: 71px;
	margin-top: -30px;
}

#divImg-2:hover, #divImg-2.active{
	background: url("../img/icon-2.png");
}

#divImg-3{
	background: url("../img/icons-3.png");
	width: 71px;
	height: 71px;
	margin-top: -30px;
}

#divImg-3:hover, #divImg-3.active{
	background: url("../img/icon-3.png");
}

#divImg-4{
	background: url("../img/icons-4.png");
	width: 71px;
	height: 71px;
	margin-top: -30px;
}

#divImg-4:hover, #divImg-4.active{
	background: url("../img/icon-4.png");
}

a, a:hover{
	text-decoration: none;
}

.pull-center{
	float: right;
}

.navbar-brand {
	height: 60px !important;
}

@media (min-width: 1260px) {
	#dark-bg{
		height:125px;
	}

}
@media (min-width: 768px) {
	.navbar {
		height: 80px;
		min-height: 80px !important;
	}
}
@media (max-width: 1024px) {
	@supports (-webkit-overflow-scrolling: touch) {
	  button.btn.btn-dark {
		color: #fef1bb;
	  }
	}
}
@media (max-width: 768px) {
	.col-lg-12 ul li a p{
		font-size: 22px;
		display: none;
	}
	#dark-bg{
		height:90px;
	}
	
	.divImg{
		margin-left: 8%;
	}
	.pull-center{
		float: none;
	}
	h2, .h2 {
		font-size: 20px;
	}
	.col-xs-12 {
		width: 50%;
	}
	.btn-block {
		display: block;
	}
	.col-xs-9 {
		line-height: 48px;
	}

}


@media (max-width: 540px) {
	#dark-bg{
		height: 110px;
	}
	h2, .h2 {
		font-size: 20px;
	}
	.pull-right {
		margin-right: 38%;
	    margin-top: -20px;
	}
	td{
		font-size: 14px;
	}
	.btn{
		font-size: 18px;
	}
	tr img{
		width: 100px;
	}
	tr th{
		font-size: 16px;
	}
	/*tr td:nth-child(5), tr th:nth-child(5) {
		display: none;
	}*/
	tr h5, tr .h5 {
		font-size: 15px;
	}
}

.color-red{
	color: #af1e41;
	font-weight: bold;
}

body#check .col-ms-12{
	text-align: left;	
}

body#check .col-xs-4{
	text-align: right;
}

.container{
  min-height: 100%;  
  margin-bottom: -70px;
}

.navbar-brand {
    line-height: 40px !important;
}

.navbar-brand > img {
    margin-top: -10px;
}

.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
    background: #af1e41;
}

.navbar {
	min-height: 60px;
    height: 60px;
}

@media (max-width: 767px){
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
    color: #eee !important;
}
.navbar-header a.navbar-brand img{
	width: 40px;
}
.navbar-brand {
    line-height: 12px !important;
	font-size: 30px !important;
}
.navbar-toggle {
    margin-top: 14px;
}
.navbar {
    min-height: 60px;
	height: 60px;
}
.pull-right{
	text-align: left;
	margin-right: 43%;
	margin-top: -3px;
}
input[name="username"]::-webkit-input-placeholder {
  color: #000;
}

input[name="password"]::-webkit-input-placeholder {
  color: #000;
}
}

@media (max-width: 480px){
body {
    background-repeat: repeat-y !important;
}
.pull-right{
		margin-right: 40%;
}
.col-xs-12 {
    width: 100%;
}
.navbar-header a.navbar-brand img{
	width: 60px;
}
.navbar-brand {
    line-height: 40px !important;
	font-size: 36px !important;
}
.navbar-toggle {
    margin-top: 30px;
}
.navbar {
    min-height: 80px;
}
.navbar-brand {
		height: 80px !important;
}
}

@media (max-width: 320px){
.navbar-brand {
    font-size: 30px !important;
}
.modal-title {
    font-size: 25px !important;
}
}

.btn-default {
    font-size: 18px;
}

.btn-warning:active, .btn-warning.active, .open > .dropdown-toggle.btn-warning {
    font-size: 18px;
}