.wrap { max-width: 1440px; margin: 0 auto; } .wrap1 { max-width: 1600px; margin: 0 auto; } .header { width: 100%; z-index: 999; height: 100px; } .header .wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; } .header .logo { display: inline-block; width: 380px; } .header .logo img{ width: 100%; } .header .rightMenu { width: 80%; display: flex; justify-content: flex-end; align-items: center; } .header .rightMenu ul { width: 80%; height: 100px; line-height: 100px; display: flex; align-items: center; justify-content: space-between; } .header .rightMenu li { position: relative; } .header .rightMenu a { color: #1C1C1C; font-weight: bold; transition: all .3s; transition: all .3s; } .header .rightMenu li .child { width: 160px; position: absolute; top: 110%; left: 50%; transform: translateX(-50%); background-color: #fff; transition: all .3s; border-top: 4px solid #3E77C3; opacity: 0; visibility: hidden; } .header .rightMenu li .child ul { width: 100%; flex-direction: column; align-items: center; position: relative; } .header .rightMenu li .child ul::before { content: ''; display: none; border-style: solid; border-width: 10px; border-color: transparent transparent #fff transparent; width: 0px; height: 0px; position: absolute; top: -30px; left: 50%; transform: translateX(-50%); } .header .rightMenu li:hover .child { top: 97%; opacity: 1; visibility: inherit; z-index: 9; } .header .rightMenu .child li { width: 100%; line-height: normal; } .header .rightMenu .child li a { display: block; width: 100%; color: #5E5F65; cursor: pointer; padding: 10px 0; text-align: center; background-color: #fff; } .header .rightMenu .child li a:hover { background-color: #3E77C3; color: #fff; } .header .rightMenu .child li a:hover { } .header .rightMenu .ch .top { display: flex; align-items: center; } .header .rightMenu .ch .top:hover { } .header .rightMenu .ch { position: relative; } .header .rightMenu .ch .top { display: flex; align-items: center; height: 100px; } .header .rightMenu .ch .top:hover { } .header .rightMenu .ch:hover .chEn{ opacity: 1; top: 97%; z-index: 9; } .header .rightMenu .ch .chEn { position: absolute; width: 60px; background: #fff; top: 120%; left: 50%; transform: translateX(-50%); opacity: 0; transition: all .3s; border-top: 4px solid #3E77C3; } .header .rightMenu .ch .chEn ul{ width: 100%; flex-direction: column; align-items: center; padding-bottom: 12px; line-height: normal; height: auto; } .header .rightMenu .ch .chEn li{ /* padding-top: 12px; */ line-height: normal; padding: 5px -0; width: 100%; text-align: center; } .header .rightMenu .ch .chEn a{ color: #333; padding-bottom: 0; border-bottom: 0; } .menu_h,.header .right-box{display: none;} .footer { background: url(../images/footer-bg.jpg) no-repeat; background-size: 100% 100%; background-position: bottom center; padding: 2.86% 0 1.56% 0; /* color: #fff; */ } .footer a { color: rgba(63, 63, 63, .6); transition: all .3s; } .footer a:hover{ color: #1077BF; } .footer .top { display: flex; justify-content: space-between; opacity: .9; /* margin: 0 4%; */ margin-bottom: 6.57%; /* margin-top: 20px; */ } .footer .top .left{ width: 16%; } .footer .top .left .one img{ width: 100%; } .footer .top .two { padding-top: 40px; margin-bottom: 20px; } .footer .top .two li { margin-bottom: 3px; } .footer .top .right { width: 84%; /* display: flex; */ margin-top: 20px; } .footer .top .right1{ margin-left: 20.84%; display: flex; align-items: flex-start; justify-content: space-between; } .footer .top .right1 ul:first-child{ width: 75%; } .footer .top .right ul { align-items: flex-start; } .footer .top .right .first { min-width: 16%; margin-right: 10%; } .footer .top .right .first:last-child{ margin-right: 0; } .footer .btm { opacity: .6; color: rgba(63, 63, 63, .6); justify-content: space-between; } .rightFix{ background: #385779; position: fixed; top: 50%; transform: translateY(-50%); right: 0; z-index: 9999; } .rightFix li{ position: relative; cursor: pointer; } .rightFix .rightCon{ padding: 20px; text-align: center; } .rightFix .rightCon1{ position: absolute; color: #FFFFFF; padding: 20px; background: #8E9FB0; top: 0; right: -300%; display: flex; align-items: center; width: 240%; transition: all .3s; } .rightFix li:hover .rightCon1{ right: 0; } @media all and (max-width: 1600px) { .wrap { max-width: 1366px; margin: 0 auto; } .wrap1 { max-width: 1440px; margin: 0 auto; } } @media all and (max-width: 1400px) { .wrap { max-width: 1280px; margin: 0 auto; } .wrap1 { max-width: 1300px; margin: 0 auto; } .footer .top .left{ width: 22%; } .footer .top .right1{ margin-left: 10%; } .footer .top .right .first{ min-width: 20%; margin-right: 6%; } .header { width: 100%; z-index: 9999; height: 60px; } .header .logo { display: inline-block; width: 300px; } .header .rightMenu ul { width: 80%; height: 60px; line-height: 60px; display: flex; align-items: center; justify-content: space-between; } .header .rightMenu .ch .top { display: flex; align-items: center; height: 60px; } .header .rightMenu li .child { width: 100px; position: absolute; top: 110%; left: 50%; transform: translateX(-50%); background-color: #fff; transition: all .3s; border-top: 4px solid #3E77C3; } } @media all and (max-width: 1280px) { .wrap { max-width: 1000px; margin: 0 auto; /* padding: 0 20px; */ } .wrap1 { max-width: 1000px; margin: 0 auto; } } @media all and (max-width: 1000px) { .rightFix{ display: none; } .wrap { padding: 0 30px; } .wrap1 { padding: 0 30px; } .header { height: 60px; position: fixed; background-color: #fff; left: 0; top: 0; transform: translateX(-0%); } /* .scroll_header .header{ position: fixed; transform: translateX(-50%); } */ .header .wrap { height: 100%; } .header .logo { width: 210px; } .header .rightMenu { margin-bottom: -8px; width: auto; margin-right: 10%; } .header .rightMenu ul { display: none; } .header .rightMenu .ch .top { padding: 6.5px 10px; } .menu_h { display: block; background: none; transition: 0.3s all; z-index: 1000; border: none; width: 35px; height: 40px; outline: none; position: absolute; right: 10px; top: 1.4rem; transform: scale(0.8); } .menu_h::before, .menu_h::after, .menu_h span { background: #333; border-radius: 0px; } .menu_h::before, .menu_h::after { content: ''; position: absolute; height: 2px; width: 100%; left: 0; top: 50%; transform-origin: 50% 50%; transition: transform 0.25s; } .menu_h span { position: absolute; width: 84%; height: 2px; left: 0; overflow: hidden; text-indent: 200%; transition: opacity 0.25s; } .menu_h::before { transform: translate3d(0, -9px, 0); } .menu_h::after { transform: translate3d(0, 9px, 0); } .menu-open .menu_h span { opacity: 0; } .menu-open .menu_h::before { transform: rotate3d(0, 0, 1, 45deg); } .menu-open .menu_h::after { transform: rotate3d(0, 0, 1, -45deg); } .header .right-box{ transform: translateX(100%); transition: 0.5s all;} /* .header .right-box .menu{width: 90%;} */ .menu-open .header .right-box{transform: translateX(0);} .header .w{ margin: 10px;height: auto;line-height: inherit;} .header .rights .sea a{height: auto;line-height: inherit;} .main{ padding-top: 6rem;} .header .right-box{ position: absolute; background: #fff; color: #fff; width: 100%;height: 100vh; right: 0; top: 100%; margin-top: 0; padding-top: 0; border-bottom-left-radius: 5px;display: flex;align-items: flex-start; border-top: 1px solid #999;} .header .right-box a{ color: #666;} .header .menu{ padding-top:20px;} .header .menu .item{ width: 100%; margin: 0;position: relative;margin: 0;} .header .menu .item a{ padding: 15px 0 15px 15px;display: block;border-bottom: 1px solid rgba(255,255,255,.3);} .header .menu{width: 26.67%;height: 100%;background: #F5F5F5;} .header .menu .active{background-color: #fff;color: #2C477E;display: flex;align-items: center;} .header .menu .active::before{ content: ''; display: inline-block; width: 3px; height: 18px; background: #2C477E; } .header .menu .a{ /* margin-left: -3px; */ } .header .rights{ float: right; position: absolute; right: 18%; padding: 6px 0; display: flex; align-items: center; font-size: 1.8rem; } .header .rights .lang dd{ top: 123%; } .header .menu_right{ width: 73.33%; padding-top: 20px; } .child_m{ display: none; margin-left: 9.2%; margin-right: 5.1%; /* padding-top: 15px; */ } .child_m .tit11{ color: #999; padding-bottom: 15px; border-bottom: 1px solid #EEEEEE; } .child_m_x{ display: block; } .header .menu_right .child_m .firstCon{ position: relative; padding: 16px 0; border-bottom: 1px solid #EEEEEE; } .header .menu_right .child_m .firstCon a{ color: #333; } .header .menu_right .child_m .firstCon::before{ content: ''; display: block; width: 50%; height: 100%; position: absolute; z-index: 2; top: 0%; right: 0; height: 2.3em; left: 13em; transform: translateY(14px); display: flex; align-items: center; z-index: 99; background: url(../images/you4.png) no-repeat center center; background-size: 16px 9px; transition: all .3s; } .header .menu_right .child_m .firstCon2::before{ background: url(../images/xia1.png) no-repeat center center; background-size: 11px 6px; } .header .menu .child_m .firstCon{ position: relative; } .child_m_1{ display: none; } .child_m_1 li{ margin: 15px 0; } .child_m_1 a{ padding-left: 10px !important; color: #666666 !important; } .header .menu .child_m .firstCon:hover .a_1{ color: #f46a00; } .header .menu .child_m .firstCon:hover .child_m_1{ display: block; } .footer{ background-size: 100% 114%; } .footer .top .left{ width: 100%; display: flex; flex-direction: column; align-items: center; } .footer .top .two { padding-top: 15px; margin-bottom: 15px; } .footer .top .right{ display: none; } .footer .btm{ display: flex; flex-direction: column; white-space: nowrap; line-height: 24px; } .footer .btm .right{ display: flex; flex-direction: column; align-items: center; } .header .rightMenu .ch .top{ height: 60px; } .header .rightMenu .ch .chEn ul{ display: block; } .header .rightMenu .ch:hover .chEn { opacity: 1; top: 80%; z-index: 9; } }