@red: #da0302; @blue: #0d1558; @gray3a: #3a3a3a; @grayd4: #d4d4d4; @grayc1: #c1c1c1; @graye1: #e1e1e1; @grayee: #eeeeee; @orange: #ff7200; @gray2c: #2c2c2c; @white: white; @black: black; @a6a8bf: #a6a8bf; @images: "../images/"; @font_weight:lighter; @min_width:768px; @font-size-base: 1rem; body { font-family: "Georgia", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 20px; z-index: 1; left: 0px; right: 0px; } @media only screen and (min-width: 400px) { html { font-size: 21.33333333px !important; } } @media only screen and (min-width: 414px) { html { font-size: 21px !important; } } @media only screen and (min-width: 480px) { html { font-size: 25.6px !important; } } @media only screen and (min-width: 768px) { html { font-size: 16px !important; } } @media only screen and (min-width: 1024px) { html { font-size: 25.6px !important; } } .maxW1600 { max-width: 1600px; @media only screen and (min-width: 768px) { margin: 0 15px; } @media only screen and (min-width: 1630px) { margin: 0 auto; } } .text-ellipsis-1 { text-overflow: ellipsis; -moz-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .text-ellipsis-2 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .text-ellipsis-3 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .text-ellipsis-4 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; } .no_line { &:hover, &:focus { text-decoration: none !important; } } .line-1{ width: 100%; height: 1px; background-color: @gray3a; transform: scaleY(0.5); @media (min-width: @min_width) { transform: scaleY(1); } } .line-c1-1{ width: 100%; height: 1px; background-color: @grayc1; transform: scaleY(0.5); @media (min-width: @min_width) { transform: scaleY(1); } } .line-v-1{ width: 1px; height: 100%; background-color: @gray3a; transform: scaleX(0.5); @media (min-width: @min_width) { transform: scaleX(1); } } .clear { clear: both; } img { max-width: 100%; } .ff{ position: fixed!important; top: 0; left: 0; right: 0; z-index: 19; transition: all .3s; } header { border-bottom: 4px solid @gray3a; .header-top { display: flex; justify-content: center; .logo { padding: 22px 0; margin: 0 auto; width: 70%; position: relative; i{ position: absolute; left: 0; right: 0; top:0; bottom: 0; z-index: 1; background-color: @white; display: none; } } .logo-white{ display: none; padding: 22px 0; position: fixed; z-index: 23; top: 0; max-width: 70%; margin: 0 auto; } } @media (min-width: @min_width) { border-bottom: 3px solid @gray3a; .header-top { .logo{ padding: 30px 0; width: auto; margin: 0; } .logo-white{ max-width: 50%; } } } } .nav_right{ div.search-toggle{ img{ max-height: 20px; } } } // search .t-search { position: fixed; left: -1px; right: -1px; top: 0; height: 100vh; margin: 0; padding: 0; padding-top: 100px; z-index: 20; background-color: rgba(51,51,51,0.95); display: flex; justify-content: center; align-items: center; a.search-toggle { height: 23px; right: 20px; top: 12px; width: 23px; position: absolute; z-index: 99; .fs-icon--close { color: #fff; display: flex; justify-content: center; align-items: center; fill: currentColor; } } form { max-width: 60%; width: 100%; margin: 0 auto; align-items: center; border-bottom: 2px solid fade(@white,80%); display: flex; justify-content: center; position: relative; input { background: none; border: none; color: @white; font-size: 20px; font-weight: 400; text-align: center; width: 75%; } ::-webkit-input-placeholder { color: fade(@white, 80%); } :-moz-placeholder { color: fade(@white, 80%); } ::-moz-placeholder { color: fade(@white, 80%); } :-ms-input-placeholder { color: fade(@white, 80%); } button { color: @white; height: 100%; position: absolute; right: 0; top: 0; fill: currentColor; background: none; border: 0; svg { height: 20px; } } } } @media (max-width: 767px) { .navbar { background-color: @blue; margin: 0; padding: 0 15px; height: 48px; line-height: 48px; border-radius: 0; & > div { display: flex; justify-content: space-between; align-items: center; } .navbar-header { margin-right: 0; margin-left: 0; flex: 1; .navbar-toggle { padding: 0; position: relative; float: left; border: 0; border-radius: 0; .icon-bar { transition: all .2s ease-in-out; width: 23px; &:nth-child(2) { margin: 6px 0; } } &[aria-expanded="false"] { position: relative; .icon-bar { background-color: @white; } } &[aria-expanded="true"] { position: fixed; right: 14px; top: 14px; margin: 0; z-index: 23; .icon-bar { background-color: @white; &:nth-child(1) { transform-origin: 0; transform: rotate(45deg); } &:nth-child(2) { opacity: 0; } &:nth-child(3) { transform-origin: 0; transform: rotate(-45deg); } } } } } .navbar-collapse { position: fixed; left: -1px; right: -1px; top: 0; //bottom: 0; height: 100vh; overflow-y: scroll; margin: 0; padding: 0; z-index: 20; background-color: rgba(51,51,51,0.95); .navbar-nav { margin: 0; margin-top: 100px; li { text-align: center; border-bottom: 1px solid fade(@white, 30%); margin: 0 50px; a { font-size: 20px; font-weight: @font_weight; line-height: 30px; color: @white; &:hover, &:focus { background-color: inherit; } } } } } .nav_right{ display: flex; justify-content: flex-end; align-items: center; } .m-r{ margin-right: 15px; } } } @media (min-width: @min_width) { .navbar { background-color: @blue; border-radius: 0; position: relative; height: 64px; line-height: 64px; margin-bottom: 0; border: 0; &>div{ display: flex; justify-content: space-between; align-items: center; height: 64px; } .collapse{ padding: 0; } .navbar-nav { background-color: rgba(51,51,51,0); display: flex !important; justify-content: flex-start; width: 100%; li { //margin-right: 20px; padding: 0 10px; @media (min-width: 1024px) { padding: 0 20px; } //&:last-child { // display: none !important; //} &:hover, &.active{ a{ color:@orange; } } a { font-size: @font-size-base*0.75; font-weight: @font_weight; padding: 0; line-height: 64px; &:hover, &:focus { background-color: inherit; } } a, a.active { color: @white; } } } .nav_right{ display: flex; justify-content: flex-end; align-items: center; cursor: pointer; } .m-r{ margin-right: 15px; } } } #backtop{ position: fixed; bottom: 20px; right: 20px; width: 70px; height: 70px; display: flex; justify-content: center; flex-flow: column; align-items: center; border-radius: 50%; background-color: fade(@red,60%); z-index: 18; cursor: pointer; img{ width: 21px; } span{ margin-top: 4px; display: block; color: @white; font-size: 10px; line-height: 15px; } &:hover, &:active{ background-color: fade(@red,80%); } } .row{ padding: 0; margin: 0; } .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9{ margin: 0; padding: 0; } footer{ background-color: @grayee; display: -ms-flexbox; .con{ text-align: center; margin: 0 15px; padding-top: 20px; display: flex; justify-content: center; flex-flow: column; p{ font-size: 11px; color: @gray3a; line-height: 30px; } ul{ padding: 10px 0; margin: 0; li{ list-style: none; a{ font-size: 14px; line-height: 32px; color: @gray3a; } } } } @media (min-width: @min_width){ .con{ padding-top: 0px; min-height: 140px; max-width: 1000px; margin: 0 auto; p{ font-size: 16px; } ul{ display: flex; justify-content: space-between; align-items: center; padding: 10px 57px; li{ a{ font-size: 18px; } } } } } } @import "index.less"; @import "sub.less";

map