html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
.w-full {
    width: 100%;
}
.container
{
	padding-left: 2rem;
    padding-right: 2rem;
	max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.py-4
{
	padding-top: 1rem;
    padding-bottom: 1rem;
	justify-content: space-between;
	align-items: center;
	display: flex;
}
.flex {
	align-items: center;
    display: flex;
}
a {
    color: inherit;
    text-decoration: inherit;
}
.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
}
.font-bold {
    font-weight: 700;
}
.text-gradient {
    background: linear-gradient(90deg, #165DFF, #69b1ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.md\:flex {
    display: flex;
}
.text-gray-700 {
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.font-medium {
    font-weight: 500;
}
.py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

@media (max-width: 599px) {
.space-x-6 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
}
}
@media (min-width: 600px) {
.space-x-6 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(1.5rem * var(--tw-space-x-reverse));
    margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
}
}


.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}
.border {
    border-width: 1px;
}
.rounded-md {
    border-radius: 0.375rem;
}
.text-primary {
    --tw-text-opacity: 1;
    color: rgb(22 93 255 / var(--tw-text-opacity, 1));
}
.border-primary {
    --tw-border-opacity: 1;
    border-color: rgb(22 93 255 / var(--tw-border-opacity, 1));
}
*, ::after, ::before {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #084bd2;
}
.bg-primary {
    --tw-bg-opacity: 1;
    background-color: rgb(22 93 255 / var(--tw-bg-opacity, 1));
}
.space-x-4 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(1rem * var(--tw-space-x-reverse));
    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}
.text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.py-5 {
    padding-top: .8rem;
    padding-bottom: .8rem;
}
.banner {
	width:100%;
}

.banner img {
	width:100%;
}
.left{
	 display: inline-block;
	 width: 15%;
	 margin: 6% 0 0 10%;
	  border: .01rem solid #b1a8a8;
	  border-radius: 10px;
	  vertical-align: top; 
}

.top{
	 width: 80%;
	 margin: 10% 10% 0 10% ;
}

.left h1{
width: 90%;
margin:2em 5% 1em 5%;	
	text-align:center;
	 padding-bottom:1rem;
}
.left a{
	font-size:1.5rem;
    letter-spacing: .3rem;
	
}
.right{
 display: inline-block;
 width: 65%; 
 margin: 6% 5% 0 3%;
 vertical-align: top; 
}
.top a{
	font-family:Microsoft YaHei;
	letter-spacing: .1rem;
	font-size:1.2rem;
	padding-right:1rem;
	
}

.main{
 width: 90%; 
 margin: 5%;
  background-color: #e8e8e8;
}


@media (max-width: 599px) {
.product{
 display: inline-block;
 margin: 1rem 0.5% .5rem 0.5%;
}
}
@media (min-width: 600px) {
.product{
 display: inline-block;
 width: 23%; 
 margin: 1rem 0.5% .5rem 0.5%;
}
}
.pt{
	padding:5%;	
 background-color: #fff9f9;	
}

@keyframes gradientAnimation {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}
.pt a{
	line-height: 1.2;
 background-image: linear-gradient(90deg, red, blue, indigo,green, red, indigo,blue, violet);
  background-size: 200% 100%; /* 确保渐变足够长以覆盖动画 */
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent; /* 确保文字颜色透明，只显示背景渐变 */
  animation: gradientAnimation 10s infinite linear; /* 应用动画 */
  font-weight: 800;
}




.pt2{
padding:2%;	
text-align:center; 
 background-color: #ff0000;
  border-radius: 1rem;
}

.pt2 a{
    
	color:yellow;
	font-weight: 700;
}


.old-text {
  filter: blur(2px); /* 调整模糊程度 */
}


.pb{
	padding:.5rem 0;
	text-align: center;
}
.pp{
	 position: relative;
background-color: #fff9f9;
text-align: center;	
}
.pp img{
	width:20%;
}
.badge {
   position: absolute;
  top: 0;
  left: 0;
  background-color: red;
  color: white;
  border-radius: 10%; /* 圆形角标 */
  padding: .4rem .4rem;
  font-size: 12px;
}

.pb form{
	display: inline-block;
}

.pm form{
	display: inline-block;
}
.pb button{
	 border: .13rem solid black;
	 border-radius: .3rem;
}

.close-btn {
  position: absolute; /* 绝对定位，相对于最近的相对定位父元素 */
  top: 0px; /* 距离顶部的距离 */
  right: 0px; /* 距离右侧的距离，实现右上角的效果 */
  cursor: pointer; /* 鼠标悬停时显示指针，表示可点击 */
  font-size: 20px; /* 字体大小 */
  font-weight: bold; /* 字体加粗 */
}
#content {
	color:red;
	font-weight: bold;
	letter-spacing: .1rem;
	margin: .6rem .3rem .3rem .3rem;
}
.pm {

	margin: .5rem 0;
	padding: .1rem 0;
	border: .01rem solid #b1a8a8;
	line-height: 1.2;
}

.pm a {	word-wrap: break-word; font-size:.8rem;}

.pm button {
    border: .13rem solid black;
    border-radius: .3rem;
	padding: .12rem;
	margin-left:.2rem;
}

.badge2 {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #a59f9f;
    color: white;
    border-radius: 10%;
    padding: .4rem .4rem;
    font-size: 12px;
}

.pt3 {
    padding: 2%;
    text-align: center;
    background-color:#afafaf;
    border-radius: 1rem;
}
.article {
	margin:6rem 20%;
}

.article a{
	font-family:serif;
	font-size:1.5rem;
	line-height: 1.8;
}

.article h1{
	font-family:serif;
	font-size:2rem;
	line-height: 1.8;
	 text-align: center;
}

.content {
	font-size:1.2rem;
    line-height: 1.2;
	margin:2rem 0;
	letter-spacing: .1rem;
	text-indent: 2rem;
}
th,td{
	padding:.5rem;
}

.pagination {
    width: 85%;
    margin-left: auto;
    margin-right: auto;
    display: -ms-flexbox;
    display: flex;
    padding-left: 0;
    list-style: none;
    border-radius: .25rem;
    text-align: center;
}
.pagination a {
    display: inline-block;
    padding: 5px 10px;
    margin: 0 5px;
    border: 1px solid #ccc;
    text-decoration: none;
    color: #000000;
}
.cz table {
 
    width: 85%;

    border: .2rem dashed #f33fab;
    padding: 1rem;
}

.edit input {
    width: 35%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.edit form{
	 display: inline-block;
}
.edit button {
	 display: inline-block;
    color: #fff;
    background-color: #c224d9;
    border-color: #c224d9;
    padding: .375rem .75rem;
}

.cz tr, caption {
    padding: 1rem 0;
}