/*====================导航*********/ .index-header { position: fixed; top: 0; left: 0; z-index: 999; width: 100%; background: none; /*padding-top: 30px;*/ transition: all 0s; box-shadow: none; background: #fff; } .index-header.active { background: #fff; box-shadow: 0 8px 6px -9px rgba(0, 0, 0, .1); padding-top: 0; } .index-header.active .content { border-bottom: none; } /*左侧logo*/ .index-header .content { padding: 0 52px; display: flex; justify-content: space-between; /*border-bottom: 1px solid #ffffff;*/ } .index-header .left a img { display: block; } .index-header .left .img2 { display: none; } /*右侧*/ .index-header .nav { -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; height: 100%; display: block; /*border-right: 1px solid #fff;*/ margin-right: 36px; padding-right: 50px; } .index-header .navbar_nav li { float: left; position: relative; display: block; /*padding: 28px 0;*/ margin-left: .55rem; } /*.header .navbar_nav li:after{*/ /* content: "";*/ /* width: 0;*/ /* height: 2px;*/ /* background: orangered;*/ /* position: absolute;*/ /* bottom: 0;*/ /* left: 0;*/ /* transition: all 0.5s ease 0s;*/ /*}*/ /*.header .navbar_nav li:hover:after{*/ /* width: 100%;*/ /*}*/ .index-header .navbar_nav li a { text-decoration: none; height: 100%; display: block; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; color: #666; font-size: 16px; position: relative; } .index-header .navbar_nav > li > a:before { content: ''; position: absolute; bottom: 0; height: 1px; width: 0; background: #fff; } .index-header .navbar_nav > li:hover a:before { width: 100%; } .index-header .navbar_nav > li.active a:before { width: 100%; } .index-header .navbar_nav li a.active { /*color: #ff9e19;*/ } .index-header .navbar_nav li.dropdown { display: inherit; position: relative; } .index-header .navbar_nav li.dropdown .jt { width: 20px; height: 20px; /*background: url(i/top.png) no-repeat;*/ background-size: 100% 100%; display: block; } .index-header .navbar_nav li.dropdown .dropdown_menu { visibility: hidden; opacity: 0; position: absolute; top: 87px; background: #fff; box-shadow: 0 15px 27px 0 rgba(167, 165, 165, 0.38); left: 50%; transform: translateX(-50%); } .index-header .navbar_nav li.dropdown .dropdown_menu a { font-size: 14px; color: #666; padding: 0 20px; line-height: 40px; white-space: nowrap; text-align: center; background: #fff; margin-bottom: 2px; } .index-header .navbar_nav li.dropdown:hover .dropdown_menu { visibility: visible; opacity: 1; background: #f3f3f3; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } .index-header .navbar_nav li.dropdown:hover .dropdown_menu a { color: #666; } .index-header .navbar_nav li.dropdown:hover .dropdown_menu a:hover { color: #fff; background: orange; } /*白色背景的头部*/ .index-header.on { /*background: #b1841d;*/ /*box-shadow: 0 8px 6px -9px rgba(0, 0, 0, .1);*/ box-shadow: none; padding-top: 0; } .index-header.on .content { /*border-bottom: none;*/ } .index-header.on .left .img2 { display: block; } .index-header.on .navbar_nav li:hover a { /*color: orangered;*/ } #navToggle { display: none; } .m_nav { position: fixed; top: 0px; box-shadow: 0 15px 27px 0 rgba(167, 165, 165, 0.38); width: 100%; height: 100%; background: #fff; transition: all ease 0.5s; -webkit-transition: all ease 0.5s; z-index: 1000; opacity: 1; visibility: visible; margin-top: 0; overflow-y: auto; transition: all .6s cubic-bezier(.77, 0, .175, 1) 0ms; top: 0; transform: translateX(100%); } .m_nav.open { transform: translateX(0); } .m_nav .top { height: 60px; padding: 20px; box-sizing: border-box; } .m_nav .top .closed { width: 30px; height: 30px; vertical-align: middle; float: right; cursor: pointer; } .m_nav .logo { width: 100%; margin: 0 auto; } .m_nav .logo img { height: 50px; display: block; margin: 30px auto; } .m_nav .ul { margin-top: 30px; } .m_nav .ul li { padding: 0 20px; border-bottom: 1px solid #f5f5f5; transform: translateY(0); -webkit-transform: translateY(100%); transform: translateY(100%); -webkit-transition: all .6s cubic-bezier(.77, 0, .175, 1) 0ms; transition: all .6s cubic-bezier(.77, 0, .175, 1) 0ms; opacity: 0; } .m_nav.open .ul li { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } .m_nav .ul li:nth-child(1) { -webkit-transition: all .2s cubic-bezier(.77, 0, .175, 1) 0ms; transition: all .2s cubic-bezier(.77, 0, .175, 1) 0ms; } .m_nav .ul li:nth-child(2) { -webkit-transition: all .4s cubic-bezier(.77, 0, .175, 1) 0ms; transition: all .4s cubic-bezier(.77, 0, .175, 1) 0ms; } .m_nav .ul li:nth-child(3) { -webkit-transition: all .6s cubic-bezier(.77, 0, .175, 1) 0ms; transition: all .6s cubic-bezier(.77, 0, .175, 1) 0ms; } .m_nav .ul li:nth-child(4) { -webkit-transition: all .8s cubic-bezier(.77, 0, .175, 1) 0ms; transition: all .8s cubic-bezier(.77, 0, .175, 1) 0ms; } .m_nav .ul li:nth-child(5) { -webkit-transition: all 1.0s cubic-bezier(.77, 0, .175, 1) 0ms; transition: all 1.0s cubic-bezier(.77, 0, .175, 1) 0ms; } .m_nav .ul li:nth-child(6) { -webkit-transition: all 1.2s cubic-bezier(.77, 0, .175, 1) 0ms; transition: all 1.2s cubic-bezier(.77, 0, .175, 1) 0ms; } .m_nav .ul li:nth-child(7) { -webkit-transition: all 1.4s cubic-bezier(.77, 0, .175, 1) 0ms; transition: all 1.4s cubic-bezier(.77, 0, .175, 1) 0ms; } .m_nav .ul li:nth-child(8) { -webkit-transition: all 1.6s cubic-bezier(.77, 0, .175, 1) 0ms; transition: all 1.6s cubic-bezier(.77, 0, .175, 1) 0ms; } .m_nav .ul li:nth-child(9) { -webkit-transition: all 1.8s cubic-bezier(.77, 0, .175, 1) 0ms; transition: all 1.8s cubic-bezier(.77, 0, .175, 1) 0ms; } .m_nav .ul li:nth-child(10) { -webkit-transition: all 2s cubic-bezier(.77, 0, .175, 1) 0ms; transition: all 2s cubic-bezier(.77, 0, .175, 1) 0ms; } .m_nav .ul li a { display: flex; justify-content: space-between; align-items: center; text-decoration: none; color: #333; font-size: 16px; height: 50px; line-height: 50px; width: 100%; } .m_nav .ul li > a.active { color: #b1841d; } .m_nav .ul li a i { font-size: 24px; transition: all 0.3s; } .m_nav .ul li a i.active { transform: rotate(180deg); } .m_nav .ul li .dropdown_menu { display: none; } .m_nav .ul li.dropdown.active .dropdown_menu { display: block; } .m_nav .ul li .dropdown_menu a { display: block; height: 50px; line-height: 50px; padding: 0 40px; box-sizing: border-box; border-bottom: 1px solid #f5f5f5; } .m_nav .ul li .dropdown_menu a:last-child { border: none; } .header-bg { position: absolute; top: 0; left: 0; width: 100%; } .index-header .fr { display: flex; align-items: center; } .index-header .fr .shares { display: flex; align-items: center; text-align: center; color: #fff; font-size: 14px; line-height: 25px; border-radius: 3px; margin-right: 38px; position: relative; } .index-header .fr .shares .fa-search { margin-right: 34px; } .index-header .fr .shares div img { margin-right: 10px; } .index-header .fr .shares div .img1{ display: none; } .index-header .fr .shares .fa-search { color: #666; } .index-header .fr .shares span { margin-right: 8px; color: #666; } .index-header .fr .shares .language { position: absolute; right: -8px; top: 25px; background: #fff; padding: 5px 10px; opacity: 0; z-index: -1; transition: all 0.2s; } .index-header .fr .shares .header-language{ cursor: pointer; line-height: 81px; } .index-header .fr .shares .header-language:hover .language { opacity: 1; z-index: 99; } .index-header .fr .shares .header-language i{ color: #666; } .index-header .fr .shares .language a { display: flex; color: #333; } .index-header .fr .shares .language a:hover { color: #b1841d; } .index-header .fl { display: flex; } .index-header .logo { display: flex; align-items: center; padding-left: 25px; width: 250px; } .index-header #navToggle2 { display: flex; align-items: center; padding-left: 20px; padding-right: 40px; cursor: auto; } .index-header #navToggle2 span { position: relative; width: 40px; height: 1px; } .index-header #navToggle2 span:before { content: ''; position: relative; width: 100%; height: 1px; left: 0; } .index-header #navToggle2 span, .index-header #navToggle2 span:before, .index-header #navToggle2 span:after { -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; display: block; background: #fff; } .index-header #navToggle2 span:before { top: 8px; } .index-header #navToggle2 span:after { bottom: 10px; } .index-header #navToggle2.open span:before { top: 10px; -webkit-transform: translateY(-11px) rotate(-45deg); -moz-transform: translateY(-11px) rotate(-45deg); -ms-transform: translateY(-11px) rotate(-45deg); -o-transform: translateY(-11px) rotate(-45deg); transform: translateY(-11px) rotate(-45deg); } .index-header #navToggle2.open span:after { bottom: 12px; -webkit-transform: translateY(10px) rotate(45deg); -moz-transform: translateY(10px) rotate(45deg); -ms-transform: translateY(10px) rotate(45deg); -o-transform: translateY(10px) rotate(45deg); transform: translateY(10px) rotate(45deg); } .index-header #navToggle2.open span { background: none; } .index-header #navToggle2.open span:before, .index-header #navToggle2.open span:after { background: #4f4f4f; } .index-footer{ position: fixed; bottom: 0; left: 0; width: 100%; padding-bottom: 8px; } .index-footer ul{ display: flex; justify-content: center; } .index-footer ul li{ margin: 0 22px; } .index-footer ul li a{ font-size: 14px; color: #fff; } .index-footer p{ text-align: center; color: #fff; font-size: 14px; margin-top: 8px; } .index-footer p a{ color: #fff; } .index-footer p br{ display: none; } .header-language .dd { position: absolute; top: 100%; background: #fff; width: 130px; left: 50%; margin-left: -57px; border: 1px solid #bbb; border-bottom: 5px solid #ab8222; z-index: 10000; transform: translateY(-20px); visibility: hidden; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; transition: .5s; } .header-language:hover .dd { filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; visibility: visible; transform: translateY(10px); } .header-language .dd .box { padding: 10px 20px; background: #fff; } .header-language .dd:before { content: ""; position: absolute; top: -3px; right: 50%; margin-right: -20px; height: 40px; width: 40px; background-color: #FFFFFF; border: 1px solid #bbb; z-index: -1; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); } .header-language .dt a { display: block; text-align: center; line-height: 35px; height: 35px; padding: 0 16px; color: #000; background: #fff; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; } .header-language .dd a { display: block; text-align: center; line-height: 35px; height: 35px; padding: 0 16px; color: #333; } /* 渚у鑸爮*/ #sidenav { position: fixed; top: 0; left: -100%; background-color: #fff; width: 100%; height: 100%; z-index: 999999; transition: all 0.5s; -webkit-transition: all 0.5s; overflow-x: hidden; overflow-y: scroll; } #sidenav.active { left: 0; } #sidenav .top { /*border-bottom: 1px solid #cdcdcd;*/ line-height: 65px; position: relative; /*padding: 8px 0;*/ /*margin-bottom: 0.9375rem;*/ background: #000; } #sidenav .top img { margin-top: -2px; width: 100px; } #sidenav .top .logo { vertical-align: middle; margin-left: 15px; } #sidenav .top .close-btn img { width: 18px; position: absolute; right: 15px; top: 25px; margin-top: 0; } #sidenav .search-box { width: 92%; height: 3.125rem; line-height: 3.0625rem; margin: 0 auto 0.9375rem; border: 1px solid #cdcdcd; border-radius: 1.5625rem; overflow: hidden; position: relative; font-size: 0; } #sidenav .search-box input { padding: 0 0.9375rem; width: 83%; height: 100%; font-size: 0.9375rem; color: #666; vertical-align: top; } #sidenav .search-box a { display: inline-block; vertical-align: top; text-align: center; width: 17%; height: 100%; } #sidenav .search-box img { vertical-align: middle; width: 1.4375rem; } #sidenav .nav { margin: 0 auto; width: 98%; } #sidenav .nav .level1 { font-size: 16px; color: #38444a; line-height: 52px; display: block; padding-left: 15px; position: relative; border-bottom: 1px solid #e6e6e6; transition: all 0.5s; -webkit-transition: all 0.5s; font-weight: bold; } #sidenav .nav .level1 a { color: #38444a; } #sidenav .nav .level1:first-child { border-top: 1px solid #e6e6e6; } #sidenav .nav .level1.active { background-color: #313739; color: #fff; } #sidenav .nav .level1 a.active { color: #fff; } #sidenav .nav .level1 span { color: #aaa; font-family: 'acrom'; margin-left: 0.75rem; font-weight: normal; transition: all 0.5s; -webkit-transition: all 0.5s; } #sidenav .nav .level1.active span { color: #fff; } #sidenav .nav .level1 .plus-box { width: 17px; height: 17px; position: absolute; right: 15px; top: 50%; margin-top: -7px; } #sidenav .nav .level1 .plus-box .hor { width: 100%; height: 2px; background-color: #cdcdcd; position: absolute; left: 0; top: 50%; margin-top: -2px; transition: all 0.5s; -webkit-transition: all 0.5s; } #sidenav .nav .level1.active .plus-box .hor { background-color: #fff; } #sidenav .nav .level1 .plus-box .ver { height: 100%; width: 2px; background-color: #cdcdcd; position: absolute; top: 0; left: 50%; margin-left: -1px; transition: all 0.5s; -webkit-transition: all 0.5s; } #sidenav .nav .level1.active .plus-box .ver { background-color: #fff; transform: scale(1, 0); -webkit-transform: scale(1, 0); } #sidenav .nav ul { background-color: #f5f5f5; display: none; } #sidenav .nav ul li > a { padding-left: 0.4rem; font-size: 14px; line-height: 46px; display: block; color: #313739; border-bottom: 1px solid #e6e6e6; } #sidenav .nav ul li.active > a { background-color: #e6e6e6; } #sidenav .bottom { font-size: 0.9375rem; color: #38444a; text-align: center; padding: 2rem 0; } #sidenav .bottom img { width: 1.125rem; vertical-align: middle; margin-right: 0.5625rem; } #sidenav .nav .ul2 { display: block; border-bottom: 1px solid #e6e6e6; } #sidenav .nav .ul2 a { display: block; width: 100%; padding-left: 2rem; font-size: 14px; line-height: 46px; color: #313739; } .sj-menu { /*position: absolute;*/ /*right: 0;*/ /*top: 28px;*/ display: none; float: right; width: 30px; height: 22px; cursor: pointer; margin-left: 25px; } .index-header #navToggle { display: none; } .index-header #navToggle span { position: relative; width: 25px; height: 1px; } .index-header #navToggle span:before, .index-header #navToggle span:after { content: ''; position: relative; width: 100%; height: 1px; left: 0; } .index-header #navToggle span, .index-header #navToggle span:before, .index-header #navToggle span:after { -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; display: block; background: #000; } .index-header #navToggle span:before { top: 8px; } .index-header #navToggle span:after { bottom: 10px; } .index-header #navToggle.open span:before { top: 10px; -webkit-transform: translateY(-11px) rotate(-45deg); -moz-transform: translateY(-11px) rotate(-45deg); -ms-transform: translateY(-11px) rotate(-45deg); -o-transform: translateY(-11px) rotate(-45deg); transform: translateY(-11px) rotate(-45deg); } .index-header #navToggle.open span:after { bottom: 12px; -webkit-transform: translateY(10px) rotate(45deg); -moz-transform: translateY(10px) rotate(45deg); -ms-transform: translateY(10px) rotate(45deg); -o-transform: translateY(10px) rotate(45deg); transform: translateY(10px) rotate(45deg); } .index-header #navToggle.open span { background: none; } .index-header #navToggle.open span:before, .index-header #navToggle.open span:after { background: #fff; } .full-container { max-width: 1560px; margin: 0 auto; } @media screen and (max-width: 1680px) { .index-header .navbar_nav li { margin-left: .3rem; } .index-header .logo img { width: 250px; } .full-container { width: 90%; } } @media screen and (max-width: 1440px) { .index-header .navbar_nav li { margin-left: 0.3rem; } } @media screen and (max-width: 1366px) { .index-header .navbar_nav li { margin-left: 0.1rem; } .index-header .nav { margin-right: 16px; padding-right: 30px; } } @media screen and (max-width: 1200px) { .sj-menu { display: block; } .index-header .nav { display: none; } .index-header .fl { padding: 20px 0; } .index-header #navToggle2 { display: none; } .index-header #navToggle { display: block; } .index-header .logo { border: none; padding-left: 0; } } @media screen and (max-width: 992px) { .index-header .content { padding: 0 15px; } .index-header .nav { display: none; } .index-header .logo { padding-left: 0; border: none; } } @media screen and (max-width: 768px) { .index-header .fr .shares { display: none; } .full-container { max-width: 93%; } .index-header { padding: 0; box-shadow: none; } .index-footer ul{ display: none; } .index-footer p br{ display: block; } } @media screen and (max-width: 375px) { } @media screen and (max-width: 360px) { } @media screen and (max-width: 320px) { }