@charset "utf-8";
/* CSS by Brian*/

.container {
	min-height: calc(100vh - 2rem);
	margin: 0 auto;
	overflow: hidden;
	width: 7.5rem;
	background: url(../images/rep.jpg) repeat;
	background-size:.74rem .75rem;
}
.container-world {
	margin: 0 auto;
	overflow: hidden;
	width: 7.5rem;
	background: url(../images/bg6.jpg) no-repeat center top;
	background-size:cover;
}
.tit {
	float: left;
	margin-left: .22rem;
	margin-top: 1.25rem;
	display: inline;
	width: 7.06rem;
	height: 1.25rem;
}
.t1 {
	background: url(../images/t1.png) no-repeat;
	background-size:cover;
}
.t2 {
	background: url(../images/t2.png) no-repeat;
	background-size:cover;
}
.t3 {
	background: url(../images/t3.png) no-repeat;
	background-size:cover;
}
.t4 {
	background: url(../images/t4.png) no-repeat;
	background-size:cover;
}
.t5 {
	background: url(../images/t5.png) no-repeat;
	background-size:cover;
}
.t6 {
	background: url(../images/t6.png) no-repeat;
	background-size:cover;
}
.t7 {
	background: url(../images/t7.png);
	background-size: cover;
}
.btn-back {
	float: right;
	margin-right: .2rem;
	border: .02rem solid #fff;
	border-radius: .1rem;
	display: inline;
	width: 1.48rem;
	height: .56rem;
	line-height:.56rem;
	text-align: center;
	background: #65aace;
	color: #fff;
}
.btn-back:hover {
	background: #0d5276;
}
.info-box {
	float: left;
	margin-left: .22rem;
	display: inline;
	border: .03rem solid #7dbbdb;
	border-top: none;
	width: 7rem;
	background: url(../images/rep1.png) repeat;
}
.info-world {
	float: left;
	overflow-y: auto;
	overflow-x: hidden;
	margin-bottom: .5rem;
	margin-left: .22rem;
	display: inline;
	border: .03rem solid #7dbbdb;
	border-top: none;
	width: 7rem;
	max-height: 14.3rem;
	background: url(../images/rep1.png) repeat;
}
.title-box {
	float: left;
	margin-left: .22rem;
	display: inline;
	border: 1px solid #65aace;
	border-top: none;
	width: 7.04rem;
	background: url(../images/rep2.png) repeat;
}
.info-top {
	float: left;
	margin-left: .4rem;
	display: inline;
	border-bottom: .02rem solid #447792;
	width: 6.2rem;
}
.t-cur1, .t-btn1 {
	float: left;
	width: 1.4rem;
	height: .91rem;
	cursor: pointer;
}
.t-cur4, .t-btn4 {
	float: right;
	width: 1.4rem;
	height: .91rem;
	cursor: pointer;
}
.t-cur2, .t-cur3, .t-btn2, .t-btn3 {
	float: left;
	margin-left: .2rem;
	display: inline;
	width: 1.4rem;
	height: .91rem;
	cursor: pointer;
}
.t-cur1, .t-btn1:hover {
	background: url(../images/cur1.png) no-repeat;
	background-size:cover;
}
.t-cur2, .t-btn2:hover {
	background: url(../images/cur2.png) no-repeat;
	background-size:cover;
}
.t-cur3, .t-btn3:hover {
	background: url(../images/cur3.png) no-repeat;
	background-size:cover;
}
.t-cur4, .t-btn4:hover {
	background: url(../images/cur4.png) no-repeat;
	background-size:cover;
}
.t-btn1 {
	background: url(../images/btn_new.png) no-repeat;
	background-size:cover;
}
.t-btn2 {
	background: url(../images/btn_news.png) no-repeat;
	background-size:cover;
}
.t-btn3 {
	background: url(../images/btn_raiders.png) no-repeat;
	background-size:cover;
}
.t-btn4 {
	background: url(../images/btn_activity.png) no-repeat;
	background-size:cover;
}
.info-details {
	float: left;
	margin-top: .2rem;
	margin-left: .3rem;
	display: inline;
	width: 6.4rem;
	height: auto !important;
	height: 6rem;
	min-height: 6rem;
}
.info-details li {
	float: left;
	position: relative;
	width: 6.4rem;
	height: 1rem;
	line-height: .8rem;
	font-size: .26rem;
	border-bottom: .02rem dashed #000;
}
.info-details li a {
	overflow: hidden;
	padding-left: 1rem;
	padding-right: .5rem;
	display: inline-block;
	width: 4.9rem;
	height: 1rem;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #000;
}
.time {
	position: absolute;
	bottom: .1rem;
	right: .5rem;
	line-height: .3rem;
	font-size: .2rem;
	color: #b7b7b7;
}
.dot {
	position: absolute;
	top: .2rem;
	left: 0;
	width: .95rem;
	height: .44rem;
	line-height: .42rem;
	text-align: center;
	color: #fff;
	background: #7dbbdb;
}
.info-details li:hover a {
	color: #7dbbdb;
}
.arrow {
	position: absolute;
	top: .2rem;
	right: 0;
	width: .29rem;
	height: .48rem;
	background: url(../images/arrow.png) no-repeat;
	background-size:cover;
}
.info-details li:last-child {
	border-bottom: none;
}
.dl-game {
	overflow: hidden;
	zoom: 1;
	margin: 0 auto;
	width: 95%;
	margin-bottom: .2rem;
}
.dl-game dd {
	float: left;
	margin-top: .1rem;
	width: 100%;
	color: #fff;
}
.dl-game dd a {
	float: left;
	margin-top: .2rem;
	border: .02rem solid #fff;
	border-radius: .1rem;
	margin-left: 5%;
	display: inline-block;
	width: 26%;
	line-height: .62rem;
	font-size: .26rem;
	text-align: center;
	background: #65aace;
	color: #fff;
}
.dl-game dd a:hover, .dl-game .cur {
	background: #e63c00;
}
.page, .piece {
	float: left;
	margin-bottom: .5rem;
	margin-top: .2rem;
	width: 100%;
	text-align: center;
}
.page .page-prev, .page .page-next {
	border-radius: .1rem;
	width: 1.5rem;
}
.btn-index {
	margin: 0 auto;
	margin-top: .2rem;
	margin-bottom: .2rem;
	display: block;
	border: .02rem solid #fff;
	border-radius: .54rem;
	width: 2.5rem;
	height: .5rem;
	line-height: .5rem;
	text-align: center;
	background: #65aace;
	color: #fff;
}
.page a {
	border: .02rem solid #fff;
	border-radius: 100%;
	cursor: pointer;
	margin: .1rem;
	display: inline-block;
	width: .5rem;
	height: .5rem;
	line-height: .5rem;
	text-align: center;
	background: #65aace;
	color: #fff;
}
.page a:hover, .piece a:hover, .page .cur, .btn-index:hover {
	background: #0d5276;
}
.piece a {
	border: .02rem solid #fff;
	border-radius: .1rem;
	cursor: pointer;
	margin: .1rem;
	display: inline-block;
	width: 1.5rem;
	height: .5rem;
	line-height: .5rem;
	text-align: center;
	background: #65aace;
	color: #fff;
}
.piece .btn-menu {
	width: 2.5rem;
}
.info-box-details {
	float: left;
	margin-left: .2rem;
	margin-top: .2rem;
	padding-bottom: .2rem;
	display: inline;
	width: 6.6rem;
	height: auto !important;
	height: 6rem;
	min-height: 6rem;
	color: #65aace;
}
.details-box {
	float: left;
	margin-left: .22rem;
	margin-top: .2rem;
	padding-bottom: .2rem;
	display: inline;
	width: 7.06rem;
	height: auto !important;
	height: 6rem;
	min-height: 6rem;
	background: #fff;
	color: #65aace;
}
.details {
	margin: 0 auto;
	overflow: hidden;
	width: 6.6rem;
	height: auto !important;
	height: 6rem;
	min-height: 6rem;
	color: #65aace;
}
.details h3 {
	float: left;
	padding-bottom: .1rem;
	border-bottom: .02rem solid #ec7c6e;
	width: 100%;
	line-height: .42rem;
	text-align: center;
	font-weight: normal;
	color: #ec7c6e;
}
.details-box h3 {
	float: left;
	margin-top: .2rem;
	padding-bottom: .1rem;
	border-bottom: .02rem solid #ec7c6e;
	width: 100%;
	line-height: .42rem;
	text-align: center;
	font-weight: normal;
	color: #ec7c6e;
}
.h3-tit {
	float: left;
	width: 100%;
	font-size: .3rem;
}
.date {
	float: right;
	margin-right: .1rem;
	display: inline;
	font-size: .2rem;
	color: #b7b7b7;
}
.detail-div {
	float: left;
	margin-top: .1rem;
	width: 100%;
	line-height: .36rem;
	color: #65aace;
}
.detail-div p {
	margin: .1rem 0;
	word-wrap: break-word;
	word-break: normal;
	color: #65aace;
}
.detail-div p{
	line-height: .36rem;
}
.detail-div a {
	color: #f00;
}
.detail-div img {
	padding: 1%;
	max-width: 98%;
}
.info-photo {
	margin: 0 auto;
	padding-bottom: .2rem;
	overflow: hidden;
	width: 6.6rem;
	height: auto !important;
	height: 6rem;
	min-height: 6rem;
}
.tab {
	overflow: hidden;
	border-bottom: .02rem solid #447792;
	height: .75rem;
}
.pic-list {
	float: left;
	margin-top: .2rem;
	position: relative;
	width: 100%;
}
.pic-list li {
	float: left;
	margin-bottom: .2rem;
	margin-left: .23rem;
	display: inline;
	width: 3rem;
	height: 3.3rem;
	background: #ecf7ff;
	box-shadow: .02rem .02rem .05rem #e0e3e6;
}
.pic img {
	width: 3rem;
	height: 2.57rem;
}
.pic-left {
	float: left;
	margin-left: .1rem;
	display: inline;
	width: 2.2rem;
	font-size: .2rem;
}
.pic-name {
	float: left;
	overflow: hidden;
	width: 2.2rem;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #717e85;
}
.pic-related {
	float: left;
	margin-top: .05rem;
	display: inline;
	overflow: hidden;
	width: 2.2rem;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: .18rem;
	color: #99d5f5;
}
.pic-dot {
	float: left;
	vertical-align: middle;
	margin-top: .02rem;
	margin-right: .05rem;
	display: inline;
	width: .2rem;
	height: .2rem;
	background: url(../images/pic_dot.png) no-repeat;
	background-size: cover;
}
.pic-like {
	float: right;
	margin-top: .08rem;
	margin-right:.05rem;
	display: inline;
	width: .6rem;
	font-size: .18rem;
	cursor: pointer;
}
.like-dot {
	float: left;
	margin-left: .2rem;
	display: inline;
	width: .2rem;
	height: .18rem;
	background: url(../images/btn_like.png) no-repeat;
	background-size: cover;
}
.num {
	float: left;
	margin-top: .05rem;
	width: 100%;
	text-align: center;
	color: #ff3540;
}
.menu-info {
	float: left;
	position: relative;
	margin-top: 1.5rem;
	width: 100%;
	height: 9rem;
}
.btn-web {
	float: right;
	margin-right: .2rem;
	border: .02rem solid #fff;
	border-radius: .1rem;
	display: inline;
	width: 1.48rem;
	height: .56rem;
	line-height: .56rem;
	text-align: center;
	background: #65aace;
	color: #fff;
}
.btn-act1 {
	position: absolute;
	top: .4rem;
	left: .19rem;
	width: 7.11rem;
	height: 2.3rem;
	background: url(../images/btn_act1.png) no-repeat;
	background-size: cover;	
}
.btn-act2 {
	position: absolute;
	top: 3.2rem;
	left: .19rem;
	width: 7.11rem;
	height: 1.9rem;
	background: url(../images/btn_act2.png) no-repeat;
	-webkit-animation-delay: .25s;
	animation-delay: .25s;
	background-size: cover;
}
.btn-act3 {
	position: absolute;
	top: 4.78rem;
	left: .03rem;
	width: 7.27rem;
	height: 1.9rem;
	background: url(../images/btn_act3.png) no-repeat;
	-webkit-animation-delay: .5s;
	animation-delay: .5s;
	background-size: cover;
}
.movelanime {
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-duration: .5s;
	animation-duration: .5s;
	-webkit-animation-name: movelanime;
	animation-name: movelanime;
	visibility: visible !important;
}
@-webkit-keyframes movelanime {
 0% {
 opacity: 0;
 -webkit-transform:  translate(-7.11rem, 0rem);
 transform:  translate(-7.11rem, 0rem);
}
 100% {
 opacity: 1;
 -webkit-transform:  translate(0rem, 0rem);
 transform:  translate(0rem, 0rem);
}
}
@keyframes movelanime {
 0% {
 opacity: 0;
 -webkit-transform:  translate(-7.11rem, 0rem);
 transform:  translate(-7.11rem, 0rem);
}
 100% {
 opacity: 1;
 -webkit-transform:  translate(0rem, 0rem);
 transform:  translate(0rem, 0rem);
}
}
.top {
	margin: 0 auto;
	overflow: hidden;
	display: block;
	width: 1.75rem;
	height: .9rem;
	background: url(../images/btn_top.png) no-repeat;
	background-size: cover;
}
/**/
.p-cur1,.p-cur2,.p-cur3, .btn-p1, .btn-p2, .btn-p3 {
	float: left;
	margin-left: .15rem;
	display: inline;
	width: 2rem;
	height: .75rem;
	cursor: pointer;
	margin-right:0
}
.btn-p1 {
	background: url(../images/btn_p1.png) no-repeat;
	background-size:cover;
}
.btn-p2 {
	background: url(../images/btn_p2.png) no-repeat;
	background-size:cover;
}
.btn-p3 {
	background: url(../images/btn_p3.png) no-repeat;
	background-size:cover;
}
.p-cur1 {
	background: url(../images/p_cur1.png) no-repeat;
	background-size:cover;
}
.p-cur2 {
	background: url(../images/p_cur2.png) no-repeat;
	background-size:cover;
}
.p-cur3 {
	background: url(../images/p_cur3.png) no-repeat;
	background-size:cover;
}

/**/
.article {
	float: left;
	margin-top:-.2rem;
	overflow: hidden;
	width: 100%;	height: 8.7rem;
}
.article ul {
	overflow: hidden;
	height: 7.8rem;
}
.article li {
	float: left;
	position: relative;
	width: 100%;
	height: .95rem;
	line-height:.95rem;
	border-bottom: 1px dashed #000;
}
.article li a {
	float: left;
	overflow: hidden;
	padding-left: .8rem;
	padding-right: .8rem;
	display: inline-block;
	width: 5.5rem;
	height:.95rem;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #585757;
}
.article li:hover a {
	color: #ec7c6e;
}
.direction {
	position: absolute;
	top: .3rem;
	right: .12rem;
	width: .2rem;
	height: .33rem;
	background: url(../images/arrow.png) no-repeat;
	background-size:cover;
}
.mark {
	position: absolute;
	top: .3rem;
	left: 0;
	width: .7rem;
	height: .4rem;
	line-height:.4rem;
	font-size: .2rem;
	text-align: center;
	color: #fff;
	background: #7dbbdb;
}
.mark1 {
	background: #f7a2e4;
}
.mark2 {
	background: #ffb8b8;
}
.mark3 {
	background: #f9d6a8;
}
.mark4 {
	background: #a0d1d4;
}