@import url("../../css/basic2.css");
body{font-size:18px; line-height: 27px; font-family: "Microsoft YaHei"; margin:0; padding:0;}
table{border:0; border-collapse: collapse;}
div,p,ul,ol,li,td,form,dl,dt,dd,a,span,i,b,strong,em,h1,h2,h3,h4,h5,h6{font-family: "Microsoft YaHei"; margin:0; padding:0; color: #232425;}
ul,ol,li{list-style: none;}
a{text-decoration: none;}
img{border:0; margin:0; padding:0;}
.fl{float: left;}
.fr{float: right;}
.ct{text-align: center;}
.m0{margin:0 auto;}
.of{overflow: hidden;}
.img_block{display: block; width: 100%;}
.cle{width: 100%; height: 0px; overflow: hidden; clear: both;}

.container{margin: 0 auto; }
@media screen and (min-width: 768px){
	.container{width: 750px;}
}
@media screen and (min-width: 992px){
	.container{width: 970px;}
}
@media screen and (min-width: 1200px){
	.container{width: 1170px;}
}
@media screen and (min-width: 1220px){
	.container{width: 1200px;}
}

@media (min-width: 1200px){
	.hidden-lg{display: none!important;}
}
@media (max-width: 1199px) and (min-width: 992px){
	.hidden-md{display: none!important;}
}
@media (max-width: 991px) and (min-width: 768px){
	.hidden-sm{display: none!important;}
}
@media (max-width: 767px){
	.hidden-xs{display: none!important;}
}
body,html{background:#f7fcff;}
/*banner*/
.banner{background: url(banner.jpg) no-repeat center 0; background-size: cover; height: 500px;}

/*故事区*/
.story-section{padding: 0 0 80px;}
.top{padding:50px 0 40px;}
.top-title{text-align: center; font-weight: bold; color: #232323; font-size: 36px; line-height: 1; margin-bottom: 10px;}
.top-title span{font-weight: bold; color: #292fa9; font-size: 36px; line-height: 1; display: inline-block;}
.top-des{margin-bottom: 20px;}
.top-des span{display: block; color: #232323; text-align: center; font-size: 18px; line-height: 27px;}
.top img{display: block; margin:0  auto;}
.top-stitle{color: #2e8fd8; margin-bottom: 20px; text-align: center;}
/*Tabs*/
.story-tabs{display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 30px; flex-wrap: wrap;}
.story-tab{display: inline-block; padding: 6px 22px; font-size: 16px; color: #666; border-radius: 30px; line-height: 24px; transition: all .25s; cursor: pointer;}
.story-tab:hover{color: #ed5b76;}
.story-tab.active{background: linear-gradient(135deg,#f7a5b4,#ed5b76); color: #fff;}

/*面板*/
.story-panel{display: none;}
.story-panel.active{display: block;}

/*故事列表*/
.story-list{margin: 0;}
.story-item{background: #fff; margin-bottom: 16px; border-radius: 6px; overflow: hidden;}
.story-item > a{display: flex; align-items: stretch; padding: 24px;}
.story-pic{flex: 0 0 280px; width: 280px; height: 180px; overflow: hidden; border-radius: 4px; background:#eee;}
.story-pic img{display: block; width: 100%; height: 100%; object-fit: cover;}
.story-info{flex: 1; padding-left: 26px; display: flex; flex-direction: column; justify-content: center;}
.story-tag{display: inline-block; padding: 3px 14px; font-size: 12px; color: #fff; line-height: 20px; background: linear-gradient(135deg,#f7a5b4,#ed5b76); border-radius: 20px; align-self: flex-start; margin-bottom: 10px;}
.story-title{font-size: 20px; font-weight: bold; line-height: 30px; color: #1a1a1a; margin-bottom: 10px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden;}
.story-desc{font-size: 14px; line-height: 24px; color: #666; text-align: justify; margin-bottom: 16px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;}
.story-more{font-size: 14px; color: #2e8fd8;}
.story-more:hover{text-decoration: underline;}

/*展开更多*/
.show-more{width: 200px; height: 50px; line-height: 50px; text-align: center; background: linear-gradient(135deg,#5fb1e0,#2e8fd8); color:#fff; font-size: 18px; border-radius: 30px; margin: 30px auto 0; cursor: pointer; transition: all .3s; box-shadow: 0 4px 14px rgba(46,143,216,.25);}
.show-more:hover{transform: translateY(-2px); box-shadow: 0 6px 20px rgba(46,143,216,.35);}

/*foot*/
.foot{background:#1d3a5e; padding: 60px 0;}
.foot-inner{max-width: 1000px; margin: 0 auto; text-align: center; padding: 0 15px;}
.foot p{color: #c8d0e0; font-size: 14px; line-height: 24px; text-align: center;}

/*响应式*/
@media screen and (max-width: 1199px){
	.story-pic{flex: 0 0 240px; width: 240px; height: 160px;}
	.story-title{font-size: 18px; line-height: 28px;}
}
@media screen and (max-width: 991px){
	.top{ padding:30px 0 40px;}
	.top-title{font-size: 30px; margin-bottom: 20px;}

	.top-title span{font-size: 30px;}
	.top-des span{display: inline; text-align: center; font-size: 16px; line-height: 24px;}
	.top-des{margin-bottom: 12px;}
	.top img{width: 30px;}

	.story-section{padding: 0 0 60px;}
	.story-pic{flex: 0 0 200px; width: 200px; height: 140px;}
	.story-info{padding-left: 20px;}
	.story-title{font-size: 16px; line-height: 26px; margin-bottom: 10px;}
	.story-desc{-webkit-line-clamp: 2; margin-bottom: 12px;}
}
@media screen and (max-width: 767px){
	.top-title{font-size: 24px; line-height: 30px; margin-bottom: 15px;}
	.top-title span{font-size: 24px;}
	.top-des span{display: inline; line-height: 24px;}
	.top-des{margin-bottom: 10px; text-indent: 32px;}

	p,span{font-size: 14px; line-height: 24px;}
	.container{margin: 0 15px;}

	.story-section{padding: 0 0 40px;}
	.story-tabs{margin-bottom: 18px; gap: 6px;}
	.story-tab{padding: 5px 16px; font-size: 14px;}

	.story-item{margin-bottom: 12px;}
	.story-item > a{display: block; padding: 14px;}
	.story-pic{width: 100%; height: 0; padding-bottom: 60%; flex: none; position: relative;}
	.story-pic img{position: absolute; top: 0; left: 0;}
	.story-info{padding-left: 0; padding-top: 16px;}
	.story-tag{font-size: 11px; padding: 2px 12px; margin-bottom: 10px;}
	.story-title{font-size: 16px; line-height: 24px; margin-bottom: 8px; -webkit-line-clamp: 2;}
	.story-desc{font-size: 13px; line-height: 22px; -webkit-line-clamp: 3; margin-bottom: 12px;}
	.story-more{font-size: 13px;}

	.show-more{width: 160px; height: 42px; line-height: 42px; font-size: 16px; margin-top: 20px;}

	.foot{padding: 35px 0;}
	.foot p{font-size: 12px; line-height: 20px;}
}