@charset "gb2312";
*{ margin:0px; padding:0px; border:0; }
html,body {width:100%; height:100%;margin:0px; padding:0; font:16px/1.5 'syS0',"Microsoft YaHei" , tahoma, arial, \5FAE\8F6F\96C5\9ED1, "Hiragino Sans GB", sans-serif;  -webkit-font-smoothing:antialiased; }
html { background:url(../images/bg.jpg) center center no-repeat; background-size:cover; }
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; } 
h1,h2,h3,h4,h5,h6,p,em,i,b,span,strong { margin:0; padding:0; font-weight:normal; font-style:normal;}
table,td,tr,th{font-size:12px;}
li{list-style-type:none;list-style:none;}
img{vertical-align:top;border:0;}
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: #333; text-decoration: none; transition:all ease-out .4s 0s;-webkit-transition:all ease-out .4s 0s;}
a:hover{ color:#d92b2e; text-decoration:none; }
div,ul,li,h1,h2,h3,h4,h5,h6,dl,dd,dt,p,i,em,b,span,td,tr,a,strong,input,textarea,blockquote,img,button,font { box-sizing:border-box; -webkit-box-sizing:border-box; }


.header { width:100%; height:100%; overflow:hidden; position: relative;  }

.left_red { position: absolute; z-index:15; top:0; width:37%; height: 100vh; background:url(../images/left.png) right center no-repeat; background-size: cover; display: flex;  align-items: center; padding:0 0 0 3%; }
.left_red .title { width:100%; float: left;  margin-top: -4vh; -webkit-animation:title 1.2s ease 0s backwards; animation:title 1.2s ease 0s backwards; }
@keyframes title
{
0%   { -webkit-transform:scale(.5);  opacity:0;}
50% { -webkit-transform:scale(1.2);  opacity:.5;}
100% { -webkit-transform:scale(1);  opacity:1;}
}
@-webkit-keyframes title
{
0%   { -webkit-transform:scale(4);  opacity:0;}
100% { -webkit-transform:scale(1);  opacity:1;}
}
.left_red .title img { max-width: 70%; }

.logobk { width:220px; left:5%; top:40px; z-index:15; position:absolute; }
.logo { width:220px;  position:absolute; top:0px; left:0; z-index:5;opacity:.85; }
.logo2 { width:220px;  position:absolute; top:0px; left:0; opacity:0; animation:logo 3.0s ease-in-out 2s infinite;-webkit-animation:logo 3.0s ease-in-out 2s infinite;}
@-webkit-keyframes logo{
	from{ }
	10%{ filter:alpha(opacity=80); opacity:.5; }
	50%{ filter:alpha(opacity=0); opacity:0; transform: scale(1.2,1.2); }
	to{ filter:alpha(opacity=0); opacity:0; transform: scale(1.2,1.2);  }
}
@keyframes logo{
	from{ }
	10%{ filter:alpha(opacity=80); opacity:.8; }
	50%{ filter:alpha(opacity=0); opacity:0; transform: scale(1.2,1.2); }
	to{ filter:alpha(opacity=0); opacity:0; transform: scale(1.2,1.2);  }
}


.redbj { height:570px; width: 100%; position: absolute; top:50%; margin-top: -285px; background:linear-gradient(-270deg,rgba(190,29,20,.8),rgba(190,29,20,.8),rgba(190,29,20,.8),rgba(149,12,66,.8));  /*background:url(../images/ssbj.png) right center no-repeat; background-size:cover;*/ }

.timeline2 { width:600%; height:13px; background:url(../images/timeline.png) left center repeat-x; position:absolute; margin-top: 215px; z-index: -1;  }

.list { width:63%; right:0; position: absolute; z-index:10;  height:450px; top:50%; margin-top:-225px;  }
.list ul { width: 100%; float: left;  }
.list ul li { width: 480px; display: block; cursor: pointer; float: left; background: url(../images/timeline3.png) left top no-repeat; padding:5px 0 25px 32px;  transition:all ease-out .8s 0s;  margin-left: -240px; }
.list ul li img { transition:all ease-out .8s 0s; }
.list ul li:hover img {  transform:scale(1.05);}

.list ul li h2 { width: 110px; float: left;  overflow: hidden;border-radius:5px; }
.list ul li h2 img { width: 100%; height: 195px; border-radius:5px;}
.list ul li h3 { width: 240px; float: left;margin-left:28px; }
.list ul li h3 span { width: 100%; float: left; font-size: 16px; line-height: 1.6em; color: #e5e5e5;}
.list ul li h3 p { width: 100%; float: left; font-size: 18px; line-height: 1.6em; color: #fff; font-weight: 600; padding:20px 0 25px 0; transition:all ease-out .4s 0s;-webkit-transition:all ease-out .4s 0s; }
.list ul li h3 b { float: left;  display: inline-block;  border-radius:5px; padding:0 10px; background:linear-gradient(0deg,#ff854f,#f5916e); font-size: 14px; color: #a31e18; line-height: 30px;transition:all ease-out .4s 0s;-webkit-transition:all ease-out .4s 0s;  } 
.list ul li h3 b a { color: #a31e18;}
.list ul li:hover h3 p { color: #ffde62; }
.list ul li:hover h3 b { background:linear-gradient(0deg,#fedb62,#f5916e);} 

.list ul li h3.sq { width: 240px; float: left; }
.list ul li h3.sq span { width: 100%; float: left; font-size: 16px; line-height: 1.5em; color:rgba(0,0,0,.8);}
.list ul li h3.sq p { color:rgba(0,0,0,1); }
.list ul li h3.sq b { background:linear-gradient(0deg,rgba(190,29,20,.8),rgba(149,12,66,.8));  color:rgba(255,255,255,.8);  } 
.list ul li h3.sq b a { color:rgba(255,255,255,.8);  } 
.list ul li:hover h3.sq p { color: #ffde62;}
.list ul li:hover h3.sq b { background:linear-gradient(0deg,#fedb62,#f5916e);color: #a31e18;} 
.list ul li:hover h3.sq b a { color: #a31e18;}
.list ul li.m2 { background: url(../images/timeline4.png) no-repeat left bottom; margin-top:228px; padding:23px 0 5px 32px; }

.list ul li.m3 {  width: 480px; display: block; cursor: pointer; float: left;  padding:14px;  background:linear-gradient(180deg,rgba(255,223,100,.6),rgba(255,223,100,0)); border-radius:10px; margin-right: 6px;  }

.list ul li.m4 {  width: 480px; margin-right: 6px; margin-top:228px; background:linear-gradient(0deg,rgba(255,223,100,.6),rgba(255,223,100,0)); border-radius:10px; padding:14px;}

.list ul li.m5 { width: 660px; display: block; cursor: pointer; float: left; background:none; padding:5px 0 25px 32px;  transition:all ease-out .8s 0s;  margin-left: -240px;  margin-top:20px;}
.list ul li.m5 h4 { width: 96%; float: left; border-radius:5px; overflow: hidden;}
.list ul li.m5 h4 img { width: 100%; height: 400px; border-radius:5px;}

.list ul li.m6 { background:none; margin-top:228px; padding:23px 0 5px 32px; }


.footer { position: absolute;  bottom:4vh; width:100%; float:left;  } 
.footer h3 { width:100%; float:left; padding:0 40px 0 0; }
.footer h3 font { width:100%; float:left; font-size:18px; line-height:34px; color:#7b4a26; text-align:right; }
.footer h3 font strong { font-weight: 600;}
.footer h3 span { width:100%; float:left; font-size:16px; line-height:34px; color:#7b4a26; text-align:right; }
.footer h3 span b { margin-left: 15px;}

.redbj_mob,.footer_mob { display: none; }



@media screen and (max-width:899px) and (min-width: 160px){
.header,.footer { display: none; }
html { background:url(../images/bg_mob.jpg) center top no-repeat; background-size:cover; background-attachment:fixed; }
	
.redbj_mob { width: 100%; float: left;  background:linear-gradient(-270deg,rgba(190,29,20,.8),rgba(190,29,20,.8),rgba(190,29,20,.8),rgba(149,12,66,.8)); display: block; }	

.header_mob	{  width: 100%; float: left; margin-bottom: 3%;}
.header_mob img { width: 100%; height: auto; }
	
.list2 { width:100%; float: left;  background:url(../images/timeline2.png) left 6px repeat-y;  }
.list2 ul { width:100%;float: left; }
.list2 ul li { width:100%;float: left; margin-bottom: 7%; background:url(../images/dian.png) left top no-repeat; padding:0 0 0 45px; }

.list2 ul li h2 { width: 25%; float: left;   }
.list2 ul li h2 img { width: 100%; height: auto;border-radius:5px; }
	
.list2 ul li h3 { width:69%; float: right; }
.list2 ul li h3 span { width: 100%; float: left; font-size:.9rem; line-height: 1.5em; color: #e5e5e5;}
.list2 ul li h3 p { width: 100%; float: left; font-size: 1rem; line-height: 1.5em; color: #ffde62; font-weight: 600; padding:.8rem 0 1rem 0; }
.list2 ul li h3 b { float: left;  display: inline-block;  border-radius:5px; padding:0 10px; background:linear-gradient(180deg,#ff854f,#f5916e); font-size: .85rem; color: #a31e18; line-height: 2em;  } 
.list2 li h3 b a { color: #a31e18;}
	
.list2 ul li h3.sq span {  color:rgba(0,0,0,.8);}
.list2 ul li h3.sq p { color:rgba(0,0,0,1); }
.list2 ul li h3.sq b { background:linear-gradient(0deg,rgba(190,29,20,.8),rgba(149,12,66,.8));  color:rgba(255,255,255,.8);  } 
.list2 ul li h3.sq b a { color:rgba(255,255,255,.8);  } 
	
	
.list2 ul li.m2 {  padding:5% 0 5% 45px;  margin-bottom:0; background:linear-gradient(180deg,rgba(255,223,100,.6),rgba(255,223,100,0));  }
	
	
.footer_mob { width:100%; float:left; display: block; text-align: center; padding:5% 0; } 
.footer_mob font { width:100%; float:left; font-size:1rem; line-height:1.6em; color:#7b4a26;  }
.footer_mob font strong { font-weight: 600;}
.footer_mob b { width:100%; float:left; font-size:.9rem; line-height:1.6em; color:#7b4a26; }
}