.about-containers{width: 100%;}
.header-item{width: 100%;position: relative;}
.header-item img.main{width: 100%;}
.header-item .desc{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}
.story{width: 1200px;margin:150px auto 0;}
.story h3{font-size: 60px;text-align: center;color: #4c4c4c;font-weight: 400;}
.story ul.nav{display: flex;width: 100%;margin:90px auto;justify-content: space-between;}
.story ul.nav li{width: 260px;font-size: 24px;color: #999;text-align: center;cursor: pointer;}
.story ul.nav li.active::after{content: '';position: absolute;bottom: -12px;left:50%;width: 80%;height: 2px;background: #dcdbdb;transform: translate(-50%);}
.story .content{width: 1000px;margin:0 auto;}
.story .content li{width: 100%;height: 600px;background: #fff;border-radius: 20px;box-shadow: 5px 5px 50px 10px #f4f4f4;padding: 10px 0;display: none;}
.story .content li .center{display: flex;width: 100%;height: 100%;}
.story .content li.active{display: block;}
.story .content li .right{width: 540px;padding: 0 40px 0 20px;}
.story .content li .first {display: flex;align-items: center;justify-content: center;width: 100%;flex-wrap: wrap;float: left;}
.story .content li .first .item{width: 100%;float: left;display: none;}
.story .content li .first .item p{font-size: 20px;color: #757575;text-indent: 40px;line-height: 36px;}
.story .content li .right .active{display: block;}
.story .content li .more{position: relative;}
.story .content li .more .controls{width: 180px;position: absolute;bottom: 20px;right: 40px;display: flex;}
.story .content li .more .controls span{width: 80px;height: 40px;line-height:40px;display: inline-block;text-align: center;font-size: 14px;background: #fff;box-shadow: 0 0 5px 2px #f4f4f4;margin-right: 10px;cursor: pointer;color: #ccc;border-radius: 5px;}
.story .content li .more .controls span.default{color: #999;}

.shining-moment{margin:300px auto;}
.shining-moment .content{width: 1200px;margin:0 auto;}
.shining-moment .content h3{font-size: 60px;text-align: center;color: #4c4c4c;font-weight: 400;}
.shining-moment .content .items{margin-top: 150px;}
.shining-moment .content .items .item{width: 100%;position: relative;height: 640px;display: none;}
.shining-moment .content .items .item.active{display: block;}
.shining-moment .content .items .item::before{content: "";width: 150px;height: 100%;background:-webkit-linear-gradient(to right,rgba(255,255,255,1),rgba(255,255,255,0));background:-moz-linear-gradient(to right,rgba(255,255,255,1),rgba(255,255,255,0));background:-ms-linear-gradient(to right,rgba(255,255,255,1),rgba(255,255,255,0));background:-o-linear-gradient(to right,rgba(255,255,255,1),rgba(255,255,255,0));background:linear-gradient(to right,rgba(255,255,255,1),rgba(255,255,255,0));position: absolute;left: 0;top: 0;z-index: 10;}
.shining-moment .content .items .item::after{content: "";width: 150px;height: 100%;background:-webkit-linear-gradient(to left,rgba(255,255,255,1),rgba(255,255,255,0));background:-moz-linear-gradient(to left,rgba(255,255,255,1),rgba(255,255,255,0));background:-ms-linear-gradient(to left,rgba(255,255,255,1),rgba(255,255,255,0));background:-o-linear-gradient(to left,rgba(255,255,255,1),rgba(255,255,255,0));background:linear-gradient(to left,rgba(255,255,255,1),rgba(255,255,255,0));position: absolute;right: 0;top: 0;z-index: 10;}
.shining-moment .content .items .item .year{text-align: center;color: #e6e6e6;font-size: 274px;font-weight: bold;height: 210px;line-height: 210px;margin-bottom: 90px;}
.shining-moment .content .items .item .text{height: 280px;width: 100%;overflow:hidden;}
.shining-moment .content .items .item .text .hdline{width: 100%;height: 100%;display: flex;flex-wrap: nowrap;}
.shining-moment .content .items .item .text .hdline p{text-align: center;font-size: 24px;color: #757575;line-height: 48px;width: 100%;display: block;flex-shrink: 0;}
.shining-moment .content .items .item .text .hdline p.active{display: block;}
.shining-moment .content .items .item .controls{width: 100%;height: 100%;position: absolute;left: 0;top: 0;z-index: 11;}
.shining-moment .content .items .item .controls span{width: 50px;height: 50px;background: #f5f5f5;border-radius: 25px;color: #fff;font-size: 30px;text-align: center;display: block;cursor: pointer;font-weight: bold;padding: 5px;}
.shining-moment .content .items .item .controls span.pre{position: absolute;left: 0;top: 50%;transform: translateY(-50%);}
.shining-moment .content .items .item .controls span.next{position: absolute;right: 0;top: 50%;transform: translateY(-50%);}
.shining-moment .content ul.navs{width: 100%;display: flex;justify-content: center;}
.shining-moment .content ul.navs li{width:56px;text-align: center;font-size: 20px;color: #757575;margin:0 5px;padding-top: 5px;cursor: pointer;}
.shining-moment .content ul.navs li.active{border-top: 2px solid #cdcccc;font-weight: bold;}

.pro-story .content{width: 1200px;margin:0 auto;}
.pro-story .content h3{font-size: 60px;text-align: center;color: #4c4c4c;font-weight: 400;margin-bottom: 90px;}
.pro-story .content .sh{width: 100%;}
.pro-story .content .sh ul.imgs{width: 100%;position: relative;}
.pro-story .content .sh ul.imgs li{display: none;width: 100%;}
.pro-story .content .sh ul.imgs li.active{display: block;}
.pro-story .content .sh ul.imgs li img{width: 100%;border-radius: 20px;}
.pro-story .content ul.imgs .controls{width: 100%;height: 100%;position: absolute;left: 0;top: 0;z-index: 11;}
.pro-story .content ul.imgs .controls span{width: 50px;height: 50px;background: #f2f2f2;border-radius: 25px;color: #fff;font-size: 30px;text-align: center;display: block;cursor: pointer;font-weight: bold;padding: 5px;}
.pro-story .content ul.imgs .controls span.pre{position: absolute;left: -60px;top: 50%;transform: translateY(-50%);}
.pro-story .content ul.imgs .controls span.next{position: absolute;right: -60px;top: 50%;transform: translateY(-50%);}

.pro-story .content ul.text{width: 1000px;margin:0 auto;}
.pro-story .content ul.text li{width: 100%;display: none;}
.pro-story .content ul.text li.active{display: block;}
.pro-story .content ul.text li .logo{width: 100%;height: 60px;display: flex;justify-content: center;align-items: center;margin:90px 0;}
.pro-story .content ul.text li .con{width: 100%;}
.pro-story .content ul.text li .con p{text-align: justify;color: #757575;font-size: 20px;text-indent: 40px;line-height: 36px;}

.videolist{margin:300px auto;}
.videolist .content{width: 1200px;margin:0 auto;}
.videolist .content h3{font-size: 60px;text-align: center;color: #4c4c4c;font-weight: 400;margin-bottom: 90px;}
.videolist .content .main{width: 1000px;margin:0 auto;}
.videolist .content .main ul{width: 100%;}
.videolist .content .main ul li{width: 100%;display: none;position: relative;}
.videolist .content .main ul li.active{display: block;}
.videolist .content .main video{width: 100%;}
.videolist .content .main ul li .iconbg{width: 50px;height: 50px;background: rgba(0,0,0,.5);position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);border-radius: 25px;}
.videolist .content .main ul li .iconbg span{width: 40px;height: 40px;display: block;position: relative;top: 5px;left: 5px;cursor: pointer;}
.videolist .content .main ul li .iconbg span.play{background: url(../svg/icon-play.svg) no-repeat center center;}
.videolist .content .main ul li .iconbg span.repeat{background: url(../svg/icon-repeat.svg) no-repeat center center;}
.videolist .content .navs{width: 100%;height: 222px;background-image: linear-gradient(to right,#FFF 0%, #F8F8F8 10%,#CCCCCC 50% ,#F8F8F8 90%,#FFF 100%);margin:90px 0;position: relative;}
.videolist .content .navs .cube{display: flex;}
.videolist .content .navs .cube span{display: inline-block;width: 14px;height: 20px;background: #fff;margin:0 3px;}
.videolist .content .navs .cube.before{position: absolute;left: 0;top: 15px;}
.videolist .content .navs .cube.after{position: absolute;left: 0;bottom: 15px;}
.videolist .content .navs .list{width: 1000px;height: 100%;position: absolute;left: 100px;top: 0;list-style: none;}
.videolist .content .navs .list .lis{width: 100%;height: 100%;overflow: hidden;position: absolute;z-index: 10;}
.videolist .content .navs .list .lis .center{width: 100%;height: 100%;display: flex;justify-content: space-between;padding: 40px 0;z-index: 10;}
.videolist .content .navs .list li{width: calc(20%);cursor: pointer;flex-shrink: 0;cursor: pointer;}
.videolist .content .navs .list li.active img{border:1px solid #009FE9;}
.videolist .content .navs .list li img{width: 95%;margin:0 auto;}
.videolist .content .navs .list .controls{width: calc(100% + 80px);position: absolute;left: -40px;top: 0;height: 100%;z-index: 9;}
.videolist .content .navs .list .controls span{width: 50px;height: 50px;background: #f4f4f4;border-radius: 25px;display: block;cursor: pointer;}
.videolist .content .navs .list .controls span img{width: 100%;}
.videolist .content .navs .list .controls span.pre{position: absolute;top: 50%;left: -20px;transform: translateY(-50%);}
.videolist .content .navs .list .controls span.next{position: absolute;top: 50%;right: -20px;transform: translateY(-50%);}