@charset "utf-8"; html, body { width: 100%; height: 100%; padding: 0; margin: 0 } .about-history { height: 701px; padding: 64px 106px 0; /* background: url(../images/bg_about_history.jpg) no-repeat center fixed; */ -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 { position: relative; width: 253px !important; height: 470px; margin-right: 31px; position: relative; } .about-history-list .slides li:nth-child(20)::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; /* box-sizing: border-box; border: 1px solid #C39857; */ border-radius: 10px; } .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 { position: absolute; top: -45px; left: 50%; width: 12px; height: 12px; overflow: hidden; margin-left: -6px; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; background-color: #fff; content: '' } .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: #ffffff; 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 0; 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 { margin: 0 } .about-history-list .flex-direction-nav { padding: 0; margin: 0; list-style: none } /* .flex-prev:nth-child(1), .flex-prev:nth-child(2) { display: none !important; } */ .flex-direction-nav { display: none; } #left { position: absolute; left: -5%; top: 39%; width: 48px; /* height: 160px; */ font-size: 80px; font-family: simsun; color: #C39857; text-align: center; cursor: pointer; font-weight: bold; } #changeUl { transition: 1s ease; } #right { position: absolute; right: -5%; top: 39%; width: 48px; /* height: 160px; */ font-size: 80px; font-family: simsun; color: #C39857; text-align: center; cursor: pointer; font-weight: bold; } .about-history-list .flex-direction-nav a { position: absolute; top: 50%; width: 48px; height: 160px; line-height: 160px; overflow: hidden; margin-top: -80px; font-size: 50px; font-family: simsun; color: #000; text-align: center } .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 .swiper-slide .item .desc p { margin: 0 } .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; text-decoration: none; -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: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 { float: left; width: 16.66666667% } .col-3 { float: left; width: 25% } .col-4 { float: left; width: 33.33333333% } .col-5 { float: left; width: 41.66666667% } .col-6 { float: left; width: 50% } .col-7 { float: left; width: 58.33333333% } .col-8 { float: left; width: 66.66666667% } .col-9 { float: left; width: 75% } .col-10 { float: left; width: 83.33333333% } .col-11 { float: left; width: 91.66666667% } .col-12 { float: left; width: 100% } .col-13 { float: left; 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 }