@charset "gb2312";
@import "Noto Serif SC.css";
*{ margin:0px; padding:0px; border:0; }
body { -webkit-text-size-adjust: 100%;}
html,body {width:100%; height:100%; margin:0px; padding:0;  font:16px/1.5 'Noto Serif SC','Microsoft YaHei', arial, \5FAE\8F6F\96C5\9ED1,  'Hiragino Sans GB', sans-serif;  background:url("../images/bg1.jpg") center center repeat #31d6a0;  }
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,img,button {border:0;  padding:0; margin:0; font-weight:normal;font-style:normal; } 
li{list-style-type:none;list-style:none;}
img{vertical-align:top;border:0;}
h1,h2,h3,h4,h5,h6,p,em,i,b,span { margin:0; padding:0; font-weight:normal; font-style:normal;}
ol,ul {list-style:none;}
address,cite,code,th {font-weight:normal;font-style:normal;}
img:hover { opacity:1; filter: alpha(opacity=100); }
code, kbd, pre, samp { font-family: courier new, courier, monospace; }
small { font-size: 12px; }
legend { color: #000; }
fieldset, img { border: 0; }
button, input, select, textarea { font-size: 100%; }
.fl { float:left; }
.fr { float:right; }
a { color:#46372b; text-decoration:none; }
a:hover{ color:#b12530; text-decoration:none;}
.cl { clear:both;}
div,ul,li,h1,h2,h3,h4,h5,h6,dl,dd,dt,p,i,em,b,span,td,tr,font,strong,input,textarea  { box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; }



.floatdiv { width: 95px; height: 116px; background:url(../images/pyx2.png) center center no-repeat; background-size: cover;  position: absolute;z-index: 999;}

/*input字体*/
:-moz-placeholder { color: #999999;}
::-moz-placeholder { color: #999999;}
input:-ms-input-placeholder,textarea:-ms-input-placeholder { color: #999999;}
input::-webkit-input-placeholder,textarea::-webkit-input-placeholder { color: #999999;}

select {
/*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/
border: solid 1px #d9d9d9; text-indent: 1em;
/*很关键：将默认的select选择框样式清除*/ 
appearance: none; color: #999999;  -moz-appearance: none;  -webkit-appearance: none;
/*在选择框的最右侧中间显示小箭头图片*/
background: url(http://www.motus.com.cn/cn/images/selectarr.png) no-repeat scroll 95% center transparent;
/*为下拉小箭头留出一点位置，避免被文字覆盖*/
padding-right: 14px;
}
/*清除ie的默认选择框样式清除，隐藏下拉箭头*/
select::-ms-expand { display: none;}


.reveal { opacity:0; transform:translateY(50px);transition:opacity .7s ease,transform .7s ease; }
.reveal.in {opacity:1; transform:none}


.header { width:100%; margin:0 auto; height:100%;  overflow:hidden; position:relative; background: url(../images/header.jpg) center top no-repeat;  background-size: cover;   }

.logo { width:1200px; left:50%; margin-left:-600px; position:absolute; top:7vh; z-index: 8;  height:7.5vh; -webkit-animation:logo .5s ease .2s backwards; animation:logo .5s ease .2s backwards;}
@keyframes logo {
0% { -webkit-transform: translateX(150px); opacity:0}
100% { -webkit-transform: translateX(0); opacity:1 }
}
@-webkit-keyframes logo {
0% { -webkit-transform: translateX(150px); opacity:0}
100% { -webkit-transform: translateX(0); opacity:1 }
}
.logo img { max-height: 100%;}


.tit { width:1200px; left:50%; margin-left:-600px;  position:absolute; top:12vh; height:50vh;  z-index: 8;  text-align: center; -webkit-animation:tit 1.2s ease .5s backwards; animation:tit 1.2s ease .5s backwards;  }
@keyframes tit
{
0%   { -webkit-transform:scale(.5);  opacity:0;}
50% { -webkit-transform:scale(1.2);  opacity:.5;}
100% { -webkit-transform:scale(1);  opacity:1;}
}
@-webkit-keyframes tit
{
0%   { -webkit-transform:scale(.2);  opacity:0;}
50% { -webkit-transform:scale(1.2);  opacity:.5;}
100% { -webkit-transform:scale(1);  opacity:1;}
}
.tit img { max-height: 100%;}


.boy {width:1200px; left:50%; margin-left:-600px; text-align:right; bottom:7.5vh; height:46vh; position:absolute; z-index: 5;  -webkit-animation:boy .5s ease 1.2s backwards; animation:boy .5s ease 1.2s backwards;}
@keyframes boy {
0% { -webkit-transform: translateY(-100px); opacity:0;filter: blur(10px);}
100% { -webkit-transform: translateY(0); opacity:1;filter: blur(0px); }
}
@-webkit-keyframes boy {
0% { -webkit-transform: translateY(-100px); opacity:0;filter: blur(10px);}
100% { -webkit-transform: translateY(0); opacity:1;filter: blur(0px); }
}
.boy img { max-height: 100%;}



.warp { width: 1200px; margin: 0 auto; }

/*头条*/
.tt { width:100%; float:left; margin:50px 0 0 0;  padding:30px 6%;  background: linear-gradient(0deg, #e2ffe9, #ffffff); border-radius:var(--radius); box-shadow:var(--shadow);  }
.tt span { width:100%; float:left; font-size:42px; line-height:1.4; margin-bottom:12px; text-align:center; color:var(--color); font-weight: 800; }
.tt span b { display:inline-block; background:#fe8d1e; margin:0 15px 8px 0; padding:0 18px; line-height:2; font-size:22px; color:#fff; border-radius:5px; vertical-align:middle; font-weight: 500; }
.tt p { width:100%; font-size:18px;  color:rgba(0,0,0,.8); float:left; line-height:1.5; text-align:center;  font-weight: 400; }

.lm { width:100%; float:left; margin:50px 0 40px 0; text-align:center;  }


:root {
--transition:all ease-out .3s 0s;
--row: 3;
--color:#00bd69;
--radius:20px;
--shadow:0 5px 20px rgba(0,0,0,.15);
--shadow2:0 5px 20px rgba(0,0,0,.3);
}

/*园博科普*/
.card-grid { display:grid; grid-template-columns:repeat(3, 1fr);  gap:40px;  max-width:1200px;  width:100%;  margin:0 auto;  justify-items: center; }
/* 翻转卡片容器 — 宽度自适应 grid 列宽 */
.flip-card { width:100%;  aspect-ratio:9.6 / 16; cursor:pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; border-radius:var(--radius); box-shadow:var(--shadow); padding:20px;  background: linear-gradient(135deg, rgba(255,255,255,.9),rgba(226,255,233,.9)); }
.flip-card:hover { box-shadow:var(--shadow2); }

 /* 内部翻转元素 */
.flip-card-inner { position: relative; width: 100%;  height: 100%; border-radius: 24px; transition: transform 0.65s cubic-bezier(0.23, 1, 0.32, 1); transform-style: preserve-3d; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1); }

/* 悬停翻转 (没有固定翻转类时) */ 
.flip-card:not(.flipped):hover .flip-card-inner { transform: rotateY(180deg);}

/* 点击固定翻转 */
.flip-card.flipped .flip-card-inner { transform: rotateY(180deg);}

 /* 正面 & 背面 */
.flip-card-front,.flip-card-back { position:absolute; top:0; left:0; width:100%; height:100%;  backface-visibility: hidden; overflow: hidden; display: flex; align-items: center; justify-content: center;  border-radius:var(--radius);}
.flip-card-front { transform: rotateY(0deg); }
.flip-card-back { transform: rotateY(180deg); }

/* 图片容器 */
.img-container { width:100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.img-container img { width: 100%;height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease;}
.flip-card:hover .img-container img { transform: scale(1); }

/* 弹出层遮罩 */
.lightbox { position:fixed; top:0; left:0; width:100%; height:100%; background: rgba(0, 0, 0, 0.8); display:flex; align-items:center; justify-content:center; z-index:9999; opacity:0; visibility:hidden; transition: opacity 0.3s ease, visibility 0.3s ease; padding: 2rem; }
.lightbox.active { opacity: 1; visibility: visible; }

/* 弹出图片 */
.lightbox img { max-width:90%; max-height:90%; object-fit: contain;border-radius:var(--radius); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);transform: scale(0.9); transition: transform 0.3s ease;}
.lightbox.active img { transform: scale(1); }

/* 关闭按钮 */
.lightbox-close { position:absolute; top:24px; right:32px; width:48px;  height:48px;  border-radius:50%; background:rgba(255, 255, 255, 0.15); border:2px solid rgba(255, 255, 255, 0.6);  color:#fff; font-size:28px; line-height:1; display:flex; align-items:center; justify-content: center; cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; backdrop-filter: blur(4px); }
.lightbox-close:hover { background: rgba(255, 255, 255, 0.35); transform: rotate(90deg); }



/*答疑手册*/
.tbch { width:100%; float: left; position: relative; min-height:730px; border-radius:var(--radius); box-shadow:var(--shadow); background: linear-gradient(135deg, #e2ffe9,#ffffff,#ffffff, #e2ffe9); padding:40px; }
.tbch .mouse { position: absolute; right:42px; bottom:42px; }
.bookyy_l { width:25px; height:100%; right:0; position:absolute; z-index:9999; background:url(../images/yy_l.png) right top repeat-y; }
.bookyy_r { width:25px; height:100%; left:0; position:absolute; z-index:9999; background:url(../images/yy_r.png) left top repeat-y; }

.flipbook { cursor:pointer;  width: 100%; height:650px;  position: relative;  z-index: 5;  }

.hand { background-size: 100% 100%; height: 100%; }

.tbchmob {  display: none }




/*权威辟谣*/
.event { width:49%; float: left;  border-radius:var(--radius); box-shadow:var(--shadow); }
.event .swiper-container { width:100%;  position:relative;  z-index:1; min-height:500px; border-radius:var(--radius); overflow: hidden;background: linear-gradient(135deg, #ffffff,#ffffff,#ffffff, #e2ffe9);  }
.event .swiper-wrapper { position: relative; width:100%;  height:100%;  z-index:1; display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; }
.event .swiper-slide { width:100%; height:100%; position:relative; -webkit-flex-shrink:0;  flex-shrink:0;    }
.event .swiper-slide h3 { width:100%; float:left; overflow: hidden; }
.event .swiper-slide h3 img { width:100%; aspect-ratio:16 / 9;  transition:all ease-out .3s 0s; -webkit-transition:all ease-out .3s 0s;  }
.event .swiper-slide:hover h3 img { width:100%; height:100%; opacity:.8;}
.event .swiper-slide h4 { width:100%; float:right;  padding:25px 40px; margin-bottom: 60px;  }
.event .swiper-slide h4 font { width:100%; float:left; color:#333; line-height:1.5; font-size:22px; font-weight: 800; -webkit-line-clamp:1; display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; transition:all ease-out .3s 0s; -webkit-transition:all ease-out .3s 0s;  }
.event .swiper-slide:hover h4 font { color:var(--color); }
.event .swiper-slide h4 i { display:block; width:50px; height:1px; background:rgba(0,0,0,.5); float:left; margin-top:20px; display: none; }
.event .swiper-slide h4 p { width:100%; float:left; color:#666; line-height:1.8; font-size:16px; padding:15px 0 0 0;  text-align: justify; -webkit-line-clamp:3; display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical;}


.event .swiper-pagination { position:absolute; text-align:left;  z-index:10; bottom:0;  left:0; width:50%; display: none; }
.event .swiper-pagination-bullet { width:12px; height:12px; display:inline-block; border-radius:100%; opacity:1;  border:2px solid #ff6600; border-radius:50px; cursor:pointer; margin:0 8px 0 0; transition:all ease-out .5s 0s; background:none; }
.event .swiper-pagination-bullet-active{  width: 32px;  background:#ff6600; border:2px solid #ff6600;}

.event .swiper-button-prev,.event .swiper-button-next { width:50px; bottom:30px; right:30px; cursor:pointer; position:absolute; z-index:9999; text-align:center; color:#fff; line-height: 50px; font-family:"\5B8B\4F53";  font-weight:bold; font-size:36px; background:rgba(0,189,105,.3); }
.event .swiper-button-prev { right:80px;   }
.event .swiper-button-next {  background:rgba(0,189,105,.5); }



/*我要问真假*/
.ask { width:49%; float: right;  padding:35px 40px 40px;  background: linear-gradient(135deg, #ffffff,#ffffff,#ffffff, #e2ffe9); border-radius:var(--radius); box-shadow:var(--shadow); }
.ask h3 { width:100%; float: left; margin-bottom: 24px; }
.ask li { width:100%; float: left; margin-bottom: 25px; }
.ask li .textarea {  float: left; border-radius:5px;  background:#f0f0f0; width: 100%; height: 270px; padding:20px 25px; font-family: 'Microsoft YaHei'; font-size: 16px; color: #333; line-height: 1.5em; }
.ask li .input { float: left;  border:1px solid #ccc; background:#fff; border-radius:5px;  width: 30%;  line-height: 35px; padding:0 15px; margin-right: 15px;  font-family: 'Microsoft YaHei';  font-size: 16px; color: #333; }
.ask li b {float: left; font-size: 16px; color: #555; line-height: 35px; }
.ask li img { height: 35px; }
.ask .uploadpic { width: 49%; float: left; background: #3bd08a; color: #fff; border: none; font-size: 18px; line-height: 55px; position: relative; overflow:hidden;  border-radius:5px;  }
.ask .uploadpic span { display:block; text-align: center;}
input#picture { position: absolute; left: 0; top: 0; opacity: 0;} 
.ask #submit { width: 49%; float: right; background: #fe8d1e; color: #fff; border: none; font-size: 18px; line-height: 55px;  border-radius:5px; }



.footer { width: 100%; float:left; color:#fff; line-height:30px; font-size:16px; text-align: center; padding:14px 0;  background:var(--color);  margin-top:60px; }
.footer font { margin-left: 14px; }
.footer strong { margin-left: 10px; font-weight: 600; }


@media (max-width: 820px) {
:root {
--transition:all ease-out .3s 0s;
--row: 3;
--color:#00bd69;
--radius:4vw;
--shadow:0 5px 4vw rgba(0,0,0,.15);
--shadow2:0 5px 4vw rgba(0,0,0,.3);
}
	
.header { height:64vw;  box-shadow:var(--shadow); }
.logo { width:100%; left:0; margin-left:4%;  top:4.5vw; height:7.5vw; }
.logo img { max-width: 50%; max-height:100%;}
.tit { width:100%; left:0; margin-left:0;  top:11vw; height:auto; }
.tit img {max-width: 80%;  max-height: 100%;}
.boy { width:100%; left:auto; right:3%; margin-left:0;  bottom:2.8vw; height:28vw;}
.boy img { max-width: 82%; max-height: 100%;}

	
.warp { width:100%;  padding:0 5%; }


	
/*头条*/
.tt { width:100%; float:left; margin:6% 0 0 0;  padding:5% 5%; }
.tt span { width:100%; float:left; font-size:5vw; line-height:1.3em; margin-bottom:12px; text-align:left;  }
.tt span b { margin-bottom:5px; padding:0 2.5vw; line-height:2em; font-size:3.5vw; margin-right:2.5vw; }
.tt p { font-size:3.5vw; line-height:1.6em; text-align:left; }

.lm { margin:5vw 0;  }
.lm img { max-width:45%; }	
	
	
/*园博科普*/
.card-grid { grid-template-columns:repeat(2, 1fr); gap:4vw; max-width:100%;  width:100%; padding:0 5%; }
.flip-card { max-width: 240px; padding:3vw; }
.lightbox img { max-width:100%; max-height:100%; }

/* 关闭按钮 */
.lightbox-close { top:3vw; right:3vw; width:10vw; height:10vw; backdrop-filter: blur(10px); }


	
	
/*特别策划*/
.tbch {  display: none; }
.tbchmob { width: 100%; float: left;  display: block; border-radius:var(--radius); box-shadow:var(--shadow); overflow: hidden; background: #b5e9c3; }
.tbchmob ul li { width:100%; float: left;  }
.tbchmob ul li img { width:100%; }	
	
	
	
/*权威辟谣*/
.event { width:100%;  margin-bottom:5%;  }
.event .swiper-container { min-height:54vw; height:auto;  }
.event .swiper-slide h3 { width: 100%;   }
.event .swiper-slide:hover h3 img { opacity:1;}
.event .swiper-slide h4 { width: 100%; height:auto;  padding:5vw 7vw; margin-bottom:14vw; }
.event .swiper-slide h4 font {  line-height:1.5; font-size:5vw;  -webkit-line-clamp:2; }
.event .swiper-slide:hover h4 font { color:#333; }
.event .swiper-slide h4 i { display:block; width:10vw; height:1px; background:rgba(0,0,0,.5); float:left; margin-top:4%; }
.event .swiper-slide h4 p {  line-height:1.8; font-size:3.75vw; padding:4% 0 0 0;  -webkit-line-clamp:4; }

.event .swiper-button-prev,.event .swiper-button-next { width:10vw; line-height: 10vw;  font-size:6vw; right:4vw; bottom:5vw;}
.event .swiper-button-prev { right:14vw; }
.event .swiper-button-next {}
	
	

	
/*我要问真假*/
.ask {  width:100%; padding:5% 7%; }
.ask h3 { margin-bottom:6%; text-align: center; }
.ask li { margin-bottom:5%; }
.ask li .textarea {  height: 120px; padding:15px 20px;  font-size: 3.75vw;  }
.ask li .input {  width:30%; line-height: 8vw; padding:0 15px; margin-right: 15px;  }
.ask li b {float: left; font-size: 3.5vw; color: #555; line-height: 8vw; }
.ask li img { height: 8vw; }
.ask .uploadpic { width: 48%;  font-size: 4vw; line-height:10vw;   }
.ask #submit { width: 48%; font-size:4vw; line-height:10vw;  }




.footer { font-size: 3.25vw; line-height: 1.7em; padding:3.5vw 6vw; margin-top:5%; }
.footer font { margin-left: 0; width:100%; float:left; text-align:center; }
.footer strong { margin-left: 10px; }	
}