.nav_tit { font-weight: 400; text-align: center; color: #2b2b2b; line-height: 1; } .nav_tit::after { content: ""; display: block; width: 60px; height: 2px; margin: auto; margin-top: 18px; background: #d0121b; } .dis_flex { display: flex; } .subTit { margin-top:20px; font-weight: 400; color: #333333; text-align: center; } .nav_mes { font-weight: 400; text-align: center; color: #2b2b2b; margin-top:20px; } .dis_none { display: none; } .con .page1 { overflow: hidden; padding: 70px 0; } .con .page1 .main { position: relative; max-width: 1920px; margin: auto; } .con .page1 img { width: 100%; } .con .page1 .image { width: 36.77%; position: absolute; top: 50%; transform: translateY(-50%); right: 12.5%; } .con .page1 .nav_tit { text-align: left; position: absolute; top: 0; left: 16.6667%; } .con .page1 .nav_tit::after { margin-left: 0; } .con .page1 .mes { position: absolute; top: 50%; transform: translateY(-50%); left: 16.6667%; font-weight: 400; text-align: left; color: #333333; line-height: 2; max-width: calc(100% - 36.77% - 12.5% - 16.77% - 20px); } .con .page2 { padding: 70px 0; background: url(/static/cn/img/serviceSupport_ecosystemCooperation_page2_bg.jpg) no-repeat; background-size: cover; } .con .page2 .main { margin-top: 40px; } .con .page2 .main .main_l { flex: 0 0 37.5%; } .con .page2 .main .main_l img { width: 100%; border-radius: 10px; overflow: hidden; } .con .page2 .main .main_r { flex: 1; margin-left: 20px; } .con .page2 .main .main_r .layui-input-block { margin-left: 0; display: flex; background: #f9f9f9; border: 1px solid #dcdcdc; padding: 22px 20px; border-radius: 4px; align-items: center; } .con .page2 .main .main_r .layui-input-prefix { display: flex; align-items: center; } .con .page2 .main .main_r .layui-input-prefix img { padding-right: 10px; border-right: 1px solid #dfdfdf; } .con .page2 .main .main_r .dis_no_aliCen { align-items: flex-start; } .con .page2 .main .main_r .layui-form-item { flex: 1; margin-right: 20px; margin-bottom: 20px; } .con .page2 .main .main_r .layui-form-item:last-child { margin-right: 0; } .con .page2 .main .main_r .layui-input { border: none; background: transparent; line-height: normal; height: auto; padding: 0 0 0 8px; color: #888; } .con .page2 .main .main_r .sub { margin-top: 20px; } .con .page2 .main .main_r .sub button { padding: 14px; min-width: 300px; background: #dd0006; border-radius: 4px; height: auto; line-height: 1; } .con .page2 .main .main_r .sub button span { color: #fff; } .con .page3 { padding:70px 0; background: #fbfbfb; } .con .page3 .main { margin-top:40px; text-align: center; } .con .page3 .main img { max-width: 100%; } .con .page4 { padding: 70px 0; } .con .page4 .w1440 > div { flex: 1; padding:40px; background: #f8f8f8; border-radius: 40px; height: auto; margin-right: 20px; } .con .page4 .w1440 > div:last-child { margin: 0; } .con .page4 .w1440 > div .tit { font-weight: 400; text-align: center; color: #2b2b2b; } .con .page4 .w1440 > div .main_footer { margin-top: 20px; } .con .page4 .w1440 > div .main_footer img { width: 100%; } .con .page4 .w1440 .main_l .main_head { margin-top: 20px; justify-content: space-between; position: relative; } .con .page4 .w1440 .main_l .main_head p { font-weight: 400; color: #ffffff; text-align: center; width: 34%; padding: 16px; } .con .page4 .w1440 .main_l .main_head p:nth-child(1) { background-image: linear-gradient(to top, rgba(250, 35, 47, 0.7), rgba(250, 35, 47, 0) 95%); border-radius: 30px; } .con .page4 .w1440 .main_l .main_head p:nth-child(2) { width: 50%; position: absolute; top: 0; left: 50%; z-index: 2; transform: translateX(-50%); background: rgba(243, 46, 31, 0.6); border-radius: 30px; } .con .page4 .w1440 .main_l .main_head p:nth-child(3) { background-image: linear-gradient(to bottom, rgba(250, 35, 47, 0.8), rgba(250, 35, 47, 0) 95%); border-radius: 30px; } .con .page4 .w1440 .main_l .main_footer > div { flex: 0 0 calc((100% - 3vw)/3); background: rgba(255, 255, 255, 0.3); border-radius: 20px; box-shadow: 0px 10px 20px 0px rgba(204, 204, 204, 0.35); margin-right: 1.5vw; padding: 20px; text-align: center; } .con .page4 .w1440 .main_l .main_footer > div:last-child, .con .page4 .w1440 .main_l .main_footer > div:nth-child(3) { margin-right: 0; } .con .page4 .w1440 .main_l .main_footer > div:nth-child(n+4) { flex: 0 0 calc((100% - 1.5vw)/2); display: flex; align-items: center; margin-top: 30px; margin-bottom: 0; } .con .page4 .w1440 .main_l .main_footer > div:nth-child(n+4) .image { margin: 0; } .con .page4 .w1440 .main_l .main_footer > div:nth-child(n+4) p { margin-left: 16px; } .con .page4 .w1440 .main_l .main_footer > div p { margin-top: 8px; text-align: center; color: #333333; } .con .page4 .w1440 .main_l .main_footer > div .image { width: 80px; height: 80px; border-radius: 100%; background: rgba(215, 17, 27, 0.1); padding: 0.9375vw; margin: auto; } .con .page4 .w1440 .main_l .main_footer > div .image > div { width: 100%; height: 100%; border-radius: 100%; background: #d7111b; display: flex; align-items: center; justify-content: center; } .con .page4 .w1440 .main_l .main_footer > div .image > div img { max-width: 50%; } .con .page4 .w1440 .main_r .main_head { margin-top: 20px; position: relative; width: 100%; } .con .page4 .w1440 .main_r .main_head p { font-weight: 400; color: #ffffff; text-align: center; width: 52%; padding: 16px; } .con .page4 .w1440 .main_r .main_head p:nth-child(1) { background: linear-gradient(to right, rgba(243, 31, 43, 0) 0%, #f32e1f 100%); border-radius: 0 30px 30px 0; } .con .page4 .w1440 .main_r .main_head p:nth-child(2) { position: absolute; top: 0; right: 0; z-index: 2; background: linear-gradient(to left, rgba(243, 31, 43, 0) 0%, #f32e1f 100%); border-radius: 30px; } .con .page5 { padding: 70px 0; background: url(../img/serviceSupport_trainingCertification_page6_bg.jpg) no-repeat; background-size: cover; position: relative; } .con .page5 .main { margin-top: 40px; height: 510px; overflow: hidden; width: 100%; } .con .page5 .main .swiper-slide { height: calc((100% - 90px) / 4) !important; padding: 10px; background: #ffffff; border-radius: 10px; box-shadow: 0px 8px 10px 0px rgba(23, 93, 181, 0.1); display: flex; justify-content: center; align-items: center; } .con .page5 .main .swiper-slide img { max-width: 100%; max-height: 100%; } .con .page5 .swiper-pagination { position: static; margin: auto; margin-top: 3.6458vw; transform: none; } .con .page5 .swiper-pagination .swiper-pagination-bullet { width: 10px; height: 10px; opacity: 0.5; background: #ffffff; border-radius: 100%; } .con .page5 .swiper-pagination .swiper-pagination-bullet-active { width: 31px; height: 10px; background: #ffffff; border-radius: 5px; opacity: 1; } @media only screen and (max-width: 1600px) { .con .page1 .nav_tit, .con .page1 .mes { left: 10%; } .con .page1 .mes { max-width: calc(100% - 36.77% - 12.5% - 10% - 20px); } } @media only screen and (max-width: 1200px) { .con .page1 .nav_tit, .con .page1 .mes { left: 5%; } .con .page1 .mes { max-width: calc(100% - 36.77% - 12.5% - 5% - 20px); } } @media only screen and (max-width: 1000px) { .con .page1 .nav_tit, .con .page1 .mes { position: static; transform: none; margin-left: 5vw; } .con .page5 .main .swiper-slide{ height:60px !important; } .con .page2 .main .main_r{ margin-left: 0; } .con .page1 .mes { margin-top: 20px; width: 90%; max-width: 100%; } .con .page1 .mes br { display: none; } .con .page1 { padding: 20px 0 60px 0; } .con .page1 .nav_tit { text-align: center; } .con .page1 .nav_tit::after { margin: auto; margin-top: 10px; margin-left: auto; } .con .page1 .image { position: static; transform: none; margin: auto; margin-top: 20px; width: 90%; } .con .page1 .main > img { display: none; } .con .page2 { padding: 60px 0; } .nav_tit::after { margin-top: 10px; } .con .page2 .main { flex-wrap: wrap; margin-top: 20px; } .con .page2 .main .main_l { flex: 0 0 100%; margin-bottom: 20px; } .dis_flex { flex-wrap: wrap; } .con .page2 .main .main_r .layui-form-item { flex: 0 0 100%; margin: 0 0 20px 0; } .con .page2 .main .main_r .layui-input-block { padding: 10px 20px; } .con .page2 .main .main_r .sub button { min-width: auto; width: 100%; padding: 10px; } .con .page2 .main .main_r .layui-input-prefix img { height: 14px; border: none; } .con .page2 .main .main_r .layui-input-prefix { width: 30px; border-right: 1px solid #dfdfdf; } .con .page3 { padding: 60px 0; } .nav_mes { margin-top: 20px; } .con .page3 .main { margin-top: 20px; } .con .page4 .w1440 > div:last-child{ margin-top: 20px; } .con .page4 { padding: 60px 0; } .con .page4 .w1440 > div { flex: 0 0 100%; } .con .page4 .w1440 > div { padding: 20px; } .con .page4 .w1440 .main_r .main_head p, .con .page4 .w1440 .main_l .main_head p { padding: 10px; } .con .page4 .w1440 .main_l .main_head p:nth-child(2) { width: 40%; } .con .page4 .w1440 > div .main_footer { margin-top: 20px; } .con .page4 .w1440 .main_r .main_head, .con .page4 .w1440 .main_l .main_head { margin-top: 20px; } .con .page5 { padding: 60px 0; } .con .page5 .main { margin-top: 20px; } .con .page5 .main { height: auto; } .con .page5 .swiper-pagination { margin-top: 20px; } } @media only screen and (max-width: 768px) { .con .page1 .nav_tit, .con .page1 .mes { position: static; transform: none; margin-left: 5vw; } .con .page5 .main .swiper-slide{ height:60px !important; } .con .page2 .main .main_r{ margin-left: 0; } .con .page1 .mes { margin-top: 20px; width: 90%; max-width: 100%; } .con .page1 .mes br { display: none; } .con .page1 { padding: 20px 0 40px 0; } .con .page1 .nav_tit { text-align: center; } .con .page1 .nav_tit::after { margin: auto; margin-top: 10px; margin-left: auto; } .con .page1 .image { position: static; transform: none; margin: auto; margin-top: 20px; width: 90%; } .con .page1 .main > img { display: none; } .con .page2 { padding: 40px 0; } .nav_tit::after { margin-top: 10px; } .con .page2 .main { flex-wrap: wrap; margin-top: 20px; } .con .page2 .main .main_l { flex: 0 0 100%; margin-bottom: 20px; } .dis_flex { flex-wrap: wrap; } .con .page2 .main .main_r .layui-form-item { flex: 0 0 100%; margin: 0 0 20px 0; } .con .page2 .main .main_r .layui-input-block { padding: 10px 20px; } .con .page2 .main .main_r .sub button { min-width: auto; width: 100%; padding: 10px; } .con .page2 .main .main_r .layui-input-prefix img { height: 14px; border: none; } .con .page2 .main .main_r .layui-input-prefix { width: 30px; border-right: 1px solid #dfdfdf; } .con .page3 { padding: 40px 0; } .nav_mes { margin-top: 20px; } .con .page3 .main { margin-top: 20px; } .con .page4 .w1440 > div:last-child{ margin-top: 20px; } .con .page4 { padding: 40px 0; } .con .page4 .w1440 > div { flex: 0 0 100%; } .con .page4 .w1440 > div { padding: 20px; } .con .page4 .w1440 .main_r .main_head p, .con .page4 .w1440 .main_l .main_head p { padding: 10px; } .con .page4 .w1440 .main_l .main_head p:nth-child(2) { width: 40%; } .con .page4 .w1440 > div .main_footer { margin-top: 20px; } .con .page4 .w1440 .main_r .main_head, .con .page4 .w1440 .main_l .main_head { margin-top: 20px; } .con .page5 { padding: 40px 0; } .con .page5 .main { margin-top: 20px; } .con .page5 .main { height: auto; } .con .page5 .swiper-pagination { margin-top: 20px; } }