以下是 jQuery层叠动画切换文字内容代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery层叠动画切换文字内容代码</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="m2usCon2">
<div class="container">
<div class="a-part por ovh about-fo">
<div class="main poa t-f noselect">
<div class="detail por">
<div class="btn poa prev dn m2usBtnL"></div>
<div class="btn poa next m2usBtnR"></div>
<div class="in por">
<div class="box poa" style="transform: translate(0px, -96px) scale(0.55, 0.55); opacity: 0.08;">
<div class="box-in dn">
<div class="time"></div>
<p></p>
</div>
</div>
<div class="box poa" style="transform: translate(0px, -64px) scale(0.7, 0.7); opacity: 0.2;">
<div class="box-in dn">
<div class="time"></div>
<p></p>
</div>
</div>
<div class="box poa" style="transform: translate(0px, -32px) scale(0.85, 0.85); opacity: 0.4;">
<div class="box-in dn">
<div class="time"></div>
<p></p>
</div>
</div>
<div class="box poa" style="display: block; opacity: 1; top: 0px;">
<div class="box-in dn">
<div class="time"></div>
<p></p>
</div>
</div>
</div>
</div>
<div class="list f-cb por ovh">
<ul class="por">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.transit.js"></script>
<script src="js/bocfe.js"></script>
<script language="javascript">
$(function(){
var Year = new Array(
[
["", "要使整个人生都过得舒适、愉快，这是不可能的，因为人类必须具备一种能应付逆境的态度。——卢梭"]
],
[
["", "重复别人所说的话，只需要教育；而要挑战别人所说的话，则需要头脑。——玛丽·佩蒂博恩·普尔"]
],
[
["", "人生就是学校。在那里，与其说好的教师是幸福，不如说好的教师是不幸。——海贝尔"]
],
[
["", "对一个人来说，所期望的不是别的，而仅仅是他能全力以赴和献身于一种美好事业。——爱因斯坦"]
],
[
["", "心如镜，虽外景不断变化，镜面却不会转动，这就是一颗平常心，能够景转而心不转。"]
],
[
["", "一份耕耘，一份收获，付出就有回报永不遭遇过失败，因我所碰到的都是暂时的挫折。"]
]
)
_PreLoadImg([
"images/m2yy_btn.png"
],function(){
// 初始化
$(".a-part").each(function(){
$(this).height(420)
FullBg($(this), $(this).find("img.bg"))
})
// ABOUT PART FOURTH
$(".about-fo .main").css("top", ($(window).height() - 572) / 2 )
$(".about-fo .box").each(function(){
$(this).find(".box-in").css("padding-top", 138 - $(this).find(".box-in").height() / 2 )
})
var $In = $(".about-fo .detail .in"),
InBl = true,
a = 0,
b = 0,
$FoUl = $(".about-fo .list ul"),
$FoLi = $(".about-fo .list li")
$FoUl.width($FoLi.width() * $FoLi.length)
$FoLi.eq(0).addClass("cur")
var cura = $(".about-fo .list li.cur").index()
$(".about-fo .box:last .box-in .time").html(Year[cura][0][0]).siblings().html(Year[cura][0][1])
$(".about-fo .box:last .box-in").show().css("padding-top", 138 - $(".about-fo .box:last .box-in").height() / 2 )
$(".about-fo .next").click(function(){
$(".about-fo .prev").stop().fadeIn(500);
if(!InBl){
return
}
InBl = false;
if(a == Year.length){
InBl = true
b = Year[a - 1].length
return
}
b ++ ;
if(b == Year[a].length){
b = 0
a ++
if(a > 4 && a < Year.length){
$FoUl.stop().animate({marginLeft: - 166 * (a - 4)}, 500)
}
$FoLi.eq(a).addClass("cur").siblings().removeClass("cur")
}
if(a == Year.length - 1 && b == Year[a].length - 1){
$(this).stop().fadeOut(500);
}
if(a == Year.length){
InBl = true
return
}
var $list = '<div class="box poa dn"><div class="box-in dn"><div class="time"></div><p></p></div></div>'
$In.find(".box").eq(0).before($list)
$In.find(".box").eq(0).css({
y : -96,
scale : 0.55,
opacity : 0.08
})
$In.find(".box").eq(4).stop().animate({
top : 26,
opacity : 0
}, 500).prev().stop().transition({
y : 0,
scale : 1,
opacity : 1
}, 500).find(".box-in").stop().fadeIn(600).find(".time").html(Year[a][b][0]).siblings().html(Year[a][b][1])
$In.find(".box").eq(3).find(".box-in").css("padding-top", 88 - $In.find(".box").eq(3).find(".box-in").height() / 2)
$In.find(".box").eq(2).stop().transition({
y : -32,
scale : 0.85,
opacity : 0.4
}, 500).prev().stop().transition({
y : -64,
scale : 0.7,
opacity : 0.2
}, 500).prev().stop().fadeIn(500, function(){
$In.find(".box").eq(4).remove()
InBl = true
})
})
$(".about-fo .prev").click(function(){
$(".about-fo .next").stop().fadeIn(500);
if(!InBl){
return
}
InBl = false;
if(a == 0 && b == 0){
InBl = true;
return
}
if(a == Year.length){
a --
b --
}
b --
if(a == 0 && b == 0){
$(this).stop().fadeOut(500);
}
if(b == - 1 ){
if(a > 0){
a --
if(a >= 4){
$FoUl.stop().animate({marginLeft: - 166 * (a - 4)}, 500)
}
$FoLi.eq(a).addClass("cur").siblings().removeClass("cur")
}
b = Year[a].length - 1
}
var $list = '<div class="box poa fif dn"><div class="box-in dn"><div class="time"></div><p></p></div></div>'
$In.find(".box:last").after($list)
$In.find(".box").eq(0).stop().fadeOut(500).next().stop().transition({
y : - 96,
scale : 0.55,
opacity : 0.08
}, 500).next().stop().transition({
y : -64,
scale : 0.7,
opacity : 0.2
}, 500).next().stop().transition({
y : -32,
scale : 0.85,
opacity : 0.4
}, 500).next().stop().fadeIn(600).find(".box-in").stop().fadeIn(600).find(".time").html(Year[a][b][0]).siblings().html(Year[a][b][1])
$In.find(".box").eq(4).stop().animate({
top : 0,
opacity : 1
}, 500, function(){
$In.find(".box:first").remove()
$In.find(".box").eq(3).siblings().find(".box-in").hide().find(".time").html("").siblings().html("")
InBl = true
}).find(".box-in").css("padding-top", 88 - $In.find(".box").eq(4).find(".box-in").height() / 2)
})
$FoLi.click(function(){
if(!InBl){
return
}
InBl = false;
var n = $(".about-fo .list li.cur").index()
$(this).addClass("cur").siblings().removeClass("cur")
a = $(this).index(),
b = 0
if($(this).index() < 5){
$FoUl.stop().animate({marginLeft: 0}, 500)
}
if($(this).index() != 0){
$(".about-fo .prev").stop().fadeIn(500);
}else{
$(".about-fo .prev").stop().fadeOut(500);
}
if($(this).index() > n){
var $list = '<div class="box poa dn"><div class="box-in dn"><div class="time"></div><p></p></div></div>'
$In.find(".box").eq(0).before($list)
$In.find(".box").eq(0).css({
y : -96,
scale : 0.55,
opacity : 0.08
})
$In.find(".box").eq(4).stop().animate({
top : 26,
opacity : 1
}, 500).prev().stop().transition({
y : 0,
scale : 1,
opacity : 1
}, 500).find(".box-in").stop().fadeIn(600).find(".time").html(Year[a][b][0]).siblings().html(Year[a][b][1])
$In.find(".box").eq(3).find(".box-in").css("padding-top", 88 - $In.find(".box").eq(3).find(".box-in").height() / 2)
$In.find(".box").eq(2).stop().transition({
y : -32,
scale : 0.85,
opacity : 0.4
}, 500).prev().stop().transition({
y : -64,
scale : 0.7,
opacity : 0.2
}, 500).prev().stop().fadeIn(500, function(){
$In.find(".box").eq(4).remove()
InBl = true
})
}else{
var $list = '<div class="box poa fif dn"><div class="box-in dn"><div class="time"></div><p></p></div></div>'
$In.find(".box:last").after($list)
$In.find(".box").eq(0).stop().fadeOut(500).next().stop().transition({
y : - 96,
scale : 0.55,
opacity : 0.08
}, 500).next().stop().transition({
y : -64,
scale : 0.7,
opacity : 0.2
}, 500).next().stop().transition({
y : -32,
scale : 0.85,
opacity : 0.4
}, 500).next().stop().fadeIn(600).find(".box-in").stop().fadeIn(600).find(".time").html(Year[a][b][0]).siblings().html(Year[a][b][1])
$In.find(".box").eq(4).stop().animate({
top : 0,
opacity : 1
}, 500, function(){
$In.find(".box:first").remove()
$In.find(".box").eq(3).siblings().find(".box-in").hide().find(".time").html("").siblings().html("")
InBl = true
}).find(".box-in").css("padding-top", 138 - $In.find(".box").eq(4).find(".box-in").height() / 2)
}
})
function aboutNews(n){
if(!NewsBl){
return
}
NewsBl = false
$(".about-fif .btn span").eq(n).addClass("cur").siblings().removeClass("cur");
var $UlMark = $(".about-fif ul.mark")
$UlMark.stop().animate({
left : - 1182,
opacity : 0
}, 500, function(){
$UlMark.css("left", -17).find("li").css({
left : 360,
opacity : 0
})
$(".about-fif ul").eq(n).css({
opacity : 1,
"z-index" : 2
}).addClass("mark").siblings().removeClass("mark").css({
opacity : 0,
"z-index" : 1
})
Enter($(".about-fif ul").eq(n).find("li").eq(0), "left", 0, 3, 500, 350)
setTimeout(function(){
NewsBl = true
}, 1200)
})
}
aboutNews(1);
})
})
</script>
</body>
</html>
JS代码(jquery.transit.js):
(function(t,e){
if(typeof define==="function"&&define.amd){
define(["jquery"],e)}
else if(typeof exports==="object"){
module.exports=e(require("jquery"))}
else{
e(t.jQuery)}
}
)(this,function(t){
t.transit={
version:"0.9.12",propertyMap:{
marginLeft:"margin",marginRight:"margin",marginBottom:"margin",marginTop:"margin",paddingLeft:"padding",paddingRight:"padding",paddingBottom:"padding",paddingTop:"padding"}
,enabled:true,useTransitionEnd:false}
;
var e=document.createElement("div");
var n={
}
;
function i(t){
if(t in e.style)return t;
var n=["Moz","Webkit","O","ms"];
var i=t.charAt(0).toUpperCase()+t.substr(1);
for(var r=0;
r<n.length;
++r){
var s=n[r]+i;
if(s in e.style){
return s}
}
}
function r(){
e.style[n.transform]="";
e.style[n.transform]="rotateY(90deg)";
return e.style[n.transform]!==""}
var s=navigator.userAgent.toLowerCase().indexOf("chrome")>-1;
n.transition=i("transition");
n.transitionDelay=i("transitionDelay");
n.transform=i("transform");
n.transformOrigin=i("transformOrigin");
n.filter=i("Filter");
n.transform3d=r();
var a={
transition:"transitionend",MozTransition:"transitionend",OTransition:"oTransitionEnd",WebkitTransition:"webkitTransitionEnd",msTransition:"MSTransitionEnd"}
;
var o=n.transitionEnd=a[n.transition]||null;
for(var u in n){
if(n.hasOwnProperty(u)&&typeof t.support[u]==="undefined"){
t.support[u]=n[u]}
}
e=null;
t.cssEase={
_default:"ease","in":"ease-in",out:"ease-out","in-out":"ease-in-out",snap:"cubic-bezier(0,1,.5,1)",easeInCubic:"cubic-bezier(.550,.055,.675,.190)",easeOutCubic:"cubic-bezier(.215,.61,.355,1)",easeInOutCubic:"cubic-bezier(.645,.045,.355,1)",easeInCirc:"cubic-bezier(.6,.04,.98,.335)",easeOutCirc:"cubic-bezier(.075,.82,.165,1)",easeInOutCirc:"cubic-bezier(.785,.135,.15,.86)",easeInExpo:"cubic-bezier(.95,.05,.795,.035)",easeOutExpo:"cubic-bezier(.19,1,.22,1)",easeInOutExpo:"cubic-bezier(1,0,0,1)",easeInQuad:"cubic-bezier(.55,.085,.68,.53)",easeOutQuad:"cubic-bezier(.25,.46,.45,.94)",easeInOutQuad:"cubic-bezier(.455,.03,.515,.955)",easeInQuart:"cubic-bezier(.895,.03,.685,.22)",easeOutQuart:"cubic-bezier(.165,.84,.44,1)",easeInOutQuart:"cubic-bezier(.77,0,.175,1)",easeInQuint:"cubic-bezier(.755,.05,.855,.06)",easeOutQuint:"cubic-bezier(.23,1,.32,1)",easeInOutQuint:"cubic-bezier(.86,0,.07,1)",easeInSine:"cubic-bezier(.47,0,.745,.715)",easeOutSine:"cubic-bezier(.39,.575,.565,1)",easeInOutSine:"cubic-bezier(.445,.05,.55,.95)",easeInBack:"cubic-bezier(.6,-.28,.735,.045)",easeOutBack:"cubic-bezier(.175,.885,.32,1.275)",easeInOutBack:"cubic-bezier(.68,-.55,.265,1.55)"}
;
t.cssHooks["transit:transform"]={
get:function(e){
return t(e).data("transform")||new f}
,set:function(e,i){
var r=i;
if(!(r instanceof f)){
r=new f(r)}
if(n.transform==="WebkitTransform"&&!s){
e.style[n.transform]=r.toString(true)}
else{
e.style[n.transform]=r.toString()}
t(e).data("transform",r)}
}
;
t.cssHooks.transform={
set:t.cssHooks["transit:transform"].set}
;
t.cssHooks.filter={
get:function(t){
return t.style[n.filter]}
,set:function(t,e){
t.style[n.filter]=e}
}
;
if(t.fn.jquery<"1.8"){
t.cssHooks.transformOrigin={
get:function(t){
return t.style[n.transformOrigin]}
,set:function(t,e){
t.style[n.transformOrigin]=e}
}
;
t.cssHooks.transition={
get:function(t){
return t.style[n.transition]}
,set:function(t,e){
t.style[n.transition]=e}
}
}
p("scale");
p("scaleX");
p("scaleY");
p("translate");
p("rotate");
p("rotateX");
p("rotateY");
p("rotate3d");
p("perspective");
p("skewX");
p("skewY");
p("x",true);
p("y",true);
function f(t){
if(typeof t==="string"){
this.parse(t)}
return this}
f.prototype={
setFromString:function(t,e){
var n=typeof e==="string"?e.split(","):e.constructor===Array?e:[e];
n.unshift(t);
f.prototype.set.apply(this,n)}
,set:function(t){
var e=Array.prototype.slice.apply(arguments,[1]);
if(this.setter[t]){
this.setter[t].apply(this,e)}
else{
this[t]=e.join(",")}
}
,get:function(t){
if(this.getter[t]){
return this.getter[t].apply(this)}
else{
return this[t]||0}
}
,setter:{
rotate:function(t){
this.rotate=b(t,"deg")}
,rotateX:function(t){
this.rotateX=b(t,"deg")}
,rotateY:function(t){
this.rotateY=b(t,"deg")}
,scale:function(t,e){
if(e===undefined){
e=t}
this.scale=t+","+e}
,skewX:function(t){
this.skewX=b(t,"deg")}
,skewY:function(t){
this.skewY=b(t,"deg")}
,perspective:function(t){
this.perspective=b(t,"px")}
,x:function(t){
this.set("translate",t,null)}
,y:function(t){
this.set("translate",null,t)}
,translate:function(t,e){
if(this._translateX===undefined){
this._translateX=0}
if(this._translateY===undefined){
this._translateY=0}
if(t!==null&&t!==undefined){
this._translateX=b(t,"px")}
if(e!==null&&e!==undefined){
this._translateY=b(e,"px")}
this.translate=this._translateX+","+this._translateY}
}
,getter:{
x:function(){
return this._translateX||0}
,y:function(){
return this._translateY||0}
,scale:function(){
var t=(this.scale||"1,1").split(",");
if(t[0]){
t[0]=parseFloat(t[0])}
if(t[1]){
t[1]=parseFloat(t[1])}
return t[0]===t[1]?t[0]:t}
,rotate3d:function(){
var t=(this.rotate3d||"0,0,0,0deg").split(",");
for(var e=0;
e<=3;
++e){
if(t[e]){
t[e]=parseFloat(t[e])}
}
if(t[3]){
t[3]=b(t[3],"deg")}
return t}
}
,parse:function(t){
var e=this;
t.replace(/([a-zA-Z0-9]+)\((.*?)\)/g,function(t,n,i){
e.setFromString(n,i)}
)}
,toString:function(t){
var e=[];
for(var i in this){
if(this.hasOwnProperty(i)){
if(!n.transform3d&&(i==="rotateX"||i==="rotateY"||i==="perspective"||i==="transformOrigin")){
continue}
if(i[0]!=="_"){
if(t&&i==="scale"){
e.push(i+"3d("+this[i]+",1)")}
else if(t&&i==="translate"){
e.push(i+"3d("+this[i]+",0)")}
else{
e.push(i+"("+this[i]+")")}
}
}
}
return e.join(" ")}
}
;
function c(t,e,n){
if(e===true){
t.queue(n)}
else if(e){
t.queue(e,n)}
else{
t.each(function(){
n.call(this)}
)}
}
function l(e){
var i=[];
t.each(e,function(e){
e=t.camelCase(e);
e=t.transit.propertyMap[e]||t.cssProps[e]||e;
e=h(e);
if(n[e])e=h(n[e]);
if(t.inArray(e,i)===-1){
i.push(e)}
}
);
return i}
function d(e,n,i,r){
var s=l(e);
if(t.cssEase[i]){
i=t.cssEase[i]}
var a=""+y(n)+" "+i;
if(parseInt(r,10)>0){
a+=" "+y(r)}
var o=[];
t.each(s,function(t,e){
o.push(e+" "+a)}
);
return o.join(",")}
t.fn.transition=t.fn.transit=function(e,i,r,s){
var a=this;
var u=0;
var f=true;
var l=t.extend(true,{
}
,e);
if(typeof i==="function"){
s=i;
i=undefined}
if(typeof i==="object"){
r=i.easing;
u=i.delay||0;
f=typeof i.queue==="undefined"?true:i.queue;
s=i.complete;
i=i.duration}
if(typeof r==="function"){
s=r;
r=undefined}
if(typeof l.easing!=="undefined"){
r=l.easing;
delete l.easing}
if(typeof l.duration!=="undefined"){
i=l.duration;
delete l.duration}
if(typeof l.complete!=="undefined"){
s=l.complete;
delete l.complete}
if(typeof l.queue!=="undefined"){
f=l.queue;
delete l.queue}
if(typeof l.delay!=="undefined"){
u=l.delay;
delete l.delay}
if(typeof i==="undefined"){
i=t.fx.speeds._default}
if(typeof r==="undefined"){
r=t.cssEase._default}
i=y(i);
var p=d(l,i,r,u);
var h=t.transit.enabled&&n.transition;
var b=h?parseInt(i,10)+parseInt(u,10):0;
if(b===0){
var g=function(t){
a.css(l);
if(s){
s.apply(a)}
if(t){
t()}
}
;
c(a,f,g);
return a}
var m={
}
;
var v=function(e){
var i=false;
var r=function(){
if(i){
a.unbind(o,r)}
if(b>0){
a.each(function(){
this.style[n.transition]=m[this]||null}
)}
if(typeof s==="function"){
s.apply(a)}
if(typeof e==="function"){
e()}
}
;
if(b>0&&o&&t.transit.useTransitionEnd){
i=true;
a.bind(o,r)}
else{
window.setTimeout(r,b)}
a.each(function(){
if(b>0){
this.style[n.transition]=p}
t(this).css(l)}
)}
;
var z=function(t){
this.offsetWidth;
v(t)}
;
c(a,f,z);
return this}
;
function p(e,i){
if(!i){
t.cssNumber[e]=true}
t.transit.propertyMap[e]=n.transform;
t.cssHooks[e]={
get:function(n){
var i=t(n).css("transit:transform");
return i.get(e)}
,set:function(n,i){
var r=t(n).css("transit:transform");
r.setFromString(e,i);
t(n).css({
"transit:transform":r}
)}
}
}
function h(t){
return t.replace(/([A-Z])/g,function(t){
return"-"+t.toLowerCase()}
)}
function b(t,e){
if(typeof t==="string"&&!t.match(/^[\-0-9\.]+$/)){
return t}
else{
return""+t+e}
}
function y(e){
var n=e;
if(typeof n==="string"&&!n.match(/^[\-0-9\.]+/)){
n=t.fx.speeds[n]||t.fx.speeds._default}
return b(n,"ms")}
t.transit.getTransitionValue=d;
return t}
);
CSS代码(style.css):
@charset "UTF-8";html{-webkit-text-size-adjust:100%;height:100%}
body,dd,div,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,li,ol,p,select,table,td,textarea,ul{margin:0;padding:0;-webkit-text-size-adjust:none}
body{height:100%;color:#333;font-size:12px;font-family:Arial,"Microsoft YaHei","宋体"}
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block}
audio,canvas,progress,video{display:inline-block;vertical-align:baseline}
img{border:none;}
*,:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.clearfix:after,.clearfix:before{content:"";display:table}
.clearfix:after{clear:both}
table{border-collapse:collapse;border-spacing:0}
ul li{list-style:none}
input,select,textarea{outline:0}
a{color:#333;text-decoration:none;outline:0;transition:all .3s ease}
a:active,a:hover{text-decoration:none;color:#e83827;outline:0}
.dsNone{display:none}
.dsBlock{display:block}
.m2ban{height:500px;position:relative;background:url(../images/loader.gif) no-repeat center center;}
.m2ban .bgImg{height:100%;width:100%;position:absolute;left:0px;top:0px;right:0px;bottom:0px;}
.m2banTxt{color:#FFF;width:100%;position:absolute;left:0%;top:50%;transform:translateY(-50%);text-align:center;padding-top:50px;}
.m2ban_t1{font-size:32px;line-height:50px;display:inline-block;}
.m2ban_t2{font-size:40px;line-height:50px;font-weight:600;text-transform:uppercase;}
.m2banTxt i{background:#FFF;height:3px;width:38px;display:block;margin:18px auto 0px;}
.m2Footer{position:static;}
.m2pos{background:#F4F4F4;padding:26px 0px;}
.m2posItms{background:url(../images/m2icon1.png) no-repeat left 3px;font-size:14px;color:#777777;line-height:22px;position:relative;padding:0px 260px 0px 20px;}
.m2case_st1{font-size:16px;color:#555;padding:69px 0px 37px;line-height:28px;text-align:center;}
.m2caseTop{padding:0px 15px;}
.m2caseTop li{margin-bottom:45px;padding:0px 35px;}
.m2caseIconBox{border:1px solid #B5B5B5;text-align:right;font-size:16px;color:#aeaeae;line-height:20px;font-weight:bold;padding:40px 42.4% 40px 0px;text-transform:uppercase;position:relative;}
.m2caseIcon{background:url(../images/m2icon2_1.png) no-repeat center center;height:62px;width:62px;position:absolute;right:17.8%;top:50%;transform:translateY(-50%)}
.m2caseTop{padding-bottom:20px;}
.m2caseTop li:nth-child(2) .m2caseIcon{background:url(../images/m2icon2_2.png) no-repeat center center;}
.m2caseTop li:nth-child(3) .m2caseIcon{background:url(../images/m2icon2_3.png) no-repeat center center;}
.m2case_st2{line-height:30px;font-size:17px;color:#111;padding:24px 0px 0px 23px;position:relative;}
.m2case_st2:after{content:"";height:2px;width:12px;background:#E83827;position:absolute;left:0px;top:38px;}
.m2caseItms{margin-top:18px;position:relative;}
.m2caseItms dt{background:url(../images/m2icon3.png) no-repeat 4px 8px;padding-left:23px;line-height:24px;margin-bottom:10px;font-size:14px;font-weight:bold;}
.m2caseDes{font-size:12px;line-height:22px;color:#888888;height:66px;overflow:hidden;}
.m2case_more{background:#FFF url(../images/m2icon4.png) no-repeat right center;display:inline-block;line-height:22px;white-space:nowrap;position:absolute;right:0px;bottom:0px;padding:0px 12px 0px 32px;color:#E82C1A;}
.m2caseBom{background:#f3f3f3;padding:56px 0px 60px;}
.m2case_t1{line-height:84px;border-bottom:1px solid #DDDDDD;margin:0px auto;width:100%;max-width:585px;font-size:28px;color:#222222;text-align:center;position:relative;}
.m2case_t1:after{content:"";background:#E83827;height:5px;width:44px;position:absolute;left:50%;bottom:-3px;margin-left:-22px;}
.m2case_menu{text-align:center;padding:35px 0px 15px;}
.m2caseMenu_a1{padding:0px 32px;margin:0px 6px;line-height:35px;display:inline-block;height:37px;border:1px solid #AAAAAA;border-radius:0.2em;color:#666666;}
.m2caseMenu_a1:hover,.m2caseMenu_a1.on{color:#FFF;border:1px solid #E83827;background:#E83827;}
.m2caseLogo{padding-bottom:40px;}
.m2caseLogo .swiper-pagination-bullet{opacity:1;height:12px;width:12px;background:#FFF;border:1px solid #A3A3A3;background:none}
.m2caseLogo .swiper-pagination-bullet-active{opacity:1;background:#E83827;border:1px solid #E83827;}
.m2caseLogo .hmp7Lg{margin:18px 0}
.m2usTop{padding:45px 0px 60px;}
.m2comEditor{padding-top:48px;font-size:14px;line-height:30px;color:#777777;}
.m2comImg{float:left;margin-right:45px;}
.m2usCon2{background:#F4F4F4;padding:58px 0px 42px}
.m2usCon3{background:url(../images/m2usBg.jpg) no-repeat center center;background-size:cover;padding:74px 0px 90px;}
.m2usDes{font-size:14px;line-height:28px;padding:45px 0px 50px;color:#777;}
.m2usCon3 .hmp2Itms_a{background:none!important;border:1px solid #919191!important;color:#919191!important;}
.m2usCon3 .hmp2ItmsTxt p{color:#919191!important;}
.m2usAta{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);}
.m2usCon3 .m2usLogo .hmp2Itms_a{background:#e83827!important;border:1px solid #e83827!important;}
.m2usCon3 .hmp2Itms_a:hover{background:#e83827!important;border:1px solid #e83827!important;color:#fff!important;}
.m2usCon3 .hmp2Itms_a:hover .hmp2ItmsTxt p{color:#fff!important;}
.m2usCon3 .hmp2_ul{transform:scale(0.88)}
.rMneu{height:178px;width:58px;position:fixed;margin-top:-89px;top:50%;right:0px;z-index:90;}
.rMneu li{height:58px;width:58px;position:relative;margin-bottom:2px;}
.rMenu_icon{height:58px;width:58px;font-size:18px;line-height:58px;color:#B3B3B3;text-align:center;display:block;background:#EBEBEB;border-radius:0.1em;cursor:pointer;transition:all 0.3s ease}
.rMenu_icon:hover{background:#E83827;color:#fff;}
.rMenu_share{height:47px;width:195px;border:1px solid #D3D3D3;position:absolute;top:6px;right:68px;border-radius:0.3em;background:#FFF;font-size:14px;color:#666;line-height:45px;padding-left:11px;transform:translateX(-30px);transition:all 0.5s ease-in-out;opacity:0;visibility:hidden;}
.rMneu li:hover .rMenu_share{transform:translateX(0px);opacity:1;visibility:visible;}
.rMenu_share:after{content:"";background:url(../images/rhmArrow.png) no-repeat;height:8px;width:6px;margin-top:-4px;position:absolute;top:50%;right:-6px;}
.rMenu_share1{font-size:18px;color:#FFF;background:#6CD563;height:30px;width:30px;display:inline-block;float:left;margin:7px 5px 0px;line-height:30px;text-align:center;border-radius:50%;}
.rMenu_share2{font-size:18px;color:#FFF;background:#FFC345;height:30px;width:30px;display:inline-block;float:left;margin:7px 5px 0px;line-height:30px;text-align:center;border-radius:50%;}
.rMenu_share3{font-size:18px;color:#FFF;background:#FE6E6E;height:30px;width:30px;display:inline-block;float:left;margin:7px 5px 0px;line-height:30px;text-align:center;border-radius:50%;}
.rMenu_share a:hover{color:#fff;}
.rMenu_tel{height:47px;width:165px;border:1px solid #D3D3D3;position:absolute;top:6px;right:68px;border-radius:0.3em;background:#FFF;font-size:20px;color:#e83827;line-height:45px;text-align:center;transform:translateX(-30px);transition:all 0.5s ease-in-out;opacity:0;visibility:hidden;}
.rMenu_tel:after{content:"";background:url(../images/rhmArrow.png) no-repeat;height:8px;width:6px;margin-top:-4px;position:absolute;top:50%;right:-6px;}
.rMneu li:hover .rMenu_tel{transform:translateX(0px);opacity:1;visibility:visible;}
.m2usSwiper{height:330px;max-width:982px;margin:50px auto 0px;position:relative;background:url(../images/m2yyLine.png) no-repeat center 320px;}
.m2yySbox{height:216px;background:#E83827;padding:0px 132px;position:relative;display:table;width:100%;}
.m2YYSwiper{width:750px;padding-top:60px;background:url(../images/m2yy_bg.png) no-repeat center top;height:330px;background-size:100% 60px;}
.m2usSwiper .swiper-pagination .swiper-pagination-bullet{height:11px;width:11px;border:2px solid #ACACAC;opacity:1;background:#f4f4f4;margin:0 35px;}
.m2usSwiper .swiper-pagination{height:11px;bottom:5px;}
.m2usSwiper .swiper-pagination .swiper-pagination-bullet-active{background:#E83827;border:2px solid #E83827;}
.m2usBtnL{background:#E83827 url(../images/m2yy_btn.png) no-repeat center center;height:42px;width:42px;position:absolute;left:0px;top:147px;cursor:pointer;border-radius:50%;}
.m2usBtnR{background:#E83827 url(../images/m2yy_btn.png) no-repeat center center;height:42px;width:42px;position:absolute;right:0px;top:147px;cursor:pointer;border-radius:50%;transform:rotate(180deg);}
.m2YYSwiper:before{content:"";background:#E83827 url(../images/m2us_icon.png) no-repeat 42px center;height:216px;width:130px;position:absolute;top:60px;left:0px;z-index:10;}
.m2YYSwiper:after{content:"";background:#E83827 url(../images/m2us_icon.png) no-repeat 42px center;height:216px;width:130px;position:absolute;top:60px;right:0px;z-index:10;transform:rotateY(180deg)}
.m2yyStxt{display:table-cell;height:100%;text-align:center;font-size:18px;line-height:36px;color:#FFF;vertical-align:middle;}
.m2subMenu{line-height:66px;height:66px;background:rgba(0,0,0,0.2);text-align:center;width:100%;position:relative;z-index:3;font-size:0;margin-top:-66px;}
.m2subMenu_a{color:#eeeeee;line-height:66px;display:inline-block;padding:0px 50px;font-size:16px;position:relative;top:-1px;border-right:1px solid rgba(255,255,255,0.3);}
.m2subMenu_a:first-child{border-left:1px solid rgba(255,255,255,0.3);}
.m2subMenu_a.on,.m2subMenu_a:hover{font-weight:bold;background:#e83827;color:#FFF;}
.m2fw_txt1{color:#555555;font-size:16px;line-height:34px;padding:65px 0px 72px;}
.m2fw_u1{margin:0px -20px 60px;}
.m2fw_u1 li{margin-bottom:20px;}
.m2fw_bx1{border:1px solid #CACACA;padding:62px 15px 35px;position:relative;}
.m2fwIcon{background:#E83827 url(../images/m2fw_icon1.png) no-repeat center center;height:110px;width:110px;position:absolute;left:50%;top:-55px;margin-left:-55px;border-radius:50%}
.m2fw_bx1 strong{font-size:18px;line-height:65px;text-align:center;display:block;height:65px;}
.m2fw_dl dd{font-size:13px;line-height:26px;height:26px;background:url(../images/m2icon3.png) no-repeat left center;padding-left:12px;float:left;width:50%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.m2fw_dl{margin:0px auto;width:250px;color:#787878;}
.m2fw_ells{display:block;padding-left:37px;width:250px;margin:5px auto 0;}
.m2fw_u1 li:nth-child(2) .m2fwIcon{background:#ed9f24 url(../images/m2fw_icon2.png) no-repeat center center;}
.m2fw_u1 li:nth-child(3) .m2fwIcon{background:#1abbaf url(../images/m2fw_icon3.png) no-repeat center center;}
.m2fw_u1 li:nth-child(3) .m2fw_dl{width:320px;}
.m2fwCon1{background:#F3F3F3;padding:98px 0px 110px;}
.m2fwc1box{position:relative;max-width:1070px;margin:0 auto;padding-right:452px;}
.m2fwc1box strong{line-height:102px;display:block;height:102px;font-size:28px;color:#111;font-weight:normal;}
.m2fwc1box strong img{margin-right:14px;}
.m2fwc1box strong text,.m2fwc1box strong img{vertical-align:middle;}
.m2fwDes{font-size:15px;line-height:28px;color:#777777;margin-bottom:25px;}
.m2fw_d2 dd,.m2fw_d2 li{font-size:15px;line-height:28px;color:#777;background:url(../images/m2icon3.png) no-repeat left center;padding-left:14px;height:28px;width:138px;float:left;}
.m2fw_d2{width:280px;}
.m2fwImgIcon1{position:absolute;top:50%;right:0px;transform:translateY(-40%)}
.m2fwCon2{padding:98px 0px 110px;}
.m2fwCon2 .m2fwImgIcon1{right:auto;left:0;transform:translateY(-45%)}
.m2fwCon2 .m2fwc1box{padding-right:0;padding-left:452px;}
.m2fwCon3 .m2fwImgIcon1{transform:translateY(-50%)}
.m2fw_u2{margin:-30px auto 0px;max-width:1100px;padding-bottom:35px;}
.m2fw_u2 li{text-align:center;float:left;width:33.3333%;margin-bottom:30px;}
.m2fw_sbx{background:url(../images/m2fw_bg1.png) no-repeat;height:246px;width:226px;margin:0px auto;color:#FFF;font-size:14px;line-height:24px;}
.m2fw_sbx strong{line-height:54px;padding-top:50px;display:block;margin-bottom:15px;font-size:22px;font-weight:500;}
.m2fw_u2 li:nth-child(2) .m2fw_sbx{background:url(../images/m2fw_bg2.png) no-repeat;}
.m2fw_u2 li:nth-child(3) .m2fw_sbx{background:url(../images/m2fw_bg3.png) no-repeat;}
.m2fwBom{background:#f3f3f3 url(../images/m2fw_bg4.jpg) no-repeat center bottom;padding:78px 0px 70px;background-size:100% auto;font-size:14px;line-height:26px;color:#666;}
.m2fw_bt1{font-size:28px;color:#222;line-height:36px;padding:70px 0px 0px;text-align:center;}
.m2fw_txt2{font-size:14px;line-height:28px;padding:36px 0px 50px;}
.m2fw_u3 li{padding:0px 25px;float:left;width:33.3333%;margin-bottom:25px;}
.m2fw_u3{padding:0px 25px 60px;}
.m2fw_u3box{padding:0px;height:158px;background:#E83827;position:relative;}
.m2fw_u3txt{line-height:18px;text-transform:uppercase;padding:0px 16%;color:#FFF;position:absolute;width:100%;left:0px;top:50%;text-align:center;transform:translateY(-50%)}
.m2fw_u3txt strong{font-size:20px;font-weight:bold;display:block;line-height:38px;}
.m2fw_u3 li:nth-child(2) .m2fw_u3box{background:#ed9f24;}
.m2fw_u3 li:nth-child(3) .m2fw_u3box{background:#1abbaf;}
.m2fw2_s1{font-size:18px;line-height:38px;padding:15px 0px 45px 10%;text-align:center;}
.m2fw_mapBg{background:#f3f3f3 url(../images/m2map_bg.png) no-repeat center center;padding:20px 0px 30px;}
.m2fw_u4{text-align:center;display:block;font-size:0px;margin-top:60px;}
.m2fw_u4 li{width:20%;margin-bottom:32px;padding-top:150px;text-align:center;position:relative;display:inline-block;}
.m2fw_iconBox{height:124px;width:124px;margin-left:-62px;position:absolute;left:50%;top:0px;border:2px solid #E83827;border-radius:50%;transition:all 0.3s ease-in-out;}
.m2fw_iconBox img{margin-top:-35px;margin-left:-35px;position:absolute;left:50%;top:50%;}
.m2fw_u4 li:hover .opacity{opacity:1;}
.m2fw_u4 li:hover .m2fw_iconBox{background:#e83827;}
.m2fw_u4 p{margin:0px auto;width:140px;font-size:16px;line-height:26px;color:#555;height:78px;overflow:hidden;}
.m2fw2Con1{margin:74px auto 32px;max-width:996px;}
.m2fw2Con1 ul{margin:0px -6px;}
.m2fw2Con1 ul li{padding:0px 6px;margin-bottom:12px;float:left;width:25%;}
.m2fw_abox1 .overflowHide{height:352px;}
.m2fw_anm{line-height:36px;color:#FFF;height:36px;z-index:3;text-align:center;font-size:13px;position:absolute;width:100%;left:0px;background:rgba(227,43,24,0.8);display:block;bottom:-36px;transition:all 0.3s ease-in-out;}
.m2fw_abox1:hover .m2fw_anm,.m2fw_abox2:hover .m2fw_anm{bottom:0;}
.m2fw_abox2{display:block;height:170px;margin-bottom:12px;}
.m2fw_abox2 .overflowHide{height:170px;}
.m2ks_u1{display:block;font-size:0px;text-align:center;max-width:868px;margin:-20px auto 45px;}
.m2ks_u1 li{width:33.3333%;margin-bottom:20px;line-height:26px;text-align:center;font-size:16px;display:inline-block;}
.m2ksu1_itms{display:inline-block;height:146px;width:146px;border:3px solid #e83827;position:relative;border-radius:50%;padding-top:85px;transition:all 0.3s ease-in-out;color:#e83827;}
.m2ksu1_itms img{position:absolute;left:50%;top:28px;margin-left:-25px;}
.m2ks_u1 li:hover .opacity{opacity:1;}
.m2ks_u1 li:hover .m2ksu1_itms{color:#fff;background:#e83827;}
.m2ksItmsBox1{background:#E83827;padding:96px 0px 60px;}
.m2ksItms_u1{margin:0px -35px;}
.m2ksItms_u1 li{padding:0px 35px;margin-bottom:30px;}
.m2ksItms_sbox{position:relative;padding-left:82px;color:#ffffff;line-height:24px;}
.m2ksIicon{height:60px;width:60px;text-align:center;padding-top:15px;background:#FFF;display:block;position:absolute;left:0px;top:18px;border-radius:50%;}
.m2ksItms_sbox strong{line-height:58px;height:58px;font-size:16px;font-weight:bold;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block;}
.m2ksBom{padding:90px 0px 40px;max-width:1113px;margin:0px auto;}
.m2ksBomBox{height:248px;margin-bottom:50px;position:relative;padding-left:83px;}
.m2ksBom_t{height:100%;width:58px;font-size:18px;line-height:20px;color:#FFF;padding:0px 18px;text-align:center;display:table;background:#E83827;font-weight:500;position:absolute;left:0px;top:0px;}
.m2ksBom_t:after{content:"";width:0;height:0;border-top:11px solid transparent;border-bottom:11px solid transparent;border-left:10px solid #E83827;position:absolute;top:50%;right:-10px;margin-top:-10px;}
.m2ksBom_t div{height:100%;text-align:center;vertical-align:middle;display:table-cell;}
.m2ksBom_ul{margin:0px -20px;}
.m2ksBom_abox{height:248px;display:block}
.m2ksBom_abox .overflowHide{height:248px;}
.m2ksTag{background:url(../images/m2ks_arrow1.png) no-repeat center center;line-height:28px;font-size:13px;font-weight:bold;color:#FFF;text-align:center;display:block;height:48px;width:48px;padding-right:20px;position:absolute;left:0px;top:0px;}
.m2ksTnm{line-height:42px;text-align:center;display:block;height:42px;color:#FFF;font-size:14px;position:absolute;width:100%;left:0px;bottom:0px;background:rgba(0,0,0,0.6);}
.m2ksBomBox:nth-child(2) .m2ksBom_t{background:#ed9f24;}
.m2ksBomBox:nth-child(2) .m2ksBom_t:after{border-left:10px solid #ed9f24;}
.m2ksBomBox:nth-child(2) .m2ksTag{background:url(../images/m2ks_arrow2.png) no-repeat left top;}
.m2ksBomBox:nth-child(3) .m2ksBom_t{background:#1abbaf;}
.m2ksBomBox:nth-child(3) .m2ksBom_t:after{border-left:10px solid #1abbaf;}
.m2ksBomBox:nth-child(3) .m2ksTag{background:url(../images/m2ks_arrow3.png) no-repeat left top;}
.m2jm{padding:60px 0px 0px;margin:0px -27px 12px;}
.m2jm li{padding:0px 27px;margin-bottom:44px;}
.m2jmBox{border:1px solid #C4C4C4;padding:0px 11%;position:relative;}
.m2jmBox:after{content:"";background:url(../images/m2jm_icon.jpg) no-repeat;height:47px;width:47px;position:absolute;top:-6px;right:-6px;}
.m2jmBox strong{text-align:center;display:block;padding:47px 0px 24px;border-bottom:1px solid #D6D6D6;font-size:20px;color:#000;line-height:36px;font-weight:500;}
.m2jmDes{padding:27px 0px;font-size:13px;line-height:30px;color:#777777;border-bottom:1px solid #D6D6D6;}
.m2jmDes_info{font-size:15px;line-height:28px;font-weight:800;color:#e83827;padding:28px 0px 50px;}
.m2lx_t1{font-size:28px;color:#222222;line-height:70px;padding-top:48px;text-align:center;border-bottom:1px solid #DDDDDD;width:100%;max-width:585px;margin:0px auto 45px;position:relative;}
.m2lx_t1:after{content:"";background:#E83827;height:5px;width:44px;margin-left:-22px;position:absolute;left:50%;bottom:-3px;}
.m2lx_u1 li{margin-bottom:25px;padding:0px 3%;font-size:14px;line-height:32px;color:#666;}
.m2lx_u1{margin:0px -3% 58px;}
.m2lx_u1 li strong{line-height:66px;display:block;height:66px;font-size:18px;color:#000;font-weight:500;}
.m2lx_u1 li strong img{float:left;margin:19px 12px 0px 0px;}
.m2lx_p{max-width:290px;}
.m2lx_wxImg{float:left;margin-right:22px;border:1px solid #DCDCDC;}
.m2lx_wxImg img{display:block;}
.m2lxCon1{background:url(../images/m2lx_bg.jpg) no-repeat center center;height:438px;position:relative;}
.m2lxAdr{background:url(../images/m2lxIcon1.png) no-repeat;height:36px;width:36px;position:absolute;left:50%;bottom:88px;margin-left:-18px;}
.m2lxAdr img{position:absolute;left:50%;bottom:46px;margin-left:-210px;}
.m2lxFm{margin:0px auto 74px;max-width:1034px;}
.m2lx_li01{margin:0px -6px;}
.m2lx_li01 li{padding:0px 6px;margin-bottom:13px;position:relative;}
.m2lx_int1{padding:0px 10px 0px 40px;width:100%;font-size:14px;line-height:45px;color:#666;height:45px;background:#EEEEEE;border-width:0px;border-style:none;border-radius:0.2em;}
.m2lxArea{background:#eeeeee;font:14px/26px "微软雅黑";color:#666;padding:9px 10px 9px 40px;height:150px;border-width:0px;border-style:none;border-radius:0.2em;width:100%;}
.m2lxAreaBox{margin-bottom:20px;position:relative;}
.m2lx_abtn{background:#E83827;font-size:15px;line-height:45px;color:#FFF;text-align:center;display:block;height:45px;border-radius:0.2em;}
.m2lx_abtn:hover{background:#D92B17;color:#FFF;}
.m2lx_btns{margin:0px -6px;}
.m2lx_btns li{padding:0px 6px;position:relative;}
.m2lx_abtn2{background:#9b9b9b;font-size:15px;line-height:45px;color:#FFF;text-align:center;display:block;height:45px;border-radius:0.2em;}
.m2lx_abtn2:hover{background:#888888;color:#FFF;}
.m2lxFm i{color:#888888;font-size:16px;line-height:42px;height:42px;width:24px;text-align:center;position:absolute;left:15px;top:2px;}
.m2cp_con1{background:#F3F3F3;padding:85px 0px 92px;}
.m2cp_t1{line-height:46px;font-size:28px;color:#222222;text-align:center;position:relative;margin-bottom:52px;}
.m2cp_t1:before{content:"";background:#D2D2D2;height:1px;width:100%;position:absolute;left:0px;top:50%;}
.m2cp_t1 span{display:inline-block;background:#F3F3F3;padding:0px 32px;position:relative;z-index:2;}
.m2zp_abox1{display:block;margin:0px auto;height:114px;width:114px;border:2px solid #e83827;border-radius:50%;position:relative;transition:all 0.3s ease-in-out;}
.m2zp_abox1 img{position:absolute;left:50%;top:50%;margin:-26px 0 0 -25px;}
.m2zp_u1 li{width:20%;display:inline-block;text-align:center;margin-bottom:20px;}
.m2zp_u1{margin:-30px auto 25px;max-width:1055px;font-size:0px;display:block;}
.m2zp_u1 li strong{line-height:70px;text-align:center;display:block;font-size:16px;color:#333;}
.m2zp_u1 li:hover .opacity{opacity:1;}
.m2zp_u1 li:hover .m2zp_abox1{background:#e83827;}
.m2zpCon2{background:#e83827;padding:85px 0px;text-align:center;}
.m2zp_itms1{background:url(../images/m2zp_sicon1.png) no-repeat 62px center;padding-left:174px;line-height:170px;height:174px;width:352px;border:2px solid #FFF;font-size:18px;font-weight:bold;color:#FFF;display:inline-block;margin-right:8%;border-radius:0.3em;text-align:left;}
.m2zpItmsIcon{background:url(../images/m2zp_sicon3.png) no-repeat center center;display:inline-block;height:174px;width:19px;}
.m2zpCon2 span{vertical-align:middle;}
.m2zp_itms2{background:url(../images/m2zp_sicon2.png) no-repeat center 35px;line-height:50px;height:174px;width:352px;border:2px solid #FFF;font-size:18px;font-weight:bold;color:#FFF;display:inline-block;border-radius:0.3em;text-align:center;padding-top:105px;margin-left:8%;}
.m2zpCon3{padding:62px 0px 35px;}
.m2zp_sb1{line-height:44px;text-align:center;display:block;padding-top:16px;font-size:18px;color:#666666;}
.m2nSerBox{line-height:32px;height:34px;width:240px;border:1px solid #BFBFBF;margin-top:-17px;position:absolute;top:50%;right:0px;}
.m2nSerInt{padding:0px 55px 0px 15px;font-size:14px;line-height:32px;color:#666;border-width:0px;border-style:none;height:32px;width:100%;background:none;}
.m2nSerBtn{background:#E83827 url(../images/serBtn.png) no-repeat center center;height:34px;width:40px;display:block;position:absolute;top:-1px;right:-1px;}
.m2nSerBtn:hover{background:#DD2C17 url(../images/serBtn.png) no-repeat center center;}
.page{text-align:center;height:87px;}
.m2nList{border-bottom:1px solid #DDDDDD;padding-top:70px;margin-bottom:52px;}
.m2nList_aBox{display:block;height:160px;}
.m2nList ul li{margin-bottom:70px;}
.m2nList_aBox .overflowHide{height:160px;width:360px;float:left;}
.m2nHot{background:url(../images/hot.png) no-repeat;height:39px;width:39px;position:absolute;left:20px;top:0px;}
.m2nText{margin-left:492px;position:relative;}
.m2nText .ellipsis{line-height:36px;display:block;height:36px;font-size:18px;font-weight:normal;margin-bottom:10px;}
.m2nText p{font-size:14px;line-height:24px;color:#777777;height:48px;overflow:hidden;}
.m2nDes{padding:12px 0px 20px;border-top:1px solid #ddd;}
.m2nTime{line-height:24px;font-size:14px;font-weight:bold;color:#cccccc;text-align:center;width:60px;position:absolute;left:-96px;top:4px;padding-top:50px;}
.m2nTime span{display:block;width:100%;line-height:50px;height:50px;position:absolute;left:0px;top:0px;font-size:56px;font-weight:normal;}
.m2nList_aBox:hover .ellipsis{font-weight:500;}
.m2nList_aBox:hover .hmMore{color:#FFF;background:#e83827;padding-left:28px;}
.m2nList_aBox:hover .hmMore:before{width:100%;}
.m2nList_aBox:hover .hmMore:after{background:url(../images/hmp3_arrow2.png) no-repeat right center;width:30px;right:23px;}
.m2nBack{background:#E4E4E4 url(../images/m2nback.png) no-repeat 36px center;padding-left:64px;font-size:16px;font-weight:bold;color:#e83827;line-height:74px;height:74px;width:160px;margin-top:-37px;position:absolute;top:50%;right:0px;display:block;}
.m2nTop{text-align:center;padding:50px 0px;border-bottom:1px solid #ddd;margin-bottom:58px;position:relative;}
.m2n_bt{font-size:26px;color:#000000;line-height:42px;}
.m2nInfo{text-align:center;line-height:24px;color:#999999;margin-top:12px;}
.m2nInfo span{margin:0px 10px;}
.m2nInfo span i{font-size:16px;margin-right:4px;}
.m2share{height:34px;width:160px;position:absolute;left:50%;bottom:-19px;margin-left:-80px;text-align:center;font-size:0px;}
.m2share_a{height:34px;width:34px;border:1px solid #BCBCBC;display:inline-block;font-size:16px;line-height:32px;color:#BCBCBC;background:#FFF;border-radius:50%;margin:0px 5px;}
.m2share_a:hover{border:1px solid #e83827;}
.m2nEditor{font-size:14px;line-height:28px;color:#777777;padding-bottom:62px;}
.m2dpage{margin-bottom:70px;border-top:1px solid #D3D3D3;border-bottom:1px solid #D3D3D3;}
.m2dpage_ul{border-right:1px solid #D3D3D3;border-left:1px solid #D3D3D3;}
.m2dpage_ul li{float:left;width:50%;padding:0px 60px;}
.m2dpage_ul li:first-child{border-right:1px solid #D3D3D3;background:url(../images/m2dpage_icon.png) no-repeat 30px center;}
.m2dpage_a{font-size:14px;line-height:70px;height:70px;color:#888888;}
.m2dpage_ul li:last-child{text-align:right;background:url(../images/m2dpage_icon2.png) no-repeat right center;}
.m2dpage_ul li:last-child .m2dpage_a{}
.m2zx_u1{max-width:1140px;margin:0px auto 30px;}
.m2zx_u1 li{margin-bottom:15px;}
.m2zxItms{text-align:center;font-size:16px;height:120px;border:2px solid #DCDCDC;line-height:116px;}
.m2zxItms img{margin-right:18px;}
.m2zxItms img,.m2zxItms text{vertical-align:middle;}
.m2zx_u2{max-width:1140px;margin:0px auto 30px;}
.m2zx_u2 li{margin-bottom:15px;color:#666;}
.m2zx_dl dt{line-height:44px;color:#FFF;background:#E83827;height:44px;text-align:center;font-size:17px;font-weight:800;}
.m2zx_dl dd{padding:25px 0px;border-right:1px solid #BFBFBF;border-bottom:1px solid #BFBFBF;border-left:1px solid #BFBFBF;}
.m2zx_dl dd p{float:left;width:33.3333%;padding-left:6%;height:30px;font-size:16px;line-height:30px;}
.m2zx_dl dd p span{display:inline-block;background:url(../images/m2icon3.png) no-repeat left center;padding-left:13px;}
.m2zxCon2{background:#f3f3f3;padding-bottom:60px;}
.m2zx_u3{max-width:1100px;margin:0px auto;position:relative;}
.m2zx_u3:after{content:"";height:100%;background:#ddd;width:1px;position:absolute;left:50%;top:0px;}
.m2zx_u3 li strong{line-height:54px;height:54px;font-size:20px;color:#222222;font-weight:500;}
.m2zx_u3 li strong span{background:url(../images/m2zx_icon4.png) no-repeat center center;text-align:right;height:54px;font:500 28px/54px Georgia;margin-right:10px;display:inline-block;padding-left:20px;color:#e83827;}
.m2zx_imgBox{padding:38px 0px 50px;}
.m2zx_u3 li{padding-left:7.2%;}
.m2xz_caseList ul li{font-size:18px;line-height:56px;text-align:center;margin-bottom:35px;}
.m2hz_menu{text-align:center;padding:35px 0px 15px;}
.m2hz_menu_a1{padding:0px 32px;margin:0px 6px;line-height:35px;display:inline-block;height:37px;border:1px solid #AAAAAA;border-radius:0.2em;color:#666666;}
.m2hz_menu_a1:hover,.m2hz_menu_a1.on{color:#FFF;border:1px solid #E83827;background:#E83827;}
.m2hzLogo{padding-bottom:40px;}
.m2hzLogo .swiper-pagination-bullet{opacity:1;height:12px;width:12px;background:#FFF;border:1px solid #A3A3A3;background:none}
.m2hzLogo .swiper-pagination-bullet-active{opacity:1;background:#E83827;border:1px solid #E83827;}
.m2hzLogo .hmp7Lg{margin:18px 0}
.m2zp_t1{font-size:30px;color:#222;line-height:52px;text-align:center;padding:62px 0px 15px;}
.m2zp_p{font-size:14px;line-height:30px;color:#777777;text-align:center;margin-bottom:20px;}
.m2zpTop{margin:0px auto;max-width:885px;text-align:center;padding-bottom:58px;}
.m2zp_send{background:url(../images/m2zp_icon6.png) no-repeat left top;padding-left:44px;line-height:32px;font-size:14px;font-weight:bold;color:#222222;display:inline-block;}
.keUpDownSlide{margin:0px auto 70px;border-top:1px solid #E5E5E5;}
.keUpDownSlide dl dt{line-height:88px;height:88px;position:relative;font-size:14px;color:#666666;border-bottom:1px solid #E5E5E5;transition:all 0.3s ease-in-out;position:relative;}
.keUpDownSlide dl dt:before{content:"";height:0%;width:100%;position:absolute;top:50%;left:0px;background:#e83827;transition:all 0.3s ease-in-out;}
.keUpDownSlide dl dt:hover:before{height:100%;position:absolute;top:0%;}
.keUpDownSlide dl dt:hover{color:#fff;}
.keUpDownSlide dl dt:hover .m2zp_nm{color:#fff;}
.keUpDownSlide dl dt:hover .keUpDownToggleBtn{background:url(../images/m2zp_micon2.png) no-repeat center center;}
.keUpDownSlide dl dt .container{position:relative;height:88px;}
.keUpDownSlide dl dt.on .container:after{content:"";height:0px;width:0px;border-left:15px solid transparent;border-right:15px solid transparent;border-top:12px solid #E83827;position:absolute;bottom:-11px;left:32px;}
.keUpDownToggleBtn{background:url(../images/m2zp_micon1.png) no-repeat center center;display:block;height:18px;width:18px;position:absolute;top:50%;right:15px;margin-top:-9px;}
.keUpDownSlide dl dd{color:#777;font-size:14px;line-height:30px;padding:30px 25px 45px;border-right:1px solid #f4f4f4;border-bottom:1px solid #f4f4f4;border-left:1px solid #f4f4f4;display:none;}
.keUpDownSlide dl dt.on{color:#FFF;background:#e83827;}
.keUpDownSlide dl dt.on .keUpDownToggleBtn{background:url(../images/m2zp_micon2.png) no-repeat center center;}
.m2zp_nm{float:left;width:265px;font-size:18px;color:#000;transition:all 0.3s ease-in-out}
.keUpDownSlide dl dt.on .m2zp_nm{color:#fff;}
/*2016-11-3 CSS*/
.f-cb{zoom:1;}
.f-cb:after{display:block;height:0;clear:both;visibility:hidden;overflow:hidden;content:".";}
.fl{float:left;display:inline;}
.fr{float:right;display:inline;}
.por{position:relative;}
.poa{position:absolute;}
.pof{position:fixed;}
.poa-f{position:absolute;left:0;top:0;width:100%;height:100%;}
.ovh{overflow:hidden;}
.noselect{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;}
.z1{z-index:1;}
.z2{z-index:2;}
.dn{display:none;}
.dib{display:inline-block;}
.w-f{width:100%;}
.h-f{height:100%;}
.fwn{font-weight:normal;}
.t-f{transition:all 0.5s;}
.t-c{transition:color 0.5s;}
.t-bg{transition:background 0.5s;}
.tac{text-align:center;}
.a-part .main{left:50%;top:50%;width:780px;margin-left:-390px;}
.about-fi{top:-95px;margin-bottom:-95px;}
.about-fi .tips{top:20px;margin-bottom:48px;font-size:20px;line-height:40px;color:#de0010;text-align:center;filter:alpha(opacity=0);opacity:0;}
.about-fi .tips span{display:inline-block;left:50%;bottom:-15px;width:26px;height:1px;background:#ce0211;margin-left:-13px;}
.about-fi .detail{font-size:14px;line-height:28px;color:#e0e0e0;text-align:center;filter:alpha(opacity=0);opacity:0;}
.about-fi .detail p.fz20{font-size:20px;line-height:38px;color:#ce0211;}
.about-fi .detail p.fz20.mb28{margin-bottom:28px;}
.about-fi .btns{filter:alpha(opacity=0);opacity:0;}
.about-fi .btns span{display:inline-block;width:39px;height:38px;cursor:pointer;}
.about-fi .btns span.btn{margin:46px 13px 0;}
.about-fi .btns span.prev.hover{background-position:center 40%;}
.about-fi .btns span.next.hover{background-position:center 60%;}
.about-se img.shadow{left:150%;top:0;width:1120px;margin-left:-155px;}
.about-se li{position:relative;left:535px;width:535px;height:77px;margin-bottom:30px;color:#fff;filter:alpha(opacity=0);opacity:0;}
.about-se li.fi{margin-left:309px;}
.about-se li.se{margin-left:345px;}
.about-se li.th{margin-left:381px;}
.about-se li.fo{margin-left:417px;}
.about-se li .num{width:77px;height:77px;border-radius:50%;background:#fff;font:36px/77px Arial;color:#e1000b;text-align:center;}
.about-se li .detail{width:421px;}
.about-se li p{filter:alpha(opacity=75);opacity:0.75;}
.about-se li p.t{margin-bottom:3px;font-size:18px;line-height:30px;filter:alpha(opacity=100);opacity:1;}
.about-th .name{background-image:url(../images/name03.png);}
.about-th .main{width:1004px;margin-left:-502px;}
.about-th .shadow{left:50%;top:614px;width:1330px;height:188px;background:url(../images/bg_shadow01.png) no-repeat;margin-left:-694px;filter:alpha(opacity=0);opacity:0;}
.about-th .imgs{perspective:500px;}
.about-th .imgs img{position:relative;left:307px;transform-style:preserve-3d;filter:alpha(opacity=0);opacity:0;}
.about-th .rotate7{margin:0 -2px;animation:Rotate 0.5s forwards;}
@keyframes Rotate{100%{transform:rotateY(7deg);}
}
.about-th .rotate8{margin:0 -2px;animation:RotateE 0.5s forwards;}
@keyframes RotateE{100%{transform:rotateY(-8deg);}
}
.about-th .rotate10{margin:0 -2px;animation:RotateT 0.5s forwards;}
@keyframes RotateT{100%{transform:rotateY(10deg);}
}
.about-th .rotate11{margin:0 -2px;animation:Rotate-n 0.5s forwards;}
@keyframes Rotate-n{100%{transform:rotateY(-11deg);}
}
.about-th .titles{left:0;top:0;filter:alpha(opacity=0);opacity:0;}
.about-th .titles li{top:171px;height:575px;}
.about-th .titles li.fi{left:0;width:307px;}
.about-th .titles li.se{left:307px;width:195px;}
.about-th .titles li.th{left:502px;width:221px;}
.about-th .titles li.fo{left:723px;width:281px;}
.about-th .titles .box{height:234px;padding:40px 0 0 13px;font-size:16px;line-height:24px;color:#fff;}
.about-th .titles .box.w294{width:294px;}
.about-th .titles .box.w182{width:182px;}
.about-th .titles .box.w208{width:208px;}
.about-th .titles .box.w268{width:268px;}
.about-th .titles .box.t{height:261px;}
.about-th .titles p{filter:alpha(opacity=80);opacity:0.8;}
.about-th .titles p.en{margin-bottom:12px;font:22px/30px Arial;text-transform:uppercase;filter:alpha(opacity=100);opacity:1;}
.about-th .titles .line{margin-left:3px;width:23px;height:1px;background:#fff;filter:alpha(opacity=80);opacity:0.8;}
.about-fo .name{background-image:url(../images/name16.png);}
.about-fo .title{width:178px;}
.about-fo .main{width:980px;margin-left:-490px;top:0!important}
.about-fo .detail{height:250px;margin-top:100px;filter:alpha(opacity=0);opacity:1;}
.about-fo .btn{top:90px;width:44px;height:44px;cursor:pointer;}
.about-fo .prev{left:0;display:block!important;opacity:1!important;}
.about-fo .next{right:0;display:block!important;opacity:1!important;}
.about-fo .detail .in{width:750px;height:276px;margin:0 auto;}
.about-fo .box{left:0;top:0;width:750px;height:216px;border-radius:3px;background:#E83827;font-size:16px;line-height:24px;color:#fff;}
.about-fo .box.fo{transform:translateY(-156px) scale(0.55);filter:alpha(opacity=0.8);opacity:0.08;}
.about-fo .box.fif{top:26px;opacity:0;}
.about-fo .time{height:36px;padding-left:20px;border-left:6px solid #fceceb;margin-bottom:28px;font:36px/1 Arial;display:none;}
.about-fo .list{height:20px;margin-top:0px;font:30px/58px Arial;color:#d31200;text-align:center;filter:alpha(opacity=0);opacity:1;background:url(../images/m2yyLine.png) no-repeat center 13px;}
.about-fo .list li{width:11px;height:11px;background:#FFF url(../images/bg_sign03.png) no-repeat center top;cursor:pointer;border:2px solid #acacac;overflow:hidden;text-indent:500px;margin:0px 35px;border-radius:50%;display:inline-block;float:none}
.about-fo .list ul{display:block;width:100%!important;text-align:center;position:relative;top:-21px;margin-left:0!important;}
.about-fo .list li.cur{background:#E83827;border:2px solid #E83827;}
.about-fif .main{width:1002px;margin-left:-501px;}
.about-fif .name{background-image:url(../images/name05.png);}
.about-fif .list{height:315px;padding-bottom:50px;}
.about-fif .move{height:315px;}
.about-fif ul{left:-17;top:0;width:1182px;filter:alpha(opacity=0);opacity:0;}
.about-fif li{position:relative;left:360px;width:300px;height:315px;background:#fff;margin:0 17px;line-height:20px;color:#b4b2b2;filter:alpha(opacity=0);opacity:0;}
.about-fif li .in{padding:18px 25px 0;}
.about-fif .in a{display:inline-block;width:100%;font-size:14px;line-height:25px;color:#666;}
.about-fif .in a.more{width:auto;margin-top:10px;}
.about-fif .in a:hover{color:#be010e;}
.about-fif .btn{left:50%;bottom:0;height:13px;filter:alpha(opacity=0);opacity:0;}
.about-fif .btn span{display:inline-block;width:14px;height:13px;background:url(../images/bg_btn02.png) no-repeat;margin:0 8px;cursor:pointer;}
.about-fif .btn span.cur{background-position:0 -13px;}
.about-si .name{background-image:url(../images/name15.png);}
.about-si .detail{width:545px;font-size:18px;line-height:30px;color:#fff;}
.about-si .detail .line{top:20px;width:90px;height:8px;background:#e50000;margin-bottom:21px;filter:alpha(opacity=0);opacity:0;}
.about-si .detail p{top:28px;filter:alpha(opacity=0);opacity:0;}
.about-si .detail p.fz36{font-size:36px;line-height:56px;color:#fff;}
.about-si .detail img{top:63px;filter:alpha(opacity=0);opacity:0;}
.about-fo .box-in{display:block;width:100%;position:absolute;top:50%;transform:translateY(-50%);padding-top:0!important;padding-left:130px;padding-right:130px;text-align:center;font-size:18px;line-height:36px;}
@media (max-width:1199px){.about-fo .main{width:850px;margin-left:-425px;}
.about-fo .box{width:100%;}
.about-fo .detail .in{width:650px;}
.about-fo .box-in{font-size:16px;line-height:32px;}
}
@media (max-width:991px){.about-fo .main{width:700px;margin-left:-350px;}
.about-fo .box{width:100%;}
.about-fo .detail .in{width:560px;}
.about-fo .box-in{font-size:16px;line-height:32px;}
.about-fo .list li{margin:0 25px;}
}
@media (max-width:767px){.about-fo .main{width:100%;margin-left:-0;left:0}
.about-fo .box{width:100%;}
.about-fo .detail .in{width:100%;}
.about-fo .box-in{font-size:14px;line-height:26px;padding-left:15px;padding-right:15px;}
.about-fo .list li{margin:0 6px;border-width:1px;}
.about-fo .box:before,.about-fo .box:after{display:none;}
.about-fo .btn{display:none!important;}
.about-fo .list{background:none;}
}
分享到QQ
分享到微博
微信扫一扫
