body { min-height: 100vh; display: flex; flex-direction: column; }

.product { flex: 1; padding: 50px 0; }

.product .title-wrapper { position: relative; height: 90px; margin-bottom: 10px; }

.product .title-wrapper .title { color: #000; position: absolute; left: 0; bottom: 0; }

.product .title-wrapper .search-wrapper { width: 83%; border: 1px solid #ececec; }

.product .title-wrapper .search-wrapper input { flex: 1; padding: 6px 20px; background-color: transparent; }

.product .title-wrapper .search-wrapper .search-action { margin-left: 10px; background-color: #fff; padding: 8px; display: flex; flex-direction: row; align-items: center; cursor: pointer; background-color: var(--color1); }

.product .title-wrapper .search-wrapper .search-action .icon-search { position: relative; top: 50%; transform: translateY(-15%) rotate(-45deg); }

.product .title-wrapper .search-wrapper .search-action .icon-search::before { left: 0; display: block; content: ""; border: 2px solid #fff; border-radius: 50%; width: 12px; height: 12px; }

.product .title-wrapper .search-wrapper .search-action .icon-search::after { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); display: block; content: ""; border: 1px solid #fff; width: 0; height: 4px; }

.product-content { position: relative; }

.product .left-wrapper { width: 180px; }

.product .left-wrapper .nav-menu { line-height: 36px; font-size: 18px; }

.product .left-wrapper .nav-menu > li { cursor: pointer; line-height: 62px; padding: 0 14px; background-color: #046efe; color: #fff; position: relative; }

.product .left-wrapper .nav-menu > li a { display: block; }

.product .left-wrapper .nav-menu > li.nav-active { background-color: #0050d1; }

.product .left-wrapper .nav-menu > li:not(:last-child)::after { position: absolute; content: ""; width: 88%; height: 1px; background-color: rgba(255, 255, 255, 0.7); left: 50%; bottom: 0%; transform: translateX(-50%); }

.product .left-wrapper .recommend { margin-top: 20px; }

.product .left-wrapper .recommend_item { position: relative; margin-bottom: 20px; }

.product .left-wrapper .recommend_item .rec-pic { width: 100%; }

.product .left-wrapper .recommend_item .rec-text { position: absolute; bottom: 0; background-color: #0050d1; width: 100%; z-index: 10; color: #fff; text-align: center; padding: 10px 0; }

.product .right-wrapper { width: 83%;/* position: absolute; right: 0;*/ }

.product .right-wrapper .top-banner { width: 100%; position: relative;}

.product .right-wrapper .top-banner .text-box { position: absolute; top: 10px; right: 25px; color: #fff; text-align: right; }

.product .right-wrapper .top-banner .text-box h1 { font-size: 36px; }

.product .right-wrapper .top-banner .text-box h2 { font-size: 32px; }

.product .right-wrapper .product_content { margin-top: 20px; display: flex; flex-wrap: wrap; }

.product .right-wrapper .product_item { position: relative; flex: 1; margin: 0 20px 20px 0; width: calc((100% - 40px) / 3); min-width: calc((100% - 40px) / 3); max-width: calc((100% - 40px) / 3); }

.product .right-wrapper .product_item:nth-child(3n) { margin-right: 0; }

.product .right-wrapper .product_item:hover .pro-text { background-color: rgba(4, 92, 236, 0.7); transition: background-color 0.1s ease-in-out; }

.product .right-wrapper .product_item .pro-pic { width: 318px; height: 285px;}

.product .right-wrapper .product_item .pro-text { cursor: default; width: 100%; position: absolute; bottom: 0; z-index: 10; color: #fff; text-align: center; padding: 10px 0; background-color: rgba(153, 153, 153, 0.6); transition: background-color 0.1s ease-in-out; }

#ProductContent { top: -80px; position: relative; }