body {
    /* background-image: url('../pic/bgimg.jpeg');*/
    background-position: center;
    /*background: linear-gradient(to bottom, #94A88F, #94A88F);#9DAC95;*/
    background-color: #90A88A;
    cursor: url('../pic/liuye10.png') 5 5, auto;
    background-size: cover;
    display: flex;
  	align-items: center; /* 居中对齐子元素 */
  	justify-content: space-around; /* 在容器内均匀分布子元素 */
    action: manipulation;

}
/*menubar*/
/* menubar */
*, *:before, *:after {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

#zhuti {
    /* background-image: url('../pic/taotou2.png');*/
    border-radius: 10px;
    padding: 0vw 0px 0px;
    margin-bottom: 0px;
    background-size: contain;
    background-repeat: no-repeat; /* 不重复 */
    position: relative;
    opacity: 1;
}
#hanarange {
    overflow: hidden; /* 添加 overflow 属性 */


}
#taohua {
    display: flex;
    align-items: center; /* 居中对齐子元素 */
    justify-content: space-around; /* 在容器内均匀分布子元素 */
    flex-wrap: nowrap; /* 不换行 */
    width: 100%;
    /* z-index: 2;  设置一个比花瓣更高的 z-index 值 */
    position: relative;


        }
#taohua img {
            width:100%;
            height:auto;
            /* z-index: 2; 设置一个比花瓣更高的 z-index 值 */

        }


.menu {
    display: block;
    overflow: hidden;
    width: 55px; /* 缩小宽度 */
    height: 55px; /* 缩小高度 */
    margin: 20px auto;
    cursor: pointer;
    -webkit-transition: all 0.5s ease-in-out;
            transition: all 0.5s ease-in-out;
    border: 1px solid transparent; /* 靠 */
    border-radius: 50%;
    background-color: #1b2538;
}

.menu div.menubar {
    width: 30px; /* 棒棒宽度 */
    margin: 14px auto; /* 棒棒高度 */
}

.menu div.menubar .bar {
    display: block;
    width: 100%;
    height: 5px; /* 缩小高度 */
    margin-top: 5px; /* 调整上边距 */
    border-radius: 10px; /* 调整圆角 */
    background-color: #ffffff;
}

.menu ul {
    display: none;
    margin: 0;
    padding: 0;
    list-style-type: none;
    -webkit-transition: all 0.5s ease;
            transition: all 0.5s ease;
    text-align: center;
    opacity: 0;
    background-color: rgba(255, 255, 255, 0.15);
}

.menu ul li {
    display: inline-block;
}

.menu ul li a {
    display: inline-block;
    padding: 5px 1em 9px;
    -webkit-transition: all 0.3s ease-in;
            transition: all 0.3s ease-in;
    text-decoration: none;
    color: #1b2538;
    border-bottom: 2px solid transparent; /* 调整边框宽度 */
    height: 40px; /* 缩小高度 */
    line-height: 1.5em; /* 调整行高 */
    font-family: wu-rebirth-menu;
    font-size: 30px; /* 缩小字体大小 */
}
@media screen and (max-width: 767px) {
	.menu ul li a {
    	font-size: 28px; /* 缩小字体大小 */
    	padding: 5px 0.3em 9px; /* 调整内边距 */
	}
    }

.menu ul li a {
    display: flex;
    justify-content: center;
    align-items: center;
}

.menu ul li a:hover {
    color: #ffffff;
    background-color: #1b2538;
}

.menu ul li a:target {
    border-bottom-color: #1b2538;
}

.bar {
    margin-top: 2px; /* 调整上边距 */
    margin-bottom: 2px; /* 调整下边距 */
}

/* 点击时的动效 */
#cp_navimenuid {
    display: none;
}

#cp_navimenuid:checked ~ .menu {
    width: 100%;
    height: 40px; /* 调整高度 */
    border: 1px solid #1b2538;
    border-radius: 8px; /* 调整圆角 */
    background-color: transparent;
}

#cp_navimenuid:checked ~ .menu > ul {
    display: block;
    opacity: 1;
}

#cp_navimenuid:checked ~ .menu > .menubar {
    display: none;
}






/*font*/
@font-face {
  font-family: "wu-rebirth";
  src: url(../font/wu-rebirth.woff2);
}
@font-face {
  font-family: "wu-rebirth-page";
  src: url(../font/wu-rebirth-page.woff2);
}
@font-face {
  font-family: "wu-rebirth-menu";
  src: url(../font/wu-rebirth-menu.woff2);
}
@font-face {
  font-family: "xiaobaga";
  src: url(../font/xiaobaga.woff2);
}
@font-face {
  font-family: "ruanzhu";
  src: url(../font/ruanzhu.woff2);
}
@font-face {
  font-family: "wangsheng";
  src: url(../font/wangsheng.woff2);
}
@font-face {
  font-family: "qifuzi";
  src: url(../font/qifu.woff2);
}
@font-face {
  font-family: "wotou";
  src: url(../font/wotou1.woff2);
}
@font-face {
  font-family: "wotou2";
  src: url(../font/wotou2.woff2);
}

@font-face {
  font-family: "othersall";
  src: url(../font/othersall.woff2);
}
@font-face {
  font-family: "othersall2";
  src: url(../font/othersall2.woff2);
}
@font-face {
  font-family: "othersall3";
  src: url(../font/othersall3.woff2);
}
@font-face {
  font-family: "othersall4";
  src: url(../font/othersall4.woff2);
}
@font-face {
  font-family: "othersall5";
  src: url(../font/othersall5.woff2);
}

@font-face {
  font-family: "beian";
  src: url(../font/beian.woff2);
}
@font-face {
  font-family: "qifulot";
  src: url(../font/qifulot.woff2);
}
@font-face {
  font-family: "price";
  src: url(../font/price.woff2);
}
@font-face {
  font-family: "price2";
  src: url(../font/price2.woff2);
}


#othersfont {
    font-family: othersall,othersall2,othersall3,othersall4,othersall5;
    font-size: 20px;
}

.wotou {
	font-family: wotou,wotou2;
}
.toptext p {
	font-family:"wu-rebirth";
    letter-spacing:0.1em;
    background-color:rgba(255,255,255,0.2);
    color: black;
    margin: 20px 0px;
	/*font-size: 19px;*/
	border-radius: 7px;
	padding: 5px 0px 10px;
}
p {
    letter-spacing:0.1em;
    background-color:rgba(255,255,255,0.2);
    color: black;
    margin: 20px 0px;
	font-size: 20px;
	border-radius: 7px;
	padding: 5px 5px 5px;
}
.wotou p {
	font-family:wotou,wotou2;
}

.wen p {
    font-size: 19px;
}

.ja {
    font-size: 19px;
    margin: 5px 5px;
    transition: opacity 0.7s ease;
}
.cn {
    font-size: 19px;
    margin: 5px 10px;
    transition: opacity 0.7s ease;
}

.hidden {
        opacity: 0;
        }

h2 {
    color:black;
    font-size: 36px;
	font-family:wu-rebirth-menu;
}
h1 {
    font-family:LiSu,SimSun,cursive, Noto Sans CJK, PingFang SC, Lantinghei SC, Microsoft YaHei, sans-serifcursive;
    letter-spacing:0.2em;
    font-size: 52px;
}
h3 {
    color: black;
    font-size: 28px;
}
h4 {
    font-family:wotou,othersall;
    letter-spacing:0.1em;
    color: black;
    font-size: 28px;
}
h5 {
    font-family:othersall;
    letter-spacing:0.1em;
    color: black;
    font-size: 28px;
}
.toutou {
    font-family:qifuzi;
    color: black;
    font-size: 28px;
}
a {
    display: inline-block; /* 使得 text-align 属性生效 */
    text-align: center;
    font-family: cursive, Noto Sans CJK, PingFang SC, Lantinghei SC, Microsoft YaHei, sans-serifcursive;
    font-size: 20px;
    color: #1f3134;
    /*text-decoration: none;  防止链接默认下划线 */
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* 透明，禁用点击高亮效果 */
    tap-highlight-color: rgba(0, 0, 0, 0); /* 透明，禁用点击高亮效果 */
}
table th,td{
    font-size: 20px;
}

.slidecont > p {
    background-color:rgba(255,255,255,0.5);
}
.slideitem > h2 {
    font-family: 'klee',sans-serif;
    color:#1f3134;
}
.cp_pagination > a {
    font-family: 'klee','Hiragino Mincho ProN',sans-serif;
    /* font-family: 'Snell Roundhand',sans-serif; */
}
/*center*/
.center {
    text-align: center;
}
.centerteshu {
    text-align: center;
    margin-bottom: 0px;
}

/*header*/
header {
    width:100%;
    height:262px;
    padding:5px 0;
    background-image:url('../pic/unnamed1.jpg');
    background-position:center bottom;
    background-size:cover;
}

#textnavi {
    position: relative;
    top:20px;
    width:100%;
    height:auto;
    padding:5px 0;
    background-image:url('../pic/innerbg.webp');
    background-size: cover; /* 使背景图片充满整个元素 */
  	background-position: left top; /* 在水平和竖直方向上居中 */
  	width: 100%; /* 确保元素充满父容器 */
    background-repeat: no-repeat;
    line-height:2;
    border-radius: 5px;
}
#textnavitext li a {
    font-size: 19px; /* 设置<li>元素的字体大小 */
}


#maxwidth {
    max-width:800px;margin:0 auto;
    min-width :240px;margin:0 auto;
}

/* Large screens */
@media (min-width: 2000px) {
    #maxwidth {
        max-width: 900px;
    }
}
#videos {
    max-width:240px;margin:0 auto;
}
/*background*/

#mydiv {
	cursor: url('../pic/bang2.webp') 5 5, auto;
	user-select: none;
    action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* 透明，禁用点击高亮效果 */
    tap-highlight-color: rgba(0, 0, 0, 0); /* 透明，禁用点击高亮效果 */
    margin-top: 0px;
}
#mydiv:active {
	cursor: url('../pic/bang3.webp') 5 5, auto;
	user-select: none;
    action: manipulation;

}
.jisi {
	cursor: pointer;
	width: 18%; /* 或者根据需要调整图片大小 */
    height: auto; /* 保持宽高比 */
    transition: opacity 1s ease-in-out; /* 添加过渡效果，1秒钟内逐渐改变透明度，缓入缓出 */
    border-radius: 15px;
}
@media (max-width: 600px) {
    .jisi {
        width: 25%; /* 或者根据需要调整图片大小 */
        height: auto; /* 保持宽高比 */
    }
}

.jisibig {
    cursor: pointer;
    width: 30%; /* 或者根据需要调整图片大小 */
    height: auto; /* 保持宽高比 */
    transition: opacity 1s ease-in-out; /* 添加过渡效果，1秒钟内逐渐改变透明度，缓入缓出 */
    border-radius: 15px;
}
@media (max-width: 600px) {
    .jisibig {
        width: 40%; /* 或者根据需要调整图片大小 */
        height: auto; /* 保持宽高比 */
    }
}

.btn {
	cursor: pointer;

}
/*bgm*/
audio {
       width:100%;
       height:auto;
       margin:10px;
  
}
#jaAudio {
       width:100%;
       height:auto;
       margin:0px;
       position: fixed;
       top: 90%;
       left: 50%;
       transform: translateX(-50%); /* 水平平移，确保元素居中 */
       z-index: 9;
}

#footer {
    margin: 50px 0px 40px;
    text-align:center;
    font-family: ruanzhu;
    font-size: 20px;
}

/*works*/
.cp_accordionslide08 {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
background-color: rgba(255,255, 255, 0.15);
}
.cp_accordionslide08:hover .slideitem {
width: 20%;
}
.cp_accordionslide08 .slideitem {
position: relative;
overflow: hidden;
width: 25%;
height: 60vh;
-webkit-transition: width 0.5s ease;
transition: width 0.5s ease;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
color: #ffffff;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.cp_accordionslide08 .slideitem:nth-child(1) {
background-image: url('../pic/shu.PNG');
}
.cp_accordionslide08 .slideitem:nth-child(2) {
background-image: url('../pic/he.PNG');
}
.cp_accordionslide08 .slideitem:nth-child(3) {
background-image: url('../pic/guo.PNG');
}
.cp_accordionslide08 .slideitem:nth-child(4) {
background-image: url('../pic/mei.PNG');
}

.cp_accordionslide08 .slideitem:before,
.cp_accordionslide08 .slideitem:after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: '';
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.cp_accordionslide08 .slideitem:after {
-webkit-transition: opacity 0.5s ease;
transition: opacity 0.5s ease;
opacity: 1;
background: rgba(0, 0, 0 ,0.2);
}
.cp_accordionslide08 .slideitem:before {
z-index: 1;
-webkit-transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
transition: opacity 0.5s ease, transform 0.5s ease;
transition: opacity 0.5s ease, transform 0.5s ease, -webkit-transform 0.5s ease;
-webkit-transform: translate3d(0, 0, 0) translateY(50%);
transform: translate3d(0, 0, 0) translateY(50%);
opacity: 0;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), color-stop(75%, #000000));
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, #000000 660%);
background:         linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000000 660%);
}
.cp_accordionslide08 .slideitem:hover {
width: 60% !important;
}
.cp_accordionslide08 .slideitem:hover:after {
opacity: 0;
}
.cp_accordionslide08 .slideitem:hover:before {
-webkit-transition: opacity 1s ease, -webkit-transform 1s ease 0.25s;
transition: opacity 1s ease, -webkit-transform 1s ease 0.25s;
transition: opacity 1s ease, transform 1s ease 0.25s;
transition: opacity 1s ease, transform 1s ease 0.25s, -webkit-transform 1s ease 0.25s;
-webkit-transform: translate3d(0, 0, 0) translateY(0);
transform: translate3d(0, 0, 0) translateY(0);
opacity: 1;
}
.cp_accordionslide08 .slideitem:hover .slidecont {
-webkit-transition: all 0.75s ease 0.5s;
transition: all 0.75s ease 0.5s;
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
.cp_accordionslide08 .slideitem h2 {
font-size: 1.4em;
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
-webkit-transition: all 0.75s ease;
transition: all 0.75s ease;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
white-space: nowrap;
}
.cp_accordionslide08 .slideitem h2::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: '';
}
.cp_accordionslide08 .slideitem:hover h2 {
top: 2%;
}
.cp_accordionslide08 .slidecont {
position: relative;
z-index: 1;
top: 10%;
margin: 0 1.618em;
-webkit-transform: translate3d(0, 0, 0) translateY(25px);
transform: translate3d(0, 0, 0) translateY(25px);
text-align: center;
opacity: 0;
}
@media only screen and (max-width:768px) {
.cp_accordionslide08 {
display: block;
}
.cp_accordionslide08:hover .slideitem {
width: 100%;
height: 20vh;
}
.cp_accordionslide08 .slideitem {
width: 100%;
height: 20vh;
}
.cp_accordionslide08 .slideitem:hover {
width: 100% !important;
height: 100vh !important;
}
.cp_accordionslide08 .slideitem h2 {
top: 35%;
}
}

/*pagenavi*/
nav.cp_navi *, nav.cp_navi *:after, nav.cp_navi *:before {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
nav.cp_navi a {
	text-decoration: none;
}
nav.cp_navi {
	margin: 1em 0;
	text-align: center;
}
.cp_navi .cp_pagination {
	display: inline-block;
	height: 30px;
	margin-top: 2em;
	padding: 0 8px;
	border-radius: 35px;
	background-color: rgba(255,255,245,0.25);
}
.cp_navi .cp_pagenum {
	font-size: 1.2em;
	line-height: 30px;
	display: block;
	float: left;
	padding: 0 15px;
	transition: 400ms ease;
	letter-spacing: 0.1em;
	color: #595959;
}

.cp_navi .cp_pagenum:hover,
.cp_navi .cp_pagenum.current {
	color: #ffffff;
	background-color: #1f3134;
}
.cp_navi .cp_pagenum.prev:hover,
.cp_navi .cp_pagenum.next:hover {
	color: #1f3134;
	background-color: transparent;
}


/*textnavi*/



.grid-containertop {
	display: flex;
  	align-items: center; /* 居中对齐子元素 */
  	justify-content: space-around; /* 在容器内均匀分布子元素 */
  	flex-wrap: nowrap; /* 不换行 */
  	width: 100%;
    /*  z-index: 2; 设置一个比花瓣更高的 z-index 值 */


		}
.grid-containertop img {
			width:100%;
			height:auto;
            border: 10px;
            /* z-index: 2; 设置一个比花瓣更高的 z-index 值 */

		}



/* 在小屏幕上的调整 */
@media screen and (max-width: 600px) {
    .grid-containertop img {
        width: 100%; /* 充满屏幕宽度 */
        height: auto;

    }
}



.grid-container {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			grid-gap: 20px 10px;
			justify-content: center;
			align-content: center;
			justify-items: center; /* 新添加的 */
			align-items: center; /* 新添加的 */

		}

		.grid-container div {
			text-align: center;
			
		}

		.grid-container img {
			max-width: 100%;
			height: auto;
            border-radius: 15px;
		}
		.grid-container p {
			font-family:cursive, Noto Sans CJK, PingFang SC, Lantinghei SC, Microsoft YaHei, sans-serifcursive;
    letter-spacing:0.1em;
    background-color:rgba(255,255,255,0.2);
    color: black;
    margin: 30px;
	font-size: 20px;
		}
.grid-container1 {
			display: grid;
			grid-template-columns: repeat(1, 1fr);
			grid-gap: 0px;
			justify-content: center;
			align-content: center;
			justify-items: center; /* 新添加的 */
			align-items: center; /* 新添加的 */
			margin-bottom: 10px;
			margin-top: 10px;
			
			
		}

.grid-container2 {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			grid-gap: 0px 0px;
			justify-content: center;
			align-content: center;
			justify-items: center; /* 新添加的 */
			align-items: center; /* 新添加的 */
			margin: 20px;
			grid-row-gap: 50px; /* 调整这里的值，设置元素间的垂直方向距离 */
            @media (max-width: 600px) {
                grid-row-gap: 0px;
            }			
		}

		.grid-container2 div {
			text-align: center;
			
		}

		.grid-container2 img {
			max-width: 100%;
			max-height: 100%;
			height: auto;
		}
		.grid-container2 p {
			font-family:cursive, Noto Sans CJK, PingFang SC, Lantinghei SC, Microsoft YaHei, sans-serifcursive;
    letter-spacing:0.1em;
    background-color:rgba(255,255,255,0.2);
    color: black;
    margin: 30px;
	font-size: 20px;
		}

.grid-container2-others {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-gap: 0px 0px;
            justify-content: center;
            align-content: center;
            justify-items: center; /* 新添加的 */
            align-items: center; /* 新添加的 */
            margin: 0px;
            grid-row-gap: 6px; /* 调整这里的值，设置元素间的垂直方向距离 */
            @media (max-width: 600px) {
                grid-row-gap: 6px;
            }           
        }

.grid-container3 {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			grid-gap: 30px;
			justify-content: center;
			align-content: center;
			justify-items: center; /* 新添加的 */
			align-items: center; /* 新添加的 */
			
		}				
.bordered {
  border: 2px;
  border-radius: 15px;
}
@media (max-width: 768px) {
  .bordered {
    border-width: 1px;
    border-radius: 5px;
  }
}
/**/
figure {
    display: flex;
    flex-direction: column;
    align-items: center;
	margin-top:25%;

  }
.copy-icon {
        cursor: pointer;
        margin-left: 5px;
    }
.yiban {
	display: flex;
    flex-direction: column;
    align-items: center;
	margin-top:0%;
}
.figure img{
	width: 20px;
	height: auto;
}
.puti {
    display: flex;
    flex-direction: column; /* 将子元素垂直排列 */
    align-items: center; /* 在主轴上居中对齐 */
    background-image: url(../pic/jinputi.webp);
    background-size: 90%;
    background-repeat: no-repeat;
    background-position: center center;
    margin-top: 0px;
    margin-bottom: 0px;
}


.puti figcaption {
    text-align: center;
    font-family: cursive, 'Noto Sans CJK', 'PingFang SC', 'Lantinghei SC', 'Microsoft YaHei', sans-serif;
    font-size: 22px;
    color: #1f3134;
    bottom: 0; /* 将figcaption固定在父容器的底部 */
    width: 100%; /* 让figcaption占满父容器的宽度 */
    margin-top: 0px;
}

.puti img {
    border-radius: 30% 30%;
    width: 70%; /* 让图片占据容器的100%宽度 */
    min-width: 110px;
    margin-top: 40px;
    margin-bottom: 0px;
}

@media only screen and (max-width: 600px) {
    .puti figcaption{
    	font-size: 19px;
    }
}
/*下面是搜索框*/


form {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

input[type="text"] {
  border: 1px solid #ccc;
  background-color: #f8f8f8;
  border-radius: 5px;
  font-family: cursive, Noto Sans CJK, PingFang SC, Lantinghei SC, Microsoft YaHei, sans-serifcursive;
  font-size: 24px;
  width: 20%;
  height: 50px;
  outline: none;
  box-shadow: 0 0 5px #9ecaed;
  padding: 0 10px;
}

button[type="submit"] {
  background-color: #1b2538;
  border: none;
  border-radius: 5px;
  font-family: cursive, Noto Sans CJK, PingFang SC, Lantinghei SC, Microsoft YaHei, sans-serifcursive;
  color: #fff;
  font-size: 24px;
  padding: 0 20px;
  height: 50px;
  margin-left: 10px;
  cursor: pointer;
}
  
.highlight {
    background-color: #FFF064;
	border-radius: 10px;
}





/*new*//*new*//*new*//*new*//*new*//*new*//*new*//*new*//*new*//*new*//*new*//*new*/
.goToPage {
  font-family: Arial, sans-serif;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 7vh; 
  flex-direction: row; /* 保持水平排列 */
}
.goToPage button {
  background-color: #1b2538;
  border: none;
  border-radius: 5px;
  color: #fff;
  font-size: 20px;
  height: 35px;
  margin-left: 10px;
  cursor: pointer;
  display: block;
  font-family: "wu-rebirth-page";
  font-size: 20px;
  padding-bottom: 3px;
}
.goToPage input {
  padding: 0px 10px;
  display: block;
  height: 35px;
  font-family: "wu-rebirth-page";
  font-size: 20px;
  padding-bottom: 3px;
}

/*hana*/
.petal-container{
    position: relative;
    z-index: 3;
    pointer-events: none;
}

.petals {
  position: absolute;
  pointer-events: none;
  animation: fall 40s linear infinite;  
}

/* .petal-base 是通用的花瓣样式 */
.petal-base {
  position: absolute;
  width: 22px; /* 调整为图片的实际宽度 */
  height: 22px; /* 调整为图片的实际高度 */
  animation: fall 40s linear infinite;
  top: 24px; /* 调整为适当的值，使花瓣出现在 #zhuti 上方 */
  will-change: transform, opacity;
}
}

/* 添加不同的类，分别对应不同的图片 */
.petal1 {
  background: url('../pic/taoluo.png') no-repeat center center;
  background-size: cover;
}

.petal2 {
  background: url('../pic/taoluo2.png') no-repeat center center;
  background-size: cover;
}

.petal3 {
  background: url('../pic/taoluo3.png') no-repeat center center;
  background-size: cover;
}

.petal4 {
  background: url('../pic/taoluo4.png') no-repeat center center;
  background-size: cover;
}
.petal5 {
  background: url('../pic/taoluo.png') no-repeat center center;
  background-size: cover;
}



/* 在宽屏时增大花瓣的大小 */
@media screen and (min-width: 600px) {
  .petal {
    width: 36px; /* 根据需要调整大小 */
    height: 36px; /* 根据需要调整大小 */
  }
}

@keyframes fall {
  from {
    transform: translateY(-5vw) translateX(0) rotate(0deg);
    opacity: 0.0;
  }
  5% {
    opacity: 0.5; /* 在动画的一半位置，透明度为 0.5 */
  }
  10% {
    opacity: 0.8; /* 在动画的一半位置，透明度为 0.5 */
  }
  20% {
    opacity: 0.9; /* 在动画的一半位置，透明度为 0.5 */
  }
  85% {
    opacity: 0.8; /* 在动画的一半位置，透明度为 0.5 */
  }
  90% {
    opacity: 0.6; /* 在动画的一半位置，透明度为 0.5 */
  }
    95% {
    opacity: 0.2; /* 在动画的一半位置，透明度为 0.5 */
  }
  to {
    transform: translateY(200vh) translateX(-40vw) rotate(180deg);
    opacity: 0.0;
  }
}



/*hana*/

/*logo*/
#logo {
	display: flex;
	flex-direction: column; /* 设置主轴方向为竖直方向 */
	align-items: center; /* 元素在水平方向上居中 */
  	justify-content: center; /* 元素在竖直方向上居中 */

}

#logo img{
	width: 85%;
  	height: auto;  	
    border-radius: 10px;
}
@media only screen and (max-width: 600px) {
    #logo img {
        width: 100%; /* 或者你可以根据需要调整放大倍数 */
    }
}

#hiddenTable {
  display: block;
  max-height: 0;
  overflow: hidden;
  transition: max-height 2s ease; /* 使用 max-height 实现平滑过渡 */
  height: 160%; /* 设置为适当的高度 */
}

table {
  width: 80%;
  border-collapse: collapse;

  margin-left: auto; /* 让表格居中 */
  margin-right: auto; /* 让表格居中 */
  border-radius: 10px;
  border: none; /* Hide the outer border of the table */
  font-size: 20px;
  margin-top: 20px;
}

/* 设定特定类 img 元素的最大宽度 */
.workimg {
    max-width: 320px; /* 将具有 img-class 类的图像的最大宽度设置为500像素 */
    height: auto;     /* 自动调整高度，保持图像的纵横比 */
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center; /* 居中对齐文本 */
  color: black; 
}
th {
	background-color:#1b2538;
	color: #fff;
	font-weight: normal; /* 确保字体粗细为正常（非加粗） */
}
#hiddenTableButton {
  background-color: #1b2538;
  border: none;
  border-radius: 5px;
  color: #fff;
  font-size: 19px;
  height: 31px;
  margin-left: 10px;
  margin-right: 10px;
  cursor: pointer;
  font-family: "price";
  padding-bottom: 2px;
}
.copy-icon {
  background-color: #1b2538;
  border: none;
  border-radius: 5px;
  color: #fff;
  font-size: 19px;
  height: 31px;
  margin-left: 10px;
  margin-right: 10px;
  cursor: pointer;
  font-family: "price2";
  padding-bottom: 2px;
  padding-left: 5px;
  padding-right: 5px;
}
/*fade*/
#fadeContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column; /* 新增：垂直方向排列子元素 */
  background-image: url(../pic/hetou.webp);
  background-repeat: no-repeat; /* 不重复 */
  background-size: cover;
  padding: 30px 10px 135px;
  border-radius: 10px;
  margin-bottom: 40px;
}

#fadeinputText {
  padding: 10px;
  font-size: 18px;
  margin: 0px 20px 10px;
  text-align: left;
  width: 60%; /* 设置宽度 */
  height: 200px; /* 设置高度 */
  border-radius: 10px;
}

/* 移动端样式 */
@media only screen and (max-width: 600px) {
  #fadeinputText {
    width: 80%;
    height: 150px;
  }
}

#fadeButton {
  background-color: #1b2538;
  border: none;
  border-radius: 5px;
  color: #fff;
  font-size: 20px;
  height: 36px;
  margin-left: 10px;
  margin-right: 10px;
  cursor: pointer;
  font-family: "wu-rebirth-page";
  padding-bottom: 4px;
}

/*mbtn*/
#mBtn {
    position: fixed;
    top: 77%;
    right: 30px;
    background-color: #d3a243;/*黄色*/
    color: #fff;
    border: none;
    border-radius: 10px; /* 更大的圆角 */
    padding: 5px; /* 更大的内边距 */
    font-size: 24px; /* 更大的字体大小 */
    cursor: pointer;
    width: 45px; /* 等宽 */
    height: 80px; /* 等高 */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 999; /* 提高堆叠顺序 */
    box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.3); /* 阴影属性 */
    font-family: wu-rebirth-menu;
}
#mBtn b {
    color: white; /* 设置表情符号的颜色为红色 */
  }

#mBtn:hover {
    background-color: #d3a243; /* 鼠标悬停时更深的蓝色 */
}

/* 当用户滚动距离超过20px时显示按钮 */
body {
    scroll-behavior: smooth; /* 平滑滚动效果 */
}

/* 滚动时添加类以显示按钮 */
.show-btn {
    display: block !important;
}

/* 移动端样式调整 */
@media screen and (max-width: 767px) {
    #mBtn {
        display: block !important;
    }
}


/*slide*/
.carousel-container {
  position: relative;
  overflow: hidden;
  max-width: 400px; /* Adjust the max-width as needed */
  margin: 0 auto; /* Center the container horizontally */
}

.carousel-slide {
  display: flex;
  transition: transform 1s ease-in-out;
}

.carousel-slide {
  flex: 0 0 100%;
  box-sizing: border-box;
  text-decoration: none;
}

.carousel-slide img {
  width: 100%;
  height: auto;
  display: block;
}

.prev-btn,
.next-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  line-height: 1; /* 垂直居中 */
  font-size: 60px;
  padding: 0px 0px 10px;
  cursor: pointer;
  outline: none;
  text-align: center;
}

.prev-btn {
  left: 10px;
}

.next-btn {
  right: 10px;
}

/* Add this CSS code to your existing styles */


.carousel-slide img {
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  border-radius: 10px;
}

.test{
	border-radius: 30px;
}

/*slide*/












iframe {
  width: 100%;
  height: 100%;
  border: none; /* 移除iframe默认边框 */
  margin: 0;
  padding: 0; /* 移除padding */
  overflow: hidden; /* 隐藏可能的滚动条 */
  aspect-ratio: 16 / 9; /* 设置宽高比，可根据实际视频比例调整 */
  border-radius: 10px;

}




 .biggercatPawcontainer {
      position: absolute;
      text-align: center; /* 居中显示 */
      display: block;
    }

    .catPawcontainer {
      position: relative;
      width: 100px; /* 调整容器的宽度 */
      height: 100px; /* 调整容器的高度 */
    }

    #catPaw, #humanHand {
      position: absolute;

      width: 100%; /* 确保图片充满容器 */
      height: 100%;
    }

    #humanHand {
      cursor: pointer; 

}





/* styles.css */

#qifu {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: qifuzi;
}
#click-count {
  font-family: qifulot,qifuzi;
}

.qifu-text {
  position: absolute;
  bottom: -30px;
  opacity: 1;
  font-size: 28px;
}

/*map*/
#map {
  height: 350px;
  width: auto;
  display: block;
  margin: 30px 40px;
}


/*map maker*/
.custom-content-marker {
  position: relative;
  width: 118px;
  height: 40px;
  top: 35px;
  right: 42px;
  z-index: 2; /* 提高堆叠顺序 */
}

.custom-content-marker img {
  width: 98%;
  height: 98%;
}

.beian {
    font-family: beian;
    font-size: 17px;
    margin-top: 3px;
    margin-bottom: 2px;
}