html, body {
height: 100%;
width: 100%;
margin: 0;
font-family: '微软雅黑';
}
p, h1, h2, h3 {
margin: 0;font-family: '微软雅黑';
}
body {
overflow: hidden;
background: url(../img/bg.jpg) left top no-repeat;
background-size: cover;
position: relative;
}
.main_container {
box-sizing: border-box;
width: 90%;
height: 86%;
overflow: hidden;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
/*background: #ffffff;*/
position: absolute;
display: flex;
}
.pages_news{
width: 160px;
height: 60px;
color:#fff;
background:#b62b2b;
font-size:1.875em;
line-height: 60px;
text-align: center;
/*margin-left:42px;*/
position: absolute;
top:0;
left: 42px;
border-radius: 0 0 5px 5px;
}
.pages_container {
width: 90%;
height: 100%;
position: relative;
overflow: hidden;
background:rgba(241, 241, 241, .95);
}
.pages {
position: absolute;
height: 100%;
width: 100%;
display: flex;
}
.titles_container {
flex: 1;
display: flex;
flex-direction: column;
/*justify-content: space-around;*/
/*justify-content: space-between;*/
background:rgba(241, 241, 241, .75);
color: #aaa;
}
.titles_container .logo{
/*background:rgba(241, 241, 241, .75);*/
/*margin-bottom: 2px;*/
padding:1.578em 14px;
/*border-bottom:2px solid rgba(67, 45, 47, .8);*/
}
.titles_container h2 {
font-weight: normal;
font-size: 1.25em;
/*padding: 4% 10px;*/
padding: 0em 10px;
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
transition: all 1s ease;
border-bottom:2px solid rgba(67, 45, 47, .8);
display: table-cell;
vertical-align:middle;
color:#333;
}
.titles_container h2 span{
display:inline-block;
vertical-align: middle;
*display: inline; *zoom: 1;
line-height: 30px;
}
.titles_container h2.active {
color: #121a71;
display: block;
background:rgba(241, 241, 241, .96);
}
.titles_container h2:last-child{
border-bottom:none;
}
.page {
flex: 1;
/*float: left;*/
display: flex;
padding: 80px 40px 40px;
overflow: hidden;
/*flex-direction:column;*/
position: absolute;
top:0;
left:0;
width: 100%;height: 100%;box-sizing: border-box;
opacity: 0
}
.page .title_and_imgs,
.page .content_container {
/* flex: 1; */
float: left;
width: 50%;
height: 100%;
}
.page .title_and_imgs {
display: flex;
flex-direction: column;
/*align-items: center;
justify-content: space-between;*/
margin-right: 40px;
background-color:#fff;
box-shadow: 0 5px 8px rgba(0, 0, 0, .1);
padding:10px 20px;
}
.page .title {
color: #121a71;
/*font-weight: normal;*/
font-size: 2em;
}
.page .imgs_container {
/*flex: auto;*/
width: 100%;
margin-top: 20px;
overflow: hidden;
position: relative;
/*display: flex;*/
align-items:stretch;
flex-direction:column;
}
.page .imgs {
display: flex;
width: 100%;
position: relative;
height:0;
padding-bottom: 66.515%;
}
.page .img {
width: 100%;
position:absolute;
left:0;
top:0;
}
.page .imgs img {
width:100%;
display:block;
}
.page .caption {
font-weight: normal;
font-size: 1.375em;
text-align: left;
margin-top: 10px;
color:#121a71;
}
.page .content_container {
overflow: hidden;
position: relative;
}
.page .content {
position: absolute;
font-size:1.75em;
line-height: 48px;
}
.titles_container h2.first {
border-top:2px solid rgba(67, 45, 47, .8);
}
.img_caption{margin-left:1100px;}
.pageAll_img .title_and_imgs{width: 70%;background:none;box-shadow: none;padding-left:0;margin-right: 20px;}
.pageAll_img .content_container{width: 30%;}
.bigImg{}
.pagefull_img{padding:75px 40px 20px;}
.pagefull_img .title_and_imgs{width: 100%;padding:0;margin-right: 50px;}
.pagefull_img .imgs_container{margin-top:0;}