.gp-header5 { width: 100%; z-index: 999; position: relative; } .gp-header5 .gp-menu { width: 100%; position: relative; height: 40px; display: none; z-index: 99991; /* background: #f0efe1;*/ background-color: #036f6f; } .gp-header5 .gp-menu .gp-menu-header { width: 100%; height: 40px; position: absolute; top: 0px; right: 0px; } .gp-header5 .gp-menu .gp-menu-header .gp-menu-header-icon { color: #036f6f; height: 32px; text-align: left; float: right; width: 32px; position: relative; cursor: pointer; margin-right: 20px; font-weight: bold; text-align: right; margin-top: 5px; background: #fff; transition: background 0.5s; } .gp-header5 .gp-menu .gp-menu-header .gp-menu-header-icon span { position: absolute; left: 7px; top: calc((100% - 0px) / 3); width: 20px; height: 2px; background-color: #036f6f; display: block; } .gp-header5 .gp-menu .gp-menu-header .gp-menu-header-icon span:nth-child(1) { transform: translateY(4px) rotate(0deg); } .gp-header5 .gp-menu .gp-menu-header .gp-menu-header-icon span:nth-child(2) { transform: translateY(-4px) rotate(0deg); } .gp-header5 .gp-menu .gp-menu-header .gp-menu-header-icon-click span:nth-child(1) { animation-duration: 0.5s; animation-fill-mode: both; animation-name: clickfirst; } .gp-header5 .gp-menu .gp-menu-header .gp-menu-header-icon-click span:nth-child(2) { animation-duration: 0.5s; animation-fill-mode: both; animation-name: clicksecond; } .gp-header5 .gp-menu .gp-menu-header .gp-menu-header-icon-click span:nth-child(3) { display: none; } .gp-header5 .gp-menu .gp-menu-nav { background-color: #fff; width: 100%; position: absolute; top: 40px; left: 0px; padding-top: 10px; padding-bottom: 25px; display: none; } .gp-header5 .gp-menu .gp-menu-nav .gp-m-link { float: left; line-height: 40px; padding-left: 20px; } .gp-header5 .gp-menu .gp-menu-nav .gp-m-link li { display: inline-block; padding: 0; } .gp-header5 .gp-menu .gp-menu-nav .gp-m-link li a { border-bottom: none; color: #666666; } .gp-header5 .gp-menu .gp-menu-nav li { position: relative; padding: 0 22px; } .gp-header5 .gp-menu .gp-menu-nav li strong { color: #aaa; position: absolute; right: 20px; top: 0; font-size: 25px; cursor: pointer; width: 40px; height: 45px; text-align: center; line-height: 40px; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .gp-header5 .gp-menu .gp-menu-nav li .mobile_subNav { display: none; padding-left: 10px; } .gp-header5 .gp-menu .gp-menu-nav li a { display: inline-block; line-height: 38px; text-decoration: none; width: 100%; font-size: 14px; border-bottom: solid 1px #d3d3d3; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX; text-indent: 15px; } .gp-header5 .gp-menu .gp-menu-nav dd a { height: 35px; line-height: 35px; border-bottom: dotted 1px rgba(0, 0, 0, 0.2); text-indent: 15px; } @-webkit-keyframes flipInX { from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInX { from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } .gp-header5 .gp-menu .gp-menu-nav .gp-m-search { clear: both; position: relative; height: 36px; margin: 10px 30px 0; border: 1px solid #d3d3d3; border-radius: 30px; overflow: hidden; } .gp-header5 .gp-menu .gp-menu-nav .gp-m-search .search { width: 100%; height: 38px; position: relative; overflow: hidden; z-index: 9999; } .gp-header5 .gp-menu .gp-menu-nav .gp-m-search .search input, .gp-header5 .gp-menu .gp-menu-nav .gp-m-search .search button { /* position: absolute; */ width: 80%; outline: none; height: 38px; line-height: 38px; color: #bababa; border: none; background: #eeeeee; /* right: 30px; */ /* top: 0px; */ padding-left: 17px; } .gp-header5 .gp-menu .gp-menu-nav .gp-m-search .search .notxt1 { width: 55px; background-color: #ffffff; color: #036f6f; position: absolute; top: 0; right: 0; height: 35px; border: none; cursor: pointer; overflow: hidden; z-index: 9999; } .gp-header5 .gp-menu .gp-menu-nav .gp-m-search .search .gp-m-search input.notxt { width: 95%; color: #333333; margin-left: 55px; border: none; height: 34px; background: none; padding-left: 10px; font-family: "Microsoft yahei"; } .gp-header5 .gp-menu .mobile-inner-header-icon-out span { width: 20px; height: 2px; background-color: #992c23; display: block; } .gp-header5 .gp-menu .gp-menu-header-icon-out span:nth-child(1) { animation-duration: 0.5s; animation-fill-mode: both; animation-name: outfirst; } .gp-header5 .gp-menu .gp-menu-header-icon-out span:nth-child(2) { animation-duration: 0.5s; animation-fill-mode: both; animation-name: outsecond; } .gp-header5 .gp-menu .gp-menu-header-icon-out span:nth-child(3) { animation-duration: 0.5s; animation-fill-mode: both; animation-name: outthird; } .gp-header5 .gp-menu .mobile-inner-header-icon span:nth-child(1) { transform: translateY(4px) rotate(0deg); } .gp-header5 .gp-menu .mobile-inner-header-icon span:nth-child(2) { transform: translateY(-4px) rotate(0deg); } .gp-header5 .gp-menu .mobile-inner-header-icon span:nth-child(3) { transform: translateY(-4px) rotate(0deg); } .gp-header5 .gp-menu .gp-menu-header-icon-click span { left: calc((100% - 25px) / 2); top: calc((100% - -9px) / 3); } .gp-header5 .gp-menu .gp-menu-header-icon-click span:nth-child(1) { animation-duration: 0.5s; animation-fill-mode: both; animation-name: clickfirst; } .gp-header5 .gp-menu .gp-menu-header-icon-click span:nth-child(2) { animation-duration: 0.5s; animation-fill-mode: both; animation-name: clicksecond; } .gp-header5 .gp-menu .gp-menu-header-icon-click span:nth-child(3) { animation-duration: 0.5s; animation-fill-mode: both; animation-name: clickthird; } @keyframes clickfirst { 0% { transform: translateY(4px) rotate(0deg); } 100% { transform: translateY(0) rotate(45deg); } } @keyframes clicksecond { 0% { transform: translateY(-4px) rotate(0deg); } 100% { transform: translateY(0) rotate(-45deg); } } @keyframes clickthird { 0% { opacity: 0; } 100% { opacity: 0; } } .gp-header5 .gp-menu .mobile-inner-header-icon-out span:nth-child(1) { animation-duration: 0.5s; animation-fill-mode: both; animation-name: outfirst; } .gp-header5 .gp-menu .mobile-inner-header-icon-out span:nth-child(2) { animation-duration: 0.5s; animation-fill-mode: both; animation-name: outsecond; } .gp-header5 .gp-menu .mobile-inner-header-icon-out span:nth-child(3) { animation-duration: 0.5s; animation-fill-mode: both; animation-name: outthird; } @keyframes outfirst { 0% { transform: translateY(0) rotate(-45deg); } 100% { transform: translateY(-4px) rotate(0deg); } } @keyframes outsecond { 0% { transform: translateY(0) rotate(45deg); } 100% { transform: translateY(4px) rotate(0deg); } } @keyframes outthird { 0% { transform: translateY(0) rotate(90deg); } 100% { transform: translateY(12px) rotate(0deg); } } .gp-header5 .header { position: relative; overflow: hidden; } .gp-header5 .header .gp-logo { float: left; display: flex; display: -webkit-flex; align-items: center; padding: 20px 0; } .gp-header5 .header .gp-logo img { max-height: 70px; } .gp-header5 .header .gp-logo a { display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; } .gp-header5 .header .gp-link { float: right; position: relative; margin-top: 10px; } @media screen and (max-width:996px) { .gp-header5 .header .gp-search { display: none; } .gp-header5 .header .gp-link { display: none; } } .gp-header5 .header .gp-search { width: 200px; overflow: hidden; margin: 14px auto 0; position: absolute; right: 0; top: 29px; height: 30px; border-radius: 20px; } .gp-header5 .header .gp-search .ser { z-index: 999; width: 100%; position: absolute; top: 0; left: 0; } .gp-header5 .header .gp-search .ser .search { width: 100%; height: 38px; position: relative; overflow: hidden; z-index: 9999; } .gp-header5 .header .gp-search .ser .search input, .gp-header5 .header .gp-search .ser .search button { border: none; width: 100%; height: 30px; line-height: 28px; color: #bababa; border: none; background: #eeeeee; padding-left: 0px; } .gp-header5 .header .gp-search .ser .search .notxt { color: #bababa; padding-left: 10px; outline: none; height: 30px; font-family: "Microsoft yahei"; font-size: 12px; } .gp-header5 .header .gp-search .ser .search .notxt1 { position: absolute; width: 35px; height: 30px; top: 0px; right: 0px; border: none; color: #036f6f; cursor: pointer; overflow: hidden; background-color: #d9d9d9; z-index: 9999; } @media screen and (max-width: 768px) { .gp-header5 .header .gp-logo { margin: 0 auto; border-left: none; float: none; text-align: center; } .gp-header5 .header .gp-logo .logo_01 img { padding-top: 0; } } @media screen and (max-width: 1024px) { .gp-header5 .header .gp-logo { font-size: 0; } } .gp-header5 .gp-nav { width: 100%; height: 50px; background: #036f6f; } .gp-header5 .gp-nav ul { height: 50px; width: 100%; display: flex; display: -webkit-flex; justify-content: space-around; } .gp-header5 .gp-nav ul li { position: relative; line-height: 50px; padding: 0 15px; } .gp-header5 .gp-nav ul li > a { color: #ffffff; font-size: 16px; text-align: center; display: block; } .gp-header5 .gp-nav ul li .subNav { position: absolute; left: 0; top: 50px; display: none; background: #036f6f; width: 100%; overflow: hidden; z-index: 999; *z-index: 9999; } .gp-header5 .gp-nav ul li .subNav dd a { line-height: 1.4; padding: 8px 0; display: block; text-align: center; color: #ffffff; } .gp-header5 .gp-nav ul li .subNav dd:hover { background: #fff; } .gp-header5 .gp-nav ul li .subNav dd:hover a { color: #333333; } .gp-header5 .gp-nav ul li.on .subNav { display: block; } .gp-header5 .gp-nav ul li:hover { cursor: pointer; color: #ffffff; } .gp-header5 .gp-nav ul li.on { background: #ffffff; } .gp-header5 .gp-nav ul li.on > a { color: #333333; } @media screen and (max-width: 1300px) { .gp-header5 .header, .gp-header5 .nav { width: 92%; } } @media screen and (max-width: 768px) { .gp-header5 .header { height: auto; background: none; } .gp-header5 .gp-nav { display: none; } .wrap_header { height: auto; } .gp-header5 .gp-menu { display: block; } .gp-menu.open .gp-menu-nav { display: block; } } .gp-menu .gp-menu-nav > ul > li > .gp-menu-arrow { cursor: pointer; width: 30px; height: 45px; line-height: 45px; color: #e9e9e9; text-align: right; position: absolute; right: 23px; top: -2px; font-size: 20px; transition: all 0.3s ease-in-out; color: #dad6ce; } .gp-menu .gp-menu-nav li.on .mobile_subNav { display: block; } .gp-menu-nav > ul > li.on > .gp-menu-arrow { transform: rotate(90deg); } .gp-header5 { transition: all 0.4s ease-out 0s; z-index: 10; } .gp-header5.currents { position: fixed; left: 0; right: 0; top: 0; box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); } .gp-header5 .header { transition: all 0.2s ease-in-out 0s; } .gp-header5.currents .header { height: 0; display: none; } .single_img1 .gp-img-responsive { padding-bottom: 26.04%; display: block; } /*侧边栏*/ .asideList5 .gp-subLeft { position: relative; } .asideList5 .gp-subLeft .subLeftTitle { padding: 20px 30px; color: #fff; font-weight: normal; background: #036f6f; position: relative; margin-bottom: 1px; } .asideList5 .gp-subLeft .gp-m-inner-header-icon { width: 40px; height: 40px; text-align: center; color: #fff; position: absolute; right: 0; top: 50%; display: none; line-height: 40px; transform: translateY(-50%); } .asideList5 .gp-subLeft >ul { border: 1px solid #cccccc; border-top: 0; } .asideList5 .gp-subLeft >ul >li { position: relative; border-bottom: 1px solid #cccccc; } .asideList5 .gp-subLeft >ul >li >a { padding: 14px 30px; display: block; transition: all 0.35s ease-in-out; position: relative; position: relative; line-height: 1.4; } .asideList5 .gp-subLeft >ul >li >a:hover { color: #fff; background: #036f6f; margin-right: 0; } .asideList5 .gp-subLeft >ul >li:last-child { border-bottom: none; } .asideList5 .gp-subLeft >ul >li a.active { color: #fff; background: #036f6f; margin-right: 0; } .asideList5 .gp-subLeft >ul >li a.active + .gp-toggles { color: #fff; } .asideList5 .gp-subLeft >ul >li a:hover + .gp-toggles { color: #fff; } .asideList5 .gp-subLeft >ul >li .gp-toggles { width: 40px; height: 50px; position: absolute; right: 0; top: 0; line-height: 50px; text-align: center; cursor: pointer; color: #333; font-size: 18px; } .asideList5 .gp-subLeft >ul >li .gp-second-nav { display: none; background-color: #fafafa; } .asideList5 .gp-subLeft >ul >li .gp-second-nav dd a { display: block; padding: 13px 15px 13px 50px; color: #666; transition: all 0.35s ease-in-out; position: relative; font-size: 15px; } .asideList5 .gp-subLeft >ul >li .gp-second-nav dd a:hover { color: #fff; background: #036f6f; } .asideList5 .gp-subLeft >ul >li .gp-second-nav dd a >span { position: relative; } .asideList5 .gp-subLeft >ul >li .gp-second-nav dd a.active { color: #fff; background: #036f6f; } @media screen and (max-width:996px) { .asideList5 .gp-subLeft .subLeftTitle { padding: 10px 15px; text-align: left; font-size: 20px; margin-left: 0; } .asideList5 .gp-subLeft .gp-m-inner-header-icon { display: block; } .asideList5 .gp-subLeft >ul { display: none; border: none; } .asideList5 .gp-subLeft >ul >li { border: none; } .asideList5 .gp-subLeft >ul >li >a { border-bottom: 1px solid #d3d3d3; padding: 5px 10px; } .asideList5 .gp-subLeft >ul >li .gp-second-nav dd a { padding: 5px 20px 5px 40px; } .asideList5 .gp-subLeft >ul >li .gp-toggles { width: 20px; height: 33px; line-height: 33px; right: 10px; } } .block-list82 { border-bottom: 1px solid #e4e4e4; margin-bottom: 33px; width: 100%; overflow: hidden; } .block-list82 h2 { color: #036f6f; line-height: 2.2; position: relative; display: inline-block; } .block-list82 .gp-bread { float: right; text-align: right; color: #999; height: auto; line-height: 20px; padding: 10px 0; overflow: hidden; } .block-list82 .gp-bread span { margin: 0 2px; display: inline-block; vertical-align: middle; font-size: 12px; } .block-list82 .gp-bread a { color: #999; } .block-list82 .gp-bread a:hover { color: #036f6f; opacity: 1; filter: alpha(opacity=100); } .page-list5 .block-list >li a { display: flex; padding: 12px 0; overflow: hidden; border-bottom: 1px solid #e6e6e6; padding-left: 15px; position: relative; transition: transform 0.35s ease-out; } .page-list5 .block-list >li a::before { content: ''; width: 5px; height: 5px; background-color: #036f6f; position: absolute; left: 0; top: 50%; margin-top: -2.5px; } .page-list5 .block-list >li a p { display: block; flex: 1; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ -webkit-line-clamp: 1; -webkit-box-orient: vertical; white-space: normal; height: 1.3em; line-height: 1.3; } .page-list5 .block-list >li a >span { font-family: 'Arial'; color: #666666; margin-left: 10px; } .page-list5 .block-list >li a:hover { transform: translateX(10px); } .footer_block1 { padding: 30px 0; background-color: #036f6f; } .footer_block1 .footer { line-height: 1.5; } .footer_block1 .footer > span { margin: 0 5px; display: inline-block; } @media screen and (max-width:767px) { .footer_block1 { padding: 20px 0; } }