@charset "utf-8";
/* CSS Document */
html, body {background: #f3f3f3!important;}

#cloud{ position: relative;z-index: 5; background: #f3f3f3; margin: 0 auto;}

#cloud .describe{text-align: center; margin: 0 auto;background: url("../img/cloud_describe_bg.jpg") no-repeat; background-position: 50% 50%; background-size:cover;}
#cloud .describe .container{width: 50%;  margin: 0 auto;}
#cloud .describe .container>.title{text-align: center; color: rgba(146,191,46,1); top: -80px; opacity: 0; position: relative; transition: all .35s; }
#cloud .describe .container>.title>span{display: inline-block; line-height: 150px; font-size: 6rem; font-weight: bold; vertical-align: top; }
#cloud .describe .container>.title>i{ display: inline-block; height: 150px; font-size: 15rem; margin-right: 20px;vertical-align: top;background-image:-webkit-linear-gradient(right bottom,rgba(146,191,46,1),rgba(73,132,255,1)); -webkit-background-clip:text; -webkit-text-fill-color:transparent;}
#cloud .describe .container>.title.active{opacity: 1;top: 0;}
#cloud .describe .container>.text{ position: relative;top: 50px; opacity: 0; margin: 0 auto; padding: 40px 0; font-size: 2rem;line-height: 3.8rem; text-align: center; color: rgba(255,255,255,1); transition: all .35s;}
#cloud .describe .container>.text.active{top: 0;opacity: 1;}
#cloud .describe .container>.pageurl{ position: relative; opacity: 0;top: 40px; text-align: center;padding: 30px 0; transition: all 1s;}
#cloud .describe .container>.pageurl>a{display: inline-block; padding: 12px 60px; background: rgba(38,78,161,1); border: 3px solid transparent; border-radius: 50px; margin: 0 20px; font-size: 1.8rem; color: #fff;transition: all .35s;}
#cloud .describe .container>.pageurl>a:hover { background: none; border:3px solid rgba(146,191,46,1); color: rgba(146,191,46,1); transform: translateY(-10px);}
#cloud .describe .container>.pageurl.active{top: 0;opacity: 1;}

#cloud .topography{ padding-top: 50px; background: url("../img/cloud_topography_bg.jpg") no-repeat; background-position: 50% 50%; background-size: cover; }
#cloud .topography .container{margin: 0 auto; text-align: center;padding: 50px 0;}
#cloud .topography .container>.title{ position: relative; left: -60px; opacity: 0; width: 20%; text-align:left; box-sizing: border-box; padding: 20px; transition: all .35s;}
#cloud .topography .container>.title>h3{ position: relative; display: inline-block; font-size: 3.6rem; width:70px; text-align: center; line-height: 50px; color: #fff; padding: 15px 0; box-sizing: border-box; background: rgba(38,87,161,1);}
#cloud .topography .container>.title>h3:after{ position: absolute;z-index: 3; right: -20px;top: 50%; margin-top: -20px; width: 0;height: 0;border-top: 16px solid transparent;border-left: 20px solid rgba(38,87,161,1);border-bottom: 16px solid transparent; content: '';}
#cloud .topography .container>.title.active{left: 0;opacity: 1;}
#cloud .topography .container>.box{ position: relative; right: -80px;opacity: 0; width: 80%; transition: all .5s;}
#cloud .topography .container>.box img{max-width: 100%;height: auto;}
#cloud .topography .container>.box.active{right: 0;opacity: 1;}

#cloud .function{margin: 0 auto; background: url("../img/cloud_function_bg.jpg") no-repeat; background-position: 50% 50%; background-size: cover; }
#cloud .function .container>.title{color: #fff; font-size: 5.6rem; font-weight: bold; opacity: 0; top: 40px; text-align: center; position: relative; transition: all .5s;}
#cloud .function .container>.title.active{top: 0; opacity: 1;}
#cloud .function .container>.text{color: #fff; font-size: 2rem; font-weight: 300; width: 65%; line-height: 2.8rem; margin: 40px auto 0 auto; text-align: center; opacity: 0; top: 50px; position: relative; transition: all .6s .16s;}
#cloud .function .container>.text.active{top: 0; opacity: 1;}
#cloud .function .container>.item{ width: 80%; margin: 0 auto; margin-top: 106px; text-align: center;  top: 60px; opacity: 0; transition: all .8s .3s; position: relative;}
#cloud .function .container>.item.active{top: 0; opacity: 1;}
#cloud .function .container>.item>ul>li{ display: inline-block; vertical-align: top; width: 12.3%; height: 180px; margin-bottom: 25px; perspective: 250px; position: relative;}
#cloud .function .container>.item>ul>li .box{width: 140px; height: 100%; background: linear-gradient(#fff 20%, #ddd); border-radius: 60px; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; transition: all .45s; position: absolute; left: 0; top: 0;}
#cloud .function .container>.item>ul>li:nth-child(even) .box{background: linear-gradient(#fff 20%, #dbff8b);}
#cloud .function .container>.item>ul>li:last-child{margin-right: 0;}
#cloud .function .container>.item>ul>li:hover .box{transform: rotateY(-180deg);}
#cloud .function .container>.item>ul>li .ico i{font-size: 6rem; color: #333; display: block;}
#cloud .function .container>.item>ul>li .tit{font-weight: 300; font-size: 1.6rem; margin-top: 16px; color: #111; height: 40px; line-height: 1.3; display: flex; flex-direction: column; justify-content: center; align-items: center;}
#cloud .function .container>.item>ul>li .box-back, #cloud .function .container>.item>ul>li:nth-child(even) .box-back{width: 140px; height: 100%; background: linear-gradient(rgba(201,255,82,1) 5%, rgba(38,87,161,1)); border-radius: 60px;  display: flex; flex-direction: column; justify-content: center; align-items: center; transition: all .45s; position: absolute; left: 0; top: 0; transform: rotateY(180deg); backface-visibility:hidden;}
#cloud .function .container>.item>ul>li .box-back .ico{margin-top: 16px;}
#cloud .function .container>.item>ul>li .box-back .ico i{color: #fff;}
#cloud .function .container>.item>ul>li .box-back .tit{color: #fff; margin-top: 0;}
#cloud .function .container>.item>ul>li:hover .box-back{transform: rotateY(0);}




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

    #cloud .describe .container{width: 60%;  margin: 0 auto;}
    #cloud .function .container>.item>ul>li{width: 16.66%;}

}

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

    #cloud .describe .container{width: 70%;  margin: 0 auto;}
}

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

    #cloud .topography .container>.title>h3{ font-size: 3.4rem; width:65px; line-height: 45px;}

}


@media only screen and (max-width: 1280px){
    #cloud .function .container>.item{ width: 65%;}
    #cloud .function .container>.item>ul>li{width: 24%;}

}

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

    #cloud .describe .container>.title>span{ line-height: 120px; font-size: 4rem; }
    #cloud .describe .container>.title>i{ height: 120px; font-size: 12rem;}
    #cloud .describe .container>.text{ font-size: 1.6rem;line-height: 2.4rem; }
    #cloud .describe .container>.pageurl>a{font-size: 1.6rem; }

    #cloud .topography .container>.title>h3{ font-size: 3rem; width:50px; line-height: 36px;}

    #cloud .function .container>.title{font-size: 3.6rem;}
    #cloud .function .container>.text{font-size: 1.6rem;}

}

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

    #cloud .describe .container{width: 76%;}

    #cloud .topography .container>.title{ left: auto!important; top: 50px; float: none; width: 100%; text-align:center; }
    #cloud .topography .container>.title>h3{ width:auto; line-height: 50px; color: rgba(38,87,161,1); background: none;}
    #cloud .topography .container>.title>h3:after{ display: none;}
    #cloud .topography .container>.title.active{top: 0;}
    #cloud .topography .container>.box{ right: auto!important; top: -80px; float: none; width: 100%; margin-top: 50px; }
    #cloud .topography .container>.box.active{top: 0;opacity: 1;}


    #cloud .function .container>.item{ width: 75%;}

}

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

    #cloud .function .container>.item>ul>li .box{width: 86%; border-radius: 50px;}
    #cloud .function .container>.item>ul>li .box-back, #cloud .function .container>.item>ul>li:nth-child(even) .box-back{width: 86%; border-radius: 50px;}


}


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

    #cloud .function .container>.item{ width: 86%;}

    #cloud .function .container>.item>ul>li .box{border-radius: 40px;}
    #cloud .function .container>.item>ul>li .box-back, #cloud .function .container>.item>ul>li:nth-child(even) .box-back{border-radius: 40px;}



}

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

    #cloud .describe .container>.title>span{ line-height: 100px; font-size: 3rem; }
    #cloud .describe .container>.title>i{ height: 100px; font-size: 8rem;}
    #cloud .describe .container>.text{ font-size: 1.4rem;line-height: 1.8rem; }
    #cloud .describe .container>.pageurl>a{font-size: 1.4rem; }

    #cloud .topography .container>.title>h3{ font-size: 2.4rem;}

    #cloud .function .container>.title{font-size: 2.4rem;}
    #cloud .function .container>.text{font-size: 1.4rem;}

    #cloud .function .container>.item{ margin-top: 50px;}
    #cloud .function .container>.item>ul>li{width: 32%; height: 160px;}
    #cloud .function .container>.item>ul>li .ico i{font-size: 5rem;}
    #cloud .function .container>.item>ul>li .tit{font-size: 1.4rem; height: 30px; margin-top: 10px;}



}

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

    #cloud .function .container>.text{width: 80%; margin-top: 10px;}
    #cloud .function .container>.item>ul>li{ height: 100px;}
    #cloud .function .container>.item>ul>li .ico i{font-size: 4rem;}
    #cloud .function .container>.item>ul>li .tit{font-size: 1.2rem; height: 20px; margin-top: 5px;}

    #cloud .function .container>.item>ul>li .box{border-radius: 30px;}
    #cloud .function .container>.item>ul>li .box-back, #cloud .function .container>.item>ul>li:nth-child(even) .box-back{border-radius: 30px;}

}