@charset "utf-8"; /* CSS Document */ body{font-family:"微软雅黑"; background: #000;} .overflow{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} a{text-decoration:none !important;cursor:pointer !important;} .container-fluid{max-width:1230px !important} .main-pad-1{ padding: 50px 0; } #videobox{ position: absolute; left: 0; top: 0; z-index: -1; width: 100%; } .header{ position: relative; z-index:2147483647; padding-bottom: 1px; background: url(../images/header_bg.jpg) 50% 50%; background-size: cover; } .header:before{ content: ""; position: absolute; left: 0; bottom: 0; z-index: 1; width: 100%; height: 1px; background: #fff; filter:alpha(opacity=35);-moz-opacity:0.35;-khtml-opacity: 0.35; opacity: 0.35; } .header .logo{ font-size: 0; line-height: 99px; } .header .logo img{ width: 195px; } .header .menu{ overflow: hidden; transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; } .header .menu ul{ margin:0;} .header .menu ul li{ position: relative; margin-left: 35px; width: 70px; } .header .menu ul li:first-child{ margin-left: 0; } .header .menu ul li:before{ content: ""; position:absolute; left:0; bottom: 0; z-index: 1; width: 100%; height: 5px;background: url(../images/icon/nav_bg.png) no-repeat bottom;filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0; transition: all 0.3s;-webkit-transition: all 0.3s;-moz-transition: all 0.3s;-o-transition: all 0.3s;} .header .menu ul li a{ display: block; font-size: 16px;color: #b6b6b6; line-height: 99px; text-align: center;transition: all 0.3s;-webkit-transition: all 0.3s;-moz-transition: all 0.3s;-o-transition: all 0.3s; } .header .menu ul li:hover a{ color: #fff; font-weight: bold; } .header .menu ul li:hover:before{filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1; opacity:1;} .header .menu ul li.active a{ color: #fff; font-weight: bold; } .header .menu ul li.active:before{filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1; opacity:1;} .header .hidebtn{ position: relative; margin-top: 43px; margin-left: 45px; width: 38px; height: 14px; cursor: pointer; filter:alpha(opacity=57);-moz-opacity:0.57;-khtml-opacity:0.57; opacity:0.57;} .header .hidebtn b{ position:absolute; left: 0; z-index: 1; width: 100%; height: 2px; background: #fff; transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; } .header .hidebtn b.b1{top: 0;} .header .hidebtn b.b2{top: 6px;} .header .hidebtn b.b3{top: 12px; } .header .hidebtn.active b.b1,.header .hidebtn.active b.b3{ top: 2px; } .header .hidebtn.active b{ left: 14px; top: 2px; width: 10px; height: 10px;animation: xz 5s 0s infinite linear; } .header .hidebtn.active b.b2:before{ content:""; position: absolute; left: 50%; top: 50%; z-index: 1; margin:-17px 0 0 -17px; width: 34px; height: 34px; background: url(../images/icon/scrollbar.png) no-repeat center; } .banner{ position:relative; overflow:hidden;} .banner:before,.banner:after{ content: ""; position: absolute; top: 0; z-index: 1; width: 50%; height: 100%; background: #000; animation: banners 2s 0s linear forwards; -webkit-animation: banners 2s 0s linear forwards; -moz-animation: banners 2s 0s linear forwards; -o-animation: banners 2s 0s linear forwards; } .banner:before{ left: 0; } .banner:after{ right: 0; } .banner a{ display: block; } .banner img{ display: block; margin:0 auto; } .banner .glyphicon{ top:50% !important;} /* .banner .carousel-control.left,.banner .carousel-control.right{ width:60px;transition:all 0.3s;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-ms-transition:all 0.3s;-o-transition:all 0.3s;filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0;} .banner .carousel-control.left{ left:-60px;background:url(../images/ba/prev_arrow_60.png) no-repeat left;} .banner:hover .carousel-control.left{ left:0;} .banner .carousel-control.right{ right:-60px;background:url(../images/ba/next_arrow_60.png) no-repeat right;} .banner:hover .carousel-control.right{ right:0;} */ .banner .carousel-fade .carousel-inner .item{opacity:0;-webkit-transition-property:opacity;-moz-transition-property:opacity;-ms-transition-property:opacity;-o-transition-property:opacity;transition-property:opacity} .banner .carousel-fade .carousel-inner .active{filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1; opacity:1;} .banner .carousel-fade .carousel-inner .active.left,.carousel-fade .carousel-inner .active.right{left:0;filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0;} .banner .carousel-fade .carousel-inner .next.left,.carousel-fade .carousel-inner .prev.right{filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1; opacity:1;} /* .banner #myCarousel{position:relative} .banner #myCarousel .carousel-indicators{bottom:47px;z-index:4; font-size: 0; width: 1200px; margin:0 0 0 -600px; text-align: left;} .banner #myCarousel .carousel-indicators li{margin:0 16px 0 0;width:13px;height:13px; border:solid 1px #7e818d;} .banner #myCarousel .carousel-indicators li:hover{background:#fff;border:solid 1px #fff;} .banner #myCarousel .carousel-indicators li.active{background:#fff;border:solid 1px #fff;} */ .banner .banner_wenzi{ position:absolute;left: 0; bottom: 20%; z-index: 1; width: 100%; } .banner .banner_wenzi h4{ font-size:19px; color: #fff; letter-spacing:8px; font-weight: bold;filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity:0.5; opacity:0.5; } .banner .banner_wenzi h3{ font-size:19px; color: #fff; letter-spacing:8px;filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity:0.5; opacity:0.5; } .title-1{ margin-bottom: 40px; } .title-1 .left .mc .cn{ margin-bottom: 5px; font-size: 26px; color: #fff; line-height: 30px; } .title-1 .left .mc .en{ font-family: arial; font-size: 22px; color: #fff; line-height: 23px; filter:alpha(opacity=10);-moz-opacity:0.1;-khtml-opacity:0.1; opacity:0.1; } .title-1 .left p{ margin:35px 0 0 20px; padding-left:20px; font-size: 18px;color: #bbbbbb; line-height: 18px; border-left: solid 1px #5c5c5c; } .title-1 .left2 .mc .cn{ font-size: 26px; color: #fff; line-height: 30px; } .title-1 .left2 .mc .en{ font-family: arial; font-size: 21px; color: #fff; line-height: 30px;filter:alpha(opacity=10);-moz-opacity:0.1;-khtml-opacity:0.1; opacity:0.1; } .title-1 .left2 p{ margin-left: 10px; font-family: arial; font-size: 62px; color: #fff; line-height: 60px;filter:alpha(opacity=10);-moz-opacity:0.1;-khtml-opacity:0.1; opacity:0.1; } .title-1 .right{ position: relative;} .title-1 .right .search{width: 334px; height: 41px; border:solid 1px #575757; cursor: pointer;} .title-1 .right .search .hang{ position: relative; padding: 0 15px; font-size: 16px; color: #cbcbcb; line-height: 39px; } .title-1 .right .search .hang:before{ content: ""; position:absolute; right: 20px; top: 50%; z-index: 1; margin-top:-4px; width: 14px; height: 7px; background: url(../images/icon/title1_xl_jt.png) no-repeat;transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; } .title-1 .right .search:hover .hang:before{ transform: rotate(180deg); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); } .title-1 .right .search ul{ display: none; position:absolute; left: 0; top: 100%; z-index: 1; width: 100%; background:rgba(17,17,17,0.9); border: solid 1px #575757; border-top:none;} .title-1 .right .search ul li{ border-bottom: solid 1px #575757; } .title-1 .right .search ul li:last-child{ border-bottom:none; } .title-1 .right .search ul li a{ display: block; padding: 0 20px; font-size: 13px; color: #999; line-height: 39px;transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s;} .title-1 .right .search ul li:hover a{ background: #343131; } .title-2{ padding-bottom: 20px; margin-bottom: 20px; border-bottom: solid 1px rgba(255,255,255,0.25); } .title-2 h1{ margin-bottom: 10px; font-size: 30px; color: #fff; line-height: 34px; } .title-2 p{ margin:0; color: #7b7b7b; line-height: 24px; } .text-1{ margin-bottom: 20px; font-size: 16px;color: #e9e9e9; line-height: 30px; } .text-2 ul li{ margin-bottom: 30px; padding-bottom: 30px; border-bottom:solid 1px rgba(255,255,255,0.25); } .text-2 ul li a{ display: block; } .text-2 ul li a .biaoti{ margin-bottom: 5px; font-size: 16px;color: #fff; line-height: 24px; transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; } .text-2 ul li a .textbox{ position: relative; padding-right: 130px; min-height: 24px; } .text-2 ul li a .textbox p{ margin:0; color: #a1a1a1; line-height: 24px; } .text-2 ul li a .textbox .more{ position: absolute; right: 0; top: 0; z-index: 1; width: 100px; font-size: 12px;color: #a3a3a3; line-height: 24px; background: #424242; border-radius: 12px; -webkit-border-radius: 12px; -moz-border-radius: 12px; -o-border-radius: 12px;transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; } .text-2 ul li a:hover .biaoti{ color: #888; text-decoration: underline; } .text-2 ul li a:hover .textbox .more{ background: #676767 } .text-3{ color: #a1a1a1; line-height: 30px; } .textbox text-center a { color:#fff; } .pictrue-1{ margin-bottom: 20px; } .pictrue-2{ overflow: hidden; } .pictrue-2 section {display: block;} .pictrue-2 #options{width:300px;position:relative;z-index:100;margin:50px auto 40px} .pictrue-2 button{font-size:16px;-webkit-appearance:push-button;} .pictrue-2 figure {margin: 0;} .pictrue-2 .container{width:492px;height:364px;position:relative;left: -20px; margin:0 auto;-webkit-perspective:1200px;-moz-perspective:1200px;-o-perspective:1200px;perspective:1200px} .pictrue-2 #carousel{width:100%;height:100%;position:absolute;-webkit-transform:translateZ( -700px );-moz-transform:translateZ( -700px );-o-transform:translateZ( -700px );transform:translateZ( -700px );-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-o-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transition:-webkit-transform 1s;-moz-transition:-moz-transform 1s;-o-transition:-o-transform 1s;transition:transform 1s} .pictrue-2 #carousel figure{display:block;position:absolute; width:468px;height:340px;left:10px;top:10px;border:2px solid #fff;line-height:116px;font-size:80px;font-weight:bold;color:white;text-align:center;} .pictrue-2 #carousel figure:nth-child(1){background:hsla( 0,100%,50%,0.8 )} .pictrue-2 #carousel figure:nth-child(2){background:hsla( 40,100%,50%,0.8 )} .pictrue-2 #carousel figure:nth-child(3){background:hsla( 80,100%,50%,0.8 )} .pictrue-2 #carousel figure:nth-child(4){background:hsla( 120,100%,50%,0.8 )} .pictrue-2 #carousel figure:nth-child(5){background:hsla( 160,100%,50%,0.8 )} .pictrue-2 #carousel figure:nth-child(6){background:hsla( 200,100%,50%,0.8 )} .pictrue-2 #carousel figure:nth-child(7){background:hsla( 240,100%,50%,0.8 )} .pictrue-2 #carousel figure:nth-child(8){background:hsla( 280,100%,50%,0.8 )} .pictrue-2 #carousel figure:nth-child(9){background:hsla( 320,100%,50%,0.8 )} .pictrue-2 #carousel figure:nth-child(1){-webkit-transform:rotateY( 0deg ) translateZ( 700px );-moz-transform:rotateY( 0deg ) translateZ( 700px );-o-transform:rotateY( 0deg ) translateZ( 700px );transform:rotateY( 0deg ) translateZ( 700px )} .pictrue-2 #carousel figure:nth-child(2){-webkit-transform:rotateY( 40deg ) translateZ( 700px );-moz-transform:rotateY( 40deg ) translateZ( 700px );-o-transform:rotateY( 40deg ) translateZ( 700px );transform:rotateY( 40deg ) translateZ( 700px )} .pictrue-2 #carousel figure:nth-child(3){-webkit-transform:rotateY( 80deg ) translateZ( 700px );-moz-transform:rotateY( 80deg ) translateZ( 700px );-o-transform:rotateY( 80deg ) translateZ( 700px );transform:rotateY( 80deg ) translateZ( 700px )} .pictrue-2 #carousel figure:nth-child(4){-webkit-transform:rotateY( 120deg ) translateZ( 700px );-moz-transform:rotateY( 120deg ) translateZ( 700px );-o-transform:rotateY( 120deg ) translateZ( 700px );transform:rotateY( 120deg ) translateZ( 700px )} .pictrue-2 #carousel figure:nth-child(5){-webkit-transform:rotateY( 160deg ) translateZ( 700px );-moz-transform:rotateY( 160deg ) translateZ( 700px );-o-transform:rotateY( 160deg ) translateZ( 700px );transform:rotateY( 160deg ) translateZ( 700px )} .pictrue-2 #carousel figure:nth-child(6){-webkit-transform:rotateY( 200deg ) translateZ( 700px );-moz-transform:rotateY( 200deg ) translateZ( 700px );-o-transform:rotateY( 200deg ) translateZ( 700px );transform:rotateY( 200deg ) translateZ( 700px )} .pictrue-2 #carousel figure:nth-child(7){-webkit-transform:rotateY( 240deg ) translateZ( 700px );-moz-transform:rotateY( 240deg ) translateZ( 700px );-o-transform:rotateY( 240deg ) translateZ( 700px );transform:rotateY( 240deg ) translateZ( 700px )} .pictrue-2 #carousel figure:nth-child(8){-webkit-transform:rotateY( 280deg ) translateZ( 700px );-moz-transform:rotateY( 280deg ) translateZ( 700px );-o-transform:rotateY( 280deg ) translateZ( 700px );transform:rotateY( 280deg ) translateZ( 700px )} .pictrue-2 #carousel figure:nth-child(9){-webkit-transform:rotateY( 320deg ) translateZ( 700px );-moz-transform:rotateY( 320deg ) translateZ( 700px );-o-transform:rotateY( 320deg ) translateZ( 700px );transform:rotateY( 320deg ) translateZ( 700px )} .pictrue-2 #carousel figure a{ display: block; position: relative; height: 100%; overflow: hidden; } .pictrue-2 #carousel figure a .imgbox{ position: relative; height: 100%; transition: all 1s; -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; } .pictrue-2 #carousel figure a h5{ position:absolute;left: 0; /*bottom:-55px;*/ bottom:0px; z-index: 1; width: 100%; margin:0; padding: 0 15px; font-size: 18px;color: #fff; line-height: 55px; background: rgba(0,0,0,0.5);transition: all 0.3s;-webkit-transition: all 0.3s;-moz-transition: all 0.3s;-o-transition: all 0.3s; } .pictrue-2 #options{width:100%;text-align:center} .pictrue-2 #options button{ position: relative; width: 62px; height: 62px;filter:alpha(opacity=80);-moz-opacity:0.8;-khtml-opacity: 0.8; opacity: 0.8; border:none; transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; } .pictrue-2 #options button#previous{ left: 0; background: url(../images/icon/j1.png) no-repeat center; } .pictrue-2 #options button#next{ right: 0; background: url(../images/icon/j2.png) no-repeat center; } .pictrue-2 #options button:hover{filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity: 1; opacity: 1; } .pictrue-2 #options button#previous:hover{ left: -5px; } .pictrue-2 #options button#next:hover{ right: -5px; } /*.pictrue-2 #carousel figure a:hover .imgbox{ transform:scale(1.1,1.1); -webkit-transform:scale(1.1,1.1); -moz-transform:scale(1.1,1.1); -o-transform:scale(1.1,1.1); } .pictrue-2 #carousel figure a:hover h5{ bottom: 0; }*/ .pictrue-3 .trans3d{-webkit-transform-style:preserve-3d;-webkit-transform:translate3d(0,0,0);-moz-transform-style:preserve-3d;-moz-transform:translate3d(0,0,0);-ms-transform-style:preserve-3d;-ms-transform:translate3d(0,0,0);transform-style:preserve-3d;transform:translate3d(0,0,0)} .pictrue-3 #contentContainer{position:absolute;margin-left:-500px;margin-top:-500px;left:50%;top:50%;width:1000px;height:1000px} .pictrue-3 #carouselContainer{position:absolute;margin-left:-500px;margin-top:-500px;left:50%;top:50%;width:1000px;height:1000px} .pictrue-3 .carouselItem{width:320px;height:180px;position:absolute;left:50%;top:50%;margin-left:-160px;margin-top:-90px;visibility:hidden} .pictrue-3 .carouselItemInner{width:320px;height:180px;position:absolute;background-color:rgba(255,255,255,.75);border:5px solid rgba(255,255,255,.5);left:50%;top:50%;margin-left:-160px;margin-top:-90px;} .pictrue-3 a{ display: block; position: relative; height: 100%;} .pictrue-3 a:before{ content: ""; position:absolute;left: 50%; top:50%; z-index: 1; margin:-25px 0 0 -25px; width: 50px; height: 50px; background: url(../images/icon/video_bf.png) no-repeat; } #section1,#section2,#section3,#section4,#section5,#section6,#section7{background-position:50% top; transition:all 4s ease 0s;-webkit-transition:all 4s ease 0s;-moz-transition:all 4s ease 0s;-o-transition:all 4s ease 0s;} #warp .section.active{background-position:50% bottom; transition:all 2s ease 0s;-webkit-transition:all 2s ease 0s;-moz-transition:all 2s ease 0s;-o-transition:all 2s ease 0s;} #section1 .logo{ position: absolute; left: 50%; top: 50%; z-index: 1; margin:-46px 0 0 -187px; width: 374px; height: 93px; } #section1 .next{ position: absolute; left: 50%; bottom: 50px; z-index: 1; margin-left:-45px; width: 90px; cursor: pointer; animation:next 1s infinite alternate;-webkit-animation:next 1s alternate infinite;-moz-animation:next 1s alternate infinite;-o-animation:next 1s alternate infinite; } #section1 .next h6{ margin-bottom: 20px; color: #fff; line-height: 16px;filter:alpha(opacity=35);-moz-opacity:0.35;-khtml-opacity: 0.35; opacity: 0.35; } #section1 .next img{ display: block; margin:0 auto; } #section1 .next img.rolling{ margin-bottom: 20px; } #section2 .text{ padding-top: 110px; height: 467px; font-size: 18px; color: #d1d0d0; line-height: 30px; } #section2 .text p{ margin-bottom: 20px; } #section3 .text{ margin-bottom:50px; position: relative; } #section3 .text .texts{ height: 425px; overflow: hidden; } #section3 .text .texts .ulbox{ position: relative; top: 0; } #section3 .text ul{ position: relative; margin:0; width: 100%; height: 425px;} #section3 .text ul li{ position: absolute; z-index: 1; width: 234px;} #section3 .text ul li a{ display: block; position: relative; height: 204px;} #section3 .text ul li.li0{ left: 402px; top: 219px; } #section3 .text ul li.li1{ left: 542px; top: 219px; } #section3 .text ul li.li2{ left: 122px; top: 219px; } #section3 .text ul li.li3{ left: 262px; top: 219px; } #section3 .text ul li.li4{ left: 280px; top: 0; } #section3 .text ul li.li5{ left: 420px; top: 0; } #section3 .text ul li.li6{ left: 0; top: 0; } #section3 .text ul li.li7{ left: 140px; top: 0; } #section3 .text ul li .bg{ position: relative; z-index: 1; width: 100%; height: 100%; overflow: hidden; filter:alpha(opacity=30);-moz-opacity:0.3;-khtml-opacity: 0.3; opacity: 0.3; transition: all 0.5s;-webkit-transition: all 0.5s;-moz-transition: all 0.5s;-o-transition: all 0.5s; } #section3 .text ul li .bg:hover{filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity: 1; opacity: 1; } #section3 .text ul li .bg:before{ content: ""; position: absolute; left:50%; z-index: 1; margin-left: -11px; width: 22px; height: 22px; background: url(../images/icon/x.png) no-repeat; background-size: 100% 100%; } #section3 .text ul li .bg b{ display: block; position: absolute; z-index: 1; width:0; height: 235px;border-top: solid 1px #fff;transform-origin:left top;-webkit-transform-origin:left top;-moz-transform-origin:left top;-o-transform-origin:left top;} #section3 .text ul li.dan .bg b.x1{left: 0; top: 0;} #section3 .text ul li.dan .bg b.x2{left: 100%; top: 0; transform: rotate(120deg); -webkit-transform: rotate(120deg); -moz-transform: rotate(120deg); -o-transform: rotate(120deg);} #section3 .text ul li.dan .bg b.x3{left: 50%; top: 100%; transform: rotate(-120deg);-webkit-transform: rotate(-120deg); -moz-transform: rotate(-120deg); -o-transform: rotate(-120deg);} #section3 .text ul li.dan .bg:before{ bottom: 50px; } #section3 .text ul li.shuang .bg b.x1{ right:0; top: 100%; margin-top:-1px;} #section3 .text ul li.shuang .bg b.x2{ left:0; top: 100%; margin-top:-1px;transform: rotate(-60deg);-webkit-transform: rotate(-60deg); -moz-transform: rotate(-60deg); -o-transform: rotate(-60deg);} #section3 .text ul li.shuang .bg b.x3{ left:50%; top: 0; transform: rotate(60deg);-webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); -o-transform: rotate(60deg);} #section3 .text ul li.shuang .bg:before{ top: 50px; } #section3 .text ul li h5{ position:absolute; left: 0; z-index: 2; width: 100%; font-size: 18px;color: #d1d0d0; line-height: 24px; filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0; } #section3 .text ul li.dan h5{ top: 34px;} #section3 .text ul li.shuang h5{ bottom: 34px;} #section3 .text .arrows{ position:absolute; right: 0; top: 0; z-index: 1; width: 118px; height:66px; overflow: hidden; cursor: pointer; filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0;} #section3 .text .arrows .arrow-left{ position:absolute; left: 0; bottom: 0; width:78px; height:78px; transform-origin:left bottom; transform: rotate(30deg); overflow: hidden; } #section3 .text .arrows .arrow-left:before{ content: ""; position:absolute;left: 0; top: 0; z-index: 1; width:78px; height: 78px; transform-origin:left top; transform: rotate(30deg); background: #fff; filter:alpha(opacity=13);-moz-opacity:0.13;-khtml-opacity: 0.13; opacity: 0.13;transition: all 0.5s;-webkit-transition: all 0.5s;-moz-transition: all 0.5s;-o-transition: all 0.5s; } #section3 .text .arrows .arrow-left:after{ content: ""; position:absolute; z-index:2; width: 10px; height: 17px;left:17px; top:27px; background: url(../images/icon/arrow_jt.png) no-repeat; transform: rotate(-30deg);} #section3 .text .arrows .arrow-right{ position:absolute; right:0; top: 0; width: 78px; height: 78px; transform-origin:right top; transform: rotate(30deg); overflow: hidden;} #section3 .text .arrows .arrow-right:before{ content: ""; position:absolute;left: 0; top: 0; z-index: 1; width: 78px; height: 78px; transform-origin:right bottom; transform: rotate(30deg); background: #fff; filter:alpha(opacity=48);-moz-opacity:0.48;-khtml-opacity: 0.48; opacity: 0.48;transition: all 0.5s;-webkit-transition: all 0.5s;-moz-transition: all 0.5s;-o-transition: all 0.5s; } #section3 .text .arrows .arrow-right:after{ content: ""; position:absolute; z-index:2; width: 10px; height: 17px; right: 17px; bottom: 27px; background: url(../images/icon/arrow_jt.png) no-repeat; transform: rotate(150deg); } #section3 .text .arrows .arrow-left:hover:before{ background: #000; filter:alpha(opacity=30);-moz-opacity:0.3;-khtml-opacity:0.3; opacity:0.3; } #section3 .text .arrows .arrow-right:hover:before{ background: #000; filter:alpha(opacity=30);-moz-opacity:0.3;-khtml-opacity:0.3; opacity:0.3; } #section3.rollin-section3-text .text ul li.li0{ animation:danx0 1s 2.5s forwards; -webkit-animation:danx0 1s 2.5s forwards; -moz-animation:danx0 1s 2.5s forwards; -o-animation:danx0 1s 2.5s forwards;} #section3.rollin-section3-text .text ul li.li1{ animation:danx1 1s 3.5s forwards; -webkit-animation:danx1 1s 3.5s forwards; -moz-animation:danx1 1s 3.5s forwards; -o-animation:danx1 1s 3.5s forwards;} #section3.rollin-section3-text .text ul li.li2{ animation:danx2 1s 2.5s forwards; -webkit-animation:danx2 1s 2.5s forwards; -moz-animation:danx2 1s 2.5s forwards; -o-animation:danx2 1s 2.5s forwards;} #section3.rollin-section3-text .text ul li.li3{ animation:danx3 1s 3.5s forwards; -webkit-animation:danx3 1s 3.5s forwards; -moz-animation:danx3 1s 3.5s forwards; -o-animation:danx3 1s 3.5s forwards;} #section3.rollin-section3-text .text ul li.li4{ animation:danx4 1s 2.5s forwards; -webkit-animation:danx4 1s 2.5s forwards; -moz-animation:danx4 1s 2.5s forwards; -o-animation:danx4 1s 2.5s forwards;} #section3.rollin-section3-text .text ul li.li5{ animation:danx5 1s 3.5s forwards; -webkit-animation:danx5 1s 3.5s forwards; -moz-animation:danx5 1s 3.5s forwards; -o-animation:danx5 1s 3.5s forwards;} #section3.rollin-section3-text .text ul li.li6{ animation:danx6 1s 2.5s forwards; -webkit-animation:danx6 1s 2.5s forwards; -moz-animation:danx6 1s 2.5s forwards; -o-animation:danx6 1s 2.5s forwards;} #section3.rollin-section3-text .text ul li.li7{ animation:danx7 1s 3.5s forwards; -webkit-animation:danx7 1s 3.5s forwards; -moz-animation:danx7 1s 3.5s forwards; -o-animation:danx7 1s 3.5s forwards;} #section3.rollin-section3-text .text ul li .bg:before{animation:xz 3s 3s infinite linear; -webkit-animation:xz 3s 3s infinite linear; -moz-animation:xz 3s 3s infinite linear; -o-animation:xz 3s 3s infinite linear;} #section3.rollin-section3-text .text ul li.dan .bg b.x1{animation:bx 0.5s 0.5s forwards; -webkit-animation:bx 0.5s 0.5s forwards; -moz-animation:bx 0.5s 0.5s forwards; -o-animation:bx 0.5s 0.5s forwards;} #section3.rollin-section3-text .text ul li.dan .bg b.x2{animation:bx 0.5s 1s forwards; -webkit-animation:bx 0.5s 1s forwards; -moz-animation:bx 0.5s 1s forwards; -o-animation:bx 0.5s 1s forwards;} #section3.rollin-section3-text .text ul li.dan .bg b.x3{animation:bx 0.5s 1.5s forwards; -webkit-animation:bx 0.5s 1.5s forwards; -moz-animation:bx 0.5s 1.5s forwards; -o-animation:bx 0.5s 1.5s forwards;} #section3.rollin-section3-text .text ul li.shuang .bg b.x1{ animation:bx 0.5s 0.5s forwards; -webkit-animation:bx 0.5s 0.5s forwards; -moz-animation:bx 0.5s 0.5s forwards; -o-animation:bx 0.5s 0.5s forwards;} #section3.rollin-section3-text .text ul li.shuang .bg b.x2{ animation:bx 1s 1s forwards; animation:bx 1s 1s forwards; animation:bx 1s 1s forwards; animation:bx 1s 1s forwards;} #section3.rollin-section3-text .text ul li.shuang .bg b.x3{ animation:bx 1.5s 1.5s forwards; -webkit-animation:bx 1.5s 1.5s forwards; -moz-animation:bx 1.5s 1.5s forwards; -o-animation:bx 1.5s 1.5s forwards;} #section3.rollin-section3-text .text ul li h5{animation:btext 1s 4s forwards; -webkit-animation:btext 1s 4s forwards; -moz-animation:btext 1s 4s forwards; -o-animation:btext 1s 4s forwards;} #section3.rollin-section3-text .text .arrows{animation:arrows 5s 0s linear forwards; -webkit-animation:arrows 5s 0s linear forwards; -moz-animation:arrows 5s 0s linear forwards; -o-animation:arrows 5s 0s linear forwards;} #section4 .right .content{width:804px; height:537px; overflow:auto;} #section4 .right .content .images_container{overflow:hidden;} #section4 .right .content .images_container ul{ margin:0 -10px;} #section4 .right .content .images_container ul li.dan{ margin-top: 100px; } #section4 .right .content .images_container ul li{ padding:0 10px; width: 206px; filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0; } #section4 .right .content .images_container ul li a{ position: relative; display: block; padding: 7px 0; width:186px; } #section4 .right .content .images_container ul li a:before,#section4 .right .content .images_container ul li a:after{ content: ""; position:absolute; width: 96px; height: 76px;filter:alpha(opacity=15);-moz-opacity:0.15;-khtml-opacity: 0.15; opacity: 0.15;transition: all 0.5s;-webkit-transition: all 0.5s;-moz-transition: all 0.5s;-o-transition: all 0.5s; } #section4 .right .content .images_container ul li a:before{ left: 0; top: 0; z-index: 1; border-top: solid 1px #fff; border-left: solid 1px #fff;} #section4 .right .content .images_container ul li a:after{ right: 0; bottom: 0; z-index: 1; border-bottom: solid 1px #fff; border-right: solid 1px #fff;} #section4 .right .content .images_container ul li a:hover:before,#section4 .right .content .images_container ul li a:hover:after{ width: 100%; height: 100%; } #section4 .right .content .images_container ul li a .boxs{ position: relative; margin:0 7px;height:291px; } #section4 .right .content .images_container ul li a .boxs .imgbox{ position:absolute;left: 0; top: 0;z-index: 5; width: 100%; height: 100%; -webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter:grayscale(100%);-o-filter:grayscale(100%);filter:grayscale(100%);filter:gray; backface-visibility: hidden;-webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;-o-backface-visibility: hidden; transition: all 1s;-webkit-transition: all 1s;-moz-transition: all 1s;-o-transition: all 1s;} #section4 .right .content .images_container ul li a .boxs .textbox{ position:absolute;left: 0; top: 0; width: 100%; height: 100%; background:url(../images/li_bg.jpg) no-repeat; transition: all 1s;transition: all 1s;-webkit-transition: all 1s;-moz-transition: all 1s;-o-transition: all 1s; } #section4 .right .content .images_container ul li a .boxs .textbox .wenzi{ position:absolute;left: 0; top: 0; padding: 15px; width: 100%; height: 100%; transform: rotateY(180deg); -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); } #section4 .right .content .images_container ul li a .boxs .textbox .wenzi h4{ margin:0 0 20px; font-size: 18px; color: #fff; line-height: 30px;filter:alpha(opacity=70);-moz-opacity:0.7;-khtml-opacity: 0.7; opacity: 0.7;text-shadow:4px 4px 0px rgba(255,255,255,0.2);-webkit-text-shadow:4px 4px 0px rgba(255,255,255,0.2);-moz-text-shadow:4px 4px 0px rgba(255,255,255,0.2);-o-text-shadow:4px 4px 0px rgba(255,255,255,0.2); } #section4 .right .content .images_container ul li a .boxs .textbox .wenzi p{ margin:0; height: 192px; color: #fff; line-height:24px; overflow: hidden; text-align:justify;filter:alpha(opacity=70);-moz-opacity:0.7;-khtml-opacity: 0.7; opacity: 0.7; text-shadow:4px 4px 0px rgba(255,255,255,0.2);-webkit-text-shadow:4px 4px 0px rgba(255,255,255,0.2);-moz-text-shadow:4px 4px 0px rgba(255,255,255,0.2);-o-text-shadow:4px 4px 0px rgba(255,255,255,0.2); } #section4 .right .content .images_container ul li:hover a .boxs .imgbox{ transform: rotateY(180deg);-webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg);-webkit-filter:grayscale(0%);-moz-filter:grayscale(0%);-ms-filter:grayscale(0%);-o-filter:grayscale(0%);filter:grayscale(0%);filter:gray;} #section4 .right .content .images_container ul li:hover a .boxs .textbox{ transform: rotateY(180deg);-webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg);} #section4.rollin-li .right .content .images_container ul li{animation-name:fadeIns; -webkit-animation-name:fadeIns; -moz-animation-name:fadeIns; -o-animation-name:fadeIns; animation-duration: 1s; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; -o-animation-fill-mode:forwards;} #section4 .jiangexian{ position: relative; top: -17px; margin-bottom:40px; height: 1px; background: #fff;filter:alpha(opacity=27);-moz-opacity:0.27;-khtml-opacity: 0.27; opacity: 0.27; } #section5 .section5-box{ padding: 100px 0 130px; margin:0 -35px; } #section5 .section5-box .item{ position: relative; top: 50px; padding: 0 35px; filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0; } #section5 .section5-box a{ margin-bottom:10px; display: block; } #section5 .section5-box a .time{ margin:0 0 20px; font-family:'SimSun-ExtB','宋体',arial; font-size: 18px;color: #a2a2a2; line-height: 24px; } #section5 .section5-box a .jiangexian{ margin:0 0 20px; width: 37px; height: 2px; background: #fff;filter:alpha(opacity=23);-moz-opacity:0.23;-khtml-opacity: 0.23; opacity: 0.23; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; } #section5 .section5-box a h3{ margin:0 0 15px; font-size: 18px;color: #d7d7d7; line-height: 30px; } #section5 .section5-box a p{ margin:0 0 50px; height: 72px; color: #878787; line-height: 24px; overflow: hidden; } #section5 .section5-box a .fuhao .kuang{ width: 33px; height: 33px; font-family: arial; font-size: 10px; color: #fff; line-height: 31px; text-align: center; letter-spacing: 1px; border:solid 1px #fff; filter:alpha(opacity=37);-moz-opacity:0.37;-khtml-opacity: 0.37; opacity: 0.37; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; } #section5 .section5-box a .fuhao .arrow{ margin-left: 18px; font-size: 18px;color: #575757; line-height: 33px;transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; } #section5 .section5-box a:hover .jiangexian{ width: 100%; } #section5 .section5-box a:hover h3{ text-decoration: underline; } #section5 .section5-box a:hover .fuhao .kuang{ transform: rotate(180deg); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); } #section5 .section5-box a:hover .fuhao .arrow{ margin-left: 28px; } #section5.rollin-section5-item .section5-box .item{animation-name:section5-item; -webkit-animation-name:section5-item; -moz-animation-name:section5-item; -o-animation-name:section5-item; animation-duration: 1s; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; -o-animation-fill-mode: forwards;} #section6 .text{ position: relative; padding:20px 50px 20px 0; } #section6 .text .bg{ position: absolute; right: 0; top: 0; z-index: 1; width: 96px; height: 100%; border:solid 1px #fff; border-left: none;filter:alpha(opacity=20);-moz-opacity:0.2;-khtml-opacity: 0.2; opacity: 0.2; } #section6 .text .bg:before,#section6 .text .bg:after{ content: ""; position: absolute; left: 0; z-index: 1; width: 1px; height: 15px; background: #fff; } #section6 .text .bg:before{ top: 0; } #section6 .text .bg:after{ bottom: 0; } #section6 .text h4,#section6 .text h5,#section6 .text h2{position: relative; z-index: 2;color: #fff; filter:alpha(opacity=80);-moz-opacity:0.8;-khtml-opacity: 0.8; opacity: 0.8;} #section6 .text h4{ margin:0; font-size: 24px; font-weight: bold; line-height: 36px; } #section6 .text h5{ margin:0; font-size: 16px;line-height: 28px; } #section6 .text h2{ margin:10px 0 0; font-size: 48px;line-height: 60px; } #section6.rollin-text .right .text{animation:section6-text 1s infinite alternate; -webkit-animation:section6-text 1s infinite alternate; -moz-animation:section6-text 1s infinite alternate; -o-animation:section6-text 1s infinite alternate;} #section7 .text{ margin:0 auto; max-width: 576px; } #section7 .biaoti{ position: relative; margin-bottom: 32px; } #section7 .biaoti .bg{ position: absolute; right: -2px; top: 65px; z-index: 1; } #section7 .biaoti .bg:before{ content: ""; position: absolute; left: 0; top: 0; z-index: 1; width: 0; height: 1px; background: #fff;transform-origin:left top; -webkit-transform-origin:left top; -moz-transform-origin:left top; -o-transform-origin:left top; transform: rotate(-30deg); -webkit-transform: rotate(-30deg); -moz-transform: rotate(-30deg); -o-transform: rotate(-30deg); filter:alpha(opacity=7);-moz-opacity:0.07;-khtml-opacity: 0.07; opacity: 0.07; } #section7 .biaoti .bg:after{ content: ""; position: absolute; left: -42px; top: 0; z-index: 1; width: 0; height: 1px; background: #fff;transform-origin:left top; -webkit-transform-origin:left top; -moz-transform-origin:left top; -o-transform-origin:left top; transform: rotate(-30deg);-webkit-transform: rotate(-30deg); -moz-transform: rotate(-30deg); -o-transform: rotate(-30deg); filter:alpha(opacity=17);-moz-opacity:0.17;-khtml-opacity: 0.17; opacity: 0.17; } #section7 .biaoti .en{ margin-bottom: 17px; filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0;} #section7 .biaoti .cn{ font-size: 0; } #section7 .biaoti .cn .mc{ position: relative; display: inline-block; vertical-align: top; margin-bottom: 27px; } #section7 .biaoti .cn .mc:after,#section7 .biaoti .cn .mc:before{ content: ""; position: absolute; top: 17px; z-index: 1; width: 193px; height: 87px; border-top: solid 2px #fff; filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0;} #section7 .biaoti .cn .mc:after{ left:-214px; border-left: solid 2px #fff; } #section7 .biaoti .cn .mc:before{ right:-214px; border-right: solid 2px #fff; } #section7 .biaoti .cn .mc img{filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0;} #section7 .biaoti .cn .fenxiang ul{ position: relative; z-index: 2; display: inline-block; vertical-align: top; margin:0; filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0; } #section7 .biaoti .cn .fenxiang ul li{ margin:0 18px; position: relative;} #section7 .biaoti .cn .fenxiang ul li a{ display: block; width: 46px; height: 46px; line-height: 46px; background:rgba(255,255,255,0.25); border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; } #section7 .biaoti .cn .fenxiang ul li a .icon{width: 100%; height: 100%;} #section7 .biaoti .cn .fenxiang ul li:hover a{background:rgba(255,255,255,0.3);;-webkit-animation:work-btn 1s linear;-moz-animation:work-btn 1s linear;-o-animation:work-btn 1s linear;animation:work-btn 1s linear} #section7 .biaoti .cn .fenxiang ul li .mask{position: absolute; top: 100%; left: 50%; transform: translateX(-50%) scale(0); background-color: #fff; padding: 10px; border-radius: 5px; overflow: hidden; transition: all .4s;} #section7 .biaoti .cn .fenxiang ul li .mask img{width: 100px; height: 100px;} #section7 .biaoti .cn .fenxiang ul li:hover .mask{transform: translateX(-50%) scale(1);} #section7 .textbox{ margin-bottom: 52px; font-size: 0; } #section7 .textbox ul{ display: inline-block; vertical-align: top; } #section7 .textbox ul li{ position: relative; padding-left: 34px; font-size: 16px;color: #fff; line-height: 40px; background-position: left; background-repeat: no-repeat; filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0; } #section7 .textbox ul li a { color:#fff; } #section7 .logo{ position: relative; margin-bottom:30px;} #section7 .logo:before{ content: ""; position: absolute; left: 0; bottom: 0; z-index: 1; width:100%; height: 76px; border:solid 2px #fff; border-top: none;filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0; } #section7 .logo .xian{ position: absolute; left: 0; top: 100%; z-index: 1;} #section7 .logo .xian:before{ content: ""; position: absolute; left: 0; top: -26px; z-index: 1; width: 0; height: 1px; background:#fff; transform-origin:left top;-webkit-transform-origin:left top; -moz-transform-origin:left top; -o-transform-origin:left top; transform: rotate(150deg);-webkit-transform: rotate(150deg); -moz-transform: rotate(150deg); -o-transform: rotate(150deg); filter:alpha(opacity=7);-moz-opacity:0.07;-khtml-opacity: 0.07; opacity: 0.07; } #section7 .logo .xian:after{ content: ""; position: absolute; left: 0; top: 0; z-index: 1; width: 0; height: 1px; background:#fff; transform-origin:left top; -webkit-transform-origin:left top; -moz-transform-origin:left top; -o-transform-origin:left top; transform: rotate(150deg);-webkit-transform: rotate(150deg); -moz-transform: rotate(150deg); -o-transform: rotate(150deg); filter:alpha(opacity=17);-moz-opacity:0.17;-khtml-opacity: 0.17; opacity: 0.17; } #section7 .logo img{ position: relative; z-index: 2; width: 305px; filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0; } #section7 .biaoyu{ font-size: 0; filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0;} #section7.rollin-text .biaoti .bg:before{animation:section7-biaoti-xian 1s 2.5s forwards; -webkit-animation:section7-biaoti-xian 1s 2.5s forwards; -moz-animation:section7-biaoti-xian 1s 2.5s forwards; -o-animation:section7-biaoti-xian 1s 2.5s forwards;} #section7.rollin-text .biaoti .bg:after{animation:section7-biaoti-xian2 1s 2.5s forwards; -webkit-animation:section7-biaoti-xian2 1s 2.5s forwards; -moz-animation:section7-biaoti-xian2 1s 2.5s forwards; -o-animation:section7-biaoti-xian2 1s 2.5s forwards;} #section7.rollin-text .biaoti .en{animation:fadeIns 1s 2.5s forwards; -webkit-animation:fadeIns 1s 2.5s forwards; -moz-animation:fadeIns 1s 2.5s forwards; -o-animation:fadeIns 1s 2.5s forwards;} #section7.rollin-text .biaoti .cn .mc:after{animation:fadeInLefts 1s 0s forwards; -webkit-animation:fadeInLefts 1s 0s forwards; -moz-animation:fadeInLefts 1s 0s forwards; -o-animation:fadeInLefts 1s 0s forwards; } #section7.rollin-text .biaoti .cn .mc:before{animation:fadeInRights 1s 0s forwards; -webkit-animation:fadeInRights 1s 0s forwards; -moz-animation:fadeInRights 1s 0s forwards; -o-animation:fadeInRights 1s 0s forwards; } #section7.rollin-text .biaoti .cn .mc img{animation:fadeIns 1s 2.2s forwards; -webkit-animation:fadeIns 1s 2.2s forwards; -moz-animation:fadeIns 1s 2.2s forwards; -o-animation:fadeIns 1s 2.2s forwards;} #section7.rollin-text .textbox ul li.li0{animation:fadeInTops 1s 1s forwards; -webkit-animation:fadeInTops 1s 1s forwards; -moz-animation:fadeInTops 1s 1s forwards; -o-animation:fadeInTops 1s 1s forwards;} #section7.rollin-text .textbox ul li.li1{animation:fadeInTops 1s 1.2s forwards; -webkit-animation:fadeInTops 1s 1.2s forwards; -moz-animation:fadeInTops 1s 1.2s forwards; -o-animation:fadeInTops 1s 1.2s forwards;} #section7.rollin-text .textbox ul li.li2{animation:fadeInTops 1s 1.5s forwards; -webkit-animation:fadeInTops 1s 1.5s forwards; -moz-animation:fadeInTops 1s 1.5s forwards; -o-animation:fadeInTops 1s 1.5s forwards;} #section7.rollin-text .biaoti .cn .fenxiang ul{animation:fadeIns 1s 2s forwards; -webkit-animation:fadeIns 1s 2s forwards; -moz-animation:fadeIns 1s 2s forwards; -o-animation:fadeIns 1s 2s forwards;} #section7.rollin-text .logo:before{animation:fadeInLefts2 1s 0s forwards; -webkit-animation:fadeInLefts2 1s 0s forwards; -moz-animation:fadeInLefts2 1s 0s forwards; -o-animation:fadeInLefts2 1s 0s forwards;} #section7.rollin-text .logo img{animation:fadeIns2 1s 1.7s forwards; -webkit-animation:fadeIns2 1s 1.7s forwards; -moz-animation:fadeIns2 1s 1.7s forwards; -o-animation:fadeIns2 1s 1.7s forwards;} #section7.rollin-text .logo .xian:after{animation:section7-biaoti-xian2 1s 2.5s forwards; -webkit-animation:section7-biaoti-xian2 1s 2.5s forwards; -moz-animation:section7-biaoti-xian2 1s 2.5s forwards; -o-animation:section7-biaoti-xian2 1s 2.5s forwards;} #section7.rollin-text .logo .xian:before{animation:section7-logo-xian 1s 2.5s forwards; -webkit-animation:section7-logo-xian 1s 2.5s forwards; -moz-animation:section7-logo-xian 1s 2.5s forwards; -o-animation:section7-logo-xian 1s 2.5s forwards;} #section7.rollin-text .biaoyu{animation:fadeIns 1s 2s forwards; -webkit-animation:fadeIns 1s 2s forwards; -moz-animation:fadeIns 1s 2s forwards;-o-animation:fadeIns 1s 2s forwards;} #warp .title{ width: 33%; } #warp .title .xian{ position: relative; margin-bottom: 40px; width: 0; height: 18px; overflow: hidden; filter:alpha(opacity=30);-moz-opacity:0.3;-khtml-opacity: 0.3; opacity: 0.3; } #warp .title .xian:before{content: ""; position: absolute; right: 18px; top: 8px; z-index: 1; width: 0; height: 1px; background: #fff; } #warp .title .xian:after{ content: ""; position: absolute; right: 0; top: 0; z-index: 1; width: 18px; height: 18px; border:solid 1px #fff; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%;} #warp .title .text .biaoti{ width: 63px; } #warp .title .text .biaoti .mc{ position: relative; margin-bottom: 94px; height: 199px; } #warp .title .text .biaoti .mc span{ position: relative; filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0;} #warp .title .text .biaoti .mc b:first-child{ position: absolute; left: 0; filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0; } #warp .title .text .biaoti .mc b:last-child{ position: absolute; right: 0; filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0; } #warp .title .text .biaoti .x{ margin-left:15px;animation:xz 10s infinite linear; } #warp .title .text .en{position: relative; padding: 107px 0 0 16px; filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0;} #warp .title .text p{position: relative; margin-left: 62px; padding-top: 104px; width: 16px; font-family: "宋体"; font-size: 16px;color: #aaa; line-height: 26px;filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0; } #warp .rollin-title .title .xian{animation:title-xian 0.5s forwards; -webkit-animation:title-xian 0.5s forwards;-moz-animation:title-xian 0.5s forwards; -o-animation:title-xian 0.5s forwards;} #warp .rollin-title .title .xian:before{animation:title-xianbefore 0.5s 0.5s forwards; -webkit-animation:title-xianbefore 0.5s 0.5s forwards; -moz-animation:title-xianbefore 0.5s 0.5s forwards; -o-animation:title-xianbefore 0.5s 0.5s forwards; } #warp .rollin-title .title .text .biaoti .mc span{animation:title-mcspan 1s 0.3s forwards; -webkit-animation:title-mcspan 1s 0.3s forwards; -moz-animation:title-mcspan 1s 0.3s forwards; -o-animation:title-mcspan 1s 0.3s forwards; } #warp .rollin-title .title .text .biaoti .mc b:first-child{animation:title-mcbf 1s 0s forwards; -webkit-animation:title-mcbf 1s 0s forwards; -moz-animation:title-mcbf 1s 0s forwards; -o-animation:title-mcbf 1s 0s forwards; } #warp .rollin-title .title .text .biaoti .mc b:last-child{animation:title-mcbl 1s 0.6s forwards; -webkit-animation:title-mcbl 1s 0.6s forwards; -moz-animation:title-mcbl 1s 0.6s forwards; -o-animation:title-mcbl 1s 0.6s forwards; } #warp .rollin-title .title .text .en{animation:title-en 1s 1s forwards; -webkit-animation:title-en 1s 1s forwards; -moz-animation:title-en 1s 1s forwards; -o-animation:title-en 1s 1s forwards;} #warp .rollin-title .title .text p{animation:title-p 1s 1.3s forwards; -webkit-animation:title-p 1s 1.3s forwards; -moz-animation:title-p 1s 1.3s forwards; -o-animation:title-p 1s 1.3s forwards;} #warp .right{ width: 67%; } #warp .more{ width: 55px; filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity: 0.5; opacity: 0.5;transition:all 0.5s;} #warp .more:hover{filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity: 1; opacity: 1;} #warp .more a{ display: block; color: #fff; line-height: 40px; border-bottom: solid 1px #fff;} #warp .copyright{ position: absolute; left: 0; bottom: 30px; z-index: 1; width: 100%; } #warp .copyright .container-fluid{ max-width: 1630px !important; } #warp .copyright .box{ font-size: 0; overflow: hidden; } #warp .copyright .box p{ position: relative; display: inline;vertical-align: top; font-size: 14px;color: #fff; line-height: 24px; } #warp .copyright .box p:before,#warp .copyright .box p:after{ content: ""; position: absolute; top: 50%; z-index: 1; width: 2000px; height: 1px; background: #fff;filter:alpha(opacity=9);-moz-opacity:0.09;-khtml-opacity: 0.09; opacity: 0.09; } #warp .copyright .box p:before{ left: -2010px; } #warp .copyright .box p:after{ right: -2010px; } #warp .copyright .box p span{filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity: 0.5; opacity: 0.5;} #pages{ position:fixed; right:5%; top: 50%; z-index:2147483647; margin-top: -164px; } #pages #menu{ margin:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;} #pages #menu li{ position: relative; padding:7px 0; width: 98px;} #pages #menu li a{position: relative; display: block; height: 33px; font-size:0;} #pages #menu li a:before,#pages #menu li a:after{ position: absolute; width: 98px; height: 33px; font-size: 14px;color: #fff; line-height: 33px; transition:all 0.3s;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-ms-transition:all 0.3s;-o-transition:all 0.3s;} #pages #menu li a:before{ content:""; left: 0; top: 0; background: url(../images/icon/menu_li.png) no-repeat; } #pages #menu li a:after{ content:attr(data-tip); left: 30px; top: 10px; padding-left: 23px; background: url(../images/icon/menu_li_active.png) no-repeat;filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0;} #pages #menu li:hover a:before{ left: 40px; top: 10px;filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0; } #pages #menu li:hover a:after{ left: 0; top: 0;filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity: 1; opacity: 1; } #pages #menu li.active a:before{ left: 40px; top: 10px;filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0; } #pages #menu li.active a:after{ left: 0; top: 0;filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity: 1; opacity: 1; } .md-content{ padding: 15px; background: #000; border:solid 1px #333; border-radius: 10px; box-shadow: 0 20px 30px rgba(0,0,0,0.2); } .md-content h3{ padding:10px 15px; color: #fff; line-height: 30px; background:none;} .md-content .box{ padding:15px 0 0; border-top: solid 1px #181818; } /*.md-content .box .videos{ height:320px; }*/ .md-content .md-close{ position:absolute; right:5px; top:5px; padding: 0; width: 20px; height: 20px; font-family: arial; font-size: 16px; color: #fff; line-height:18px; text-align: center; background: #000; border:solid 1px #333; border-radius: 50%; } .md-content .md-close:active{ background: #333; } .tanc { display: none; position:fixed;left:50%;top:50%;z-index:9999999999999999999999999999999999; margin-left:-275px; width:550px;padding:15px;background:#000;border:solid 1px #333;border-radius:10px;box-shadow:0 20px 30px rgba(0,0,0,0.2);} .tanc h3{ margin:0;padding:10px 15px; color: #fff; line-height: 30px; background:none;} .tanc .box{ padding:15px 0 0; border-top: solid 1px #181818; } .tanc .box .videos{ height:320px; } .tanc button{ position:absolute; right:5px; top:5px; padding: 0; width: 20px; height: 20px; font-family: arial; font-size: 16px; color: #fff; line-height:18px; text-align: center; background: #000; border:solid 1px #333; border-radius: 50%; } .tanc button:active{ background: #333; } .tanc-overlay { display:none; position:fixed;left:0%;top:0%;z-index:99999999;width:100%;height:100%; background:rgba(0,0,0,0.6);} .fixed_xian{ position: fixed; top: 0; z-index:2147483647; width: 1px; height: 100%; background:rgba(255,255,255,0.2);} .fixed_xian#xian_0{ left: -405px; } .fixed_xian#xian_1{ left: -205px; } .fixed_xian#xian_2{ left: -5px; } .fixed_xian#xian_6,.fixed_xian#xian_7,.fixed_xian#xian_8,.fixed_xian#xian_9 { top: 0; height: 1px;transform-origin:0 0;-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-o-transform-origin:0 0;transform:rotate(150deg);-webkit-transform:rotate(150deg);-moz-transform:rotate(150deg);-o-transform:rotate(150deg);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0;} .fixed_xian#xian_6{ left: 27.5%; } .fixed_xian#xian_7{ left: 67.5%; } .fixed_xian#xian_8{ left: 107.5%; } .fixed_xian#xian_9{ left: 147.5%; } .fixed_xian#xian_10,.fixed_xian#xian_11,.fixed_xian#xian_12{left: -100%; width: 100%; height: 1px; } .fixed_xian#xian_10{ top: 25%; } .fixed_xian#xian_11{ top: 50%; } .fixed_xian#xian_12{ top: 75%; } .fixed_xian#xian_13,.fixed_xian#xian_14,.fixed_xian#xian_15,.fixed_xian#xian_16{ left: 25%; } .fixed_xian#xian_17,.fixed_xian#xian_18,.fixed_xian#xian_19,.fixed_xian#xian_20{ left: 75%; } .fixed_xian#xian_13,.fixed_xian#xian_14,.fixed_xian#xian_15,.fixed_xian#xian_16, .fixed_xian#xian_17,.fixed_xian#xian_18,.fixed_xian#xian_19,.fixed_xian#xian_20 { transform-origin:0 0; -webkit-transform-origin:0 0; -moz-transform-origin:0 0; -o-transform-origin:0 0;height: 1px; width: 0;filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0;} .fixed_xian#xian_13,.fixed_xian#xian_17{ transform:rotate(135deg); -webkit-transform:rotate(135deg); -moz-transform:rotate(135deg); -o-transform:rotate(135deg); } .fixed_xian#xian_14,.fixed_xian#xian_18{ transform:rotate(-135deg); -webkit-transform:rotate(-135deg); -moz-transform:rotate(-135deg); -o-transform:rotate(-135deg);} .fixed_xian#xian_15,.fixed_xian#xian_19{ transform:rotate(45deg); -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -o-transform:rotate(45deg);} .fixed_xian#xian_16,.fixed_xian#xian_20{ transform:rotate(-45deg); -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -o-transform:rotate(-45deg);} .footer{ position: relative; padding-top: 2px; background: #060606; } .footer:before{ content: ""; position:absolute; left: 0; top: 0; z-index: 1; width: 100%; height: 2px; background:-moz-linear-gradient(left,rgba(117,120,127,0) 0%,rgba(117,120,127,1) 50%,rgba(117,120,127,0) 100%);background:-webkit-linear-gradient(left,rgba(117,120,127,0) 0%,rgba(117,120,127,1) 50%,rgba(117,120,127,0) 100%);background:linear-gradient(to right,rgba(117,120,127,0) 0%,rgba(117,120,127,1) 50%,rgba(117,120,127,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#0075787f',endColorstr='#0075787f',GradientType=1 ); } .footer p{ padding:30px 0; color: #c8c8c8; line-height: 24px; } @keyframes arrows{ from{transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0; } to{transform: rotate(360deg); -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity: 1; opacity: 1; } } @-webkit-keyframes arrows{ from{transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0; } to{transform: rotate(360deg); -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity: 1; opacity: 1; } } @-moz-keyframes arrows{ from{transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0; } to{transform: rotate(360deg); -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity: 1; opacity: 1; } } @-o-keyframes arrows{ from{transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0; } to{transform: rotate(360deg); -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity: 1; opacity: 1; } } @keyframes banners{ form{width:50%;} to{width:0;} } @-webkit-keyframes banners{ form{width:50%;} to{width:0;} } @-moz-keyframes banners{ form{width:50%;} to{width:0;} } @-o-keyframes banners{ form{width:50%;} to{width:0;} } @keyframes section5-item{ from{top:50px; filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0; } to{ top: 0;filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity: 1; opacity: 1; } } @-webkit-keyframes section5-item{ from{top:50px; filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0; } to{ top: 0;filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity: 1; opacity: 1; } } @-moz-keyframes section5-item{ from{top:50px; filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0; } to{ top: 0;filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity: 1; opacity: 1; } } @-o-keyframes section5-item{ from{top:50px; filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0; } to{ top: 0;filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity: 1; opacity: 1; } } @keyframes section6-text{ from{ top: 0 } to{ top: 20px; } } @-webkit-keyframes section6-text{ from{ top: 0 } to{ top: 20px; } } @-moz-keyframes section6-text{ from{ top: 0 } to{ top: 20px; } } @-o-keyframes section6-text{ from{ top: 0 } to{ top: 20px; } } @keyframes fadeIns{ from{filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0; } to{ filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity: 1; opacity: 1; } } @-webkit-keyframes fadeIns{ from{filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0; } to{ filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity: 1; opacity: 1; } } @-moz-keyframes fadeIns{ from{filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0; } to{ filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity: 1; opacity: 1; } } @-o-keyframes fadeIns{ from{filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0; } to{ filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity: 1; opacity: 1; } } @keyframes fadeIns2{ from{filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0; } to{ filter:alpha(opacity=70);-moz-opacity:0.7;-khtml-opacity: 0.7; opacity: 0.7; } } @-webkit-keyframes fadeIns2{ from{filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0; } to{ filter:alpha(opacity=70);-moz-opacity:0.7;-khtml-opacity: 0.7; opacity: 0.7; } } @-moz-keyframes fadeIns2{ from{filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0; } to{ filter:alpha(opacity=70);-moz-opacity:0.7;-khtml-opacity: 0.7; opacity: 0.7; } } @-o-keyframes fadeIns2{ from{filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0; } to{ filter:alpha(opacity=70);-moz-opacity:0.7;-khtml-opacity: 0.7; opacity: 0.7; } } @keyframes fadeInTops{ from{ top: 10px; filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0; } to{ top: 0; filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity: 1; opacity: 1; } } @-webkit-keyframes fadeInTops{ from{ top: 10px; filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0; } to{ top: 0; filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity: 1; opacity: 1; } } @-moz-keyframes fadeInTops{ from{ top: 10px; filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0; } to{ top: 0; filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity: 1; opacity: 1; } } @-o-keyframes fadeInTops{ from{ top: 10px; filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0; } to{ top: 0; filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity: 1; opacity: 1; } } @keyframes fadeInLefts{ from{ left: -304px;filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0; } to{ left:-214px;filter:alpha(opacity=58);-moz-opacity:0.58;-khtml-opacity: 0.58; opacity: 0.58; } } @-webkit-keyframes fadeInLefts{ from{ left: -304px;filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0; } to{ left:-214px;filter:alpha(opacity=58);-moz-opacity:0.58;-khtml-opacity: 0.58; opacity: 0.58; } } @-moz-keyframes fadeInLefts{ from{ left: -304px;filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0; } to{ left:-214px;filter:alpha(opacity=58);-moz-opacity:0.58;-khtml-opacity: 0.58; opacity: 0.58; } } @-o-keyframes fadeInLefts{ from{ left: -304px;filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0; } to{ left:-214px;filter:alpha(opacity=58);-moz-opacity:0.58;-khtml-opacity: 0.58; opacity: 0.58; } } @keyframes fadeInLefts2{ from{ left: 90px;filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0; } to{ left:0px;filter:alpha(opacity=58);-moz-opacity:0.58;-khtml-opacity: 0.58; opacity: 0.58; } } @-webkit-keyframes fadeInLefts2{ from{ left: 90px;filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0; } to{ left:0px;filter:alpha(opacity=58);-moz-opacity:0.58;-khtml-opacity: 0.58; opacity: 0.58; } } @-moz-keyframes fadeInLefts2{ from{ left: 90px;filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0; } to{ left:0px;filter:alpha(opacity=58);-moz-opacity:0.58;-khtml-opacity: 0.58; opacity: 0.58; } } @-o-keyframes fadeInLefts2{ from{ left: 90px;filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0; } to{ left:0px;filter:alpha(opacity=58);-moz-opacity:0.58;-khtml-opacity: 0.58; opacity: 0.58; } } @keyframes fadeInRights{ from{ right: -124px;filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0; } to{ right:-214px;filter:alpha(opacity=58);-moz-opacity:0.58;-khtml-opacity: 0.58; opacity: 0.58; } } @-webkit-keyframes fadeInRights{ from{ right: -124px;filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0; } to{ right:-214px;filter:alpha(opacity=58);-moz-opacity:0.58;-khtml-opacity: 0.58; opacity: 0.58; } } @-moz-keyframes fadeInRights{ from{ right: -124px;filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0; } to{ right:-214px;filter:alpha(opacity=58);-moz-opacity:0.58;-khtml-opacity: 0.58; opacity: 0.58; } } @-o-keyframes fadeInRights{ from{ right: -124px;filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0; } to{ right:-214px;filter:alpha(opacity=58);-moz-opacity:0.58;-khtml-opacity: 0.58; opacity: 0.58; } } @keyframes section7-biaoti-xian{ from{ width: 0 } to{ width: 126px; } } @-webkit-keyframes section7-biaoti-xian{ from{ width: 0 } to{ width: 126px; } } @-moz-keyframes section7-biaoti-xian{ from{ width: 0 } to{ width: 126px; } } @-o-keyframes section7-biaoti-xian{ from{ width: 0 } to{ width: 126px; } } @keyframes section7-biaoti-xian2{ from{ width: 0 } to{ width: 250px; } } @-webkit-keyframes section7-biaoti-xian2{ from{ width: 0 } to{ width: 250px; } } @-moz-keyframes section7-biaoti-xian2{ from{ width: 0 } to{ width: 250px; } } @-o-keyframes section7-biaoti-xian2{ from{ width: 0 } to{ width: 250px; } } @keyframes section7-logo-xian{ from{ width: 0 } to{ width: 197px; } } @-webkit-keyframes section7-logo-xian{ from{ width: 0 } to{ width: 197px; } } @-moz-keyframes section7-logo-xian{ from{ width: 0 } to{ width: 197px; } } @-o-keyframes section7-logo-xian{ from{ width: 0 } to{ width: 197px; } } @keyframes title-xian{ from{ width: 0 } to{ width: 263px; } } @-webkit-keyframes title-xian{ from{ width: 0 } to{ width: 263px; } } @-moz-keyframes title-xian{ from{ width: 0 } to{ width: 263px; } } @-o-keyframes title-xian{ from{ width: 0 } to{ width: 263px; } } @keyframes title-mcbf{ from{top: 30px;filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0; } to{ top: 0;filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity: 1; opacity: 1; } } @-webkit-keyframes title-mcbf{ from{top: 30px;filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0; } to{ top: 0;filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity: 1; opacity: 1; } } @-moz-keyframes title-mcbf{ from{top: 30px;filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0; } to{ top: 0;filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity: 1; opacity: 1; } } @-o-keyframes title-mcbf{ from{top: 30px;filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0; } to{ top: 0;filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity: 1; opacity: 1; } } @keyframes title-mcspan{ from{top: 50px; filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0; } to{ top: 0;filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity: 1; opacity: 1; } } @-webkit-keyframes title-mcspan{ from{top: 50px; filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0; } to{ top: 0;filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity: 1; opacity: 1; } } @-moz-keyframes title-mcspan{ from{top: 50px; filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0; } to{ top: 0;filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity: 1; opacity: 1; } } @-o-keyframes title-mcspan{ from{top: 50px; filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0; } to{ top: 0;filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity: 1; opacity: 1; } } @keyframes title-mcbl{ from{bottom: -30px;filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0; } to{ bottom: 0;filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity: 1; opacity: 1; } } @-webkit-keyframes title-mcbl{ from{bottom: -30px;filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0; } to{ bottom: 0;filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity: 1; opacity: 1; } } @-moz-keyframes title-mcbl{ from{bottom: -30px;filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0; } to{ bottom: 0;filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity: 1; opacity: 1; } } @-o-keyframes title-mcbl{ from{bottom: -30px;filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0; } to{ bottom: 0;filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity: 1; opacity: 1; } } @keyframes title-en{ from{top:30px;filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0; } to{ top: 0;filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity: 1; opacity: 1; } } @-webkit-keyframes title-en{ from{top:30px;filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0; } to{ top: 0;filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity: 1; opacity: 1; } } @-moz-keyframes title-en{ from{top:30px;filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0; } to{ top: 0;filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity: 1; opacity: 1; } } @-o-keyframes title-en{ from{top:30px;filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0; } to{ top: 0;filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity: 1; opacity: 1; } } @keyframes title-p{ from{top:50px;filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0; } to{ top: 0;filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity: 1; opacity: 1; } } @-webkit-keyframes title-p{ from{top:50px;filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0; } to{ top: 0;filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity: 1; opacity: 1; } } @-moz-keyframes title-p{ from{top:50px;filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0; } to{ top: 0;filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity: 1; opacity: 1; } } @-o-keyframes title-p{ from{top:50px;filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0; } to{ top: 0;filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity: 1; opacity: 1; } } @keyframes title-xianbefore{ from{ width: 0; } to{ width: 245px; } } @-webkit-keyframes title-xianbefore{ from{ width: 0; } to{ width: 245px; } } @-moz-keyframes title-xianbefore{ from{ width: 0; } to{ width: 245px; } } @-o-keyframes title-xianbefore{ from{ width: 0; } to{ width: 245px; } } @keyframes next{ from{margin-bottom:40px;} to{margin-bottom:50px;} } @-webkit-keyframes next{ from{margin-bottom:40px;} to{margin-bottom:50px;} } @-moz-keyframes next{from{ margin-bottom:40px;} to{margin-bottom:50px;} } @-o-keyframes next{ from{margin-bottom:40px;} to{margin-bottom:50px;} } @keyframes bx{ from{width:0px;} to{width:235px;} } @-webkit-keyframes bx{ from{width:0px;} to{width:235px;} } @-moz-keyframes bx{ from{width:0px;} to{width:235px;} } @-o-keyframes bx{ from{width:0px;} to{width:235px;} } @keyframes xz{ from{transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg);} to{transform: rotate(360deg); -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg);} } @-webkit-keyframes xz{ from{transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg);} to{transform: rotate(360deg); -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg);} } @-moz-keyframes xz{ from{transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg);} to{transform: rotate(360deg); -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg);} } @-o-keyframes xz{ from{transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg);} to{transform: rotate(360deg); -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg);} } @keyframes danx0{ from{left: 402px; top: 219px;} to{left: 0; top: 0;} } @-webkit-keyframes danx0{ from{left: 402px; top: 219px;} to{left: 0; top: 0;} } @-moz-keyframes danx0{ from{left: 402px; top: 219px;} to{left: 0; top: 0;} } @-o-keyframes danx0{ from{left: 402px; top: 219px;} to{left: 0; top: 0;} } @keyframes danx1{ from{left: 542px; top: 219px;} to{left: 140px; top: 0;} } @-webkit-keyframes danx1{ from{left: 542px; top: 219px;} to{left: 140px; top: 0;} } @-moz-keyframes danx1{ from{left: 542px; top: 219px;} to{left: 140px; top: 0;} } @-o-keyframes danx1{ from{left: 542px; top: 219px;} to{left: 140px; top: 0;} } @keyframes danx2{ from{left: 280px; top: 0;} to{ left: 122px; top: 219px;} } @-webkit-keyframes danx2{ from{left: 280px; top: 0;} to{ left: 122px; top: 219px;} } @-moz-keyframes danx2{ from{left: 280px; top: 0;} to{ left: 122px; top: 219px;} } @-o-keyframes danx2{ from{left: 280px; top: 0;} to{ left: 122px; top: 219px;} } @keyframes danx3{ from{left: 262px; top: 219px;} to{left: 420px; top: 0;} } @-webkit-keyframes danx3{ from{left: 262px; top: 219px;} to{left: 420px; top: 0;} } @-moz-keyframes danx3{ from{left: 262px; top: 219px;} to{left: 420px; top: 0;} } @-o-keyframes danx3{ from{left: 262px; top: 219px;} to{left: 420px; top: 0;} } @keyframes danx4{ from{left: 122px; top: 219px;} to{left: 280px; top: 0;} } @-webkit-keyframes danx4{ from{left: 122px; top: 219px;} to{left: 280px; top: 0;} } @-moz-keyframes danx4{ from{left: 122px; top: 219px;} to{left: 280px; top: 0;} } @-o-keyframes danx4{ from{left: 122px; top: 219px;} to{left: 280px; top: 0;} } @keyframes danx5{ from{left: 420px; top: 0;} to{left: 262px; top: 219px;} } @-webkit-keyframes danx5{ from{left: 420px; top: 0;} to{left: 262px; top: 219px;} } @-moz-keyframes danx5{ from{left: 420px; top: 0;} to{left: 262px; top: 219px;} } @-o-keyframes danx5{ from{left: 420px; top: 0;} to{left: 262px; top: 219px;} } @keyframes danx6{ from{left: 0; top: 0;} to{left: 402px; top: 219px;} } @-webkit-keyframes danx6{ from{left: 0; top: 0;} to{left: 402px; top: 219px;} } @-moz-keyframes danx6{ from{left: 0; top: 0;} to{left: 402px; top: 219px;} } @-o-keyframes danx6{ from{left: 0; top: 0;} to{left: 402px; top: 219px;} } @keyframes danx7{ from{left: 140px; top: 0;} to{left: 542px; top: 219px;} } @-webkit-keyframes danx7{ from{left: 140px; top: 0;} to{left: 542px; top: 219px;} } @-moz-keyframes danx7{ from{left: 140px; top: 0;} to{left: 542px; top: 219px;} } @-o-keyframes danx7{ from{left: 140px; top: 0;} to{left: 542px; top: 219px;} } @keyframes btext{ from{filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0;} to{filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity: 1; opacity: 1;} } @-webkit-keyframes btext{ from{filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0;} to{filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity: 1; opacity: 1;} } @-moz-keyframes btext{ from{filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0;} to{filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity: 1; opacity: 1;} } @-o-keyframes btext{ from{filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0; opacity: 0;} to{filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity: 1; opacity: 1;} } @keyframes work-btn{ 0%{-webkit-transform:scale(1.2,.8); t-transform:scale(1.2,.8); -o-transform:scale(1.2,.8); -moz-transform:scale(1.2,.8);} 1%{-webkit-transform:scale(1.18,.82); transform:scale(1.18,.82); -o-transform:scale(1.18,.82); -moz-transform:scale(1.18,.82);} 2%{-webkit-transform:scale(1.16,.84); transform:scale(1.16,.84); -o-transform:scale(1.16,.84); -moz-transform:scale(1.16,.84);} 3%{-webkit-transform:scale(1.13,.87); transform:scale(1.13,.87); -o-transform:scale(1.13,.87); -moz-transform:scale(1.13,.87);} 4%{-webkit-transform:scale(1.1,.9); t-transform:scale(1.1,.9); -o-transform:scale(1.1,.9); -moz-transform:scale(1.1,.9);} 5%{-webkit-transform:scale(1.07,.93); transform:scale(1.07,.93); -o-transform:scale(1.07,.93); -moz-transform:scale(1.07,.93);} 6%{-webkit-transform:scale(1.04,.96); transform:scale(1.04,.96); -o-transform:scale(1.04,.96); -moz-transform:scale(1.04,.96);} 7%{-webkit-transform:scale(1.01,.99); transform:scale(1.01,.99); -o-transform:scale(1.01,.99); -moz-transform:scale(1.01,.99);} 8%{-webkit-transform:scale(.99,1.01); transform:scale(.99,1.01); -o-transform:scale(.99,1.01); -moz-transform:scale(.99,1.01);} 9%{-webkit-transform:scale(.97,1.03); transform:scale(.97,1.03); -o-transform:scale(.97,1.03); -moz-transform:scale(.97,1.03);} 10%{-webkit-transform:scale(.95,1.05); transform:scale(.95,1.05); -o-transform:scale(.95,1.05); -moz-transform:scale(.95,1.05);} 11%{-webkit-transform:scale(.94,1.06); transform:scale(.94,1.06); -o-transform:scale(.94,1.06); -moz-transform:scale(.94,1.06);} 12%{-webkit-transform:scale(.93,1.07); transform:scale(.93,1.07); -o-transform:scale(.93,1.07); -moz-transform:scale(.93,1.07);} 13%{-webkit-transform:scale(.93,1.07); transform:scale(.93,1.07); -o-transform:scale(.93,1.07); -moz-transform:scale(.93,1.07);} 14%{-webkit-transform:scale(.93,1.07); transform:scale(.93,1.07); -o-transform:scale(.93,1.07); -moz-transform:scale(.93,1.07);} 15%{-webkit-transform:scale(.93,1.07); transform:scale(.93,1.07); -o-transform:scale(.93,1.07); -moz-transform:scale(.93,1.07);} 16%{-webkit-transform:scale(.94,1.06); transform:scale(.94,1.06); -o-transform:scale(.94,1.06); -moz-transform:scale(.94,1.06);} 17%{-webkit-transform:scale(.94,1.06); transform:scale(.94,1.06); -o-transform:scale(.94,1.06); -moz-transform:scale(.94,1.06);} 18%{-webkit-transform:scale(.95,1.05); transform:scale(.95,1.05); -o-transform:scale(.95,1.05); -moz-transform:scale(.95,1.05);} 19%{-webkit-transform:scale(.96,1.04); transform:scale(.96,1.04); -o-transform:scale(.96,1.04); -moz-transform:scale(.96,1.04);} 20%{-webkit-transform:scale(.98,1.02); transform:scale(.98,1.02); -o-transform:scale(.98,1.02); -moz-transform:scale(.98,1.02);} 21%{-webkit-transform:scale(.99,1.01); transform:scale(.99,1.01); -o-transform:scale(.99,1.01); -moz-transform:scale(.99,1.01);} 22%{-webkit-transform:scale(1,1); transform:scale(1,1); -o-transform:scale(1,1); -moz-transform:scale(1,1);} 23%{-webkit-transform:scale(1,1); transform:scale(1,1); -o-transform:scale(1,1); -moz-transform:scale(1,1);} 24%{-webkit-transform:scale(1.01,.99); transform:scale(1.01,.99); -o-transform:scale(1.01,.99); -moz-transform:scale(1.01,.99);} 25%{-webkit-transform:scale(1.02,.98); transform:scale(1.02,.98); -o-transform:scale(1.02,.98); -moz-transform:scale(1.02,.98);} 26%{-webkit-transform:scale(1.02,.98); transform:scale(1.02,.98); -o-transform:scale(1.02,.98); -moz-transform:scale(1.02,.98);} 27%{-webkit-transform:scale(1.02,.98); transform:scale(1.02,.98); -o-transform:scale(1.02,.98); -moz-transform:scale(1.02,.98);} 28%{-webkit-transform:scale(1.03,.97); transform:scale(1.03,.97); -o-transform:scale(1.03,.97); -moz-transform:scale(1.03,.97);} 29%{-webkit-transform:scale(1.03,.97); transform:scale(1.03,.97); -o-transform:scale(1.03,.97); -moz-transform:scale(1.03,.97);} 30%{-webkit-transform:scale(1.02,.98); transform:scale(1.02,.98); -o-transform:scale(1.02,.98); -moz-transform:scale(1.02,.98);} 31%{-webkit-transform:scale(1.02,.98); transform:scale(1.02,.98); -o-transform:scale(1.02,.98); -moz-transform:scale(1.02,.98);} 32%{-webkit-transform:scale(1.02,.98); transform:scale(1.02,.98); -o-transform:scale(1.02,.98); -moz-transform:scale(1.02,.98);} 33%{-webkit-transform:scale(1.02,.98); transform:scale(1.02,.98); -o-transform:scale(1.02,.98); -moz-transform:scale(1.02,.98);} 34%{-webkit-transform:scale(1.01,.99); transform:scale(1.01,.99); -o-transform:scale(1.01,.99); -moz-transform:scale(1.01,.99);} 35%{-webkit-transform:scale(1.01,.99); transform:scale(1.01,.99); -o-transform:scale(1.01,.99); -moz-transform:scale(1.01,.99);} 36%{-webkit-transform:scale(1.01,.99); transform:scale(1.01,.99); -o-transform:scale(1.01,.99); -moz-transform:scale(1.01,.99);} 37%{-webkit-transform:scale(1,1); transform:scale(1,1); -o-transform:scale(1,1); -moz-transform:scale(1,1);} 38%{-webkit-transform:scale(1,1); transform:scale(1,1); -o-transform:scale(1,1); -moz-transform:scale(1,1);} 39%{-webkit-transform:scale(1,1); transform:scale(1,1); -o-transform:scale(1,1); -moz-transform:scale(1,1);} 40%{-webkit-transform:scale(.99,1.01); transform:scale(.99,1.01); -o-transform:scale(.99,1.01); -moz-transform:scale(.99,1.01);} 41%{-webkit-transform:scale(.99,1.01); transform:scale(.99,1.01); -o-transform:scale(.99,1.01); -moz-transform:scale(.99,1.01);} 42%{-webkit-transform:scale(.99,1.01); transform:scale(.99,1.01); -o-transform:scale(.99,1.01); -moz-transform:scale(.99,1.01);} 43%{-webkit-transform:scale(.99,1.01); transform:scale(.99,1.01); -o-transform:scale(.99,1.01); -moz-transform:scale(.99,1.01);} 44%{-webkit-transform:scale(.99,1.01); transform:scale(.99,1.01); -o-transform:scale(.99,1.01); -moz-transform:scale(.99,1.01);} 45%{-webkit-transform:scale(.99,1.01); transform:scale(.99,1.01); -o-transform:scale(.99,1.01); -moz-transform:scale(.99,1.01);} 46%{-webkit-transform:scale(.99,1.01); transform:scale(.99,1.01); -o-transform:scale(.99,1.01); -moz-transform:scale(.99,1.01);} 47%{-webkit-transform:scale(.99,1.01); transform:scale(.99,1.01); -o-transform:scale(.99,1.01); -moz-transform:scale(.99,1.01);} 48%{-webkit-transform:scale(.99,1.01); transform:scale(.99,1.01); -o-transform:scale(.99,1.01); -moz-transform:scale(.99,1.01);} 49%{-webkit-transform:scale(1,1); transform:scale(1,1); -o-transform:scale(1,1); -moz-transform:scale(1,1);} } @-webkit-keyframes work-btn{ 0%{-webkit-transform:scale(1.2,.8); t-transform:scale(1.2,.8); -o-transform:scale(1.2,.8); -moz-transform:scale(1.2,.8);} 1%{-webkit-transform:scale(1.18,.82); transform:scale(1.18,.82); -o-transform:scale(1.18,.82); -moz-transform:scale(1.18,.82);} 2%{-webkit-transform:scale(1.16,.84); transform:scale(1.16,.84); -o-transform:scale(1.16,.84); -moz-transform:scale(1.16,.84);} 3%{-webkit-transform:scale(1.13,.87); transform:scale(1.13,.87); -o-transform:scale(1.13,.87); -moz-transform:scale(1.13,.87);} 4%{-webkit-transform:scale(1.1,.9); t-transform:scale(1.1,.9); -o-transform:scale(1.1,.9); -moz-transform:scale(1.1,.9);} 5%{-webkit-transform:scale(1.07,.93); transform:scale(1.07,.93); -o-transform:scale(1.07,.93); -moz-transform:scale(1.07,.93);} 6%{-webkit-transform:scale(1.04,.96); transform:scale(1.04,.96); -o-transform:scale(1.04,.96); -moz-transform:scale(1.04,.96);} 7%{-webkit-transform:scale(1.01,.99); transform:scale(1.01,.99); -o-transform:scale(1.01,.99); -moz-transform:scale(1.01,.99);} 8%{-webkit-transform:scale(.99,1.01); transform:scale(.99,1.01); -o-transform:scale(.99,1.01); -moz-transform:scale(.99,1.01);} 9%{-webkit-transform:scale(.97,1.03); transform:scale(.97,1.03); -o-transform:scale(.97,1.03); -moz-transform:scale(.97,1.03);} 10%{-webkit-transform:scale(.95,1.05); transform:scale(.95,1.05); -o-transform:scale(.95,1.05); -moz-transform:scale(.95,1.05);} 11%{-webkit-transform:scale(.94,1.06); transform:scale(.94,1.06); -o-transform:scale(.94,1.06); -moz-transform:scale(.94,1.06);} 12%{-webkit-transform:scale(.93,1.07); transform:scale(.93,1.07); -o-transform:scale(.93,1.07); -moz-transform:scale(.93,1.07);} 13%{-webkit-transform:scale(.93,1.07); transform:scale(.93,1.07); -o-transform:scale(.93,1.07); -moz-transform:scale(.93,1.07);} 14%{-webkit-transform:scale(.93,1.07); transform:scale(.93,1.07); -o-transform:scale(.93,1.07); -moz-transform:scale(.93,1.07);} 15%{-webkit-transform:scale(.93,1.07); transform:scale(.93,1.07); -o-transform:scale(.93,1.07); -moz-transform:scale(.93,1.07);} 16%{-webkit-transform:scale(.94,1.06); transform:scale(.94,1.06); -o-transform:scale(.94,1.06); -moz-transform:scale(.94,1.06);} 17%{-webkit-transform:scale(.94,1.06); transform:scale(.94,1.06); -o-transform:scale(.94,1.06); -moz-transform:scale(.94,1.06);} 18%{-webkit-transform:scale(.95,1.05); transform:scale(.95,1.05); -o-transform:scale(.95,1.05); -moz-transform:scale(.95,1.05);} 19%{-webkit-transform:scale(.96,1.04); transform:scale(.96,1.04); -o-transform:scale(.96,1.04); -moz-transform:scale(.96,1.04);} 20%{-webkit-transform:scale(.98,1.02); transform:scale(.98,1.02); -o-transform:scale(.98,1.02); -moz-transform:scale(.98,1.02);} 21%{-webkit-transform:scale(.99,1.01); transform:scale(.99,1.01); -o-transform:scale(.99,1.01); -moz-transform:scale(.99,1.01);} 22%{-webkit-transform:scale(1,1); transform:scale(1,1); -o-transform:scale(1,1); -moz-transform:scale(1,1);} 23%{-webkit-transform:scale(1,1); transform:scale(1,1); -o-transform:scale(1,1); -moz-transform:scale(1,1);} 24%{-webkit-transform:scale(1.01,.99); transform:scale(1.01,.99); -o-transform:scale(1.01,.99); -moz-transform:scale(1.01,.99);} 25%{-webkit-transform:scale(1.02,.98); transform:scale(1.02,.98); -o-transform:scale(1.02,.98); -moz-transform:scale(1.02,.98);} 26%{-webkit-transform:scale(1.02,.98); transform:scale(1.02,.98); -o-transform:scale(1.02,.98); -moz-transform:scale(1.02,.98);} 27%{-webkit-transform:scale(1.02,.98); transform:scale(1.02,.98); -o-transform:scale(1.02,.98); -moz-transform:scale(1.02,.98);} 28%{-webkit-transform:scale(1.03,.97); transform:scale(1.03,.97); -o-transform:scale(1.03,.97); -moz-transform:scale(1.03,.97);} 29%{-webkit-transform:scale(1.03,.97); transform:scale(1.03,.97); -o-transform:scale(1.03,.97); -moz-transform:scale(1.03,.97);} 30%{-webkit-transform:scale(1.02,.98); transform:scale(1.02,.98); -o-transform:scale(1.02,.98); -moz-transform:scale(1.02,.98);} 31%{-webkit-transform:scale(1.02,.98); transform:scale(1.02,.98); -o-transform:scale(1.02,.98); -moz-transform:scale(1.02,.98);} 32%{-webkit-transform:scale(1.02,.98); transform:scale(1.02,.98); -o-transform:scale(1.02,.98); -moz-transform:scale(1.02,.98);} 33%{-webkit-transform:scale(1.02,.98); transform:scale(1.02,.98); -o-transform:scale(1.02,.98); -moz-transform:scale(1.02,.98);} 34%{-webkit-transform:scale(1.01,.99); transform:scale(1.01,.99); -o-transform:scale(1.01,.99); -moz-transform:scale(1.01,.99);} 35%{-webkit-transform:scale(1.01,.99); transform:scale(1.01,.99); -o-transform:scale(1.01,.99); -moz-transform:scale(1.01,.99);} 36%{-webkit-transform:scale(1.01,.99); transform:scale(1.01,.99); -o-transform:scale(1.01,.99); -moz-transform:scale(1.01,.99);} 37%{-webkit-transform:scale(1,1); transform:scale(1,1); -o-transform:scale(1,1); -moz-transform:scale(1,1);} 38%{-webkit-transform:scale(1,1); transform:scale(1,1); -o-transform:scale(1,1); -moz-transform:scale(1,1);} 39%{-webkit-transform:scale(1,1); transform:scale(1,1); -o-transform:scale(1,1); -moz-transform:scale(1,1);} 40%{-webkit-transform:scale(.99,1.01); transform:scale(.99,1.01); -o-transform:scale(.99,1.01); -moz-transform:scale(.99,1.01);} 41%{-webkit-transform:scale(.99,1.01); transform:scale(.99,1.01); -o-transform:scale(.99,1.01); -moz-transform:scale(.99,1.01);} 42%{-webkit-transform:scale(.99,1.01); transform:scale(.99,1.01); -o-transform:scale(.99,1.01); -moz-transform:scale(.99,1.01);} 43%{-webkit-transform:scale(.99,1.01); transform:scale(.99,1.01); -o-transform:scale(.99,1.01); -moz-transform:scale(.99,1.01);} 44%{-webkit-transform:scale(.99,1.01); transform:scale(.99,1.01); -o-transform:scale(.99,1.01); -moz-transform:scale(.99,1.01);} 45%{-webkit-transform:scale(.99,1.01); transform:scale(.99,1.01); -o-transform:scale(.99,1.01); -moz-transform:scale(.99,1.01);} 46%{-webkit-transform:scale(.99,1.01); transform:scale(.99,1.01); -o-transform:scale(.99,1.01); -moz-transform:scale(.99,1.01);} 47%{-webkit-transform:scale(.99,1.01); transform:scale(.99,1.01); -o-transform:scale(.99,1.01); -moz-transform:scale(.99,1.01);} 48%{-webkit-transform:scale(.99,1.01); transform:scale(.99,1.01); -o-transform:scale(.99,1.01); -moz-transform:scale(.99,1.01);} 49%{-webkit-transform:scale(1,1); transform:scale(1,1); -o-transform:scale(1,1); -moz-transform:scale(1,1);} } @-moz-keyframes work-btn{ 0%{-webkit-transform:scale(1.2,.8); t-transform:scale(1.2,.8); -o-transform:scale(1.2,.8); -moz-transform:scale(1.2,.8);} 1%{-webkit-transform:scale(1.18,.82); transform:scale(1.18,.82); -o-transform:scale(1.18,.82); -moz-transform:scale(1.18,.82);} 2%{-webkit-transform:scale(1.16,.84); transform:scale(1.16,.84); -o-transform:scale(1.16,.84); -moz-transform:scale(1.16,.84);} 3%{-webkit-transform:scale(1.13,.87); transform:scale(1.13,.87); -o-transform:scale(1.13,.87); -moz-transform:scale(1.13,.87);} 4%{-webkit-transform:scale(1.1,.9); t-transform:scale(1.1,.9); -o-transform:scale(1.1,.9); -moz-transform:scale(1.1,.9);} 5%{-webkit-transform:scale(1.07,.93); transform:scale(1.07,.93); -o-transform:scale(1.07,.93); -moz-transform:scale(1.07,.93);} 6%{-webkit-transform:scale(1.04,.96); transform:scale(1.04,.96); -o-transform:scale(1.04,.96); -moz-transform:scale(1.04,.96);} 7%{-webkit-transform:scale(1.01,.99); transform:scale(1.01,.99); -o-transform:scale(1.01,.99); -moz-transform:scale(1.01,.99);} 8%{-webkit-transform:scale(.99,1.01); transform:scale(.99,1.01); -o-transform:scale(.99,1.01); -moz-transform:scale(.99,1.01);} 9%{-webkit-transform:scale(.97,1.03); transform:scale(.97,1.03); -o-transform:scale(.97,1.03); -moz-transform:scale(.97,1.03);} 10%{-webkit-transform:scale(.95,1.05); transform:scale(.95,1.05); -o-transform:scale(.95,1.05); -moz-transform:scale(.95,1.05);} 11%{-webkit-transform:scale(.94,1.06); transform:scale(.94,1.06); -o-transform:scale(.94,1.06); -moz-transform:scale(.94,1.06);} 12%{-webkit-transform:scale(.93,1.07); transform:scale(.93,1.07); -o-transform:scale(.93,1.07); -moz-transform:scale(.93,1.07);} 13%{-webkit-transform:scale(.93,1.07); transform:scale(.93,1.07); -o-transform:scale(.93,1.07); -moz-transform:scale(.93,1.07);} 14%{-webkit-transform:scale(.93,1.07); transform:scale(.93,1.07); -o-transform:scale(.93,1.07); -moz-transform:scale(.93,1.07);} 15%{-webkit-transform:scale(.93,1.07); transform:scale(.93,1.07); -o-transform:scale(.93,1.07); -moz-transform:scale(.93,1.07);} 16%{-webkit-transform:scale(.94,1.06); transform:scale(.94,1.06); -o-transform:scale(.94,1.06); -moz-transform:scale(.94,1.06);} 17%{-webkit-transform:scale(.94,1.06); transform:scale(.94,1.06); -o-transform:scale(.94,1.06); -moz-transform:scale(.94,1.06);} 18%{-webkit-transform:scale(.95,1.05); transform:scale(.95,1.05); -o-transform:scale(.95,1.05); -moz-transform:scale(.95,1.05);} 19%{-webkit-transform:scale(.96,1.04); transform:scale(.96,1.04); -o-transform:scale(.96,1.04); -moz-transform:scale(.96,1.04);} 20%{-webkit-transform:scale(.98,1.02); transform:scale(.98,1.02); -o-transform:scale(.98,1.02); -moz-transform:scale(.98,1.02);} 21%{-webkit-transform:scale(.99,1.01); transform:scale(.99,1.01); -o-transform:scale(.99,1.01); -moz-transform:scale(.99,1.01);} 22%{-webkit-transform:scale(1,1); transform:scale(1,1); -o-transform:scale(1,1); -moz-transform:scale(1,1);} 23%{-webkit-transform:scale(1,1); transform:scale(1,1); -o-transform:scale(1,1); -moz-transform:scale(1,1);} 24%{-webkit-transform:scale(1.01,.99); transform:scale(1.01,.99); -o-transform:scale(1.01,.99); -moz-transform:scale(1.01,.99);} 25%{-webkit-transform:scale(1.02,.98); transform:scale(1.02,.98); -o-transform:scale(1.02,.98); -moz-transform:scale(1.02,.98);} 26%{-webkit-transform:scale(1.02,.98); transform:scale(1.02,.98); -o-transform:scale(1.02,.98); -moz-transform:scale(1.02,.98);} 27%{-webkit-transform:scale(1.02,.98); transform:scale(1.02,.98); -o-transform:scale(1.02,.98); -moz-transform:scale(1.02,.98);} 28%{-webkit-transform:scale(1.03,.97); transform:scale(1.03,.97); -o-transform:scale(1.03,.97); -moz-transform:scale(1.03,.97);} 29%{-webkit-transform:scale(1.03,.97); transform:scale(1.03,.97); -o-transform:scale(1.03,.97); -moz-transform:scale(1.03,.97);} 30%{-webkit-transform:scale(1.02,.98); transform:scale(1.02,.98); -o-transform:scale(1.02,.98); -moz-transform:scale(1.02,.98);} 31%{-webkit-transform:scale(1.02,.98); transform:scale(1.02,.98); -o-transform:scale(1.02,.98); -moz-transform:scale(1.02,.98);} 32%{-webkit-transform:scale(1.02,.98); transform:scale(1.02,.98); -o-transform:scale(1.02,.98); -moz-transform:scale(1.02,.98);} 33%{-webkit-transform:scale(1.02,.98); transform:scale(1.02,.98); -o-transform:scale(1.02,.98); -moz-transform:scale(1.02,.98);} 34%{-webkit-transform:scale(1.01,.99); transform:scale(1.01,.99); -o-transform:scale(1.01,.99); -moz-transform:scale(1.01,.99);} 35%{-webkit-transform:scale(1.01,.99); transform:scale(1.01,.99); -o-transform:scale(1.01,.99); -moz-transform:scale(1.01,.99);} 36%{-webkit-transform:scale(1.01,.99); transform:scale(1.01,.99); -o-transform:scale(1.01,.99); -moz-transform:scale(1.01,.99);} 37%{-webkit-transform:scale(1,1); transform:scale(1,1); -o-transform:scale(1,1); -moz-transform:scale(1,1);} 38%{-webkit-transform:scale(1,1); transform:scale(1,1); -o-transform:scale(1,1); -moz-transform:scale(1,1);} 39%{-webkit-transform:scale(1,1); transform:scale(1,1); -o-transform:scale(1,1); -moz-transform:scale(1,1);} 40%{-webkit-transform:scale(.99,1.01); transform:scale(.99,1.01); -o-transform:scale(.99,1.01); -moz-transform:scale(.99,1.01);} 41%{-webkit-transform:scale(.99,1.01); transform:scale(.99,1.01); -o-transform:scale(.99,1.01); -moz-transform:scale(.99,1.01);} 42%{-webkit-transform:scale(.99,1.01); transform:scale(.99,1.01); -o-transform:scale(.99,1.01); -moz-transform:scale(.99,1.01);} 43%{-webkit-transform:scale(.99,1.01); transform:scale(.99,1.01); -o-transform:scale(.99,1.01); -moz-transform:scale(.99,1.01);} 44%{-webkit-transform:scale(.99,1.01); transform:scale(.99,1.01); -o-transform:scale(.99,1.01); -moz-transform:scale(.99,1.01);} 45%{-webkit-transform:scale(.99,1.01); transform:scale(.99,1.01); -o-transform:scale(.99,1.01); -moz-transform:scale(.99,1.01);} 46%{-webkit-transform:scale(.99,1.01); transform:scale(.99,1.01); -o-transform:scale(.99,1.01); -moz-transform:scale(.99,1.01);} 47%{-webkit-transform:scale(.99,1.01); transform:scale(.99,1.01); -o-transform:scale(.99,1.01); -moz-transform:scale(.99,1.01);} 48%{-webkit-transform:scale(.99,1.01); transform:scale(.99,1.01); -o-transform:scale(.99,1.01); -moz-transform:scale(.99,1.01);} 49%{-webkit-transform:scale(1,1); transform:scale(1,1); -o-transform:scale(1,1); -moz-transform:scale(1,1);} } @-o-keyframes work-btn{ 0%{-webkit-transform:scale(1.2,.8); t-transform:scale(1.2,.8); -o-transform:scale(1.2,.8); -moz-transform:scale(1.2,.8);} 1%{-webkit-transform:scale(1.18,.82); transform:scale(1.18,.82); -o-transform:scale(1.18,.82); -moz-transform:scale(1.18,.82);} 2%{-webkit-transform:scale(1.16,.84); transform:scale(1.16,.84); -o-transform:scale(1.16,.84); -moz-transform:scale(1.16,.84);} 3%{-webkit-transform:scale(1.13,.87); transform:scale(1.13,.87); -o-transform:scale(1.13,.87); -moz-transform:scale(1.13,.87);} 4%{-webkit-transform:scale(1.1,.9); t-transform:scale(1.1,.9); -o-transform:scale(1.1,.9); -moz-transform:scale(1.1,.9);} 5%{-webkit-transform:scale(1.07,.93); transform:scale(1.07,.93); -o-transform:scale(1.07,.93); -moz-transform:scale(1.07,.93);} 6%{-webkit-transform:scale(1.04,.96); transform:scale(1.04,.96); -o-transform:scale(1.04,.96); -moz-transform:scale(1.04,.96);} 7%{-webkit-transform:scale(1.01,.99); transform:scale(1.01,.99); -o-transform:scale(1.01,.99); -moz-transform:scale(1.01,.99);} 8%{-webkit-transform:scale(.99,1.01); transform:scale(.99,1.01); -o-transform:scale(.99,1.01); -moz-transform:scale(.99,1.01);} 9%{-webkit-transform:scale(.97,1.03); transform:scale(.97,1.03); -o-transform:scale(.97,1.03); -moz-transform:scale(.97,1.03);} 10%{-webkit-transform:scale(.95,1.05); transform:scale(.95,1.05); -o-transform:scale(.95,1.05); -moz-transform:scale(.95,1.05);} 11%{-webkit-transform:scale(.94,1.06); transform:scale(.94,1.06); -o-transform:scale(.94,1.06); -moz-transform:scale(.94,1.06);} 12%{-webkit-transform:scale(.93,1.07); transform:scale(.93,1.07); -o-transform:scale(.93,1.07); -moz-transform:scale(.93,1.07);} 13%{-webkit-transform:scale(.93,1.07); transform:scale(.93,1.07); -o-transform:scale(.93,1.07); -moz-transform:scale(.93,1.07);} 14%{-webkit-transform:scale(.93,1.07); transform:scale(.93,1.07); -o-transform:scale(.93,1.07); -moz-transform:scale(.93,1.07);} 15%{-webkit-transform:scale(.93,1.07); transform:scale(.93,1.07); -o-transform:scale(.93,1.07); -moz-transform:scale(.93,1.07);} 16%{-webkit-transform:scale(.94,1.06); transform:scale(.94,1.06); -o-transform:scale(.94,1.06); -moz-transform:scale(.94,1.06);} 17%{-webkit-transform:scale(.94,1.06); transform:scale(.94,1.06); -o-transform:scale(.94,1.06); -moz-transform:scale(.94,1.06);} 18%{-webkit-transform:scale(.95,1.05); transform:scale(.95,1.05); -o-transform:scale(.95,1.05); -moz-transform:scale(.95,1.05);} 19%{-webkit-transform:scale(.96,1.04); transform:scale(.96,1.04); -o-transform:scale(.96,1.04); -moz-transform:scale(.96,1.04);} 20%{-webkit-transform:scale(.98,1.02); transform:scale(.98,1.02); -o-transform:scale(.98,1.02); -moz-transform:scale(.98,1.02);} 21%{-webkit-transform:scale(.99,1.01); transform:scale(.99,1.01); -o-transform:scale(.99,1.01); -moz-transform:scale(.99,1.01);} 22%{-webkit-transform:scale(1,1); transform:scale(1,1); -o-transform:scale(1,1); -moz-transform:scale(1,1);} 23%{-webkit-transform:scale(1,1); transform:scale(1,1); -o-transform:scale(1,1); -moz-transform:scale(1,1);} 24%{-webkit-transform:scale(1.01,.99); transform:scale(1.01,.99); -o-transform:scale(1.01,.99); -moz-transform:scale(1.01,.99);} 25%{-webkit-transform:scale(1.02,.98); transform:scale(1.02,.98); -o-transform:scale(1.02,.98); -moz-transform:scale(1.02,.98);} 26%{-webkit-transform:scale(1.02,.98); transform:scale(1.02,.98); -o-transform:scale(1.02,.98); -moz-transform:scale(1.02,.98);} 27%{-webkit-transform:scale(1.02,.98); transform:scale(1.02,.98); -o-transform:scale(1.02,.98); -moz-transform:scale(1.02,.98);} 28%{-webkit-transform:scale(1.03,.97); transform:scale(1.03,.97); -o-transform:scale(1.03,.97); -moz-transform:scale(1.03,.97);} 29%{-webkit-transform:scale(1.03,.97); transform:scale(1.03,.97); -o-transform:scale(1.03,.97); -moz-transform:scale(1.03,.97);} 30%{-webkit-transform:scale(1.02,.98); transform:scale(1.02,.98); -o-transform:scale(1.02,.98); -moz-transform:scale(1.02,.98);} 31%{-webkit-transform:scale(1.02,.98); transform:scale(1.02,.98); -o-transform:scale(1.02,.98); -moz-transform:scale(1.02,.98);} 32%{-webkit-transform:scale(1.02,.98); transform:scale(1.02,.98); -o-transform:scale(1.02,.98); -moz-transform:scale(1.02,.98);} 33%{-webkit-transform:scale(1.02,.98); transform:scale(1.02,.98); -o-transform:scale(1.02,.98); -moz-transform:scale(1.02,.98);} 34%{-webkit-transform:scale(1.01,.99); transform:scale(1.01,.99); -o-transform:scale(1.01,.99); -moz-transform:scale(1.01,.99);} 35%{-webkit-transform:scale(1.01,.99); transform:scale(1.01,.99); -o-transform:scale(1.01,.99); -moz-transform:scale(1.01,.99);} 36%{-webkit-transform:scale(1.01,.99); transform:scale(1.01,.99); -o-transform:scale(1.01,.99); -moz-transform:scale(1.01,.99);} 37%{-webkit-transform:scale(1,1); transform:scale(1,1); -o-transform:scale(1,1); -moz-transform:scale(1,1);} 38%{-webkit-transform:scale(1,1); transform:scale(1,1); -o-transform:scale(1,1); -moz-transform:scale(1,1);} 39%{-webkit-transform:scale(1,1); transform:scale(1,1); -o-transform:scale(1,1); -moz-transform:scale(1,1);} 40%{-webkit-transform:scale(.99,1.01); transform:scale(.99,1.01); -o-transform:scale(.99,1.01); -moz-transform:scale(.99,1.01);} 41%{-webkit-transform:scale(.99,1.01); transform:scale(.99,1.01); -o-transform:scale(.99,1.01); -moz-transform:scale(.99,1.01);} 42%{-webkit-transform:scale(.99,1.01); transform:scale(.99,1.01); -o-transform:scale(.99,1.01); -moz-transform:scale(.99,1.01);} 43%{-webkit-transform:scale(.99,1.01); transform:scale(.99,1.01); -o-transform:scale(.99,1.01); -moz-transform:scale(.99,1.01);} 44%{-webkit-transform:scale(.99,1.01); transform:scale(.99,1.01); -o-transform:scale(.99,1.01); -moz-transform:scale(.99,1.01);} 45%{-webkit-transform:scale(.99,1.01); transform:scale(.99,1.01); -o-transform:scale(.99,1.01); -moz-transform:scale(.99,1.01);} 46%{-webkit-transform:scale(.99,1.01); transform:scale(.99,1.01); -o-transform:scale(.99,1.01); -moz-transform:scale(.99,1.01);} 47%{-webkit-transform:scale(.99,1.01); transform:scale(.99,1.01); -o-transform:scale(.99,1.01); -moz-transform:scale(.99,1.01);} 48%{-webkit-transform:scale(.99,1.01); transform:scale(.99,1.01); -o-transform:scale(.99,1.01); -moz-transform:scale(.99,1.01);} 49%{-webkit-transform:scale(1,1); transform:scale(1,1); -o-transform:scale(1,1); -moz-transform:scale(1,1);} } div.page { margin: 10px 3px; padding: 3px; text-align: center; color: #fff; } div.page a { background-position: 50% bottom; border-color: #dedfde; border-style: solid; border-width: 1px; color:black; margin-right: 3px; padding: 2px 6px; text-decoration: none; color: #fff; } div.page span.disabled { color: #adaaad; margin-right: 3px; padding: 2px 6px; } div.page span.current { color: #eb5914; font-weight: bold; margin-right: 3px; padding: 2px 6px; } /*浮动QQ*/ .dock { position: fixed; right: 0px; width: 50px; -moz-opacity: 0.7; opacity: 0.7; z-index: 200; } .dock.close { z-index: 50; } .dock ul.icons { position: absolute; list-style: none; right: 0px; padding: 0px; width: 50px; border: 1px solid #333; border-right: none; background: #111; -moz-border-radius: 10px 0 0 10px; -webkit-border-radius: 10px 0 0 10px; border-radius: 10px 0 0 10px; -webkit-transition: all .3s ease-in-out 0s; -moz-transition: all .3s ease-in-out 0s; -ms-transition: all .3s ease-in-out 0s; -o-transition: all .3s ease-in-out 0s; transition: all .3s ease-in-out 0s; } .dock.close ul.icons { right: -70px; } .dock ul.icons li i { display: block; position: relative; width: 50px; height: 50px; background: url(../images/icons.png) no-repeat; cursor: pointer; -webkit-transition: all .3s ease-in-out 0s; -moz-transition: all .3s ease-in-out 0s; -ms-transition: all .3s ease-in-out 0s; -o-transition: all .3s ease-in-out 0s; transition: all .3s ease-in-out 0s; z-index: 210; } .dock ul.icons li.active i { -moz-opacity: 0.4; opacity: 0.4; } .dock ul.icons li.up i { background-position: -63px -150px; } .dock ul.icons li.tel i { background-position: -62px -108px; } .dock ul.icons li.im i { background-position: -63px -20px; } .dock ul.icons li.wechat i { background-position: -59px -66px; } .dock ul.icons li.down i { background-position: -63px -190px; } .dock ul.icons li p { display: block; position: absolute; top: 50px; right: -260px; padding: 15px 20px; height: 120px; color: White; line-height: 30px; border: 1px solid #333; border-right: none; background: #111; -moz-border-radius: 10px 0 0 10px; -webkit-border-radius: 10px 0 0 10px; border-radius: 10px 0 0 10px; -moz-opacity: 0; opacity: 0; filter: alpha(opacity=0); -webkit-transition: all .4s ease-in-out .1s; -moz-transition: all .4s ease-in-out .1s; -ms-transition: all .4s ease-in-out .1s; -o-transition: all .4s ease-in-out .1s; transition: all .4s ease-in-out .1s; overflow: hidden; z-index: 201; } .dock ul.icons li.active p { right: 50px; -moz-opacity: 1; opacity: 1; filter: alpha(opacity=100); } .dock ul.icons li.tel p { width: 140px; height:130px; line-height:30px } .dock ul.icons li.im p { width: 140px; height:180px; line-height:18px } .dock ul.icons li.im p a { display: block; margin-top: 12px; width: 100px; height: 35px; line-height: 32px; color: #00dfb9; font-size: 16px; text-align: center; text-decoration: none; border: 1px solid #00dfb9; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -webkit-transition: all .3s ease-in-out 0s; -moz-transition: all .3s ease-in-out 0s; -ms-transition: all .3s ease-in-out 0s; -o-transition: all .3s ease-in-out 0s; transition: all .3s ease-in-out 0s; } .dock ul.icons li.im p a:hover { color: White; background: #0f8773; border: 1px solid #0f8773; } .dock ul.icons li.wechat p { width: 170px; height:160px; line-height:30px } .dock ul.icons li.wechat p img { border: 2px solid #000; } .dock a.switch { position: absolute; display: block; top: 270px; right: 11px; width: 26px; height: 26px; background: url(../images/icons.png) no-repeat 0px -640px; cursor: pointer; -webkit-transition-delay: .15s; -moz-transition-delay: .15s; -ms-transition-delay: .15s; -o-transition-delay: .15s; transition-delay: .15s; } .dock a.switch.off { background-position: -32px -640px; } .sideBar{width: 100%; margin-bottom: 30px;} .sideBar .list{overflow: hidden; list-style: none; padding: 0;} .sideBar .list li{float: left; margin-right: 15px;} .sideBar .list li a{display: block; width: 120px; height: 40px; line-height: 38px; border: 1px solid #fff; font-size: 14px; color: #fff; overflow: hidden; text-align: center;} .video-list{width: calc(100% + 20px)} .video-list li{width: calc(100% / 4 - 20px); float: left; margin: 0 20px 20px 0} .video-list .item{width: 100%;} .video-list .item .img-box{position: relative; overflow: hidden;} .video-list .item .img-box::before{content: ""; display: block; padding-top: 75%;} .video-list .item .img-box .img{position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 100%; height: 100%;} .video-list .item .text{font-size: 14px; color: #fff; text-align: center; margin-top: 5px; display: block;} .video-mask{position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 5; display: none;} .video-mask .wrap{display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background-color: rgba(0,0,0,.6); z-index: 5;} .video-mask .box{width: 66%; background-color: #fff; padding: 10px; position: relative;} .video-mask .mask-close{position: absolute; right: -22px; top: -22px; width: 20px; height: 20px;} .video-mask .mask-close i{font-size: 20px; color: #fff; line-height: 20px; display: inline-block;} .video-mask .video-box{position: relative; overflow: hidden;} .video-mask .video-box::before{content: ""; display: block; padding-top: 50%;} .video-mask .video-box .video{position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 100%; height: 100%;}