@media (min-width: 769px) { #top { width: 100%; display: flex; justify-content: flex-start; font-size: 0.18rem; border-bottom: 1px solid #ddd; position: relative; } /*top-left*/ #top .log { width: 2.3rem; } #top .log > img { width: 60%; display: block; margin-top: 0.33rem; margin-left: 0.8rem; } #top .top-left { display: flex; justify-content: space-between; } #top .top-right .top-menu { display: flex; justify-content: space-between; } /*#top > div.top-right > ul{*/ /*margin-bottom: .4rem;*/ /*}*/ #top .top-right .top-menu > li { padding: 0 0.25rem; line-height: 1.2rem; height: 0.99rem; position: relative; } #top .top-right .top-menu > li:not(:first-of-type) { } #top .top-right .top-menu > li:not(:first-of-type) .menu-hover { width: 2.4rem; left: -0.2rem; border: 1px solid #e1e1e1; } #top .top-right .top-menu > li:nth-child(3) .menu-hover { left: -0.5rem; } #top .top-right .top-menu > li:nth-child(4) .menu-hover { left: -0.25rem; } #top .top-right .top-menu > li:nth-child(3).chinese .menu-hover { left: -0.6rem; } #top .top-right .top-menu > li:nth-child(4).chinese .menu-hover { left: -0.55rem; } #top .top-right .top-menu .hover-Tcolor:first-of-type > span { cursor: pointer; } #top .top-right .top-menu > li:nth-child(2) .menu-hover { left: -0.7rem !important; } #top .top-right .top-menu > li:not(:first-of-type) .menu-hover:before { content: none; } #top .top-right .top-menu > li:not(:first-of-type) .menu-hover .hover-underline { text-align: center; /* padding: .2rem .25rem; */ margin: 0 auto; cursor: pointer; } #top .top-right .top-menu > li:not(:first-of-type) .menu-hover .hover-underline .menu-hoverTwo { left: 100%; height: auto; } #top .top-right .top-menu > li:nth-child(4) .menu-hover .hover-underline .menu-hoverTwo { min-height: 1.35rem; } #top .top-right .top-menu > li:not(:first-of-type) .menu-hoverTwo:before { content: none; } #top .top-right .top-menu > li:not(:first-of-type) .menu-hoverTwo:after { content: none; } #top .top-right .top-menu > li:not(:first-of-type) .menu-hoverTwo > ul { border-right: none; height: auto; margin-top: 0; } #top .top-right .top-menu > li:not(:first-of-type) .menu-hoverTwo .hover-color { text-align: center; padding: 0; margin: 0 auto; height: auto; cursor: pointer; } #top .top-right .top-menu .hover-Tcolor .menu-hover { position: absolute; top: 100%; left: -2.3rem; z-index: 500; width: 5rem; background: white; display: none; box-sizing: border-box; } #top .top-right .top-menu .hover-Tcolor:first-child > .menu-hover > ul:before, #top .top-right .top-menu .hover-Tcolor:first-child > .menu-hover > ul:after { content: ''; position: absolute; width: 100vw; left: 0; border-top: 1px solid #ddd; z-index: 1; } #top .top-right .top-menu .hover-Tcolor.active .menu-hover ul:before { top: 0; } #top .top-right .top-menu .hover-Tcolor.active .menu-hover ul:after { bottom: 0; } #top .top-right .top-menu > li:not(:first-of-type) .menu-hoverTwo > ul, #top .top-right .top-menu .hover-Tcolor .menu-hover > ul { margin: 0.1rem 0; } #top .top-right .top-menu .hover-Tcolor:first-child .menu-hover > ul { margin: 4% 0 40%; box-sizing: border-box; } #top .top-right .top-menu .hover-Tcolor.active .menu-hover { display: block !important; height: auto !important; } #top .top-right .top-menu .hover-Tcolor.active .menu-hover.return { height: auto !important; } #top .top-right .menu-hover:before { content: ''; display: none; width: 0px; height: 0px; border-width: 10px 0 10px 10px; border-style: solid; border-color: transparent transparent transparent white; position: absolute; top: 0.45rem; left: 5rem; z-index: 500; } #top .top-right .hover-underline { margin-left: 2.55rem; } #top .top-right .top-menu > li:not(:first-of-type) .menu-hoverTwo .hover-color a, #top .top-right .top-menu > li:not(:first-of-type) .menu-hover .hover-underline > a, #top .top-right .hover-underline > span > a { position: relative; display: block; padding: 0.15rem 0; line-height: 1.5; } #top .top-right .hover-underline > span > a:before { content: ''; position: absolute; width: 0px; height: 0px; border-width: 10px 0 10px 10px; border-style: solid; border-color: transparent transparent transparent white; position: absolute; top: 50%; left: 100%; transform: translate(-100%, -50%); -webkit-transform: translate(-100%, -50%); transition: transform 0.3s; -webkit-transition: -webkit-transform 0.3s; z-index: 2; } #top .top-right .active > span > a:before { transform: translate(0%, -50%); -webkit-transform: translate(0%, -50%); } #top .top-right .top-menu > li:not(:first-of-type) .menu-hoverTwo .hover-color > a:after, #top .top-right .top-menu > li:not(:first-of-type) .menu-hover .hover-underline > a:after, #top .top-right .hover-underline > span > a:after { content: ''; position: absolute; left: 10%; right: 100%; bottom: 0.1rem; height: 2px; background-color: #fdc100; transition: width 0.3s; -webkit-transition: right 0.3s; } #top .top-right .hover-Tcolor:first-child .hover-underline > span > a:after { left: 0; } #top .top-right .active > span > a:after, #top .top-right .top-menu > li:not(:first-of-type) .menu-hoverTwo .active > a:after, #top .top-right .top-menu > li:not(:first-of-type) .menu-hover .active > a:after, #top .top-right .top-menu > li:not(:first-of-type) .menu-hover .active > a:after { right: 10%; } #top .top-right .hover-Tcolor:first-child .active > span > a:after { right: 35%; } #top > div.top-right > ul > li:nth-child(1) > div > ul > li:last-of-type { margin-bottom: 0.1rem; } #top .top-right .hover-underline.active { border-color: #fdc100; } #top .top-right .top-menu > li:nth-child(3) .menu-hover .hover-underline.active { background: #fff; } #top .top-right .hover-underline.active > a { } #top .top-right .hover-underline.active .menu-hoverTwo { display: block !important; } #top .top-right .hover-underline .menu-hoverTwo { position: absolute; top: 0; padding-top: 1px; /* padding-bottom: 8%; */ background: #f2f2f2; left: 5rem; width: 3.3rem; height: 100%; display: none; box-sizing: border-box; } #top .top-right .top-menu > li .menu-hoverTwo > ul { /* padding-top: 6%; */ box-sizing: border-box; } #top .top-right .hover-underline.active .menu-hoverTwo:after { content: ''; position: absolute; right: 0; top: 5%; bottom: 5%; border-right: 1px solid #dadada; } #top .top-right .menu-hoverTwo .hover-color:first-child { margin-top: 5%; } #top .top-right .menu-hoverTwo .hover-color > span { position: relative; display: flex; align-items: center; padding: 4% 15%; line-height: 1.5; } #top .top-right .menu-hoverTwo .hover-color span:before, #top .top-right .menu-hoverTwo .hover-color span:after { content: ''; position: absolute; width: 0px; height: 0px; border-width: 10px 0 10px 10px; border-style: solid; top: 50%; left: 100%; opacity: 0; transition: opacity 0.3s; -webkit-transition: -webkit-opacity 0.3s; z-index: 2; } #top .top-right .menu-hoverTwo .hover-color span:before { border-color: transparent transparent transparent #dadada; } #top .top-right .menu-hoverTwo .hover-color span:after { border-color: transparent transparent transparent #f2f2f2; margin-left: -1px; } #top .top-right .menu-hoverTwo .active span:before, #top .top-right .menu-hoverTwo .active span:after { opacity: 1; } #top .top-right .menu-hoverTwo .hover-color > span > a { display: inline-block; } #top .top-right .menu-hoverTwo .hover-color.active > span > a { color: #fdc100; } #top .top-right .menu-hoverTwo .hover-color > span > a:first-of-type { font-size: 0; margin-right: 6%; } #top .top-right .menu-hoverTwo .hover-color > span > s { width: 0.45rem; height: 0.6rem; margin-right: 0.25rem; display: inline-block; vertical-align: middle; } #top .top-right .menu-hoverTwo .hover-color > span > a > s { width: 0.7rem; height: 0.7rem; display: inline-block; vertical-align: middle; } #top .top-right .menu-hoverTwo .hover-color > span > s > img { height: 100%; vertical-align: middle; } #top .top-right .menu-hoverTwo .hover-color > span > a > s > img { height: 100%; vertical-align: middle; } #top .top-right .hover-color .menu-hoverThree { display: none; } #top .top-right .hover-underline.active .hover-color.active .menu-hoverThree { display: block !important; } #top .top-right .hover-color.active .menu-hoverThree { display: block; } #top .top-right .hover-color .menu-hoverThree { position: absolute; top: 0; background: #f2f2f2; left: 3.3rem; width: calc(100vw - 8.3rem); min-height: 100%; overflow: hidden; } #top .top-right .hover-color .scroll .arrow_btn { position: absolute; top: 15%; display: none; z-index: 99; } #top .top-right .hover-color .scroll .arrow_left { left: 3.8rem; } #top .top-right .hover-color .scroll .arrow_right { left: 13.4rem; } #top .top-right .hover-color .scroll .arrow_left img, #top .top-right .hover-color .scroll .arrow_right img { cursor: pointer; width: 0.5rem; } #top .top-right .hover-color .menu-hoverThree ol { display: flex; flex-wrap: wrap; margin-top: 0.4rem; margin-left: 0.6rem; position: relative; } #top .top-right .hover-color .menu-hoverThree ol > li { min-width: 25%; text-align: center; margin-bottom: 0.2rem; } #top .top-right .hover-color .menu-hoverThree ol > li > .menu-product a { display: flex; align-items: center; } #top .top-right .hover-color .menu-hoverThree ol > li div { width: 1.5rem; height: 1.5rem; margin: auto; display: flex; justify-content: center; align-items: Center; } #top .top-right .hover-color .menu-hoverThree ol > li > p { line-height: 0.28rem; } #top .top-right .hover-color .menu-hoverThree ol > li div img { width: 100%; } #top .top-right .hover-color .menu-hoverThree ol > li > div > img { width: 1.5rem !important; } #top .top-right .top-menu > li.active > span a { color: #edcc80; } /*top-right*/ #top .top-right { display: flex !important; flex-wrap: nowrap; justify-content: space-between; flex-grow: 1; } #top .top-right .top-right-locator .top-right-locator-ac { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.15rem; } #top-login-box > ul > li.login.click > div > form > div.form-top > span { display: none; } #top .top-right .top-right-locator .top-right-locator-ac li { /*display: block;*/ /* line-height: 0.5rem; margin: 0.1rem 0.2rem; */ margin: 1em; } #top .top-right .top-right-locator .top-right-locator-ac > li:before { content: ''; display: inline-block; width: 1px; background-color: #ddd; height: 0.16rem; position: relative; right: 1em; bottom: 0; } #top .top-right .top-right-locator .top-right-locator-ac > li:first-child:before { display: none; } #top .top-right .top-right-locator .top-right-locator-ac .line { margin: 0 0.05rem; border-left: 1px solid #ddd; border-right: 1px solid #ddd; } #top .top-right .top-right-locator .top-right-locator-ac li.login { position: relative; } #top .top-right .top-right-locator .top-right-locator-ac li.login a { /* line-height: calc(0.5rem - 0.02rem); */ font-size: 0.15rem; } #top .top-right .top-right-locator .top-right-locator-ac li.login.click { background: #f9f9f9; border-color: #fdc100; } #top .top-right .top-right-locator .top-right-locator-ac li.login.click .line { border-color: transparent; } #top .top-right .top-right-locator .top-right-locator-ac li.login .login-dl { position: absolute; top: 0.4rem; right: 0; width: 4rem; background: #f9f9f9; display: none; z-index: 999; min-height: 220px; } #top .top-right .top-right-locator .top-right-locator-ac li.login .login-dl .form-top { color: #181818; margin-top: 0.25rem; } #top .top-right .top-right-locator .top-right-locator-ac li.login .login-dl .form-top > span, #top .top-right .top-right-locator .top-right-locator-ac li.login .login-dl .form-top a { color: #c4c4c4; } #top .top-right .top-right-locator .top-right-locator-ac li.login .login-dl form { width: calc(3.58rem); margin: auto; } #top .top-right .top-right-locator .top-right-locator-ac li.login .login-dl form input { width: 90%; padding: 0 5%; height: 0.38rem; border: 1px solid #e1e1e1; } #top .top-right .top-right-locator .top-right-locator-ac li.login .login-dl .form-bt { width: 1rem; height: 0.38rem; line-height: 0.38rem; margin: 0.14rem auto; background: #fdc100; text-align: center; padding: 0; } #top .top-right .top-right-locator .top-right-locator-ac li.login .login-dl .form-bt a { border: none; font-weight: bold; } #top .top-right .top-right-locator .top-right-locator-ac li.login .login-dl a { margin: 0; margin-bottom: 0.05rem; border-bottom: 0.02rem solid #3333334d; line-height: 0; } #top .top-right .top-right-locator .top-right-locator-ac li.login .login-dl label { display: block; line-height: 0.35rem; margin: 5px 0; } #top .top-right .top-right-locator .top-right-locator-ac li.login .login-dl > ul { display: flex; justify-content: space-between; width: 3.65rem; margin: auto auto 0.1rem auto; } #top .top-right .top-right-shopping { display: flex; justify-content: flex-end; margin-right: 1.2rem; position: relative; } #top .top-right .top-right-shopping .Search { height: 0.3rem; width: 3rem; border-radius: 0.3rem; border: 1px solid #ddd; position: absolute; right: 0; transition: width 0.5s; -webkit-transform: width 0.5s; } #top .top-right .top-right-shopping .Search.extend { width: 5rem; } #top .top-right .top-right-shopping .Search > input { position: absolute; width: 100%; height: 0.25rem; top: 0.025rem; padding: 0 0.45rem 0 0.15rem; border-radius: 0.25rem; background-color: transparent; box-sizing: border-box; } #top .top-right .top-right-shopping .Search > span { position: absolute; width: 0.28rem; height: 0.28rem; right: 0.1rem; top: 0; margin-top: 0.025rem; } #top .top-right .top-right-shopping .Search > span > img { width: 0.2rem; position: absolute; top: 0.025rem; } #top .top-right .top-right-shopping .shopping-car { width: 1.05rem; text-align: center; } #top .top-right .top-right-shopping .shopping-car > span { display: inline-block; width: 0.35rem; } #top .top-right .top-right-shopping .shopping-car > span > img { width: 0.32rem; } #top .cart { position: absolute; right: 2%; bottom: 10%; } .cs-info { display: none; position: absolute; top: 0.4rem; right: 0; width: 3rem; background: #f9f9f9; z-index: 999; text-align: center; } .cs-info a { width: 100%; } .cs-info span { width: 86%; display: block; background: #fdc100; margin: 2%; color: white; margin: 0.1rem auto; } .cs-info span > a { padding: 0 !important; margin: 0 !important; } .cs-info > a { margin: 0 !important; margin-top: 0.1rem !important; display: block; } .cs-info span:hover { background: #d4a63b; } .hide { display: none !important; } .hides { display: none; } .login-bottom { display: none; } .top-close { display: none; } .nav_btm { display: none; } .top-menu i { display: none; } .cs-info span a { display: block; margin-left: 0; padding-left: 0.2rem; } } @media (max-width: 768px) { .top-right ul.top-menu { overflow-y: scroll; } #top { width: 100%; padding: 10px 0; font-size: 0.21rem; position: relative; background: #fff; top: 0; left: 0; z-index: 999; border-bottom: 1px solid #bfbfbf; } .top-show { display: block !important; } .top-flex { display: flex !important; } .menu-hover { display: none; } .top-right { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; z-index: 99; background: #f2f2f2; border-top: 1vh solid #fdc100; display: none; /* 20211109 */ /* overflow: hidden; */ overflow-x: hidden; overflow-y: auto; } .hover-Tcolor .menu-hover .menu-hoverTwo::-webkit-scrollbar, .top-right .top-menu::-webkit-scrollbar { width: 0px; /* remove scrollbar space */ background: transparent; /* optional: just make scrollbar invisible */ } /* optional: show position indicator in red */ .hover-Tcolor .menu-hover .menu-hoverTwo::-webkit-scrollbar-thumb, .top-right .top-menu::-webkit-scrollbar-thumb { background: transparent; } .top-right .top-close { position: absolute; z-index: 1000; top: 0; right: 0; width: 100%; display: block; padding: 15px 0; } .top-right .top-close .top-close-left { position: absolute; font-size: 4vw; margin-left: 5%; top: 50%; transform: translate(0, -50%); -webkit-transform: translate(0, -50%); align-items: center; display: none; white-space: nowrap; } .top-right .top-close .top-close-left span { display: inline-block; vertical-align: middle; margin-top: 5%; } .top-right .top-close .top-close-left i { display: inline-block; vertical-align: middle; font-style: normal; /*display: flex; justify-content: flex-end; align-items: center; margin-right: 3vw;*/ font-size: 0; width: 9vw; margin-right: 10%; } .top-right .top-close .top-close-left i img { transform: rotate(180deg); width: 100%; } .top-right .top-close .top-close-right { font-size: 0; width: 35px; float: right; cursor: pointer; margin-right: 2%; } .top-right .top-close .top-close-right img { width: 100%; } .hide { display: none !important; } .top-right .top-menu { width: 100%; height: 70vh; z-index: 99; position: relative; margin-top: 48%; display: block; padding-bottom: 20%; } .top-right .top-menu .hover-Tcolor { /* 20210928 */ /*border-bottom: 1px solid #bfbfbf;*/ border-top: 1px solid #bfbfbf; /*height: 10.6vh;*/ line-height: normal; /* position: relative; */ /* padding: 4% 0 4% 8%; */ } .top-menu-last-item { /* 20210928 */ border-bottom: 1px solid #bfbfbf; } .relative { position: relative; } .hover-Tcolor i { display: flex; align-items: center; margin-right: 3vw; position: relative; } .hover-Tcolor i > img { width: 70%; } .top-right .top-menu .hover-Tcolor .menu-hover { width: 100%; height: 65vh; /* set menu last time be visible on mobile */ z-index: 99; padding: 0; display: none; background: #f2f2f2; position: absolute; top: 0; left: 0; bottom: 0; box-sizing: border-box; padding-bottom: 20%; } ul li span { position: relative; width: auto; /* display: inline-block; */ line-height: 1; } .hover-Tcolor .menu-hover .menu-hoverTwo { width: 100%; /* height: 65vh; */ z-index: 99; padding: 0; display: none; background: #f2f2f2; position: absolute; top: 0; left: 0; bottom: 0; overflow-y: scroll; box-sizing: border-box; padding-bottom: 20%; } .menu-hover .menu-hoverThree { width: 100%; height: 65vh; z-index: 99; padding: 0; display: none; background: #f2f2f2; position: absolute; top: 0; left: 0; } .hover-Tcolor .menu-hover .hover-underline, .menu-hover .menu-hoverTwo .hover-color, .menu-hoverThree ol li { border-bottom: 1px solid #bfbfbf; line-height: normal; } .menu-hoverThree ol { padding: 0; } .menu-hoverThree ol p { font-size: 4.5vw; margin: 0; } #top .top-right .top-right-locator .top-right-locator-ac li.login:hover .login-dl { /*display: block;*/ } .hover-Tcolor .menu-hover .menu-product img { display: block; position: absolute; width: auto; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); max-height: 80%; max-width: 80%; } .menu-hoverThree img { /* display: none; */ } .hover-Tcolor .menu-hover .menu-hoverTwo { /* display: none; */ } .top-right .top-menu .hover-Tcolor span { font-size: 4.5vw; display: flex; align-items: center; justify-content: space-between; } .top-right .top-menu .hover-Tcolor a { display: block; padding: 6% 0 6% 6%; width: 100%; font-size: 4.5vw; line-height: 1; box-sizing: border-box; } .hover-Tcolor .menu-hover .menu-hoverTwo span a:first-of-type { /* display: none; */ } .hover-Tcolor .menu-hover li .menu-product { position: absolute; padding: 0; width: 14%; padding-top: 14%; left: 2%; } .hover-Tcolor .menu-hover li .menu-product + p, .hover-Tcolor .menu-hover li .menu-product + a { position: relative; left: 12%; } .menu_info { /* border-top: 1px solid #bfbfbf; */ } .top-right .top-right-log { /*display: flex;*/ /* flex-wrap: wrap-reverse; */ z-index: 99; position: absolute; top: 18vw; width: 100%; } .top-right .top-right-log > div { width: 100%; } .top-right .top-right-log .top-right-shopping { background: #f2f2f2; z-index: 998; /* 20210928 */ /* border-bottom: 1px solid #bfbfbf; */ border-top: 1px solid #bfbfbf; padding: 3% 0; } .top-right .top-right-log .top-right-shopping > form { display: flex; align-items: center; height: 100%; justify-content: center; } .top-right-log .top-right-shopping .Search { position: relative; border: 1px solid #e1e1e1; width: 87%; margin: 0 auto; padding: 2%; background: #fff; font-size: 4vw; border-radius: 10vw; } .top-right-shopping .Search > span { position: absolute; top: 50%; right: 0; margin-right: 5%; transform: translate(0, -50%); transform: translate(0, -40%); -webkit-transform: translate(0, -40%); } .top-right-shopping .Search > span img { width: 5vw; } .top-right-log .top-right-shopping .Search input { border: none; margin-left: 2%; font-size: 3.5vw; color: #343434; } .top-right-log .top-right-shopping .Search input#search { width: 80%; } .top-right-locator-ac { display: flex; justify-content: space-between; align-items: center; height: 100%; } .top-right-locator-ac li { width: 40%; } .top-right-locator-ac li.login { order: 1; width: 55%; } .top-right-locator-ac li.login .cs-info { display: flex; } .top-right-locator-ac li.login .cs-info > a { display: none; } .top-right-locator-ac li.login .cs-info > span { width: 48%; background: #fdc100; min-height: 3vh; text-align: center; display: flex; justify-content: center; align-items: center; margin-right: 5vw; } .top-right-locator-ac li.login .cs-info > span:first-of-type { /*display: none;*/ } .top-right-locator-ac li.login .cs-info > span > a { font-size: 4vw; } .top-right-locator-ac li.login > span.line > a { font-size: 3.5vw; color: #343434; display: flex; align-items: center; height: 100%; justify-content: flex-end; margin-right: 8%; } .top-right-locator-ac li:last-of-type { text-align: center; } .top-right-locator-ac li:last-of-type span { content: ''; margin-left: 12%; display: table; width: 8vw; height: 8vw; border: 1px solid #e1e1e1; background: #fff; border-radius: 50%; } .top-right-locator-ac li:last-of-type span a { display: table-cell; font-size: 3vw; vertical-align: middle; color: #343434; } .top-right .top-right-log .top-right-locator { padding: 2% 0; background: #f2f2f2; z-index: 999; border-top: 1px solid #bfbfbf; } #top .top-left { width: 100%; height: 100%; display: flex; justify-content: flex-start; align-items: center; } #top .top-left .cart { margin-right: 3vw; width: 10%; } #top .top-left .log { margin-left: 2%; width: 73%; } #top .top-left .log a img { width: 100px !important; margin-top: 0 !important; margin-left: 0 !important; } .top-right-locator-ac li.login .line { } .top-right-locator-ac li.login .line.after { display: none; } .top-right-locator-ac li.login .line:hover { } .top-right-locator-ac li.login .login-dl { display: none; width: 90%; height: 100vh; padding: 0 5% 0 5%; border-bottom: 1px solid #bfbfbf; position: absolute; top: 0; left: 0; z-index: 1000; background: #f2f2f2; } .login-dl form input { width: 100%; height: 6vh; background-color: #fff !important; padding: 3%; font-size: 4.5vw; margin-bottom: 2vh; -webkit-box-shadow: 0 0 0px 1000px white inset; border: 1px solid #e1e1e1; box-sizing: border-box; -webkit-appearance: none; appearance: none; } .login-dl form input + label { margin-top: 4%; } .top-right-locator-ac > li:first-of-type { display: none; } form .form-top { font-size: 5vw; margin-bottom: 1vh; margin-bottom: 7%; } form .form-top span { margin-left: 1vh; color: #b9b9b9; font-size: 2vh; display: inline-block; width: auto; } form .form-top > span { display: none; } .login-dl form .form-top span a { color: #000; font-size: 2vh; text-decoration: underline; } .login-dl form label { /* margin-top: 2vh; */ display: block; font-size: 3.5vw; margin-bottom: 2%; } .login-dl form .form-bt a { background: #fdc100; width: 100%; height: 6vh; margin: 15% 0 7% 0; color: #343434; font-size: 4.5vw; line-height: 6vh; text-align: center; display: inline-block; } .login-dl ul li:first-of-type { position: absolute; top: 38%; right: 5%; } .login-dl ul li { width: auto; } .login-dl ul li a { color: #000 !important; font-size: 3.5vw; text-decoration: underline; } .login-bottom { width: 100%; height: 12vh; text-align: center; display: none; border-top: 1px solid #bfbfbf; line-height: 12vh; position: fixed; z-index: 1000; bottom: 0; left: 0; } .login-bottom span a { color: #000; font-size: 2.5vh; } .nav_btm { width: 40px; margin-right: 2%; } .nav_btm > img { width: 100%; } .mobile_forget { text-align: right; } .mobile_forget a { color: #000 !important; font-size: 3.5vw; text-decoration: underline; } .login-dl ul li:first-of-type { display: none; } #maincontent { width: 100%; } .hightlights-ct .click { display: none; } .whirlpool.mini .block-customer-login, .whirlpool.mini .block-customer-menu { border-top: 0 !important; } .whirlpool.mini .block-customer-login { overflow-y: auto; } .customer-menu .user-name { display: none; } } #icon-banner { width: 100%; background: #000; color: #fff; padding: 0.1rem 0.8rem; box-sizing: border-box; } .icon-banner-container { width: 100%; margin: 0 auto; } .icon-banner-container ul { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-content: center; -webkit-align-content: center; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -ms-align-items: center; align-items: center; -webkit-box-pack: justify; -moz-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .icon-banner-container ul li { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-content: center; -webkit-align-content: center; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -ms-align-items: center; align-items: center; color: #fff; font-size: 0.18rem; width: 32%; justify-content: center; } .icon-banner-container ul li img { height: 30px; width: auto; margin-right: 1em; } .an-pop-out.go { transition: transform 0.2s cubic-bezier(0.605, 0.065, 0.935, 0.55), opacity 0.2s cubic-bezier(0.605, 0.065, 0.935, 0.55); transform: translateY(-1rem); opacity: 0; } .an-pop-in.go { transition: transform 0.2s cubic-bezier(0.08, 0.455, 0.375, 0.96), opacity 0.2s cubic-bezier(0.08, 0.455, 0.375, 0.96); transform: translateY(0); opacity: 1; } .an-vlong, .an-vlong.go { transition-duration: 1.32s; -webkit-animation-duration: 2.64s; animation-duration: 2.64s; } .an-pop-in { transform: translateY(1rem); opacity: 0; } .an-pop-out { transform: translateY(0); } .an-load-fade { -webkit-animation-name: fadeInOnLoad; animation-name: fadeInOnLoad; } .an-load-drop, .an-load-fade, .an-load-fade-drop, .an-load-fade-pop, .an-load-fade-shift-l, .an-load-fade-shift-r, .an-load-grow { -webkit-animation-duration: 0.33s; animation-duration: 0.33s; -webkit-animation-timing-function: cubic-bezier(0.08, 0.455, 0.375, 0.96); animation-timing-function: cubic-bezier(0.08, 0.455, 0.375, 0.96); -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards; } @keyframes fadeInOnLoad { from { opacity: 0; } } @media (max-width: 768px) { .hidden { display: none !important; } .top-container { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: column-reverse; flex-direction: column-reverse; /* -webkit-flex-direction: row-reverse; */ /* flex-direction: row-reverse; */ position: fixed; top: 0; left: 0; width: 100%; z-index: 90; } #icon-banner { /* margin-top: 16vw; */ position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-content: center; -webkit-align-content: center; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -ms-align-items: center; align-items: center; padding: 0 20px; } .icon-banner-container ul { flex-wrap: wrap; -ms-flex-wrap: wrap; padding: 0.15rem 0; } .icon-banner-container ul li { font-size: 0.25rem; width: 100%; } } @media (min-width: 833px) and (max-width: 962px) { #top .top-right .top-menu > li { padding: 0 0.14rem; } } @media (min-width: 768px) and (max-width: 833px) { #top .top-right .top-menu > li { padding: 0 0.1rem; } }