/* 开局三个小圆点浮现动画 */
.public_translate_icon{
    animation: round_move 1s;
    animation-fill-mode: forwards;
}
@keyframes round_move{
    0%{
        opacity: 0;
        transform: translateY(150px);
    }
    100%{
        opacity: 1;
        transform: translateY(0);
    }
}

/* 红色背景动画 */

.public_header_translate_bg_pink{
    animation: header_bg_pink_move 1s 0.5s;
    animation-fill-mode: forwards;
}

@keyframes header_bg_pink_move{
    0%{
        right: -100rem;
        top: -100rem;
    }
    100%{
        right: -11rem;
        top: -35.7rem;
    }
}

/* 蓝色背景块动画 */

.public_header_translate_bg_blur{
    animation: header_bg_blur_move 1s 0.8s;
    animation-fill-mode: forwards;
}

@keyframes header_bg_blur_move{
    0%{
        right: -50rem;
        top: -40rem;
    }
    100%{
        right: -6rem;
        top: 3rem;
    }
}

/* logo出现动画 */

.public_num_pic{
    /* animation: header_logo_move 0.8s 1.8s cubic-bezier(.32,1.84,.78,.63); */
    animation: header_logo_move 0.8s 1.8s;
    animation-fill-mode: forwards;
}

@keyframes header_logo_move{
    0%{
        transform: translateY(-50rem);
    }
    100%{
        transform: translateY(0rem);
    }
}

/* 头部文字浮现动画 */

.public_num_header_context_font{
    animation: header_title_move 0.8s 0.6s;
    animation-fill-mode: forwards;
}

@keyframes header_title_move{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}


.public_num_header_context_content{
    animation: header_context_move 0.8s 1.4s;
    animation-fill-mode: forwards;
}

.public_num_header_call_number{
    animation: header_context_move 0.8s 1.6s;
    animation-fill-mode: forwards;
}

.public_num_header_call_btn{
    animation: header_context_move 0.8s 2s;
    animation-fill-mode: forwards;
}

@keyframes header_context_move{
    0%{
        opacity: 0;
        transform: translateY(100px);
    }
    100%{
        opacity: 1;
        transform: translateY(0);
    }
}

/* public_num_pic_nav_box */
.public_num_pic_nav_img{
    animation: header_pic_nav_move 0.8s 3.5s;
    animation-fill-mode: forwards;
}

@keyframes header_pic_nav_move{
    0%{
        opacity: 0;
        transform: translateY(30rem);
    }
    100%{
        opacity: 1;
        transform: translateY(-3rem);
    }
}

/* public_num_work_idea_header */
.public_num_font_move{
    animation: public_num_font_move 0.8s ease;
    animation-fill-mode: forwards;
}

@keyframes public_num_font_move{
    0%{
        opacity: 0;
        transform: 100px;
    }
    100%{
        opacity: 1;
        transform: translateY(0);
    }
}

/* .public_num_work_idea_item */
.public_num_idea_item_move{
    animation: public_num_idea_item_move 0.8s ease;
    animation-fill-mode: forwards;
}

.public_num_idea_item_move:nth-of-type(2){
    animation: public_num_idea_item_move 0.8s 0.3s ease;
    animation-fill-mode: forwards;
}

.public_num_idea_item_move:nth-of-type(3){
    animation: public_num_idea_item_move 0.8s 0.5s ease;
    animation-fill-mode: forwards;
}

@keyframes public_num_idea_item_move{
    0%{
        opacity: 0;
        transform: translateY(100px);
    }
    100%{
        opacity: 1;
        transform: translateY(0);
    }
}

@media all and (max-width:980px){
    .public_num_pic_nav_box,.public_num_work_idea,.public_num_header_context,.public_num_article_item{
        width: 80%;
        margin-top: 10rem;
    }

    .public_num_product_content,.public_num_friend_list,.public_server_img_show,.public_server_img_btn,.public_num_contact_form{
        width: 80%;
    }
    .product_content_item{
        width: 49%;
        margin-right: 2%;
    }
    .product_content_item:nth-of-type(2n+2){
        margin-right: 0 !important;
    }
    .product_content_item:nth-of-type(3n+3){
        /* margin-right: 1.47rem; */
        margin-right: 2%;
    }
    .public_num_work_idea_item{
        width: 30% !important;
    }
    .public_num_work_idea_item_pic,.public_num_work_idea_item_context,.public_num_work_idea_item_font{
        width: 100%;
    }
}