.about-history { height: 701px; padding: 64px 106px 0; /* background: url(bg_about_history.jpg) no-repeat center fixed; */ /* background: #FFFFCC; */ -webkit-background-size: 100% 100%; background-size: 100% 100%; /* -webkit-filter: blur(15px); -moz-filter: blur(15px); -o-filter: blur(15px); -ms-filter: blur(15px); filter: blur(15px); */ /* -webkit-filter: blur(5px); filter: blur(5px); */ position: relative; } .about-history-bg { background: url(bg_about_history_2.jpg) no-repeat center fixed; /* background:#FCF6EA; */ width:100%; height: 100%; position: absolute; left:0; top:0; z-index: 0; -webkit-filter: blur(3px); filter: blur(3px); } .about-title { margin-bottom: 25px; z-index: 100; position: relative; } .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: #ffffff */ /* color:#666666; */ /* color:#ff9d1d; */ color:#3F8C70; } .title-white p { color: #dddddd; } .about-history-list { position: relative } .about-history-list .flex-viewport { padding: 0 31px } .about-history-list .flex-viewport:before { position: absolute; top: 50%; right: 0; left: 0; /* border-top: 1px solid #c7c7c7; */ border-top:2px solid #ffffff; content: '' } .about-history-list .slides li { position: relative; width: 253px; height: 490px; margin-right: 31px } .about-history-list .slides li .item { position: absolute; right: -32px; bottom: 0; left: -32px; min-height: 200px; height:205px; padding: 44px 0 0; background-color: #fff; /* background-color:#FCE7BE; */ -webkit-transition: all .2s ease; -moz-transition: all .2s ease; -ms-transition: all .2s ease; -o-transition: all .2s ease; transition: all .2s ease } .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: rgba(218, 183, 101, .6); */ background-color: rgba(67, 221, 62, 0.6); /* background-color:#ff9d1d; */ 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: #dab765; */ /* background-color:#ffff00; */ background-color:#3F8C70; content: '' } .about-history-list .slides li:nth-child(even) .item { top: 0; bottom: auto; padding: 0 0 10px; height:205px; } .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: #ff9d1d; */ background-color:#3F8C70; color:#ffffff; } .about-history-list .slides li .item:hover p { color:#ffffff; } .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: 700; color: #999; text-align: center; background-color: #e2e2e2; background-color:#3F8C70; color:#ffffff; -webkit-transition: all .2s ease; -moz-transition: all .2s ease; -ms-transition: all .2s ease; -o-transition: all .2s ease; transition: all .2s ease } .about-history-list .slides li .item:hover h3 { color: #232323; background-color: #fff; } .about-history-list .slides li .item h3:before { position: absolute; bottom: 100%; left: 50%; margin-left: -9px; border-width: 0 9px 18px; border-style: solid; border-color: transparent transparent #e2e2e2; content: '' } .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 { top: 100%; bottom: auto; border-width: 18px 9px 0; border-color: #e2e2e2 transparent transparent } .about-history-list .slides li .item .desc { line-height: 24px; padding: 15px 15px 0; font-size: 14px; color: #929292; color:#3F8C70; } .about-history-list .slides li .item:hover .desc p { color: #fff; } .about-history-list .slides li .item .desc p { margin: 0; color:#3F8C70; } .about-history-list .flex-direction-nav { padding: 0; margin: 0; list-style: none } .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: #fff; */ color:#3F8C70; 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 } .about-history 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 } .list li {margin-top:0;} @media (max-width:767px){ .about-history {height:auto;padding:10px 20px 0;} .about-history-list .slides li {height:200px;} .about-history-list .slides li .item h3 { position: static;} .about-history-list .slides li:nth-child(even) .item h3 {top:0;} .about-history-list .slides li:nth-child(even) .item h3:before {display: none;} .about-history-list .slides li .item {padding:0;height:auto;} .about-history-list .slides li .item h3:before {display: none;} .about-history-list .slides li .item:after {display: none;} .about-history-list .slides li .item:before {display: none;} }