@charset "utf-8";
/* 
 * Project Name:
 * Author:浣嶇疆
 * Date:2017-10-16
 */
@font-face {
  font-family: "MyriadPro-Black";
  src: url(fonts/MyriadPro-Black.woff2) format("woff2"),
       url(fonts/MyriadPro-Black.woff) format("woff"),
       url(fonts/MyriadPro-Black.ttf) format("truetype"),
       url(fonts/MyriadPro-Black.eot) format("embedded-opentype"),
       url(fonts/MyriadPro-Black.svg) format("svg");
}
@font-face {
  font-family: "SourceSansPro-Regular";
  src: url(fonts/SourceSansPro-Regular.woff2) format("woff2"),
       url(fonts/SourceSansPro-Regular.woff) format("woff"),
       url(fonts/SourceSansPro-Regular.ttf) format("truetype"),
       url(fonts/SourceSansPro-Regular.eot) format("embedded-opentype"),
       url(fonts/SourceSansPro-Regular.svg) format("svg");
}
@font-face {
  font-family: "MyriadPro-BoldCond";
  src: url("fonts/MyriadPro-BoldCond.woff2") format("woff2"),
       url("fonts/MyriadPro-BoldCond.woff") format("woff"),
       url("fonts/MyriadPro-BoldCond.ttf") format("truetype"),
       url("fonts/MyriadPro-BoldCond.eot") format("embedded-opentype"),
       url("fonts/MyriadPro-BoldCond.svg") format("svg");
}

@font-face {
  font-family: "MyriadPro-Semibold";
  src: url("fonts/MyriadPro-Semibold.woff2") format("woff2"),
       url("fonts/MyriadPro-Semibold.woff") format("woff"),
       url("fonts/MyriadPro-Semibold.ttf") format("truetype"),
       url("fonts/MyriadPro-Semibold.eot") format("embedded-opentype"),
       url("fonts/MyriadPro-Semibold.svg") format("svg");
}



html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0px; border: 0; font-size: 100%; outline: none; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; overflow-x: hidden; }
/* always display scrollbars */
body { font: 12px/1.8 "Microsoft YaHei New","Microsoft Yahei","寰蒋闆呴粦","Hiragino Sans GB","鍐潚榛戜綋","Arial","Helvetica","SimHei","榛戜綋","STXihei","鍗庢枃缁嗛粦",sans-serif; margin: 0 auto; color: #000000; background-color: #fff; _background-attachment:fixed; 
_background-image:url(about:blank); }
body::-webkit-scrollbar,.serscoll::-webkit-scrollbar{ width:6px; height:6px;}
body::-webkit-scrollbar-thumb,.serscoll::-webkit-scrollbar-thumb { border-radius:6px; }
body::-webkit-scrollbar-track,.serscoll::-webkit-scrollbar-track{border-radius: 6px;}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
input, select { vertical-align: middle; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong { font-weight: bold; }
input { outline: none; padding:0;}
img { border: 0; }
input[type="text"], input[type="button"], input[type="submit"], input[type="reset"] ,select{ -webkit-appearance: none; border-radius: 0;}
textarea { -webkit-appearance: none; border-radius: 0; background:none; outline:none; padding:0; margin:0; border:none;}
::-moz-selection { background: #f7a300; color: #fff; text-shadow: none; }
::selection { background: #f7a300; color: #fff; text-shadow: none; }
a { text-decoration: none; blr: expression(this.onFocus=this.blur()); cursor: pointer; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; }
a:link, a:visited { text-decoration: none; }
a:active, a:hover { text-decoration: none; color:inherit;}
.clearfix:before, .clearfix:after { display: table; content: ""; line-height: 0px; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
.fc { text-align: center; }
.fr { text-align: right; }
.l { float: left; display: inline-block; }
.r { float: right; display: inline-block; }
.vt { vertical-align: top; }
.vm { vertical-align: middle; }
.inner { width:1034px; margin: 0px auto;}


/*
.mtop{ height:80px;}
.container{ padding:0 80px 70px; position:relative;}
.rtext{ position:fixed; left:35px; top:50%; z-index:20; margin-top:-151px;}
.share{ position:fixed; right:28px; top:50%; z-index:20; margin-top:-101px; padding-top:25px; padding-bottom:25px;}
.share i{ display:block; width:1px; height:25px; background:#dcdcdc; position:absolute; left:50%;}
.share i.line1{ top:0;}
.share i.line2{ top:50%; margin-top:-12px;}
.share i.line3{ bottom:0;}
*/

.banner-box{ position:relative;width:100%;height:440px;}
.banner-box img{width:100%}
.banner li{ position:relative;}
.banner li {line-height: 1; backface-visibility:hidden; opacity:1 !important; }
.banner li figure{ display:block; position:absolute; overflow:hidden; left:0; top:0; width:100%;}
.banner li figure img{ display:block; width:100%; height:303px; position:relative;}
.banner li.flex-active-slide{ z-index: 4 !important;opacity: 1;}
.banner li.flex-active-slide figure{ -webkit-animation: increaseHeight 1.2s forwards; animation: increaseHeight 1.2s forwards;}
.banner li figure{ -webkit-animation: hide 1.2s forwards; animation: hide 1.2s forwards;}
@-webkit-keyframes hide {
	0%,99% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@keyframes hide {
	0%,99% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@-webkit-keyframes increaseHeight {
	from {
		width: 0;
	}
	to {
		width: 100%;
	}
}

@keyframes increaseHeight {
	from {
		width: 0;
	}
	to {
		width: 100%;
	}
}	
.banner li.flex-active-slide .btextbg{ opacity:1; transform:translateX(0); -webkit-transform:translateX(0); -moz-transform:translateX(0); transition:0.65s 0.2s;}
.banner li.flex-active-slide .bfix{  opacity:1; transform:translateX(0); -webkit-transform:translateX(0); -moz-transform:translateX(0); transition:0.65s 0.3s;}
.banner li.flex-active-slide .bdown h2{ opacity:1; transform:translateX(0); -webkit-transform:translateX(0); -moz-transform:translateX(0); transition:0.65s 0.6s;}
.banner li.flex-active-slide .bdown .mores{ opacity:1; transform:translateX(0); -webkit-transform:translateX(0); -moz-transform:translateX(0); transition:0.65s 0.9s;}

.btext{ width:50%; height:100%; position:absolute; left:0; top:0; overflow:hidden;}
.btextbg{ width:100%; height:100%; background:rgba(220,176,100,0.3); background:#e60012\9; filter:alpha(opacity=30); position:absolute; left:0; top:0; opacity:0; transform:translateX(-100%); -webkit-transform:translateX(-100%); -moz-transform:translateX(-100%); display:none\9;}
.bfix{ width:99%; height:100%; background:rgba(220,176,100,0.5); background:#e60012\9; filter:alpha(opacity=50); position:absolute; left:0; top:0; transform:translateX(-100%); -webkit-transform:translateX(-100%); -moz-transform:translateX(-100%); opacity:0; z-index:5;}
.bdown{ width:75%; left:12.5%; bottom:80px; position:absolute;}
.bdown h2{ line-height:1.1; color:#ffffff; font-size:32px; margin-bottom:50px; opacity:0; transform:translateX(-60px); -webkit-transform:translateX(-60px); -moz-transform:translateX(-60px);}
.bdown .mores{ transform:translateX(-50px); -webkit-transform:translateX(-50px); -moz-transform:translateX(-50px); opacity:0;}
.mores{ width:162px; height:56px; position:relative;}
.mores a{ display:block; position:absolute; left:0; top:0; width:100%; height:100%; perspective:200px; -webkit-perspective:200px;}
.mores .three-d-box{ transform-style: preserve-3d; -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; pointer-events: none; position: absolute;
top:0; left: 0; display:block; width:100%; height: 100%; transform:translatez(-28px); -webkit-transform:translatez(-28px); -ms-transform:translatez(-28px); -moz-transform:translatez(-28px); transition:all .32s ease-out;}
.mores span.defal,.mores span.end{ display:block; width:100%; height:56px; line-height:56px; color:#fff; font-size:14px; font-family:"Arial"; background:#e60012; text-align:center; transition:0.34s; position:absolute; left:0; top:0; transition:0.35s;}
.mores span i{ display:inline-block; width:6px; height:7px; background:url(../images/arrow1.png) center no-repeat; margin-left:10px;}
.mores span.defal{ transform:rotatex(0deg) translatez(28px); -webkit-transform:rotatex(0deg) translatez(28px); -moz-transform:rotatex(0deg) translatez(28px); -ms-transform:rotatex(0deg) translatez(28px); }
.mores span.end{ transform:rotatex(-90deg) translatez(28px); -moz-transform:rotatex(-90deg) translatez(28px); -ms-transform:rotatex(-90deg) translatez(28px); -webkit-transform:rotatex(-90deg) translatez(28px);}
.bdown .mores span.end{ display:none\9;}
.bdown .mores a:hover span.defal{ background:#ddaf63\9;}
.mores a:hover .three-d-box{transform: translateZ(-28px) rotateX(90deg); -webkit-transform: translateZ(-28px) rotateX(90deg); -moz-transform: translateZ(-28px) rotateX(90deg); -ms-transform: translateZ(-28px) rotateX(90deg);}
.mores a:hover span.end{ background:#ddaf63;}
.moredown a:hover span i{ transform:rotate(90deg); -webkit-transform:rotate(90deg); -ms-transform:rotate(90deg);}
.banner-box .flex-control-nav{ position:absolute; right:36px; top:50%; z-index:10; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%);}
.banner-box .flex-control-nav li{ margin-top:15px; line-height:1;}
.banner-box .flex-control-nav li:first-child{ margin-top:0;}
.banner-box .flex-control-nav li a{ display:block; width:3px; height:3px; border-radius:50%; border:3px solid #fff; background:#fff; text-indent:9999px; overflow:hidden;} 
.banner-box .flex-control-nav li a.flex-active{ background:#ccba94;}
.mousedown{ padding:15px 0; text-align:center;}
.mousedown i{ display:block; width:22px; height:41px; margin:auto; background:url(../images/mouse.png) center no-repeat; margin:auto; position:relative;}
.mousedown i:before{ content:""; width:2px; height:8px; background:url(../images/dit.png) center no-repeat; position:absolute; left:50%; margin-left:-1px; top:12px; animation:moveDownSpot 1000ms infinite; -webkit-animation:moveDownSpot 1000ms infinite; -moz-animation:moveDownSpot 1000ms infinite;}

@keyframes moveDownSpot {
	from{
		opacity: 1;
		top: 8px;
	}
	to{
		opacity: 0;
		top: 22px;
	}
}
@-webkit-keyframes moveDownSpot {
	from{
		opacity: 1;
		top: 8px;
	}
	to{
		opacity: 0;
		top: 22px;
	}
}