/* CSS Document */
@import url("/css/font-awesome-4.5.0/css/font-awesome.min.css");
/*-------------全曲塊設定-------------*/
*{ margin:0; padding:0; box-sizing:border-box; }

body{ }

/* Remove the link outline 按扭不會出現虛線語法 */
/* For IE */
a {
  noFocusLine:expression(this.onFocus=this.blur());
} 
/* For Firefox */
:focus {
  -moz-outline-style: none;
} 

p{ padding-left:15px;}

ol{padding-left: 37px;}

/*-------------------區塊-------------------*/
.wrapper{ background-color:#780402;}

.content{background: url(../images/index_01.jpg) top center no-repeat;width:100%; font-size: 110%; position:relative;z-index:999;}


.header{width:100%; max-width:1024px; height:857px; margin:0 auto;position:relative; }	
	.header__logo{position: absolute;top: 2%;left: 53%; z-index:999; }
		.header__logo a{ width: 200px;height: 120px; display:block;}
	.header__main{ display:block; padding-top:15%; max-width:686px;}
	.header__slogan{ display:block; margin-left:15%; max-width:417px;}
		.header__main img,.header__slogan img{ width:100%;}
	
.container{ width:90%; max-width:950px; margin:0 auto;padding-bottom:20px;clear: both;}


/* =================nav================= */
.nav{width:100%;display:block; padding:0; margin:0; position:absolute; bottom:0; }
	 .nav ul{ display:flex;flex-wrap: wrap;justify-content: center; width:100%; max-width:985px; position:relative; margin: 0 auto; } 
		 .nav ul li{ display: inline-block; z-index: 4;width:321px;height:104px; padding-left: 2px;}
		 .nav ul li a{ display:block; background-position:top;width:100%;height:100%; }
		 
		 .nav ul li.navBtnA a{ background-image:url(../images/btn01.png);}
		 .nav ul li.navBtnB a{ background-image:url(../images/btn02.png);}
		 .nav ul li.navBtnC a{ background-image:url(../images/btn03.png);}
		
		 .nav ul li.active a, .nav ul li a:hover{ background-position:bottom; display:block; }
		

/* =================內容區================= */		 
.container h3{  
			padding:5px 10px;
			background:#340403;
			color:#fff;
			font:18px/28px "微軟正黑體", Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; 
			line-height:50px;
			text-align:center;
			font-weight:bold;
			display:inline;
			-webkit-border-top-left-radius: 10px;
			-webkit-border-bottom-right-radius: 10px;
			-moz-border-radius-topleft: 10px;
			-moz-border-radius-bottomright: 10px;
			border-top-left-radius: 10px;
			border-bottom-right-radius: 10px; 
			}
.container h4{ font-size:21px; padding:5px 10px; font-weight:bold; color:#ffe301;}

.container h5{ padding-left: 20px;display:block; text-align:center; font-weight:bold;}
.container h5 span {padding:2px 8px; color:#FFF; display:inline-block; margin:5px auto;	border-radius: 5px; font-weight:bold;background: #980000; background: linear-gradient(to bottom, #e60000 0%, #880000 100%);}

.container > p{ font-size:18px;color:#fff; line-height:35px; }
.container > ol, ul.left{ font-size:18px; color:#fff;padding:20px; }
				 ul.left , ol.left{ margin-left:5%; }
.container a {color:#f9ff00;text-decoration: underline;}
.container a:hover{color: #33FFFF;}
.container ol li > ul { margin-left:25px; list-style-type: square; }
.container img{ margin:0 auto; display:block; }									

	
.awards_level{   
	width: 90%;
    margin: 15px auto;
    background-color:rgba(0, 57, 64, 0.59);
    border:3px solid #013856;
    border-radius: 10px;
    padding:15px;
    overflow: auto;
	color:#ecff13;}

.item-title { display:block;background:#ff0400;text-align: center;
    color: #fff;
    font-weight: bold;
    padding: 12px 0;
    margin-bottom: 12px;	
	width: 90%;
    margin: 0 auto;}

/*虛寶區域設定*/
.col-4{ padding: 0 10px; }
.item__box{border-color:#ff0400 !important; background:#300000;}
.item__box-title{background-color:#2ab78a !important; color:#f7f40a !important;}

.item__box > .item-title{ width:100%;}


.menu{display:block; margin:0 auto; width:17%;min-width: 180px;}
	.menu a{display: block;text-decoration: none; color:#0d2531;padding: 5px; 
	background: rgb(242,245,246); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(242,245,246,1) 0%, rgba(227,234,237,1) 37%, rgba(200,215,220,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%);
	border-radius:10px;border:2px #0d4b68 solid;}	
	.menu .previousPage{float:left;text-align:left;}
	.menu .nextPage{float:right;text-align:right;}

/*table*/
.table{ width:90%; margin:0 auto; margin-bottom:20px; font:18px/21px "微軟正黑體", Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; }
			.table--styleA{ text-align:center; border:solid 3px #082b3e; font-size:16px; color:#4d4d4d; border-spacing: 2px; border-radius: 8px;}
					.table--styleA th{ padding:5px; background:#b60e46; text-align:center; color:#ffdc48; }
					.table--styleA th.thstyleA{ background:#00949f; }
					.table--styleA th.thstyleB{ background:#30906E; }
					.table--styleA td{ padding:5px;background: #fff;}
					.table--styleA td.tdA{background:#c5e7e0;color:#333;}
					.table--styleA td.tdB{ background: #fb1515;font-size:15px;color:#ffff51;}
						.table--styleA img{margin:0 auto; display:block; width: 80%; max-width: 100px;}
						.table--styleA img.inline{ display:inline; }
						.table--styleA .swfA{ width: 280px; height: 280px; margin: 0 auto; display:block; }
						.table--styleA td.left{ text-align:left; }

/*按鈕文字顏色*/						
.btn a{color: #273265;text-decoration: none;}
.btn a:hover{color: #31145d;}

	
/* =================.box-compose================= */
		.box-compose{
			width:90%;
			border:solid 3px #e87530;
			border-radius: 10px;
			padding:10px;
			margin-bottom:20px;
			margin:0 auto;
			background:hsl(345, 100%, 27%);
		}
			.box-compose .txt-compose{
				width:100%;
				margin: 0 auto;
				padding:5px;
				background: #13697F;
				background: rgb(59,175,221);
				background-image: -moz-linear-gradient(top, rgba(59,175,221,1) 0%, rgba(19,105,127,1) 100%);
				background-image: -webkit-linear-gradient(top, rgba(59,175,221,1) 0%,rgba(19,105,127,1) 100%);
				background-image: linear-gradient(to bottom, rgba(59,175,221,1) 0%,rgba(19,105,127,1) 100%);
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3bafdd', endColorstr='#13697f',GradientType=0 );
				color:#fff;
				text-align:center;
				font-size:1.1em;
				font-weight:bold;
			}
			
			.box-compose > table td{ background-color:#FFF;}
			.box-compose > table th{ padding:5px 0; color:#fff653; background-color:#3E0110;}
				.box-compose > table img{ width:80%; max-width:200px; margin-top:10px; margin-bottom: 10px;}
				.box-compose > table .small img{width:50%; max-width:100px !important;}
			
			.box-compose .txt-compose.styleA{
				    color: #fff653;
					 background: #8a0022;
   					 border: 1px solid #8a0022;
			}
			.box-compose .box-composeMain{
				width:100%;
				margin:0 auto;
				border-radius: 10px;
				margin:10px auto;
				padding:10px;
			}
				.box-compose .box-composeMain:nth-child(even){
					background:#700a0a;
				}
				.box-compose .box-composeMain:nth-child(odd){
					background:#3f0303;					
				}
			
				.box-compose ul{
					width:100%;
					display: flex;
					flex-wrap: wrap;
					justify-content: space-around;
					margin:5px auto;
				}
					.box-compose ul li{
						background: #fff;
						border-radius: 10px;
						padding:5px;
						border:2px solid #fff;
						float:left;
						list-style:none;
						text-align:center;
						margin-bottom: 5px;
					}
						.box-compose ul li p{
							color:#0b0e30;
							margin:0;
						}
						
					.box-compose ul li.material{
						width:49%;
					}
					.box-compose ul li.material-M{
						width:100%;
					}
					
					.materialB{ height:104px; display: flex !important;align-items: center;}
					
					.box-compose ul li.symbol{
						width:7.5%;
					}
						.box-compose ul li.symbol p{
							vertical-align:middle;
							height:100%;
							margin:0;
							padding:0;
							font-size:2em;
							font-weight: bolder;
							color:#d20a0a;
						}
							.box-compose ul li.symbol p:before{
								content:' ';
								height:100%;
								vertical-align:middle;
								display:inline-block;
							}
							
					.box-compose .probability{
						width:100%;
						color: #fffb52;
						border:2px solid #9c549b;
						background:#a65daf;
						text-align:center;
						margin-bottom:10px;
						padding:5px;
						font-weight:bold;
						font-size:1.1em;
					}
					
					.slider-wra{padding: 5px 0;background:#3e0110;width: 100%;display: block;color: #fff653; margin:0; border-radius:0;letter-spacing:1px;font-weight:bold;}
		/*.box-compose END*/
		
/*===================排行榜按鈕===================*/
.content__main__rankBtn { position:relative; width:40%; margin:15px auto 28px auto; }	
/*一排兩顆*/
.content__main__rankBtnB { position:relative; width:90%; margin:15px auto 40px auto; overflow:auto; }

.content__main__rankBtn a, .content__main__rankBtnB a { display:block; text-align:center; margin:0 auto; font-weight:bold; font-size:120%;
	cursor:pointer;/* 滑鼠手指 */ text-decoration:none; line-height:32px; border-radius:50px; color:#fff; border:1px solid #300000; padding:10px 0;
	text-shadow:1px 1px 3px #000000;
	background: #fffc00; /* Old browsers */
	background: -moz-linear-gradient(top, #fffc00 0%, #ff5400 49%, #631c00 52%, #ff5400 100%);
	background: -webkit-linear-gradient(top, #fffc00 0%,#ff5400 49%,#631c00 52%,#ff5400 100%);
	background: linear-gradient(to bottom, #fffc00 0%,#ff5400 49%,#631c00 52%,#ff5400 100%); 
	}
	.content__main__rankBtn a:hover, .content__main__rankBtnB a:hover { color:#FFF;}

/* =================圖片控制================= */	
.full {}
.half { width:50%; max-width:104px;}
.eighth{ width:80%; max-width:300px !important;}


/*回到頂部*/
.gotop{ margin:0 auto 10px auto; padding-top:10px; border-bottom:2px dashed #000; text-align:center;}


/* 滑動top選單 */
#top{ position:absolute;right:0; top:-200px;cursor:pointer; z-index:9999;}

/*文字高度*/
.fa-2x {line-height: 2em;}


/* =================RWD區塊顯示控制================= */
.RwdPcData		{ border: 10px double #ff6600; background:url(/Action/images/DataPcTitle.png) right top no-repeat; }
.RwdMobileData	{ border: 10px double #008080; background:url(/Action/images/DataMobileTitle.png) right top no-repeat; }
.RwdIngameData	{ border: 10px double #3b5998; background:url(/Action/images/DataInGameTitle.png) right top no-repeat; }


/*iPad 橫式*/
@media screen and (max-width: 1025px){	
	.header__nav ul{width: 81%;}
		
}