@media screen and (max-width: 1360px){ body .content { display: flex; flex-direction: column; min-width: unset; background-color: #f1f9fc; width: 100%; } body .content .product-compontent .product-compontent-banner { width: 100%; height: 8rem; background-image: url('../../images/op-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-right{ display: none; } body .content .product-compontent .product-compontent-nav-content-left { display: flex; width: 100%; 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: unset; 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 .select-nav::after { content: unset; width: unset; position: unset; bottom: unset; left: unset; height: unset; background-color: unset; color: unset; line-height: unset; } body .operate-serve { width: 100%; padding: 0 1rem; box-sizing: border-box; display: flex; flex-direction: column; background-color: #ffffff; margin: 0 auto; margin-top: 4rem; } body .operate-serve .operate-serve-top { width: 100%; border-bottom: 2px solid #deeaee; display: flex; flex-direction: column; } body .operate-serve .operate-serve-top:last-child{ border:none; flex-direction: column; padding-top: 2rem; margin-bottom: 2rem; } body .operate-serve .operate-serve-top:last-child .container .title{ color: #000000; font-size: 1.2rem; margin-top: 2rem; margin-bottom: 2rem; } body .operate-serve .operate-serve-top:last-child .container{ display: flex; flex-direction: column; margin-right: 0; width: 100%; } body .operate-serve .operate-serve-top:last-child div:last-child{ width: 100%; } body .operate-serve .operate-serve-top:last-child div:last-child img{ width: 100%; } body .operate-serve .operate-serve-top .title { color: #000000; font-size: 1.2rem; margin-top: 2rem; margin-bottom: 2rem; } body .operate-serve .operate-serve-top .container { display: flex; flex-direction: column; margin-bottom:2rem; } body .operate-serve .operate-serve-top .container div:first-child { width: 100%; color: #222222; font-size: 1rem; margin-right: 0; margin-bottom: 2rem; } body .operate-serve .operate-serve-top .container div:first-child p { margin-bottom: 2rem; line-height: 2rem; } body .operate-serve .operate-serve-top .container div:first-child p:last-child { margin: 0; } body .operate-serve .operate-serve-top .container div:last-child { width: 100%; } .operate-serve .operate-serve-top .container div:last-child img { width: 100%; } body .operate-serve .operate-serve-top .container div:last-child p{ line-height: 2rem; } } .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/op-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: 112px; 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 a:hover{ color: #0084ce; } .content .product-compontent .product-compontent-nav-content-right span { margin: 0 14px; font-size: 14px; color: #888888; } .operate-serve { width: 1360px; padding: 0 40px; box-sizing: border-box; display: flex; flex-direction: column; background-color: #ffffff; margin: 0 auto; margin-top: 68px; } .operate-serve .operate-serve-top { border-bottom: 2px solid #deeaee; display: flex; flex-direction: column; } .operate-serve .operate-serve-top:last-child{ border:none; flex-direction: unset; padding-top: 40px; margin-bottom: 84px; } .operate-serve .operate-serve-top:last-child .container .title{ color: #000000; font-size: 32px; margin-top: 80px; margin-bottom: 60px; } .operate-serve .operate-serve-top:last-child .container{ display: flex; flex-direction: column; margin-right: 70px; width: 576px; } .operate-serve .operate-serve-top .title { color: #000000; font-size: 32px; margin-top: 80px; margin-bottom: 60px; } .operate-serve .operate-serve-top .container { display: flex; margin-bottom:80px; } .operate-serve .operate-serve-top .container div:first-child { width: 576px; color: #222222; font-size: 18px; margin-right: 70px; line-height: 30px; } .operate-serve .operate-serve-top .container div:first-child p { margin-bottom: 50px; line-height: 30px; } .operate-serve .operate-serve-top .container div:first-child p:last-child { margin: 0; } .operate-serve .operate-serve-top .container div:last-child { flex: 1; } .operate-serve .operate-serve-top .container div:last-child p{ line-height: 30px; } .operate-serve .operate-serve-top .container div:last-child img { width: 100%; }