.mobile{width: 100%;position:relative;height: 40px;display: none;top:0;right: 0;z-index: 99;background-color: #800e0e} .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: #9a0001;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 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 .search input { position: absolute; height: 34px; line-height: 34px; color: #262626; border: none; background: none; top: 0px; padding-left: 0px; } .mobile_search .search 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('../new-ver-images/serBtn.png') no-repeat center center;border:none;} .mobile-link{float: left;padding-left: 10px;} .mobile-link a{color:#b8c1bc;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: 1270px) { .navs li a { display: block; padding: 20px 12px; } } @media screen and (max-width: 1220px) { .navs li a { display: block; padding: 20px 8px; } .logo{ height: 60px; margin-top: 32px; } } @media screen and (max-width: 1125px) { .navs li a { display: block; padding: 20px 8px; font-size: 15px; } } @media screen and (max-width: 1085px) { .navs li a { display: block; padding: 20px 5px; font-size: 14px; } } @media screen and (max-width: 1000px) { .mobile { display: block; } .top { display: block!important; padding: 0 15px; background: #9a0001; } .logo { width: 260px; } .logo { padding: 13px 0; float: none; margin: 0 auto; } .logo img { display: block; width: 100%; } .logo img { padding: 0; } nav { display: none; } .hbja{ display: none; } .logo { width: 220px; height: 50px; } } @media screen and (max-width: 900px) { .footersl { float: left; width: auto; } .yuanxun { float: right; height: 134px; display: block; margin-top: 14px; margin-right: 10px; } .footerxx { float: left; color: #bbb; margin-top: 32px; margin-left: 10px; font-size: 13px; } } @media screen and (max-width: 630px) { .footersl { margin: 0 auto; width: 430px; float: none; overflow: hidden; } .dbimg { float: right; margin-top: 25px; margin-right: 30%; } footer { width: 100%; height: 300px; background: #870606; } } @media screen and (max-width: 530px) { .dbimg { float: right; margin-top: 25px; margin-right: 29%; } } @media screen and (max-width: 480px) { .dbimg { float: right; margin-top: 25px; margin-right: 27%; } } @media screen and (max-width: 435px) { footer { width: 100%; height: 400px; background: #870606; } .footersl { margin: 0 auto; width: 100%; float: none; overflow: hidden; } .imgewm { display: block; float: none; width: 100px; margin: 0 auto; margin-top: 20px; border: 3px solid #900; } .footerxx { float: none; color: #bbb; margin: 0 auto; width: 315px; margin-top: 13px; margin-left: auto; font-size: 13px; } .dbimg { float: right; margin-top: 25px; margin-right: 25%; } } @media screen and (max-width: 420px) { .dbimg { float: right; margin-top: 25px; margin-right: 23%; } } @media screen and (max-width: 380px) { .dbimg { float: right; margin-top: 25px; margin-right: 21%; } } @media screen and (max-width: 355px) { .dbimg { float: right; margin-top: 25px; margin-right: 19%; } } @media screen and (max-width: 330px) { .dbimg { float: right; margin-top: 25px; margin-right: 17%; } }