@charset "utf-8"; /*banner轮播样式*/ .banner { width: 100%; min-width: 1250px; } .banner .swiper01 { max-height: 760px; position: relative; } .banner .swiper01 .swiper-wrapper .swiper-slide { position: relative; } .banner .swiper01 .swiper-wrapper .swiper-slide img { width: 100%; } .banner .swiper01 .swiper-wrapper .swiper-slide .item-con { position: absolute; text-align: left; color: #fff; } .banner .swiper01 .swiper-wrapper .swiper-slide .item-con a { display: inline-block; width: 170px; height: 45px; background: #c91c28; color: #fff; margin-top: 323px; opacity: 0; -webkit-transform: translate3d(200px, 0, 0); transform: translate3d(200px, 0, 0); } .banner .swiper01 .swiper-wrapper .swiper-slide .item-con a .more { height: inherit; text-align: center; line-height: 45px; font-size: 14px; letter-spacing: 1px; } .banner .swiper01 .swiper-wrapper .swiper-slide .item-con a .more img { width: 26px; height: 26px; vertical-align: middle; margin-left: 20px; border: 0; } .banner .swiper01 .swiper-wrapper .swiper-slide .item-con a:hover img { animation: edgeleft 1s; } .banner .swiper01 .swiper-wrapper .swiper-slide .item-con0 { position: absolute; left: 100px; top: 199px; } .banner .swiper01 .swiper-wrapper .swiper-slide .item-con7 { position: absolute; left: 100px; bottom: 109px; } .banner .swiper01 .swiper-wrapper .swiper-slide .item-con2 { position: absolute; right: 335px; top: 133px; } .banner .swiper01 .swiper-wrapper .swiper-slide .item-con3 { position: absolute; left: 100px; top: 199px; } .banner .swiper01 .swiper-wrapper .swiper-slide .item-con5 { position: absolute; left: 100px; top: 199px; } .banner .swiper01 .swiper-wrapper .swiper-slide .item-con6 { position: absolute; left: 8px; top: 37px; } .banner .swiper01 .swiper-wrapper .swiper-slide .item-con9 { position: absolute; left: 100px; top: 199px; } .banner .swiper01 .swiper-wrapper .swiper-slide-active .item-con .p1 { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); transition: ease 1s; } .banner .swiper01 .swiper-wrapper .swiper-slide-active .item-con .p2 { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); transition: ease 1.3s; } .banner .swiper01 .swiper-wrapper .swiper-slide-active .item-con .p3 { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); transition: ease 1.6s; } .banner .swiper01 .swiper-wrapper .swiper-slide-active .item-con a { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); transition: ease 1.6s; } .banner .swiper01 .swiper-pagination1 { position: absolute; z-index: 20; left: 100px; bottom: 30px; text-align: left; } .banner .swiper01 .swiper-pagination1 .swiper-pagination-bullet { display: inline-block; width: 22px; height: 6px; margin: 0 5px; cursor: pointer; background: url(/uploads/image/szimg/rectangle_01.png) no-repeat; background-size: contain; border-radius: 0; opacity: 1; } .banner .swiper01 .swiper-pagination1 .swiper-pagination-bullet-active { width: 62px; background: url(/uploads/image/szimg/rectangle_02.png) no-repeat; background-size: contain; } .news { width: 100%; height: 580px; padding-top: 60px; } .news .news-child { width: 1314px; height: inherit; margin: 0 auto; position: relative; } .news .news-child .swiper02 { width: 1200px; height: inherit; position: relative; margin: 0 auto; } .news .news-child .swiper02 .title { position: absolute; left: 0; top: 0; text-align: left; font-size: 30px; line-height: 30px; letter-spacing: 1px; position: relative; color: #000; z-index: 3; } .news .news-child .swiper02 .title:after { content: ''; display: inline-block; width: 40px; height: 3px; background: #b8914c; position: absolute; bottom: -17px; left: 0; } .news .news-child .swiper02 .news-con { width: 100%; height: 533px; } .news .news-child .swiper02 .news-con .news-con-left { background: #f3f2f1; float: left; width: 480px; height: inherit; text-align: left; } .news .news-child .swiper02 .news-con .news-con-left .small-title { font-size: 20px; line-height: 20px; color: #333; margin: 70px 0; } .news .news-child .swiper02 .news-con .news-con-left .main { height: 196px; font-size: 14px; line-height: 28px; text-align: justify; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; } .news .news-child .swiper02 .news-con .news-con-left a { display: inline-block; width: 170px; height: 45px; background: #c91c28; color: #fff; margin-top: 60px; } .news .news-child .swiper02 .news-con .news-con-left a .more { height: inherit; text-align: center; line-height: 45px; font-size: 14px; letter-spacing: 1px; } .news .news-child .swiper02 .news-con .news-con-left a .more img { width: 26px; height: 26px; vertical-align: middle; margin-left: 20px; border: 0; } .news .news-child .swiper02 .news-con .news-con-left a:hover img { animation: edgeleft 1s; } .news .news-child .swiper02 .news-con .news-con-right { float: left; width: 720px; position: relative; } .news .news-child .swiper02 .news-con .news-con-right .img-box { width: 670px; height: 440px; overflow: hidden; position: absolute; top: 16px; right: 0; z-index: 2; } .news .news-child .swiper02 .news-con .news-con-right .img-box .news-img { width: 100%; height: 100%; transition: all 1s; cursor: pointer; } .news .news-child .swiper02 .news-con .news-con-right .img-box .news-img:hover { transform: scale(1.2); } .news .news-child .swiper02 .swiper-pagination2 { position: absolute; z-index: 20; right: 0; bottom: 63px; text-align: right; } .news .news-child .swiper02 .swiper-pagination2 .swiper-pagination-bullet { display: inline-block; width: 22px; height: 6px; margin: 0 5px; cursor: pointer; background: url(/uploads/image/szimg/rectangle_01.png) no-repeat; background-size: contain; border-radius: 0; opacity: 1; } .news .news-child .swiper02 .swiper-pagination2 .swiper-pagination-bullet-active { width: 62px; height: 6px; background: url(/uploads/image/szimg/rectangle_02.png) no-repeat; background-size: contain; } .news .news-child .white { position: absolute; top: 0; right: 0; height: 533px; width: 470px; background: #fff; } @keyframes edgeleft { 0% { transform: scale(1); } 50% { transform: scale(1.5); } 100% { transform: scale(1); } } .newstwo { width: 1200px; height: 206px; margin: 0 auto 70px; } .newstwo .newstwo-item { width: 530px; height: 206px; background: #fff; } .newstwo .newstwo-item .newtwo-list { width: 530px; font-size: 18px; margin-top: 14px; } .newstwo .newstwo-item .newtwo-list li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 7px; position: relative; } .newstwo .newstwo-item .newtwo-list li .yuan { position: absolute; top: 9px; left: 30px; display: inline-block; width: 4px; height: 4px; background: #c91c28; border-radius: 50%; } .newstwo .newstwo-item .newtwo-list li a { display: inline-block; width: 429px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #333; text-align: left; } .newstwo .newstwo-item .newtwo-list li a:hover { color: #c91c28; } .newstwo .main-btn a { display: inline-block; width: 170px; height: 45px; background: #c91c28; color: #fff; margin-top: 13px; } .newstwo .main-btn a .more { height: inherit; text-align: center; line-height: 45px; font-size: 14px; letter-spacing: 1px; } .newstwo .main-btn a .more img { width: 26px; height: 26px; vertical-align: middle; margin-left: 20px; border: 0; } .newstwo .main-btn a:hover img { animation: edgeleft 1s; } /*media*/ .mediafocus { width: 100%; background: #fff; padding-top: 70px; height: 820px; } .mediafocus .mediacon { width: 1200px; margin: 0 auto; } .mediafocus .mediacon .title { margin-bottom: 80px; } .mediafocus .mediacon .title .media-title { position: absolute; left: 0; top: 0; text-align: left; font-size: 30px; line-height: 30px; letter-spacing: 1px; position: relative; color: #000; z-index: 3; } .mediafocus .mediacon .title .media-title:after { content: ''; display: inline-block; width: 40px; height: 3px; background: #b8914c; position: absolute; bottom: -17px; left: 0; } .mediafocus .mediacon .title .media-con { width: 1035px; margin: 12px 0 0 40px; text-align: left; } .mediafocus .mediacon .swiper03 { position: relative; height: 710px; } .mediafocus .mediacon .swiper03 .swiper-slide .media-main { height: 338px; } .mediafocus .mediacon .swiper03 .swiper-slide .media-main .main-left { width: 600px; height: 338px; position: relative; overflow: hidden; cursor: pointer; } .mediafocus .mediacon .swiper03 .swiper-slide .media-main .main-left .img1 { transition: all 1s; } .mediafocus .mediacon .swiper03 .swiper-slide .media-main .main-left .icon-play { position: absolute; top: calc(50% - 68px); left: calc(50% - 68px); z-index: 2; cursor: pointer; } .mediafocus .mediacon .swiper03 .swiper-slide .media-main .main-left .mask { position: absolute; top: 0; left: 0; z-index: 1; background: rgba(0, 0, 0, 0.2); width: inherit; height: inherit; } .mediafocus .mediacon .swiper03 .swiper-slide .media-main .main-left:hover .img1 { transform: scale(1.2); } .mediafocus .mediacon .swiper03 .swiper-slide .media-main .main-right { width: 530px; } .mediafocus .mediacon .swiper03 .swiper-slide .media-main .main-right .right-item { height: 106px; margin-bottom: 10px; background: #333; } .mediafocus .mediacon .swiper03 .swiper-slide .media-main .main-right .right-item .img-box { width: 146px; height: 106px; overflow: hidden; display: inline-block; position: relative; cursor: pointer; } .mediafocus .mediacon .swiper03 .swiper-slide .media-main .main-right .right-item .img-box .img1 { transition: all 1s; } .mediafocus .mediacon .swiper03 .swiper-slide .media-main .main-right .right-item .img-box .icon-play { position: absolute; top: calc(50% - 35px/2); left: calc(50% - 35px/2); z-index: 2; cursor: pointer; } .mediafocus .mediacon .swiper03 .swiper-slide .media-main .main-right .right-item .img-box .mask { position: absolute; top: 0; left: 0; z-index: 1; background: rgba(0, 0, 0, 0.2); width: inherit; height: inherit; } .mediafocus .mediacon .swiper03 .swiper-slide .media-main .main-right .right-item .img-box:hover .img1 { transform: scale(1.2); } .mediafocus .mediacon .swiper03 .swiper-slide .media-main .main-right .right-item .main { box-sizing: border-box; width: 384px; height: 106px; padding: 17px 13px; text-align: left; background: #f8f8f8; letter-spacing: 1px; } .mediafocus .mediacon .swiper03 .swiper-slide .media-main .main-right .right-item .main p { color: #333; font-size: 14px; line-height: 14px; } .mediafocus .mediacon .swiper03 .swiper-slide .media-main .main-right .right-item .main p:nth-child(1) { font-size: 18px; line-height: 18px; } .mediafocus .mediacon .swiper03 .swiper-slide .media-main .main-right .right-item .main p:nth-child(2) { line-height: 42px; } .mediafocus .mediacon .swiper03 .swiper-slide .media-main .main-right .right-item:last-child { margin-bottom: 0; } .mediafocus .mediacon .swiper03 .swiper-slide .media-main .main-bottom { height: 110px; width: 1200px; margin-top: 47px; } .mediafocus .mediacon .swiper03 .swiper-slide .media-main .main-bottom .right-item { background: #333; height: 106px; margin-bottom: 10px; } .mediafocus .mediacon .swiper03 .swiper-slide .media-main .main-bottom .right-item .img-box { width: 146px; height: 106px; overflow: hidden; display: inline-block; position: relative; cursor: pointer; } .mediafocus .mediacon .swiper03 .swiper-slide .media-main .main-bottom .right-item .img-box .img1 { transition: all 1s; } .mediafocus .mediacon .swiper03 .swiper-slide .media-main .main-bottom .right-item .img-box .icon-play { position: absolute; top: calc(50% - 35px/2); left: calc(50% - 35px/2); z-index: 2; cursor: pointer; } .mediafocus .mediacon .swiper03 .swiper-slide .media-main .main-bottom .right-item .img-box .mask { position: absolute; top: 0; left: 0; z-index: 1; background: rgba(0, 0, 0, 0.2); width: inherit; height: inherit; } .mediafocus .mediacon .swiper03 .swiper-slide .media-main .main-bottom .right-item .img-box:hover .img1 { transform: scale(1.2); } .mediafocus .mediacon .swiper03 .swiper-slide .media-main .main-bottom .right-item .main { box-sizing: border-box; width: 382px; height: 107px; padding: 17px 13px; text-align: left; background: #f8f8f8; letter-spacing: 1px; } .mediafocus .mediacon .swiper03 .swiper-slide .media-main .main-bottom .right-item .main p { color: #333; font-size: 14px; line-height: 14px; } .mediafocus .mediacon .swiper03 .swiper-slide .media-main .main-bottom .right-item .main p:nth-child(1) { font-size: 18px; line-height: 18px; } .mediafocus .mediacon .swiper03 .swiper-slide .media-main .main-bottom .right-item .main p:nth-child(2) { line-height: 42px; } .mediafocus .mediacon .swiper03 .swiper-slide .media-main .main-bottom .right-item .main1 { width: 455px; } .mediafocus .mediacon .swiper03 .swiper-slide .media-main .main-btn a { display: inline-block; width: 170px; height: 45px; background: #c91c28; color: #fff; margin-top: 60px; } .mediafocus .mediacon .swiper03 .swiper-slide .media-main .main-btn a .more { height: inherit; text-align: center; line-height: 45px; font-size: 14px; letter-spacing: 1px; } .mediafocus .mediacon .swiper03 .swiper-slide .media-main .main-btn a .more img { width: 26px; height: 26px; vertical-align: middle; margin-left: 20px; border: 0; } .mediafocus .mediacon .swiper03 .swiper-slide .media-main .main-btn a:hover img { animation: edgeleft 1s; } .mediafocus .mediacon .swiper03 .swiper-pagination3 { position: absolute; z-index: 20; left: 0; bottom: 20px; text-align: left; } .mediafocus .mediacon .swiper03 .swiper-pagination3 .swiper-pagination-bullet { display: inline-block; width: 22px; height: 6px; margin: 0 5px; cursor: pointer; background: url(/uploads/image/szimg/rectangle_01.png) no-repeat; background-size: contain; border-radius: 0; opacity: 1; } .mediafocus .mediacon .swiper03 .swiper-pagination3 .swiper-pagination-bullet-active { width: 62px; background: url(/uploads/image/szimg/rectangle_02.png) no-repeat; background-size: contain; } .mediafocus .mediacon .bottom-main .left-item { height: 106px; margin-bottom: 10px; } .mediafocus .mediacon .bottom-main .left-item .img-box { width: 146px; height: 106px; overflow: hidden; display: inline-block; position: relative; } .mediafocus .mediacon .bottom-main .left-item .img-box video { width: 100%; height: 100%; transition: all 1s; transform: scale(1.33); } .mediafocus .mediacon .bottom-main .left-item .img-box .icon-play { position: absolute; top: calc(50% - 35px/2); left: calc(50% - 35px/2); z-index: 2; cursor: pointer; } .mediafocus .mediacon .bottom-main .left-item .img-box .mask { position: absolute; top: 0; left: 0; z-index: 1; background: rgba(0, 0, 0, 0.2); width: inherit; height: inherit; } .mediafocus .mediacon .bottom-main .left-item .img-box:hover video { transform: scale(1); } .mediafocus .mediacon .bottom-main .left-item .main { width: 358px; height: 90px; padding: 8px 13px; text-align: left; background: #fff; letter-spacing: 1px; } .mediafocus .mediacon .bottom-main .left-item .main p { color: #333; font-size: 14px; line-height: 14px; } .mediafocus .mediacon .bottom-main .left-item .main p:nth-child(1) { font-size: 18px; line-height: 18px; } .mediafocus .mediacon .bottom-main .left-item .main p:nth-child(2) { line-height: 60px; }