/*about*/
#about {}
#about  .top_item{ display: flex; justify-content: space-between; align-items: center; margin: 80px auto; padding: 0 30px; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;}
#about  .top_item .con{ display: flex; justify-content: center; align-items: center;}
#about  .title{/* width:470px;*/ line-height:48px; font-size:28px; color: #333;}
#about  .intro{ margin-top: 18px; width: 590px;/* padding-right: 20px;*/line-height: 32px; font-size:16px; color:#444;}
#about  .top_item:first-child .con .intro{ width: 595px;}
#about  .img_box{ position: relative;width:448px; height:283px;}
#about  .img img{width: 100%;height: 100%;}
#about  .img i{ width: 44px; height: 30px; border: 2px solid #fff; left: 20px; bottom: 20px; background:url(/static/images/about/about_play_icon.png) no-repeat center; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 14px; -ms-border-radius: 14px; border-radius: 14px;}
#about .technology{ width:100%; height:420px; background:url(/static/images/about/about_technology.jpg) top center no-repeat;}
#about .technology .t{ color:white; font-size: 28px; height: 38px;line-height: 38px; padding-top:90px;}
#about .technology .item{margin-top: 70px;font-size: 0;}
#about .technology .item .list{position: relative;width:212px; height:125px; display:inline-block; color:#fff; font-size:18px; margin:0 12px;vertical-align: top;}
#about .technology .item .list:before{content:'';position: absolute;left: 0;right: 0;bottom: 0;height: 11px;border:1px solid #6d6f6e;border-top: none;}
#about .technology .item .firt{height: 59px;line-height: 59px;font-size: 50px;color: #01bea2;}
#about .technology .item .firt strong{font-weight: normal;position: relative;}
#about .technology .item .firt strong span{position: relative;top: 30px;opacity: 0;}
#about .technology .item .firt em{font-size: 16px;font-style: normal;}
#about .technology .item .sect{height: 43px;line-height: 43px;font-size: 16px;color: white;}
#in_banner .text .global_subbanner .intro{
    width: 100%;}

#about .progress_s0 .t .i_year{color: #2ca594;}
#about .progress_s0 .contents{ width: 100%; height:550px; background:url(/static/images/about/about_progress_big_s1.png) no-repeat center; position:relative;}
#about .progress_s0 .contents .item{ position:absolute; font-size:14px; color:#444; left:-50px; top:-50px;}
#about .progress_s0 .contents .item .i_year{ display: block; width: 100%; line-height: 27px; font-size: 22px; color: #4aac7d; margin-bottom: 20px;}
#about .progress_s0 .contents .item .i_title{ display: block; width: 100%; line-height: 20px;}
#about .progress_s0 .contents .item.down .i_year{margin-bottom: 0;margin-top: 20px;}
#about .progress_s0 .contents .flag{position: absolute;top: 191px;left: 14px;}
#about .progress_s0 .contents .flag_hide{display: none;}

#about .progress_s0 .contents .flag1{left: 14px;}
#about .progress_s0 .contents .flag2{left: 158px;}
#about .progress_s0 .contents .flag3{left: 306px;}
#about .progress_s0 .contents .flag4{left: 449px;}
#about .progress_s0 .contents .flag5{left: 594px;}
#about .progress_s0 .contents .flag6{left: 737px;}
#about .progress_s0 .contents .flag7{left: 882px;}
#about .progress_s0 .contents .flag8{left: 1025px;}
#about .progress_s0 .contents .flag9{left: 1062px;top: 340px;}
#about .progress_s0 .contents .flag10{left: 919px;top: 340px;}
#about .progress_s0 .contents .flag11{left: 774px;top: 340px;}
#about .progress_s0 .contents .flag12{left: 631px;top: 340px;}
#about .progress_s0 .contents .flag13{left: 486px;top: 340px;}
#about .progress_s0 .contents .flag14{left: 343px;top: 340px;}
#about .progress_s0 .contents .flag15{left: 198px;top: 340px;}
#about .progress_s0 .contents .flag_90{transform:rotate(90deg);-moz-transform:rotate(90deg);-webkit-transform:rotate(90deg);}
#about .progress_s0 .contents .flag_180{transform:rotate(180deg);-moz-transform:rotate(180deg);-webkit-transform:rotate(180deg);}
#about .progress_s0 .contents .move{animation:mymove_s0 8s linear;-webkit-animation:mymove_s0 8s linear;}

@keyframes mymove_s0{
    8%{left: 200px;top:191px;}
    16%{left: 359px;top:191px;}
    24%{left: 520px;top:191px;}
    32%{left: 679px;top:191px;}
    40%{left: 840px;top: 191px;}
    48%{left: 999px;top: 191px;}/*turn star*/
    52%{left: 1130px;top: 191px;}
    53%{left: 1164px;top: 195px;}/*corner*/
    55%{left: 1178px;top: 210px;}
    58%{left: 1178px;top: 300px;}
    59%{left: 1164px;top: 326px;}/*corner*/
    61%{left: 1100px;top: 340px;}
    65%{left: 999px;top: 340px;}/*turn end*/
    72%{left: 840px;top: 340px;}
    79%{left: 679px;top: 340px;}
    86%{left: 520px;top: 340px;}
    93%{left: 359px;top: 340px;}
    100%{left: 200px;top: 340px;}
}
#about .progress_s0 .contents .i0{ left:42px; top:7px;}
#about .progress_s0 .contents .i1{ left:187px; top:37px;}
#about .progress_s0 .contents .i2{ left:336px; top:7px;}
#about .progress_s0 .contents .i3{ left:478px; top:37px;}
#about .progress_s0 .contents .i4{ left:623px; top:7px;}
#about .progress_s0 .contents .i5-1{ left:766px; top:37px;}
#about .progress_s0 .contents .i5-2{ left:910px; top:7px;}
#about .progress_s0 .contents .i6{ left:1053px; top:37px;}
#about .progress_s0 .contents .i7{ left:944px; top:415px;}
#about .progress_s0 .contents .i8{ left:800px; top:406px;}
#about .progress_s0 .contents .i9{ left:656px; top:455px;}
#about .progress_s0 .contents .i10{ left:512px; top:425px;}
#about .progress_s0 .contents .i11{ left:368px; top:395px;}
#about .progress_s0 .contents .i12{ left:224px; top:406px;}
#about .progress_s0 .contents .i13{ left:80px; top:455px;}

#about .mission{ width:100%; height:420px; background:url(/static/images/about/about_mission.jpg) top center no-repeat;}
#about .mission .miss_box{width: 990px;height: 271px;margin: 74px auto 0;border-top: 1px solid #646464;border-bottom: 1px solid #646464;}
#about .mission .left{float: left;width: 180px;padding-top: 45px;text-align: center;}
#about .mission .right{ position: relative; float: left; margin-left: 50px; padding: 77px 0 0 50px;text-align: left;}
#about .mission .right:before{ display: block; content: ''; position: absolute; top: 55px; left: 0;  width: 22px; height: 19px; background: url(/static/images/about/mission_icon.png) no-repeat center / 100% 100%;}
#about .mission .right .firt{height: 66px;line-height: 66px;font-size: 28px;color: white;}
#about .mission .right .sect{ line-height: 42px;font-size: 22px;color: white;}

#about .news .item{ width:355px; float:left; margin-left:55px;}
#about .news .nor{ margin-left:10px;}
#about .news .item .img{ width:355px; height:180px;}
#about .news .item .box{ padding:15px; border:1px solid #ededed; border-top:0;}
#about .news .item .date{ font-family:"Arial"; font-size:14px; color:#a0a0a0;}
#about .news .item h3{ height:25px; line-height:25px; overflow:hidden; margin-top:5px; margin-bottom:15px;}
#about .news .item h3 a{ font-size:16px; color:#202020;}
#about .news .item .intro{ font-size:14px; color:#616161; height:50px; line-height:25px; overflow:hidden;}
#about .news .item:hover .box{ background:#f8f8f8;}
#about .news .item:hover h3 a{ color:#00bd9f;}
#about .news .btn a{ width:254px; height:44px; line-height:44px; border:1px solid #00bd9f; color:#00bd9f; display:inline-block; font-size:16px; text-decoration:none; -moz-border-radius:22px; -ms-border-radius:22px; -o-border-radius:22px; -webkit-border-radius:22px; border-radius:22px;}

@media only screen and (max-width: 750px) {
    #about .intro{ width: 100%;}
    #about .img_box{ display: none;}
}