@charset "UTF-8";

/* ==================== tags ==================== */

* {

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

}



html,

body {

    width: 100%;

    height: 100%;

    background-color: transparent;

}



h1,

h2,

h3,

h4,

h5,

h6 {

    font-weight: normal;

    line-height: 1.6;

}



h1 {

    font-size: 48px;

}



h2 {

    font-size: 40px;

}



h3 {

    font-size: 24px;

}

h4 {

    font-size: 20px;

}

p {

    font-size: 16px;

    line-height: 1.75;

}

a,
a:link,
a:visited,
a:hover {

    text-decoration: none !important;

    color: inherit;

}



.fl {

    float: left;

}

.fr {

    float: right;

}

.pc {

    display: block;

}

.mobile {

    display: none;

}

.container {

    width: 100%;

    max-width: 1220px;

    margin: 0 auto;

    /* overflow: hidden; */
    position: relative;
}

.txt1 {

    color: #333;

    font-size: 24px;

    line-height: 35px;

    text-align: center;

}

/* banner */

#banner {

    position: relative;

    background: url("/software/Afterthecloud/images/bannerbg.jpg") no-repeat center center;

    height: 500px;

    background-size: cover;

    overflow: hidden;

}

#article_content img {
    z-index: 15;
}

#banner .fl {

    /* margin-left: 80px; */
    position: relative;
    z-index: 10;
    margin-top: 90px;

}

#banner h1 {

    color: #fff;

    font-size: 2.5em;

}

#banner h1 span {

    color: #01d8ff;

}

.ptitle {

    display: block;

    width: 407px;

    height: 29px;

    line-height: 29px;

    color: #362c60;

    font-size: 20px;

    background: #f6f451;

    border-radius: 14.5px;

    text-align: center;

    margin-bottom: 38px;

}

#banner .txt1 {

    color: #fff;

    font-size: 1.8em;

    padding-top: 20px;

    text-align: left;

    line-height: 1.6;

}





.btn {
    height: 40px;
    background: linear-gradient(-90deg, #3059F9 0%, #59A3F6 100%);
    border-radius: 6px;
    font-size: 16px;
    color: #fff;
    text-align: center;
    line-height: 40px;
    margin-top: 0.35rem;
    position: relative;
    width: 302px;
    cursor: pointer;

}

.btn:hover {

    background: linear-gradient(to right, #ffb252 0%, #f18541 100%);
}

.btn p {

    display: block;

    position: relative;

    color: #fff;

    font-size: 18px;

    /* line-height: 45px; */

    outline: none;

}

.b_group a:last-child .btn {

    line-height: 45px;

    margin-left: 42px;

}

.btn:hover {

    border: none;

    background: #0090ff;

}



.img3 {

    position: absolute;

    left: 50%;

    top: 50%;

    margin: -15px 0 0 -9px;

    z-index: 100;

}




.act-header {
    position: absolute;
    right: 0;
    display: flex;
    justify-content: flex-end;
}

.act-form .act-input-form .act-btn {
    color: #fff;
}

.act-wrap .act-btn {}

.act-wrap .btn-gradient-blue {}

.act-wrap .btn-gradient-blue:hover {}

.act-form h3 {
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.act-form .act-input-form .act-btn {
    border-radius: 6px;
    /* padding: 0.6em; */
    letter-spacing: 2px;
    margin-top: 0.5em;
    padding-left: 2em;
    padding-right: 2em;
    width: 100%;
    color: #fff;
    font-size: 1.2em;
    background: linear-gradient(to right, #58a2f6 0%, #305af9 100%);
}

.act-form .act-input-form .act-btn:hover {
    color: #fff;
    background: linear-gradient(to right, #ffb252 0%, #f18541 100%);
}

.act-header .act-form {
    right: 0;
    top: 5em;
}

@media screen and (max-width:1440px) {
    .act-header .act-form {
        /* right: 8%; */
    }
}

@media screen and (max-width:768px) {
    .act-form h3 {
        color: #fff;
    }

    #banner h1 {


        font-size: 1em;

    }

    .act-header .act-form {
        right: 0;
    }
}

#banner .pba {

    position: absolute;
    width: 166px;
    height: 166px;
    left: 57%;
    margin-top: 90px;

}

.dot {

    position: relative;

    width: 166px;

    height: 166px;

    background: rgba(33, 253, 253, 0.28);

    border-radius: 50%;

    animation-name: 'ripple';
    /*动画属性名，也就是我们前面keyframes定义的动画名*/

    animation-duration: 3s;
    /*动画持续时间*/

    animation-timing-function: ease;
    /*动画频率，和transition-timing-function是一样的*/

    animation-delay: 0s;
    /*动画延迟时间*/

    animation-iteration-count: infinite;
    /*定义循环资料，infinite为无限次*/

    animation-direction: alternate;
    /*定义动画方式*/

    -webkit-animation-name: 'ripple';
    /*动画属性名，也就是我们前面keyframes定义的动画名*/

    -webkit-animation-duration: 3s;
    /*动画持续时间*/

    -webkit-animation-timing-function: ease;
    /*动画频率，和transition-timing-function是一样的*/

    -webkit-animation-delay: 0s;
    /*动画延迟时间*/

    -webkit-animation-iteration-count: infinite;
    /*定义循环资料，infinite为无限次*/

    -webkit-animation-direction: alternate;
    /*定义动画方式*/

}

.dot1 {

    position: absolute;

    top: 10px;

    left: 10px;

    margin: 0 auto;

    width: 146px;

    height: 146px;

    background: rgba(31, 253, 253, 0.51);

    border-radius: 50%;

    animation-name: 'ripple';
    /*动画属性名，也就是我们前面keyframes定义的动画名*/

    animation-duration: 3s;
    /*动画持续时间*/

    animation-timing-function: ease;
    /*动画频率，和transition-timing-function是一样的*/

    animation-delay: 1s;
    /*动画延迟时间*/

    animation-iteration-count: infinite;
    /*定义循环资料，infinite为无限次*/

    animation-direction: alternate;
    /*定义动画方式*/

    -webkit-animation-name: 'ripple';
    /*动画属性名，也就是我们前面keyframes定义的动画名*/

    -webkit-animation-duration: 3s;
    /*动画持续时间*/

    -webkit-animation-timing-function: ease;
    /*动画频率，和transition-timing-function是一样的*/

    -webkit-animation-delay: 1s;
    /*动画延迟时间*/

    -webkit-animation-iteration-count: infinite;
    /*定义循环资料，infinite为无限次*/

    -webkit-animation-direction: alternate;
    /*定义动画方式*/

}

.dot2 {

    position: absolute;

    top: 20px;

    left: 20px;

    margin: 0 auto;

    width: 126px;

    height: 126px;

    background: rgba(23, 255, 255, 1);

    border-radius: 50%;

    z-index: 12;



}

.dot3 {

    position: absolute;

    top: 30px;

    left: 30px;

    margin: 0 auto;

    width: 106px;

    height: 106px;

    background: rgba(23, 255, 255, 1);

    border: 2px solid #021b3b;

    border-radius: 50%;

    z-index: 13;

}



@keyframes ripple {

    0% {

        transform: scale(0);

        opacity: 1;

    }

    100% {



        transform: scale(1);

    }

}

.t_1 {

    text-align: center;

    color: #17ffff;

}

.e8 {

    margin: 0 auto;

    overflow: hidden;

    text-align: center;

}

.E8 {

    margin-left: -665px;

    margin-top: 250px;

}

.E9 {

    margin-top: 260px;

    margin-left: 15px;

}

#sect1 {

    margin: 0 auto;

    overflow: hidden;

    position: relative;

    text-align: center;

}

#sect1 h2,
#sect2 h2,
#sect3 h2 {

    color: #021d3f;

    padding: 80px 0 25px;

}

#sect1 .txt1 {

    color: #021d3f;

    padding-bottom: 40px;

}

.s_img1,
.s_img2 {

    display: block;

    margin-left: 80px;

    margin-bottom: 50px;

}

.s_img2 {

    margin-top: 50px;

}

#sect1 .b_group {

    margin-top: 20px;

    margin-bottom: 80px;

}

#sect1 .btn {
    border-radius: 6px;
    background: linear-gradient(-90deg, #3059F9 0%, #59A3F6 100%);

}

#sect1 .btn:hover {


    background: linear-gradient(to right, #ffb252 0%, #f18541 100%);

    /* border: 1px solid #0090ff; */

}

#sect1 .btn:hover p {

    color: 0fff;

}

#sect2 {

    position: relative;

    background: url("/software/Afterthecloud/images/sect2bg.png") no-repeat center center;

    height: 1330px;

    background-size: cover;

    overflow: hidden;

    text-align: center;

}

#sect2 h2,
#sect2 .txt1 {

    color: #fff;

}

#sect2 h2 br {

    display: none;

}

#sect2 .txt1 {

    padding-bottom: 40px;

}

#sect2 .btn,
#sect4 .btn {
    border: none;
    border-radius: 6px;
    background: linear-gradient(-90deg, #3059F9 0%, #59A3F6 100%);
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    margin-top: 65px;
}

#sect2 .btn p,
#sect4 .btn p {

    color: #fff;

}

#sect2 .btn:hover,
#sect4 .btn:hover {
    background: linear-gradient(to right, #ffb252 0%, #f18541 100%);
}

#sect3 {

    position: relative;

    background: url("/software/Afterthecloud/images/sect3bg.png") no-repeat center center;

    height: 2786px;

    background-size: cover;

    overflow: hidden;

    text-align: center;

}

#sect3 h2 {

    margin-top: 60px;

}

#sect3 .box {

    margin: 0 auto;

    margin-top: 130px;

    overflow: hidden;

}

#sect3 .box1 {

    float: left;

}

#sect3 .box h3 {

    font-size: 36px;

    color: #0088c4;

    text-align: left;

    padding-left: 120px;

    padding-bottom: 10px;

}

#sect3 .box .txt2 {

    display: block;

    width: 400px;

    text-align: left;

    margin-left: 120px;

    padding-bottom: 25px;

    color: #000;

    font-size: 18px;

}

#sect3 .box1 h3:before {

    content: "";

    position: absolute;

    width: 0;

    height: 0;

    border-width: 38px;

    border-style: solid;

    border-color: transparent transparent transparent #0088c4;

    margin-left: -120px;

    margin-top: -8px;

}

#sect3 .box1 img {

    margin-left: 120px;

}

#sect3 .box2 {

    float: right;

}

#sect3 .box2 h3 {

    text-align: right;

    padding-right: 120px;

}

/*#sect3 div:last-child .txt2{*/

/*    margin-left:323px;*/

/*}*/

#sect3 .box2 .txt2 {

    margin-left: 460px;

}

#sect3 .box2 .txt2 {

    margin-left: 323px;

}



#sect3 .box2 h3:after {

    content: "";

    position: absolute;

    width: 0;

    height: 0;

    border-width: 38px;

    border-style: solid;

    border-color: transparent #0088c4 transparent transparent;

    margin-left: 40px;

    margin-top: -8px;

}

#sect3 .box2 img {

    margin-right: 120px;

}



#sect4 {

    position: relative;

    background: url("/software/Afterthecloud/images/sect4bg.png") no-repeat center center;

    height: 1657px;

    background-size: cover;

    overflow: hidden;

    text-align: center;

}

#sect4 div img:nth-of-type(1) {

    margin-top: 60px;

}

#sect4 div img:nth-of-type(2) {

    margin-top: 30px;

    margin-bottom: 110px;

}

#sect4 div img:nth-of-type(3) {

    margin-bottom: 50px;

}

#sect4 .txt1 {

    padding-top: 10px;

}

@media (max-width:768px) {

    .pc {

        display: none;

    }

    .mobile {

        display: block;

    }

    h1 {

        font-size: 36px;

    }



    h2 {

        font-size: 28px;

    }



    h3 {

        font-size: 22px;

    }

    h4 {

        font-size: 18px;

    }

    p {

        font-size: 16px;

        line-height: 1.75;

    }

    .txt1 {

        padding: 0 5%;

        font-size: 20px;

        text-align: justify;

    }

    .act-header {
        margin: 30px 0;
        position: relative;
    }

    #banner {

        position: relative;

        background: url("/software/Afterthecloud/images/bannerbg_h.jpg") no-repeat center center;

        /* height: 595px; */
        height: auto;

        background-size: cover;

        overflow: hidden;

    }

    #banner .fl {

        float: none;

        font-size: 49px;

        padding-top: 70px;

        margin: 0 auto;

    }

    #banner h1 {

        margin-left: 6%;
        font-size: 1em;

    }



    #banner .txt1 {

        color: #fff;

        font-size: 28px;

        padding-top: 5px;

        text-align: left;

        padding-left: 6%;

    }

    .b_group {

        text-align: center;

    }

    .btn {

        margin: 0 auto;

        margin-top: 30px;

    }

    .b_group a:last-child .btn {

        line-height: 45px;

        margin-left: 0;

    }

    #banner .fr {

        float: none;

    }

    #banner .pba {

        position: relative;

        width: 165px;

        height: 165px;

        margin: 0 auto;
        left: auto;
    }

    .e8 {

        margin: 0 auto;

        overflow: hidden;

        text-align: center;

    }

    .E8 {

        margin: 0 auto;

        margin-top: 65%;

    }

    .E9 {

        margin: 0 auto;

        margin-top: 8%;

    }

    #sect1 h2 {

        padding: 8% 6% 0;

    }

    #sect1 .txt1 {

        padding: 0 6%;

        padding-bottom: 6%;

        text-align: center;

    }

    #sect1 img,
    #sect2 img {

        margin: 0 auto;

    }

    #sect2 {

        background: url("/software/Afterthecloud/images/sect2bg_h.png") no-repeat center center;

        height: 952px;

        background-size: cover;

    }

    #sect2 h2 br {

        display: block;

    }

    #sect3 {

        background: #ecf9ff;

        height: auto;

    }

    #sect3 h2 {

        padding: 8% 6% 0;

    }

    #sect3 img,
    #sect4 img {

        margin: 0 auto;

    }

    #sect4 {

        background: none;

        height: auto;

    }

    #sect4 .b_group {

        margin-bottom: 8%;

    }

}