@charset "UTF-8"; body, html { font-size: 0.8333333333vw; } .header{ display: none; } @media (min-width: 1024px) and (max-width: 1366px) { body, html { font-size: 1vw; } } @media (min-width: 767px) and (max-width: 1024px) { body, html { font-size: 1.1111111111vw; } } @media (max-width: 767px) { body, html { font-size: 14px; } } body { font-family: "Roboto", sans-serif !important; background: #060910; overflow: visible; } body * { outline: none; } p { padding: 0; margin: 0; } :root { --color-bs: #fff; --color-ys: #7F7F7F; --color-zt: #0095FF; --head-height: 4.375rem; --cbasta: 13.5416666667%; --pandrd: 5.375rem; --borderRadius: 2.5rem; } @media (max-width: 1366px) { :root { --cbasta: 5.25%; } } @media (max-width: 768px) { :root { --cbasta: 4%; --pandrd: 2rem; --borderRadius: 1rem; } } .wh { padding: 0 var(--cbasta); } .wh1 { padding: 0 10.7222222222%; } @media (max-width: 768px) { .wh1 { padding: 0 3.5%; } } .flex { 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; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; } .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; } .flex_left { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-justify-content: start; -moz-box-pack: start; -ms-flex-pack: start; justify-content: start; -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; } .flex_left1 { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-justify-content: start; -moz-box-pack: start; -ms-flex-pack: start; justify-content: start; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .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; } .flex3 { 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; -webkit-align-items: flex-end; -moz-box-align: end; -ms-flex-align: end; align-items: flex-end; } .flex21 { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-justify-content: flex-end; -moz-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media (max-width: 990px) { .pc-hidden { display: none; } } .m-hidden { display: none; } @media (max-width: 990px) { .m-hidden { display: block; } } /* end */ @-webkit-keyframes banscaleDraw { /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/ 0% { -webkit-transform: scale(1); transform: scale(1); /*开始为原始大小*/ } 25% { -webkit-transform: scale(1.1); transform: scale(1.1); /*放大1.1倍*/ } 50% { -webkit-transform: scale(1.2); transform: scale(1.2); } 75% { -webkit-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @-moz-keyframes banscaleDraw { /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/ 0% { -moz-transform: scale(1); transform: scale(1); /*开始为原始大小*/ } 25% { -moz-transform: scale(1.1); transform: scale(1.1); /*放大1.1倍*/ } 50% { -moz-transform: scale(1.2); transform: scale(1.2); } 75% { -moz-transform: scale(1.1); transform: scale(1.1); } 100% { -moz-transform: scale(1); transform: scale(1); } } @-o-keyframes banscaleDraw { /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/ 0% { -o-transform: scale(1); transform: scale(1); /*开始为原始大小*/ } 25% { -o-transform: scale(1.1); transform: scale(1.1); /*放大1.1倍*/ } 50% { -o-transform: scale(1.2); transform: scale(1.2); } 75% { -o-transform: scale(1.1); transform: scale(1.1); } 100% { -o-transform: scale(1); transform: scale(1); } } @keyframes banscaleDraw { /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/ 0% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); /*开始为原始大小*/ } 25% { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); /*放大1.1倍*/ } 50% { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } 75% { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); } } .swiper { overflow: hidden; } .overa { overflow: hidden; } /* 图片动画 */ .fang { overflow: hidden; display: block; } .fang img { -webkit-transition: all 0.6s; -o-transition: all 0.6s; -moz-transition: all 0.6s; transition: all 0.6s; } .fang:hover img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .xz img { -webkit-transition: all 0.5s; -o-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s; } .xz:hover img { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); transform: rotateY(180deg); } .top { -webkit-transition: all 0.5s; -o-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s; } .top:hover { -webkit-transform: translateY(-1rem); -moz-transform: translateY(-1rem); -ms-transform: translateY(-1rem); -o-transform: translateY(-1rem); transform: translateY(-1rem); } .heng1 { display: block; font-size: 0; } .heng1 img { width: 100%; } .hidden { display: none; } @-webkit-keyframes image-zoom-out { from { -webkit-transform: scale(1, 1); transform: scale(1, 1); } to { -webkit-transform: scale(1.15, 1.15); transform: scale(1.15, 1.15); } } @-moz-keyframes image-zoom-out { from { -moz-transform: scale(1, 1); transform: scale(1, 1); } to { -moz-transform: scale(1.15, 1.15); transform: scale(1.15, 1.15); } } @-o-keyframes image-zoom-out { from { -o-transform: scale(1, 1); transform: scale(1, 1); } to { -o-transform: scale(1.15, 1.15); transform: scale(1.15, 1.15); } } @keyframes image-zoom-out { from { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } to { -webkit-transform: scale(1.15, 1.15); -moz-transform: scale(1.15, 1.15); -o-transform: scale(1.15, 1.15); transform: scale(1.15, 1.15); } } @-webkit-keyframes introCover { from { -webkit-transform: scale(0.9); transform: scale(0.9); } to { -webkit-transform: scale(1); transform: scale(1); } } @-moz-keyframes introCover { from { -moz-transform: scale(0.9); transform: scale(0.9); } to { -moz-transform: scale(1); transform: scale(1); } } @-o-keyframes introCover { from { -o-transform: scale(0.9); transform: scale(0.9); } to { -o-transform: scale(1); transform: scale(1); } } @keyframes introCover { from { -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); } to { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); } } .mouse-default { opacity: 0.35; position: fixed; top: -30rem; left: -30rem; width: 50rem; height: 50rem; border-radius: 50%; z-index: -1; pointer-events: none; -webkit-filter: blur(2rem); filter: blur(2rem); } .mouse-default:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; content: ""; backdrop-filter: blur(5px); background: -webkit-radial-gradient(center, ellipse, rgb(0, 149, 255) 0%, rgba(0, 149, 255, 0.74) 27%, rgba(0, 149, 255, 0.37) 52%, rgba(0, 149, 255, 0) 78%, rgba(0, 149, 255, 0) 100%); background: -moz-radial-gradient(center, ellipse, rgb(0, 149, 255) 0%, rgba(0, 149, 255, 0.74) 27%, rgba(0, 149, 255, 0.37) 52%, rgba(0, 149, 255, 0) 78%, rgba(0, 149, 255, 0) 100%); background: -o-radial-gradient(center, ellipse, rgb(0, 149, 255) 0%, rgba(0, 149, 255, 0.74) 27%, rgba(0, 149, 255, 0.37) 52%, rgba(0, 149, 255, 0) 78%, rgba(0, 149, 255, 0) 100%); background: radial-gradient(ellipse at center, rgb(0, 149, 255) 0%, rgba(0, 149, 255, 0.74) 27%, rgba(0, 149, 255, 0.37) 52%, rgba(0, 149, 255, 0) 78%, rgba(0, 149, 255, 0) 100%); } @media all and (max-width: 800px) { .mouse-default { visibility: hidden !important; opacity: 0 !important; } } .cont1 { position: relative; } .cont1 .a1v1 { -webkit-animation: introCover 1.2s ease-in-out forwards; -moz-animation: introCover 1.2s ease-in-out forwards; -o-animation: introCover 1.2s ease-in-out forwards; animation: introCover 1.2s ease-in-out forwards; position: relative; } .cont1 .a1v1 .img { border-radius: var(--borderRadius); overflow: hidden; position: relative; } .cont1 .a1v1 .img::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.25); } .cont1 .a1v1 .img video { position: absolute; left: 0; top: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } @media (max-width: 768px) { .cont1 .a1v1 .img video { display: none; } } .cont1 .a1v1 .img img { width: 100%; aspect-ratio: 16/7.2; -o-object-fit: cover; object-fit: cover; } @media (max-width: 768px) { .cont1 .a1v1 .img img { aspect-ratio: 9/9; } } .cont1 .a1v1 a.czbof { position: absolute; right: -webkit-calc(var(--cbasta) * 0.3); right: -moz-calc(var(--cbasta) * 0.3); right: calc(var(--cbasta) * 0.3); bottom: 5.5%; z-index: 9; width: 5.25rem; } @media (max-width: 768px) { .cont1 .a1v1 a.czbof { width: 3.125rem; } } .cont1 .a1v1 a.czbof img { width: 100%; } .cont1 .a1v2 { position: absolute; left: 0; top: 20%; width: 100%; text-align: center; padding: 0 10%; color: #fff; } @media (max-width: 768px) { .cont1 .a1v2 { padding: 0 5%; } } .cont1 .a1v2 .tit { font-size: 6.625rem; line-height: 1.25em; font-weight: 900; } @media (max-width: 768px) { .cont1 .a1v2 .tit { font-size: 2.125rem; } } .cont1 .a1v2 .p1 { font-size: 3.75rem; font-weight: 700; line-height: 1.25em; } @media (max-width: 768px) { .cont1 .a1v2 .p1 { font-size: 1.25rem; margin-top: 0.75rem; } } .cont1 .a1v2 .p2 { font-size: 2rem; line-height: 1.5em; font-weight: 500; } @media (max-width: 768px) { .cont1 .a1v2 .p2 { font-size: 1.125rem; margin-top: 0.65rem; } } .cont1 .a1v2 .more-ax { color: #fff; font-size: 1.125rem; line-height: 1.5em; border: 1px solid #fff; padding: 0.85rem 1.85em; display: block; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin: 1.5rem auto 0; border-radius: 2.5rem; -webkit-transition: all 0.4s; -o-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } @media (max-width: 768px) { .cont1 .a1v2 .more-ax { padding: 0.65rem 1.5em; font-size: 1rem; } } .cont1 .a1v2 .more-ax:hover { background: #fff; color: #0095FF; } .cont2 { background: rgba(255, 255, 255, 0.02); border-radius: var(--borderRadius); margin-top: 5rem; padding: 7.9375rem 0 17.875rem; position: relative; overflow: hidden; } @media (max-width: 768px) { .cont2 { margin-top: 1.85rem; padding: 1.75rem 0 2rem; } } .cont2::after { content: ""; display: block; position: absolute; left: 50%; bottom: -60%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); width: 50%; aspect-ratio: 1/1; border-radius: 50%; background: rgba(0, 149, 255, 0.3); -webkit-filter: blur(200px); filter: blur(200px); } .cont2 .a2v1 { color: #fff; gap: 1.25rem; margin-bottom: 5rem; } @media (max-width: 768px) { .cont2 .a2v1 { gap: 0.85rem; } } .cont2 .a2v1 .a2b1 { font-size: 3.375rem; line-height: 1.25em; font-weight: 800; } .cont2 .a2v1 .a2b1 img { height:12rem; width: auto; margin-left: 12rem; } @media (max-width: 768px) { .cont2 .a2v1 .a2b1 { width: 100%; font-size: 1.85rem; display: flex; justify-content: center !important; align-items: center !important; } .cont2 .a2v1 .a2b1 img { height:130px; width: auto; margin-left: inherit; } } .cont2 .a2v1 .a2b2 { font-size: 1.25rem; line-height: 1.4em; width: 65.7142857143%; } @media (max-width: 768px) { .cont2 .a2v1 .a2b2 { width: 100%; font-size: 1.125rem; } } .cont2 .a2v2 { color: #fff; font-size: 5.875rem; line-height: 1.125em; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin: 0 auto; margin-top: -1.25rem; font-weight: 500; opacity: 0.9; } @media (max-width: 768px) { .cont2 .a2v2 { font-size: 2.65rem; margin-top: 0.65rem; } } .cont2 .a2v2 b { display: block !important; margin-left: 2.25em; } .cont2 .a2v3 { 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; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; margin-top: -5rem; } @media (max-width: 768px) { .cont2 .a2v3 { margin-top: 1.25rem; } } .cont2 .a2v3 li { width: 26.9285714286%; border-radius: var(--borderRadius); background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(3.5px); padding: 2.8125rem 3% 4.375rem; } @media (max-width: 768px) { .cont2 .a2v3 li { width: 100%; padding: 1.5rem 7%; } .cont2 .a2v3 li + li { margin-top: 1.5rem; } } .cont2 .a2v3 li u { display: block; font-size: 0; width: 6.25rem; } @media (max-width: 768px) { .cont2 .a2v3 li u { width: 5rem; } } .cont2 .a2v3 li u img { width: 100%; } .cont2 .a2v3 li .tit { font-size: 1.25rem; line-height: 1.125em; margin-top: 2.25rem; color: #FFFFFF; } @media (max-width: 768px) { .cont2 .a2v3 li .tit { margin-top: 1rem; font-size: 1.125rem; } } .cont2 .a2v3 li .tit span { color: var(--color-zt); font-size: 2.25rem; } @media (max-width: 768px) { .cont2 .a2v3 li .tit span { font-size: 2rem; } } .cont2 .a2v3 li .txt { color: rgba(255, 255, 255, 0.5); font-size: 1rem; line-height: 1.25em; margin-top: 0.75rem; } .cont2 .a2v3 li:nth-child(2) { -webkit-transform: translateY(10rem); -moz-transform: translateY(10rem); -ms-transform: translateY(10rem); -o-transform: translateY(10rem); transform: translateY(10rem); } @media (max-width: 768px) { .cont2 .a2v3 li:nth-child(2) { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } .cont2 .a2v3 li:nth-child(3) { -webkit-transform: translateY(5.375rem); -moz-transform: translateY(5.375rem); -ms-transform: translateY(5.375rem); -o-transform: translateY(5.375rem); transform: translateY(5.375rem); } @media (max-width: 768px) { .cont2 .a2v3 li:nth-child(3) { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } .title1 { font-size: 3.375rem; line-height: 1.125em; color: #fff; } @media (max-width: 768px) { .title1 { font-size: 2rem; } } .title1 .tit { font-weight: 600; } .title1 .ftxt { font-size: 2rem; font-weight: 500; line-height: 1.35em; margin-top: 0.35rem; } @media (max-width: 768px) { .title1 .ftxt { font-size: 1.25rem; margin-top: 0.25rem; } } @-webkit-keyframes spin { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-moz-keyframes spin { to { -moz-transform: rotate(360deg); transform: rotate(360deg); } } @-o-keyframes spin { to { -o-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin { to { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } .cont3 { background: rgba(255, 255, 255, 0.02); border-radius: var(--borderRadius); margin-top: 5rem; padding: 10.4375rem 0 11.6875rem; position: relative; overflow: hidden; } @media (max-width: 768px) { .cont3 { margin-top: 2rem; padding: 3.5rem 0 2rem; } } .cont3::after { content: ""; display: block; position: absolute; left: 50%; bottom: 0; -webkit-transform: translateX(-50%) translateY(50%); -moz-transform: translateX(-50%) translateY(50%); -ms-transform: translateX(-50%) translateY(50%); -o-transform: translateX(-50%) translateY(50%); transform: translateX(-50%) translateY(50%); width: 40%; aspect-ratio: 1/1; border-radius: 50%; background: rgba(0, 149, 255, 0.2); -webkit-filter: blur(200px); filter: blur(200px); } .cont3 .a3-sdvt1 { position: absolute; left: 0; width: 100%; aspect-ratio: 16/8; top: 0; z-index: 0; } .cont3 .a3-sdvt1::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; background: -webkit-linear-gradient(top, transparent 0%, #060910 100%); background: -moz-linear-gradient(top, transparent 0%, #060910 100%); background: -o-linear-gradient(top, transparent 0%, #060910 100%); background: linear-gradient(180deg, transparent 0%, #060910 100%); } .cont3 .a3-sdvt1 img { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; opacity: 0.5; } .cont3 .a3-sdvt1 video { position: absolute; left: 0; top: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .cont3 .wh1 { position: relative; z-index: 3; } .cont3 .a3v1 .a3b1 { width: 49.9285714286%; background: rgba(255, 255, 255, 0.05); border-radius: 3.75rem; padding: 6.25rem 10%; position: relative; } @media (max-width: 768px) { .cont3 .a3v1 .a3b1 { width: 100%; -webkit-order: 1; -moz-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; border-radius: 1.25rem; padding: 2.5rem 10%; margin-top: 1.65rem; } } .cont3 .a3v1 .a3b1 .asht1 { position: absolute; left: 0; width: 100%; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); color: #fff; font-size: 1.9375rem; font-weight: 700; text-align: center; } @media (max-width: 768px) { .cont3 .a3v1 .a3b1 .asht1 { font-size: 1.5rem; } } .cont3 .a3v1 .a3b1 .asht1 span { color: var(--color-zt); } .cont3 .a3v1 .a3b1 .jas-a1 { 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; -webkit-align-content: space-between; -ms-flex-line-pack: justify; align-content: space-between; aspect-ratio: 1/1; position: relative; gap: 2rem; } .cont3 .a3v1 .a3b1 .jas-a1::after { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: url('https://s3.amazonaws.com/mfs.ezvizlife.com/mall/static/20261019/qqjt.svg') no-repeat center/100%; -webkit-animation: spin 12s linear infinite; -moz-animation: spin 12s linear infinite; -o-animation: spin 12s linear infinite; animation: spin 12s linear infinite; } .cont3 .a3v1 .a3b1 .jas-a1 li { width: 34.8837209302%; aspect-ratio: 1/1; background: rgba(255, 255, 255, 0.07); backdrop-filter: blur(20px); border-radius: 50%; position: relative; z-index: 1; -webkit-transition: all 0.4s; -o-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } .cont3 .a3v1 .a3b1 .jas-a1 li .tit { font-size: 0.875rem; line-height: 1.125em; color: #FFFFFF; } .cont3 .a3v1 .a3b1 .jas-a1 li .tit span { font-size: 1.6612rem; color: var(--color-zt); } @media (max-width: 768px) { .cont3 .a3v1 .a3b1 .jas-a1 li .tit span { font-size: 1.5rem; } } .cont3 .a3v1 .a3b1 .jas-a1 li:nth-child(3) { -webkit-order: 1; -moz-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .cont3 .a3v1 .a3b1 .jas-a1 li.on { background: -webkit-linear-gradient(303deg, #0095FF -0.24%, rgba(0, 149, 255, 0) 96.32%); background: -moz-linear-gradient(303deg, #0095FF -0.24%, rgba(0, 149, 255, 0) 96.32%); background: -o-linear-gradient(303deg, #0095FF -0.24%, rgba(0, 149, 255, 0) 96.32%); background: linear-gradient(147deg, #0095FF -0.24%, rgba(0, 149, 255, 0) 96.32%); } .cont3 .a3v1 .a3b2 { width: 43.0714285714%; color: #fff; } @media (max-width: 768px) { .cont3 .a3v1 .a3b2 { width: 100%; } } .cont3 .a3v1 .a3b2 .p-txt { font-size: 1.25rem; line-height: 1.4em; } @media (max-width: 768px) { .cont3 .a3v1 .a3b2 .p-txt { font-size: 1.125rem; } } .cont3 .a3v1 .a3b2 .p-txt p { margin-top: 1em; } @media (max-width: 768px) { .cont3 .a3v1 .a3b2 .p-txt p { margin-top: 0.5em; } } .cont3 .a3v2 { margin-top: 10rem; } @media (max-width: 768px) { .cont3 .a3v2 { margin-top: 4rem; } } .cont3 .a3v2 .a3v2c1 { position: relative; margin-top: 4.6875rem; } @media (max-width: 768px) { .cont3 .a3v2 .a3v2c1 { margin-top: 1.5rem; } } .cont3 .a3v2 .a3v2c1 .img1 { width: 54.6428571429%; } @media (max-width: 768px) { .cont3 .a3v2 .a3v2c1 .img1 { width: 100%; } } .cont3 .a3v2 .a3v2c1 .img1 img { width: 100%; } .cont3 .a3v2 .a3v2c1 .cont-p { width: 41.5714285714%; } @media (max-width: 768px) { .cont3 .a3v2 .a3v2c1 .cont-p { width: 100%; margin-top: 1rem; } } .cont3 .a3v2 .a3v2c1 .cont-p .ast1 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem 2rem; margin-bottom: 2.25rem; } @media (max-width: 768px) { .cont3 .a3v2 .a3v2c1 .cont-p .ast1 { grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-bottom: 1.85rem; } } .cont3 .a3v2 .a3v2c1 .cont-p .ast1 li { background: -webkit-linear-gradient(left, #0095FF 0%, rgba(0, 149, 255, 0) 100%); background: -moz-linear-gradient(left, #0095FF 0%, rgba(0, 149, 255, 0) 100%); background: -o-linear-gradient(left, #0095FF 0%, rgba(0, 149, 255, 0) 100%); background: linear-gradient(90deg, #0095FF 0%, rgba(0, 149, 255, 0) 100%); border-radius: 0.395rem; color: #fff; font-size: 1rem; line-height: 1.5em; padding: 0.85em 2em; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-content: center; -ms-flex-line-pack: center; align-content: center; } .cont3 .a3v2 .a3v2c1 .cont-p .ast1 li p { width: 100%; } @media (max-width: 768px) { .cont3 .a3v2 .a3v2c1 .cont-p .ast1 li { line-height: 1.25em; padding: 0.85em 1.5em; } } .cont3 .a3v2 .a3v2c1 .cont-p .mySwiper1 .swiper-slide { color: #fff !important; background-color: transparent !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; } .cont3 .a3v2 .a3v2c1 .cont-p .mySwiper1 .swiper-slide .tit { font-size: 2rem; line-height: 1.25em; font-weight: 500; } @media (max-width: 768px) { .cont3 .a3v2 .a3v2c1 .cont-p .mySwiper1 .swiper-slide .tit { font-size: 1.5rem; } } .cont3 .a3v2 .a3v2c1 .cont-p .mySwiper1 .swiper-slide .txt { font-size: 1.25rem; line-height: 1.4em; margin-top: 1rem; text-align: left !important; } @media (max-width: 768px) { .cont3 .a3v2 .a3v2c1 .cont-p .mySwiper1 .swiper-slide .txt { font-size: 1rem; margin-top: 0.65rem; } } .cont3 .a3v2 .a3v2c1 .cont-p .mySwiper1 .swiper-slide .txt span { color: var(--color-zt); } .cont3 .a3v2 .a3v2c1 .cont-p .mySwiper1 .swiper-pagination1 { margin-top: 1.5rem; } .cont3 .a3v2 .a3v2c1 .cont-p .mySwiper1 .swiper-pagination1 span { width: 0.5625rem !important; height: 0.5625rem; background: rgba(255, 255, 255, 0.1); opacity: 1; margin-right: 0.5rem; } .cont3 .a3v2 .a3v2c1 .cont-p .mySwiper1 .swiper-pagination1 span.swiper-pagination-bullet-active { background: #0095FF; } .cont3 .a3v3 { margin-top: 8.4375rem; } @media (max-width: 768px) { .cont3 .a3v3 { margin-top: 2rem; } } .cont3 .a3v3 .a3v3list1 { margin-top: 4.5rem; } @media (max-width: 768px) { .cont3 .a3v3 .a3v3list1 { margin-top: 1.5rem; } } .cont3 .a3v3 .a3v3list1 li { background: rgba(255, 255, 255, 0.05); border-radius: var(--borderRadius); padding: 2.375rem 2.8571428571%; } @media (max-width: 768px) { .cont3 .a3v3 .a3v3list1 li { padding: 1.5rem 5%; } } .cont3 .a3v3 .a3v3list1 li + li { margin-top: 3.125rem; } @media (max-width: 768px) { .cont3 .a3v3 .a3v3list1 li + li { margin-top: 1.5rem; } } .cont3 .a3v3 .a3v3list1 li .img { width: 42.6923076923%; display: block; font-size: 0; border-radius: var(--borderRadius); overflow: hidden; } @media (max-width: 768px) { .cont3 .a3v3 .a3v3list1 li .img { width: 100%; } } .cont3 .a3v3 .a3v3list1 li .img img { width: 100%; } .cont3 .a3v3 .a3v3list1 li .cont-p { width: 52.9230769231%; color: #fff; } @media (max-width: 768px) { .cont3 .a3v3 .a3v3list1 li .cont-p { width: 100%; margin-top: 1.25rem; } } .cont3 .a3v3 .a3v3list1 li .cont-p .tit { font-size: 2rem; line-height: 1.25em; font-weight: 500; } @media (max-width: 768px) { .cont3 .a3v3 .a3v3list1 li .cont-p .tit { font-size: 1.5rem; } } .cont3 .a3v3 .a3v3list1 li .cont-p .txt { font-size: 1.25rem; line-height: 1.4em; margin-top: 1rem; } @media (max-width: 768px) { .cont3 .a3v3 .a3v3list1 li .cont-p .txt { font-size: 1rem; margin-top: 0.65rem; } } .cont3 .a3v3 .a3v3list1 li .cont-p .txt span { color: var(--color-zt); } .cont4 { background: rgba(255, 255, 255, 0.02); border-radius: var(--borderRadius); margin-top: 5rem; padding: 7.25rem 0 7.5rem; position: relative; } @media (max-width: 768px) { .cont4 { margin-top: 2rem; padding: 1.5rem 0; } } .cont4 .a4-bj1 { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; } .cont4 .a4-bj1::after { content: ""; display: block; position: absolute; left: 50%; bottom: 0; -webkit-transform: translateX(-50%) translateY(50%); -moz-transform: translateX(-50%) translateY(50%); -ms-transform: translateX(-50%) translateY(50%); -o-transform: translateX(-50%) translateY(50%); transform: translateX(-50%) translateY(50%); width: 58.5714285714%; aspect-ratio: 1/1; border-radius: 50%; background: rgba(0, 149, 255, 0.3); -webkit-filter: blur(200px); filter: blur(200px); } .cont4 .wh1 { position: relative; z-index: 1; } .cont4 .wh1 .a4v1 { margin-top: 5rem; position: relative; } @media (max-width: 768px) { .cont4 .wh1 .a4v1 { margin-top: 1.5rem; } } .cont4 .wh1 .a4v1 .iasng { width: 38.8571428571%; position: absolute; left: 50%; top: 35%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } @media (max-width: 768px) { .cont4 .wh1 .a4v1 .iasng { display: none; } } .cont4 .wh1 .a4v1 .iasng svg { width: 100%; -webkit-transform: rotateX(68deg); -moz-transform: rotateX(68deg); transform: rotateX(68deg); -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; } .cont4 .wh1 .a4v1 .iasng svg .ring-segment, .cont4 .wh1 .a4v1 .iasng svg .ring-point { fill: #fff; fill-opacity: 0.1; -webkit-transition: fill 0.3s ease, fill-opacity 0.3s ease; -o-transition: fill 0.3s ease, fill-opacity 0.3s ease; -moz-transition: fill 0.3s ease, fill-opacity 0.3s ease; transition: fill 0.3s ease, fill-opacity 0.3s ease; } .cont4 .wh1 .a4v1 .iasng img { width: 100%; -webkit-transform: rotateX(68deg); -moz-transform: rotateX(68deg); transform: rotateX(68deg); -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; } .cont4 .wh1 .a4v1.is-active-1 .iasng svg .ring-segment-1 { fill: #0095FF; fill-opacity: 0.25; } .cont4 .wh1 .a4v1.is-active-1 .iasng svg .ring-point-1 { fill: #0095FF; fill-opacity: 0.45; } .cont4 .wh1 .a4v1.is-active-2 .iasng svg .ring-segment-2 { fill: #0095FF; fill-opacity: 0.25; } .cont4 .wh1 .a4v1.is-active-2 .iasng svg .ring-point-2 { fill: #0095FF; fill-opacity: 0.45; } .cont4 .wh1 .a4v1.is-active-3 .iasng svg .ring-segment-3 { fill: #0095FF; fill-opacity: 0.25; } .cont4 .wh1 .a4v1.is-active-3 .iasng svg .ring-point-3 { fill: #0095FF; fill-opacity: 0.45; } .cont4 .wh1 .a4v1 .ast1-ax { 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; gap: 3.75rem 0; } @media (max-width: 768px) { .cont4 .wh1 .a4v1 .ast1-ax { gap: 1.75rem 0; } } .cont4 .wh1 .a4v1 .ast1-ax li { width: 26.4285714286%; text-align: center; color: #fff; -webkit-transition: opacity 0.3s ease; -o-transition: opacity 0.3s ease; -moz-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } @media (max-width: 768px) { .cont4 .wh1 .a4v1 .ast1-ax li { width: 100%; } } .cont4 .wh1 .a4v1 .ast1-ax li.on { opacity: 1; } .cont4 .wh1 .a4v1 .ast1-ax li:nth-child(2) { margin-left: 45%; } @media (max-width: 768px) { .cont4 .wh1 .a4v1 .ast1-ax li:nth-child(2) { margin-left: 0; } } .cont4 .wh1 .a4v1 .ast1-ax li u { display: block; font-size: 0; width: 7.75rem; margin: 0 auto; } @media (max-width: 768px) { .cont4 .wh1 .a4v1 .ast1-ax li u { width: 5rem; } } .cont4 .wh1 .a4v1 .ast1-ax li u img { width: 100%; } .cont4 .wh1 .a4v1 .ast1-ax li .tit { font-size: 2rem; font-weight: 500; line-height: 1.5em; margin-top: 0.5rem; } @media (max-width: 768px) { .cont4 .wh1 .a4v1 .ast1-ax li .tit { font-size: 1.65rem; } } .cont4 .wh1 .a4v1 .ast1-ax li .txt { font-size: 1rem; line-height: 1.4em; } @media (max-width: 768px) { .cont4 .wh1 .a4v1 .ast1-ax li .txt { font-size: 1.125rem; } } .cont4 .wh1 .a4v1 .ast1-ax li a.more-sax, .a4v2-c1 .more-sax{ color: #FFFFFF !important; font-size: 1rem; line-height: 1.5rem; padding: 1rem 0; border-radius: 5rem; border: 2px solid rgba(255, 255, 255, 0.19); background: -webkit-linear-gradient(left, #0095FF 0%, rgba(0, 149, 255, 0) 100%); background: -moz-linear-gradient(left, #0095FF 0%, rgba(0, 149, 255, 0) 100%); background: -o-linear-gradient(left, #0095FF 0%, rgba(0, 149, 255, 0) 100%); background: linear-gradient(90deg, #0095FF 0%, rgba(0, 149, 255, 0) 100%); background-clip: padding-box; -moz-box-sizing: border-box; box-sizing: border-box; overflow: hidden; display: block; width: 90%; margin: 1.5rem auto 0; -webkit-transition: all 0.4s; -o-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } .cont4 .wh1 .a4v1 .ast1-ax li a.more-sax:hover, .a4v2-c1 .more-sax:hover { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); } .a4v2-c1 { position: relative; } .a4v2-c1 .more-sax{ position: absolute; bottom: 4rem; left: 8rem; width: 18rem; text-align: center; } @media (max-width: 768px) { .cont4 .wh1 .a4v1 .ast1-ax li a.more-sax, .a4v2-c1 .more-sax { margin-top: 1rem; padding: 0.875rem 0; width: 85%; } .a4v2-c1 .more-sax{ bottom: 115px; left: 50%; width: 80%; transform: translateX(-50%); } } .cont4 .wh1 .a4v2 { margin-top: 8.75rem; } @media (max-width: 768px) { .cont4 .wh1 .a4v2 { margin-top: 3rem; } } .cont4 .wh1 .a4v2 .a4v2-a1 { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(29px); -webkit-backdrop-filter: blur(29px); border-radius: 2rem; border: 1px solid rgba(255, 255, 255, 0.3); border-top: none; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(255, 255, 255, 0.1), inset 0 0 0px 0px rgba(255, 255, 255, 0); position: sticky; top: 1rem; overflow: hidden; z-index: 9; opacity: 0; visibility: hidden; pointer-events: none; -webkit-transition: opacity 0.3s ease, visibility 0.3s ease; -o-transition: opacity 0.3s ease, visibility 0.3s ease; -moz-transition: opacity 0.3s ease, visibility 0.3s ease; transition: opacity 0.3s ease, visibility 0.3s ease; } .cont4 .wh1 .a4v2 .a4v2-a1.is-fixed { opacity: 1; visibility: visible; pointer-events: auto; } @media (max-width: 768px) { .cont4 .wh1 .a4v2 .a4v2-a1 { border-radius: 1rem; padding: 0.75rem 0; } } .cont4 .wh1 .a4v2 .a4v2-a1::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: -webkit-linear-gradient(left, transparent, rgba(255, 255, 255, 0.8), transparent); background: -moz-linear-gradient(left, transparent, rgba(255, 255, 255, 0.8), transparent); background: -o-linear-gradient(left, transparent, rgba(255, 255, 255, 0.8), transparent); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent); } .cont4 .wh1 .a4v2 .a4v2-a1::after { content: ""; position: absolute; top: 0; left: 0; width: 1px; height: 100%; background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.8), transparent, rgba(255, 255, 255, 0.3)); background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.8), transparent, rgba(255, 255, 255, 0.3)); background: -o-linear-gradient(top, rgba(255, 255, 255, 0.8), transparent, rgba(255, 255, 255, 0.3)); background: linear-gradient(180deg, rgba(255, 255, 255, 0.8), transparent, rgba(255, 255, 255, 0.3)); } .cont4 .wh1 .a4v2 .a4v2-a1 li { color: rgba(255, 255, 255, 0.4); font-size: 1.125rem; line-height: 1.5em; padding: 0.95rem 0; margin: 0 3em; cursor: pointer; } @media (max-width: 768px) { .cont4 .wh1 .a4v2 .a4v2-a1 li { padding: 0.5rem 0; margin: 0 1.5em; } } .cont4 .wh1 .a4v2 .a4v2-a1 li.on { color: #fff; } .cont4 .wh1 .a4v2 .a4v2-a2 { margin-top: 2.65rem; } @media (max-width: 768px) { .cont4 .wh1 .a4v2 .a4v2-a2 { margin-top: 1.5rem; } } .cont4 .wh1 .a4v2 .a4v2-a2 > li .title2 { text-align: center; color: #fff; } .cont4 .wh1 .a4v2 .a4v2-a2 > li .title2 .tit { font-size: 2.75rem; line-height: 1.5909090909em; font-weight: 700; } @media (max-width: 768px) { .cont4 .wh1 .a4v2 .a4v2-a2 > li .title2 .tit { font-size: 1.85rem; } } .cont4 .wh1 .a4v2 .a4v2-a2 > li .title2 .ftxt { font-size: 1.5rem; line-height: 1.35em; } @media (max-width: 768px) { .cont4 .wh1 .a4v2 .a4v2-a2 > li .title2 .ftxt { font-size: 1.125rem; } } .cont4 .wh1 .a4v2 .a4v2-a2 > li .a4v2-c1 { border-radius: var(--borderRadius); background: rgba(255, 255, 255, 0.05); margin-top: 3.85rem; position: relative; overflow: hidden; } @media (max-width: 768px) { .cont4 .wh1 .a4v2 .a4v2-a2 > li .a4v2-c1 { margin-top: 1.5rem; } } .cont4 .wh1 .a4v2 .a4v2-a2 > li .a4v2-c1 .asjhxt { position: absolute; right: 2%; bottom: 5%; width: 21.0714285714%; } @media (max-width: 768px) { .cont4 .wh1 .a4v2 .a4v2-a2 > li .a4v2-c1 .asjhxt { right: 5%; bottom: 3%; width: 38%; } } .cont4 .wh1 .a4v2 .a4v2-a2 > li .a4v2-c1 .asjhxt img { width: 100%; } .cont4 .wh1 .a4v2 .a4v2-a2 > li .a4v2-c1 picture img { width: 100%; } @media (max-width: 768px) { .cont4 .wh1 .a4v2 .a4v2-a2 > li .a4v2-c1 picture img { -o-object-fit: cover; object-fit: cover; } } .cont4 .wh1 .a4v2 .a4v2-a2 > li .a4v2-c1 .a4v2-d1 { position: absolute; left: 0; width: 100%; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); padding: 0 8.5714285714%; z-index: 1; } @media (max-width: 768px) { .cont4 .wh1 .a4v2 .a4v2-a2 > li .a4v2-c1 .a4v2-d1 { width: 100%; top: 2.5rem; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } .cont4 .wh1 .a4v2 .a4v2-a2 > li .a4v2-c1 .a4v2-d1 .tit-axt { color: #fff; } .cont4 .wh1 .a4v2 .a4v2-a2 > li .a4v2-c1 .a4v2-d1 .tit-axt .tit { font-size: 2.5rem; font-weight: 500; line-height: 1.25em; } @media (max-width: 768px) { .cont4 .wh1 .a4v2 .a4v2-a2 > li .a4v2-c1 .a4v2-d1 .tit-axt .tit { font-size: 1.75rem; } } .cont4 .wh1 .a4v2 .a4v2-a2 > li .a4v2-c1 .a4v2-d1 .tit-axt .ftit { font-size: 1.25rem; line-height: 1.25em; margin-top: 0.35rem; } @media (max-width: 768px) { .cont4 .wh1 .a4v2 .a4v2-a2 > li .a4v2-c1 .a4v2-d1 .tit-axt .ftit { font-size: 1.125rem; } } .cont4 .wh1 .a4v2 .a4v2-a2 > li .a4v2-c1 .a4v2-d1 .a4v2-d1c1 { 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; padding-right: 55%; margin-top: 2.5rem; } @media (max-width: 768px) { .cont4 .wh1 .a4v2 .a4v2-a2 > li .a4v2-c1 .a4v2-d1 .a4v2-d1c1 { padding-right: 0; margin-top: 1.5rem; } } .cont4 .wh1 .a4v2 .a4v2-a2 > li .a4v2-c1 .a4v2-d1 .a4v2-d1c1 dl { text-align: center; } .cont4 .wh1 .a4v2 .a4v2-a2 > li .a4v2-c1 .a4v2-d1 .a4v2-d1c1 dl dt { width: 4.375rem; margin: 0 auto; } @media (max-width: 768px) { .cont4 .wh1 .a4v2 .a4v2-a2 > li .a4v2-c1 .a4v2-d1 .a4v2-d1c1 dl dt { width: 3.125rem; } } .cont4 .wh1 .a4v2 .a4v2-a2 > li .a4v2-c1 .a4v2-d1 .a4v2-d1c1 dl dt img { width: 100%; } .cont4 .wh1 .a4v2 .a4v2-a2 > li .a4v2-c1 .a4v2-d1 .a4v2-d1c1 dl dd { width: 100%; color: #fff; margin-top: 0.75rem; } .cont4 .wh1 .a4v2 .a4v2-a2 > li .a4v2-c1 .a4v2-d1 .a4v2-d1c1 dl dd .tit { font-size: 1.25rem; line-height: 1.5em; font-weight: 500; } @media (max-width: 768px) { .cont4 .wh1 .a4v2 .a4v2-a2 > li .a4v2-c1 .a4v2-d1 .a4v2-d1c1 dl dd .tit { font-size: 0.875rem; } } .cont4 .wh1 .a4v2 .a4v2-a2 > li .a4v2-c1 .a4v2-d2 { width: 33.59375%; } @media (max-width: 768px) { .cont4 .wh1 .a4v2 .a4v2-a2 > li .a4v2-c1 .a4v2-d2 { width: 100%; } } .cont4 .wh1 .a4v2 .a4v2-a2 > li .a4v2-c1 .a4v2-d2 img { width: 100%; } .cont4 .wh1 .a4v2 .a4v2-a2 > li .a4v2-c1 .a4v2-d3 { width: 32.421875%; } @media (max-width: 768px) { .cont4 .wh1 .a4v2 .a4v2-a2 > li .a4v2-c1 .a4v2-d3 { width: 100%; } } .cont4 .wh1 .a4v2 .a4v2-a2 > li .a4v2-c1 .a4v2-d3 dl { 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; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; } .cont4 .wh1 .a4v2 .a4v2-a2 > li .a4v2-c1 .a4v2-d3 dl + dl { margin-top: 2rem; } @media (max-width: 768px) { .cont4 .wh1 .a4v2 .a4v2-a2 > li .a4v2-c1 .a4v2-d3 dl + dl { margin-top: 1.25rem; } } .cont4 .wh1 .a4v2 .a4v2-a2 > li .a4v2-c1 .a4v2-d3 dl dt { width: 4.375rem; } @media (max-width: 768px) { .cont4 .wh1 .a4v2 .a4v2-a2 > li .a4v2-c1 .a4v2-d3 dl dt { width: 3.75rem; } } .cont4 .wh1 .a4v2 .a4v2-a2 > li .a4v2-c1 .a4v2-d3 dl dt img { width: 100%; } .cont4 .wh1 .a4v2 .a4v2-a2 > li .a4v2-c1 .a4v2-d3 dl dd { width: -webkit-calc(92% - 4.5rem); width: -moz-calc(92% - 4.5rem); width: calc(92% - 4.5rem); color: #fff; } @media (max-width: 768px) { .cont4 .wh1 .a4v2 .a4v2-a2 > li .a4v2-c1 .a4v2-d3 dl dd { width: -webkit-calc(92% - 3.75rem); width: -moz-calc(92% - 3.75rem); width: calc(92% - 3.75rem); } } .cont4 .wh1 .a4v2 .a4v2-a2 > li .a4v2-c1 .a4v2-d3 dl dd .tit { font-size: 1.5rem; line-height: 1.5em; font-weight: 500; } @media (max-width: 768px) { .cont4 .wh1 .a4v2 .a4v2-a2 > li .a4v2-c1 .a4v2-d3 dl dd .tit { font-size: 1.35rem; } } .cont4 .wh1 .a4v2 .a4v2-a2 > li .a4v2-c1 .a4v2-d3 dl dd p { color: rgba(255, 255, 255, 0.5); font-size: 1rem; line-height: 1.25em; } .cont4 .wh1 .a4v2 .a4v2-a2 > li .a4v2-c2 { margin-top: 7.5rem; } @media (max-width: 768px) { .cont4 .wh1 .a4v2 .a4v2-a2 > li .a4v2-c2 { margin-top: 2rem; } } .cont4 .wh1 .a4v2 .a4v2-a2 > li .a4v2-c2 .tit-a { text-align: center; font-size: 2.5rem; font-weight: 700; line-height: 1.5em; color: #fff; } @media (max-width: 768px) { .cont4 .wh1 .a4v2 .a4v2-a2 > li .a4v2-c2 .tit-a { font-size: 1.8rem; } } .cont4 .wh1 .a4v2 .a4v2-a2 > li .a4v2-c2 .as-xt1 { margin-top: 0.65rem; } .cont4 .wh1 .a4v2 .a4v2-a2 > li .a4v2-c2 .as-xt1 > li:nth-child(1) { width: 83.8571428571%; margin: 0 auto; position: relative; z-index: 1; } @media (max-width: 768px) { .cont4 .wh1 .a4v2 .a4v2-a2 > li .a4v2-c2 .as-xt1 > li:nth-child(1) { width: 100%; } } .cont4 .wh1 .a4v2 .a4v2-a2 > li .a4v2-c2 .as-xt1 > li:nth-child(1) .asj-xt1 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem 2.625rem; } @media (max-width: 768px) { .cont4 .wh1 .a4v2 .a4v2-a2 > li .a4v2-c2 .as-xt1 > li:nth-child(1) .asj-xt1 { grid-template-columns: repeat(2, 1fr); gap: 1rem 1.125rem; } } .cont4 .wh1 .a4v2 .a4v2-a2 > li .a4v2-c2 .as-xt1 > li:nth-child(1) .asj-xt1 { margin-top: 2.5rem; } @media (max-width: 768px) { .cont4 .wh1 .a4v2 .a4v2-a2 > li .a4v2-c2 .as-xt1 > li:nth-child(1) .asj-xt1 { margin-top: 1.25rem; } } .cont4 .wh1 .a4v2 .a4v2-a2 > li .a4v2-c2 .as-xt1 > li:nth-child(1) .asj-xt1 > li { position: relative; } .cont4 .wh1 .a4v2 .a4v2-a2 > li .a4v2-c2 .as-xt1 > li:nth-child(1) .asj-xt1 > li u { display: block; font-size: 0; border-radius: 1.25rem; border: 1px solid rgba(255, 255, 255, 0.1); overflow: hidden; position: relative; } @media (max-width: 768px) { .cont4 .wh1 .a4v2 .a4v2-a2 > li .a4v2-c2 .as-xt1 > li:nth-child(1) .asj-xt1 > li u { border-radius: 1rem; } } .cont4 .wh1 .a4v2 .a4v2-a2 > li .a4v2-c2 .as-xt1 > li:nth-child(1) .asj-xt1 > li u img { width: 100%; } .cont4 .wh1 .a4v2 .a4v2-a2 > li .a4v2-c2 .as-xt1 > li:nth-child(1) .asj-xt1 > li .txat { width: 100%; padding: 0.65em 0.25rem; color: #fff; font-size: 1.25rem; font-weight: 700; line-height: 1.35em; -webkit-transition: all 0.4s; -o-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; text-align: center; } @media (max-width: 768px) { .cont4 .wh1 .a4v2 .a4v2-a2 > li .a4v2-c2 .as-xt1 > li:nth-child(1) .asj-xt1 > li .txat { font-size: 1rem; padding: 0.65em 0; } } .cont4 .wh1 .a4v2 .a4v2-a2 > li .a4v2-c2 .as-xt1 > li:nth-child(1) .asj-xt1 > li:hover u::after { opacity: 1; } .cont4 .wh1 .a4v2 .a4v2-a2 > li .a4v2-c2 .as-xt1 > li:nth-child(1) .asj-xt1 > li:hover .txat { opacity: 1; } .cont4 .wh1 .a4v2 .a4v2-a2 > li .a4v2-c2 .as-xt1 > li:nth-child(2) { width: 34.1428571429%; margin: 1.5rem auto 0; } @media (max-width: 768px) { .cont4 .wh1 .a4v2 .a4v2-a2 > li .a4v2-c2 .as-xt1 > li:nth-child(2) { width: 70%; margin: 0.5rem auto 0; } } .cont4 .wh1 .a4v2 .a4v2-a2 > li .a4v2-c2 .as-xt1 > li:nth-child(2) img { width: 100%; } .cont4 .wh1 .a4v2 .a4v2-a2 > li .a4v2-c2 .as-xt1 > li:nth-child(3) { width: 97.5714285714%; margin: -11.5rem auto 0; } @media (max-width: 768px) { .cont4 .wh1 .a4v2 .a4v2-a2 > li .a4v2-c2 .as-xt1 > li:nth-child(3) { width: 100%; margin: -1rem auto 0; } } .cont4 .wh1 .a4v2 .a4v2-a2 > li .a4v2-c2 .as-xt1 > li:nth-child(3) img { width: 100%; } .cont4 .wh1 .a4v2 .a4v2-a2 > li .zs_ta1 { margin-top: 2.35rem; } @media (max-width: 768px) { .cont4 .wh1 .a4v2 .a4v2-a2 > li .zs_ta1 { margin-top: 1.5rem; } } .cont4 .wh1 .a4v2 .a4v2-a2 > li .zs_ta1 > li + li { margin-top: 5rem; } @media (max-width: 768px) { .cont4 .wh1 .a4v2 .a4v2-a2 > li .zs_ta1 > li + li { margin-top: 1.85rem; } } .cont4 .wh1 .a4v2 .a4v2-a2 > li .zs_ta1 > li .tit-b { text-align: center; color: #fff; font-size: 2.5rem; font-weight: 700; line-height: 1.25em; } @media (max-width: 768px) { .cont4 .wh1 .a4v2 .a4v2-a2 > li .zs_ta1 > li .tit-b { font-size: 1.75rem; } } .cont4 .wh1 .a4v2 .a4v2-a2 > li .zs_ta1 > li .zs_tb1 { 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; margin-top: 1rem; } @media (max-width: 768px) { .cont4 .wh1 .a4v2 .a4v2-a2 > li .zs_ta1 > li .zs_tb1 { margin-top: 0.5rem; gap: 0.5rem; } } .cont4 .wh1 .a4v2 .a4v2-a2 > li .zs_ta1 > li .zs_tb1 > li { color: rgba(255, 255, 255, 0.4); font-size: 1.25rem; line-height: 1.5em; margin: 0 1.35em; padding: 0.25em 0; cursor: pointer; position: relative; -webkit-transition: all 0.3s; -o-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } @media (max-width: 768px) { .cont4 .wh1 .a4v2 .a4v2-a2 > li .zs_ta1 > li .zs_tb1 > li { margin: 0 0.75em; font-size: 1.125rem; } } .cont4 .wh1 .a4v2 .a4v2-a2 > li .zs_ta1 > li .zs_tb1 > li::after { content: ""; position: absolute; left: 0; bottom: 0; display: block; width: 100%; height: 1px; background: #fff; -webkit-transform: scaleX(0); -moz-transform: scaleX(0); -ms-transform: scaleX(0); -o-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: center; -moz-transform-origin: center; -ms-transform-origin: center; -o-transform-origin: center; transform-origin: center; -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.4, 0, 0, 1); transition: -webkit-transform 0.3s cubic-bezier(0.4, 0, 0, 1); -o-transition: -o-transform 0.3s cubic-bezier(0.4, 0, 0, 1); -moz-transition: transform 0.3s cubic-bezier(0.4, 0, 0, 1), -moz-transform 0.3s cubic-bezier(0.4, 0, 0, 1); transition: transform 0.3s cubic-bezier(0.4, 0, 0, 1); transition: transform 0.3s cubic-bezier(0.4, 0, 0, 1), -webkit-transform 0.3s cubic-bezier(0.4, 0, 0, 1), -moz-transform 0.3s cubic-bezier(0.4, 0, 0, 1), -o-transform 0.3s cubic-bezier(0.4, 0, 0, 1); } .cont4 .wh1 .a4v2 .a4v2-a2 > li .zs_ta1 > li .zs_tb1 > li.on { color: #fff; } .cont4 .wh1 .a4v2 .a4v2-a2 > li .zs_ta1 > li .zs_tb1 > li.on::after { -webkit-transform: scaleX(1); -moz-transform: scaleX(1); -ms-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(1); } .cont4 .wh1 .a4v2 .a4v2-a2 > li .zs_ta1 > li .zs_tb2 { margin-top: 3rem; } @media (max-width: 768px) { .cont4 .wh1 .a4v2 .a4v2-a2 > li .zs_ta1 > li .zs_tb2 { margin-top: 1.25rem; } } .cont4 .wh1 .a4v2 .a4v2-a2 > li .zs_ta1 > li .zs_tb2 > li .has-ct1 { border-radius: 1.25rem; background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(29px); padding: 2.625rem; 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; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; } @media (max-width: 768px) { .cont4 .wh1 .a4v2 .a4v2-a2 > li .zs_ta1 > li .zs_tb2 > li .has-ct1 { border-radius: 1rem; padding: 1.35rem; } } .cont4 .wh1 .a4v2 .a4v2-a2 > li .zs_ta1 > li .zs_tb2 > li .has-ct1 .img { width: 43.9230769231%; border-radius: -webkit-calc(var(--borderRadius) * 0.75); border-radius: -moz-calc(var(--borderRadius) * 0.75); border-radius: calc(var(--borderRadius) * 0.75); overflow: hidden; } @media (max-width: 768px) { .cont4 .wh1 .a4v2 .a4v2-a2 > li .zs_ta1 > li .zs_tb2 > li .has-ct1 .img { width: 100%; } } .cont4 .wh1 .a4v2 .a4v2-a2 > li .zs_ta1 > li .zs_tb2 > li .has-ct1 .img img { width: 100%; } .cont4 .wh1 .a4v2 .a4v2-a2 > li .zs_ta1 > li .zs_tb2 > li .has-ct1 .cont-p { width: 43.8461538462%; margin-right: 5%; color: #fff; } @media (max-width: 768px) { .cont4 .wh1 .a4v2 .a4v2-a2 > li .zs_ta1 > li .zs_tb2 > li .has-ct1 .cont-p { width: 100%; margin-right: 0; margin-top: 0.85rem; } } .cont4 .wh1 .a4v2 .a4v2-a2 > li .zs_ta1 > li .zs_tb2 > li .has-ct1 .cont-p .tit { font-size: 2rem; line-height: 1.25em; font-weight: 500; } @media (max-width: 768px) { .cont4 .wh1 .a4v2 .a4v2-a2 > li .zs_ta1 > li .zs_tb2 > li .has-ct1 .cont-p .tit { font-size: 1.5rem; } } .cont4 .wh1 .a4v2 .a4v2-a2 > li .zs_ta1 > li .zs_tb2 > li .has-ct1 .cont-p .txt { font-size: 1.25rem; line-height: 1.4em; margin-top: 0.5rem; } @media (max-width: 768px) { .cont4 .wh1 .a4v2 .a4v2-a2 > li .zs_ta1 > li .zs_tb2 > li .has-ct1 .cont-p .txt { font-size: 1.125rem; } } .cont4 .wh1 .a4v2 .a4v2-a2 > li .zs_ta1 > li .zs_tb2 > li .has-ct1 .cont-p .txt span { color: var(--color-zt); } .cont4 .wh1 .a4v2 .a4v2-a2 > li .zs_ta1 > li .zs_tb2 > li .has-ct1 .cont-p1 { width: 51.5384615385%; 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; } @media (max-width: 768px) { .cont4 .wh1 .a4v2 .a4v2-a2 > li .zs_ta1 > li .zs_tb2 > li .has-ct1 .cont-p1 { width: 100%; gap: 1rem 0; } } .cont4 .wh1 .a4v2 .a4v2-a2 > li .zs_ta1 > li .zs_tb2 > li .has-ct1 .cont-p1 dl { width: 50%; padding: 0.85rem 4%; } @media (max-width: 768px) { .cont4 .wh1 .a4v2 .a4v2-a2 > li .zs_ta1 > li .zs_tb2 > li .has-ct1 .cont-p1 dl { width: 45%; padding: 0.25rem 0; text-align: center; } } .cont4 .wh1 .a4v2 .a4v2-a2 > li .zs_ta1 > li .zs_tb2 > li .has-ct1 .cont-p1 dl:nth-child(2n) { border-left: 1px solid rgba(255, 255, 255, 0.1); } @media (max-width: 768px) { .cont4 .wh1 .a4v2 .a4v2-a2 > li .zs_ta1 > li .zs_tb2 > li .has-ct1 .cont-p1 dl:nth-child(2n) { border-left: none; } } .cont4 .wh1 .a4v2 .a4v2-a2 > li .zs_ta1 > li .zs_tb2 > li .has-ct1 .cont-p1 dl:nth-child(n+3) { margin-top: 2rem; } @media (max-width: 768px) { .cont4 .wh1 .a4v2 .a4v2-a2 > li .zs_ta1 > li .zs_tb2 > li .has-ct1 .cont-p1 dl:nth-child(n+3) { margin-top: 0; } } .cont4 .wh1 .a4v2 .a4v2-a2 > li .zs_ta1 > li .zs_tb2 > li .has-ct1 .cont-p1 dl dt { width: 32.7217125382%; } @media (max-width: 768px) { .cont4 .wh1 .a4v2 .a4v2-a2 > li .zs_ta1 > li .zs_tb2 > li .has-ct1 .cont-p1 dl dt { width: 4rem; margin: 0 auto; } } .cont4 .wh1 .a4v2 .a4v2-a2 > li .zs_ta1 > li .zs_tb2 > li .has-ct1 .cont-p1 dl dt img { width: 100%; } .cont4 .wh1 .a4v2 .a4v2-a2 > li .zs_ta1 > li .zs_tb2 > li .has-ct1 .cont-p1 dl dd { width: 61.1620795107%; color: #FFFFFF; font-size: 1.25rem; line-height: 1.4em; font-weight: 500; } @media (max-width: 768px) { .cont4 .wh1 .a4v2 .a4v2-a2 > li .zs_ta1 > li .zs_tb2 > li .has-ct1 .cont-p1 dl dd { width: 100%; font-size: 1rem; font-weight: 400; } } .cont4 .wh1 .a4v2 .a4v2-a2 > li .zs_ta1 > li:nth-child(2) .zs_tb2 li .has-ct1 .cont-p { margin-right: 0; margin-left: 5%; } @media (max-width: 768px) { .cont4 .wh1 .a4v2 .a4v2-a2 > li .zs_ta1 > li:nth-child(2) .zs_tb2 li .has-ct1 .cont-p { margin-left: 0; margin-top: 0; margin-bottom: 1rem; } } .text_effect { position: relative; cursor: pointer; } .text_effect p { position: relative; } .text_effect .fist { overflow: hidden; } .text_effect .fist div { min-width: 5px; } .text_effect .fist:nth-child(2) { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); overflow: hidden; white-space: nowrap; } .text_effect .fist:nth-child(2) div { -webkit-transform: translate3d(0, 101%, 0); -moz-transform: translate3d(0, 101%, 0); transform: translate3d(0, 101%, 0); min-width: 5px; opacity: 0; } .text_effect:hover .fist:first-child div { -webkit-transform: translate3d(0, -101%, 0); -moz-transform: translate3d(0, -101%, 0); transform: translate3d(0, -101%, 0); opacity: 0; } .text_effect:hover .fist:nth-child(2) div { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } .cont5 { padding: 6.875rem 0 9.375rem; } @media (max-width: 768px) { .cont5 { padding: 2.25rem 0; } .cont5 .title1 .tit br { display: none; } } .cont5 .a5_list2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.75rem 2rem; margin-top: 4rem; } @media (max-width: 768px) { .cont5 .a5_list2 { grid-template-columns: repeat(1, 1fr); gap: 1.25rem; margin-top: 2rem; } } .cont5 .a5_list2 > li { background: -webkit-linear-gradient(left, rgba(0, 149, 255, 0.2) 0%, rgba(0, 149, 255, 0) 100%), rgba(255, 255, 255, 0.05); background: -moz-linear-gradient(left, rgba(0, 149, 255, 0.2) 0%, rgba(0, 149, 255, 0) 100%), rgba(255, 255, 255, 0.05); background: -o-linear-gradient(left, rgba(0, 149, 255, 0.2) 0%, rgba(0, 149, 255, 0) 100%), rgba(255, 255, 255, 0.05); background: linear-gradient(90deg, rgba(0, 149, 255, 0.2) 0%, rgba(0, 149, 255, 0) 100%), rgba(255, 255, 255, 0.05); border-radius: 2.5rem; padding: 2.125rem 5.1094890511% 1.5rem; color: #fff; position: relative; overflow: hidden; } @media (max-width: 768px) { .cont5 .a5_list2 > li { border-radius: 1rem; padding: 1.5rem 5.1094890511% 1.5rem; } } .cont5 .a5_list2 > li .tit { font-size: 1.5rem; font-weight: 700; line-height: 2em; } .cont5 .a5_list2 > li .ftit { font-size: 1rem; line-height: 1.25em; } .cont5 .a5_list2 > li .pa2 { background: #0095FF; font-size: 1rem; line-height: 1.5em; padding: 0.25em 3.5em; text-align: center; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; position: absolute; right: -2.5rem; top: 1.85rem; -webkit-transform: rotate(35deg); -moz-transform: rotate(35deg); -ms-transform: rotate(35deg); -o-transform: rotate(35deg); transform: rotate(35deg); } @media (max-width: 768px) { .cont5 .a5_list2 > li .pa2 { right: -3.5rem; top: 1.5rem; } } .cont5 .a5_list2 > li .cont-p { padding-top: 0.6875rem; } .cont5 .a5_list2 > li .cont-p .as1 { padding: 1.5625rem 0 1rem; } .cont5 .a5_list2 > li .cont-p .as1 li { width: 20%; } .cont5 .a5_list2 > li .cont-p .as1 li a.img { display: block; text-align: center; } .cont5 .a5_list2 > li .cont-p .as1 li a.img u { display: block; font-size: 0; } .cont5 .a5_list2 > li .cont-p .as1 li a.img u img { width: 6.0625rem; margin: 0 auto; } @media (max-width: 768px) { .cont5 .a5_list2 > li .cont-p .as1 li a.img u img { width: 50px; height: 50px; margin: 0 auto; } } .cont5 .a5_list2 > li .cont-p .as1 li a.img .tit { text-align: center; font-size: 0.75rem; line-height: 1.5em; color: #FFFFFF; font-weight: 400; } .cont5 .a5_list2 > li .cont-p.flex .hwes { text-align: center; width: 24.8333333333%; } .cont5 .a5_list2 > li .cont-p.flex .hwes img { width: 70%; margin: 0 auto; } .cont5 .a5_list2 > li .cont-p.flex .hwes p { font-size: 0.75rem; } .cont5 .a5_list2 > li .cont-p.flex .ash { width: 1.4375rem; margin-right: 1rem; } .cont5 .a5_list2 > li .cont-p.flex .ash img { width: 100%; } .cont5 .a5_list2 > li .cont-p.flex .as1 { background: rgba(255, 255, 255, 0.05); border-radius: 1.25rem; width: -webkit-calc(75% - 2.5rem); width: -moz-calc(75% - 2.5rem); width: calc(75% - 2.5rem); } @media (max-width: 768px) { .cont5 .a5_list2 > li .cont-p.flex .as1 { -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .cont5 .a5_list2 > li .cont-p.flex .as1 li { width: auto; -webkit-flex: 1; -moz-box-flex: 1; -ms-flex: 1; flex: 1; } @media (max-width: 768px) { .cont5 .a5_list2 > li .cont-p.flex .as1 li { -webkit-flex: none; -moz-box-flex: 0; -ms-flex: none; flex: none; width: 33.3333333333%; } } .cont5 .a5_list1 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.875rem; margin-top: 4.5rem; } @media (max-width: 768px) { .cont5 .a5_list1 { grid-template-columns: repeat(2, 1fr); gap: 1.35rem; margin-top: 1.5rem; } } .cont5 .a5_list1 li a.img { display: block; text-align: center; } .cont5 .a5_list1 li a.img u { display: block; font-size: 0; } .cont5 .a5_list1 li a.img u img { width: 100%; } .cont5 .a5_list1 li a.img .tit { font-size: 1.25rem; line-height: 1.35em; font-weight: 500; color: #fff; } @media (max-width: 768px) { .cont5 .a5_list1 li a.img .tit { font-size: 1.125rem; } } .cont5 .a5_list1 li a.img .txt { font-size: 0.875rem; line-height: 1.4285714286em; color: #fff; font-weight: 400; } @media (max-width: 768px) { .cont5 .a5_list1 li a.img .txt { margin-top: 0.25rem; } } .cont6 { background: rgba(255, 255, 255, 0.02); border-radius: var(--borderRadius); padding: 11.1875rem 0 10.625rem; position: relative; overflow: hidden; } @media (max-width: 768px) { .cont6 { padding: 2.25rem 0; } } .cont6::after { content: ""; display: block; position: absolute; left: 50%; bottom: 0; -webkit-transform: translateX(-50%) translateY(50%); -moz-transform: translateX(-50%) translateY(50%); -ms-transform: translateX(-50%) translateY(50%); -o-transform: translateX(-50%) translateY(50%); transform: translateX(-50%) translateY(50%); width: 50%; aspect-ratio: 1/1; border-radius: 50%; background: rgba(0, 149, 255, 0.2); -webkit-filter: blur(200px); filter: blur(200px); } .cont6 .wh1 { position: relative; z-index: 1; } .cont6 .a6v1 { margin-top: 5.5rem; } @media (max-width: 768px) { .cont6 .a6v1 { margin-top: 1.5rem; } .cont6 .a6v1 .title1 .tit { font-size: 1.65rem; } } .cont6 .a6v1 .a6b1 { width: 43.7142857143%; } @media (max-width: 768px) { .cont6 .a6v1 .a6b1 { width: 100%; } } .cont6 .a6v1 .a6b1 .txt-p { color: #fff; font-size: 1.25rem; line-height: 1.4em; margin-top: 1rem; } @media (max-width: 768px) { .cont6 .a6v1 .a6b1 .txt-p { font-size: 1.125rem; margin-top: 0.65rem; } } .cont6 .a6v1 .a6b1 a.mores { color: #0095FF; font-size: 1.25rem; line-height: 1.5em; margin-top: 2.125rem; gap: 0.25rem; } @media (max-width: 768px) { .cont6 .a6v1 .a6b1 a.mores { margin-top: 1rem; font-size: 1.125rem; } } .cont6 .a6v1 .a6b1 a.mores i { display: block; font-size: 0; width: 1.5rem; -webkit-transition: all 0.4s; -o-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } @media (max-width: 768px) { .cont6 .a6v1 .a6b1 a.mores i { width: 1.25rem; } } .cont6 .a6v1 .a6b1 a.mores i img { width: 100%; } .cont6 .a6v1 .a6b1 a.mores:hover i { margin-left: 0.5rem; } .cont6 .a6v1 .a6b2 { width: 50.2857142857%; } @media (max-width: 768px) { .cont6 .a6v1 .a6b2 { width: 100%; margin-top: 1.85rem; } } .cont6 .a6v1 .a6b2 .a6b2c1 li { position: relative; padding: 1.75rem 10% 1.75rem 5%; cursor: pointer; isolation: isolate; } @media (max-width: 768px) { .cont6 .a6v1 .a6b2 .a6b2c1 li { padding: 1.5rem 8% 1.5rem 3.5%; } } .cont6 .a6v1 .a6b2 .a6b2c1 li + li { margin-top: 1.5rem; } @media (max-width: 768px) { .cont6 .a6v1 .a6b2 .a6b2c1 li + li { margin-top: 1rem; } } .cont6 .a6v1 .a6b2 .a6b2c1 li::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.05); border-radius: var(--borderRadius); pointer-events: none; -webkit-transform: translateZ(0) scale(1); -moz-transform: translateZ(0) scale(1); transform: translateZ(0) scale(1); -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -webkit-transition: background 0.35s ease, -webkit-transform 0.35s ease; transition: background 0.35s ease, -webkit-transform 0.35s ease; -o-transition: background 0.35s ease, -o-transform 0.35s ease; -moz-transition: transform 0.35s ease, background 0.35s ease, -moz-transform 0.35s ease; transition: transform 0.35s ease, background 0.35s ease; transition: transform 0.35s ease, background 0.35s ease, -webkit-transform 0.35s ease, -moz-transform 0.35s ease, -o-transform 0.35s ease; will-change: transform; z-index: 0; } .cont6 .a6v1 .a6b2 .a6b2c1 li i { display: block; width: 6.25rem; position: relative; z-index: 1; } @media (max-width: 768px) { .cont6 .a6v1 .a6b2 .a6b2c1 li i { width: 4.5rem; } } .cont6 .a6v1 .a6b2 .a6b2c1 li i img { width: 100%; } .cont6 .a6v1 .a6b2 .a6b2c1 li .cont-p { width: -webkit-calc(95% - 6.25rem); width: -moz-calc(95% - 6.25rem); width: calc(95% - 6.25rem); color: #fff; position: relative; z-index: 1; } @media (max-width: 768px) { .cont6 .a6v1 .a6b2 .a6b2c1 li .cont-p { width: -webkit-calc(95% - 4.5rem); width: -moz-calc(95% - 4.5rem); width: calc(95% - 4.5rem); } } .cont6 .a6v1 .a6b2 .a6b2c1 li .cont-p .tit { font-size: 1.5rem; line-height: 2em; font-weight: 600; } @media (max-width: 768px) { .cont6 .a6v1 .a6b2 .a6b2c1 li .cont-p .tit { font-size: 1.35rem; line-height: 1.5em; margin-bottom: 0.25rem; } } .cont6 .a6v1 .a6b2 .a6b2c1 li .cont-p .txt { font-size: 1rem; line-height: 1.25em; height: 0; overflow: hidden; -webkit-transition: height 0.35s ease; -o-transition: height 0.35s ease; -moz-transition: height 0.35s ease; transition: height 0.35s ease; } .cont6 .a6v1 .a6b2 .a6b2c1 li:hover::after, .cont6 .a6v1 .a6b2 .a6b2c1 li.active::after { background: -webkit-linear-gradient(left, #0095FF 0%, rgba(0, 149, 255, 0) 100%); background: -moz-linear-gradient(left, #0095FF 0%, rgba(0, 149, 255, 0) 100%); background: -o-linear-gradient(left, #0095FF 0%, rgba(0, 149, 255, 0) 100%); background: linear-gradient(90deg, #0095FF 0%, rgba(0, 149, 255, 0) 100%); -webkit-transform: translateZ(0) scale(1.06); -moz-transform: translateZ(0) scale(1.06); transform: translateZ(0) scale(1.06); } .cont6 .a6v1 .a6b2 .a6b2c1 li:hover .cont-p .txt, .cont6 .a6v1 .a6b2 .a6b2c1 li.active .cont-p .txt { height: 3.75em; } .cont7 .a7v1 { border-radius: var(--borderRadius); overflow: hidden; margin-top: 4.375rem; } @media (max-width: 768px) { .cont7 .a7v1 { margin-top: 1.25rem; } } .cont7 .a7v1 img { width: 100%; } .reveal1 { position: relative; overflow: hidden; visibility: hidden; } .reveal1 img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transform-origin: center; -moz-transform-origin: center; -ms-transform-origin: center; -o-transform-origin: center; transform-origin: center; } .cont8 { margin-top: 3.5rem; margin-bottom: 3.5rem; font-size: 0.875rem; color: rgba(255, 255, 255, 0.5); } @media (max-width: 768px) { .cont8 { margin-top: 1.25rem; margin-bottom: 1.25rem; } }