@charset "utf-8";

/* CSS Document */
.sortBody {
	width: 38.4rem;
	height: 21.6rem;
	background: url(../img/sortBg.jpg) no-repeat;
	background-size: 100% 100%;
}

.sortBody .footer {
	position: relative;
	bottom: 0;
	left: 0;
	text-align: center;
	background: rgba(0, 0, 0, .1);
	width: 100%;
}

.sortLogin {
	width: 7.67rem;
	height: 5.6rem;
	background: url(../img/sortLogin.png) no-repeat;
	background-size: 100% 100%;
	top: 0;
	right: 1.1rem;
	position: absolute
}

.sortLoginBg2 {
	background: url(../img/logoBox-bg.png) no-repeat;
	background-size: 100%;
}

.tx {
	position: absolute;
	width: 1.51rem;
	height: 1.51rem;
	border-radius: 100%;
	position: absolute;
	top: 2.58rem;
	left: 1.37rem
}

.tx img {
	width: 100%;
}

.sortBtn {
	position: absolute;
	width: 2.09rem;
	height: 0.78rem;
	background: url(../img/sortBtn.png) no-repeat;
	background-size: 100%;
	top: 3.2rem;
	left: 3.14rem
}

.sortBtn img {
	width: 100%
}

.sortBack {
	position: absolute;
	width: 3.46rem;
	height: 1.46rem;
	background: url(../img/sortBack.png) no-repeat;
	background-size: 100% 100%;
	bottom: 1rem;
	right: 2.72rem;
	z-index: 10;
}

.sortBox {
	width: 28.14rem;
	height: 19.18rem;
	background: #faf3e7;
	margin: 1rem auto 0 auto;
	border-radius: 0.3rem
}

.sortRight {
	width: 17.71rem;
	height: 18.42rem;
	background: url(../img/righBg.jpg) no-repeat bottom;
	background-size: 100%;
}

.sortCenter {
	background: url(../img/sortBox.jpg) repeat;
	background-size: 100% 100%;
	margin: 0 0.7rem
}

.sortLeft {
	width: 9rem;
	height: 18.44rem;
	background: #f8f4e7;
	position: relative; 
}

.sortLeft .list {
	background: #fff;
	width: 9rem;
	height: 18.44rem;
	overflow-y: auto;
	overflow-x:hidden;
} 
.sortLeft .list li {
	float: left;
	width: 50%;
	height: 4.45rem;
	background: #fff;
	box-shadow: 0 0 0.05rem #ccc;
	font-size: 0.51rem;
	text-align: center;
	position: relative;
	cursor: pointer
}

.sortLeft .list li:nth-child(2),
.sortLeft .list li:nth-child(7) {
	background: #f7bf42;
	color: #fff
}

.sortLeft .list li:nth-child(3),
.sortLeft .list li:nth-child(6) {
	background: #51b5f3;
}
	.sortLeft .arrow {
		height: 1rem;
		width: 100%;
		background-color: skyblue;
		position: absolute;
		bottom: 0;
		background-image: url(../img/arrow.png);
		background-size:2.6rem;
		background-repeat: no-repeat;
		background-position: 50%;
		display: none;
		-webkit-animation: shows ease-in-out 2s infinite;
		animation: shows ease-in-out 2s infinite;
	} 

ul ::-webkit-scrollbar {
	display: none;
}

.sortLogo {
	position: relative;
	width: 11.66rem;
	height: 2.72rem;
	margin: 0 auto;
	margin-top: 3rem
}

.sortLogo.xichengLogo {
	margin-left: 1.4rem;
}

.sortLogo .boy {
	position: absolute;
	width: 2.37rem;
	height: 3.38rem;
	background: url(../img/sortBoy.png) no-repeat;
	background-size: 100%;
	top: -0.9rem;
	left: 0.7rem;
	-webkit-animation: float ease-in-out 1s infinite;
	animation: float ease-in-out 1s infinite;
}

.ship {
	position: absolute;
	width: 6.03rem;
	height: 4.95rem;
	background: url(../img/pic02.png) no-repeat;
	background-size: 100% 100%;
	bottom: 0;
	left: 1.5rem;
	-webkit-animation: float ease-in-out 2s infinite;
	animation: float ease-in-out 2s infinite;
}

.sortTip {
	position: absolute;
	width: 2.28rem;
	height: 1.43rem;
	background: url(../img/tip.png) no-repeat;
	background-size: 100% 100%;
	top: 0.95rem;
	left: -1.35rem;
	-webkit-animation: shows ease-in-out 2s infinite;
	animation: shows ease-in-out 2s infinite;
	z-index:10;
}

.sortLeft li a {
	display: block;
	padding-top: 0.8rem;
	text-align: center;
	font-size: 0.51rem
}

.sortLeft li a i {
	display: inline-block;
	width: 2.17rem;
	height: 2.35rem;
	background: url(../img/nav.png) no-repeat;
	background-size: 100%;
}

.sortLeft li a i span {
	width: 1.98rem;
	height: 2.02rem;
	display: block;
	position: relative;
	margin: 0 auto;
	top: -0.1rem;
}

.sortLeft li a p {
	line-height: 1.5;
	transition: All 0.4s ease-in-out;
	-webkit-transition: All 0.4s ease-in-out;
	-moz-transition: All 0.4s ease-in-out;
	-o-transition: All 0.4s ease-in-out;
}

.sortLeft li a i.index span {
	background: url(../img/nav_01.png) no-repeat;
	background-size: 100%;
}

.sortLeft li a i.map span {
	background: url(../img/nav_03.png) no-repeat;
	background-size: 100%;
}

.sortLeft li a i.catalog span {
	background: url(../img/nav_05.png) no-repeat;
	background-size: 100%;
}

.sortLeft li a i.game span {
	background: url(../img/nav_07.png) no-repeat;
	background-size: 100%;
}

.sortLeft li a i.sousuo span {
	background: url(../img/nav_09.png) no-repeat;
	background-size: 100%;
}

.sortLeft li a i.kb span {
	background: url(../img/kb.png) no-repeat;
	background-size: 100%;
}
	.sortLeft li a i.trip span {
		background: url(../img/trip.png) no-repeat;
		background-size: 100%
	}

.sortLeft li a i.sj span {
	background: url(../img/sj.png) no-repeat;
	background-size: 100%;
}

.sortLeft li a i.hd span {
	background: url(../img/hd.png) no-repeat;
	background-size: 100%;
}

.sortLeft li a i.ts span {
	background: url(../img/ts.png) no-repeat;
	background-size: 100%;
}

.sortLeft li a i.sousuo span {
	background: url(../img/nav_09.png) no-repeat;
	background-size: 100%;
}
	.sortLeft li a i.tujie span {
		background: url(../img/tujie.png) no-repeat;
		background-size: 100%
	}
	.sortLeft li a i.video span {
		background: url(../images/menu/nav_video.png) no-repeat;
		background-size: 100%
	}
.sortLeft li.currentNav a i span {
	top: 0;
}

.sortLeft li:hover a i span {
	-webkit-animation: spin 2s linear infinite;
	animation: spin 2s linear infinite;
}

.sortLeft li:hover a p {
	transform: scale(1.2);
	-webkit-transform: scale(1.2);
	-moz-transform: scale(1.2);
	-o-transform: scale(1.2);
	-ms-transform: scale(1.2);
}

@-webkit-keyframes shows {
	0% {
		opacity: .2;
	}

	50% {
		opacity: 1;
	}

	75% {
		opacity: .65;
	}

	100% {
		opacity: .3;
	}
}

@keyframes shows {
	0% {
		opacity: .2;
	}

	50% {
		opacity: 1;
	}

	75% {
		opacity: .65;
	}

	100% {
		opacity: .3;
	}
}

@-moz-keyframes shows

/* Firefox */
	{
	0% {
		opacity: .2;
	}

	50% {
		opacity: 1;
	}

	75% {
		opacity: .65;
	}

	100% {
		opacity: .3;
	}
}

/* Opera */
@-o-keyframes shows {
	0% {
		opacity: .2;
	}

	50% {
		opacity: 1;
	}

	75% {
		opacity: .65;
	}

	100% {
		opacity: .3;
	}
}


.family {
	position: absolute;
	width: 100%;
	height: 12.32rem;
	bottom: 0;
	left: 0;
	overflow: hidden;
}

.family img {
	position: relative;
	z-index: 12;
}

.family01 {
	position: absolute;
	width: 100%;
	height: 12.32rem;
	bottom: 0;
	left: 0;
	overflow: hidden;
	background: url(../img/pic01.gif) no-repeat bottom;
	background-size: 100%;
}

.yun01 {
	position: absolute;
	width: 3.51rem;
	height: 1.86rem;
	background: url(../img/yun.png) no-repeat;
	background-size: 100%;
	top: 0;
	left: -3.51rem;
	-webkit-animation: Cloudmove ease-in-out 6s infinite;
	animation: Cloudmove ease-in-out 6s infinite;
}

.yun02 {
	position: absolute;
	width: 2.43rem;
	height: 1.31rem;
	background: url(../img/yun.png) no-repeat;
	background-size: 100%;
	top: 1rem;
	left: -3.51rem;
	-webkit-animation: Cloudmove ease-in-out 10s infinite;
	animation: Cloudmove ease-in-out 10s infinite;
}

@-webkit-keyframes Cloudmove {
	0% {
		left: -3.51rem;
	}

	100% {
		left: 9rem;
		opacity: 0
	}
}

@keyframes Cloudmove {
	0% {
		left: -3.51rem;
	}

	100% {
		left: 9rem;
		opacity: 0
	}
}

@-moz-keyframes Cloudmove

/* Firefox */
	{
	0% {
		left: -3.51rem;
	}

	100% {
		left: 9rem;
		opacity: 0
	}
}

@-o-keyframes Cloudmove

/* Opera */
	{
	0% {
		left: -3.51rem;
	}

	100% {
		left: 9rem;
		opacity: 0
	}
}