html,
body {
overflow-x: hidden;
}
a {
color: inherit;
text-decoration: none;
}
a:hover {
text-decoration: none;
cursor: pointer;
}
#header {
position: absolute;
z-index: 999;
}
.phone_object * {
transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
-o-transition: all .5s;
}
.header_logo_body img {
height: 36px;
width: auto;
}
.header_logo_body a {}
@media (max-width: 767px) {
.header_contain {
position: relative;
background-color: #131313;
}
}
.phone_header_menu_contain {
position: absolute;
height: 20px;
top: 15px;
display: flex;
justify-content: center;
align-items: center;
right: 25px;
width: 20px;
z-index: 1000;
}
.phone_header_menu_contain>div {
position: relative;
}
.phone_header_menu_line {
position: absolute;
background-color: #fff;
height: 1px;
left: 50%;
margin-left: -9px;
width: 18px;
transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
}
.phone_header_menu_open .phone_header_menu_line {
background-color: black;
}
.phone_header_menu_line:first-child {
transform: translate(0, -6px);
-moz-transform: translate(0, -6px);
-webkit-transform: translate(0, -6px);
-o-transform: translate(0, -6px);
}
.phone_header_menu_line:nth-child(2) {
transform: translate(0, 0);
-moz-transform: translate(0, 0);
-webkit-transform: translate(0, 0);
-o-transform: translate(0, 0);
}
.phone_header_menu_line:nth-child(3) {
transform: translate(0, 6px);
-moz-transform: translate(0, 6px);
-webkit-transform: translate(0, 6px);
-o-transform: translate(0, 6px);
}
.phone_header_menu_open .phone_header_menu_line:first-child {
transform: rotate(45deg);
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
.phone_header_menu_open .phone_header_menu_line:nth-child(2) {
margin-left: 0px;
width: 0;
}
.phone_header_menu_open .phone_header_menu_line:nth-child(3) {
transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
}
@media (max-width: 767px) {
.logo {
height: 30px;
position: absolute;
top: 10px;
left: 50%;
margin-left: -60px;
transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
-o-transition: all .5s;
}
}
.phone_header_menu_open .header_contain {
background-color: white;
box-shadow: 0px 0px 3px 3px rgb(227, 227, 227);
}
.phone_header_menu_body li {
list-style: none;
padding: 10px 1em;
}
.phone_header_menu_body ul {
padding-left: 0;
}
.header_search_input_body {
margin: 1em;
}
.header_search_input_body i {
position: absolute;
left: 15px;
top: 0;
line-height: 38px;
}
.phone_header_menu_open .phone_header_menu_body {
max-height: calc(100vh - 50px);
height: calc(100vh - 50px);
}
.phone_header_menu_body {
max-height: 0;
overflow-y: hidden;
height: 0;
position: relative;
width: 100vw;
overflow-x: hidden;
}
.phone_header_menu_body_page {
position: absolute;
top: 0;
left: 100vw;
bottom: 0;
width: 100vw;
overflow-y: auto;
background-color: white;
}
.phone_header_menu_body_page.show {
left: 0;
}
.menu_Product {
display: flex;
align-items: center;
padding: 10px 0;
font-size: 16px;
}
.menu_Product img {
width: 40px;
height: 40px;
}
.menu_Product .a {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
margin-left: 10px;
}
.menu_Product .a a {
flex: 1;
}
@media (min-width: 768px) {
#phone_header_menu_contain {
display: none;
}
}
.empty_50 {
height: 50px;
}
@media (min-width: 768px) {
.phone_object {
display: none;
}
}
@media (max-width: 767px) {
#web_header_contain_2023 {
display: none;
}
}
@media (min-width: 768px) {
.web_header_contain {
display: flex;
align-items: center;
position: relative;
padding: 0 30px;
height: 50px;
transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
}
}
#web_header_contain_2023{
color: white;
}
.header.open #web_header_contain_2023{
color: black;
}
.header.white #web_header_contain_2023{
color: black;
}
.header.open ,#web_header_contain_2023:hover{
color:black;
}
@media (min-width: 768px) {
#web_header_contain_2023 .bg {
height: 0;
background-color: white;
position: absolute;
left: 0;
right: 0;
top: 0;
z-index: -1;
transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
}
}
@media (min-width: 768px) {
.logo_Body {
display: flex;
align-items: center;
}
}
.flex_1 {
flex: 1;
}
.flex_3 {
flex: 3 !important;
}
@media (min-width: 768px) {
.display_flex {
flex-direction: row;
}
}
.display_flex {
display: flex;
}
@media (min-width: 768px) {
.top_Mene_Item {
display: flex;
align-items: center;
height: 49px;
margin-left: 2px;
text-decoration: none;
padding: 0 8px;
text-shadow: none;
position: relative;
font-size: x-small;
white-space: nowrap;
transition: none;
-moz-transition: none;
-webkit-transition: none;
-o-transition: none;
}
}
@media (min-width: 768px) {
.menu_contain {
display: flex;
}
}
@media (min-width: 768px) {
#web_header_contain_2023:hover .web_header_contain
{
height: 69px;
}
#web_header_contain_2023:hover .top_Mene_Item
{
height: 69px;
}
}
@media (min-width: 768px) {
#web_header_contain_2023:hover .bg {
height: 100%;
box-shadow: 0 0 5px 0px rgba(200, 200, 200, 0.5);
}
}
@media (min-width: 768px) {
#web_header_contain_2023:hover .top_Mene_Item
{
color: black;
}
}
@media (min-width: 768px) {
.menu_A .menu_Bg {
position: absolute;
left: 0;
bottom: 25%;
right: 0;
height: 0;
background-color: white;
border-radius: 1000px;
transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
}
}
@media (min-width: 768px) {
.menu_A a,
.menu_A .a {
transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
cursor: pointer;
}
}
@media (min-width: 768px) {
.active .menu_A a,
.top_Mene_Item:hover .menu_A a,
.top_Mene_Item:hover .menu_A .a {
color: white;
}
}
@media (min-width: 768px) {
.active .menu_A .menu_Bg,
.top_Mene_Item:hover .menu_A .menu_Bg {
height: 50%;
background-color: #0074C1;
z-index: -1;
}
}
@media (min-width: 768px) {
.menu_Body {
position: fixed;
background-color: white;
top: 96px;
left: 0;
right: 0;
color: #666;
max-height: 0;
overflow: hidden;
z-index: 9999;
transition: all 0.8s;
-moz-transition: all 0.8s;
-webkit-transition: all 0.8s;
-o-transition: all 0.8s;
box-shadow: 0 10px 10px 0px rgba(0, 0, 0, 0.2);
}
}
@media (min-width: 768px) {
.active .menu_Body,
.top_Mene_Item:hover .menu_Body {
/*top: 70px;*/
max-height: 1000px;
}
}
@media (min-width: 768px) {
.menu_Body>div {
border-top: 1px solid lightgray;
margin: 0 10vw;
}
}
@media (min-width: 768px) {
#web_header_login_lot {
margin-left: 5px;
}
}
.language {
/*position: relative;*/
width: 120px;
}
.top_Mene_Item:hover .language_bg {
max-height: 10000px;
top: 27px;
box-shadow: 0 0 1px 0 #999;
z-index: 999;
}
.top_Mene_Item:hover .language_bg.large_top {
top: 69px;
}
.language_bg a {
transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
}
.language_bg a:hover {
padding-left: 10px;
}
.language_bg {
position: absolute;
left: 0px;
width: 100%;
overflow: hidden;
top: 49px;
max-height: 0;
transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
background-color: white;
}
@media (min-width: 768px) {
#web_header_search {
border: 1px solid rgba(5, 0, 1, 0.2);
border-radius: 100px;
width: 100px;
padding-left: 15px;
transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
padding-right: 30px;
}
}
@media (min-width: 768px) {
#web_header_search:focus {
width: 150px;
}
}
.abtn {
display: inline-block;
text-align: center;
color: #000;
padding: 3px 20px;
min-width: 140px;
margin: 10px;
transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
cursor: pointer;
border: 1px solid transparent;
border-radius: 15px;
vertical-align: top;
}
.abtn:hover,
.abtn.choosen {
border: 1px solid rgb(0, 130, 200);
}
.abtn:hover .main_category,
.abtn.choosen .main_category {
color: #0074C1;
}
.abtn .abg {
max-height: 0;
transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
overflow-y: hidden;
}
.abtn:hover .abg,
.abtn.choosen .abg {
max-height: 1000px;
}
.abtn .abg {
overflow-x: hidden;
white-space: nowrap;
}
.small_category {
padding: 5px 10px 5px 0px;
transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
font-size: small;
}
.tou_ming {
pointer-events: none;
}
.small_category:hover,
.small_category.choosen {
transform: translateX(10px);
-webkit-transform: translateX(10px);
}
.small_category a:hover,
.small_category.choosen a {
color: rgb(0, 130, 200);
}
.small_category i {
display: none;
}
.small_category:hover i,
.small_category.choosen i {
display: inherit;
}
.header .product_Item {
width: calc(10vw - 10px);
display: inline-block;
text-align: center;
cursor: pointer;
position: relative;
vertical-align: top;
margin: 0 5px;
}
.header .product_Item img.tag {
position: absolute;
top: 5px;
right: 2vw;
width: 2.5vw;
}
.header .product_Item .img_Flex {
display: flex;
align-items: center;
justify-content: center;
height: calc(7vw);
background-repeat: no-repeat;
background-size: 60% auto;
background-position: center;
}
@media (max-width: 1080px) {
.header .product_Item {
width: 140px;
display: inline-block;
text-align: center;
cursor: pointer;
position: relative;
}
}
@media (max-width: 1080px) {
.header .product_Item img.tag {
position: absolute;
top: 5px;
right: 15px;
width: 40px;
}
}
@media (max-width: 1080px) {
.header .product_Item .img_Flex {
display: flex;
align-items: center;
justify-content: center;
height: 120px;
}
}
.header .product_Item .img_Flex img {
height: auto;
width: 60%;
opacity: 0;
transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
}
.header .product_Item:hover .img_Flex img {
width: 65%;
opacity: 1;
}
.header .product_Item .product_Name {
cursor: pointer;
color: #000;
font-size: small;
/*word-break: keep-all;*/
/*white-space: nowrap;*/
}
.header .product_Item:hover .product_Name {
color: #0074C1;
}
.header .products_All_Body {
height: 70px;
border-top: 1px solid rgba(0, 0, 0, 0.18);
display: flex;
width: 100%;
align-items: center;
justify-content: center;
}
.header .products_All {
cursor: pointer;
transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
}
.header .products_All:hover {
transform: scale(1.3, 1.3);
}
.header .products_All i {
margin-left: 20px;
}
.header .products_List {
/*display: flex;*/
padding: 0px 0 50px 0;
}
.header .category_00 {
padding: 30px 10px 0px 10px;
display: flex;
align-items: flex-start;
justify-content: center;
}
.header .category_01 {
font-size: smaller;
display: flex;
align-items: center;
justify-content: center;
}
.products_List {
white-space: normal;
}
@media (min-width: 1200px) {
.top_Mene_Item {
font-size: medium;
margin-left: 15px;
padding: 0 14px;
}
}
@media (min-width: 1200px) {
#web_header_login_lot {
margin-left: 25px;
}
}
@media (min-width: 768px) {
#number_container .row {
margin-left: 0;
margin-right: 0;
flex: 2;
}
}
@media (min-width: 768px) {
.header.black:hover .menu_A {
color: black;
}
}
@media (min-width: 768px) {
.header.black .menu_A {
color: white;
}
}
@media (min-width: 768px) {
.header.open.black .menu_A {
color: black;
}
}
@media (min-width: 768px) {
.header.open .bg {
height: 100% !important;
box-shadow: 0 0 5px 0px rgba(200, 200, 200, 0.5);
}
}
.line_2 {
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.static_bg.show {
display: block;
}
.static_bg {
display: none;
transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
}
#yun_zhan_ting {
visibility: hidden;
}
.header_contain {
position: fixed;
top: 0;
left: 0;
right: 0;
transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
}
.phone_header_menu_open .logo {
left: 25px;
margin-left: 0;
}
.header_search_input_body>div {
background-color: #e3e3e3;
border-radius: 100px;
position: relative;
}
.header_search_input_body input {
height: 38px;
width: 100%;
padding-left: 40px;
background: transparent;
border: none;
box-shadow: none;
outline: none;
}
li.phone_page_back_btn {
padding: 10px 1em;
font-size: large;
}
#web_search_icon {
position: absolute;
right: 10px;
top: 50%;
margin-top: -6px;
}
#zhong_guo_nan_jing_zong_bu {
position: absolute;
top: 40%;
left: 43%;
}
.blue_logo {
display: block;
}
#header.open .logo_blue {
display: block;
}
.black.open .blue_logo {
display: block;
}
.black .blue_logo {
display: none;
}
.black .white_logo {
display: block;
}
.white_logo {
display: none;
}
#web_header_contain_2023:hover .white_logo {
display: none;
}
.web_header_contain:hover .blue_logo {
display: block;
}
.open.black .white_logo {
display: none;
}
@media (min-width: 768px) {
.web_hide {
display: none;
}
}
@media (min-width: 768px) {
#header_top_top .menu_A .menu_Bg {
bottom: 10%;
}
#header_top_top .top_Mene_Item:hover .menu_A .menu_Bg {
height: 80%;
}
}