@charset "UTF-8";
#main {
	margin:0 0 20px 0;
	padding:0 2% 20px 2%;
	border-top:1px solid #1a3a3a;
	border-bottom:1px solid #1a3a3a;
	background:url(../img/common/bg_main.png) repeat left top;
}
/* ========================================
	loader
======================================== */
.loader {
	position:fixed;
	top:50%;
	left:50%;
	margin:-2.5em 0 0 -2.5em;
	border-top: 1.1em solid rgba(255, 255, 255, 0.2);
	border-right: 1.1em solid rgba(255, 255, 255, 0.2);
	border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
	border-left: 1.1em solid #ffffff;
	font-size: 10px;
	text-indent: -9999em;
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-animation: load8 1.1s infinite linear;
	animation: load8 1.1s infinite linear;
	z-index:15000;
}
.loader,
.loader:after {
	width: 5em;
	height: 5em;
	border-radius: 50%;
}
@-webkit-keyframes load8 {
0% {
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
}
100% {
	-webkit-transform: rotate(360deg);
	transform: rotate(360deg);
}
}
@keyframes load8 {
0% {
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
}
100% {
	-webkit-transform: rotate(360deg);
	transform: rotate(360deg);
}
}
/* ========================================
	mdl
======================================== */
#mdl_ranking {}
#mdl_ranking.mdl_top {
	position:absolute;
	top:0;
	left:2%;
	width:96%;
	background:url(../img/common/bg_mdl.png) repeat center top;
	z-index:600;
}
#mdl_ranking .mdl_btm {
	padding:5px;
	background:url(../img/common/mdl_corner_lt.png) no-repeat left top,url(../img/common/mdl_corner_lb.png) no-repeat left bottom,url(../img/common/mdl_corner_rt.png) no-repeat right top,url(../img/common/mdl_corner_rb.png) no-repeat right bottom;
	background-size:10px,10px,10px,10px;
}
#mdl_ranking .mdl_mid {
	padding:10px;
	border:1px solid #535353;
	background:rgba(0,0,0,0.4);
}
#mdl_ranking .mdl_contents p.txt {
	padding:10px 0;
	color:#fff;
	text-align:center;
}
#mdl_ranking .mdl_contents p.close {
	width:153px;
	margin:0 auto;
	border:1px solid #959595;
	background:rgba(255,255,255,0.2);
	color:#fff;
	font-size:14px;
	font-weight:bold;
	text-align:center;
	line-height:38px;
	cursor:pointer;
}
/* ========================================
	ranking
======================================== */
.linkBtn {
	padding:5px;
	border-top:1px solid #313131;
	border-bottom:1px solid #313131;
	background:url(../img/common/bg_tab.png) repeat left top;
}
.linkBtn p {
	position:relative;
	border:1px solid #132e2e;
	background:url(../img/ranking/bg_resultbtn.png) repeat left top;
}
.linkBtn a {
	display:block;
	padding:5px;
	background:url(../img/common/arrow_gnav.png) no-repeat 99% center;
	background-size:6px;
	color:#fff;
	font-size:12px;
	font-weight:bold;
}
.linkBtn a span.tit {
	display:block;
	margin:0 0 0 -5px;
	padding:0 0 0 35px;
	background:url(../img/ranking/icon_result.png) no-repeat left center;
	background-size:35px;
	font-size:18px;
}
.linkBtn a span.update {
	display:block;
	position:absolute;
	top:3px;
	right:15px;
	width:100px;
	height:26px;
	background:url(../img/ranking/bg_update.png) no-repeat left center;
	background-size:100px;
	text-align:center;
	line-height:19px;
}
.en .linkBtn a span.update {
	font-size:10px;
	line-height:10px;
}
/* ========================================
	statusBox
======================================== */
.statusBox {
	width:104%;
	margin:0 0 10px -2%;
	padding:0 0 13px 0;
	background:url(../img/ranking/arrow_status.png) no-repeat center bottom;
	background-size:32px;
}
.statusBox .inner {
	position:relative;
	padding:20px 2% 10px 2%;
	background:rgba(0,0,0,0.4);
}
.statusBox h3 {
	position:relative;
	width:320px;
	margin:-20px 0 20px -2%;
}
.statusBox h3 span {
	display:block;
	position:absolute;
	top:12px;
	left:200px;
	color:#fff;
	font-size:12px;
}
.statusBox p.date {
	position:absolute;
	top:8px;
	right:0;
	font-size:10px;
}
.statusBox dt {
	margin:0 0 10px 0;
	padding:0 0 0 10px;
	border-left:4px solid #939393;
	background-size:3px;
	color:#898989;
	font-size:14px;
	font-weight:bold;
	line-height:1;
}
.statusBox dd {
	position:relative;
	margin:0 0 20px 0;
}
.statusBox dd p {
	width:150px;
	padding:0 2%;
	border-radius:4px;
	border:1px solid #919191;
	background:url(../img/ranking/arrow_btn.png) no-repeat 96% center rgba(0,0,0,0.3);
	background-size:8px;
	box-shadow:rgba(0, 0, 0, 0.498039) 0px 0px 10px 0px inset;
	-webkit-box-shadow:rgba(0, 0, 0, 0.498039) 0px 0px 10px 0px inset;
	-moz-box-shadow:rgba(0, 0, 0, 0.498039) 0px 0px 10px 0px inset;
	color:#fff;
	font-size:12px;
	font-weight:bold;
	text-shadow:0px 0px 10px rgba(65, 135, 133, 1);
	line-height:24px;
	cursor:pointer;
	transition:border 0.5s;
}
.statusBox dd p.on {
	background:url(../img/ranking/arrow_btn_on.png) no-repeat 96% center rgba(0,0,0,0.3);
	background-size:8px;
}
.statusBox .ptf dd p img {
	width:30%;
}
.statusBox .num dd p {
	width:240px;
}
.statusBox .mode dd p {
	width:96%;
}
.statusBox dd ul {
	display:none;
	position:absolute;
	top:26px;
	left:0;
	width:150px;
	padding:0 2%;
	border:1px solid #408685;
	background:#000;
	filter:alpha(opacity=0);
	-moz-opacity: 0;
	opacity: 0;
	z-index:100;
}
.statusBox .num dd ul {
	width:240px;
}
.statusBox .mode dd ul {
	width:96%;
}
.statusBox dd li {
	color:#fff;
	font-size:12px;
	font-weight:bold;
	text-align:center;
	line-height:28px;
	cursor:pointer;
	transition:background 0.5s;
}
.statusBox .ptf dd li img {
	max-width:none;
	width:40%;
}
.statusBox .num dd ul li.noAct,
.statusBox .mode dd ul li.noAct {
	color:#555553;
}
.statusBox dd.attention {
	margin:-10px 0 0 0;
	color:#a0a0a0;
	font-size:10px;
}
/* ========================================
	rankingBox
======================================== */
.rankingBox {
	width:96%;
	margin:0 auto;
	padding:5px;
	border:1px solid #1a3a3a;
	background:rgba(17,17,17,0.5);
	box-sizing:content-box;
}
.kindTab {
	margin:0 0 20px 0;
	padding:0 0 8px 0;
	background:url(../img/ranking/arrow_rankingbtm.png) no-repeat center bottom;
	background-size:15px;
}
.kindTab ul {
	border-bottom:1px solid #f0861e;
}
.kindTab li {
	float:left;
	width:33.3%;
	padding:3px 0;
	border:1px solid rgba(0,0,0,0.5);
	background:rgba(51,51,51,0.3);
	box-sizing:border-box;
	color:#fff;
	font-size:14px;
	font-weight:bold;
	text-align:center;
}
.kindTab li.current {
	border:1px solid #f0861e;
	background:rgba(240,134,30,0.3);
	text-shadow:0px 0px 8px rgba(255, 162, 0, 1);
}
.kindTab li.four {
	display:none;
}
.kindTab .exp {
	display:none;
}
.kindTab .exp li {
	width:50%;
}
.kindTab .exp li span span{
	display:block;
	color:#f0861e;
	font-size:10px;
}
.kindTab li.noAct {
	border:1px solid rgba(0,0,0,0);
	background:none;
	color:#333335;
}
/*rankUI*/
.rankUI dl {
	float:right;
	margin:0 0 10px 20px;
}
.rankUI dl.period {
	display:none;
}
.rankUI dt {
	float:left;
	margin:0 5px 0 0;
	color:#a0a0a0;
	font-size:14px;
	font-weight:bold;
	line-height:24px;
}
.rankUI dd {
	position:relative;
	float:left;
	margin:0 0 0 5px;
}
.rankUI dd p {
	width:110px;
	border-radius:4px;
	border:1px solid #919191;
	background:url(../img/ranking/arrow_selectbox.png) no-repeat 95px center rgba(0,0,0,0.3);
	background-size:6px;
	box-shadow:rgba(0, 0, 0, 0.498039) 0px 0px 10px 0px inset;
	-webkit-box-shadow:rgba(0, 0, 0, 0.498039) 0px 0px 10px 0px inset;
	-moz-box-shadow:rgba(0, 0, 0, 0.498039) 0px 0px 10px 0px inset;
	color:#fff;
	font-size:12px;
	font-weight:bold;
	text-shadow: 0px 0px 10px rgba(65, 135, 133, 1);
	text-align:center;
	line-height:24px;
	cursor:pointer;
	transition:border 0.5s;
}
.rankUI dd.year ul,
.rankUI dd.month ul,
.rankUI dd.week ul {
	width:80px;
}
.rankUI dd ul {
	display:none;
	position:absolute;
	top:26px;
	left:0;
	width:110px;
	border:1px solid #408685;
	background:#000;
	filter:alpha(opacity=0);
	-moz-opacity: 0;
	opacity: 0;
}
.rankUI dd li {
	color:#fff;
	font-size:12px;
	font-weight:bold;
	text-align:center;
	line-height:28px;
	cursor:pointer;
	transition:background 0.5s;
}
/*ramkDetail*/
.rankDetail table {
	width:100%;
	margin:0 0 10px 0;
}
.rankDetail tr:nth-child(even) {
	background:rgba(255,255,255,0.1);
}
.rankDetail tr:nth-child(odd) {
	background:rgba(255,255,255,0.05);
}
.rankDetail tr:first-child {
	background:rgba(0,0,0,0.3);
}
.rankDetail th {
	padding:0 10px;
	border-bottom:1px solid #535353;
	color:#aabfbd;
	font-size:12px;
	text-align:left;
	line-height:32px;
}
.rankDetail th:last-child {
	text-align:right;
}
.rankDetail td {
	color:#fff;
	font-size:14px;
	font-weight:bold;
	text-align:left;
	line-height:33px;
}
.rankDetail th:nth-of-type(1),
.rankDetail td:nth-of-type(1) {
	width:8%;
	padding:0 5px;
}
.rankDetail td:nth-of-type(2) {
	width:60%;
	padding:0 5px;
}
.rankDetail td:nth-of-type(2) img {
	float:left;
	width:24px;
	height: 24px;
	margin:4px 0;
}
.rankDetail td:nth-of-type(2) a {
	display:block;
	height:33px;
	color:#aabfbd;
	padding:0 10px;
	word-break:break-all;
	overflow:hidden;
}
.rankDetail td:nth-of-type(3) {
	text-align:right;
	padding:0 5px;
}
.rankDetail .rankIn th,
.rankDetail .rankIn td,
.rankDetail .rankIn td a {
	color:#ffa200;
}
.rankDetail .rankIn td a:hover {
	color:#ffa200;
}
.pager {
	padding:20px 0 0 0;
	background:url(../img/ranking/line_pager.png) no-repeat center top;
	background-size:265px;
}
.btn a {
	display:block;
	width:96%;
	margin:20px auto 0 auto;
	border-radius:4px;
	border:1px solid #535353;
	background:rgba(0,0,0,0.3);
	color:#85a7a5;
	font-size:14px;
	font-weight:bold;
	text-align:center;
	line-height:40px;
}
.btn a span {
	padding:0 0 0 20px;
	background:url(../img/ranking/arrow_backbtn.png) no-repeat left center;
	background-size:16px;
}
/* ========================================
	rankingBox
======================================== */
.backRanking {
	margin:0 0 20px 0;
	padding:10px;
	border-top:1px solid #313131;
	border-bottom:1px solid #313131;
	background:rgba(0,0,0,0.8);
}
.backRanking p {
	padding:0 0 0 25px;
	background:url(../img/ranking/arrow_backbtn.png) no-repeat left center;
	background-size:16px;
}
.backRanking p a {
	color:#aabfbd;
	font-size:14px;
	font-weight:bold;
}
/* ========================================
	result
======================================== */
.rankingBox {
	position:relative;
}
.rankingBox .periodSelect {
	position:relative;
	height:34px;
	padding:10px 0 0 0;
	text-align:center;
	color:#fff;
	font-size:16px;
	font-weight:bold;
	text-shadow: 0px 0px 10px rgba(65, 135, 133, 1);
}
.rankingBox .periodSelect .left {
	position:absolute;
	top:10px;
	left:2%;
	width:55px;
	padding:0 0 0 10px;
	border-radius:4px;
	background:url(../img/ranking/arrow_week_prev.png) no-repeat 5px center rgba(85,85,85,0.3);
	background-size:10px;
	color:#aabfbd;
	font-size:12px;
	text-align:center;
	line-height:23px;
}
/*.en .rankingBox .periodSelect .left {
	width:105px;
}*/
.rankingBox .periodSelect .right {
	display:none;
	position:absolute;
	top:10px;
	right:2%;
	width:55px;
	padding:0 10px 0 0;
	border-radius:4px;
	background:url(../img/ranking/arrow_week_next.png) no-repeat 50px center rgba(85,85,85,0.3);
	background-size:10px;
	color:#aabfbd;
	font-size:12px;
	text-align:center;
	line-height:23px;
}
/*.en .rankingBox .periodSelect .right {
	width:105px;
	background:url(../img/ranking/arrow_week_next.png) no-repeat 100px center rgba(85,85,85,0.3);
}*/
.rankingBox .dateSelect {
	height:28px;
	margin:0 0 10px 0;
	padding:10px 1.2% 0 1.2%;
	border-radius:4px;
	background:rgba(90,145,143,0.2);
	overflow:hidden;
}
.rankingBox .dateSelect.open {
	/*height:108px;*/
}
.rankingBox .dateSelect .thisWeek {
	padding:0 0 10px 0;
	background:url(../img/ranking/arrow_week_open.png) no-repeat 98% 3px;
	color:#aabfbd;
	font-size:12px;
	text-align:center;
}
.rankingBox .dateSelect.open .thisWeek {
	background:url(../img/ranking/arrow_week_close.png) no-repeat 98% 3px;
}
.rankingBox .dataArea {
	padding:0 0 10px 0;
}
.rankingBox .dataArea .year,
.rankingBox .dataArea .month,
.rankingBox .dataArea .week {
	position:relative;
	float:left;
	width:33.3%;
	margin:0 0 10px 0;
	box-sizing:border-box;
}
.rankingBox .dataArea .year p {
	border-radius:4px 0 0 4px;
	border-right:none;
}
.en .rankingBox .dataArea .year p {
	border-radius:0;
	border-right:1px solid #919191;
}
.rankingBox .dataArea .month p {
	border-radius:0;
}
.en .rankingBox .dataArea .month p {
	border-radius:4px 0 0 4px;
	border-right:none;
}
.rankingBox .dataArea .week p {
	border-radius:0 4px 4px 0;
	border-left:none;
}
.rankingBox .dataArea p {
	width:96%;
	padding:0 2%;
	border-radius:4px;
	border:1px solid #919191;
	background:url(../img/ranking/arrow_btn.png) no-repeat 96% center rgba(0,0,0,0.3);
	background-size:8px;
	box-shadow:rgba(0, 0, 0, 0.498039) 0px 0px 10px 0px inset;
	-webkit-box-shadow:rgba(0, 0, 0, 0.498039) 0px 0px 10px 0px inset;
	-moz-box-shadow:rgba(0, 0, 0, 0.498039) 0px 0px 10px 0px inset;
	color:#fff;
	font-size:12px;
	font-weight:bold;
	text-align:center;
	text-shadow:0px 0px 10px rgba(65, 135, 133, 1);
	line-height:24px;
	cursor:pointer;
	transition:border 0.5s;
}
.rankingBox .dataArea p.on {
	background:url(../img/ranking/arrow_btn_on.png) no-repeat 96% center rgba(0,0,0,0.3);
	background-size:8px;
}
.rankingBox .dataArea li ul {
	display:none;
	position:absolute;
	top:26px;
	left:0;
	width:96%;
	padding:0 2%;
	border:1px solid #408685;
	background:#000;
	filter:alpha(opacity=0);
	-moz-opacity: 0;
	opacity: 0;
	z-index:100;
}
.rankingBox .dataArea  li ul li {
	color:#fff;
	font-size:12px;
	font-weight:bold;
	text-align:center;
	line-height:28px;
	cursor:pointer;
	transition:background 0.5s;
}
.rankingBox .dataArea .btn {
	border:1px solid #1acfcc;
	background:rgba(49,161,159,0.3);
	font-size:14px;
	text-align:center;
	line-height:32px;
	letter-spacing:1px;
}
.rankingBox .kindTab {
	margin:2px 0 0 0;
	border-top:1px solid #525656;
}
/*graf*/
.graf {
	position:relative;
	width:300px;
	margin:0 auto;
	padding:35px 0 35px 0;
}
.graf .ui .leftTxt {
	position:absolute;
	top:20px;
	left:0;
	color:#aabfbd;
	font-size:10px;
}
.graf .ui .rightTxt {
	position:absolute;
	top:20px;
	right:10px;
	padding:0 0 0 10px;
	background:url(../img/ranking/icon_self.png) no-repeat left center;
	background-size:7px;
	color:#aabfbd;
	font-size:10px;
}
.graf .ui .btmTxt {
	position:absolute;
	bottom:35px;
	left:50%;
	margin:0 0 0 -1em;
	color:#aabfbd;
	font-size:10px;
}
/*table*/
.grafArea table {
	float:left;
	width:100%;
	margin:0 0 10px 0;
}
.grafArea table:nth-of-type(2) {
	margin:0 0 30px 0;
}
.grafArea table .head th {
	padding:10px;
	border-bottom:1px solid #535353;
	background:rgba(0,0,0,0.25);
	color:#aabfbd;
	font-size:14px;
	font-weight:bold;
	text-align:left;
}
.grafArea table tr th,
.grafArea table tr td {
	padding:7px 15px;
	color:#aabfbd;
	font-size:12px;
	text-align:left;
}
.grafArea table tr td {
	color:#fff;
	text-align:right;
	text-shadow:0px 0px 10px rgba(65, 135, 133, 1);
}
.grafArea table tr:nth-child(even) {
	background:rgba(255,255,255,0.05);
}
.grafArea table tr:nth-child(odd) {
	background:rgba(255,255,255,0.1);
}
.rankingBox .rankUI {
	padding:35px 0 0 0;
	border-top:1px solid #535353;
}










@media screen and (max-width: 600px) {

}