/* 左边第一个 */ .NavLinkContent1 { width: 780px; height: 185px; background-image: url("../images/navOne.png"); background-repeat: no-repeat; background-size: contain; cursor: default; position: relative; } .NavLinkContent1:hover { background-image: url("../images/navOneHover.png"); } /* .NavLinkContent1:hover .ShowContent .LeftPart { background-image: url("../images/navSevenIconHover.png"); } .NavLinkContent1:hover .ShowContent .RightPart .RightPart_TopPart { color: #ffa622; } */ .NavLinkContent1 .ShowContent { display: flex; flex-flow: row nowrap; align-items: center; height: 185px; position: absolute; left: 250px; } .NavLinkContent1 .ShowContent.custom-content { left: 180px; } .NavLinkContent1 .ShowContent .LeftPart { width: 88px; height: 88px; background-image: url("../images/icon-map.png"); background-repeat: no-repeat; background-size: contain; margin-right: 28px; } .NavLinkContent1:hover .ShowContent .LeftPart { width: 88px; height: 88px; background-image: url("../images/icon-map-hover.png"); background-repeat: no-repeat; background-size: contain; margin-right: 28px; } .NavLinkContent1 .ShowContent .LeftPart.custom-img { /* width: 100px; height: 100px; */ margin-bottom: 6px; } .NavLinkContent1 .ShowContent .RightPart .RightPart_TopPart { width: 300px; /* height: 36px; */ font-size: 36px; font-family: PangMenZhengDao-3, PangMenZhengDao; font-weight: normal; color: #2bb5eb; /* line-height: 41px; margin-bottom: 16px; */ text-align: start; } .NavLinkContent1 .ShowContent .RightPart .RightPart_BottomPart { width: 214px; height: 34px; font-size: 12px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #ff9c27; line-height: 17px; text-align: start; } /* 左边第二个 */ .NavLinkContent2 { width: 780px; height: 185px; background-image: url("../images/navTwo.png"); background-repeat: no-repeat; background-size: contain; cursor: pointer; position: relative; } .NavLinkContent2:hover { background-image: url("../images/navTwoHover.png"); } .NavLinkContent2:hover .ShowContent .LeftPart { background-image: url("../images/navTwoIconHover.png"); } .NavLinkContent2:hover .ShowContent .RightPart .RightPart_TopPart { color: #ffa622; } .NavLinkContent2 .ShowContent { display: flex; flex-flow: row nowrap; align-items: center; height: 185px; position: absolute; left: 166px; } .NavLinkContent2 .ShowContent .LeftPart { width: 88px; height: 88px; background-image: url("../images/navTwoIcon.png"); background-repeat: no-repeat; background-size: contain; margin-right: 28px; } .NavLinkContent2 .ShowContent .RightPart .RightPart_TopPart { width: 180px; height: 36px; font-size: 36px; font-family: PangMenZhengDao-3, PangMenZhengDao; font-weight: normal; color: #2bb5eb; line-height: 41px; margin-bottom: 16px; text-align: start; } .NavLinkContent2 .ShowContent .RightPart .RightPart_BottomPart { width: 214px; height: 34px; font-size: 12px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #ff9c27; line-height: 17px; text-align: start; } /* 左边第三个 */ .NavLinkContent3 { width: 780px; height: 185px; background-image: url("../images/navThree.png"); background-repeat: no-repeat; background-size: contain; background-position: 4px center; cursor: pointer; position: relative; } .NavLinkContent3:hover { background-image: url("../images/navThreeHover.png"); } .NavLinkContent3:hover .ShowContent .LeftPart { background-image: url("../images/navSevenIconHover.png"); } .NavLinkContent3:hover .ShowContent .RightPart .RightPart_TopPart { color: #ffa622; } .NavLinkContent3 .ShowContent { display: flex; flex-flow: row nowrap; align-items: center; height: 185px; position: absolute; left: 88px; } .NavLinkContent3 .ShowContent .LeftPart { width: 88px; height: 88px; background-image: url("../images/navSevenIcon.png"); background-repeat: no-repeat; background-size: contain; margin-right: 28px; } .NavLinkContent3 .ShowContent .RightPart .RightPart_TopPart { width: 250px; height: 36px; font-size: 36px; font-family: PangMenZhengDao-3, PangMenZhengDao; font-weight: normal; color: #2bb5eb; line-height: 41px; /* margin-bottom: 16px; */ text-align: start; } .NavLinkContent3 .ShowContent .RightPart .RightPart_BottomPart { width: 214px; height: 34px; font-size: 12px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #FF9C27; line-height: 17px; text-align: start; } /* 左边第四个 */ .NavLinkContent4 { width: 780px; height: 185px; background-image: url("../images/navFour.png"); background-repeat: no-repeat; background-size: contain; cursor: pointer; position: relative; } .NavLinkContent4:hover { background-image: url("../images/navFourHover.png"); } .NavLinkContent4:hover .ShowContent .LeftPart { background-image: url("../images/navFourIconHover.png"); } .NavLinkContent4:hover .ShowContent .RightPart .RightPart_TopPart { color: #ffa622; } .NavLinkContent4:hover .ShowContent .RightPart .RightPart_BottomPart { color: #ffa622; } .NavLinkContent4 .ShowContent { display: flex; flex-flow: row nowrap; align-items: center; height: 185px; position: absolute; left: 250px; } .NavLinkContent4 .ShowContent .LeftPart { width: 88px; height: 88px; background-image: url("../images/navFourIcon.png"); background-repeat: no-repeat; background-size: contain; margin-right: 28px; } .NavLinkContent4 .ShowContent .RightPart .RightPart_TopPart { width: 180px; height: 36px; font-size: 36px; font-family: PangMenZhengDao-3, PangMenZhengDao; font-weight: normal; color: #2bb5eb; line-height: 41px; margin-bottom: 16px; text-align: start; } .NavLinkContent4 .ShowContent .RightPart .RightPart_BottomPart { width: 214px; height: 34px; font-size: 12px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #FF9C27; line-height: 17px; text-align: start; } /* 右边第一个 */ .NavLinkContent5 { width: 780px; height: 185px; background-image: url("../images/navFive.png"); background-repeat: no-repeat; background-size: contain; cursor: default; position: relative; } .NavLinkContent5:hover { background-image: url("../images/navFiveHover.png"); } /* .NavLinkContent5:hover .ShowContent .LeftPart { background-image: url("../images/navTwoIconHover.png"); } .NavLinkContent5:hover .ShowContent .RightPart .RightPart_TopPart { color: #ffa622; } */ .NavLinkContent5 .ShowContent { display: flex; flex-flow: row nowrap; align-items: center; height: 185px; position: absolute; left: 216px; } .NavLinkContent5 .ShowContent.custom-content { /* left: 300px; */ } .NavLinkContent5 .ShowContent .LeftPart { width: 88px; height: 88px; background-image: url("../images/icon-users.png"); background-repeat: no-repeat; background-size: contain; margin-right: 28px; } .NavLinkContent5:hover .ShowContent .LeftPart { width: 88px; height: 88px; background-image: url("../images/icon-users-hover.png"); background-repeat: no-repeat; background-size: contain; margin-right: 28px; } .NavLinkContent5 .ShowContent .LeftPart.custom-img { /* width: 100px; height: 100px; */ } .NavLinkContent5 .ShowContent .RightPart .RightPart_TopPart { width: 265px; /* height: 36px; */ font-size: 36px; font-family: PangMenZhengDao-3, PangMenZhengDao; font-weight: normal; color: #2bb5eb; /* line-height: 41px; margin-bottom: 16px; */ text-align: start; } .NavLinkContent5 .ShowContent .RightPart .RightPart_BottomPart { width: 214px; height: 34px; font-size: 12px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #ff9c27; line-height: 17px; text-align: start; } /* 右边第二个 */ .NavLinkContent6 { width: 780px; height: 185px; background-image: url("../images/navSix.png"); background-repeat: no-repeat; background-size: contain; cursor: pointer; position: relative; } .NavLinkContent6:hover { background-image: url("../images/navSixHover.png"); } .NavLinkContent6:hover .ShowContent .LeftPart { background-image: url("../images/navThreeIconHover.png"); } .NavLinkContent6:hover .ShowContent .RightPart .RightPart_TopPart { color: #ffa622; } .NavLinkContent6:hover .ShowContent .RightPart .RightPart_BottomPart { color: #ffa622; } .NavLinkContent6 .ShowContent { display: flex; flex-flow: row nowrap; align-items: center; height: 185px; position: absolute; left: 286px; } .NavLinkContent6 .ShowContent .LeftPart { width: 88px; height: 88px; background-image: url("../images/navThreeIcon.png"); background-repeat: no-repeat; background-size: contain; margin-right: 28px; } .NavLinkContent6 .ShowContent .RightPart .RightPart_TopPart { width: 180px; height: 36px; font-size: 36px; font-family: PangMenZhengDao-3, PangMenZhengDao; font-weight: normal; color: #ffffff; line-height: 41px; margin-bottom: 16px; text-align: start; } .NavLinkContent6 .ShowContent .RightPart .RightPart_BottomPart { width: 214px; height: 34px; font-size: 12px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #ff9c27; line-height: 17px; text-align: start; } /* 右边第三个 */ .NavLinkContent7 { width: 780px; height: 185px; background-image: url("../images/navSeven.png"); background-repeat: no-repeat; background-size: contain; cursor: pointer; position: relative; } .NavLinkContent7:hover { background-image: url("../images/navSevenHover.png"); } .NavLinkContent7:hover .ShowContent .LeftPart { background-image: url("../images/navSixIconHover.png"); } .NavLinkContent7:hover .ShowContent .RightPart .RightPart_TopPart { color: #ffa622; } .NavLinkContent7 .ShowContent { display: flex; flex-flow: row nowrap; align-items: center; height: 185px; position: absolute; left: 286px; } .NavLinkContent7 .ShowContent .LeftPart { width: 88px; height: 88px; background-image: url("../images/navSixIcon.png"); background-repeat: no-repeat; background-size: contain; margin-right: 28px; } .NavLinkContent7 .ShowContent .RightPart .RightPart_TopPart { width: 230px; height: 36px; font-size: 36px; font-family: PangMenZhengDao-3, PangMenZhengDao; font-weight: normal; color: #ffffff; line-height: 41px; /* margin-bottom: 16px; */ text-align: start; } .NavLinkContent7 .ShowContent .RightPart .RightPart_BottomPart { width: 214px; height: 34px; font-size: 12px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #ff9c27; line-height: 17px; text-align: start; } /* 右边第四个 */ .NavLinkContent8 { width: 780px; height: 185px; background-image: url("../images/navEight.png"); background-repeat: no-repeat; background-size: contain; cursor: pointer; position: relative; } .NavLinkContent8:hover { background-image: url("../images/navEightHover.png"); } .NavLinkContent8:hover .ShowContent .LeftPart { background-image: url("../images/navEightIconHover.png"); } .NavLinkContent8:hover .ShowContent .RightPart .RightPart_TopPart { color: #ffa622; } .NavLinkContent8 .ShowContent { display: flex; flex-flow: row nowrap; align-items: center; height: 185px; position: absolute; left: 196px; } .NavLinkContent8 .ShowContent .LeftPart { width: 88px; height: 88px; background-image: url("../images/navEightIcon.png"); background-repeat: no-repeat; background-size: contain; margin-right: 28px; } .NavLinkContent8 .ShowContent .RightPart .RightPart_TopPart { width: 180px; height: 36px; font-size: 36px; font-family: PangMenZhengDao-3, PangMenZhengDao; font-weight: normal; color: #ffffff; line-height: 41px; margin-bottom: 16px; text-align: start; } .NavLinkContent8 .ShowContent .RightPart .RightPart_BottomPart { width: 214px; height: 34px; font-size: 12px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #ff9c27; line-height: 17px; text-align: start; } [class*="NavLinkContent"] .ShowContent .RightPart .RightPart_TopPart{ color: #2bb5eb; } [class*="NavLinkContent"]:hover .ShowContent .RightPart .RightPart_TopPart{ color: #ffffff; } .sub-nav{ display: none; height: auto; width: 470px; position: absolute; top: 100%; right: 0; } [class*="NavLinkContent"]:hover > .sub-nav{ display: block; } .sub-nav-item{ height: 42px; color: #2bb5eb; line-height: 40px; padding: 1px 10px; font-size: 36px; margin-top: 10px; background-repeat: no-repeat; background-image: url("../images/sub-nav-bg.png"); background-position: center; text-align: center; cursor: pointer; position: relative; font-family: PangMenZhengDao-3, PangMenZhengDao; } .sub-nav-item + .sub-nav-item{ margin-top: 15px; } .sub-nav-item:hover{ color: #ffffff; } .sub-nav-item.is-disabled{ color: #2bb5eb; } .NavLinkContent1 .sub-nav, .NavLinkContent3 .sub-nav{ left: 99px; right: auto; } .NavLinkContent3 .sub-nav{ left: 107px; } .NavLinkContent1 .sub-nav .sub-nav-item{ background-position: right center; } .NavLinkContent1:hover .sub-nav-item, .NavLinkContent3:hover .sub-nav-item{ animation: slide-left 1.5s 0s ease-in-out; } .NavLinkContent1 .sub-nav .sub-nav-item:nth-child(1){ width: 446px; background-image: url("../images/sub-nav-01.png"); } .NavLinkContent1 .sub-nav .sub-nav-item:nth-child(2){ width: 421px; background-image: url("../images/sub-nav-02.png"); } .NavLinkContent1 .sub-nav .sub-nav-item:nth-child(3){ width: 408px; background-image: url("../images/sub-nav-03.png"); } .NavLinkContent3 .sub-nav .sub-nav-item:nth-child(1){ width: 480px; background-image: url("../images/sub-nav-04.png"); } .NavLinkContent3 .sub-nav .sub-nav-item:nth-child(2){ width: 536px; background-image: url("../images/sub-nav-05.png"); } .NavLinkContent3 .sub-nav .sub-nav-item:nth-child(3){ width: 631px; background-image: url("../images/sub-nav-06.png"); } .NavLinkContent5 .sub-nav{ right: 102px; overflow: hidden; } .NavLinkContent5 .sub-nav .sub-nav-item, .NavLinkContent7 .sub-nav .sub-nav-item{ background-position: left center; float: right; animation: slide-right 1.5s 0s ease-in-out; } .NavLinkContent5 .sub-nav .sub-nav-item:nth-child(1){ width: 442px; background-image: url("../images/sub-nav-07.png"); } .NavLinkContent5 .sub-nav .sub-nav-item:nth-child(2){ width: 417px; background-image: url("../images/sub-nav-08.png"); } .NavLinkContent5 .sub-nav .sub-nav-item:nth-child(3){ width: 403px; background-image: url("../images/sub-nav-09.png"); } .NavLinkContent7 .sub-nav{ right: 102px; overflow: visible; } .NavLinkContent7 .sub-nav .sub-nav-item:nth-child(1){ width: 480px; background-image: url("../images/sub-nav-10.png"); } .NavLinkContent7 .sub-nav .sub-nav-item:nth-child(2){ width: 536px; background-image: url("../images/sub-nav-11.png"); } .NavLinkContent7 .sub-nav .sub-nav-item:nth-child(3){ width: 631px; background-image: url("../images/sub-nav-12.png"); } @keyframes slide-left{ 0%{ transform: translateX(-100%) rotateX(90deg); } 100%{ transform: translateX(0%) rotateX(0deg); } } @keyframes slide-right{ 0%{ transform: translateX(100%) rotateX(90deg); } 100%{ transform: translateX(0%) rotateX(0deg); } }