html, body { height: 100%; min-width: 1200px;}
.page-container { width: 100%; height: 100%;}
.container { width: 1200px; margin: 0 auto;}
.scroll-wrap { overflow: auto !important}

.page1 { display: flex; flex-direction: column; justify-content: space-between;}
/*.navbar-container { background: rgba(255,255,255,.2);}*/
.navbar { display: flex; align-items: center; justify-content: space-between; height: 80px; position: relative;}
.navbar-list { display: flex;}
.navbar-list a { color: #9d9e9e; font-size: 16px; padding: 0 15px; transition: all 0.5s;}
.navbar-list a:hover { color: #fff;}
.slide-container {  position: absolute; left: 0; right: 0; top: 0; bottom: 60px; z-index: -1;}
.slide-swiper-bg { width: 100%; height: 100%; background: url(../images/banner.jpg) no-repeat center center; background-size: cover;}
.intro { display: flex; height: 60px;}
.intro .text { flex: 1; display: flex; align-items: center; justify-content: center; color: #608BEE;}

.navbar-children-list { position: absolute; background-color: rgba(255,255,255,.3); padding: 10px; right: 510px; top: 60px; text-align: center; display: none;min-width:120px;}
.navbar-children-list a { color: #fff; font-size: 12px; line-height: 2.5; text-align: center;}

.page2 { background: url(../images/page2.jpg) no-repeat center center; background-size: cover; display: flex; align-items: center;}
.page2 .container { display: flex;}
.page2 .container .left { margin-right: 60px; padding: 0 20px;}
.page2 .container .left .text { font-size: 30px; font-weight: 700;  color: #fff; line-height: 1.8;}
.page2 .container .right { color: #fff; font-size: 14px; line-height: 2; flex: 1; font-weight: 300; padding: 0 20px;}
.page2 .container .right p { margin-bottom: 20px;} 
.page2 .container .right .line { height: 1px; width: 300px; background-color: #fff; margin: 30px 0 40px;}

.page3 { background: url(../images/page3.jpg) no-repeat center center; background-size: cover; display: flex; align-items: center;}
.page3 .container { display: flex;}
.page3 .left { padding: 0 20px;}
.page3 .left .title { font-size: 28px; font-weight: 700; margin: 10px 0;}
.page3 .left .content p { font-size: 15px; color: #000; line-height: 2; margin: 15px 0;  }
.page3 .left .content a { color: #439DDD; display: block;}
.page3 .right { flex: 0 0 60%; text-align: right; padding: 0 20px;}
.page3 .title .main { font-size: 40px; color: #000;}
.page3 .title .sub { font-size: 30px; color: #aaa;}
.page3 .round { font-size: 26px; border-radius: 200px; border: 1px solid #aaa; color: #aaa; display: inline-block; padding: 4px;}
.page3 .right img { width: 70%; }

.page4 { text-align: center;}
.page4 .container { padding: 20px 0; box-sizing: border-box;}
.page4 .button-wrapper { display: flex; align-items: center; justify-content: center;}
.page4 .button { font-size: 18px; font-weight: 400; color: #888;}
.page4 .button.active { color: #000;}
.page4 .line { width: 1px; height: 15px; background-color: #aaa; margin: 0 20px;}
.page4 .logo-wrapper { width: 600px; height: 200px; margin: 0 auto; position: relative; background: url(../images/page4.png) no-repeat center bottom; background-size: cover;}
.page4 .logo-wrapper .title { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center;}
.page4 .title .main { font-size: 26px; color: #333; font-weight: 500; margin-bottom: 10px;}
.page4 .title .sub { color: #888;}


.timeline-container { width: 1000px; margin: 0 auto; position: relative; flex: 1; overflow: hidden; top: -180px;}
.timeline-dots-container { height: 300px; overflow: hidden; position: relative;}
.timeline-dots { width: 100%; height: 800px; border-radius: 0 0 50% 50%; border-bottom: 1px solid #888; position: absolute; top: -550px;}
.timeline-dots [data-year] { width: 50px; height: 50px; border-radius: 50%; border: 1px solid #888; display: flex; align-items: center; justify-content: center; position: absolute; bottom: -25px; left: 475px; font-size: 12px; color: #888; transition: transform 0.5s; background-color: #fff; cursor: pointer; user-select: none;}
.timeline-dots .dot3 { transform: translate(-430px, -190px);}
.timeline-dots .dot4 { transform: translate(-380px, -140px);}
.timeline-dots .dot5 { transform: translate(-330px, -96px);}
.timeline-dots .dot6 { transform: translate(-270px, -60px);}
.timeline-dots .dot7 { transform: translate(-205px, -33px);}
.timeline-dots .dot8 { transform: translate(-140px, -15px);}
.timeline-dots .dot9 { transform: translate(-70px, -2px);}
.timeline-dots .dot10 { background-color: #888; color: #fff; width: 60px; height: 60px; transform: translate(-5px, 5px);z-index: 99999}
.timeline-dots .dot11 { transform: translate(70px, -2px);}
.timeline-dots .dot12 { transform: translate(140px, -15px);}
.timeline-dots .dot13 { transform: translate(205px, -33px);}
.timeline-dots .dot14 { transform: translate(270px, -60px);}
.timeline-dots .dot15 { transform: translate(330px, -96px);}
.timeline-dots .dot16 { transform: translate(380px, -140px);}
.timeline-dots .dot17 { transform: translate(430px, -190px);}
.timeline-content .content { display: none;}
.timeline-content .content { width: 800px; height: 300px; margin: 30px auto 0; overflow:hidden; background-color: #eee; display: flex; border-radius: 6px;  box-shadow: 0 0 5px rgba(0,0,0,.2);}
.timeline-content .content .right { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 20px; text-align: left;}
.timeline-content .content .right .title { font-size: 24px; color: #333; margin-bottom: 15px; font-weight: 600;}
.timeline-content .content .right li { font-size: 14px; margin: 15px 0; line-height: 1.5;}
.timeline-content-other .content { text-align: left; padding: 20px; box-sizing: border-box; line-height: 2.5; color: #333}


.page5 { background:url(../images/page5.jpg) no-repeat center center; background-size: cover;}
.page5 .title,
.page6 .title { margin: 20px 0; padding: 0 20px;}
.page5 .title .main,
.page6 .title .main { font-size: 35px; color: #333; font-weight: 600;}
.page5 .title .sub,
.page6 .title .sub { font-size: 30px; color: #aaa; font: 400;}
/* .page5 .person-list { display: flex; flex-wrap: wrap;} */
.page5 .person { text-align: center; margin-bottom: 20px; cursor: pointer; position: relative;margin-right:20px;max-width: 222px;}
.page5 .person .avatar { width: 100%;}
.page5 .person .info { background-color: #eee; margin: 0 auto; padding: 10px; box-sizing: border-box; color: 333;}
.page5 .person .info .name { font-size: 15px; font-weight: bold;}
.page5 .person .info .desc { font-size: 13px; }
.page5 .person .info .line { width: 30px; height: 2px; background-color: #D54017; margin: 10px auto 0;}

.page5 .person .box { position: absolute; width: 100%; height: 100%; background-color: #fff; left: 50%; top: 0; transform: translateX(-50%); box-shadow: 0 0 10px rgba(0,0,0,.1); padding: 20px 15px; box-sizing: border-box; text-align: left; color: #333; display: none;}
.page5 .person .box .name{ font-size: 14px; }
.page5 .person .box .desc { font-size: 12px; padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px solid #eee;}

.page5 .person .box .intro { font-size: 12px; line-height: 1.5;}
.page5 .container{position: relative;}
.page5 .container .btn-lll,
.page5 .container .btn-rrr{position: absolute;top:50%;cursor: pointer;}
.page5 .container .btn-lll img,
.page5 .container .btn-rrr img{width:60px;}
.page5 .container .btn-lll{left:-80px; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg);}
.page5 .container .btn-rrr{right:-80px;}
.page5 .swiper-pagination{bottom:0!important;}
.page5 .swiper-pagination .swiper-pagination-bullet-active{background: #000!important;}
.join-box{
    background-image: url(../images/bg-idx-join.jpg);
    background-position: center top;
    color: #fff;
    background-size: cover;
    padding: 60px 0;
}

.page6 {padding-top:10px;background:url(../images/bg-page6.jpg) no-repeat center center; background-size: cover;position: relative;}
.page6 .title{text-align: center;margin:10px 0;}
.page6 .duty-news-box{padding:20px 0;}
.page6 .duty-news-box .list-box ul li a:hover{background-color: #fff;color:#000;}
.page6 .page-footer{position: absolute;bottom:0;width:100%;left:0;right:0;margin:auto;}