@charset "utf-8";

/* CSS Document */



@charset "utf-8";

/* CSS Document */
*{padding: 0;margin: 0; list-style:none}
body {

	font-family:Arial, Helvetica, sans-serif;

	word-break: break-all;

	word-wrap: break-word;

	background: #ffffff; margin:auto; position:relative; 

}
@font-face {font-family: 'PingFangSc';src:url('../images/PingFang_Regular.otf'); }
@font-face {font-family: 'hammerthin';src:url('../images/hammerthin.ttf'); }
/*@font-face {font-family: 'SourceHanSans';src:url('../images/SourceHanSansCN-Medium.ttf'); }*/
@font-face { font-family:'fzltchjw';src:url('../images/fzltchjw.TTF');}
*{ padding: 0;margin: 0;box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ -webkit-box-sizing:border-box; /* Safari */ }

a{text-decoration: none; color:#000000; transition:all 0.7s}

a:hover{ text-decoration:none}

em{ font-style:normal}

/*------------------public------------------*/

.clearfix {

 *zoom:1; clear:both;

}

.clearfix:after {

	content: "";

	display: block;

	clear: both;

}

.fl{float: left;}

.fr{float: right;}

.text-center{text-align: center;}
img{ border:0px;}

.pic{display:flex;justify-content:center;align-items:center;text-align:center;}
.pics{display:flex;justify-content:center;align-items:center;text-align:center;}

.pic img,.pics img{ transition:all 0.7s; width:auto; max-width:100%;/* max-height:100%;*/ transition:all 0.7s ease-out}
.inbody{/* background:url(../images/inner_bg.jpg) center repeat-y;*/}
.w1200{ width:1174px; transition:all 0.7s ease-out}
.w1215{ width:1215px; transition:all 0.7s ease-out}
.w1400{ width:1400px; margin:auto; transition:all 0.7s ease-out}
.w1300{ width:1300px; margin:auto; transition:all 0.7s ease-out}
.w1250{ width:1250px; margin:auto; transition:all 0.7s ease-out}
.auto{ margin:auto}
.center{ text-align:center}
.innerAuto{ width:89.6%; margin:auto; position:relative}
.w1024{ width:1024px; margin:auto}
.main_left{ width:15.86%; height:100%; position:fixed;z-index:3;background:#e50023; left:-30%}
.main_left.inner{ right:0; left:auto}
.main_left .logobox{ width:50%; position:relative; height:100%;  background-size:100%;/* background:url(../images/logo_bg.png) top center  no-repeat;*/}
.main_left .logobox { position:relative;  width:100%; }
.main_left .logobox   img.logopic{ position:fixed; top:70%; z-index:2; right:10%; max-width:90%; opacity:1}
.inner_logo_nav{ z-index:2; position:fixed; right:-200px; top:62.01px; width:170px; opacity:1}
.inner_logo_nav li{margin-bottom:20%}
.inner_logo_nav li a{ display:block; position:relative; width:100%}
.inner_logo_nav li p{ position:absolute; line-height:40px; text-align:center; width:100%; left:0; color:#ffffff; border-radius:10px; opacity:0; top:0; z-index:2; transition:all 0.9s;}
.inner_logo_nav li img{ transition:all 0.5s;}
.inner_logo_nav li:hover img{
	transform: rotateY(360deg); opacity:0
}
.inner_logo_nav li:first-child p{ background:#e50023}
.inner_logo_nav li:nth-child(2) p{ background:#FF5959}
.inner_logo_nav li:nth-child(3) p{ background:#FF7C3E}
.inner_logo_nav li:nth-child(4) p{ background:#FFBE57}
.inner_logo_nav li:nth-child(5) p{ background:#374be2}
.inner_logo_nav li:nth-child(6) p{ background:#ff8c24}
.inner_logo_nav li:nth-child(7) p{ background:#ffffff;color:#000000}
.inner_logo_nav li:nth-child(7):hover p{ }
.inner_logo_nav li:hover p,.inner_logo_nav li.on p{ opacity:1}
.main_left.inner{ background:#000 url(../images/cebian.jpg) bottom no-repeat;}
.xns_bt_tel_box{ width:100%; padding:15px 2%; color:#fff; background:#e50023;padding-left:0; position:relative; z-index:5}
.left_bt{ width:100%; position:absolute; width:100%; bottom:0;background:#e50023; padding-top:100px;}
.left_bt .left_ewm{ padding:5px; text-align:center}
.left_bt .left_ewm img{ max-width:50%}
.left_con_contactr { text-align:center;  width:22.36%;}
.left_con_contactr li{ display:inline-block; margin:0 2.5%; cursor:pointer}
.left_con_contactr li .ico{ width:50px}
.left_con_contactr li .ewm{ position:absolute;  z-index:3; left:0; top:-155px; opacity:0; transition:all 0.5s; left:3%}
.left_con_contactr li:hover .ewm{ opacity:1}
.left_con_contactr li .ewm img{ max-width:100%;}
.left_bt .left_con_contactr li:hover img{ opacity:0.8; box-shadow:0px 0px 5px #ccc;}
.xns_bt_tel{font-size:36px; font-family:"hammerthin"; text-align:right;}
.main_right{ width:100%; height:100%; position:relative; transition:all 0.7s}

.bannerbox{ height:auto; position:relative; width:100%;}
.logo_nav { padding-left:20%;margin-top:20%}
.logo_nav li{ margin-bottom:30%; position:relative}
.logo_nav li img{ transition:all 0.7s;}
.logo_nav li:hover img{
	transform: rotateY(360deg);
}
.logo_nav li p{ position:absolute; line-height:40px; text-align:center; width:100%; left:0; color:#ffffff; border-radius:10px; opacity:0; top:0; z-index:2; transition:all 0.9s;}
.logo_nav li:first-child p{ background:#ff8763}
.logo_nav li:nth-child(2) p{ background:#FF5959}
.logo_nav li:nth-child(3) p{ background:#FF7C3E}
.logo_nav li:nth-child(4) p{ background:#FFBE57}
.logo_nav li:nth-child(5) p{ background:#374be2}
.logo_nav li:nth-child(6) p{ background:#ff8c24}
.logo_nav li:nth-child(7) p{ background:#ffffff;color:#000000}
.logo_nav li:nth-child(7):hover p{ }
.logo_nav li:hover p,.inner_logo_nav li.on p{ opacity:1}
.mCSB_container{ margin-right:12px !important;}
/**抖动开始了**/

.doudong:hover{-webkit-animation: tada 1s .2s ease both;-moz-animation: tada 1s .2s ease both;}

@-webkit-keyframes tada{0%{-webkit-transform:scale(1);}

10%, 20%{-webkit-transform:scale(0.9) rotate(-3deg);}

30%, 50%, 70%, 90%{-webkit-transform:scale(1.1) rotate(3deg);}

40%, 60%, 80%{-webkit-transform:scale(1.1) rotate(-3deg);}

100%{-webkit-transform:scale(1) rotate(0);}}

@-moz-keyframes tada{0%{-moz-transform:scale(1);}

10%, 20%{-moz-transform:scale(0.9) rotate(-3deg);}

30%, 50%, 70%, 90%{-moz-transform:scale(1.1) rotate(3deg);}

40%, 60%, 80%{-moz-transform:scale(1.1) rotate(-3deg);}

100%{-moz-transform:scale(1) rotate(0);}}

@-webkit-keyframes flipInY{0%{-webkit-transform:perspective(400px) rotateY(90deg);

opacity:0;}

40%{-webkit-transform:perspective(400px) rotateY(-10deg);}

70%{-webkit-transform:perspective(400px) rotateY(10deg);}

100%{-webkit-transform:perspective(400px) rotateY(0deg);

opacity:1;}}

@-moz-keyframes flipInY{0%{-moz-transform:perspective(400px) rotateY(90deg);

opacity:0;}

40%{-moz-transform:perspective(400px) rotateY(-10deg);}

70%{-moz-transform:perspective(400px) rotateY(10deg);}

100%{-moz-transform:perspective(400px) rotateY(0deg);opacity:1;}}
.webfloat{ position:fixed; width:58px;z-index:99; bottom:20%; transition:all 0.5s; display:block;}
.webfloat ul{ position:relative; display:block}
.webfloat ul li{ width:100%; height:58px; margin-bottom:20px; background:url(../images/daohang.png) left no-repeat; transition:all 0.5s; cursor:pointer}
.webfloat ul li.top{ background-position:0px 0px; display:none}
.webfloat ul li.wx{ background-position:0px -78px}
.webfloat ul li.tel{ background-position:0px -158px}
.webfloat ul li.nav{ background-position:0px -237px}
.webfloat ul li.top:hover{background-position:-58px 0px}
.webfloat ul li.wx:hover{background-position:-58px -78px}
.webfloat ul li.tel:hover{background-position:-58px -158px}
.webfloat ul li.nav:hover{background-position:-58px -237px}
.webfloat ul li .telbox{ width:220px; height:auto; background:#000000; border-radius:12px; position:absolute; z-index:2; color:#ffffff; text-align:center; opacity:0; transition:all 1.2s }
.webfloat ul li .telbox img{ position:absolute; z-index:2; top:30%;}
.webfloat ul li .telbox p:first-child{ font-size:26px; padding-top:6px;}
.webfloat ul li .telbox p:nth-child(2){ font-size:15px; padding-bottom:6px;}
.webfloat.daohang{ right:5%; }
.webfloat.daohang ul li .telbox img{ right:-10px}
.webfloat.daohang .telbox{left:-230px;}
.webfloat li:hover .telbox{ opacity:1}
.webfloat.leftdh{ right:auto; left:2%}
.webfloat.leftdh .telbox{right:-230px;}
.webfloat.leftdh ul li .telbox img{ left:-10px; transform:rotate(-180deg)}