@charset "utf-8"; body, html { width: 100%; height: 100%; padding: 0; margin: 0 } .about-history { height: 701px; padding: 64px 106px 0; -webkit-background-size: 100% 100%; background-size: 100% 100% } .about-title { margin-bottom: 25px } .about-title h3 { margin: 0 0 10px; font-size: 34px; font-weight: 400; color: #2c2c2c } .about-title p { margin: 0; font-size: 36px; font-weight: 300; color: #ececec } .title-white h3 { color: #d6d6d6 } .title-white p { color: rgba(222, 222, 222, .09) } .about-history-list { position: relative; width: 100% } .about-history-list .flex-viewport { padding: 0 31px } .about-history-list .flex-viewport:before { position: absolute; top: 50%; right: 0; left: 0; border-top: 8px solid #c39857; content: '' } .about-history-list .slides li { width: 253px !important; height: 470px; margin-right: 31px; position: relative } .about-history-list .slides li:nth-child(24)::after { content: ""; width: 1px; height: 100%; border-right: 2px dashed #c39857; position: absolute; right: -41px; top: 0 } .about-history-list .slides li:nth-of-type(2n-1) { position: relative; width: 253px !important; height: 430px; margin-right: 31px } .about-history-list .slides li .item { position: absolute; right: -32px; bottom: 0; left: -32px; min-height: 152px; padding: 44px 0 0; background-color: #fff; -webkit-transition: all .2s ease; -moz-transition: all .2s ease; -ms-transition: all .2s ease; -o-transition: all .2s ease; transition: all .2s ease; border-radius: 10px } .about-history-list .slides li .item:after, .about-history-list .slides li .item:before { position: absolute; top: -49px; left: 50%; width: 20px; height: 20px; overflow: hidden; margin-left: -10px; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; background-color: #c39857; content: '' } .about-history-list .slides li .item:after { top: -45px; width: 12px; height: 12px; margin-left: -6px; background-color: #fff } .about-history-list .slides li:nth-child(even) .item { top: 47px; bottom: auto; padding: 0 0 44px } .about-history-list .slides li:nth-child(even) .item:before { top: auto; bottom: -49px } .about-history-list .slides li:nth-child(even) .item:after { top: auto; bottom: -45px } .about-history-list .slides li .item:hover { background-color: #c39857 } .about-history-list .slides li .item h3 { position: absolute; top: 0; right: 0; left: 0; height: 44px; line-height: 44px; margin: 0; font-size: 20px; font-weight: 400; color: #fff; text-align: center; background-color: #c39857; -webkit-transition: all .2s ease; -moz-transition: all .2s ease; -ms-transition: all .2s ease; -o-transition: all .2s ease; transition: all .2s ease; border-radius: 10px } .about-history-list .slides li .item:hover h3 { color: #fff; background-color: #c39857 } .about-history-list .slides li .item h3:before { position: absolute; border-width: 2px; border-style: solid; border-color: #c39857; content: ''; height: 30px; top: -65%; left: 50%; transform: translateX(-50%) } .about-history-list .slides li:nth-child(even) .item h3 { top: auto; bottom: 0 } .about-history-list .slides li:nth-child(even) .item h3:before { position: absolute; border-width: 2px; border-style: solid; border-color: #c39857; content: ''; height: 30px; top: 100%; left: 50%; transform: translateX(-50%) } .about-history-list .slides li .item .desc { line-height: 24px; padding: 0 26px; font-size: 14px; color: #929292 } .about-history-list .slides li:nth-of-type(2n) .item .desc { line-height: 24px; padding: 22px 26px 0; font-size: 14px; color: #929292 } .about-history-list .slides li .item:hover .desc { color: #fff } .about-history-list .slides li .item .desc p, .about-history-swiper .swiper-slide .item .desc p { margin: 0 } .about-history-list .flex-direction-nav { padding: 0; margin: 0; list-style: none } .flex-direction-nav { display: none } #left { position: absolute; left: -5%; top: 39%; width: 48px; font-size: 80px; font-family: simsun; color: #c39857; text-align: center; cursor: pointer; font-weight: 700 } #changeUl { transition: 1s ease } #right, .about-history-list .flex-direction-nav a { position: absolute; width: 48px; font-family: simsun; text-align: center } #right { right: -5%; cursor: pointer; font-weight: 700; top: 39%; font-size: 80px; color: #c39857 } .about-history-list .flex-direction-nav a { top: 50%; height: 160px; line-height: 160px; overflow: hidden; margin-top: -80px; font-size: 50px; color: #000 } .about-history-list .flex-direction-nav a.flex-prev { left: -48px } .about-history-list .flex-direction-nav a.flex-next { right: -48px } .about-history-swiper { width: 100% } .about-history-swiper .swiper-slide .item { overflow: hidden; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background-color: #fff } .about-history-swiper .swiper-slide .item h3 { margin: 0; height: 40px; line-height: 40px; overflow: hidden; font-size: 20px; text-align: center; color: #999; background-color: #e2e2e2 } .about-history-swiper .swiper-slide .item .desc { line-height: 20px; padding: 10px; font-size: 14px; color: #929292 } .about-history-swiper .about-history-pagination { position: static; margin-top: 10px } .about-history-swiper .about-history-pagination .swiper-pagination-bullet { background: #fff } .about-history-swiper .about-history-pagination .swiper-pagination-bullet-active { background: #c91523 } a { color: #414141; -webkit-transition: all .2s ease; -moz-transition: all .2s ease; -ms-transition: all .2s ease; -o-transition: all .2s ease; transition: all .2s ease } a, a:hover { text-decoration: none } .pull-left { float: left } .pull-right { float: right } .pull-none { float: none } .clearfix:after { clear: both; display: block; visibility: hidden; height: 0; content: "."; font-size: 0 } * html .clearfix { zoom: 1 } :first-child+html .clearfix { zoom: 1 } img { max-width: 100% } img.full { display: block; width: 100% } .list { padding: 0; margin: 0; list-style: none } .hidden { display: none } .col-1 { float: left; width: 8.33333333% } .col-2, .col-3 { float: left; width: 16.66666667% } .col-3 { width: 25% } .col-4, .col-5 { float: left; width: 33.33333333% } .col-5 { width: 41.66666667% } .col-6, .col-7 { float: left; width: 50% } .col-7 { width: 58.33333333% } .col-8, .col-9 { float: left; width: 66.66666667% } .col-9 { width: 75% } .col-10, .col-11 { float: left; width: 83.33333333% } .col-11 { width: 91.66666667% } .col-12, .col-13 { float: left; width: 100% } .col-13 { width: 20% } .col-offset-3 { margin-left: 25% } .tb { display: table; width: 100%; height: 100% } .tbr { display: table-row } .tbc { display: table-cell; vertical-align: middle }