@charset "utf-8";

/* reset.css */
html {margin:0;padding:0;border:0;}
body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline; list-style: none;}
article, aside, dialog, figure, footer, header, hgroup, nav, section {display:block;}
body {line-height:1.5; font-size: 14px; font-family: Microsoft YaHei; }
table {border-collapse:separate;border-spacing:0;}
caption, th, td {text-align:left;font-weight:normal;float:none !important;}
table, th, td {vertical-align:middle;}
blockquote:before, blockquote:after, q:before, q:after {content:'';}
blockquote, q {quotes:"" "";}
a img {border:none;}
select, input, img { vertical-align: middle; outline: none;border:0 }
a { text-decoration: none;  blr: expression(this.onFocus=this.blur());outline: none; }
a:hover {  text-decoration: none; }
a:focus{ outline: none;}
.ovf{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;-ms-text-overflow: ellipsis;-o-text-overflow: ellipsis;-moz-binding: url("ellipsis.xml#ellipsis");}
.cl:after { content: ""; display: block; clear: both; }
.cl { zoom: 1; }
.fl { float: left; }
.fr { float: right;}
.mb20{margin-bottom: 20px;}
html,body{  height: 100%; min-width: 942px;position: relative; overflow: hidden; overflow-y:auto;}
.scene,.layer {display: block;height: 100%;width: 100%;padding: 0;margin: 0; }
.scene {position: absolute;overflow: hidden; height: 100%;}
.layer {position: absolute; }
.content{ height: 908px; position: relative; overflow: hidden; width: 100%; min-width: 942px;}

.page1 img{ width: 2560px; height: 1080px; position: absolute; left:50%; top:-40px; margin-left: -1285px;}
.page2 img{ width: 1920px; height: 843px; position: absolute; left:50%; top:0; margin-left: -960px; top:200px;}
.page3 img{ width: 2560px; height: 960px; position: absolute; left:50%; top:0; margin-left: -1285px; top:0;}
.page4 img{ width: 460px; height: 694px; position: absolute; right:50%; top:220px; margin-right: -800px;}
.leaf img{ width: 1896px; height: 982px; position: absolute; left:50%; top:0; margin-left: -948px;}

.main{ width: 942px; margin:0 auto; position: relative; z-index: 3; text-align: center; min-height: 523px;}
.sologan{ min-width: 742px; width: 842px; height: 265px; background: url(../logo50images/sologan.png) no-repeat center center; background-size: cover; top: 132px; position: absolute; left:52%; margin-left: -421px;}
.play{ width: 76px; height:76px; display: block; background: url(../logo50images/play.png) no-repeat center center; background-size: cover; position: absolute; top:327px; left:50%; cursor: pointer; margin-left: -38px;}
.button{position: absolute;width: 850px;top:500px;left:50%;margin-left: -410px;}
.button a{ display: block; width: 245px; height: 78px;}
.button .btn1{ background: url(../logo50images/btn1.png) no-repeat; float: left;}
.button .btn1:hover{ background: url(../logo50images/btn1-hover.png) no-repeat;}
.button .btn2{background: url(../logo50images/btn2.png) no-repeat;float: left;margin-left: 45px;}
.button .btn2:hover{ background: url(../logo50images/btn2-hover.png) no-repeat;}
.button .btn3{ background: url(../logo50images/btn3.png) no-repeat; float: left;margin-left: 45px;}
.button .btn3:hover{ background: url(../logo50images/btn3-hover.png) no-repeat;}
.button .btn4{ background: url(../logo50images/btn3.png) no-repeat; float: right;}
.button .btn4:hover{ background: url(../logo50images/btn3-hover.png) no-repeat;}
.pop_video{background:#000;width:800px;height:500px; position:fixed;  z-index: 100000; left:50%; top:50%; margin-left: -400px; margin-top: -250px; display: none;}
#video_main{ width: 800px; height: 500px; position: absolute; left:50%; top:50%; margin: -250px 0 0 -400px; background: #000;}
.closeBtn{background:url(../logo50images/close.png) no-repeat; width:63px; height:63px; position:absolute; right:-63px; top:0; cursor:pointer; display:block;}
.video{
	width: 800px;
	height: 500px;
	display: none;
	z-index:100;
	position: absolute;
	top:200px;left:30%;
	text-align:center;
}
.closeVideo{
	width:16px; height:16px;
	position: absolute;
	top:10px;right:-10px;
	cursor: pointer;

}
.animate .sologan{animation:fadeInDown 0.6s linear  0.8s backwards; -webkit-animation: fadeInDown 0.6s linear  0.8s backwards;}
.animate .play{animation:fadeInDown 0.6s linear  0.8s backwards,pulse 1.6s linear  0.8s infinite; -webkit-animation: fadeInDown 0.6s linear  0.8s backwards,pulse 1.6s linear  0.8s infinite;}
.animate .button{animation:fadeInDown 0.6s linear  1.4s backwards; -webkit-animation: fadeInDown 0.6s linear  1.4s backwards;}

.page4,.page3{animation:fadeInUp 0.6s linear  0s backwards; -webkit-animation: fadeInUp 0.6s linear  0s backwards;}

.page1,.page2{animation:sky 0.6s linear  0s backwards; -webkit-animation: sky 0.6s linear  0s backwards;}

.layerbg{ position: fixed;left:0; top:0; width: 100%; height: 100%; background: rgba(0,0,0,.5); z-index: 99999; display: none;}

@-webkit-keyframes fadeInDown{
    0%{opacity:0;-webkit-transform:translateY(-20px);transform:translateY(-20px)}
    100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}
}
@keyframes fadeInDown{
    0%{opacity:0;-webkit-transform:translateY(-20px);-ms-transform:translateY(-20px);transform:translateY(-20px)}
    100%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}
}

@-webkit-keyframes fadeInUp{
    0%{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px)}
    100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}
}
@keyframes fadeInUp{
    0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}
    100%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}
}

@-webkit-keyframes sky{
    0%{opacity:0;-webkit-transform:translateY(-20px);transform:translateY(-20px)}
    100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}
}
@keyframes sky{
    0%{opacity:0;-webkit-transform:translateY(-20px);-ms-transform:translateY(-20px);transform:translateY(-20px)}
    100%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}
}

@-webkit-keyframes pulse
{
    0%{-webkit-transform:scale(1);transform:scale(1)}
    50%{-webkit-transform:scale(0.88);transform:scale(0.88)}
    100%{-webkit-transform:scale(1);transform:scale(1)}
}
@keyframes pulse{
    0%{ -webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}
    50%{ -webkit-transform:scale(0.88);-ms-transform:scale(0.88);transform:scale(0.88)}
    100%{ -webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}
}