.p_22_s200{ .myNewMenu { background-color: #FFFFFF; } .menuGrid { grid-template-columns: 300px 1fr 400px; gap: 20px; margin: 10px auto; } .newPcLogo { display: block; line-height: 0; } .newPcLogo img { width: 90%; max-width: 200px; object-fit: contain; line-height: 0; } .newSearcBarCon { border: 0.01px solid #00000029; border-radius: 5px; display: grid; padding: 3px; grid-template-columns: 1fr 35px; position: relative; } .searchProductListNew { position: absolute; top: 50px; width: 100%; background-color: #FFFFFF; border-radius: 10px; z-index: 999; max-height: 500px; overflow: auto; box-shadow: 0 0 5px #00000029; display: none; } .searchProductNewList { padding: 0; margin: 0; list-style-type: none; } .searchProductNewList li { padding: 0 10px; } .searchProductNewList li a { display: grid; grid-template-columns: 40px 1fr; gap: 10px; font-size: 14px; padding: 5px 0; border-bottom: 0.1px solid #00000019; align-items: center; } .newSearchIcon { line-height: 0; display: flex; align-items: center; justify-content: center; } .newSearchIcon img { width: 30px; border-radius: 5px; aspect-ratio: 1/1; object-fit: cover; } .searchProductNewList li a { font-weight: 600; color: #000000; text-decoration: none; font-size: 14px; } .newSearcBarCon:focus-within .searchProductListNew { display: block; } .newSearchBtnCon { height: 35px; background-color: var(--themeColor); border-radius: 5px; } .newSearchBtnCon button { border: 0; background-color: transparent; width: 100%; height: 100%; color: var(--themeColorText); font-size: 14px; } .newSearchInputCon input { border: 0; padding: 0 10px; width: calc(100% - 20px); height: 100%; } .newMenuList { list-style-type: none; text-align: right; margin: 0; padding: 0; display: flex; align-items: center; gap: 10px; } .newMenuList li ul { position: relative; } .newMenuList li { display: inline-block; padding: 10px; display: flex; align-items: center; gap: 5px; } .newMenuList li a { text-decoration: none; color: #000000; font-size: 14px; display: flex; gap: 5px; align-items: center; } .newMenuIcon { width: 20px; height: 20px; } .newMenuIcon svg { width: 100%; height: 100%; } .newMenuList li { transition: 0.5s; cursor: pointer; /*position: relative;*/ } .smallHover { position: relative; } .newMenuList li span { white-space: nowrap; /*line-height: 0;*/ } .newMenuHoverEffect li:hover { background-color: var(--themeColor); border-radius: 5px; } .newMenuHoverEffect li:hover a { color: var(--themeColorText); } .newBelowMenu { background-color: var(--themeLightColor); } .newMenuIcon img { aspect-ratio: 1/1; object-fit: contain; width: 100%; } .lighnHover li:hover { background-color: #00000019; } .lighnHover li.activeMenu:hover { background-color: var(--themeColor); } .newBelowBannerCon a { font-weight: 600; } .newSmallDropDown { position: absolute; left: 0; background-color: #FFFFFF; z-index: 99; top: 100%; display: none; border: 0.1px solid #00000019; max-height: 800px; overflow-y: auto; width: 100%; min-width: 140px; } .newSmallDropDown li { width: calc(100% - 20px); } .newDowpDown { flex-direction: column; gap: 0; } .smallHover:hover .newSmallDropDown { display: block; } .bigDropDown { align-items: flex-start; } .newBigDropDown { width: 100%; position: absolute; z-index: 99; left: 0; top: 100%; background-color: #FFFFFF; border: 0.1px solid #00000019; display: none; max-height: 500px; overflow-y: auto; } .bigHover:hover .newBigDropDown { display: block; } .newBelowMenu ul { position: relative; } .bigDropList { flex-direction: column; align-items: flex-start; } .bigDropList li { border-bottom: 0.1px solid #00000019; width: -webkit-fill-available; } .noWeight { font-weight: normal !important; } .smallHover:hover .newDowpDown a { color: #000000; } .smallHover:hover .newDowpDown li { background-color: #FFFFFF; } .smallHover:hover .newDowpDown li:hover { background-color: #00000019; } .activeMenu { background-color: var(--themeColor); border-radius: 5px; } .activeMenu a { color: var(--themeColorText) !important; } .WithoutSearch { border-bottom: 0.1px solid #00000019; } .innerA, .outerA, .shopText { color: #000; font-size: 14px } .shopOuterLi, .shopOuterMenu { position: relative } .shopSec { display: grid; grid-template-columns: 20px 1fr; align-items: center; gap: 10px; padding: 10px } .iconSec { width: 20px; height: 20px } .activeMenu .iconSec svg { fill: #ffffff } .activeMenu .shopText { color: #fff } .iconSec svg, .outerA svg { fill: #000000 } .shopText { text-decoration: none; line-height: 20px; font-weight: 600 } .shopDropdown { position: absolute; top: 40px; background-color: #fff; width: 130%; left: 50%; transform: translateX(-50%); display: none } .shopOuterLi:hover .innerUl, .shopOuterMenu:hover .shopDropdown { display: block } .shopDropdown ul { list-style-type: none } .innerA, .outerA { width: -webkit-fill-available; padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; font-weight: 400 !important; border: 1px solid #e5e5e5; border-bottom: 0; transition: .4s } .innerLi:hover .innerA, .shopOuterLi:hover .outerA p { color: var(--themeColor) } .innerUl { background-color: #fff; width: 100%; position: absolute !important; top: 0; left: 100%; display: none } @media only screen and (max-width: 900px) { .mobileMenuGrid { padding: 10px; background-color: #FFFFFF; display: grid; grid-template-columns: 40px 180px auto; gap: 10px; align-items: center; } .menuIcon { width: 40px; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; transition: 0.5s; border-radius: 5px; &:hover { background-color: var(--themeColor); color: #FFFFFF; } } .mobileLogo img { width: 100%; } .mobileLogo { line-height: 0; } .mobileLogo a { display: inline-block; overflow: hidden; } .rightMenuIcons { display: flex; align-items: center; justify-content: flex-end; gap: 5px; } .mobileSearch { padding: 0 10px 10px 10px; border-bottom: 0.1px solid #00000019; } .mobileSearchGrid { border: 0.1px solid #00000019; padding: 5px; display: grid; border-radius: 5px; display: grid; grid-template-columns: auto 40px; } .mobileSearchBtn { width: 40px; border: 0; aspect-ratio: 1/1; border-radius: 5px; background-color: var(--themeColor); color: #FFFFFF; } .mobileSearchGrid input { height: 100%; border: 0; margin: 0 10px; width: -webkit-fill-available; } .mobileMenuSidebarGrid { display: grid; grid-template-columns: auto 80px; background-color: #00000029; } .mobileLeftBar { background-color: #FFFFFF; padding: 10px; height: calc(100vh - 20px); } .mobileMenuSidebar { position: fixed; top: 0; /*left: 0;*/ z-index: 99; width: 100%; height: 100vh; left: -100%; animation: rightToLeft 0.5s ease-in-out; animation-fill-mode: forwards; /*display: none;*/ } .leftToRight { animation: leftToRight 0.5s ease-in-out; } @keyframes leftToRight { from { left: -100%; } to { left: 0%; } } @keyframes rightToLeft { from { left: -100%; } to { left: 0%; } } .newMenuList { flex-direction: column; align-items: flex-start; gap: 5px; } .newMenuList li { border-bottom: 0.1px solid #00000029; } .newMenuList .bigHover { position: relative; } .smallHover, .bigHover { width: -webkit-fill-available; justify-content: space-between; } .mobileInsideLogo { display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } .mobileInsideLogo img { width: 200px; margin-bottom: 10px; } .mobileInsideLogo a { display: inline-block; overflow: hidden; line-height: 0; } .newSmallDropDown { width: -webkit-fill-available; } .bigHover .dropDownArrow, .bigHover .newBigDropDown { display: none !important; } } }.p_22_s200{ @media only screen and (max-width: 900px) { background-attachment:scroll; } }.p_22_s201{ .myMenuTopBar{ background-color: var(--themeColor); padding: 5px 0; } .myMenuIconsArea{ list-style-type: none; padding: 0; margin: 0; } .myMenuIconsArea li{ display: inline-block; padding-right: 5px; } .myMenuIconsArea li a{ font-size: 12px; color: var(--themeColorText); text-decoration: none; } .text-right .myMenuIconsArea li{ padding-left: 5px; padding-right: 0px; } .cicleIcon{ display: flex; width: 25px; height: 25px; border: 1px solid var(--themeColorText); border-radius: 50%; align-items: center; justify-content: center; } .midTicker{ display: grid; align-items: center; grid-template-columns: 20px 2fr 20px; align-items: center; font-size: 12px; align-items: center; } .tickerMain a{ color: var(--themeColorText); text-align: center; text-decoration: none; } .tickerNav{ cursor: pointer; height: 100%; color: #FFFFFF; display: flex; align-items: center; justify-content: center; } }.p_22_s201{ @media only screen and (max-width: 900px) { background-attachment:scroll; } }