@bg: #f6f6f6;
@blue: #008cd6;
*::-webkit-scrollbar {
/*滚动条整体蠷?/
width: 1px;
/*高宽分别对应樨竖满动条的尺寸*/
height: 1px;
}
body {
font-size: 13px;
}
.body {
width: 100vw;
min-width: 100vw;
max-width: 100vw;
}
.winp {
display: block;
max-width: calc(100vw - 10px);
&.dt {
display: table;
}
}
.banner {
width: 100vw;
min-width: 100vw;
&.index_index {
height: 60vw;
.banner-wrap {
width: 100vw;
height: 60vw;
.banner-item {
padding: 0;
.box {
width: 70%;
font-size: 15px;
bottom: 40%;
}
}
}
.banner-page {
bottom: 10px;
.banner-page-btn {
font-size: 17px;
padding: 0 10px;
&.banner-page-btn-active {
border-bottom-width: 1px;
}
}
}
.banner-button {
width: 30px;
height: 30px;
bottom: calc(30vw - 40px);
display: none;
i {
line-height: 26px;
font-size: 27px;
}
&.prev {
left: 20px;
}
&.next {
left: calc(100vw - 50px);
}
}
}
}
section {
width: 100vw;
max-width: 100vw;
min-width: 100vw;
padding: 5px;
&.header {
height: 60px;
min-width: 100vw;
max-width: 100vw;
padding: 10px 15px;
a {
&:first-child {
max-width: 30vw;
max-height: 40px;
img {
max-width: 30vw;
max-height: 40px;
}
}
&.blue {
display: inline-block;
}
&.navBtn {
margin-top: 2px;
display: inline-block;
position: fixed;
z-index: 10;
width: 35px;
height: 35px;
right: 15px;
background: #fff;
border-radius: 18px;
box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 10px;
img {
height: 15px;
margin: 10px 8px;
}
}
}
}
}
nav {
width: auto;
margin: 0;
padding: 30px 60px;
display: none;
position: fixed;
top: 8px;
right: 13px;
z-index: 1;
box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 10px;
background: #fff;
border-radius: 10px;
float: none;
&.index_index {
li {
a {
color: #333;
&:hover {
color: @blue;
}
}
}
}
li {
float: none;
display: block;
text-align: center;
margin-right: 0;
padding: 13px 0;
a {
font-weight: normal;
}
ul {
display: none;
}
}
}
.footer-menus {
section {
padding: 20px 0;
color: rgba(255, 255, 255, 0.7);
text-align: center;
.qrcode {
padding: 0;
border: none;
float: none;
margin: auto;
vertical-align: top;
&.kf {
margin-right: 0;
margin-left: 20px;
}
}
.menu {
display: none;
}
}
}
.footer-copyright {
padding: 10px;
}
.index_title {
width: 100vw;
max-width: calc(100vw - 10px);
font-size: 18px;
line-height: 1em;
padding-bottom: 25px;
padding-top: 30px;
}
.index_about {
.left {
float: none;
.h45 {
display: none;
}
.w950 {
width: calc(100vw - 10px);
height: auto;
}
.desc {
padding: 20px;
.f17 {
font-size: 15px;
font-weight: normal;
line-height: 20px;
padding: 0;
}
.mb30 {
display: none;
}
}
}
.right {
width: calc(100vw - 10px);
float: none;
display: block;
margin-top: 10px;
text-align: center;
a {
width: 49%;
height: 150px;
&:last-child {
margin-top: 0;
}
&:hover {
.bg_blue {
display: none;
}
}
img {
height: 50px;
margin-top: 30px;
}
.f25 {
font-size: 16px;
margin-top: 10px;
}
}
}
.bottom {
margin-top: 0;
width: calc(100vw - 10px);
a {
float: left;
width: calc((100vw - 20px) / 3);
height: 130px;
&:first-child {
margin-right: 5px;
}
&:last-child {
margin-right: 0;
}
&:hover {
.bg_blue {
display: none;
}
}
img {
margin-top: 25px;
max-height: 40px;
}
.f25 {
font-size: 15px;
margin-top: 10px;
}
}
}
}
.index_product {
.image {
width: 100%;
img {
width: 100%;
height: 50vw;
}
}
}
.index_product {
height: 390px;
margin-top: 30px;
>.h600 {
width: 100vw;
max-width: 100vw;
height: 60vw;
div {
width: 100vw;
height: 60vw;
background: #aaa;
img {
width: 100vw;
height: 60vw;
}
}
}
.title {
bottom: 90px;
top: auto;
border-radius: 0;
background: rgba(0, 0, 0, 0.4);
width: 100%;
max-height: 60vw;
min-height: initial;
padding: 20px;
.text {
color: #fff;
font-size: 20px;
width: 100%;
margin: 0;
max-width: calc(100% - 40px);
.mt15 {
color: #fff;
opacity: 0.8;
}
.mt30 {
margin-top: 5px;
text-align: left;
img {
height: 10px;
}
}
}
}
section {
margin: 20px 0;
text-align: center;
.tab {
width: 100%;
height: 1.7em;
a {
width: calc(100% / 5);
font-size: 14px;
}
i {
width: 20vw;
}
}
}
}
.index_news {
.pics {
width: calc(100vw - 10px);
height: 30vw;
border-radius: 10px;
margin: 0 0 10px;
display: block;
position: relative;
&:last-child {
float: none;
}
&:hover {
border-radius: 10px;
label {
top: 15px;
}
img {
width: 40vw;
height: 30vw;
margin: 0;
}
}
img {
width: 40vw;
height: 30vw;
border-radius: 10px;
margin: 0;
position: absolute;
left: 0;
top: 0;
}
label {
width: calc(60vw - 30px);
background: none;
top: 15px;
left: 43vw;
opacity: 1;
padding: 0;
height: 25px;
span {
font-size: 16px;
text-align: left;
font-weight: bold;
}
}
.cont {
display: block;
width: calc(60vw - 30px);
position: absolute;
top: 35px;
left: 43vw;
.row {
-webkit-line-clamp: 3;
font-size: 12px;
line-height: 1.5em;
color: #888;
}
.time {
display: block;
font-size: 11px;
color: #ccc;
}
}
}
.list {
width: calc(100vw - 10px);
height: 25px;
margin-top: 20px;
line-height: 25px;
position: relative;
&::after {
display: block;
border-bottom-width: 1px;
}
label {
float: left;
display: inline-block;
width: 5em;
height: 25px;
text-align: center;
color: #fff;
font-size: 13px;
background-color: #008cd6;
border-radius: 5px;
}
img {
display: none;
}
span {
font-size: 13px;
margin-left: 10px;
width: calc(100% - 5em - 100px);
max-width: calc(100% - 5em - 100px);
}
em {
float: right;
font-size: 12px;
margin-left: 0;
width: 90px;
text-align: right;
}
&:hover {
width: calc(100vw - 10px);
img {
&.blue {
display: none;
}
&.black {
display: none;
}
}
}
}
}
.index_links {
margin: 30px 0;
section {
padding: 40px 10px 10px;
.title {
font-size: 18px;
}
.list {
div {
display: block;
width: 100%;
text-align: left;
margin-bottom: 30px;
}
}
}
}
#info {
max-width: 100vw;
}
.aboutus_info {
display: table;
margin-left: 5px;
>i {
width: 100%;
display: block;
height: 65vw;
border-radius: 10px;
}
>div {
width: 100%;
height: auto;
padding: 0;
margin-top: 10px;
div {
line-height: 2em;
font-size: 12px;
padding: 5px;
}
}
}
#base {
margin: 0;
.aboutus_base {
height: calc(216vw + 110px);
.map {
display: block;
width: 100%;
margin-top: 0;
height: 82.5vw;
}
.base {
top: 84vw;
height: auto;
div {
float: left;
width: calc(50% - 3px);
height: calc(30vw + 30px);
position: unset;
margin-bottom: 10px;
&:nth-child(2n) {
float: right;
}
i {
display: none;
}
span {
display: block;
img {
width: 100%;
height: 30vw;
}
}
}
}
}
}
#his {
max-width: 100vw;
margin-top: 0;
}
.aboutus_history {
background: transparent;
&.winp {
display: table;
}
.layout {
width: 100%;
float: none;
height: auto;
background: #fff;
>div {
width: 100vw;
height: auto;
padding: 5px;
.item {
display: table;
padding: 10px 0;
border-bottom-width: 1px;
.year {
font-size: 20px;
font-weight: bold;
line-height: 1em;
width: 65px;
}
.desc {
width: calc(100% - 65px);
font-size: 12px;
color: #666;
line-height: 20px;
}
}
}
}
}
#hexin {
margin: 0;
max-width: 100vw;
}
.aboutus_youshi {
margin: 0;
.w560 {
width: 100%;
}
.h560 {
height: 90vw;
}
.circular {
width: 90vw;
height: 90vw;
margin: auto;
svg {
left: 35px;
top: 36px;
}
}
.bg_blue {
padding: 15px;
font-size: 13px;
line-height: 1.8em;
}
.mt80 {
height: auto;
margin-top: 20px;
display: table;
img {
width: 83vw;
height: 83vw;
margin: -15px auto 0 0;
}
.fr {
float: unset;
padding: 0;
width: 100%;
height: auto;
display: block;
font-size: 12px;
line-height: 1.8em;
}
}
.cont1 {
display: block;
}
}
#honor {
margin: 0;
max-width: 100%;
}
.about_honor {
height: calc(100vw + 120px);
section {
height: calc(100vw + 80px);
padding: 0;
margin-top: 40px;
}
.btn {
font-size: 50px;
line-height: 50px;
width: 30px;
text-align: center;
}
.page {
bottom: 30px;
width: 60vw;
right: 20vw;
}
.about_honor_box {
width: 100vw;
height: calc(100vw + 20px);
margin: 0;
.about_honor_ul {
height: calc(100vw + 20px);
left: 0;
.about_honor_item {
width: 60vw;
height: 100vw;
margin: 10px 20vw;
padding: 15px;
.title {
font-size: 18px;
font-weight: bold;
}
.desc {
font-size: 11px;
line-height: 1.7em;
color: #666;
margin-top: 10px;
height: calc(100vw - 70px);
}
}
}
}
}
#cul {
margin: 0;
max-width: 100%;
}
.about_cul {
margin: 0;
a {
float: left;
width: calc(50vw - 10px);
margin-right: 5px;
margin-bottom: 10px;
&:nth-child(2n) {
margin-right: 0;
float: right;
}
.title {
font-size: 18px;
}
&:hover {
.title {
top: -60px;
margin-top: 0;
}
.desc {
font-size: 14px;
line-height: 1.5em;
padding: 110px 10px 10px;
ul {
display: block;
overflow: initial;
}
}
} // &:last-child {
// &:hover {
// .title {
// top: -110px;
// margin-top: 0;
// }
// .desc {
// font-size: 12px;
// line-height: 1.5em;
// padding: 70px 10px 10px;
// }
// }
// }
}
}
#zeren {
margin: 0;
max-width: 100%;
}
.about_zeren {
height: 90vh;
section {
height: 90vh;
padding: 0;
.item {
width: 15vw;
height: 90vh;
text-align: center;
padding: 120px 3vw 20px;
img {
margin: auto;
max-height: 25px;
max-width: 25px;
}
.f25 {
font-size: 14px;
margin-left: 2vw;
margin-right: 2vw;
}
&.active {
width: calc(100% - 45vw);
padding: 60px 20px 20px;
background-color: rgba(0, 0, 0, 0.5);
img {
margin: auto;
max-height: 40px;
max-width: 40px;
}
.f25 {
font-size: 16px;
text-align: center;
}
.desc {
display: block;
font-size: 13px;
line-height: 2em;
}
}
}
}
.bgs {
width: 100vw;
height: 90vh;
}
}
.product_section {
padding: 0;
.mobi_product_cate {
margin-top: -6px;
width: 100%;
display: table;
a {
float: left;
width: 20%;
height: 40px;
line-height: 40px;
display: inline-block;
border-right: @bg 1px solid;
border-bottom: @bg 1px solid;
text-align: center;
&:last-child {
margin-right: 0;
}
&.active {
color: @blue;
border-bottom-color: @blue;
}
}
}
.product_titles {
display: none;
width: 100vw;
max-width: 100vw;
.product_title {
border-radius: 0 0 10px 10px;
padding: 20px;
height: 80px;
width: 110px;
margin-top: -12px;
margin-left: 5px;
.en {
display: none;
}
.cn {
font-size: 16px;
}
}
.product_desc {
float: right;
margin-right: 5px;
width: calc(100% - 130px);
padding: 0;
font-size: 14px;
line-height: 1.7em;
color: #999;
title {
font-size: 18px;
margin-bottom: 5px;
color: #333;
}
}
}
.product_item {
width: 100vw;
margin-top: 10px;
margin-bottom: 50px;
&.mh720 {
height: calc(100vw + 220px);
}
.product_cate {
width: 100vw;
margin: 0;
.cate {
float: none;
width: 100vw;
box-shadow: none;
height: 40px;
padding: 0;
margin-top: 20px;
border-bottom: @blue 1px solid;
margin-bottom: 10px;
border-radius: 0;
text-align: left;
font-size: 16px;
font-weight: normal;
line-height: 25px;
img {
float: left;
width: auto;
height: 25px;
margin: 0 10px;
}
}
}
}
>.pb100 {
padding-bottom: 50px;
.product_more {
height: 20px;
}
}
}
.product_marqu {
width: 100vw;
height: calc((100vw + 75px) / 2);
&.pdetail_marqu {
width: 100vw;
margin-bottom: 20px;
.box {
width: 100vw;
}
}
.btn {
display: none;
}
.box {
margin-left: 0;
width: 100vw;
padding-left: 5px;
height: calc((100vw + 75px) / 2);
overflow-x: auto;
overflow-y: hidden;
&::-webkit-scrollbar {
/*滚动条整体樋?/
width: 0;
/*高宽分别对应樤ת竖满К动条的尺寸*/
height: 0;
}
.ul {
height: calc((100vw + 75px) / 2);
a {
width: calc((100vw - 70px) / 2);
height: calc((100vw + 50px) / 2);
margin: 6px 5px;
padding: 5px;
span {
font-size: 13px;
line-height: 17px;
}
.img {
width: calc((100vw - 70px) / 2 - 10px);
height: calc((100vw - 70px) / 2 - 10px);
}
}
}
}
}
.product_air {
width: 100vw;
padding: 5px;
margin-top: 20px;
.product_cate {
img {
width: 40vw;
height: 25vw;
}
.ml40 {
margin-left: 20px;
width: calc(60vw - 30px);
max-width: calc(60vw - 30px);
}
.f25 {
margin-top: 0;
font-size: 16px;
}
.f18 {
font-size: 12px;
margin-top: 10px;
}
}
}
.location {
display: none;
}
.pdetail_item {
width: 100vw;
padding: 20px 5px;
&:first-child {
margin-top: 0;
}
.pdetail_item_img {
width: 40vw;
display: inline-block;
margin-bottom: 10px;
&.left {
margin-right: 10px;
}
&.right {
margin-left: 10px;
}
}
.pdetail_item_cont {
float: none;
display: contents;
width: calc(60vw - 30px);
font-size: 12px;
line-height: 1.8em;
}
}
.pdetail_title {
margin-top: 20px;
padding-left: 10px;
}
table {
margin: 5px;
width: calc(100vw - 10px);
th {
font-size: 14px;
line-height: 2em;
padding: 5px 0;
}
td {
font-size: 12px;
line-height: 2em;
padding: 5px 0;
}
}
.pro_detail {
font-size: 13px;
margin-bottom: 20px;
margin-left: 5px;
line-height: 1.8em;
}
.nav_cate {
margin-top: 15px;
}
.news_list {
padding: 0 0 20px;
display: table;
margin-bottom: 20px;
border-bottom: #eee 1px solid;
i {
width: calc(100vw - 10px);
height: 65vw;
}
span {
width: calc(100vw - 10px);
height: auto;
.title {
font-size: 16px;
}
.time {
font-size: 11px;
margin: -5px 0 0;
}
.desc {
font-size: 14px;
line-height: 1.7em;
max-height: 5.1em;
height: auto;
}
}
&:hover {
background-color: #e6f6ff;
box-shadow: none;
i {
animation: myhover_y360 1s linear;
}
}
}
.pageBox {
width: calc(100vw - 10px);
padding: 20px 10px;
overflow: auto;
text-align: left;
display: block;
&::-webkit-scrollbar {
/*滚动条整体样?/
width: 0;
/*高宽分别对应横竖滚动条的尺寸*/
height: 0;
}
ul {
height: 28px;
width: 130vw;
}
a {
height: 28px;
line-height: 28px;
padding: 0 10px;
font-size: 12px;
&:first-child {
margin-right: 5px;
}
&:last-child {
margin-left: 5px;
}
}
}
.content_detail {
margin-bottom: 20px;
line-height: 1.8em;
font-size: 14px;
.detail_title {
font-size: 18px;
line-height: 1.8em;
}
.detail_desc {
margin-bottom: 20px;
img {
margin: auto;
width: auto;
height: auto;
max-width: calc(100vw - 10px);
}
}
}
.detail_page {
margin: 30px 0;
padding: 0;
width: calc(100vw - 10px);
a {
width: auto;
height: 30px;
line-height: 30px;
font-size: 12px;
padding: 0 10px;
&.prev:before {
font-size: 13px;
width: auto;
border: none;
margin-right: 5px;
}
&.next:after {
font-size: 13px;
width: auto;
border: none;
margin-left: 5px;
}
&.lnk {
font-size: 12px;
line-height: 30px;
&:hover {
text-decoration: none;
}
}
}
}
.mobi_index_title {
margin-top: 0;
}
.mobi_contact {
margin-bottom: 0;
.contact {
width: 100%;
float: none;
display: table;
height: auto;
margin: 0 0 20px;
padding-bottom: 20px;
border-bottom: @bg 1px solid;
&:first-child {
padding: 0 0 20px;
border-bottom-color: @blue;
}
&:last-child {
border-bottom: none;
}
}
}
.mobi_joinus {
&.mb100 {
margin-bottom: 0;
}
}
.join_index {
float: none;
display: block;
width: calc(100vw - 30px);
height: auto;
margin-bottom: 20px;
margin: 20px 10px;
position: relative;
&:nth-child(2n-1) {
margin-right: 0;
margin-left: 10px;
}
i {
width: calc(100vw - 30px);
height: 70vw;
margin-bottom: 0;
border-radius: 15px;
}
span {
position: absolute;
top: 50%;
left: 0;
width: calc(100vw - 30px);
transform: translateY(-50%);
line-height: 50px;
background: rgba(255, 255, 255, 0.7);
text-align: center;
}
}
.mobi_join_nav_cate {
padding: 5px;
margin: 10px 0;
a {
width: calc(25% - 6px);
margin: 3px;
font-size: 12px;
font-weight: normal;
line-height: 35px;
padding: 0;
text-align: center;
overflow: hidden;
}
}
.mobi_join_rec {
margin-top: 0;
padding: 10px;
width: calc(100vw - 20px);
.post {
width: calc(100vw - 20px);
}
}
.search {
cite {
float: none;
display: block;
margin-bottom: 0;
width: 100%;
}
div {
display: block;
float: none;
width: 100%;
select {
width: 30vw;
border-radius: 5px;
background: #fff;
}
input {
&[type="button"] {
width: 20vw;
font-size: 12px;
}
}
label {
input {
+i {
border-color: #ddd;
}
}
}
}
}
.mobi_join_table {
margin-top: 20px;
width: calc(100vw - 30px);
}
.mobi_join_bot {
margin-top: -20px;
margin-bottom: 20px;
.jobs {
padding: 0 10px;
>img {
width: 100%;
margin-right: 0;
}
>div {
width: 100%;
.desc {
width: 100%;
padding-top: 5px;
img {
position: static;
float: left;
width: 30vw;
margin: -5px 10px 10px 0;
}
&.pr {
display: table;
}
}
}
}
}
.paid_list {
width: calc(100vw - 10px);
padding: 0 5px;
a {
float: none;
width: calc(100vw - 20px);
position: relative;
margin: 10px 0;
.img {
float: none;
display: block;
width: calc(100vw - 20px);
height: 70vw;
}
span {
top: 50%;
left: 0;
z-index: 10;
width: 100%;
height: auto;
transform: translateY(-50%);
position: absolute;
background: rgba(255, 255, 255, 0.7);
text-align: center;
padding: 20px;
.desc {
font-size: 14px;
line-height: 1.5em;
}
}
}
}
.mobi_join_dev {
margin-top: 0px;
width: calc(100vw - 30px);
}
.develop_list {
padding: 10px;
a {
width: 100%;
float: none;
display: block;
margin: 0 0 30px;
height: auto;
i {
width: 100%;
height: 70vw;
}
}
}
.join_develop_marq {
height: 120vw;
.box {
height: 120vw;
.ul {
min-width: 100%;
height: 120vw;
a {
width: 100%;
height: 120vw;
i {
width: 100%;
height: 60vw;
}
span {
width: 100%;
height: 60vw;
label {
padding: 2vw;
big {
font-size: 4vw;
margin-bottom: 2vw;
}
small {
font-size: 2vw;
line-height: 2.5em;
}
}
}
}
}
}
.btn {
width: 30px;
height: 30px;
font-size: 12px;
line-height: 30px;
top: calc(50% + 35px);
}
}
.fixed {
right: 2px;
top: auto;
bottom: 2px;
transform: translateY(0);
a {
border-radius: 50%;
width: 48px;
height: 48px;
padding-top: 13px;
i {
display: none;
}
&:hover {
.qr {
width: 50vw;
height: 50vw;
padding: 10px;
background: #fff;
border: #ddd 1px solid;
border-radius: 20px;
top: -50vw;
}
}
}
}