/*---===---  Css   ---===---*/
/*---===---  Time  ---===---*/
/*       20140514          */
/*---===---  End  ---===---*/
/*reset*/
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td{margin:0;padding:0;}h1, h2, h3, h4, h5, h6 {font-size:100%;}address, cite, dfn, em, var {font-style:normal;}small {font-size:12px;}ul, ol {list-style:none;}sup {vertical-align:text-top;}sub {vertical-align:text-bottom;}legend {color:#000;}fieldset, img {border:0;}button, input, select, textarea {font-size:100%;}table {border-collapse:collapse;border-spacing:0;}i, em, cite,s{font-style:normal; text-decoration:none;}.clear {clear:both;width:0px;height:0px;margin:0;padding:0;font-size:0px; overflow:hidden;}.left {float:left;}.right {float: right;}iframe {margin:0;padding:0;}textarea {resize:none;}input {outline: none;}textarea {outline: none;}.clearfix:after {content:".";display:block;height:0;font-size:0;clear:both;visibility:hidden;}.clearfix {zoom:1;}
*::before,*::after{ content:"";}
html,body{ font:12px/22px \5fae\8f6f\96c5\9ed1,\5b8b\4f53,Arial,Sans-serif; background:#fff;width:100%;height:100%;overflow:hidden;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;}
a{ text-decoration:none; color:#fff;}
a:hover{ text-decoration:none;}
img{ display:block;}
.nav{ position:fixed; z-index:99999; top:0; left:0; width:100%;}

/*preload_page*/
.preload_page{ position:fixed; background-color:#68bce0; width:100%; height:100%; z-index:9999;}
.preload_page .con{ position:absolute; width:312px; height:222px; left:50%; top:50%; text-align:center; margin:-111px 0 0 -156px;}
.preload_page p{width: 100%;position: absolute;bottom:0;font-size: 18px;color: #fff;line-height: 22px; left:0;}

/*nav_con*/
.nav_con{width:35px;height: 170px;position: fixed;left:30px;top: 50%;margin-top: -95px;padding-top:20px;z-index:9999;background: url(../images/nav_bg.png) no-repeat 0 0;}
.nav_con li{ background:url(../images/nav_ico.png) no-repeat center 9px; width:25px; margin:0 auto 5px; height:34px; cursor:pointer;}
.nav_con .tag1.current{ background-position:center -25px}
.nav_con .tag2.current{ background-position:center -65px}
.nav_con .tag3.current{ background-position:center -104px}
.nav_con .tag4.current{ background-position:center -144px}

/*box*/
.box{ width:100%; height:100%; overflow:hidden;}
.box li{width:200%;height:0;position: fixed;overflow: hidden;top:51px;}
.box .con_1,.box .con_2{height:100%;float:left; overflow:hidden;}
.mod_bd{ width:1000px; margin:0 auto; position:relative; height:100%;}

.mod_btn,.mod_btn2{ display:block; width:300px; height:67px; position:absolute; z-index:9;}
.btn_con{ height:45px; /*overflow:hidden;*/}
.zan{ height:22px; line-height:22px; color:#423723; font-size:12px; text-align:center; width:140px;}
.mod_btn a,.mod_btn2 a{ width:140px; height:45px; margin-right:10px; display:block; overflow:hidden; text-indent:-999em; float:left;}
.gamerun{ background:url(../images/btn_z.png) no-repeat 0 0;}
.gamerun:hover{ background:url(../images/btn_zh.png) no-repeat 0 0;}
.con_2 .gamerun{background:url(../images/btn_2z.png) no-repeat 0 0;}
.con_2 .gamerun:hover{background:url(../images/btn_2zh.png) no-repeat 0 0;}
.libao{ background:url(../images/btn_t.png) no-repeat 0 0;}
.libao:hover{ background:url(../images/btn_th.png) no-repeat 0 0;}
.con_2 .libao{background:url(../images/btn_2t.png) no-repeat 0 0;}
.con_2 .libao:hover{background:url(../images/btn_2th.png) no-repeat 0 0;}
.mod_btn .gray,.mod_btn .gray:hover{ background:url(../images/zan_gray.png) no-repeat 0 0; cursor:default;}

.zn_info{ position:absolute;}
.zn_info h3{  font-size:16px; line-height:24px; padding-bottom:5px;}
.zn_info p{ line-height:18px; font-size:12px;}

.change{ height:200px; position:fixed; bottom:188px; right:0; width:168px; display:none}
.change li{ height:64px; background:rgba(0,0,0,.35) !important;background:#a0a09f; border-radius:15px 0 0 15px; color:#fff; width:168px; left:68px; position:relative; padding:18px 0; cursor:pointer; 
-webkit-transition:left 0.5s ease-in-out;
-moz-transition:left 0.5s ease-in-out;
-ms-transition:left 0.5s ease-in-out;
-o-transition:left 0.5s ease-in-out;
transition:left 0.5s ease-in-out;}
.change li .chg_bd{text-align:center; color:#fff; width:50px; padding:0 24px 0 0; background:url(../images/next.png) no-repeat right center; margin-left:22px;}
.change li .chg_bd span{  font-size:14px; line-height:18px; display:block;}
.change li .chg_bd p{ font-size:45px; line-height:45px;}
.change .current{ width:168px; left:0}
.change .current .chg_bd{background:url(../images/pre.png) no-repeat left center; padding:0 0 0 24px; margin-left:48px;}
.ani .change{ display:block;}
/*box1*/
#box1 .con_1{ background:#f6f6f4 url(../images/bg_1_1.jpg) no-repeat center 320px;}
#box1 .con_1 .mod_title{ background:url(../images/t1_1.jpg) no-repeat left top; padding-top:55px; height:30px; line-height:30px; color:#423723; font-size:20px;width:450px; position:absolute; top:130px; left:22px;}
#box1 .con_1 .mod_title i{ display:block; width:54px; height:53px; overflow:hidden; position:absolute; top:-2px; left:242px;}
#box1 .con_1 .mod_btn{ top:263px; left:22px;}
#box1 .con_1 .mod_pic{ width:496px; height:685px; position:absolute; top:223px; left:351px; }
#box1 .con_1 .mod_pic div{ position:absolute;}
#box1 .con_1 .mod_pic .ico_yf_1{ top:6px; left:407px; width:21px; height:44px;}
#box1 .con_1 .mod_pic .ico_yf_2{ top:51px; left:454px; width:39px; height:59px;}
#box1 .con_1 .mod_pic .ico_yf_3{ top:126px; left:398px; width:16px; height:40px;}
#box1 .con_1 .mod_pic .ico_yf_4{ top:249px; left:138px; width:42px; height:52px;}
#box1 .con_1 .mod_pic .ico_ks{ top:37px; left:208px; width:26px; height:35px;}
#box1 .dm{ width:256px; height:452px; position:absolute; top:321px; left:816px;}
#box1 .change .current{ background:#be9fff !important;}

#box1 .con_2{ background:#8e6cd3 url(../images/bg_1_2.jpg) no-repeat center 547px;}
#box1 .con_2 .deng{ position:absolute; width:1006px; height:425px; left:-6px; top:51px;}
#box1 .con_2 .mod_title2{ padding:108px 0 0 27px;  background:url(../images/t1_2.png) no-repeat left top; height:54px; width:368px; line-height:27px; color:#fff; font-size:20px; position:absolute; top:177px; left:77px;}
#box1 .con_2 .mod_btn2{ top:353px; left:62px;}
#box1 .zn_info{ top:455px; left:68px; width:360px; height:70px;}
#box1 .zn_info h3{ color:#ffefff;}
#box1 .zn_info p{ color:#f5dbff;}
#box1 .con_2 .mod_pic2{ width:537px; height:691px; position:absolute; top:181px; left:393px;}
#box1 .con_2 .zan{ color:#f5dbff;}
#box1 .con_2 .xx{ position:absolute; top:0; left:0; width:537px; height:340px;
-webkit-animation:ani_1 2s linear infinite alternate;
-moz-animation:ani_1 2s linear infinite alternate;
-ms-animation:ani_1 2s linear infinite alternate;
-o-animation:ani_1 2s linear infinite alternate;
animation:ani_1 2s linear infinite alternate;
}


#box1.ani .con_1 .mod_title i{
-webkit-animation:ani_1 1s 1s ease;
-moz-animation:ani_1 1s 1s ease;
-ms-animation:ani_1 1s 1s ease;
-o-animation:ani_1 1s 1s ease;
animation:ani_1 1s 1s ease;
}
#box1.ani .con_1 .ico_yf_1{
-webkit-animation:yf_1 1.5s linear infinite;
-moz-animation:yf_1 1.5s linear infinite;
-ms-animation:yf_1 1.5s linear infinite;
-o-animation:yf_1 1.5s linear infinite;
animation:yf_1 1.5s linear infinite;
}
#box1.ani .con_1 .ico_yf_3{
-webkit-animation:yf_3 1.5s .5s linear infinite;
-moz-animation:yf_3 1.5s .5s linear infinite;
-ms-animation:yf_3 1.5s .5s linear infinite;
-o-animation:yf_3 1.5s .5s linear infinite;
animation:yf_3 1.5s .5s linear infinite;
}

/*box2*/
#box2 .con_1{ background:#f6f6f4 url(../images/bg_2_1.jpg) no-repeat center 51px;}
#box2 .con_1 .mod_title{ background:url(../images/t2_1.jpg) no-repeat left top; padding:106px 0 0 25px; height:30px; line-height:30px; color:#423723; font-size:20px;width:310px; position:absolute; top:151px; left:21px;}
#box2 .con_1 .mod_btn{ top:326px; left:48px;}
#box2 .con_1 .mod_pic{ width:476px; height:780px; position:absolute; top:101px; left:344px;}
#box2 .nn{ position:absolute; width:50px; height:56px; top:679px; left:236px;}
#box2 .change .current{ background:#75d2e7 !important;}

#box2 .con_2{ background:#35b5d2 url(../images/bg_2_2.jpg) no-repeat center 284px;}
#box2 .con_2 .mod_title2{ background:url(../images/t2_2.jpg) no-repeat left top; padding:100px 0 0 25px; height:30px; line-height:30px; color:#fff; font-size:20px;width:475px; position:absolute; top:102px; left:293px;}
#box2 .zn_info{ top:324px; left:321px; width:350px; height:90px;}
#box2 .zn_info h3{ color:#ebfbff;}
#box2 .zn_info p{ color:#c4f4ff;}
#box2 .album{ width:134px; height:111px; position:absolute; top:160px; left:18px;}
#box2 .con_2 .mod_btn2{ top:247px; left:320px;}
#box2 .con_2 .mod_pic2{ width:338px; height:632px; position:absolute; top:274px; left:609px;}
#box2 .con_2 .zan{ color:#c4f4ff;}
#box2 .con_2 .taoxing{ position:absolute; width:78px; height:44px; left:156px; top:42px;
-webkit-animation:taoxing .5s linear infinite;
-moz-animation:taoxing .5s linear infinite;
-ms-animation:taoxing .5s linear infinite;
-o-animation:taoxing .5s linear infinite;
animation:taoxing .5s linear infinite;}
/*box3*/
#box3 .con_1{ background:#f6f6f4 url(../images/bg_3_1.jpg) no-repeat center 501px;}
#box3 .con_1 .mod_title{ background:url(../images/t3_1.jpg) no-repeat left top; padding:68px 0 0 0; height:30px; line-height:30px; color:#423723; font-size:20px;width:390px; position:absolute; top:188px; left:44px;}
#box3 .clock{ position:absolute; top:89px; left:788px; width:155px; height:155px;}
#box3 .con_1 .mod_pic{ width:476px; height:697px; position:absolute; top:50px; left:359px;}
#box3 .con_1 .mod_btn{ top:312px; left:44px;}
#box3 .change .current{ background:#70d8a8 !important;}

#box3 .con_2{ background:#63c095 url(../images/bg_3_2.jpg) no-repeat center 494px;}
#box3 .con_2 .mod_title2{ background:url(../images/t3_2.jpg) no-repeat left top; padding:100px 0 0 25px; height:60px; line-height:30px; color:#fff; font-size:20px;width:325px; position:absolute; top:98px; left:19px;}
#box3 .con_2 .mod_btn2{ top:273px; left:45px;}
#box3 .zn_info{ top:375px; left:41px; width:270px; height:115px;}
#box3 .zn_info h3{ color:#eafff5;}
#box3 .zn_info p{ color:#c5ffe4;}
#box3 .con_2 .mod_pic2{ width:696px; height:601px; position:absolute; top:300px; left:141px;}
#box3 .con_2 .zan{ color:#c5ffe4;}
#box3 .ico_sx{ position:absolute; top:100px; left:452px; width:470px; height:305px;}
#box3 .ico_sx div{ position:absolute; }
#box3 .ico_sx .sx_1{ width:102px; height:135px; top:108px; left:186px;
-webkit-animation:sx 1s .6s linear infinite alternate;
-moz-animation:sx 1s .6s linear infinite alternate;
-ms-animation:sx 1s .6s linear infinite alternate;
-o-animation:sx 1s .6s linear infinite alternate;
animation:sx 1s .6s linear infinite alternate;}
#box3 .ico_sx .sx_2{ width:80px; height:98px; top:0; left:130px;
-webkit-animation:sx 1s linear infinite alternate;
-moz-animation:sx 1s linear infinite alternate;
-ms-animation:sx 1s linear infinite alternate;
-o-animation:sx 1s linear infinite alternate;
animation:sx 1s linear infinite alternate;
}
#box3 .ico_sx .sx_3{ width:84px; height:124px; top:165px; left:358px;
-webkit-animation:sx 1s .8s linear infinite alternate;
-moz-animation:sx 1s .8s linear infinite alternate;
-ms-animation:sx 1s .8s linear infinite alternate;
-o-animation:sx 1s .8s linear infinite alternate;
animation:sx 1s .8s linear infinite alternate;}
#box3 .ico_sx .sx_4{ width:84px; height:71px; top:43px; left:300px;
-webkit-animation:sx 1s .2s linear infinite alternate;
-moz-animation:sx 1s .2s linear infinite alternate;
-ms-animation:sx 1s .2s linear infinite alternate;
-o-animation:sx 1s .2s linear infinite alternate;
animation:sx 1s .2s linear infinite alternate;
}
#box3 .ico_sx .sx_5{ width:75px; height:93px; top:30px; left:0;
-webkit-animation:sx 1s .4s linear infinite alternate;
-moz-animation:sx 1s .4s linear infinite alternate;
-ms-animation:sx 1s .4s linear infinite alternate;
-o-animation:sx 1s .4s linear infinite alternate;
animation:sx 1s .4s linear infinite alternate;}

/*box4*/
#box4 .con_1{ background:#f6f6f4 url(../images/bg_4_1.jpg) no-repeat center 340px;}
#box4 .con_1 .mod_title{ background:url(../images/t4_1.jpg) no-repeat left top; padding:70px 0 0 0; height:30px; line-height:30px; color:#423723; font-size:20px;width:390px; position:absolute; top:128px; left:4px;}
#box4 .con_1 .mod_pic{ width:716px; height:694px; position:absolute; top:181px; left:145px;}
#box4 .mod_pic img,#box4 .mod_pic2 img{ position:absolute;}
#box4 .con_1 .mod_btn{ top:255px; left:4px;}
#box4 .change .current{ background:#f78192 !important;}
#box4 .wy{ position:absolute; top:121px; left:798px; width:143px; height:80px;}

#box4 .con_2{ background:#d44267 url(../images/bg_4_2.jpg) no-repeat center 51px;}
#box4 .con_2 .mod_title2{ background:url(../images/t4_2.png) no-repeat left top; padding:96px 0 0 25px; height:60px; line-height:30px; color:#fff; font-size:20px;width:440px; position:absolute; top:125px; left:7px;}
#box4 .con_2 .mod_btn2{ top:302px; left:33px;}
#box4 .zn_info{ top:413px; left:33px; width:282px; height:115px;}
#box4 .zn_info h3{ color:#fff0f4;}
#box4 .zn_info p{ color:#ffccd9;}
#box4 .con_2 .mod_pic2{ width:725px; height:651px; position:absolute; top:213px; left:255px;}
#box4 .con_2 .zan{ color:#ffccd9;}
#box4 .xx2{ background:url(../images/xx2.png) no-repeat 0 0; width:725px; height:251px;
-webkit-animation:xx2 2s linear infinite alternate;
-moz-animation:xx2 2s linear infinite alternate;
-ms-animation:xx2 2s linear infinite alternate;
-o-animation:xx2 2s linear infinite alternate;
animation:xx2 2s linear infinite alternate;
}


@-webkit-keyframes ani_1{
	0%,100%{-webkit-transform:scale(1)}	
	50%{-webkit-transform:scale(1.3);}
}
@-moz-keyframes ani_1{
	0%,100%{-moz-transform:scale(1)}	
	50%{-moz-transform:scale(1.3);}
}
@-ms-keyframes ani_1{
	0%,100%{-ms-transform:scale(1)}	
	50%{-ms-transform:scale(1.3);}
}
@-o-keyframes ani_1{
	0%,100%{-o-transform:scale(1)}	
	50%{-o-transform:scale(1.3);}
}
@keyframes ani_1{
	0%,100%{transform:scale(1)}	
	50%{transform:scale(1.3);}
}

@-webkit-keyframes yf_1{
	0%{-webkit-transform:translate(-5px,5px); opacity:1}	
	100%{-webkit-transform:translate(20px,-20px); opacity:0}
}
@-moz-keyframes yf_1{
	0%{-moz-transform:translate(-5px,5px); opacity:1}	
	100%{-moz-transform:translate(20px,-20px); opacity:0}
}
@-ms-keyframes yf_1{
	0%{-ms-transform:translate(-5px,5px); opacity:1}	
	100%{-ms-transform:translate(20px,-20px); opacity:0}
}
@-o-keyframes yf_1{
	0%{-o-transform:translate(-5px,5px); opacity:1}	
	100%{-o-transform:translate(20px,-20px); opacity:0}
}
@keyframes yf_1{
	0%{transform:translate(-5px,5px); opacity:1}	
	100%{transform:translate(20px,-20px); opacity:0}
}

@-webkit-keyframes yf_3{
	0%{-webkit-transform:translate(-5px,0px); opacity:1}	
	100%{-webkit-transform:translate(30px,25px); opacity:0}
}
@-moz-keyframes yf_3{
	0%{-moz-transform:translate(-5px,0px); opacity:1}	
	100%{-moz-transform:translate(30px,25px); opacity:0}
}
@-ms-keyframes yf_3{
	0%{-ms-transform:translate(-5px,0px); opacity:1}	
	100%{-ms-transform:translate(30px,25px); opacity:0}
}
@-o-keyframes yf_3{
	0%{-o-transform:translate(-5px,0px); opacity:1}	
	100%{-o-transform:translate(30px,25px); opacity:0}
}
@keyframes yf_3{
	0%{transform:translate(-5px,0px); opacity:1}	
	100%{transform:translate(30px,25px); opacity:0}
}

@-webkit-keyframes taoxing{
	0%{-webkit-transform:scale(1) translate(0)}	
	100%{-webkit-transform:scale(1.2) translate(-5px,-5px)}
}
@-moz-keyframes taoxing{
	0%{-moz-transform:scale(1) translate(0)}	
	100%{-moz-transform:scale(1.2) translate(-5px,-5px)}
}
@-ms-keyframes taoxing{
	0%{-ms-transform:scale(1) translate(0)}	
	100%{-ms-transform:scale(1.2) translate(-5px,-5px)}
}
@-o-keyframes taoxing{
	0%{-o-transform:scale(1) translate(0)}	
	100%{-o-transform:scale(1.2) translate(-5px,-5px)}
}
@keyframes taoxing{
	0%{transform:scale(1) translate(0)}	
	100%{transform:scale(1.2) translate(-5px,-5px)}
}

@-webkit-keyframes sx{
	0%{ -webkit-transform:translateY(-5px)}	
	100%{-webkit-transform:translateY(5px);}
}
@-moz-keyframes sx{
	0%{-moz-transform:translateY(-5px)}	
	100%{-moz-transform:translateY(5px)}
}
@-ms-keyframes sx{
	0%{-ms-transform:translateY(-5px)}	
	100%{-ms-transform:translateY(5px)}
}
@-o-keyframes sx{
	0%{-o-transform:translateY(-5px)}	
	100%{-o-transform:translateY(5px)}
}
@keyframes sx{
	0%{transform:translateY(-5px)}	
	100%{transform:translateY(5px)}
}
@-webkit-keyframes xx2{
	0%{ -webkit-transform:rotate(-5deg)}	
	100%{-webkit-transform:rotate(5deg);}
}
@-moz-keyframes xx2{
	0%{-moz-transform:translateY(-5px)}	
	100%{-moz-transform:translateY(5px)}
}
@-ms-keyframes xx2{
	0%{-ms-transform:translateY(-5px)}	
	100%{-ms-transform:translateY(5px)}
}
@-o-keyframes xx2{
	0%{-o-transform:translateY(-5px)}	
	100%{-o-transform:translateY(5px)}
}
@keyframes xx2{
	0%{transform:translateY(-5px)}	
	100%{transform:translateY(5px)}
}