/* CSS Document */

.image-link{
	position: relative;
}
.photo-section{
	width:100%;
	max-width: 719px;
	background: rgb(240, 240, 240);
	margin: 0 auto;
	padding-top: 1px;
}
.photo-all-wrapper{
	width: calc(100%-119px);
	max-width: 680px;
	min-height: 700px;
	margin: 0 auto;
	margin-top:10px;
	padding-bottom: 40px;
}
.photo-wrapper{
	display: inline-block;
	width: 30%;
	height: 150px;
	background: white;
	margin: 10px 1.4%;
	padding: 7px;
	vertical-align: text-top;
	overflow: hidden;
}
.photo-style{
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	height: 136px;
	object-fit: cover;
}
.image-mark::after {
	content: "";
	background:url(../images/tick.png);
	width: 25px;
	height: 25px;
	position: absolute;
	top:15px;
	left: -5px;
	color: red;
	font-weight: bold;
}
.download-select{
	display: none;
}
.download-all{
	display: none;
}
.download-cancel{
	display: none;
}
.prev{
	position: absolute;
	left: 50%;
	margin-left: -440px;
	top: 50%;
	font-size:2em;
	color: lightgray;
	z-index: 1046;
	display: none;
}
.next{
	position: absolute;
	left: 50%;
	margin-left: 412px;
	top: 50%;
	font-size:2em;
	color: lightgray;
	z-index: 1046;
	display: none;
}
.prev:hover, .next:hover{
	cursor: pointer;
}
img.mfp-img{
	width: 800px;
}

.photo-titlebox {
	width: calc(100%-139px);
	max-width: 660px;
	min-height: 105px;
	margin: 0 auto;
	padding-bottom: 2px;
	background: rgb(230, 230, 230);
	position: relative;
	margin-top: 20px;
	padding-top: 1px
}

.logout,
.select-btn {
	float: right;
	color: #3198af;
	width: 90px;
	height: 30px;
	line-height: 30px;
	border-radius: 15px;
	background: white;
	border: 1px solid #54abc6;
	margin: 0 7px;
	padding: 0 10px;
	margin-top: 10px;
	margin-right: 15px;
	text-align:center;
	text-decoration:none;
}

.logout {
	width:auto;
}

.download-cancel {
	float: right;
	color: #3198af;
	width: 60px;
	height: 30px;
	line-height: 30px;
	border-radius: 15px;
	background: white;
	border: 1px solid #54abc6;
	margin: 0 7px;
	margin-top: 10px;
	padding: 0 10px;
	text-align:center;
}

.download-all {
	float: right;
	color: #3198af;
	width: auto;
	height: 30px;
	line-height: 30px;
	border-radius: 15px;
	background: white;
	border: 1px solid #54abc6;
	margin: 0 7px;
	margin-top: 10px;
	padding:0 10px;
	text-align:center;
}

.download-select {
	float: right;
	color: #3198af;
	width: auto;
	height: 30px;
	line-height: 30px;
	border-radius: 15px;
	background: white;
	border: 1px solid #54abc6;
	margin: 0 7px;
	margin-top: 10px;
	padding: 0 10px;
	text-align:center;
}

.photo-groupimg {
	position: absolute;
	top: 17px;
	left: 15px;
	width: 70px;
	height: 70px;
	background: white;
	padding: 5px;
	cursor:pointer;
}

.photo-groupimg img {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	height: 60px;
	width: 60px;
	object-fit: contain;
}

.photo-grouptitle {
	width: 50%;
	height: auto;
	margin-left: 100px;
	margin-top: 15px;
	font-size: 1.4em;
	font-family: SimHei;
}

.photo-grouptitle a {
	color:#333;
	text-decoration:none;
}

.photo-grouptime {
	color: gray;
	font-size: 13px;
	margin-left: 100px;
	font-family: SimHei;
	margin-top: -5px;
}
.download-cancel:hover, .download-all:hover, .download-select:hover, .select-btn:hover{
	cursor:pointer;
	background: rgb(245,245,245);
}

@media (max-width:1024px) {
	.photo-section{
		width: 100%;
	}
	.photo-all-wrapper{
		width: 90%;
	}
	.photo-wrapper{
		height: 200px;
	}
	.photo-style{
		height: 185px;
	}
	.photo-titlebox {
		width: 90%;
	}
	.image-mark::after {
		content: "";
		background: url(../images/tick.png);
		width: 25px;
		height: 25px;
		position: absolute;
		top: -5px;
		left: -5px;
		color: red;
		font-weight: bold;
	}
}
@media (max-width:768px) {
	.photo-wrapper{
		height: 156px;
	}
	.photo-style{
		height: 142px;
	}
	.photo-grouptitle {
		width: 42%;
	}
	.image-mark::after {
		content: "";
		background: url(../images/tick.png);
		width: 25px;
		height: 25px;
		position: absolute;
		top: -5px;
		left: -5px;
		color: red;
		font-weight: bold;
	}
}
@media (max-width:612px) {
	.photo-wrapper{
		height: 80px;
		margin: 5px 1.1%;
		padding: 4px;
	}
	.photo-style{
		height: 70px;
	}
	.select-btn {
		float: right;
		color: #3198af;
		width: 50px;
		height: 27px;
		line-height: 27px;
		border-radius: 15px;
		background: white;
		border: 1px solid #54abc6;
		margin: 0 7px;
		padding-left: 7px;
		margin-top: 5px;
		margin-right: 15px;
		font-size: 14px;
	}
	.photo-grouptitle {
		width: 72%;
		margin-top: 38px;
		margin-left: 80px;
	}
	.photo-grouptime {
		margin-left: 80px;
	}
	.photo-groupimg {
		position: absolute;
		top: 40px;
		left: 10px;
		width: 56px;
		height: 56px;
		background: white;
		padding: 3px;
	}
	.photo-groupimg img {
		position: relative;
		top: 50%;
		transform: translateY(-50%);
		height: 50px;
		width: 50px;
		object-fit: contain;
	}
	.download-cancel {
		float: right;
		color: #3198af;
		width: 55px;
		height: 27px;
		line-height: 27px;
		border-radius: 15px;
		background: white;
		border: 1px solid #54abc6;
		margin: 0 5px;
		margin-top: 5px;
		padding-left: 9px;
	}
	.download-all {
		float: right;
		color: #3198af;
		width: 75px;
		height: 27px;
		line-height: 27px;
		border-radius: 15px;
		background: white;
		border: 1px solid #54abc6;
		margin: 0 4px;
		margin-top: 5px;
		padding-left: 4px;
	}
	.download-select {
		float: right;
		color: #3198af;
		width: auto;
		height: 27px;
		line-height: 27px;
		border-radius: 15px;
		background: white;
		border: 1px solid #54abc6;
		margin: 0 4px;
		margin-top: 5px;
		padding-left: 4px;
		padding-right: 4px;
	}
	.image-mark::after {
		content: "";
		background:url(../images/tick.png);
		width: 25px;
		height: 25px;
		position: absolute;
		top:-5px;
		left: -5px;
		color: red;
		font-weight: bold;
	}
}