@charset "UTF-8"; .sectionSeo { display: flex; flex-direction: column; align-items: center; width: 100%; } .sectionSeo h2 { font: normal normal bold 40px/61px Titillium Web; color: #39325a; } .sectionSeo .des { margin-top: 6px; font: normal normal normal 18px/27px Titillium Web; color: #39325a; max-width: 1086px; text-align: center; } .sectionSeo .seo_btn { width: fit-content; padding: 0 53px; height: 42px; font: normal normal 600 14px/42px Titillium Web; text-align: center; color: #ffffff; background: transparent linear-gradient(101deg, #1101fd 0%, #60f8e9 100%) 0% 0% no-repeat padding-box; transition: all 0.3s ease; cursor: pointer; display: block; } @media (min-width: 1200px) { .sectionSeo .seo_btn:hover { opacity: 0.8; } } .sectionA { background-image: url("/dist/img/face-swap-seo/a_bg.png"); background-repeat: no-repeat; background-size: cover; padding: 80px 0 64px; } .sectionA .a_tab { margin-top: 32px; padding: 9px 10px; background: #e2e4eb 0% 0% no-repeat padding-box; display: flex; } .sectionA .a_tab .tab_name { display: flex; justify-content: center; align-items: center; padding: 0 50px; min-width: 385px; height: 42px; font: normal normal 600 16px/40px Titillium Web; color: #39325a; cursor: pointer; } .sectionA .a_tab .tab_name.active { background-color: #ffffff; } .sectionA .a_tab .tab_name .icon { width: 26px; height: 23px; margin-right: 6px; } .sectionA .a_item, .sectionA .swiper-slide { width: 330px; position: relative; border-radius: 4px; overflow: hidden; } .sectionA .a_item img, .sectionA .swiper-slide img { width: 100%; height: auto; object-fit: contain; } .sectionA .a_item .item_btn, .sectionA .swiper-slide .item_btn { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); width: fit-content; text-align: center; padding: 0 40px; height: 38px; font: normal normal 600 14px/38px Titillium Web; color: #fff; cursor: pointer; border-radius: 4px; background-color: #8d87a9; transition: all 0.3s ease; } .sectionA .a_item .item_btn:hover, .sectionA .swiper-slide .item_btn:hover { background-color: #fff; color: #39325a; } .sectionA .a_item + .a_item, .sectionA .swiper-slide + .a_item { margin-top: 18px; } .sectionA .a_box, .sectionA .a_swiper { margin-top: 64px; display: none; } .sectionA .a_box .a_col, .sectionA .a_swiper .a_col { display: flex; flex-direction: column; } .sectionA .a_box .a_col + .a_col, .sectionA .a_swiper .a_col + .a_col { margin-left: 18px; } .sectionA .a_box .a_col:nth-child(2n), .sectionA .a_swiper .a_col:nth-child(2n) { padding-top: 18px; } .sectionA .a_box.active, .sectionA .a_swiper.active { display: flex; } .sectionA .a_box[tabName="video"] .a_col, .sectionA .a_swiper[tabName="video"] .a_col { padding-top: 0; } .sectionA .a_box[tabName="video"] .a_item, .sectionA .a_swiper[tabName="video"] .a_item { width: 420px; } .sectionA .a_swiper.mobile_show { display: none; } .sectionA .seo_btn { margin-top: 43px; } .sectionB { background-color: #fff; padding: 80px 0; } .sectionB .b_box { display: flex; margin: 64px 0 48px; } .sectionB .b_box .b_item { width: 334px; } @media (min-width: 1200px) { .sectionB .b_box .b_item + .b_item { margin-left: 67px; } } .sectionB .b_box .b_item img { width: 100%; height: 273px; object-fit: contain; } .sectionB .b_box .b_text { font: normal normal normal 14px/26px Titillium Web; color: #39325a; } .sectionC { background-color: #fff; padding: 64px 0 80px; position: relative; } .sectionC h2, .sectionC .des { z-index: 1; } .sectionC .des { margin-bottom: 56px; } .sectionC .c_bg { position: absolute; width: 100%; height: 400px; top: 0; left: 0; background: transparent linear-gradient(180deg, #f4f4f7 0%, #eef6ff 100%) 0% 0% no-repeat padding-box; } .sectionC .c_col { display: flex; z-index: 1; } .sectionC .c_col .c_item { width: 585px; height: 320px; } .sectionC .c_col .c_item.logo { padding: 20px; border: 1px solid #e8e8e8; border-radius: 4px 0px 0px 0px; background-color: #fff; } .sectionC .c_col .c_item.logo img { width: 100%; height: 100%; object-fit: contain; } .sectionC .c_col .c_item.text { background: #fafafb 0% 0% no-repeat padding-box; padding: 58px 110px 0 74px; border: 1px solid #e8e8e8; border-radius: 0px 4px 0px 0px; } .sectionC .c_col .c_item.text .item_title { font: normal normal bold 24px/36px Titillium Web; color: #39325a; } .sectionC .c_col .c_item.text .item_content { font: normal normal normal 16px/24px Titillium Web; color: #39325a; margin: 12px 0 16px; } @media (min-width: 1200px) { .sectionC .c_col:nth-child(2n + 1) { flex-direction: row-reverse; } } .sectionD { background-image: url("/dist/img/face-swap-seo/d_bg.png"); background-repeat: no-repeat; background-size: cover; padding: 64px 0 76px; } .sectionD .sectionD_box { width: 1170px; } .sectionD h2 { width: 395px; } .sectionD .des { width: 454px; text-align: left; } .sectionD .sectionD_col { display: flex; margin: 52px 0 48px; } .sectionD .sectionD_col .d_item { width: 234px; height: 320px; padding: 60px 25px 0; background: #ffffff; } .sectionD .sectionD_col .d_item .icon { width: 48px; height: 48px; } .sectionD .sectionD_col .d_item .icon img { width: 100%; height: 100%; } .sectionD .sectionD_col .d_item .d_item_title { margin: 12px 0 10px; font: normal normal bold 18px/27px Titillium Web; } .sectionD .sectionD_col .d_item .d_item_title::first-letter { font-size: 28px; } .sectionD .sectionD_col .d_item .d_item_text { font: normal normal normal 14px/22px Titillium Web; } .sectionD .sectionD_col .d_item:nth-child(2n + 1) { background: #fafafb 0% 0% no-repeat padding-box; } @media (min-width: 1200px) { .sectionD .sectionD_col .d_item:nth-child(2n + 1) { margin-top: 34px; } } .sectionD .seo_btn { margin: 0 auto; } .sectionE { margin: 30px 5% 0; background: #f4f4f7; border-radius: 6px; padding: 64px 0 85px; width: 90%; } .sectionE .e_box { display: flex; justify-content: center; margin-top: 51px; } .sectionE .e_col { display: flex; flex-direction: column; } .sectionE .e_col:first-child .e_item:first-child { padding: 24px; } .sectionE .e_col:first-child .e_item:first-child .main_text { width: 317px; } .sectionE .e_col:first-child .e_item:last-child { margin-top: 32px; padding: 20px 13px 24px; margin-left: auto; } .sectionE .e_col:first-child .e_item:last-child .main_text { width: 253px; } .sectionE .e_col:nth-child(2) { margin: 0 28px; width: 280px; } .sectionE .e_col:nth-child(2) .e_item:first-child { padding: 24px 21px; } .sectionE .e_col:nth-child(2) .e_item:first-child .main_text { width: 238px; } .sectionE .e_col:nth-child(2) .e_item:last-child { margin-top: 42px; padding: 23px 34px 24px; background: #89d4d9 0% 0% no-repeat padding-box; margin-left: 5px; z-index: 1; } .sectionE .e_col:nth-child(2) .e_item:last-child .main_text { width: 252px; color: #ffffff; } .sectionE .e_col:nth-child(2) .e_item:last-child .e_footer .text { color: #ffffff; } .sectionE .e_col:last-child .e_item:first-child { background: #5c9cfa 0% 0% no-repeat padding-box; padding: 20px 28px 23px; } .sectionE .e_col:last-child .e_item:first-child .main_text { width: 317px; color: #ffffff; } .sectionE .e_col:last-child .e_item:first-child .e_footer .text { color: #ffffff; } .sectionE .e_col:last-child .e_item:last-child { margin-top: 32px; padding: 20px 31px 24px; } .sectionE .e_col:last-child .e_item:last-child .main_text { width: 253px; } .sectionE .e_item { background: #ffffff; width: fit-content; border-radius: 4px; } .sectionE .e_item .main_text { font: normal normal normal 14px/22px Titillium Web; color: #39325a; } .sectionE .e_item .e_footer { margin-top: 30px; display: flex; justify-content: space-between; } .sectionE .e_item .e_footer .icon { width: 92px; height: 15px; background-image: url("/dist/img/face-swap-seo/star.png"); background-repeat: no-repeat; background-size: cover; } .sectionE .e_item .e_footer .text { font: normal normal bold 14px/22px Titillium Web; color: #39325a; } .sectionF { padding: 82px 0; } .sectionF h2 { font: normal normal bold 40px/50px Titillium Web; } .sectionF h2 p { font: normal normal bold 28px/50px Titillium Web; } .sectionF .f_box { display: flex; justify-content: space-between; width: 1170px; } .sectionF .f_list { padding-top: 20px; width: 680px; } .sectionF .f_list .list_item { cursor: pointer; padding: 30px 0; border-bottom: 1px solid #c9c9c9; } .sectionF .f_list .list_item .list_header { display: flex; justify-content: space-between; align-items: center; } .sectionF .f_list .list_item .list_header .text { font: normal normal bold 16px/24px Titillium Web; color: #39325a; } .sectionF .f_list .list_item .list_header .icon img { width: 12px; object-fit: contain; } .sectionF .f_list .list_item .list_content { width: 501px; font: normal normal normal 14px/21px Titillium Web; color: #39325a; display: none; } .sectionF .f_list .list_item .list_content ul li { display: flex; align-items: center; } .sectionF .f_list .list_item .list_content ul li::before { content: ""; display: block; width: 8px; height: 8px; background-color: #39325a; border-radius: 50%; margin-right: 8px; flex-shrink: 0; } .sectionF .f_list .list_item.active .list_header .icon img { content: url("/dist/img/face-swap-seo/jian.png"); } .sectionF .f_list .list_item.active .list_content { display: block; } .sectionG { background-image: url("/dist/img/face-swap-seo/g_bg.png"); background-repeat: no-repeat; background-size: cover; height: 260px; padding-top: 70px; } .sectionG h2 { font: normal normal bold 30px/50px Titillium Web; margin-bottom: 30px; } #footer { padding-top: 40px; } @media (max-width: 1200px) { .sectionSeo { padding: 0.8rem 0.6rem; overflow: hidden; } .sectionSeo h2 { font: normal normal bold 0.46rem/0.7rem Titillium Web; text-align: center; } .sectionSeo .des { margin-top: 0.16rem; font: normal normal normal 0.3rem/0.46rem Titillium Web; } .sectionSeo .seo_btn { padding: 0 0.53rem; height: 0.83rem; min-width: 3.9rem; font: normal normal 600 0.26rem/0.83rem Titillium Web; } .sectionA { padding: 0.56rem 0.6rem 0.8rem; } .sectionA .a_tab { margin-top: 0.52rem; padding: 0.1rem 0.12rem; } .sectionA .a_tab .tab_name { padding: 0 0.1rem; min-width: 3rem; height: 0.8rem; border-radius: 0.06rem; font: normal normal 600 0.26rem/0.51rem Titillium Web; } .sectionA .a_tab .tab_name .icon { width: 0.36rem; height: 0.32rem; margin-right: 0.12rem; } .sectionA .a_swiper { position: relative; width: 100%; } .sectionA .a_swiper.active { display: flex; } .sectionA .seo_section1_swiper_continer, .sectionA .seo_section2_swiper_continer { position: relative; width: 100%; height: 8rem; } .sectionA .seo_section1_swiper_continer .swiper-wrapper, .sectionA .seo_section2_swiper_continer .swiper-wrapper { display: flex; position: absolute; top: 0; left: 0; } .sectionA .swiper-pagination_photo, .sectionA .swiper-pagination_video { position: absolute; top: 7.7rem; display: flex; width: 100%; align-items: center; justify-content: center; } .sectionA .swiper-pagination_photo .swiper-pagination-bullet, .sectionA .swiper-pagination_video .swiper-pagination-bullet { display: block; width: 0.24rem; height: 0.24rem; border-radius: 50%; background: #cdd0da 0% 0% no-repeat padding-box; } .sectionA .swiper-pagination_photo .swiper-pagination-bullet + .swiper-pagination-bullet, .sectionA .swiper-pagination_video .swiper-pagination-bullet + .swiper-pagination-bullet { margin-left: 0.2rem; } .sectionA .swiper-pagination_photo .swiper-pagination-bullet.swiper-pagination-bullet-active, .sectionA .swiper-pagination_video .swiper-pagination-bullet.swiper-pagination-bullet-active { width: 0.4rem; height: 0.4rem; background: #0f45f5 0% 0% no-repeat padding-box; } .sectionA .swiper-icon { width: 0.88rem; height: 0.88rem; position: absolute; top: 50%; transform: translateY(-50%); background-repeat: no-repeat; background-size: cover; z-index: 2; } .sectionA .swiper-icon.prev-btn { left: -7%; background-image: url("/dist/img/face-swap-seo/icon_right.png"); } .sectionA .swiper-icon.next-btn { background-image: url("/dist/img/face-swap-seo/icon_left.png"); right: -7%; } .sectionA .swiper-slide { width: 100%; } .sectionB .b_box { flex-direction: column; } .sectionB .b_box .b_item { width: 100%; } .sectionB .b_box .b_item img { height: auto; } .sectionB .b_box .b_text { text-align: center; margin: 0.27rem 0 0.73rem; font: normal normal normal 0.26rem/0.42rem Titillium Web; } .sectionC .c_bg { height: 1130px; background: transparent linear-gradient(180deg, #f4f4f7 0%, #eef6ff 100%) 0% 0% no-repeat padding-box; } .sectionC .c_col { width: 100%; flex-direction: column; } .sectionC .c_col .c_item { width: 100%; height: auto; } .sectionC .c_col .c_item.logo { padding: 0.22rem; } .sectionC .c_col .c_item.logo img { height: auto; } .sectionC .c_col .c_item.text { padding: 0.58rem 0.68rem; display: flex; flex-direction: column; align-items: center; } .sectionC .c_col .c_item.text .item_title { text-align: center; } .sectionC .c_col .c_item.text .item_content { margin: 0.22rem 0 0.26rem; text-align: center; } .sectionD .sectionD_box { width: 100%; } .sectionD .sectionD_box h2, .sectionD .sectionD_box .des { text-align: left; width: 4.54rem; } .sectionD .sectionD_box .sectionD_col { flex-direction: column; margin-top: 0.64rem; } .sectionD .sectionD_box .sectionD_col .d_item:nth-child(2n) { margin-left: auto; } .sectionD .sectionD_box .sectionD_col .d_item { width: 4.42rem; height: 5.2rem; padding: 0.62rem 0.34rem 0 0.25rem; } .sectionD .sectionD_box .sectionD_col .d_item .icon { width: 1.06rem; height: 1.06rem; } .sectionD .sectionD_box .sectionD_col .d_item .d_item_title { font: normal normal bold 0.3rem/0.46rem Titillium Web; } .sectionD .sectionD_box .sectionD_col .d_item .d_item_title::first-letter { font-size: 0.56rem; } .sectionD .sectionD_box .sectionD_col .d_item .d_item_text { font: normal normal normal 0.26rem/0.42rem Titillium Web; } .sectionE .e_box { margin-top: 0.64rem; overflow-x: scroll; width: 100vw; position: relative; padding: 0 0.6rem; justify-content: start; } .sectionE .e_box::-webkit-scrollbar { display: none; /* 隐藏Chrome和Safari浏览器的滚动条 */ } .sectionE .e_box .e_col { flex-direction: row; width: auto !important; margin: 0 !important; } .sectionE .e_box .e_col .e_item { width: 5.12rem !important; height: 5.12rem !important; padding: 0.75rem 0.35rem 0 !important; margin: 0 !important; margin-right: 0.28rem !important; } .sectionE .e_box .e_col .e_item .main_text { width: 100% !important; font: normal normal normal 0.26rem/.42rem Titillium Web; } .sectionF .f_box { width: 100%; justify-content: start; flex-direction: column; align-items: center; } .sectionF .f_list { width: 100%; } .sectionF .f_list .list_item { padding: 0.4rem 0; } .sectionF .f_list .list_item .list_content { width: 80%; } .sectionG { padding: 2.15rem 0.65rem 0; height: 7.4rem; background-image: url("/dist/img/face-swap-seo/g_bg_m.png"); } } @media screen and (max-width: 1400px) and (min-width: 1200px) { .sectionA .a_item { width: 290px; } }