.youshime{ width: 650px; height: 208px; margin:10px auto; margin-top:60px; }

.youshime div{ 
    width: 120px;
    height: 120px;
    border:1px solid #afb1b5;
    float: left;
    margin-left:27px;
     text-align: center;
transform:rotate(45deg);
-ms-transform:rotate(45deg);     /* IE 9 */
-moz-transform:rotate(45deg);    /* Firefox */
-webkit-transform:rotate(45deg); /* Safari 和 Chrome */
-o-transform:rotate(45deg);  /* Opera */
     }

.youshime div span{ 
    font-size:20px;
    font-weight: 600;
    color: #fff;
    line-height: 120px;
    display: block;
    transform:rotate(-45deg);
-ms-transform:rotate(-45deg);     /* IE 9 */
-moz-transform:rotate(-45deg);    /* Firefox */
-webkit-transform:rotate(-45deg); /* Safari 和 Chrome */
-o-transform:rotate(-45deg);  /* Opera */
     }

/*******
**********响应式**********
**********end**********
*******/
.mobile-inner-header-icon {
    color: #fff;
    height: 60px;
    font-size: 18px;
    text-align: center;
    right: 0px;
    top: 0px;
    width: 50px;
    z-index: 999;
    background: rgba(144,196,47,0.8);
    position: fixed;
    -webkit-transition: background .5s;
    -moz-transition: background .5s;
    -o-transition: background .5s;
    transition: background .5s;
}

.mobile-inner-header-icon:hover {
    background: #90c42f;
    cursor: pointer;
}

.mobile-inner-nav {
    background-color: rgba(0,0,0,0.9);
    width: 100%;
    position: fixed;
    top: 0px;
    left: 10px;
    padding-top: 30px;
    padding-bottom: 80px;
    height: 100%;
    z-index: 99;
    display: none;
}

.showm {
    display: block;
}

.mobile-inner-nav a {
    display: inline-block;
    line-height: 10vh;
    text-decoration: none;
    width: 80%;
    font-size: 1.5em;
    height: 10vh;
    margin-left: 10%;
    color: #fff;
    border-bottom: solid 1px rgba(255,255,255,0.3);
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    font-weight: 300;
}

.mobile-inner-header-icon span:nth-child(2) {
    transform: translateY(-4px) rotate(0deg);
    transition: all 0.5s;
}
.mobile-inner-header-icon span:nth-child(1) {
    transform: translateY(4px) rotate(0deg);
    transition: all 0.5s;
}
.mobile-inner-header-icon span {
    position: absolute;
    left: calc((100% - 25px) / 2);
    top: calc((100% - 1px) / 2);
    width: 25px;
    height: 1px;
    background-color: #fff;
}
.mobile-inner-header-icon-click span:nth-child(1) {
    transform: translateY(0) rotate(45deg);
}

.mobile-inner-header-icon-click span:nth-child(2) {
    transform: translateY(0) rotate(-45deg);
}

 .mousedown{

    display: inline-block;

    width:40px;

    height:40px;

    border-radius:50%;

    position:relative;

    margin-top:30px;

    font-size:12px;

    color: #fff;
    }



 .mousedown b{
     color: #fff;
    font-size:50px;

    position:absolute;

    top:0px;

    top:10px\9;

    left:0px;

    animation: mousedown 2s infinite;

    -moz-animation: mousedown 2s infinite;  /* Firefox */

    -webkit-animation: mousedown 2s infinite;   /* Safari 和 Chrome */

    -o-animation: mousedown 2s infinite;    /* Opera */

    }



@keyframes mousedown

{

0% {top:0px; opacity:0.2;}

50%{top:50px; opacity:1;}

100%{top:100px; opacity:0;}

}

.region-list{position:absolute;left:0;top:0}
@-webkit-keyframes warn{
0%{-webkit-transform:scale(0);transform:scale(0);opacity:1}
100%{-webkit-transform:scale(1);transform:scale(1);opacity:0}
}
@-moz-keyframes warn{
0%{-moz-transform:scale(0);transform:scale(0);opacity:1}
100%{-moz-transform:scale(1);transform:scale(1);opacity:0}
}
@-o-keyframes warn{
0%{-o-transform:scale(0);transform:scale(0);opacity:1}
100%{-o-transform:scale(1);transform:scale(1);opacity:0}
}
@keyframes warn{
0%{-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);transform:scale(0);opacity:1}
100%{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1);opacity:0}
}
.area-box .dot{position:absolute;left:0;width:10px;height:10px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;background:#137766;opacity:1;filter:alpha(opacity=100)}
.area-box .pulse{position:absolute;top:-28px;left:-28px;height:66px;width:66px;border:2px solid #b7b7b7;-webkit-border-radius:48px;-moz-border-radius:48px;border-radius:48px;-webkit-box-shadow:0 0 4px #137766,0 0 10px #137766 inset;-moz-box-shadow:0 0 4px #137766,0 0 10px #137766 inset;box-shadow:0 0 4px #137766,0 0 10px #137766 inset;opacity:.12;filter:alpha(opacity=0);-webkit-animation:warn 2s ease-out both;-moz-animation:warn 2s ease-out both;-o-animation:warn 2s ease-out both;animation:warn 2s ease-out both;-webkit-animation-iteration-count:infinite;-moz-animation-iteration-count:infinite;-o-animation-iteration-count:infinite;animation-iteration-count:infinite;background:0 0}
.area-box .delay-01{-webkit-animation-delay:0;-moz-animation-delay:0;-o-animation-delay:0;animation-delay:0}
.area-box .delay-02{-webkit-animation-delay:.4s;-moz-animation-delay:.4s;-o-animation-delay:.4s;animation-delay:.4s}
.area-box .delay-03{-webkit-animation-delay:.8s;-moz-animation-delay:.8s;-o-animation-delay:.8s;animation-delay:.8s}
.area-box .delay-04{-webkit-animation-delay:1.2s;-moz-animation-delay:1.2s;-o-animation-delay:1.2s;animation-delay:1.2s}
.area-box .delay-05{-webkit-animation-delay:1.6s;-moz-animation-delay:1.6s;-o-animation-delay:1.6s;animation-delay:1.6s}
.area-box .delay-06{-webkit-animation-delay:2s;-moz-animation-delay:2s;-o-animation-delay:2s;animation-delay:2s}
.area-box .delay-07{-webkit-animation-delay:2.4s;-moz-animation-delay:2.4s;-o-animation-delay:2.4s;animation-delay:2.4s}
.area-box .delay-08{-webkit-animation-delay:-.4s;-moz-animation-delay:-.4s;-o-animation-delay:-.4s;animation-delay:-.4s}
.area-box .delay-09{-webkit-animation-delay:-.8s;-moz-animation-delay:-.8s;-o-animation-delay:-.8s;animation-delay:-.8s}
.area-box .delay-10{-webkit-animation-delay:-1.2s;-moz-animation-delay:-1.2s;-o-animation-delay:-1.2s;animation-delay:-1.2s}
.area-box .delay-11{-webkit-animation-delay:4s;-moz-animation-delay:4s;-o-animation-delay:4s;animation-delay:4s}
.region-list.active .area-box .dot{background:#90c42f}
.region-list.active .area-box .pulse{border-color:#009fd9;top:-39px;left:-39px;height:88px;width:88px;-webkit-box-shadow:0 0 12px #0080d9,0 0 20px #90c42f inset;-moz-box-shadow:0 0 12px #90c42f,0 0 20px #90c42f inset;box-shadow:0 0 12px #90c42f,0 0 20px #90c42f inset}
.region-list.waite .area-box .dot{background:#f90}
.region-list.waite .area-box .pulse{border-color:#f90}
.show-regin{position:absolute;left:2px;height:0;top:0;width:11px;opacity:0;-o-transition:all .5s ease-in-out;-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;transition:all .5s ease-in-out}
.online-node .show-regin,.region-list:hover .show-regin,.underline-node .show-regin,.waite-node .show-regin{height:127px;opacity:1}
.show-regin span{width:80px;position:absolute;left:8px;top:-11px;padding:6px 10px;font-size:14px;color:#ccc;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;text-align:center;white-space:nowrap;}
.postition-10 .show-regin span{left:0}
.postition-6 .show-regin span{left:-72px}
.area-box{z-index:77}
.show-regin{z-index:66}
.region-list.active .show-regin span{position:relative;color:#ccc}
.region-list.waite .show-regin span{color:#ccc}
.postition-1{left:100px;top:110px}
.postition-2{left:461px;top:130px}
.postition-3{left:358px;top:516px}
.postition-4{left:473px;top:348px}
.postition-5{left:526px;top:394px}
.postition-6{left:526px;top:515px}
.postition-7{left:652px;top:200px}
.postition-7.region-list.active .area-box .pulse{top:-50px;left:-50px;width:110px;height:110px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%}
.postition-8{left:559px;top:229px}
.postition-9{left:640px;top:485px}
.postition-9.region-list.active .area-box .pulse{top:-50px;left:-50px;width:110px;height:110px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%}
.postition-10{left:554px;top:539px}
.postition-11{left:604px;top:300px}
.postition-13{left:270px;top:270px}
.douhao{width:0}
.postition-1 {
    left: 150px;
    top: 80px;
}
.postition-4 {
    left: 473px;
    top: 258px;
}

.postition-13 {
    left: 270px;
    top: 220px;
}

.postition-7 {
    left: 565px;
    top: 150px;
}

.postition-9 {
    left: 620px;
    top: 405px;
}

.ysdw1 .ysdwctn{ width: 100%; height: 450px; }
.ysdw1 .ysdwctn .ysdwyq{width:150px; height: 150px; position: relative; margin-right:30px; margin-top: 5px;  float: left;}
.ysdw1 .ysdwctn .ysdwyq .ysdwback{
 min-width: 150px;
  min-height: 150px;
  position: absolute;
   left:0px; top:0px;
   background: url(../img/30.png) no-repeat center center; 
  background-size: 95%;
    }
.ysdw1 .ysdwctn .ysdwyq .ysdwtitle{color: #fff; text-align: center; font-size: 0.8em; line-height: 1em;padding-top: 30px; }
.ysdw1 .ysdwctn .ysdwyq .ysdwback:hover{     
            -webkit-animation-play-state:paused; 
            animation-play-state:paused;    

        }     

.afctn{ width: 100%; margin:0px auto; padding-top: 30px; min-height:180px;color: #fff; text-align: center;  font-size: 1em; line-height: 2em; }
.afctn div{width: 49%;height: 40px; margin-top: 10px; color: #fff; float: left; line-height:40px; text-align: center; border-radius: 20px 20px; }
.afctn div:nth-child(1){ border:1px solid #0273a4; }
.afctn div:nth-child(2){ border:1px solid #b34313; }
.afctn div:nth-child(3){ border:1px solid #59772b; }
.afctn div:nth-child(4){ border:1px solid #f3e548; }


.zw1 {width: 100%; position: relative; height: 600px}
.zw1 .zw1img1{position: absolute; left: 40px; top:0px; width: 300px;
-webkit-animation-name:'ripple1';/*动画属性名，也就是我们前面keyframes定义的动画名*/
-webkit-animation-duration: 2s;/*动画持续时间*/
-webkit-animation-timing-function: ease; /*动画频率，和transition-timing-function是一样的*/
-webkit-animation-delay: 0s;/*动画延迟时间*/
-webkit-animation-iteration-count: infinite;/*定义循环资料，infinite为无限次*/
-webkit-animation-direction: alternate;/*定义动画方式*/}

@keyframes ripple1 {
0% {
top:0px;
}
100% {
top:20px;
}
}



.zw2 {width: 100%; position: relative; height: 600px}
.zw2 .zw2img1{position: absolute; width: 300px;left:40px; top:0px;
-webkit-animation-name:'ripple21';/*动画属性名，也就是我们前面keyframes定义的动画名*/
-webkit-animation-duration: 2s;/*动画持续时间*/
-webkit-animation-timing-function: ease; /*动画频率，和transition-timing-function是一样的*/
-webkit-animation-delay: 0s;/*动画延迟时间*/
-webkit-animation-iteration-count: infinite;/*定义循环资料，infinite为无限次*/
-webkit-animation-direction: alternate;/*定义动画方式*/}

@keyframes ripple21 {
0% {
top:0px;
}
100% {
left:20px;
}
}


.zw3 {width: 100%; position: relative; height: 600px}
.zw3 .zw3img1{position: absolute; width: 300px;left:40px; top:0px;
-webkit-animation-name:'ripple31';/*动画属性名，也就是我们前面keyframes定义的动画名*/
-webkit-animation-duration: 1s;/*动画持续时间*/
-webkit-animation-timing-function: ease; /*动画频率，和transition-timing-function是一样的*/
-webkit-animation-delay: 0s;/*动画延迟时间*/
-webkit-animation-iteration-count: infinite;/*定义循环资料，infinite为无限次*/
-webkit-animation-direction: alternate;/*定义动画方式*/}

@keyframes ripple31 {
0% {
top:0px;
}
100% {
top:20px;
}
}