*{
				padding: 0;
				margin: 0;
			}	
			img {
			  vertical-align: middle;
			}
			
			.menu{
					line-height: 60px;
					padding: 10px;
					margin: auto;
					background-color: rgba(112,69,53,1.00);
					color: aliceblue;
				}
				.menu>ul {
			    line-height: 40px;
			    margin-left: 200px;
			    padding: 0;
			    text-align:center;
			}
			
				.menu li {
			  display: inline-block;
			  margin-right: 60px;
			  width: 100px;
			  height: 40px;
			  /* Other style properties */
			  box-shadow: none; /* First clear the original border style of the li tag */
			}
				.menu li a {
			  		color: aliceblue;
					text-decoration: none;
			}
				.menu li:hover {
			 
			  box-shadow: inset 0 0 0 1px #ffffff, /* Inner white dotted border */
			              inset 0 0 0 1px #000000; /* Outer black solid border */
			}
				.no-boxshadow:hover{
				box-shadow:0 0 0 transparent!important;
			} 
			
			
			/* Mouseover style */
			.search-box:hover input[type="text"] {
			  box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
			}
			
			.search-box:hover button i {
			  color: #333;
			}
			/*Drop-down menu*/
			
			.menu li:hover .droplist{
			            display: block;  
			        }

			/*text scroll*/
			.scrollbox {
			  overflow: hidden;
			  position: relative;
			  background-color: rgba(166, 135, 64, 1.00);
			}
			
			.content {
			  position: absolute;
			  
			
			  top: 50%;
			  animation: scrollup 4s linear infinite forwards;
			}
			@keyframes scrollup {
			  from {
			    transform: translateY(0);
			  }
			  to {
			    transform: translateY(-100%);
			  }
			}
			
			/*end of scroll*/
			
			.container {
			  position: relative;
			}
			
			.container img {
			  display: block;
			 width:100%;
			  height: auto;
			}
			/*Picture mask*/
			.mask {
			  position: absolute;
			  top: 0;
			  left: 0;
			  width:100%;
			  height: 100%;
			  background-color: rgba(0, 0, 0, 0.5);
			  visibility: hidden;
			  opacity: 0;
			  transition: visibility 0s, opacity 0.5s ease-in-out;
			}
			
			.container:hover .mask {
			  visibility: visible;
			  opacity: 1;
			}
			.mask p {
			  color: #fff;
			  font-size: 1.2rem;
			  text-align: center;
			  position: absolute;
			  top: 50%;
			  left: 50%;
			  transform: translate(-50%, -50%);
			}

			/*The picture slides out the text introduction from the left*/
			.img-container {
			    position: relative;
			    overflow: hidden;
			}
			
			.intro-container {
			  position: absolute;
			  left: 0; /* The initial position is the left side of the picture */
			  bottom: 0;
			  background-color: rgba(0, 0, 0, 0.8);
			  color: #fff;
			  z-index: 0;
			  width: 100%;
			 height: 30%;
			  transform: translateX(-100%); /* Invisible initially, pan 100% to the left */
			   transition: transform 0.3s ease-in-out, opacity 0.5s ease-in-out; /* Add transition attribute */
			  opacity: 0;
			  overflow: hidden;
			}
			
			.img-container:hover .intro-container {
			  transform: translateX(0); /* On mouseover, pan right 100% */
			  opacity: 1;
			}
			
			/*The text introduction slides out from the bottom of the picture*/
			.img-container2 {
			    position: relative;
			    overflow: hidden;
			}
			
			.intro-container2 {
			  position: absolute;
			  bottom: 0;
			  background-color: rgba(0, 0, 0, 0.8);
			  color: #fff;
			  width: 100%;
				height: 40%;
			  transform: translateY(100%); /* Invisible initially, pan down 100% */
			   transition: transform 0.3s ease-in-out, opacity 0.5s ease-in-out; /* Add transition attribute */
			  opacity: 0;
			  overflow: hidden;
			}
			
			.img-container2:hover .intro-container2 {
			  transform: translateY(0); /* On mouseover, pan right 100% */
			  opacity: 1;
			}
			.grid1{
				padding-bottom: 160px;
			}
			.grid1>div{
				overflow: hidden;
			}
			.grid1>div img{
			width: 100%;
				height: 100%;
				object-fit: cover;
			}
			.bottom{
				background-color: #ccb562;
			}