.ts-cont1 .a4_v1 { position: absolute; width: 100%; left: 0; top: 20%; z-index: 10; } .ts-cont1 .a4_v2 .a4_b2 li { flex: 1; height: 100vh; border-left: 1px solid rgba(255, 255, 255, 0.2); position: relative; transition: all .6s; } .flex2 { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .flex-z { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; } .ts-cont1 .a4_v2 .a4_b2 li:last-child { border-right: 1px solid rgba(255, 255, 255, 0.1); } .ts-cont1 .a4_v2 .a4_b2 li .sdta { transition: all .6s; position: relative; z-index: 2; } .ts-cont1 .a4_v2 .a4_b2 li .sdta a { display: block; color: #fff; } .ts-cont1 .a4_v2 .a4_b2 li .sdta a:nth-child(1) { --asjd: 3.75rem; height: var(--asjd); line-height: var(--asjd); width: fit-content; margin: 0 auto; display: none; } .ts-cont1 .a4_v2 .a4_b2 li .sdta a:nth-child(1) img { width: var(--asjd); filter: brightness(0) invert(1); } .ts-cont1 .a4_v2 .a4_b2 li .sdta a:nth-child(2) { font-size: 1.65rem; margin: 1.4rem 0; } .ts-cont1 .a4_v2 .a4_b2 li .sdta a:nth-child(3) { display: flex; width: 2rem; height: 2rem; font-size: 1.25rem; margin: 0 auto; border: 1px solid #DC5A2D; border-radius: 0.5rem; transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; } .ts-cont1 .a4_v2 .a4_b2 li .sdta a:nth-child(3) i { font-size: 1rem; } .ts-cont1 .a4_v2 .a4_b2 li .sdta a:nth-child(3):hover { background: #DC5A2D; transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; } .ts-cont1 .a4_v2 .a4_b2 li:hover .sdta { /*transform:scale(1.125)*/ } .ts-cont1 .a4_v2 .a4_b2 li:hover { flex: 2; } @media (max-width: 768px) { .ts-cont1 .a4_v2 .a4_b2 li:hover { flex: auto; padding: 2.75rem 0; } } .ts-cont1 .a4_v2 .a4_b2 li u { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; } .ts-cont1 .a4_v2 .a4_b2 li u img { width: 100%; height: 100%; object-fit: cover; } .ts-cont1 .a4_v2 .a4_b2 li:after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.65); } .ts-cont1 .a4_v2 .a4_b2 li:hover:after { opacity: 0; } .title { color: #fff; } .ta{ /* font-size: 2.25rem; font-weight: bold; */ text-align: center; font-size: calc(100vw / 120); font-size: 2.25rem; }