@charset "utf-8";
.brand_contianer {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.top_bg {
    background: url("../image/brand-story/brand_story_top.png") no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 320px;
    position: relative;
    padding-top: 90px;
}

.top_title {
    position: absolute;
    top: 43%;
    left: 45%;
    color: white;
    font-size: 48px;
    font-family:MicrosoftYaHei;
    font-weight:bold;
}

.top_content {
    position: absolute;
    top: 65%;
    left: 39.5%;
    color: white;
    font-size: 26px;
    font-family:MicrosoftYaHei;
    font-weight:bold;
}

.container_story {
    width: 100%;
    /*height:1300px;*/
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 0 auto;
}


.content {
    display: flex;
    flex-direction: column;
    align-items: center;

}

.brief, .mission, .process,.honor {width: 970px;display: flex;flex-direction: column;}
.brief {height: 300px;justify-content: center;}
.mission {height: 500px;}
.process {height: 600px;}
.honor {height: 1200px;}
.brief_title, .mission_title, .process_title,.honor_title {
    width: 970px;
    font-size:22px;
    font-family:MicrosoftYaHei;
    font-weight:400;
    color:rgba(55,55,55,1);
    height: 60px;line-height: 60px;
    border-bottom: 1px solid #C1C1C1;
}

.line {
    width: 970px;
    height: 1px;
    background:rgba(193,193,193,1);
}

.brief_content {
    font-size:14px;
    font-family:MicrosoftYaHei;
    font-weight:400;
    color: rgb(102, 102, 102);
    display: block;
    line-height: 1.6;
    text-indent: 2em;
}
.mission_content {
    width: 100%;
    height: 266px;
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
}
.process_content {
    width: 999px;
    height: 491px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.honor_content {
    width: 100%;
    margin-top: 20px;
}
.honor_imgs {
    width: 221px;height: 147px;margin: 4px 0;
}
.honor_trophy {
    width: 239px;height: 304px;margin: 4px 8px;
}
.honor_img {
    width: 961px;height: 748px;
    margin: 12px 0;
    background: url("../image/brand-story/honor.png") no-repeat;
    background-size: 100% 100%;
}

.honor_one,.honor_two,.honor_three,.honor_four,.honor_five,.honor_six {
    position: relative;
}

.honor_one::before {
    content: "安徽省重点软件企业";color: #fff;width:221px;height:19px;background:rgba(74,79,81,1);
    opacity:0.61;position: absolute;bottom: 4px;left: 0;text-align: center;font-size: 12px;
}
.honor_two::before {
    content: "中国教育技术协会会员单位";color: #fff;width:221px;height:19px;background:rgba(74,79,81,1);
    opacity:0.61;position: absolute;bottom: 4px;left: 0;text-align: center;font-size: 12px;
}
.honor_three::before {
    content: "安徽高新技术企业";color: #fff;width:221px;height:19px;background:rgba(74,79,81,1);
    opacity:0.61;position: absolute;bottom: 4px;left: 0;text-align: center;font-size: 12px;
}
.honor_four::before {
    content: "山东省中小学创客教育教学联盟会长单位";color: #fff;width:221px;height:19px;background:rgba(74,79,81,1);
    opacity:0.61;position: absolute;bottom: 4px;left: 0;text-align: center;font-size: 12px;
}
.honor_five::before {
    content: "安徽省创新创业大赛荣获“二等奖”";color: #fff;width:239px;height:19px;background:rgba(74,79,81,1);
    opacity:0.61;position: absolute;bottom: 4px;left: 8px;text-align: center;font-size: 12px;
}
.honor_six::before {
    content: "宣城市青年创业大赛荣获“二等奖”";color: #fff;width:239px;height:19px;background:rgba(74,79,81,1);
    opacity:0.61;position: absolute;bottom: 4px;left: 8px;text-align: center;font-size: 12px;
}

.mission_content_right {width: 430px;height: 266px;}
.mission_content_left {width: 378px;display: flex;flex-direction: column;}

.mission_content_left_img {
    width: 240px;height: 50px;padding-bottom: 23px;
    background: url("../image/brand-story/brand_slogan.png") no-repeat;
}

.mission_content_left_text {
    width:378px;
    font-size:14px;
    font-family:MicrosoftYaHei;
    font-weight:400;
    color: rgb(102, 102, 102);
    line-height: 1.8;
}

.process_bg {
    width: 100%;
    height: 211px;
    background: url("../image/brand-story/process_bg.png") no-repeat;
    background-size: 100% 100%;
}

.month_one {top: 35%;left: 5%;}
.month_two {top: 58%;left: 16%;}
.month_three {top: 35%;left: 26%;}
.month_four {top: 58%;left: 36%;}
.month_five {top: 35%;left: 49%;}
.month_six {top: 58%;left: 60%;}
.month_seven {top: 35%;left: 70%;}
.month_eight {top: 58%;left: 80%;}
.month_night {top: 35%;left: 91%;}

.event_one {top: 74%;left: 2%;}
.event_two {width: 164px;top: 18%;left: 12.5%;}
.event_three {width: 182px;top: 74%;left: 20%;}
.event_four {width: 226px;top: 13%;left: 32%;}
.event_five {width: 177px;top: 74%;left: 46%;}
.event_six {width: 177px;top: 13%;left: 60%;}
.event_seven {width: 137px;top: 74%;left: 68%;}
.event_eight {width: 230px;top: 20%;left: 76%;}
.event_night {width: 230px;top: 74%;left: 86%;}

.event_span {position: absolute;font-size:14px;font-family:MicrosoftYaHei;font-weight:400;color:rgba(102,102,102,1);}
.month_time {position: absolute;font-size:24px;font-family:Adobe Heiti Std R;font-weight:normal;color:rgba(153,153,153,1);}

.bottom {
    height: 115px;
    width: 100%;
    background-color: #3F4044;
}


.content_left {
    width: 160px;
    display: flex;
    flex-direction: row;
    height: auto;
    position: fixed;
    top: 100px;
    left: 150px;
}

.content_left_line {
    width: 1px;
    background: #B8B8B8;
    position: relative
}

.content_left_line_top {
    position: absolute;
    width: 5px;
    height: 4px;
    background: #B8B8B8;
    left: -5px;
    top: 0
}

.content_left_line_bottom {
    position: absolute;
    width: 5px;
    height: 4px;
    background: #B8B8B8;
    left: -5px;
    bottom: 0
}

.content_left_item {
    display: block;
    color: #333333;
    font-size: 14px;
    margin: 30px 20px 30px 30px;
    cursor: pointer;
    padding: 6px 12px 6px 10px;
    position: relative;
}

.content_left_item:after {
    content: '';
    display: block;
    width: 3px;
    height: 3px;
    background: #808080;
    position: absolute;
    left: -34px;
    top: 50%;
}

.content_left_content .active {
    background: #00A5E3;
    color: #fff;
}

.content_left_content .active:before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border: 8px solid transparent;
    position: absolute;
    top: 8px;
    border-right: 8px solid #00A5E3;
    left: -16px;
}

.flex-row-center {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

@media screen and (max-width: 1800px) {
    .content_left {
        left: 100px;
    }
}

@media screen and (max-width: 1600px) { /*当屏幕尺寸小于1600px时，应用下面的CSS样式*/
    .content_left {
        left: 50px;
    }
}

@media screen and (max-width: 1366px) {
    .content_left {
        display: none;
    }
}