.mobile{width: 100%;position:relative;height: 40px;display: none;top:0;right: 0;z-index: 999;background-color: #164b97} .mobile-inner-header{width:100%; height: 40px;position: absolute;top: 0px;right: 0px;z-index: 2} .mobile-inner-header-icon{ color: #ffffff; height: 40px;font-size:25px;text-align: center; float:right;width: 40px;position: relative; -webkit-transition: background 0.5s; -moz-transition: background 0.5s; -o-transition: background 0.5s; transition: background 0.5s; } .mobile-inner-header-icon:hover{ cursor: pointer;} .mobile-inner-header-icon span{ position: absolute; left: calc((100% - 25px) / 2); top: calc((100% - 1px) / 3); width: 25px; height: 2px; background-color: #fff;} .mobile-inner-header-icon span:nth-child(1){transform: translateY(4px) rotate(0deg);} .mobile-inner-header-icon span:nth-child(2){transform: translateY(-4px) rotate(0deg);} .mobile-inner-header-icon-click span:nth-child(1){animation-duration: 0.5s; animation-fill-mode: both;animation-name: clickfirst;} .mobile-inner-header-icon-click span:nth-child(2){animation-duration: 0.5s; animation-fill-mode: both;animation-name: clicksecond;} .mobile-inner-header-icon{ color: #fff; height: 40px;float:right;width: 50px;position: relative; cursor: pointer;margin-right: 5px;text-align: right;} .mobile-inner-header-icon-click{margin-top: 5px;} .mobile-inner-header-icon-out span{width: 22px;height: 2px;background-color:#fff;display: none;} .mobile-inner-header-icon.iconfont{font-size: 30px;line-height: 32px;text-align: center;font-weight: bold;} .mobile-inner-header-icon-out span:nth-child(1){ animation-duration: 0.5s; animation-fill-mode: both; animation-name: outfirst; } .mobile-inner-header-icon-out span:nth-child(2){ animation-duration: 0.5s; animation-fill-mode: both; animation-name: outsecond; } .mobile-inner-header-icon-out span:nth-child(2){ animation-duration: 0.5s; animation-fill-mode: both; animation-name: outthird; } .mobile-inner-header-icon span:nth-child(1){transform: translateY(4px) rotate(0deg);} .mobile-inner-header-icon span:nth-child(2){transform: translateY(-4px) rotate(0deg);} .mobile-inner-header-icon span:nth-child(3){transform: translateY(-4px) rotate(0deg);} .mobile-inner-header-icon-click span:nth-child(1){animation-duration: 0.5s; animation-fill-mode: both;animation-name: clickfirst;} .mobile-inner-header-icon-click span:nth-child(2){animation-duration: 0.5s; animation-fill-mode: both;animation-name: clicksecond;} .mobile-inner-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 } } .mobile-inner-header-icon-out span:nth-child(1){ animation-duration: 0.5s; animation-fill-mode: both; animation-name: outfirst; } .mobile-inner-header-icon-out span:nth-child(2){ animation-duration: 0.5s; animation-fill-mode: both; animation-name: outsecond; } .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); } } .mobile-inner-nav{ background:#164b97;width: 100%; position: absolute;top: 40px;left: 0px;padding-top: 10px;padding-bottom: 25px;display: none;} .mobile-inner-nav a{display: inline-block;line-height: 45px; text-decoration: none; width: 100%;font-size: 14px; border-bottom: solid 1px #224a75; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;color:#fff; } .mobile-inner-nav a:hover{color:#fff;} .mobile-inner-nav li{position: relative;padding: 0 20px;} .mobile-inner-nav li a{text-indent: 15px;letter-spacing: 1px} .mobile-inner-nav li strong{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; color: #fff; opacity: 0.8; font-weight: normal;} .mobile-inner-nav dd strong{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; color: #fff; opacity: 0.8; font-weight: normal;} .mobile_subNav dd{ position: relative; } .mobile-inner-nav a{-webkit-animation-duration: 0.5s;animation-duration: 0.5s;-webkit-animation-fill-mode: both;animation-fill-mode: both;-webkit-animation-name: returnToNormal;animation-name: returnToNormal;} .mobile_search .search1 input { position: absolute; height: 34px; line-height: 34px; color: #262626; border: none; background: none; top: 0px; padding-left: 0px; } .mobile_search .search1 input.notxt { padding: 0 0 0 7px; font-size: 14px; } @-webkit-keyframes returnToNormal { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes returnToNormal { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .mobile_subNav{display: none;padding-left:10px;} .mobile-inner-nav dd a{height: 35px;line-height: 35px;border-bottom: dotted 1px rgba(219,219,219,0.2);font-size: 13px;} .mobile_search{clear: both;position: relative;height: 36px;margin:10px 20px 0;border-bottom:solid 1px #224a75;overflow: hidden;} .mobile_search input.notxt{width: 90%;color:#fff;margin-left:45px;border:none;} .mobile_search input.notxt1{width: 55px;background-color:#fff;right:auto;left:0;background:url('../images/serBtn.png') no-repeat center center;border:none;} .mobile-link{float: left;padding-left: 10px;} .mobile-link a{color:#fff;margin:0 5px;height: 40px;line-height: 40px; font-size: 15px;} .mobile-link02{margin:0 20px;} .mobile-inner-nav .mobile-link02 a {width: auto;float: left;margin:0 7px;} .mobile-inner-nav a, .mobile_search { border-bottom-color: rgba(255,255,255,0.3); } @media screen and (max-width: 1300px) { .header-content{ width: 90%; } .navs{ width: 100%; } .navss{ width: 8.5%!important; } .index-main-box .index-main{ width: 100%!important; } .box{ width: 90%; height: 670px; margin: 0 auto; float: none; } .ml{ width: 45%; } .mr{ width: 48%; } .footer{ width: 100%; } .news_list li.news7 span.news_title{ width: 85%; height: 44px; overflow: hidden; } .m1{ width: 41%; float: left; margin-left: 5%; } .m2{ float: right; width: 300px; margin-right: 20%; height: 420px; } .hnav-c{ width: 100%; } .fa-sort-desc{ display: none; } .banner{ height: auto!important; } .flexslider{ height: auto!important; } .banner li img{ height: auto!important; } .listdt{ height: auto; } } @media screen and (max-width: 1000px) { .header-nav{ display: none; } .mobile{ display: block; } .search{ display: none; } .hc_img a{ display: block; margin: 0 auto; width: 602px; } .news_list li.news7 span.news_title{ width: 80%; } .m2{ margin-right: 10%; } } @media screen and (max-width: 800px) { .mr{ width: 45%; } } @media screen and (max-width: 500px) { .header-content{ height: auto; } .hc_img{ margin:10px 0px; } .hc_img a{ width: 100%; } .hc_img img{ width: 100%; } .footer .lf{ display: none; } .footer .md{ float: none; width: 100%; } .footer .rt{ display: none; } .box{ width: 100%; height: auto; } .ml{ width: 90%; float: none; margin: 0 auto; } .mr{ width: 90%; float: none; margin: 0 auto; } .m1{ width: 90%; float: none; margin: 0 auto; } .m2{ float: none; margin: 0 auto; } }