* { margin: 0; padding: 0; border: none; } @media (max-width: 1280px) { html { font-size: 10px !important; } } @media (max-width: 1366px) { html { font-size: 13.5px !important; } } @media (min-width: 1920px) { html { font-size: 20px !important; } } .container { width: 100%; height: 100%; overflow: hidden; background: url(../../images/bg.jpg) 100% 100% no-repeat; } .header { width: 100%; text-align: center; } .header .title { font-size: 17.69rem; margin-top: 0.77rem; color: rgb(230, 176, 112); } .header .total-info { float: left; color: #fff; font-size: 1.54rem; font-weight: 600; padding-left: 10%; margin-top: 0.77rem; } .header .date { color: #fff; float: right; margin-right: 2.62rem; margin-top: 0.77rem; font-size: 1.385rem; } .home { height: calc(100vh); background-image: url("../../images/other-bg.jpg"); background-repeat: no-repeat; background-size: cover; overflow-x: hidden; overflow-y: hidden; } .home-content { min-width: 1350px; margin: 0 auto; } .big-title { position: relative; text-align: center; margin: 0.77rem 0; font-size: 1.54rem; color: rgb(36, 208, 224); font-weight: bold; } .big-title .timer { position: absolute; top: 50%; right: 0; transform: translateY(-50%); font-size: 1.4rem; margin-right: 2.15rem; } .big-title p { font-size: 2.2rem; position: relative; width: 25.4rem; padding: 0.38rem 1.38rem; background: #00868B; margin: 0 auto; color: rgb(36, 208, 224); color: #fff; /* font-weight: 600; */ } .big-title p span { display: block; position: absolute; top: 0; width: 2.15rem; height: 100%; overflow: hidden; } .big-title p span::after { content: " "; display: block; position: absolute; top: 0.6rem; width: 2.5rem; height: 2.5rem; background: #00868B; } .big-title p .left { left: 0; transform: translateX(-100%); } .big-title p .left::after { left: 0.9rem; transform: rotate(-45deg); } .big-title p .right { right: 0; transform: translateX(100%); } .big-title p .right::after { right: 0; transform: translateX(100%); right: 0.9rem; transform: rotate(45deg); } .plant-select-wrap { float: left; height: 3.08rem; line-height: 3.08rem; } .main-content { height: calc(100vh - 7.69rem); margin-top: 1.15rem; padding-left: 0.2%; } .total-info { /* border: 1px solid rgb(36, 208, 224); */ height: 3.65rem; line-height: 3.65rem; float: left; /* margin-left: 5%; */ /* text-align: center; */ } .total-info span { font-size: 1.4rem; /* font-weight: bold; */ margin-left: 1.54rem; color: rgb(36, 208, 224); } .mac-item { justify-content: space-between; margin-bottom: 0.38rem; color: rgb(36, 208, 224); } .mac-item { border: 1px solid rgba(16, 48, 70, 0.5); background-color: rgba(16, 48, 70, 0.5); width: 9.4%; margin-left: 0.3%; float: left; padding-bottom: 1.54rem; padding-top: 1.69rem; } .mac-item .mac-img img { width: 70%; height: 3.85rem; display: inline-block; margin-left: 15%; } .mac-item .mac-img img:hover{ cursor: pointer; } .mac-title { font-size: 1.4rem; color: rgb(36, 208, 224); border-bottom: 1px solid #24d0e0; margin: 2px auto; text-align: center; } .data-item { float: left; font-size: 1.08rem; width: 100%; } .data-name { float: left; } .data-detail { float: left; text-align: center; font-size: 1.23rem; width: 100%; } .data-detail td { height: 2.4rem; } .data-detail div { text-align: center; width: 100%; padding-top: 0.62rem; font-size: 1.23rem; height: 2.31rem; } .mac-info-category { float: left; width: 10%; border: 1px solid rgba(16, 48, 70, 0.5); background-color: rgba(16, 48, 70, 0.5); margin-left: 0.5%; padding-bottom: 1.54rem; padding-top: 1.77rem; } .maccode-title { font-size: 1.08rem; text-align: center; float: left; width: 30%; color: rgb(36, 208, 224); } .detail-title { float: left; width: 69%; } .mac-info-category table { color: rgb(36, 208, 224); font-size: 1.08rem; margin: 0 auto; } .category { width: 40%; padding-left: 1.15rem; padding-right: 1.15rem; text-align: center; background-color: #00868B; color: #fff; } .sub-category { padding-left: 1.15rem; text-align: center; padding-right: 1.15rem; padding-top: 0.46rem; padding-bottom: 0.46rem; } table { border-right: 1px solid; border-bottom: 1px solid; } table tr td { border-left: 1px solid; border-top: 1px solid; } .data-detail table { color: rgb(36, 208, 224); width: 100%; } .data-detail table tr td { /* padding-left: 1.15rem; */ text-align: center; /* padding-right: 1.15rem; */ /* padding-top: 0.46rem; */ /* padding-bottom: 0.46rem; */ font-size: 1.08rem; }