body{
	background: rgba(242,242,242,1);
	font-size: .6rem;
	overflow-x: hidden;
}
body input{
    border-radius: 0;
}

@-webkit-keyframes Y360deg{
	0%{-webkit-transform:rotateY(0)}
	50%{-webkit-transform:rotateY(180deg)}
	100%{-webkit-transform:rotateY(360deg)}
}
@keyframes Y360deg{
	0%{transform:rotateY(0deg)}  
	50%{transform:rotateY(180deg)} 
	100%{transform:rotateY(360deg)}
}
@-moz-keyframes Y360deg{
	0%{-moz-transform:rotateY(0deg)}
	50%{-moz-transform:rotateY(180deg)}
	100%{-moz-transform:rotateY(360deg)}
}
@-o-keyframes Y360deg{
	0%{-o-transform:rotateY(0deg)}
	50%{-o-transform:rotateY(180deg)}
	100%{-o-transform:rotateY(360deg)}
}
@-ms-keyframes Y360deg{
	0%{-ms-transform:rotateY(0deg)}
	50%{-ms-transform:rotateY(180deg)}
	100%{-ms-transform:rotateY(360deg)}
}
/* ---------------------------header--------------------------------------- */
.fixed-header{
	height:3rem;
	background: rgba(0,0,0,.8); 
	position: fixed;
	width: 100vw;
	z-index: 1000;
}
.fixed-header h1{
	float: left;
	margin-left: 1rem;
	margin-top: .8rem;
}
.fixed-header h1 span{
	display: none;
}
.fixed-header h1 a:hover img{
	-webkit-transform: rotateY(360deg);
	-moz-transform: rotateY(360deg);
	-o-transform: rotateY(360deg);
	-ms-transform: rotateY(360deg);
	transform: rotateY(360deg);
}
.menu-box{
	float: left;
	line-height: 3rem;
	margin-left: 1rem;
	font-size: .8rem;
}
.nav-icon{
	display: none;
}
.menu-box ul li{
	float: left;
	padding:0 .5rem;
}
.menu-box ul li a{
	color: rgba(255,255,255,1);
}
.menu-box ul li a:hover{
	color: rgba(242,214,73,1);
}

.search-input-box{
	float: right;
    margin-right: 1rem;
    margin-top: .75rem;
}
.search-input-box input{
	height: 1.5rem;
	background: rgba(255,255,255,.5);
	border: 0;
	float: right;
	width: 8rem;
	padding-right: 2rem;
	padding-left: .2rem;
}
.search-input-box:hover input{
	background: rgba(255,255,255,1);
}
.search-input-box i{
	font-size: 1rem;
	color: rgba(255,255,255,1);
	line-height: 1.5rem;
	width: 2rem;
	text-align: center;
    position: absolute;
    margin-left: 8.2rem;
    cursor: pointer;
    background: rgba(242,214,73,.5);
}
.search-input-box:hover i{
	background: rgba(242,214,73,1);
}

/* ---------------------------filtrate--------------------------------------- */
.filtrate{
    width: 100%;
    padding: .3rem 0;
    position: absolute;
    top: 3rem;
    font-size: .7rem;
    z-index: 900;
    border-bottom: 1px solid #D8D8D8;
    color: #666;
}
.filtrate-classify{
}
.filtrate-classify>li{
	width: 6rem;
	float: left;
	margin: .3rem;
	text-align: center;
	height: 2rem;
	line-height: 2rem;
}
.filtrate-classify>li.filtrate-hover:hover{
	background: #fff;
 	-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.2);
    box-shadow: 1px 1px 1px rgba(0,0,0,.2);
    border-radius:.25rem .25rem 0 0;
    cursor: pointer;
    color: #666;
}
.filtrate-classify>li i.arrow{
	-webkit-transition: -webkit-transform .2s linear;
    transition: transform .2s linear
}
.filtrate-classify>li.filtrate-hover:hover i.arrow{
 	-webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
.filtrate-classify span{
	padding: 0 .3rem;
}
.filtrate-classify>li.filtrate-hover:hover .classification-ul{
	display: block;
}
.classification-ul{
	display:none;
	position: absolute;
	width: 6rem;
    -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.2);
    box-shadow: 1px 1px 1px rgba(0,0,0,.2);
    background: #fff;
    border-radius:0 0 .25rem .25rem;
    overflow: hidden;
    margin-top: -.1rem;
    z-index: 999;
}
.classification-ul li{
	width: 100%;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
.classification-ul li:hover{
	background: #79D9CF;
	color: #fff;
 	cursor: pointer;
	transition: all .3s ease-out;
    -webkit-transition: all .5s ease-out;
}
 
 
/* ---------------------------main-box--------------------------------------- */
.main {
    position: absolute;
    width: 100vw;
}
/* ---------------------------footer--------------------------------------- */
.footer{
	text-align: center;
    font-size: .7rem;
    margin-bottom: 1rem;
    width: 100vw;
}
.animated2s{
	-webkit-animation-duration: 2s;
    animation-duration: 2s;
}
.footer a{
	color: #F24182;
}
.footer a:hover{
	color: #F2AEB4;
}
/* ---------------------------go-top--------------------------------------- */
.go-top{
	width: 3rem;
	height: 3rem;
	border-radius:50%;
	position: fixed;
	bottom: 3rem;
	right: 2rem;
	background: rgba(0,0,0,.3);
	z-index: 9999;
	color: #fff;
	display: none;
}
.go-top:hover{
	background: rgba(0,0,0,1);
	cursor: pointer;
}
.go-top i{
	font-size: 1.5rem;
	width: 100%;
	text-align: center;
}
.go-top span{
	display: block;
	text-align: center;
	font-size: .7rem;
}
/* ---------------------------loading--------------------------------------- */
.loading-logo{
	position: fixed;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.8);
	text-align: center;
}
.loading-logo img{
	position: relative;
	top: 50%;
	margin-top: -14px;
	animation:Y360deg 1.5s linear infinite;
	-webkit-animation:Y360deg 1.5s linear infinite;
	-moz-animation:Y360deg 1.5s linear infinite;
	-ms-animation:Y360deg 1.5s linear infinite;
	-o-animation:Y360deg 1.5s linear infinite;
}

@media only screen and (max-width:1000px) {
	.go-top{
		bottom: .5rem;
		right: .5rem;
	}
	/* --------header-------- */
	.fixed-header h1 img{
		width: 70%;
	}
	.search-input-box{
		float: left;
		margin-left: 0rem;
	}
	.search-input-box input{
		width: 6rem;
	}
	.search-input-box i{
	    margin-left: 6.2rem;
	}
	.menu-box{
		position: fixed;
		width: 100%;
		margin-top: 3rem;
		margin-left: 0rem; 
	}
	.nav-icon{
		display: block;
		color: rgba(255,255,255,1);
		margin-top: -3rem;
		float: right;
		font-size: 1.2rem;
		margin-right: 1rem;
	}
	.nav-icon i{
		cursor: pointer;
	}
	.nav-icon .mobile-menu-close{
		display: none;
	}
	.menu-box nav{
		height: 100vh;
		background: rgba(20,20,20,.9);
		display: none;
	}
	.menu-box ul{
		width: 100%;
	}
	.menu-box ul li{
		width: 100%;
		text-align: center;
		line-height: 2rem;
		border-bottom: dotted rgba(255,255,255,1) 1px;
	}
}