.fz40 { font-size: 40px; line-height: 1.3; } .home7 { overflow: hidden; } .home7 .block-item { position: relative; color: #ffffff; height: 100%; height: 900px; } .home7 .h, .home7 a { position: relative; z-index: 1; } .home7 .svg { width: 70px; height: 60px; margin: 0 auto 15px; position: relative; z-index: 1; } .home7 .svg svg { width: 100%; height: 100%; } .home7 .dd:hover { box-shadow: 0 0 20px #4287f5 inset; } .home7 .dd:hover .svg { animation: rubberBand steps(11) 1s forwards; } .home7 .dd:after { content: ""; background: rgba(0, 0, 0, 0.2); position: absolute; left: 0; top: 0; right: 0; bottom: 0; } .home7 .dd img { width: 100%; height: 100%; position: absolute; object-fit: cover; } .home7 .d1 { position: absolute; right: 0; bottom: 20%; width: 55%; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; color: #ffffff; background: url("../image/style.png") center center no-repeat; background-size: cover; height: 80%; transform: translate(0px, 50px); opacity: 1; transition: all 1s ease-out 0s; } .home7 .d1 .more { color: white; display: flex; align-items: center; margin-top: 15px; } .home7 .d1 .more .iconfont { font-size: 35px; margin-right: 15px; } .home7 .d1 .more:hover { color: #80f4ff; } .home7 .d1:before { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; } .home7 .d1 .title { position: relative; z-index: 9; } .home7 .d2 { position: absolute; top: 10%; right: 50%; left: 5%; height: 30%; } .home7 .d2 a { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .home7 .d2 .dd1 { position: absolute; left: 0; top: 0; width: 50%; height: 100%; background-color: #0c4383; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; -ms-flex-direction: column; flex-direction: column; transform: translate(80px, 80px); opacity: 1; transition: all 1s ease-out 0s; } .home7 .d2 .dd2 { position: absolute; left: 50%; top: 0; width: 50%; height: 100%; background-color: #c8a23d; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; -ms-flex-direction: column; flex-direction: column; transform: translate(80px, 80px); opacity: 0; transition: all 1s ease-out 0.2s; } .home7 .d2 .dd3 { position: absolute; left: 50%; top: 50%; width: 50%; height: 50%; background: #ccbd6d; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; -ms-flex-direction: column; flex-direction: column; transform: translate(80px, 80px); opacity: 0; transition: all 1s ease-out 0.4s; } .home7 .d2 .h { font-size: 24px; } .home7 .d2 .more1 { margin-top: 10px; } .home7 .d3 { position: absolute; left: 0; top: 40%; width: 50%; color: #ffffff; background-size: cover; height1: 42%; transform: translate(50px, 0px); opacity: 0; transition: all 1s ease-out 0s; } .home7 .d4 { position: absolute; top: 50%; left: 50%; right: 5%; height: 30%; } .home7 .d4 a { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .home7 .d4 .dd1 { position: absolute; left: 0; top: 50%; width: 50%; height: 100%; background: #4fa48c; background-size: cover; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; -ms-flex-direction: column; flex-direction: column; transform: translate(-80px, 80px); opacity: 1; transition: all 1s ease-out 0.6s; } .home7 .d4 .dd2 { position: absolute; left: 50%; top: 50%; width: 50%; height: 100%; background: #2b68c5; background-size: cover; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; -ms-flex-direction: column; flex-direction: column; transform: translate(-80px, 80px); opacity: 0; transition: all 1s ease-out 0.8s; } .home7 .d4 .dd3 { position: absolute; left: 50%; top: 50%; width: 50%; height: 50%; background: url("../image/style5.png") center center no-repeat; background-size: cover; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; -ms-flex-direction: column; flex-direction: column; transform: translate(-80px, 80px); opacity: 0; transition: all 1s ease-out 1s; } .home7 .d4 .h { font-size: 24px; } .home7 .d4 .more1 { margin-top: 10px; } .home7.showdiv .d1 { transform: none; opacity: 1; } .home7.showdiv .d2 > div { transform: none; opacity: 1; } .home7.showdiv .d3 { transform: none; opacity: 1; } .home7.showdiv .d4 > div { transform: none; opacity: 1; } .st0 { fill: none; stroke: #ffffff; stroke-width: 3; stroke-linecap: round; stroke-miterlimit: 10; } .st1 { fill: none; stroke: #ffffff; stroke-width: 3; stroke-linecap: round; stroke-miterlimit: 10; } .focus1 { position: relative; } .focus1 img { width: 100%; height: auto; } @media screen and (max-width: 1300px) { .home7 .d2 .h { font-size: 20px; } .home7 .svg { height: 45px; margin: 0 auto 10px; } } @media screen and (max-width: 1050px) { .layout-content .content-box3-1 { padding: 20px 0; } .home7 { padding: 30px 0; } .home7 .block-item { height: auto !important; } .home7 .svg { width: 40px; height: 25px; } .home7 .d1 { position: relative; margin: auto; opacity: 1; transform: none; width: auto; height: 80vw; left: auto; top: auto; } .home7 .d1 .title { position: relative; } .home7 .d2 { position: static; margin: auto; opacity: 1; transform: none; width: auto; height: auto; display: -ms-flexbox; display: flex; height: 35vw; } .home7 .d2 .h { font-size: 16px; } .home7 .d2 .dd1 { position: relative; left: auto; top: auto; margin: 0; opacity: 1; transform: none; -ms-flex: 1; flex: 1; width: auto; height: auto; } .home7 .d2 .dd2 { position: relative; left: auto; top: auto; margin: 0; opacity: 1; transform: none; -ms-flex: 1; flex: 1; width: auto; height: auto; } .home7 .d2 .dd3 { position: relative; left: auto; top: auto; margin: 0; opacity: 1; transform: none; -ms-flex: 1; flex: 1; width: auto; height: auto; } .home7 .d3 { position: relative; left: auto; top: auto; margin: auto; opacity: 1; transform: none; width: auto; } .home7 .d4 { position: relative; left: auto; right: auto; top: auto; margin: auto; opacity: 1; transform: none; width: auto; height: auto; display: -ms-flexbox; display: flex; height: 35vw; } .home7 .d4 .dd1 { position: relative; left: auto; top: auto; margin: 0; opacity: 1; transform: none; -ms-flex: 1; flex: 1; width: auto; height: auto; } .home7 .d4 .dd2 { position: relative; left: auto; top: auto; margin: 0; opacity: 1; transform: none; -ms-flex: 1; flex: 1; width: auto; height: auto; } .home7 .d4 .dd3 { position: relative; left: auto; top: auto; margin: 0; opacity: 1; transform: none; -ms-flex: 1; flex: 1; width: auto; height: auto; } .home7 .d4 .dd8 { position: relative; left: auto; top: auto; margin: 0; opacity: 1; transform: none; -ms-flex: 1; flex: 1; width: auto; height: auto; } .home7 .d4 .h { font-size: 16px; } } @keyframes rubberBand { 0% { -webkit-transform: scaleX(1); transform: scaleX(1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } to { -webkit-transform: scaleX(1); transform: scaleX(1); } } /*# sourceMappingURL=watching.css.map */