@charset "UTF-8";
#page_wrapper {
	&.res {
		width:100%;
		padding:0;
		overflow:clip;
	}
	#page_10thmsg {
		.contents {
			width:calc(100% - 100px);
			max-width:1160px;
			margin:0 auto;
			position:relative;
		}
		li {
			list-style:none;
		}
		#mv {
			.wrap {
				background-color:#f3f3f4;
				.contents {
					max-width:2000px;
					width:100%;
					img {
						display:block;
						width:100%;
						height:475px;
						object-fit:cover;
					}
				}
			}
		}
		#anniversary {
			.wrap {
				padding:6em 0 10em;
				.contents {
					h2 {
						width:80%;
						margin:0 auto 8em;
					}
					.search_box {
						width:75%;
						margin:0 auto 4em;
						position:relative;
						.submitbtn {
								position:absolute;
								z-index:2;
								top:2px;
								left:2px;
								height:70px;
								width:3em;
								opacity:0;
								button {
									width:100%;
									height:100%;
								}
						}
						.search-filter-input-text {
							border:2px solid #524C3F;
							border-radius:37px;
							padding:0 1em;
							.search-filter-icon {
								padding:0;
								margin:0;
								svg {
									width:2em;
									height:2em;
									padding:0;
									margin:0;
								}
							}
							input {
								height:70px;
							}
						}
					}
					#msgbox {
						margin-bottom:4em;
					}
					.pagenation {
						button {
							font-size:1.4em;
							font-weight:600;
							border:none;
							background-color:#71a9b0;
							color:#FFFFFF;
							width:12em;
							height:2.4em;
							border-radius:1.2em;
							margin:0 auto;
						}
					}
					.contents_inner {
						display:grid;
						grid-template-columns:repeat(3,1fr);
						grid-gap:2.5em 4%;
						&:not(:last-child) {
							margin-bottom:2.5em;
						}
						li {
							&.open {
								max-height:100%;
								padding-bottom:3.5em;
								&::before {
									opacity:0;
								}
								.btn {
									.more {
										display:none;
									}
									.close {
										display:grid;
										img {
											transform:translateY(-.1em) rotate(-90deg);
										}
									}
								}
							}
							background-color:#fcf7f4;
							padding:1.5em;
							transition:.3s;
							max-height:29.5em;
							overflow:hidden;
							position:relative;
							&::before {
								content:'';
								display:block;
								position:absolute;
								left:0;
								bottom:0;
								z-index:1;
								width:100%;
								height:7em;
								background: rgba(252, 247, 244, 0.1);
								background: linear-gradient(0deg,rgba(252, 247, 244, 1) 40%, rgba(252, 247, 244, 0) 100%);
								transition:.3s;
								pointer-events:none;
							}
							.img {
								img {
									display:block;
									width:100%;
/* 									aspect-ratio:1.4; */
									aspect-ratio:1;
									object-fit:cover;
								}
							}
							h3 {
								font-size:1em;
								font-weight:600;
								padding-top:1.33em;
								margin-bottom:.5em;
								display:flex;
								flex-wrap:wrap;
								.dname {
									font-size:1.4em;
								}
								.breed {
									font-size:.8em;
								}
							}
							p {
								height:100%;
							}
							.btn {
								display:grid;
								justify-content:end;
								position:absolute;
								z-index:2;
								right:1.5em;
								bottom:1em;
								span {
									color:#71a9b0;
									font-weight:600;
									display:grid;
									grid-template-columns:auto 1em;
									grid-column-gap:.33em;
									align-items:center;
									justify-self:end;
									cursor:pointer;
									&.close {
										display:none;
									}
								}
							}
						}
					}
				}
			}
		}
	}
}


@media (max-width: 1024px) {
	
	#page_wrapper {
		#page_10thmsg {
			.contents {
				width:calc(100% - 60px);
			}
		}
	}
	
}


@media (max-width: 768px) {

	#page_wrapper {
		#page_10thmsg {
			.contents {
				width:84%;
			}
			#mv {
				.wrap {
					background-color:#f3f3f4;
					.contents {
						max-width:100%;
						img {
							width:100%;
							height:auto;
						}
					}
				}
			}
			#anniversary {
				.wrap {
					padding:4em 0 8em;
					.contents {
						h2 {
							width:90%;
							margin:0 auto 4em;
						}
						.search_box {
							width:100%;
							margin:0 auto 4em;
							.submitbtn {
									height:40px;
							}
							.search-filter-input-text {
								border:2px solid #524C3F;
								border-radius:22px;
								padding:0 .66em;
								.search-filter-icon {
									svg {
										width:1.6em;
										height:1.6em;
									}
								}
								input {
									height:40px;
									&::placeholder {
										font-size:.7em;
									}
								}
							}
						}
						#msgbox {
							margin-bottom:3em;
						}
						.pagenation {
							button {
								width:11em;
							}
						}
						.contents_inner {
							grid-template-columns:repeat(2,1fr);
							grid-gap:1.5em 4%;
							margin:0 -4%;
							width:calc(100% + 8%);
							&:not(:last-child) {
								margin-bottom:1.5em;
							}
							li {
								padding:1.25em;
								max-height:20em;
								.img {
									img {
										display:block;
										width:100%;
										aspect-ratio:1.4;
										object-fit:cover;
									}
								}
								h3 {
									font-size:.9em;
									padding-top:1em;
									.dname {
										font-size:1.3em;
									}
									.breed {
										font-size:.9em;
									}
								}
								p {
									line-height:1.5;
								}
							}
						}
					}
				}
			}
		}
	}
	
}