/*@container_width: 1625px;*/ .site-header { position: relative; width: 100%; top: 0; z-index: 99; background: #001d59; height: 85px; } @media screen and (max-width: 1200px) { .site-header { height: 70px; } } .site-header .mobile-menu { display: none; float: left; width: 100%; background: #001d59; } .site-header .mobile-menu > ul { float: left; } .site-header .mobile-menu ul { padding: 0; margin: 0; width: 100%; list-style-type: none; } .site-header .mobile-menu ul > li { position: relative; float: left; width: 100%; } .site-header .mobile-menu ul > li > a { display: block; float: left; width: 100%; padding: 0 5%; height: 48px; font-size: 14px; line-height: 48px; margin: 0; text-align: left; color: #fff; border-top: 1px solid rgba(0, 0, 0, 0.1); text-decoration: none; text-transform: uppercase; } .site-header .mobile-menu ul > li > ul { display: none; } .site-header .mobile-menu ul > li > ul > li > a { height: 36px; line-height: 36px; width: 100%; background: #eee; padding: 0 10%; opacity: 0.4; color: #000; filter: alpha(opacity=40); border-top: 1px solid rgba(255, 255, 255, 0.051); text-shadow: none !important; visibility: visible; } .site-header .mobile-menu ul > li.multi-level .plus-icon { position: absolute; padding: 10px 22px; right: 0; top: 5px; } .site-header .mobile-menu ul > li.multi-level .plus-icon:after { content: ''; /*font-family: 'Font Awesome 5 Pro';*/ /* width: 10px; */ /* height: 10px; */ cursor: pointer; color: #fff; border: solid #fff; border-width: 0 2px 2px 0; display: inline-block; padding: 4px; transform: rotate(45deg); -webkit-transform: rotate(45deg); transition: 0.5s ease; } .site-header .mobile-menu ul > li.multi-level .minus-icon { position: absolute; padding: 10px 22px; right: 0; top: 5px; } .site-header .mobile-menu ul > li.multi-level .minus-icon:after { content: ''; /*font-family: 'Font Awesome 5 Pro';*/ /* width: 10px; */ /* height: 10px; */ cursor: pointer; color: #fff; border: solid #fff; border-width: 0 2px 2px 0; display: inline-block; padding: 4px; transform: rotate(-135deg); -webkit-transform: rotate(-135deg); transition: 0.5s ease; } .site-header .mobile-menu .search-box-mobile { background: #fff; display: block; float: left; width: 100%; padding: 0 5%; height: 48px; line-height: 48px; margin: 0; text-align: left; color: #000; border-top: 1px solid rgba(0, 0, 0, 0.1); text-decoration: none; text-transform: uppercase; } .site-header .mobile-menu .search-box-mobile .form-group { margin: 0; display: block; } .site-header .mobile-menu .search-box-mobile input { height: 24px; line-height: 24px; margin-top: 0px; outline: none; width: 91%; font-size: 13px; vertical-align: middle; color: #000; border: 0; border-bottom: 1px solid #eee; } .site-header .header-container .head-box { padding: 0 30px; display: flex; justify-content: space-between; align-items: center; height: 85px; } @media screen and (max-width: 1200px) { .site-header .header-container .head-box { height: 70px; padding: 0 15px; } } .site-header .header-container .head-box .logo { display: flex; align-items: center; width: 50%; } @media screen and (min-width: 992px) { .site-header .header-container .head-box .logo { width: 78%; } } .site-header .header-container .head-box .logo .img { padding-left: 15px; *margin-right: 30px; width: 24%; } @media screen and (min-width: 1600px) { .site-header .header-container .head-box .logo .img { *width: 335px; } } @media screen and (max-width: 1600px) { .site-header .header-container .head-box .logo .img { margin-right: 15px; } } .site-header .header-container .head-box .logo .img a { display: block; } .site-header .header-container .head-box .logo .img img { height: 40px; width: auto; } @media screen and (max-width: 1600px) { .site-header .header-container .head-box .logo .img img { height: 40px; } } .site-header .header-container .head-box .logo ul { list-style: none; margin: 0; } .site-header .header-container .head-box .logo ul > li.active > a { *background: linear-gradient(#001d59, rgba(255, 255, 255, 0.2) 80%) no-repeat; } .site-header .header-container .head-box .logo ul > li.active > a li.active a { background: #001d59; } .site-header .header-container .head-box .logo ul > li.active > a a { background: #001d59; } .site-header .header-container .head-box .logo ul > li.active.level-2 > a { background: linear-gradient(#001d59, rgba(255, 255, 255, 0.2) 80%) no-repeat; } .site-header .header-container .head-box .logo > ul { display: flex; } @media screen and (max-width: 1024px) { .site-header .header-container .head-box .logo > ul { display: none; } } .site-header .header-container .head-box .logo > ul > li { margin: 0; position: relative; min-width: 130px; } @media screen and (min-width: 1600.5px) { .site-header .header-container .head-box .logo > ul > li { min-width: 165px; } } @media screen and (min-width: 1441px) and (max-width: 1600px) { .site-header .header-container .head-box .logo > ul > li { min-width: 130px; } } @media screen and (min-width: 1336px) and (max-width: 1440px) { .site-header .header-container .head-box .logo > ul > li { min-width: 110px; } } @media screen and (min-width: 1200px) and (max-width: 1335px) { .site-header .header-container .head-box .logo > ul > li { min-width: 90px; } } @media screen and (min-width: 1025px) and (max-width: 1199px) { .site-header .header-container .head-box .logo > ul > li { min-width: 70px; } } .site-header .header-container .head-box .logo > ul > li > a { padding: 0 15px; display: block; height: 85px; line-height: 85px; color: #fff; text-align: center; font-size: 14px; } @media screen and (min-width: 1440px) { .site-header .header-container .head-box .logo > ul > li > a { font-size: 18px; } } @media screen and (max-width: 1200px) { .site-header .header-container .head-box .logo > ul > li > a { font-size: 13px; height: 70px; padding: 0 7px; line-height: 70px; } } .site-header .header-container .head-box .logo > ul > li .more { display: none; } .site-header .header-container .head-box .logo > ul > li > ul { min-width: 165px; padding: 0; position: absolute; top: 100%; left: 50%; display: none; -ms-transform: translateX(-50%); transform: translateX(-50%); width: 100%; } .site-header .header-container .head-box .logo > ul > li > ul > li > a { display: block; text-align: center; width: 100%; line-height: 45px; color: #fff; margin: 0; font-size: 14px; border-bottom: 1px solid #000; background: #001d59; } html[lang="en-US"] .site-header .header-container .head-box .logo > ul > li > ul { min-width: 230px; } .site-header .header-container .head-box .logo > ul > li:hover > a { background: linear-gradient(#001d59, rgba(255, 255, 255, 0.2) 80%) no-repeat; } .site-header .header-container .head-box .logo > ul > li:hover > ul { display: block; } .site-header .header-container .head-box .logo > ul:lang(zh-CN) > li:nth-child(3) { min-width: 140px; } .site-header .header-container .head-box .logo > ul:lang(en-US) > li:nth-child(3) { min-width: 227px; } @media screen and (min-width: 1025px) and (max-width: 1199px) { .site-header .header-container .head-box .logo > ul:lang(en-US) > li:nth-child(3) { min-width: 160px; } } .site-header .header-container .head-box .logo > ul:lang(en-US) > li:nth-child(5) { min-width: 185px; } @media screen and (min-width: 1500px) and (max-width: 1600px) { .site-header .header-container .head-box .logo > ul:lang(en-US) > li:nth-child(5) { min-width: 165px; } } @media screen and (min-width: 1441px) and (max-width: 1499px) { .site-header .header-container .head-box .logo > ul:lang(en-US) > li:nth-child(5) { min-width: 140px; } } @media screen and (min-width: 1280px) and (max-width: 1440px) { .site-header .header-container .head-box .logo > ul:lang(en-US) > li:nth-child(5) { min-width: 110px; } } @media screen and (min-width: 1025px) and (max-width: 1279px) { .site-header .header-container .head-box .logo > ul:lang(en-US) > li:nth-child(5) { min-width: 80px; } } @media screen and (max-width: 1024px) { .site-header .header-container .head-box .menu { display: none; } } .site-header .header-container .head-box .menu .search-language-box { display: flex; align-items: center; } .site-header .header-container .head-box .menu .search-language-box .language-bar { margin-right: 10px; position: relative; } .site-header .header-container .head-box .menu .search-language-box .language-bar a { margin: 0 3px; color: #fff; } .site-header .header-container .head-box .menu .search-language-box .language-bar a.active { color: #eb6338; } .site-header .header-container .head-box .menu .search-language-box .language-bar .current-language a { display: block; padding: 6px; color: #fff; } @media screen and (max-width: 1400px) { .site-header .header-container .head-box .menu .search-language-box .language-bar .current-language a { padding: 5px; font-size: 14px; } } .site-header .header-container .head-box .menu .search-language-box .language-bar .current-language .none { display: none; } .site-header .header-container .head-box .menu .search-language-box .language-bar .current-language:hover { background-color: #f1f1f1; } .site-header .header-container .head-box .menu .search-language-box .language-bar .current-language:hover a { color: #001d59; } .site-header .header-container .head-box .menu .search-language-box .language-bar .lang-list { top: 100%; position: absolute; display: none; z-index: 3; width: 100%; left: 0; } .site-header .header-container .head-box .menu .search-language-box .language-bar .lang-list ul { box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.15); background: white; margin: 0; padding: 0; list-style: none; } .site-header .header-container .head-box .menu .search-language-box .language-bar .lang-list ul li.active { display: none; } .site-header .header-container .head-box .menu .search-language-box .language-bar .lang-list ul li a { display: block; padding: 5px; text-align: center; color: #001d59; } @media screen and (max-width: 1400px) { .site-header .header-container .head-box .menu .search-language-box .language-bar .lang-list ul li a { font-size: 14px; } } .site-header .header-container .head-box .menu .search-language-box .language-bar .lang-list ul li a:hover { background: #0d63b0; color: #fff; } .site-header .header-container .head-box .menu .search-language-box .language-bar:hover .lang-list { display: block; } .site-header .header-container .head-box .menu .search-language-box .search-box .search form { display: flex; align-items: center; } .site-header .header-container .head-box .menu .search-language-box .search-box .search form input { outline: none; } .site-header .header-container .head-box .menu .search-language-box .search-box .search form .text { padding: 0 10px; height: 30px; border-radius: 30px; border: none; } @media screen and (min-width: 1680.5px) { .site-header .header-container .head-box .menu .search-language-box .search-box .search form .text { width: 210px; } } @media screen and (min-width: 1600.5px) and (max-width: 1680px) { .site-header .header-container .head-box .menu .search-language-box .search-box .search form .text { width: 210px; } } @media screen and (min-width: 1440.5px) and (max-width: 1600px) { .site-header .header-container .head-box .menu .search-language-box .search-box .search form .text { width: 185px; } } @media screen and (min-width: 1280.5px) and (max-width: 1440px) { .site-header .header-container .head-box .menu .search-language-box .search-box .search form .text { width: 140px; } } @media screen and (max-width: 1280px) { .site-header .header-container .head-box .menu .search-language-box .search-box .search form .text { width: 105px; } } .site-header .header-container .head-box .menu .search-language-box .search-box .search form .search-icon { margin-left: 10px; background: #ffffff; height: 30px; border-radius: 99%; width: 30px; cursor: pointer; display: flex; justify-content: center; align-items: center; } .site-header .header-container .head-box .menu .search-language-box .search-box .search form .search-icon > img { width: 12px; height: 12px; object-fit: cover; } .site-header .header-container .head-box .nav-menu-box { margin-left: 15px; display: none; } @media screen and (max-width: 1024px) { .site-header .header-container .head-box .nav-menu-box { display: flex; align-items: center; } } .site-header .header-container .head-box .nav-menu-box .lang-mobile a { margin: 0 3px; color: #fff; } .site-header .header-container .head-box .nav-menu-box .lang-mobile a.active { color: #eb6338; } .site-header .header-container .head-box .nav-menu-box .nav-menu-button { margin-left: 15px; display: none; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; width: 40px; text-align: center; height: 40px; line-height: 40px; z-index: 10; cursor: pointer; -moz-transition: 0.3s; -o-transition: 0.3s; -webkit-transition: 0.3s; transition: 0.3s; position: relative; } @media screen and (max-width: 1024px) { .site-header .header-container .head-box .nav-menu-box .nav-menu-button { display: block; } } .site-header .header-container .head-box .nav-menu-box .nav-menu-button .bar { height: 2px; width: 20px; display: block; margin-left: 10px; background-color: #fff; position: absolute; -moz-transition: 0.3s; -o-transition: 0.3s; -webkit-transition: 0.3s; transition: 0.3s; } .site-header .header-container .head-box .nav-menu-box .nav-menu-button .bar:nth-of-type(1) { top: 14px; -moz-transition: top 0.3s ease 0.3s, -moz-transform 0.3s ease-out 0s; -o-transition: top 0.3s ease 0.3s, -o-transform 0.3s ease-out 0s; -webkit-transition: top 0.3s ease, -webkit-transform 0.3s ease-out; -webkit-transition-delay: 0.3s, 0s; transition: top 0.3s ease 0.3s, transform 0.3s ease-out 0s; } .site-header .header-container .head-box .nav-menu-box .nav-menu-button .bar:nth-of-type(2) { top: 20px; -moz-transition: ease 0.1s 0.2s; -o-transition: ease 0.1s 0.2s; -webkit-transition: ease 0.2s; -webkit-transition-delay: 0.2s; transition: ease 0.2s 0.2s; } .site-header .header-container .head-box .nav-menu-box .nav-menu-button .bar:nth-of-type(3) { top: 26px; -moz-transition: top 0.3s ease 0.3s, -moz-transform 0.3s ease-out 0s; -o-transition: top 0.3s ease 0.3s, -o-transform 0.3s ease-out 0s; -webkit-transition: top 0.3s ease, -webkit-transform 0.3s ease-out; -webkit-transition-delay: 0.3s, 0s; transition: top 0.3s ease 0.3s, transform 0.3s ease-out 0s; } .site-header .header-container .head-box .nav-menu-box .open-menu .bar:nth-of-type(1) { top: 20px; -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); -moz-transition: top 0.2s ease 0s, -moz-transform 0.2s ease-out 0.3s; -o-transition: top 0.2s ease 0s, -o-transform 0.2s ease-out 0.3s; -webkit-transition: top 0.2s ease, -webkit-transform 0.2s ease-out; -webkit-transition-delay: 0s, 0.3s; transition: top 0.2s ease 0s, transform 0.2s ease-out 0.3s; } .site-header .header-container .head-box .nav-menu-box .open-menu .bar:nth-of-type(2) { opacity: 0; } .site-header .header-container .head-box .nav-menu-box .open-menu .bar:nth-of-type(3) { top: 20px; -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -moz-transition: top 0.2s ease 0s, -moz-transform 0.2s ease-out 0.3s; -o-transition: top 0.2s ease 0s, -o-transform 0.2s ease-out 0.3s; -webkit-transition: top 0.2s ease, -webkit-transform 0.2s ease-out; -webkit-transition-delay: 0s, 0.3s; transition: top 0.2s ease 0s, transform 0.2s ease-out 0.3s; }