.pagemenu { width: 100%; position: relative; background: transparent; top: 0; z-index: 999; margin-top: -64px; transform: translateY(44px); position: sticky; } .pagemenu .wrap { box-shadow: 0 12px 96px 0 rgba(19, 97, 211, 0.08); border-radius: 4px; background-color: #fff; display: flex; justify-content: space-around; align-items: center; } .pagemenu .wrap .item { height: auto; padding: 0; max-width: 120px; display: flex; justify-content: center; align-items: center; border-bottom: 1px solid transparent; } .pagemenu .wrap .item a { font-size: 12px; color: #666; text-align: center; display: inline-block; width: auto; line-height: 63px; padding: 0 8px; margin: 0; position: relative; transition-duration: 0.3s; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pagemenu .wrap .item.active a { color: #dc000c; font-weight: bold; } .sections .section { padding: 80px 0; } .sections .section:nth-child(2n-1) { background-color: #f7f7f7; } .sections .section .wrap { max-width: 1200px; margin: 0 auto; } .sections .section .wrap .t_title { font-size: 32px; text-align: center; margin-bottom: 5px; } .sections .section .wrap .t_title .bolder { font-weight: bolder; } .sections .section .wrap .tips { line-height: 20px; color: #999; text-align: center; margin-bottom: 60px; } .sections .section .wrap .contents { display: flex; flex-direction: column; gap: 60px 30px; } .sections .section .wrap .contents .content { margin-top: 0 !important; } .sections .section .wrap .content { display: flex; gap: 20px 40px; } .sections .section .wrap .content .left { width: 40%; font-size: 14px; line-height: 1.6; } .sections .section .wrap .content .right { width: 60%; } .sections .section .wrap .content .right img { width: 100%; } #section1 .boxs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } #section1 .boxs .box { display: flex; flex-direction: column; align-items: center; gap: 10px; box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.07); padding: 36px 30px; border-radius: 4px; background-color: #fff; transition: all 0.3s; } #section1 .boxs .box:hover { transform: translateY(-10px); } #section1 .boxs .box .image { width: 40px; height: 40px; } #section1 .boxs .box .image img { width: 100%; height: 100%; object-fit: cover; } #section1 .boxs .box .title { font-size: 16px; font-weight: bold; color: #333; } #section1 .boxs .box .content { color: #999; font-size: 13px; line-height: 20px; font-weight: 400; } #section2 { padding-bottom: 0; } #section2 .wrap { max-width: unset; } #section2 .cont { position: relative; width: 100%; overflow: hidden; } #section2 .cont .cont_bg { position: absolute; top: 0; left: 0; right: 0; z-index: 2; pointer-events: none; } #section2 .cont img { display: block; width: 100%; line-height: 0; font-size: 0; } #section2 .cont .worth { position: relative; z-index: 3; } #section2 .cont .worth .tit { text-align: center; font-weight: bold; color: #0c1634; } #section2 .cont .worth .tab_box { border-radius: 100px; background: #f3f6fa; padding: 5px 8px; width: 60%; box-sizing: border-box; margin: 3% auto; } #section2 .cont .worth .tab { width: 100%; border-radius: 100px; display: flex; position: relative; } #section2 .cont .worth .tab p { display: inline-block; width: 25%; text-align: center; border-radius: 100px; line-height: 50px; cursor: pointer; color: #0c1634; transition: all 0.5s; position: relative; z-index: 2; } #section2 .cont .worth .tab p.on { color: #fff; } #section2 .cont .worth .tab .active { width: 25%; position: absolute; top: 0; left: 0; bottom: 0; border-radius: 100px; background-color: #3682f7; transition: ease-in-out 0.5s; z-index: 1; } #section2 .cont .worth .item_box { position: relative; padding-top: 40%; } #section2 .cont .worth .item_box .item { position: absolute; top: 0; left: 0; width: 100%; display: none; } #section2 .cont .worth .item_box .item:nth-child(1) { display: block; } #section2 .cont .worth .item_box .item:nth-child(1) .img img { position: absolute; top: 0; left: 0; width: 100%; } #section2 .cont .worth .item_box .item:nth-child(1) .img .worth_bg3 { z-index: 5; pointer-events: none; } #section2 .cont .worth .item_box .item:nth-child(1) .img .worth_bg1 { transform-origin: 50% 40%; transform: scale(0); transition-duration: 1s; transition-delay: 0.2s; transition-timing-function: ease-out; } #section2 .cont .worth .item_box .item:nth-child(1) .img .worth_bg2 { transform-origin: 50% 45%; transform: scale(0); transition-duration: 1s; transition-delay: 0.5s; transition-timing-function: ease-out; } #section2 .cont .worth .item_box .item:nth-child(1) .img li { position: absolute; border-radius: 100%; color: #333; text-align: center; top: 25%; left: 47%; transition-duration: 1.2s; transition-timing-function: ease-out; overflow: hidden; z-index: 5; box-shadow: 5px 5px 10px 0 rgba(220, 37, 39, 0.15); } #section2 .cont .worth .item_box .item:nth-child(1) .img li span { position: relative; z-index: 2; } #section2 .cont .worth .item_box .item:nth-child(1) .img li::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: block; transition: all 0.3s; background: linear-gradient(to right, #fff, #f2f2f2); } #section2 .cont .worth .item_box .item:nth-child(1) .img li.gradient::after { content: ""; position: absolute; display: block; left: auto; right: 0; top: 0; bottom: 0; width: 200%; background: transparent; background-image: linear-gradient(to right, #9de866 0%, #46d2b6 30%, #46d2b6 70%, #9de866 100%); background-image: linear-gradient(to right, rgb(255, 43, 53) 0%, rgb(194, 48, 55) 100%); background: linear-gradient(to right, #ffb9b9, rgba(220, 37, 39, 0.6)); background: linear-gradient(to right, #fff, rgba(246, 84, 84, 0.6), #DC2527); box-shadow: 0 0 10px 0 rgba(220, 37, 39, 0.15); transition: all 0.5s; z-index: -1; } #section2 .cont .worth .item_box .item:nth-child(1) .img li.gradient:hover::after { background: linear-gradient(to right, rgb(255, 43, 53) 0%, rgb(194, 48, 55) 100%); } #section2 .cont .worth .item_box .item:nth-child(1) .img li:nth-child(1) { font-size: 13.5px; width: 60px; line-height: 60px; transition-delay: 1.2s; animation: float 4s ease-in-out 0s infinite; } #section2 .cont .worth .item_box .item:nth-child(1) .img li:nth-child(2) { font-size: 16px; width: 100px; line-height: 100px; transition-delay: 1.3s; animation: float 4.5s ease-in-out 0s infinite; } #section2 .cont .worth .item_box .item:nth-child(1) .img li:nth-child(3) { font-size: 12px; width: 48px; line-height: 48px; transition-delay: 1.4s; animation: float 3.6s ease-in-out 0s infinite; } #section2 .cont .worth .item_box .item:nth-child(1) .img li:nth-child(4) { font-size: 14px; width: 58px; line-height: 58px; transition-delay: 1.5s; animation: float 4s ease-in-out 0s infinite; } #section2 .cont .worth .item_box .item:nth-child(1) .img li:nth-child(5) { font-size: 16px; width: 100px; line-height: 100px; transition-delay: 1.6s; animation: float 3.8s ease-in-out 0s infinite; } #section2 .cont .worth .item_box .item:nth-child(1) .img li:nth-child(6) { font-size: 13px; width: 54px; line-height: 54px; transition-delay: 1.7s; animation: float 4.2s ease-in-out 0s infinite; } #section2 .cont .worth .item_box .item:nth-child(1) .img li:nth-child(7) { font-size: 12px; width: 48px; line-height: 48px; transition-delay: 1.8s; animation: float 4.5s ease-in-out 0s infinite; } #section2 .cont .worth .item_box .item:nth-child(1) .img li:nth-child(8) { font-size: 18px; width: 92px; line-height: 92px; transition-delay: 1.9s; animation: float 4s ease-in-out 0s infinite; } #section2 .cont .worth .item_box .item:nth-child(1) .img li:nth-child(9) { font-size: 18px; width: 92px; line-height: 92px; transition-delay: 2s; animation: float 3.7s ease-in-out 0s infinite; } #section2 .cont .worth .item_box .item:nth-child(1) .img li:nth-child(10) { font-size: 16px; width: 100px; line-height: 100px; transition-delay: 2.1s; animation: float 3.6s ease-in-out 0s infinite; } #section2 .cont .worth .item_box .item:nth-child(1) .img li:nth-child(11) { font-size: 18px; width: 92px; line-height: 92px; transition-delay: 2.2s; animation: float 4s ease-in-out 0s infinite; } #section2 .cont .worth .item_box .item:nth-child(1) .img li:nth-child(12) { font-size: 13px; width: 54px; line-height: 54px; transition-delay: 2.3s; animation: float 4.2s ease-in-out 0s infinite; } #section2 .cont .worth .item_box .item:nth-child(1) .img li:nth-child(13) { font-size: 13px; width: 54px; line-height: 54px; transition-delay: 2.3s; animation: float 4.2s ease-in-out 0s infinite; } #section2 .cont .worth .item_box .item:nth-child(1).on .img .worth_bg1 { transform: scale(1); } #section2 .cont .worth .item_box .item:nth-child(1).on .img .worth_bg2 { transform: scale(1); } #section2 .cont .worth .item_box .item:nth-child(1).on .img li:nth-child(1) { top: 21%; left: 15%; left: 10%; } #section2 .cont .worth .item_box .item:nth-child(1).on .img li:nth-child(2) { top: 46%; left: 14%; left: 10%; } #section2 .cont .worth .item_box .item:nth-child(1).on .img li:nth-child(3) { top: 15%; left: 38%; left: 33%; } #section2 .cont .worth .item_box .item:nth-child(1).on .img li:nth-child(4) { top: 26%; left: 25%; left: 20%; } #section2 .cont .worth .item_box .item:nth-child(1).on .img li:nth-child(5) { top: 39%; left: 26%; left: 21%; } #section2 .cont .worth .item_box .item:nth-child(1).on .img li:nth-child(6) { top: 60%; left: 34%; left: 29%; } #section2 .cont .worth .item_box .item:nth-child(1).on .img li:nth-child(7) { top: 16%; left: 69%; left: 64%; } #section2 .cont .worth .item_box .item:nth-child(1).on .img li:nth-child(8) { top: 38%; left: 68%; left: 63%; } #section2 .cont .worth .item_box .item:nth-child(1).on .img li:nth-child(9) { top: 57%; left: 51%; left: 46%; } #section2 .cont .worth .item_box .item:nth-child(1).on .img li:nth-child(10) { top: 57%; left: 67%; left: 62%; } #section2 .cont .worth .item_box .item:nth-child(1).on .img li:nth-child(11) { top: 47%; left: 77%; left: 72%; } #section2 .cont .worth .item_box .item:nth-child(1).on .img li:nth-child(12) { top: 30%; left: 88%; left: 83%; } #section2 .cont .worth .item_box .item:nth-child(1).on .img li:nth-child(13) { top: 24%; left: 80%; left: 75%; } #section2 .cont .worth .item_box .item:nth-child(2) .img .video_bg { position: absolute; top: 0; left: 0; pointer-events: none; width: 100%; } #section2 .cont .worth .item_box .item:nth-child(2) .img .video_box { position: absolute; top: 10%; left: 25.5%; right: 25.75%; bottom: 38.3%; background-color: #0c1634; border-radius: 7px; overflow: hidden; cursor: pointer; } #section2 .cont .worth .item_box .item:nth-child(2) .img .video_box video { width: 100%; } #section2 .cont .worth .item_box .item:nth-child(2) .img .txt_l { background: #fff; border-radius: 10px; overflow: hidden; position: absolute; top: 9%; box-shadow: 0 0 12px #e8f0ff; right: 76%; transform: translateX(100px); opacity: 0; transition: all 0.8s; transition-delay: 0.1s; } #section2 .cont .worth .item_box .item:nth-child(2) .img .txt_l li { padding: 4px 0; } #section2 .cont .worth .item_box .item:nth-child(2) .img .txt_l li i { display: flex; align-items: center; font-size: 17px; font-weight: bold; color: #0c1634; padding: 2px 25px 2px 11px; width: 100%; position: relative; box-sizing: border-box; } #section2 .cont .worth .item_box .item:nth-child(2) .img .txt_l li i svg { width: 20px; height: 20px; padding: 6px 10px; } #section2 .cont .worth .item_box .item:nth-child(2) .img .txt_l li:nth-child(3) i { background: #f0f0f0; } #section2 .cont .worth .item_box .item:nth-child(2) .img .txt_l li:nth-child(3) i::after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 5px; bottom: 0; background: #3682f7; } #section2 .cont .worth .item_box .item:nth-child(2) .img .txt_l li:nth-child(3) i svg path { fill: #3682f7; } #section2 .cont .worth .item_box .item:nth-child(2) .img .txt_l li:nth-child(3) span { display: block; color: #88898b; padding: 5px 0 5px 80px; } #section2 .cont .worth .item_box .item:nth-child(2) .img .txt_l li:nth-child(3) span.on { color: #3682f7; font-weight: bold; } #section2 .cont .worth .item_box .item:nth-child(2) .img .txt_r { background: #fff; border-radius: 10px; overflow: hidden; position: absolute; bottom: 21%; left: 77%; width: 318px; box-shadow: 0 0 12px #e8f0ff; padding: 37px 15px; transform: translateX(-100px); opacity: 0; transition: all 0.8s; transition-delay: 0.1s; } #section2 .cont .worth .item_box .item:nth-child(2) .img .txt_r .t1 { text-align: center; color: #3682f7; font-weight: bold; } #section2 .cont .worth .item_box .item:nth-child(2) .img .txt_r .t2 { text-align: center; color: #88898b; margin-top: 5px; } #section2 .cont .worth .item_box .item:nth-child(2) .img .txt_r img { width: auto; padding: 10px 15px; } #section2 .cont .worth .item_box .item:nth-child(2) .img .txt_r .ic { display: flex; align-items: center; width: 100%; justify-content: space-between; } #section2 .cont .worth .item_box .item:nth-child(2) .img .txt_r .ic .lab { width: 48%; display: flex; align-items: center; position: relative; overflow: hidden; border-radius: 10px; box-shadow: 0 0 8px #e8f0ff; } #section2 .cont .worth .item_box .item:nth-child(2) .img .txt_r .ic .lab .svg_ic { position: relative; z-index: 1; padding: 15px; } #section2 .cont .worth .item_box .item:nth-child(2) .img .txt_r .ic .lab .svg_ic svg { width: 22px; height: 22px; } #section2 .cont .worth .item_box .item:nth-child(2) .img .txt_r .ic .lab .des { width: calc(100% - 52px); color: #fff; position: relative; z-index: 1; } #section2 .cont .worth .item_box .item:nth-child(2) .img .txt_r .ic .lab .des i { font-weight: bold; display: block; } #section2 .cont .worth .item_box .item:nth-child(2) .img .txt_r .ic .lab .des span { font-size: 12px; display: block; } #section2 .cont .worth .item_box .item:nth-child(2) .img .txt_r .ic .lab:nth-child(1) { background-color: #3682f7; transition: all 0.3s; } #section2 .cont .worth .item_box .item:nth-child(2) .img .txt_r .ic .lab:nth-child(1):hover { background-color: #1268ec; } #section2 .cont .worth .item_box .item:nth-child(2) .img .txt_r .ic .lab:nth-child(2)::after { content: ""; position: absolute; display: block; right: 0; top: 0; width: 200%; height: 100%; background-image: linear-gradient(to right, #9de866 0%, #46d2b6 30%, #46d2b6 70%, #9de866 100%); transition: all 0.5s; z-index: 0; } #section2 .cont .worth .item_box .item:nth-child(2) .img .txt_r .ic .lab:nth-child(2):hover::after { right: -100%; } #section2 .cont .worth .item_box .item:nth-child(2) .img .txt_r .ms { width: 95%; margin: 30px auto 0; color: #88898b; display: flex; font-size: 12px; line-height: 1.5; height: 1.5em; overflow: hidden; cursor: pointer; display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; -webkit-line-clamp: 1; } #section2 .cont .worth .item_box .item:nth-child(2) .img .txt_r .ms.on { display: block; height: auto; } #section2 .cont .worth .item_box .item:nth-child(2) .img .txt_r .arr { width: 100%; text-align: center; } #section2 .cont .worth .item_box .item:nth-child(2) .img .txt_r .arr svg { width: 20px; height: 20px; } #section2 .cont .worth .item_box .item:nth-child(2) .img .txt_r .arr.on svg { transform: rotateZ(180deg); } #section2 .cont .worth .item_box .item:nth-child(2).on .img .txt_l { transform: translateX(0); opacity: 1; } #section2 .cont .worth .item_box .item:nth-child(2).on .img .txt_r { transform: translateX(0); opacity: 1; } #section2 .cont .worth .item_box .item:nth-child(3) .img img { position: absolute; top: 0; left: 0; } #section2 .cont .worth .item_box .item:nth-child(3) .img li { position: absolute; opacity: 0; transform: translateY(-20px); transition-duration: 0.8s; transition-timing-function: ease-out; } #section2 .cont .worth .item_box .item:nth-child(3) .img li span { color: #0c1634; font-size: 14px; padding: 10px 40px; border-radius: 100px; background: #f1f1f1; transition: all 0.3s; display: inline-block; } #section2 .cont .worth .item_box .item:nth-child(3) .img li:hover span { background: #1268ec; color: #fff; } #section2 .cont .worth .item_box .item:nth-child(3) .img li:nth-child(1) { left: 20.5%; top: 71%; transition-delay: 0.1s; } #section2 .cont .worth .item_box .item:nth-child(3) .img li:nth-child(2) { left: 40.5%; top: 71%; transition-delay: 0.3s; } #section2 .cont .worth .item_box .item:nth-child(3) .img li:nth-child(3) { left: 59.5%; top: 71%; transition-delay: 0.5s; } #section2 .cont .worth .item_box .item:nth-child(3) .img li:nth-child(4) { left: 71%; top: 71%; transition-delay: 0.7s; } #section2 .cont .worth .item_box .item:nth-child(3) .img li:nth-child(5) { left: 82%; top: 71%; transition-delay: 0.9s; } #section2 .cont .worth .item_box .item:nth-child(3).on .img li { opacity: 1; transform: translateY(0); } #section2 .cont .worth .item_box .item:nth-child(4) .img { overflow: hidden; } #section2 .cont .worth .item_box .item:nth-child(4) .img img { position: absolute; top: 0; left: 0; } #section2 .cont .worth .item_box .item:nth-child(4) .img .bg_pic1 { z-index: 3; transform: scale(0.7); opacity: 0; transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1.3); transition-duration: 1s; transform-origin: 45% 35%; } #section2 .cont .worth .item_box .item:nth-child(4) .img .bg_pic2 { z-index: 2; } #section2 .cont .worth .item_box .item:nth-child(4) .img .bg_pic3 { z-index: 1; } #section2 .cont .worth .item_box .item:nth-child(4).on .img .bg_pic1 { transform: scale(1); opacity: 1; } #section2 .cont .worth .item_box .item p { text-align: center; color: #0c1634; display: block; width: 50%; margin: 0 auto; } #section2 .cont .worth .item_box .item .img { width: 100%; position: relative; padding-top: 53%; } @keyframes float { 0% { transform: translateY(10px); } 50% { transform: translateY(-10px); } 100% { transform: translateY(10px); } } @media screen and (max-width: 1600px) { #section2 .cont .ability .item_box .item .ctn_box { width: 92%; margin: 0 auto; } } @media screen and (max-width: 1280px) { #section2 .cont .worth .item_box { padding-top: 61.5%; } #section2 .cont .worth .item_box .item:nth-child(1) .img li:nth-child(1) { font-size: 10px; width: 36px; line-height: 36px; } #section2 .cont .worth .item_box .item:nth-child(1) .img li:nth-child(2) { font-size: 16px; width: 59px; line-height: 59px; } #section2 .cont .worth .item_box .item:nth-child(1) .img li:nth-child(3) { font-size: 9px; width: 36px; line-height: 36px; } #section2 .cont .worth .item_box .item:nth-child(1) .img li:nth-child(4) { font-size: 10px; width: 40px; line-height: 40px; } #section2 .cont .worth .item_box .item:nth-child(1) .img li:nth-child(5) { font-size: 16px; width: 65px; line-height: 65px; } #section2 .cont .worth .item_box .item:nth-child(1) .img li:nth-child(6) { font-size: 10px; width: 54px; line-height: 54px; } #section2 .cont .worth .item_box .item:nth-child(1) .img li:nth-child(7) { font-size: 9px; width: 36px; line-height: 36px; } #section2 .cont .worth .item_box .item:nth-child(1) .img li:nth-child(8) { font-size: 16px; width: 59px; line-height: 59px; } #section2 .cont .worth .item_box .item:nth-child(1) .img li:nth-child(9) { font-size: 16px; width: 59px; line-height: 59px; } #section2 .cont .worth .item_box .item:nth-child(1) .img li:nth-child(10) { font-size: 9px; width: 54px; line-height: 54px; } #section2 .cont .worth .item_box .item:nth-child(1) .img li:nth-child(11) { font-size: 16px; width: 59px; line-height: 59px; } #section2 .cont .worth .item_box .item:nth-child(1) .img li:nth-child(12) { font-size: 9px; width: 54px; line-height: 54px; } #section2 .cont .worth .item_box .item:nth-child(2) .img .txt_l li i { font-size: 14px; } #section2 .cont .worth .item_box .item:nth-child(2) .img .txt_l li:nth-child(3) span { font-size: 12px; } #section2 .cont .worth .item_box .item:nth-child(3) .img li span { font-size: 12px; padding: 5px 24px; } #section2 .cont .worth .item_box .item:nth-child(3) .img li:nth-child(1) { left: 17.5%; } #section2 .cont .worth .item_box .item:nth-child(3) .img li:nth-child(4) { left: 68%; } #section2 .cont .worth .item_box .item:nth-child(3) .img li:nth-child(3) { left: 56.5%; } #section2 .cont .worth .item_box .item:nth-child(2) .img .txt_r { width: 256px; } #section2 .cont .worth .item_box .item:nth-child(2) .img .txt_r img { width: 200px; } #section2 .cont .worth .item_box .item:nth-child(2) .img .txt_r .ic .lab .svg_ic { padding: 10px; } #section2 .cont .worth .item_box .item:nth-child(2) .img .txt_r .ic .lab .svg_ic svg { width: 19px; height: 19px; } #section2 .cont .worth .item_box .item:nth-child(2) .img .txt_r { padding: 23px 13px; } #section2 .cont .worth .item_box .item:nth-child(2) .img .txt_r .ic .lab .des { width: calc(100% - 40px); } #section2 .cont .worth .item_box .item:nth-child(2) .img .txt_r .ic .lab { width: 49%; border-radius: 5px; } #section2 .cont .worth .item_box .item:nth-child(2) .img .txt_r .ms { font-size: 12px; margin: 16px auto 0; } } @media screen and (max-width: 992px) { #section2 .cont .worth .item_box .item:nth-child(2) .img .video_box { bottom: 26.3%; top: 11%; } #section2 .cont .worth .item_box { padding-top: 68%; } #section2 .cont .worth .item_box .item p { width: 90%; display: block; height: auto; } #section2 .cont .worth .item_box .item:nth-child(1) .img li { font-size: 6px !important; width: 26px !important; line-height: 26px !important; } #section2 .cont .worth .item_box .item:nth-child(2).on .img .txt_l { display: none; } #section2 .cont .worth .item_box .item:nth-child(2).on .img .txt_r { display: none; } #section2 .cont .worth .item_box .item:nth-child(3) .img li span { font-size: 9px; padding: 3px 15px; } #section2 .cont .worth .item_box .item:nth-child(1) .img { margin-top: 3%; } #section2 .cont .worth .item_box .item:nth-child(2) .img { margin-top: 6%; width: 120%; margin-left: -10%; } } @media screen and (max-width: 414px) { #section2 .cont .worth .item_box .item:nth-child(3) .img ul { position: absolute; top: 77%; left: 0; right: 0; display: flex; justify-content: space-evenly; } #section2 .cont .worth .item_box .item:nth-child(3) .img ul li { position: static; } #section2 .cont .worth .item_box .item:nth-child(1) .img li { font-size: 8px !important; width: 50px !important; height: 50px; line-height: 50px !important; } } @media screen and (max-width: 375px) { #section2 {} #section2 .cont .worth .item_box .item:nth-child(3) .img li span { padding: 2px 12px; } } @media screen and (max-width: 360px) { #section2 .cont .worth .tab_box, #section2 .cont .ability .tab_box { padding: 3px 4px; } #section2 .cont .worth .item_box .item p, #section2 .cont .ability .item_box .item .txt ul li span { font-size: 12px; } } #section3 .content .title { font-size: 24px; font-weight: bold; margin-bottom: 20px; } #section4 .boxs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; } #section4 .boxs .box { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.07); padding: 36px 30px; border-radius: 4px; background-color: #fff; transition: all 0.3s; } #section4 .boxs .box:hover { transform: translateY(-10px); } #section4 .boxs .box .image { width: 40px; height: 40px; } #section4 .boxs .box .image img { width: 100%; height: 100%; object-fit: cover; } #section4 .boxs .box .title { width: 100%; font-size: 16px; text-align: left; font-weight: bold; color: #333; position: relative; } #section4 .boxs .box .title::before, #section4 .boxs .box .title::after { content: ""; display: block; left: 0; margin-top: 12px; margin-bottom: 16px; } #section4 .boxs .box .title::before { position: absolute; bottom: -1px; width: 30px; height: 3px; background: #dc000c; z-index: 1; } #section4 .boxs .box .title::after { position: relative; bottom: 0; width: 100%; height: 1px; background: rgba(201, 205, 212, 0.5); } #section4 .boxs .box .content { color: #999; font-size: 13px; line-height: 20px; font-weight: 400; margin-top: 0; } #section5 { min-height: 0; } #section5 .apps .list .item { position: relative; display: flex; flex-direction: column-reverse; } #section5 .apps .list .item .image { overflow: hidden; height: 50%; } #section5 .apps .list .item .image img { width: 100%; height: 100%; object-fit: cover; transition: all 0.3s; } #section5 .apps .list .item .text { background-color: #999; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 50%; } #section5 .apps .list .item .text .title { font-size: 24px; } #section5 .apps .list .item .text .line { display: inline-block; width: 38px; border-top: 1px solid #3b3b3b; margin: 10px auto; transition: all 0.3s; } #section5 .apps .list .item .text .desc { font-size: 14px; color: #e6e6e6; line-height: 1.8; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } #section5 .apps .list .item .text.white .title { color: #fff; } #section5 .apps .list .item .text.white .line { border-color: #fff; } #section5 .apps .list .item .text.white .desc { color: #fff; } #section5 .apps .list .item:nth-child(2n-1) { flex-direction: column; } #section5 .apps .list .item:first-child { display: block; } #section5 .apps .list .item:first-child .text { background-color: transparent; position: absolute; top: 0; left: 0; width: 100%; height: 80%; } #section5 .apps .list .item:first-child .image { height: 100%; } #section5 .apps .list .item:nth-child(2) .text { background-color: #f2f2f2; } #section5 .apps .list .item:nth-child(3) .text { background-color: #f2f2f2; } #section5 .apps .list .item:nth-child(4) .text { background-color: #f2f2f2; } #section5 .apps .list .item:hover .image img { transform: scale(1.1); } #section5 .apps .list .item:hover .text .line { width: 120px; } #section5 .apps .more { background-color: #fff; } #section5 .apps .more .arrow { font-size: 30px; transition: all 0.3s; } #section5 .apps .more:hover { color: rgb(220, 0, 12); } #section5 .apps .more:hover .arrow { transform: translateX(10px); } #section6 { min-height: 0; } @media (min-width: 768px) { .sections .section { min-height: 600px; } } @media (max-width: 768px) { .sections .section { padding: 40px 0; } .sections .section .wrap { padding: 0 15px; } .sections .section .wrap .t_title { font-size: 20px; flex-direction: column; align-items: flex-start; } .sections .section .wrap .tips { margin-bottom: 30px; } .sections .section .wrap .content { flex-direction: column; margin-top: 30px; } .sections .section .wrap .content .left { width: 100%; } .sections .section .wrap .content .right { width: 100%; } #section1 .boxs { grid-template-columns: repeat(1, minmax(0, 1fr)); } #section1 .boxs .box .content { margin-top: 10px; } #section2 .cont .worth .item_box .item:nth-child(1).on .img li:nth-child(1) { top: 15%; left: 5%; } #section2 .cont .worth .item_box .item:nth-child(1).on .img li:nth-child(2) { top: 66%; left: 0%; } #section2 .cont .worth .item_box .item:nth-child(1).on .img li:nth-child(3) { left: 28%; } #section2 .cont .worth .item_box .item:nth-child(1).on .img li:nth-child(4) { top: 40%; left: 15%; } #section2 .cont .worth .item_box .item:nth-child(1).on .img li:nth-child(5) { left: 16%; } #section2 .cont .worth .item_box .item:nth-child(1).on .img li:nth-child(6) { left: 30%; top: 55%; } #section2 .cont .worth .item_box .item:nth-child(1).on .img li:nth-child(7) { left: 59%; top: 0; } #section2 .cont .worth .item_box .item:nth-child(1).on .img li:nth-child(8) { left: 58%; top: 30%; } #section2 .cont .worth .item_box .item:nth-child(1).on .img li:nth-child(9) { left: 41%; top: 82%; } #section2 .cont .worth .item_box .item:nth-child(1).on .img li:nth-child(10) { top: 90%; left: 65%; } #section2 .cont .worth .item_box .item:nth-child(1).on .img li:nth-child(11) { top: 55%; left: 54%; } #section2 .cont .worth .item_box .item:nth-child(1).on .img li:nth-child(12) { top: 40%; left: 78%; } #section2 .cont .worth .item_box .item:nth-child(1).on .img li:nth-child(13) { left: 80%; top: 0; } #section2 .cont .worth .item_box { padding-top: 75.5%; } #section2 .cont .worth { padding-top: 15%; } #section2 .cont .worth .tab_box { margin: 6% auto; } #section2 .cont .worth .item_box .item p { width: 90%; } #section4 .boxs { grid-template-columns: repeat(1, minmax(0, 1fr)); } #section5 .apps .list .item .text .title { font-size: 16px; } } /*# sourceMappingURL=solution.css.map */