@media screen and (max-width: 1360px) { body .content { display: flex; flex-direction: column; min-width: 100%; background-color: #f1f9fc; } body .content .product-compontent .product-compontent-banner { width: 100%; height: 8rem; background-image: url('../../images/investment-banner.png'); background-position: center; background-repeat: no-repeat; background-size: cover; } body .content .product-compontent .product-compontent-nav { width: 100%; height: 4rem; background-color: #fff; display: flex; justify-content: center; } body .content .product-compontent .product-compontent-nav-content { width: 100%; margin: 0 auto; display: flex; padding: 0 1rem; box-sizing: border-box; justify-content: space-between; } body .content .product-compontent .product-compontent-nav-content-left { width: 100%; display: flex; justify-content: center; } body .content .product-compontent .product-compontent-nav-content-left a { min-width: unset; text-align: center; height: 100%; line-height: 4rem; color: #000000; font-size: 1rem; position: relative; margin-right: 1rem; cursor: pointer; transition: all .3s; } body .content .product-compontent .product-compontent-nav-content-left a:hover { color: #0084ce; position: relative; } body .content .product-compontent .product-compontent-nav-content-left a:hover::after { content: unset; width: unset; position: absolute; bottom: unset; left: unset; height: unset; background-color: unset; color: unset; line-height: unset; } body .content .product-compontent .product-compontent-nav-content-left a:last-child { margin: 0; } body .content .product-compontent .product-compontent-nav-content-left .select-nav { color: #0084ce; position: relative; } body .content .product-compontent .product-compontent-nav-content-right { display: none; align-items: center; } body .content .product-compontent .select-nav::after { content: unset; width: unset; position: unset; bottom: unset; left: unset; height: unset; background-color: unset; color: unset; line-height: unset; } body .serve { width: 100%; margin: 0 auto; display: flex; flex-direction: column; align-items: center; padding: 0 1rem; box-sizing: border-box; } body .serve .title { color: #000000; font-size: 1.2rem; font-weight: unset; text-align: center; margin: 2rem 0; } body .serve .container { width: 100%; height: unset; background-color: #ffffff; box-shadow: 0px 8px 30px 0px rgba(0, 67, 105, 0.08); border-radius: 8px; border: solid 4px #ffffff; background-image: url('../../images/serve-1.png'); background-position: center; background-repeat: no-repeat; background-size: cover; margin-bottom: 3rem; padding: 0 1rem; box-sizing: border-box; display: flex; flex-direction: column; } body .serve .container .info { width: 100%; margin-top: 2rem; display: flex; flex-direction: column; align-items: center; justify-content: space-between; } body .serve .container .info .info-left { display: flex; flex-direction: column; } body .serve .container .info .info-left .info-title { color: #0084ce; font-size: 1.2rem; margin-bottom: 1.2rem; } body .serve .container .info .info-left .info-li { display: flex; flex-direction: column; } body .serve .container .info .info-left .info-li span { margin-bottom: 1rem; color: #000000; font-size: 1rem; } body .serve .container .info .info-left .info-li span:last-child { margin: 0; } body .serve .container .info .info-left .info-interaction { width: unset; height: 3rem; /* background-color: #ffffff; box-shadow: 0px 4px 30px 0px rgba(0, 67, 105, 0.12); */ border-radius: 4px; margin-top: 1.2rem; display: flex; padding: 0 1rem; box-sizing: border-box; align-items: center; margin-bottom: 1rem; } body .serve .container .info .info-left .info-interaction span { color: #000000; font-size: 1rem; margin-right: 1rem; } body .serve .container .info .info-left .info-interaction img { width: 5rem; } body .serve .container .info .info-right { display: flex; flex-direction: column; } body .serve .container .info .info-right div:first-child { width: 8rem; height: 8rem; padding: .5rem; box-sizing: border-box; background-color: #ffffff; box-shadow: 0px 4px 30px 0px rgba(0, 67, 105, 0.12); border-radius: 4px; } body .serve .container .info .info-right div:first-child img { width: 100%; } body .serve .container .info .info-right div:last-child { margin: 1rem auto; text-align: center; color: #444444; font-size: 1rem; } } .content { display: flex; flex-direction: column; background-color: #f1f9fc; } .content .product-compontent { display: flex; flex-direction: column; width: 100%; } .content .product-compontent .product-compontent-banner { width: 100%; height: 320px; background-image: url('../../images/investment-banner.png'); background-position: center; background-repeat: no-repeat; background-size: cover; } .content .product-compontent .product-compontent-nav { width: 100%; height: 70px; background-color: #fff; display: flex; justify-content: center; } .content .product-compontent .product-compontent-nav-content { width: 1360px; margin: 0 auto; display: flex; padding: 0 20px; box-sizing: border-box; justify-content: space-between; } .content .product-compontent .product-compontent-nav-content-left { display: flex; } .content .product-compontent .product-compontent-nav-content-left a { min-width: 100px; text-align: center; height: 100%; line-height: 70px; color: #000000; font-size: 16px; position: relative; margin-right: 40px; cursor: pointer; transition: all .3s; } .content .product-compontent .product-compontent-nav-content-left a:hover { color: #0084ce; position: relative; } .content .product-compontent .product-compontent-nav-content-left a:hover::after { content: ''; width: 100%; position: absolute; bottom: 0; left: 0; height: 3px; background-color: #0084ce; color: #0084ce; line-height: 3px; } .content .product-compontent .product-compontent-nav-content-left a:last-child { margin: 0; } .content .product-compontent .product-compontent-nav-content-left .select-nav { color: #0084ce; position: relative; } .content .product-compontent .select-nav::after { content: ''; width: 100%; position: absolute; bottom: 0; left: 0; height: 3px; background-color: #0084ce; color: #0084ce; line-height: 3px; } .content .product-compontent .product-compontent-nav-content-right { display: flex; align-items: center; } .content .product-compontent .product-compontent-nav-content-right span:first-child { font-size: 16px; color: #0084ce; margin-right: 7px; } .content .product-compontent .product-compontent-nav-content-right a { color: #888888; font-size: 14px; cursor: pointer; transition: all .3s; } .content .product-compontent .product-compontent-nav-content-right span { margin: 0 14px; font-size: 14px; color: #888888; } .content .product-compontent .product-compontent-nav-content-right a:hover { color: #0084ce; } .serve { width: 1200px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; } .serve .title { color: #000000; font-size: 36px; font-weight: 500; text-align: center; margin: 66px 0; } .serve .container { width: 100%; height: 400px; background-color: #ffffff; box-shadow: 0px 8px 30px 0px rgba(0, 67, 105, 0.08); border-radius: 8px; border: solid 4px #ffffff; background-image: url('../../images/serve-1.png'); background-position: center; background-repeat: no-repeat; background-size: cover; margin-bottom: 70px; padding: 0 60px; box-sizing: border-box; display: flex; flex-direction: column; } .serve .container .info { width: 100%; margin-top: 46px; display: flex; align-items: center; justify-content: space-between; } .serve .container .info .info-left { display: flex; flex-direction: column; } .serve .container .info .info-left .info-title { color: #0084ce; font-size: 22px; margin-bottom: 36px; } .serve .container .info .info-left .info-li { display: flex; flex-direction: column; } .serve .container .info .info-left .info-li span { margin-bottom: 22px; color: #000000; font-size: 15px; } .serve .container .info .info-left .info-li span:last-child { margin: 0; } .serve .container .info .info-left .info-interaction { width: 270px; height: 50px; /* background-color: #ffffff; */ /* box-shadow: 0px 4px 30px 0px rgba(0, 67, 105, 0.12); */ border-radius: 4px; margin-top: 30px; display: flex; /* padding: 0 20px; */ align-items: center; } .serve .container .info .info-left .info-interaction a{ display: flex; /* padding: 0 20px; */ align-items: center; } .serve .container .info .info-left .info-interaction span { color: #000000; font-size: 16px; margin-right: 20px; } .serve .container .info .info-left .info-interaction img { width: 98px; } .serve .container .info .info-right { display: flex; flex-direction: column; align-items: center; } .serve .container .info .info-right div:first-child { width: 120px; height: 120px; padding: 10px; box-sizing: border-box; background-color: #ffffff; box-shadow: 0px 4px 30px 0px rgba(0, 67, 105, 0.12); border-radius: 4px; } .serve .container .info .info-right div:first-child img { width: 100%; } .serve .container .info .info-right div:last-child { margin: 12px auto; text-align: center; color: #444444; font-size: 14px; }