.con .nav_tit { font-weight:400; text-align: center; color: #2b2b2b; line-height: 1; } .con .nav_tit::after { content: ""; display: block; width: 60px; height: 2px; margin: auto; margin-top: 18px; background: #d0121b; } .con .dis_flex { display: flex; margin-bottom: 20px; } .con .dis_none { display: none; } .con .nav_mes { font-weight: 400; text-align: center; color: #2b2b2b; margin-top: 1.25vw; } .con .page1 { padding: 70px 0; background: url(../img/serviceSupport_distributor_page1_bg.jpg) no-repeat; background-size: cover; } .con .page1 .w1440 { display: flex; } .con .page1 .w1440 .main_l { flex: 1; padding-right: 7%; } .con .page1 .w1440 .main_l .nav_tit { text-align: left; } .con .page1 .w1440 .main_l .nav_tit::after { margin-left: 0; } .con .page1 .w1440 .main_l .mes { font-weight: 400; text-align: justifyLeft; color: #999999; line-height: 1.8; margin-top: 20px; } .con .page1 .w1440 .main_l .tel { font-weight: 500; text-align: left; color: #333333; margin-top: 20px; } .con .page1 .w1440 .main_l .tel a { transition: all 0.2s linear; } .con .page1 .w1440 .main_l .tel a:hover { text-decoration: underline; color: #D0121B; } .con .page1 .w1440 .main_r { flex: 0 0 66.66%; } .con .page1 .w1440 .main_r .layui-input-block { margin-left: 0; display: flex; padding: 22px 20px; background: #f9f9f9; border: 1px solid #dcdcdc; border-radius: 4px; align-items: center; } .con .page1 .w1440 .main_r .layui-input-block .layui-input-prefix { display: flex; align-items: center; } .con .page1 .w1440 .main_r .layui-input-block .layui-input-prefix img { padding-right: 10px; border-right: 1px solid #dfdfdf; } .con .page1 .w1440 .main_r .dis_no_aliCen { align-items: flex-start; } .con .page1 .w1440 .main_r .dis_flex > div { flex: 1; margin-right: 16px; } .con .page1 .w1440 .main_r .dis_flex > div:last-child { margin-right: 0; } .con .page1 .w1440 .main_r .layui-textarea, .con .page1 .w1440 .main_r .layui-input { border: none; width: 100%; background: transparent; line-height: normal; height: auto; padding: 0 0 0 8px; color: #888; } .con .page1 .w1440 .main_r .layui-textarea { min-height: 150px; } .con .page1 .w1440 .main_r .sub { margin-top: 40px; } .con .page1 .w1440 .main_r .sub button { padding: 14px; min-width: 300px; background: #dd0006; border-radius: 4px; height: auto; line-height: 1; } .con .page1 .w1440 .main_r .sub button span { color: #fff; } .con .page2 { padding: 70px 0 60px 0; background: url(/static/cn/img/serviceSupport_distributor_page2_bg.jpg) no-repeat; background-size: cover; } .con .page2 .main { display: flex; flex-wrap: wrap; margin-top: 40px; } .con .page2 .main .list { flex: 0 0 calc((100% - 11.2%)/5); background: #ffffff; margin-right: 2.8%; border-radius: 20px; margin-bottom: 20px; padding: 26px 26px 20px 26px; cursor: pointer; } .con .page2 .main .list:nth-child(5n) { margin-right: 0; } .con .page2 .main .list .image { width: 84px; height: 84px; background: #f6f4f9; border-radius: 100%; margin: auto; display: flex; align-items: center; justify-content: center; } .con .page2 .main .list .image img { height: 44px; max-width: 100%; transition: all 0.4s linear; } .con .page2 .main .list:hover img { transform: translateY(-50%); } .con .page2 .main .list .tit { font-weight: 600; text-align: center; color: #333333; margin-top: 20px; } .con .page2 .main .list .mes { font-size: 14px; font-weight: 400; text-align: center; color: #999999; margin-top: 10px; } @media only screen and (max-width: 768px) { .con .page1 .w1440 { flex-wrap: wrap; } .con .dis_flex{ margin-bottom: 0; } .con .page1 .w1440 .main_l { flex: 0 0 100%; padding-right: 0; } .con .page1 .w1440 .main_r { flex: 0 0 100%; margin-top: 20px; } .con .page1 { padding: 40px 0; } .con .nav_tit::after { margin-top: 10px; } .con .page1 .w1440 .main_l .mes { margin-top: 20px; } .con .dis_flex { flex-wrap: wrap; } .con .page1 .w1440 .main_r .layui-input-block { padding: 10px 20px; } .con .page1 .w1440 .main_r .layui-textarea { min-height: 90px; } .con .page1 .w1440 .main_r .sub button { width: 100%; padding: 10px; } .con .page2 { padding: 40px 0 20px 0; } .con .page2 .main { margin-top: 20px; } .con .page2 .main .list { flex: 0 0 100%; } .con .page2 .main .list { padding: 20px; margin-bottom: 20px; margin-right: 0; } .con .page2 .main .list .image { width: 60px; height: 60px; } .con .page2 .main .list .image img { height: 30px; } .con .page1 .w1440 .main_r .sub{ margin-top: 20px; } .con .page1 .w1440 .main_r .dis_flex > div { flex: 0 0 100%; margin: 0 0 20px 0; } }