.headerF{ width: 100%; background: #F4F4F4; display: flex; } .headeF{ width: 1200px; height: 35px; line-height: 35px; margin: auto; display: inline-block; } .headeF1{ float: left; font-size: 12px; color: #666666; } .headeF2{ float: right; font-size: 12px; color: #555555; } .headeF2 a{ color: #555555; } .headeF2 img{ height: 10px; margin-left: 10px; margin-right: 10px; display: inline-block; vertical-align: middle; } .headerT{ width: 100%; display: flex; } .headeT{ width: 1200px; margin:20px auto; display:inline-block } .headeT1{ float: left; } .logo{ width: 140px; display: inline-block; vertical-align: middle; } .headeT11{ border-left: 1px solid #D4D3D3; box-sizing: border-box; margin-left: 20px; padding-left: 20px; display: inline-block; vertical-align: middle; } .headeT11_1{ width: 100%; font-family: 'SourceHanSansCNBold'; font-size: 33px; color: #222222; } .headeT11_2{ width: 100%; font-size: 13px; color: #888888; } .headeT2{ float: right; margin-top: 10px; } .headeT2_1{ width: 50px; display: inline-block; vertical-align: middle; } .headeT2_2{ margin-left: 10px; display: inline-block; vertical-align: middle; } .headeT22_1{ width: 100%; font-family: 'centuryschoolbook'; font-size: 26px; color: #307DE7; } .headeT22_2{ width: 100%; margin-top: 10px; font-size: 16px; color: #888888; } .headerS{ width: 100%; background:#01A1EA; display: flex; } .headeS{ width: 1200px; margin: auto; display:inline-block } .headeS1{ width: 12.5%; height: 50px; display: block; text-align: center; line-height: 50px; font-size: 18px; color: white; float: left; } .headeS1.active{ background: #FFB901; height: 60px; font-size: 22px; line-height: 60px; margin-top: -5px; margin-bottom: -5px; position: relative; z-index: 2; } .headeS1:hover{ background: #FFB901; height: 60px; font-size: 22px; line-height: 60px; margin-top: -5px; margin-bottom: -5px; position: relative; z-index: 2; } @media (max-width: 1220px) and (min-width: 1020px) { .headeF{ width: 96%; } .headeT{ width: 96%; } .headeS{ width: 96%; } } @media (max-width: 1020px) { .headerD{ width: 100%; display: flex; } .headeD{ width: 96%; height: 1rem; margin: auto; display: flex; justify-content: space-between; align-items: center; } .headeD1{ display: flex; align-items: center; } .headeT11 { margin-left: 0.1rem; padding-left: 0.1rem; } .headeT11_1 { font-size: 0.28rem; } .headeT11_2 { font-size: 0.18rem; } .logo{ width: auto; height: 0.9rem; display: block; } .menubtn i{ display:block; width:0.4rem; height:0.04rem; background-color:#000; -webkit-transition:.5s; -moz-transition:.5s; -o-transition:.5s; transition:.5s; border-radius: 0.02rem;} .menubtn i:nth-child(1){ -webkit-transform-origin:left bottom; -moz-transform-origin:left bottom; -ms-transform-origin:left bottom; -o-transform-origin:left bottom; transform-origin:left bottom;} .menubtn i:nth-child(2){ margin-top:0.08rem;} .menubtn i:nth-child(3){ margin-top:0.08rem; -webkit-transform-origin:left top; -moz-transform-origin:left top; -ms-transform-origin:left top; -o-transform-origin:left top; transform-origin:left top;} .menubtn.on i:nth-child(1){ -webkit-transform:rotate(36deg); -moz-transform:rotate(36deg); -ms-transform:rotate(36deg); -o-transform:rotate(36deg); transform:rotate(36deg);} .menubtn.on i:nth-child(2){ opacity:0;} .menubtn.on i:nth-child(3){ -webkit-transform:rotate(-36deg); -moz-transform:rotate(-36deg); -ms-transform:rotate(-36deg); -o-transform:rotate(-36deg); transform:rotate(-36deg);} }