.head { height: 5.6rem; background-repeat: no-repeat; background-size: cover; background-position: center center; } .head_d4 { width: 1200px; margin: 0 auto; padding-left: 1.54rem; padding-top: 2.3rem; } .head_p7 { font-size: 36px; color: white; position: relative; display: table; } .head_p7::after { content: ""; position: absolute; left: 50%; bottom: -15px; transform: translateX(-50%); width: 0.38rem; height: 2px; background-color: #4D62AF; } /* */ .guarantee { width: 1200px; margin: 0 auto; padding-top: 1rem; position: relative; } .guarantee .pub_title { margin-bottom: 30px; } .guarantee .guarantee_p1 { width: 100%; text-align: center; margin: 0 auto 0.56rem; line-break: 1; font-size: 14px; color: #333947; } .guarantee_table { width: 100%; margin: 0 auto; text-align: center; position: relative; } .guarantee_top { background-color: rgba(216, 222, 229, .5); border-radius: 5px; height: 0.76rem; font-size: 22px; display: flex; align-items: center; justify-content: center; letter-spacing: 4px; margin-bottom: 0.2rem; } .guarantee_bottom { display: flex; align-items: center; } .guarantee_left { width: 1.3rem; height: 6.3rem; background: rgba(216, 222, 229, .5); border-radius: 5px; font-size: 22px; color: #333947; display: flex; align-items: center; justify-content: center; writing-mode: tb-rl; letter-spacing: 5px; margin-right: 0.33rem; } .guarantee_center { height: 6.3rem; } .guarantee_center_top { display: flex; align-items: center; } .guarantee_center_item { width: 2.66rem; margin-right: 0.38rem; padding: 0.2rem; background: rgba(193, 217, 236, 0.6); border-radius: 5px; } .guarantee_center_item:last-of-type { margin-right: 0; } .guarantee_center_item>p { font-size: 20px; color: #366EB6; } .guarantee_center_item>div { height: 1.05rem; padding: 0.1rem 0; font-size: 16px; color: #366EB6; margin-bottom: 0.11rem; display: flex; flex-direction: column; justify-content: center; } .guarantee_center_item>div>p { background: #FFFFFF; border-radius: 5px; margin-bottom: 0.1rem; display: flex; align-items: center; justify-content: center; height: 0.36rem; } .guarantee_center_item>div>p:last-of-type { margin-bottom: 0; } .guarantee_center_item>div div { display: flex; align-items: center; } .guarantee_center_item>div div p { background: #FFFFFF; display: flex; align-items: center; justify-content: center; border-radius: 5px; height: 0.36rem; margin-right: 0.1rem; } .guarantee_center_item>div div p:last-of-type { margin-right: 0; } .guarantee_right { width: 1.3rem; height: 6.3rem; padding-top: 0.52rem; background: rgba(6, 38, 120, 0.15); border-radius: 5px; margin-left: 0.33rem; } .guarantee_right div { height: 1.05rem; margin-bottom: 0.11rem; display: flex; align-items: center; } .guarantee_right div:last-of-type { margin-top: 0.7rem; height: auto; margin-bottom: 0; } .guarantee_right p { background: #FFFFFF; border-radius: 5px; width: 0.8rem; height: 0.36rem; display: flex; align-items: center; justify-content: center; font-size: 18px; color: #062678; margin-left: auto; margin-right: auto; } .guarantee_center_bottom { display: flex; align-items: center; justify-content: space-between; background: rgba(193, 217, 236, .6); border-radius: 5px; margin-top: 0.2rem; padding: 0.2rem; } .guarantee_center_bottom p { padding: 0 16px; font-size: 16px; height: 0.36rem; color: #366EB6; background: #FFFFFF; border-radius: 5px; display: flex; align-items: center; justify-content: center; } .guarantee_hover { position: absolute; left: 1.74rem; top: 1.48rem; } .guarantee_hover div { width: 8.53rem; height: 1.02rem; border: 2px dotted #9CC3E1; margin-bottom: 0.14rem; } /* */ .guara { width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; padding: 1.1rem 0 0 0; } .guara_item { width: 50%; text-align: center; margin-bottom: 1.1rem; } .guara_img { width: 1.2rem; height: 0.8rem; margin: 0 auto 0.34rem; display: flex; align-items: center; justify-content: center; } .guara_img img { max-width: 100%; max-height: 100%; object-fit: contain; } .guara_p1 { font-size: 16px; color: #464D61; } .guara2_bg { width: 100%; overflow: hidden; background-color: #F0F3F7; } .guara2 { width: 1200px; margin: 0 auto; padding-top: 1rem; padding-bottom: 1rem; } .guara2 .pub_title { margin-bottom: 0.8rem; } .guara2_cont { width: 7.2rem; margin: 0 auto; position: relative; } .guara2_img { width: 100%; object-fit: contain; } .guara2_hover { position: absolute; top: 0.24rem; left: 50%; transform: translateX(-50%); text-align: center; color: #FFFFFF; } .guara2_item { display: flex; flex-direction: column; align-items: center; justify-content: center; } .guara2_item:nth-of-type(1) { height: 2.05rem; } .guara2_item:nth-of-type(2) { height: 1.2rem; margin-top: 0.3rem; } .guara2_item:nth-of-type(3) { height: 1rem; margin-top: 0.3rem; } .guara2_p1 span { font-size: 48px; } .guara2_p1 { font-size: 30px; line-height: 48px; } .guara2_p2 { font-size: 16px; } /* */ .guara3 { width: 1200px; margin: 0 auto; padding-top: 1rem; padding-bottom: 1rem; } .guara3 .pub_title { margin-bottom: 0.9rem; } .guara3_list { display: flex; } .guara3_item { text-align: center; flex: 1; } .guara3_img { width: 78px; height: 70px; display: flex; align-items: center; justify-content: center; margin: 0 auto 0.3rem; } .guara3_img img { max-width: 100%; height: 100%; object-fit: contain; } .guara3_p1 { font-size: 18px; line-height: 36px; color: #333947; } .guara3_p2 span { display: block; font-size: 14px; color: #464D61; line-height: 2; } /* */ .guarantee_table_img, .guara2_cont_img { width: 100%; margin: 0 auto; object-fit: contain; display: none; } @media screen and (max-width: 800px) { .head_d4 { width: 100%; padding: 1rem 0; } .head_p7 { display: block; text-align: center; font-size: 30px; } .guarantee, .guara, .guara2, .guara3 { width: 90%; } .guarantee_table, .guara2_cont { display: none; } .guarantee_table_img, .guara2_cont_img { display: block; } .guara { justify-content: space-between; } .guara_item { width: 45%; } .guara3_list { flex-direction: column; } .guara3_item { margin-bottom: 0.5rem; } }