* { font-weight: normal; } .icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } a { color: #000; text-decoration: none; } a:link, a:visited { text-decoration: none; } a:hover { text-decoration: none; } ul { list-style: none; padding: 0; margin: 0; outline: none; } .top { width: 100%; margin-top: 85px; // padding-bottom: 20px; } .bannercontent img { margin-top: 20px; width: 100%; vertical-align: middle; } .bannercontent { position: relative; } .bannercontent_title { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; display: flex; flex-direction: column; align-items: center; } .bannercontent_title h2 { font-size: 46px; color: #fff; text-align: center; font-weight: bold; } .bannercontent_link { display: flex; justify-content: center; align-items: center; margin-top: 30px; } .bannercontent_link a { font-size: 18px; color: #fff; } .bannercontent_link i { color: #fff; font-size: 18px; margin: 0 10px; } .last { color: #fff; } .product_right .shop_li { margin-bottom: 30px; } .accordion { width: 100%; background: #fff; -webkit-border-radius: 4px; -moz-border-radius: 4px; border: 1px solid var(--rootColor); } .accordion .link { cursor: pointer; display: block; padding: 15px 15px 15px 15px; color: #000; font-size: 14px; font-weight: 700; border-bottom: 1px solid var(--rootColor); position: relative; -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; display: flex; justify-content: space-between; align-items: center; } .accordion li:last-child .link { border-bottom: 0; } .accordion li i { font-size: 18px; color: #000; -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .accordion li i.fa-chevron-down { right: 12px; left: auto; font-size: 16px; } .accordion li:hover .link { background-color: var(--rootColor); } .accordion li:hover .link { color: #fff; transition: all 0.5s ease; } .accordion li:hover i { color: #fff; } .accordion li:hover i.fa-chevron-down { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .accordion .active .link { background-color: var(--rootColor); } .accordion .active .link { color: #fff; transition: all 0.5s ease; } .accordion .active i { color: #fff; } .accordion .active i.fa-chevron-down { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .product_left_menu h2 { padding: 15px; color: #fff; background-color: var(--rootColor); font-size: 36px; text-align: center; } .fanye { margin: 30px auto 0 auto; display: flex; justify-content: center; align-items: center; } .product { padding: 80px 0; } .pagination a { padding: 5px 10px; background-color: #fff; margin-right: 10px; color: #b1191d; border: 1px solid #b1191d; } .current { background-color: #b1191d !important; color: #fff !important; border: 1px solid #b1191d !important; } .pagination a:hover { background-color: #b1191d !important; color: #fff !important; border: 1px solid #b1191d !important; } .current2 { display: none; } .three_li { margin-bottom: 30px; } .three_box { position: relative; overflow: hidden; height: 100%; background-color: #fff; box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.1); padding: 50px 40px; display: flex; flex-direction: column; align-items: center; } .three_box i { z-index: 99; font-size: 60px; color: var(--rootColor); text-align: center; transition: all 0.35s ease-in-out; -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; -ms-transition: all 0.35s ease-in-out; -o-transition: all 0.35s ease-in-out; } .three_box h3 { font-size: 24px; text-align: center; font-weight: bold; color: #000; margin: 0 auto 15px auto; } .three_box p { z-index: 99; font-size: 16px; color: #666; line-height: 28px; text-align: center; transition: all 0.35s ease-in-out; -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; -ms-transition: all 0.35s ease-in-out; -o-transition: all 0.35s ease-in-out; } .three_box a { z-index: 9; } .threeflex { display: flex; flex-wrap: wrap; } .threeline { position: absolute; top: 0; left: 0; width: 0%; height: 100%; background-color: var(--rootColor); transition: all 0.35s ease-in-out; -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; -ms-transition: all 0.35s ease-in-out; -o-transition: all 0.35s ease-in-out; } .three_li:hover .threeline { width: 100%; transition: all 0.35s ease-in-out; } .three_li:hover .three_box i { color: #000; } .three_li:hover .three_box p { color: #000; } .three_li:hover .productimg img { transform: scale(1.1); } .productimg { position: relative; overflow: hidden; width: 100%; height: auto; display: block; padding-top: 70%; } .productimg img { width: 100%; vertical-align: middle; position: absolute; top: 0; transition: all 0.35s ease-in-out; -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; -ms-transition: all 0.35s ease-in-out; -o-transition: all 0.35s ease-in-out; height: 100%; object-fit: contain; } .product .three_box { padding: 0; } .producttxt { padding: 20px 15px; z-index: 999; } .producttxt p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: all 0.35s ease-in-out; -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; -ms-transition: all 0.35s ease-in-out; -o-transition: all 0.35s ease-in-out; } .producttxt h3 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; transition: all 0.35s ease-in-out; -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; -ms-transition: all 0.35s ease-in-out; -o-transition: all 0.35s ease-in-out; } .productmore { display: flex; justify-content: center; align-items: center; margin-top: 15px; padding: 15px 40px; background-color: var(--rootColor); transition: all 0.35s ease-in-out; -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; -ms-transition: all 0.35s ease-in-out; -o-transition: all 0.35s ease-in-out; } .productmore span { font-size: 16px; color: #fff; transition: all 0.35s ease-in-out; -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; -ms-transition: all 0.35s ease-in-out; -o-transition: all 0.35s ease-in-out; } .productmore i { font-size: 16px; color: #fff !important; margin-left: 10px; transition: all 0.35s ease-in-out; -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; -ms-transition: all 0.35s ease-in-out; -o-transition: all 0.35s ease-in-out; } .three_li:hover .productmore { background-color: #fff; } .three_li:hover:hover .productmore span, .three_li:hover:hover .productmore i { color: #000 !important; } .three_li:hover .producttxt h3, .three_li:hover .producttxt p { color: #fff; } .product>.container>.row { min-height: 650px; }