@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
}