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

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

/*logo*/
.header-logo { position:absolute; width:427px; height:154px; display:block; top:75px; left:249px; background:url(../images/logo.png) no-repeat;
	z-index:99; }
	.header-logo a { display:block; width:100%; height:100%; }
	
.header-slogan { position:absolute; width:513px; height:200px; display:block; top:206px; left:210px; background:url(../images/slogan.png) no-repeat; }



/* =================主選單===================*/
.nav { width:900px; height:115px; justify-content:center; flex-wrap:wrap; margin:0 auto; }
	.nav > li { float:left; list-style:none; display:block; width:47.5%; height:92px; 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:205px; }*/
.content > .container { box-shadow:5px 5px 3px #00cdda; border:2px solid #00cdda; margin-bottom:65px; padding:20px 30px; }
	.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_內容大標*/
h3 { margin-top:0; margin-bottom:20px; }
h3 img { display:block; margin:0 auto; padding:0; }

/*h4_內容小標 icon：https://fontawesome.com/icons?d=gallery*/
.title-sub { display:inline-block; font-size:110%; color:#00cdda; padding:4px 11px; font-weight:bold; }
/*.title-sub > i { font-size:25px; margin-right:4px; }*/
.title-sub:before { content:''; background-image:url(../images/icon.svg); background-size:100%; background-repeat:no-repeat;
	width:35px; height:34px; display:inline-block; margin:-8px 3px; }
	
h5 { width:90%; display:block; font-size:135%; line-height:45px; font-weight:bold; text-align:center; margin:15px auto 0px auto; color:#fff000;
	background: -moz-linear-gradient(left, rgba(0,196,255,0) 0%, rgba(0,196,255,1) 50%, rgba(0,196,255,0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, rgba(0,196,255,0) 0%,rgba(0,196,255,1) 50%,rgba(0,196,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, rgba(0,196,255,0) 0%,rgba(0,196,255,1) 50%,rgba(0,196,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0000c4ff', endColorstr='#0000c4ff',GradientType=1 ); /* IE6-9 */
	}


/*回到頁面頂部*/
.gotoheader { width:60px; height:60px; margin:0px auto -60px auto; line-height:65px; }
.gotoheader a { width:100%; height:100%; display:block; color:#989898; font-weight:bold; text-align:center; background:#fff; border-radius:50%;
	text-decoration:none; letter-spacing:0px;/*字中間間距*/ border:3px solid #989898; box-shadow:0px 0px 20px #989898; 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 #00cdda; box-shadow:0px 0px 20px #00cdda; color:#00cdda; background-image:url(../images/icon_uparrowo.svg); }


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


/*表格設定*/
.table { word-break:break-all; border:3px solid #00cdda; border-collapse:collapse; border-spacing:0; margin:20px auto; table-layout:fixed;/*內距等比*/ }
.table th { color:#fff; text-align:center; font-size:17px; font-weight:bold; padding:5px; border:1px #dcdcdc solid; }
.table td { color:#000; text-align:center; line-height:24px; padding:5px; border:1px #dcdcdc 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:#f6f6f6; }

/*表格樣式：改顏色在這邊*/
.table-head th { background-color:#00cdda; }

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

.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; }

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



/*條列式列表：備註事項或注意事項*/
.list { padding:50px 20px 20px 20px; color:#fff; }
.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: #F00; }



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

/*===================排行榜按鈕===================*/
.content__main__rankBtn { position:relative; width:30%; margin:15px auto 40px auto; }	
/*一排兩顆*/
.content__main__rankBtnB { position:relative; width:80%; margin:25px 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:40px; border-radius:15px; color:#fff; border:1px solid #000; padding:6px 0;
	background-color:#ff5b5b; transition:all .3s;  }

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

.content__main__rankBtn a:hover, .content__main__rankBtnB a:hover { text-decoration:none; background-color:#ffae00; }

/*兩排文字時的上下間距*/
.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:300px; margin:20px auto 30px auto; }
	.content__main__btnC img { display:block; margin:0 auto; }
										/*調高圖片亮度；可以使用%的百分比控制、也可以使用0至1的數字控制*/
	/*.content__main__btnC a img:hover { filter:brightness(120%); -webkit-filter:brightness(120%); }*/



/* ================= 網格系統 ================= */
.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-2 { width: 18%; }
.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 #00c4ff; border-radius: 10px; position: relative; height: 95%;
	background: #f9f9f9; /* Old browsers */
	background: -moz-linear-gradient(top, #f9f9f9 0%, #eaeaea 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #f9f9f9 0%,#eaeaea 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #f9f9f9 0%,#eaeaea 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#eaeaea',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:#00c4ff; text-align: center; font-size: 1em; font-weight: bold; padding: 10px 0; }
.item__box-title-2 { height: 3em; }

.item__box-subtitle { color:#FFF; display:inline-block; padding:0px 6px; background-color:#b300ff; border-radius:20px; }

.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-650 { width: 100%; height: 600px; }
.item__box-img-650 img { max-height: 500px; }
.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; }