@charset "gb2312";
*{ margin:0px; padding:0px; border:0; }
body { -webkit-text-size-adjust: 100%;}
html,body { height:100%; overflow: hidden; font:16px/1.5 '\5B8B\4F53',"Microsoft YaHei", Arial, sans-serif; -webkit-font-smoothing:antialiased;  background:#79808f; font-weight:900; }
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; } 
table,td,tr,th{font-size:12px;}
li{list-style-type:none;list-style:none;}
img{vertical-align:top;border:0;}
h1,h2,h3,h4,h5,h6,p,em,i,b,span { margin:0; padding:0; font-weight:normal; font-style:normal;}
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:#dbdbde; text-decoration:none; }
a:hover{ color:#fff; text-decoration:none;}
.cl { clear:both;}
div,ul,li,h1,h2,h3,h4,h5,h6,dl,dd,dt,p,i,em,b,span,font { box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;  }


.f01 { font-family:"\65B0\7EC6\660E\4F53"; }
.f02 { font-family:"\7EC6\660E\4F53"; }
.f03 { font-family:"\6807\6977\4F53"; }
.f04 { font-family:"\9ED1\4F53"; }
.f05 { font-family:"\5B8B\4F53"; }
.f06 { font-family:"\65B0\5B8B\4F53"; }
.f07 { font-family:"\4EFF\5B8B"; }
.f08 { font-family:"\6977\4F53"; }
.f09 { font-family:"\4EFF\5B8B_GB2312"; }
.f10 { font-family:"\6977\4F53_GB2312"; }
.f11 { font-family:"\5FAE\x8F6F\6B63\9ED1\4F53"; }
.f12 { font-family:"\5FAE\8F6F\96C5\9ED1"; }

@font-face {	 
font-family:'ylmt';
src: url('ylmt.woff') format('woff'),
     url('ylmt.ttf') format('truetype'),
     url('ylmt.woff/ylmt.svg#ylmt') format('svg');
}  

@font-face { 
font-family:'simsun';
src: url('simsun.woff') format('woff'),
     url('simsun.ttf') format('truetype'), 
}  


.enter { background:rgba(0,0,0,.6); font-size:20px; line-height:44px; text-align:center; padding:0 15px; color:rgba(255,255,255,.9); border-radius:5px; z-index:9999999;  position:absolute; right:3%; top:5%;  cursor:pointer; }

.cover_b { width:100%; height:100vh; position:fixed; bottom:0; left:0; z-index:9999999;}
.cover_ba { bottom:-100vh; animation:miss_b 2s .5s backwards; -webkit-animation:miss_b 2s .5s backwards; opacity:1; }
@keyframes miss_b {
0%{ opacity:1; transform:translateY(-100vh);}
100%{ opacity:0; transform:translateY(0);}
} 
@-webkit-keyframes miss_b {
0%{ opacity:1; transform:translateY(100vh);}
100%{ opacity:0; transform:translateY(0);}
}



.nav { width:150px;  position:fixed; bottom:20px; left:20px; z-index:9999;}
.nav h3 { width:100%; float:left; cursor:pointer; }
.nav h3 .arr { width:150px; height:69px; float:left; background: url(../images/nav.png) 0px -0px no-repeat; }
.nav h3 .arr_c { background-position:0 -69px; }

.snav { width:100%; float:left; background:url(../images/nav_xian.png) center top repeat-y; }
.snav ul li { width:100%; float:left; text-align:center; margin:10px 0 0 0; }
.snav ul li span {display:inline-block;   width:110px; font-size:18px; color:#e7c58b; line-height:34px;  border-radius:5px;  text-align:center; box-shadow:0px 0px 5px rgba(0,0,0,.5); background:linear-gradient(to left,#c02a21,#8b160f); } 



#pages { width:100%; float:left; background:url(../images/nav_xian.png) center top repeat-y; }
#pages ul { width:100%; float:left; text-align:center; }
#pages li {  width:110px; display:inline-block;  font-size:18px; color:#e7c58b; line-height:34px;  border-radius:5px;  text-align:center; box-shadow:0px 0px 5px rgba(0,0,0,.5); background:linear-gradient(to left,#c02a21,#8b160f);  margin:10px 0 0 0; cursor:pointer; }
#pages li.active {  width:110px; display:inline-block;  font-size:18px; color:#fff; line-height:34px;  border-radius:5px;  text-align:center; box-shadow:0px 0px 5px rgba(0,0,0,.5); background:linear-gradient(to left,#c02a21,#8b160f);  margin:10px 0 0 0;  }
#pages li:nth-child(1) { display:none; }
#pages li:nth-child(6) { display:none; }
#pages li:nth-child(8) { display:none; }

#container { height:100%; position:relative; width:800%; }
.section { height:100%; position:relative; width:100%; float:left; }

#section0, #section1, #section2, #section3,#section4, #section5, #section6, #section7, #section8 { background-size:cover; background-position:50% 50%; color:#fff;}
#section0 { background-image:url(../images/bj01.jpg); }
#section1 { background-image:url(../images/bj02.jpg); }
#section2 { background-image:url(../images/bj03.jpg); }
#section3 { background-image:url(../images/bj04.jpg); }
#section4 { background-image:url(../images/bj05.jpg); }
#section5 { background-image:url(../images/bj06.jpg); }
#section6 { background-image:url(../images/bj07.jpg); }
#section7 { background-image:url(../images/bj08.jpg); }
#section8 { background-image:url(../images/bj09.jpg); }

.content { width:1400px; position:absolute;  height:700px; left:50%; margin-left:-700px; margin-top:-350px; top:50%;  z-index:8;}

.mouse { position:absolute; bottom:5%; text-align:center; width:100%; margin-left:0; left:0; }
.house { position:absolute; top:0; left:0; z-index:10;}
#flagCanvas { position:absolute; top:128px; left:213px; transform-origin:center;  transform:translate3d(0px, 0px, 0px) scale(1);}

.houser { position:absolute; top:0; right:0; z-index:10; }

.music01 { width:40px; height:40px; position: fixed; right:20px; top:35px; z-index:999;}
.an1 { background:url(../images/play.png) center center no-repeat; width:40px; height:40px; float:left; border:0; cursor:pointer; }
.an1_click { background:url(../images/pause.png) center center no-repeat; width:40px; height:40px; float:left; border:0; cursor:pointer;}


.header { width:100%; height:558px; margin:0 auto;position: absolute; overflow:hidden; margin-top:-295px; top:50%;}
.tit { position:absolute; width:1400px; height:448px; top:0; left:50%; margin-left:-525px; text-align:center; }
.tit .parallax-layer { position:absolute; width:1055px; height:408px;  background:url(../images/tit.png) no-repeat; }

.mobtit { display:none; }





.logo { width:100%; position:absolute; top:490px; left:0; margin-left:0; text-align:center; }
.logo img { width:170px; height:auto; }
.logo2 { width:100%;  position:absolute; top:490px; left:0; margin-left:0; text-align:center; animation:logo 3.0s ease-in-out 0s infinite;-webkit-animation:logo 3.0s ease-in-out 0s infinite;}
.logo2 img { width:170px; height:auto; }
@-webkit-keyframes logo{
	from{ }
	10%{ filter:alpha(opacity=50); opacity:.5; }
	50%{ filter:alpha(opacity=0); opacity:0; transform: scale(1.4,1.4); }
	to{ filter:alpha(opacity=0); opacity:0; transform: scale(1.4,1.4);  }
}
@keyframes logo{
	from{ }
	10%{ filter:alpha(opacity=50); opacity:.5; }
	50%{ filter:alpha(opacity=0); opacity:0; transform: scale(1.4,1.4); }
	to{ filter:alpha(opacity=0); opacity:0; transform: scale(1.4,1.4);  }
}



.book { position:absolute; left:-50px; top:328px; z-index:4;  }
.active .book { -webkit-animation:book .8s ease-out 1s backwards; animation:book .8s ease-out 1s backwards; }
@keyframes book
{
0%   { opacity:0; transform:scale(0.1,0.1); }
100% { opacity:1;}
}
@-webkit-keyframes book
{
0%   {opacity:0;  transform:scale(0.1,0.1);  }
100% { opacity:1;}
}

.book_person { position:absolute; left:150px; top:20px; z-index:5;  }
.active .book_person { -webkit-animation:book_person .8s ease-out 1.8s backwards; animation:book_person .8s ease-out 1.8s backwards; }
@keyframes book_person
{
0%   { opacity:0; transform:translateY(80px);   }
100% { opacity:1; }
}
@-webkit-keyframes book_person
{
0%   {opacity:0; transform:translateY(80px); }
100% { opacity:1;}
}


.dy { width:535px; position:absolute; right:50px; top:100px;  }
.dy p { width:100%; float:left; margin-bottom:36px; font-size:18px; line-height:36px; color:#fff; text-indent:2em;  text-align:justify;  text-shadow:1px 1px 2px rgba(0,0,0,.5); }

.dy a { display:inline-block; padding:0 3px;  background:rgba(194,74,73,1); font-size:18px;  line-height:30px; color:#e7c58b;  text-shadow:1px 1px 2px rgba(0,0,0,0); text-indent:0em; }
.active .p1 { -webkit-animation:p1 .6s ease-out 2.6s backwards; animation:p1 .6s ease-out 2.6s backwards; }
@keyframes p1
{
0%   { opacity:0; transform:translateX(-180px); }
100% { opacity:1;}
}
@-webkit-keyframes p1
{
0%   {opacity:0; transform:translateX(-180px);}
100% { opacity:1;}
}

.active .p2 { -webkit-animation:p2 .6s ease-in-out 3.2s backwards; animation:p2 .6s ease-out 3.2s backwards; }
@keyframes p2
{
0%   { opacity:0; transform:translateX(180px); }
100% { opacity:1;}
}
@-webkit-keyframes p2
{
0%   {opacity:0; transform:translateX(180px);}
100% { opacity:1;}
}

.active .p3 { -webkit-animation:p3 .6s ease-out 3.8s backwards; animation:p3 .6s ease-out 3.8s backwards; }
@keyframes p3
{
0%   { opacity:0; transform:translateX(-180px); }
100% { opacity:1;}
}
@-webkit-keyframes p3
{
0%   {opacity:0; transform:translateX(-180px);}
100% { opacity:1;}
}


.active .p4 { -webkit-animation:p4 .6s ease-out 4.4s backwards; animation:p4 .6s ease-out 4.4s backwards; }
@keyframes p4
{
0%   { opacity:0; transform:translateX(180px); }
100% { opacity:1;}
}
@-webkit-keyframes p4
{
0%   {opacity:0; transform:translateX(180px);}
100% { opacity:1;}
}


/*±ôΣ*/
.slm { position:absolute; left:50px; top:0px; z-index:4; }
.active .slm { -webkit-animation:slm .6s ease-out 1s backwards; animation:slm .6s ease-out 1s backwards; }
@keyframes slm
{
0%   { opacity:0; transform:scale(0.2,0.2); }
100% { opacity:1;}
}
@-webkit-keyframes slm
{
0%   {opacity:0; transform:scale(0.2,0.2); }
100% { opacity:1;}
}


.font2 { width:570px; position:absolute; top:250px; left:50px; background:rgba(194,74,73,1);  padding:30px; z-index:6;}
.font2 p { width:100%; float:left; font-size:18px; line-height:34px; color:#fff; text-indent:2em; text-align:justify; }
.active .font2 { -webkit-animation:font2 .6s ease-out 2.5s backwards; animation:font2 .6s ease-out 2.5s backwards; }
@keyframes font2
{
0%   { opacity:0; transform:translateY(100px);  }
100% { opacity:1;}
}
@-webkit-keyframes font2
{
0%   {opacity:0; transform:translateY(100px); }
100% { opacity:1;}
}
.font2:before { content:''; display:inline-block; width:44px; height:44px; vertical-align:top; background:url(../images/xs01.png) no-repeat;  position:absolute; left:24px; top:-22px; }
.font2:after { content:''; display:inline-block; width:44px; height:44px; vertical-align:top; background:url(../images/xs02.png) no-repeat;  position:absolute; right:24px; bottom:-22px; }

.bypic { width:1156px; height:768px; position:absolute; right:-110px; top:-30px; z-index:0; }
.byp1 { position:absolute; left:0px; top:0px; z-index:1; opacity:1;}
.active .byp1 { -webkit-animation:byp1 6s ease-in-out 1.5s backwards; animation:byp1 6s ease-in-out 1.5s backwards; }
@keyframes byp1
{
0%   { opacity:0; }
50% { opacity:1;}
100% { opacity:1;}
}
@-webkit-keyframes byp1
{
0%   { opacity:0; }
50% { opacity:1;}
100% { opacity:1;}
}

.live { width:570px; position: absolute; top:530px; left:50px; }
.live .biaoqiao { position:absolute; top:0; left:0;  z-index:8; }

#livelist { width:570px; position:absolute; top:0; left:0; z-index:5; height:190px; background:url(../images/ydbj.png) left center repeat-x; background-size: contain; padding:30px 0; font-family:"Microsoft YaHei"; }
#livelist ul li { width:170px; float:left; margin-right:15px; height:120px;  position: relative;}
#livelist ul li img { width:100%; height:100%; }
#livelist ul li p { width:100%; font-size:12px; line-height:18px; text-align:center; color:#fff;  position:absolute; bottom:0; background:rgba(0,0,0,.6); padding:5px 5%;}

.active .live { -webkit-animation:live .7s ease-out 3s backwards; animation:live .7s ease-out 3s backwards; }
@keyframes live
{
0%   { opacity:0; transform:translateX(120px);  }
100% { opacity:1;}
}
@-webkit-keyframes live
{
0%   {opacity:0; transform:translateX(120px); }
100% { opacity:1;}
}

/*¾È¾ç*/
.font3 { width:570px;position:absolute; bottom:20px; left:50px; background:rgba(194,74,73,1);  padding:30px 40px 30px 40px; z-index:1115;}
.font3 p { width:100%; float:left; font-size:16px; line-height:30px; color:#fff; text-indent:2em; text-align:justify; font-family:"Microsoft YaHei"; }
.active .font3 { -webkit-animation:font3 .7s ease-out 2s backwards; animation:font3 .7s ease-out 2s backwards; }
@keyframes font3
{
0%   { opacity:0; transform:translateY(150px);  }
100% { opacity:1;}
}
@-webkit-keyframes font3
{
0%   {opacity:0; transform:translateY(150px); }
100% { opacity:1;}
}
/*.font3:before { content:''; display:inline-block; width:44px; height:44px; vertical-align:top; background:url(../images/xs01.png) no-repeat;  position:absolute; left:24px; top:-22px; }
.font3:after { content:''; display:inline-block; width:44px; height:44px; vertical-align:top; background:url(../images/xs02.png) no-repeat;  position:absolute; right:24px; bottom:-22px; }
*/

.music02 { width:100%; float:left; margin-bottom:10px; }
.music02 font { font-size:24px; font-weight:bold; color:#333; margin-left:12px; float:left; line-height:40px;}
/*
.music02 { position:absolute; left:330px; top:235px; z-index:5;  }
.active .music02 { -webkit-animation:music02 .6s ease-out 3s backwards; animation:music02 .6s ease-out 3s backwards; }
@keyframes music02
{
0%   { opacity:0; transform:translateX(50px);}
100% { opacity:1;}
}
@-webkit-keyframes music02
{
0%   {opacity:0; transform:translateX(50px);}
100% { opacity:1;}
}*/
.an2 { background:url(../images/music_close.png) center center no-repeat; width:40px; height:40px; float:left; border:0; cursor:pointer; background-size:cover; }
.an2_click { background:url(../images/music_on.png) center center no-repeat; width:40px; height:40px; float:left; border:0; cursor:pointer;  background-size:cover;}

.jjfont { width:468px;  position:absolute; left:400px; top:6%;  z-index:888; }
.active .jjfont { -webkit-animation:jjfont .5s ease-in-out 1.5s backwards; animation:jjfont .5s ease-in-out 1.5s backwards; }
@keyframes jjfont
{
0%   { opacity:0; }
100% { opacity:1;}
}
@-webkit-keyframes jjfont
{
0%   { opacity:0; }
100% { opacity:1;}
}

.focusbk { width:869px; height:753px; position: absolute;  right:0px; top:0; }
#focus {height: 753px;}
.focus { width:869px; height:753px; position: relative;  right:0px; top:-10px; }
.focus ul li { width:100%; float:left; height: 753px;}
.focus ul li span { width:420px; left:14%; position:absolute; bottom:14%; background:rgba(231,197,139,.9); font-size:20px; line-height:32px; color:#000; font-weight:bold;  padding:17px 25px;  border-radius:8px;}
#pager {  position:absolute; bottom:8%; left:14%;  z-index:9; }
#pager a { width:30px; height:30px; margin:0 10px 0 0; background:rgba(0,0,0,.7); cursor:pointer; font-size:14px; font-weight: bold; text-align:center; line-height:30px; font-family:"Microsoft YaHei"; display: inline-block; border-radius:5px; color:(255,255,255,.7); }
#pager a.activeSlide { background:rgba(255,255,255,.7);  color:#333; }
#pager a:hover { background:rgba(255,255,255,.7); color:#333;}

.active .focus { -webkit-animation:focus 2s ease-in-out 1.5s backwards; animation:focus 2s ease-in-out 1.5s backwards; }
@keyframes focus
{
0%   { opacity:0; }
50% { opacity:1;}
100% { opacity:1;}
}
@-webkit-keyframes focus
{
0%   { opacity:0; }
50% { opacity:1;}
100% { opacity:1;}
}


.jjpic { width:869px; height:753px; position:absolute; right:-0px; top:-10px; z-index:0; }
.jjpic font {  position:absolute; bottom:20px; right:20px; font-size:18px; line-height:30px; color:#e7c58b; text-indent:2em; text-align:justify;   text-shadow:0px 0px 3px rgba(0,0,0,.5); }

.jjp1 { position:absolute; left:0px; top:0px; z-index:1; opacity:0;}
.active .jjp1 { -webkit-animation:jjp1 6s ease-in-out 1.5s backwards; animation:jjp1 6s ease-in-out 1.5s backwards; }
@keyframes jjp1
{
0%   { opacity:0; }
50% { opacity:1;}
90% { opacity:1;}
100% { opacity:0;}
}
@-webkit-keyframes jjp1
{
0%   { opacity:0; }
50% { opacity:1;}
90% { opacity:1;}
100% { opacity:0;}
}

.jjp2 { position:absolute; left:0px; top:0px; z-index:2; opacity:0;}
.active .jjp2 { -webkit-animation:jjp2 6s ease-in-out 4.5s backwards; animation:jjp2 6s ease-in-out 4.5s backwards; }
@keyframes jjp2
{
0%   { opacity:0; }
50% { opacity:1;}
90% { opacity:1;}
100% { opacity:0;}
}
@-webkit-keyframes jjp2
{
0%   { opacity:0; }
50% { opacity:1;}
90% { opacity:1;}
100% { opacity:0;}
}

.jjp3 { position:absolute; left:0px; top:0px; z-index:3; opacity:0;}
.active .jjp3 { -webkit-animation:jjp3 6s ease-in-out 7.5s backwards; animation:jjp3 6s ease-in-out 7.5s backwards; }
@keyframes jjp3
{
0%   { opacity:0; }
50% { opacity:1;}
90% { opacity:1;}
100% { opacity:0;}
}
@-webkit-keyframes jjp3
{
0%   { opacity:0; }
50% { opacity:1;}
90% { opacity:1;}
100% { opacity:0;}
}

.jjp4 { position:absolute; left:0px; top:0px; z-index:4;opacity:0; }
.active .jjp4 { -webkit-animation:jjp4 6s ease-in-out 10.5s backwards; animation:jjp4 6s ease-in-out 10.5s backwards; }
@keyframes jjp4
{
0%   { opacity:0; }
50% { opacity:1;}
90% { opacity:1;}
100% { opacity:0;}
}
@-webkit-keyframes jjp4
{
0%   { opacity:0; }
50% { opacity:1;}
90% { opacity:1;}
100% { opacity:0;}
}

.jjp5 { position:absolute; left:0px; top:0px; z-index:5; opacity:1;}
.active .jjp5 { -webkit-animation:jjp5 6s ease-in-out 13.5s backwards; animation:jjp5 6s ease-in-out 13.5s backwards; }
@keyframes jjp5
{
0%   { opacity:0; }
50% { opacity:1;}

100% { opacity:1;}
}
@-webkit-keyframes jjp5
{
0%   { opacity:0; }
50% { opacity:1;}
100% { opacity:1;}
}




/*»À»î*/
.xjp_video { width:660px; position:absolute; height:420px; bottom:40px; left:60px; }
#player { width:100%; height:100%; }

.active .xjp_video { -webkit-animation:xjp_video .5s ease-out 1.5s backwards; animation:xjp_video .5s ease-out 1.5s backwards; }
@keyframes xjp_video
{
0%   { opacity:0; transform:translateY(150px);  }
100% { opacity:1;}
}
@-webkit-keyframes xjp_video
{
0%   {opacity:0; transform:translateY(150px); }
100% { opacity:1;}
}





.talk { width:504px; position:absolute; right:100px; bottom:10px;  }
.talk em { width:100%; float:left; margin-bottom:25px; font-size:18px; line-height:36px; color:#fff; text-indent:2em;  text-align:justify;  text-shadow:1px 1px 2px rgba(0,0,0,.5);  }
.active .f1 { -webkit-animation:f1 .6s ease-out 2s backwards; animation:f1 .6s ease-out 2s backwards; }
@keyframes f1
{
0%   { opacity:0; transform:translateX(-180px); }
100% { opacity:1;}
}
@-webkit-keyframes f1
{
0%   {opacity:0; transform:translateX(-180px);}
100% { opacity:1;}
}


.talk p { width:100%; float:left; margin-bottom:5px; }
.active .t1 { -webkit-animation:t1 .4s ease-in 2.6s backwards; animation:t1 .4s ease-out 2.6s backwards; text-align:right;}
@keyframes t1
{
0%   { opacity:0; transform:translateY(50px); }
100% { opacity:1;}
}
@-webkit-keyframes t1
{
0%   {opacity:0; transform:translateY(50px);}
100% { opacity:1;}
}
.talk .t2 { margin-bottom:25px;  }
.active .t2 { -webkit-animation:t2 .4s ease-out 3.2s backwards; animation:t2 .4s ease-out 3.2s backwards;  }
@keyframes t2
{
0%   { opacity:0; transform:translateY(50px); }
100% { opacity:1;}
}
@-webkit-keyframes t2
{
0%   {opacity:0; transform:translateY(50px);}
100% { opacity:1;}
}

.active .t3 { -webkit-animation:t3 .4s ease-out 3.8s backwards; animation:t3 .4s ease-out 3.8s backwards;text-align:right; }
@keyframes t3
{
0%   { opacity:0; transform:translateY(50px); }
100% { opacity:1;}
}
@-webkit-keyframes t3
{
0%   {opacity:0; transform:translateY(50px);}
100% { opacity:1;}
}

.talk .t4 { margin-bottom:25px;  }
.active .t4 { -webkit-animation:t4 .4s ease-out 4.4s backwards; animation:t4 .4s ease-out 4.4s backwards;  }
@keyframes t4
{
0%   { opacity:0; transform:translateY(50px); }
100% { opacity:1;}
}
@-webkit-keyframes t4
{
0%   {opacity:0; transform:translateY(50px);}
100% { opacity:1;}
}



.affer { width:600px; position:absolute; left:0px; top:0px; z-index:4; }
.affer img { width:100%; height:auto; }
.affer font { width:100%; float:left; background:rgba(194,74,73,1);  padding:14px 25px 11px 25px;  font-size:18px; line-height:32px; color:#e7c58b; }
.active .affer { -webkit-animation:affer .6s ease-out 1s backwards; animation:affer .6s ease-out 1s backwards; }
@keyframes affer
{
0%   { opacity:0; transform:scale(3,3); }
60% { opacity:1; transform:scale(0.9,0.9);}
100% { opacity:1;}
}
@-webkit-keyframes affer
{
0%   { opacity:0; transform:scale(2,2); }
60% { opacity:1; transform:scale(0.9,0.9);}
100% { opacity:1;}
}

.ggfont { width:600px; position:absolute; left:0px; bottom:0px; z-index:3;  }
.ggfont p { width:100%; float:left; font-size:18px; line-height:32px; color:#fff; text-indent:2em;  text-align:justify;  text-shadow:1px 1px 2px rgba(0,0,0,.5); padding:0 0px; }
.ggfont font { width:100%; float:left; color:#e7c58b; text-align:right; margin-top:60px; font-size:18px; line-height:32px;  text-shadow:1px 1px 2px rgba(0,0,0,.5);}
.active .ggfont { -webkit-animation:ggfont .6s ease-in-out 1.6s backwards; animation:ggfont .6s ease-out 1.6s backwards; }
@keyframes ggfont
{
0%   { opacity:0; transform:translateY(-150px);  }
100% { opacity:1;}
}
@-webkit-keyframes ggfont
{
0%   {opacity:0; transform:translateY(-150px); }
100% { opacity:1;}
}
.ggfont p:before { content:''; display:inline-block; width:44px; height:44px; vertical-align:top; background:url(../images/xs01.png) no-repeat;  position:absolute; left:0px; top:-45px; }
.ggfont p:after { content:''; display:inline-block; width:44px; height:44px; vertical-align:top; background:url(../images/xs02.png) no-repeat;  position:absolute; right:0px; bottom:40px; }




.road { width:700px; position:absolute; right:0; top:0px; z-index:4; }
.roadfont { width:100%; position:absolute; top:20px; font-size:18px; line-height:36px; color:#fff; text-indent:2em;  text-align:justify;  text-shadow:1px 1px 2px rgba(0,0,0,.5);  }
.active .roadfont { -webkit-animation:roadfont .6s ease-out 2s backwards; animation:roadfont .6s ease-out 2s backwards; }
@keyframes roadfont
{
0%   { opacity:0; transform:translateX(-180px); }
100% { opacity:1;}
}
@-webkit-keyframes roadfont
{
0%   {opacity:0; transform:translateX(-180px);}
100% { opacity:1;}
}


.road01 { position:absolute; left:322px; top:140px; width:370px; z-index:5;}
.active .road01 { -webkit-animation:road01 0.4s ease-out 2.5s backwards; animation:road01 0.4s ease-out 2.5s backwards; }
@keyframes road01
{
0%   {opacity:0; -webkit-transform:translate(300px,120px); }
100% { opacity:1;}
}
@-webkit-keyframes road01
{
0%   {opacity:0; -webkit-transform:translate(300px,120px); }
100% { opacity:1;}
}
.road01 h3 { position:absolute; left:0; width:207px; }
.road01 h4 { width:180px; position:absolute; right:0; top:0; font-size:18px; line-height:32px; color:rgba(0,0,0,1); font-weight:bold;  text-shadow:1px 1px 0px rgba(255,255,255,.2);  display:flex; justify-content:center; align-items:center; height:200px;}


.road02 { position:absolute; left:20px; top:140px;  width:370px;  }
.active .road02 { -webkit-animation:road02 0.4s ease-out 2.8s backwards;  animation:road02 0.4s ease-out 2.8s backwards; }
@keyframes road02
{
0%   {opacity:0; -webkit-transform:translate(0,190px); }
100% { opacity:1;}
}
@-webkit-keyframes road02
{
0%   {opacity:0; -webkit-transform:translate(0,190px); }
100% { opacity:1;}
}
.road02 h3 { position:absolute; right:0; width:207px;  }
.road02 h4 { width:170px; position:absolute; left:0; top:0; font-size:18px; line-height:32px; color:rgba(0,0,0,1); font-weight:bold; text-shadow:1px 1px 0px rgba(255,255,255,.2); display:flex; justify-content:center; align-items:center; height:240px;}



.road03 { position:absolute; left:290px; top:320px; width:450px; z-index:8;  }
.active .road03 { -webkit-animation:road03 0.4s ease-out 3.1s backwards; animation:road03 0.4s ease-out 3.1s backwards; }
@keyframes road03
{
0%   {opacity:0; -webkit-transform:translate(-280px,240px);}
100% { opacity:1;}
}
@-webkit-keyframes road03
{
0%   {opacity:0; -webkit-transform:translate(-280px,240px); }
100% { opacity:1;}
}
.road03 h3 { position:absolute; left:0; width:207px; }
.road03 h4 { width:170px; position:absolute; right:0; top:0; font-size:18px; line-height:32px; color:rgba(0,0,0,1); font-weight:bold;  text-shadow:1px 1px 0px rgba(255,255,255,.2);  display:flex; justify-content:center; align-items:center; height:290px;}


.road04 { position:absolute; left:220px; top:320px; width:227px; z-index:9;  }
.active .road04 { -webkit-animation:road04 0.4s ease-out 3.4s backwards; animation:road04 0.4s ease-out 3.4s backwards; }
@keyframes road04
{
0%   {opacity:0; -webkit-transform:translate(200px,-80px); }
100% { opacity:1;}
}
@-webkit-keyframes road04
{
0%   {opacity:0; -webkit-transform:translate(200px,-80px); }
100% { opacity:1;}
}
.road04 h3 { width:100%; float:left; text-align:center; }
.road04 h4 { width:100%; float:left; font-size:18px; line-height:32px; color:rgba(0,0,0,1);  font-weight:bold;text-shadow:1px 1px 0px rgba(255,255,255,.2); text-align:center; margin-top:15px; }



.road05 { position:absolute; left:-40px; top:320px;  width:360px; z-index:7;  }
.active .road05 { -webkit-animation:road05 0.4s ease-out 3.7s backwards; animation:road05 0.4s ease-out 3.7s backwards; }
@keyframes road05
{
0%   {opacity:0; -webkit-transform:translate(-330px,-40px); }
100% { opacity:1;}
}
@-webkit-keyframes road05
{
0%   {opacity:0; -webkit-transform:translate(-330px,-40px); }
100% { opacity:1;}
}
.road05 h3 { position:absolute; right:0; width:207px;  }
.road05 h4 { width:170px; position:absolute; left:0; top:0; font-size:18px; line-height:32px; color:rgba(0,0,0,1); font-weight:bold; text-shadow:1px 1px 0px rgba(255,255,255,.2); display:flex; justify-content:center; align-items:center; height:290px;}






/*´«³Ð/´´ÐÂ*/
.tabBar { width:148px; position:absolute; left:60px; top:50%; height:382px; margin-top:-191px; }
.tabBar span { display:inline-block; cursor:pointer; width:148px; height:149px; float:left; margin:20px 0; }
.tabBar span .ico1 { width:148px; height:149px; float:left; background:url(../images/bot01_over.png) no-repeat; background-size:cover; background-position:50% 50%; }
.tabBar span.current .ico1 {  background:url(../images/bot01.png) no-repeat; }
.tabBar span .ico2 { width:148px; height:149px; float:left; background:url(../images/bot02_over.png) no-repeat; background-size:cover; background-position:50% 50%; }
.tabBar span.current .ico2 {  background:url(../images/bot02.png) no-repeat; }

.active .ico1 { -webkit-animation:ico1 .5s ease-out 0.8s backwards; animation:ico1 .5s ease-out 0.8s backwards; }
@keyframes ico1
{
0%   { opacity:0; transform:translateX(-150px);}
100% { opacity:1;}
}
@-webkit-keyframes ico1
{
0%   { opacity:0; transform:translateX(-150px);}
100% { opacity:1;}
}
.active .ico2 { -webkit-animation:ico2 .5s ease-out 1.3s backwards; animation:ico1 .5s ease-out 1.3s backwards; }
@keyframes ico2
{
0%   { opacity:0; transform:translateX(-150px);}
100% { opacity:1;}
}
@-webkit-keyframes ico2
{
0%   { opacity:0; transform:translateX(-150px);}
100% { opacity:1;}
}

.cccx { width:1050px; position:absolute; right:60px; bottom:20px; text-align:center;  font-size:18px; line-height:36px; color:#fff; text-align:center;  text-shadow:2px 2px 2px rgba(0,0,0,.5);}
.active .cccx { -webkit-animation:cccx .5s ease-out 1.8s backwards; animation:cccx .5s ease-out 1.8s backwards; }
@keyframes cccx
{
0%   { opacity:0; transform:translateY(80px);}
100% { opacity:1;}
}
@-webkit-keyframes chuanxin
{
0%   {opacity:0; transform:translateY(80px);}
100% { opacity:1;}
}



.tabCon { width:1050px; position:absolute; right:60px; top:0px; }
.chuangchen { width:100%; float:left; }
.active .chuangchen { -webkit-animation:chuangchen .5s ease-out .5s backwards; animation:chuangchen .5s ease-out .5s backwards; }
@keyframes chuangchen
{
0%   { opacity:0; transform:translateX(150px);}
100% { opacity:1;}
}
@-webkit-keyframes chuangchen
{
0%   {opacity:0; transform:translateX(150px);}
100% { opacity:1;}
}
.chuangchen ul li { width:210px; float:left; height:703px; position:relative; }
.chuangchen ul li h3 font { width:100%; height:100%; position:absolute; z-index:4; }
.chuangchen ul li h3 font b { width:34px; display:inline-block; position:absolute; top:115px; left:25px; text-shadow:0px 0px 5px rgba(0,0,0,.5); text-align:center; font-size:24px; line-height:26px; color:#fff;  opacity:1; font-weight:bold; }
.chuangchen ul li:nth-child(2n) h3 font b { right:25px; left:auto; }
.chuangchen ul li:nth-child(1) h3 font { background:url(../images/ccp1.png) no-repeat; }
.chuangchen ul li:nth-child(2) h3 font { background:url(../images/ccp2.png) no-repeat; }
.chuangchen ul li:nth-child(3) h3 font { background:url(../images/ccp3.png) no-repeat; }
.chuangchen ul li:nth-child(4) h3 font { background:url(../images/ccp4.png) no-repeat; }
.chuangchen ul li:nth-child(5) h3 font { background:url(../images/ccp5.png) no-repeat; }

.chuangchen ul li h3 em { width:100%; height:100%; position:absolute; z-index:5; transition:all ease-out .3s 0s; -webkit-transition:all ease-out .3s 0s; padding:0 30px; opacity:0;  }
.chuangchen ul li h3 em p { width:100%; float:left; font-size:18px; line-height:32px; color:#fff; text-indent:2em;  font-weight:100; text-align:justify; margin-top:130px; }
.chuangchen ul li h3 em span { width:100%; float:left; margin-top:20px;}
.chuangchen ul li h3 em span i { display:inline-block; border-radius:5px; background:#fff;  font-size:18px; line-height:36px; color:#333; padding:0 20px; font-weight:bold;  }


.chuangchen ul li:nth-child(1) h3 em { background:url(../images/ccp1_over.png) no-repeat; }
.chuangchen ul li:nth-child(2) h3 em { background:url(../images/ccp2_over.png) no-repeat; }
.chuangchen ul li:nth-child(3) h3 em { background:url(../images/ccp3_over.png) no-repeat; }
.chuangchen ul li:nth-child(4) h3 em { background:url(../images/ccp4_over.png) no-repeat; }
.chuangchen ul li:nth-child(5) h3 em { background:url(../images/ccp5_over.png) no-repeat; }

.chuangchen ul li:hover h3 em { opacity:1; transform:translateY(-20px);}
.chuangchen ul li:hover h3 font { opacity:0;  transform:translateY(-20px);}


.chuanxin { width:100%; float:left; }
.active .chuanxin { -webkit-animation:chuanxin .6s ease-out .5s backwards; animation:chuanxin .6s ease-out .5s backwards; }
@keyframes chuanxin
{
0%   { opacity:0; transform:translateX(150px);}
100% { opacity:1;}
}
@-webkit-keyframes chuanxin
{
0%   {opacity:0; transform:translateX(150px);}
100% { opacity:1;}
}
.chuanxin ul li { width:350px; float:left; height:703px; position:relative; }
.chuanxin ul li h3 font { width:100%; height:100%; position:absolute; z-index:4; }
.chuanxin ul li h3 font b { width:34px; display:inline-block; position:absolute; top:140px; left:25px; text-shadow:0px 0px 5px rgba(0,0,0,.5); text-align:center; font-size:24px; line-height:26px; color:#fff;  opacity:1; font-weight:bold; }
.chuanxin ul li:nth-child(1) h3 font { background:url(../images/cxp1.png) no-repeat; }
.chuanxin ul li:nth-child(2) h3 font { background:url(../images/cxp2.png) no-repeat; }
.chuanxin ul li:nth-child(3) h3 font { background:url(../images/cxp3.png) no-repeat; }



.chuanxin ul li h3 em { width:100%; height:100%; position:absolute; z-index:5; transition:all ease-out .3s 0s; -webkit-transition:all ease-out .3s 0s; opacity:0; padding:0 30px;/*display:flex; justify-content:center; align-items:center; */}
.chuanxin ul li h3 em p {  width:100%; float:left;  font-size:18px; line-height:36px; color:#fff; text-indent:2em; font-weight:100; text-align:justify; margin-top:220px; }
.chuanxin ul li h3 em span { width:100%; float:left; margin-top:20px;}
.chuanxin ul li h3 em span i { display:inline-block; border-radius:5px; background:#fff;  font-size:18px; line-height:36px; color:#333; padding:0 20px; font-weight:bold;  }

.chuanxin ul li:nth-child(1) h3 em { background:url(../images/cxp1_over.png) no-repeat; }
.chuanxin ul li:nth-child(2) h3 em { background:url(../images/cxp2_over.png) no-repeat; }
.chuanxin ul li:nth-child(3) h3 em { background:url(../images/cxp3_over.png) no-repeat; }
.chuanxin ul li:hover h3 em { opacity:1; transform:translateY(-20px); }
.chuanxin ul li:hover h3 font { opacity:0;  transform:translateY(-20px);}



.xjpperson { width:500px; position:absolute; left:50px; top:50px;  }
.active .xjpperson { -webkit-animation:xjpperson .6s ease-out 1s backwards; animation:xjpperson .6s ease-out 1s backwards; }
@keyframes xjpperson
{
0%   { opacity:0; transform:translateX(-180px); }
100% { opacity:1;}
}
@-webkit-keyframes xjpperson
{
0%   {opacity:0; transform:translateX(-180px);}
100% { opacity:1;}
}

.music03 {  position:absolute; left:590px; bottom:55px; z-index:5;  }
.active .music03 { -webkit-animation:music03 .6s ease-out 2s backwards; animation:music03 .6s ease-out 2s backwards; }
@keyframes music03
{
0%   { opacity:0; transform:translateX(50px);}
100% { opacity:1;}
}
@-webkit-keyframes music03
{
0%   {opacity:0; transform:translateX(50px);}
100% { opacity:1;}
}

.xjpfont { width:690px;  position:absolute; top:50%; margin-top:-175px; right:120px;  z-index:5; font-weight:bold; }
.xjpfont p { width:100%; float:left; font-size:24px; line-height:50px; color:#fff; text-align:justify; padding:0 100px; text-shadow:1px 1px 2px rgba(0,0,0,.5); }
.xjpfont font { width:100%; float:left; color:#e7c58b; text-align:right; margin-top:80px; padding:0 24px 0 0; font-size:24px; line-height:50px;  text-shadow:1px 1px 2px rgba(0,0,0,.5);}
.active .xjpfont { -webkit-animation:xjpfont .7s ease-out 1.5s backwards; animation:xjpfont .7s ease-out 1.5s backwards; }
@keyframes xjpfont
{
0%   { opacity:0; transform:translateX(180px);  }
100% { opacity:1;}
}
@-webkit-keyframes xjpfont
{
0%   {opacity:0; transform:translateX(180px); }
100% { opacity:1;}
}
.xjpfont p:before { content:''; display:inline-block; width:44px; height:44px; vertical-align:top; background:url(../images/xs01.png) no-repeat;  position:absolute; left:24px; top:-4px; }
.xjpfont p:after { content:''; display:inline-block; width:44px; height:44px; vertical-align:top; background:url(../images/xs02.png) no-repeat;  position:absolute; right:24px; bottom:70px; }








@media screen and (max-width:1440px) {
.nav { display:none; }
}