@media (min-width: 1025px) { #header .burger, #header .mobile-menu, #header .search-modal, #header .mobile-btns, #header .first-menu li .mobile-menu-arrow, #header .mobile-menu-li { display: none; font-size: 0; } } @media (min-width: 1536px) { #header { /* background-color: rgba(0, 0, 211, 0.6); */ } #header .second-third-menu { left: -94px; width: 1100px; } #header .header-container { width: 1410px; } #header .second-third-menu-container { width: 900px; } #header .second-menu { width: 250px; } #header .advertising { width: 280px; } } /* XL Device :1200px 澶у瀷*/ @media (min-width: 1281px) and (max-width: 1536px) { #header { /* background-color: rgba(255, 0, 211, 0.6); */ } #header .second-third-menu { left: -94px; width: 1100px; } #header .header-container { width: 1200px; } #header .second-third-menu-container { width: 900px; } #header .second-menu { width: 250px; } #header .advertising { width: 280px; } } @media (min-width: 1025px) and (max-width: 1280px) { #header { /* background-color: rgba(255, 0, 0, 0.6); */ font-size: 14px; } #header .first-menu-li { padding-right: 26px; } #header .first-menu-link { padding: 0 2px; font-size: 14px; } #header .second-third-menu { left: -94px; width: 1020px; } #header .header-container { width: 1110px; } #header .second-third-menu-container { width: 820px; } #header .second-menu { width: 240px; } #header .advertising { width: 260px; } } /* LG Device :992px 鍙板紡*/ /* @media (min-width: 992px) and (max-width: 1024px) { #header .second-third-menu { left: -19px; width: 1000px; } #header .header-search .search-store { margin: 0 30px; } #header .header-container, #header .second-third-menu-container { width: 962px; } #header .second-third-menu-container, #header .second-menu-link { font-size: 14px; } #header .second-menu { width: 330px; } #header .advertising { width: 282px; } #header .first-menu-link { font-size: 14px; padding: 0 2px; } #header .first-menu-li { padding-right: 13px; } #header .shortcut .shortcut-button { padding: 0 10px; font-size: 14px; } } */ /* MD Device :768px 骞虫澘*/ @media (min-width: 481px) and (max-width: 1024px) { #header .logo { margin-top: 0; } #header .first-menu-li { padding-right: 0; } #header .header-container { width: 90vw; } #header .mobile-menu-li { display: block; } #header .search-store { display: none !important; } #header .advertising { display: none; } #header .header-search section { width: 100%; padding: 0 20px } #header .web-shortcut, #header .shortcut { display: none; } #header .first-menu .first-menu-link strong { font-size: 14px; } #header .second-third-menu { display: flex; justify-content: flex-start; left: -200px; top: 0; width: 100%; height: 100%; } #header .mobile-btns { display: flex; align-items: center; } #header .mobile-btn { width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; color: #fff; margin-right: 10px; cursor: pointer; } #header .mobile-btn .iconfont { font-size: 30px !important; } #header .search-modal { width: 100%; height: 140px; background: #fff; position: fixed; top: 0; left: 0; display: flex; justify-content: center; align-items: center; z-index: 99999; } #header .search-modal .iconfont { font-size: 26px; border: none; background-color: transparent; outline: none; } #header .search-modal-form { width: 70%; height: 40px; border-bottom: 1px solid #1D73DD; display: flex; align-items: center; justify-content: space-between; position: relative; } #header .search-modal-form button { width: 50px; } #header .search-modal-form .input-medium { padding: 0 20px; background: none; outline: none; border: none; } #header .search-modal-close { position: absolute; width: 50px; height: 50px; right: 20px; top: 0; display: flex; align-items: center; justify-content: center; } #header .second-menu-arrow { right: 10px; font-size: 26px !important; color: #333; opacity: 1; } #header .burger { /* position: relative; z-index: 250; */ width: 30px; height: 20px; transform: rotate(0deg); cursor: pointer; } #header .burger span { display: block; position: absolute; height: 3px; width: 100%; background-color: #fff; opacity: 1; left: 0; transform: rotate(0deg); transition: background-color .3s linear, transform .1s linear; } #header .burger-close span:nth-child(1) { top: 0; } #header .burger-close span:nth-child(2) { top: 8px; } #header .burger-close span:nth-child(3) { top: 16px; } #header .burger-open span:nth-child(1) { top: 6px; transform: rotate(-45deg); height: 4px; } #header .burger-open span:nth-child(2) { display: none; } #header .burger-open span:nth-child(3) { transform: rotate(45deg); top: 6px; height: 4px; } #header .header-menu { position: fixed; background: #fff; top: 0; left: 100%; width: 70%; height: 100vh; transition: all 0.2s ease 0s; z-index: 99999; justify-content: space-between; height: 100vh; display: flex; flex-direction: column; } #header .header-menu-show { left: 30%; } #header .dialog { width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.6); position: fixed; top: 0; left: 0; z-index: 99; display: none; } #header .header-nav section, .nav-menu { justify-content: space-between; height: 100vh; width: 100%; } #header .menu-nav { /* flex-direction: column; */ /* width: 100%; */ flex: 1; overflow-y: auto; display: flex; flex-direction: column; } #header .mobile-menu-arrow { display: block; } #header .first-menu-li .mobile-menu-arrow { font-size: 26px; } #header .first-menu-link { font-weight: 700; height: 60px; display: flex; justify-content: space-between; padding: 0 10px 0 28px; width: 100%; align-items: center; border-bottom: 1px solid #F6F9FF; color: #313538; /* display: none; */ } #header .second-menu { width: 100%; height: 100%; padding: 0; } #header .second-menu-link { padding: 0 10px 0 28px; font-weight: 500; height: 60px; display: flex; align-items: center; border-bottom: 1px solid #F6F9FF; } #header .first-menu-link .mobile-menu-arrow { font-size: 26px; } #header .third-menu { width: 100%; height: 100%; background: #fff; padding: 0; display: none; } #header .third-menu-link { padding: 0 10px 0 28px; height: 60px; line-height: 26px; font-family: "Montserrat", "Poppins", sans-serif; color: #333; font-size: 16px; margin: 10px 0 0 0; } #header .second-third-menu-container { display: flex; display: none; flex-direction: column; width: 100%; height: 100%; background: #fff; } #header .mobile-menu { width: 100%; height: 100px; flex-shrink: 0; position: relative; font-family: din2014, helvetica neue, Helvetica, Arial, sans-serif; font-weight: 600 !important; line-height: 24px; position: relative; display: flex; align-items: center; justify-content: flex-start; } #header .mobile-menu-close, .mobile-menu-back { width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; } #header .mobile-menu-close { position: absolute; top: 0; right: 0; } #header .mobile-menu-back { left: 0; display: none; width: 40px; height: 100px; } #header .mobile-menu-back .iconfont { transform: rotate(180deg); } #header .mobile-menu .iconfont { font-size: 26px; width: 20px; height: 20px; color: #313538; display: inline-block; } #header .mobile-menu-title { display: flex; align-items: center; } #header .mobile-menu-title span { position: relative; color: #313538; font-size: 20px; } #header .mobile-menu-title-home { text-indent: 24px; } } @media (min-width: 480px) { #header .logo-mobile { display: none; } } @media (max-width: 480px) { #header .first-menu-li { padding-right: 0; } #header .logo-pc { display: none; } #header .logo-mobile { width: 30px; margin: 0 30px 0 0; } #header .header-container { width: 90vw; } #header .mobile-menu-li { display: block; } #header .search-store { display: none !important; } #header .advertising { display: none; } #header .header-search section { width: 100%; padding: 0 20px } #header .web-shortcut, .shortcut { display: none !important; } #header .first-menu .first-menu-link strong { font-size: 14px; } #header .second-third-menu { display: flex; justify-content: flex-start; left: -200px; top: 0; width: 100%; height: 100%; } #header .mobile-btns { display: flex; align-items: center; } #header .mobile-btn { width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; color: #fff; margin-right: 10px; cursor: pointer; } #header .mobile-btn .iconfont { font-size: 30px !important; } #header .search-modal { width: 100%; height: 140px; background: #fff; position: fixed; top: 0; left: 0; display: flex; justify-content: center; align-items: center; z-index: 99999; } #header .search-modal .iconfont { font-size: 26px; border: none; background-color: transparent; outline: none; } #header .search-modal-form { width: 70%; height: 40px; border-bottom: 1px solid #1D73DD; display: flex; align-items: center; justify-content: space-between; position: relative; } #header .search-modal-form button { width: 50px; } #header .search-modal-form .input-medium { padding: 0 20px; background: none; outline: none; border: none; } #header .search-modal-close { position: absolute; width: 50px; height: 50px; right: 20px; top: 0; display: flex; align-items: center; justify-content: center; } #header .second-menu-arrow { right: 10px; font-size: 18px !important; color: #333; opacity: 1; } #header .burger { /* position: relative; z-index: 250; */ width: 30px; height: 20px; transform: rotate(0deg); cursor: pointer; } #header .burger span { display: block; position: absolute; height: 3px; width: 100%; background-color: #fff; opacity: 1; left: 0; transform: rotate(0deg); transition: background-color .3s linear, transform .1s linear; } #header .burger-close span:nth-child(1) { top: 0; } #header .burger-close span:nth-child(2) { top: 8px; } #header .burger-close span:nth-child(3) { top: 16px; } #header .burger-open span:nth-child(1) { top: 6px; transform: rotate(-45deg); height: 4px; } #header.burger-open span:nth-child(2) { display: none; } #header .burger-open span:nth-child(3) { transform: rotate(45deg); top: 6px; height: 4px; } #header .header-menu { position: fixed; background: #fff; top: 0; left: 100%; width: 70%; height: 100vh; transition: all 0.2s ease 0s; z-index: 99999; justify-content: space-between; height: 100vh; display: flex; flex-direction: column; } #header .header-menu-show { left: 30%; } #header .dialog { width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.6); position: fixed; top: 0; left: 0; z-index: 99; display: none; } #header .header-nav section, .nav-menu { justify-content: space-between; height: 100vh; width: 100%; } #header .menu-nav { /* flex-direction: column; */ /* width: 100%; */ flex: 1; overflow-y: auto; display: flex; flex-direction: column; } #header .mobile-menu-arrow { display: block; } #header .first-menu-li .mobile-menu-arrow { font-size: 26px; } #header .first-menu-link { font-weight: 700; height: 40px; display: flex; justify-content: space-between; padding: 0 10px 0 18px; width: 100%; align-items: center; border-bottom: 1px solid #F6F9FF; color: #313538; text-align: left; font-size: 14px; font-family: din2014, helvetica neue, Helvetica, Arial, sans-serif; /* display: none; */ } #header .second-menu { width: 100%; height: 100%; padding: 0; } #header .second-menu-link { padding: 0 10px 0 18px; font-weight: 500; height: 40px; font-size: 14px; line-height: 20px; display: flex; align-items: center; border-bottom: 1px solid #F6F9FF; } #header .second-menu-link div { display: flex; align-items: center; } #header .first-menu-link .mobile-menu-arrow { font-size: 18px; } #header .h-60 { height: 40px; } #header .third-menu { position: absolute; top: 0; width: 100%; height: 100%; background: #fff; padding: 0; display: none; } #header .third-menu-link { padding: 0 18px 10px 18px; line-height: 20px; font-family: "Montserrat", "Poppins", sans-serif; color: #333; font-size: 14px; display: block; } #header .second-third-menu-container { display: flex; display: none; flex-direction: column; width: 100%; height: 100%; background: #fff; /* position: absolute; top: 0; */ } #header .mobile-menu { width: 100%; height: 80px; flex-shrink: 0; position: relative; font-family: din2014, helvetica neue, Helvetica, Arial, sans-serif; font-weight: 600 !important; line-height: 24px; position: relative; display: flex; align-items: center; justify-content: flex-start; } #header .mobile-menu-close, #header .mobile-menu-back { width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; } #header .mobile-menu-close { position: absolute; top: 0; right: 0; } #header .mobile-menu-back { left: 0; display: none; width: 40px; height: 100px; } #header .mobile-menu-back .iconfont { transform: rotate(180deg); } #header .mobile-menu .iconfont { font-size: 18px; width: 16px; height: 24px; color: #313538; display: inline-block; } #header .mobile-menu-title { display: flex; align-items: center; } #header .mobile-menu-title span { position: relative; color: #313538; font-size: 14px; } #header .mobile-menu-title-home { text-indent: 16px; } }