article,aside,blockquote,body,button,code,dd,details,div,dl,dt,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,hr,input,legend,li,menu,nav,ol,p,pre,section,td,textarea,th,ul{margin:0;padding:0;font-family:'Microsoft YaHei';-ms-touch-action:none}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
table{border-collapse:collapse;border-spacing:0}
audio,canvas,video{display:inline-block}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;}
ol,ul{list-style:none}
ol,ul,li,dl,dt,dd{ display: block;}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;}
q:after,q:before{content:''}
abbr,acronym{border:0;font-variant:normal}
sup{vertical-align:text-top}
sub{vertical-align:text-bottom}
.clearfix:after{clear:both;content:"\20";display:block;height:0;visibility:hidden}
.clearfix{zoom:1}
input,select,textarea{font-family:inherit;font-size:inherit;font-weight:inherit}
a,button,div,input{outline:0;text-decoration:none}
::-moz-focus-inner{border:0}
body{ background: #e0dace; }
.lf{ float: left;}
.rt{ float: right;}
.f20{ font-size: 20px;}
.f16{ font-size: 16px;}
.h15{ height: 15px;}
.pos{ position: absolute;}
.btn{ display: block;}
.main{ width: 1200px; margin: 0px auto; position: relative;}
.none{ display: none;}

.nav{ height: 86px; background: #041936; border-bottom: 1px solid #fffefb; }

.dw_cont{ min-height: 945px; width: 100%; height: 880px; background: url(../images/dbg1.jpg) no-repeat center -86px;}

.mpdh{ width: 106px; height: 430px; position: absolute; top: 66px; left: 11px; background: url(../images/dh.png) no-repeat; z-index: 200; }
.mpdh ul{ width: 55px; margin: 20px auto;}
.mpdh ul li{ width: 55px; height: 66px; margin-bottom: 14px; position: relative; cursor: pointer;}
.mpdh ul li span.s1,.mpdh ul li span.s2{ background:url(../images/s1.png) no-repeat; display: block;}
.mpdh ul li span.s1{  width: 55px; height: 66px;  }
.mpdh ul li span.s1.skill-j{ background-position: -70px -84px;}
.mpdh ul li span.s1.skill-m{ background-position: -129px -154px;}
.mpdh ul li span.s1.skill-s{ background-position: -188px -84px;}
.mpdh ul li span.s1.skill-h{ background-position: -130px -84px;}
.mpdh ul li span.s1.skill-t{ background-position: -70px -154px;}

.mpdh ul li span.s2{ width: 66px; height: 80px; display: none; position: absolute; top: -5.5px; left: -7px; }
.mpdh ul li span.s2.skill-j{ background-position: -141px -0px;}
.mpdh ul li span.s2.skill-m{ background-position: -70px -0px;}
.mpdh ul li span.s2.skill-s{ background-position: -0px -168px;}
.mpdh ul li span.s2.skill-h{ background-position: -0px -84px;}
.mpdh ul li span.s2.skill-t{ background-position: -0px -0px;}
.mpdh ul li.on span.s1{ display: none;}
.mpdh ul li.on span.s2{ display: block;}

.mppp{ width: 550px; height: 965px; position: absolute; left:150px; top:15px;}
.mppp .pp{ display: none;}
.mppp .pp.pp5{ margin-left: -100px;}
.mppp .pp.on{ display:block;}

.mpbox{ width: 475px; height: 578px; position: absolute; left: 645px; top: 85px; z-index: 120;}
.mpbox .title{ width: 328px; height: 102px; background: url(../images/s2.png) no-repeat; margin: 0px auto; margin-bottom: 20px; }
.mpbox .title.t1{ background-position: -664px -0px; }
.mpbox .title.t2{   background-position: -0px -106px; }
.mpbox .title.t3{background-position: -332px -0px;  }
.mpbox .title.t4{background-position: -0px -0px; }
.mpbox .title.t5{  background-position: -332px -106px; }
.mpbox h3,.mpbox .p1,.mpbox .p2{ padding:0px 20px; color: #df9d01; }
.mpbox h3{ font-size: 20px; margin-bottom: 8px; }
.mpbox .p1{ font-size: 12px; margin-bottom: 8px; }
.mpbox .p2{ font-size: 12px; margin-bottom: 8px;  color: #7f7e7e; }
.mpbox .p2 b{ font-size: 16px;}

.skillbox{  width: 410px; height: 110px; position: relative; margin:0px auto;margin-bottom: 15px; }
.skillbox .btn{ width: 25px; height: 49px; background: url(../images/s1.png) no-repeat; position: absolute; }
.skillbox .btn.btnleft{ background-position: -210px 0px; right: -33px; top: 23px; }
.skillbox .btn.btnright { background-position: -188px -154px; left: -33px; top: 23px; }
.skillbox .skill{width: 410px; height: 110px; overflow: hidden; position: relative;  }

.skillbox .skilllist{ width: 2000px; position: absolute; height: 71px; left: 0px; top: 15px;}
.skillbox .skilllist li { width: 62px; height: 71px; float: left; margin-right: 24px;  position: relative; }
.skillbox .skilllist li .skll1{ display: block; width: 62px; height: 71px;         cursor: pointer;
        -webkit-transition: all .2s linear;
        transition: all .2s linear;}
.skillbox .skilllist li.on .ic{display: block; width: 15px; height: 15px; background:url(../images/s1.png) no-repeat; background-position: -210px -53px; position: absolute; left: 23px; bottom: -20px; }
.anm-yun{ width: 3484px; height: 723px; position: fixed; left: 0px; bottom: 0px; background: url(../images/yun.png) no-repeat; z-index: 99; }



#skillpop{ position: absolute; left: 0px; top: 0px; z-index: 101; width: 380px; min-height: 148px; border-radius: 8px; background: rgba(255,255,255,0.8);}
#skillpop .nr{ width: 369px; min-height: 137px; margin:5px auto 5px auto; background: #fff;  border-radius: 8px; overflow: hidden; }
#skillpop .stop{ height: 51px; margin: 15px 20px 10px 20px; position: relative; padding-left: 65px;}
#skillpop .stop .skic{ position: absolute; left: 0px; top: 0px; width:51px; height: 51px; }
#skillpop .stop h3{ line-height: 25px; font-size: 24px; margin-bottom: 7px;}
#skillpop .stop p{ font-size: 14px;}
#skillpop .sbtm{ margin: 0px 20px;}

.dw_foot{ width: 100%; height: 130px; background: #fff; background: rgba(255,255,255,0.8); display: table; position: relative; z-index: 300; margin-top: -60px; /*position: absolute; left: 0px; bottom: -95px; right: 0px;*/ }
.dw_foot .ic{ height: 13px; width: 1200px; margin:26px auto 26px auto; background: url(../images/ftic.png) no-repeat center;}
.dw_foot .bq{ text-align: center; color: #898989;}

.leaf{ background:url(../images/s2.png) no-repeat;}
.leaf.lf1{ width: 101px; height: 58px; position: fixed; z-index: 99;  top: 350px; left: 50%; margin-left: 650px; background-position: -850px -178px; }
.leaf.lf2{ width: 182px; height: 99px; position: fixed; z-index: 99;  top: 570px; left: 50%; margin-left: 10px; background-position: -664px -106px; }
.leaf.lf3{ width: 90px; height: 54px; position: fixed; z-index: 99;  top: 270px; left: 50%; margin-left:780px; background-position: -664px -209px; }

.leaf.lf4{ width: 62px; height: 35px; position: fixed; z-index: 99;  top: 185px; left: 50%; margin-left:-780px; background-position: -955px -178px; }
.leaf.lf5{ width: 62px; height: 35px; position: fixed; z-index: 99;  top: 295px; left: 50%; margin-left:-950px; background-position: -955px -178px; }
.leaf.lf6{ width: 122px; height: 68px; position: fixed; z-index: 99;  top: 343px; left: 50%; margin-left:150px; background-position: -850px -106px; }

.anm-yun{
-webkit-animation:anmyun 60s 0s infinite linear both;
-moz-animation:anmyun 60s 0s infinite linear both;}
@-webkit-keyframes anmyun{
    0%{-webkit-transform:translateX(0px)}
    50%{-webkit-transform:translateX(-1000px)}
    100%{-webkit-transform:translateX(0px)}
}
@-moz-keyframes anmyun{
    0%{-moz-transform:translateX(0px)}
    50%{-moz-transform:translateX(-1000px)}
    100%{-moz-transform:translateX(px0)}
}

.anm-leaf{
     -webkit-animation: leafAuto 4s ease-in infinite alternate;
}
@-webkit-keyframes leaf{
0%{opacity:0;
        -webkit-transform:rotate(0deg);
        -moz-transform:rotate(0deg);
    }
100%{
        -webkit-transform:rotate(60deg);
        -moz-transform:rotate(60deg);
    }
}
@-webkit-keyframes leafAuto{
0%{
        -webkit-transform:translate(0px,0px);
        -moz-transform:translate(0px,0px);
    }
100%{
              -webkit-transform:translate( 20px,0px);
        -moz-transform:translate(20px,0px);
    }
}

.anm-csm{
        margin-top: -3px;
        margin-left: 3px;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.anm_autoR{
-webkit-animation:shakeR 1s  ease infinite both;
-moz-animation:shakeR 1s ease infinite both;}
@-webkit-keyframes shakeR{
    0%{-webkit-transform:translateX(0px);}
    100%{-webkit-transform:translateX(10px);}
}
@-moz-keyframes shakeR{
    0%{-moz-transform:translateX(0px);}
    100%{-moz-transform:translateX(10px);}
}
.anm_autoL{
-webkit-animation:shakeL 1s ease infinite both;
-moz-animation:shakeL 1s ease infinite both;}
@-webkit-keyframes shakeL{
    0%{-webkit-transform:translateX(0px);}
    100%{-webkit-transform:translateX(-10px);}
}
@-moz-keyframes shakeL{
    0%{-moz-transform:translateX(0px);}
    100%{-moz-transform:translateX(-10px);}
}