/* 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:19px; background:#160108 url(../images/headerBg.jpg) center top no-repeat; color:#fff; /*全頁面文字顏色*/ }

/*容器基本框架*/
.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:710px; }

/*logo*/
.header-logo { position:absolute; width:199px; height:132px; top:20px; left:20px; z-index:99; background:url(../images/logo.png) no-repeat; }
	.header-logo a { display:block; width:100%; height:100%; }

.header-slogan { position:absolute; width:958px; height:281px; top:390px; left:-15px; background:url(../images/slogan.png) no-repeat; }

	

/* =================主選單===================*/
.nav { width:900px; height:170px; justify-content:center; flex-wrap:wrap; margin:0 auto; }
	
	.nav > li { float:left; list-style:none; display:block; width:47.5%; height:148px; margin:0 10px; text-indent:-9999px; }
	.nav a{ display:block; width:100%; height:100%; transition:all .4s; background-position: top center; background-repeat:no-repeat;
		background-size:100% 202%; }
		
	a#btn01 { background-image:url(../images/navbtn01.png); }
	a#btn02 { background-image:url(../images/navbtn02.png); }
	
	.nav a:hover, a.hover{ background-position: bottom center; }



/* =================內容設定================= */
/*.content { background:url(../images/bg_bottom.jpg) center bottom no-repeat; padding-bottom:60px; }*/
.content > .container{ padding:20px 40px; }
	.container ol { margin:10px 0 20px 52px; }
	.container ol li { padding:5px 0; font-size:110%; }

/*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:0px auto 20px auto; }

/*h4_內容小標*/
.title-sub { display:inline-block; font-size:115%; color:#00c0ff; padding:4px; font-weight:bold; }
/*.title-sub > i { font-size:25px; margin-right:4px; }*/
.title-sub:before /*, .title-sub:after*/  { content:''; background-image:url(../images/icon_pic.svg); background-size:100%; background-repeat:no-repeat;
	width:35px; height:33px; display:inline-block; margin:-9px 5px; }

h5 { width:90%; display:block; font-size:130%; font-weight:bold; text-align:center; margin:35px auto 5px auto; color:#fff; padding:6px 15px;
	background: -moz-linear-gradient(left, rgba(32,103,255,0) 0%, rgba(32,103,255,1) 50%, rgba(32,103,255,0) 99%, rgba(32,103,255,0) 100%);
	background: -webkit-linear-gradient(left, rgba(32,103,255,0) 0%,rgba(32,103,255,1) 50%,rgba(32,103,255,0) 99%,rgba(32,103,255,0) 100%);
	background: linear-gradient(to right, rgba(32,103,255,0) 0%,rgba(32,103,255,1) 50%,rgba(32,103,255,0) 99%,rgba(32,103,255,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#002067ff', endColorstr='#002067ff',GradientType=1 );
	}
h5 span { display:inline-block; vertical-align:middle; line-height:29px; /*letter-spacing:2px;*/ }

.subtitle img { display: block; max-width:85%; margin:30px 0; margin-left:30px; }


/*回到頁面頂部*/
/*.gotoheader { width:60px; height:60px; margin:20px auto -50px auto; line-height:65px; }
.gotoheader a { width:100%; height:100%; display:block; color:#6b6b6b; font-weight:bold; text-align:center; background:#000931; border-radius:50%;
	text-decoration:none; letter-spacing:0px; border:3px solid #6b6b6b; box-shadow:0px 0px 20px #6b6b6b; transition:all .3s;
	background-image:url(../images/icon_uparrow.svg); background-size:30%; background-repeat:no-repeat; background-position:center 10px; }
	
.gotoheader a:hover { border:3px solid #00c0ff; box-shadow:0px 0px 20px #00c0ff; color:#00c0ff; background-image:url(../images/icon_uparrowo.svg); }*/


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

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


/*表格設定*/
.table { word-break:break-all; border:3px solid #002b78; border-collapse:collapse; border-spacing:0; margin:20px auto; }
.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%; }

/*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:#daedff; }

/*表格樣式：改顏色在這邊*/
.table-head th { /*master.css有預設項目*/ background-color:#081d43; }

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

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

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

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



/*條列式列表：備註事項或注意事項*/
.list { padding:30px 0; color:#fff;
	background: rgb(46,0,0);
	background: -moz-linear-gradient(top, rgba(46,0,0,1) 0%, rgba(0,0,0,1) 72%);
	background: -webkit-linear-gradient(top, rgba(46,0,0,1) 0%,rgba(0,0,0,1) 72%);
	background: linear-gradient(to bottom, rgba(46,0,0,1) 0%,rgba(0,0,0,1) 72%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2e0000', endColorstr='#000000',GradientType=0 );
	}
.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:60%; }
.ImgStyleE { width:80%; }
.ImgStyleF { width:90%; }
.ImgStyleG { width:100%; }

.imggroup_box { position:relative; display:block; height:25em; }
	.imggroup_img01 { width:65%; position:absolute; left:6%; }
	.imggroup_img02 { width:65%; position:absolute; left:24%; top:28% }



/* =================區塊樣式================= */	
.boxA { position:relative; margin:0px auto 25px auto; }
	.boxA--size{ width:90%; padding:15px 30px; text-align:center; border-radius:20px; }
	.boxA--color { border:3px solid #fff; background:rgba(255,255,255,.5); }
	

/*===================排行榜按鈕===================*/
.content__main__rankBtn { position:relative; width:40%; margin:25px 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:130%;
	cursor:pointer;/* 滑鼠手指 */ text-decoration:none; line-height:36px; border-radius:50px; color:#fff; border:2px solid #000; padding:10px 0;
	transition:all .3s;
	background: #2067ff;
	background: -moz-linear-gradient(top, #2067ff 0%, #5892ff 50%, #003f79 51%, #2067ff 100%);
	background: -webkit-linear-gradient(top, #2067ff 0%,#5892ff 50%,#003f79 51%,#2067ff 100%);
	background: linear-gradient(to bottom, #2067ff 0%,#5892ff 50%,#003f79 51%,#2067ff 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2067ff', endColorstr='#2067ff',GradientType=0 );
	}

/*寬度控制*/
.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; color:#ac0000;
	background: #ffa800;
	background: -moz-linear-gradient(top, #ffa800 0%, #ffcc00 50%, #ffa800 51%, #f47e00 100%);
	background: -webkit-linear-gradient(top, #ffa800 0%,#ffcc00 50%,#ffa800 51%,#f47e00 100%);
	background: linear-gradient(to bottom, #ffa800 0%,#ffcc00 50%,#ffa800 51%,#f47e00 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa800', endColorstr='#f47e00',GradientType=0 );
	}

/*兩排文字時的上下間距*/
.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 #e9e9e9; border-radius:10px; position:relative; height:95%;
	background: #ff8400;
	background: -moz-linear-gradient(top, #ff8400 0%, #390000 80%);
	background: -webkit-linear-gradient(top, #ff8400 0%,#390000 80%);
	background: linear-gradient(to bottom, #ff8400 0%,#390000 80%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff8400', endColorstr='#390000',GradientType=0 );
	}
.item__box--shadow { box-shadow: 0px 2px 2px 2px rgba(0, 0, 0, 0.3); }
.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: #e9e9e9; 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; }