.effect-box{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
.effect-box .top{
    width: 100%;
    height: 668px;
    margin-top: 33px;
    position: relative;
}
.effect-box .top .tips-mack{
    position: absolute;
    top: 0px;
    width: 48%;
    width: 55% \9;
    min-width: 200px;
   /*  height: 100%; */
    z-index: 10;
    padding-left: 15%;
}

.control-g-mack{
    position: absolute;
    top: 456px;
    width: 35%;
    min-width: 200px;
    height: 200px;
    background: #123EAB;
    z-index: 3;
    left: 33%;
}
.effect-box .top .tips-mack .tips-item{
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 100px;
}
.effect-box .top .tips-mack .tips-item .tips{
    width: 200px;
    text-align: center;
    color: #ffffff;
    max-width: 50%;
}
.effect-box .top .tips-mack .tips-item .line{
    width: 100%;
    height: 0;
    border-bottom: 2px solid #ffffff;
    flex: 1;
}

.effect-box .top .body{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    position: relative;

}



.effect-box .top .body .head{
    z-index: 4;
    position: absolute;
    top: 0;
    width: 85px
}
.effect-box .top .tips-mack .head{
    margin-top: 50px;
}
.effect-box .top .body .yangji{
    position: absolute;
    top: 280px;
    margin-left:-37px \9;
}
.effect-box .top .tips-mack .yangji{
    margin-top: 155px;
    padding-right: 30px;
}



.effect-box .g{
    width: 1px;
    border: 0 solid rgba(255,255,255,0.2);
    height: 0;
    position: absolute;
    top: 130px;
    z-index: 3;
    margin-left:41px\9;
}
.effect-box .g0{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 15px 0 15px;
    border-color: rgba(255,255,255,0.6) transparent transparent transparent;
    filter: drop-shadow(0 0 2px white);
    position: absolute;
    top: 115px;
    z-index: 2;
    margin-left:28px\9;
}
.effect-box .g1{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 30px 0 30px;
    border-color: transparent transparent rgba(255,255,255,0.6) transparent;
    filter: drop-shadow(0 0 2px white);
    position: absolute;
    top: 175px;
    z-index:2;
    margin-left:13px\9;
}

.effect-box .g2{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 30px 0 30px;
    border-color: rgba(255,255,255,0.6) transparent transparent  transparent;
    filter: drop-shadow(0 0 2px white);
    position: absolute;
    top: 315px;
    z-index: 2;
    margin-left:13px\9;
}
.effect-box .g3{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 18px 0 18px;;
    border-color: rgba(255,255,255,0.6) transparent transparent  transparent;
    filter: drop-shadow(0 0 2px white);
    position: absolute;
    top: 440px;
    z-index:11;
    margin-left:25px\9;
}


.effect-box .top .body .xianquan{
    position: absolute;
    top: 400px;
    margin-left:-37px \9;
}

.effect-box .top .body .huiju-yuan{
    position: absolute;
    top: 307.44px;
    z-index: 4;
}


.effect-box .top .tips-mack .xianquan{
    margin-top: 245px;
    padding-right: 28px;
}

.effect-box .top .body .yuan{
    position: absolute;
    top: 427px;
    z-index: 15;
    text-align: center;
    margin: 0 auto;

}



.effect-box .top .body .tiaoshi{
    z-index: 3;
    position: absolute;
    top: 460px;
    text-align: center;
    margin: 0 auto;

}
.effect-box .top .tips-mack .tiaoshi{
    margin-top: 105px;
    padding-right: 28px;
}
.effect-box .top .body .material{
    position: absolute;
    bottom: 37px;
    z-index:10;
    text-align: center;
    margin-left:-60px \9;
    width: 50%;

}
.material img{
    width: 50%;
}
.effect-box .top .tips-mack .material{
    padding-right: 50px;
    margin-top: 155px;
}


.effect-box .control{
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 30%;
}

.effect-box .control .start-btn,
.effect-box .control .restart-btn {
    width: 130px;
    height:30px;
    margin-top: 160px;
    background: #ffffff;
    color: #123EAB;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
}


.effect-box .control .slide-box{
    margin-top: 70px;
    color:#ffffff;
    height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
}

.effect-box .control .slide-box .ele-control{
    width: 100%;
}
.effect-box .control .slide-box .direction-control{
    width: 100%;
    margin-top: 65px;
}

.effect-box .control .slide-box .title{
    margin-bottom: 20px;
    padding-left: 30px;
}


input[type=range]:focus {
    outline: none;
}
/*.range-slider__range {*/
/*    -webkit-appearance: none;*/
/*    !*height: 25px\9;*!*/
/*    border-radius: 10px;*/
/*    !*background: #d7dcdf;*!*/
/*    background: -webkit-linear-gradient(#059CFA, #059CFA) no-repeat;*/
/*    background: linear-gradient(#059CFA, #059CFA) \9;*/
/*    background-size: 0 100%;*/
/*    outline: none;*/
/*    padding: 0;*/
/*    margin: 0;*/
/*    width: 140px\9;*/
/*}*/

/*.range-slider__range::-webkit-slider-thumb {*/
/*    -webkit-appearance: none;*/
/*    appearance: none;*/
/*    width: 25px;*/
/*    height: 25px;*/
/*    border-radius: 50%;*/
/*    background: #ffffff;*/
/*    cursor: pointer;*/

/*}*/

/*.range-slider__range::-webkit-slider-runnable-track {!*轨道*!*/

/*    height: 15px;*/

/*    background: rgba(0,0,0,0.2);*/

/*    border-radius: 10px;*/
/*    box-shadow: 0 1px 1px #def3f8, inset 0 .125em .125em #0d1112; !*轨道内置阴影效果*!*/
/*}*/


/*.range-slider__range::-webkit-slider-thumb:hover,.range-slider__range::-ms-thumb:hover {*/
/*    background: #4390EE;*/
/*}*/
/*.range-slider__range:active::-webkit-slider-thumb,.range-slider__range:active::-ms-thumb {*/
/*    background: #4390EE;*/
/*}*/
/*.range-slider__range::-moz-range-thumb {*/
/*    width: 25px;*/
/*    height: 25px;*/
/*    border: 0;*/
/*    border-radius: 50%;*/
/*    background: #ffffff;*/
/*    cursor: pointer;*/
/*    -webkit-transition: background .15s ease-in-out;*/
/*    transition: background .15s ease-in-out;*/
/*}*/
/*.range-slider__range::-ms-thumb:hover,.range-slider__range::-webkit-slider-thumb:hover{*/
/*    background: #4390EE;*/
/*}*/
/*.range-slider__range:active::-ms-thumb,.range-slider__range:active::-webkit-slider-thumb {*/
/*    background: #4390EE;*/
/*}*/


input[type=range] {
    -webkit-appearance: none;
    width: 140px\9;
    background: -webkit-linear-gradient(#059CFA, #059CFA) no-repeat;
    background: linear-gradient(#059CFA, #059CFA);
    background-size: 0 100%;
    border: hidden;
    overflow: unset;
    padding: 0;
    margin: 0;
    outline: none;
    border-radius: 10px;
    cursor: pointer!important;
}
input[type=range]:focus {
    outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 15px;
    cursor: pointer;
    background: rgba(0,0,0,0.2);
    border-radius: 10px;
    box-shadow: 0 1px 1px #def3f8, inset 0 .125em .125em #0d1112; /*轨道内置阴影效果*/
}
input[type=range]::-webkit-slider-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #ffffff;
    cursor: pointer;
    -webkit-transition: background .15s ease-in-out;
    transition: background .15s ease-in-out;
    margin-top: -4px; /*使滑块超出轨道部分的偏移量相等*/
    border: solid 0.125em rgba(205, 224, 230, 0.5); /*设置边框*/
    box-shadow: 0 .125em .125em #3b4547; /*添加底部阴影*/
    -webkit-appearance: none;
}
input[type=range]:hover::-webkit-slider-thumb,input[type=range]:active::-webkit-slider-thumb{
    cursor: pointer;
    background: #059CFA;
}
input[type=range]:focus::-webkit-slider-runnable-track {
    /*background: #059CFA;*/
}
input[type=range]::-moz-range-track {
    width: 100%;
    height: 15px;
    cursor: pointer;
    background: rgba(0,0,0,0.2);
    border-radius: 10px;
    box-shadow: 0 1px 1px #def3f8, inset 0 .125em .125em #0d1112; /*轨道内置阴影效果*/
}
input[type=range]::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #ffffff;
    cursor: pointer;
    -webkit-transition: background .15s ease-in-out;
    transition: background .15s ease-in-out;
    margin-top: -4px;/*使滑块超出轨道部分的偏移量相等*/
    border: solid 0.125em rgba(205, 224, 230, 0.5); /*设置边框*/
    box-shadow: 0 .125em .125em #3b4547; /*添加底部阴影*/
}
input[type=range]:hover::-moz-range-thumb,input[type=range]:active::-moz-range-thumb{
    cursor: pointer;
    background: #059CFA;
}

input[type=range]::-ms-track {
    width: 100%;
    height: 15px;
    cursor: pointer;
    background: rgba(0,0,0,0.2);
    border-radius: 10px;
    box-shadow: 0 1px 1px #def3f8, inset 0 .125em .125em #0d1112; /*轨道内置阴影效果*/
    color: transparent;
    border-color: transparent;

}
input[type=range]::-ms-fill-lower {
    /*background: #059CFA;*/
    border: 0 solid #000101;
    border-radius: 50px;
}
input[type=range]::-ms-fill-upper {
    background: rgba(0,0,0,0.2);
    border: 0 solid #000101;
    border-radius: 50px;
}
input[type=range]::-ms-thumb {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #ffffff;
    cursor: pointer;
    -webkit-transition: background .15s ease-in-out;
    transition: background .15s ease-in-out;
    margin-top: 0; /*使滑块超出轨道部分的偏移量相等*/
    border: solid 0.125em rgba(205, 224, 230, 0.5); /*设置边框*/
    box-shadow: 0 .125em .125em #3b4547; /*添加底部阴影*/
    position: relative;
    z-index:9999;
}
input[type=range]:hover::-ms-thumb,input[type=range]:active::-ms-thumb{
    cursor: pointer;
    background: #059CFA;
}




















.effect-box .bottom{
    width: 100%;
    height: 10%;
}

.effect-box .bottom .check-box{
    width: 400px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 60%;
}
.effect-box .bottom .check-box .check-item{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    cursor: pointer;
}
.effect-box .bottom .check-box i{
    font-size: 25px;
}
.effect-box .bottom .check-box .name{
    color: #ffffff;
    margin-top: 10px;
}

@media screen and (max-width: 1600px) {
    .animate-box {
        height: 745px;
    }
    .effect-box .top {
        height: 583px;
    }
    .effect-box .g0 {
       /*  border-top-width: 40px!important; */
    }
    .effect-box .g1 {
        top: 153px;
       /*  border-bottom-width: 115px!important; */
    }
    .effect-box .top .body .yangji {
        top: 234px;
    }
    .effect-box .top .body .huiju-yuan {
        top: 261.44px;
    }
    .effect-box .g2 {
        top: 268px;
       /*  border-top-width:296px!important; */
    }
    .effect-box .top .body .xianquan {
        top: 367px;
    }
    .effect-box .top .body .yuan {
        top: 395px;
    }
    .effect-box .g3 {
        top: 419px;
       /*  border-top-width:113px!important; */
    }
    .control-g-mack {
        top: 424px;
        height: 146px;
    }
    .effect-box .top .body .material {
        bottom: 35px;
    }
    .effect-box .top .tips-mack .xianquan {
        margin-top: 198px;
    }
    .effect-box .top .tips-mack .tiaoshi {
        margin-top: 115px;
    }
    .effect-box .top .tips-mack .material {
        margin-top: 110px;
    }
}