.content-history-box { /* width: 1440px; height: 2032px; */ background: #fff; } .content-history { width: 1100px; margin: 0 auto; overflow: hidden; background-color: #fff; } .content-history .title { font-size: 36px; color: #4A4A4A; text-align: center; margin-top: 60px; } .history-box img { width: 50px; display: block; margin: 60px auto 0; } .history-box img.honor-img { width: 100%; margin: 0; cursor: pointer; } .history-box i { display: block; width: 4px; height: 2500px; background: #f8f8f8; margin: -20px auto 0; } .history-box { position: relative; } .history-box .history-list { position: absolute; /*left: 55px; top: 170px;*/ box-shadow: 0 0 20px 0 rgba(0,0,0,0.10); border-radius: 2px; } .history-box .history-list .history-list-top{ width: 428px; height: 220px; /*background-image: url(../images/honor-1.jpg);*/ position: relative; } .history-box .history-list .history-list-top .brance-left { width: 73px; display: block; height: 60px; position: absolute; right: -73px; top: 110px; background-image: url(../images/brance-left.png) } .history-box .history-list .history-list-top .brance-right { width: 73px; display: block; height: 60px; position: absolute; left: -73px; top: 110px; background-image: url(../images/brance-right.png) } .history-box .history-list .history-list-bottom { width: 408px; text-align: left; background: #FFFFFF; border-radius: 2px; font-size: 14px; color: #4A4A4A; line-height: 36px; padding: 10px 0 10px 20px; position: relative; } .history-box .history-list .history-list-bottom .brance-left { width: 73px; display: block; height: 60px; position: absolute; right: -73px; top: 50%; background-image: url(../images/brance-left.png) } .history-box .history-list .history-list-bottom .brance-right { width: 73px; display: block; height: 60px; position: absolute; left: -73px; top: 50%; background-image: url(../images/brance-right.png) } .history-box .history-list .history-list-bottom b { display: block; text-align: right; font-weight: normal; padding-right: 20px; color: #ccc; } .content-history-box-bottom { height: 700px; } .content-history-box-bottom .content-history { width: 1100px; height: 700px; margin: 0 auto; overflow: hidden; } /* CSS Document */ body{ margin:0;} #certify { width: 1100px; position: relative; margin: 0 auto 0; } #certify .swiper-container { padding-bottom: 125px; margin: 0 81px; } #certify .swiper-slide { width: 520px; height: 380px; background: #fff; box-shadow: 0 8px 30px #ddd; } #certify .swiper-slide img{ display:block; width: 100%; } #certify .swiper-slide p { line-height: 98px; padding-top: 0; text-align: center; color: #636363; font-size: 1.1em; margin: 0; } #certify .swiper-pagination { width: 100%; bottom: 60px; } #certify .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 5px; background: #E0E0E0; width: 20px; height: 2px; /*border: 3px solid #fff;*/ /*background-color: #d5d5d5; width: 10px; height: 10px; opacity: 1;*/ border-radius: 0; } #certify .swiper-pagination-bullets .swiper-pagination-bullet-active { /*border: 3px solid #00aadc;*/ background: #C30F23; } #certify .swiper-button-prev { left: 0; top: 140px; width: 60px; height: 140px; text-align: center; line-height: 140px; color: #E0E0E0; border: 1px solid #F4F4F4; box-shadow: 0 0 20px 0 rgba(0,0,0,0.05); border-radius: 2px; background: url('../images/honor-prev.png') center center no-repeat scroll; background-size: 100%; } #certify .swiper-button-next { right: 0; width: 60px; top: 140px; height: 140px; text-align: center; line-height: 140px; color: #E0E0E0; border: 1px solid #F4F4F4; box-shadow: 0 0 20px 0 rgba(0,0,0,0.05); border-radius: 2px; background: url('../images/honor-next.png') center center no-repeat scroll; background-size: 100%; } #certify .swiper-button-prev:hover{ background: url('../images/honor-prev-hover.png') center center no-repeat scroll; background-size: 100%; } #certify .swiper-button-next:hover { background: url('../images/honor-next-hover.png') center center no-repeat scroll; background-size: 100%; } /* roundabout */ .roundabout li { list-style: none; width: 360px; height: 280px; border: none; background-color: #fff; overflow: hidden; box-shadow: 0 0 20px 0 rgba(0,0,0,0.10); border-radius: 2px; } .roundabout li p { line-height: 80px; padding-top: 0; text-align: center; color: #636363; font-size: 14px; margin: 0; } .roundabout-holder{width:850px;height:380px;margin:0 auto;overflow: hidden;} .roundabout-moveable-item{width:646px;height:416px;cursor:pointer;border:3px solid #ccc;border:3px solid rgba(0, 0, 0, 0.08);border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;} .roundabout-moveable-item img{width:100%;} .roundabout-in-focus{border:3px solid rgba(0, 0, 0, 0.2);} .pagenations { width: 150px; margin: 0 auto; } .pagenations li { float: left; list-style: none; width: 20px; height: 2px; background-color: #E0E0E0; margin: 5px; float: left; } .pagenations li.active { background-color: #C30F23; } .bg-mask { position: fixed; left: 0; top: 0; z-index: 99999; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: none; } .bg-mask .close-btn { position: absolute; right: 10px; top: 10px; z-index: 99; width: 20px; height: 20px; background: url("../images/icon/close.png") center center no-repeat scroll; filter: alpha(opacity=60); opacity: 0.6; cursor: pointer; } .bg-mask .close-btn:hover { filter: alpha(opacity=100); opacity: 1; } .bg-mask .honor-show-dialog { position: absolute; top: 100px; left: 50%; z-index: 9; margin-left: -428px; width: 856px; background-color: #fff; border-radius: 2px; overflow: hidden; text-align: center; } .bg-mask .honor-show-dialog img { display: block; width: 100%; } .bg-mask .honor-show-dialog .honor-intro { padding: 20px; line-height: 24px; color: #9b9b9b } .bg-mask .honor-show-dialog .honor-intro .honor-title { margin-bottom: 10px; color: #4A4A4A; }