@charset "utf-8"; /* CSS Document */ * { margin:0; padding:0; } body { background:#edf0f0; font-family:Helvetica Neue,Helvetica,Arial,sans-serif; font-size:14px; color:#333; } .index-banner { padding:55px 0; height: 820px; overflow-y: hidden; border-bottom: 1px #DDDDDD solid; } @media (max-width:1919px) { .index-banner{ height: auto; padding:55px 0 0; } } .index-banner .swiper-container{} .index-banner .swiper-slide{padding:5%;} .index-banner .swiper-slide .title,.index-banner .swiper-slide .title2,.index-banner .swiper-slide .bottom,.index-banner .swiper-slide .more{display: none;} .index-banner .swiper-slide img{position: relative;opacity: .5;} .index-banner .swiper-slide-active{padding: 0;} .index-banner .swiper-slide-active .title,.index-banner .swiper-slide-active .title2,.index-banner .swiper-slide-active .bottom,.index-banner .swiper-slide-active .more{display: block;} .index-banner .swiper-slide-active img{opacity: 1;} .index-banner-img{margin: 3% 0;} .index-banner h1 { font-size:36px; text-align:center; font-weight:normal; } .index-banner h2 { font-size:18px; color:#535353; text-align:center; font-weight:normal; margin:20px 0 60px; } .index-banner .swiper { width:100%; overflow: hidden; margin:0 auto; position:relative; } .index-banner .current-swiper { width:50%; border-radius:10px; margin:0 auto; /* box-shadow:0 0 20px rgba(0,0,0,0.05); */ position:relative; z-index:99; } .index-banner .left-swiper { position:absolute; left:-34%; top:9%; z-index:1; } .index-banner .right-swiper { position:absolute; right:-35.5%; left:auto; top:9%; z-index:1; } .nocurrent-swiper { width:50%; height: 80%; border-radius:8px; /* box-shadow:0 0 20px rgba(0,0,0,0.05); */ } .nocurrent-swiper:before { content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(247,247,247,.5); z-index:99; } /* .slide1 { background:url(../img/img11.png) no-repeat center 50%/auto 100% #f7f7f7; } */ /* .slide2 { background:url(../img/img10.jpg) no-repeat left 50%/auto 100% #f7f7f7; } .slide3 { background:url(../img/img9.png) no-repeat right 50%/auto 100% #f7f7f7; } */ .title { text-align: center; } .title2 { text-align: center; color: #888888; margin-top: 1.5%; } .nocurrent-swiper .title { padding-top:44px; margin-left:30px; font-size:16px; height:25px; line-height:25px; } .name { margin-left:45px; height:55px; display:inline-block; position:relative; line-height:55px; padding-bottom:9px; padding-right:55px; border-bottom:1px solid #dddddd; font-size:36px; color:#333; } .nocurrent-swiper .name { height:46px; line-height:46px; font-size:30px; padding-right:46px; margin-left:30px; } .name:before { content:''; position:absolute; width:30px; height:30px; right:10px; top:0; bottom:0; margin:auto; background:url(../images/curr_sectbg.png) no-repeat center center; } .nocurrent-swiper .name:before { width:26px; height:26px; background-size:100% 100%; } .index-banner .bottom{width: 80%;float: left;} .index-banner .index-btn{width: 20%;float: right;margin-top: 6px;} .index-banner .bottom h3{margin-bottom: 13px;} .detail { width:70%; margin-top:5px; color: #888888; } .nocurrent-swiper .detail { font-size:12px; line-height:20px; width:235px; margin-left:30px; } .index-banner .swiper-button-prev { width:80px; height:80px; border-radius: 50%; top: 37.5%; transform: translateY(-50%); left: 17.5%; background: url(../img/icon-img17.png) -2px!important; z-index: 100; } .index-banner .swiper-button-next { width:80px; height:80px; border-radius: 50%; transform: translateY(-50%); right: 17.5%; top: 37.5%; background: url(../img/icon-img18.png) -2px!important; z-index: 100; } @media (max-width:1024px) { .index-banner{ height: auto; padding:25px 0 25px; } .index-banner .swiper-button-next,.index-banner .swiper-button-prev{ width: 55px; height: 55px; background-position: center!important; top: 50%; } .index-banner .bottom { width: 65%; float: left; } .index-banner .index-btn { width: 35%; float: right; margin-top: 6px; } .index-banner .bottom p{line-height: 1.5em;} } @media (max-width:767px){ .index-banner .right-swiper,.index-banner .left-swiper{ display: none; } .index-banner .current-swiper { width: 100%; } .index-banner .current-swiper .swiper-slide { width: 100%; padding: 0 15px; } .index-banner .bottom,.index-banner .index-btn{ width: 100%;display: block;float: none; } .index-banner .bottom .detail{ width: 100%; } .index-banner .index-btn{ width: 40%; margin-bottom: 0; margin-top: 15px; } .index-banner .swiper-button-next,.index-banner .swiper-button-prev{ display: none; } .index-banner .swiper-slide-active{padding: 0 15px;} }