/* body { height: 5000px; background: lightseagreen; } */ body { color: #333333; font-family: "Microsoft YaHei", Montserrat, Arial, tahoma, 'Hiragino Sans GB', sans-serif; font-weight: 400; padding: 0; } .iconfont-symbol { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } #header .iconfont-symbol { flex-shrink: 0; margin-right: 6px; width: 1.5rem; height: 1.5rem; vertical-align: middle; fill: currentColor; overflow: hidden; } #header { position: fixed; top: 0; z-index: 100; left: 0; right: 0; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; } #header a strong, #header .header-brands strong { font-weight: normal; } #header .first-menu-li, #header .second-menu-li, #header .third-menu-li, #header .third-menu-li li, #header .advertising-box { list-style: none; } #header a:hover, #header a:focus, #header a:visited { text-decoration: none !important; } #header ul { padding-left: 0; margin-bottom: 0; } .scroll-header { background: #27293b !important; } /* .scroll-header .header-search { height: 80px; } */ #header .relative { position: relative; } #header .absolute { position: absolute; } #header .title-tip { top: 0; right: 0; transform: translate(100%, 0); } #header .font-12 { font-size: 12px; } #header .header-menu { /* width: 100%; */ /* margin: 0 auto; */ display: flex; justify-content: space-between; } #header .menu-nav { display: flex; margin-bottom: 0; position: relative; z-index: 99999; } .forbid-scroll { height: 100vh; overflow: hidden; } #header .first-menu-li { padding-right: 10px; } #header .db { display: block; } #header .dn { display: none; } #header .force-dn { display: none !important; width: 0; } #header .h-60 { height: 60px; } #header .mobile-menu-arrow { display: none; } #header .text-red { color: #f00; font-size: 12px; font-style: italic; } #header .first-menu-link { display: flex; align-items: center; justify-content: center; height: 100%; padding: 0 10px; color: #c3c8cb; font-family: "Microsoft YaHei", Montserrat, Arial, tahoma, 'Hiragino Sans GB', sans-serif; text-align: center; font-size: 16px; white-space: nowrap; letter-spacing: 1px; } #header .first-menu-link:hover, #header .first-menu-link-activated { color: #05fae7; } #header .second-third-menu { /* display: flex; */ position: absolute; margin: 0 auto; left: 0; right: 0; top: 100%; z-index: 99999; width: 1610px; /* background-color: pink; */ align-items: center; justify-content: center; display: none; } #header .second-third-menu-container { display: flex; background-color: #fff; border-radius: 2px; box-shadow: 0 2px 8px #e2e2e2; transform: translate(100px, 0); } #header .second-menu { padding: 1.375rem 0; } #header .flex { display: flex; } #header .second-menu-link { display: flex; align-items: center; justify-content: space-between; position: relative; padding: 10px 20px; line-height: 17px; font-family: "Microsoft YaHei", Montserrat, Arial, tahoma, 'Hiragino Sans GB', sans-serif; color: #333; font-size: 14px; } #header .second-menu-link div{ display: flex; align-items: center; } #header .second-menu-link-activated, #header .second-menu-link:hover { background: #f4f8fd; color: #1d73dd; } #header .second-menu-arrow { flex-shrink: 0; position: absolute; right: 100px; color: #1d73dd; transition: all 0.2s ease 0s; opacity: 0; top: 50%; transform: translate(0, -50%); } #header .second-menu-link-activated .second-menu-arrow, #header .second-menu-arrow-toggle { opacity: 1; right: 12px; } #header .third-menu { /* display: none; */ flex: 1; background: #f4f8fd; padding: 1.375rem 1.875rem; } #header .third-menu-li { display: none; } #header .third-menu-link { display: inline-block; position: relative; margin-bottom: 10px; width: 100%; line-height: 26px; font-size: 14px; color: #333; font-family: "Microsoft YaHei", Montserrat, Arial, tahoma, 'Hiragino Sans GB', sans-serif; } #header .third-menu-link:hover { color: #1d73dd; } #header .advertising { /* display: none; */ display: flex; justify-content: center; align-items: flex-start; padding: 1.375rem 1.875rem; } #header .advertising-link { display: flex; flex-direction: column; align-items: center; } #header .advertising img { /* width: 15.5rem; */ height: 6.75rem; } #header .advertising span { font-family: "Microsoft YaHei", Montserrat, Arial, tahoma, 'Hiragino Sans GB', sans-serif; color: #333; /* text-decoration: underline; */ word-break: break-word; font-size: 14px; line-height: 26px; margin-top: 10px; width: 225px; cursor: pointer; } #header .shortcut { display: flex; justify-content: space-between; align-items: center; position: relative; /* width:200px; */ /* width:10.417vw; */ } #header .shortcut .shortcut-button { display: inline-block; height: 36px; line-height: 36px; background-color: #fff; padding: 0 20px; font-family: "Microsoft YaHei", Montserrat, Arial, tahoma, 'Hiragino Sans GB', sans-serif; color: #333; font-size: 16px; /* width: 140px ; */ text-align: center; white-space: nowrap; cursor: pointer; } #header .shortcut-button:hover { background: #05fae7; } #header .shortcut .shopping-cart { position: relative; width: 36px; margin-left: 20px; font-size: 36px; color: #fff; cursor: pointer; margin-right: 11px; } #header .shortcut .cart-number { position: absolute; top: 0; right: 0; transform: translate(50%, -50%); width: 22px; height: 22px; line-height: 22px; background: #f00; border-radius: 100%; font-size: 12px; color: #fff; text-align: center; font-family: "Microsoft YaHei", Montserrat, Arial, tahoma, 'Hiragino Sans GB', sans-serif; } #header .header-search { display: flex; align-items: center; justify-content: space-between; } #header .logo { width: 150px; height: 50px; font-size: 0; margin-top: 10px; margin-left: 10px; margin-right: 50px; } #header .logo-position { background-position: 0 -72px; } #header .header-search .search-store { height: 40px; border: 1px solid #c3c8cb; position: relative; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; flex: 1; margin: 0 80px; } #header .search-store input { flex: 1; margin-right: 20px; background: transparent; color: #fff; font-family: "Microsoft YaHei", Montserrat, Arial, tahoma, 'Hiragino Sans GB', sans-serif; line-height: 20px; background: none; outline: none; border: none; } #header .search-store input::-webkit-input-placeholder { /* Edge */ color: #c3c8cb; } #header .search-store input:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #c3c8cb; } #header .search-store input::placeholder { color: #c3c8cb; } #header .search-store .iconfont { font-size: 24px; color: #c3c8cb; padding: 0; border: none; background-color: transparent; outline: none; } #header .search-store .iconfont:hover { color: #fff; } #header .shortcut { display: flex; align-items: center; justify-content: space-between; } #header .web-shortcut { display: flex; justify-content: space-between; z-index: 999999; } #header .brands-nav { z-index: 999999; } #header .web-shortcut li, #header .web-shortcut-menu, #header .web-shortcut li strong { font-size: 14px; color: #c3c8cb !important; font-family: "Microsoft YaHei", Montserrat, Arial, tahoma, 'Hiragino Sans GB', sans-serif; margin-right: 0; white-space: nowrap; } #header .web-shortcut li { margin-right: 30px; word-break: break-word; line-height: 24px; display: flex; align-items: center; } #header .web-shortcut li:last-child { margin-right: 0; } #header .web-shortcut .iconfont { margin-right: 4px; font-size: 22px; } #header .header-brands { position: relative; cursor: pointer; } #header .brands-nav { display: flex; flex-direction: column; padding: 22px; background: #fff; position: absolute; top: 100%; left: 0; width: 200px; border-radius: 2px; z-index: 99999; display: none; } #header .brands-nav li, #header .brands-nav li a { font-family: "Microsoft YaHei", Montserrat, Arial, tahoma, 'Hiragino Sans GB', sans-serif; width: 100%; white-space: nowrap; } #header .brands-nav li:hover a, #header .brands-nav li:hover span { color: #1d73dd !important; } #header .brands-nav .iconfont { font-size: 14px; } #header .brands-nav a, #header .brands-nav span { color: #333; width: 100%; display: inline-block; } #header .brands-nav li:hover { background: #f4f8fd; } /*footer*/ #footer.footer { font-family: "Microsoft YaHei", Montserrat, Arial, tahoma, 'Hiragino Sans GB', sans-serif; } #footer.footer .container { width: 100%; max-width: 1440px; padding: 0 15px; margin: 0 auto; } #footer .footer-top-area { background: #27293b; } #footer .footer-top-box { position: relative; width: 100%; display: flex; justify-content: space-between; } #footer .footer-top-item { padding: 15px; font-size: 18px; opacity: 0.7; color: #ffffff; text-align: center; } #footer .footer-top-item .iconfont { font-size: 60px; line-height: 1em; } #footer .footer-top-item:hover { color: #ffffff; text-decoration: none; opacity: 1; } #footer .footer-top-item p { color: #ffffff; margin-bottom: 0; } #footer .footer-top-item img { margin-bottom: 10px; } #footer .footer-main-area { position: relative; background: #000001 url(/gsimages/index/footer-bg.png) 100% 100%; } #footer .footer-main-box { position: relative; display: flex; padding-top: 60px; flex-flow: wrap; padding-bottom: 30px; } #footer .footer-main-earth { position: relative; width: 360px; text-align: center; } #footer .footer-main-earth video { position: absolute; top: 44%; transform: translateY(-50%); } #footer .footer-main-region { position: relative; display: flex; flex-flow: wrap; flex: 1; } #footer .footer-region-item { position: relative; width: 16%; margin-bottom: 20px; margin-right: 5%; } #footer .footer-region-item:nth-child(5n) { margin-right: 0; } #footer .region-top { position: relative; width: 100%; color: #b7b7b7; margin-bottom: 10px; font-size: 18px; } #footer .region-top img { width: 40px; vertical-align: middle; margin-right: 12px; } #footer .region-address { font-size: 14px; color: #B7B7B7; } #footer .footer-region-item>div:hover .region-top, #footer .footer-region-item>div:hover .region-address { color: #FFFFFF; } #footer .footer-region-item-company-pc { display: flex; margin-right: 0; justify-content: space-between; } #footer .footer-region-item-company-mobile { display: none; } #footer .footer-main-company { position: relative; text-align: left; margin-right: 20px; } #footer .footer-main-company h4 { color: #B7B7B7; font-size: 22px; } #footer .footer-main-company ul { padding-left: 0; list-style: none; } #footer .footer-main-company ul li a { color: #B7B7B7; font-size: 14px; line-height: 28px; } #footer .footer-main-company ul li a:hover { color: #FFFFFF; text-decoration: none; } #footer .footer-bottom-area { position: relative; background: #333333; padding: 10px 0; } #footer .footer-bottom-box { position: relative; width: 100%; display: flex; flex-flow: wrap; } #footer .footer-bottom-sub-company { position: relative; text-align: left; padding: 12px 0; } #footer .footer-bottom-sub-company a { margin-right: 30px; display: inline-block; margin-top: 2px; margin-bottom: 2px; } #footer .footer-bottom-social { position: relative; flex: 1; text-align: right; } #footer .footer-bottom-social p { margin-bottom: 5px; padding-top: 5px; } #footer .footer-bottom-social p:nth-child(1)>a { margin-left: 10px; } #footer .footer-bottom-social .down-links { position: relative; font-size: 12px; color: rgba(255, 255, 255, 0.7); list-style: none; margin-bottom: 0; } #footer .footer-bottom-social .down-links li { display: inline-block; line-height: 1.2em; } #footer .footer-bottom-social .down-links li a { color: rgba(255, 255, 255, 0.7); } /* back to top */ #scrollUp { right: 58px; bottom: 126px; width: 42px; height: 42px; color: #fff; text-align: center; line-height: 40px; border-radius: 50%; z-index: 99; font-size: 22px; cursor: pointer; background-color: #1D73DD; } #scrollUp:hover { background-color: #004b95; } /* ui-widget */ .ui-widget { font-family: "Microsoft YaHei", Montserrat, Arial, tahoma, 'Hiragino Sans GB', sans-serif; } @media only screen and (max-width: 1536px) { #footer.footer .container { width: 100%; max-width: 1230px; padding: 0 15px; margin: 0 auto; } /*footer*/ #footer .region-top { font-size: 14px; } #footer .region-address { font-size: 12px; } } @media only screen and (max-width: 1280px) { #footer.footer .container { width: 100%; max-width: 1130px; padding: 0 15px; margin: 0 auto; } /* footer */ #footer .footer-main-earth { width: 250px; } } /* MD Device :768px */ @media only screen and (max-width: 1200px) { #footer.footer .container { width: 100%; max-width: 992px; padding: 0 15px; margin: 0 auto; } } @media only screen and (max-width: 991px) { /*footer*/ #footer .footer-main-earth { display: none; } #footer .footer-main-region { width: 100%; flex: none; } #footer .footer-main-company { width: 100%; position: relative; text-align: left; } #footer .footer-bottom-sub-company { width: 100%; } #footer .footer-bottom-sub-social { flex: none; width: 100%; } } @media only screen and (max-width: 767px) { /*footer*/ #footer .footer-top-item { padding: 20px 10px; } #footer .footer-top-item .iconfont { font-size: 40px; } #footer .footer-top-item p { display: none; } #footer .footer-main-box { padding-top: 30px; } #footer .footer-region-item { width: 45%; padding-right: 0px; margin-right:0px; } #footer .footer-region-item-company-pc { display: none; } #footer .footer-region-item-company-mobile { display: block; } #footer .footer-main-company:first-child { margin-bottom: 30px; } } @media only screen and (max-width: 576px) { .navbar-brand { margin: 0 auto; } } /* 鏃堕棿鎺т欢 start */ .commondate input { float: left; width: 140px; } .commondate p { float: left; margin: 10px; } .commondate-date { float: left; position: relative; } .commondate-date i { font-size: 24px; position: absolute; right: 5px; top: 5px; color: #666666; } /* 鏃堕棿鎺т欢 end */