.enter_homepage { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: url('/assets/images/homePage/enter/bg.gif') !important; background-repeat: no-repeat; background-size: 100% 100%; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; padding-top: 5%; ._enter_row1 { height: 302px; ._row1_item { width: 1434px; height: 241px; // opacity: 0.8; background: url('/assets/images/homePage/enter/row1.png'); background-repeat: no-repeat; background-size: 100% 100%; cursor: pointer; } ._row1_item:hover { width: 1434px; height: 302.6px; background: url('/assets/images/homePage/enter/row1-select.png'); background-repeat: no-repeat; background-size: 100% 100%; cursor: pointer; } } ._enter_row2 { height: 427px; display: flex; width: 100%; padding-left: 4%; ._row2_item1 { width: 454px; height: 371px; // opacity: 0.8; background: url('/assets/images/homePage/enter/row2-1.png'); background-repeat: no-repeat; background-size: 100% 100%; cursor: pointer; margin-left: 60px; } ._row2_item1:hover { background: url('/assets/images/homePage/enter/row2-1-select.png'); background-repeat: no-repeat; background-size: 100% 100%; cursor: pointer; } ._row2_item2 { margin-left: 60px; width: 454px; height: 371px; // opacity: 0.8; background: url('/assets/images/homePage/enter/row2-2.png'); background-repeat: no-repeat; background-size: 100% 100%; cursor: pointer; } ._row2_item2:hover { background: url('/assets/images/homePage/enter/row2-2-select.png'); background-repeat: no-repeat; background-size: 100% 100%; cursor: pointer; } ._row2_item3 { margin-left: 60px; width: 454px; height: 371px; // opacity: 0.8; background: url('/assets/images/homePage/enter/row2-3.png'); background-repeat: no-repeat; background-size: 100% 100%; cursor: pointer; } ._row2_item3:hover { background: url('/assets/images/homePage/enter/row2-3-select.png'); background-repeat: no-repeat; background-size: 100% 100%; cursor: pointer; } } ._enter_title { position: absolute; top: 4%; left: 3%; width: 575.35px; height: 78px; background: url('/assets/images/homePage/enter/title.png'); background-repeat: no-repeat; background-size: 100% 100%; } ._title { width: 100%; height: 88px; background: url('/assets/images/homePage/bigscreen/top.png'); background-repeat: no-repeat; background-size: 100% 100%; } ._exit { position: absolute; right: 60px; top: 38px; cursor: pointer; color: #C8F0FF; display: flex; ._icon { display: inline-block; width: 28px; height: 28px; background: url('/assets/images/homePage/bigscreen/exit.png'); background-repeat: no-repeat; background-size: 100% 100%; margin-right: 3px; } } .homepage-left { width: 21.8%; height: 89.6%; position: absolute; top: 8.2%; z-index: 300; } .homepage-center { width: 49.16%; height: 89.6%; position: absolute; bottom: 2.4%; left: 25.5%; padding-left: 16px; padding-right: 16px; z-index: 400; ._top { margin-top: 5%; height: calc(100% - 200px); background: url('/assets/images/homePage/bigscreen/centerbg.png'); background-repeat: no-repeat; background-size: 100% 100%; position: relative; } } .homepage-left-left { left: 48px; } .homepage-left-right { right: 48px; } } .list { list-style: none; height: 100%; } .list .child { box-sizing: border-box; opacity: 0; transform: translateX(-300px); animation: show .5s forwards; } .list .child.show { animation-delay: 0s !important; } .list .child.hide { opacity: 1; transform: translateX(0); animation-name: hide; animation-delay: 0s; } /*animation-delay*/ .list .child:not(.hide):nth-child(5n + 1) { animation-delay: .3s; } .list .child:not(.hide):nth-child(5n + 2) { animation-delay: .6s; } .list .child:not(.hide):nth-child(5n + 3) { animation-delay: .9s; } .list .child:not(.hide):nth-child(5n + 4) { animation-delay: 1.2s; } .list .child:not(.hide):nth-child(5n + 5) { animation-delay: 1.5s; } .list .child-right { box-sizing: border-box; opacity: 0; transform: translateX(300px); animation: show .5s forwards; } .list .child-right.show { animation-delay: 0s !important; } .list .child-right.hide { opacity: 1; transform: translateX(0); animation-name: hide; animation-delay: 0s; } /*animation-delay*/ .list .child-right:not(.hide):nth-child(5n + 1) { animation-delay: .3s; } .list .child-right:not(.hide):nth-child(5n + 2) { animation-delay: .6s; } .list .child-right:not(.hide):nth-child(5n + 3) { animation-delay: .9s; } .list .child-right:not(.hide):nth-child(5n + 4) { animation-delay: 1.2s; } .list .child-right:not(.hide):nth-child(5n + 5) { animation-delay: 1.5s; } .list .child-top { box-sizing: border-box; opacity: 0; transform: translateY(300px); animation: show 1s forwards; } .list .child-top.show { animation-delay: 0s !important; } .list .child-top.hide { opacity: 1; transform: translateY(0); animation-name: hide; animation-delay: 0s; } @keyframes show { to { opacity: 1; transform: translateX(0); } } @keyframes hide { to { opacity: 0; transform: translateX(100px); max-height: 0; margin: 0; } } .center-card-title { height: 31px; font-family: YouSheBiaoTiHei; font-size: 24px; color: #FFFFFF; display: flex; align-items: center; margin-top: 5px; ._icon_left { width: 32px; height: 17px; background: url('/assets/images/homePage/bigscreen/center-left.png'); background-repeat: no-repeat; background-size: 100% 100%; margin-right: 11px; margin-left: 10px; } ._icon_right { width: 32px; height: 17px; background: url('/assets/images/homePage/bigscreen/center-right.png'); background-repeat: no-repeat; background-size: 100% 100%; margin-right: 11px; margin-left: 10px; } }