/* 头部 */ body, html { padding: 0; margin: 0; font-family: Microsoft YaHei; /* font-size: 16px; */ /* color: #ffffff; */ background: white; max-width: 100vw; overflow-x: hidden; } a { /* color: white; */ } a:hover { /* color: #c22525; */ text-decoration: unset; } .flex { display: flex; align-items: center; } .flex-between { display: flex; justify-content: space-between; } .flex-between-center { display: flex; justify-content: space-between; align-items: center; } .whiteTop { background: #ffffff; height: 32px; font-size: 14px; color: #727273; } .padding { /* padding: 0 14.5833vw; */ width: 1360px; margin: 0 auto; } .icon1 { width: 16px; height: 16px; background: url("../assets/english.png") no-repeat; background-size: 100% 100%; } .icon2 { width: 17px; height: 13px; background: url("../assets/email.png") no-repeat; background-size: 100% 100%; margin-left: 1.8125rem; } .icon3 { width: 13px; height: 15px; background: url("../assets/user.png") no-repeat; background-size: 100% 100%; margin-left: 1.8125rem; } .whiteTop .text { margin-left: 0.5rem; cursor: pointer; color: #727273; } .blueNav { background: #2d4462; height: 210px; } .blueNavTop { height: 135px; } .logo { width: 452px; height: 91px; background: url("../assets/logo.png") no-repeat; background-size: 100% 100%; cursor: pointer; } .searchInput { width: 300px; height: 46px; background: #ffffff; border-radius: 4px; padding: 0 42px 0 26px; } .searchInput:focus-visible { outline: 0; } .searchArea { position: relative; } .searchIcon { width: 20px; height: 20px; background: url("../assets/search.png") no-repeat; background-size: 100% 100%; cursor: pointer; position: absolute; right: 16px; top: 50%; transform: translate(0, -50%); } .blueNavBottom { margin: 0 auto; background: white; height: 66px; display: flex; width: 1424px; } .blueNavBottom .navLeft { width: 36px; height: 100%; background: url("../assets/navLeft.png") no-repeat; background-size: 100% 100%; } .blueNavBottom .navRight { width: 36px; height: 100%; background: url("../assets/navRight.png") no-repeat; background-size: 100% 100%; } .navArea { flex: 1; color: #2d4462; display: flex; align-items: center; padding: 0 2.4375rem; justify-content: space-between; } .nav { line-height: 66px; } .nav a { font-size: 18px; font-weight: bold; color: #2d4462; position: relative; } .nav a:hover { color: #b33048 !important; } .nav a::after { border: 0; } .nav .navActive::after { border: 0; position: absolute; bottom: -15px; left: 0; width: 100%; height: 5px; background: url("../assets/navBorder.png") no-repeat; margin-left: 0; } @keyframes example { from { /* transform: scale(0); opacity: 0; */ max-height: 0; transition: all .2s ease-in; } to { /* opacity: 1; */ max-height: 1000px; /* transform: scale(1); */ } } .dropdown-menu { /* animation-name: example; animation-duration: 1s; width: 224px; background: #2d4462 !important; border-radius: 0; padding: 5px; */ /* left: -50% !important; top: 19px !important; */ /* padding-top: 10px !important; overflow: hidden; */ /* transition:max-height 0.8s ; overflow: hidden; max-height: 0; */ } /* .nav:hover .dropdown-menu{ max-height:300px; transition:max-height 0.8s ; } */ .dropdown-menu :hover { font-size: 16px; font-weight: 400; color: #2d4462 !important; background: #fff; } .dropdown-menu a { color: white !important; font-weight: 400; font-size: 16px; width: 214px; height: 42px; display: flex; /* justify-content: space-between; */ align-items: center; /* padding: 0 68px 0 38px; */ } .dropdown-menu a ~ a { margin-top: 5px; } .dropdown-toggle { outline: 0; } .navIcon { border-top: 0.4em solid transparent; border-right: 0; border-bottom: 0.4em solid transparent; border-left: 0.4em solid; margin-left: 38px; margin-right: 38px; } /* 底部 */ .footer-main-size ~ .footer-main-size { margin-top: 5px; } .qrText { margin-top: 5px; font-size: 12px; } .mid { font-size: 17px; color: #fff; text-align: left; margin-left: 20px; } .foot { display: flex; align-items: flex-start; } .friendLink { background: url("./image/footer/nameBg.png") no-repeat; background-size: 100% 100%; position: absolute; left: 30px; top: 5px; transform: translate(-25%, -25%); line-height: 80px; width: 150px; font-size: 18px; color: white; } .friendLink span { margin-left: -10px; } .footer-main { background: url("../assets/bottom.png") no-repeat; background-size: 100% 100%; height: 264px; position: relative; line-height: 35px; display: flex; align-items: center; justify-content: center; } .footer-main-nav > a { display: block; padding: 0 60px; color: #ffffff; border-radius: 25px; margin: 5px 20px; } .footer-main-nav > a:hover { background: #374e70; cursor: pointer; } .returnTop { width: 49px; line-height: 49px; /* background:#b33048; */ /* #374e70; */ display: flex; align-items: center; justify-content: center; position: fixed; right: 5%; bottom: 120px; border-radius: 5px; cursor: pointer; z-index: 99; text-align: center; height: 49px; } .returnTop img { position: relative; top: -2px; } .footer-main-qrcode > img { height: 98px; width: 98px; } .footer-main-logo { /* align-self: center; */ margin-right: 186px; width: 450px; } .footer-main-qrcode { font-size: 16px; color: #ffffff; position: relative; } .QRcodeBG { position: absolute; bottom: 0; left: -28%; width: 28%; height: 40px; border-bottom-left-radius: 25px; background: #081a40; } /* 链接 */ .linkTitle { font-size: 18px; font-weight: bold; color: #2d4462; margin-right: 36px; white-space: nowrap; } .link { font-size: 18px; font-family: Microsoft YaHei; font-weight: 400; color: #333333; white-space: nowrap; } .link:hover { text-decoration: underline; } .link ~ .link { margin-left: 46px; } .bottomTop { background: #f4f4f4; height: 50px; } .bottomArea { height: 264px; background: url("../assets/bottom.png") no-repeat; background-size: 100% 100%; } .bottomIcon1 { width: 17px; height: 17px; background: url("../assets/bottomIcon1.png") no-repeat; background-size: 100% 100%; margin-right: 8px; } .bottomIcon2 { width: 18px; height: 16px; background: url("../assets/bottomIcon2.png") no-repeat; background-size: 100% 100%; margin-left: 65px; margin-right: 8px; } /*当屏幕尺寸大于1200px时,应用下面的CSS样式*/ @media screen and (min-width: 1200px) { .footer-main-nav { width: 100%; display: flex; align-items: center; justify-content: center; padding-left: 150px; position: absolute; top: -20px; background: #081a40; border-radius: 25px; width: 1300px; left: 50%; transform: translate(-50%); box-sizing: border-box; } } /*当屏幕尺寸小于1200px时,应用下面的CSS样式*/ @media screen and (max-width: 1200px) { .qrArea { margin-left: 0; } .footer-main-qrcode > img { height: calc(233px / 2); width: calc(233px / 2); margin-top: calc(75px / 2); } .returnTop { right: 20px; bottom: 40px; width: 40px; line-height: 40px; height: 40px; border-radius: 50%; } .returnTop img { width: calc(15px); height: calc(8px); top: -2px; } .footer-main { padding-top: 20px; padding-bottom: 0px; height: calc(800px / 2); background: #06224e; align-items: flex-start; } .friendLink span { margin-left: 0; } .friendLink { height: calc(80px / 2); width: 100px !important; left: 40px; top: -20px; text-align: center; font-size: 12px; display: flex !important; align-items: center; justify-content: center; } .footer-main-nav > a { font-size: 12px; padding: 0; margin: 2.5px 10px; } .footer-main-qrcode > div > img { height: calc(7px / 2); width: calc(13px / 2); } .qrText { } .QRcodeBG { height: 20px !important; } .qrArea { padding: 25px 25px 10px !important; top: 0 !important; } .footer-main-logo > img { width: 90%; } .mid { margin-top: 30px; margin-left: 0; line-height: 25px; font-size: 17px; color: #fff; text-align: center; } .foot { flex-direction: column; } .footer-main-nav { width: 90%; text-align: left; padding: 0 10px; display: flex; flex-wrap: wrap; box-sizing: border-box; margin: 0 auto; } .footer-main-nav > div { text-align: center; font-size: 12px; font-weight: 400; color: #ffffff; cursor: pointer; display: inline-block; margin-top: 10px; } .footer-main-nav > div:nth-child(1) { width: 100%; text-align: left; } } /*当屏幕尺寸大于1200px时,应用下面的CSS样式*/ @media screen and (min-width: 1200px) { .footer-main-nav { width: 100%; display: flex; align-items: center; justify-content: center; padding-left: 150px; position: absolute; top: -20px; background: #081a40; border-radius: 25px; width: 1300px; left: 50%; transform: translate(-50%); box-sizing: border-box; } } /*当屏幕尺寸小于1200px时,应用下面的CSS样式*/ @media screen and (max-width: 1200px) { .qrArea { margin-left: 0; } .footer-main-qrcode > img { height: calc(233px / 2); width: calc(233px / 2); margin-top: calc(75px / 2); } .returnTop { right: 20px; bottom: 40px; width: 40px; line-height: 40px; height: 40px; border-radius: 50%; } .returnTop img { width: calc(15px); height: calc(8px); top: -2px; } .footer-main { padding-top: 20px; padding-bottom: 0px; height: calc(800px / 2); background: #06224e; align-items: flex-start; } .friendLink span { margin-left: 0; } .friendLink { height: calc(80px / 2); width: 100px !important; left: 40px; top: -20px; text-align: center; font-size: 12px; display: flex !important; align-items: center; justify-content: center; } .footer-main-nav > a { font-size: 12px; padding: 0; margin: 2.5px 10px; } .footer-main-qrcode > div > img { height: calc(7px / 2); width: calc(13px / 2); } .qrText { } .QRcodeBG { height: 20px !important; } .qrArea { padding: 25px 25px 10px !important; top: 0 !important; } .footer-main-logo > img { width: 90%; } .mid { margin-top: 30px; margin-left: 0; line-height: 25px; font-size: 13px; font-family: Microsoft YaHei; font-weight: 400; color: #fefefe; text-align: center; } .foot { flex-direction: column; } .footer-main-nav { width: 90%; text-align: left; padding: 0 10px; display: flex; flex-wrap: wrap; box-sizing: border-box; margin: 0 auto; } .footer-main-nav > div { text-align: center; font-size: 12px; font-weight: 400; color: #ffffff; cursor: pointer; display: inline-block; margin-top: 10px; } .footer-main-nav > div:nth-child(1) { width: 100%; text-align: left; } }