.ua25{}

.ua25 h1{ display: inline-block; width: 100%; text-transform: uppercase; text-align: center; font-size: 4rem; line-height: 6rem; font-family: 'MACHINEN';}
.ua25 h2{ text-align: center; font-family: 'FuturaBT Medium'; font-size: 2rem; line-height: 3rem}
.ua25 .text{ padding: 3rem 0; font-family: 'WorkSans-Medium'; color: #353535; font-size: 1.5rem; line-height: 2.5rem; text-align: center; }


.ua25 .img{ width: 100%; }
.ua25 .img img{ width: 100%; }


.ua25 .color{background: #7090AD url(colorbg.jpg) bottom center no-repeat; background-size: 100%;}
.ua25 .color h1{ color: #fff; padding: 10rem 0 6rem 0 }
.ua25 .color ul{ margin-bottom: 12rem; width: 100% }
.ua25 .color ul li{ width: 18%; margin: 0 1%; }
.ua25 .color ul li .name{ text-align: center; line-height: 4rem; font-size:1.5rem; }

.ua25 .abundant{ background: #2D3E50 }
.ua25 .abundant #videopd{   width: 100%; position: relative;}
.ua25 .abundant #videopd .left{ width:100%; color: #fff; padding-right:50rem; top: 0; left: 0;  position: absolute;}
.ua25 .abundant #videopd .left .l{ width: 40rem; float: right; margin-top: 14rem}
.ua25 .abundant #videopd #right{ float: right; width:50rem;}
.ua25 .abundant #videopd #right .video-foreground{ width: 100%; float: right;}
.ua25 .abundant #videopd #right .video-foreground img{ width: 100%; }


.ua25 .system{ padding: 8rem 0 }
.ua25 .system .r{ float: left; width: 20%; margin-left: 8% }
.ua25 .system .r .img{ width: 90%; margin-left: 5% }
.ua25 .system .l{ float: right; width:50%; margin-right: 12% }
.ua25 .system .l h1,.ua25 .system .l h2{ text-align: left; }
.ua25 .system .l h2{ font-size: 1.8rem; }


.ua25 .juice{background: linear-gradient(to right,#fff,#B9E8F8) }
.ua25 .juice .juicebg{ background: url(juicebg.png) bottom left no-repeat; padding: 8rem 0 6rem 0}
.ua25 .juice .r{ float: left; width: 20%;}
.ua25 .juice .r .img{ width: 90%; margin-left: 5% }
.ua25 .juice .l{ float: right; width:60%; margin-right: 2% }
.ua25 .juice .l h1,.ua25 .juice .l h2{ text-align: left; }
.ua25 .juice .l h2{ font-size: 1.8rem; }


.ua25 .fill{background: linear-gradient(to right,#E3E3E3,#fff); padding: 12rem 0 4rem 0}
.ua25 .fill .r{ float: right; width: 45%;}
.ua25 .fill .r .img{ width: 100%; }
.ua25 .fill .l{ float: left; width:55%;}
.ua25 .fill .l h1,.ua25 .fill .l h2{ text-align: left; }
.ua25 .fill .l h2{ font-size: 1.8rem; }


.ua25 .drip{ position: relative;background: linear-gradient(0deg, #C6C6C6, #fff 50%, #C6C6C6);}
.ua25 .drip .bg{ position: absolute; left: 0; bottom: 0; z-index: 1; width: 36rem;}
.ua25 .drip .l{ width: 100%; padding-left: 30%; padding-bottom: 8rem}
.ua25 .drip .l h1,.ua25 .drip .l h2{  text-align:left; }
.ua25 .drip .r{ width: 40%; margin-left:42%;  padding-top: 8rem; text-align: center;}


.ua25 .leak{background: linear-gradient(to right,#EDEDED,#FDFDFB);padding: 8rem 0 6rem 0}
.ua25 .leak .r{ float: left; width: 40%;}
.ua25 .leak .r .img{ width: 90%; margin-left: 5% }
.ua25 .leak .l{ float: right; width:55%;}
.ua25 .leak .l h1,.ua25 .leak .l h2{ text-align: left; }
.ua25 .leak .l h2{ font-size: 1.8rem; }



.ua25 .spec{ padding: 12rem 0 4rem 0}
.ua25 .spec .r{ float: right; width: 35%; margin-right: 10%}
.ua25 .spec .r .img{ width: 100%; }
.ua25 .spec .l{ float: left; width:45%; margin-left: 10%; margin-top: 3rem;}
.ua25 .spec .l h1,.ua25 .spec .l li{ text-align: left; color: #444 }
.ua25 .spec .l ul{ font-size: 1.5rem;}
.ua25 .spec .l ul li{ width: 100%; line-height: 3rem; }



.ua25 .view{ background: #F5F7F7; padding: 4rem 0 }
.ua25 .view .l{ width: 50%; }
.ua25 .view .l ul{ width: 10rem; height: 37.5rem}
.ua25 .view .l ul li{ width: 100%; position: relative;}
.ua25 .view .l ul li .name,.ua25 .view .l ul li .desc{ font-size:1.5rem;width: 12rem; }

.ua25 .view .l ul li.view1{ top: 0; position: relative; z-index: 1 }
.ua25 .view .l ul li.view1 .img{ width: 10rem;}
.ua25 .view .l ul li.view1 .img:before{ position: absolute; left: 7rem; top: 2rem; content: ""; width: 9rem; height: 2px; background: #666464; }

.ua25 .view .l ul li.view1 .name{ position: absolute; left: 18rem; top:0rem;}
.ua25 .view .l ul li.view1 .name:before{position: absolute; left:-0.9rem; top:0.5rem; content:""; background: #fff; width: 0.5rem; height: 0.5rem; border-radius: 0.5rem; border: 0.15rem #666464 solid; z-index: 1}
.ua25 .view .l ul li.view1 .name:after{ position: absolute;  left:-2.3rem; top: 1.3rem; content:""; width: 2rem; height: 2px; background: #666464; transform: rotate(-45deg);}


.ua25 .view .l ul li.view2{ top: 2rem; position: relative; z-index: 2}
.ua25 .view .l ul li.view2 .img{ width: 10rem;}
.ua25 .view .l ul li.view2 .img:before{ position: absolute; left: 7rem; top: 2rem; content: ""; width: 9rem; height: 2px; background: #666464; }
.ua25 .view .l ul li.view2 .img:after{ position: absolute; left: 6.5rem; top: 4.5rem; content: ""; width: 9.5rem; height: 2px; background: #666464; }

.ua25 .view .l ul li.view2 .name{ position: absolute; left: 18rem; top:0rem;}
.ua25 .view .l ul li.view2 .name:before{position: absolute; left:-0.9rem; top:0.5rem; content:""; background: #fff; width: 0.5rem; height: 0.5rem; border-radius: 0.5rem; border: 0.15rem #666464 solid; z-index: 1}
.ua25 .view .l ul li.view2 .name:after{ position: absolute;  left:-2.3rem; top: 1.3rem; content:""; width: 2rem; height: 2px; background: #666464; transform: rotate(-45deg);}

.ua25 .view .l ul li.view2 .desc{ position: absolute; left: 18rem; top:2.5rem;}
.ua25 .view .l ul li.view2 .desc:before{position: absolute; left:-0.9rem; top:0.5rem; content:""; background: #fff; width: 0.5rem; height: 0.5rem; border-radius: 0.5rem; border: 0.15rem #666464 solid; z-index: 1}
.ua25 .view .l ul li.view2 .desc:after{ position: absolute;  left:-2.3rem; top: 1.3rem; content:""; width: 2rem; height: 2px; background: #666464; transform: rotate(-45deg);}

.ua25 .view .l ul li.view3{ top:4rem; position: relative; z-index: 3}
.ua25 .view .l ul li.view3 .img{ width: 10rem;}
.ua25 .view .l ul li.view3 .img:before{ position: absolute; left: 7rem; top: 2rem; content: ""; width: 9rem; height: 2px; background: #666464; }

.ua25 .view .l ul li.view3 .name{ position: absolute; left: 18rem; top:0rem;}
.ua25 .view .l ul li.view3 .name:before{position: absolute; left:-0.9rem; top:0.5rem; content:""; background: #fff; width: 0.5rem; height: 0.5rem; border-radius: 0.5rem; border: 0.15rem #666464 solid; z-index: 1}
.ua25 .view .l ul li.view3 .name:after{ position: absolute;  left:-2.3rem; top: 1.3rem; content:""; width: 2rem; height: 2px; background: #666464; transform: rotate(-45deg);}



.ua25 .view .l ul li.view4{ top: 6rem; position: relative; z-index:2}
.ua25 .view .l ul li.view4 .img{ width: 10rem;}
.ua25 .view .l ul li.view4 .img:before{ position: absolute; left: 7rem; top: 3rem; content: ""; width: 9rem; height: 2px; background: #666464; }

.ua25 .view .l ul li.view4 .name{ position: absolute; left: 18rem; top:1rem;}
.ua25 .view .l ul li.view4 .name:before{position: absolute; left:-0.9rem; top:0.5rem; content:""; background: #fff; width: 0.5rem; height: 0.5rem; border-radius: 0.5rem; border: 0.15rem #666464 solid; z-index: 1}
.ua25 .view .l ul li.view4 .name:after{ position: absolute;  left:-2.3rem; top: 1.3rem; content:""; width: 2rem; height: 2px; background: #666464; transform: rotate(-45deg);}


.ua25 .view .l ul li.view5{ top: 8rem; position: relative; z-index: 2}
.ua25 .view .l ul li.view5 .img{ width: 10rem;}
.ua25 .view .l ul li.view5 .img:before{ position: absolute; left:8rem; top: 1rem; content: ""; width: 8rem; height: 2px; background: #666464; }
.ua25 .view .l ul li.view5 .img:after{ position: absolute; left: 8rem; top: 2.5rem; content: ""; width: 8rem; height: 2px; background: #666464; }

.ua25 .view .l ul li.view5 .name{ position: absolute; left: 18rem; top:-1rem;}
.ua25 .view .l ul li.view5 .name:before{position: absolute; left:-0.9rem; top:0.5rem; content:""; background: #fff; width: 0.5rem; height: 0.5rem; border-radius: 0.5rem; border: 0.15rem #666464 solid; z-index: 1}
.ua25 .view .l ul li.view5 .name:after{ position: absolute;  left:-2.3rem; top: 1.3rem; content:""; width: 2rem; height: 2px; background: #666464; transform: rotate(-45deg);}

.ua25 .view .l ul li.view5 .desc{ position: absolute; left: 18rem; top:2.5rem;}
.ua25 .view .l ul li.view5 .desc:before{position: absolute; left:-0.9rem; top:1rem; content:""; background: #fff; width: 0.5rem; height: 0.5rem; border-radius: 0.5rem; border: 0.15rem #666464 solid; z-index: 1}
.ua25 .view .l ul li.view5 .desc:after{ position: absolute;  left:-2.3rem; top:0.7rem; content:""; width: 2rem; height: 2px; background: #666464; transform: rotate(45deg);}


.ua25 .view .l ul:hover li.view1{ top:8.1rem;}
.ua25 .view .l ul:hover li.view2{ top:6.5rem;}
.ua25 .view .l ul:hover li.view4{ top:-1.4rem;}
.ua25 .view .l ul:hover li.view5{ top:-4.5rem;}

.ua25 .view .l ul:hover li .name{ display: none;}
.ua25 .view .l ul:hover li .desc{  display: none;}
.ua25 .view .l ul:hover li .img:before{  display: none;}
.ua25 .view .l ul:hover li .img:after{ display: none;}

.ua25 .view .r{ position: absolute; width: 50%;text-align: center; right: 0; top: 50%;-webkit-transform:translateY(-50%);
    -moz-transform:translateY(-50%);
    -ms-transform:translateY(-50%);
    transform:translateY(-50%); }



.ua25 .optional{ background: #272727; padding: 6rem 0; color: #fff }
.ua25 .optional ul{ width: 100%; margin-top: 5rem;}
.ua25 .optional ul li{ width: 33.3333%; text-align: center; }
.ua25 .optional ul li .img{ width: 40%; margin-left: 30%; margin-bottom: 2rem;}
.ua25 .optional ul li .name{ width: 40%; margin-left: 30%; font-size: 2rem; line-height: 3rem;}
.ua25 .optional ul li .desc{ width: 40%; margin-left: 30%; font-size: 1rem; line-height: 1.5rem; }
.ua25 .optional ul li:nth-child(1) .name{ line-height: 4.5rem; }



.ua25 .how{ padding: 5rem 0; background: #F5F7F7}
.ua25 .how ul{ margin-top: 3rem; }
.ua25 .how li{ text-align: center; padding: 0 1%;}
.ua25 .how li .name{ font-size: 1.2rem; line-height: 1.8rem; height:5.6rem; padding: 1rem 5% }


.ua25 .box{ padding: 5rem 0 }
.ua25 .box .l{ width: 50%; float: left;}
.ua25 .box .r{ width: 40%; float: right; text-align: left; margin-top: 2rem;}
.ua25 .box .r h1{ text-align: left; }
.ua25 .box .r li{  width: 100%; font-size: 1.5rem; line-height: 2.5rem;}







@media screen and (max-width: 1440px){

    .ua25 .color ul{ margin-bottom: 8rem }
    .ua25 .color h1{ padding: 6rem 0 }

    .ua25 .abundant #videopd .left{ padding-right: 40rem; }
    .ua25 .abundant #videopd .left .l{ margin-top: 10rem; }
    .ua25 .abundant #videopd #right{ width: 40rem; }

    .ua25 .juice .juicebg{     background: url(juicebg.png) -14rem bottom no-repeat }

    .ua25 .drip .bg{ width: 28rem; }
    .ua25 .drip .r{ width: 30%; padding-top: 6rem }
    .ua25 .drip .l{ padding-bottom: 6rem }

}


@media screen and (max-width: 1024px){

    .ua25 h1{ font-size: 3rem; line-height: 4rem; }
    .ua25 h2{ font-size: 1.5rem; line-height: 2rem }

    .ua25 .color ul{ margin-bottom: 4rem }
    .ua25 .color h1{ padding: 4rem 0 }
    .ua25 .color ul li{ width: 15%; margin: 0 2.5% }

    .ua25 .abundant #videopd .left{ padding-right: 30rem; }
    .ua25 .abundant #videopd .left .l{ margin-top: 7rem; width: 30rem;}
    .ua25 .abundant #videopd #right{ width: 30rem }

    .ua25 .system{ padding: 4rem 0 }

    .ua25 .system .r{ width: 12rem; margin-left: 10%; }
    .ua25 .juice .juicebg{ padding: 4rem 0;background: url(juicebg.png) -14rem bottom no-repeat; background-size: 80%; }
    .ua25 .juice .r{ width: 12rem; margin-left: 10%; }

    .ua25 .fill{ padding: 4rem 0 2rem 0 }
    .ua25 .fill .l{ width: 50%; margin-left: 5%; }

    .ua25 .drip .bg{ width: 20rem }
    .ua25 .drip .r{ width: 15rem; }
    .ua25 .drip .l{ padding-left: 35%; padding-right: 5%;}

    .ua25 .leak{ padding: 4rem 0 }
    .ua25 .spec{ padding: 4rem 0 }
    .ua25 .optional{ padding: 4rem 0 }
    .ua25 .optional ul{ margin-top: 4rem }
    .ua25 .how{ padding: 4rem 0 }
    .ua25 .how li .name{ font-size: 1rem; line-height: 1.5rem; height: 4.5rem }
    .ua25 .box{ padding: 4rem 0 }

}



@media screen and (max-width: 768px){

    .ua25 h1{ font-size: 2rem; line-height: 3rem; }
    .ua25 h2{ font-size: 1.2rem; line-height: 1.5rem; padding: 0 5%}

    .ua25 .color{ background: #7090AD url(colorbg.jpg) bottom center repeat-x; background-size: 60%;}
    .ua25 .color h1{ padding: 2rem 0 }
    .ua25 .color ul{ margin-bottom: 2rem; }
    .ua25 .color ul li .name{ font-size: 1rem; line-height: 2rem; }

    .ua25 .abundant #videopd #right{ width: 50%; }
    .ua25 .abundant #videopd .left{ padding-right: 50%; }
    .ua25 .abundant #videopd .left .l{ width: 90%; margin-top:5rem }

    .ua25 .system{ padding: 2rem 0 }
    .ua25 .system .r{ width:100%; margin-left: 0}
    .ua25 .system .r .img{ width: 25%; margin-left: 37.5% }
    .ua25 .system .l{ width: 100%; margin-right: 0; float: left; }
    .ua25 .system .l h2{ font-size: 1.2rem; line-height: 1.5rem }
    .ua25 .system .l h1,.ua25 .system .l h2{ text-align: center; }

    .ua25 .juice .l{ width: 100%; margin-right: 0; float: left; }
    .ua25 .juice .l h1,.ua25 .juice .l h2{ text-align: center; }
    .ua25 .juice .l h2{ font-size: 1.2rem; line-height: 1.5rem; }
    .ua25 .juice .r{ width: 100%; margin-left: 0 ; margin-top: 1rem;}
    .ua25 .juice .r .img{ width: 20%; margin-left: 40% }
    .ua25 .juice .juicebg{ padding: 2rem 0;background: url(juicebg.png) left bottom no-repeat; background-size: 80%;}

    .ua25 .fill{ padding: 2rem 0 }
    .ua25 .fill .l h2{ font-size: 1.2rem; line-height: 1.5rem }
    .ua25 .fill .l{ width: 100%; margin-left: 0 }
    .ua25 .fill .l h1,.ua25 .fill .l h2{ text-align: center; }
    .ua25 .fill .r{ width: 100%; margin-top:1rem }
    .ua25 .fill .r .img{ width: 35%; margin-left: 32.5%; }

    .ua25 .drip .bg{ display: none; }
    .ua25 .drip .r{ width: 25%; margin-left: 37.5%; padding-top: 2rem }
    .ua25 .drip .l{ padding:2rem 0; float: left; }
    .ua25 .drip .l h1,.ua25 .drip .l h2{ text-align: center; }

    .ua25 .leak .l h2{ font-size: 1.2rem; line-height: 1.5rem; }
    .ua25 .leak{ padding: 2rem 0 }
    .ua25 .leak .l{ width: 100% ; float: left; }
    .ua25 .leak .l h1,.ua25 .leak .l h2{ text-align: center; }
    .ua25 .leak .r{ width: 100% }
    .ua25 .leak .r .img{ width: 35%; margin-left: 32.5%; margin-top: 1rem }

    .ua25 .spec{ padding: 2rem 0 }
    .ua25 .spec .l{ margin-top: 0; width: 100%; margin-left: 0;}
    .ua25 .spec .l h1{ text-align: center; }
    .ua25 .spec .l ul{ font-size: 1.2rem ; width: 60%; margin-left: 40%; }
    .ua25 .spec .l ul li{ line-height: 1.8rem }
    .ua25 .spec .r{ width: 100%; margin-right: 0 ; margin-top: 1rem}
    .ua25 .spec .r .img{ width: 35%; margin-left: 37%; }

    .ua25 .view{ padding: 2rem 0; }
    .ua25 .view .l ul li .name, .ua25 .view .l ul li .desc{ font-size: 1.2rem; }
    .ua25 .view .r{ width: 100%; top: -3rem; }
    .ua25 .view .l{ margin-top: 4rem; margin-left: 40%; }


    .ua25 .optional{ padding: 2rem 0; }
    .ua25 .optional ul{ margin-top: 2rem }

    .ua25 .how{ padding: 2rem 0; }
    .ua25 .how ul{ margin-top: 2rem; }
    .ua25 .how li .name{ padding: 0.5rem 5%; height: 5.5rem }

    .ua25 .box{ padding: 2rem 0 }
    .ua25 .box .r{ margin-top: 1rem }
    .ua25 .box .r li{ font-size: 1.2rem; line-height: 1.8rem }

}




@media screen and (max-width: 640px){

    .ua25 h1{ font-size: 1rem; line-height: 1.5rem; padding: 0 5%}
    .ua25 h2{ font-size: 0.8rem; line-height: 1rem; padding: 0 5%}

    .ua25 .color h1{ padding: 1rem 0 }
    .ua25 .color ul{ margin-bottom: 1rem; }
    .ua25 .color ul li .name{ font-size: 0.8rem; line-height: 1.2rem; }

    .ua25 .abundant #videopd .left{ padding-right: 0; background:rgba(255,255,255,.5); padding: 1rem 0;}
    .ua25 .abundant #videopd .left .l{ width: 100%; margin-top: 0; }
    .ua25 .abundant #videopd .left .l h1,.ua25 .abundant #videopd .left .l h2{ text-align: center; color: #111 }
    .ua25 .abundant #videopd #right{ width: 100%; float: left; }

    .ua25 .system{ padding: 1rem 0 }
    .ua25 .system .r .img,.ua25 .juice .r .img{ width: 35%; margin-left: 27.5% }

    .ua25 .juice .juicebg,.ua25 .fill{ padding: 1rem 0 }
    .ua25 .juice .l h2,.ua25 .system .l h2,.ua25 .leak .l h2,.ua25 .fill .l h2{ font-size: 0.8rem; line-height: 1rem; }

    .ua25 .drip .r{ padding-top: 1rem; }
    .ua25 .drip .l{ padding: 1rem 0; }

    .ua25 .spec,.ua25 .leak{ padding: 1rem 0 }
    .ua25 .spec .l ul{ font-size: 0.8rem; }
    .ua25 .spec .l ul li{ line-height: 1rem; }

    .ua25 .view .l{ margin-left: 10%; }
    .ua25 .view .l ul li .name, .ua25 .view .l ul li .desc{ font-size: 0.8rem }

    .ua25 .view .l ul li.view1 .img:before{ width: 4rem; }
    .ua25 .view .l ul li.view1 .name{ left: 13rem }

    .ua25 .view .l ul li.view2 .img:before{ width: 4rem; }
    .ua25 .view .l ul li.view2 .img:after{ width: 3.5rem; }
    .ua25 .view .l ul li.view2 .name{ left: 13rem }
    .ua25 .view .l ul li.view2 .desc{ left: 12rem }

    .ua25 .view .l ul li.view3 .img:before{ width: 4rem; }
    .ua25 .view .l ul li.view3 .name{ left: 13rem }

    .ua25 .view .l ul li.view4 .img:before{ width: 4rem; }
    .ua25 .view .l ul li.view4 .name{ left: 13rem }

    .ua25 .view .l ul li.view5 .img:before{ width: 3rem; }
    .ua25 .view .l ul li.view5 .img:after{ width: 3rem; }

    .ua25 .view .l ul li.view5 .name{ left: 13rem }
    .ua25 .view .l ul li.view5 .desc{ left: 13rem }

    .ua25 .optional ul li .img{ width: 90%; margin-left: 5%; margin-bottom: 0.5rem }
    .ua25 .optional ul li .name{ width: 90%; margin-left: 5%; font-size: 1rem; line-height: 1.5rem; }
    .ua25 .optional ul li .desc{ width: 90%; margin-left: 5%; font-size: 0.8rem; line-height: 1rem; }
    .ua25 .optional ul li:nth-child(1) .name{ line-height: 2.5rem; }

    .ua25 .fill .r .img,.ua25 .spec .r .img,.ua25 .leak .r .img,.ua25 .drip .r{ width: 50%; margin-left: 25%; }


    .ua25 .box .l{ width: 100%; }
    .ua25 .box .r{ width: 96%;  margin-left: 2%}
    .ua25 .box .r li{ font-size: 0.8rem; line-height: 1rem }

    .ua25 .how{ padding: 1rem 0; }
    .ua25 .how li .name{ font-size: 0.8rem; line-height: 1rem; height: 4rem }

}