html{ 
	width: 100%; 
	height: 100%;
	font-family: "Microsoft Yahei";
	font-size: 100%;
	color: #333;
}
body{
	background: #f3f5f9;
	font-size: 14px;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	/*overflow-x:hidden;
	overflow-y: scroll;*/
	-webkit-overflow-scrolling:touch;
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	padding:0; margin:0; 
}
table { 
	border-collapse:collapse; 
	border-spacing:0; 
}
fieldset,img { 
	border:0; 
}
address,caption,cite,code,dfn,em,th,var { 
	font-weight:normal; 
	font-style:normal; 
}
ol,ul { 
	list-style:none; 
}
caption,th { 
	text-align:left; 
}
h1,h2,h3,h4,h5,h6 { 
	font-weight:normal; 
	font-size:100%; 
}
q:before,q:after { 
	content:""; 
}
abbr,acronym { 
	border:0; }
a img { border:none;
}
a { 
	border:none;
	text-decoration:none;
	color: #333;
}
img{
	vertical-align: middle;
}
.clearfix:after{
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden
}
.clearfix{
	*+height:1%;
}
input[type="text"],input[type="button"],input[type="submit"],input[type="reset"],button,select { 
	-webkit-appearance: none; 
	vertical-align: middle;
}
select:focus,input:focus{ 
    -webkit-tap-highlight-color:rgba(0,0,0,0); 
    -webkit-user-modify:read-write-plaintext-only; 
		outline: none;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #666; opacity:1; 
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #666;opacity:1;
}
input:-ms-input-placeholder{
    color: #666;opacity:1;
}
input::-webkit-input-placeholder{
    color: #666;opacity:1;
}
select {
  border: solid 1px #000;
  appearance:none;
  -moz-appearance:none;
  -webkit-appearance:none;
}
select::-ms-expand { display: none; }
select {
  border: solid 1px #ddd;
  appearance:none;
  -moz-appearance:none;
  -webkit-appearance:none;
}
select::-ms-expand { display: none; }
input.btn-reg[disabled]{
	background: #aaa!important;
}
input.btn-reg[disabled]:hover{
	opacity: 1;
	cursor: default;
}
a:hover{
	opacity: .8;
}

/************************************************************************/
html{
	position: relative;
}
body{
	width: 100%;
	height: 100%;
	background: #a50506;
}
.top{
	width: 100%;
	height: 454px;
	background: url(../images/top-1.png) no-repeat top center;
	background-size: auto 100%;
}
.top .top-t{
	width: 100%;
	height: 301px;
	background: #c50001;
	position: relative;
	z-index: -1;
}
.list{
	width: 1400px;
	margin: 0 auto 60px;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	flex-wrap: wrap;
}
.list .item{
	width: 426px;
	padding: 10px 10px 0;
	background: #fff;
	border-top-right-radius: 10px;
	border-bottom-left-radius: 10px;
	margin: 10px;
	box-shadow: 0 0 5px #8c0607;
	cursor: pointer;
}
.list .item .pic-wrap{
	width: 100%;
	height: 280px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #f3f5f9;
	overflow: hidden;
}
.list .item .pic{
	max-width: 100%;
	max-height: 100%;
	object-fit: cover;
	transition: all .5s;
}
.list .item:hover{
	opacity: 1;
}
.list .item:hover .pic{
	transform: scale(1.1);
	transition: all .5s;
}
.list .item .txt-wrap{
	width: 100%;
	height: 60px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.list .item  .user{
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.list .item .avatar{
	width: 40px;
	height: 40px;
	display: block;
	border-radius: 100%;
	margin-right: 10px;
}
.list .item .username{
	font-size: 16px;
	font-weight: bold;
	width: 180px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.list .item .location{
	font-size: 16px;
	font-weight: bold;
}
.detail{
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	left: 0;
	top: 0;
	background: #000;
	overflow: hidden;
}
.detail .swiper-container{
	width: 100%;
    height: calc(100% - 160px);
    position: relative;
    margin: 0 auto;
}
.detail .swiper-slide{
	display: flex;
	justify-content: center;
	align-items: center;
}
.detail .swiper-slide .pic-wrap {
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
    border: 8px solid #fff;
    box-sizing: border-box;
    background: #fff;
    overflow: hidden;
}
.detail .swiper-slide .pic{
	max-width: 100%;
	max-height: 100%;
	display: block;
	position: absolute;
	left: 0;
	top: 0;
}
.detail .swiper-slide .text{
	display: none;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 10000;
	color: #fff;
	width: 100%;
	padding: 15px 0;
	background: #000;
	background: -webkit-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.6));
	background: -moz-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,.6) 100%);; /*FireFox*/
	background: -o-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,.6) 100%);  /* Opear */
	background: -ms-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.6)); /*IE10及IE10+*/
}
.detail .swiper-slide .text .title{
	font-size: 20px;
	padding: 0 15px;
	overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
	margin-bottom: 15px;
}
.detail .swiper-slide .text .desc{
	padding: 0 15px;
	word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.detail .swiper-pagination{
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	top: 0;
	bottom: inherit;
	color: #fff;
	z-index: 12;
}
.btn-close{
	position: absolute;
    right: 10px;
    top: 10px;
    width: 52px;
    height: 52px;
	display: block;
    background: url(http://www.pai2345.com/static/web/match/images/close-2.png) no-repeat;
	cursor: pointer;
	z-index: 13;
}
.swiper-button-next, .swiper-button-prev{
	width: 60px;
    height: 60px;
	margin-top: -30px;
	background-size: 60px 60px;
}
.swiper-button-next{
	background: url(http://www.pai2345.com/static/web/res/images/btn-next2.png);
	background-size: 60px 60px;
}
.swiper-button-prev{
	background: url(http://www.pai2345.com/static/web/res/images/btn-prev2.png);
	background-size: 60px 60px;
}
.iframe{
	width: 100%;
	height: 100%;
	border: none;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 11;
}
.detail-page{
	display: none;
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
}
.download{
	width: 100%;
	height: 1.2rem;
	background: #fff;
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 15;
	display: none;
}
.download .btn-close{
	width: .36rem;
	height: .36rem;
	display: block;
	background: url(http://www.pai2345.com/static/web/match-H5/images/close1.png) no-repeat;
	background-size: 100% 100%;
	left: .3rem;
	position: absolute;
	top: .42rem;
}
.download .logo{
	height: .7rem;
	position: absolute;
	left: 1rem;
	top: .25rem;
}
.download .btn-download{
	width: 1.8rem;
	height: .7rem;
	color: #fff;
	text-align: center;
	display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
	background: #e6895d;
	border-radius: .35rem;
	position: absolute;
	right: .3rem;
	top: .25rem;
}


@media screen and (max-width: 1024px){
	html{
		overflow-x: hidden;
	}
	body{
		font-size: .26rem;
	}
	.top{
		height: 3.6rem;
		background: url(../images/top-2.png) no-repeat;
		background-size: 100% auto;
	}
	.top .top-t{
		height: 0;
	}
	.list{
		width: 100%;
		margin: 0 auto 1.2rem;
	}
	.list .item{
		margin: .2rem;
		padding: .2rem .2rem 0;
		width: 100%;
	}
	.list .item .pic-wrap{
		height: auto;
	}
	.list .item .pic{
		width: 100%;
	}
	.list .item .txt-wrap{
		height: 1rem;
	}
	.list .item .avatar{
		width: .6rem;
		height: .6rem;
	}
	.list .item .username{
		font-size: .3rem;
		width: 3.4rem;
	}
	.list .item .location{
		font-size: .3rem;
	}
	.btn-close{
		width: .4rem;
		height: .4rem;
		background-size: 100% 100%;
		left: 10px;
	}
	.swiper-button-next, .swiper-button-prev{
		display: none;
	}
	.detail{
		align-items: flex-start;
	}
	.detail .swiper-container{
		height: calc(100% - 1.2rem);
	}
	.detail .swiper-slide .pic-wrap{
		border: none;
		position: static;
		background: none;
	}
	.detail .swiper-slide .pic{
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
	}
	.detail .swiper-slide .text{
		display: block;
		padding: .1rem 0;
	}
	.detail .swiper-slide .text .title{
		font-size: .32rem;
		margin: 0 .3rem .15rem;
		border-bottom: 1px solid #ccc;
		padding: 0 0 .15rem;
	}
	.detail .swiper-slide .text .desc{
		margin: 0 .3rem;
		padding: 0;
	}
	.download{
		display: block;
	}
}
@media screen and (min-width: 1025px) and (max-width: 1400px){
	.list{
		width: 1280px;
	}
	.list .item{
		width: 386px;
	}
}