578 lines
10 KiB
CSS
578 lines
10 KiB
CSS
.slogan {
|
|
color: purple;
|
|
}
|
|
|
|
.slogan>span {
|
|
max-width: 6em;
|
|
}
|
|
|
|
|
|
.slogan>span:nth-child(2) {
|
|
font-family: "楷体";
|
|
min-width: 8em;
|
|
}
|
|
|
|
.container>p {
|
|
font-family: "楷体";
|
|
}
|
|
|
|
.float-box {
|
|
width: 90%;
|
|
/* height: 400px; */
|
|
position: inherit;
|
|
left: 5%;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
padding: 1%;
|
|
margin-top: 20px;
|
|
text-align: center;
|
|
padding-bottom: calc(1% + 50px);
|
|
}
|
|
|
|
.text-left>span {
|
|
text-indent: 2em;
|
|
margin-left: 7.5%;
|
|
margin-right: 7.5%;
|
|
text-align: left;
|
|
}
|
|
|
|
.text-left>img {
|
|
margin-top: 20%;
|
|
}
|
|
|
|
.float-box>h3 {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.float-box>span {
|
|
font-family: "楷体";
|
|
font-weight: bolder;
|
|
}
|
|
|
|
.float-box:hover,
|
|
.float-box:focus {
|
|
box-shadow: 0 11px 32px rgba(115, 115, 156, 0.3);
|
|
transition: all 0.4s linear;
|
|
}
|
|
|
|
.float-container {
|
|
width: 100%;
|
|
/* background: url("../img/superiority.png"); */
|
|
display: flex;
|
|
}
|
|
|
|
.superiority-img {
|
|
margin: 40px auto;
|
|
margin-top: 25%;
|
|
width: 40%;
|
|
}
|
|
|
|
@media screen and (min-width: 992px) {
|
|
p {
|
|
margin: 5% 10%;
|
|
font-size: 1.3vw;
|
|
text-indent: 2em;
|
|
}
|
|
|
|
h2 {
|
|
text-align: center;
|
|
font-size: 3vw;
|
|
}
|
|
|
|
h3 {
|
|
text-align: center;
|
|
font-size: 2vw;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.float-box>span {
|
|
display: block;
|
|
margin-top: 1%;
|
|
margin-bottom: 1%;
|
|
font-weight: 400;
|
|
line-height: 30px;
|
|
font-size: 1.5vw;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 1366px) {
|
|
.header {
|
|
height: 558px;
|
|
max-width: 1366px;
|
|
max-height: 558px;
|
|
}
|
|
|
|
.slogan>span:nth-child(1) {
|
|
position: relative;
|
|
display: block;
|
|
font-size: 105px;
|
|
font-weight: bolder;
|
|
left: 150px;
|
|
top: 80px;
|
|
}
|
|
|
|
.slogan>span:nth-child(2) {
|
|
position: relative;
|
|
display: block;
|
|
font-size: 55px;
|
|
top: 195px;
|
|
left: 150px;
|
|
}
|
|
|
|
.application-container {
|
|
width: 1366px;
|
|
height: 1366px;
|
|
margin: auto;
|
|
margin-bottom: 136.6px;
|
|
}
|
|
|
|
.application-container>div {
|
|
width: 683px;
|
|
height: 546.4px;
|
|
position: relative;
|
|
}
|
|
|
|
.app-item1 {
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.app-item1>img {
|
|
height: 546.4px;
|
|
width: 683px;
|
|
}
|
|
|
|
.app-item2 {
|
|
top: -546.4px;
|
|
left: 683px;
|
|
}
|
|
|
|
.app-item2>span {
|
|
position: relative;
|
|
display: block;
|
|
max-width: 478.1px;
|
|
}
|
|
|
|
.app-item2>span:first-child {
|
|
font-size: 95px;
|
|
top: 20%;
|
|
left: 10%;
|
|
line-height: 95px;
|
|
font-weight: bolder;
|
|
}
|
|
|
|
.app-item2>span:last-child {
|
|
font-size: 54px;
|
|
line-height: 54px;
|
|
top: 35%;
|
|
left: 14%;
|
|
font-family: "楷体";
|
|
}
|
|
|
|
.app-item3 {
|
|
top: -546.4px;
|
|
left: 0;
|
|
background-color: rgba(16, 72, 176, 0.69);
|
|
color: white;
|
|
}
|
|
|
|
.app-item3>span {
|
|
position: relative;
|
|
display: block;
|
|
}
|
|
|
|
.app-item3>span:first-child {
|
|
font-size: 95px;
|
|
top: 15%;
|
|
left: 16%;
|
|
line-height: 95px;
|
|
font-weight: bolder;
|
|
}
|
|
|
|
.app-item3>span:nth-child(2) {
|
|
font-size: 54px;
|
|
line-height: 54px;
|
|
top: 30%;
|
|
left: 20%;
|
|
font-family: "楷体";
|
|
}
|
|
|
|
.app-item3>img {
|
|
width: 546.4px;
|
|
height: 409.8px;
|
|
position: relative;
|
|
top: 191.24px;
|
|
left: 204.9px;
|
|
}
|
|
|
|
.app-item4 {
|
|
top: -1092.8px;
|
|
left: 683px;
|
|
display: flex;
|
|
}
|
|
|
|
.app-item4>* {
|
|
position: relative;
|
|
}
|
|
|
|
.app-item4>img {
|
|
left: -68.3px;
|
|
width: 478.1px;
|
|
height: 321px;
|
|
}
|
|
|
|
.app-item4>div {
|
|
left: -68.3px;
|
|
top: -68.3px;
|
|
background-color: rgb(16, 72, 176);
|
|
height: 389.31px;
|
|
width: 341.5px;
|
|
}
|
|
|
|
.app-item4>span:nth-child(3) {
|
|
position: absolute;
|
|
font-size: 95px;
|
|
top: 85%;
|
|
left: 20%;
|
|
line-height: 95px;
|
|
font-weight: bolder;
|
|
}
|
|
|
|
.app-item4>span:nth-child(4) {
|
|
position: absolute;
|
|
font-size: 54px;
|
|
line-height: 54px;
|
|
top: 115%;
|
|
left: 25%;
|
|
font-family: "楷体";
|
|
}
|
|
|
|
|
|
}
|
|
|
|
@media screen and (min-width: 992px) and (max-width: 1366px) {
|
|
.slogan>span:nth-child(1) {
|
|
position: relative;
|
|
display: block;
|
|
font-size: 8.5vw;
|
|
font-weight: bolder;
|
|
left: 13%;
|
|
top: 6vw
|
|
}
|
|
|
|
.slogan>span:nth-child(2) {
|
|
position: relative;
|
|
display: block;
|
|
font-size: 4.5vw;
|
|
top: 12vw;
|
|
left: 13%;
|
|
}
|
|
|
|
.application-container {
|
|
width: 100vw;
|
|
height: 100vw;
|
|
margin: auto;
|
|
margin-bottom: 10vw;
|
|
}
|
|
|
|
.application-container>div {
|
|
width: 50vw;
|
|
height: 40vw;
|
|
position: relative;
|
|
}
|
|
|
|
.app-item1 {
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.app-item1>img {
|
|
height: 40vw;
|
|
width: 50vw;
|
|
}
|
|
|
|
.app-item2 {
|
|
top: -40vw;
|
|
left: 50vw;
|
|
}
|
|
|
|
.app-item2>span {
|
|
position: relative;
|
|
display: block;
|
|
max-width: 35vw;
|
|
}
|
|
|
|
.app-item2>span:first-child {
|
|
font-size: 7vw;
|
|
top: 20%;
|
|
left: 10%;
|
|
line-height: 7vw;
|
|
font-weight: bolder;
|
|
}
|
|
|
|
.app-item2>span:last-child {
|
|
font-size: 4vw;
|
|
line-height: 4vw;
|
|
top: 35%;
|
|
left: 14%;
|
|
font-family: "楷体";
|
|
}
|
|
|
|
.app-item3 {
|
|
top: -40vw;
|
|
left: 0;
|
|
background-color: rgba(16, 72, 176, 0.69);
|
|
color: white;
|
|
}
|
|
|
|
.app-item3>span {
|
|
position: relative;
|
|
display: block;
|
|
}
|
|
|
|
.app-item3>span:first-child {
|
|
font-size: 7vw;
|
|
top: 15%;
|
|
left: 16%;
|
|
line-height: 7vw;
|
|
font-weight: bolder;
|
|
}
|
|
|
|
.app-item3>span:nth-child(2) {
|
|
font-size: 4vw;
|
|
line-height: 4vw;
|
|
top: 30%;
|
|
left: 20%;
|
|
font-family: "楷体";
|
|
}
|
|
|
|
.app-item3>img {
|
|
width: 40vw;
|
|
height: 30vw;
|
|
position: relative;
|
|
top: 14vw;
|
|
left: 15vw;
|
|
}
|
|
|
|
|
|
.app-item4 {
|
|
top: -80vw;
|
|
left: 50vw;
|
|
display: flex;
|
|
}
|
|
|
|
.app-item4>* {
|
|
position: relative;
|
|
}
|
|
|
|
.app-item4>img {
|
|
left: -5vw;
|
|
width: 35vw;
|
|
height: 23.5vw;
|
|
}
|
|
|
|
.app-item4>div {
|
|
left: -5vw;
|
|
top: -5vw;
|
|
background-color: rgb(16, 72, 176);
|
|
height: 28.5vw;
|
|
width: 25vw;
|
|
}
|
|
|
|
.app-item4>span:nth-child(3) {
|
|
position: absolute;
|
|
font-size: 7vw;
|
|
top: 85%;
|
|
left: 20%;
|
|
line-height: 7vw;
|
|
font-weight: bolder;
|
|
}
|
|
|
|
.app-item4>span:nth-child(4) {
|
|
position: absolute;
|
|
font-size: 4vw;
|
|
line-height: 4vw;
|
|
top: 115%;
|
|
left: 25%;
|
|
font-family: "楷体";
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 992px) {
|
|
|
|
|
|
p {
|
|
margin: 5% 10%;
|
|
text-indent: 4em;
|
|
}
|
|
|
|
h2 {
|
|
text-align: center;
|
|
font-size: 5.5vw;
|
|
}
|
|
|
|
h3 {
|
|
text-align: center;
|
|
font-size: 3.5vw;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.slogan>span:nth-child(1) {
|
|
position: relative;
|
|
display: none;
|
|
font-size: 12vw;
|
|
font-weight: bolder;
|
|
left: 11%;
|
|
top: 6vw;
|
|
}
|
|
|
|
.slogan>span:nth-child(2) {
|
|
position: relative;
|
|
display: none;
|
|
font-size: 6vw;
|
|
top: 12vw;
|
|
left: 12%;
|
|
font-family: "楷体";
|
|
}
|
|
|
|
.nav-item {
|
|
font-size: 27px !important;
|
|
}
|
|
|
|
.float-box>span {
|
|
display: block;
|
|
margin-top: 1%;
|
|
margin-bottom: 1%;
|
|
font-weight: 400;
|
|
line-height: 30px;
|
|
font-size: 2vw;
|
|
}
|
|
|
|
.application-container {
|
|
width: 100vw;
|
|
height: 100vw;
|
|
margin: auto;
|
|
margin-bottom: 10vw;
|
|
}
|
|
|
|
.application-container>div {
|
|
width: 50vw;
|
|
height: 40vw;
|
|
position: relative;
|
|
}
|
|
|
|
.app-item1 {
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.app-item1>img {
|
|
height: 40vw;
|
|
width: 50vw;
|
|
}
|
|
|
|
.app-item2 {
|
|
top: -40vw;
|
|
left: 50vw;
|
|
}
|
|
|
|
.app-item2>span {
|
|
position: relative;
|
|
display: block;
|
|
max-width: 35vw;
|
|
}
|
|
|
|
.app-item2>span:first-child {
|
|
font-size: 7vw;
|
|
top: 20%;
|
|
left: 10%;
|
|
line-height: 7vw;
|
|
font-weight: bolder;
|
|
}
|
|
|
|
.app-item2>span:last-child {
|
|
font-size: 4vw;
|
|
line-height: 4vw;
|
|
top: 35%;
|
|
left: 14%;
|
|
font-family: "楷体";
|
|
}
|
|
|
|
.app-item3 {
|
|
top: -40vw;
|
|
left: 0;
|
|
background-color: rgba(16, 72, 176, 0.69);
|
|
color: white;
|
|
}
|
|
|
|
.app-item3>span {
|
|
position: relative;
|
|
display: block;
|
|
}
|
|
|
|
.app-item3>span:first-child {
|
|
font-size: 7vw;
|
|
top: 15%;
|
|
left: 16%;
|
|
line-height: 7vw;
|
|
font-weight: bolder;
|
|
}
|
|
|
|
.app-item3>span:nth-child(2) {
|
|
font-size: 4vw;
|
|
line-height: 4vw;
|
|
top: 30%;
|
|
left: 20%;
|
|
font-family: "楷体";
|
|
}
|
|
|
|
.app-item3>img {
|
|
width: 40vw;
|
|
height: 30vw;
|
|
position: relative;
|
|
top: 14vw;
|
|
left: 15vw;
|
|
}
|
|
|
|
|
|
.app-item4 {
|
|
top: -80vw;
|
|
left: 50vw;
|
|
display: flex;
|
|
}
|
|
|
|
.app-item4>* {
|
|
position: relative;
|
|
}
|
|
|
|
.app-item4>img {
|
|
left: -5vw;
|
|
width: 35vw;
|
|
height: 23.5vw;
|
|
}
|
|
|
|
.app-item4>div {
|
|
left: -5vw;
|
|
top: -5vw;
|
|
background-color: rgb(16, 72, 176);
|
|
height: 28.5vw;
|
|
width: 25vw;
|
|
}
|
|
|
|
.app-item4>span:nth-child(3) {
|
|
position: absolute;
|
|
font-size: 7vw;
|
|
top: 85%;
|
|
left: 20%;
|
|
line-height: 7vw;
|
|
font-weight: bolder;
|
|
}
|
|
|
|
.app-item4>span:nth-child(4) {
|
|
position: absolute;
|
|
font-size: 4vw;
|
|
line-height: 4vw;
|
|
top: 115%;
|
|
left: 25%;
|
|
font-family: "楷体";
|
|
}
|
|
} |