|
@@ -1,305 +1,308 @@
|
|
|
-a {
|
|
|
- cursor: pointer;
|
|
|
-}
|
|
|
-
|
|
|
-#wrap-nav {
|
|
|
- background: #fff;
|
|
|
- z-index: 6000;
|
|
|
- position: fixed;
|
|
|
- font-size: 40px;
|
|
|
- height: 1.85em;
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- border-bottom: 1px solid #ccc;
|
|
|
-}
|
|
|
-
|
|
|
-.nav-left {
|
|
|
- margin-left: 110px;
|
|
|
- width: 5.0em;
|
|
|
- height: 1.4em;
|
|
|
-}
|
|
|
-
|
|
|
-.logo {
|
|
|
- height: 100%;
|
|
|
- width: auto;
|
|
|
- cursor: pointer;
|
|
|
-}
|
|
|
-
|
|
|
-.nav-right {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin-right: 3.45em;
|
|
|
- height: 100%;
|
|
|
-}
|
|
|
-
|
|
|
-.nav {
|
|
|
- display: flex;
|
|
|
- height: 100%;
|
|
|
-}
|
|
|
-
|
|
|
-.nav > div {
|
|
|
- width: 3.775em;
|
|
|
- display: flex;
|
|
|
- position: relative;
|
|
|
- height: 100%;
|
|
|
- height: 100%;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- cursor: pointer;
|
|
|
-}
|
|
|
-
|
|
|
-.toggle-language {
|
|
|
- margin-left: 0.75em;
|
|
|
- height: 100%;
|
|
|
-}
|
|
|
-.toggle-language a {
|
|
|
- position: relative;
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- font-size: 0.4em;
|
|
|
-}
|
|
|
-
|
|
|
-.toggle-language a img{
|
|
|
- margin-left: 6px;
|
|
|
- width: 14px;
|
|
|
- height: 14px;
|
|
|
- transform: rotate(180deg);
|
|
|
- transition: all 0.3 ease;
|
|
|
-}
|
|
|
- .toggle-language a .lang-subMenu{
|
|
|
- top: 1.9em;
|
|
|
- left: -0.9em;
|
|
|
- position: absolute;
|
|
|
- font-size: 2.5em;
|
|
|
- z-index: 5;
|
|
|
- height: 0;
|
|
|
- -webkit-transition: 0.5s height cubic-bezier(0.73, 0.32, 0.34, 1.5);
|
|
|
- transition: 0.5s height cubic-bezier(0.73, 0.32, 0.34, 1.5);
|
|
|
- overflow: hidden;
|
|
|
-}
|
|
|
-.toggle-language a .lang-subMenu > li >span {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- padding: 15px 0;
|
|
|
- font-size: 0.4em;
|
|
|
- color: #fff;
|
|
|
- text-align: center;
|
|
|
-}
|
|
|
-
|
|
|
-.toggle-language:hover a .lang-subMenu{
|
|
|
- height: 5.125em;
|
|
|
-}
|
|
|
-.toggle-language:hover a img{
|
|
|
- transform: rotate(0);
|
|
|
- transition: all 0.3 ease;
|
|
|
-}
|
|
|
-
|
|
|
-.toggle-txt{
|
|
|
- color: #565656;
|
|
|
- width: 100%;
|
|
|
- font-weight: bold;
|
|
|
-}
|
|
|
-
|
|
|
-.nav span {
|
|
|
- margin: auto;
|
|
|
- display: inline-block;
|
|
|
- position: absolute;
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- width: 0px;
|
|
|
- height: 0.125em;
|
|
|
- background: red;
|
|
|
- transition: .5s;
|
|
|
- border-radius: 1.25em;
|
|
|
-}
|
|
|
-
|
|
|
-.nav .nav_active > span {
|
|
|
- width: 60%;
|
|
|
- left: 0;
|
|
|
-}
|
|
|
-
|
|
|
-.toggle-language {
|
|
|
- display: inline-block;
|
|
|
-}
|
|
|
-
|
|
|
-.nav-subItem {
|
|
|
- position: relative;
|
|
|
- font-size: 0.4em;
|
|
|
- color: #565656;
|
|
|
- width: 100%;
|
|
|
- font-weight: bold;
|
|
|
-}
|
|
|
-
|
|
|
-.nav-subItem:after {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- width: 2px;
|
|
|
- height: 90%;
|
|
|
- right: 0;
|
|
|
- background: #ccc;
|
|
|
- transform: skewX(-10deg);
|
|
|
-}
|
|
|
-
|
|
|
-.nav-subMenu {
|
|
|
- position: absolute;
|
|
|
- font-size: 2.5em;
|
|
|
- top: 1.12em;
|
|
|
- z-index: 5;
|
|
|
- height: 5.125em;
|
|
|
- transition: 0.5s height cubic-bezier(0.73, 0.32, 0.34, 1.5);
|
|
|
- overflow: hidden;
|
|
|
-}
|
|
|
-
|
|
|
-.nav-subMenu > li,.toggle-language a .lang-subMenu > li {
|
|
|
- position: relative;
|
|
|
- width: 3.775em;
|
|
|
- height: 1.15em;
|
|
|
- background: transparent;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- margin-top: 0.125em;
|
|
|
- white-space: nowrap;
|
|
|
- background: rgba(0, 0, 0, 0.3);
|
|
|
- transition: 0.5s margin-top cubic-bezier(0.73, 0.32, 0.34, 1.5);
|
|
|
-}
|
|
|
-
|
|
|
-.nav-subMenu > li> span {
|
|
|
- position: absolute;
|
|
|
- width: 2px;
|
|
|
- height: 0;
|
|
|
- top: 0;
|
|
|
- left: -98.5%;
|
|
|
- background: red;
|
|
|
- content: '';
|
|
|
- transition: .5s;
|
|
|
-}
|
|
|
-
|
|
|
-.nav-subMenu li a {
|
|
|
- width: 100%;
|
|
|
- /* height: 100%; */
|
|
|
- line-height: 1.4;
|
|
|
- padding: 15px 0;
|
|
|
- font-size: 0.4em;
|
|
|
- color: #fff;
|
|
|
- text-align: center;
|
|
|
-}
|
|
|
-
|
|
|
-.nav > div:not(:hover) .nav-subMenu {
|
|
|
- height: 0;
|
|
|
- transition: 0.5s 0.1s height;
|
|
|
-}
|
|
|
-
|
|
|
-.nav > div:not(:hover) .nav-subMenu > li {
|
|
|
- transition: 0.5s 0.1s margin-top;
|
|
|
- margin-top: -0.125em;
|
|
|
-}
|
|
|
-
|
|
|
-.li_active > span {
|
|
|
- height: 100% !important;
|
|
|
-}
|
|
|
-
|
|
|
-/*设备兼容*/
|
|
|
-
|
|
|
-@media screen and (min-width: 1755px) and (max-width: 1805px) {
|
|
|
- #wrap-nav {
|
|
|
- font-size: 39px;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-@media screen and (min-width: 1705px) and (max-width: 1755px) {
|
|
|
- #wrap-nav {
|
|
|
- font-size: 38px;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-@media screen and (min-width: 1655px) and (max-width: 1705px) {
|
|
|
- #wrap-nav {
|
|
|
- font-size: 38px;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-@media screen and (min-width: 1605px) and (max-width: 1655px) {
|
|
|
- #wrap-nav {
|
|
|
- font-size: 37px;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-@media screen and (min-width: 1555px) and (max-width: 1605px) {
|
|
|
- #wrap-nav {
|
|
|
- font-size: 36px;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-@media screen and (min-width: 1505px) and (max-width: 1555px) {
|
|
|
- #wrap-nav {
|
|
|
- font-size: 35px;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-@media screen and (min-width: 1455px) and (max-width: 1505px) {
|
|
|
- #wrap-nav {
|
|
|
- font-size: 34px;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-@media screen and (min-width: 1405px) and (max-width: 1455px) {
|
|
|
- #wrap-nav {
|
|
|
- font-size: 34px;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-@media screen and (min-width: 1355px) and (max-width: 1405px) {
|
|
|
- #wrap-nav {
|
|
|
- font-size: 34px;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-@media screen and (min-width: 1305px) and (max-width: 1355px) {
|
|
|
- #wrap-nav {
|
|
|
- font-size: 34px;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-@media screen and (min-width: 1255px) and (max-width: 1305px) {
|
|
|
- #wrap-nav {
|
|
|
- font-size: 34px;
|
|
|
- }
|
|
|
-
|
|
|
-}
|
|
|
-
|
|
|
-@media screen and (max-width: 1305px) {
|
|
|
- #wrap-nav {
|
|
|
- font-size: 34px;
|
|
|
- }
|
|
|
-}
|
|
|
-@media screen and (max-width: 1220px) {
|
|
|
- #wrap-nav {
|
|
|
- font-size: 29px;
|
|
|
- }
|
|
|
- .nav > div{
|
|
|
- width: 4.2em!important;
|
|
|
- }
|
|
|
- .toggle-txt{
|
|
|
- width: 50px;
|
|
|
- }
|
|
|
- .nav-left{
|
|
|
- margin-left:30px;
|
|
|
- }
|
|
|
- .nav-right{
|
|
|
- margin-right:30px
|
|
|
- }
|
|
|
- .toggle-language a .lang-subMenu > li{
|
|
|
- height: auto;
|
|
|
- }
|
|
|
-
|
|
|
-}
|
|
|
-
|
|
|
-@media screen and (max-width: 1024px) {
|
|
|
-
|
|
|
-}
|
|
|
+a {
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+#wrap-nav {
|
|
|
+ background: #fff;
|
|
|
+ z-index: 6000;
|
|
|
+ position: fixed;
|
|
|
+ font-size: 40px;
|
|
|
+ height: 1.85em;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ border-bottom: 1px solid #ccc;
|
|
|
+}
|
|
|
+
|
|
|
+.nav-left {
|
|
|
+ margin-left: 110px;
|
|
|
+ width: 5.0em;
|
|
|
+ height: 1.4em;
|
|
|
+}
|
|
|
+
|
|
|
+.logo {
|
|
|
+ height: 100%;
|
|
|
+ width: auto;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.nav-right {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-right: 3.45em;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.nav {
|
|
|
+ display: flex;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.nav > div {
|
|
|
+ width: 3.775em;
|
|
|
+ display: flex;
|
|
|
+ position: relative;
|
|
|
+ height: 100%;
|
|
|
+ height: 100%;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.toggle-language {
|
|
|
+ margin-left: 0.75em;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+.toggle-language a {
|
|
|
+ position: relative;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 0.4em;
|
|
|
+}
|
|
|
+
|
|
|
+.toggle-language a img{
|
|
|
+ margin-left: 6px;
|
|
|
+ width: 14px;
|
|
|
+ height: 14px;
|
|
|
+ transform: rotate(180deg);
|
|
|
+ transition: all 0.3 ease;
|
|
|
+}
|
|
|
+ .toggle-language a .lang-subMenu{
|
|
|
+ top: 1.9em;
|
|
|
+ left: -0.9em;
|
|
|
+ position: absolute;
|
|
|
+ font-size: 2.5em;
|
|
|
+ z-index: 5;
|
|
|
+ height: 0;
|
|
|
+ -webkit-transition: 0.5s height cubic-bezier(0.73, 0.32, 0.34, 1.5);
|
|
|
+ transition: 0.5s height cubic-bezier(0.73, 0.32, 0.34, 1.5);
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+.toggle-language a .lang-subMenu > li >span {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ padding: 15px 0;
|
|
|
+ font-size: 0.4em;
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.toggle-language:hover a .lang-subMenu{
|
|
|
+ height: 5.125em;
|
|
|
+}
|
|
|
+.toggle-language:hover a img{
|
|
|
+ transform: rotate(0);
|
|
|
+ transition: all 0.3 ease;
|
|
|
+}
|
|
|
+
|
|
|
+.toggle-txt{
|
|
|
+ color: #565656;
|
|
|
+ width: 100%;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
+.nav span {
|
|
|
+ margin: auto;
|
|
|
+ display: inline-block;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ width: 0px;
|
|
|
+ height: 0.125em;
|
|
|
+ background: red;
|
|
|
+ transition: .5s;
|
|
|
+ border-radius: 1.25em;
|
|
|
+}
|
|
|
+
|
|
|
+.nav .nav_active > span {
|
|
|
+ width: 60%;
|
|
|
+ left: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.toggle-language {
|
|
|
+ display: inline-block;
|
|
|
+}
|
|
|
+
|
|
|
+.nav-subItem {
|
|
|
+ position: relative;
|
|
|
+ font-size: 0.4em;
|
|
|
+ color: #565656;
|
|
|
+ width: 100%;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
+.nav-subItem:after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ width: 2px;
|
|
|
+ height: 90%;
|
|
|
+ right: 0;
|
|
|
+ background: #ccc;
|
|
|
+ transform: skewX(-10deg);
|
|
|
+}
|
|
|
+
|
|
|
+.nav-subMenu {
|
|
|
+ position: absolute;
|
|
|
+ font-size: 2.5em;
|
|
|
+ top: 1.12em;
|
|
|
+ z-index: 5;
|
|
|
+ height: 5.125em;
|
|
|
+ transition: 0.5s height cubic-bezier(0.73, 0.32, 0.34, 1.5);
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.nav-subMenu > li,.toggle-language a .lang-subMenu > li {
|
|
|
+ position: relative;
|
|
|
+ width: 3.775em;
|
|
|
+ height: 1.15em;
|
|
|
+ background: transparent;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 0.125em;
|
|
|
+ white-space: nowrap;
|
|
|
+ background: rgba(0, 0, 0, 0.3);
|
|
|
+ transition: 0.5s margin-top cubic-bezier(0.73, 0.32, 0.34, 1.5);
|
|
|
+}
|
|
|
+
|
|
|
+.nav-subMenu > li> span {
|
|
|
+ position: absolute;
|
|
|
+ width: 2px;
|
|
|
+ height: 0;
|
|
|
+ top: 0;
|
|
|
+ left: -98.5%;
|
|
|
+ background: red;
|
|
|
+ content: '';
|
|
|
+ transition: .5s;
|
|
|
+}
|
|
|
+
|
|
|
+.nav-subMenu li a {
|
|
|
+ width: 100%;
|
|
|
+ /* height: 100%; */
|
|
|
+ line-height: 1.4;
|
|
|
+ padding: 15px 0;
|
|
|
+ font-size: 0.4em;
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.nav > div:not(:hover) .nav-subMenu {
|
|
|
+ height: 0;
|
|
|
+ transition: 0.5s 0.1s height;
|
|
|
+}
|
|
|
+
|
|
|
+.nav > div:not(:hover) .nav-subMenu > li {
|
|
|
+ transition: 0.5s 0.1s margin-top;
|
|
|
+ margin-top: -0.125em;
|
|
|
+}
|
|
|
+
|
|
|
+.li_active > span {
|
|
|
+ height: 100% !important;
|
|
|
+}
|
|
|
+
|
|
|
+/*设备兼容*/
|
|
|
+
|
|
|
+@media screen and (min-width: 1755px) and (max-width: 1805px) {
|
|
|
+ #wrap-nav {
|
|
|
+ font-size: 39px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media screen and (min-width: 1705px) and (max-width: 1755px) {
|
|
|
+ #wrap-nav {
|
|
|
+ font-size: 38px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media screen and (min-width: 1655px) and (max-width: 1705px) {
|
|
|
+ #wrap-nav {
|
|
|
+ font-size: 38px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media screen and (min-width: 1605px) and (max-width: 1655px) {
|
|
|
+ #wrap-nav {
|
|
|
+ font-size: 37px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media screen and (min-width: 1555px) and (max-width: 1605px) {
|
|
|
+ #wrap-nav {
|
|
|
+ font-size: 36px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media screen and (min-width: 1505px) and (max-width: 1555px) {
|
|
|
+ #wrap-nav {
|
|
|
+ font-size: 35px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media screen and (min-width: 1455px) and (max-width: 1505px) {
|
|
|
+ #wrap-nav {
|
|
|
+ font-size: 34px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media screen and (min-width: 1405px) and (max-width: 1455px) {
|
|
|
+ #wrap-nav {
|
|
|
+ font-size: 34px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media screen and (max-width: 1405px) {
|
|
|
+ #wrap-nav {
|
|
|
+ font-size: 34px;
|
|
|
+ }
|
|
|
+ .nav-right{
|
|
|
+ margin-right: 2em;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media screen and (min-width: 1305px) and (max-width: 1355px) {
|
|
|
+ #wrap-nav {
|
|
|
+ font-size: 34px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media screen and (min-width: 1255px) and (max-width: 1305px) {
|
|
|
+ #wrap-nav {
|
|
|
+ font-size: 34px;
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+@media screen and (max-width: 1305px) {
|
|
|
+ #wrap-nav {
|
|
|
+ font-size: 34px;
|
|
|
+ }
|
|
|
+}
|
|
|
+@media screen and (max-width: 1220px) {
|
|
|
+ #wrap-nav {
|
|
|
+ font-size: 29px;
|
|
|
+ }
|
|
|
+ .nav > div{
|
|
|
+ width: 4.2em!important;
|
|
|
+ }
|
|
|
+ .toggle-txt{
|
|
|
+ width: 50px;
|
|
|
+ }
|
|
|
+ .nav-left{
|
|
|
+ margin-left:30px;
|
|
|
+ }
|
|
|
+ .nav-right{
|
|
|
+ margin-right:30px
|
|
|
+ }
|
|
|
+ .toggle-language a .lang-subMenu > li{
|
|
|
+ height: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+@media screen and (max-width: 1024px) {
|
|
|
+
|
|
|
+}
|