@charset "utf-8";



/* common */

@import url('common.css');



/* owl-carousel */

@import url('owl.carousel.min.css');



/* more */

.more {

	display: block;

	width: 200px;

	margin: 0 auto;

	border-radius: 5px;

	font-size: 18px;

	color: #FFF;

	line-height: 40px;

	letter-spacing: .5px;

	text-align: center;

	transition: all .3s;

}



.more::after {

	content: "";

	display: inline-block;

	width: 0;

	height: 0;

	margin-left: 15px;

	border-style: solid;

	border-width: 5px 0 5px 8px;

	border-color: transparent transparent transparent #FFF;

	vertical-align: middle;

}



.more:hover {

	opacity: .6;

}



/* slider */

#slider {

	background: #000;

}



#slider .item {

	position: relative;

}



#slider .item .wrap {

	position: absolute;

	left: 0;

	top: 50%;

	width: 430px;

	margin-top: -97px;

	padding: 25px 35px;

	background: rgba(0, 0, 0, .4);

	box-sizing: border-box;

}



#slider .item .wrap .title {

	margin-bottom: 20px;

	white-space: nowrap;

	overflow: hidden;

	font-size: 40px;

	color: #FFF;

	letter-spacing: .5px;

	font-weight: bold;

	text-overflow: ellipsis;

}



#slider .item .wrap p {

	margin-bottom: 20px;

	white-space: nowrap;

	overflow: hidden;

	font-size: 24px;

	color: #FFF;

	letter-spacing: .5px;

	text-overflow: ellipsis;

}



#slider .item .wrap .more {

	margin: 0;

	background: #dd1229;

	color: #000;

}



#slider .item .wrap .more::after {

	border-left-color: #000;

}



#slider .owl-dots {

	position: absolute;

	left: 0;

	bottom: 25px;

	display: flex;

	justify-content: center;

	width: 100%;

	text-align: center;

}
.item img {
	display: block;
}

.item img.minslider {
	width: 100%;
	display: none !important;
}

@media screen and (max-width: 1000px) {
	.item img {
		display: none !important;
	}
	.item img.minslider {
		display: block !important;
	}
}



#slider .owl-dots .owl-dot {

	width: 25px;
    height: 25px;
    margin: 0 10px;
    border: 3px solid #FFF;
    border-radius: 50%;
    box-sizing: border-box;
    transition: all .3s;

}



#slider .owl-dots .owl-dot.active {

	background: #FFF;

}



/* news */

#news {

	padding: 60px 20px;

}



#news h2 {

	display: none;

	/* margin-bottom: 45px;

	font-size: 26px;

	color: #333;

	letter-spacing: .5px;

	font-weight: normal;

	text-align: center; */

}



#news .wrap {

	display: flex;

	justify-content: space-between;

	align-items: flex-start;

	max-width: 1240px;

	margin: 0 auto 40px auto;

}



#news .wrap li {

	width: 400px;

}



#news .wrap li a {

	position: relative;

	display: block;

	overflow: hidden;

}



#news .wrap li a img {

	display: block;

	width: 100%;

	height: auto;

}



#news .wrap li a .content {

	position: absolute;

	left: 0;

	bottom: -100%;

	width: 100%;

	padding: 20px;

	background: rgba(0, 0, 0, .5);

	box-sizing: border-box;

	transition: all .3s;

}



#news .wrap li a .content .title {

	margin-bottom: 10px;

	white-space: nowrap;

	overflow: hidden;

	font-size: 20px;

	color: #FFF;

	letter-spacing: .5px;

	text-overflow: ellipsis;

}



#news .wrap li a .content .date {

	font-size: 14px;

	color: rgba(255, 255, 255, .7);

	letter-spacing: .5px;

}



#news .wrap li a:hover .content {

	bottom: 0;

}



#news .more {

	display: none;

	/* background: #333; */

}



/* hot-sale */

#hot-sale {

	padding: 60px 20px;

}



#hot-sale h2 {

	margin-bottom: 40px;

	font-size: 26px;

	color: #333;

	letter-spacing: .5px;

	font-weight: normal;

	text-align: center;

}



#hot-sale .wrap {

	display: flex;

	justify-content: space-between;

	max-width: 1660px;

	margin: 0 auto 60px auto;

}



#hot-sale .wrap dl {

	width: 400px;

}



#hot-sale .wrap dt {

	margin-bottom: 40px

}



#hot-sale .wrap dt a {

	display: block;

}



#hot-sale .wrap dt a img {

	display: block;

	width: 70%;

	height: auto;

	margin: 0 auto;

	transition: all .3s;

}



#hot-sale .wrap dt a:hover img {

	opacity: .6;

}



#hot-sale .wrap dd {

	text-align: center;

}



#hot-sale .wrap dd .title {

	margin-bottom: 10px;

	font-size: 16px;

	color: #333;

	line-height: 25px;

	letter-spacing: .5px;

}



#hot-sale .wrap dd .price {

	font-size: 16px;

	color: #666;

	letter-spacing: .5px;

}



#hot-sale .wrap dd .buyNowHot {

	width: 200px;

	display: flex;

	justify-content: center;

	align-items: center;

	margin: 10px auto;

	padding: 0 20px;

	background: #dd1229;

	border-radius: 3px;

	text-align: center;

	color: #FFF;

	line-height: 32px;

	transition: all .3s;

}



#hot-sale .wrap dd .buyNowHot::before {

	content: "";

	display: block;

	width: 15px;

	height: 15px;

	margin-right: 5px;

	background: url('../images/fire.png');

	background-size: 100% auto;

}



#hot-sale .wrap dd .buyNowHot:hover {

	opacity: .6;

}



#hot-sale .more {

	background: #333;

}



.originalPriceLogin {

	font-size: 16px;

	color: #666;

	letter-spacing: .5px;

	text-decoration-line: line-through;

	text-align: start;

	margin-left: 26%;

}



.priceLogin {

	margin-bottom: 10px;

	font-size: 16px;

	color: #333;

	letter-spacing: .5px;

	text-align: start;

	margin-left: 26%;

}



/* quick-link */

#quick-link {

	display: flex;

	justify-content: space-between;

	max-width: 1240px;

	margin: 0 auto;

	padding: 70px 0;

	border-top: 1px solid #CCC;

}



#quick-link li {

	position: relative;

	width: 610px;

	padding-bottom: 34.7%;

	background-position: center center;

	background-size: contain;

	background-repeat: no-repeat;

	cursor: pointer;

}



#quick-link li .wrap {

	position: absolute;

	top: 50%;

	margin-top: -50px;

	display: none;

}



#quick-link li.order .wrap {

	width: 85%;

	left: 50%;

  transform: translate(-50%,0);

}



#quick-link li.catelog .wrap {

	width: 85%;

	left: 50%;

  transform: translate(-50%,0);

}



#quick-link li .wrap .title {

	margin-bottom: 10px;

	font-size: 48px;

	text-align: center;

	color: #FFF;

	letter-spacing: .5px;

}



#quick-link li .wrap .more {

	border: 1px solid #dd1229;

	background-color: #dd1229;

	color: #FFF;

}



#quick-link li .wrap .more::after {

	border-left-color: #FFF;

}



#quick-link li .wrap .more:hover {

	opacity: .8;

}



/* vip */

#vip {

	position: fixed;

	left: 0;

	top: 0;

	display: flex;

	justify-content: center;

	align-items: center;

	width: 100%;

	height: 100%;

	background: rgba(0, 0, 0, .8);

	z-index: 999;

}



#vip .outer {

	width: 540px;

	text-align: right;

}



#vip .outer .close {

	position: relative;

	display: inline-block;

	width: 50px;

	height: 50px;

	background: #ff0000;

	text-align: left;

	text-indent: -9999px;

	transition: all .3s;

}



#vip .outer .close::before,

#vip .outer .close::after {

	content: "";

	position: absolute;

	left: 9px;

	top: 50%;

	display: block;

	width: 32px;

	height: 2px;

	margin-top: -1px;

	background: #FFF;

}



#vip .outer .close::before {

	transform: rotate(45deg);

}



#vip .outer .close::after {

	transform: rotate(-45deg);

}



#vip .outer .close:hover {

	background: #999;

}



#vip .inner {

	padding: 15px;

	background: #FFF;

	text-align: left;

}



#vip .wrap {

	position: relative;

	padding: 30px;

	border: 10px solid #000;

}



#vip .wrap .title {

	width: 250px;

	margin: -90px auto 20px auto;

	padding: 20px;

	background: #000;

	font-size: 30px;

	color: #FFF;

	font-weight: bold;

	text-align: center;

	box-sizing: border-box;

}



#vip .wrap .title::before {

	content: "";

	display: block;

	width: 50px;

	height: 71px;

	margin: 0 auto 10px auto;

	background: url('../images/fire_vip.gif');

	background-size: 100% auto;

}



#vip .wrap .title span {

	padding: 0 5px;

	color: #ff0000;

}



#vip .wrap form {

	width: 280px;

	margin: 0 auto;

}



#vip .wrap form li {

	margin-bottom: 20px;

}



#vip .wrap form li span {

	display: block;

	margin-bottom: 10px;

}



#vip .wrap form li input,

#vip .wrap form li select {

	display: block;

	width: 100%;

	height: 38px;

	padding: 0 10px;

	border: 2px solid #000;

	font-size: 15px;

	color: #333;

	line-height: 34px;

	box-sizing: border-box;

}



#vip .wrap form li input::-webkit-input-placeholder {

	color: #CCC;

}



#vip .wrap form li .birth {

	display: flex;

	justify-content: space-between;

}



#vip .wrap form li .birth .select {

	position: relative;

	width: 90px;

}



#vip .wrap form li .birth .select::after {

	content: "";

	position: absolute;

	right: 10px;

	top: 50%;

	display: block;

	width: 0;

	height: 0;

	margin-top: -4px;

	border-style: solid;

	border-width: 8px 4px 0 4px;

	border-color: #000 transparent transparent transparent;

}



#vip .wrap form li .birth .select select {

	padding-right: 25px;

}



#vip .wrap form button {

	display: block;

	width: 100%;

	height: 38px;

	background: #ff0000;

	border: none;

	font-size: 15px;

	color: #FFF;

	text-align: center;

	transition: all .3s;

}



#vip .wrap form button:hover {

	background: #000;

}



/* RWD */

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

	

	/* quick-link */

	#quick-link {

		padding: 20px;

		/* border: none; */

	}



}



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

	

	/* slider */

	#slider .item .wrap {

		position: absolute;

		width: 100%;

		margin: 0;

		text-align: center;

		bottom: 0;

		top: initial;

		padding: 25px 35px 75px;
		/* display: none; */

		background-color: transparent;
	}



	#slider .item .wrap .title {

		margin-bottom: 10px;

		font-size: 25px;

	}



	#slider .item .wrap p {

		font-size: 15px;

	}



	#slider .item .wrap .more {

		transform: translate(-30%, 75px);
		width: 500vw;
		height: 800px;
		background-color: transparent;
		font-size: 0;
	
		margin: 0 auto;

	}



}



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

	

	/* news */

	#news .wrap li a .content {

		bottom: 0;

		padding: 10px;

	}



	#news .wrap li a .content .title {

		margin-bottom: 5px;

		font-size: 18px;

	}



	/* hot-sale */

	#hot-sale .wrap {

		flex-wrap: wrap;

		justify-content: space-around;

	}



	#hot-sale .wrap dl {

		width: 50%;

		margin-bottom: 20px;

	}



	/* quick-link */

	#quick-link {

		display: block;

	}



	#quick-link li {

		width: 100%;

		padding-bottom: 71%;

	}



}



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

	

	/* news */

	#news .wrap {

		display: block;

	}



	#news .wrap li {

		width: 100%;

		margin-bottom: 10px;

	}



	/* hot-sale */

	#hot-sale .wrap {

		display: block;

	}



	#hot-sale .wrap dl {

		width: 100%;

		margin-bottom: 20px;

	}



	#hot-sale .wrap dt {

		margin-bottom: 20px;

	}



	/* quick-link */ 

	#quick-link li {

		margin-bottom: 10px;

	}

	

	#quick-link li .wrap {

		left: 0;

		right: 0;

		margin-top: -42px;

		text-align: center;

	}



	#quick-link li .wrap .title {

		font-size: 30px;

	}



	#quick-link li .wrap .more {

		margin: 0 auto;

	}



}