/* CSS Document */
@import url(/css/button.css);			/*GT平台按鈕*/
@import url(/css/item-box.css);			/*卡片網格樣式)*/
@import url(/include/i_GTrank.css);		/*排行榜共用樣式*/
@import url("/css/font-awesome-4.5.0/css/font-awesome.min.css");

/* =================全域設訂================= */
html,body {/*master.css有預設項目*/ -webkit-text-size-adjust:none;/*iPhone旋轉後 文字不要放大*/ /*background:url(../images/bg_repeat.jpg) center top repeat-y;*/ }

/*改變iphone電話號碼顏色樣式*/
/*a[href^=tel] { color:#0FF; }*/

*{ margin:0; padding:0; box-sizing:border-box; text-decoration:none; }

/*外層框架*/
.wrapper { line-height:27px; font-size:16px; background:#c1933b url(../images/headerBg.jpg) center top no-repeat; color:#ffc599; /*全頁面文字顏色*/ }

/*容器基本框架*/
.container { width:950px; }

/* =================頁首設定================= */
/*天*/
.header { }
	.header__title { font-size:3em; color:#fff; font-weight:bold; text-align:center; padding-top:60px; margin:0 auto; }
	.header__title p { font-size: 0.5em; line-height:2em; }
.header > .container { position:relative; height:578px; }

/*logo*/
.header-logo { position:absolute; width:156px; height:101px; top:470px; left:26px; z-index:99; background:url(../images/logo.png) no-repeat; display:none;  }
	/*.header-logo a { display:block; width:100%; height:100%; }*/
	
.header-slogan01 { position:absolute; width:732px; height:239px; display:block; top:7px; left:-55px; background:url(../images/slogan01.png) no-repeat; }
.header-slogan02 { position:absolute; width:647px; height:85px; display:block; top:250px; left:15px; background:url(../images/slogan02.png) no-repeat; }
.header-slogan03 { position:absolute; width:536px; height:221px; display:block; top:340px; left:180px; background:url(../images/slogan03.png) no-repeat; }

.header-btn { position:absolute; width:142px; height:114px; display:block; top:490px; left:770px; z-index:3;
	background:url(../images/btn01.png) no-repeat; }
	.header-btn a { display:block; width:100%; height:100%; }


/* =================主選單===================*/
.nav { width:950px; height:108px; justify-content:center; flex-wrap:wrap; margin:0 auto; }
	
	.nav > li { float:left; list-style:none; display:block; width:32%; height:80px; line-height:80px; font-size:200%; text-align:center;
		font-weight:bold; text-decoration:none; letter-spacing:-1px;/*字中間間距*/ margin:5px; }
	
	.nav a{ display:block; width:100%; height:100%; border-radius:15px; color:#b0b0b0; border:3px solid #323232; transition:all .3s; 
		box-shadow:0px 0px 32px 5px #8e8e8e inset;
		background: #585858; /* Old browsers */
		background: -moz-linear-gradient(top, #585858 0%, #262626 72%, #585858 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top, #585858 0%,#262626 72%,#585858 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom, #585858 0%,#262626 72%,#585858 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#585858', endColorstr='#585858',GradientType=0 ); /* IE6-9 */
		}
		
	.nav a:hover, a.hover{ text-decoration:none; color:#fff; border:3px solid #fffc00; box-shadow:0px 0px 32px 5px #ff7b00 inset;
		background: #964700; /* Old browsers */
		background: -moz-linear-gradient(top, #964700 0%, #421f00 72%, #964700 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top, #964700 0%,#421f00 72%,#964700 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom, #964700 0%,#421f00 72%,#964700 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#964700', endColorstr='#964700',GradientType=0 ); /* IE6-9 */
		}
	
		
/* =================內容設定================= */
.content { /*background:url(../images/bg_bottom.jpg) center bottom no-repeat;*/ padding-bottom:30px; }
.content > .container{ padding:0px 40px; border:4px solid #5d2402; background:rgba(41,14,0,.7); border-radius:20px; }
	.container ol { margin-left:52px; margin-bottom:20px; }

/*h1 {預設隱藏}*/
/*h2 {未設保留}*/

.title-main{ padding:4px 10px; margin:22px 0 20px 0; /*font-size:120%; font-weight:bold;*/ }
.title-main img { display:block; margin:0 auto; padding:0; }

/*h3_內容大標*//*icon： https://fontawesome.com/icons */
h3 { }
	h3 img { display:block; margin:20px auto; }

/*h4_內容小標*/
.title-sub { display:inline-block; font-size:110%; color:#ce7d3d; padding:4px 11px; font-weight:bold; margin:5px 0; background:#5d2402;
	box-shadow:0px 0px 23px 5px #2c0f02 inset; border:1px solid #000; border-radius:10px; }
.title-sub > i { font-size:25px; margin-right:4px; }

h5 { width:90%; display:block; font-size:140%; font-weight:bold; text-align:center; margin:15px auto; color:#FF0; padding:8px 0;
	background: -moz-linear-gradient(left, rgba(53,19,0,0) 0%, rgba(53,19,0,1) 40%, rgba(53,19,0,1) 60%, rgba(53,19,0,0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, rgba(53,19,0,0) 0%,rgba(53,19,0,1) 40%,rgba(53,19,0,1) 60%,rgba(53,19,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, rgba(53,19,0,0) 0%,rgba(53,19,0,1) 40%,rgba(53,19,0,1) 60%,rgba(53,19,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00351300', endColorstr='#00351300',GradientType=1 ); /* IE6-9 */
	}
h5 span { display:inline-block; vertical-align:middle; line-height:29px; letter-spacing:2px; }



/*回到頁面頂部*/
.gotoheader { width:60%; margin:30px auto; 
	background: -moz-linear-gradient(left, rgba(53,19,0,0) 0%, rgba(53,19,0,1) 40%, rgba(53,19,0,1) 60%, rgba(53,19,0,0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, rgba(53,19,0,0) 0%,rgba(53,19,0,1) 40%,rgba(53,19,0,1) 60%,rgba(53,19,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, rgba(53,19,0,0) 0%,rgba(53,19,0,1) 40%,rgba(53,19,0,1) 60%,rgba(53,19,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00351300', endColorstr='#00351300',GradientType=1 ); /* IE6-9 */
	}
.gotoheader a { display:block; color:#FFF; font-size:130%; font-weight:bold; line-height:34px; text-align:center; text-decoration:none;
	letter-spacing:2px;/*字中間間距*/ transition:all .3s; }
	.gotoheader a:hover { color:#FF0; }


/*表格內小字*/
.ico-point { width:45%; background:#000; color:#FF0; font-weight:bold; text-align:center; margin:0 auto; border-radius:20px; line-height:30px; }

.container li a { color:#FF0; text-decoration:underline; transition:all .4s; }
.container li a:hover{ color: #0FF; }

a.link { color:#FF0; text-decoration:underline; transition:all .3s; }
a.link:hover{ color:#0FF; }


/*表格設定*/
.table { word-break:break-all; border:4px solid #5d2402; border-collapse:collapse; border-spacing:0; margin:20px 0; }
.table th { color:#fff; text-align:center; font-size:17px; font-weight:bold; padding:5px; border:1px #000 solid; }
.table td { color:#000; text-align:center; line-height:24px;  padding:5px; border:1px #000 solid; }
.table tr { background:#fff; }

/*滿版*/
.table-full {/*master.css有預設項目*/ width:88%; margin:10px auto; }

/*table 2等分*/
.table-half {/*master.css有預設項目*/ width:48.5%; float:none; margin:5px; float:left; }

/*雙色表格*/
.table-striped tr:nth-child(odd) { /*master.css有預設項目*/ background-color:#ffe4cd; }

/*表格樣式：改顏色在這邊*/
.table-head th { /*master.css有預設項目*/
	background: #ad5100; /* Old browsers */
	background: -moz-linear-gradient(top, #ad5100 0%, #482200 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #ad5100 0%,#482200 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #ad5100 0%,#482200 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ad5100', endColorstr='#482200',GradientType=0 ); /* IE6-9 */
	}

/*單獨變色*/
.table .td1 { background:#ffe4cd; }

.table-head th.sub-th { /*master.css有預設項目*/ background:#61adf4; color:#fff; }

.table img { display:block; margin:5px auto; }
.table th img { width:16%; }

/*解除對齊*/
.clearfix { clear:both; }


/*條列式列表：備註事項或注意事項*/
.list { padding:30px 0; color:#fff;
	background: rgb(46,0,0); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(46,0,0,1) 0%, rgba(0,0,0,1) 72%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(46,0,0,1) 0%,rgba(0,0,0,1) 72%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(46,0,0,1) 0%,rgba(0,0,0,1) 72%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2e0000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
	}
.list > .container{ padding:0px 40px 0px 40px; }
	.list ol li {  }
	.list li { margin:0 0 3px 0; }
	.list ol { margin-left:52px; }
.list li a { color:#FF0; text-decoration:underline; transition:all .4s; }
.list li a:hover{ color:#0FF; }


/*圖片控制*/
.ImgStyleA { width:20%; }
.ImgStyleB { width:30%; }
.ImgStyleC { width:40%; }
.ImgStyleD { width:50%; }
.ImgStyleE { width:60%; }
.ImgStyleF { width:70%; }
.ImgStyleG { width:80%; }


/* =================區塊樣式================= */	
/*.boxA { position:relative; margin:0 auto; }
	.boxA--size{ width:90%; padding:30px; margin:10px auto; line-height:26px; }
	.boxA--color{ background-color:#181818; border:2px solid #2c2c2c; }
	.boxA h3{ padding-left:10px; }
	.boxA p	{ font-size:95%;}*/

.boxA { position:relative; margin:0 auto; }
	.boxA--size{ width:95%; padding:10px 30px; margin:0px auto 25px auto; text-align:center; }
	.boxA--color{ background:rgba(255,255,255,.55); box-shadow:0px 0px 40px rgba(0,0,0,.5); }
		

/*===================排行榜按鈕===================*/
.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 #fff; 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%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #fffc00 0%,#ff5400 49%,#631c00 52%,#ff5400 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #fffc00 0%,#ff5400 49%,#631c00 52%,#ff5400 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffc00', endColorstr='#ff5400',GradientType=0 ); /* IE6-9 */
	}

/*寬度控制*/
.content__main__rankBtn a { width:100%; height:100%; }
.content__main__rankBtnB a { width:31.5%; height:100%; float:left; margin:0 5px; }

.content__main__rankBtn a:hover, .content__main__rankBtnB a:hover { text-decoration:none;
	background: #ff0000; /* Old browsers */
	background: -moz-linear-gradient(top, #ff0000 0%, #3f0000 49%, #3f0000 49%, #160001 50%, #480000 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #ff0000 0%,#3f0000 49%,#3f0000 49%,#160001 50%,#480000 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #ff0000 0%,#3f0000 49%,#3f0000 49%,#160001 50%,#480000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#480000',GradientType=0 ); /* IE6-9 */
	}

/*兩排文字時的上下間距*/
.content__main__rankBtn a span, .content__main__rankBtnB a span { display:inline-block; vertical-align:middle; line-height:24px; letter-spacing:2px; }

/*圖片按鈕*/
.content__main__btnC { position:relative; width:400px; margin:18px auto; }
	.content__main__btnC img { display:block; margin:0 auto; }
	.content__main__btnC a img:hover { filter:brightness(120%); -webkit-filter:brightness(120%); /*調高圖片亮度；可以使用%的百分比控制、也可以使用0至1的數字控制*/ }


/* ================= 網格系統 ================= */
.row { text-align:center; display:flex; display:-ms-flex; display:-webkit-flex; justify-content:center; -webkit-justify-content:center; 
	-ms-justify-content:center; flex-wrap:wrap; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; padding:10px 10px; margin:0 -30px; }

.col { margin: 0%; }
.col-1 { width: 8%; }
.col-2 { width: 15.95%; }
.col-3 { width: 23.9%; }
.col-4 { width: 31.85%; }
.col-5 { width: 39.8%; }
.col-6 { width: 47.75%; }
.col-7 { width: 55.7%; }
.col-8 { width: 63.65%; }
.col-9 { width: 71.6%; }
.col-10 { width: 79.55%; }
.col-11 { width: 87.5%; }
.col-12 { width: 95.45%; }

/* 五等分 */
.col-2_4 { width: 19%; }

@media only screen and (max-width: 812px) {
  .m-col-1 { width: 7.7%; }
  .m-col-2 { width: 15.4%; }
  .m-col-3 { width: 23.1%; }
  .m-col-4 { width: 30.8%; }
  .m-col-5 { width: 38.5%; }
  .m-col-6 { width: 46.2%; }
  .m-col-7 { width: 53.9%; }
  .m-col-8 { width: 61.6%; }
  .m-col-9 { width: 69.3%; }
  .m-col-10 { width: 77%; }
  .m-col-11 { width: 84.7%; }
  .m-col-12 { width: 92.4%; }
  .m-col-2_4 { width: 19%; }
}
@media only screen and (max-width: 500px) {
  .ms-col-1 { width: 7.7%; }
  .ms-col-2_4 { width: 19%; }
  .ms-col-2 { width: 15.4%; }
  .ms-col-2_4 { width: 19%; }
  .ms-col-3 { width: 23.1%; }
  .ms-col-2_4 { width: 19%; }
  .ms-col-4 { width: 30.8%; }
  .ms-col-2_4 { width: 19%; }
  .ms-col-5 { width: 38.5%; }
  .ms-col-2_4 { width: 19%; }
  .ms-col-6 { width: 46.2%; }
  .ms-col-2_4 { width: 19%; }
  .ms-col-7 { width: 53.9%; }
  .ms-col-2_4 { width: 19%; }
  .ms-col-8 { width: 61.6%; }
  .ms-col-2_4 { width: 19%; }
  .ms-col-9 { width: 69.3%; }
  .ms-col-2_4 { width: 19%; }
  .ms-col-10 { width: 77%; }
  .ms-col-2_4 { width: 19%; }
  .ms-col-11 { width: 84.7%; }
  .ms-col-2_4 { width: 19%; }
  .ms-col-12 { width: 92.4%; }
  .ms-col-2_4 { width: 19%; }
}
/* ================= item__box ================= */
.item__box { margin: 10px auto; padding-bottom: 12px; border:3px solid #dbdbdb; border-radius: 10px; position: relative; height: 95%;
	background: #4c2300; /* Old browsers */
	background: -moz-linear-gradient(top, #4c2300 0%, #281200 65%, #000000 90%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #4c2300 0%,#281200 65%,#000000 90%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #4c2300 0%,#281200 65%,#000000 90%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c2300', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
	}
.item__box--shadow { box-shadow: 0px 2px 2px 2px rgba(0, 0, 0, 0.2); }
.item__box-img { display: flex; display: -ms-flex; display: -webkit-flex; justify-content: center; -webkit-justify-content: center;
	-ms-justify-content: center; flex-wrap: wrap; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; -webkit-align-items: center; align-items: center;
	border-radius: 8px 8px 0 0; }
.item__box-img img { max-width: 100%; border-top-right-radius: 10px; border-top-left-radius: 10px; }
.item__box-title { color: #000; background-color: #dbdbdb; text-align: center; font-size: 1em; font-weight: bold; padding: 10px 0; }
.item__box-title-2 { height: 3em; }
.item__box-get { text-align:center; padding-top:8px; color:#FF0; font-size:110%; font-weight:bold; }
.item__box-text { padding: 15px; text-align: left; }

.item__box-img-500 { width: 100%; height: 500px; }
.item__box-img-500 img { max-height: 500px; }
.item__box-img-450 { width: 100%; height: 450px; }
.item__box-img-450 img { max-height: 450px; }
.item__box-img-400 { width: 100%; height: 400px; }
.item__box-img-400 img { max-height: 400px; }
.item__box-img-350 { width: 100%; height: 350px; }
.item__box-img-350 img { max-height: 350px; }
.item__box-img-300 { width: 100%; height: 300px; }
.item__box-img-300 img { max-height: 300px; }

.item__box-img-250 { width: 100%; height: 230px; }
.item__box-img-250 img { max-height: 230px; }
.item__box-img-200 { width: 100%; height: 150px; }
.item__box-img-200 img { max-height: 150px; }

.item__box-img-150 { width: 100%; height: 150px; }
.item__box-img-150 img { max-height: 150px; }
.item__box-img-100 { width: 100%; height: 100px; }
.item__box-img-100 img { max-height: 100px; }


/* =================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; }