@charset "utf-8";
/* CSS Document */
header{
	height: 60px;
	padding: 10px 0 30px 0;
	background-color: #000718;
	border-bottom: 1px solid #CCC;
	
}
a:link,a:visited{color: #FFF;text-decoration: none;}
a:hover,a:active{color: #47afcc;text-decoration: none;}

.logo {
	line-height:10px;
}

.btn_w{
	padding: 0px 10px;
    line-height:40px;
	width: 50%;
	color: #CCC;
	text-align: center;
	border: 1px solid #CCC;
	border-top-left-radius : 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius : 10px;
	font-size: 13pt;
}
select{
    width: 50%;
	height: 40px;
    background-color: #000718;
    color: #CCC;
    margin: 20px auto;
    border: 1px solid #CCC;
    padding: 0px 15px;
    text-align: center;
    border-top-left-radius : 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius : 10px;
    font-size: 13pt;
	}
option{
    color: #fff;
	font-size: 13pt;
}
/* game frame */
.main{
	width: 100%;
}
.game{
    width: auto;
    height: 325px;
    border-top-left-radius : 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius : 10px;
    float: left;
    margin: 9px;
    border: 1px solid #b555df;
}
.game img{border-top-left-radius : 10px;border-top-right-radius: 10px;}

.game_introduction{
	width: 210px;
	/*height:80px;*/
	padding: 10px 10px 10px 10px ;
}
.game_link{
	width: 210px;
	height:auto;
	padding: 0 10px 0 10px ;
}

.game_group{
    width: 230px;
    height: 230px;
	margin: 10px;
	float: left;
}

*{margin:0;padding:0;}
/* ----------------頁籤---------------- */
#tab-panel {
    width: 100%;
    margin: 0 auto;
    padding-top: 15px;
}
#tab-panel .tabs {
    margin-bottom: 10px;
    overflow: hidden;
    text-align: center;
}
#tab-panel .tabs a {
    height: 60px;
	line-height: 60px;
    float: left;
    display: block;
    width: 25%;
    border-bottom: 1px solid #CCC;
    font-size: 16pt;
    color: #fff;
    box-sizing: border-box;
    transition: all .5s;
    background-color: hsla(235,71%,7%,0.50);
}
#tab-panel .tabs a.active{
    border-bottom: 1px solid #a94bd1;
    color: #fff;
    background-color: hsla(279,92%,24%,0.70);
}
#tab-panel .tabs a:hover {
    border-bottom: 1px solid #a94bd1;
    color: #fff;
    background-color: hsla(279,92%,24%,0.70);
}

#tab-panel .tab-content {
   padding: 0;
}
#tab-panel .tab-content > li {
    display: none;
	list-style:none;

}
.pic{overflow:hidden;}
.pic img{transform:scale(1,1);transition: all 0.3s ease-out;}
.pic img:hover{transform:scale(1.1,1.1);}


.main_black{
	width: 100%;
	overflow: hidden;
	padding: 50px 0; 
	background-image: url(../img/bg2.jpg);
	background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;
	text-align: center;
	
}
.main_gray{
	width: 100%;
	overflow: hidden;
	padding: 50px 0; 
	background-color: #353b48;
	text-align: center;
}
.skype{
	margin:auto;
	width: 200px;
	height: 40px;
	background-image: url(../img/icon_skype.png);
	line-height: 30px;
	padding-left: 40px;
	background-repeat: no-repeat;
}
.email{
	margin:auto;
	width: 200px;
	height: 40px;
	background-image: url(../img/icon_email.png);
	line-height: 30px;
	padding-left: 40px;
	background-repeat: no-repeat;
}
.main_play{
	width: 450px;
	height: 300px;
	padding: 80px 50px; 
	background-color: #000718;
}