.content {
    width: 100%;
}

/*banner*/
.banner {
    width: 100%;
    height: 450px;
    background: url("../rongyida_files/banner1.png") no-repeat;
    background-size: cover;
    background-position: center;
}

.banner-cont {
    width: 1200px;
    margin: 0 auto;
    text-align: left;
    padding-left: 570px;
    padding-top: 50px;
    background: url("../rongyida_files/bannericon.png") no-repeat;
    background-position: 380px 70px;
    -webkit-animation: bannerani 1s ease;
    -o-animation: bannerani 1s ease;
    animation: bannerani 1s ease;
}

@keyframes bannerani {
    0% {
        padding-top: 100px;
        background-position: 300px 70px;
    }
    33% {

        background-position: 380px 70px;
    }
    60% {
        background-position: 370px 70px;
    }
    100% {
        padding-top: 50px;
        background-position: 380px 70px;
    }

}

@-webkit-keyframes bannerani {
    0% {
        padding-top: 100px;
        background-position: 300px 70px;
    }
    33% {

        background-position: 380px 70px;
    }
    60% {
        background-position: 370px 70px;
    }
    100% {
        padding-top: 50px;
        background-position: 380px 70px;
    }

}

.banner-cont h3 {
    position: relative;
    font-size: 43px;
    color: #fefefe;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.banner-cont h3:after {
    content: "";
    position: absolute;
    width: 100px;
    height: 4px;
    background: #fafbfc;
    bottom: 0px;
    left: 0;
}

.banner-cont p {
    font-size: 19px;
    color: #fefefe;
    line-height: 34px;
}

.banner-cont a {
    display: block;
    width: 184px;
    height: 56px;
    background: #e72d44;
    text-align: center;
    line-height: 53px;
    border-bottom: 3px solid #c1041b;
    border-radius: 4px;
    font-size: 24px;
    color: #ffffff;
    margin-top: 20px;
}

.navtion {
    width: 100%;
    background: #3e3e40;
}

.navtion ul {
    width: 1200px;
    margin: 0 auto;
    display: flex;

}

.navtion ul li {
    font-size: 16px;
    color: #ffffff;
    margin-right: 30px;
    height: 60px;
    line-height: 60px;
}

/*banner*/
/*company 企业官网建设*/
.company-cont-fa,.mark-cont-fa,.brand-cont-fa,.shop-cont-fa,.response-cont-fa,.weixin-cont-fa,.getway-cont-fa{
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 10;
    transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
}
.company, .mark, .brand, .shop, .response, .weixin, .getway {
    width: 100%;
    background: url("../rongyida_files/company.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    position: relative;
}

.company-cont, .mark-cont, .brand-cont, .shop-cont, .response-cont, .weixin-cont, .getway-cont {
    width: 1200px;
    height: 100%;
    margin: 0 auto;
    text-align: right;
    position: relative;
    -webkit-animation: company 3s ease forwards;
    -o-animation: company 3s ease forwards;
    animation: company 3s ease forwards;
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;

}

@keyframes company {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-webkit-keyframes company {
    from {
        padding-top: 360px;
        opacity: 0;
    }
    to {
        padding-top: 230px;
        opacity: 1;
    }
}

.company-cont h3, .mark-cont h3, .brand-cont h3, .shop-cont h3, .response-cont h3, .weixin-cont h3, .getway-cont h3 {
    font-size: 36px;
}

.company-cont h2, .mark-cont h2, .brand-cont h2, .shop-cont h2, .response-cont h2, .weixin-cont h2, .getway-cont h2 {
    font-size: 25px;
    position: relative;
    padding-bottom: 14px;
    margin-bottom: 14px;
    font-weight: 500;
}

.company-cont h2:after, .mark-cont h2:after, .brand-cont h2:after, .shop-cont h2:after, .response-cont h2:after, .weixin-cont h2:after, .getway-cont h2:after {
    content: "";
    position: absolute;
    width: 80px;
    height: 4px;
    background: #333333;
    bottom: 0px;
    right: 0;
}

.company-cont p, .mark-cont p, .brand-cont p, .shop-cont p, .response-cont p, .weixin-cont p, .getway-cont p {
    padding-left: 670px;
    font-size: 16px;
    line-height: 30px;
}

.company-cont a, .mark-cont a, .brand-cont a, .shop-cont a, .response-cont a, .weixin-cont a, .getway-cont a {
    display: block;
    width: 164px;
    height: 44px;
    text-align: center;
    font-size: 16px;
    color: #ffffff;
    float: right;
    background: #f25366;
    border-bottom: 4px solid #c1041b;
    line-height: 40px;
    border-radius: 4px;
    margin-top: 16px;
}

.company-left-pc {
    position: absolute;
    top: 0px;
    right: 730px;
    -webkit-animation: left 1.4s ease;
    -o-animation: left 1.4s ease;
    animation: left 1.4s ease;
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
}

.company-right-pc {
    position: absolute;
    top: -94px;
    right: 180px;
    z-index: 11;
    -webkit-animation: right 1.4s ease;
    -o-animation: right 1.4s ease;
    animation: right 1.4s ease;
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
}

.company-mid {
    position: absolute;
    top: -110px;
    right: 470px;
    z-index: 12;
    -webkit-animation: mid 1.4s ease forwards;
    -o-animation: mid 1.4s ease forwards;
    animation: mid 1.4s ease forwards;
    -webkit-animation-delay: 1.4s;
    -moz-animation-delay: 1.4s;
    -o-animation-delay: 1.4s;
    animation-delay: 1.4s;
    opacity: 0;
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
}

@keyframes left {
    0% {
        right: 1000px;
    }
    100% {
        right: 730px;
    }
}

@-webkit-keyframes left {
    0% {
        right: 1000px;
    }
    100% {
        right: 730px;
    }
}

@keyframes right {
    from {
        right: 100px;
    }
    to {
        right: 180px;
    }
}

@-webkit-keyframes right {
    from {
        right: 100px;
    }
    to {
        right: 180px;
    }
}

@keyframes mid {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-webkit-keyframes mid {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/*company 企业官网建设*/

/*mark 营销型网站建设*/
.mark {
    background-image: url("../rongyida_files/mark.png");
}

.mark-cont, .shop-cont, .weixin-cont {
    text-align: left;
}

.mark-cont h2, .mark-cont h3, .brand-cont h2, .brand-cont h3, .response-cont h2, .response-cont h3 {
    color: #ffffff;
}

.mark-cont h2:after {
    left: 0;
    background: #ffffff;
}

.mark-cont p {
    color: #ffffff;
    padding-left: 0;
    padding-right: 670px;
}

.mark-cont a, .shop-cont a, .weixin-cont a {
    float: left;
}

.mark-right-pc {
    position: absolute;
    top: -130px;
    left: 600px;
    z-index: 11;
    -webkit-animation: mark-right 1.4s ease;
    -o-animation: mark-right 1.4s ease;
    animation: mark-right 1.4s ease;
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
}

@keyframes mark-right {
    from {
        left: 900px;
    }
    to {
        left: 600px;
    }
}

@-webkit-keyframes mark-right {
    from {
        left: 900px;
    }
    to {
        left: 600px;
    }
}

/*mark 营销型网站建设*/

/*brand 品牌网站设计*/
.brand {
    background-image: url("../rongyida_files/brand.png");
}

.brand-cont h2:after, .response-cont h2:after {
    background: #ffffff;
}

.brand-cont p, .response-cont p {
    color: #ffffff;
}

.brand-right {
    position: absolute;
    top: -14px;
    right: 320px;
    z-index: 11;
    -webkit-animation: brand-right 1.4s ease;
    -o-animation: brand-right 1.4s ease;
    animation: brand-right 1.4s ease;
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
}

@keyframes brand-right {
    from {
        right: 500px;
    }
    to {
        right: 320px;
    }
}

@-webkit-keyframes brand-right {
    from {
        right: 500px;
    }
    to {
        right: 320px;
    }
}

/*brand 品牌网站设计*/

/*shop 购物商城网站*/
.shop {
    background-image: url("../rongyida_files/shop.png");
}

.shop-cont h2:after, .weixin-cont h2:after {
    left: 0;
}

.shop-cont p, .weixin-cont p {
    padding-left: 0;
    padding-right: 670px;
}
.shop-cont p{
    padding-right: 800px;
}
.shop-right {
    position: absolute;
    top: -236px;
    left: 58px;
    z-index: 11;
    -webkit-animation: shop-right 1.4s ease;
    -o-animation: shop-right 1.4s ease;
    animation: shop-right 1.4s ease;
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
}

@keyframes shop-right {
    from {
        left: 300px;
    }
    to {
        left: 58px;
    }
}

@-webkit-keyframes shop-right {
    from {
        left: 300px;
    }
    to {
        left: 58px;
    }
}

/*shop 购物商城网站*/
/*response 响应式网页设计*/
.response {
    background-image: url("../rongyida_files/response.png");
}

.response-left {
    position: absolute;
    top: -100px;
    right: 440px;
    z-index: 11;
    -webkit-animation: response-left 1.4s ease;
    -o-animation: response-left 1.4s ease;
    animation: response-left 1.4s ease;
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
}

@keyframes response-left {
    from {
        right: 700px;
    }
    to {
        right: 440px;
    }
}

@-webkit-keyframes response-left {
    from {
        right: 700px;
    }
    to {
        right: 440px;
    }
}

/*response 响应式网页设计*/

/*weixin 微信网站建设*/
.weixin {
    background-image: url("../rongyida_files/weixin.png");
}

.weixin-left {
    position: absolute;
    top: -180px;
    left: 460px;
    z-index: 11;
    -webkit-animation: 1.4s weixin-left ease;
    -o-animation: 1.4s weixin-left ease;
    animation: 1.4s weixin-left ease;
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
}

@keyframes weixin-left {
    from {
        left: 200px;
    }
    to {
        left: 460px;
    }
}

@-webkit-keyframes weixin-left {
    from {
        left: 200px;
    }
    to {
        left: 460px;
    }
}

.weixin-right {
    position: absolute;
    top: 30px;
    left:780px;
    z-index: 11;
    -webkit-animation: weixin-right 1.4s ease;
    -o-animation: weixin-right 1.4s ease;
    animation: weixin-right 1.4s ease;
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
}

@keyframes weixin-right {
    from {
        left: 900px;
    }
    to {
        left: 780px;
    }
}

@-webkit-keyframes weixin-right {
    from {
        left: 900px;
    }
    to {
        left: 780px;
    }
}

/*weixin 微信网站建设*/

/*getway 行业门户平台网站*/
.getway {
    background-image: url("../rongyida_files/getway.png");
}

.getway-cont h3, .getway-cont h2 {
    color: #ffffff;
}

.getway-cont h2:after {
    background: #ffffff;
}

.getway-cont p {
    color: #ffffff;
}

.getway-left {
    position: absolute;
    z-index: 11;
    top: -200px;
    right: 550px;
    -webkit-animation: getway-left 1.4s ease;
    -o-animation: getway-left 1.4s ease;
    animation: getway-left 1.4s ease;
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
}

@keyframes getway-left {
    from {
        right: 800px;
    }
    to {
        right: 550px;
    }
}
@-webkit-keyframes getway-left {
    from {
        right: 800px;
    }
    to {
        right: 550px;
    }
}
/*getway 行业门户平台网站*/

/*service 网站建设服务流程*/
.service {
    width: 100%;
    background-color: #f5f5f5;
}

.service-con {
    width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.service-con h3 {
    font-size: 36px;
    padding-top: 58px;
}

.service-con h2 {
    font-size: 25px;
    color: #666666;
    font-weight: 500;
}

.service-top ul {
    overflow: hidden;
    padding-top: 40px;
}

.service-top ul li {
    float: left;
    width: 180px;
    font-size: 16px;
    text-align: left;
    padding: 20px 0 0 40px;
    background-image: url("../rongyida_files/sb.png");
    background-repeat: no-repeat;
    background-position: 0 0;
    margin-left: 120px;
}
.service-top ul li:nth-child(2){
    background-image: url("../rongyida_files/sd.png");
}
.service-top ul li:nth-child(3){
    background-image: url("../rongyida_files/sf.png");
}
.service-top ul li:nth-child(4){
    background-image: url("../rongyida_files/sh.png");
}
.service-mid ul {
    overflow: hidden;
    background: url("../rongyida_files/servisemid.png");
    background-repeat: no-repeat;
    background-position: 0 center;
}
.service-mid ul li{
    float: left;
    margin-right: 54px;
}
.service-mid ul li:first-child{
    padding-left: 37px;
}
.service-botm ul {
    overflow: hidden;
    margin-top: 12px;
    padding-bottom: 46px;
}

.service-botm ul li {
    float: left;
    width: 180px;
    font-size: 16px;
    text-align: left;
    padding: 20px 0 0 40px;
    background-image: url("../rongyida_files/sa.png");
    background-repeat: no-repeat;
    background-position: 0 0;
    margin-right: 120px;
}
.service-botm ul li:nth-child(2){
    background-image: url("../rongyida_files/sc.png");
}
.service-botm ul li:nth-child(3){
    background-image: url("../rongyida_files/se.png");
}
.service-botm ul li:nth-child(4){
     background-image: url("../rongyida_files/sg.png");
 }
/*service 网站建设服务流程*/
/*sale 售后*/
.sale{
    width: 100%;
    background: url("../rongyida_files/sale.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.sale-con{
    width:1200px;
    margin: 0 auto;
    text-align: center;
}
.sale-con h3{
    font-size: 36px;
    color:#ffffff ;
    padding-top: 44px;
}
.sale-con p{
    font-size: 25px;
    line-height: 35px;
    color: #bbbbbb;
    padding-top: 10px;
    padding-bottom: 46px;
}
.sale-ul ul{
    display: flex;
    justify-content: space-around;
    padding-bottom:84px ;
}
.sale-ul ul li{
    width: 180px;
    height: 240px;
    font-size: 18px;
    color: #ffffff;
    padding-top: 188px;
    background: url("../rongyida_files/sale1.png");
    background-repeat: no-repeat;
    background-position: center ;
}
.sale-ul ul li:nth-child(2){
    background: url("../rongyida_files/sale2.png");
}
.sale-ul ul li:nth-child(3){
    background: url("../rongyida_files/sale3.png");
}
.sale-ul ul li:nth-child(4){
    background: url("../rongyida_files/sale4.png");
}
.sale-ul ul li:nth-child(5){
    background: url("../rongyida_files/sale5.png");
}
.sale-ul ul li:nth-child(6){
    background: url("../rongyida_files/sale6.png");
}
/*sale 售后*/
.run {
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    -o-animation-play-state: running;
    animation-play-state: running;
}