﻿/*list-style: none;*/
.index_xy .xy_bg{position: absolute;right: 0;top: 0;z-index: 1}
@-webkit-keyframes anishake1{0%{-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0)}
50%{-webkit-transform: translate3d(20px, 40px, 0);transform: translate3d(20px, 40px, 0)}
100%{-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0)}}
@keyframes anishake1{0%{-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0)}
50%{-webkit-transform: translate3d(20px, 40px, 0);transform: translate3d(20px, 40px, 0)}
100%{-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0)}}
@-webkit-keyframes anishake2{0%{-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0)}
50%{-webkit-transform: translate3d(30px, 60px, 0);transform: translate3d(30px, 60px, 0)}
100%{-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0)}}
@keyframes anishake2{0%{-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0)}
50%{-webkit-transform: translate3d(30px, 60px, 0);transform: translate3d(30px, 60px, 0)}
100%{-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0)}}
@-webkit-keyframes anishake3{0%{-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0)}
50%{-webkit-transform: translate3d(-10px, 40px, 0);transform: translate3d(-10px, 40px, 0)}
100%{-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0)}}
@keyframes anishake3{0%{-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0)}
50%{-webkit-transform: translate3d(-10px, 40px, 0);transform: translate3d(-10px, 40px, 0)}
100%{-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0)}}
.section-demo{height: 100%;min-height: 700px;position: relative;overflow: hidden;}
.section-demo .content-box{background-image: url(/skin/tx/images/filter-demo-1.jpg)}
.section-demo .content-box-2{background-image: url(/skin/tx/images/filter-demo-1.jpg)}
.section-demo .content-box-3{background-image: url(/skin/tx/images/filter-demo-2.jpg)}
.section-demo .content-box-4{background-image: url(/skin/tx/images/filter-demo-3.jpg)}
.section-demo .content-box-5{background-image: url(/skin/tx/images/filter-demo-4.jpg)}
.section-demo .content-box-6{background-image: url(/skin/tx/images/filter-good.jpg)}
.section-demo .ani-box .item-2 span{background-image: url(/skin/tx/images/filter-germ.png)}
.section-demo .ani-box .item-3 span{background-image: url(/skin/tx/images/filter-hair.png)}
.section-demo .ani-box .item-4 span{background-image: url(/skin/tx/images/filter-floc.png)}
.section-demo .content-box{position: absolute;left: 0;top: 0;width: 100%;height: 100%;background-color: #0f3449;background-repeat: no-repeat;background-position: center 0;background-image: url(/skin/tx/images/filter-demo-1.jpg);-webkit-transition: all 1s;transition: all 1s;background-size: cover}
.section-demo .content-box-1 .content-1{top: 50%;margin-top: -31px;visibility: visible;opacity: 1;filter: alpha(opacity=100)\9}
.section-demo .content-box-2 .content-2{visibility: visible;opacity: 1;filter: alpha(opacity=100)\9}
.section-demo .content-box-2 .ani-box .item-1{-webkit-transform: translate3d(0, 200px, 0);transform: translate3d(0, 200px, 0);opacity: 0;filter: alpha(opacity=0)\9}
.section-demo .content-box-3 .content-3{visibility: visible;opacity: 1;filter: alpha(opacity=100)\9}
.section-demo .content-box-3 .ani-box .item-1{opacity: 0;filter: alpha(opacity=0)\9}
.section-demo .content-box-3 .ani-box .item-2{-webkit-transform: translate3d(0, 300px, 0);transform: translate3d(0, 300px, 0);opacity: 0;filter: alpha(opacity=0)\9}
.section-demo .content-box-4 .content-4{visibility: visible;opacity: 1;filter: alpha(opacity=100)\9}
.section-demo .content-box-4 .ani-box .item-1{opacity: 0;filter: alpha(opacity=0)\9}
.section-demo .content-box-4 .ani-box .item-2{opacity: 0;filter: alpha(opacity=0)\9}
.section-demo .content-box-4 .ani-box .item-3{-webkit-transform: translate3d(0, 200px, 0);transform: translate3d(0, 200px, 0);opacity: 0;filter: alpha(opacity=0)\9}
.section-demo .content-box-5 .content-4{visibility: visible;opacity: 1;filter: alpha(opacity=100)\9}
.section-demo .content-box-5 .ani-box .item-1{opacity: 0;filter: alpha(opacity=0)\9}
.section-demo .content-box-5 .ani-box .item-2{opacity: 0;filter: alpha(opacity=0)\9}
.section-demo .content-box-5 .ani-box .item-3{opacity: 0;filter: alpha(opacity=0)\9}
.section-demo .content-box-5 .ani-box .item-4{opacity: 0;filter: alpha(opacity=0)\9;-webkit-transform: translate3d(0, 200px, 0);transform: translate3d(0, 200px, 0)}
.section-demo .content-box-6 .content-5{top: 50%;margin-top: -31px;visibility: visible;opacity: 1;filter: alpha(opacity=100)\9}
.section-demo .content-box-6 .ani-box .item-1{opacity: 0;filter: alpha(opacity=0)\9}
.section-demo .content-box-6 .ani-box .item-2{opacity: 0;filter: alpha(opacity=0)\9}
.section-demo .content-box-6 .ani-box .item-3{opacity: 0;filter: alpha(opacity=0)\9}
.section-demo .content-box-6 .ani-box .item-4{opacity: 0;filter: alpha(opacity=0)\9}
.section-demo .content{width: 100%;position: absolute;top: 20%;text-align: center;color: #fff;visibility: hidden;opacity: 0;filter: alpha(opacity=0)\9;-webkit-transition: all .8s ease-out;transition: all .8s ease-out;z-index: 5;margin-top: 0px;}
.section-demo .title{color: #d8dbde;font-size: 20px;}
.section-demo .subtitle{font-size: 30px;line-height: 30px;margin: 0 0 15px;display: inline-block;*zoom: 1;*display: inline}
.section-demo .list{margin: 100px auto 0;padding: 0;overflow: hidden;_zoom: 1}
.section-demo .list li{float: left;height: 66px;list-style: none;border-left: 1px solid #fff;margin-left: -1px}
.section-demo .list strong{display: block;font-size: 24px;line-height: 40px;font-weight: normal;color: #fff;}
.section-demo .list-2{width: 1060px}
.section-demo .list-2 li{width: 25%;color: #d8dbde;font-size: 16px;}
.section-demo .list-3{width: 795px}
.section-demo .list-3 li{width: 33.33%}
.section-demo .list-3 strong{line-height: 60px}
.section-demo .list-4{width: 795px}
.section-demo .list-4 li{width: 33.33%;border-left: none;height: auto;margin-left: 0;font-size: 16px}
.section-demo .list-4 li span{display: block;width: 118px;height: 96px;padding: 11px 0;border: 2px solid #fff;border-color: rgba(255,255,255,0.6);border-radius: 50%;margin: 0 auto 15px;line-height: 24px}
.section-demo .navigation{position: absolute;top: 50%;right: 100px;-webkit-transform: translate3d(0, -50%, 0);transform: translate3d(0, -50%, 0);margin: 0;padding: 0;z-index: 6}
.section-demo .navigation li{width: 12px;height: 12px;margin-bottom: 20px;list-style: none;color: #fff;text-indent: -9999em;overflow: hidden;_zoom: 1;background-color: #0d2737;border-radius: 50%;cursor: pointer}
.section-demo .navigation .active{background-color: #fff}
.section-demo .ani-box{width: 100%;height: 100%;position: absolute;left: 0;bottom: 0}
.section-demo .ani-box .item{width: 100%;position: absolute;left: 50%;background-repeat: no-repeat;background-color: center 0;-webkit-transition: all .5s;transition: all .5s}
.section-demo .ani-box .item span{display: block;position: absolute;-webkit-animation-timing-function: ease-in-out;animation-timing-function: ease-in-out;-webkit-animation-iteration-count: infinite;animation-iteration-count: infinite;-webkit-animation-duration: 3s;animation-duration: 3s}
.section-demo .ani-box .item-1{width: 1796px;height: 700px;margin-left: -898px;bottom: 290px;background-repeat: no-repeat}
.section-demo .ani-box .item-1 span{background-color: #fff;border-radius: 50%}
.section-demo .ani-box .item-1 .dust-1{top: 86%;left: 98%;width: 8px;height: 8px;opacity: .36;filter: alpha(opacity=36)\9;-webkit-animation-name: anishake3;animation-name: anishake3;-webkit-animation-delay: .5s;animation-delay: .5s}
.section-demo .ani-box .item-1 .dust-2{top: 72%;left: 77%;width: 2px;height: 2px;opacity: .3;filter: alpha(opacity=30)\9;-webkit-animation-name: anishake3;animation-name: anishake3;-webkit-animation-delay: 1s;animation-delay: 1s}
.section-demo .ani-box .item-1 .dust-3{top: 81%;left: 54%;width: 2px;height: 2px;opacity: .16;filter: alpha(opacity=16)\9;-webkit-animation-name: anishake2;animation-name: anishake2;-webkit-animation-delay: 1s;animation-delay: 1s}
.section-demo .ani-box .item-1 .dust-4{top: 88%;left: 65%;width: 2px;height: 2px;opacity: .07;filter: alpha(opacity=7)\9;-webkit-animation-name: anishake2;animation-name: anishake2;-webkit-animation-delay: .5s;animation-delay: .5s}
.section-demo .ani-box .item-1 .dust-5{top: 74%;left: 62%;width: 8px;height: 8px;opacity: .41;filter: alpha(opacity=41)\9;-webkit-animation-name: anishake2;animation-name: anishake2;-webkit-animation-delay: .4s;animation-delay: .4s}
.section-demo .ani-box .item-1 .dust-6{top: 94%;left: 78%;width: 2px;height: 2px;opacity: .11;filter: alpha(opacity=11)\9;-webkit-animation-name: anishake3;animation-name: anishake3;-webkit-animation-delay: 1s;animation-delay: 1s}
.section-demo .ani-box .item-1 .dust-7{top: 10%;left: 69%;width: 2px;height: 2px;opacity: .67;filter: alpha(opacity=67)\9;-webkit-animation-name: anishake1;animation-name: anishake1;-webkit-animation-delay: .2s;animation-delay: .2s}
.section-demo .ani-box .item-1 .dust-8{top: 59%;left: 43%;width: 6px;height: 6px;opacity: .05;filter: alpha(opacity=5)\9;-webkit-animation-name: anishake1;animation-name: anishake1;-webkit-animation-delay: .8s;animation-delay: .8s}
.section-demo .ani-box .item-1 .dust-9{top: 71%;left: 61%;width: 2px;height: 2px;opacity: .42;filter: alpha(opacity=42)\9;-webkit-animation-name: anishake2;animation-name: anishake2;-webkit-animation-delay: .7s;animation-delay: .7s}
.section-demo .ani-box .item-1 .dust-10{top: 95%;left: 14%;width: 8px;height: 8px;opacity: .37;filter: alpha(opacity=37)\9;-webkit-animation-name: anishake2;animation-name: anishake2;-webkit-animation-delay: .6s;animation-delay: .6s}
.section-demo .ani-box .item-1 .dust-11{top: 74%;left: 11%;width: 10px;height: 10px;opacity: .55;filter: alpha(opacity=55)\9;-webkit-animation-name: anishake1;animation-name: anishake1;-webkit-animation-delay: 1s;animation-delay: 1s}
.section-demo .ani-box .item-1 .dust-12{top: 26%;left: 54%;width: 10px;height: 10px;opacity: .25;filter: alpha(opacity=25)\9;-webkit-animation-name: anishake1;animation-name: anishake1;-webkit-animation-delay: .5s;animation-delay: .5s}
.section-demo .ani-box .item-1 .dust-13{top: 25%;left: 4%;width: 6px;height: 6px;opacity: .38;filter: alpha(opacity=38)\9;-webkit-animation-name: anishake1;animation-name: anishake1;-webkit-animation-delay: .9s;animation-delay: .9s}
.section-demo .ani-box .item-1 .dust-14{top: 53%;left: 35%;width: 4px;height: 4px;opacity: .35;filter: alpha(opacity=35)\9;-webkit-animation-name: anishake3;animation-name: anishake3;-webkit-animation-delay: .4s;animation-delay: .4s}
.section-demo .ani-box .item-1 .dust-15{top: 47%;left: 5%;width: 2px;height: 2px;opacity: .49;filter: alpha(opacity=49)\9;-webkit-animation-name: anishake3;animation-name: anishake3;-webkit-animation-delay: .2s;animation-delay: .2s}
.section-demo .ani-box .item-1 .dust-16{top: 100%;left: 98%;width: 4px;height: 4px;opacity: .07;filter: alpha(opacity=7)\9;-webkit-animation-name: anishake2;animation-name: anishake2;-webkit-animation-delay: .1s;animation-delay: .1s}
.section-demo .ani-box .item-1 .dust-17{top: 14%;left: 17%;width: 2px;height: 2px;opacity: .32;filter: alpha(opacity=32)\9;-webkit-animation-name: anishake3;animation-name: anishake3;-webkit-animation-delay: .9s;animation-delay: .9s}
.section-demo .ani-box .item-1 .dust-18{top: 80%;left: 64%;width: 10px;height: 10px;opacity: .61;filter: alpha(opacity=61)\9;-webkit-animation-name: anishake3;animation-name: anishake3;-webkit-animation-delay: .4s;animation-delay: .4s}
.section-demo .ani-box .item-1 .dust-19{top: 21%;left: 43%;width: 8px;height: 8px;opacity: .2;filter: alpha(opacity=20)\9;-webkit-animation-name: anishake3;animation-name: anishake3;-webkit-animation-delay: .8s;animation-delay: .8s}
.section-demo .ani-box .item-1 .dust-20{top: 85%;left: 99%;width: 2px;height: 2px;opacity: .16;filter: alpha(opacity=16)\9;-webkit-animation-name: anishake1;animation-name: anishake1;-webkit-animation-delay: .3s;animation-delay: .3s}
.section-demo .ani-box .item-1 .dust-21{top: 15%;left: 76%;width: 2px;height: 2px;opacity: .26;filter: alpha(opacity=26)\9;-webkit-animation-name: anishake3;animation-name: anishake3;-webkit-animation-delay: .9s;animation-delay: .9s}
.section-demo .ani-box .item-1 .dust-22{top: 2%;left: 45%;width: 10px;height: 10px;opacity: .38;filter: alpha(opacity=38)\9;-webkit-animation-name: anishake2;animation-name: anishake2;-webkit-animation-delay: .2s;animation-delay: .2s}
.section-demo .ani-box .item-1 .dust-23{top: 68%;left: 49%;width: 6px;height: 6px;opacity: .66;filter: alpha(opacity=66)\9;-webkit-animation-name: anishake2;animation-name: anishake2;-webkit-animation-delay: .7s;animation-delay: .7s}
.section-demo .ani-box .item-1 .dust-24{top: 77%;left: 20%;width: 10px;height: 10px;opacity: .46;filter: alpha(opacity=46)\9;-webkit-animation-name: anishake1;animation-name: anishake1;-webkit-animation-delay: .1s;animation-delay: .1s}
.section-demo .ani-box .item-1 .dust-25{top: 41%;left: 93%;width: 2px;height: 2px;opacity: .12;filter: alpha(opacity=12)\9;-webkit-animation-name: anishake2;animation-name: anishake2;-webkit-animation-delay: .8s;animation-delay: .8s}
.section-demo .ani-box .item-1 .dust-26{top: 63%;left: 55%;width: 10px;height: 10px;opacity: .27;filter: alpha(opacity=27)\9;-webkit-animation-name: anishake3;animation-name: anishake3;-webkit-animation-delay: .2s;animation-delay: .2s}
.section-demo .ani-box .item-1 .dust-27{top: 70%;left: 20%;width: 4px;height: 4px;opacity: .62;filter: alpha(opacity=62)\9;-webkit-animation-name: anishake3;animation-name: anishake3;-webkit-animation-delay: .1s;animation-delay: .1s}
.section-demo .ani-box .item-1 .dust-28{top: 25%;left: 80%;width: 2px;height: 2px;opacity: .61;filter: alpha(opacity=61)\9;-webkit-animation-name: anishake3;animation-name: anishake3;-webkit-animation-delay: 1s;animation-delay: 1s}
.section-demo .ani-box .item-1 .dust-29{top: 47%;left: 89%;width: 10px;height: 10px;opacity: .36;filter: alpha(opacity=36)\9;-webkit-animation-name: anishake2;animation-name: anishake2;-webkit-animation-delay: .8s;animation-delay: .8s}
.section-demo .ani-box .item-1 .dust-30{top: 6%;left: 10%;width: 6px;height: 6px;opacity: .27;filter: alpha(opacity=27)\9;-webkit-animation-name: anishake1;animation-name: anishake1;-webkit-animation-delay: .6s;animation-delay: .6s}
.section-demo .ani-box .item-2{width: 1104px;height: 130px;margin-left: -552px;bottom: 353px}
.section-demo .ani-box .item-2 .germ-1{width: 130px;height: 70px;background-position: 0 0;-webkit-animation-name: anishake1;animation-name: anishake1}
.section-demo .ani-box .item-2 .germ-2{width: 71px;height: 31px;left: 337px;bottom: 0;background-position: -337px bottom;-webkit-animation-name: anishake2;animation-name: anishake2}
.section-demo .ani-box .item-2 .germ-3{width: 71px;height: 31px;top: 0;right: 0;background-position: right 0;-webkit-animation-name: anishake3;animation-name: anishake3;-webkit-animation-delay: .8s;animation-delay: .8s}
.section-demo .ani-box .item-3{width: 730px;height: 395px;margin-left: -365px;bottom: 248px}
.section-demo .ani-box .item-3 .hair-1{width: 47px;height: 55px;top: 0;left: 0;background-position: 0 0;-webkit-animation-name: anishake3;animation-name: anishake3}
.section-demo .ani-box .item-3 .hair-2{width: 100px;height: 69px;top: 35px;right: 0;background-position: right -35px;-webkit-animation-name: anishake1;animation-name: anishake1;-webkit-animation-delay: .5s;animation-delay: .5s}
.section-demo .ani-box .item-3 .hair-3{width: 172px;height: 57px;bottom: 0;left: 375px;background-position: -375px bottom;-webkit-animation-name: anishake2;animation-name: anishake2;-webkit-animation-delay: 1s;animation-delay: 1s}
.section-demo .ani-box .item-4{width: 520px;height: 351px;margin-left: -260px;bottom: 350px}
.section-demo .ani-box .item-4 .floc-1{width: 93px;height: 88px;top: 105px;left: 0;background-position: 0 -105px;-webkit-animation-name: anishake3;animation-name: anishake3;-webkit-animation-delay: 1s;animation-delay: 1s}
.section-demo .ani-box .item-4 .floc-2{width: 36px;height: 35px;top: 0;left: 226px;background-position: -226px 0;-webkit-animation-name: anishake2;animation-name: anishake2;-webkit-animation-delay: 1.5s;animation-delay: 1.5s}
.section-demo .ani-box .item-4 .floc-3{width: 36px;height: 34px;right: 0;bottom: 0;background-position: right bottom;-webkit-animation-name: anishake3;animation-name: anishake3}
.section-demo .ani-box .item-4 .floc-4{width: 40px;height: 34px;top: 217px;left: 308px;background-position: -308px -217px;-webkit-animation-name: anishake1;animation-name: anishake1;-webkit-animation-delay: .5s;animation-delay: .5s}
.section-demo .section_h{width: 700px;text-align: center;color: #fff;font-size: 24px;border-top: 1px solid #6b818d;border-bottom: 1px solid #6b818d;margin: 0 auto;margin-top: 45px;line-height: 60px;}
.section-demo .content-3{width: 100%;position: absolute;bottom: 0;text-align: center;color: #fff;visibility: hidden;opacity: 0;filter: alpha(opacity=0)\9;-webkit-transition: all .8s ease-out;transition: all .8s ease-out;z-index: 5;border-bottom: 2px solid #ff6029;visibility: visible;opacity: 1;}
.section-demo .content-3 ul{width: 450px;margin: 0 auto;height: 60px;list-style: none;}
.section-demo .content-3 ul li{width: 50%;height: 60px;float: left;line-height: 60px;background-color: #ff6029;list-style: none;}
.section-demo .content-3 ul li a{display: block;font-size: 18px;color: #fff;}
.section-demo .content-3 ul li:nth-child(2){background-color: #9a9a9a;}