.bannerslick .slick-dots { position: absolute; overflow: hidden; bottom: 39px; right: 104px; margin: 0 -14px; } .bannerslick .slick-dots li { cursor: pointer; float: left; margin: 0 14px; display: flex; align-items: center; justify-content: center; width: 37px; height: 37px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; background: rgba(255, 255, 255, .5); } .bannerslick .slick-dots li button{ outline: none; background: none; color: #000; font-size: 18px; font-weight: bold; border: 0; } .bannerslick .slick-dots .slick-active { background: rgba(27, 112, 64, .5); } .bannerslick .slick-dots .slick-active button{ color: #fff; } .bannerslick{ position: relative; } .bannerslick .pic img{ display: block; width: 100%; } .ani{position:absolute;width:543px;height:541px;right:100px;bottom:100px;zoom:.7;} .ani-0{position:relative} .ani-0 .btn{position:absolute;right:0;bottom:0;width:100px;height:100px;background:url(../images/plus_03.png) center no-repeat} .ani-0 .btn li{width:23px;height:1px;background-color:#bd326d;position:absolute} .ani-0 .btn .l1{top:22px;left:38px;transform:rotate(0)} .ani-0 .btn .l2{top:30px;left:57px;transform:rotate(45deg)} .ani-0 .btn .l3{top:50px;left:65px;transform:rotate(90deg)} .ani-0 .btn .l4{position:absolute;top:69px;left:57px;transform:rotate(135deg)} .ani-0 .btn .l5{top:77px;left:38px;transform:rotate(180deg)} .ani-0 .btn .l6{top:69px;left:19px;transform:rotate(-135deg)} .ani-0 .btn .l7{position:absolute;top:50px;left:11px;transform:rotate(-90deg)} .ani-0 .btn .l8{position:absolute;top:30px;left:19px;transform:rotate(-45deg)} .wp1.on span{display:block;height:2px;width:0;background-color:#fff;animation:625ms both ani} .wp1.on .l2 span{animation:625ms 625ms both ani} .wp1.on .l3 span{animation:625ms 1.25s both ani} .wp1.on .l4 span{animation:625ms 1.875s both ani} .wp1.on .l5 span{animation:625ms 2.5s both ani} .wp1.on .l6 span{animation:625ms 3.125s both ani} .wp1.on .l7 span{animation:625ms 3.75s both ani} .wp1.on .l8 span{animation:625ms 4.375s both ani} @keyframes ani{ 0%{width:calc(0%)} 25%{width:calc(25%)} 50%{width:calc(50%)} 75%{width:calc(75%)} 100%{width:calc(100%)} } .ani-0 p{font-family:Georgia!important} .ani-01 p,.ani-03 p{color:#fff} .banner .item1, .banner .item2,.banner .slick-slide{display:block;background-repeat:no-repeat;background-position:20% 20%;-webkit-background-size:100%;background-size:100%;position:relative;width:100vw;overflow:hidden} .banner.s1 .ani-01 h3{display:block;opacity:1;font-weight:400;font-size:28px;animation-name:mymove1;animation-duration:2s;} .banner.s1 .ani-01 h3 a{color:#fff} .banner.s2 .ani-02 h3 a,.banner.s3 .ani-02 h3 a{color:#000} .banner .slick-slide img{width: 100%;max-width: none;} .ss1 .slick-active img{animation-name:bb1;animation-duration:8s;animation-timing-function:linear} .ss2 .slick-active img{animation-name:bb2;animation-duration:8s;animation-timing-function:linear} .ss3 .slick-active img{animation-name:bb3;animation-duration:8s;animation-timing-function:linear} @keyframes bb1{ from{transform:scale(1)} to{transform:scale(1.2)} } @-webkit-keyframes bb1{ from{transform:scale(1)} to{transform:scale(1.2)} } @keyframes bb2{ from{transform:scale(1.2) translate(0,0)} to{transform:scale(1.2) translate(50px,0)} } @-webkit-keyframes bb2{ from{transform:scale(1.2) translate(0,0)} to{transform:scale(1.2) translate(50px,0)} } @keyframes bb3{ from{transform:scale(1.2) translate(0,0)} to{transform:scale(1.2) translate(0,50px)} } @-webkit-keyframes bb3{ from{transform:scale(1.2) translate(0,0)} to{transform:scale(1.2) translate(0,50px)} } @keyframes mymove1{ from{top:50px;opacity:0} to{top:100px;opacity:1} } @-webkit-keyframes mymove1{ from{top:50px;opacity:0} to{top:100px;opacity:1} } .banner.s1 .ani-01 p{font-size:80px;position:absolute;bottom:0;left:-45px} .banner.s1 .ani-01{background-color:rgba(147,10,65,.8);color:#fff;padding:102px 40px 47px;height:400px;width:400px;transition:.5s ease-in-out;-webkit-transition:.5s ease-in-out} .banner.s1 .ani-01 .btn{display:block} .banner.s1 .ani-02{background-color:rgba(229,229,229,1);width:140px;height:140px;position:absolute;right:3px;bottom:140px;transition:.5s ease-in-out;-webkit-transition:.5s ease-in-out} .ani-02 .btn,.banner.s1 .ani-02 h3{display:none} .banner.s1 .ani-02 p{font-size:26px;text-align:center;line-height:140px} .banner.s1 .ani-03{background-color:rgba(206,156,68,1);width:140px;height:140px;position:absolute;right:143px;bottom:1px;transition:.5s ease-in-out;-webkit-transition:.5s ease-in-out} .ani-03 .btn,.banner.s1 .ani-03 h3{display:none} .banner.s1 .ani-03 p{font-size:26px;text-align:center;line-height:140px} .banner.s2 .ani-02{background-color:rgba(229,229,229,.8);padding:102px 40px 47px;height:400px;width:400px;position:absolute;bottom:0;left:140px;transition:.5s ease-in-out;-webkit-transition:.5s ease-in-out} .banner.s2 .ani-02 h3{display:block;opacity:1;font-weight:400;font-size:28px;animation-name:mymove2;animation-duration:2s;} @keyframes mymove2{ from{top:50px;opacity:0} to{top:100px;opacity:1} } @-webkit-keyframes mymove2{ from{top:50px;opacity:0} to{top:100px;opacity:1} } .banner.s2 .ani-02 p{font-size:80px;position:absolute;bottom:0;left:-45px} .banner.s2 .ani-02 .btn{display:block} .banner.s2 .ani-01 p{font-size:26px;text-align:center;line-height:140px} .banner.s2 .ani-01 h3{display:none} .banner.s2 .ani-01{width:140px;height:140px;background-color:#930a41;transition:.5s ease-in-out;-webkit-transition:.5s ease-in-out;position:absolute;top:0;left:140px} .banner.s2 .ani-01 .btn{display:none} .banner.s2 .ani-03{background-color:#ce9c44;width:140px;height:140px;position:absolute;transition:.5s ease-in-out;-webkit-transition:.5s ease-in-out;top:140px;left:0} .ani-03 .btn,.banner.s2 .ani-03 h3{display:none} .banner.s2 .ani-03 p{font-size:26px;text-align:center;line-height:140px} .banner.s3 .ani-03{background-color:rgba(206,156,68,.8);padding:102px 40px 47px;height:400px;width:400px;position:absolute;bottom:0;right:140px;transition:.5s ease-in-out;-webkit-transition:.5s ease-in-out} .banner.s3 .ani-03 h3{display:block;font-weight:400;font-size:28px;animation-name:mymove3;animation-duration:2s;} .banner.s3 .ani-03 h3 a{color:#fff} @keyframes mymove3{ from{top:50px;opacity:0} to{top:100px;opacity:1} } @-webkit-keyframes mymove3{ from{top:50px;opacity:0} to{top:100px;opacity:1} } .banner.s3 .ani-03 p{font-size:80px;position:absolute;left:-45px;bottom:45px} .banner.s3 .ani-03 .btn{display:block} .banner.s3 .ani-01 p{font-size:26px;text-align:center;line-height:140px} .banner.s3 .ani-01 h3{display:none} .banner.s3 .ani-01{width:140px;height:140px;background-color:#930a41;transition:.5s ease-in-out;-webkit-transition:.5s ease-in-out;position:absolute;top:2px;right:140px} .banner.s3 .ani-01 .btn{display:none} .banner.s3 .ani-02{background-color:rgba(229,229,229,1);width:140px;height:140px;position:absolute;top:140px;right:0;transition:.5s ease-in-out;-webkit-transition:.5s ease-in-out} .ani-02 .btn,.banner.s3 .ani-02 h3{display:none} .banner.s3 .ani-02 p{font-size:26px;text-align:center;line-height:140px}